/* ── Aurora Card & Board Focus View (Phase 1) ────────────────────────────── Tap-to-inspect overlay for the hero's hole cards / community board. See audit/AURORA-CARD-BOARD-FOCUS-VIEW-DESIGN.md for the full architecture. Namespace is deliberately distinct from the existing, unrelated `aurora-seat-focus` (aurora-motion.js's seat brightness-pulse) — see Phase 0 audit §7 / §4 collision note. z-index 260: above the hero fan (190, style.css) and pot rail (180, aurora-experience-layer.css), below the assistant full panel (410) and invite/lobby overlays (300-320), and far below aurora-modal's alert/confirm (9500) and the orientation gate (9999) so either can still interrupt Focus View if needed — see Phase 0 audit §2 z-index ladder. */ .aurora-card-focus { position: fixed; inset: 0; z-index: 260; display: flex; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 200ms ease; } .aurora-card-focus.is-open { pointer-events: auto; opacity: 1; visibility: visible; } .aurora-card-focus__backdrop { position: absolute; inset: 0; /* Dark and strongly blurred — table shapes/lighting stay faintly visible underneath (spec: "do not completely remove it, preserve some spatial awareness") but individual card rank/suit text must NOT stay legible through the scrim. Tuned up from an initial 0.82/10px pass: some board layouts (F2, whose live rows/shared-river sit centrally on the felt, roughly where the enlarged clone is also centered) let the real board's own bright white card faces bleed through at that lower opacity, visually overlapping the clone underneath it — confirmed via direct screenshot, not guessed. Matches showdown's .sd2-overlay precedent (near-opaque + blur) for the same underlying reason: partial-opacity dimming isn't enough to unreadable-ify a bright card face. */ background: rgba(3, 7, 10, 0.93); backdrop-filter: blur(18px) saturate(0.55); -webkit-backdrop-filter: blur(18px) saturate(0.55); } .aurora-card-focus__stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; /* Top AND bottom padding are taller than the two side edges — Phase 2 finding: .aurora-card-focus__content fills exactly this padding-box, so the fit-to-region scale in focus-view.js only ever sizes content up to what's left INSIDE it; reserving clearance here means the JS scale math never has to know about the timer/close/preview separately. #timerWrap is 42x42px at top:+10px (bottom edge safe-t+52px); the close button is 40x40px at the same top:+10px (bottom edge safe-t+50px) — safe-t+64px clears the taller of the two with a ~12px buffer. Bottom clearance (this phase): the secondary hand<->board preview strip is 52px tall (still clears the ~44px WCAG 2.5.5 minimum touch-target size), anchored safe-b+10px from the edge — safe-b+72px clears it with a ~10px buffer. Kept deliberately tight: every px reserved here comes straight out of the main content's own available height, and boards with a taller natural aspect ratio (Countdown's 4-row triangle) are the most height-constrained case already — see applyScale()'s fit-to-region comment. Sides stay at the original safe+16px. */ padding: calc(var(--aur-safe-t, 0px) + 64px) calc(var(--aur-safe-r, 0px) + 16px) calc(var(--aur-safe-b, 0px) + 72px) calc(var(--aur-safe-l, 0px) + 16px); /* Real-device acceptance finding: .stage/.content paint ON TOP of .backdrop (later DOM siblings, both position:auto z-index) and, at flex:1/100% size, cover the exact same full-viewport area — so without this, EVERY tap anywhere in that area (even the wide dimmed margin around the cards) hit .stage/.content instead of .backdrop and did NOTHING, since only .backdrop has the close listener. Verified via a real page.mouse.click() at real screen coordinates (not the DOM .click() method, which bypasses hit-testing and had been masking this in the Phase 1 test suite — see focus-view.test.js's updated backdrop test). pointer-events:none here lets taps in the empty margin fall through to .backdrop and close as intended; the clone itself (.aurora-card-focus__clone, below) and the close button opt back into pointer-events:auto so tapping directly ON a card stays inert (no accidental dismissal) while the close button stays clickable. */ pointer-events: none; } .aurora-card-focus__content { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* The cloned .hand-fan--hero / #communityCards node — geometry, card order and rank/suit markup are the real renderer's output, untouched; only this wrapper's own transform scales it up. transform-origin center keeps the "rises toward the player" feel symmetric regardless of scale factor. */ .aurora-card-focus__clone { transform-origin: center center; transition: transform 200ms ease; /* .hand-fan--hero/.community-cards are normally positioned within their own layout flow (static/relative) — force static-safe centering here regardless of whatever positioning the live table gave them. */ position: static !important; left: auto !important; top: auto !important; /* Opts back into hit-testing (parent .content is pointer-events:none, see above) — a tap that actually lands ON a card is inert (no listener, so no close), rather than falling through to the backdrop and closing Focus View while the player is mid-inspection. */ pointer-events: auto; } /* Hand<->board switch crossfade (this phase) — purely decorative: mode/DOM state in focus-view.js's switchTo() is already fully correct before this ever plays, so a skipped/interrupted animation can't leave anything wrong. "attention shifts" rather than "modal closes then reopens" — a quick fade-through, not a scale/slide choreography. Re-triggered on every switch via a class remove+reflow+re-add (see switchTo()), which restarts the animation even if a prior switch's was still mid-flight. */ @keyframes auroraFocusCrossfade { 0% { opacity: .15; } 100% { opacity: 1; } } .aurora-card-focus__content.is-switching { animation: auroraFocusCrossfade 180ms ease; } @media (prefers-reduced-motion: reduce) { .aurora-card-focus, .aurora-card-focus__clone { transition-duration: 1ms; } .aurora-card-focus__content.is-switching { animation: none; } } .aurora-card-focus__timer-slot { position: absolute; top: calc(var(--aur-safe-t, 0px) + 10px); left: calc(var(--aur-safe-l, 0px) + 10px); } /* #timerWrap keeps its own normal size/appearance while relocated here — only its position changes, matching the "compact version in a safe corner" spec requirement, since the ring is already compact by design. */ .aurora-card-focus-timer { position: relative; } .aurora-card-focus__close { position: absolute; top: calc(var(--aur-safe-t, 0px) + 10px); right: calc(var(--aur-safe-r, 0px) + 10px); width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(12, 16, 20, 0.65); color: #fff; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; /* .stage (its parent) is pointer-events:none — opt back in explicitly or the close button stops receiving real taps too (same bug class as the backdrop fix above). */ pointer-events: auto; } .aurora-card-focus__close:hover, .aurora-card-focus__close:focus-visible { background: rgba(12, 16, 20, 0.85); outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } /* Secondary hand<->board preview (this phase) — a small, clearly-secondary tappable strip anchored bottom-center of the stage, in the padding band .stage's own padding-bottom now reserves (see above) so it never overlaps the main focused content, whatever that content's own size. Deliberately modest: real playing-card-sized clone (applyPreviewScale() caps it at 1x, never larger), a plain label, muted styling — it must read as "tap to switch," not compete with the main event. */ .aurora-card-focus__preview { position: absolute; left: 50%; bottom: calc(var(--aur-safe-b, 0px) + 10px); transform: translateX(-50%); width: min(170px, 34vw); height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 3px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(12, 16, 20, 0.55); overflow: hidden; cursor: pointer; /* .stage (its parent) is pointer-events:none — opt back in explicitly, same reasoning as the close button above. */ pointer-events: auto; } .aurora-card-focus__preview[hidden] { display: none; } .aurora-card-focus__preview:hover, .aurora-card-focus__preview:focus-visible { background: rgba(12, 16, 20, 0.75); outline: 2px solid rgba(255, 255, 255, 0.4); outline-offset: 2px; } .aurora-card-focus__preview-clone-slot { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; } /* Same static-safe centering .aurora-card-focus__clone gets (above) — .hand-fan--hero/.community-cards can carry their own position:relative from the live table, and this must center predictably inside the small preview slot regardless. pointer-events isn't set here: the preview clone sits inside a real