:root {
        --safe-top: env(safe-area-inset-top, 0px);
        --safe-right: env(safe-area-inset-right, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
        --safe-left: env(safe-area-inset-left, 0px);
        color-scheme: dark;
        --void: #080a0d;
        --ink: #dce8e5;
        --muted: #81918f;
        --panel: rgba(12, 17, 20, .9);
        --line: rgba(184, 255, 233, .22);
        --signal: #d9ff58;
        --cyan: #72f4e0;
        --danger: #ff526e;
        font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
      }
      * { box-sizing: border-box; }
      html, body, #app { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--void); }
      /* Gameplay chrome (HUD, hunt controls, dialogs) is appended directly to
         body rather than inside #app. Own gestures at the document root so a
         double tap or pinch on those elements cannot escape the canvas rule
         and scale/rubber-band Safari's visual viewport. A paint dialog remains
         intentionally scrollable because it is its own overflow container with
         touch-action: manipulation; form controls still receive taps and keep
         their explicit text-selection/callout exceptions below. */
      html, body { touch-action: none; overscroll-behavior: none; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
      body { color: var(--ink); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
      body::after { content: ""; position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0 2px, #a8fff1 3px); mix-blend-mode: overlay; }
      #app { touch-action: none; }
      #app canvas { display: block; width: 100%; height: 100%; touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
      button, input { font: inherit; }
      /* The body-level selection/callout suppression is for gameplay gestures;
         text entry must keep native select + iOS long-press paste. */
      .join-input { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
      .cursed-btn { min-width: 52px; min-height: 48px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: linear-gradient(#263033, #101619); box-shadow: 0 4px 16px #0008, inset 0 1px #fff2; font-weight: 900; letter-spacing: .09em; }
      .cursed-btn:active { transform: translateY(1px); filter: brightness(1.2); }
      .cursed-btn:disabled { color: var(--muted); filter: saturate(.2); }
      .cursed-btn:focus-visible, input:focus-visible, .support-link:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
      .cursed-btn--signal { color: #101300; background: var(--signal); border-color: #f2ffad; }
      .cursed-btn--fire { color: white; background: var(--danger); border-color: #ff9cab; }
      .cursed-btn--cancel { min-width: 48px; font-size: 28px; }
      .join-screen, .fatal-screen, .resume-screen, .capacity-screen { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 10%, #243138 0, #0b0d10 45%, #030405 100%); }
      /* The join card can outgrow a short viewport (small phone, keyboard up):
         let the overlay scroll instead of clipping the card top. `safe` keeps
         the top reachable where supported; elsewhere the base rule's plain
         center still applies. */
      .join-screen { place-items: safe center; overflow-y: auto; touch-action: pan-y; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
      .join-screen::before { content: ""; position: absolute; inset: 0; opacity: .24; background: linear-gradient(115deg, transparent 45%, #ff3db61a 46% 47%, transparent 48%), repeating-linear-gradient(90deg, transparent 0 39px, #65ffe608 40px); }
      .join-card { position: relative; width: min(100%, 390px); padding: 26px 20px 20px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 24px 80px #000, 8px 0 #ff3db615, -8px 0 #65ffe615; }
      .join-card__eyebrow { color: var(--cyan); font-size: 10px; letter-spacing: .12em; }
      .join-card h1 { margin: 12px 0 0; font-size: clamp(44px, 16vw, 72px); line-height: .9; letter-spacing: -.08em; text-shadow: 3px 0 #ff3db6, -3px 0 #65ffe6; }
      .join-card p { color: #acbab7; line-height: 1.5; font-size: 13px; }
      .join-input { width: 100%; min-height: 48px; margin: 7px 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: #050708; }
      .join-card__label { margin: 13px 0 6px; color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
      .role-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
      .role-option { position: relative; display: grid; gap: 5px; justify-items: center; align-content: start; min-height: 72px; padding: 9px 4px 7px; border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(#1c2528, #0b1013); box-shadow: 0 3px 12px #0007, inset 0 1px #fff1; cursor: pointer; }
      .role-option:active { transform: translateY(1px); }
      /* The radio itself is invisible but covers the whole card so native tap,
         label, and arrow-key semantics all keep working. */
      .role-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
      /* Keyboard-only ring: a tap already shows the signal selected state, and
         :focus-within would double-ring every click. */
      .role-option:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
      .role-option__art { display: flex; align-items: center; height: 30px; }
      .role-option__art img { width: 28px; height: 28px; image-rendering: pixelated; filter: saturate(.15) brightness(.72); }
      .role-option__art img + img { margin-left: -5px; }
      .role-option__label { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
      .role-option[data-checked="true"] { border-color: var(--signal); background: linear-gradient(#222c11, #0d1104); box-shadow: 0 0 0 1px var(--signal), 0 0 18px #d9ff5830, inset 0 1px #fff2; }
      .role-option[data-checked="true"] .role-option__art img { filter: none; }
      .role-option[data-checked="true"] .role-option__label { color: var(--signal); }
      .role-flavor { min-height: 50px; margin: 8px 0 0; padding: 8px 10px; color: #acbab7; background: #05090b; border-left: 3px solid var(--cyan); font-size: 11px !important; line-height: 1.5 !important; }
      .join-card .cursed-btn { width: 100%; margin-top: 12px; }
      .join-card__share { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 10px; border: 1px dashed var(--line); border-radius: 4px; background: #05090b; }
      .join-card__share-copy { flex: 1; min-width: 0; display: grid; gap: 3px; }
      .join-card__share-copy strong { color: var(--cyan); font-size: 10px; letter-spacing: .12em; }
      .join-card__share-copy span { color: var(--muted); font-size: 10px; line-height: 1.45; }
      .join-card__share .cursed-btn { width: auto; flex-shrink: 0; margin: 0; padding: 0 13px; font-size: 11px; }
      .join-card__footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
      .join-card__footer .cursed-btn { width: auto; margin: 0; padding: 0 14px; font-size: 11px; }
      /* Colorful but still a footer link, not a billboard: signal text on a
         faint warm tint, no hard shadow, no full-width block. */
      .support-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 10px; color: var(--signal); background: linear-gradient(120deg, #d9ff5814, #ff3db60f); border: 1px solid #d9ff5833; border-radius: 4px; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-decoration: none; }
      .support-link:hover { border-color: #d9ff5477; background: linear-gradient(120deg, #d9ff5822, #ff3db61a); filter: brightness(1.1); }
      .support-link:active { translate: 0 1px; }
      .support-link__emoji { font-size: 15px; line-height: 1; filter: drop-shadow(0 0 4px #d9ff5866); }
      .support-link__text { font-size: inherit; }
      /* Role-first tutorial: real game art carries the fantasy while concise
         DOM copy and device-specific rows carry the instructions. */
      .tutorial-launcher { position: fixed; z-index: 1200; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 0 14px; cursor: pointer; }
      /* Above the join screen (3000), so HOW TO PLAY works before joining;
         below the viewport zoom nudge (3200), which must never be covered. */
      .tutorial-overlay { position: fixed; inset: 0; z-index: 3100; display: grid; place-items: safe center; padding: 18px; overflow-y: auto; touch-action: pan-y; background: radial-gradient(circle at 50% 0, #173139cc, #030507f5 60%); font-family: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; color: var(--ink); }
      .tutorial-dialog { --tutorial-accent: var(--signal); position: relative; width: min(980px, 100%); max-height: calc(100dvh - 36px); overflow: auto; padding: 16px; background: linear-gradient(145deg, #11191df7, #06090bf9); border: 2px solid var(--tutorial-accent); box-shadow: 0 28px 90px #000, 9px 9px 0 color-mix(in srgb, var(--tutorial-accent) 22%, transparent); outline: none; touch-action: pan-y; }
      .tutorial-dialog[data-tone="hunter"] { --tutorial-accent: var(--danger); }
      .tutorial-dialog[data-tone="tips"] { --tutorial-accent: var(--cyan); }
      .tutorial-close { position: absolute; z-index: 2; top: 10px; right: 10px; width: 42px; height: 42px; padding: 0; color: var(--ink); background: #030708dc; border: 1px solid var(--line); border-radius: 4px; font-size: 26px; font-weight: 900; cursor: pointer; }
      .tutorial-close:focus-visible, .tutorial-progress__item:focus-visible, .tutorial-video button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
      .tutorial-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-right: 50px; }
      .tutorial-progress__item { min-height: 38px; padding: 6px 8px; color: var(--muted); background: #030708c7; border: 1px solid var(--line); font-size: 9px; font-weight: 900; letter-spacing: .08em; cursor: pointer; }
      .tutorial-progress__item[data-active="true"] { color: #080b02; background: var(--tutorial-accent); border-color: #fff9; box-shadow: 0 0 18px color-mix(in srgb, var(--tutorial-accent) 32%, transparent); }
      .tutorial-progress__item[data-video="true"] { border-top-color: var(--tutorial-accent); }
      .tutorial-content { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); gap: 20px; align-items: center; margin-top: 14px; }
      .tutorial-art { min-width: 0; }
      .tutorial-dialog[data-has-video="true"] .tutorial-content { grid-template-columns: minmax(250px, .72fr) minmax(320px, 1.28fr); align-items: center; }
      .tutorial-dialog[data-has-video="true"] .tutorial-art { display: grid; place-items: center; }
      .tutorial-video { position: relative; height: min(60dvh, 580px); aspect-ratio: 9 / 16; max-width: 100%; overflow: hidden; isolation: isolate; background: #020405; border: 2px solid var(--tutorial-accent); box-shadow: 10px 10px 0 #0009, 0 0 36px color-mix(in srgb, var(--tutorial-accent) 18%, transparent); }
      .tutorial-video::after { content: "SOUND ON"; position: absolute; z-index: 3; top: 10px; right: 9px; padding: 5px 7px; color: #fff; background: #030708d9; border: 1px solid #fff5; font-size: 8px; font-weight: 900; letter-spacing: .11em; pointer-events: none; }
      .tutorial-video__media { display: block; width: 100%; height: 100%; object-fit: contain; background: #020405; }
      .tutorial-video__badge { position: absolute; z-index: 3; top: 10px; left: 9px; padding: 5px 7px; color: #080b02; background: var(--tutorial-accent); box-shadow: 3px 3px 0 #000; font-size: 8px; font-weight: 900; letter-spacing: .09em; pointer-events: none; }
      .tutorial-video__play, .tutorial-video__replay { position: absolute; z-index: 4; left: 50%; translate: -50% 0; min-height: 48px; padding: 0 16px; color: #080b02; background: var(--tutorial-accent); border: 2px solid #fff9; box-shadow: 6px 6px 0 #000c, 0 0 28px color-mix(in srgb, var(--tutorial-accent) 42%, transparent); font: 900 11px/1 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; letter-spacing: .09em; white-space: nowrap; cursor: pointer; }
      .tutorial-video__play { top: 50%; translate: -50% -50%; }
      .tutorial-video__replay { bottom: 64px; }
      .tutorial-video:not([data-state="ready"]):not([data-state="error"]) .tutorial-video__play { opacity: 0; pointer-events: none; }
      .tutorial-video[data-state="loading"]::before { content: "LOADING VIDEO…"; position: absolute; z-index: 4; left: 50%; top: 50%; translate: -50% -50%; padding: 8px 10px; color: var(--tutorial-accent); background: #030708e8; border: 1px solid currentColor; font-size: 9px; font-weight: 900; letter-spacing: .1em; white-space: nowrap; }
      .tutorial-copy { min-width: 0; }
      .tutorial-eyebrow { color: var(--tutorial-accent); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
      .tutorial-copy h2 { margin: 8px 0 9px; color: #f5fbf9; font-size: clamp(28px, 4.2vw, 46px); line-height: .92; letter-spacing: -.045em; text-shadow: 3px 3px #000, 0 0 22px color-mix(in srgb, var(--tutorial-accent) 28%, transparent); }
      .tutorial-body { margin: 0; color: #b9c8c5; font-size: 12px; line-height: 1.5; }
      .tutorial-lessons { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
      .tutorial-lessons li { display: grid; grid-template-columns: 86px 1fr; gap: 10px; align-items: start; padding: 8px 9px; background: linear-gradient(90deg, color-mix(in srgb, var(--tutorial-accent) 13%, #071012), #07101288); border-left: 3px solid var(--tutorial-accent); }
      .tutorial-lessons strong { color: var(--tutorial-accent); font-size: 10px; line-height: 1.4; letter-spacing: .1em; }
      .tutorial-lessons span { color: #e1e9e7; font-size: 10px; line-height: 1.4; }
      .tutorial-devices { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
      .tutorial-devices > div { min-height: 66px; padding: 9px; background: #030708c7; border: 1px solid var(--line); }
      .tutorial-devices strong, .tutorial-devices span { display: block; }
      .tutorial-devices strong { margin-bottom: 5px; color: var(--cyan); font-size: 9px; letter-spacing: .14em; }
      .tutorial-devices span { color: #edf4f2; font-size: 10px; line-height: 1.35; }
      .tutorial-callout { margin: 10px 0 0; padding: 8px 10px; color: #fff; background: #05090b; border: 1px dashed color-mix(in srgb, var(--tutorial-accent) 65%, #fff); font-size: 9px; font-weight: 900; line-height: 1.4; letter-spacing: .045em; }
      .tutorial-controls { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(150px, 1.3fr); gap: 8px; width: min(420px, 100%); margin: 14px 0 0 auto; }
      .tutorial-controls .cursed-btn { cursor: pointer; }
      .tutorial-controls__next { color: #101300; background: var(--tutorial-accent); border-color: #fff9; }
      .tutorial-scene { position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; background: #05090b; border: 1px solid #72f4e077; box-shadow: inset 0 0 40px #000, 6px 6px 0 #0008; }
      .tutorial-scene::after { content: ""; position: absolute; z-index: 8; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, #dffff40a 4px); mix-blend-mode: screen; }
      .tutorial-scene__hero, .tutorial-scene__capture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
      .tutorial-scene__hero { filter: saturate(1.08) contrast(1.04); }
      .tutorial-scene__capture { object-fit: contain; image-rendering: auto; }
      .tutorial-scene__label { position: absolute; z-index: 10; padding: 6px 8px; color: var(--cyan); background: #030708e8; border: 1px solid currentColor; box-shadow: 3px 3px 0 #000; font-size: clamp(8px, 1.3vw, 11px); font-weight: 900; letter-spacing: .08em; }
      .tutorial-scene__label[data-tone="signal"] { color: var(--signal); }
      .tutorial-scene__label[data-tone="danger"] { color: #ff8fa0; }
      .tutorial-scene__label[data-corner="bl"] { left: 4%; bottom: 7%; }
      .tutorial-scene__label[data-corner="tr"] { right: 4%; top: 7%; }
      .tutorial-scene[data-scene="hider"] > .tutorial-scene__label,
      .tutorial-scene[data-scene="hunter"] > .tutorial-scene__label { left: 3%; bottom: 5%; white-space: nowrap; }
      .tutorial-scene[data-scene="tips"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: stretch; padding: 8%; background: radial-gradient(circle at 50% 50%, #173038, #030507 72%); }
      .tutorial-scene__tip { display: grid; place-items: center; align-content: center; gap: 7px; color: var(--cyan); background: linear-gradient(#132026e8, #05090be8); border: 2px solid currentColor; box-shadow: 4px 4px 0 #000, inset 0 0 24px currentColor; }
      .tutorial-scene__tip[data-tone="signal"] { color: var(--signal); }
      .tutorial-scene__tip[data-tone="danger"] { color: #ff8fa0; }
      .tutorial-scene__tip-icon { min-height: 48px; display: grid; place-items: center; font-size: clamp(25px, 5vw, 46px); font-weight: 900; line-height: 1; text-shadow: 0 0 18px currentColor; }
      .tutorial-scene__tip-label { padding: 4px 7px; color: #fff; background: #030708e8; font-size: clamp(8px, 1.4vw, 11px); font-weight: 900; letter-spacing: .12em; }
      .tutorial-scene__ghost { width: clamp(42px, 7vw, 68px); image-rendering: pixelated; filter: drop-shadow(0 0 12px var(--cyan)); }
      .game-hud { position: fixed; z-index: 1000; top: 0; left: 50%; translate: -50% 0; width: min(100%, 900px); min-height: calc(68px + env(safe-area-inset-top)); padding: calc(9px + env(safe-area-inset-top)) 12px 9px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; background: linear-gradient(#0a0d0ff5, #0a0d0fd4); border-bottom: 2px solid #d9ff5866; backdrop-filter: blur(12px); font-size: 11px; letter-spacing: .08em; box-shadow: 0 6px 24px #000b; }
      .game-hud__phase { position: relative; padding-top: 13px; color: var(--signal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(17px, 4.7vw, 25px); line-height: 1; letter-spacing: .035em; text-shadow: 2px 2px #000, 0 0 16px #d9ff5866; animation: phase-signal 1.8s steps(2, end) infinite; }
      .game-hud__phase::before { content: "ROUND STATUS"; position: absolute; top: 0; left: 1px; color: var(--cyan); font-size: 8px; line-height: 1; letter-spacing: .16em; text-shadow: none; }
      .game-hud__timer { min-width: 52px; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
      .game-hud[data-phase="intermission"] .game-hud__timer { min-width: 82px; display: grid; color: var(--signal); font-size: 34px; line-height: .85; text-align: center; text-shadow: 2px 2px #000, 0 0 18px #d9ff58aa; }
      .game-hud[data-phase="intermission"] .game-hud__timer::before { content: "STARTS IN"; color: var(--cyan); font-size: 8px; line-height: 1; letter-spacing: .12em; text-shadow: none; }
      .game-hud__timer[data-urgent="true"] { color: #fff !important; animation: countdown-pop .5s steps(2,end) infinite; }
      .game-hud__alive { color: var(--cyan); }
      .phase-hint { position: fixed; z-index: 1000; top: calc(68px + env(safe-area-inset-top)); left: 50%; translate: -50% 0; max-width: calc(100% - 20px); padding: 7px 14px; color: #f2f6f5; background: #06090aeb; border: 1px solid #d9ff5844; border-top: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-align: center; text-overflow: ellipsis; overflow: hidden; pointer-events: none; white-space: nowrap; box-shadow: 0 6px 20px #0009; }
      .stamp-btn { position: fixed; z-index: 1100; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); translate: -50% 0; width: min(260px, calc(100% - 40px)); color: #111600; background: var(--signal); border-color: #efffa0; }
      /* Secondary hide-phase control stacked above STAMP/PAINT: release the
         stamp to pick a better spot. Quieter than the signal primary. */
      .adjust-btn { position: fixed; z-index: 1100; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); translate: -50% 0; width: min(180px, calc(100% - 40px)); min-height: 42px; color: var(--cyan); background: #050708e6; border: 1px solid var(--line); font-size: 11px; }
      .game-status { position: fixed; z-index: 1100; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom)); color: var(--cyan); padding: 5px 7px; font-size: 10px; background: #030708c7; pointer-events: none; }
      .role-next-btn { position: fixed; z-index: 1100; right: 10px; bottom: calc(40px + env(safe-area-inset-bottom)); min-height: 40px; padding: 0 12px; color: var(--cyan); background: #050708e6; border: 1px solid var(--line); border-radius: 3px; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
      /* Results sit at z=1500. Keep the advertised results-phase toggle above
         that layer and, for the map-reveal bottom sheet, lift it clear of both
         the collapsed bar and the expanded body. */
      .role-next-btn[data-phase="results"] { z-index: 1600; }
      body[data-map-reveal="true"] .results-card + .role-next-btn[data-phase="results"] { bottom: calc(56px + env(safe-area-inset-bottom)); }
      body[data-map-reveal="true"] .results-card[data-sheet="expanded"] + .role-next-btn[data-phase="results"] { bottom: calc(30vh + 56px + env(safe-area-inset-bottom)); }
      .role-next-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
      .role-next-btn:active { transform: translateY(1px); filter: brightness(1.3); }
      /* Zoom-stranding nudge: positioned INTO the visual viewport by
         viewportGuard.ts (left/top/transform set inline per vv event), so it
         is the one fixed element a pinch zoom cannot push off-screen. */
      .viewport-zoom-nudge { position: fixed; z-index: 3200; transform-origin: top left; max-width: 280px; padding: 10px 12px; color: #101300; background: var(--signal); border: 2px solid #020405; box-shadow: 4px 4px 0 #000c; font-size: 12px; font-weight: 900; letter-spacing: .08em; pointer-events: auto; touch-action: manipulation; cursor: pointer; }
      .audio-control { position: fixed; z-index: 1700; left: max(9px, env(safe-area-inset-left)); top: calc(78px + env(safe-area-inset-top)); display: flex; align-items: start; gap: 6px; }
      .audio-control button { min-height: 42px; color: var(--ink); background: #081014ef; border: 1px solid #72f4e077; border-radius: 5px; box-shadow: 3px 3px 0 #000; font: 900 10px ui-monospace,monospace; letter-spacing: .08em; }
      .audio-control button:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
      .audio-control__speaker { width: 44px; padding: 0; font-size: 20px !important; line-height: 1; }
      .audio-control__panel { display: flex; gap: 5px; padding: 4px; background: #030708e8; border: 1px solid #d9ff5844; box-shadow: 4px 4px 0 #0009; }
      .audio-control__panel button { min-width: 76px; padding: 0 9px; }
      .audio-control__panel button[aria-pressed="true"] { color: #101300; background: var(--signal); border-color: #efffa0; }
      /* Private lobbies are a full-screen layer. Lift the existing persistent
         audio control above it so BGM/SFX remain available while assembling a room. */
      body.private-lobby-open .audio-control { z-index: 3090; }
      /* Above the z=1250 magnifier copy: the reticle must never disappear behind its own lens. */
      .hunt-lens { position: fixed; z-index: 1290; border: 4px solid #f4e77b; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 2px #020405, 0 0 0 6px #72f4e066, 0 0 34px #ffe76588, inset 0 0 34px #58f4dd45; }
      .hunt-lens::before, .hunt-lens::after { content: ""; position: absolute; inset: 12px; border: 2px dashed #72f4e0aa; border-radius: 50%; }
      .hunt-lens::after { inset: -9px; border: 3px solid transparent; border-top-color: var(--danger); border-bottom-color: var(--danger); animation: reticle-spin 3.8s steps(12, end) infinite; }
      .hunt-lens:not([data-locked="true"])::after { display: none; }
      .hunt-aim-hint { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity .16s ease-out; }
      .hunt-aim-hint[data-visible="true"] { opacity: 1; }
      .hunt-aim-hint text { fill: #f4e77b; stroke: #020405; stroke-width: 3px; paint-order: stroke fill; font: 900 10px ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; letter-spacing: .14em; text-anchor: middle; filter: drop-shadow(0 0 5px #72f4e088); }
      .hunt-crosshair { position: absolute; width: 126px; height: 126px; left: calc(50% - 63px); top: calc(50% - 63px); background: url('/ui/hunter-crosshair.png') center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 #000) drop-shadow(0 0 7px #000); animation: target-lock-in .42s steps(5, end), target-pulse 1.2s steps(2, end) .42s infinite; }
      .hunt-actions { position: fixed; z-index: 1300; display: flex; gap: 6px; }
      .hunter-position { position: fixed; z-index: 1280; top: calc(92px + env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 66px; padding: 4px; display: grid; gap: 4px; pointer-events: none; color: var(--signal); background: #030708dc; border: 1px solid #72f4e088; box-shadow: 3px 3px 0 #000; }
      .hunter-position__label { font-size: 8px; font-weight: 900; line-height: 1; letter-spacing: .14em; text-align: center; }
      .hunter-position__track { position: relative; display: block; width: 56px; height: 92px; overflow: hidden; background: repeating-linear-gradient(0deg, #72f4e01c 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, #72f4e01c 0 1px, transparent 1px 9px), #020405e8; border: 1px solid #72f4e099; box-shadow: inset 0 0 0 2px #000; }
      .hunter-position__thumb { position: absolute; min-width: 5px; min-height: 7px; background: #d9ff5838; border: 2px solid var(--signal); box-shadow: 0 0 7px #d9ff58aa, inset 0 0 0 1px #000; transition: left .05s linear, top .05s linear; }
      .hunter-cooldown { --cooldown-remaining: 100%; position: fixed; z-index: 1420; left: 50%; top: calc(88px + env(safe-area-inset-top)); translate: -50% 0; width: min(520px, calc(100% - 28px)); min-height: 80px; padding: 13px 16px 18px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; color: #fff; background: #17070bf2; border: 3px solid var(--danger); box-shadow: 7px 7px 0 #000, 0 0 42px #ff526e66; animation: weapon-jam .24s steps(2, end) 4; }
      .hunter-cooldown[data-severity="danger"] { background: #26070cf5; border-width: 4px; }
      .hunter-cooldown[data-severity="critical"] { background: #3a050cf7; border-color: #fff; box-shadow: 8px 8px 0 var(--danger), 0 0 52px #ff1d45aa; }
      .hunter-cooldown__icon { color: var(--danger); font-size: 40px; line-height: 1; text-shadow: 2px 2px #000, 0 0 16px currentColor; }
      .hunter-cooldown__copy { display: grid; gap: 4px; min-width: 0; }
      .hunter-cooldown__copy strong { color: #fff4a7; font-size: clamp(16px, 4.7vw, 24px); line-height: 1; letter-spacing: .05em; text-shadow: 2px 2px #000; }
      .hunter-cooldown__copy small { color: #ffabb8; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
      .hunter-cooldown__meter { position: absolute; left: 0; bottom: 0; width: var(--cooldown-remaining); height: 8px; background: repeating-linear-gradient(90deg, var(--danger) 0 16px, #fff4a7 16px 20px); transition: width .2s linear; }
      [hidden] { display: none !important; }
      .results-card { position: fixed; z-index: 1500; left: 50%; top: 50%; translate: -50% -50%; width: min(360px, calc(100% - 32px)); max-height: 70vh; overflow: auto; padding: 18px; color: var(--ink); background: #0a0f11f2; border: 1px solid var(--line); box-shadow: 0 22px 80px #000; }
      .results-card__bar { display: none; }
      /* Hiders-win reveal (body[data-map-reveal] set in main.ts): the map owns
         the FULL viewport; the scoreboard is a bottom sheet. Collapsed = bar
         only (playfield priority); resultsSheet.ts auto-expands it after the
         celebration slams and taps toggle it thereafter. */
      body[data-map-reveal="true"] .results-card { top: auto; bottom: 0; left: 50%; translate: -50% 0; width: min(420px, 100%); max-height: none; padding: 0; background: none; border: none; box-shadow: none; overflow: visible; animation: results-reveal-dock .4s ease-out both; }
      body[data-map-reveal="true"] .results-card__bar { display: block; width: 100%; min-height: 44px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); color: var(--signal); background: #0a0f11f2; border: 1px solid var(--line); border-bottom: none; font: inherit; font-size: 13px; font-weight: 900; letter-spacing: .1em; text-align: center; cursor: pointer; touch-action: manipulation; }
      body[data-map-reveal="true"] .results-card__body { max-height: 30vh; overflow: auto; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: #0a0f11f2; border: 1px solid var(--line); border-top: none; }
      body[data-map-reveal="true"] .results-card[data-sheet="collapsed"] .results-card__body { display: none; }
      @keyframes results-reveal-dock { from { opacity: 0; visibility: hidden; translate: -50% 14px; } }
      .results-card h2 { margin: 0 0 14px; color: var(--signal); font-size: clamp(22px, 7vw, 30px); line-height: 1; letter-spacing: .06em; text-shadow: 2px 2px #000, 0 0 18px #d9ff5855; }
      .results-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
      /* Names may be 40 unbroken chars (shared sanitizer contract); without a
         break opportunity the flex row would push the score out of the card. */
      .results-row span { min-width: 0; overflow-wrap: anywhere; }
      .left-tag { opacity: 0.4; font-size: 0.75em; letter-spacing: 0.08em; }
      .survivor-badge { color: var(--signal); font-size: 0.75em; letter-spacing: 0.08em; }
      /* Intermission style vote: centered card like .results-card, but a
         lower z-index (1450) so a results reveal (1500+) always wins, and it
         must never cover the bottom-right role toggle (.role-next-btn,
         z-index 1100) or the bottom-left tutorial launcher (z-index 1200) —
         both stay reachable since this card is centered, not full-width. */
      .vote-panel { position: fixed; z-index: 1450; left: 50%; top: 50%; translate: -50% -50%; width: min(340px, calc(100% - 48px)); max-height: 70vh; overflow: auto; padding: 18px; color: var(--ink); background: #0a0f11f2; border: 1px solid var(--line); box-shadow: 0 22px 80px #000; }
      .vote-panel__skip { position: absolute; top: 10px; right: 10px; min-width: 36px; min-height: 36px; padding: 0; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 4px; font-size: 16px; font-weight: 900; cursor: pointer; }
      .vote-panel__title { margin: 0 34px 6px 0; color: var(--signal); font-size: clamp(16px, 5vw, 20px); line-height: 1.2; letter-spacing: .06em; text-shadow: 2px 2px #000, 0 0 18px #d9ff5855; }
      .vote-panel__context { margin: 0 0 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }
      .vote-panel__chips { display: grid; gap: 8px; }
      .vote-panel__chip { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; font-size: 12px; }
      .vote-panel__chip-label { text-align: left; }
      .vote-panel__tally { min-width: 22px; padding: 2px 6px; color: var(--cyan); background: #030708c7; border-radius: 3px; font-size: 11px; }
      .vote-panel__done { padding: 10px 4px; color: var(--signal); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-align: center; }
      .kill-feed { position: fixed; z-index: 1200; right: 10px; top: calc(80px + env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 4px; align-items: flex-end; pointer-events: none; }
      /* Hunters own the top-right MAP rail (.hunter-position, top:92px, 66px wide,
         z-index 1280 — Reviewer amendment 8): drop the feed below its footprint.
         Rail bottom edge ≈ 206px (92 + padding 8 + border 2 + label ~8 + gap 4 +
         track 92); 212px leaves real clearance for font line-box variance. */
      body[data-role="sweeper"] .kill-feed { top: calc(212px + env(safe-area-inset-top)); }
      .kill-feed__row { background: #0a0f11d9; border: 1px solid var(--line); color: var(--ink); font-size: 11px; letter-spacing: .06em; padding: 4px 8px; max-width: min(70vw, 340px); overflow-wrap: anywhere; animation: feed-in .18s ease-out, feed-out .35s ease-in 6.65s forwards; }
      @keyframes feed-in { from { transform: translateX(8px); opacity: 0; } }
      @keyframes feed-out { to { transform: translateX(8px); opacity: 0; } }
      .fatal-screen { color: var(--danger); text-align: center; font-weight: 900; letter-spacing: .08em; }
      .resume-screen { color: var(--cyan); text-align: center; font-weight: 900; letter-spacing: .08em; }
      .capacity-screen { color: var(--ink); text-align: center; }
      .capacity-card { width: min(100%, 520px); padding: clamp(28px, 7vw, 52px); border: 1px solid var(--line); background: #080c0ee8; box-shadow: 7px 7px 0 #000, 0 0 48px #65ffe612; }
      .capacity-card__eyebrow { margin-bottom: 14px; color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
      .capacity-card h1 { margin: 0; color: var(--signal); font-size: clamp(32px, 9vw, 58px); line-height: .95; letter-spacing: -.04em; text-shadow: 3px 3px #000; }
      .capacity-card p { margin: 20px auto 0; max-width: 390px; color: var(--ink); line-height: 1.55; }
      .capacity-card .capacity-card__hint { margin-top: 6px; color: var(--muted); font-size: 12px; }
      .capacity-card button { margin-top: 26px; }
      @keyframes phase-signal { 0%, 91% { filter: none; } 92% { filter: brightness(1.3); } 94%, 100% { filter: none; } }
      @keyframes countdown-pop { 50% { scale: 1.13; color: var(--danger); } }
      @keyframes reticle-spin { to { rotate: 360deg; } }
      @keyframes target-lock-in { 0% { opacity: 0; scale: 1.42; rotate: -12deg; } 100% { opacity: 1; scale: 1; rotate: 0; } }
      @keyframes target-pulse { 50% { scale: 1.04; filter: brightness(1.18); } }
      @keyframes weapon-jam { 0%, 100% { translate: -50% 0; } 33% { translate: calc(-50% - 7px) 2px; } 66% { translate: calc(-50% + 7px) -2px; } }
      @media (max-width: 430px) {
        .game-hud { gap: 8px; }
        .game-hud__alive { max-width: 112px; font-size: 8px; letter-spacing: .035em; text-align: right; white-space: nowrap; }
      }
      @media (max-width: 720px) {
        .tutorial-overlay { padding: 8px; }
        .tutorial-dialog { max-height: calc(100dvh - 16px); padding: 12px; box-shadow: 0 20px 60px #000, 5px 5px 0 color-mix(in srgb, var(--tutorial-accent) 22%, transparent); }
        .tutorial-progress { gap: 4px; margin-right: 46px; }
        .tutorial-progress__item { min-height: 36px; padding: 4px 2px; font-size: 0; }
        .tutorial-progress__item::after { content: attr(data-short); font-size: 10px; }
        .tutorial-progress__item[data-video="true"]::after { content: "▶ " attr(data-short); }
        .tutorial-content { grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
        .tutorial-dialog[data-has-video="true"] .tutorial-content { grid-template-columns: 1fr; }
        .tutorial-video { height: min(48dvh, 480px); }
        .tutorial-scene { aspect-ratio: 16 / 7.6; }
        .tutorial-copy h2 { margin: 7px 0; font-size: clamp(25px, 8.6vw, 36px); }
        .tutorial-body { font-size: 11px; }
        .tutorial-lessons { gap: 5px; margin-top: 9px; }
        .tutorial-lessons li { grid-template-columns: 78px 1fr; padding: 6px 8px; }
        .tutorial-devices { margin-top: 7px; }
        .tutorial-devices > div { min-height: 58px; padding: 7px; }
        .tutorial-callout { margin-top: 7px; padding: 7px 8px; }
        .tutorial-controls { margin-top: 9px; }
      }
      @media (max-width: 430px) {
        .tutorial-devices { grid-template-columns: 1fr; }
        .tutorial-devices > div { min-height: 0; }
        .tutorial-scene { aspect-ratio: 16 / 8.4; }
        .tutorial-scene[data-scene="overview"] .tutorial-scene__label { padding: 4px 5px; font-size: 7px; }
      }
      @media (prefers-reduced-motion: reduce) { .game-hud__phase, .game-hud__timer, .hunt-lens::after, .hunt-crosshair, .hunter-cooldown { animation: none; } .hunt-aim-hint { transition: none; } }
/* Detached from the wizard so it never competes with a form or soft keyboard. */
.site-footer { position: fixed; z-index: 3001; right: 0; bottom: 0; left: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 12px max(12px, env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom)); background: var(--void); }
.site-footer .join-card__share { margin: 0; }
.join-private-btn, .join-back-btn { width: 100%; }
.join-private-status { color: var(--cyan); font-size: 10px; line-height: 1.4; }
/* The page-owned launcher remains usable over the onboarding form. */
.tutorial-launcher { z-index: 3002; }
@media (max-height: 520px) { .join-screen { place-items: start center; padding-top: 18px; } }
.private-art-slot-rail {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.private-art-slot {
  width: 16px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid rgba(214, 231, 255, 0.62);
  border-radius: 3px 2px 4px 2px;
  background: rgba(5, 9, 14, 0.72);
  transform: rotate(-2deg);
}

.private-art-slot:nth-child(even) { transform: rotate(2deg); }

.private-art-slot.is-filled {
  border-color: #d8ff61;
  background: repeating-linear-gradient(135deg, #b8ef3e 0 3px, #5e8418 3px 6px);
  box-shadow: 0 0 8px rgba(184, 239, 62, 0.3);
}

.private-entry, .private-lobby { position: fixed; inset: 0; z-index: 3050; overflow-y: auto; padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); color: var(--ink); background: radial-gradient(circle at 50% 0, #173139, #030507 58%); font-family: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; touch-action: pan-y; }
.private-entry { display: grid; place-items: safe center; }
.private-entry__card { width: min(100%, 520px); padding: 24px; border: 1px solid var(--cyan); background: #080d10f2; box-shadow: 8px 8px 0 #000; }
.private-entry__card h2, .private-lobby h2, .private-lobby h3 { margin: 4px 0 9px; color: var(--signal); letter-spacing: .08em; }
.private-entry__divider { padding: 16px 0 8px; color: var(--muted); text-align: center; }
.private-entry__join { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.private-entry__error, .private-lobby__status { min-height: 18px; color: var(--danger); font-size: 11px; }
.private-lobby { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); grid-template-areas: "header header" "roster controls" "chat controls" "status leave"; gap: 10px; align-content: start; }
.private-lobby > section, .private-lobby__header { padding: 12px; border: 1px solid var(--line); background: #080d10ed; box-shadow: 5px 5px 0 #0008; }
.private-lobby__header { grid-area: header; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.private-lobby__roster { grid-area: roster; }
.private-lobby__controls { grid-area: controls; }
.private-lobby__chat { grid-area: chat; }
.private-lobby__status { grid-area: status; padding: 8px; }
.private-lobby__leave { grid-area: leave; align-self: start; }
.private-roster-row { display: grid; grid-template-columns: minmax(110px, 1fr) auto 88px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid #ffffff12; }
.private-roster-row__identity { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.private-roster-row__identity strong { overflow: hidden; text-overflow: ellipsis; }
.private-roster-row__identity span { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.private-host-badge { padding: 2px 4px; color: #091000 !important; background: var(--signal); }
.private-ready { color: var(--muted); font-size: 9px; font-weight: 900; text-align: right; }
.private-ready.is-ready { color: var(--signal); }
.private-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .65fr); gap: 8px; align-items: end; }
.private-setup__identity, .private-setup__role { min-width: 0; display: grid; gap: 4px; }
.private-setup__identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.private-field-label { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.private-setup .join-input, .private-setup .cursed-btn { min-height: 36px; }
.private-setup > .cursed-btn { grid-column: 1 / -1; }
.cursed-btn--compact { width: max-content; min-height: 30px !important; padding: 4px 8px; font-size: 8px; }
.private-nickname-dialog { width: min(410px, calc(100vw - 28px)); padding: 0; color: var(--ink); background: #080d10; border: 2px solid var(--cyan); box-shadow: 8px 8px 0 #000; }
.private-nickname-dialog::backdrop { background: #000b; }
.private-nickname-form { display: grid; gap: 9px; padding: 16px; }
.private-nickname-form__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.private-lobby__host { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.private-lobby__art { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.private-lobby__art p { margin: 6px 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.private-upload-slots { display: grid; grid-template-columns: repeat(5, minmax(58px, 1fr)); gap: 6px; margin: 8px 0 5px; overflow-x: auto; padding: 3px; }
.private-upload-slot { position: relative; isolation: isolate; display: grid; gap: 2px; align-content: end; min-height: 76px; overflow: hidden; padding: 5px 4px; color: var(--muted); background: #030607; border: 2px solid #d6e7ff55; border-radius: 4px 2px 5px 3px; font: inherit; font-weight: 900; cursor: pointer; }
.private-upload-slot::after { content: ""; position: absolute; z-index: -1; inset: 38% 0 0; background: linear-gradient(transparent, #020405e8 42%); pointer-events: none; }
.private-upload-slot__preview { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.private-upload-slot__number { position: absolute; top: 4px; left: 4px; min-width: 18px; padding: 2px; color: #071005; background: var(--signal); border: 1px solid #020405; font-size: 9px; }
.private-upload-slot span, .private-upload-slot small { overflow: hidden; text-overflow: ellipsis; font-size: 7px; letter-spacing: .05em; white-space: nowrap; }
.private-upload-slot small { color: var(--ink); font-weight: 500; }
.private-upload-slot.is-filled { color: var(--signal); border-color: var(--signal); background: #0b1308; }
.private-upload-slot[data-status="processing"] { color: var(--cyan); border-color: var(--cyan); }
.private-upload-slot[data-status="error"] { color: var(--danger); border-color: var(--danger); }
.private-upload-slot.is-dragging { color: #071005; background: var(--cyan); border-color: #fff; box-shadow: 0 0 0 3px #72f4e055; transform: translateY(-2px); }
.private-upload-slot[aria-disabled="true"] { cursor: wait; opacity: .72; }
.private-upload-slot.is-selected { outline: 2px solid var(--cyan); outline-offset: 2px; }
.private-art-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.private-upload-hint { letter-spacing: .04em; }
.private-upload-status { min-height: 16px; color: var(--cyan) !important; }
.private-lobby__bot-fields { display: grid; grid-template-columns: 1fr 90px; gap: 6px 10px; align-items: center; }
.private-lobby__bot-summary { color: var(--muted); font-size: 9px; line-height: 1.45; }
.private-chat-log { min-height: 90px; max-height: 180px; overflow-y: auto; padding: 8px; border: 1px solid #ffffff18; background: #030607; }
.private-chat-log p { margin: 0 0 5px; overflow-wrap: anywhere; font-size: 11px; }
.private-chat-log .private-chat-line--system { padding: 4px 6px; color: var(--cyan); background: #72f4e00d; border-left: 2px solid var(--cyan); }
.private-chat-line--system strong { color: var(--signal); letter-spacing: .08em; }
.private-chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.private-destination-vote { position: fixed; z-index: 3060; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: min(390px, calc(100vw - 28px)); padding: 16px; color: var(--ink); background: #080d10f5; border: 2px solid var(--signal); box-shadow: 7px 7px 0 #000; font-family: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; }
.private-destination-vote .cursed-btn { width: 100%; margin-top: 7px; }
.cursed-phase-layer { position: fixed; inset: 0; z-index: 2400; display: grid; place-items: center; pointer-events: none; overflow: hidden; font-family: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; }
.cursed-phase-layer[hidden] { display: none; }
.cursed-phase-layer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center,#12191bd9 0,#030506e8 70%); animation: cursed-veil var(--slam-ms) ease-out both; }
.cursed-phase-card { position: relative; width: min(92vw,760px); padding: 26px 18px 28px; text-align: center; color: #d9ff58; border-block: 3px solid currentColor; background: #06090ae8; box-shadow: 0 0 0 1px #000,0 0 64px color-mix(in srgb,currentColor 35%,transparent); animation: cursed-slam var(--slam-ms) cubic-bezier(.12,.86,.2,1) both; }
.cursed-phase-card::after { content: ""; position: absolute; inset: 0; opacity: .18; background: repeating-linear-gradient(0deg,transparent 0 4px,currentColor 5px); mix-blend-mode: screen; }
.cursed-phase-card[data-tone="danger"] { color: #ff526e; }
.cursed-phase-card[data-tone="cyan"] { color: #72f4e0; }
.cursed-phase-card[data-tone="muted"] { color: #b2bfbc; }
.cursed-phase-icon { position: relative; display: block; width: clamp(92px,25vw,156px); height: clamp(92px,25vw,156px); margin: 0 auto; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(6px 6px 0 #000) drop-shadow(0 10px 24px #000); }
.cursed-phase-title { position: relative; margin: 22px 0 7px; font-size: clamp(34px,10vw,82px); line-height: .84; letter-spacing: -.07em; text-wrap: balance; text-shadow: 4px 4px #000; }
.cursed-phase-kicker { position: relative; color: #eff8f6; font-size: clamp(11px,3vw,17px); font-weight: 900; letter-spacing: .16em; }
.cursed-phase-particle { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; background: currentColor; box-shadow: 0 0 12px currentColor; animation: cursed-particle var(--slam-ms) steps(8,end) both; transform: rotate(var(--r)) translateX(var(--d)); }
@keyframes cursed-slam { 0% { opacity: 0; transform: scale(.68) skewX(-9deg); } 10% { opacity: 1; transform: scale(1.14) skewX(3deg); } 18%,76% { opacity: 1; transform: scale(1) skewX(0); } 84% { transform: scale(1.03); } 100% { opacity: 0; transform: scale(.94); } }
@keyframes cursed-veil { 0%,100% { opacity: 0; } 10%,78% { opacity: 1; } }
@keyframes cursed-particle { 0% { opacity: 0; translate: 0 0; } 12% { opacity: 1; } 75% { opacity: .9; } 100% { opacity: 0; translate: var(--x) var(--y); } }
@media (prefers-reduced-motion: reduce) { .cursed-phase-card,.cursed-phase-layer::before,.cursed-phase-particle { animation-timing-function: linear; } .cursed-phase-particle { display: none; } }
@media (max-width: 760px) {
  .private-lobby { grid-template-columns: 1fr; grid-template-areas: "header" "roster" "controls" "chat" "status" "leave"; }
  .private-roster-row { grid-template-columns: minmax(100px, 1fr) auto; }
  .private-roster-row .private-ready { grid-column: 1 / -1; text-align: left; }
  .private-setup { grid-template-columns: 1fr; }
  .private-setup > .cursed-btn { grid-column: auto; }
  body.private-lobby-open .audio-control { top: calc(68px + env(safe-area-inset-top)); }
}