#mj-connection-status {
  position: fixed;
  inset-block-start: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 99998;
  width: max-content;
  max-width: calc(100vw - 32px);
  color: #eef5fa;
  font-family: "Cairo", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  text-align: start;
}
#mj-connection-status[hidden], #mj-connection-details[hidden] { display: none; }
#mj-connection-status[data-surface="player"] {
  position: relative;
  inset-block-start: auto;
  flex: none;
  align-self: center;
  left: auto;
  transform: none;
  margin-block: calc(env(safe-area-inset-top, 0px) + 8px) 8px;
}
body.mj-connection-visible #app > .screen { min-height: 0; }
#mj-connection-status[data-surface="host"] {
  inset-block-start: auto;
  inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 12px);
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  transform: none;
}
#mj-connection-status button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
#mj-connection-status .mj-connection-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px;
  margin-inline: auto;
  background: #17394d;
  border: 1px solid #52758a;
  border-radius: 24px;
}
#mj-connection-status svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#mj-connection-status .mj-connection-chevron { width: 16px; }
#mj-connection-details {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 16px;
  margin-block-start: 8px;
  background: #17394d;
  border: 1px solid #52758a;
  border-radius: 16px;
}
#mj-connection-status[data-surface="host"] #mj-connection-details {
  inset-block-end: calc(100% + 8px);
  left: 0;
  transform: none;
}
#mj-connection-details p { margin: 0 0 12px; font-size: 14px; line-height: 1.8; }
#mj-connection-status .mj-connection-retry {
  min-height: 44px;
  width: 100%;
  padding: 8px 16px;
  border: 0;
  border-radius: 12px;
  background: #f0e7d5;
  color: #17394d;
  font-weight: 700;
}
#mj-connection-status button:focus-visible { outline: 3px solid #e9b85c; outline-offset: 3px; }
html[data-appearance="light"] #mj-connection-status { color: #193d50; }
html[data-appearance="light"] #mj-connection-status .mj-connection-toggle,
html[data-appearance="light"] #mj-connection-details { background: #f5f9fb; border-color: #aac0cd; }
html[data-appearance="light"] #mj-connection-status .mj-connection-retry { background: #204f6b; color: #fff; }

.game-start-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 auto 16px;
  max-width: 560px;
  font-size: 16px;
  color: var(--color-text);
  text-align: center;
}
.game-start-status[hidden] { display: none; }
.game-start-status button {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid currentColor;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

      /* Host-specific layout — design tokens come from /design-tokens.css */
      body {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--sp-5) var(--sp-6) var(--sp-6);
        text-align: center;
        background-color: #071523;
        background-image: var(--mj-art-lobby);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      /* ── Header ── */
      .page-header {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-bottom: var(--sp-3);
        flex-shrink: 0;
      }
      .brand-logo {
        height: clamp(72px, 10vw, 120px);
        width: auto;
        flex-shrink: 0;
        transition:
          height var(--dur-slow) var(--ease-out),
          opacity var(--dur-slow) var(--ease-out);
      }
      /* Once a game is picked the mode logo becomes hero; MAJLIS shrinks to a
       corner stamp so the in-game header reads "[mode] · MAJLIS" instead of
       two equal logos competing for attention. */
      .page-header.has-game-logo .brand-logo {
        height: clamp(40px, 5vw, 56px);
        opacity: 0.78;
      }
      /* Wrapper expands from 0 → natural logo width, pushing brand logo right */
      .game-logo-wrap {
        max-width: 0;
        overflow: hidden;
        margin-right: 0;
        transition:
          max-width var(--dur-slow) var(--ease-out),
          margin-right var(--dur-slow) var(--ease-out);
        flex-shrink: 0;
      }
      .game-logo-wrap.visible {
        max-width: 360px;
        margin-right: var(
          --sp-5
        ); /* gap between game logo and brand logo (RTL: right side) */
      }
      .game-logo {
        height: clamp(72px, 10vw, 120px);
        width: auto;
        display: block;
        opacity: 0;
        transition: opacity var(--dur-slow) var(--ease-out) var(--dur-slow);
      }
      .game-logo-wrap.visible .game-logo {
        opacity: 1;
      }

      /* ── Main content area ── */
      #app {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        flex: 1;
        justify-content: center;
        min-height: 0;
        overflow: hidden;
      }
      .auto-advance-indicator {
        position: fixed;
        left: 50%;
        bottom: max(18px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        z-index: 90;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 16px;
        border: 1px solid rgba(255,255,255,0.16);
        border-radius: 999px;
        background: rgba(5,15,31,0.88);
        color: #fff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.28);
        backdrop-filter: blur(12px);
        font-size: 0.95rem;
        font-weight: 800;
        pointer-events: none;
      }
      .auto-advance-indicator.has-controls {
        pointer-events: auto;
        flex-wrap: wrap;
        justify-content: center;
      }
      .auto-advance-indicator .aai-count {
        min-width: 1.5em;
        color: var(--primary);
        font-size: 1.15rem;
        font-variant-numeric: tabular-nums;
      }
      .auto-advance-indicator .aai-compact-toggle {
        display: none;
      }
      .auto-advance-indicator .aai-actions {
        display: none;
        align-items: center;
        gap: 8px;
      }
      .auto-advance-indicator.has-controls .aai-actions { display: flex; }
      .auto-advance-indicator .aai-action {
        width: auto;
        min-height: 38px;
        padding: 6px 13px;
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 999px;
        color: #fff;
        background: rgba(255,255,255,0.1);
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 800;
        line-height: 1.1;
        cursor: pointer;
      }
      .auto-advance-indicator .aai-next {
        color: #071523;
        background: var(--primary);
      }
      .auto-advance-indicator .aai-action:disabled {
        opacity: 0.55;
        cursor: default;
      }

      /* ── Typography ── */
      h1.title {
        font-size: clamp(2rem, 4vw, 3.4rem);
        font-weight: 800;
        margin-bottom: var(--sp-6);
        color: #ffffff;
      }
      .label {
        font-size: clamp(1.4rem, 2.5vw, 2rem);
        font-weight: 700;
        margin-bottom: var(--sp-3);
        color: #ffffff;
      }
      .label.label-verb {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: clamp(1.1rem, 1.8vw, 1.5rem);
        font-weight: 800;
        color: var(--primary);
        background: var(--color-primary-soft);
        border: 1px solid var(--color-primary-soft);
        padding: 8px 22px;
        border-radius: var(--rad-pill);
        margin: 0 0 var(--sp-3);
        letter-spacing: 0.005em;
      }
      .small-label {
        font-size: 1.4rem;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: var(--sp-2);
      }
      .counter {
        font-size: clamp(1.6rem, 2.5vw, 2.4rem);
        font-weight: 700;
        color: var(--primary);
        margin: var(--sp-3) 0;
      }

      /* Screen-to-screen phase transitions: incoming fade-up only.
         The old screen is swapped out instantly and the new screen's
         content fades up over the (already-painted) destination
         background — see _phaseTransition(). There is deliberately no
         outgoing fade: draining #app to opacity 0 first exposed the dark
         page background and read as a black flash between screens. */
      @keyframes app-phase-in {
        0% {
          opacity: 0;
          transform: translateY(8px);
        }
        100% {
          opacity: 1;
          transform: none;
        }
      }
      #app.phase-enter > * {
        animation: app-phase-in var(--dur-base) var(--ease-out-soft) both;
      }
      /* Spotlight + countdown drive their own animations. */
      #app > .spotlight-wrap,
      #app > .cd-overlay {
        animation: none;
      }
      @media (prefers-reduced-motion: reduce) {
        #app.phase-enter > * {
          animation: none !important;
        }
      }
      /* ── Shathaat cinematic stage ───────────────────────────────────────
         A deliberately small visual vocabulary: saturated blue, pure paper
         white and near-black ink. Every depth cue is a hard shape; there are
         no blurred shadows, glass surfaces or glowing gradients. */
      body.shathaat-stage-phase {
        padding: 0;
        overflow: hidden;
        background-color: #075a78;
        background-image:
          repeating-radial-gradient(circle at 50% 52%, rgba(255,255,255,.035) 0 2px, transparent 2px 62px),
          linear-gradient(112deg, #075a78 0 62%, #064e69 62% 100%);
      }
      body.shathaat-stage-phase #app {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        padding: 0;
        margin: 0;
      }
      body.shathaat-stage-phase #app.phase-enter > .sh-cinematic-stage {
        animation: none;
      }
      body.shathaat-stage-phase .page-header,
      body.shathaat-stage-phase #fullscreen-btn {
        display: none !important;
      }
      body.shathaat-stage-phase #top-left-bar { display:flex!important; }
      body.shathaat-stage-phase #gear-btn,
      body.shathaat-stage-phase #room-code-pill,
      body.shathaat-stage-phase #back-btn { display:none!important; }
      body.shathaat-stage-phase #game-controls {
        position: fixed;
        top: auto;
        right: auto;
        bottom: max(20px, env(safe-area-inset-bottom));
        left: max(20px, env(safe-area-inset-left));
        z-index: 72;
        opacity: .88;
        transition: opacity 160ms ease;
      }
      body.shathaat-stage-phase #game-controls:hover,
      body.shathaat-stage-phase #game-controls:focus-within { opacity: 1; }
      body.shathaat-stage-phase #game-controls button {
        border: 3px solid #07090d;
        border-radius: 7px 11px 8px 10px;
        padding: 9px 15px;
        color: #07090d;
        box-shadow: 5px 5px 0 #07090d;
        backdrop-filter: none;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
        font-size: .9rem;
        font-weight: 900;
      }
      body.shathaat-stage-phase #pause-btn {
        background: #ffd22e;
        transform: rotate(-1deg);
      }
      body.shathaat-stage-phase #exit-btn {
        background: #ff6a55;
        transform: rotate(1deg);
      }
      body.shathaat-stage-phase #pause-btn:hover {
        transform: translateY(-2px) rotate(-1deg);
      }
      body.shathaat-stage-phase #exit-btn:hover {
        transform: translateY(-2px) rotate(1deg);
      }
      body.shathaat-stage-phase #game-controls button:active {
        box-shadow: 2px 2px 0 #07090d;
        translate: 3px 3px;
      }
      body.shathaat-stage-phase .auto-advance-indicator {
        gap: 9px;
        padding: 7px 10px 7px 15px;
        border: 3px solid #07090d;
        border-radius: 8px 11px 7px 10px;
        background: #fff;
        color: #07090d;
        box-shadow: 6px 6px 0 #07090d;
        backdrop-filter: none;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
        font-size: .92rem;
        font-weight: 900;
        transform: translateX(-50%) rotate(-.5deg);
      }
      body.shathaat-stage-phase .auto-advance-indicator .aai-count {
        min-width: 2.15em;
        padding: 2px 8px 3px;
        border: 3px solid #07090d;
        border-radius: 5px 7px 5px 6px;
        background: #ffd22e;
        color: #07090d;
        font-size: 1.1rem;
        line-height: 1.15;
        text-align: center;
        transform: rotate(1deg);
      }
      body.shathaat-stage-phase .auto-advance-indicator .aai-actions {
        gap: 8px;
        padding-inline-start: 3px;
      }
      body.shathaat-stage-phase .auto-advance-indicator .aai-action {
        min-height: 38px;
        padding: 7px 13px;
        border: 3px solid #07090d;
        border-radius: 6px 9px 7px 8px;
        background: #fff;
        color: #07090d;
        box-shadow: 4px 4px 0 #07090d;
        font-size: .84rem;
        font-weight: 900;
        transition: transform 120ms ease, box-shadow 120ms ease;
      }
      body.shathaat-stage-phase .auto-advance-indicator .aai-hold {
        transform: rotate(-1deg);
      }
      body.shathaat-stage-phase .auto-advance-indicator .aai-next {
        background: #ff6a27;
        transform: rotate(1deg);
      }
      body.shathaat-stage-phase .auto-advance-indicator .aai-action:hover:not(:disabled) {
        transform: translateY(-2px) rotate(0);
      }
      body.shathaat-stage-phase .auto-advance-indicator .aai-action:active:not(:disabled) {
        box-shadow: 1px 1px 0 #07090d;
        transform: translate(3px, 3px) rotate(0);
      }
      body.shathaat-stage-phase .auto-advance-indicator .aai-action:disabled {
        border-color: #07090d;
        background: #dedbd2;
        color: #07090d;
        box-shadow: 2px 2px 0 #07090d;
        opacity: 1;
        transform: translate(2px, 2px) rotate(-1deg);
      }
      body.shathaat-stage-phase #pause-overlay {
        background: rgba(7,9,13,.94);
        backdrop-filter: none;
      }
      body.shathaat-stage-phase #pause-overlay button {
        border: 4px solid #07090d;
        border-radius: 9px 13px 8px 11px;
        background: #ffd22e;
        color: #07090d;
        box-shadow: 8px 8px 0 #ff6a55;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
        font-weight: 900;
      }

      .sh-cinematic-stage {
        --sh-ink: #07090d;
        --sh-paper: #fff;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        overflow: hidden;
        isolation: isolate;
        direction: rtl;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
      }
      .sh-cinematic-stage::before {
        content: "";
        position: absolute;
        width: min(82vw, 1180px);
        aspect-ratio: 1;
        left: 50%;
        top: 52%;
        border: clamp(20px, 3vw, 48px) solid rgba(255,255,255,.028);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        box-shadow:
          0 0 0 clamp(56px, 8vw, 120px) rgba(255,255,255,.018),
          0 0 0 clamp(126px, 17vw, 250px) rgba(0,0,0,.025);
        pointer-events: none;
      }
      .sh-stage-prompt {
        position: absolute;
        z-index: 8;
        top: 50%;
        left: 50%;
        width: min(88vw, 1180px);
        color: #fff;
        font-size: clamp(2.3rem, 5vw, 5.4rem);
        font-weight: 900;
        line-height: 1.4;
        text-align: center;
        text-wrap: balance;
        text-shadow:
          3px 3px 0 var(--sh-ink),
          -2px -2px 0 var(--sh-ink),
          2px -2px 0 var(--sh-ink),
          -2px 2px 0 var(--sh-ink);
        transform: translate(-50%, -50%) scale(1);
        transform-origin: 50% 50%;
        transition:
          top 560ms cubic-bezier(.2,.82,.22,1),
          transform 560ms cubic-bezier(.2,.82,.22,1),
          width 560ms cubic-bezier(.2,.82,.22,1),
          font-size 560ms cubic-bezier(.2,.82,.22,1);
      }
      .sh-stage-prompt.is-long { font-size:clamp(1.9rem,4.2vw,4.4rem); }
      .sh-stage-prompt.is-very-long { font-size:clamp(1.55rem,3.35vw,3.55rem); line-height:1.48; }
      .sh-cinematic-stage.is-docked .sh-stage-prompt {
        top: clamp(26px, 4.6vh, 54px);
        width: min(80vw, 1060px);
        font-size: clamp(1.65rem, 3vw, 3.2rem);
        transform: translate(-50%, 0) scale(1);
      }
      .sh-stage-countdown-slot {
        position: absolute;
        z-index: 12;
        /* Keep the timer clear of TV overscan and device cutouts. */
        top: max(40px, calc(env(safe-area-inset-top) + 24px));
        left: max(40px, calc(env(safe-area-inset-left) + 24px));
        width: 78px;
        min-height: 78px;
        opacity: 0;
        transform: translateY(-12px) rotate(-2deg);
        transition: opacity 240ms ease, transform 360ms cubic-bezier(.2,.82,.22,1);
      }
      .sh-cinematic-stage.is-voting .sh-stage-countdown-slot {
        opacity: 1;
        transform: translateY(0) rotate(-2deg);
      }
      .sh-cinematic-stage .sh-stage-countdown {
        position: relative;
        width: 78px;
        min-width: 78px;
        height: 78px;
        margin: 0;
        padding: 0;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 5px solid #fff;
        border-radius: 9px 12px 8px 11px;
        background: var(--sh-ink);
        color: #fff;
        box-shadow: 6px 6px 0 rgba(7,9,13,.45);
        font-size: 2.25rem;
        font-weight: 900;
        line-height: 1;
      }
      .sh-cinematic-stage .sh-stage-countdown .at-fill {
        position: absolute;
        inset: auto 0 0;
        height: 7px;
        background: #ff6a27;
        transform-origin: left center;
      }
      .sh-cinematic-stage .sh-stage-countdown.urgent { color: #ffd22e; }
      .sh-cinematic-stage .sh-stage-countdown.critical { animation: sh-hard-tick 500ms steps(2,end) infinite; }
      @keyframes sh-hard-tick { 50% { transform: scale(1.07) rotate(1deg); } }

      .sh-card-deck {
        position: absolute;
        z-index: 5;
        left: 50%;
        top: clamp(180px, 25vh, 270px);
        width: min(92vw, 1480px);
        height: min(58vh, 520px);
        display: grid;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: clamp(36px, 6vw, 94px);
        align-items: center;
        transform: translateX(-50%);
        perspective: 1100px;
        direction: ltr;
      }
      .sh-paper-card {
        position: relative;
        min-width: 0;
        height: clamp(300px, 48vh, 440px);
        opacity: 0;
        visibility: hidden;
        transform-style: preserve-3d;
        will-change: transform, opacity;
        direction: rtl;
      }
      .sh-paper-card.is-visible {
        visibility: visible;
        opacity: 1;
      }
      .sh-card-a.is-visible { animation: sh-paper-a-in 700ms cubic-bezier(.16,.9,.24,1.16) both; }
      .sh-card-b.is-visible { animation: sh-paper-b-in 700ms cubic-bezier(.16,.9,.24,1.16) both; }
      @keyframes sh-paper-a-in {
        0% { opacity:0; transform:translate3d(-150px,70px,-340px) rotate(-10deg) scale(.28); }
        72% { opacity:1; transform:translate3d(8px,-4px,0) rotate(-.4deg) scale(1.025); }
        100% { opacity:1; transform:translate3d(0,0,0) rotate(-1.4deg) scale(1); }
      }
      @keyframes sh-paper-b-in {
        0% { opacity:0; transform:translate3d(150px,70px,-340px) rotate(10deg) scale(.28); }
        72% { opacity:1; transform:translate3d(-8px,-4px,0) rotate(.4deg) scale(1.025); }
        100% { opacity:1; transform:translate3d(0,0,0) rotate(1.2deg) scale(1); }
      }
      .sh-card-depth,
      .sh-card-frame {
        position: absolute;
        inset: 0;
        clip-path: polygon(1.2% 2.2%, 98.5% .4%, 99.4% 96.8%, 2.1% 99.4%, .3% 48%);
      }
      .sh-card-b .sh-card-depth,
      .sh-card-b .sh-card-frame {
        clip-path: polygon(.6% .8%, 98.7% 2.4%, 99.6% 50%, 97.8% 99.2%, 1.4% 97.5%);
      }
      .sh-card-depth {
        z-index: 0;
        background: var(--sh-ink);
        transform: translate(11px, 12px);
      }
      .sh-card-frame {
        z-index: 1;
        padding: 7px;
        background: var(--sh-ink);
        box-sizing: border-box;
      }
      .sh-card-paper {
        position: relative;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: 1fr auto auto;
        align-items: center;
        justify-items: center;
        padding: clamp(18px, 2vw, 34px);
        box-sizing: border-box;
        overflow: hidden;
        background: var(--sh-paper);
        color: var(--sh-ink);
        clip-path: polygon(.4% 1.2%, 99.2% .2%, 99.7% 98.5%, 1% 99.7%, .1% 52%);
      }
      .sh-card-b .sh-card-paper {
        clip-path: polygon(.1% .2%, 99.3% 1.2%, 99.9% 50%, 98.9% 99.7%, .3% 98.6%);
      }
      .sh-card-answer {
        width: 100%;
        font-size: clamp(1.65rem, 3vw, 3.25rem);
        font-weight: 900;
        line-height: 1.48;
        text-align: center;
        text-wrap: balance;
        overflow-wrap: anywhere;
      }
      .sh-card-answer.is-short {
        font-size: clamp(3rem, 5vw, 5.4rem);
        line-height: 1.15;
      }
      .sh-card-answer.is-medium {
        font-size: clamp(2.25rem, 3.8vw, 4rem);
        line-height: 1.22;
      }
      .sh-card-answer.is-long {
        font-size: clamp(1.75rem, 2.8vw, 3rem);
        line-height: 1.28;
      }
      .sh-card-answer.is-xlong {
        font-size: clamp(1.4rem, 2.15vw, 2.3rem);
        line-height: 1.3;
      }
      .sh-card-author {
        width: 100%;
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        opacity: 0;
        transform: translateY(14px);
        font-size: clamp(1.15rem, 2vw, 1.65rem);
        font-weight: 900;
      }
      .sh-card-author img {
        width: 86px;
        height: 94px;
        object-fit: contain;
      }
      .sh-result-meta {
        width: 100%;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }
      .sh-voter-chips {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px 7px;
        min-height: 50px;
        opacity: 0;
      }
      .sh-voter-chip {
        min-width: 0;
        max-width: 124px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 8px 2px 3px;
        border: 2px solid var(--sh-ink);
        border-radius: 999px;
        background: #fff;
        transform: translateY(-22px) scale(.2) rotate(-14deg);
      }
      .sh-voter-chip img {
        width: 46px;
        height: 46px;
        flex: 0 0 auto;
        object-fit: contain;
        filter: drop-shadow(2px 2px 0 rgba(7,9,13,.18));
      }
      .sh-voter-chip span {
        min-width: 0;
        max-width: 10ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(.95rem, 1.2vw, 1.15rem);
        font-weight: 900;
      }
      .sh-voter-chips.is-dense { gap: 4px; }
      .sh-voter-chips.is-dense .sh-voter-chip {
        max-width: 94px;
        gap: 4px;
        padding-inline-end: 5px;
      }
      .sh-voter-chips.is-dense .sh-voter-chip img {
        width: 40px;
        height: 40px;
      }
      .sh-voter-chips.is-dense .sh-voter-chip span {
        max-width: 6ch;
        font-size: .88rem;
      }
      .sh-vote-badge {
        position: absolute;
        z-index: 6;
        top: -22px;
        width: clamp(66px, 6vw, 92px);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border: 5px solid #fff;
        border-radius: 48% 52% 45% 55%;
        background: var(--sh-ink);
        color: #fff;
        font-size: clamp(2rem, 3vw, 3.2rem);
        font-weight: 900;
        opacity: 0;
        transform: scale(.2) rotate(-16deg);
      }
      .sh-card-a .sh-vote-badge { left: -18px; }
      .sh-card-b .sh-vote-badge { right: -18px; }
      .sh-points {
        padding: 5px 12px;
        border: 3px solid var(--sh-ink);
        background: #ffd22e;
        color: var(--sh-ink);
        font-size: clamp(.95rem, 1.5vw, 1.2rem);
        font-weight: 900;
        opacity: 0;
        transform: translateY(10px) rotate(2deg);
      }
      .sh-cinematic-stage.is-results:not(.is-results-settled) .sh-paper-card {
        animation: sh-result-spin 1050ms cubic-bezier(.2,.72,.18,1) both;
      }
      .sh-cinematic-stage.is-results:not(.is-results-settled) .sh-card-b { animation-delay: 90ms; }
      .sh-cinematic-stage.is-results.is-results-settled .sh-paper-card {
        animation: none;
        opacity: 1;
        transform: rotate(var(--card-tilt, 0deg));
      }
      @keyframes sh-result-spin {
        0% { transform: rotateZ(var(--card-tilt, 0deg)) rotateX(0) scale(1); }
        42% { transform: rotateZ(0) rotateX(1080deg) scale(.9); }
        72% { transform: rotateZ(0) rotateX(1720deg) scale(.96); }
        100% { transform: rotateZ(var(--card-tilt, 0deg)) rotateX(1800deg) scale(1); }
      }
      .sh-card-a { --card-tilt: -1.4deg; }
      .sh-card-b { --card-tilt: 1.2deg; }
      .sh-cinematic-stage.show-authors .sh-card-author {
        opacity: 1;
        transform: none;
        transition: opacity 240ms ease, transform 380ms cubic-bezier(.16,.9,.24,1.16);
      }
      .sh-cinematic-stage.show-votes .sh-vote-badge {
        opacity: 1;
        transform: scale(1) rotate(-4deg);
        transition: opacity 160ms ease, transform 420ms cubic-bezier(.16,.9,.24,1.2);
      }
      .sh-cinematic-stage.show-votes .sh-voter-chips { opacity: 1; }
      .sh-cinematic-stage.show-votes .sh-voter-chip {
        transform: none;
        transition: transform 420ms cubic-bezier(.16,.9,.24,1.18);
      }
      .sh-cinematic-stage.show-points .sh-points {
        opacity: 1;
        transform: rotate(1deg);
        transition: opacity 180ms ease, transform 380ms cubic-bezier(.16,.9,.24,1.16);
      }
      .sh-cinematic-stage.show-points .sh-paper-card.is-loser {
        opacity: .62;
        transform: scale(.94) rotate(var(--card-tilt));
        transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,.82,.22,1);
      }
      .sh-cinematic-stage.show-points .sh-paper-card.is-winner {
        transform: translateY(-10px) rotate(var(--card-tilt));
        transition: transform 420ms cubic-bezier(.2,.82,.22,1);
      }
      .sh-cinematic-stage.is-exiting .sh-stage-prompt {
        opacity: 0;
        transform: translate(-50%, -18px) scale(.96);
        transition: opacity 260ms ease, transform 520ms cubic-bezier(.4,0,1,1);
      }
      .sh-cinematic-stage.is-exiting .sh-card-a {
        animation: sh-card-a-out 620ms cubic-bezier(.4,0,1,1) both !important;
      }
      .sh-cinematic-stage.is-exiting .sh-card-b {
        animation: sh-card-b-out 620ms cubic-bezier(.4,0,1,1) both !important;
      }
      @keyframes sh-card-a-out {
        to { opacity:0; transform:translate3d(-150px,48px,-260px) rotate(-10deg) scale(.55); }
      }
      @keyframes sh-card-b-out {
        to { opacity:0; transform:translate3d(150px,48px,-260px) rotate(10deg) scale(.55); }
      }

      .sh-writing-stage {
        width: 100vw;
        height: 100dvh;
        box-sizing: border-box;
        display: grid;
        place-items: center;
        align-content: center;
        gap: clamp(18px, 3vh, 34px);
        padding: max(28px, env(safe-area-inset-top)) 8vw max(28px, env(safe-area-inset-bottom));
        color: #fff;
        text-align: center;
      }
      .sh-writing-round {
        padding: 6px 14px;
        border: 3px solid #07090d;
        background: #fff;
        color: #07090d;
        font-size: clamp(1.05rem, 1.5vw, 1.35rem);
        font-weight: 900;
        transform: rotate(-1deg);
      }
      .sh-writing-stage h1 {
        margin: 0;
        max-width: 1000px;
        font-size: clamp(2.6rem, 6vw, 6rem);
        line-height: 1.42;
        padding-block: .08em;
        text-shadow: 3px 3px 0 #07090d, -2px -2px 0 #07090d;
      }
      .sh-writing-count {
        font-size: clamp(1.5rem, 3vw, 2.7rem);
        font-weight: 900;
      }
      .sh-writing-stage .answer-timer {
        border: 5px solid #07090d;
        border-radius: 9px;
        background: #fff;
        color: #07090d;
        box-shadow: 7px 7px 0 #07090d;
      }
      .sh-final-stage {
        width: 100vw;
        height: 100dvh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(18px, 2.6vh, 30px);
        padding: max(34px, env(safe-area-inset-top)) 5vw max(34px, env(safe-area-inset-bottom));
        color: #fff;
        overflow: hidden;
      }
      .sh-final-prompt {
        width: min(82vw, 1120px);
        margin: 0;
        color: #fff;
        font-size: clamp(1.7rem, 3.3vw, 3.5rem);
        font-weight: 900;
        line-height: 1.42;
        text-align: center;
        text-wrap: balance;
        text-shadow: 3px 3px 0 #07090d, -2px -2px 0 #07090d;
        animation: sh-final-prompt-dock 900ms cubic-bezier(.2,.82,.22,1) both;
      }
      @keyframes sh-final-prompt-dock {
        0%, 42% { transform: translateY(25vh) scale(1.35); }
        100% { transform: none; }
      }
      .sh-final-grid {
        width: min(92vw, 1500px);
        flex: 1;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(270px, 42vw), 1fr));
        align-content: center;
        gap: clamp(18px, 2vw, 30px);
      }
      .sh-final-card {
        min-height: 120px;
        position: relative;
        display: grid;
        place-items: center;
        padding: clamp(20px, 2.4vw, 34px);
        box-sizing: border-box;
        border: 6px solid #07090d;
        background: #fff;
        color: #07090d;
        box-shadow: 9px 10px 0 #07090d;
        font-weight: 900;
        line-height: 1.35;
        text-align: center;
        text-wrap: balance;
        border-radius: 3px 8px 4px 7px;
        opacity: 0;
        animation: sh-final-card-in 580ms cubic-bezier(.16,.9,.24,1.16) forwards;
      }
      .sh-final-card-answer {
        display: block;
        font-size: clamp(1.5rem, 2.45vw, 2.65rem);
        line-height: 1.28;
        overflow-wrap: anywhere;
      }
      .sh-final-card-answer.is-short { font-size: clamp(2.25rem, 3.5vw, 3.8rem); line-height: 1.15; }
      .sh-final-card-answer.is-medium { font-size: clamp(1.8rem, 2.8vw, 3rem); line-height: 1.22; }
      .sh-final-card-answer.is-long { font-size: clamp(1.45rem, 2.2vw, 2.3rem); }
      .sh-final-card-answer.is-xlong { font-size: clamp(1.25rem, 1.85vw, 1.9rem); }
      .sh-final-prompt.is-long { font-size: clamp(1.5rem, 2.8vw, 3rem); }
      .sh-final-prompt.is-xlong { font-size: clamp(1.3rem, 2.35vw, 2.5rem); }
      @keyframes sh-final-card-in {
        from { opacity:0; transform:translateY(42px) scale(.72) rotate(-2deg); }
        to { opacity:1; transform:rotate(var(--final-tilt, -.5deg)); }
      }
      .sh-final-card:nth-child(even) { --final-tilt: .65deg; }
      .sh-final-card-author {
        display: block;
        margin-bottom: 8px;
        font-size: clamp(1.05rem, 1.4vw, 1.3rem);
        color: #075a78;
      }
      .sh-final-card-stat {
        display: block;
        margin-top: 10px;
        padding-top: 8px;
        border-top: 3px solid #07090d;
        font-size: clamp(1.05rem, 1.4vw, 1.3rem);
      }
      .sh-final-card.is-winner {
        background: #ffd22e;
        transform: translateY(-8px) rotate(var(--final-tilt, -.5deg));
      }
      .sh-final-progress {
        padding: 6px 14px;
        border: 4px solid #07090d;
        background: #fff;
        color: #07090d;
        font-size: clamp(1.2rem, 1.6vw, 1.45rem);
        font-weight: 900;
      }

      /* شطحات owns its leaderboard language: hard ink, paper scraps and the
         same teal stage as the answer cards, rather than the shared podium. */
      body.leaderboard-phase.shathaat-leaderboard-phase {
        background-color:#075a78;
        background-image:
          radial-gradient(circle at 18% 22%,rgba(255,255,255,.08) 0 2px,transparent 3px),
          linear-gradient(116deg,#086686 0 62%,#054963 62% 100%);
        background-size:34px 34px,cover;
      }
      .sh-lb-screen{position:relative;width:100vw;height:100dvh;box-sizing:border-box;display:flex;flex-direction:column;gap:clamp(16px,2vh,26px);padding:max(24px,env(safe-area-inset-top)) 4vw max(24px,env(safe-area-inset-bottom));overflow:hidden;color:#fff}
      .sh-lb-head{text-align:center;flex:0 0 auto}
      .sh-lb-kicker{display:inline-block;padding:5px 13px;border:4px solid #07090d;background:#ffd22e;color:#07090d;font-size:clamp(.85rem,1.2vw,1.1rem);font-weight:900;transform:rotate(-1deg)}
      .sh-lb-title{margin:.12em 0 0;font-size:clamp(2.6rem,5vw,5.4rem);line-height:1.05;font-weight:900;text-shadow:4px 4px 0 #07090d,-2px -2px 0 #07090d}
      .sh-lb-layout{flex:1;min-height:0;width:min(94vw,1540px);margin:0 auto;display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.6fr);gap:clamp(22px,3vw,54px);align-items:stretch;direction:ltr}
      .sh-lb-winner,.sh-lb-row{position:relative;border:6px solid #07090d;background:#fff;color:#07090d;box-shadow:10px 11px 0 #07090d;direction:rtl}
      .sh-lb-winner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;background:#ffd22e;transform:rotate(-1deg);animation:sh-lb-pop .72s cubic-bezier(.16,.9,.24,1.16) both}
      .sh-lb-winner::before{content:"#1";position:absolute;top:-20px;right:-15px;padding:5px 14px;border:5px solid #07090d;background:#fff;font-size:clamp(1.5rem,3vw,2.8rem);font-weight:900;transform:rotate(5deg)}
      .sh-lb-winner img{width:min(18vw,250px);height:min(31vh,300px);object-fit:contain;filter:drop-shadow(7px 8px 0 rgba(7,9,13,.22))}
      .sh-lb-winner-name{font-size:clamp(1.8rem,3.4vw,3.5rem);font-weight:900;line-height:1.1;text-align:center}
      .sh-lb-score{font-size:clamp(1.25rem,2.3vw,2.35rem);font-weight:900;font-variant-numeric:tabular-nums}
      .sh-lb-gain{display:inline-block;margin-top:7px;padding:3px 9px;background:#07090d;color:#ffd22e;font-size:clamp(.85rem,1.25vw,1.15rem);font-weight:900}
      .sh-lb-rest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:clamp(12px,1.6vw,22px)}
      .sh-lb-rest.is-sparse{grid-template-columns:1fr}
      .sh-lb-row{min-height:clamp(104px,14vh,154px);display:grid;grid-template-columns:clamp(72px,7vw,112px) minmax(0,1fr);align-items:center;gap:clamp(12px,1.5vw,22px);padding:12px clamp(16px,1.8vw,28px);transform:rotate(var(--r,0deg));animation:sh-lb-row-in .55s calc(var(--i)*80ms) cubic-bezier(.16,.9,.24,1.12) both}
      .sh-lb-row:nth-child(even){--r:.6deg}.sh-lb-row:nth-child(odd){--r:-.45deg}
      .sh-lb-row img{width:100%;height:clamp(76px,10vh,112px);object-fit:contain;filter:drop-shadow(4px 5px 0 rgba(7,9,13,.18))}
      .sh-lb-person{min-width:0}.sh-lb-rank{color:#075a78;font-size:clamp(1rem,1.25vw,1.2rem);font-weight:900}.sh-lb-name{font-size:clamp(1.25rem,2vw,1.9rem);font-weight:900;line-height:1.15;overflow-wrap:anywhere;text-wrap:balance}
      .sh-lb-metrics{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:5px}.sh-lb-row .sh-lb-score{font-size:clamp(1.05rem,1.55vw,1.45rem);white-space:nowrap;text-align:right}.sh-lb-metrics .sh-lb-gain{margin-top:0}
      .sh-lb-rest.is-sparse .sh-lb-row{grid-template-columns:clamp(92px,9vw,132px) minmax(0,1fr);min-height:clamp(132px,20vh,190px)}
      .sh-lb-rest.is-sparse .sh-lb-row img{height:clamp(100px,15vh,142px)}
      .sh-lb-rest.is-sparse .sh-lb-name{font-size:clamp(1.7rem,2.8vw,2.8rem)}
      .sh-lb-tools{position:absolute;z-index:12;bottom:max(20px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));display:flex;direction:ltr;gap:9px}
      .sh-lb-tool,.sh-lb-next{width:auto;border:4px solid #07090d;border-radius:5px;background:#fff;color:#07090d;box-shadow:5px 6px 0 #07090d;font:800 clamp(.82rem,1.1vw,1rem)/1 inherit;padding:10px 15px;cursor:pointer}
      .sh-lb-next{position:absolute;right:4vw;bottom:max(24px,env(safe-area-inset-bottom));z-index:14;background:#ffd22e;font-size:clamp(1rem,1.6vw,1.4rem);padding:14px 26px}
      .sh-lb-final-actions{position:absolute;right:4vw;bottom:max(20px,env(safe-area-inset-bottom));z-index:14;display:flex;gap:9px}.sh-lb-final-actions .sh-lb-next{position:static}
      @keyframes sh-lb-pop{from{opacity:0;transform:translateY(80px) scale(.68) rotate(-5deg)}to{opacity:1;transform:rotate(-1deg)}}
      @keyframes sh-lb-row-in{from{opacity:0;transform:translateX(70px) rotate(var(--r,0deg))}to{opacity:1;transform:rotate(var(--r,0deg))}}
      @media(max-aspect-ratio:1/1){.sh-lb-layout{grid-template-columns:1fr;overflow:auto;padding:10px}.sh-lb-winner{min-height:330px}.sh-lb-rest{grid-template-columns:1fr}.sh-lb-tools{bottom:12px;left:12px}.sh-lb-head{padding-top:54px}}

      @media (max-aspect-ratio: 1/1) {
        .sh-card-deck {
          top: clamp(150px, 21vh, 220px);
          width: min(92vw, 720px);
          height: 67vh;
          grid-template-columns: 1fr;
          grid-template-rows: 1fr 1fr;
          gap: 24px;
        }
        .sh-paper-card { height: min(29vh, 285px); }
        .sh-cinematic-stage.is-docked .sh-stage-prompt {
          top: 24px;
          width: 76vw;
          font-size: clamp(1.35rem, 5vw, 2.2rem);
        }
        .sh-card-answer { font-size: clamp(1.35rem, 5vw, 2.1rem); }
      }
      @media (prefers-reduced-motion: reduce) {
        .sh-cinematic-stage *, .sh-writing-stage * {
          animation-duration: 1ms !important;
          transition-duration: 1ms !important;
        }
      }
      /* ── Khedaa paper-deck stage ────────────────────────────────────────
         Khedaa borrows Shathaat's blue paper world, then changes the
         physical metaphor: every lie is a face-down card and the real answer
         is the sealed gold card hidden in the same deck. The generated grain
         is intentionally low-contrast; hard ink and paper carry the UI. */
      body.khedaa-stage-phase {
        padding: 0;
        overflow: hidden;
        background: #075a78 !important;
      }
      body.khedaa-stage-phase #app {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        padding: 0;
        margin: 0;
      }
      body.khedaa-stage-phase .page-header,
      body.khedaa-stage-phase #fullscreen-btn {
        display: none !important;
      }
      body.khedaa-stage-phase #top-left-bar { display: flex !important; }
      body.khedaa-stage-phase #gear-btn,
      body.khedaa-stage-phase #room-code-pill,
      body.khedaa-stage-phase #back-btn { display: none !important; }
      body.khedaa-stage-phase #game-controls {
        position: fixed;
        inset: auto auto max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
        z-index: 72;
        opacity: .9;
      }
      body.khedaa-stage-phase #game-controls button {
        border: 3px solid #07090d;
        border-radius: 7px;
        padding: 8px 13px;
        background: #fff;
        color: #07090d;
        box-shadow: 5px 5px 0 #07090d;
        backdrop-filter: none;
        font-size: .88rem;
      }
      body.khedaa-stage-phase #pause-overlay {
        background: rgba(7, 9, 13, .94);
        backdrop-filter: none;
      }
      .kd-stage {
        --kd-ink: #07090d;
        --kd-paper: #fffdf7;
        --kd-gold: #f2b92f;
        --kd-orange: #ee6a24;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: clamp(12px, 1.8vh, 22px);
        padding: max(24px, env(safe-area-inset-top)) 4vw max(24px, env(safe-area-inset-bottom));
        overflow: hidden;
        isolation: isolate;
        direction: rtl;
        background-color: #075a78;
        background-image:
          linear-gradient(rgba(2, 34, 50, .42), rgba(2, 34, 50, .42)),
          var(--mj-art-khedaa),
          repeating-radial-gradient(circle at 50% 48%, rgba(255,255,255,.035) 0 2px, transparent 2px 58px),
          linear-gradient(112deg, #075a78 0 62%, #064e69 62% 100%);
        background-position: center;
        background-size: cover, cover, auto, cover;
        color: #fff;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
      }
      .kd-stage::before,
      .kd-stage::after {
        content: "";
        position: absolute;
        z-index: -1;
        pointer-events: none;
        border: 5px solid rgba(7, 9, 13, .48);
        background: rgba(238, 106, 36, .2);
      }
      .kd-stage::before {
        width: min(30vw, 470px);
        height: min(18vw, 250px);
        right: -9vw;
        bottom: -8vw;
        transform: rotate(-13deg);
      }
      .kd-stage::after {
        width: min(24vw, 360px);
        height: min(12vw, 180px);
        left: -8vw;
        top: 18vh;
        background: rgba(242, 185, 47, .09);
        transform: rotate(10deg);
      }
      .kd-hud {
        position: relative;
        z-index: 4;
        width: min(92vw, 1520px);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex: 0 0 auto;
      }
      .kd-brand,
      .kd-round,
      .kd-multiplier {
        border: 4px solid var(--kd-ink);
        background: var(--kd-paper);
        color: var(--kd-ink);
        box-shadow: 5px 6px 0 var(--kd-ink);
        font-weight: 900;
      }
      .kd-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 7px 15px;
        font-size: clamp(1rem, 1.6vw, 1.5rem);
        transform: rotate(-1deg);
      }
      .kd-brand-mark {
        width: 27px;
        height: 27px;
        display: grid;
        place-items: center;
        background: var(--kd-orange);
        color: #fff;
        border: 3px solid var(--kd-ink);
        transform: rotate(7deg);
      }
      .kd-hud-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: 96px;
      }
      .kd-round { padding: 6px 13px; transform: rotate(1deg); }
      .kd-multiplier {
        padding: 6px 12px;
        background: var(--kd-gold);
        color: var(--kd-ink);
        transform: rotate(-2deg);
        animation: kd-stamp-in 480ms cubic-bezier(.16,.9,.24,1.18) both;
      }
      .kd-round,
      .kd-multiplier { font-size: clamp(1rem, 1.35vw, 1.2rem); }
      @keyframes kd-stamp-in {
        from { opacity: 0; transform: scale(.35) rotate(-14deg); }
        to { opacity: 1; transform: rotate(-2deg); }
      }
      .kd-question {
        position: relative;
        z-index: 3;
        width: min(88vw, 1220px);
        margin: 0 auto;
        text-align: center;
        flex: 0 0 auto;
      }
      .kd-question-kicker {
        display: inline-block;
        margin-bottom: 7px;
        padding: 4px 11px;
        border: 3px solid var(--kd-ink);
        background: var(--kd-gold);
        color: var(--kd-ink);
        font-size: clamp(1rem, 1.45vw, 1.3rem);
        font-weight: 900;
        transform: rotate(-.8deg);
      }
      .kd-question h1 {
        margin: 0;
        color: #fff;
        font-size: clamp(1.8rem, 3.4vw, 3.8rem);
        font-weight: 900;
        line-height: 1.38;
        text-align: center;
        text-wrap: balance;
        text-shadow: 3px 3px 0 var(--kd-ink), -2px -2px 0 var(--kd-ink);
      }
      .kd-question h1.is-long { font-size: clamp(1.5rem, 2.8vw, 3rem); }
      .kd-stage-timer {
        position: fixed;
        z-index: 12;
        top: max(24px, env(safe-area-inset-top));
        left: max(30px, env(safe-area-inset-left));
      }
      .kd-stage-timer .answer-timer {
        min-width: 76px;
        margin: 0;
        border: 5px solid var(--kd-ink);
        border-radius: 6px;
        background: var(--kd-paper);
        color: var(--kd-ink);
        box-shadow: 6px 7px 0 var(--kd-ink);
      }
      .kd-stage-timer .at-clock,
      .kd-stage-timer .at-unit { display: none; }
      .kd-stage-timer .at-num { font-size: 1.65rem; }
      .kd-stage-timer .at-fill { background: var(--kd-orange); }

      .kd-writing-deck {
        width: min(92vw, 1480px);
        flex: 1;
        min-height: 0;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(150px, 20vw), 1fr));
        align-content: center;
        gap: clamp(12px, 1.6vw, 22px);
        perspective: 1100px;
        direction: ltr;
      }
      .kd-card-back {
        position: relative;
        min-height: clamp(112px, 18vh, 190px);
        display: grid;
        place-items: center;
        gap: 7px;
        padding: 14px;
        box-sizing: border-box;
        border: 5px solid var(--kd-ink);
        border-radius: 4px 9px 5px 8px;
        background:
          repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 10px, transparent 10px 20px),
          #12334a;
        color: rgba(255,255,255,.56);
        box-shadow: 8px 9px 0 var(--kd-ink);
        text-align: center;
        transform: translateY(20px) scale(.92) rotate(var(--kd-tilt, -1deg));
        opacity: .42;
        direction: rtl;
      }
      .kd-card-back:nth-child(even) { --kd-tilt: 1deg; }
      .kd-card-back.is-ready,
      .kd-card-back.is-truth-seed {
        background:
          radial-gradient(circle at 50% 45%, rgba(255,255,255,.14) 0 3px, transparent 4px),
          #0d2940;
        color: #fff;
        opacity: 1;
        animation: kd-facedown-in 520ms cubic-bezier(.16,.9,.24,1.18) both;
      }
      .kd-card-back.is-truth-seed {
        border-color: var(--kd-ink);
        background: var(--kd-gold);
        color: var(--kd-ink);
      }
      .kd-card-back img {
        width: clamp(50px, 5vw, 78px);
        height: clamp(54px, 6vw, 86px);
        object-fit: contain;
        filter: drop-shadow(3px 4px 0 rgba(7,9,13,.25));
      }
      .kd-card-back strong { font-size: clamp(1.05rem, 1.6vw, 1.4rem); }
      .kd-card-back span { font-size: clamp(.92rem, 1.15vw, 1.05rem); font-weight: 800; opacity: .78; }
      .kd-seal {
        width: 56px;
        height: 56px;
        display: grid;
        place-items: center;
        border: 5px double var(--kd-ink);
        border-radius: 50%;
        background: var(--kd-paper);
        color: var(--kd-ink);
        font-size: 1.4rem;
        font-weight: 900;
        transform: rotate(-8deg);
      }
      @keyframes kd-facedown-in {
        from { opacity: 0; transform: translate3d(0, 90px, -260px) scale(.3) rotate(-11deg); }
        75% { opacity: 1; transform: translateY(-5px) scale(1.03) rotate(1deg); }
        to { opacity: 1; transform: rotate(var(--kd-tilt, -1deg)); }
      }
      .kd-writing-status,
      .kd-vote-status {
        flex: 0 0 auto;
        align-self: center;
        padding: 6px 14px;
        border: 4px solid var(--kd-ink);
        background: var(--kd-paper);
        color: var(--kd-ink);
        box-shadow: 5px 6px 0 var(--kd-ink);
        font-size: clamp(.9rem, 1.4vw, 1.2rem);
        font-weight: 900;
      }

      .kd-answer-grid {
        width: min(94vw, 1540px);
        flex: 1;
        min-height: 0;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(92px, 1fr);
        align-content: center;
        gap: clamp(12px, 1.6vw, 22px);
        perspective: 1200px;
        direction: ltr;
      }
      .kd-answer-grid.is-dense {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(10px, 1.2vw, 17px);
      }
      .kd-answer-card {
        --kd-card-tilt: -.55deg;
        position: relative;
        min-width: 0;
        min-height: 0;
        display: grid;
        place-items: center;
        padding: clamp(18px, 2.1vw, 30px) clamp(20px, 2.4vw, 36px);
        box-sizing: border-box;
        border: 5px solid var(--kd-ink);
        border-radius: 3px 9px 4px 7px;
        background: var(--kd-paper);
        color: var(--kd-ink);
        box-shadow: 8px 9px 0 var(--kd-ink);
        opacity: 0;
        direction: rtl;
        text-align: center;
        transform-style: preserve-3d;
        animation: kd-answer-in 600ms calc(420ms + var(--kd-i) * 125ms) cubic-bezier(.16,.9,.24,1.16) forwards;
      }
      .kd-answer-card:nth-child(even) {
        --kd-card-tilt: .55deg;
        border-radius: 8px 3px 7px 4px;
      }
      .kd-answer-grid.is-dense .kd-answer-card {
        padding: clamp(13px, 1.5vw, 22px) clamp(15px, 1.8vw, 26px);
      }
      @keyframes kd-answer-in {
        from { opacity: 0; transform: translate3d(0, 80px, -320px) scale(.3) rotate(-8deg); }
        72% { opacity: 1; transform: translateY(-5px) scale(1.025) rotate(1deg); }
        to { opacity: 1; transform: rotate(var(--kd-card-tilt)); }
      }
      .kd-answer-number {
        position: absolute;
        top: -14px;
        right: -12px;
        width: clamp(38px, 3.4vw, 54px);
        height: clamp(38px, 3.4vw, 54px);
        display: grid;
        place-items: center;
        border: 4px solid var(--kd-ink);
        border-radius: 48% 52% 45% 55%;
        background: var(--kd-orange);
        color: #fff;
        font-size: clamp(1rem, 1.6vw, 1.35rem);
        font-weight: 900;
        transform: rotate(5deg);
      }
      .kd-answer-text {
        min-width: 0;
        font-size: clamp(1.45rem, 2.6vw, 2.8rem);
        font-weight: 900;
        line-height: 1.25;
        text-wrap: balance;
        overflow-wrap: anywhere;
      }
      .kd-answer-text.is-short { font-size: clamp(2.8rem, 5vw, 5.4rem); line-height: 1.08; }
      .kd-answer-text.is-medium { font-size: clamp(2.15rem, 3.8vw, 4rem); line-height: 1.16; }
      .kd-answer-text.is-long { font-size: clamp(1.65rem, 2.8vw, 3rem); line-height: 1.22; }
      .kd-answer-text.is-xlong { font-size: clamp(1.3rem, 2.05vw, 2.15rem); line-height: 1.24; }
      .kd-answer-grid.is-dense .kd-answer-text {
        font-size: clamp(1.2rem, 1.8vw, 1.9rem);
      }
      .kd-answer-grid.is-dense .kd-answer-text.is-short { font-size: clamp(2rem, 3.25vw, 3.5rem); }
      .kd-answer-grid.is-dense .kd-answer-text.is-medium { font-size: clamp(1.65rem, 2.6vw, 2.75rem); }
      .kd-answer-grid.is-dense .kd-answer-text.is-long { font-size: clamp(1.35rem, 2.05vw, 2.15rem); }
      .kd-answer-grid.is-dense .kd-answer-text.is-xlong { font-size: clamp(1.05rem, 1.55vw, 1.6rem); line-height: 1.2; }
      .kd-voter-strip {
        width: min(88vw, 1120px);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(7px, 1vw, 13px);
        flex-wrap: wrap;
        flex: 0 0 auto;
      }
      .kd-voter {
        position: relative;
        width: clamp(45px, 4.5vw, 67px);
        height: clamp(48px, 5vw, 74px);
        opacity: .42;
        transform: translateY(4px) scale(.92);
        transition: opacity 220ms ease, transform 360ms cubic-bezier(.16,.9,.24,1.16);
      }
      .kd-voter img { width: 100%; height: 100%; object-fit: contain; }
      .kd-voter::after {
        content: "";
        position: absolute;
        right: -2px;
        bottom: 1px;
        width: 19px;
        height: 19px;
        display: grid;
        place-items: center;
        border: 3px solid var(--kd-ink);
        border-radius: 50%;
        background: #fff;
        color: var(--kd-ink);
        font-size: .72rem;
        font-weight: 900;
      }
      .kd-voter.is-done { opacity: 1; transform: none; }
      .kd-voter.is-done::after { content: "✓"; background: var(--kd-gold); }

      .kd-reveal-stage .kd-question h1 { font-size: clamp(1.35rem, 2.5vw, 2.55rem); }
      .kd-reveal-stage .kd-answer-grid {
        box-sizing: border-box;
        padding-bottom: 58px;
      }
      .kd-result-card {
        opacity: 1;
        animation: none;
        padding: 0;
        overflow: visible;
      }
      .kd-result-face,
      .kd-result-cover {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: clamp(12px, 1.4vw, 20px);
        box-sizing: border-box;
        border-radius: inherit;
        backface-visibility: hidden;
      }
      .kd-result-face {
        background: var(--kd-paper);
        color: var(--kd-ink);
        opacity: 0;
        transform: rotateX(-82deg) scale(.94);
        transform-origin: 50% 0;
        animation: kd-result-open 520ms calc(560ms + var(--kd-i) * 520ms) cubic-bezier(.16,.9,.24,1.12) forwards;
      }
      .kd-result-card.is-truth .kd-result-face { background: var(--kd-gold); }
      .kd-result-cover {
        z-index: 2;
        background: var(--kd-paper);
        color: var(--kd-ink);
        transform-origin: 50% 100%;
        animation: kd-cover-away 540ms calc(280ms + var(--kd-i) * 520ms) cubic-bezier(.4,0,.2,1) forwards;
      }
      @keyframes kd-cover-away {
        0%, 24% { opacity: 1; transform: none; }
        68% { opacity: 1; transform: rotateX(86deg) translateY(-8px); }
        100% { opacity: 0; visibility: hidden; transform: rotateX(98deg) translateY(-16px); }
      }
      @keyframes kd-result-open {
        from { opacity: 0; transform: rotateX(-82deg) scale(.94); }
        to { opacity: 1; transform: none; }
      }
      .kd-result-label {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: clamp(1rem, 1.35vw, 1.2rem);
        font-weight: 900;
      }
      .kd-result-label img {
        width: clamp(34px, 3vw, 49px);
        height: clamp(38px, 3.5vw, 55px);
        object-fit: contain;
      }
      .kd-result-face .kd-answer-text {
        font-size: clamp(1.2rem, 1.85vw, 1.9rem);
        line-height: 1.22;
      }
      .kd-result-face .kd-answer-text.is-short { font-size: clamp(2rem, 3.2vw, 3.4rem); line-height: 1.08; }
      .kd-result-face .kd-answer-text.is-medium { font-size: clamp(1.55rem, 2.5vw, 2.65rem); line-height: 1.14; }
      .kd-result-face .kd-answer-text.is-long { font-size: clamp(1.25rem, 1.95vw, 2rem); }
      .kd-result-face .kd-answer-text.is-xlong { font-size: clamp(1.05rem, 1.5vw, 1.55rem); line-height: 1.18; }
      .kd-answer-grid.is-dense .kd-result-face .kd-answer-text.is-short { font-size: clamp(1.65rem, 2.5vw, 2.6rem); }
      .kd-answer-grid.is-dense .kd-result-face .kd-answer-text.is-medium { font-size: clamp(1.35rem, 2vw, 2.1rem); }
      .kd-answer-grid.is-dense .kd-result-face .kd-answer-text.is-long { font-size: clamp(1.15rem, 1.65vw, 1.7rem); }
      .kd-answer-grid.is-dense .kd-result-face .kd-answer-text.is-xlong { font-size: clamp(.98rem, 1.3vw, 1.35rem); }
      .kd-result-meta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        flex-wrap: wrap;
        font-size: clamp(.95rem, 1.2vw, 1.1rem);
        font-weight: 850;
      }
      .kd-points {
        padding: 2px 8px;
        border: 3px solid var(--kd-ink);
        background: var(--kd-orange);
        color: #fff;
        transform: rotate(-1deg);
      }
      .kd-result-voters {
        position: absolute;
        left: 7px;
        bottom: 5px;
        display: flex;
        direction: ltr;
      }
      .kd-result-voters img {
        width: clamp(27px, 2.5vw, 39px);
        height: clamp(30px, 2.8vw, 44px);
        margin-left: -10px;
        object-fit: contain;
        filter: drop-shadow(2px 2px 0 rgba(7,9,13,.24));
      }
      .kd-reveal-action {
        position: fixed;
        z-index: 9;
        right: max(26px, env(safe-area-inset-right));
        bottom: max(22px, env(safe-area-inset-bottom));
        border: 4px solid var(--kd-ink);
        border-radius: 5px;
        padding: 10px 20px;
        background: var(--kd-gold);
        color: var(--kd-ink);
        box-shadow: 6px 7px 0 var(--kd-ink);
        font: 900 clamp(.9rem, 1.3vw, 1.15rem)/1.2 inherit;
        cursor: pointer;
      }

      body.leaderboard-phase.khedaa-leaderboard-phase {
        background: #075a78 !important;
        background-image:
          linear-gradient(rgba(2,34,50,.42), rgba(2,34,50,.42)),
          var(--mj-art-khedaa),
          linear-gradient(116deg,#086686 0 62%,#054963 62% 100%) !important;
        background-position: center !important;
        background-size: cover !important;
      }
      body.khedaa-leaderboard-phase .sh-lb-kicker,
      body.khedaa-leaderboard-phase .sh-lb-winner,
      body.khedaa-leaderboard-phase .sh-lb-next { background: #f2b92f; }
      body.khedaa-leaderboard-phase .sh-lb-gain { color: #f2b92f; }
      body.khedaa-leaderboard-phase .sh-lb-rank { color: #b95a1d; }

      @media (max-aspect-ratio: 1/1) {
        .kd-stage { padding-inline: 4vw; }
        .kd-hud { width: 92vw; }
        .kd-brand { font-size: .92rem; padding: 5px 10px; }
        .kd-brand-mark { width: 22px; height: 22px; }
        .kd-hud-meta { margin-left: 68px; }
        .kd-stage-timer { top: 88px; left: 14px; }
        .kd-writing-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: auto; padding: 8px; }
        .kd-answer-grid,
        .kd-answer-grid.is-dense { grid-template-columns: 1fr; overflow: auto; padding: 8px; }
        .kd-answer-card { min-height: 118px; }
      }
      @media (prefers-reduced-motion: reduce) {
        .kd-stage * {
          animation-duration: 1ms !important;
          animation-delay: 0ms !important;
          transition-duration: 1ms !important;
        }
      }
      /* ── Player emoji reactions — float up across the host screen ──────── */
      .rxn-layer {
        position: fixed;
        inset: 0;
        z-index: 70;
        pointer-events: none;
        overflow: hidden;
      }
      .rxn-float {
        position: absolute;
        bottom: 6%;
        font-size: clamp(2.6rem, 5vw, 4.4rem);
        line-height: 1;
        will-change: transform, opacity;
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
        animation: rxn-rise 2.7s var(--ease-out) forwards;
      }
      @keyframes rxn-rise {
        0% {
          opacity: 0;
          transform: translateY(0) scale(0.4) rotate(0deg);
        }
        12% {
          opacity: 1;
          transform: translateY(-6vh) scale(1.18) rotate(0deg);
        }
        26% {
          transform: translateY(-15vh) scale(1) rotate(0deg);
        }
        100% {
          opacity: 0;
          transform: translateY(-72vh) scale(0.92) rotate(var(--rxn-rot, 0deg));
        }
      }
      /* Reduced-motion: a gentle in-place fade, no upward drift. */
      .rxn-float.rxn-static {
        bottom: 38%;
        animation: rxn-fade 1.6s ease forwards;
      }
      @keyframes rxn-fade {
        0% {
          opacity: 0;
          transform: scale(0.7);
        }
        16% {
          opacity: 1;
          transform: scale(1);
        }
        70% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: scale(1);
        }
      }

      /* ── Blender progress bar (5 s drain) ──────────────────────────────── */
      .blender-progress {
        width: 100%;
        max-width: 420px;
        height: 10px;
        margin: 24px auto 0;
        background: var(--color-progress-track);
        border-radius: 999px;
        overflow: hidden;
      }
      .blender-progress-fill {
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          var(--primary),
          var(--color-mode-khallat, var(--primary))
        );
        transform-origin: right center;
        animation: drain var(--dur-drain) linear forwards;
      }

      /* ── Champion confetti burst (final-leaderboard) ──────────────────── */
      .champion-stage {
        position: relative;
        overflow: visible;
      }
      .confetti-burst {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 0;
      }
      .champion-stage > div:not(.confetti-burst) {
        position: relative;
        z-index: 1;
      }
      .confetti {
        position: absolute;
        top: -24px;
        width: 12px;
        height: 18px;
        border-radius: 2px;
        transform: rotate(var(--rot, 0deg));
        animation: confetti-fall var(--dur-loop-confetti) var(--ease-in-soft)
          forwards;
        opacity: 0;
      }
      .confetti.c1 {
        background: var(--color-confetti-1);
      }
      .confetti.c2 {
        background: var(--color-confetti-2);
      }
      .confetti.c3 {
        background: var(--color-confetti-3);
      }
      .confetti.c4 {
        background: var(--color-confetti-4);
      }
      .confetti.c5 {
        background: var(--color-confetti-5);
      }
      @keyframes confetti-fall {
        0% {
          opacity: 0;
          transform: translateY(-30px) rotate(var(--rot, 0deg));
        }
        15% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translateY(420px) rotate(calc(var(--rot, 0deg) + 540deg));
        }
      }


      /* ── Purchase celebration overlay ─────────────────────────────────────
         Shown after a completed purchase (Moyasar web + StoreKit native).
         Full-screen so the moment is unmissable; auto-dismisses. Confetti
         reuses the champion burst's colors/keyframes. Honors reduced motion:
         the card still appears, only the confetti and counter are skipped. */
      .purchase-celebration {
        position: fixed;
        inset: 0;
        z-index: 9000;
        display: grid;
        place-items: center;
        background: var(--color-overlay-dim, rgba(0, 0, 0, 0.72));
        backdrop-filter: blur(6px);
        opacity: 0;
        animation: pc-scrim-in 0.28s var(--ease-out-soft, ease-out) forwards;
      }
      .purchase-celebration.pc-closing {
        animation: pc-scrim-out 0.32s ease-in forwards;
      }
      @keyframes pc-scrim-in {
        to { opacity: 1; }
      }
      @keyframes pc-scrim-out {
        to { opacity: 0; }
      }
      .pc-card {
        position: relative;
        width: min(92vw, 30rem);
        padding: 2.6rem 2rem 2.2rem;
        border-radius: 1.5rem;
        background: linear-gradient(
          160deg,
          var(--color-card, #0d2137),
          var(--color-bg, #071523)
        );
        border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
        text-align: center;
        transform: scale(0.88);
        opacity: 0;
        animation: pc-card-in 0.42s cubic-bezier(0.18, 1.25, 0.4, 1) 0.08s forwards;
      }
      @keyframes pc-card-in {
        to { transform: scale(1); opacity: 1; }
      }
      .pc-confetti {
        position: absolute;
        inset: -10% -10% 0;
        pointer-events: none;
        overflow: hidden;
        border-radius: inherit;
      }
      .pc-seal {
        width: 5.2rem;
        height: 5.2rem;
        margin: 0 auto 1.1rem;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: linear-gradient(
          145deg,
          var(--color-primary, #e58d00),
          var(--color-primary-grad-end, #ff9d00)
        );
        box-shadow: 0 0 0 0 rgba(229, 141, 0, 0.55);
        animation: pc-seal-pulse 1.5s ease-out 0.3s 2;
      }
      .pc-seal svg {
        width: 2.6rem;
        height: 2.6rem;
      }
      .pc-seal path {
        stroke: var(--color-on-primary, #fff);
        stroke-width: 3.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        stroke-dasharray: 40;
        stroke-dashoffset: 40;
        animation: pc-tick 0.5s var(--ease-out-soft, ease-out) 0.36s forwards;
      }
      @keyframes pc-tick {
        to { stroke-dashoffset: 0; }
      }
      @keyframes pc-seal-pulse {
        0% { box-shadow: 0 0 0 0 rgba(229, 141, 0, 0.5); }
        100% { box-shadow: 0 0 0 1.6rem rgba(229, 141, 0, 0); }
      }
      .pc-amount {
        font-size: clamp(2.8rem, 8vw, 4rem);
        font-weight: 900;
        line-height: 1;
        color: var(--color-primary, #e58d00);
        font-variant-numeric: tabular-nums;
      }
      .pc-title {
        margin: 0.5rem 0 0;
        font-size: var(--fs-lg, 1.6rem);
        font-weight: 800;
        color: var(--color-text, #fff);
      }
      .pc-detail {
        margin: 0.7rem auto 0;
        max-width: 24rem;
        font-size: var(--fs-base, 1.05rem);
        line-height: 1.65;
        color: var(--color-text-soft, rgba(255, 255, 255, 0.7));
      }
      .pc-perks {
        margin: 1.5rem 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 0.6rem;
        text-align: start;
      }
      .pc-perks li {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.65rem 0.9rem;
        border-radius: 0.8rem;
        background: var(--color-surface-2, #132a3e);
        font-size: var(--fs-sm, 1rem);
        color: var(--color-text, #fff);
        opacity: 0;
        animation: pc-perk-in 0.4s ease-out forwards;
      }
      .pc-perks li:nth-child(1) { animation-delay: 0.52s; }
      .pc-perks li:nth-child(2) { animation-delay: 0.64s; }
      .pc-perks li:nth-child(3) { animation-delay: 0.76s; }
      @keyframes pc-perk-in {
        from { opacity: 0; transform: translateY(0.5rem); }
        to { opacity: 1; transform: none; }
      }
      .pc-perks .pc-check {
        flex: 0 0 auto;
        color: var(--color-accent-teal, #06d6a0);
        font-weight: 900;
      }
      .pc-dismiss {
        margin-top: 1.6rem;
        padding: 0.8rem 2.4rem;
        border: 0;
        border-radius: 999px;
        background: var(--color-primary, #e58d00);
        color: var(--color-on-primary, #fff);
        font-family: inherit;
        font-size: var(--fs-base, 1.05rem);
        font-weight: 800;
        cursor: pointer;
      }
      .pc-dismiss:hover { filter: brightness(1.08); }
      @media (prefers-reduced-motion: reduce) {
        .purchase-celebration,
        .pc-card,
        .pc-perks li,
        .pc-seal,
        .pc-seal path {
          animation: none !important;
          opacity: 1;
          transform: none;
          stroke-dashoffset: 0;
        }
      }
      /* ── Faker in-game cinematic styles ──────────────────────────────────── */

      /* PROMPT: Mission Briefing Card */
      .mission-card {
        background: var(--color-card);
        border: 2px solid rgba(170, 50, 50, 0.55);
        border-radius: var(--rad-xl);
        padding: 32px 40px 36px;
        max-width: 1000px;
        width: 100%;
        box-shadow:
          0 0 48px rgba(160, 45, 45, 0.14),
          var(--shadow);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin: 8px 0;
      }
      .mission-classified-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(0, 0, 0, 0.18);
        border: 2px solid rgba(170, 50, 50, 0.55);
        border-radius: var(--rad-pill);
        padding: 6px 20px;
        font-size: clamp(0.85rem, 1.2vw, 1rem);
        font-weight: 800;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .mission-tagline {
        font-size: clamp(1.1rem, 1.8vw, 1.5rem);
        font-weight: 700;
        color: #fff;
        line-height: 1.5;
      }
      .mission-warn {
        font-size: clamp(0.92rem, 1.3vw, 1.15rem);
        font-weight: 600;
        color: rgba(255, 255, 255, 0.8);
        background: rgba(0, 0, 0, 0.14);
        border: 1px solid rgba(170, 50, 50, 0.35);
        border-radius: 14px;
        padding: 10px 20px;
      }
      .mission-cta-hint {
        font-size: clamp(1rem, 1.4vw, 1.2rem);
        color: var(--muted);
        margin-top: 4px;
      }

      /* Avatar grid for PROMPT phase */
      @keyframes avatarGridPop {
        0% {
          opacity: 0;
          transform: scale(0.65) translateY(18px);
        }
        65% {
          transform: scale(1.06) translateY(-4px);
        }
        100% {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }
      .avatar-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 24px;
        justify-content: center;
        max-width: 1100px;
        margin: 4px 0;
      }
      .avatar-grid-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        opacity: 0;
        animation: avatarGridPop var(--dur-slow) var(--ease-bounce) forwards;
      }
      .avatar-grid-img {
        width: clamp(60px, 7vw, 88px);
        height: clamp(60px, 7vw, 88px);
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(170, 50, 50, 0.45);
        background: rgba(13, 33, 55, 0.8);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
      }
      .avatar-grid-name {
        font-size: clamp(0.78rem, 1.1vw, 1rem);
        font-weight: 700;
        color: rgba(255, 255, 255, 0.85);
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
      }

      /* VOTING: Faker question glow card */
      @keyframes glowPulse {
        0%,
        100% {
          box-shadow:
            0 0 30px rgba(160, 50, 50, 0.18),
            var(--shadow);
        }
        50% {
          box-shadow:
            0 0 56px rgba(160, 50, 50, 0.32),
            var(--shadow);
        }
      }
      .faker-vote-card {
        background: var(--color-card);
        border: 2px solid rgba(170, 50, 50, 0.55);
        border-radius: var(--rad-xl);
        padding: 28px 44px;
        max-width: 860px;
        width: 100%;
        animation: glowPulse 3s var(--ease-in-out) infinite;
        margin: 8px 0;
      }
      .faker-vote-eyebrow {
        font-size: clamp(0.82rem, 1.1vw, 0.95rem);
        font-weight: 800;
        color: rgba(255, 255, 255, 0.75);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 10px;
      }
      .faker-vote-question {
        font-size: clamp(1.6rem, 2.8vw, 2.6rem);
        font-weight: 900;
        color: #fff;
        line-height: 1.35;
      }
      .vote-counter-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(0, 0, 0, 0.18);
        border: 2px solid rgba(170, 50, 50, 0.50);
        border-radius: var(--rad-pill);
        padding: 8px 28px;
        font-size: clamp(1.1rem, 1.7vw, 1.5rem);
        font-weight: 800;
        color: #fff;
        margin: 12px 0;
      }

      /* Roster avatar overlay bubble */
      .roster-bubble {
        position: relative;
      }
      .roster-bubble-overlay {
        position: absolute;
        bottom: -3px;
        right: -3px;
        width: clamp(20px, 2.4vw, 26px);
        height: clamp(20px, 2.4vw, 26px);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.65rem;
        font-weight: 900;
        border: 2px solid rgba(0, 0, 0, 0.4);
      }
      .roster-bubble-overlay.done {
        background: var(--accent-teal);
        color: #fff;
      }
      .roster-bubble-overlay.pending {
        background: var(--card);
        color: var(--muted);
      }

      /* RESULTS: Faker reveal */
      @keyframes fakerRevealIn {
        0% {
          opacity: 0;
          transform: scale(0.5);
        }
        65% {
          transform: scale(1.08);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }
      @keyframes verdictStamp {
        0% {
          opacity: 0;
          transform: scale(1.55) rotate(-6deg);
        }
        65% {
          transform: scale(0.95) rotate(1.5deg);
        }
        100% {
          opacity: 1;
          transform: scale(1) rotate(0deg);
        }
      }
      .faker-verdict-frame .verdict {
        animation: verdictStamp var(--dur-slow) var(--ease-bounce) both;
      }
      .faker-reveal-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin: 14px 0;
      }
      .faker-reveal-label {
        font-size: clamp(0.88rem, 1.2vw, 1rem);
        font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .faker-reveal-avatar {
        width: clamp(80px, 9vw, 120px);
        height: clamp(80px, 9vw, 120px);
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid var(--primary);
        box-shadow:
          0 0 40px rgba(160, 50, 50, 0.50),
          0 8px 30px rgba(0, 0, 0, 0.6);
        animation: fakerRevealIn var(--dur-slow) var(--ease-bounce) 0.25s both;
      }
      .faker-reveal-name {
        font-size: clamp(1.5rem, 2.5vw, 2.2rem);
        font-weight: 900;
        color: var(--primary);
        animation: fakerRevealIn var(--dur-slow) var(--ease-bounce) 0.45s both;
      }
      .prompt-reveal-line {
        font-size: clamp(1.1rem, 1.7vw, 1.5rem);
        font-weight: 700;
        color: rgba(255, 255, 255, 0.85);
        background: var(--color-card);
        border: 1px solid rgba(170, 50, 50, 0.35);
        border-radius: 14px;
        padding: 12px 28px;
        max-width: 760px;
        margin: 8px 0;
      }

      /* Result cards: avatar + vote bars */
      .result-card .result-avatar {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 auto 10px;
        border: 2px solid rgba(255, 255, 255, 0.12);
        display: block;
      }
      .result-card.faker .result-avatar {
        border-color: var(--accent-yellow);
        box-shadow: 0 0 18px rgba(255, 209, 102, 0.4);
      }
      .result-card.accused .result-avatar {
        border-color: var(--accent-pink);
        box-shadow: 0 0 14px rgba(var(--accent-pink), 0.3);
      }
      .vote-bar-wrap {
        width: 100%;
        height: 7px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        overflow: hidden;
        margin: 8px 0 3px;
      }
      .vote-bar-fill {
        height: 100%;
        border-radius: 999px;
        background: var(--muted);
        transition: width 0.9s var(--ease-out-soft);
      }
      .result-card.faker .vote-bar-fill {
        background: var(--accent-yellow);
      }
      .result-card.accused .vote-bar-fill {
        background: var(--accent-pink);
      }

      /* ── Faker RESULTS paired layout (caught vs escaped) ──────────────── */
      .faker-verdict-frame {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin: 8px 0 20px;
        padding: 24px 36px;
        border-radius: var(--rad-xl);
        max-width: 880px;
        width: 100%;
        box-shadow: var(--shadow);
      }
      .faker-verdict-frame.caught {
        background: linear-gradient(
          135deg,
          var(--color-verdict-caught-bg-1),
          var(--color-verdict-caught-bg-2)
        );
        border: 2px solid var(--accent-teal);
      }
      .faker-verdict-frame.escaped {
        background: linear-gradient(
          135deg,
          var(--color-verdict-escaped-bg-1),
          var(--color-verdict-escaped-bg-2)
        );
        border: 2px solid var(--accent-pink);
      }
      .faker-verdict-frame .verdict-eyebrow {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--muted);
        text-transform: uppercase;
      }
      .faker-verdict-frame .verdict {
        margin: 0;
      }
      .faker-verdict-frame .verdict-sub {
        font-size: clamp(1.1rem, 1.7vw, 1.4rem);
        font-weight: 600;
        color: var(--muted);
        line-height: 1.5;
      }

      /* ── تكذبني · theatrical TV stage ───────────────────────────────────
         The reference works because its borders, character and type direct
         attention as one composition. These scenes deliberately avoid the
         shared card/dashboard language used by the shell and other modes. */
      .fk-stage {
        --fk-accent: #ef5f50;
        --fk-soft: #f7c1b9;
        position: fixed;
        inset: 0;
        z-index: 40;
        overflow: hidden;
        color: #11100e;
        background: #f8f5ed;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
        isolation: isolate;
      }
      body.faker-stage-phase { background:#f8f5ed;overflow:hidden; }
      body.faker-stage-phase .page-header,
      body.faker-stage-phase #top-left-bar,
      body.faker-stage-phase #game-controls,
      body.faker-stage-phase #fullscreen-btn,
      body.faker-stage-phase #rotate-overlay,
      body.faker-stage-phase #auto-advance-indicator { display:none!important; }
      body.faker-stage-phase #app { position:fixed;inset:0;z-index:39;width:100%;height:100%;transform:none!important;overflow:hidden; }
      .fk-stage.fk-point { --fk-accent:#58bf45; --fk-soft:#b9e4af; }
      .fk-stage.fk-fingers { --fk-accent:#2598e9; --fk-soft:#afd8f5; }
      .fk-stage.fk-text { --fk-accent:#8b5a91; --fk-soft:#d9bedc; }
      .fk-stage.fk-final { --fk-accent:#8b5a91; --fk-soft:#d9bedc; }
      .fk-canvas {
        position: absolute;
        inset: 0;
        overflow: hidden;
        background: #f8f5ed;
        border-radius: 0;
        box-shadow: inset 0 0 90px rgba(53,43,31,.09);
      }
      .fk-canvas::before {
        content:"";
        position:absolute;
        inset:0;
        pointer-events:none;
        opacity:.22;
        background-image: radial-gradient(#5d5142 0.55px, transparent 0.7px);
        background-size: 7px 7px;
        mix-blend-mode:multiply;
      }
      .fk-color-floor {
        position:absolute;
        right:-3%;
        bottom:-6%;
        left:-3%;
        height:26%;
        background:var(--fk-accent);
        transform:rotate(-1.1deg);
        transform-origin:center;
      }
      .fk-round {
        position:absolute;
        z-index:5;
        top:4%;
        right:4.5%;
        color:var(--fk-accent);
        font-size:clamp(1.05rem,1.6vw,1.45rem);
        font-weight:1000;
      }
      .fk-stage-tools {
        position:absolute;z-index:15;top:max(18px,2.8vh);left:max(20px,3vw);
        display:flex;align-items:center;gap:10px;direction:ltr;
      }
      .fk-stage-code { color:#615b52;font-size:clamp(.95rem,1.3vw,1.15rem);font-weight:900;letter-spacing:.08em; }
      .fk-stage-tool { width:auto;min-width:0;padding:10px 15px 11px;border:3px solid #171512;border-radius:3px;color:#171512;background:#fffdf8;font:850 clamp(.95rem,1.3vw,1.15rem)/1 inherit;box-shadow:4px 4px 0 #171512;cursor:pointer; }
      .fk-stage-tool:hover { color:var(--fk-accent);transform:translateY(-1px); }
      .fk-character {
        position:absolute;
        z-index:4;
        left:2.3%;
        bottom:9%;
        width:clamp(210px,31vw,510px);
        height:77%;
        background-image:url('/assets/faker/art/host-hand-male.png');
        background-repeat:no-repeat;
        background-size:contain;
        background-position:center bottom;
        filter:drop-shadow(0 11px 0 rgba(0,0,0,.09));
        animation:fk-character-in .72s cubic-bezier(.18,.88,.25,1.16) both;
      }
      .fk-sprite-1 { background-image:url('/assets/faker/art/host-point-male.png'); }
      .fk-sprite-2 { background-image:url('/assets/faker/art/host-number-male.png'); }
      .fk-sprite-3 { background-image:url('/assets/faker/art/host-note-male.png'); }
      @keyframes fk-character-in { from { opacity:0; transform:translateX(-11%) rotate(-2deg); } }
      .fk-category-pick .fk-color-floor { height:30%;background:#151310; }
      .fk-picker-copy { position:absolute;z-index:8;top:8%;right:7%;left:7%;text-align:center; }
      .fk-picker-copy small { display:block;color:#746d63;font-size:clamp(1.05rem,1.55vw,1.4rem);font-weight:950; }
      .fk-picker-copy h1 { margin:.08em auto 0;max-width:min(92vw,1250px);font-size:clamp(2.5rem,6vw,6.8rem);line-height:1.12;font-weight:1000;letter-spacing:-.035em;overflow-wrap:anywhere;text-wrap:balance; }
      .fk-picker-copy h1 strong { color:#ef5f50; }
      .fk-picker-copy p { margin:.45em 0 0;font-size:clamp(1.25rem,2.2vw,2rem);font-weight:850; }
      .fk-shuffle-stage { position:absolute;z-index:5;right:4%;bottom:16%;left:4%;height:52%; }
      .fk-shuffle-host { --delay:0s;position:absolute;inset:0;background-repeat:no-repeat;background-position:center bottom;background-size:contain;opacity:0;filter:drop-shadow(0 14px 0 rgba(0,0,0,.09));animation:fk-host-shuffle 2.8s steps(1,end) infinite;animation-delay:var(--delay); }
      .fk-shuffle-host:first-child { opacity:1; }
      .fk-shuffle-host:nth-child(1){--delay:0s;background-image:url('/assets/faker/art/host-hand-male.png')}
      .fk-shuffle-host:nth-child(2){--delay:-2.1s;background-image:url('/assets/faker/art/host-point-male.png')}
      .fk-shuffle-host:nth-child(3){--delay:-1.4s;background-image:url('/assets/faker/art/host-number-male.png')}
      .fk-shuffle-host:nth-child(4){--delay:-.7s;background-image:url('/assets/faker/art/host-note-male.png')}
      @keyframes fk-host-shuffle { 0%,24.99%{opacity:1;transform:scale(.94) rotate(-1deg)}25%,100%{opacity:0;transform:scale(1.04)} }
      @media (prefers-reduced-motion:reduce) {
        .fk-shuffle-host { animation:none;opacity:0;transform:none; }
        .fk-shuffle-host:first-child { opacity:1; }
      }
      .fk-picker-labels { position:absolute;z-index:9;right:8%;bottom:6%;left:8%;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2vw;color:#fff;text-align:center;font-size:clamp(1rem,1.55vw,1.4rem);font-weight:950; }
      .fk-picker-labels span { padding:7px 8px;border-top:4px solid currentColor; }
      .fk-category-reveal .fk-character { width:clamp(280px,40vw,650px);height:86%;bottom:4%; }
      .fk-category-reveal .fk-copy { top:25%;animation:fk-lock-copy .65s cubic-bezier(.18,.9,.2,1.16) both; }
      .fk-category-reveal .fk-title { font-size:clamp(4rem,10vw,10rem); }
      @keyframes fk-lock-copy { from{opacity:0;transform:translateX(8%)} }
      .fk-copy {
        position:absolute;
        z-index:5;
        top:16%;
        right:7%;
        width:min(59%, 880px);
        text-align:right;
      }
      .fk-kicker {
        color:var(--fk-accent);
        font-size:clamp(1.15rem,1.85vw,1.65rem);
        font-weight:1000;
      }
      .fk-title {
        margin:.05em 0 0;
        color:#11100e;
        font-size:clamp(3rem,8vw,8.5rem);
        font-weight:1000;
        line-height:.98;
        letter-spacing:-.045em;
      }
      .fk-subtitle {
        margin:.55rem 0 0;
        color:#26231f;
        font-size:clamp(1.3rem,2.4vw,2.35rem);
        font-weight:850;
      }
      .fk-rail-copy {
        position:absolute;
        z-index:6;
        right:34%;
        bottom:25%;
        left:6%;
        padding:10px 18px 12px;
        color:#fff;
        background:#0b0a09;
        font-size:clamp(1.05rem,1.85vw,1.6rem);
        font-weight:1000;
        text-align:center;
        transform:rotate(-.4deg);
      }
      .fk-player-slips {
        position:absolute;
        z-index:7;
        right:7%;
        bottom:7.2%;
        left:32%;
        display:flex;
        align-items:flex-end;
        justify-content:center;
        flex-wrap:wrap;
        gap:clamp(6px,1vw,14px);
      }
      .fk-name-slip {
        --slip-rotate:0deg;
        display:inline-flex;
        align-items:center;
        gap:7px;
        max-width:100%;
        flex-shrink:0;
        white-space:nowrap;
        padding:7px 13px 9px;
        color:#12110f;
        background:rgba(248,245,237,.72);
        clip-path:polygon(3% 10%,96% 0,100% 82%,82% 100%,4% 91%,0 23%);
        font-size:clamp(.95rem,1.4vw,1.25rem);
        font-weight:1000;
        transform:rotate(var(--slip-rotate));
        animation:fk-slip-in .45s cubic-bezier(.2,.9,.25,1.2) both;
      }
      .fk-name-slip:nth-child(3n+1){--slip-rotate:-3deg}.fk-name-slip:nth-child(3n+2){--slip-rotate:2deg}
      .fk-name-slip.is-done{background:#0b0a09;color:#fff}.fk-name-slip.is-done::after{content:"✓";color:var(--fk-accent);font-weight:1000}
      @keyframes fk-slip-in { from { opacity:0; transform:translateY(25px) rotate(var(--slip-rotate)); } }
      .fk-name-slip img { height:44px;width:44px;object-fit:contain;border-radius:0;filter:drop-shadow(0 4px 0 rgba(0,0,0,.10)); }
      .fk-action {
        position:absolute;
        z-index:9;
        left:5%;
        bottom:4.5%;
        width:min(27%,330px);
        border:0;
        border-radius:3px;
        padding:12px 24px 13px;
        color:#fff;
        background:#0b0a09;
        clip-path:none;
        font-family:inherit;
        font-size:clamp(1.05rem,1.65vw,1.45rem);
        font-weight:1000;
        cursor:pointer;
        box-shadow:none;
        transform:rotate(-.35deg);
      }
      .fk-action:hover { transform:rotate(-.35deg) translateY(-3px); background:#27231f; }
      .fk-final-actions { position:absolute;z-index:9;left:5%;right:5%;bottom:4.5%;display:flex;justify-content:center;gap:9px;flex-wrap:wrap; }
      .fk-final-actions .fk-action { position:static;width:auto;min-width:170px; }

      /* Voting turns the task into the only headline and the player labels
         into the only interactive-looking objects on the television. */
      .fk-voting .fk-character { left:auto;right:1.4%;bottom:auto;top:1.5%;width:clamp(95px,13vw,210px);height:25%; }
      .fk-text-progress { position:absolute;z-index:7;right:38%;bottom:8%;left:6%;display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap; }
      .fk-text-progress .fk-name-slip { opacity:.42; }
      .fk-text-progress .fk-name-slip.is-done { opacity:1;background:#fff; }
      .fk-answer-wall { position:absolute;z-index:7;top:27%;right:7%;bottom:13%;left:7%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:clamp(10px,1.5vw,20px);padding:8px;overflow-y:auto;scrollbar-width:thin; }
      .fk-answer-wall.is-dense { grid-template-columns:repeat(3,minmax(0,1fr));align-content:start; }
      .fk-answer-slip { padding:clamp(18px,2.4vw,34px);background:#fff;clip-path:polygon(1% 6%,97% 0,100% 91%,4% 100%,0 18%);font-size:clamp(1.65rem,3vw,3.1rem);line-height:1.25;font-weight:900;text-align:center;overflow-wrap:anywhere;text-wrap:balance;filter:drop-shadow(0 8px 0 rgba(0,0,0,.08));animation:fk-slip-in .48s cubic-bezier(.2,.9,.25,1.2) both; }
      .fk-answer-slip.is-short { font-size:clamp(2.5rem,4.3vw,4.6rem);line-height:1.12; }
      .fk-answer-slip.is-medium { font-size:clamp(2rem,3.4vw,3.6rem);line-height:1.18; }
      .fk-answer-slip.is-long { font-size:clamp(1.6rem,2.6vw,2.75rem); }
      .fk-answer-slip.is-xlong { font-size:clamp(1.35rem,2.15vw,2.25rem); }
      .fk-answer-wall.is-dense .fk-answer-slip { padding:clamp(12px,1.6vw,22px);font-size:clamp(1.35rem,2vw,2.05rem); }
      .fk-answer-wall.is-dense .fk-answer-slip.is-short { font-size:clamp(1.9rem,2.8vw,2.9rem); }
      .fk-answer-wall.is-dense .fk-answer-slip.is-medium { font-size:clamp(1.6rem,2.35vw,2.45rem); }
      .fk-answer-wall.is-dense .fk-answer-slip.is-long { font-size:clamp(1.35rem,1.95vw,2rem); }
      .fk-answer-wall.is-dense .fk-answer-slip.is-xlong { font-size:clamp(1.15rem,1.65vw,1.7rem); }
      .fk-result-slip em { display:block;color:#756e64;font-size:.72em;font-style:normal;font-weight:800; }
      .fk-task-strip {
        position:absolute;
        z-index:5;
        top:5%;
        right:13%;
        left:6%;
        min-height:15%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        padding:10px 3vw 13px;
        border-bottom:clamp(9px,1.4vw,22px) solid #0a0908;
      }
      .fk-task-strip small { color:var(--fk-accent);font-size:clamp(1.15rem,1.7vw,1.55rem);font-weight:900; }
      .fk-task-strip strong { font-size:clamp(2.15rem,4vw,4.35rem);line-height:1.25;font-weight:900;text-wrap:balance; }
      .fk-vote-title { position:absolute;z-index:5;top:27%;right:0;left:0;text-align:center;font-size:clamp(2.75rem,5.6vw,6.2rem);font-weight:1000; }
      .fk-voters {
        position:absolute;
        z-index:6;
        top:42%;
        right:8%;
        left:8%;
        bottom:15%;
        display:flex;
        flex-wrap:wrap;
        align-content:flex-start;
        overflow-y:auto;
        padding:8px;
        scrollbar-width:thin;
        gap:clamp(8px,1.2vw,17px);
      }
      .fk-voter {
        position:relative;
        box-sizing:border-box;
        min-height:80px;
        min-width:min(100%,250px);
        max-width:100%;
        flex:1 0 auto;
        display:flex;
        align-items:center;
        gap:12px;
        padding:8px 16px;
        color:#12110f;
        background:#fffdf8;
        border:0;
        clip-path:polygon(2% 6%,98% 0,100% 88%,91% 100%,4% 94%,0 18%);
        transform:rotate(var(--r,0deg));
        animation:fk-voter-in .5s cubic-bezier(.2,.9,.25,1.18) both;
      }
      .fk-voter:nth-child(2n){--r:1.4deg}.fk-voter:nth-child(3n){--r:-1.2deg}
      @keyframes fk-voter-in { from { opacity:0;transform:translateY(38px) rotate(var(--r,0deg)); } }
      .fk-voter img { width:56px;height:60px;flex-shrink:0;object-fit:contain;border-radius:0;filter:saturate(.92) drop-shadow(0 5px 0 rgba(0,0,0,.09)); }
      .fk-voter strong { white-space:nowrap;overflow-wrap:normal;font-size:clamp(1.15rem,1.9vw,1.7rem);line-height:1.4; }
      .fk-voter i { margin-right:auto;color:var(--fk-accent);font-style:normal;font-size:1.75rem;opacity:0;transform:scale(.4);transition:.25s; }
      .fk-voter.is-done i { opacity:1;transform:scale(1); }
      @media (min-height:541px) {
        .fk-vote-title { top:34%;font-size:clamp(2.4rem,4.6vw,5rem);line-height:1; }
        .fk-voters { top:44%;bottom:14%; }
        .fk-voters:has(> :nth-child(9)) { gap:8px; }
        .fk-voters:has(> :nth-child(9)) .fk-voter { min-height:64px; }
        .fk-voters:has(> :nth-child(9)) .fk-voter img { width:44px;height:48px; }
      }
      .fk-vote-progress { position:absolute;z-index:7;right:0;bottom:7%;left:0;color:#fff;text-align:center;font-size:clamp(1.1rem,1.8vw,1.6rem);font-weight:1000; }

      /* The result is a sequence: accusation, pause, then the actual faker. */
      .fk-results .fk-color-floor { height:100%;opacity:.92;transform:none; }
      .fk-result-intro { position:absolute;z-index:6;inset:8% 8% 14%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;font-size:clamp(1.35rem,2.2vw,2.2rem);font-weight:900;animation:fk-beat-out .4s 2.3s both; }
      .fk-result-intro img{width:min(23vw,285px);height:min(38vh,360px);object-fit:contain;filter:drop-shadow(0 13px 0 rgba(0,0,0,.16));margin-bottom:5px}
      .fk-result-intro strong { display:block;margin-top:.1em;font-size:clamp(3.2rem,7.5vw,8rem);line-height:1.08;text-wrap:balance; }
      @keyframes fk-beat-out { to { opacity:0;transform:translateY(-20px); } }
      .fk-faker-reveal { position:absolute;z-index:5;inset:5% 9% 23%;display:grid;grid-template-columns:minmax(190px,.75fr) 1.25fr;align-items:center;gap:4vw;opacity:0;animation:fk-reveal-beat .65s 2.65s cubic-bezier(.16,.9,.25,1.1) forwards; }
      @keyframes fk-reveal-beat { to { opacity:1; } }
      .fk-reveal-avatar { width:min(30vw,330px);height:min(42vh,390px);object-fit:contain;border:0;border-radius:0;background:transparent;filter:drop-shadow(0 12px 0 rgba(0,0,0,.13));transform:rotate(-2deg) scale(.7);animation:fk-avatar-pop .7s 2.75s cubic-bezier(.18,.95,.28,1.25) forwards; }
      @keyframes fk-avatar-pop { to { transform:rotate(-2deg) scale(1); } }
      .fk-reveal-copy { color:#fff;text-align:right; }
      .fk-reveal-copy small { font-size:clamp(1.15rem,1.85vw,1.65rem);font-weight:900; }
      .fk-reveal-copy h1 { margin:0;font-size:clamp(3rem,8vw,8rem);line-height:1;font-weight:1000; }
      .fk-reveal-copy p { margin:.4rem 0 0;font-size:clamp(1.25rem,2.2vw,2rem);font-weight:850; }
      .fk-reveal-prompts { margin-top:16px;display:grid;gap:8px;padding:13px 16px 16px;color:#111;background:#f8f5ed;font-size:clamp(1.2rem,1.9vw,1.8rem);font-weight:850;line-height:1.4;clip-path:polygon(1% 5%,98% 0,100% 88%,94% 100%,2% 94%,0 16%); }
      .fk-prompt-line{display:grid;grid-template-columns:max-content 1fr;gap:10px;align-items:start}.fk-prompt-line b{color:var(--fk-accent);font-weight:1000}.fk-prompt-line span{color:#111;font-weight:900}
      .fk-result-slips { position:absolute;z-index:8;right:5%;bottom:3.5%;left:33%;display:flex;justify-content:center;gap:10px;padding:4px 3px 8px;overflow-x:auto;scrollbar-width:thin; }
      .fk-result-slips.is-crowded { justify-content:flex-start; }
      .fk-result-slip { min-width:120px;padding:8px 13px 10px;color:#111;background:#faf6ed;text-align:center;clip-path:polygon(3% 7%,97% 0,100% 88%,87% 100%,2% 92%,0 15%);font-size:clamp(.95rem,1.35vw,1.2rem);font-weight:1000;opacity:0;animation:fk-result-slip-in .4s calc(3.15s + var(--i)*90ms) forwards; }
      .fk-voting-scroll-hint { display:none; }
      @keyframes fk-result-slip-in { from { opacity:0;transform:translateY(24px) rotate(-2deg); } to { opacity:1;transform:translateY(0) rotate(0); } }
      .fk-result-slip span { display:block;color:var(--fk-accent);font-size:1.1em; }
      .fk-results.fk-text .fk-reveal-prompts {
        padding: clamp(12px, 1.3vw, 18px) clamp(16px, 1.8vw, 24px);
        font-size: clamp(1.3rem, 2vw, 1.9rem);
        line-height: 1.5;
        text-wrap: pretty;
      }
      .fk-results.fk-text .fk-result-slip {
        min-width: 145px;
        padding: 9px 14px 11px;
        font-size: clamp(1rem, 1.35vw, 1.2rem);
      }
      .fk-results.fk-text .fk-result-slip em {
        margin: .2em 0;
        font-size: clamp(1.15rem, 1.55vw, 1.45rem);
        line-height: 1.35;
        overflow-wrap: anywhere;
      }
      .fk-results.fk-text .fk-result-slip.is-long em {
        font-size: clamp(1rem, 1.3vw, 1.2rem);
      }
      .fk-results .fk-action { opacity:0;animation:fk-reveal-beat .35s 4s forwards; }
      .fk-results .fk-stage-tools{padding:5px 6px 7px;border:3px solid #171512;background:#f8f5ed;box-shadow:5px 5px 0 #171512;transform:rotate(-.4deg)}
      .fk-results .fk-stage-tool{border:0;box-shadow:none;background:transparent}

      /* Faker never cuts to the shared podium. Scores stay on the same paper
         stage, just like the reference: names live on the lower colour rail,
         gains fire one-by-one, then the markers grow and physically reorder. */
      .fk-score .fk-color-floor { height:35%;transform:rotate(-.7deg); }
      .fk-score-title { position:absolute;z-index:8;top:6%;right:7%;text-align:right;color:#14120f;font-size:clamp(2.4rem,5.6vw,6rem);font-weight:1000;line-height:.95;letter-spacing:-.04em; }
      .fk-score-title small { display:block;margin-bottom:.35rem;color:var(--fk-accent);font-size:clamp(1rem,1.4vw,1.3rem);letter-spacing:0; }
      .fk-score-title span { display:block;margin-top:.45rem;color:#5f584f;font-size:clamp(1rem,1.4vw,1.3rem);letter-spacing:0; }
      .fk-score-rail { position:absolute;z-index:4;right:2%;bottom:20%;left:2%;height:clamp(30px,4.5vw,58px);background:#0a0908;clip-path:polygon(0 0,93% 0,93% 0,100% 50%,93% 100%,93% 100%,0 100%);animation:fk-rail-draw .7s cubic-bezier(.18,.8,.24,1) both; }
      @keyframes fk-rail-draw { from { transform:translateX(105%); } }
      .fk-scoreboard { position:absolute;z-index:7;top:20%;right:3.5%;bottom:9%;left:3.5%;display:flex;direction:rtl;align-items:flex-end;justify-content:space-evenly;gap:clamp(2px,.65vw,11px); }
      .fk-score-marker { --marker-scale:1;--rank-lift:0px;position:relative;flex:1 1 0;min-width:0;max-width:180px;height:100%;text-align:center;transform-origin:50% 88%;animation:fk-marker-settle 1s calc(120ms + var(--i)*75ms) cubic-bezier(.18,.86,.2,1.12) both;transition:transform .5s cubic-bezier(.18,.9,.2,1.18),filter .3s ease; }
      .fk-score-marker.is-leader { --marker-scale:1.13;--rank-lift:clamp(16px,3vh,34px); }
      .fk-score-marker.is-second { --marker-scale:1.06;--rank-lift:clamp(7px,1.4vh,16px); }
      @keyframes fk-marker-settle { from { opacity:.25;transform:translateX(calc(var(--rank-shift)*1vw)) translateY(70px) scale(.72); } to { opacity:1;transform:translateY(calc(-1 * var(--rank-lift))) scale(var(--marker-scale)); } }
      .fk-score-marker.is-counting { z-index:15;animation:none!important;transform:translateY(calc(-18px - var(--rank-lift))) scale(calc(var(--marker-scale)*1.22));filter:drop-shadow(0 18px 12px rgba(20,17,12,.18)); }
      .fk-score-marker.is-settled { animation:none!important;transform:translateY(calc(-1 * var(--rank-lift))) scale(var(--marker-scale)); }
      .fk-score-total { position:absolute;right:0;bottom:43%;left:0;color:var(--fk-accent);font-size:clamp(3.5rem,8.5vw,9.5rem);font-weight:1000;line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.08em;transition:color .25s ease,transform .38s cubic-bezier(.18,.9,.2,1.18); }
      .fk-score-marker.no-gain .fk-score-total { opacity:.58; }
      .fk-score-marker.is-counting .fk-score-total { color:var(--fk-accent);transform:scale(1.12) rotate(-2deg); }
      .fk-score-gain { position:absolute;z-index:4;right:50%;bottom:37%;width:max-content;padding:4px 10px 7px;color:#fff;background:#0a0908;clip-path:polygon(3% 8%,97% 0,100% 86%,86% 100%,2% 94%,0 18%);font-size:clamp(.8rem,1.5vw,1.35rem);font-style:normal;font-weight:1000;transform:translateX(50%) rotate(-3deg);opacity:0; }
      .fk-score-marker.is-counting .fk-score-gain { animation:fk-gain-pop .48s cubic-bezier(.18,.95,.25,1.25) both; }
      .fk-score-marker.is-settled .fk-score-gain { opacity:1; }
      @keyframes fk-gain-pop { from { opacity:0;transform:translate(50%,22px) scale(.25) rotate(-9deg); } to { opacity:1;transform:translate(50%,0) scale(1) rotate(-3deg); } }
      .fk-score-avatar { position:absolute;z-index:3;right:50%;bottom:clamp(45px,7vh,78px);width:clamp(48px,8vw,112px);height:clamp(70px,14vh,150px);object-fit:contain;border:0;border-radius:0;background:transparent;filter:drop-shadow(0 8px 0 rgba(0,0,0,.12));transform:translateX(50%);transition:transform .4s cubic-bezier(.18,.9,.22,1.2); }
      .fk-score-marker.is-counting .fk-score-avatar { transform:translateX(50%) scale(1.18) rotate(-2deg); }
      .fk-score-name { position:absolute;z-index:9;right:50%;bottom:2%;max-width:95%;padding:5px 11px 8px;color:#111;background:#fffdf8;clip-path:polygon(3% 8%,97% 0,100% 88%,84% 100%,3% 93%,0 18%);font-size:clamp(.95rem,1.3vw,1.2rem);font-weight:1000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateX(50%) rotate(var(--name-tilt,-2deg)); }
      .fk-score-rank { position:absolute;z-index:8;right:50%;bottom:calc(2% + 38px);color:#fff;font-size:clamp(.8rem,1vw,.95rem);font-weight:1000;transform:translateX(50%);opacity:.78; }
      .fk-scoreboard.is-crowded .fk-score-total { font-size:clamp(2.3rem,5.4vw,5.5rem); }
      .fk-scoreboard.is-crowded .fk-score-avatar { width:clamp(38px,5.3vw,72px);height:clamp(58px,11vh,112px); }
      .fk-scoreboard.is-crowded .fk-score-name { padding-inline:6px;font-size:clamp(.78rem,1vw,.95rem); }
      .fk-scoreboard.is-sparse { right:10%;left:10%;gap:clamp(18px,3vw,48px); }
      .fk-scoreboard.is-sparse .fk-score-marker { max-width:260px; }
      .fk-scoreboard.is-sparse .fk-score-name { max-width:100%;padding:7px 16px 10px;font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.12;overflow:visible;text-overflow:clip;white-space:normal;text-wrap:balance; }
      .fk-scoreboard.is-sparse .fk-score-rank { font-size:clamp(.9rem,1.2vw,1.1rem); }
      .fk-final .fk-color-floor { height:31%; }
      .fk-final-award { position:absolute;z-index:8;top:7%;right:50%;width:min(74%,900px);text-align:center;transform:translateX(50%); }
      .fk-final-banner { display:inline-block;padding:10px clamp(38px,7vw,90px) 15px;color:#fff;background:#0a0908;clip-path:polygon(7% 0,93% 5%,100% 50%,92% 100%,7% 95%,0 50%);font-size:clamp(1rem,2.2vw,2rem);font-weight:1000;animation:fk-banner-drop .7s cubic-bezier(.18,.9,.22,1.18) both; }
      @keyframes fk-banner-drop { from { opacity:0;transform:translateY(-45px) scale(.7) rotate(-3deg); } }
      .fk-final-avatar { display:block;margin:clamp(15px,3vh,32px) auto -12px;width:clamp(150px,23vw,330px);height:clamp(190px,45vh,420px);object-fit:contain;border:0;border-radius:0;filter:drop-shadow(0 15px 0 rgba(0,0,0,.12));animation:fk-final-winner-in .9s .35s cubic-bezier(.15,.9,.22,1.15) both; }
      @keyframes fk-final-winner-in { from { opacity:0;transform:translateY(70px) scale(.65) rotate(4deg); } }
      .fk-final-name { display:inline-block;min-width:min(70vw,500px);padding:4px 28px 11px;background:#fffdf8;clip-path:polygon(2% 7%,98% 0,100% 88%,90% 100%,2% 94%,0 14%);font-size:clamp(2.3rem,6vw,6rem);font-weight:1000;line-height:1;animation:fk-final-name-in .55s .8s cubic-bezier(.18,.95,.25,1.2) both; }
      @keyframes fk-final-name-in { from { opacity:0;transform:scale(.35) rotate(-8deg); } }
      .fk-final-points { position:relative;z-index:9;margin-top:.45rem;color:#fff;font-size:clamp(.9rem,1.5vw,1.25rem);font-weight:1000; }

      body[data-theme="faker"] .cd-overlay { background:#f8f5ed; }
      body[data-theme="faker"] .cd-overlay::before { content:"";position:absolute;inset:0;background:#f8f5ed;box-shadow:inset 0 0 90px rgba(53,43,31,.09); }
      body[data-theme="faker"] .cd-pill { width:auto;height:auto;border:0;border-radius:0;background:transparent;box-shadow:none; }
      body[data-theme="faker"] .cd-pill::before { display:none; }
      body[data-theme="faker"] .cd-num { color:#10100e;text-shadow:none;font-size:clamp(12rem,28vw,28rem);font-weight:1000; }
      body[data-theme="faker"] .cd-go { color:#10100e;text-shadow:none;font-size:clamp(4rem,10vw,11rem);font-weight:1000; }
      @media(max-height:540px){.fk-character{height:72%}.fk-title{font-size:clamp(2.7rem,7vw,6.5rem)}.fk-voters{top:40%}.fk-voter{min-height:68px}.fk-voter img{width:46px;height:46px}.fk-scoreboard{top:22%;bottom:7%}.fk-score-title{font-size:clamp(2rem,4.6vw,4.6rem)}}

      @media (orientation: landscape) and (max-height: 540px) {
        .sh-lb-screen { gap: 6px; padding: 10px 3vw 12px; }
        .sh-lb-kicker { padding: 3px 9px; border-width: 3px; font-size: .85rem; }
        .sh-lb-title { margin-top: .05em; font-size: clamp(1.8rem, 8vh, 2.6rem); }
        .sh-lb-layout { width: 92vw; grid-template-columns: minmax(170px,.72fr) minmax(0,1.65fr); gap: 14px; }
        .sh-lb-winner, .sh-lb-row { border-width: 4px; box-shadow: 6px 7px 0 #07090d; }
        .sh-lb-winner { padding: 8px; }
        .sh-lb-winner::before { top: -10px; right: -8px; padding: 2px 8px; border-width: 3px; font-size: 1.3rem; }
        .sh-lb-winner img { width: min(15vw,130px); height: min(22vh,110px); }
        .sh-lb-winner-name { font-size: clamp(1.35rem, 5vh, 1.8rem); }
        .sh-lb-score { font-size: clamp(1rem, 3.8vh, 1.35rem); }
        .sh-lb-rest { gap: 8px; }
        .sh-lb-row,
        .sh-lb-rest.is-sparse .sh-lb-row { min-height: 72px; grid-template-columns: 62px minmax(0,1fr); gap: 9px; padding: 5px 10px; }
        .sh-lb-row img,
        .sh-lb-rest.is-sparse .sh-lb-row img { height: 62px; }
        .sh-lb-name,
        .sh-lb-rest.is-sparse .sh-lb-name { font-size: clamp(1.05rem, 4.5vh, 1.5rem); }
        .sh-lb-rank { font-size: .82rem; }
        .sh-lb-metrics { margin-top: 2px; gap: 7px; }
        .sh-lb-row .sh-lb-score { font-size: .9rem; }
        .sh-lb-gain { margin: 0; padding: 1px 6px; font-size: .78rem; }
        .sh-lb-tool, .sh-lb-next { border-width: 3px; box-shadow: 3px 4px 0 #07090d; padding: 7px 11px; font-size: .8rem; }
        .sh-lb-next { bottom: max(12px,env(safe-area-inset-bottom)); }
        .sh-lb-tools, .sh-lb-final-actions { bottom: max(10px,env(safe-area-inset-bottom)); }
        .sh-card-answer.is-short { font-size: clamp(2.1rem, 4vw, 3rem); }
        .sh-card-answer.is-medium { font-size: clamp(1.65rem, 3vw, 2.25rem); }
        .sh-card-answer.is-long { font-size: clamp(1.3rem, 2.35vw, 1.8rem); }
        .sh-card-answer.is-xlong { font-size: clamp(1.08rem, 1.85vw, 1.45rem); }
        .sh-final-card-answer.is-short { font-size: clamp(1.7rem, 3.3vw, 2.35rem); }
        .sh-final-card-answer.is-medium { font-size: clamp(1.4rem, 2.7vw, 1.95rem); }
        .sh-final-card-answer.is-long { font-size: clamp(1.15rem, 2.15vw, 1.55rem); }
        .sh-final-card-answer.is-xlong { font-size: clamp(1rem, 1.75vw, 1.3rem); }
        .kd-answer-text.is-short { font-size: clamp(2rem, 3.8vw, 2.8rem); }
        .kd-answer-text.is-medium { font-size: clamp(1.55rem, 3vw, 2.2rem); }
        .kd-answer-text.is-long { font-size: clamp(1.25rem, 2.3vw, 1.7rem); }
        .kd-answer-text.is-xlong { font-size: clamp(1.05rem, 1.85vw, 1.4rem); }
        .fk-answer-wall.is-dense { grid-template-columns:repeat(2,minmax(0,1fr)); }
      }

      .url-hint {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.35);
        margin-top: var(--sp-4);
      }
      /* Player name chips — used in gameplay phases (mahkama, khedaa, etc.) */
      @keyframes chipPopIn {
        0% {
          opacity: 0;
          transform: translateY(14px) scale(0.85);
        }
        60% {
          transform: translateY(-3px) scale(1.06);
        }
        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
      .lobby-chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-3);
        justify-content: center;
      }
      .lobby-chip {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #ffffff;
        border-radius: var(--rad-pill);
        padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
        display: inline-flex;
        align-items: center;
        gap: var(--sp-3);
        box-shadow: var(--shadow);
        font-size: clamp(1.05rem, 1.5vw, 1.35rem);
        font-weight: 800;
        animation: chipPopIn var(--dur-slow) var(--ease-bounce)
          var(--chip-delay, 0s) both;
        transition: all 0.2s var(--ease-out);
      }
      .lobby-chip:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: var(--shadow-lg);
      }
      .lobby-chip-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(229, 141, 0, 0.2);
        color: var(--color-primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 0.95rem;
        flex-shrink: 0;
        overflow: hidden;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
      }
      .lobby-chip-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      }

      /* Lobby ready celebration — confetti over the scatter footer. */
      .lobby-confetti-burst {
        position: absolute;
        left: 0;
        right: 0;
        top: -140px;
        bottom: -32px;
        pointer-events: none;
        overflow: hidden;
        z-index: 0;
      }
      .lobby-scatter-footer > *:not(.lobby-confetti-burst) {
        position: relative;
        z-index: 1;
      }

      /* ── Player chips ── */
      .players-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        justify-content: center;
        margin: 20px 0;
        max-width: 1200px;
      }
      .player-chip {
        flex-shrink: 0;
        white-space: nowrap;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #ffffff;
        border-radius: var(--rad-pill);
        padding: var(--sp-3) var(--sp-6);
        font-size: clamp(1.2rem, 2vw, 1.7rem);
        font-weight: 700;
        box-shadow: var(--shadow);
      }

      /* ── Buttons ── */
      button {
        font-size: clamp(1.3rem, 2.2vw, 1.9rem);
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
        padding: var(--sp-4) var(--sp-7);
        border-radius: var(--rad-pill);
        border: none;
        cursor: pointer;
        font-weight: 700;
        margin: var(--sp-2);
        transition:
          transform 0.12s var(--ease-bounce),
          filter 0.12s,
          box-shadow 0.12s;
        color: #ffffff;
      }
      button:hover {
        transform: translateY(-2px);
        filter: brightness(1.1);
      }
      button:active {
        transform: translateY(3px);
      }
      button:disabled,
      button[disabled] {
        opacity: 0.45;
        cursor: not-allowed;
        transform: none;
        filter: none;
      }
      button:disabled:hover,
      button[disabled]:hover {
        transform: none;
        filter: none;
      }
      .btn-primary {
        background: var(--primary);
        outline: 3px solid rgba(0, 0, 0, 0.55);
        outline-offset: 0;
        box-shadow: var(--shadow-primary);
        text-shadow:
          -1px -1px 0 rgba(0,0,0,0.5),
          1px -1px 0 rgba(0,0,0,0.5),
          -1px 1px 0 rgba(0,0,0,0.5),
          1px 1px 0 rgba(0,0,0,0.5);
      }
      .btn-primary:active {
        box-shadow: none;
      }
      .btn-secondary {
        background: #0f597b;
        outline: 3px solid #1a0a00;
        outline-offset: 0;
        box-shadow: 0 5px 0 #073a52;
        text-shadow:
          -1px -1px 0 #1a0a00,
          1px -1px 0 #1a0a00,
          -1px 1px 0 #1a0a00,
          1px 1px 0 #1a0a00;
      }
      .btn-secondary:active {
        box-shadow: 0 2px 0 #073a52;
      }
      .btn-danger {
        background: #d63030;
        outline: 3px solid #1a0a00;
        outline-offset: 0;
        box-shadow: 0 5px 0 #8b1515;
        text-shadow:
          -1px -1px 0 #1a0a00,
          1px -1px 0 #1a0a00,
          -1px 1px 0 #1a0a00,
          1px 1px 0 #1a0a00;
      }
      .btn-danger:active {
        box-shadow: 0 2px 0 #8b1515;
      }

      /* ── Game picker ── */
      .game-picker {
        display: flex;
        gap: var(--sp-5);
        flex-wrap: wrap;
        justify-content: center;
        margin-top: var(--sp-3);
      }
      .pack-sections {
        display: flex;
        flex-direction: column;
        gap: var(--sp-6);
        margin-top: var(--sp-4);
        width: 100%;
      }
      .pack-section {
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
      }
      .pack-section + .pack-section {
        padding-top: var(--sp-5);
        border-top: 1px dashed rgba(255, 255, 255, 0.12);
      }
      .pack-section-header {
        display: flex;
        align-items: baseline;
        gap: var(--sp-3);
        justify-content: center;
      }
      .pack-section-title {
        font-size: 1.4rem;
        font-weight: 800;
        color: #ffffff;
        margin: 0;
      }
      .pack-section .game-picker {
        margin-top: 0;
      }
      .btn-game-pick {
        padding: var(--sp-7) var(--sp-7) var(--sp-6);
        min-width: clamp(260px, 28vw, 380px);
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #ffffff;
        border-radius: var(--rad-xl);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-4);
        box-shadow: var(--shadow);
        font-weight: 800;
        transition: var(--bounce);
        outline: none;
        text-shadow: none;
      }
      .btn-game-pick:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: var(--shadow-lg);
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        filter: none;
      }
      .btn-game-pick img {
        height: clamp(100px, 16vw, 180px);
        width: auto;
        object-fit: contain;
      }
      /* Verb-led mode-picker hierarchy: action verb (primary, big) reads
       above the support copy so hosts immediately know what each mode
       asks them to do. */
      /* All four cards share the تكذبني (faker) rust tone for the verb
       so the SELECT screen reads as one unified family — matches the
       single-color treatment used by the brand-mark PNGs. */
      .btn-game-pick .verb {
        font-size: clamp(1.15rem, 1.9vw, 1.55rem);
        font-weight: 900;
        color: var(--color-primary);
        letter-spacing: -0.005em;
        line-height: 1.25;
      }
      .btn-game-pick .sub {
        font-size: clamp(0.95rem, 1.4vw, 1.15rem);
        color: rgba(255, 255, 255, 0.5);
        font-weight: 500;
        line-height: 1.5;
        max-width: 280px;
      }
      .btn-game-pick.shathaat:hover {
        background: var(--color-tile-shathaat-hover);
      }
      .btn-game-pick.faker:hover {
        background: var(--color-tile-faker-hover);
      }
      .btn-game-pick.khallat:hover {
        background: var(--color-tile-khallat-hover);
      }
      .btn-game-pick.nesba:hover {
        background: var(--color-tile-nesba-hover);
      }
      .btn-game-pick.mahkama:hover {
        background: var(--color-tile-mahkama-hover);
      }
      .btn-game-pick.khedaa:hover {
        background: var(--color-tile-khedaa-hover);
      }
      /* ═══════════════════════════════════════════════════════════════════════
         SELECT PHASE — exact Figma replica (file ZA46ezKmRLS0yTaBo8b8lx, frame 21:1050)
         Card images exported directly from Figma nodes 21:1056-1064.
         Pack headers exported from nodes 21:1317 & 21:1319.
         ═══════════════════════════════════════════════════════════════════════ */
      .btn-game-pick .game-name,
      .btn-game-pick .player-count {
        display: none;
      }

      /* Background: Figma bg layer + blue ellipse glows */
      body.select-phase {
        background-color: #000;
        background-image: var(--mj-art-select);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: #ffffff;
        --bg: #04121c;
        --card: #04121c;
        --color-bg: #04121c;
        --color-overlay-glass: rgba(255, 255, 255, 0.08);
        --color-overlay-glass-border: rgba(255, 255, 255, 0.15);
        --muted: rgba(255, 255, 255, 0.5);
        --primary: #ffffff;
        --text: #ffffff;
      }
      body.select-phase::before,
      body.select-phase::after {
        content: "";
        position: fixed;
        border-radius: 50%;
        background: rgba(0, 92, 160, 0.5);
        filter: blur(160px);
        pointer-events: none;
        z-index: 0;
      }
      body.select-phase::before {
        width: clamp(400px, 55vw, 900px);
        height: clamp(400px, 55vw, 900px);
        top: -25%;
        right: -10%;
      }
      body.select-phase::after {
        width: clamp(450px, 60vw, 950px);
        height: clamp(450px, 60vw, 950px);
        bottom: -25%;
        left: -10%;
      }
      body.select-phase #app,
      body.select-phase .page-header {
        position: relative;
        z-index: 1;
      }
      body.select-phase #app {
        zoom: 0.9;
      }
      /* The cards are sized off viewport width, so on a short window the two
         pack rows are taller than the screen. body and #app both clip by
         design — in-game screens must never scroll — which left this phase cut
         off with no way to reach the bottom row.

         SELECT, and only SELECT, scrolls the DOCUMENT instead: body goes back
         to growing with its content, the way it did before the release layout
         pass swapped min-height:100vh for a fixed 100dvh. Deliberately not an
         inner scroller on #app — #app carries zoom: 0.9, and a zoomed scroll
         container computes its own scrollable extent from unzoomed child
         layout, so the last slice of content sits past the end of the scroll
         range and can't be reached no matter how far you scroll. That is the
         bottom cut-off. The document scroller has no zoom on it.

         justify-content drops to flex-start because centring a flex container
         pushes overflow past the top edge; the auto margins below re-centre
         when there IS room and collapse to 0 when there isn't.

         padding-bottom keeps the last row clear of the bottom edge, and the
         scrollbar is hidden — under RTL it renders on the left, over the
         artwork. Wheel, trackpad, touch and keyboard scrolling are unaffected. */
      html:has(body.select-phase) {
        scrollbar-width: none; /* Firefox */
      }
      html:has(body.select-phase)::-webkit-scrollbar {
        display: none;
      }
      body.select-phase {
        height: auto;
        min-height: 100dvh;
        overflow-y: auto;
        scrollbar-width: none;
      }
      body.select-phase::-webkit-scrollbar {
        display: none;
      }
      body.select-phase #app {
        overflow: visible;
        justify-content: flex-start;
        padding-bottom: var(--sp-7);
      }
      body.select-phase .pack-sections {
        margin-top: auto;
      }
      body.select-phase .url-hint {
        margin-bottom: auto;
      }

      /* Original two-row pack layout; the second row's heading is hidden. */
      body.select-phase .pack-sections {
        gap: clamp(10px, 1.8vw, 28px);
      }
      body.select-phase .pack-section + .pack-section {
        border-top: none;
      }
      body.select-phase .pack-section-header {
        justify-content: center;
        align-items: center;
      }

      /* First-row "الألعاب" header — solid white lettering on dark */
      body.select-phase .pack-section-title {
        background: none;
        padding: 0;
        border-radius: 0;
        font-size: 0; /* hide text — image carries the label */
        line-height: 0;
        display: block;
        width: clamp(180px, 26vw, 370px);
        height: clamp(46px, 6.5vw, 93px);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        margin: 0 auto clamp(8px, 1vw, 16px);
      }
      body.select-phase [data-pack-series="1"] .pack-section-title {
        background-image: url("/assets/select-games-header-solid.png?v=2");
      }
      body.select-phase [data-pack-series="2"] .pack-section-header {
        display: none;
      }

      /* Game cards — use Figma-exported card images as background */
      body.select-phase .game-picker {
        gap: clamp(10px, 1.8vw, 28px);
        justify-content: center;
        flex-wrap: nowrap;
        align-items: flex-start; /* prevent flex stretch overriding aspect-ratio */
      }
      body.select-phase .btn-game-pick {
        display: block;
        position: relative;
        background: transparent !important;
        border: none;
        box-shadow: none;
        outline: none;
        padding: 0;
        color: transparent;
        font-size: 0;
        line-height: 0;
        min-width: 0;
        width: min(clamp(180px, 23vw, 340px), calc((100% - clamp(20px, 3.6vw, 56px)) / 3));
        aspect-ratio: 854 / 900; /* actual exported PNG dimensions */
        flex-shrink: 0;
        cursor: pointer;
        transform-origin: 50% 50%;
        will-change: transform;
        transition:
          transform 0.18s ease-out,
          filter 0.18s ease-out;
        border-radius: 0;
      }
      /* Card image lives in ::before so it's completely decoupled from button box-model */
      body.select-phase .btn-game-pick::before {
        content: "";
        position: absolute;
        inset: 0;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        pointer-events: none;
      }
      body.select-phase .btn-game-pick > * {
        display: none !important;
      }
      /* Per-card glow colour for hover — matches each mode's brand hue */
      body.select-phase .btn-game-pick.khallat  { --card-glow: rgba(45,212,191,0.55); }
      body.select-phase .btn-game-pick.faker    { --card-glow: rgba(170,50,50,0.55); }
      body.select-phase .btn-game-pick.shathaat { --card-glow: rgba(168,85,247,0.55); }
      body.select-phase .btn-game-pick.nesba    { --card-glow: rgba(229,141,0,0.55); }
      body.select-phase .btn-game-pick.mahkama  { --card-glow: rgba(147,51,234,0.55); }
      body.select-phase .btn-game-pick.khedaa   { --card-glow: rgba(232,185,49,0.55); }

      @keyframes cardHoverSheen {
        0%   { filter: brightness(1); }
        35%  { filter: brightness(1.22); }
        100% { filter: brightness(1.08); }
      }

      body.select-phase .btn-game-pick:hover {
        transform: translateY(-12px);
        animation: cardHoverSheen 0.35s ease forwards;
      }
      body.select-phase .btn-game-pick:active {
        transform: translateY(2px);
        filter: brightness(0.92);
      }

      /* Per-card Figma image on ::before */
      body.select-phase .btn-game-pick.khallat::before {
        background-image: url("/assets/card-khallat.webp");
      }
      body.select-phase .btn-game-pick.faker::before {
        background-image: url("/assets/card-faker.webp");
      }
      body.select-phase .btn-game-pick.shathaat::before {
        background-image: url("/assets/card-shathaat.webp");
      }
      body.select-phase .btn-game-pick.nesba::before {
        background-image: url("/assets/card-nesba.webp");
      }
      body.select-phase .btn-game-pick.khedaa::before {
        background-image: url("/assets/card-khedaa.webp");
      }
      body.select-phase .btn-game-pick.mahkama::before {
        background-image: url("/assets/card-mahkama.webp");
      }

      /* Rules preview — a floating speech-bubble/squircle above each card.
         It is rendered as a body-level popover so the SELECT screen's scroll
         and card transforms can never clip it. */
      body.select-phase .btn-game-pick.is-coming-soon::before {
        filter: blur(3px) saturate(0.45) brightness(0.52);
        transform: scale(0.985);
      }
      body.select-phase .btn-game-pick.is-coming-soon:hover::before {
        filter: blur(2px) saturate(0.55) brightness(0.6);
      }
      body.select-phase .btn-game-pick .coming-soon-overlay {
        position: absolute;
        z-index: 3;
        inset: 9% 8%;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(3px, 0.45vw, 7px);
        border: 0;
        border-radius: 0;
        color: #fff;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        font-size: clamp(1rem, 1.7vw, 1.45rem);
        font-weight: 950;
        line-height: 1.1;
        letter-spacing: 0;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
        pointer-events: none;
      }
      body.select-phase .btn-game-pick .coming-soon-overlay small {
        font: 800 clamp(0.48rem, 0.7vw, 0.65rem) / 1 system-ui, sans-serif;
        letter-spacing: 0.18em;
        opacity: 0.68;
      }
      body.select-phase .btn-game-pick .rules-tap-hint {
        display: none !important;
      }

      .rules-preview-popover {
        --rules-accent: #2dd4bf;
        --pointer-x: 50%;
        position: fixed;
        z-index: 190;
        width: min(390px, calc(100vw - 24px));
        padding: 7px;
        direction: rtl;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        filter: blur(5px);
        transform: translateY(22px) scale(0.78);
        transform-origin: var(--pointer-x) 100%;
        will-change: transform, opacity, filter;
        transition:
          opacity 180ms ease-out,
          filter 210ms ease-out,
          transform 320ms cubic-bezier(0.16, 1.18, 0.32, 1),
          visibility 0s linear 320ms;
      }
      .rules-preview-popover.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        filter: blur(0);
        transform: translateY(0) scale(1);
        transition-delay: 0s;
      }
      .rules-preview-popover.is-below {
        transform-origin: var(--pointer-x) 0%;
      }
      .rules-preview-popover.is-below:not(.is-open) {
        transform: translateY(-22px) scale(0.78);
      }
      /* Extra controls/cues are enabled by the dedicated iPhone Host layer.
         Keep desktop and iPad compositions unchanged. */
      .rules-preview-close,
      .lobby-qr-status,
      .kd-deck-cue,
      .fk-result-scroll-hint {
        display: none;
      }
      .rules-preview-shell {
        position: relative;
        overflow: hidden;
        padding: 10px 10px 12px;
        color: #fff;
        background-color: #071523;
        background:
          radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--rules-accent), transparent 62%), transparent 42%),
          linear-gradient(145deg, rgba(20, 42, 58, 0.98), rgba(5, 17, 28, 0.98));
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 32px 32px 38px 38px / 28px 28px 34px 34px;
        box-shadow:
          0 22px 55px rgba(0, 0, 0, 0.48),
          0 0 30px color-mix(in srgb, var(--rules-accent), transparent 76%),
          inset 0 1px 0 rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }
      .rules-preview-media {
        position: relative;
        overflow: hidden;
        aspect-ratio: 16 / 9;
        display: grid;
        place-items: center;
        border-radius: 25px 25px 31px 31px / 22px 22px 28px 28px;
        background-color: #10283a;
        background:
          linear-gradient(135deg, color-mix(in srgb, var(--rules-accent), #071523 62%), #071523 72%);
        border: 1px solid rgba(255, 255, 255, 0.17);
      }
      .rules-preview-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.1) 44%, transparent 63%);
        transform: translateX(-110%);
        animation: rulesPlaceholderSheen 2.8s ease-in-out infinite;
        pointer-events: none;
      }
      .rules-preview-media video {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
      .rules-preview-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
      }
      .rules-preview-play {
        width: 50px;
        height: 50px;
        display: grid;
        place-items: center;
        padding-inline-start: 3px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        box-shadow: 0 9px 26px rgba(0, 0, 0, 0.25);
        font-size: 1.15rem;
      }
      .rules-preview-placeholder strong {
        font-size: 1rem;
        font-weight: 900;
      }
      .rules-preview-placeholder span:last-child {
        color: rgba(255, 255, 255, 0.64);
        font-size: 0.72rem;
        font-weight: 700;
      }
      .rules-preview-copy {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 8px 2px;
      }
      .rules-preview-title {
        min-width: 0;
      }
      .rules-preview-title strong {
        display: block;
        font-size: 1rem;
        font-weight: 950;
      }
      .rules-preview-title span {
        display: block;
        margin-top: 2px;
        color: rgba(255, 255, 255, 0.61);
        font-size: 0.72rem;
        font-weight: 700;
      }
      /* Phone Host turns the first tap into a real preview-and-confirm flow.
         Other surfaces retain their existing second-tap behavior. */
      .rules-preview-action,
      .rules-preview-status {
        display: none;
      }
      .rules-preview-pointer {
        position: absolute;
        z-index: -1;
        left: var(--pointer-x);
        bottom: -9px;
        width: 25px;
        height: 25px;
        border-right: 1px solid rgba(255, 255, 255, 0.18);
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 2px 4px 7px 4px;
        background: #071523;
        transform: translateX(-50%) rotate(45deg);
      }
      .rules-preview-popover.is-below .rules-preview-pointer {
        top: -9px;
        bottom: auto;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        border-left: 1px solid rgba(255, 255, 255, 0.18);
      }
      @keyframes rulesPlaceholderSheen {
        0%, 46% { transform: translateX(-110%); }
        72%, 100% { transform: translateX(110%); }
      }
      @media (hover: none), (pointer: coarse) {
        body.select-phase .btn-game-pick .rules-tap-hint {
          position: absolute;
          z-index: 4;
          top: 7%;
          left: 7%;
          width: clamp(34px, 5vw, 46px);
          aspect-ratio: 1;
          display: grid !important;
          place-items: center;
          border: 1px solid rgba(255, 255, 255, 0.28);
          border-radius: 50%;
          color: #fff;
          background: rgba(4, 18, 28, 0.62);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
          backdrop-filter: blur(7px);
          -webkit-backdrop-filter: blur(7px);
          font-size: clamp(0.72rem, 1.25vw, 0.95rem);
          line-height: 1;
          pointer-events: none;
        }
        body.select-phase .btn-game-pick.is-coming-soon .rules-tap-hint {
          display: none !important;
        }
      }
      @media (max-width: 620px) {
        body.select-phase .game-picker {
          grid-template-columns: repeat(2, minmax(150px, 1fr));
        }
        .rules-preview-popover {
          width: min(330px, calc(100vw - 18px));
          padding: 5px;
        }
        .rules-preview-copy {
          padding-inline: 5px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .rules-preview-popover,
        .rules-preview-media::after {
          animation: none;
          transition: opacity 120ms linear;
        }
      }
      /* URL hint */
      body.select-phase .url-hint {
        color: rgba(255, 255, 255, 0.35);
      }

      /* Corner UI elements — dark overrides so they don't show white on dark bg */
      body.select-phase #back-btn {
        background: #0f597b;
        color: #ffffff;
        border: none;
        outline: 2.5px solid #1a0a00;
        outline-offset: 0;
        box-shadow:
          0 4px 0 #0a3a52,
          0 6px 18px rgba(0, 0, 0, 0.55);
        text-shadow:
          -1px -1px 0 #1a0a00,
          1px -1px 0 #1a0a00,
          -1px 1px 0 #1a0a00,
          1px 1px 0 #1a0a00;
      }
      body.select-phase #back-btn:hover {
        background: #1c7aa0;
        transform: translateY(-2px);
        box-shadow:
          0 6px 0 #0a3a52,
          0 8px 22px rgba(0, 0, 0, 0.55);
      }
      body.select-phase #back-btn:active {
        transform: translateY(3px);
        box-shadow: 0 1px 0 #0a3a52;
      }
      body.select-phase #fullscreen-btn {
        display: inline-flex;
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        box-shadow: none;
      }
      body.select-phase .page-header {
        background: transparent;
      }
      /* ══ LOBBY phase — exact Figma replica ══════════════════════════════ */
      body.lobby-phase {
        padding: 0;
        overflow: hidden;
        background-color: #071523;
        background-image: none;
      }
      body.lobby-phase .page-header {
        display: none;
      }
      body.lobby-phase #app {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        display: block;
        flex: none;
        overflow: hidden;
        background: transparent;
      }

      /* Scatter (left) | Info panel (right) — direction:ltr overrides page RTL */
      body.lobby-phase .lobby-layout {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        position: relative;
        direction: ltr;
        background: var(--mj-art-lobby) center center / cover no-repeat;
      }

      /* ── LEFT: Scatter area ────────────────────────────────────────────── */
      .lobby-scatter {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        position: relative;
      }
      .lobby-scatter-bubbles {
        flex: 1 1 0;
        position: relative;
        overflow: visible;
        min-height: 0;
        padding-top: clamp(60px, 8vh, 90px);
      }

      /* ── Left-edge badge: Vector5 shape + game logo ───────────────────────── */

      /* Overflow wrapper covers the full scatter area so its overflow:hidden
         clips the container's left -80px overhang at the screen edge */
      .lobby-badge-overflow-wrap {
        position: absolute;
        inset: 0;
        overflow: hidden;
        background: transparent;
        pointer-events: none;
        z-index: 3;
      }

      /* Container: left:-80px pushes 80px off-screen; wrapper clips it */
      .lobby-badge-container {
        position: absolute;
        left: -80px;
        top: 50%;
        transform: translateY(-50%);
        width: 320px;
        height: 480px;
        background: transparent;
      }

      /* Shape fills the container exactly. object-position:left pins any
         contain-letterboxing to the left so the badge artwork sits flush
         against the screen edge instead of floating in from it. */
      .lobby-vector5-shape {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: left center;
        display: block;
      }

      /* Logo centered in the visible slice (x=80–320 → center at x=200) */
      .lobby-game-logo-img {
        position: absolute;
        left: 185px;
        top: 45%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: auto;
      }

      /* Player bubble */
      @keyframes lobbyBubblePop {
        0% {
          opacity: 0;
          transform: scale(0.4) translateY(20px);
        }
        65% {
          transform: scale(1.08) translateY(-3px);
        }
        100% {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }
      @keyframes lobbyFloat {
        0%,
        100% {
          transform: translateY(0px);
        }
        40% {
          transform: translateY(-10px);
        }
        60% {
          transform: translateY(-10px);
        }
      }
      .lobby-bubble {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        transform: translate(-50%, -50%);
        left: var(--bx);
        top: var(--by);
        animation: lobbyBubblePop 0.5s var(--ease-bounce) var(--bdelay, 0s) both;
        appearance: none;
        margin: 0;
        padding: 0;
        border: 0;
        color: inherit;
        background: transparent;
        font: inherit;
        text-align: inherit;
        /* Above the vector-5 badge (z-index 3) so a player's name is never
           hidden behind it — the badge is fixed-pixel sized and sits on the
           left (desktop) or centre (mobile), so no percentage scatter layout
           can fully dodge it. SCATTER_POS still biases bubbles away from the
           badge for a clean look; this is the guarantee. */
        z-index: 4;
      }
      .lobby-bubble-wrap {
        position: relative;
        display: inline-flex;
      }
      .lobby-bubble-img {
        width: clamp(72px, 9vw, 104px);
        height: auto;
        object-fit: contain;
        display: block;
        filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
        animation: lobbyFloat 3.4s ease-in-out var(--fdrift, 0s) infinite;
      }
      /* Green checkmark dot on avatar top-right (Figma detail) */
      .lobby-bubble-dot {
        position: absolute;
        top: 1px;
        right: 1px;
        width: clamp(16px, 1.8vw, 22px);
        height: clamp(16px, 1.8vw, 22px);
        border-radius: 50%;
        background: #22c55e;
        border: 2.5px solid #071523;
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(8px, 1vw, 11px);
        color: #ffffff;
        font-weight: 900;
        line-height: 1;
      }
      .lobby-bubble-dot::after {
        content: "✓";
      }
      .lobby-bubble-name {
        font-size: clamp(0.78rem, 1vw, 0.96rem);
        font-weight: 800;
        color: #ffffff;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
        white-space: nowrap;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        direction: rtl;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
      }
      .lobby-empty-scatter {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: rgba(255, 255, 255, 0.22);
        font-size: clamp(1rem, 1.5vw, 1.25rem);
        font-weight: 600;
        text-align: center;
        line-height: 1.85;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        pointer-events: none;
        direction: rtl;
      }

      /* Vector 5 asset is blank — hidden to remove broken gray placeholder */
      .lobby-vector5 {
        display: none;
      }

      /* Footer: back btn (image pill) + start btn (image pill) */
      .lobby-free-note {
        margin: 0;
        padding: 8px 14px;
        border-radius: 12px;
        background: var(--color-card, #0d2137);
        color: var(--color-text, #fff);
        font-size: 0.8125rem;
        line-height: 1.6;
        text-align: center;
        direction: rtl;
        flex-shrink: 0;
      }
      .lobby-free-note strong { font-weight: 800; }
      .lobby-free-note span { display: block; }
      .lobby-free-note[hidden] { display: none; }

      .lobby-scatter-footer {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: clamp(10px, 1.2vw, 16px);
        padding: clamp(14px, 2vh, 28px) clamp(20px, 3vw, 52px);
        direction: ltr;
        position: relative;
        overflow: visible;
      }
      .btn-lobby-back {
        flex-shrink: 0;
        background: none;
        border: none;
        outline: none;
        padding: 0;
        cursor: pointer;
        margin: 0;
        height: clamp(44px, 5.8vh, 64px);
        transition:
          transform 0.12s,
          filter 0.12s;
        display: block;
      }
      .btn-lobby-back img {
        height: 100%;
        width: auto;
        display: block;
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
      }
      .btn-lobby-back:hover {
        transform: translateY(-2px);
        filter: brightness(1.1);
      }
      .btn-lobby-back:active {
        transform: translateY(2px);
      }
      .btn-lobby-start-new {
        flex: 1;
        background: linear-gradient(135deg, #ff8c00 0%, #e8a100 100%);
        border: none;
        outline: none;
        padding: clamp(12px, 1.6vh, 18px) clamp(24px, 3vw, 40px);
        cursor: pointer;
        margin: 0;
        border-radius: 999px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
        font-size: clamp(1.1rem, 1.7vw, 1.4rem);
        font-weight: 900;
        color: #ffffff;
        direction: rtl;
        letter-spacing: 0.02em;
        box-shadow:
          0 6px 24px rgba(232, 161, 0, 0.55),
          0 2px 6px rgba(0, 0, 0, 0.3);
        transition:
          transform 0.12s,
          box-shadow 0.12s,
          filter 0.12s;
        white-space: nowrap;
      }
      .btn-lobby-start-new:disabled {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.5);
        border: 1.5px solid rgba(255, 255, 255, 0.22);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        cursor: not-allowed;
      }
      /* Hide the need-more span — text is already in button label for disabled state */
      .btn-lobby-start-new .sn-need-more {
        display: none;
      }
      .btn-lobby-start-new:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow:
          0 10px 30px rgba(232, 161, 0, 0.65),
          0 3px 8px rgba(0, 0, 0, 0.3);
        filter: brightness(1.06);
      }
      .btn-lobby-start-new:active:not(:disabled) {
        transform: translateY(2px);
        box-shadow: 0 3px 12px rgba(232, 161, 0, 0.4);
      }
      .btn-lobby-start-new.is-test-start {
        background: linear-gradient(135deg, #25c8a8 0%, #1788a4 100%);
        border: 1.5px solid rgba(255, 255, 255, 0.44);
        color: #fff;
        box-shadow:
          0 7px 25px rgba(24, 167, 160, 0.42),
          0 2px 6px rgba(0, 0, 0, 0.3);
      }

      /* ── Pre-game RULES screen (host TV) ─────────────────────────────────── */
      .rules-screen {
        max-width: min(900px, 92vw);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: clamp(10px, 1.8vh, 20px);
        padding: clamp(8px, 2vh, 24px) 0;
      }
      .rules-eyebrow {
        font-size: clamp(0.95rem, 1.4vw, 1.15rem);
        font-weight: 800;
        color: var(--primary, #ff8c00);
        letter-spacing: 0.04em;
        opacity: 0.95;
      }
      .rules-title {
        font-size: clamp(2rem, 4.6vw, 3.4rem);
        font-weight: 900;
        color: #fff;
        margin: 0;
        line-height: 1.1;
        text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
      }
      .rules-title-emoji {
        font-size: 0.9em;
      }
      .rules-card {
        width: 100%;
        background: rgba(255, 255, 255, 0.055);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--rad-lg, 22px);
        padding: clamp(16px, 2.6vh, 30px) clamp(16px, 2.6vw, 32px);
        backdrop-filter: blur(10px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32);
        display: flex;
        flex-direction: column;
        gap: clamp(12px, 1.8vh, 20px);
      }
      .rules-step {
        display: flex;
        align-items: flex-start;
        gap: clamp(12px, 1.4vw, 18px);
        text-align: right;
        direction: rtl;
      }
      .rules-step-num {
        flex-shrink: 0;
        width: clamp(34px, 3.4vw, 44px);
        height: clamp(34px, 3.4vw, 44px);
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: clamp(1.05rem, 1.5vw, 1.35rem);
        font-weight: 900;
        color: #fff;
        background: linear-gradient(135deg, #ff8c00 0%, #e8a100 100%);
        box-shadow: 0 4px 14px rgba(232, 161, 0, 0.45);
      }
      .rules-step-text {
        margin: 0;
        flex: 1;
        font-size: clamp(1.15rem, 1.7vw, 1.5rem);
        line-height: 1.7;
        color: rgba(255, 255, 255, 0.92);
        font-weight: 600;
      }
      .rules-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(12px, 1.6vw, 20px);
        margin-top: clamp(2px, 0.8vh, 8px);
        flex-wrap: wrap;
      }
      .rules-start-btn {
        background: linear-gradient(135deg, #ff8c00 0%, #e8a100 100%);
        border: none;
        outline: none;
        cursor: pointer;
        border-radius: 999px;
        padding: clamp(13px, 1.7vh, 19px) clamp(34px, 4vw, 56px);
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
        font-size: clamp(1.15rem, 1.8vw, 1.5rem);
        font-weight: 900;
        color: #fff;
        direction: rtl;
        letter-spacing: 0.02em;
        box-shadow:
          0 6px 24px rgba(232, 161, 0, 0.55),
          0 2px 6px rgba(0, 0, 0, 0.3);
        transition:
          transform 0.12s,
          box-shadow 0.12s,
          filter 0.12s;
      }
      .rules-back-btn {
        display: none;
      }
      .rules-start-btn:hover {
        transform: translateY(-2px);
        box-shadow:
          0 10px 30px rgba(232, 161, 0, 0.65),
          0 3px 8px rgba(0, 0, 0, 0.3);
        filter: brightness(1.06);
      }
      .rules-start-btn:active {
        transform: translateY(2px);
        box-shadow: 0 3px 12px rgba(232, 161, 0, 0.4);
      }
      .rules-back-btn {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.16);
        outline: none;
        cursor: pointer;
        border-radius: 999px;
        padding: clamp(13px, 1.7vh, 19px) clamp(22px, 2.6vw, 34px);
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
        font-size: clamp(1rem, 1.5vw, 1.25rem);
        font-weight: 800;
        color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        transition:
          background 0.14s,
          transform 0.12s;
      }
      .rules-back-btn:hover {
        background: rgba(255, 255, 255, 0.18);
        transform: translateY(-1px);
      }
      .rules-back-btn:active {
        transform: translateY(1px);
      }
      .rules-hint {
        font-size: clamp(0.95rem, 1.3vw, 1.1rem);
        color: var(--muted, rgba(255, 255, 255, 0.6));
        font-weight: 600;
      }

      /* Game card in footer — floats up from between back and play buttons */
      .lobby-footer-game-card {
        flex-shrink: 0;
        align-self: flex-end;
        width: clamp(120px, 16vw, 190px);
        transform: translateY(clamp(20px, 3vh, 38px));
        z-index: 5;
        pointer-events: none;
        filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.65));
        animation: lobbyBubblePop 0.5s var(--ease-bounce) 0.15s both;
      }
      .lobby-footer-game-card img {
        width: 100%;
        height: auto;
        display: block;
      }

      /* ── RIGHT: Info panel ──────────────────────────────────────────────── */
      .lobby-info-panel {
        width: clamp(300px, 38vw, 460px);
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: safe center;
        /* Top padding reserves room for the absolute top-controls strip
           (mute + gear), which spans the full layout width and otherwise sits
           ON TOP of the right panel — keeping the gear button clear of the QR
           card so the two never overlap. */
        padding: max(clamp(20px, 3vh, 52px), calc(clamp(70px, 9vh, 92px) + 8px))
          clamp(20px, 2.5vw, 44px) clamp(20px, 3vh, 52px);
        gap: clamp(8px, 1.2vh, 14px);
        position: relative;
        z-index: 2;
        direction: ltr;
        overflow-x: hidden;
        overflow-y: auto;
      }
      /* Teal ambient glow — matches Figma right-side highlight */
      .lobby-info-panel::before {
        content: "";
        position: absolute;
        top: -30%;
        left: -50%;
        width: 200%;
        height: 160%;
        background: radial-gradient(
          ellipse at 60% 40%,
          rgba(44, 177, 216, 0.14) 0%,
          transparent 60%
        );
        pointer-events: none;
        z-index: 0;
      }
      .lobby-info-panel > * {
        flex-shrink: 0;
        position: relative;
        z-index: 1;
      }

      .lobby-qr-card {
        background: #ffffff;
        border-radius: 16px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 6px 32px rgba(0, 0, 0, 0.5),
          0 0 0 1px rgba(255, 255, 255, 0.06);
      }
      /* Remove the dashed gold ring — not in Figma */
      body.lobby-phase .lobby-qr-card::before {
        display: none;
      }
      .lobby-qr-card img {
        display: block;
        width: min(clamp(220px, 24vw, 320px), 42vh);
        height: min(clamp(220px, 24vw, 320px), 42vh);
        /* The card supplies the white border; keep QR modules square. */
        border-radius: 0;
      }
      .lobby-room-code {
        font-size: clamp(2.8rem, 5.2vw, 4.5rem);
        font-weight: 900;
        color: #ffffff;
        letter-spacing: 0.14em;
        line-height: 1;
        text-align: center;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
      }
      /* URL pill — link icon left, text center, copy btn right */
      .lobby-join-url {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.11);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        padding: 7px 7px 7px 14px;
        font-size: clamp(0.72rem, 0.96vw, 0.9rem);
        color: rgba(255, 255, 255, 0.72);
        max-width: 100%;
        overflow: hidden;
        width: 100%;
        direction: ltr;
      }
      .lobby-join-url .lju-icon-left {
        flex-shrink: 0;
        font-size: 1em;
        opacity: 0.65;
      }
      .lobby-join-url .lju-text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        direction: ltr;
      }
      .lobby-join-url .lju-copy-btn {
        flex-shrink: 0;
        width: clamp(28px, 2.8vw, 36px);
        height: clamp(28px, 2.8vw, 36px);
        background: rgba(255, 255, 255, 0.18);
        border: none;
        outline: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1em;
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        margin: 0;
        padding: 0;
        text-shadow: none;
        box-shadow: none;
        transition:
          background 0.15s,
          color 0.15s;
        font-family: inherit;
      }
      .lobby-join-url .lju-copy-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        color: #ffffff;
        transform: none;
        filter: none;
      }

      /* Player count row */
      .lobby-player-count {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: clamp(1.1rem, 1.8vw, 1.6rem);
        font-weight: 900;
        color: #ffffff;
      }
      .lobby-player-count .lpc-dots {
        display: flex;
        gap: 0;
        flex-wrap: nowrap;
        flex-shrink: 0;
      }
      .lobby-player-count .lpc-dot {
        width: clamp(20px, 2.2vw, 28px);
        height: clamp(20px, 2.2vw, 28px);
        border-radius: 50%;
        background: var(--dot-color, #e8a100);
        border: 2px solid #071523;
        box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
        flex-shrink: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .lobby-player-count .lpc-dots {
        margin-left: -6px;
      }
      .lobby-player-count .lpc-dot + .lpc-dot {
        margin-left: -8px;
      }
      .lobby-player-count .lpc-num {
        font-size: 1.1em;
        font-weight: 900;
        color: #ff7a00;
      }
      .lobby-player-count .lpc-total {
        font-size: 0.62em;
        color: rgba(255, 255, 255, 0.45);
        font-weight: 600;
      }
      .lobby-wait-label {
        font-size: clamp(0.7rem, 0.86vw, 0.83rem);
        color: rgba(255, 255, 255, 0.33);
        text-align: center;
        direction: rtl;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
      }
      /* ── Top-right control buttons — full-width strip with image asset ── */
      .lobby-top-controls {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: clamp(70px, 9vh, 92px);
        z-index: 20;
        pointer-events: none;
      }
      /* Shell holds just the mute button, anchored top-right. */
      .lobby-ctrl-shell {
        position: absolute;
        top: clamp(8px, 1.2vh, 16px);
        right: clamp(8px, 2vw, 20px);
        display: flex;
        align-items: center;
        pointer-events: none;
      }
      .lobby-ctrl-mute-btn {
        position: relative;
        background: #0f597b;
        padding: var(--sp-3) var(--sp-5);
        font-size: clamp(0.85rem, 1.2vw, 1.1rem);
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        outline: 3px solid #1a0a00;
        box-shadow: 0 4px 0 #1a0a00;
        text-shadow:
          -1px -1px 0 #1a0a00,
          1px -1px 0 #1a0a00,
          -1px 1px 0 #1a0a00,
          1px 1px 0 #1a0a00;
        border: none;
        border-radius: 24px;
        cursor: pointer;
        pointer-events: all;
        transition:
          transform 0.1s,
          filter 0.1s,
          box-shadow 0.1s;
        white-space: nowrap;
        color: #fff;
        font-family: inherit;
      }
      .lobby-ctrl-mute-btn:hover {
        filter: brightness(1.1);
        transform: translateY(-1px);
      }
      .lobby-ctrl-mute-btn:active {
        transform: translateY(3px);
        box-shadow: 0 1px 0 #1a0a00;
      }
      /* Settings button — top-left of lobby */
      .lobby-ctrl-settings-btn {
        position: absolute;
        top: clamp(8px, 1.2vh, 16px);
        left: clamp(8px, 2vw, 20px);
        width: clamp(40px, 5.2vh, 54px);
        height: clamp(40px, 5.2vh, 54px);
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        outline: none;
        cursor: pointer;
        border-radius: 24px;
        pointer-events: all;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(1.4rem, 3.6vh, 1.9rem);
        line-height: 1;
        color: rgba(255, 255, 255, 0.92);
      }
      .lobby-ctrl-settings-btn::before {
        content: "⚙";
      }
      .lobby-ctrl-settings-btn:hover {
        opacity: 0.82;
      }

      /* ── Native app: hide the lobby MUTE button ───────────────────────── */
      html.native .lobby-ctrl-mute-btn {
        display: none !important;
      }

      /* ── Native app: remove the COPY-URL pill from the lobby ──────────────
         Redundant in the app (no browser address bar / sharing flow here).
         Web keeps it. */
      html.native .lobby-join-url {
        display: none !important;
      }

      /* Lobby uses the same top-left navigation rail as every menu screen. */
      body.lobby-phase #top-left-bar {
        display: flex !important;
      }
      body.lobby-phase #back-btn {
        display: inline-flex !important;
      }
      body.lobby-phase .lobby-ctrl-shell {
        right: clamp(88px, 8vw, 104px);
      }
      body.lobby-phase #fullscreen-btn {
        display: inline-flex !important;
        top: clamp(8px, 1.2vh, 16px);
        right: clamp(8px, 2vw, 20px);
      }
      body.lobby-phase #room-code-pill {
        display: flex;
      }
      body.lobby-phase .lobby-ctrl-settings-btn { display:none!important; }
      /* game-controls sits at bottom-left (z-index 50) — must not overlap lobby footer */
      body.lobby-phase #game-controls {
        display: none !important;
      }

      /* نسبة وتناسب reveal styling */
      .nesba-bar-wrap {
        max-width: 760px;
        margin: 28px auto 16px;
      }
      .nesba-bar {
        position: relative;
        height: 28px;
        background: var(--color-surface-2);
        border-radius: 14px;
        overflow: visible;
      }
      .nesba-bar-fill {
        position: absolute;
        inset: 0 auto 0 0;
        height: 100%;
        background: linear-gradient(
          90deg,
          var(--color-primary-soft),
          var(--color-primary)
        );
        border-radius: 14px;
      }
      .nesba-bar-marker {
        position: absolute;
        top: -8px;
        bottom: -8px;
        width: 4px;
        background: var(--color-text);
        border-radius: 2px;
        box-shadow: 0 0 0 2px var(--color-card);
      }
      .nesba-bar-labels {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        font-size: clamp(1rem, 1.5vw, 1.2rem);
        margin-top: 14px;
      }
      .nesba-truth-dot,
      .nesba-guess-dot {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        vertical-align: middle;
        margin-left: 6px;
      }
      .nesba-truth-dot {
        background: var(--color-primary);
      }
      .nesba-guess-dot {
        background: var(--color-text);
      }
      .nesba-target-pts {
        text-align: center;
        font-size: clamp(1.3rem, 2vw, 1.8rem);
        margin: 18px 0 10px;
        color: var(--color-primary-dark);
      }
      .nesba-voters {
        max-width: 560px;
        margin: 12px auto;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .nesba-voter-row {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 14px;
        align-items: center;
        padding: 8px 14px;
        border-radius: 10px;
        background: var(--color-surface-2);
        font-weight: 700;
      }
      .nesba-voter-row.wager-win {
        background: rgba(124, 58, 237, 0.18);
        color: var(--color-primary-dark);
      }
      .nesba-voter-row.wager-lose {
        opacity: 0.6;
      }
      .nesba-voter-row .nv-pts {
        min-width: 56px;
        text-align: left;
      }
      /* Blender vibrate animation */
      @keyframes blender-shake {
        0%,
        100% {
          transform: translateX(0) rotate(0deg);
        }
        20% {
          transform: translateX(-6px) rotate(-4deg);
        }
        40% {
          transform: translateX(6px) rotate(4deg);
        }
        60% {
          transform: translateX(-4px) rotate(-2deg);
        }
        80% {
          transform: translateX(4px) rotate(2deg);
        }
      }
      @keyframes blender-spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .blender-icon {
        font-size: clamp(6rem, 15vw, 12rem);
        display: inline-block;
        animation: blender-shake var(--dur-shake) var(--ease-in-out) infinite;
        line-height: 1;
      }
      .blender-text {
        font-size: clamp(3rem, 6vw, 6rem);
        font-weight: 900;
        color: var(--primary);
        margin-top: 16px;
      }
      /* Icebreaker host screen — uses canonical prompt-card chrome with a mint
       accent bar so it reads as the same family as شطحات / تكذبني prompts. */
      .khallat-host-prompt {
        background: var(--card);
        border-radius: var(--rad-xl);
        padding: var(--sp-6) var(--sp-7);
        max-width: 900px;
        font-size: clamp(1.6rem, 2.6vw, 2.4rem);
        font-weight: 800;
        line-height: 1.4;
        box-shadow: var(--shadow);
        margin: var(--sp-4) auto var(--sp-5);
        border: 1px solid var(--primary);
        position: relative;
      }
      .khallat-host-prompt::before {
        content: "ركّبوا";
        position: absolute;
        top: calc(var(--sp-3) * -1);
        right: var(--sp-5);
        background: var(--primary);
        color: var(--color-on-primary);
        padding: var(--sp-1) var(--sp-4);
        border-radius: var(--rad-pill);
        font-size: 0.8rem;
        font-weight: 800;
        box-shadow: var(--shadow-sm);
      }
      .khallat-submitted-bar {
        background: var(--card);
        border: 1.5px solid color-mix(in srgb, var(--primary) 35%, transparent);
        border-radius: var(--rad-pill);
        padding: var(--sp-3) var(--sp-6);
        font-size: clamp(1.3rem, 1.9vw, 1.8rem);
        font-weight: 800;
        color: var(--primary);
        box-shadow: var(--shadow);
        margin: var(--sp-3) 0;
        display: inline-block;
      }
      /* ── خلاط — hand-inked records-office stage ─────────────────────── */
      body.khallat-stage-phase { overflow: hidden; background: #171310; }
      body.khallat-stage-phase #app {
        position: fixed;
        inset: 0;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      body.khallat-stage-phase .page-header,
      body.khallat-stage-phase #fullscreen-btn { display: none !important; }
      body.khallat-stage-phase #top-left-bar { display: flex !important; }
      body.khallat-stage-phase #gear-btn,
      body.khallat-stage-phase #room-code-pill,
      body.khallat-stage-phase #back-btn { display: none !important; }
      body.khallat-stage-phase #game-controls {
        position: fixed;
        inset: auto auto max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
        z-index: 80;
        opacity: .82;
        transition: opacity 180ms ease;
      }
      body.khallat-stage-phase #game-controls:hover,
      body.khallat-stage-phase #game-controls:focus-within { opacity: 1; }
      body.khallat-stage-phase #game-controls button {
        min-height: 36px;
        padding: 6px 10px;
        border: 2px solid #272724;
        border-radius: 4px;
        background: #fff8df;
        color: #272724;
        box-shadow: 3px 4px 0 rgba(39,39,36,.75);
        backdrop-filter: none;
        font-size: .72rem;
      }
      body.khallat-stage-phase #auto-advance-indicator { display: none !important; }
      .kh-stage {
        --kh-ink: #272724;
        --kh-paper: #fff8df;
        --kh-paper-deep: #ead9af;
        --kh-teal: #4f8d88;
        --kh-rose: #b66f75;
        --kh-olive: #707d43;
        position: fixed;
        inset: 0;
        z-index: 4;
        overflow: hidden;
        color: var(--kh-ink);
        direction: rtl;
        background: #9d6870;
        isolation: isolate;
      }
      .kh-stage::before,
      .kh-stage::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
      }
      .kh-stage::before {
        z-index: -2;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
      .kh-stage::after {
        z-index: 20;
        box-shadow: inset 0 0 12vw rgba(31, 20, 17, 0.22);
        mix-blend-mode: multiply;
      }
      .kh-stage.kh-room::before { background-image: url('/assets/khallat/office-writing.webp'); }
      .kh-stage.kh-desk::before { background-image: url('/assets/khallat/office-desk.webp'); }
      .kh-stage.kh-projector::before { background-image: url('/assets/khallat/office-projector.webp'); }
      .kh-hud {
        position: absolute;
        inset: clamp(14px, 2.2vw, 34px) clamp(14px, 2.2vw, 34px) auto;
        z-index: 30;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        direction: ltr;
        pointer-events: none;
      }
      .kh-hud-logo {
        width: clamp(88px, 11vw, 170px);
        max-height: 72px;
        object-fit: contain;
        filter: drop-shadow(0 3px 0 rgba(39, 39, 36, 0.35));
      }
      .kh-hud-ticket,
      .kh-hud .answer-timer {
        min-width: clamp(92px, 9vw, 140px);
        margin: 0;
        padding: 9px 17px;
        border: 3px solid var(--kh-ink);
        border-radius: 3px 7px 4px 6px;
        background: var(--kh-paper);
        color: var(--kh-ink);
        box-shadow: 4px 5px 0 rgba(39, 39, 36, 0.3);
        font-weight: 900;
        transform: rotate(1deg);
      }
      .kh-hud .answer-timer .at-fill { background: var(--kh-rose); }
      .kh-hud-ticket { font-size: clamp(.78rem, 1.1vw, 1.05rem); text-align: center; direction: rtl; }
      .kh-paper {
        background:
          linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,0)),
          var(--kh-paper);
        border: clamp(2px, .2vw, 4px) solid var(--kh-ink);
        border-radius: 3px 7px 4px 6px;
        box-shadow: 7px 9px 0 rgba(39, 39, 36, 0.24);
      }
      .kh-writing-card {
        position: absolute;
        z-index: 8;
        top: 22%;
        left: 18%;
        width: min(45vw, 760px);
        min-height: 36%;
        padding: clamp(22px, 3vw, 54px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        transform: rotate(-1deg);
        animation: kh-paper-in 650ms cubic-bezier(.18,.9,.23,1.14) both;
      }
      .kh-writing-kicker {
        align-self: center;
        margin-bottom: clamp(10px, 1.4vw, 22px);
        padding: 5px 14px;
        border: 2px solid var(--kh-ink);
        background: #d8b65d;
        font-size: clamp(.76rem, 1.15vw, 1.05rem);
        font-weight: 900;
        transform: rotate(1.5deg);
      }
      .kh-writing-question {
        margin: 0;
        font-size: clamp(1.85rem, 3.25vw, 4.3rem);
        font-weight: 950;
        line-height: 1.3;
        text-wrap: balance;
      }
      .kh-progress-tray {
        position: absolute;
        z-index: 12;
        right: 50%;
        bottom: clamp(16px, 3.4vh, 42px);
        transform: translateX(50%) rotate(.3deg);
        display: flex;
        align-items: center;
        gap: clamp(5px, .7vw, 10px);
        max-width: 76vw;
        padding: 9px 12px;
        border: 3px solid var(--kh-ink);
        background: rgba(255, 248, 223, .96);
        box-shadow: 5px 6px 0 rgba(39,39,36,.3);
      }
      .kh-progress-chip {
        position: relative;
        width: clamp(34px, 4vw, 58px);
        height: clamp(34px, 4vw, 58px);
        flex: 0 0 auto;
        border: 2px solid var(--kh-ink);
        border-radius: 50%;
        background: #d8c9a8;
        opacity: .55;
        overflow: visible;
        transition: opacity 240ms ease, transform 240ms ease;
      }
      .kh-progress-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
      .kh-progress-chip.is-done { opacity: 1; transform: translateY(-3px); }
      .kh-progress-chip.is-done::after {
        content: "✓";
        position: absolute;
        right: -5px;
        bottom: -4px;
        width: 20px;
        height: 20px;
        display: grid;
        place-items: center;
        border: 2px solid var(--kh-ink);
        border-radius: 50%;
        color: var(--kh-paper);
        background: var(--kh-teal);
        font-size: .75rem;
        font-weight: 950;
      }
      .kh-progress-count {
        min-width: 54px;
        padding-inline-start: 7px;
        font-size: clamp(.85rem, 1.2vw, 1.1rem);
        font-weight: 950;
        white-space: nowrap;
        direction: ltr;
      }
      .kh-mix-card {
        position: absolute;
        z-index: 8;
        left: 22%;
        top: 34%;
        width: min(38vw, 600px);
        padding: clamp(20px, 2.4vw, 38px);
        text-align: center;
        transform: rotate(-2deg);
      }
      .kh-mix-title { font-size: clamp(2rem, 4vw, 5rem); font-weight: 950; line-height: 1.1; }
      .kh-mix-dots { display: flex; justify-content: center; gap: 12px; margin-top: 20px; direction: ltr; }
      .kh-mix-dots i {
        width: clamp(13px, 1.5vw, 24px);
        aspect-ratio: 1;
        border: 3px solid var(--kh-ink);
        border-radius: 50%;
        background: var(--kh-teal);
        animation: kh-dot 900ms ease-in-out infinite alternate;
      }
      .kh-mix-dots i:nth-child(2) { animation-delay: 180ms; }
      .kh-mix-dots i:nth-child(3) { animation-delay: 360ms; }
      .kh-flying-word {
        position: absolute;
        z-index: 7;
        left: 47%;
        top: calc(20% + var(--i) * 5.2%);
        width: clamp(58px, 8vw, 128px);
        height: clamp(22px, 2.6vw, 42px);
        border: 2px solid var(--kh-ink);
        background: var(--kh-paper);
        box-shadow: 3px 3px 0 rgba(39,39,36,.22);
        animation: kh-feed 1.5s calc(var(--i) * -130ms) ease-in infinite;
      }
      .kh-vote-prompt {
        position: absolute;
        z-index: 12;
        left: 50%;
        top: 50%;
        width: min(58vw, 900px);
        min-height: 26%;
        padding: clamp(22px, 3vw, 52px);
        display: grid;
        place-items: center;
        text-align: center;
        font-size: clamp(2rem, 3.8vw, 5rem);
        font-weight: 950;
        line-height: 1.25;
        text-wrap: balance;
        opacity: 0;
        transform: translate(-50%, -42%) scale(.82) rotate(-1.5deg);
        transition: top 760ms cubic-bezier(.17,.82,.23,1), width 760ms cubic-bezier(.17,.82,.23,1), min-height 760ms cubic-bezier(.17,.82,.23,1), padding 760ms cubic-bezier(.17,.82,.23,1), font-size 760ms cubic-bezier(.17,.82,.23,1), transform 760ms cubic-bezier(.17,.82,.23,1), opacity 320ms ease;
      }
      .kh-stage.is-live .kh-vote-prompt { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-1deg); }
      .kh-stage.is-docked .kh-vote-prompt {
        top: 8%;
        width: min(34vw, 560px);
        min-height: 22%;
        padding: clamp(12px, 1.7vw, 26px);
        font-size: clamp(1.2rem, 2.15vw, 2.8rem);
        transform: translate(-50%, 0) rotate(.4deg);
      }
      .kh-answer-deck {
        position: absolute;
        z-index: 10;
        left: 8%;
        right: 8%;
        bottom: 6.5%;
        height: 48%;
        display: grid;
        grid-template-columns: repeat(var(--kh-cols, 3), minmax(0, 1fr));
        align-items: stretch;
        gap: clamp(10px, 1.6vw, 28px);
        direction: rtl;
      }
      .kh-answer-deck.is-dense { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .kh-answer-paper {
        position: relative;
        min-width: 0;
        padding: clamp(14px, 1.7vw, 28px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: center;
        background: var(--kh-paper);
        border: clamp(2px, .2vw, 4px) solid var(--kh-ink);
        border-radius: 3px 6px 4px 2px;
        box-shadow: 7px 9px 0 rgba(39,39,36,.25);
        opacity: 0;
        transform: translateY(45%) rotate(var(--tilt, -1deg));
        transition: transform 560ms cubic-bezier(.18,.86,.23,1.16), opacity 320ms ease, filter 300ms ease, box-shadow 300ms ease;
        transition-delay: calc(var(--i) * 110ms);
      }
      .kh-answer-paper:nth-child(2n) { --tilt: 1.2deg; }
      .kh-answer-paper:nth-child(3n) { --tilt: -.4deg; }
      .kh-stage.cards-ready .kh-answer-paper { opacity: 1; transform: translateY(0) rotate(var(--tilt, -1deg)); }
      .kh-answer-mark {
        position: absolute;
        top: -12px;
        right: -10px;
        width: clamp(34px, 3.2vw, 52px);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border: 3px solid var(--kh-ink);
        border-radius: 50%;
        background: #d7b456;
        font-size: clamp(1rem, 1.5vw, 1.45rem);
        font-weight: 950;
        transform: rotate(7deg);
      }
      .kh-answer-text {
        max-height: 6.3em;
        overflow: hidden;
        font-size: clamp(1.08rem, 1.75vw, 2.25rem);
        font-weight: 900;
        line-height: 1.42;
        text-wrap: balance;
      }
      .kh-vote-progress {
        position: absolute;
        z-index: 16;
        right: clamp(16px, 3vw, 46px);
        left: auto;
        bottom: clamp(16px, 3vw, 42px);
        padding: 8px 16px;
        border: 3px solid var(--kh-ink);
        background: var(--kh-paper);
        box-shadow: 4px 5px 0 rgba(39,39,36,.25);
        font-weight: 950;
        direction: ltr;
        transform: rotate(-2deg);
      }
      .kh-result-stamp,
      .kh-result-author,
      .kh-result-bonus { opacity: 0; transition: opacity 260ms ease, transform 360ms cubic-bezier(.2,.8,.2,1.2); }
      .kh-result-stamp {
        position: absolute;
        inset: 12px 12px auto auto;
        min-width: 60px;
        padding: 4px 9px;
        border: 4px double #a5453e;
        color: #a5453e;
        font-size: clamp(.85rem, 1.4vw, 1.25rem);
        font-weight: 950;
        transform: scale(1.7) rotate(12deg);
      }
      .kh-result-author {
        padding: 5px 12px;
        border-top: 2px dashed rgba(39,39,36,.45);
        font-size: clamp(.72rem, 1.05vw, 1rem);
        font-weight: 950;
        transform: translateY(8px);
      }
      .kh-result-bonus { font-size: clamp(.62rem, .85vw, .82rem); color: #756343; transform: translateY(7px); }
      .kh-stage.show-votes .kh-result-stamp { opacity: 1; transform: scale(1) rotate(-7deg); }
      .kh-stage.show-authors .kh-result-author,
      .kh-stage.show-authors .kh-result-bonus { opacity: 1; transform: none; }
      .kh-stage.show-winner .kh-answer-paper.is-winner {
        filter: saturate(1.08) brightness(1.04);
        box-shadow: 0 0 0 7px #d5ad42, 10px 13px 0 rgba(39,39,36,.28);
        transform: translateY(-8px) rotate(var(--tilt, -1deg));
      }
      .kh-stage.show-winner .kh-answer-paper:not(.is-winner) { filter: saturate(.55) brightness(.84); }
      .kh-score-sheet {
        position: absolute;
        z-index: 9;
        top: 11.5%;
        left: 27.2%;
        width: 44.5%;
        height: 59%;
        padding: clamp(18px, 2.2vw, 40px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .kh-score-title { font-size: clamp(1.25rem, 2.25vw, 2.8rem); font-weight: 950; text-align: center; line-height: 1.15; }
      .kh-score-sub { margin-top: 4px; color: #796b53; font-size: clamp(.72rem, 1vw, .95rem); font-weight: 800; text-align: center; }
      .kh-score-list {
        flex: 1;
        min-height: 0;
        margin-top: clamp(10px, 1.3vw, 20px);
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(6, minmax(0, 1fr));
        grid-auto-columns: minmax(0, 1fr);
        gap: 6px 14px;
        direction: rtl;
      }
      .kh-score-row {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        align-items: center;
        gap: clamp(5px, .7vw, 10px);
        min-width: 0;
        padding: 3px 7px;
        border-bottom: 1.5px dashed rgba(39,39,36,.34);
        font-size: clamp(.66rem, 1vw, 1.04rem);
        font-weight: 900;
      }
      .kh-score-row.is-first { color: #8c5b08; background: rgba(217, 180, 86, .18); }
      .kh-score-rank { min-width: 1.4em; text-align: center; }
      .kh-score-avatar { width: clamp(22px, 2.4vw, 38px); aspect-ratio: 1; border: 2px solid var(--kh-ink); border-radius: 50%; object-fit: cover; }
      .kh-score-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .kh-score-value { white-space: nowrap; direction: rtl; }
      .kh-score-delta { color: #2d7871; font-size: .82em; }
      .kh-final-actions { display: flex; justify-content: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
      .kh-final-actions button {
        width: auto;
        min-width: 0;
        padding: 7px 13px;
        border: 2px solid var(--kh-ink);
        border-radius: 3px;
        background: #d7b456;
        color: var(--kh-ink);
        box-shadow: 3px 3px 0 rgba(39,39,36,.25);
        font-family: inherit;
        font-size: clamp(.65rem, .85vw, .85rem);
        font-weight: 900;
        line-height: 1.2;
      }
      .kh-final-actions button:last-child { background: #c9867d; }
      @keyframes kh-paper-in { from { opacity: 0; transform: translateY(26%) rotate(-4deg) scale(.82); } to { opacity: 1; transform: rotate(-1deg) scale(1); } }
      @keyframes kh-dot { to { transform: translateY(-10px); background: #d7b456; } }
      @keyframes kh-feed { 0% { opacity: 0; transform: translate(-20vw, 8vh) rotate(-12deg); } 24% { opacity: 1; } 100% { opacity: 0; transform: translate(45vw, 18vh) rotate(18deg) scale(.65); } }
      @media (max-aspect-ratio: 4/3) {
        .kh-stage::before { background-position: center; }
        .kh-writing-card { left: 10%; width: 58vw; top: 24%; }
        .kh-answer-deck { left: 5%; right: 5%; bottom: 8%; height: 46%; }
        .kh-stage.is-docked .kh-vote-prompt { width: 52vw; }
        .kh-score-sheet { left: 18%; width: 64%; top: 13%; height: 57%; background: rgba(255,248,223,.9); }
      }
      @media (prefers-reduced-motion: reduce) {
        .kh-writing-card,
        .kh-flying-word,
        .kh-mix-dots i { animation: none !important; }
        .kh-vote-prompt,
        .kh-answer-paper { transition-duration: 1ms !important; }
      }
      /* ── Round badge ── */
      .round-badge {
        display: inline-block;
        background: var(--primary);
        color: var(--color-on-primary);
        font-size: clamp(1.1rem, 1.8vw, 1.6rem);
        font-weight: 800;
        padding: 8px 28px;
        border-radius: 999px;
        margin-bottom: 16px;
        box-shadow: var(--shadow-rank-icon);
      }

      /* ── Answer-submission countdown ─────────────────────────────────────── */
      .answer-timer {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin: 8px auto 18px;
        padding: 12px 28px;
        background: var(--card);
        border: 1.5px solid color-mix(in srgb, var(--primary) 35%, transparent);
        border-radius: 999px;
        box-shadow: var(--shadow);
        font-size: clamp(1.6rem, 2.4vw, 2.2rem);
        font-weight: 900;
        color: var(--text);
        min-width: 160px;
        justify-content: center;
        overflow: hidden;
        transition:
          color var(--dur-base) var(--ease-out),
          background var(--dur-base) var(--ease-out),
          border-color var(--dur-base) var(--ease-out);
      }
      .answer-timer .at-clock {
        font-size: 0.9em;
      }
      .answer-timer .at-num {
        font-variant-numeric: tabular-nums;
        min-width: 1.8ch;
        text-align: center;
      }
      .answer-timer .at-unit {
        font-size: 0.6em;
        color: var(--muted);
        margin-right: 2px;
      }
      .answer-timer .at-fill {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 5px;
        width: 100%;
        transform-origin: left center;
        background: var(--primary);
        transition:
          transform var(--dur-medium) linear,
          background var(--dur-base) var(--ease-out);
      }
      .answer-timer.urgent {
        color: var(--color-timer-urgent);
        animation: timer-pulse var(--dur-cinematic) var(--ease-in-out) infinite
          alternate;
      }
      .answer-timer.urgent .at-fill {
        background: var(--color-timer-urgent);
      }
      .answer-timer.critical {
        animation: timer-critical-pulse var(--dur-fill) var(--ease-in-out)
          infinite alternate;
      }
      @keyframes timer-critical-pulse {
        from {
          transform: scale(1);
        }
        to {
          transform: scale(1.12);
        }
      }
      .answer-timer.paused {
        color: var(--muted);
      }
      .answer-timer.paused .at-fill {
        background: var(--muted);
        transition: none;
      }
      @keyframes timer-pulse {
        from {
          transform: scale(1);
        }
        to {
          transform: scale(1.05);
        }
      }

      /* ── Prompt card ── */
      .prompt-text {
        font-size: clamp(2rem, 3.5vw, 3.4rem);
        font-weight: 800;
        max-width: 1100px;
        line-height: 1.4;
        background: var(--card);
        color: var(--text);
        border-radius: 28px;
        padding: 40px;
        box-shadow: var(--shadow);
        margin-bottom: 24px;
      }

      /* ── شطحات duel arena (Quiplash-style head-to-head) ──────────────── */
      .duel-arena {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: clamp(20px, 2.5vw, 36px);
        width: 100%;
        max-width: 1500px;
        align-items: stretch;
        margin: 18px 0 8px;
        direction: ltr; /* anchor side-A on the visual left, side-B on the right */
      }
      .duel-side {
        position: relative;
        background: linear-gradient(
          180deg,
          var(--color-card) 0%,
          var(--color-tile-shathaat-hover) 100%
        );
        border-radius: 32px;
        padding: clamp(28px, 3.2vw, 44px) clamp(22px, 2.6vw, 36px);
        box-shadow: var(--shadow-duel-card);
        display: flex;
        flex-direction: column;
        gap: 16px;
        transition:
          transform var(--dur-slow) var(--ease-spring-pop),
          box-shadow var(--dur-slow) var(--ease-out-soft),
          opacity var(--dur-tap) var(--ease-out-soft);
        border: 3px solid transparent;
        overflow: hidden;
        direction: rtl; /* arabic content flows RTL inside */
        min-height: clamp(220px, 26vw, 340px);
      }
      /* Coloured top accent rail per side — orange for أ, teal for ب. */
      .duel-side::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 8px;
        background: linear-gradient(
          90deg,
          var(--primary),
          var(--color-primary-warm)
        );
        border-radius: 32px 32px 0 0;
      }
      .duel-side.duel-side-b::before {
        background: linear-gradient(
          90deg,
          var(--accent-teal),
          var(--color-duel-b-end)
        );
      }
      /* Side badge: big circular أ / ب with the side colour. */
      .duel-side .duel-badge {
        position: absolute;
        top: clamp(14px, 1.6vw, 20px);
        right: clamp(14px, 1.6vw, 20px);
        width: clamp(54px, 5vw, 72px);
        height: clamp(54px, 5vw, 72px);
        border-radius: 50%;
        background: linear-gradient(
          140deg,
          var(--primary) 0%,
          var(--color-primary-warm) 100%
        );
        color: var(--color-on-primary);
        font-family: var(--font-display, "Tajawal", sans-serif);
        font-size: clamp(1.6rem, 2.4vw, 2.2rem);
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-primary-warm);
        letter-spacing: 0.02em;
      }
      .duel-side.duel-side-b .duel-badge {
        background: linear-gradient(
          140deg,
          var(--accent-teal) 0%,
          var(--color-duel-b-end) 100%
        );
        box-shadow: var(--shadow-duel-b);
      }
      .duel-side .duel-name {
        font-size: clamp(1.05rem, 1.4vw, 1.3rem);
        color: var(--muted);
        font-weight: 800;
        text-transform: uppercase;
        padding-right: clamp(70px, 7vw, 100px); /* leave room for badge */
      }
      .duel-side .duel-answer {
        font-size: clamp(1.7rem, 2.6vw, 2.6rem);
        font-weight: 900;
        line-height: 1.35;
        color: var(--text);
        flex: 1;
        letter-spacing: -0.005em;
      }
      .duel-side .duel-stat {
        font-size: clamp(1rem, 1.4vw, 1.25rem);
        font-weight: 800;
        color: var(--primary);
        letter-spacing: 0.02em;
        padding-top: 8px;
        border-top: 2px dashed var(--shadow-warm-ink-line-mid);
      }
      .duel-side.duel-side-b .duel-stat {
        color: var(--accent-teal);
      }
      /* Reveal entry — used the moment the answer becomes visible. */
      .duel-side.revealing {
        animation: duel-card-in var(--dur-cinematic) var(--ease-spring-pop) both;
      }
      .duel-side.revealing::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          ellipse at center,
          var(--color-vs-flash) 0%,
          var(--color-vs-flash-clear) 60%
        );
        pointer-events: none;
        animation: duel-flash var(--dur-pop) var(--ease-out-soft) both;
        border-radius: inherit;
      }
      @keyframes duel-card-in {
        0% {
          transform: translateY(28px) scale(0.86);
          opacity: 0;
        }
        55% {
          transform: translateY(-4px) scale(1.04);
          opacity: 1;
        }
        100% {
          transform: translateY(0) scale(1);
          opacity: 1;
        }
      }
      @keyframes duel-flash {
        0% {
          opacity: 0.95;
        }
        100% {
          opacity: 0;
        }
      }
      /* Hidden / placeholder card — what lives behind the curtain. */
      .duel-side.placeholder {
        background: repeating-linear-gradient(
          115deg,
          var(--color-placeholder-peach-1) 0 22px,
          var(--color-placeholder-peach-2) 22px 44px
        );
        box-shadow:
          0 14px 32px var(--shadow-warm-ink-line-mid) inset,
          0 8px 22px var(--shadow-warm-ink-soft);
        animation: duel-shimmer var(--dur-loop-pulse) linear infinite;
        background-size: 200% 100%;
      }
      .duel-side.placeholder .duel-answer {
        color: var(--color-placeholder-ink);
        font-style: italic;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
      .duel-side.placeholder .duel-badge {
        opacity: 0.55;
        filter: saturate(0.5);
      }
      @keyframes duel-shimmer {
        0% {
          background-position: 0% 0;
        }
        100% {
          background-position: 200% 0;
        }
      }
      /* Winner / loser states (results phase). */
      .duel-side.winner {
        background: linear-gradient(
          180deg,
          var(--color-winner-grad-1) 0%,
          var(--color-winner-grad-2) 100%
        );
        border-color: var(--accent-yellow);
        box-shadow: var(--shadow-winner-card);
        transform: translateY(-6px) scale(1.025);
      }
      .duel-side.winner::before {
        background: linear-gradient(
          90deg,
          var(--color-winner-rail-1),
          var(--color-winner-rail-2),
          var(--color-winner-rail-1)
        );
      }
      .duel-side.winner .duel-name {
        color: var(--primary);
      }
      .duel-side.loser {
        opacity: 0.5;
        transform: scale(0.97);
        filter: grayscale(0.25);
      }
      /* Live tally bar (during voting). */
      .duel-tally {
        position: relative;
        height: 14px;
        background: var(--shadow-warm-ink-line);
        border-radius: 999px;
        overflow: hidden;
        margin-top: 4px;
      }
      .duel-tally-fill {
        position: absolute;
        inset: 0 auto 0 0;
        width: 50%;
        background: linear-gradient(
          95deg,
          var(--primary),
          var(--color-primary-warm)
        );
        transition: width var(--dur-fill) var(--ease-out-soft);
        border-radius: 999px;
      }
      .duel-side.duel-side-b .duel-tally-fill {
        background: linear-gradient(
          95deg,
          var(--accent-teal),
          var(--color-duel-b-end)
        );
      }
      .duel-tally-label {
        font-size: clamp(0.85rem, 1.1vw, 1rem);
        font-weight: 800;
        color: var(--muted);
        margin-top: 4px;
        letter-spacing: 0.04em;
      }
      .final-answer-card .fa-tally {
        margin-top: 8px;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--primary);
      }
      /* VS centerpiece — a brand badge with a soft halo. */
      .duel-vs {
        align-self: center;
        position: relative;
        font-family: var(--font-display, "Tajawal", sans-serif);
        font-size: clamp(1.7rem, 2.6vw, 2.6rem);
        font-weight: 900;
        color: var(--color-on-primary);
        background: linear-gradient(
          150deg,
          var(--primary) 0%,
          var(--color-primary-warm) 50%,
          var(--color-duel-b) 100%
        );
        border-radius: 50%;
        width: clamp(80px, 9vw, 124px);
        height: clamp(80px, 9vw, 124px);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-vs);
        letter-spacing: 0.04em;
        animation: vs-pulse var(--dur-loop-float) var(--ease-in-out) infinite;
      }
      .duel-vs::before {
        content: "";
        position: absolute;
        inset: -14px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          var(--color-vs-halo) 0%,
          var(--color-vs-flash-clear) 70%
        );
        z-index: -1;
        animation: vs-halo var(--dur-loop-float) var(--ease-in-out) infinite;
      }
      @keyframes vs-pulse {
        0%,
        100% {
          transform: scale(1) rotate(0deg);
        }
        50% {
          transform: scale(1.06) rotate(-3deg);
        }
      }
      @keyframes vs-halo {
        0%,
        100% {
          opacity: 0.55;
          transform: scale(1);
        }
        50% {
          opacity: 0.95;
          transform: scale(1.18);
        }
      }
      /* Round / matchup chip — small Quiplash-style header pill. */
      .duel-chip {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--card);
        color: var(--text);
        padding: 8px 18px;
        border-radius: 999px;
        font-weight: 800;
        font-size: clamp(0.95rem, 1.3vw, 1.15rem);
        box-shadow: var(--shadow-sm);
        margin-bottom: 12px;
        letter-spacing: 0.02em;
      }
      .duel-chip .duel-chip-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--primary);
        box-shadow: 0 0 0 4px var(--color-primary-ring);
      }
      /* Voter progress (small bar under the arena during voting). */
      .duel-judge-progress {
        margin-top: 22px;
        max-width: 520px;
        width: 100%;
        background: var(--card);
        border-radius: 999px;
        padding: 10px 18px;
        display: flex;
        align-items: center;
        gap: 14px;
        box-shadow: var(--shadow-sm);
      }
      .duel-judge-progress .djp-bar {
        flex: 1;
        height: 10px;
        background: var(--shadow-warm-ink-line-soft);
        border-radius: 999px;
        overflow: hidden;
        position: relative;
      }
      .duel-judge-progress .djp-fill {
        position: absolute;
        inset: 0 auto 0 0;
        background: linear-gradient(
          95deg,
          var(--primary),
          var(--color-primary-warm)
        );
        transition: width var(--dur-tap) var(--ease-out-soft);
      }
      .duel-judge-progress .djp-label {
        font-weight: 800;
        color: var(--muted);
        font-size: 0.95rem;
        letter-spacing: 0.04em;
      }

      /* Focused شطحات voting stage. The prompt gets the first beat; answer
         cards stay truly absent until their server reveal step arrives. */
      .sh-vote-stage {
        width: min(1320px, 100%);
        min-height: 0;
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(10px, 1.6vh, 18px);
      }
      .sh-vote-stage .duel-chip {
        margin: 0;
        padding: 6px 16px;
        box-shadow: none;
        border: 1px solid var(--shadow-warm-ink-line-soft);
      }
      .sh-vote-prompt {
        max-width: 1060px;
        margin: 0;
        padding: 0 20px;
        color: var(--text);
        font-size: clamp(1.75rem, 3.2vw, 3.45rem);
        font-weight: 900;
        line-height: 1.25;
        text-align: center;
        text-wrap: balance;
        animation: sh-prompt-land 520ms var(--ease-out-soft) both;
      }
      .sh-vote-stage .duel-arena {
        min-height: clamp(190px, 27vh, 330px);
        margin: 0;
        align-items: stretch;
      }
      .sh-vote-stage .duel-side {
        min-height: 0;
        justify-content: center;
        background: linear-gradient(160deg, var(--card), var(--color-tile-shathaat-hover));
      }
      .sh-vote-stage .duel-name {
        color: var(--muted);
        font-size: clamp(.9rem, 1.2vw, 1.05rem);
      }
      .sh-vote-stage .duel-answer {
        display: grid;
        place-items: center;
        text-align: center;
        text-wrap: balance;
      }
      .sh-vote-stage .sh-concealed {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
      }
      .sh-vote-stage .sh-answer-a.sh-revealed {
        visibility: visible;
        animation: sh-answer-a-in 680ms var(--ease-spring-pop) both;
      }
      .sh-vote-stage .sh-answer-b.sh-revealed {
        visibility: visible;
        animation: sh-answer-b-in 680ms var(--ease-spring-pop) both;
      }
      .sh-vote-stage .duel-vs {
        visibility: hidden;
        opacity: 0;
        animation: none;
      }
      .sh-vote-stage .duel-vs.sh-revealed {
        visibility: visible;
        animation: sh-vs-in 420ms var(--ease-spring-pop) both;
      }
      .sh-vote-timer {
        min-height: 46px;
        display: grid;
        place-items: center;
      }
      .sh-vote-timer:empty { visibility: hidden; }
      .sh-vote-timer-row {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--muted);
        font-size: .95rem;
        font-weight: 800;
        animation: sh-vs-in 360ms var(--ease-out-soft) both;
      }
      .sh-vote-timer .answer-timer {
        margin: 0;
        min-width: 170px;
        font-size: 1.12rem;
      }
      .sh-vote-stage .duel-judge-progress {
        display: none;
        margin: 0;
        box-shadow: none;
      }
      .sh-vote-stage .duel-judge-progress.sh-revealed {
        display: flex;
        animation: sh-progress-in 320ms var(--ease-out-soft) both;
      }
      .sh-vote-stage .djp-label {
        direction: ltr;
        unicode-bidi: isolate;
        min-width: 3.8em;
        text-align: center;
      }
      .sh-vote-stage-note {
        min-height: 24px;
        color: var(--muted);
        font-size: clamp(.95rem, 1.3vw, 1.1rem);
        font-weight: 800;
      }
      @keyframes sh-prompt-land {
        from { opacity: 0; transform: translateY(-18px) scale(.97); }
        to { opacity: 1; transform: none; }
      }
      @keyframes sh-answer-a-in {
        0% { opacity: 0; transform: translateX(-90px) rotate(-3deg) scale(.9); }
        68% { opacity: 1; transform: translateX(8px) rotate(.5deg) scale(1.02); }
        100% { opacity: 1; transform: none; }
      }
      @keyframes sh-answer-b-in {
        0% { opacity: 0; transform: translateX(90px) rotate(3deg) scale(.9); }
        68% { opacity: 1; transform: translateX(-8px) rotate(-.5deg) scale(1.02); }
        100% { opacity: 1; transform: none; }
      }
      @keyframes sh-vs-in {
        from { opacity: 0; transform: scale(.55) rotate(-10deg); }
        to { opacity: 1; transform: none; }
      }
      @keyframes sh-progress-in {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: none; }
      }
      @media (prefers-reduced-motion: reduce) {
        .duel-side.revealing,
        .duel-side.placeholder,
        .duel-vs,
        .duel-vs::before,
        .sh-vote-stage * {
          animation: none !important;
        }
      }
      .sweep-banner {
        background: linear-gradient(
          95deg,
          var(--color-winner-rail-2),
          var(--color-primary-warm)
        );
        color: var(--color-sweep-ink);
        font-size: clamp(1.3rem, 2vw, 1.7rem);
        font-weight: 900;
        padding: 12px 24px;
        border-radius: 999px;
        box-shadow: var(--shadow-sweep);
        margin-bottom: 14px;
        display: inline-block;
        animation:
          sweep-pop var(--dur-pop) var(--ease-spring-pop) both,
          sweep-pulse var(--dur-loop-glow) var(--ease-in-out) var(--dur-pop)
            infinite;
        transform-origin: center;
      }
      @keyframes sweep-pop {
        0% {
          transform: scale(0.4) rotate(-8deg);
          opacity: 0;
        }
        60% {
          transform: scale(1.15) rotate(3deg);
          opacity: 1;
        }
        100% {
          transform: scale(1) rotate(0);
          opacity: 1;
        }
      }
      @keyframes sweep-pulse {
        0%,
        100% {
          box-shadow: var(--shadow-sweep);
        }
        50% {
          box-shadow: var(--shadow-sweep-pulse);
        }
      }
      .final-answers-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 18px;
        width: 100%;
        max-width: 1400px;
        margin: 16px 0;
      }
      .final-answer-card {
        background: var(--card);
        color: var(--text);
        border-radius: 22px;
        padding: 22px 20px;
        box-shadow: var(--shadow);
        text-align: right;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border: 3px solid transparent;
      }
      .final-answer-card.winner {
        background: var(--color-winner-soft);
        border-color: var(--accent-yellow);
        box-shadow: var(--shadow-winner);
      }
      .final-answer-card .fa-num {
        font-size: 1.2rem;
        font-weight: 900;
        color: var(--muted);
      }
      .final-answer-card .fa-author {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--primary);
      }
      .final-answer-card .fa-text {
        font-size: clamp(1.3rem, 1.8vw, 1.6rem);
        font-weight: 800;
        line-height: 1.45;
      }
      .final-answer-card .fa-stat {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--primary);
      }

      /* ── Answer grid (voting/results normal view) ── */
      .answers-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 18px;
        width: 100%;
        max-width: 1400px;
        margin: 20px 0;
      }
      @keyframes reveal-card {
        0% {
          opacity: 0;
          transform: translateY(40px) scale(0.88);
        }
        65% {
          transform: translateY(-6px) scale(1.04);
        }
        100% {
          opacity: 1;
          transform: none;
        }
      }
      .answer-card {
        background: var(--card);
        color: var(--text);
        border-radius: 24px;
        padding: 26px;
        font-size: clamp(1.3rem, 2vw, 1.8rem);
        text-align: right;
        position: relative;
        box-shadow: var(--shadow);
        opacity: 0;
        animation: reveal-card var(--dur-medium) var(--ease-spring-pop) forwards;
      }
      .answer-card.winner {
        background: var(--color-winner-soft);
        box-shadow: var(--shadow-winner);
      }
      .answer-card .author {
        font-size: 1.2rem;
        color: var(--muted);
        margin-bottom: 8px;
        font-weight: 600;
      }
      .answer-card.winner .author {
        color: var(--primary);
      }
      .votes-badge {
        position: absolute;
        top: 14px;
        left: 14px;
        background: var(--primary);
        color: var(--color-on-primary);
        border-radius: 50%;
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 800;
        box-shadow: var(--shadow-rank-icon);
      }
      .answer-card.winner .votes-badge {
        background: rgba(255, 209, 102, 0.2);
        color: var(--accent-yellow);
        border: 2px solid rgba(255, 209, 102, 0.55);
      }
      /* ── SPOTLIGHT: fullscreen cinematic answer reveal ── */
      .spotlight-wrap {
        width: 100%;
        max-width: 1100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
      }
      .spotlight-progress-track {
        width: 100%;
        height: 8px;
        background: var(--color-progress-track);
        border-radius: 999px;
        overflow: hidden;
      }
      @keyframes drain {
        from {
          transform: scaleX(1);
        }
        to {
          transform: scaleX(0);
        }
      }
      .spotlight-progress-bar {
        height: 100%;
        background: var(--primary);
        border-radius: 999px;
        transform-origin: right;
        animation: drain var(--duration) linear forwards;
      }
      .spotlight-counter-label {
        font-size: 1.3rem;
        color: var(--muted);
        font-weight: 700;
      }
      /* Vote-getter reveal: zoom in with weight, brief overshoot */
      @keyframes spotlight-zoom-in {
        0% {
          opacity: 0;
          transform: scale(0.72) translateY(40px) rotate(-1deg);
        }
        55% {
          opacity: 1;
          transform: scale(1.06) translateY(-8px) rotate(0.4deg);
        }
        78% {
          transform: scale(0.985) translateY(2px) rotate(-0.2deg);
        }
        100% {
          opacity: 1;
          transform: none;
        }
      }
      /* Zero-vote reveal: slow, quiet fade — "and this one... got nothing" */
      @keyframes spotlight-fade-in {
        0% {
          opacity: 0;
          transform: translateY(14px);
          filter: blur(4px);
        }
        60% {
          opacity: 0.6;
          filter: blur(1.5px);
        }
        100% {
          opacity: 1;
          transform: none;
          filter: blur(0);
        }
      }
      /* Tally-up: brief pop on the vote count number */
      @keyframes vote-tally-pop {
        0% {
          transform: scale(0.6);
        }
        55% {
          transform: scale(1.25);
        }
        100% {
          transform: scale(1);
        }
      }
      .spotlight-card {
        width: 100%;
        background: var(--card);
        border-radius: 36px;
        padding: clamp(36px, 5vw, 72px) clamp(32px, 5vw, 72px);
        box-shadow: var(--shadow-lg);
        position: relative;
        text-align: center;
        opacity: 0;
      }
      /* Vote-getter (default cinematic): zoom-in with spring weight */
      .spotlight-card.has-votes {
        animation: spotlight-zoom-in var(--dur-cinematic) var(--ease-spring-pop)
          forwards;
      }
      /* Zero-vote: slower, quieter fade with muted chrome */
      .spotlight-card.zero-vote {
        animation: spotlight-fade-in var(--dur-cinematic-long)
          var(--ease-out-soft) forwards;
        animation-duration: var(--dur-zero-vote, var(--dur-cinematic-long));
        box-shadow: var(--shadow); /* gentler than --shadow-lg */
        background: var(--card);
        filter: saturate(0.85);
      }
      .spotlight-card.zero-vote .spotlight-text {
        color: var(--muted);
        font-weight: 800;
      }
      .spotlight-card.zero-vote .spotlight-prompt {
        opacity: 0.75;
      }
      .spotlight-card.winner-card {
        background: linear-gradient(
          135deg,
          var(--color-winner-soft) 0%,
          var(--color-winner-warm) 100%
        );
        box-shadow: var(--shadow-winner-lg);
        border: 3px solid var(--accent-yellow);
      }
      .vote-tally {
        display: inline-block;
        transform-origin: center;
      }
      .spotlight-card.has-votes .vote-tally {
        animation: vote-tally-pop var(--dur-tally, 700ms) var(--ease-spring-pop)
          both;
        animation-delay: var(--delay-tally, 320ms);
      }
      .spotlight-votes {
        font-size: clamp(1rem, 2vw, 1.4rem);
        font-weight: 700;
        color: var(--muted);
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }
      .spotlight-votes .badge {
        background: var(--primary);
        color: var(--color-on-primary);
        border-radius: 999px;
        padding: 4px 16px;
        font-size: 1rem;
      }
      .spotlight-text {
        font-size: clamp(2.2rem, 5vw, 4rem);
        font-weight: 900;
        line-height: 1.3;
        color: var(--text);
        margin-bottom: 24px;
      }
      .spotlight-author {
        font-size: clamp(1.2rem, 2vw, 1.8rem);
        font-weight: 700;
        color: var(--primary);
        opacity: 0;
        transform: translateY(12px);
        transition:
          opacity var(--dur-medium) var(--ease-out),
          transform var(--dur-medium) var(--ease-out);
      }

      /* ── خلاط word-chip attribution ───────────────────────────────────────── */
      .word-chips-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        direction: rtl;
        margin: 8px 0 20px;
      }
      .word-chip {
        display: inline-block;
        padding: 7px 18px;
        border-radius: 999px;
        font-weight: 900;
        font-size: clamp(1.3rem, 2.8vw, 2rem);
        font-family: inherit;
        border: 2.5px solid rgba(0, 0, 0, 0.35);
        box-shadow:
          0 4px 0 rgba(0, 0, 0, 0.4),
          0 0 0 0 transparent;
        color: #fff;
        text-shadow:
          -1px -1px 0 rgba(0, 0, 0, 0.5),
          1px -1px 0 rgba(0, 0, 0, 0.5),
          -1px 1px 0 rgba(0, 0, 0, 0.5),
          1px 1px 0 rgba(0, 0, 0, 0.5);
        opacity: 0;
        transform: scale(0.55);
        animation: chip-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        animation-delay: var(--chip-delay, 0ms);
      }
      .word-chip-neutral {
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
        color: rgba(255, 255, 255, 0.55) !important;
        text-shadow: none !important;
        box-shadow: none !important;
      }
      @keyframes chip-pop {
        from {
          opacity: 0;
          transform: scale(0.55);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      /* ── Contributor floating panels ────────────────────────────────────── */
      .contrib-overlay {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
      }
      .contrib-col {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 16px;
        align-items: flex-start;
        max-width: 160px;
      }
      .contrib-col.right-col {
        align-items: flex-end;
      }
      .contrib-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        background: rgba(4, 18, 28, 0.92);
        border-radius: 18px;
        padding: 14px 16px;
        border: 2.5px solid var(--cc, #fff);
        box-shadow:
          0 0 18px rgba(0, 0, 0, 0.5),
          0 0 28px var(--cc-glow, rgba(255, 255, 255, 0.15));
        opacity: 0;
        width: 130px;
      }
      .contrib-col:first-child .contrib-card {
        animation: contrib-slide-left 0.55s cubic-bezier(0.22, 1, 0.36, 1)
          forwards;
        animation-delay: var(--cd, 0.7s);
        transform: translateX(-120%);
      }
      .contrib-col.right-col .contrib-card {
        animation: contrib-slide-right 0.55s cubic-bezier(0.22, 1, 0.36, 1)
          forwards;
        animation-delay: var(--cd, 0.7s);
        transform: translateX(120%);
      }
      @keyframes contrib-slide-left {
        from {
          opacity: 0;
          transform: translateX(-120%);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      @keyframes contrib-slide-right {
        from {
          opacity: 0;
          transform: translateX(120%);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      .contrib-avatar {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        border: 3px solid var(--cc, #fff);
        object-fit: contain;
        background: rgba(255, 255, 255, 0.08);
      }
      .contrib-name {
        font-size: 0.85rem;
        font-weight: 700;
        color: #fff;
        text-align: center;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .contrib-pts {
        font-size: 0.9rem;
        font-weight: 900;
        color: var(--cc, #fff);
        background: rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        padding: 3px 12px;
        letter-spacing: 0.02em;
      }
      .spotlight-prompt {
        font-size: clamp(1rem, 1.8vw, 1.4rem);
        color: var(--muted);
        font-weight: 600;
        margin-bottom: 20px;
        padding: 14px 24px;
        background: var(--color-spotlight-prompt-bg);
        border-radius: 16px;
        line-height: 1.5;
      }
      .winner-crown {
        font-size: clamp(2rem, 4vw, 3.5rem);
        margin-bottom: 10px;
      }
      /* ── Player roster (status indicator per player: bubble + name) ── */
      /* Move the whole player to the next row before squeezing their name. */
      .sh-ready-player { flex-shrink: 0; white-space: nowrap; }
      .sh-ready-player img, .fk-name-slip img { flex-shrink: 0; }
      @keyframes bubble-pop-in {
        0% {
          opacity: 0;
          transform: scale(0) translateY(20px);
        }
        60% {
          transform: scale(1.15) translateY(-6px);
        }
        100% {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }
      @keyframes bubble-float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-6px);
        }
      }
      @keyframes roster-done-pop {
        0% {
          transform: scale(1);
        }
        40% {
          transform: scale(1.18);
        }
        100% {
          transform: scale(1);
        }
      }
      .roster-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 18px 22px;
        margin: 24px auto 12px;
        max-width: 1100px;
      }
      .roster-card {
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        min-width: 96px;
        opacity: 0;
        animation: bubble-pop-in var(--dur-medium) var(--ease-spring-pop)
          forwards;
      }
      .roster-bubble {
        width: clamp(56px, 6.5vw, 78px);
        height: clamp(56px, 6.5vw, 78px);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(1.5rem, 2.6vw, 2.1rem);
        box-shadow: var(--shadow);
        transition: var(--bounce);
      }
      .roster-card.is-pending .roster-bubble {
        background: var(--card);
        color: var(--muted);
        animation: bubble-float var(--dur-loop-float) var(--ease-in-out)
          infinite;
      }
      .roster-card.is-done .roster-bubble {
        background: var(--accent-teal);
        color: var(--color-on-primary);
        font-weight: 800;
        animation: roster-done-pop var(--dur-medium) var(--ease-out);
      }
      .roster-name {
        font-size: clamp(1rem, 1.4vw, 1.25rem);
        font-weight: 700;
        color: var(--text);
        max-width: 100%;
        text-align: center;
        white-space: nowrap;
      }
      .roster-card.is-pending .roster-name {
        color: var(--muted);
      }

      /* Legacy: anonymous bubbles row (kept for any other usage) */
      .vote-bubbles-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
        margin: 28px 0 12px;
        max-width: 900px;
      }
      .vote-bubble {
        width: clamp(56px, 7vw, 80px);
        height: clamp(56px, 7vw, 80px);
        border-radius: 50%;
        background: var(--card);
        box-shadow: var(--shadow);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(1.6rem, 3vw, 2.4rem);
        opacity: 0;
        animation:
          bubble-pop-in var(--dur-medium) var(--ease-spring-pop) forwards,
          bubble-float var(--dur-loop-float) var(--ease-in-out) infinite
            var(--dur-medium);
      }

      /* ── Tie banner pulse (خلاط results — multiple winners) ── */
      @keyframes tie-glow {
        0%,
        100% {
          text-shadow: 0 0 0 var(--color-tie-glow-clear);
          transform: scale(1);
        }
        50% {
          text-shadow: 0 0 28px var(--color-tie-glow-bright);
          transform: scale(1.04);
        }
      }
      .winner-banner.tie-pulse {
        color: var(--accent-yellow);
        animation: tie-glow var(--dur-loop-pulse) var(--ease-in-out) infinite;
      }

      /* ── Faker UI ── */
      .winner-banner {
        font-size: clamp(2rem, 4vw, 4rem);
        font-weight: 900;
        color: var(--primary);
        margin: 20px 0;
      }
      .verdict {
        font-size: clamp(2rem, 4vw, 4rem);
        font-weight: 900;
        margin: 20px 0;
      }
      .verdict.caught {
        color: var(--accent-teal);
      }
      .verdict.escaped {
        color: var(--accent-pink);
      }
      .player-result-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 18px;
        width: 100%;
        max-width: 1200px;
        margin: 20px 0;
      }
      .result-card {
        background: var(--card);
        color: var(--text);
        border-radius: 24px;
        padding: 26px;
        text-align: center;
        box-shadow: var(--shadow);
      }
      .result-card.faker {
        background: var(--color-result-faker-bg);
        box-shadow: var(--shadow-result-faker);
      }
      .result-card.accused {
        background: var(--color-result-accused-bg);
        box-shadow: var(--shadow-result-accused);
      }
      .result-card .name {
        font-size: 1.7rem;
        font-weight: 800;
        margin-bottom: 6px;
      }
      .result-card .vote-count {
        font-size: 1.2rem;
        color: var(--muted);
        font-weight: 600;
      }
      .result-card .tag {
        font-size: 0.95rem;
        margin-top: 8px;
        padding: 5px 14px;
        border-radius: 999px;
        display: inline-block;
        font-weight: 700;
      }
      .tag-faker {
        background: rgba(255, 209, 102, 0.18);
        color: var(--accent-yellow);
        border: 1px solid rgba(255, 209, 102, 0.45);
      }
      .tag-accused {
        background: var(--accent-pink);
        color: var(--color-on-primary);
      }
      .perform-banner {
        font-size: clamp(1.6rem, 2.5vw, 2.6rem);
        font-weight: 700;
        background: var(--card);
        color: var(--text);
        border-radius: 28px;
        padding: 36px 48px;
        margin: 16px 0;
        max-width: 1000px;
        line-height: 1.5;
        box-shadow: var(--shadow);
      }
      .perform-banner .icon {
        font-size: 3.5rem;
        margin-bottom: 12px;
      }
      /* ── Podium ── */
      .podium-wrapper {
        width: 100%;
        max-width: 1200px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .podium-title {
        font-size: clamp(2rem, 3.5vw, 3rem);
        font-weight: 900;
        margin-bottom: 8px;
      }
      .podium-subtitle {
        font-size: 1.5rem;
        color: var(--muted);
        margin-bottom: 20px;
      }
      .podium-stage {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 14px;
        width: 100%;
        height: 420px;
      }
      .podium-bar-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        flex: 1;
        min-width: 70px;
        max-width: 150px;
      }
      .podium-name {
        font-size: 1.1rem;
        font-weight: 800;
        margin-bottom: 4px;
        word-break: break-word;
        line-height: 1.3;
      }
      .podium-score {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--muted);
        margin-bottom: 5px;
      }
      .podium-rank {
        font-size: 1.5rem;
        font-weight: 900;
        margin-bottom: 3px;
      }
      .podium-bar {
        width: 100%;
        border-radius: 14px 14px 0 0;
        height: 0;
        position: relative;
        overflow: visible;
        transition: height var(--dur-cinematic-long) var(--ease-out-soft);
      }
      /* Right-side 3D depth face */
      .podium-bar::before {
        content: "";
        position: absolute;
        left: 100%;
        bottom: 0;
        width: 10px;
        height: 100%;
        background: var(--podium-depth, rgba(0, 0, 0, 0.35));
        border-radius: 0 4px 0 0;
        clip-path: polygon(0 5px, 100% 0, 100% 100%, 0 100%);
        transition: height var(--dur-cinematic-long) var(--ease-out-soft);
      }
      /* Top 3D depth face */
      .podium-bar::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 0;
        right: -10px;
        height: 10px;
        background: var(--podium-depth, rgba(0, 0, 0, 0.35));
        clip-path: polygon(0 100%, 10px 0, 100% 0, 100% 100%);
      }
      .podium-bar.gold {
        --podium-depth: var(--color-podium-gold-depth);
      }
      .podium-bar.silver {
        --podium-depth: var(--color-podium-silver-depth);
      }
      .podium-bar.bronze {
        --podium-depth: var(--color-podium-bronze-depth);
      }
      .podium-bar.neutral {
        --podium-depth: var(--color-podium-neutral-depth);
      }
      .podium-bar.gold {
        background: linear-gradient(
          180deg,
          var(--color-podium-gold-1),
          var(--color-podium-gold-2)
        );
      }
      .podium-bar.silver {
        background: linear-gradient(
          180deg,
          var(--color-podium-silver-1),
          var(--color-podium-silver-2)
        );
      }
      .podium-bar.bronze {
        background: linear-gradient(
          180deg,
          var(--color-podium-bronze-1),
          var(--color-podium-bronze-2)
        );
      }
      .podium-bar.neutral {
        background: linear-gradient(
          180deg,
          var(--color-podium-neutral-1),
          var(--color-podium-neutral-2)
        );
      }
      /* ── Leaderboard full-screen layout (Figma 33:1232) ─────────────────
         Reference frame is 1440×1024. Spatial proportions, pill colors and
         the inner-shadow CTA depth treatment all derive from that frame.

         The host shell normally wraps every screen in body padding + a dark
         navy + dotted radial pattern. For the leaderboard we want to look
         like the Figma comp: one single bleed-to-edge background image
         (Group 1521.png) and zero competing chrome. body.leaderboard-phase
         strips the padding + pattern, hides the Majlis brand header, the
         pause/exit overlay, back-btn, room-code pill, fullscreen toggle —
         leaving only the in-design topbar + main + bottom rail. */
      body.leaderboard-phase {
        padding: 0;
        background-color: #04121c;
        background-image: var(--mj-art-lobby);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      body.leaderboard-phase #app {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        height: 100vh;
        flex: 1;
        padding: 0;
        margin: 0;
      }
      body.leaderboard-phase .page-header,
      body.leaderboard-phase #game-controls,
      body.leaderboard-phase #top-left-bar,
      body.leaderboard-phase #back-btn,
      body.leaderboard-phase #room-code-pill,
      body.leaderboard-phase #fullscreen-btn {
        display: none !important;
      }
      .lb-screen {
        width: 100%;
        align-self: stretch;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: clamp(18px, 2.4vh, 28px) clamp(20px, 2.5vw, 40px)
          clamp(14px, 2vh, 22px);
        box-sizing: border-box;
        gap: clamp(10px, 1.6vh, 18px);
        background: transparent; /* seamless — body owns the bg */
      }
      .lb-topbar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        min-height: clamp(70px, 9vh, 100px);
      }
      .lb-topbar-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(6px, 1vh, 12px);
      }
      /* Leaderboard logo renders WHITE on the dark teal background — matches
         Figma "Mask group" treatment. brightness(0) invert(1) recolors the
         red source asset to white; drop-shadow then layered on top. */
      .lb-game-logo {
        height: clamp(80px, 11vh, 130px);
        width: auto;
        filter: brightness(0) invert(1) drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45));
      }
      /* Round pill: Figma "Frame 59" (#c94949 fill, 90px radius, 28px/8px
         padding, 32px IBM Plex Sans Arabic Bold, dark-amber text shadow).
         The embossed inner-shadow + drop-shadow are CSS additions for the
         3D depth treatment that matches the rest of the leaderboard CTAs. */
      .lb-rounds-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #c94949;
        color: #fff;
        font-weight: 800;
        font-size: clamp(1.1rem, 2vw, 1.85rem);
        padding: clamp(6px, 1vh, 12px) clamp(22px, 2.6vw, 36px);
        border-radius: 999px;
        direction: rtl;
        text-shadow: 1.221px 2.442px 0 #42290d;
        letter-spacing: 0.01em;
        box-shadow:
          inset 0 -5px 0 rgba(0, 0, 0, 0.22),
          0 4px 0 rgba(0, 0, 0, 0.25),
          0 8px 18px rgba(0, 0, 0, 0.35);
        line-height: 1.2;
        white-space: nowrap;
      }
      /* mute.png is a 1374x100 canvas with the button in the rightmost 207px
         (button aspect ratio 207:100 ≈ 2.07:1). Anchored top-right of the
         leaderboard topbar to match Figma "Component 3" placement. */
      .lb-mute-btn {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: clamp(56px, 7.5vh, 84px);
        aspect-ratio: 207 / 100;
        background-color: transparent;
        background-image: url("/assets/leaderboard/mute.png");
        background-repeat: no-repeat;
        background-position: right center;
        background-size: auto 100%;
        border: 0;
        padding: 0;
        cursor: pointer;
        opacity: 0.97;
        transition:
          opacity 0.15s,
          transform 0.1s;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
      }
      .lb-mute-btn:hover {
        opacity: 1;
        transform: translateY(-50%) scale(1.03);
      }
      .lb-mute-btn:active {
        transform: translateY(-50%) scale(0.97);
      }

      /* ── Main two-column area ─────────────────────────────────────────────── */
      .lb-main {
        display: flex;
        flex-direction: row-reverse; /* podium left (visual), list right — RTL grid */
        flex: 1;
        min-height: 0;
        gap: clamp(16px, 2.4vw, 36px);
        align-items: flex-end;
      }
      .lb-main.solo-podium .lb-podium-col {
        flex: 1 1 100%;
      }

      /* ── Podium column ──────────────────────────────────────────────── */
      .lb-podium-col {
        flex: 0 0 41%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-end;
        overflow: visible;
        min-height: 0;
        height: 100%;
      }
      /* Wrap aspect ≈ 477:575 — matches Figma "Frame 58" so the gold avatar
         has natural headroom above the podium without the column blowing
         past its visual envelope. The podium.png sits at the bottom; the
         slots are absolutely positioned with their BOTTOM edge anchored at
         each block's top, so the score pill rests right at the block edge. */
      .lb-podium-wrap {
        position: relative;
        width: auto;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        aspect-ratio: 477 / 575;
        overflow: visible;
        margin: 0 auto;
      }
      .lb-podium-base {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        display: block;
        filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
      }
      /* Soft elliptical shadow under the podium — matches Figma "Ellipse 414". */
      .lb-podium-wrap::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -1.2%;
        width: 62%;
        height: 3%;
        transform: translateX(-50%);
        background: radial-gradient(
          ellipse at center,
          rgba(0, 0, 0, 0.55) 0%,
          rgba(0, 0, 0, 0) 70%
        );
        pointer-events: none;
      }
      .lb-podium-slots {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: visible;
      }
      .lb-podium-slot {
        position: absolute;
        width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        pointer-events: none;
      }
      /* Wrap is 477 × 575 px (aspect 477:575). podium.png is rendered at
         the wrap's full width so it ends up ~284px tall in the wrap.
         Each podium block has a perspective LID that extends ABOVE the
         block's front-face top — anchoring at the front-face top puts
         the avatar inside the lid, which reads as "overlapping the
         podium". So we anchor each slot's bottom edge at the LID BACK
         TOP (the highest visible pixel of the block) instead. Approx
         lid back y in the 477×253 source PNG:
            gold:   y ≈   0   (lid barely visible — block at front)
            silver: y ≈  78
            bronze: y ≈ 128
         Converted to "% from wrap bottom":
            (253 − y) × (284/253) / 644  → ≈ 44 / 31 / 22 %
         An extra 3–5% headroom is added on top so the score pill floats
         clear of the lid the way the Figma comp does.
         podium.png is L→R: silver | gold | bronze. */
      .lb-podium-slot.p-silver {
        left: 0%;
        bottom: 32%;
      }
      .lb-podium-slot.p-gold {
        left: 33.33%;
        bottom: 48%;
      }
      .lb-podium-slot.p-bronze {
        left: 66.67%;
        bottom: 24%;
      }
      .lb-podium-av {
        object-fit: contain;
        display: block;
        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55));
        margin-bottom: 4px;
      }
      /* Tiered avatar sizes: champion is largest. */
      .lb-podium-slot.p-gold .lb-podium-av {
        width: clamp(82px, 9vw, 112px);
        height: clamp(82px, 9vw, 112px);
      }
      .lb-podium-slot.p-silver .lb-podium-av {
        width: clamp(64px, 7vw, 86px);
        height: clamp(64px, 7vw, 86px);
      }
      .lb-podium-slot.p-bronze .lb-podium-av {
        width: clamp(56px, 6vw, 76px);
        height: clamp(56px, 6vw, 76px);
      }
      .lb-podium-name {
        font-weight: 900;
        color: #fff;
        text-shadow:
          2px 3px 0 #150a04,
          1px 2px 0 #150a04,
          0 1px 0 #150a04;
        text-align: center;
        direction: rtl;
        white-space: nowrap;
        overflow: visible;
        max-width: 140%;
        padding: 2px 6px;
        line-height: 1.15;
        flex-shrink: 0;
      }
      .lb-podium-slot.p-gold .lb-podium-name {
        font-size: clamp(1.4rem, 2.6vw, 2.4rem);
      }
      .lb-podium-slot.p-silver .lb-podium-name {
        font-size: clamp(1.05rem, 1.9vw, 1.7rem);
      }
      .lb-podium-slot.p-bronze .lb-podium-name {
        font-size: clamp(0.9rem, 1.55vw, 1.4rem);
      }
      /* Score pill below name: gold pip on 1st, white on 2nd, bronze on 3rd. */
      .lb-podium-score {
        margin-top: 2px;
        font-weight: 700;
        padding: 5px 12px;
        border-radius: 999px;
        direction: rtl;
        white-space: nowrap;
        text-align: center;
        line-height: 1.3;
        box-shadow:
          inset 0 -2px 0 rgba(0, 0, 0, 0.18),
          0 2px 4px rgba(0, 0, 0, 0.25);
      }
      .lb-podium-slot.p-gold .lb-podium-score {
        background: #ffbf48;
        color: #2e200f;
        font-size: clamp(0.78rem, 1.05vw, 1rem);
        min-width: clamp(72px, 9vw, 112px);
      }
      .lb-podium-slot.p-silver .lb-podium-score {
        background: #ffffff;
        color: #50320f;
        font-size: clamp(0.72rem, 0.95vw, 0.9rem);
        min-width: clamp(64px, 7.6vw, 96px);
      }
      .lb-podium-slot.p-bronze .lb-podium-score {
        background: #b95125;
        color: #ffffff;
        font-size: clamp(0.68rem, 0.88vw, 0.84rem);
        min-width: clamp(56px, 7vw, 90px);
      }

      /* ── Ranked list column (Figma "Frame 57") ────────────────────────────── */
      .lb-list-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: clamp(14px, 1.6vh, 26px);
        align-self: stretch;
        justify-content: center;
        min-width: 0;
      }
      /* Title "لوحة النتائج": white IBM-Plex-Arabic-bold with deep amber shadow. */
      .lb-results-title {
        font-size: clamp(1.4rem, 2.2vw, 2.1rem);
        font-weight: 800;
        color: #ffffff;
        text-shadow: 1.22px 2.44px 0 #42290d;
        direction: rtl;
        text-align: right;
        flex-shrink: 0;
        letter-spacing: 0.01em;
        line-height: 1.05;
      }
      /* Stair-step right anchor (Figma 33:2144): the RHS edges of all pills
         line up; the LEFT edges step inward as you descend the ladder.
         Because the document is RTL, the inline "start" of a column flex
         container IS the visual right. So flex-start (not flex-end!) is
         what produces the right-anchored stair-step. */
      .lb-pill-list {
        display: flex;
        flex-direction: column;
        gap: clamp(4px, 0.7vh, 9px);
        width: 100%;
        flex: 1;
        justify-content: center;
        align-items: flex-start;
      }
      /* Pill rows render at each PNG's NATURAL aspect so rounded ends never
         distort. Stair-step widths: 100 / 95.5 / 90.4 / 88.2 from Figma 33:2144.
         Naturals: gold 740x84, silver 707x80, bronze 663x69, dark 646x56. */
      .lb-pill-row {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        direction: rtl;
        padding: 0 clamp(14px, 1.6vw, 24px) 0 clamp(10px, 1.2vw, 18px);
        background-image: url("/assets/leaderboard/pill-dark.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: right center;
        gap: 10px;
        box-sizing: border-box;
        width: 88.2%;
        aspect-ratio: 646 / 56;
      }
      .lb-pill-row.r-gold {
        background-image: url("/assets/leaderboard/pill-gold.png");
        width: 100%;
        aspect-ratio: 740 / 84;
      }
      .lb-pill-row.r-silver {
        background-image: url("/assets/leaderboard/pill-silver.png");
        width: 95.5%;
        aspect-ratio: 707 / 80;
      }
      .lb-pill-row.r-bronze {
        background-image: url("/assets/leaderboard/pill-bronze.png");
        width: 90.4%;
        aspect-ratio: 663 / 69;
      }
      .lb-pill-rhs {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: clamp(8px, 1vw, 14px);
        min-width: 0;
        flex: 1;
        overflow: hidden;
        direction: rtl;
      }
      .lb-pill-medal {
        width: clamp(28px, 3.2vw, 44px);
        height: auto;
        flex-shrink: 0;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
      }
      .lb-pill-rank-img {
        height: clamp(18px, 2.4vh, 28px);
        width: auto;
        flex-shrink: 0;
        filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55));
        opacity: 0.95;
      }
      .lb-pill-rank-num {
        font-weight: 900;
        color: rgba(255, 255, 255, 0.8);
        font-size: clamp(0.9rem, 1.1vw, 1.05rem);
        flex-shrink: 0;
        min-width: clamp(18px, 2vw, 26px);
        text-align: center;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
      }
      .lb-pill-av {
        width: clamp(34px, 3.8vw, 52px);
        height: clamp(34px, 3.8vw, 52px);
        object-fit: contain;
        flex-shrink: 0;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
      }
      /* Top-3 pill avatars get a slight bump to match Figma "Frame 47" sizing. */
      .lb-pill-row.r-gold .lb-pill-av {
        width: clamp(44px, 4.8vw, 64px);
        height: clamp(44px, 4.8vw, 64px);
      }
      .lb-pill-row.r-silver .lb-pill-av {
        width: clamp(40px, 4.4vw, 58px);
        height: clamp(40px, 4.4vw, 58px);
      }
      .lb-pill-row.r-bronze .lb-pill-av {
        width: clamp(36px, 4vw, 54px);
        height: clamp(36px, 4vw, 54px);
      }
      .lb-pill-name {
        font-weight: 800;
        font-size: clamp(0.95rem, 1.3vw, 1.25rem);
        color: #1f0a00;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
        text-align: right;
        letter-spacing: 0.005em;
      }
      .lb-pill-row.r-gold .lb-pill-name {
        color: #1f0a00;
        font-size: clamp(1.05rem, 1.5vw, 1.55rem);
      }
      .lb-pill-row.r-silver .lb-pill-name {
        color: #1a2330;
        font-size: clamp(1rem, 1.4vw, 1.4rem);
      }
      .lb-pill-row.r-bronze .lb-pill-name {
        color: #fff;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
      }
      .lb-pill-row.r-dark .lb-pill-name {
        color: #fff;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
      }
      .lb-pill-score {
        background: rgba(255, 255, 255, 0.96);
        color: #1a0800;
        font-size: clamp(0.7rem, 0.9vw, 0.86rem);
        font-weight: 800;
        padding: 4px clamp(10px, 1.1vw, 16px);
        border-radius: 999px;
        white-space: nowrap;
        flex-shrink: 0;
        direction: rtl;
        box-shadow:
          0 1px 2px rgba(0, 0, 0, 0.18) inset,
          0 2px 0 rgba(0, 0, 0, 0.22);
        line-height: 1.3;
      }
      .lb-pill-row.r-gold .lb-pill-score {
        background: #ffe6a8;
        color: #4a2a00;
      }
      .lb-pill-row.r-silver .lb-pill-score {
        background: #ffffff;
        color: #1a2330;
      }
      .lb-pill-row.r-bronze .lb-pill-score {
        background: #4a1a08;
        color: #fff;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
      }
      .lb-pill-row.r-dark .lb-pill-score {
        background: #0c2138;
        color: #fff;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
      }

      /* ── Bottom bar (Figma "Frame 56") ────────────────────────────────────
         Bottom-left (visual): two icon CTAs (exit dark-teal, stop red).
         Bottom-right (visual): large orange "next round" CTA.
         Page is RTL, so row-reverse pins lb-bottom-left to the visual LEFT. */
      .lb-bottom {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        gap: clamp(12px, 1.6vw, 24px);
      }
      .lb-bottom-left {
        display: flex;
        flex-direction: row-reverse;
        gap: clamp(10px, 1.3vw, 22px);
        align-items: center;
      }
      .lb-final-actions {
        display: flex;
        gap: clamp(8px, 1.2vw, 16px);
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        width: 100%;
      }
      .lb-final-actions button {
        min-width: clamp(130px, 16vw, 220px);
        padding: clamp(10px, 1.5vh, 16px) clamp(14px, 1.8vw, 24px);
        font-size: clamp(0.9rem, 1.3vw, 1.2rem);
      }
      .lb-btn-img {
        height: clamp(54px, 8vh, 88px);
        width: auto;
        cursor: pointer;
        opacity: 0.95;
        transition:
          opacity 0.15s,
          transform 0.1s;
        filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35));
      }
      .lb-btn-img:hover {
        opacity: 1;
        transform: scale(1.04);
      }
      .lb-btn-img:active {
        transform: scale(0.96);
      }
      .lb-next-btn {
        height: clamp(60px, 9vh, 100px);
        width: auto;
        cursor: pointer;
        transition:
          opacity 0.15s,
          transform 0.1s;
        filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.35));
      }
      .lb-next-btn:hover {
        opacity: 0.92;
        transform: scale(1.03);
      }
      .lb-next-btn:active {
        transform: scale(0.97);
      }

      /* ── Tie arena avatar ─────────────────────────────────────────────────── */
      .tie-avatar {
        width: clamp(60px, 6vw, 80px);
        height: clamp(60px, 6vw, 80px);
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, 0.3);
        object-fit: cover;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
        margin-bottom: 4px;
      }

      .champion-banner {
        font-size: clamp(2.5rem, 4.5vw, 4.5rem);
        font-weight: 900;
        color: var(--primary);
        margin: 12px 0 4px;
      }
      .champion-sub {
        font-size: clamp(1.4rem, 2vw, 2rem);
        font-weight: 700;
        color: var(--text);
        margin-bottom: 24px;
      }

      /* ── Rolling score & delta badge ── */
      @keyframes spring-pop {
        0% {
          transform: scale(0) translateY(20px);
          opacity: 0;
        }
        55% {
          transform: scale(1.1) translateY(-10px);
          opacity: 1;
        }
        75% {
          transform: scale(0.94) translateY(3px);
        }
        90% {
          transform: scale(1.04) translateY(-2px);
        }
        100% {
          transform: scale(1) translateY(0);
          opacity: 1;
        }
      }
      .delta-badge {
        display: inline-block;
        background: var(--color-delta-positive);
        color: var(--color-on-primary);
        font-size: 0.8rem;
        font-weight: 900;
        padding: 2px 9px;
        border-radius: 20px;
        margin-right: 6px;
        vertical-align: middle;
        opacity: 0;
        animation: spring-pop var(--dur-cinematic) var(--ease-spring-pop)
          forwards;
      }

      /* ── Tie split-screen arena ── */
      .tie-wrapper {
        width: 100%;
        max-width: 1200px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .tie-title {
        font-size: clamp(2rem, 3.5vw, 3rem);
        font-weight: 900;
        margin-bottom: 8px;
      }
      .tie-subtitle {
        font-size: 1.5rem;
        color: var(--muted);
        margin-bottom: 20px;
      }
      .tie-arena {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        min-height: 320px;
        border-radius: 24px;
        overflow: hidden;
        margin-bottom: 28px;
        box-shadow: var(--shadow-lg);
      }
      .tie-side {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 44px 28px;
        gap: 10px;
        min-width: 0;
      }
      /* Reserve a safe gutter on each side's INNER edge so the central
       "تعادل!" badge never overlaps the player's name, score, or delta.
       The grid in dir=rtl places .tie-left visually on the right
       (inner edge = physical LEFT) and .tie-right visually on the left
       (inner edge = physical RIGHT). */
      .tie-side.tie-left {
        padding-left: 78px;
      }
      .tie-side.tie-right {
        padding-right: 78px;
      }
      .tie-side.tie-left {
        background: linear-gradient(
          145deg,
          var(--color-tie-left-start),
          var(--color-tie-left-end)
        );
        clip-path: polygon(
          0 0,
          93% 0,
          100% 8%,
          93% 16%,
          100% 24%,
          93% 32%,
          100% 40%,
          93% 48%,
          100% 56%,
          93% 64%,
          100% 72%,
          93% 80%,
          100% 88%,
          93% 96%,
          100% 100%,
          0 100%
        );
      }
      .tie-side.tie-right {
        background: linear-gradient(
          145deg,
          var(--color-tie-right-start),
          var(--color-tie-right-end)
        );
        clip-path: polygon(
          7% 0,
          100% 0,
          100% 100%,
          7% 100%,
          0% 96%,
          7% 88%,
          0% 80%,
          7% 72%,
          0% 64%,
          7% 56%,
          0% 48%,
          7% 40%,
          0% 32%,
          7% 24%,
          0% 16%,
          7% 8%,
          0% 0
        );
      }
      .tie-player-rank {
        font-size: 3.5rem;
        line-height: 1;
      }
      .tie-player-name {
        font-size: clamp(1.3rem, 2.3vw, 2rem);
        font-weight: 900;
        color: var(--color-on-primary);
        text-align: center;
        text-shadow: 0 2px 10px var(--color-podium-text-shadow);
        line-height: 1.2;
        word-break: break-word;
        max-width: 100%;
      }
      .tie-player-score {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--color-overlay-on-dark-strong);
        white-space: nowrap;
      }
      .tie-player-delta {
        font-size: 0.9rem;
        font-weight: 800;
        background: var(--color-overlay-on-dark-mid);
        color: var(--color-on-primary);
        padding: 3px 12px;
        border-radius: 20px;
        white-space: nowrap;
        opacity: 0;
        animation: spring-pop var(--dur-cinematic) var(--ease-spring-pop)
          var(--delay-tie-spring) forwards;
      }
      .tie-vs-badge {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: var(--color-overlay-glass);
        border-radius: 50%;
        width: 84px;
        height: 84px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow:
          var(--shadow-vs-badge),
          0 0 0 4px var(--color-overlay-tie-glass);
        z-index: 10;
        font-size: 0.95rem;
        font-weight: 900;
        color: var(--text);
        line-height: 1.1;
        text-align: center;
        pointer-events: none;
      }
      @media (max-width: 720px) {
        .tie-side.tie-left {
          padding-left: 64px;
        }
        .tie-side.tie-right {
          padding-right: 64px;
        }
        .tie-vs-badge {
          width: 68px;
          height: 68px;
          font-size: 0.85rem;
        }
      }
      .tie-rest-stage {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 14px;
        width: 100%;
        height: 240px;
        margin-bottom: 20px;
        padding-top: 8px;
      }
      /* compact mode: smaller bars + labels for the "rest" players in a tie */
      .podium-bar-wrap.compact .podium-rank {
        font-size: 1.2rem;
        margin-bottom: 2px;
      }
      .podium-bar-wrap.compact .podium-name {
        font-size: 0.95rem;
        margin-bottom: 2px;
      }
      .podium-bar-wrap.compact .podium-score {
        font-size: 0.8rem;
        margin-bottom: 4px;
      }
      .podium-bar-wrap.compact {
        max-width: 110px;
        min-width: 60px;
      }
      .podium-bar-wrap.compact .delta-badge {
        font-size: 0.7rem;
        padding: 1px 7px;
      }
      /* ── Cinematic Countdown Overlay ────────────────────────────────────────── */
      @keyframes cdPopIn {
        0% {
          opacity: 0;
          transform: scale(0.45);
        }
        60% {
          opacity: 1;
          transform: scale(1.08);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }
      @keyframes cdPopOut {
        0% {
          opacity: 1;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(1.35);
        }
      }
      @keyframes cdRingPulse {
        0% {
          transform: scale(1);
          opacity: 0.55;
        }
        70% {
          transform: scale(1.18);
          opacity: 0;
        }
        100% {
          transform: scale(1.18);
          opacity: 0;
        }
      }
      @keyframes cdVoteGlow {
        0%,
        100% {
          text-shadow:
            0 0 24px var(--shadow-faker-glow-soft),
            0 0 48px var(--shadow-faker-glow-faint);
        }
        50% {
          text-shadow:
            0 0 36px var(--shadow-faker-glow-mid),
            0 0 72px var(--shadow-faker-glow-deep);
        }
      }

      .cd-overlay {
        position: fixed;
        inset: 0;
        z-index: 300;
        background: radial-gradient(
          ellipse at center,
          color-mix(in srgb, var(--primary) 8%, var(--bg)) 0%,
          var(--bg) 70%
        );
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: opacity var(--dur-cinematic) var(--ease-out);
      }
      .cd-pill {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: clamp(18rem, 32vw, 30rem);
        height: clamp(18rem, 32vw, 30rem);
        border-radius: 50%;
        background: color-mix(in srgb, var(--primary) 14%, rgba(0, 0, 0, 0.45));
        box-shadow:
          0 0 0 4px color-mix(in srgb, var(--primary) 55%, transparent),
          0 0 60px color-mix(in srgb, var(--primary) 35%, transparent),
          inset 0 0 40px color-mix(in srgb, var(--primary) 22%, transparent);
        animation: cdPopIn 260ms var(--ease-out) both;
      }
      .cd-pill.exit {
        animation: cdPopOut 240ms var(--ease-in-soft) forwards;
      }
      .cd-pill::before {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 4px solid color-mix(in srgb, var(--primary) 70%, transparent);
        animation: cdRingPulse 1s var(--ease-out) both;
        pointer-events: none;
      }
      .cd-num {
        position: relative;
        z-index: 1;
        font-size: clamp(10rem, 18vw, 22rem);
        font-weight: 900;
        color: var(--primary);
        line-height: 1;
        user-select: none;
        text-shadow: 0 0 32px
          color-mix(in srgb, var(--primary) 50%, transparent);
      }
      .cd-go {
        position: relative;
        z-index: 1;
        font-size: clamp(4rem, 8vw, 10rem);
        font-weight: 900;
        color: var(--primary);
        text-align: center;
        line-height: 1.2;
        animation:
          cdPopIn 280ms var(--ease-out) both,
          cdVoteGlow var(--dur-loop-glow) var(--ease-in-out) 280ms infinite;
        user-select: none;
      }

      /* ── Error box ── */
      #error-box {
        background: var(--accent-pink);
        color: var(--color-on-primary);
        padding: 12px 24px;
        border-radius: 999px;
        font-size: 1.2rem;
        font-weight: 700;
        margin: 12px 0;
        display: none;
        opacity: 0;
        transition: opacity 200ms ease;
        box-shadow: var(--shadow);
      }
      #error-box.success {
        background: #147a66;
      }

      /* ── Floating game controls (pause + exit) ── */
      /* ── Room code badge (host top-left) ── */
      /* Layout: gear sits in column 1; the back button and the room-code
       pill share column 2 stacked so they can crossfade in place when
       the host advances from the game-picker into a live room. */
      #top-left-bar {
        position: fixed;
        top: 16px;
        left: 20px;
        z-index: 50;
        display: flex;
        direction: ltr;
        align-items: center;
        gap: 10px;
        pointer-events: none;
      }
      #top-left-bar > * {
        pointer-events: auto;
      }
      .tlb-hidden {
        display: none !important;
      }

      /* In-game back button (lives inside #top-left-bar, swapped with the
       room-code pill on phase change). Mirrors the gear-btn aesthetic. */
      #back-btn {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--rad-pill);
        padding: var(--sp-2) var(--sp-5);
        font-size: 1.05rem;
        font-weight: 800;
        color: #ffffff;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
        cursor: pointer;
        box-shadow: none;
        backdrop-filter: blur(8px);
        letter-spacing: 0.02em;
        text-shadow: none;
        outline: none;
      }
      #back-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
        filter: none;
      }

      #room-code-pill {
        display: flex;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 12px;
        padding: 6px 14px 7px;
        box-shadow: none;
        backdrop-filter: blur(8px);
        flex-direction: column;
        align-items: center;
        gap: 1px;
        user-select: none;
      }
      #room-code-pill .rcp-label {
        font-size: 0.58rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.4);
        text-transform: uppercase;
        line-height: 1;
      }
      #room-code-pill .rcp-value {
        font-size: 1.15rem;
        font-weight: 900;
        color: var(--primary);
        letter-spacing: 0.18em;
        line-height: 1.15;
      }

      #game-controls {
        position: static;
        display: none;
        gap: 10px;
        align-items: center;
      }
      #game-controls button {
        width: auto;
        min-height: 44px;
        font-size: 1rem;
        padding: 10px 16px;
        margin: 0;
        border-radius: 999px;
        font-weight: 800;
        border: none;
        cursor: pointer;
        box-shadow: var(--shadow-floating-btn);
        transition: all var(--dur-fast) var(--ease-out);
      }
      #game-controls button:hover {
        transform: translateY(-2px) scale(1.05);
      }
      #pause-btn {
        background: var(--color-pause-btn);
        color: var(--color-on-primary);
        backdrop-filter: blur(6px);
      }
      #exit-btn {
        background: var(--color-exit-btn);
        color: var(--color-on-primary);
        backdrop-filter: blur(6px);
      }

      /* ── Pause overlay ── */
      #pause-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 80;
        background: var(--color-overlay-pause-soft);
        backdrop-filter: blur(8px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
      }
      #pause-overlay .pause-icon {
        font-size: 5rem;
      }
      #pause-overlay h2 {
        font-size: 3rem;
        font-weight: 900;
        color: var(--color-on-primary);
      }
      #pause-overlay p {
        font-size: 1.4rem;
        color: var(--color-overlay-on-dark-text);
      }
      #pause-overlay button {
        background: var(--color-overlay-glass);
        color: var(--text);
        font-size: 1.6rem;
        padding: 18px 56px;
        border-radius: 999px;
        border: none;
        cursor: pointer;
        font-weight: 800;
        box-shadow: var(--shadow-lg);
        margin: 0;
      }

      /* ── Exit confirm modal ── */
      #exit-confirm {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 90;
        background: var(--color-overlay-pause-deep);
        backdrop-filter: blur(8px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 40px;
      }
      #exit-confirm .exit-card {
        /* Solid, opaque surface — the translucent glass let the blurred
           game bleed through and washed out the warning text. */
        background: var(--card);
        border-radius: 32px;
        padding: 48px 52px;
        text-align: center;
        max-width: 500px;
        width: 100%;
        box-shadow: var(--shadow-lg);
      }
      #exit-confirm h2 {
        font-size: 2rem;
        font-weight: 900;
        color: var(--text);
        margin-bottom: 12px;
      }
      #exit-confirm p {
        font-size: 1.2rem;
        color: var(--muted);
        margin-bottom: 28px;
        line-height: 1.6;
      }
      .exit-actions {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
      }
      .exit-actions button {
        font-size: 1.3rem;
        padding: 16px 36px;
        border-radius: 999px;
        border: none;
        cursor: pointer;
        font-weight: 800;
        margin: 0;
        transition: all var(--dur-fast) var(--ease-out);
      }
      .exit-actions button:hover {
        transform: translateY(-2px);
      }
      .btn-exit-confirm {
        background: var(--accent-pink);
        color: var(--color-on-primary);
        box-shadow: var(--shadow-exit-confirm);
      }
      .btn-exit-cancel {
        background: var(--color-surface-2);
        color: var(--text);
      }

      /* ── Mobile: rotate-to-landscape banner (slim, dismissible) ──────────────
       Was a full-screen dark overlay; now a non-blocking pill at the bottom
       of the viewport so the host can keep using the lobby in portrait. */
      #rotate-overlay {
        display: none;
        position: fixed;
        left: 50%;
        bottom: calc(76px + var(--safe-bot, 0px));
        transform: translateX(-50%);
        z-index: 60;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 8px 14px 8px 16px;
        background: var(--color-overlay-pause-soft);
        color: var(--color-on-dark);
        border-radius: var(--rad-pill);
        box-shadow: var(--shadow-floating-btn);
        font-size: 0.95rem;
        font-weight: 700;
        width: calc(100vw - 24px);
        max-width: 440px;
        backdrop-filter: blur(6px);
      }
      #rotate-overlay.show {
        display: inline-flex;
      }
      #rotate-overlay .rotate-icon {
        font-size: 1.1rem;
        animation: tilt var(--dur-loop-confetti) var(--ease-in-out) infinite
          alternate;
        transform-origin: center;
      }
      @keyframes tilt {
        from {
          transform: rotate(-12deg);
        }
        to {
          transform: rotate(12deg);
        }
      }
      #rotate-overlay .rotate-text {
        flex: 1;
        min-width: 0;
        line-height: 1.3;
        color: var(--color-on-dark);
      }
      #rotate-overlay .rotate-dismiss {
        background: var(--color-overlay-on-dark-soft);
        color: var(--color-on-dark);
        border: none;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        font-size: 0.95rem;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      #rotate-overlay .rotate-dismiss:hover {
        background: var(--color-overlay-on-dark-mid);
      }

      /* ── Fullscreen toggle (mobile / touch only) ──────────────────────────
       Shown whenever JS marks the document as touch-capable (.is-touch),
       regardless of orientation, so landscape phone hosts can also hide
       browser chrome. Hidden by default on non-touch desktops. */
      #fullscreen-btn {
        display: none;
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 55;
        background: var(--card);
        border: none;
        border-radius: var(--rad-pill);
        padding: 8px 12px;
        font-size: 1.1rem;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        font-family: inherit;
        line-height: 1;
      }
      body.is-touch #fullscreen-btn {
        display: inline-flex;
      }
      /* Inside the native app the surface is already fullscreen, so this
         browser-UI toggle is redundant leftover — hide it in the app only.
         (`html.native` is set by native-env.js; the web keeps the button.) */
      html.native #fullscreen-btn {
        display: none !important;
      }
      #fullscreen-btn:hover {
        transform: scale(1.06);
      }
      /* ── Host mobile-portrait layout overrides ─────────────────────────────
       Triggered when JS adds .host-mobile-portrait to <body> for narrow
       portrait touch viewports. Stacks lobby vertically, shrinks the QR,
       and gives the room code priority. */
      body.host-mobile-portrait {
        padding: var(--sp-3) var(--sp-3)
          calc(var(--sp-7) + var(--safe-bot, 0px));
      }
      body.host-mobile-portrait .lobby-hero {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
        margin: var(--sp-2) auto var(--sp-3);
      }
      body.host-mobile-portrait .lobby-hero-right {
        order: -1;
      }
      /* Joining takes priority over the optional orientation hint. */
      body.lobby-phase #rotate-overlay {
        display: none !important;
      }
      body.host-mobile-portrait .lobby-qr-card {
        padding: var(--sp-3);
      }
      body.host-mobile-portrait .lobby-qr-card img,
      body.host-mobile-portrait .lobby-qr-card canvas {
        width: clamp(200px, 56vw, 280px) !important;
        height: clamp(200px, 56vw, 280px) !important;
      }
      body.host-mobile-portrait .lobby-qr-caption {
        font-size: 0.85rem;
        max-width: 200px;
      }
      body.host-mobile-portrait .lobby-eyebrow {
        font-size: 0.85rem;
        padding: 2px var(--sp-3);
      }
      body.host-mobile-portrait .lobby-code-label {
        font-size: 0.9rem;
      }
      body.host-mobile-portrait .lobby-code {
        font-size: clamp(3.4rem, 18vw, 5.4rem);
        letter-spacing: 0.12em;
        margin: var(--sp-1) 0 var(--sp-2);
      }
      body.host-mobile-portrait .lobby-url-pill {
        font-size: 0.85rem;
        padding: var(--sp-2) var(--sp-3);
        gap: var(--sp-2);
        max-width: 100%;
      }
      body.host-mobile-portrait .lobby-url-hint {
        font-size: 0.78rem;
      }
      body.host-mobile-portrait .lobby-roster-wrap {
        margin-top: 0;
      }
      body.host-mobile-portrait .lobby-roster-title {
        font-size: 1rem;
        margin-bottom: var(--sp-2);
      }
      body.host-mobile-portrait .lobby-chips {
        gap: var(--sp-2);
        justify-content: flex-start;
        max-height: 38vh;
        overflow-y: auto;
        padding-bottom: var(--sp-2);
      }
      body.host-mobile-portrait .lobby-chip {
        font-size: 0.95rem;
        padding: 6px var(--sp-3) 6px 6px;
        gap: var(--sp-2);
      }
      body.host-mobile-portrait .lobby-chip-avatar {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
      }
      body.host-mobile-portrait .lobby-empty {
        padding: var(--sp-4) var(--sp-3);
        font-size: 1rem;
      }
      body.host-mobile-portrait .lobby-footer {
        margin-top: var(--sp-3);
      }
      body.host-mobile-portrait .lobby-status {
        font-size: 0.9rem;
      }
      body.host-mobile-portrait #top-left-bar {
        top: 12px;
        left: 12px;
      }

      /* ── Custom-Questions Hub on phone-portrait ──────────────────────────── */
      body.host-mobile-portrait #cqhub-overlay {
        padding: var(--sp-3) var(--sp-3)
          calc(var(--sp-7) + var(--safe-bot, 0px));
      }
      body.host-mobile-portrait .cqhub-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
      }
      body.host-mobile-portrait .cqhub-card {
        padding: var(--sp-4);
      }
      body.host-mobile-portrait .cqhub-card-name {
        font-size: 1.2rem;
      }
      body.host-mobile-portrait .cqhub-card-icon {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
      }
      body.host-mobile-portrait .cqhub-card-desc {
        font-size: 0.9rem;
      }
      body.host-mobile-portrait .cqhub-editor-head {
        padding: var(--sp-3) var(--sp-4);
        margin-bottom: var(--sp-3);
        flex-wrap: wrap;
      }
      body.host-mobile-portrait .cqhub-editor-title {
        font-size: 1.15rem;
      }
      body.host-mobile-portrait .cqhub-composer {
        padding: var(--sp-4);
        margin-bottom: var(--sp-3);
      }
      body.host-mobile-portrait .cqhub-comp-tab {
        font-size: 0.9rem;
        padding: var(--sp-2) var(--sp-3);
      }
      body.host-mobile-portrait .cqhub-input-wrap textarea,
      body.host-mobile-portrait #cqhub-bulk textarea {
        font-size: 1rem;
        padding: var(--sp-3) var(--sp-3) var(--sp-5);
      }
      body.host-mobile-portrait .cqhub-row {
        padding: var(--sp-2) var(--sp-3);
        gap: var(--sp-2);
        flex-wrap: wrap;
      }
      body.host-mobile-portrait .cqhub-row .cqhub-row-text {
        font-size: 0.95rem;
      }
      body.host-mobile-portrait .cqhub-beta {
        font-size: 0.9rem;
        padding: var(--sp-3);
        margin-bottom: var(--sp-3);
      }
      body.host-mobile-portrait .cqhub-locked {
        padding: var(--sp-5) var(--sp-3);
      }
      body.host-mobile-portrait .cqhub-locked-title {
        font-size: 1.15rem;
      }
      body.host-mobile-portrait .cqhub-locked-text {
        font-size: 0.95rem;
      }
      body.host-mobile-portrait .cqhub-percent-row {
        flex-wrap: wrap;
      }
      body.host-mobile-portrait .cqhub-percent-row input[type="range"] {
        min-width: 100%;
      }

      /* ── In-game phases on phone-portrait ────────────────────────────────────
       Same `.host-mobile-portrait` body class added in Task #15. Shrinks
       prompts, stacks duel arenas, compresses podium/results, and keeps
       the floating room-code pill + game controls reachable. */
      body.host-mobile-portrait #app {
        padding-top: var(
          --sp-7
        ); /* breathing room under the floating top bar */
      }
      /* Headers, prompts, counters */
      body.host-mobile-portrait .prompt-text {
        font-size: clamp(1.15rem, 4.6vw, 1.6rem) !important;
        padding: var(--sp-4) var(--sp-4);
        border-radius: 20px;
        margin-bottom: var(--sp-3);
        line-height: 1.35;
      }
      body.host-mobile-portrait .label,
      body.host-mobile-portrait .label.label-verb {
        font-size: 1rem;
        margin-bottom: var(--sp-2);
      }
      body.host-mobile-portrait .small-label {
        font-size: 0.95rem;
        margin-bottom: var(--sp-1);
      }
      body.host-mobile-portrait .counter {
        font-size: 1.15rem;
        margin: var(--sp-2) 0;
      }
      body.host-mobile-portrait .round-badge {
        font-size: 0.9rem;
        padding: 5px 16px;
        margin-bottom: var(--sp-2);
      }
      body.host-mobile-portrait .duel-chip {
        font-size: 0.85rem;
        padding: 5px 12px;
        margin-bottom: var(--sp-2);
      }
      body.host-mobile-portrait .duel-chip .duel-chip-dot {
        width: 8px;
        height: 8px;
        box-shadow: 0 0 0 3px var(--color-primary-ring);
      }
      body.host-mobile-portrait #app button {
        font-size: 1.05rem;
        padding: var(--sp-3) var(--sp-5);
      }

      /* Portrait web hosts need a second header row: fullscreen otherwise
         covers Settings and the corner controls obscure the brand mark. */
      body.host-mobile-portrait.select-phase .page-header { padding-top: 76px; }
      body.host-mobile-portrait.select-phase #fullscreen-btn {
        top: 100px;
        right: 12px;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        align-items: center;
        justify-content: center;
      }
      body.host-mobile-portrait.select-phase #top-left-bar #gear-btn {
        white-space: nowrap;
        font-size: .9rem;
        padding: 8px 12px;
      }

      /* Image cards already budget the picker gap; generic button margins
         and portrait padding must not enlarge the three-column row. */
      body.host-mobile-portrait.select-phase #app .btn-game-pick {
        margin: 0;
        padding: 0;
        font-size: 0;
      }

      /* Player chips & roster */
      body.host-mobile-portrait .players-grid {
        gap: 8px;
        margin: var(--sp-3) 0;
      }
      body.host-mobile-portrait .player-chip {
        font-size: 0.95rem;
        padding: 6px var(--sp-4);
      }

      /* Answer timer */
      body.host-mobile-portrait .answer-timer {
        font-size: 1rem;
        padding: 6px 14px;
      }

      /* شطحات duel arena — stack vertically with a smaller VS pip in the middle */
      body.host-mobile-portrait .duel-arena {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: var(--sp-2) 0;
        direction: rtl;
      }
      body.host-mobile-portrait .duel-side {
        padding: var(--sp-4) var(--sp-4);
        border-radius: 20px;
        min-height: 0;
        gap: 10px;
      }
      body.host-mobile-portrait .duel-side::before {
        height: 5px;
        border-radius: 20px 20px 0 0;
      }
      body.host-mobile-portrait .duel-side .duel-badge {
        width: 38px;
        height: 38px;
        font-size: 1.05rem;
        top: 10px;
        right: 10px;
      }
      body.host-mobile-portrait .duel-side .duel-name {
        font-size: 0.85rem;
        padding-right: 48px;
      }
      body.host-mobile-portrait .duel-side .duel-answer {
        font-size: 1.15rem;
        line-height: 1.35;
      }
      body.host-mobile-portrait .duel-side .duel-stat {
        font-size: 0.9rem;
        padding-top: 6px;
      }
      body.host-mobile-portrait .duel-tally {
        height: 9px;
      }
      body.host-mobile-portrait .duel-tally-label {
        font-size: 0.8rem;
      }
      body.host-mobile-portrait .duel-vs {
        width: 52px;
        height: 52px;
        font-size: 1.05rem;
        margin: -6px auto;
      }
      body.host-mobile-portrait .duel-vs::before {
        inset: -8px;
      }
      body.host-mobile-portrait .duel-side.winner {
        transform: translateY(-2px) scale(1.01);
      }
      body.host-mobile-portrait .duel-judge-progress {
        margin-top: var(--sp-3);
        padding: 7px 12px;
        gap: 10px;
      }
      body.host-mobile-portrait .duel-judge-progress .djp-label {
        font-size: 0.85rem;
      }
      body.host-mobile-portrait .duel-judge-progress .djp-bar {
        height: 7px;
      }
      body.host-mobile-portrait .sweep-banner {
        font-size: 1rem;
        padding: 8px 16px;
        margin-bottom: 10px;
      }

      /* شطحات final round — single column cards */
      body.host-mobile-portrait .final-answers-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      body.host-mobile-portrait .final-answer-card {
        padding: 14px 14px;
        border-radius: 16px;
        gap: 6px;
      }
      body.host-mobile-portrait .final-answer-card .fa-num {
        font-size: 0.95rem;
      }
      body.host-mobile-portrait .final-answer-card .fa-author {
        font-size: 0.95rem;
      }
      body.host-mobile-portrait .final-answer-card .fa-text {
        font-size: 1.05rem;
        line-height: 1.4;
      }
      body.host-mobile-portrait .final-answer-card .fa-stat,
      body.host-mobile-portrait .final-answer-card .fa-tally {
        font-size: 0.85rem;
      }

      /* تكذبني — perform banner, verdict frame, result grid */
      body.host-mobile-portrait .perform-banner {
        font-size: 1.05rem;
        padding: var(--sp-4) var(--sp-4);
        border-radius: 20px;
        line-height: 1.5;
        margin: var(--sp-2) 0;
      }
      body.host-mobile-portrait .perform-banner .icon {
        font-size: 2rem;
        margin-bottom: 6px;
      }
      body.host-mobile-portrait .faker-verdict-frame {
        padding: var(--sp-3) var(--sp-4);
        border-radius: 20px;
      }
      body.host-mobile-portrait .verdict {
        font-size: 1.6rem;
        margin: 8px 0;
      }
      body.host-mobile-portrait .faker-verdict-frame .verdict-eyebrow {
        font-size: 0.85rem;
      }
      body.host-mobile-portrait .faker-verdict-frame .verdict-sub {
        font-size: 0.95rem;
      }
      body.host-mobile-portrait .player-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: var(--sp-3) 0;
      }
      body.host-mobile-portrait .result-card {
        padding: 14px 12px;
        border-radius: 18px;
      }
      body.host-mobile-portrait .result-card .name {
        font-size: 1.05rem;
        margin-bottom: 4px;
      }
      body.host-mobile-portrait .result-card .vote-count {
        font-size: 0.9rem;
      }
      body.host-mobile-portrait .result-card .tag {
        font-size: 0.78rem;
        padding: 3px 10px;
        margin-top: 5px;
      }

      /* خلاط — host prompt, submitted bar, blender */
      body.host-mobile-portrait .khallat-host-prompt {
        font-size: 1.15rem;
        padding: var(--sp-5) var(--sp-4);
        margin: var(--sp-3) auto var(--sp-4);
      }
      body.host-mobile-portrait .khallat-submitted-bar {
        font-size: 1rem;
        padding: 8px var(--sp-4);
      }
      body.host-mobile-portrait .blender-icon {
        font-size: 4.6rem;
      }
      body.host-mobile-portrait .blender-text {
        font-size: 1.8rem;
        margin-top: 10px;
      }
      body.host-mobile-portrait .blender-progress {
        width: 80%;
      }

      /* Podium (per-round LEADERBOARD) */
      body.host-mobile-portrait .podium-title {
        font-size: 1.5rem;
        margin-bottom: 4px;
      }
      body.host-mobile-portrait .podium-subtitle {
        font-size: 0.95rem;
        margin-bottom: 12px;
      }
      body.host-mobile-portrait .podium-stage {
        height: 200px;
        gap: 6px;
      }
      body.host-mobile-portrait .podium-bar-wrap {
        min-width: 50px;
        max-width: 100px;
      }
      body.host-mobile-portrait .podium-name {
        font-size: 0.85rem;
        margin-bottom: 2px;
      }
      body.host-mobile-portrait .podium-score {
        font-size: 0.78rem;
        margin-bottom: 3px;
      }
      body.host-mobile-portrait .podium-rank {
        font-size: 1.1rem;
        margin-bottom: 2px;
      }
      body.host-mobile-portrait .delta-badge {
        font-size: 0.7rem;
        padding: 1px 7px;
      }

      /* Leaderboard on mobile portrait */
      body.host-mobile-portrait .lb-main {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      body.host-mobile-portrait .lb-podium-col {
        flex: none;
      }
      body.host-mobile-portrait .lb-podium-wrap {
        padding-top: calc(53% + 130px);
      }
      body.host-mobile-portrait .lb-podium-av {
        width: 40px;
        height: 40px;
      }
      body.host-mobile-portrait .lb-podium-name {
        font-size: 0.85rem;
      }
      body.host-mobile-portrait .lb-podium-score {
        font-size: 0.62rem;
        padding: 1px 7px;
      }
      body.host-mobile-portrait .lb-pill-row {
        min-height: 36px;
      }
      body.host-mobile-portrait .lb-pill-row.r-gold {
        min-height: 42px;
      }
      body.host-mobile-portrait .lb-pill-row.r-silver {
        min-height: 40px;
      }
      body.host-mobile-portrait .lb-pill-row.r-bronze {
        min-height: 38px;
      }
      body.host-mobile-portrait .lb-pill-av {
        width: 24px;
        height: 24px;
      }
      body.host-mobile-portrait .lb-pill-name {
        font-size: 0.8rem;
      }
      body.host-mobile-portrait .lb-pill-score {
        font-size: 0.68rem;
        padding: 2px 7px;
      }
      body.host-mobile-portrait .tie-avatar {
        width: 50px;
        height: 50px;
      }

      /* Final leaderboard champion banner */
      body.host-mobile-portrait .champion-banner {
        font-size: 1.8rem;
        margin: 8px 0 2px;
      }
      body.host-mobile-portrait .champion-sub {
        font-size: 1rem;
        margin-bottom: 12px;
      }
      body.host-mobile-portrait .confetti {
        width: 10px;
        height: 14px;
      }

      /* Tie split-screen */
      body.host-mobile-portrait .tie-title {
        font-size: 1.5rem;
        margin-bottom: 4px;
      }
      body.host-mobile-portrait .tie-subtitle {
        font-size: 0.95rem;
        margin-bottom: 12px;
      }
      body.host-mobile-portrait .tie-arena {
        min-height: 220px;
        margin-bottom: 16px;
        border-radius: 18px;
      }
      body.host-mobile-portrait .tie-side {
        padding: 26px 14px;
        gap: 6px;
      }
      body.host-mobile-portrait .tie-side.tie-left {
        padding-left: 50px;
      }
      body.host-mobile-portrait .tie-side.tie-right {
        padding-right: 50px;
      }
      body.host-mobile-portrait .tie-player-rank {
        font-size: 2rem;
      }
      body.host-mobile-portrait .tie-player-name {
        font-size: 1.05rem;
      }
      body.host-mobile-portrait .tie-player-score {
        font-size: 0.85rem;
      }
      body.host-mobile-portrait .tie-player-delta {
        font-size: 0.78rem;
        padding: 2px 9px;
      }
      body.host-mobile-portrait .tie-vs-badge {
        width: 54px;
        height: 54px;
        font-size: 0.72rem;
      }
      body.host-mobile-portrait .tie-rest-stage {
        height: 170px;
        gap: 6px;
        margin-bottom: 14px;
      }

      /* نسبة وتناسب — bars, voter rows, target points */
      body.host-mobile-portrait .nesba-bar-wrap {
        margin: 18px auto 12px;
      }
      body.host-mobile-portrait .nesba-bar {
        height: 22px;
      }
      body.host-mobile-portrait .nesba-bar-labels {
        font-size: 0.9rem;
        gap: 8px;
        margin-top: 10px;
      }
      body.host-mobile-portrait .nesba-target-pts {
        font-size: 1.1rem;
        margin: 12px 0 8px;
      }
      body.host-mobile-portrait .nesba-voter-row {
        padding: 6px 10px;
        font-size: 0.9rem;
        gap: 8px;
      }
      body.host-mobile-portrait .nesba-voter-row .nv-pts {
        min-width: 44px;
      }

      /* Floating game controls — keep reachable above the iOS home bar */
      body.host-mobile-portrait #game-controls {
        bottom: calc(12px + var(--safe-bot, 0px));
        left: 12px;
        gap: 8px;
      }
      body.host-mobile-portrait #game-controls button {
        font-size: 0.95rem;
        padding: 9px 16px;
      }
      /* Top-left room-code pill stays visible — already pinned by base rule */
      body.host-mobile-portrait #room-code-pill {
        padding: 5px 10px 6px;
      }
      body.host-mobile-portrait #room-code-pill .rcp-value {
        font-size: 1rem;
        letter-spacing: 0.14em;
      }
      body.host-mobile-portrait #room-code-pill .rcp-label {
        font-size: 0.55rem;
      }

      /* Spotlight cinematic reveal (شطحات / خلاط results) */
      body.host-mobile-portrait .spotlight-wrap {
        gap: 14px;
      }
      body.host-mobile-portrait .spotlight-counter-label {
        font-size: 0.95rem;
      }
      body.host-mobile-portrait .spotlight-card {
        border-radius: 24px;
        padding: var(--sp-5) var(--sp-4);
      }
      body.host-mobile-portrait .spotlight-text {
        font-size: 1.4rem;
        margin-bottom: 12px;
        line-height: 1.35;
      }
      body.host-mobile-portrait .spotlight-author {
        font-size: 1rem;
      }
      body.host-mobile-portrait .spotlight-votes {
        font-size: 0.9rem;
        margin-bottom: 10px;
      }
      body.host-mobile-portrait .spotlight-votes .badge {
        font-size: 0.85rem;
        padding: 3px 12px;
      }
      body.host-mobile-portrait .spotlight-prompt {
        font-size: 0.9rem;
        padding: 8px 14px;
        margin-bottom: 12px;
      }
      body.host-mobile-portrait .winner-crown {
        font-size: 1.8rem;
        margin-bottom: 6px;
      }

      /* ── Responsive tweaks for landscape phone ── */
      @media (max-width: 768px) {
        body {
          padding: var(--sp-3) var(--sp-4) var(--sp-5);
        }
        .prompt-text {
          padding: var(--sp-5) var(--sp-5);
        }
        .game-picker {
          gap: var(--sp-3);
        }
        .btn-game-pick {
          min-width: 200px;
          padding: var(--sp-6) var(--sp-5);
        }
        .podium-stage {
          height: 220px;
        }
      }
      /* ── Main Menu Overlay ──────────────────────────────────────────────────── */
      #main-menu {
        position: fixed;
        inset: 0;
        z-index: 200;
        background: var(--bg);
        display: flex;
        flex-direction: column;
        align-items: center;
        opacity: 1;
        transition: opacity var(--dur-medium) var(--ease-out);
      }
      #main-menu.hidden {
        opacity: 0;
        pointer-events: none;
      }
      .mm-spacer-top {
        flex: 0.75;
        min-height: var(--sp-5);
      }
      .mm-spacer-mid {
        flex: 0.22;
        min-height: var(--sp-4);
      }
      .mm-spacer-bot {
        flex: 1;
        min-height: var(--sp-5);
      }
      .mm-logo {
        height: clamp(110px, 16vw, 200px);
        width: auto;
      }
      .mm-tagline {
        font-size: clamp(1.05rem, 1.6vw, 1.4rem);
        font-weight: 700;
        color: var(--color-text-soft);
        margin-top: clamp(var(--sp-2), 1.2vw, var(--sp-3));
        opacity: 0.85;
      }
      .mm-buttons {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        width: clamp(260px, 38vw, 460px);
      }
      .btn-mm-play {
        background: var(--primary);
        color: var(--color-on-primary);
        border: none;
        font-family: inherit;
        font-size: clamp(1.9rem, 3vw, 2.8rem);
        font-weight: 900;
        padding: clamp(22px, 2.5vw, 32px) var(--sp-7);
        border-radius: var(--rad-pill);
        cursor: pointer;
        box-shadow:
          0 4px 0 #b36e00,
          0 6px 24px rgba(229, 141, 0, 0.4);
        transition: all var(--dur-base) var(--ease-bounce);
      }
      .btn-mm-play:hover {
        transform: translateY(-3px) scale(1.03);
      }
      .btn-mm-play:active {
        transform: scale(0.97);
      }
      .btn-mm-settings {
        background: var(--card);
        color: var(--text);
        border: none;
        font-family: inherit;
        font-size: clamp(1.5rem, 2.2vw, 2.1rem);
        font-weight: 800;
        padding: clamp(16px, 2vw, 24px) var(--sp-7);
        border-radius: var(--rad-pill);
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        transition: all var(--dur-base) var(--ease-out);
      }
      .btn-mm-settings:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
      }
      .btn-mm-settings:active {
        transform: scale(0.97);
      }

      /* ═══════════════════════════════════════════════════════════════════════
         MAIN MENU — exact Figma "Home" replica
         Assets exported directly from Figma file ZA46ezKmRLS0yTaBo8b8lx
         ═══════════════════════════════════════════════════════════════════════ */
      #main-menu {
        background-color: #071523;
        background-image: var(--mj-art-home);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;
      }

      /* Blue ambient glow ellipses (Figma layers 21:1922 & 21:1923) */
      .mm-glow {
        position: absolute;
        border-radius: 50%;
        background: rgba(0, 93, 161, 0.55);
        filter: blur(160px);
        pointer-events: none;
        z-index: 0;
      }
      .mm-glow-top {
        width: clamp(380px, 52vw, 860px);
        height: clamp(380px, 52vw, 860px);
        top: -28%;
        right: -12%;
      }
      .mm-glow-bot {
        width: clamp(420px, 58vw, 920px);
        height: clamp(420px, 58vw, 920px);
        bottom: -28%;
        left: -12%;
      }
      /* All children above glow divs */
      #main-menu
        > *:not(.mm-glow):not(.btn-mm-mute):not(.btn-mm-exit):not(.mm-auth):not(.mj-feedback-link) {
        position: relative;
        z-index: 1;
      }
      #main-menu .btn-mm-mute,
      #main-menu .btn-mm-exit,
      #main-menu .mm-auth {
        z-index: 3;
      }

      /* ── Transparent Arabic Majlis wordmark ───────────────────────────── */
      #main-menu .mm-logo {
        width: min(680px, 76vw);
        height: auto;
        margin-top: -1.4vh; /* nudge the logo a touch higher */
      }
      .mm-tagline {
        display: none;
      } /* baked into logo image */

      /* ── Shared button font — IBM Plex Sans Arabic Bold (Figma font) ───── */
      #main-menu .btn-mm-play,
      #main-menu .btn-mm-store,
      #main-menu .btn-mm-questions,
      #main-menu .btn-mm-settings,
      .btn-mm-mute,
      .btn-mm-exit {
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
        font-weight: 700;
        color: #ffffff;
        border: none;
        cursor: pointer;
        border-radius: var(--rad-pill);
        transition:
          transform 0.12s var(--ease-bounce),
          filter 0.12s;
      }
      .mj-icon {
        display: inline-block;
        width: 1.05em;
        height: 1.05em;
        flex: 0 0 auto;
        vertical-align: -0.14em;
        background: currentColor;
        -webkit-mask: var(--mj-icon) center / contain no-repeat;
        mask: var(--mj-icon) center / contain no-repeat;
      }
      .mj-icon-play { --mj-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }
      .mj-icon-store { --mj-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h2l2.2 10.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L21 8H7M10 21a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m7 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3'/%3E%3C/svg%3E"); }
      .mj-icon-edit { --mj-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 16.5-.8 4.3 4.3-.8L19 8.5 15.5 5zM17 3.5 20.5 7l1-1a2.1 2.1 0 0 0-3.5-3.5z'/%3E%3C/svg%3E"); }
      .mj-icon-settings { --mj-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.1 13a7 7 0 0 0 0-2l2-1.6-2-3.4-2.5 1a8 8 0 0 0-1.7-1L14.5 3h-5L9 6a8 8 0 0 0-1.7 1L4.8 6l-2 3.4 2 1.6a7 7 0 0 0 0 2l-2 1.6 2 3.4 2.5-1a8 8 0 0 0 1.7 1l.5 3h5l.5-3a8 8 0 0 0 1.7-1l2.5 1 2-3.4zM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7'/%3E%3C/svg%3E"); }
      .mj-icon-sound { --mj-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9zm12.5-1.5a6 6 0 0 1 0 9l1.5 1.5a8 8 0 0 0 0-12zm-1.8 2a3.5 3.5 0 0 1 0 5l1.5 1.5a5.5 5.5 0 0 0 0-8z'/%3E%3C/svg%3E"); }
      .mj-icon-user { --mj-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10M3 22a9 9 0 0 1 18 0z'/%3E%3C/svg%3E"); }
      .mj-icon-receipt { --mj-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2h14v20l-3-2-2 2-2-2-2 2-2-2-3 2zm3 5v2h8V7zm0 4v2h8v-2zm0 4v2h6v-2z'/%3E%3C/svg%3E"); }
      .mm-mute-icon.is-muted { opacity: 0.45; }

      /* ── Cartoon outline helper — white text with dark stroke (Figma style) */
      #main-menu .btn-mm-play,
      #main-menu .btn-mm-store,
      #main-menu .btn-mm-questions,
      #main-menu .btn-mm-settings {
        text-shadow:
          -2px -2px 0 #1a0a00,
          2px -2px 0 #1a0a00,
          -2px 2px 0 #1a0a00,
          2px 2px 0 #1a0a00;
        /* Dark outline border + 3D drop shadow (Figma button style) */
        outline: 3px solid #1a0a00;
        outline-offset: 0;
        box-shadow:
          0 5px 0 #1a0a00,
          0 8px 32px rgba(0, 0, 0, 0.45),
          0 2px 8px rgba(0, 0, 0, 0.3);
      }
      #main-menu .btn-mm-play:hover,
      #main-menu .btn-mm-store:hover,
      #main-menu .btn-mm-questions:hover,
      #main-menu .btn-mm-settings:hover {
        transform: translateY(-2px);
        filter: brightness(1.1);
      }
      #main-menu .btn-mm-play:active,
      #main-menu .btn-mm-store:active,
      #main-menu .btn-mm-questions:active,
      #main-menu .btn-mm-settings:active {
        transform: translateY(3px);
        box-shadow: 0 2px 0 #1a0a00;
      }

      /* ── Play button — amber #E58D00 (Figma node I21:1037;2:234) ────────── */
      #main-menu .btn-mm-play {
        background: #e58d00;
        font-size: clamp(1.9rem, 3vw, 2.8rem);
        padding: clamp(20px, 2.2vw, 30px) var(--sp-7);
      }

      /* ── Store button — teal-blue #0F597B (Figma node 57:1679) ─────────── */
      #main-menu .btn-mm-store {
        background: #0f597b;
        font-size: clamp(1.5rem, 2.2vw, 2.1rem);
        padding: clamp(16px, 1.8vw, 24px) var(--sp-7);
      }

      /* ── Side-by-side row (اسئلتي + الاعدادات) ──────────────────────────── */
      .mm-row {
        display: flex;
        gap: var(--sp-3);
        width: 100%;
      }
      .mm-row button {
        flex: 1;
      }

      #main-menu .btn-mm-questions,
      #main-menu .btn-mm-settings {
        background: #0f597b;
        font-size: clamp(1.1rem, 1.7vw, 1.55rem);
        padding: clamp(12px, 1.5vw, 20px) var(--sp-4);
      }

      /* ── Mute button — subdued teal-blue, matches the secondary button
         family (#0F597B) so this tertiary control recedes instead of
         popping as a bright sky-blue. ──────────────────────────────────── */
      .btn-mm-mute {
        position: absolute;
        top: clamp(var(--sp-5), 3vw, var(--sp-7));
        right: clamp(var(--sp-5), 3vw, var(--sp-7));
        background: #0f597b;
        padding: var(--sp-3) var(--sp-5);
        font-size: clamp(0.95rem, 1.4vw, 1.2rem);
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        outline: 3px solid #1a0a00;
        box-shadow: 0 4px 0 #1a0a00;
        text-shadow:
          -1px -1px 0 #1a0a00,
          1px -1px 0 #1a0a00,
          -1px 1px 0 #1a0a00,
          1px 1px 0 #1a0a00;
        z-index: 2;
      }
      .btn-mm-mute:hover {
        filter: brightness(1.1);
        transform: translateY(-1px);
      }
      .btn-mm-mute:active {
        transform: translateY(3px);
        box-shadow: 0 1px 0 #1a0a00;
      }

      /* ── Exit button — bottom-left (Figma node 69:2292) ────────────────── */
      .btn-mm-exit {
        position: absolute;
        top: clamp(var(--sp-5), 3vw, var(--sp-7));
        left: clamp(var(--sp-5), 3vw, var(--sp-7));
        background: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.85);
        padding: var(--sp-3) var(--sp-5);
        font-size: clamp(0.9rem, 1.3vw, 1.15rem);
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        backdrop-filter: blur(6px);
        z-index: 2;
      }
      .btn-mm-exit:hover {
        background: rgba(255, 255, 255, 0.22);
        color: #fff;
      }

      /* ── Auth pill on dark bg (Figma node 21:1043 — #B03744 avatar) ────── */
      #main-menu .mm-user-pill {
        background: #7b1f2e;
        box-shadow: 0 3px 0 #1a0a00;
        outline: 2.5px solid #1a0a00;
      }
      #main-menu .mm-user-pill .mm-user-name {
        color: #ffffff;
        text-shadow:
          -1px -1px 0 #1a0a00,
          1px -1px 0 #1a0a00,
          -1px 1px 0 #1a0a00,
          1px 1px 0 #1a0a00;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
      }
      #main-menu .mm-user-pill .mm-user-avatar {
        background: #b03744;
        outline: 2px solid #1a0a00;
      }
      #main-menu .btn-mm-signin {
        background: #7b1f2e;
        color: #ffffff;
        outline: 2.5px solid #1a0a00;
        box-shadow: 0 3px 0 #1a0a00;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
      }
      #main-menu .btn-mm-signin:hover {
        filter: brightness(1.15);
      }

      /* ── Main Menu auth pill (sign-in / signed-in user) ─────────────────────── */
      .mm-auth {
        position: absolute;
        top: clamp(var(--sp-5), 3vw, var(--sp-7));
        left: clamp(var(--sp-5), 3vw, var(--sp-7));
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        min-height: 48px;
      }
      .btn-mm-signin {
        background: var(--card);
        color: var(--text);
        border: none;
        font-family: inherit;
        font-size: clamp(1.05rem, 1.5vw, 1.3rem);
        font-weight: 800;
        padding: var(--sp-3) var(--sp-5);
        border-radius: var(--rad-pill);
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        transition: all var(--dur-base) var(--ease-out);
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
      }
      .btn-mm-signin:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
      }
      .btn-mm-signin:active {
        transform: scale(0.97);
      }
      .btn-mm-signin .signin-icon {
        font-size: 1.2em;
      }
      .mm-user-pill {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-3);
        background: var(--card);
        border-radius: var(--rad-pill);
        padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-1);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      }
      .mm-user-pill .mm-user-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--primary);
        color: var(--color-on-primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 1.1rem;
        overflow: hidden;
        flex-shrink: 0;
      }
      .mm-user-pill .mm-user-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .mm-user-pill .mm-user-name {
        font-size: clamp(1rem, 1.4vw, 1.2rem);
        font-weight: 800;
        color: var(--text);
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .btn-mm-signout {
        background: transparent;
        color: var(--muted);
        border: none;
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 700;
        padding: var(--sp-1) var(--sp-3);
        border-radius: var(--rad-pill);
        cursor: pointer;
        transition: color var(--dur-base) var(--ease-out);
      }
      .btn-mm-signout:hover {
        color: var(--accent-pink);
      }
      /* ── Settings Overlay ───────────────────────────────────────────────────── */
      #settings-overlay {
        position: fixed;
        inset: 0;
        z-index: 210;
        background: var(--bg);
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        padding: var(--sp-6) var(--sp-7) var(--sp-8);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity var(--dur-base) var(--ease-out),
          visibility var(--dur-base);
      }
      #settings-overlay.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      /* Quiet, secondary mode-switch entry — muted tone, full-width tap target. */
      .btn-mode-switch {
        width: 100%;
        background: transparent;
        color: var(--muted);
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--rad-md);
        padding: var(--sp-3) var(--sp-5);
        font-size: 1.05rem;
        font-weight: 700;
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--sp-3);
        min-height: 48px;
        box-shadow: none;
        margin: 0;
        cursor: pointer;
        transition:
          background var(--dur-fast) var(--ease-out-soft),
          color var(--dur-fast) var(--ease-out-soft);
      }
      .btn-mode-switch:hover {
        background: var(--color-surface-2);
        color: var(--text);
        transform: none;
        box-shadow: none;
      }
      .btn-mode-switch:active {
        transform: scale(0.98);
      }
      /* Smooth in-app fade transition between mode views: outgoing fade-out
       before navigation, paired fade-in on the next page load. */
      body.mj-fade-out {
        opacity: 0;
        transition: opacity 200ms var(--ease-out-soft);
      }
      body.mj-fade-in {
        opacity: 0;
      }
      body.mj-fade-in.mj-fade-in-ready {
        opacity: 1;
        transition: opacity 220ms var(--ease-out-soft);
      }
      @media (prefers-reduced-motion: reduce) {
        body.mj-fade-out,
        body.mj-fade-in {
          opacity: 1 !important;
          transition: none !important;
        }
      }
      .settings-topbar {
        display: flex;
        align-items: center;
        gap: var(--sp-5);
        width: 100%;
        max-width: 820px;
        margin-bottom: var(--sp-6);
        justify-content: center;
      }
      #settings-overlay .settings-title {
        text-align: center;
      }
      .btn-back {
        position: fixed;
        top: 22px;
        left: 24px;
        z-index: 130;
        background: var(--card);
        border: none;
        border-radius: var(--rad-pill);
        padding: var(--sp-3) var(--sp-6);
        font-size: 1.3rem;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        color: var(--text);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        transition: all var(--dur-base) var(--ease-out);
      }
      .btn-back:hover {
        transform: translateY(-2px);
      }
      .settings-title {
        font-size: clamp(1.8rem, 2.8vw, 2.6rem);
        font-weight: 900;
      }
      .settings-section {
        width: 100%;
        max-width: 820px;
        margin-bottom: var(--sp-6);
      }
      .settings-section-title {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--muted);
        margin-bottom: var(--sp-3);
        text-align: right;
      }
      /* Toggle row */
      .toggle-row {
        background: var(--card);
        border-radius: var(--rad-lg);
        padding: var(--sp-4) var(--sp-5);
        margin-bottom: var(--sp-3);
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      }
      .toggle-label {
        font-size: 1.3rem;
        font-weight: 700;
      }
      .toggle-track {
        width: 62px;
        height: 34px;
        border-radius: var(--rad-pill);
        border: none;
        cursor: pointer;
        transition: background var(--dur-base) var(--ease-out);
        position: relative;
        background: var(--color-toggle-off);
        flex-shrink: 0;
        direction: ltr; /* anchor thumb in physical coords regardless of page direction */
      }
      .toggle-track.on {
        background: var(--accent-teal);
      }
      .toggle-track::after {
        content: "";
        position: absolute;
        top: 3px;
        right: 3px;
        left: auto;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--color-knob);
        transition:
          right var(--dur-base) var(--ease-out),
          left var(--dur-base) var(--ease-out);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
      }
      .toggle-track.on::after {
        right: auto;
        left: 3px;
      }
      /* Volume slider rows for game sounds. */
      .vol-row {
        background: var(--card);
        border-radius: var(--rad-lg);
        padding: var(--sp-3) var(--sp-5) var(--sp-4);
        margin-bottom: var(--sp-3);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      }
      .vol-row.muted {
        opacity: 0.45;
      }
      .vol-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--sp-2);
      }
      .vol-label {
        font-size: 1.2rem;
        font-weight: 700;
      }
      .vol-pct {
        font-size: 1rem;
        font-weight: 700;
        color: var(--muted);
        min-width: 3em;
        text-align: left;
      }
      .vol-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 8px;
        border-radius: var(--rad-pill);
        background: var(--color-surface-2);
        outline: none;
        cursor: pointer;
        direction: ltr; /* slider always reads left→right even in RTL doc */
      }
      .vol-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--primary);
        border: 3px solid var(--color-knob);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        cursor: pointer;
        transition: transform var(--dur-fast) var(--ease-out);
      }
      .vol-slider::-webkit-slider-thumb:hover {
        transform: scale(1.15);
      }
      .vol-slider::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--primary);
        border: 3px solid var(--color-knob);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        cursor: pointer;
      }
      /* Timer pills */
      .timer-pills {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-3);
      }
      .timer-pill {
        flex: 1 1 145px;
        background: var(--card);
        color: var(--text);
        border: none;
        border-radius: var(--rad-md);
        padding: var(--sp-4) var(--sp-3);
        font-family: inherit;
        font-size: 1.2rem;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        transition: all var(--dur-base) var(--ease-out);
        text-align: center;
      }
      .timer-pill .tp-sub {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--muted);
        margin-top: var(--sp-1);
      }
      .timer-pill.selected {
        background: var(--primary);
        color: var(--color-on-primary);
        box-shadow:
          0 4px 0 #b36e00,
          0 6px 24px rgba(229, 141, 0, 0.4);
      }
      .timer-pill.selected .tp-sub {
        color: var(--color-on-primary);
        opacity: 0.8;
      }
      .timer-pill:hover:not(.selected) {
        transform: translateY(-2px);
      }
      /* Fullscreen button */
      .btn-fullscreen {
        width: 100%;
        background: var(--card);
        color: var(--text);
        border: none;
        border-radius: var(--rad-lg);
        padding: var(--sp-5) var(--sp-6);
        font-family: inherit;
        font-size: 1.3rem;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        transition: all var(--dur-base) var(--ease-out);
      }
      .btn-fullscreen:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
      }
      /* How to play */
      .how-to-card {
        background: var(--card);
        border-radius: var(--rad-lg);
        padding: var(--sp-5) var(--sp-6);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        margin-bottom: var(--sp-3);
      }
      .how-to-card .htc-name {
        font-size: 1.4rem;
        font-weight: 900;
        color: var(--primary);
        margin-bottom: var(--sp-3);
      }
      .how-to-card p {
        font-size: 1.1rem;
        line-height: 1.75;
        font-weight: 600;
        color: var(--text);
      }

      /* ── In-game gear button (top-left, lives inside #top-left-bar) ─────────── */
      #gear-btn {
        min-height:44px;
        background: var(--card);
        color:var(--text);
        border: 1px solid rgba(255,255,255,.2);
        border-radius: var(--rad-pill);
        padding: var(--sp-2) var(--sp-5);
        font-size: 1rem;
        font-weight:800;
        cursor: pointer;
        box-shadow: none;
        backdrop-filter:blur(8px);
        display: none;
        font-family: inherit;
        transition: all var(--dur-base) var(--ease-out);
      }
      #gear-btn:hover {
        transform: translateY(-2px);
        background:rgba(255,255,255,.2);
      }

      /* ── Beta-mode banner (top of main menu) ───────────────────────────────── */
      .beta-banner {
        position: absolute;
        top: clamp(var(--sp-3), 1.2vw, var(--sp-4));
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(
          90deg,
          var(--accent-teal, #2dd4bf),
          var(--primary)
        );
        color: var(--color-on-primary, #fff);
        font-weight: 900;
        font-size: clamp(0.95rem, 1.2vw, 1.1rem);
        padding: var(--sp-2) var(--sp-5);
        border-radius: var(--rad-pill);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        letter-spacing: 0.04em;
        white-space: nowrap;
        z-index: 5;
      }
      .btn-mm-store {
        background: linear-gradient(
          135deg,
          var(--accent-teal, #2dd4bf),
          var(--primary)
        );
        color: var(--color-on-primary, #fff);
        border: none;
        font-family: inherit;
        font-size: clamp(1.5rem, 2.2vw, 2.1rem);
        font-weight: 800;
        padding: clamp(16px, 2vw, 24px) var(--sp-7);
        border-radius: var(--rad-pill);
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        transition: all var(--dur-base) var(--ease-out);
      }
      .btn-mm-store:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
      }
      .btn-mm-store:active {
        transform: scale(0.97);
      }
      /* ── Store overlay (reuses settings-overlay layout pattern) ─────────────── */
      #store-overlay,
      #custom-overlay {
        position: fixed;
        inset: 0;
        z-index: 215;
        background: var(--bg);
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        padding: var(--sp-6) var(--sp-7) var(--sp-8);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity var(--dur-base) var(--ease-out),
          visibility var(--dur-base);
      }
      #store-overlay.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      /* ── Custom-Questions Hub ─────────────────────────────────────────────
       Reuses the same overlay shell as #store-overlay (.open class flips
       display:flex). Two views inside (overview / editor) toggled via JS.
       Per-game theme classes (.cqhub-theme-{mode}) re-bind --cqhub-accent
       so the editor head + composer accents match the game's identity. */
      #cqhub-overlay {
        position: fixed;
        inset: 0;
        z-index: 200;
        background: var(--color-bg);
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        padding: var(--sp-6) var(--sp-7) var(--sp-8);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity var(--dur-base) var(--ease-out),
          visibility var(--dur-base);
      }
      #cqhub-overlay.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      /* ══════════════════════════════════════════════════════════════════════════
         DARK OVERLAY REDESIGN — Settings · Store · Questions · History
         All panels share the game's signature navy + glow blobs + dot grid look.
         ══════════════════════════════════════════════════════════════════════════ */

      /* ── Background: glow blobs + dot texture + solid navy ─────────────────── */
      #settings-overlay,
      #store-overlay,
      #custom-overlay,
      #cqhub-overlay,
      #history-overlay,
      #admin-overlay {
        background:
          radial-gradient(
            ellipse 65% 48% at 85% 8%,
            rgba(0, 93, 161, 0.45) 0%,
            transparent 68%
          ),
          radial-gradient(
            ellipse 70% 52% at 12% 92%,
            rgba(0, 93, 161, 0.38) 0%,
            transparent 70%
          ),
          #04121c;
        color: #ffffff;
        /* CSS-variable cascade — all descendant tokens auto-inherit dark values */
        --bg: #04121c;
        --card: rgba(255, 255, 255, 0.06);
        --color-card: rgba(255, 255, 255, 0.06);
        --color-bg: #04121c;
        --text: #ffffff;
        --color-text: #ffffff;
        --color-text-soft: rgba(255, 255, 255, 0.65);
        --muted: rgba(255, 255, 255, 0.48);
        --color-muted: rgba(255, 255, 255, 0.48);
        --color-surface-2: rgba(255, 255, 255, 0.08);
        --color-border-subtle: rgba(255, 255, 255, 0.1);
        --color-overlay-glass: rgba(255, 255, 255, 0.07);
        --color-overlay-glass-border: rgba(255, 255, 255, 0.14);
        --color-toggle-off: rgba(255, 255, 255, 0.15);
        --color-knob: #ffffff;
        --primary: #e58d00;
        --shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
        --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.65);
        --shadow-primary: 0 4px 24px rgba(229, 141, 0, 0.45);
      }

      /* ── Back / close button: glass pill ───────────────────────────────────── */
      #settings-overlay .btn-back,
      #store-overlay .btn-back,
      #cqhub-overlay .btn-back,
      #history-overlay .btn-back,
      #admin-overlay .btn-back {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: none;
        backdrop-filter: blur(8px);
      }
      #settings-overlay .btn-back:hover,
      #store-overlay .btn-back:hover,
      #cqhub-overlay .btn-back:hover,
      #history-overlay .btn-back:hover,
      #admin-overlay .btn-back:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
      }

      /* ── Section titles: wide-spaced uppercase label ────────────────────────── */
      #settings-overlay .settings-section-title,
      #store-overlay .settings-section-title,
      #cqhub-overlay .settings-section-title {
        font-size: 0.85rem;
        font-weight: 800;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.45);
        margin-bottom: 12px;
      }

      /* ── Toggle rows ────────────────────────────────────────────────────────── */
      #settings-overlay .toggle-row {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
      }
      #settings-overlay .toggle-track {
        border: 1.5px solid rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.15);
      }
      #settings-overlay .toggle-track.on {
        background: #0f8a6e;
        border-color: #0f8a6e;
      }

      /* ── Volume slider rows ─────────────────────────────────────────────────── */
      #settings-overlay .vol-row {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
      }
      #settings-overlay input[type="range"] {
        accent-color: #e58d00;
        background: rgba(255, 255, 255, 0.12);
      }
      #settings-overlay .vol-slider::-webkit-slider-thumb {
        background: #e58d00;
        border: 3px solid #04121c;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
      }
      #settings-overlay .vol-slider::-moz-range-thumb {
        background: #e58d00;
        border: 3px solid #04121c;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
      }

      /* ── Timer pills ────────────────────────────────────────────────────────── */
      #settings-overlay .timer-pill {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.7);
        box-shadow: none;
      }
      #settings-overlay .timer-pill.selected {
        background: #e58d00;
        color: #ffffff;
        border-color: #e58d00;
        box-shadow:
          0 4px 0 #b36e00,
          0 6px 20px rgba(229, 141, 0, 0.4);
      }
      #settings-overlay .timer-pill.selected .tp-sub {
        color: rgba(255, 255, 255, 0.85);
      }
      #settings-overlay .timer-pill:hover:not(.selected) {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.2);
      }

      /* ── Fullscreen / action buttons in settings ────────────────────────────── */
      #settings-overlay .btn-fullscreen {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #ffffff;
        box-shadow: none;
      }
      #settings-overlay .btn-fullscreen:hover {
        background: rgba(255, 255, 255, 0.12);
        box-shadow: none;
      }
      #settings-overlay .btn-account-history {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0 0 14px;
        padding: 14px 18px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
        font: 800 1rem inherit;
        font-family: inherit;
        cursor: pointer;
        transition: background var(--dur-base) var(--ease-out);
      }
      #settings-overlay .btn-account-history:hover {
        background: rgba(255, 255, 255, 0.12);
      }
      #settings-overlay .btn-account-history[hidden] {
        display: none;
      }
      #settings-overlay .btn-account-history .bah-arrow {
        color: rgba(255, 255, 255, 0.5);
        font-weight: 400;
      }
                  #settings-overlay .btn-account-delete {
        width: 100%;
        border: 2px solid rgba(239, 68, 68, 0.75);
        border-radius: 14px;
        padding: 12px 18px;
        color: #fecaca;
        background: rgba(127, 29, 29, 0.34);
        font: 800 1rem inherit;
        cursor: pointer;
      }
      #settings-overlay .account-note {
        color: var(--color-text-soft);
        font-size: 0.86rem;
        line-height: 1.65;
        margin: 0 0 12px;
      }

      /* ── How-to cards ───────────────────────────────────────────────────────── */
      #settings-overlay .how-to-card {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
      }
      /* ── Store ─────────────────────────────────────────────────────────────
         Portrait-first column shared by iPhone, iPad, and desktop. The phone
         stylesheet only adjusts safe areas; everything visual lives here so a
         cached optional-theme file can never leave the store half-styled. */
      #store-overlay {
        --st-cream: #fffaf1;
        --st-ink: #241c16;
        --st-ink-soft: rgba(36, 28, 22, 0.62);
        --st-ink-faint: rgba(36, 28, 22, 0.42);
        --st-teal: #2dd4bf;
        --st-teal-ink: #06413b;
        --st-yellow: #ffd166;
        --st-orange: #ff9d00;
        --st-shell-max: 520px;
        --st-gutter: 18px;
        padding: 0;
        align-items: stretch;
        scrollbar-width: none;
        overscroll-behavior: contain;
      }
      #store-overlay::-webkit-scrollbar {
        display: none;
      }
      #store-overlay .st-shell {
        position: relative;
        isolation: isolate;
        flex: 1 0 auto;
        width: 100%;
        max-width: var(--st-shell-max);
        margin: 0 auto;
        padding: clamp(14px, 3vh, 28px) var(--st-gutter) 8px;
      }
      #store-overlay .st-shell::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -40px 0 auto;
        height: 420px;
        background:
          radial-gradient(90% 55% at 50% 30%, rgba(229, 141, 0, 0.22), transparent 70%),
          radial-gradient(70% 40% at 15% 20%, rgba(0, 93, 161, 0.55), transparent 70%);
        pointer-events: none;
      }

      /* Top bar: back pill on the right, balance as plain text on the left. */
      #store-overlay .st-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 44px;
        margin: 0 0 2px;
      }
      /* The shared illustrated back button, scaled to the store's compact bar. */
      #store-overlay .st-topbar .btn-back {
        position: static;
        width: 118px;
        min-width: 0;
        height: 66px;
        min-height: 0;
        margin-inline-start: -6px;
      }
      #store-overlay .st-balance {
        min-width: 0;
        color: rgba(255, 255, 255, 0.72);
        font-weight: 700;
        font-size: 0.9rem;
        text-align: left;
      }
      #store-overlay .st-balance b {
        display: inline-block;
        color: #ffffff;
        font-weight: 800;
      }
      #store-overlay .st-balance.is-bump b {
        animation: stBump 0.7s var(--ease-spring-pop);
      }
      #store-overlay .st-balance .st-link {
        padding: 6px 0;
      }

      /* Hero: three floating game cards, one headline, one line. */
      #store-overlay .st-hero {
        text-align: center;
        padding-top: 4px;
      }
      #store-overlay .st-fan {
        position: relative;
        width: 250px;
        height: clamp(150px, 20vh, 176px);
        margin: 0 auto 10px;
        direction: ltr;
      }
      #store-overlay .st-fan img {
        position: absolute;
        left: 50%;
        bottom: 14px;
        width: 104px;
        aspect-ratio: 5 / 7;
        object-fit: cover;
        border-radius: 14px;
        box-shadow:
          0 24px 40px rgba(0, 0, 0, 0.45),
          0 0 0 1px rgba(255, 255, 255, 0.12);
        transform-origin: 50% 110%;
        animation: stFloat 4.2s ease-in-out infinite;
      }
      #store-overlay .st-fan img:nth-child(1) {
        transform: translateX(-50%) rotate(-16deg) translateX(-50px);
        animation-delay: -0.6s;
      }
      #store-overlay .st-fan img:nth-child(2) {
        z-index: 2;
        width: 112px;
        transform: translateX(-50%) translateY(-12px);
        animation-delay: -1.6s;
      }
      #store-overlay .st-fan img:nth-child(3) {
        transform: translateX(-50%) rotate(16deg) translateX(50px);
        animation-delay: -2.6s;
      }
      #store-overlay .st-hero h1 {
        margin: 0;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
        font-size: clamp(1.55rem, 5.2vw, 1.85rem);
        font-weight: 700;
        line-height: 1.2;
        color: #ffffff;
      }
      #store-overlay .st-hero p {
        margin: 6px 0 0;
        color: rgba(255, 255, 255, 0.72);
        font-weight: 600;
        font-size: 0.95rem;
      }
      #store-overlay .st-hero p strong {
        color: var(--st-yellow);
        font-weight: 800;
      }

      /* Plan rows */
      #store-overlay .st-plans {
        display: grid;
        gap: 10px;
        margin-top: 20px;
      }
      #store-overlay .st-plans:empty {
        display: none;
      }
      #store-overlay .st-plan {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin: 0;
        padding: 14px 16px;
        text-align: right;
        color: var(--st-ink);
        background: var(--st-cream);
        border: 2px solid transparent;
        border-radius: 20px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
        font-family: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
          transform 160ms var(--ease-out-soft),
          box-shadow 160ms var(--ease-out-soft),
          border-color 160ms var(--ease-out-soft);
      }
      #store-overlay .st-plan:active {
        transform: scale(0.985);
      }
      #store-overlay .st-plan.is-selected {
        border-color: var(--st-teal);
        box-shadow:
          0 14px 34px rgba(0, 0, 0, 0.34),
          0 0 0 5px rgba(45, 212, 191, 0.14);
        animation: stPop 320ms var(--ease-spring-pop);
      }
      #store-overlay .st-plan.is-selected:active {
        transform: scale(0.985);
      }
      #store-overlay.is-entering .st-plan {
        animation: stRise 480ms var(--ease-out-soft) both;
      }
      #store-overlay.is-entering .st-plan:nth-child(1) { animation-delay: 60ms; }
      #store-overlay.is-entering .st-plan:nth-child(2) { animation-delay: 130ms; }
      #store-overlay.is-entering .st-plan:nth-child(3) { animation-delay: 200ms; }
      #store-overlay.is-entering #store-weekly .st-plan { animation-delay: 270ms; }
      #store-overlay .st-body {
        min-width: 0;
      }
      #store-overlay .st-name {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        font-weight: 900;
        font-size: 1.22rem;
        line-height: 1.1;
      }
      #store-overlay .st-sub {
        display: block;
        margin-top: 5px;
        color: var(--st-ink-soft);
        font-weight: 700;
        font-size: 0.8rem;
        line-height: 1.3;
      }
      #store-overlay .st-price {
        text-align: left;
      }
      #store-overlay .st-now {
        display: block;
        font-weight: 900;
        font-size: 1.28rem;
        line-height: 1;
        white-space: nowrap;
      }
      #store-overlay .st-was {
        display: block;
        margin-top: 4px;
        color: var(--st-ink-faint);
        font-size: 0.74rem;
        font-weight: 700;
        white-space: nowrap;
      }
      #store-overlay .st-was.is-struck {
        text-decoration: line-through;
      }
      #store-overlay .st-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 6px 9px;
        border-radius: var(--rad-pill);
        font-size: 0.68rem;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
      }
      #store-overlay .st-chip-best {
        color: var(--st-teal-ink);
        background: rgba(45, 212, 191, 0.28);
      }
      #store-overlay .st-chip-save {
        color: var(--st-teal-ink);
        background: rgba(45, 212, 191, 0.18);
      }
      #store-overlay .st-chip-hot {
        color: #3a2300;
        background: var(--st-yellow);
      }
      #store-overlay .st-tick {
        position: absolute;
        top: -9px;
        left: 14px;
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--st-teal);
        color: #052b27;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        transform: scale(0);
        transition: transform 220ms var(--ease-spring-pop);
      }
      #store-overlay .st-tick::before {
        content: "";
        width: 10px;
        height: 5px;
        margin-top: -2px;
        border-left: 2.5px solid currentColor;
        border-bottom: 2.5px solid currentColor;
        transform: rotate(-45deg);
      }
      #store-overlay .st-plan.is-selected .st-tick {
        transform: scale(1);
      }

      /* Divider + unlimited card */
      #store-overlay .st-or {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 18px 0 10px;
        color: rgba(255, 255, 255, 0.45);
        font-weight: 800;
        font-size: 0.78rem;
      }
      #store-overlay .st-or::before,
      #store-overlay .st-or::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.12);
      }
      #store-overlay #store-weekly {
        margin-top: 0;
      }
      #store-overlay .st-plan-weekly {
        align-items: start;
        padding: 16px 16px 58px;
        overflow: hidden;
        color: #ffffff;
        background:
          linear-gradient(120deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%),
          linear-gradient(145deg, #173954, #0b2537);
        border-color: rgba(255, 255, 255, 0.12);
      }
      #store-overlay .st-plan-weekly.is-selected {
        border-color: var(--st-orange);
        box-shadow:
          0 14px 34px rgba(0, 0, 0, 0.4),
          0 0 0 5px rgba(255, 157, 0, 0.16);
      }
      #store-overlay .st-plan-weekly .st-tick {
        background: var(--st-orange);
        color: #3a2300;
      }
      #store-overlay .st-plan-weekly .st-sub {
        color: rgba(255, 255, 255, 0.72);
      }
      #store-overlay .st-plan-weekly .st-was {
        color: rgba(255, 255, 255, 0.45);
      }
      #store-overlay .st-benefits {
        display: grid;
        gap: 5px;
        margin-top: 8px;
      }
      #store-overlay .st-benefits span {
        display: flex;
        align-items: center;
        gap: 7px;
        color: rgba(255, 255, 255, 0.88);
        font-weight: 700;
        font-size: 0.82rem;
        line-height: 1.2;
      }
      #store-overlay .st-benefits span::before {
        content: "";
        flex: 0 0 auto;
        box-sizing: border-box;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: rgba(255, 157, 0, 0.22);
      }
      #store-overlay .st-benefits span::after {
        content: "";
        position: absolute;
        right: 4.5px;
        top: 4px;
        width: 7px;
        height: 4px;
        border-left: 2px solid var(--st-orange);
        border-bottom: 2px solid var(--st-orange);
        transform: rotate(-45deg);
        pointer-events: none;
      }
      #store-overlay .st-benefits span {
        position: relative;
      }
      #store-overlay .st-per {
        display: block;
        margin-top: 6px;
        color: var(--st-yellow);
        font-size: 0.72rem;
        font-weight: 800;
        white-space: nowrap;
      }
      #store-overlay .st-deck {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -22px;
        display: flex;
        justify-content: center;
        gap: 7px;
        direction: ltr;
        pointer-events: none;
      }
      #store-overlay .st-deck img {
        width: 48px;
        aspect-ratio: 5 / 7;
        object-fit: cover;
        border-radius: 6px;
        box-shadow:
          0 8px 18px rgba(0, 0, 0, 0.45),
          0 0 0 1px rgba(255, 255, 255, 0.1);
      }
      #store-overlay .st-deck img:nth-child(odd) {
        transform: translateY(8px) rotate(-5deg);
      }
      #store-overlay .st-deck img:nth-child(even) {
        transform: rotate(4deg);
      }
      #store-overlay .st-deck::after {
        content: "";
        position: absolute;
        inset: -10px 0 0;
        background: linear-gradient(180deg, rgba(11, 37, 55, 0) 0%, rgba(11, 37, 55, 0.78) 100%);
      }
      #store-overlay .st-plan-weekly.is-active {
        padding-bottom: 16px;
        cursor: default;
      }
      #store-overlay .st-plan-weekly.is-active .st-tick {
        transform: scale(1);
      }

      /* Includes, note, legal, links */
      #store-overlay .st-includes {
        margin: 18px 0 0;
        text-align: center;
        color: rgba(255, 255, 255, 0.72);
        font-weight: 700;
        font-size: 0.8rem;
      }
      #store-overlay .st-includes span {
        margin: 0 10px;
        color: rgba(255, 255, 255, 0.35);
      }
      #store-overlay .st-note {
        max-width: none;
        margin: 10px 0 0;
        text-align: center;
        color: rgba(255, 255, 255, 0.55);
        font-size: 0.78rem;
        line-height: 1.6;
      }
      #store-overlay .st-note:empty {
        display: none;
      }
      #store-overlay .store-subscriber-credit-note {
        margin: 0 0 16px;
        color: var(--color-text-soft);
        font-size: 0.85rem;
        line-height: 1.7;
        text-align: center;
      }
      #store-overlay .mj-native-subscription-legal {
        margin: 12px auto 0;
        text-align: center;
        color: rgba(255, 255, 255, 0.45);
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.7;
      }
      /* native-env.js mounts the links with inline 44px line boxes for tap
         area; keep the tap area as padding so the paragraph flows normally. */
      #store-overlay .mj-native-subscription-legal a {
        display: inline !important;
        min-height: 0 !important;
        padding: 10px 2px !important;
        line-height: inherit !important;
      }
      #store-overlay .st-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 4px 18px;
        margin-top: 8px;
      }
      #store-overlay .st-link {
        display: inline-block;
        padding: 8px 0;
        border: 0;
        background: none;
        color: rgba(255, 255, 255, 0.72);
        font-family: inherit;
        font-size: 0.78rem;
        font-weight: 800;
        text-decoration: none;
        cursor: pointer;
      }
      #store-overlay .st-link[hidden] {
        display: none;
      }
      #store-overlay .st-link:disabled {
        opacity: 0.5;
        cursor: default;
      }
      #store-overlay .store-dev-tools {
        display: flex;
        justify-content: center;
        margin-top: 8px;
      }
      #store-overlay .store-dev-tools[hidden] {
        display: none;
      }
      #store-overlay .store-dev-link {
        color: rgba(255, 255, 255, 0.55);
        font-size: 0.78rem;
        font-weight: 800;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      /* Sticky CTA */
      #store-overlay .st-cta-bar {
        position: sticky;
        bottom: 0;
        z-index: 3;
        width: 100%;
        padding: 26px var(--st-gutter) 14px;
        background: linear-gradient(180deg, rgba(4, 18, 28, 0), rgba(4, 18, 28, 0.92) 34%, #04121c 70%);
      }
      #store-overlay .st-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: calc(var(--st-shell-max) - var(--st-gutter) * 2);
        min-height: 60px;
        margin: 0 auto;
        padding: 12px 22px;
        border: 0;
        border-radius: var(--rad-pill);
        background: linear-gradient(135deg, #e58d00, #ff9d00);
        color: #ffffff;
        font-family: inherit;
        font-size: 1.12rem;
        font-weight: 900;
        line-height: 1.1;
        cursor: pointer;
        box-shadow:
          0 4px 0 #b36e00,
          0 14px 34px rgba(229, 141, 0, 0.42);
        transition:
          transform 120ms var(--ease-out-soft),
          box-shadow 120ms var(--ease-out-soft),
          opacity 160ms;
      }
      #store-overlay .st-cta:active:not(:disabled) {
        transform: translateY(3px);
        box-shadow:
          0 1px 0 #b36e00,
          0 8px 22px rgba(229, 141, 0, 0.35);
      }
      #store-overlay .st-cta:disabled {
        cursor: default;
        color: rgba(255, 255, 255, 0.8);
        background: rgba(255, 255, 255, 0.12);
        box-shadow: none;
      }
      #store-overlay .st-cta.is-secondary {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: none;
      }
      #store-overlay .st-cta-amount {
        padding-inline-start: 10px;
        border-inline-start: 1px solid rgba(255, 255, 255, 0.35);
        font-weight: 800;
        opacity: 0.92;
        white-space: nowrap;
      }
      #store-overlay .st-cta-amount[hidden] {
        display: none;
      }
      #store-overlay .st-cta.is-swap .st-cta-label,
      #store-overlay .st-cta.is-swap .st-cta-amount {
        animation: stSwap 240ms var(--ease-out-soft);
      }
      #store-overlay .st-cta-note {
        min-height: 1.2em;
        margin: 9px 0 0;
        text-align: center;
        color: rgba(255, 255, 255, 0.45);
        font-size: 0.72rem;
        font-weight: 700;
      }

      @keyframes stFloat {
        0%, 100% { translate: 0 0; }
        50% { translate: 0 -6px; }
      }
      @keyframes stRise {
        from { opacity: 0; transform: translateY(14px); }
      }
      @keyframes stPop {
        0% { transform: scale(0.97); }
        60% { transform: scale(1.015); }
        100% { transform: scale(1); }
      }
      @keyframes stSwap {
        from { opacity: 0; transform: translateY(6px); }
      }
      @keyframes stBump {
        0% { transform: scale(1); }
        40% { transform: scale(1.22); color: var(--st-yellow); }
        100% { transform: scale(1); }
      }
      @media (min-width: 900px) {
        #store-overlay .st-shell {
          padding-top: 34px;
        }
        #store-overlay .st-fan {
          width: 300px;
          height: 200px;
        }
        #store-overlay .st-fan img {
          width: 120px;
        }
        #store-overlay .st-fan img:nth-child(2) {
          width: 130px;
        }
        #store-overlay .st-fan img:nth-child(1) {
          transform: translateX(-50%) rotate(-16deg) translateX(-62px);
        }
        #store-overlay .st-fan img:nth-child(3) {
          transform: translateX(-50%) rotate(16deg) translateX(62px);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        #store-overlay .st-fan img,
        #store-overlay.is-entering .st-plan,
        #store-overlay .st-plan.is-selected,
        #store-overlay .st-cta.is-swap .st-cta-label,
        #store-overlay .st-cta.is-swap .st-cta-amount,
        #store-overlay .st-balance.is-bump b {
          animation: none;
        }
        #store-overlay .st-tick {
          transition: none;
        }
      }
      /* ── History rows ───────────────────────────────────────────────────────── */
      #history-overlay .history-row {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
      }

      /* ── CQ Hub: overview game cards ────────────────────────────────────────── */
      #cqhub-overlay .cqhub-card {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
      }
      #cqhub-overlay .cqhub-card:hover {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
      }
      #cqhub-overlay .cqhub-card-icon {
        background: rgba(255, 255, 255, 0.08);
      }
      #cqhub-overlay .cqhub-card-status {
        background: rgba(255, 255, 255, 0.09);
        color: rgba(255, 255, 255, 0.55);
      }
      #cqhub-overlay .cqhub-card-cta.is-secondary {
        background: transparent;
        color: #ffffff;
      }

      /* ── CQ Hub: editor head / breadcrumb ───────────────────────────────────── */
      #cqhub-overlay .cqhub-editor-head {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
      }

      /* ── CQ Hub: locked / sign-in panels ────────────────────────────────────── */
      #cqhub-overlay .cqhub-locked {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
      }
      #cqhub-overlay .cqhub-locked-cta {
        background: #e58d00;
        box-shadow: 0 4px 0 #b36e00;
        color: #ffffff;
      }
      #cqhub-overlay .cqhub-locked-cta:hover {
        transform: translateY(-1px);
        box-shadow:
          0 5px 0 #b36e00,
          0 6px 20px rgba(229, 141, 0, 0.4);
      }

      /* ── CQ Hub: composer card ──────────────────────────────────────────────── */
      #cqhub-overlay .cqhub-composer {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
      }
      #cqhub-overlay .cqhub-composer-tabs {
        background: rgba(0, 0, 0, 0.25);
      }
      #cqhub-overlay .cqhub-comp-tab {
        color: rgba(255, 255, 255, 0.45);
      }
      #cqhub-overlay .cqhub-comp-tab.is-on {
        background: rgba(255, 255, 255, 0.1);
        color: #e58d00;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
      }

      /* ── CQ Hub: textareas ──────────────────────────────────────────────────── */
      #cqhub-overlay .cqhub-input-wrap textarea,
      #cqhub-overlay #cqhub-bulk textarea {
        background: rgba(0, 0, 0, 0.3);
        border: 1.5px solid rgba(255, 255, 255, 0.12);
        color: #ffffff;
      }
      #cqhub-overlay .cqhub-input-wrap textarea::placeholder,
      #cqhub-overlay #cqhub-bulk textarea::placeholder {
        color: rgba(255, 255, 255, 0.3);
      }
      #cqhub-overlay .cqhub-input-wrap textarea:focus,
      #cqhub-overlay #cqhub-bulk textarea:focus {
        border-color: #e58d00;
      }

      /* ── CQ Hub: percent picker ─────────────────────────────────────────────── */
      #cqhub-overlay .cqhub-percent-wrap {
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      #cqhub-overlay .cqhub-percent-row input[type="number"] {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.12);
        color: #ffffff;
      }
      #cqhub-overlay .cqhub-percent-row input[type="range"] {
        accent-color: #e58d00;
      }

      /* ── CQ Hub: add button ─────────────────────────────────────────────────── */
      #cqhub-overlay .cqhub-add-btn {
        background: #e58d00;
        box-shadow: 0 4px 0 #b36e00;
        color: #ffffff;
      }
      #cqhub-overlay .cqhub-add-btn:hover {
        transform: translateY(-1px);
        box-shadow:
          0 5px 0 #b36e00,
          0 6px 20px rgba(229, 141, 0, 0.4);
      }

      /* ── CQ Hub: question list rows ─────────────────────────────────────────── */
      #cqhub-overlay .cqhub-row {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: none;
      }
      #cqhub-overlay .cqhub-row .cqhub-row-text-edit {
        background: rgba(0, 0, 0, 0.3);
        border-color: #e58d00;
        color: #ffffff;
      }

      /* ── CQ Hub: beta banner ────────────────────────────────────────────────── */
      #cqhub-overlay .cqhub-beta {
        background: rgba(15, 138, 110, 0.18);
        border-right-color: #0f8a6e;
        color: rgba(255, 255, 255, 0.85);
      }

      .cqhub-account {
        width: 100%;
        max-width: 820px;
        text-align: center;
        color: var(--muted);
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: var(--sp-3);
        min-height: 1.4em;
      }
      .cqhub-account .cqhub-account-cta {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        color: var(--primary);
        font: inherit;
        font-weight: 800;
        cursor: pointer;
        text-decoration: underline;
      }
      .cqhub-beta {
        width: 100%;
        max-width: 820px;
        background: var(--color-primary-soft);
        color: var(--color-text);
        border: 1px solid var(--primary);
        border-radius: var(--rad-md);
        padding: var(--sp-3) var(--sp-5);
        margin-bottom: var(--sp-5);
        font-weight: 700;
        font-size: 1rem;
        line-height: 1.6;
      }

      .cqhub-view {
        width: 100%;
        max-width: 820px;
      }

      /* Overview — 4 game cards */
      .cqhub-grid {
        display: grid;
        gap: var(--sp-4);
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        margin-bottom: var(--sp-5);
      }
      .cqhub-card {
        --cqhub-card-accent: var(--primary);
        background: var(--card);
        border-radius: var(--rad-lg);
        padding: var(--sp-5);
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
        border: 2px solid transparent;
        border-top: 5px solid var(--cqhub-card-accent);
        transition:
          transform var(--dur-base) var(--ease-out),
          box-shadow var(--dur-base) var(--ease-out);
        text-align: right;
      }
      .cqhub-card.is-clickable {
        cursor: pointer;
      }
      .cqhub-card.is-clickable:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
      }
      .cqhub-card-head {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
      }
      .cqhub-card-icon {
        font-size: 1.8rem;
        line-height: 1;
        width: 48px;
        height: 48px;
        flex: none;
        display: grid;
        place-items: center;
        background: var(--color-primary-soft);
        border-radius: var(--rad-md);
      }
      .cqhub-card-name {
        font-size: 1.4rem;
        font-weight: 900;
        color: var(--text);
        flex: 1;
      }
      .cqhub-card-logo {
        height: 52px;
        width: auto;
        flex: none;
        object-fit: contain;
      }
      .cqhub-card-status {
        font-size: 0.8rem;
        font-weight: 800;
        padding: 4px 10px;
        border-radius: var(--rad-pill);
        background: var(--color-surface-2);
        color: var(--muted);
      }
      .cqhub-card-status.is-owned {
        background: var(--cqhub-card-accent);
        color: var(--color-on-primary, #fff);
      }
      .cqhub-card-status.is-beta {
        background: var(--accent-yellow, #ffd166);
        color: var(--text);
      }
      .cqhub-card-desc {
        color: var(--muted);
        font-size: 0.95rem;
        line-height: 1.5;
      }
      .cqhub-card-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        margin-top: auto;
      }
      .cqhub-card-count {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--text);
      }
      .cqhub-card-count .cqhub-card-count-num {
        color: var(--cqhub-card-accent);
        font-size: 1.2rem;
      }
      .cqhub-card-cta {
        background: var(--cqhub-card-accent);
        color: var(--color-on-primary, #fff);
        border: none;
        border-radius: var(--rad-md);
        padding: var(--sp-2) var(--sp-4);
        font-family: inherit;
        font-weight: 800;
        font-size: 0.95rem;
        cursor: pointer;
        transition: transform var(--dur-base) var(--ease-out);
      }
      .cqhub-card-cta:hover {
        transform: translateY(-1px);
      }
      .cqhub-card-cta.is-secondary {
        background: var(--card);
        color: var(--text);
        border: 2px solid var(--cqhub-card-accent);
      }

      /* Per-mode card accents */
      .cqhub-card[data-mode="answers"] {
        --cqhub-card-accent: var(--color-mode-shathaat, #ff7a00);
      }
      .cqhub-card[data-mode="faker"] {
        --cqhub-card-accent: var(--color-mode-faker, #9b3d15);
      }
      .cqhub-card[data-mode="khallat"] {
        --cqhub-card-accent: var(--color-mode-khallat, #0b8a5e);
      }
      .cqhub-card[data-mode="percent"] {
        --cqhub-card-accent: var(--color-mode-nesba, #7c3aed);
      }

      .cqhub-footnote {
        width: 100%;
        max-width: 820px;
        text-align: center;
        color: var(--muted);
        font-size: 0.95rem;
        line-height: 1.6;
        margin: var(--sp-4) 0 var(--sp-2);
      }

      /* Editor view */
      .cqhub-editor-head {
        --cqhub-accent: var(--primary);
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-4) var(--sp-5);
        background: var(--card);
        border-radius: var(--rad-lg);
        border-top: 5px solid var(--cqhub-accent);
        box-shadow: var(--shadow);
        margin-bottom: var(--sp-5);
      }
      .cqhub-crumb {
        background: transparent;
        border: 2px solid var(--cqhub-accent);
        color: var(--cqhub-accent);
        border-radius: var(--rad-pill);
        padding: 6px 14px;
        font-family: inherit;
        font-weight: 800;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all var(--dur-base) var(--ease-out);
      }
      .cqhub-crumb:hover {
        background: var(--cqhub-accent);
        color: var(--color-on-primary, #fff);
      }
      .cqhub-editor-title {
        flex: 1;
        font-size: 1.4rem;
        font-weight: 900;
        color: var(--text);
      }

      /* Per-game accent applied to the editor body */
      #cqhub-editor[data-mode="answers"] .cqhub-editor-head,
      #cqhub-editor[data-mode="answers"] {
        --cqhub-accent: var(--color-mode-shathaat, #ff7a00);
      }
      #cqhub-editor[data-mode="faker"] .cqhub-editor-head,
      #cqhub-editor[data-mode="faker"] {
        --cqhub-accent: var(--color-mode-faker, #9b3d15);
      }
      #cqhub-editor[data-mode="khallat"] .cqhub-editor-head,
      #cqhub-editor[data-mode="khallat"] {
        --cqhub-accent: var(--color-mode-khallat, #0b8a5e);
      }
      #cqhub-editor[data-mode="percent"] .cqhub-editor-head,
      #cqhub-editor[data-mode="percent"] {
        --cqhub-accent: var(--color-mode-nesba, #7c3aed);
      }

      /* Locked / sign-in panels */
      .cqhub-locked {
        background: var(--card);
        border-radius: var(--rad-lg);
        padding: var(--sp-7) var(--sp-5);
        box-shadow: var(--shadow);
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
        align-items: center;
      }
      .cqhub-locked-icon {
        font-size: 2.4rem;
      }
      .cqhub-locked-title {
        font-size: 1.3rem;
        font-weight: 900;
        color: var(--text);
      }
      .cqhub-locked-text {
        color: var(--muted);
        font-size: 1rem;
        line-height: 1.6;
        max-width: 460px;
      }
      .cqhub-locked-cta {
        background: var(--primary);
        color: var(--color-on-primary, #fff);
        border: none;
        border-radius: var(--rad-md);
        padding: var(--sp-3) var(--sp-5);
        font-family: inherit;
        font-weight: 800;
        font-size: 1rem;
        cursor: pointer;
        margin-top: var(--sp-2);
      }

      /* Composer */
      .cqhub-composer {
        background: var(--card);
        border-radius: var(--rad-lg);
        padding: var(--sp-5);
        box-shadow: var(--shadow);
        margin-bottom: var(--sp-5);
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
      }
      .cqhub-composer-tabs {
        display: flex;
        gap: var(--sp-2);
        background: var(--color-surface-2);
        padding: 4px;
        border-radius: var(--rad-pill);
      }
      .cqhub-comp-tab {
        flex: 1;
        background: transparent;
        color: var(--muted);
        border: none;
        border-radius: var(--rad-pill);
        padding: var(--sp-2) var(--sp-4);
        font-family: inherit;
        font-weight: 800;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all var(--dur-base) var(--ease-out);
      }
      .cqhub-comp-tab.is-on {
        background: var(--card);
        color: var(--cqhub-accent, var(--primary));
        box-shadow: var(--shadow-sm);
      }
      .cqhub-input-wrap {
        position: relative;
      }
      .cqhub-input-wrap textarea,
      #cqhub-bulk textarea {
        width: 100%;
        padding: var(--sp-3) var(--sp-4) var(--sp-5);
        border: 2px solid var(--color-surface-2);
        background: var(--bg);
        color: var(--text);
        border-radius: var(--rad-md);
        font-family: inherit;
        font-size: 1.05rem;
        font-weight: 600;
        direction: rtl;
        text-align: right;
        resize: vertical;
        transition: border-color var(--dur-base) var(--ease-out);
      }
      .cqhub-input-wrap textarea:focus,
      #cqhub-bulk textarea:focus {
        outline: none;
        border-color: var(--cqhub-accent, var(--primary));
      }
      .cqhub-counter {
        position: absolute;
        bottom: 6px;
        left: 12px;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--muted);
        pointer-events: none;
      }
      .cqhub-counter.is-near {
        color: var(--accent-pink, #ec4899);
      }

      .cqhub-percent-wrap {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        padding: var(--sp-3);
        background: var(--color-surface-2);
        border-radius: var(--rad-md);
      }
      .cqhub-percent-label {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--text);
      }
      .cqhub-percent-row {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
      }
      .cqhub-percent-row input[type="range"] {
        flex: 1;
        accent-color: var(--cqhub-accent, var(--primary));
      }
      .cqhub-percent-row input[type="number"] {
        width: 80px;
        text-align: center;
        padding: 6px 10px;
        border-radius: var(--rad-sm);
        border: 2px solid var(--card);
        background: var(--card);
        color: var(--text);
        font-family: inherit;
        font-weight: 800;
        font-size: 1rem;
      }
      .cqhub-percent-row input[type="number"]:focus {
        outline: none;
        border-color: var(--cqhub-accent, var(--primary));
      }
      .cqhub-percent-suffix {
        font-weight: 800;
        color: var(--muted);
      }

      .cqhub-add-btn {
        background: var(--cqhub-accent, var(--primary));
        color: var(--color-on-primary, #fff);
        border: none;
        border-radius: var(--rad-md);
        padding: var(--sp-3) var(--sp-5);
        font-family: inherit;
        font-weight: 800;
        font-size: 1.05rem;
        cursor: pointer;
        transition: transform var(--dur-base) var(--ease-out);
      }
      .cqhub-add-btn:hover {
        transform: translateY(-1px);
      }
      .cqhub-add-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
      }

      .cqhub-bulk-hint {
        font-size: 0.85rem;
        color: var(--muted);
        line-height: 1.5;
      }
      .cqhub-bulk-feedback {
        font-size: 0.95rem;
        font-weight: 700;
        min-height: 1.2em;
      }
      .cqhub-bulk-feedback.is-ok {
        color: var(--accent-teal, #06d6a0);
      }
      .cqhub-bulk-feedback.is-err {
        color: var(--accent-pink, #ec4899);
      }
      .cqhub-bulk-skips {
        margin: 6px 0 0;
        padding: 0 18px;
        font-size: 0.85rem;
        color: var(--muted);
        list-style: disc;
        line-height: 1.5;
      }

      /* List */
      .cqhub-list-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--sp-2);
        margin-bottom: var(--sp-3);
      }
      .cqhub-list-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--text);
      }
      .cqhub-list-count {
        color: var(--muted);
        font-size: 0.9rem;
        font-weight: 700;
      }
      .cqhub-list {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
      }
      .cqhub-row {
        background: var(--card);
        border-radius: var(--rad-md);
        padding: var(--sp-3) var(--sp-4);
        box-shadow: var(--shadow-sm);
        display: flex;
        align-items: center;
        gap: var(--sp-3);
      }
      .cqhub-row .cqhub-row-text {
        flex: 1;
        font-size: 1.05rem;
        font-weight: 600;
        direction: rtl;
        text-align: right;
        word-break: break-word;
      }
      .cqhub-row .cqhub-row-text-edit {
        flex: 1;
        padding: var(--sp-2) var(--sp-3);
        border-radius: var(--rad-sm);
        border: 2px solid var(--cqhub-accent, var(--primary));
        background: var(--bg);
        color: var(--text);
        font-family: inherit;
        font-size: 1.05rem;
        direction: rtl;
        text-align: right;
      }
      .cqhub-row .cqhub-pct-chip {
        background: var(--color-mode-nesba, #7c3aed);
        color: #fff;
        padding: 2px 10px;
        border-radius: var(--rad-pill);
        font-weight: 800;
        font-size: 0.85rem;
      }
      .cqhub-row .cqhub-row-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 1.1rem;
        padding: var(--sp-1) var(--sp-2);
        color: var(--muted);
        border-radius: var(--rad-pill);
        transition: all var(--dur-base) var(--ease-out);
      }
      .cqhub-row .cqhub-row-btn:hover {
        color: var(--text);
        background: var(--bg);
      }
      .cqhub-row .cqhub-row-btn.is-danger:hover {
        color: var(--accent-pink, #ec4899);
      }
      .cqhub-row.is-confirming {
        border: 2px dashed var(--accent-pink, #ec4899);
        background: var(--color-result-accused-bg, rgba(255, 107, 107, 0.1));
      }
      .cqhub-row .cqhub-confirm-msg {
        flex: 1;
        font-weight: 800;
        color: var(--accent-pink, #ec4899);
      }
      .cqhub-row .cqhub-confirm-yes,
      .cqhub-row .cqhub-confirm-no {
        border: none;
        border-radius: var(--rad-pill);
        padding: 6px 14px;
        font-family: inherit;
        font-weight: 800;
        font-size: 0.9rem;
        cursor: pointer;
      }
      .cqhub-row .cqhub-confirm-yes {
        background: var(--accent-pink, #ec4899);
        color: #fff;
      }
      .cqhub-row .cqhub-confirm-no {
        background: var(--color-surface-2);
        color: var(--text);
      }
      .cqhub-empty {
        text-align: center;
        color: var(--muted);
        padding: var(--sp-6);
        font-size: 1rem;
        line-height: 1.6;
      }

      .btn-mm-questions {
        background: var(--card);
        color: var(--text);
        border: 2px solid var(--primary);
        font-family: inherit;
        font-size: clamp(1.1rem, 1.6vw, 1.4rem);
        font-weight: 700;
        padding: clamp(10px, 1.4vw, 16px) var(--sp-6);
        border-radius: var(--rad-pill);
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        transition: all var(--dur-base) var(--ease-out);
      }
      .btn-mm-questions:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
      }
      .btn-mm-questions:active {
        transform: scale(0.97);
      }
      /* ── Moyasar checkout modal ──────────────────────────────────────────── */
      #moyasar-overlay {
        position: fixed;
        inset: 0;
        z-index: 220;
        background: rgba(0, 0, 0, 0.55);
        display: none;
        align-items: flex-start;
        justify-content: center;
        overflow-y: auto;
        padding: var(--sp-5);
      }
      #moyasar-overlay.open {
        display: flex;
      }
      .moyasar-card {
        background: var(--bg);
        border-radius: var(--rad-lg);
        width: 100%;
        max-width: 560px;
        margin: var(--sp-5) auto;
        padding: var(--sp-5) var(--sp-5) var(--sp-6);
        box-shadow: var(--shadow-lg);
      }
      .moyasar-card .mc-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--sp-4);
      }
      .moyasar-card .mc-title {
        font-size: 1.3rem;
        font-weight: 900;
        color: var(--text);
      }
      .moyasar-card .mc-sub {
        font-size: 0.95rem;
        color: var(--muted);
        margin-bottom: var(--sp-4);
      }
      .moyasar-card .mc-sandbox {
        display: inline-block;
        background: var(--accent-yellow, #fbbf24);
        color: var(--text);
        font-weight: 800;
        font-size: 0.85rem;
        padding: 3px 12px;
        border-radius: var(--rad-pill);
        margin-bottom: var(--sp-3);
      }
      .moyasar-card .mc-close {
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 1.4rem;
        color: var(--muted);
        padding: 4px 10px;
        border-radius: var(--rad-pill);
      }
      .moyasar-card .mc-close:hover {
        color: var(--text);
        background: var(--card);
      }
      #moyasar-form-container {
        min-height: 240px;
      }
      #moyasar-status {
        margin-top: var(--sp-3);
        font-weight: 700;
        font-size: 1rem;
        text-align: center;
        min-height: 1.4em;
      }
      #moyasar-status.ok {
        color: var(--accent-teal, #2dd4bf);
      }
      #moyasar-status.error {
        color: var(--accent-pink, #ec4899);
      }

      /* ── Purchase history (مشترياتي) ─────────────────────────────────────── */
      #history-overlay {
        position: fixed;
        inset: 0;
        z-index: 215;
        background: var(--bg);
        display: none;
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        padding: var(--sp-6) var(--sp-7) var(--sp-8);
      }
      #history-overlay.open {
        display: flex;
      }
      .history-list {
        width: 100%;
        max-width: 820px;
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        margin-top: var(--sp-3);
      }
      .history-row {
        background: var(--card);
        border-radius: var(--rad-md);
        padding: var(--sp-3) var(--sp-4);
        box-shadow: var(--shadow-sm, var(--shadow));
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .history-row .hr-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--sp-3);
      }
      .history-row .hr-pack {
        font-weight: 900;
        font-size: 1.1rem;
      }
      .history-row .hr-amount {
        font-weight: 800;
        color: var(--primary);
      }
      .history-row .hr-meta {
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        color: var(--muted);
        direction: ltr;
        flex-wrap: wrap;
        gap: var(--sp-2);
      }
      .history-row .hr-status {
        display: inline-block;
        padding: 1px 10px;
        border-radius: var(--rad-pill);
        font-weight: 800;
        font-size: 0.8rem;
        background: var(--color-surface-2, rgba(0, 0, 0, 0.06));
        color: var(--text);
      }
      .history-row .hr-status.paid {
        background: var(--accent-teal, #2dd4bf);
        color: var(--color-on-primary, #fff);
      }
      .history-row .hr-status.granted,
      .history-row .hr-status.active,
      .history-row .hr-status.grace {
        background: var(--accent-teal, #2dd4bf);
        color: var(--color-on-primary, #fff);
      }
      .history-row .hr-status.failed,
      .history-row .hr-status.cancelled,
      .history-row .hr-status.expired,
      .history-row .hr-status.revoked,
      .history-row .hr-status.refunded {
        background: var(--accent-pink, #ec4899);
        color: var(--color-on-primary, #fff);
      }
      .history-empty {
        width: 100%;
        max-width: 820px;
        text-align: center;
        color: var(--muted);
        padding: var(--sp-7);
        font-size: 1.05rem;
      }
      /* ── Share-consent toggle (inside the per-game editor) ─────────────────── */
      .cqhub-share-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-4);
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--rad-lg);
        padding: var(--sp-4) var(--sp-5);
        margin-bottom: var(--sp-4);
      }
      /* Free-game offer banner (add 10+ custom questions). */
      .cqhub-freegame {
        background: rgba(229, 141, 0, 0.12);
        border: 1px solid rgba(229, 141, 0, 0.35);
        border-radius: var(--rad-lg);
        padding: var(--sp-4) var(--sp-5);
        margin-bottom: var(--sp-4);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.5;
        color: var(--text);
      }
      .cqhub-freegame strong {
        color: var(--primary, #e58d00);
      }
      .cqhub-freegame.is-ready {
        background: rgba(45, 212, 191, 0.14);
        border-color: rgba(45, 212, 191, 0.45);
      }
      .cqhub-freegame.is-ready strong {
        color: var(--accent-teal, #2dd4bf);
      }
      .cqhub-freegame.is-done {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.12);
        color: var(--muted);
        font-weight: 600;
      }
      .cqhub-freegame .cqfg-bar {
        height: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        overflow: hidden;
        margin: 8px 0 4px;
      }
      .cqhub-freegame .cqfg-bar > span {
        display: block;
        height: 100%;
        background: var(--primary, #e58d00);
        border-radius: 999px;
        transition: width var(--dur-base) var(--ease-out);
      }
      .cqhub-freegame .cqfg-count {
        font-size: 0.85rem;
        color: var(--muted);
        font-weight: 700;
      }
      .cqhub-share-text {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
      }
      .cqhub-share-label {
        font-weight: 800;
        font-size: 1.02rem;
        color: #fff;
      }
      .cqhub-share-hint {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.55);
        line-height: 1.45;
      }

      /* ── "Suggest questions for us" button (overview) ─────cq�───────────────── */
      .cqhub-suggest-btn {
        width: 100%;
        max-width: 820px;
        margin: var(--sp-2) auto var(--sp-2);
        display: block;
        background: rgba(255, 255, 255, 0.07);
        color: #fff;
        border: 1.5px dashed rgba(255, 255, 255, 0.3);
        border-radius: var(--rad-lg);
        padding: var(--sp-4) var(--sp-5);
        font-family: inherit;
        font-weight: 800;
        font-size: 1.05rem;
        cursor: pointer;
        transition: all var(--dur-base) var(--ease-out);
      }
      .cqhub-suggest-btn:hover {
        background: rgba(255, 255, 255, 0.13);
        border-color: rgba(255, 255, 255, 0.45);
        transform: translateY(-1px);
      }
      /* ── Custom questions: playful game doors, quiet editor ──────────────── */
      #cqhub-overlay {
        padding-inline: clamp(16px, 4vw, 64px);
      }
      #cqhub-overlay .settings-topbar,
      #cqhub-account,
      #cqhub-beta,
      #cqhub-overview {
        max-width: 1160px;
      }
      #cqhub-editor,
      #cqhub-submit {
        max-width: 900px;
      }
      #cqhub-overlay .settings-topbar {
        margin-bottom: 12px;
      }
      #cqhub-overlay .settings-title {
        font-size: clamp(1.45rem, 2.2vw, 2rem);
      }
      #cqhub-account {
        flex: 0 0 auto;
        min-height: 1.35em;
        margin-bottom: 14px;
        padding: 0 4px;
        text-align: right;
        color: rgba(255, 255, 255, 0.58);
        font-size: 0.84rem;
      }
      #cqhub-beta {
        flex: 0 0 auto;
        margin-bottom: 14px;
        padding: 10px 14px;
        border-radius: 14px;
        font-size: 0.88rem;
        line-height: 1.45;
      }
      .cqhub-hero {
        position: relative;
        isolation: isolate;
        flex: 0 0 auto;
        width: 100%;
        min-height: clamp(210px, 23vw, 285px);
        margin-bottom: clamp(16px, 2vw, 24px);
        padding: clamp(26px, 4vw, 52px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(290px, 0.8fr);
        align-items: center;
        gap: 24px;
        overflow: hidden;
        border-radius: clamp(24px, 3vw, 36px);
        background:
          radial-gradient(circle at 9% 20%, rgba(255,255,255,.2) 0 5px, transparent 6px),
          linear-gradient(130deg, #6f3fc4 0%, #8b4fd0 48%, #d86b32 120%);
        color: #fff;
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.27);
      }
      .cqhub-hero::after {
        content: "؟";
        position: absolute;
        z-index: -1;
        inset: -62px auto auto -12px;
        color: rgba(255, 255, 255, 0.08);
        font-size: 260px;
        font-weight: 950;
        transform: rotate(-9deg);
      }
      .cqhub-hero-copy {
        position: relative;
        z-index: 3;
      }
      .cqhub-hero-kicker {
        display: inline-block;
        margin-bottom: 10px;
        padding: 6px 11px;
        border-radius: 999px;
        background: rgba(20, 8, 41, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.22);
        font-size: 0.8rem;
        font-weight: 900;
      }
      .cqhub-hero h1 {
        max-width: 650px;
        margin: 0 0 8px;
        font-size: clamp(2.25rem, 4.8vw, 4.6rem);
        line-height: 1;
        letter-spacing: -0.055em;
        text-wrap: balance;
        text-shadow: 0 4px 0 rgba(34, 12, 67, 0.22);
      }
      .cqhub-hero p {
        margin: 0;
        color: rgba(255, 255, 255, 0.82);
        font-size: clamp(0.96rem, 1.45vw, 1.15rem);
        font-weight: 750;
      }
      .cqhub-hero-art {
        position: relative;
        min-height: 190px;
        direction: ltr;
      }
      .cqhub-hero-art img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: clamp(112px, 11vw, 155px);
        aspect-ratio: 0.74;
        object-fit: cover;
        border: 3px solid #fff8ee;
        border-radius: 15px;
        box-shadow: 0 17px 32px rgba(30, 9, 53, 0.34);
      }
      .cqhub-hero-art img:nth-child(1) { transform: translate(-94%, -45%) rotate(-10deg); }
      .cqhub-hero-art img:nth-child(2) { z-index: 2; transform: translate(-50%, -53%); }
      .cqhub-hero-art img:nth-child(3) { transform: translate(-6%, -45%) rotate(10deg); }
      #cqhub-overlay .cqhub-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(12px, 1.7vw, 20px);
        margin-bottom: 16px;
      }
      #cqhub-overlay .cqhub-card {
        min-width: 0;
        padding: 0;
        gap: 0;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 22px;
        background: #fffaf1;
        color: #241c16;
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
      }
      #cqhub-overlay .cqhub-card.is-clickable:hover {
        transform: translateY(-5px) rotate(-0.3deg);
        background: #fffaf1;
        box-shadow: 0 22px 48px rgba(0, 0, 0, 0.3);
      }
      .cqhub-card-visual {
        position: relative;
        height: clamp(165px, 17vw, 225px);
        overflow: hidden;
        background: #101d29;
      }
      .cqhub-card-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(4, 18, 28, 0.26), transparent 52%);
        pointer-events: none;
      }
      .cqhub-card-visual > img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform 280ms var(--ease-out);
      }
      .cqhub-card:hover .cqhub-card-visual > img {
        transform: scale(1.035);
      }
      #cqhub-overlay .cqhub-card-status {
        position: absolute;
        z-index: 2;
        top: 11px;
        right: 11px;
        min-width: 32px;
        min-height: 28px;
        display: grid;
        place-items: center;
        padding: 4px 9px;
        color: #fff;
        background: rgba(4, 18, 28, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.22);
        backdrop-filter: blur(7px);
      }
      #cqhub-overlay .cqhub-card-status.is-owned,
      #cqhub-overlay .cqhub-card-status.is-beta {
        color: #063f3b;
        background: #7ff4e4;
        border-color: rgba(255, 255, 255, 0.68);
      }
      .cqhub-card-body {
        flex: 1;
        padding: 17px;
        display: flex;
        flex-direction: column;
        gap: 7px;
      }
      #cqhub-overlay .cqhub-card-head {
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
      }
      #cqhub-overlay .cqhub-card-name {
        color: #241c16;
        font-size: clamp(1.2rem, 1.7vw, 1.55rem);
        line-height: 1.15;
      }
      #cqhub-overlay .cqhub-card-count {
        flex: 0 0 auto;
        color: #8a6d58;
        font-size: 0.75rem;
      }
      #cqhub-overlay .cqhub-card-count-num {
        color: #8a6d58;
        font-size: inherit;
      }
      #cqhub-overlay .cqhub-card-desc {
        min-height: 2.7em;
        color: #6d5a4e;
        font-size: 0.88rem;
        line-height: 1.4;
      }
      #cqhub-overlay .cqhub-card-foot {
        margin-top: auto;
        display: block;
      }
      #cqhub-overlay .cqhub-card-cta {
        width: 100%;
        min-height: 40px;
        padding: 8px 12px;
        border: 0;
        border-radius: 12px;
        color: #fff;
        background: var(--cqhub-card-accent);
        box-shadow: 0 4px 0 color-mix(in srgb, var(--cqhub-card-accent), #000 28%);
      }
      #cqhub-overlay .cqhub-card-cta.is-secondary {
        color: #241c16;
        background: #eee4d7;
        box-shadow: 0 4px 0 #c8b7a5;
      }
      #cqhub-overlay .cqhub-suggest-btn {
        width: fit-content;
        margin: 4px auto 0;
        padding: 10px 18px;
        border-radius: 999px;
        font-size: 0.9rem;
      }
      #cqhub-overlay .cqhub-editor-head {
        min-height: 88px;
        padding: 11px 14px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-right: 5px solid var(--cqhub-accent);
        border-top: 0;
        background: rgba(255, 255, 255, 0.07);
        box-shadow: none;
      }
      .cqhub-editor-art {
        width: 58px;
        height: 72px;
        border-radius: 9px;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.76);
        transform: rotate(-3deg);
      }
      #cqhub-overlay .cqhub-editor-title {
        color: #fff;
        font-size: clamp(1.35rem, 2.2vw, 1.8rem);
      }
      #cqhub-overlay .cqhub-crumb {
        order: 3;
        margin-inline-start: auto;
        color: #fff;
        border-color: rgba(255, 255, 255, 0.24);
        background: rgba(255, 255, 255, 0.08);
      }
      #cqhub-overlay .cqhub-locked {
        min-height: 300px;
        justify-content: center;
        background:
          radial-gradient(circle at 50% 0, rgba(229, 141, 0, 0.16), transparent 56%),
          rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: none;
      }
      #cqhub-overlay .cqhub-locked-text {
        max-width: 360px;
        font-size: 0.94rem;
      }
      #cqhub-overlay .cqhub-locked-cta {
        min-width: 180px;
        border-radius: 14px;
        box-shadow: 0 5px 0 #a96300;
      }
      #cqhub-overlay .cqhub-composer {
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
      }
                                          @media (max-width: 980px) {
        #cqhub-overlay .cqhub-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 620px) {
        #cqhub-overlay {
          padding-inline: 14px;
        }
        #cqhub-overlay .settings-topbar {
          gap: 12px;
        }
        #cqhub-overlay .btn-back {
          padding: 9px 14px;
          font-size: 1rem;
        }
        .cqhub-hero {
          min-height: 390px;
          padding: 24px 20px 0;
          grid-template-columns: 1fr;
          align-items: start;
        }
        .cqhub-hero h1 {
          font-size: clamp(2.35rem, 13vw, 3.35rem);
        }
        .cqhub-hero-art {
          min-height: 170px;
        }
        .cqhub-hero-art img {
          width: clamp(105px, 30vw, 132px);
        }
        #cqhub-overlay .cqhub-grid {
          grid-template-columns: 1fr;
        }
        #cqhub-overlay .cqhub-card {
          display: grid;
          grid-template-columns: 42% minmax(0, 58%);
        }
        .cqhub-card-visual {
          height: 100%;
          min-height: 190px;
        }
        #cqhub-overlay .cqhub-card-desc {
          min-height: 0;
        }
        #cqhub-overlay .cqhub-editor-head {
          min-height: 76px;
        }
        .cqhub-editor-art {
          width: 46px;
          height: 58px;
        }
        #cqhub-overlay .cqhub-crumb {
          padding: 6px 10px;
          font-size: 0.8rem;
        }
      }

      /* ── Submit view (suggest questions) ──────────────────────────────────── */
      .cqhub-submit-intro {
        color: rgba(255, 255, 255, 0.7);
        font-size: 1rem;
        line-height: 1.6;
        margin: 0 0 var(--sp-4);
      }
      .cqhub-submit-field {
        margin-bottom: var(--sp-4);
      }
      .cqhub-submit-flabel {
        display: block;
        font-weight: 800;
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: var(--sp-2);
      }
      .cqhub-game-picker {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2);
      }
      .cqhub-game-chip {
        background: rgba(255, 255, 255, 0.07);
        color: #fff;
        border: 2px solid rgba(255, 255, 255, 0.15);
        border-radius: var(--rad-pill);
        padding: 8px 16px;
        font-family: inherit;
        font-weight: 800;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all var(--dur-base) var(--ease-out);
      }
      .cqhub-game-chip:hover {
        border-color: rgba(255, 255, 255, 0.4);
      }
      .cqhub-game-chip.is-on {
        background: var(--primary);
        border-color: var(--primary);
        color: var(--color-on-primary, #fff);
      }
      .cqhub-submit-answer {
        width: 100%;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.07);
        color: #fff;
        border: 2px solid rgba(255, 255, 255, 0.15);
        border-radius: var(--rad-md);
        padding: var(--sp-3) var(--sp-4);
        font-family: inherit;
        font-weight: 700;
        font-size: 1.05rem;
      }
      .cqhub-submit-answer:focus {
        outline: none;
        border-color: var(--primary);
      }
      #cqhub-submit .cqhub-add-btn {
        width: 100%;
      }

      /* ── Developer submissions review (📥) ────────────────────────────────── */
      #admin-overlay {
        position: fixed;
        inset: 0;
        z-index: 215;
        background: var(--bg);
        display: none;
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        padding: var(--sp-6) var(--sp-7) var(--sp-8);
      }
      #admin-overlay.open {
        display: flex;
      }
      .admin-list {
        width: 100%;
        max-width: 820px;
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        margin-top: var(--sp-3);
      }
      .admin-row {
        background: var(--card);
        border-radius: var(--rad-md);
        padding: var(--sp-3) var(--sp-4);
        box-shadow: var(--shadow-sm, var(--shadow));
        display: flex;
        flex-direction: column;
        gap: 6px;
        text-align: right;
      }
      .admin-row .ar-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--sp-3);
        flex-wrap: wrap;
      }
      .admin-row .ar-game {
        font-weight: 900;
        font-size: 1.05rem;
        color: var(--primary);
      }
      .admin-row .ar-source {
        display: inline-block;
        padding: 1px 10px;
        border-radius: var(--rad-pill);
        font-weight: 800;
        font-size: 0.78rem;
        background: var(--color-surface-2, rgba(0, 0, 0, 0.06));
        color: var(--text);
      }
      .admin-row .ar-source.is-direct {
        background: var(--accent-teal, #2dd4bf);
        color: var(--color-on-primary, #fff);
      }
      .admin-row .ar-text {
        font-weight: 700;
        font-size: 1.05rem;
        line-height: 1.5;
      }
      .admin-row .ar-answer {
        font-size: 0.92rem;
        color: var(--muted);
        font-weight: 700;
      }
      .admin-row .ar-meta {
        display: flex;
        justify-content: space-between;
        gap: var(--sp-2);
        font-size: 0.82rem;
        color: var(--muted);
        flex-wrap: wrap;
      }
      .admin-empty {
        width: 100%;
        max-width: 820px;
        text-align: center;
        color: var(--muted);
        padding: var(--sp-7);
        font-size: 1.05rem;
      }
      /* ══ Mobile (≤ 768 px) — host app responsive overrides ═══════════════
         @media only — desktop styles are never touched.
         Game-selection screen is excluded per spec.                         */
      @media (max-width: 768px) {
        /* ─── 1. Orange bars fix ─────────────────────────────────────────
           The root <html> background now lives in design-tokens.css
           (`html { background: var(--color-bg) }`), so it applies to host AND
           player at every viewport size — no orange/white bleeds through the
           safe-area insets or the overscroll bounce. (theme-color meta is
           #071523, see <head>.) */

        /* ─── 2. Main menu: allow vertical scroll on short phones ────── */
        #main-menu {
          overflow-y: auto;
          overflow-x: hidden;
        }

        /* ─── 3. Lobby: vertical stacking ───────────────────────────── */

        /* #app is position:fixed;inset:0 in lobby — make it scroll */
        body.lobby-phase #app {
          overflow-y: auto;
          overflow-x: hidden;
        }

        /* Column layout; height auto so content drives the height */
        body.lobby-phase .lobby-layout {
          flex-direction: column;
          height: auto;
          min-height: 100%;
          overflow-x: hidden;
          padding-bottom: clamp(70px, 12vh, 90px); /* gap for abs footer */
        }

        /* Scatter (top): full width, fixed height band */
        .lobby-scatter {
          width: 100%;
          flex: 0 0 auto;
          min-height: clamp(200px, 46vw, 270px);
          position: static; /* so footer can be abs relative to .lobby-layout */
        }

        /* Extra top-padding clears the overlay control buttons */
        .lobby-scatter-bubbles {
          padding-top: clamp(64px, 10vh, 80px);
          min-height: clamp(160px, 38vw, 230px);
        }

        /* Badge: center and scale down for narrow screen */
        .lobby-badge-container {
          left: 50%;
          transform: translate(-50%, -50%);
          width: 200px;
          height: 300px;
        }
        .lobby-game-logo-img {
          left: 50%;
          top: 45%;
          transform: translate(-50%, -50%);
          width: 160px;
        }

        /* Footer: pin to bottom of layout, full width */
        .lobby-scatter-footer {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 10px 16px clamp(12px, 3.5vh, 24px);
          gap: 10px;
          z-index: 10;
          background: linear-gradient(
            to top,
            rgba(7, 21, 35, 0.97) 55%,
            transparent
          );
          box-sizing: border-box;
        }
        .btn-lobby-start-new {
          min-height: 48px;
        }

        /* Info panel (below scatter): full width */
        .lobby-info-panel {
          width: 100%;
          padding: 12px 20px clamp(16px, 3vh, 28px);
          gap: clamp(8px, 1.5vh, 14px);
          flex-shrink: 0;
        }

        /* Keep the join target readable on portrait host screens. */
        .lobby-qr-card img {
          width: clamp(200px, 56vw, 280px) !important;
          height: clamp(200px, 56vw, 280px) !important;
        }

        /* Scale down room code */
        .lobby-room-code {
          font-size: clamp(2rem, 8vw, 2.8rem);
        }

        /* Slightly shorter top-controls bar */
        .lobby-top-controls {
          height: clamp(54px, 7vh, 70px);
        }
      }

      /* ════════════════════════════════════════════════════════════════════
         HOST — FORCED-LANDSCAPE STAGE
         The native iPhone bridge locks the host surface to landscape; iPad
         follows its resizable scene. Two things follow:
           1. Short landscape phones (≤ 540px tall — incl. SE/mini that are also
              ≤ 768px WIDE) must NOT fall into the portrait column-stack above.
              Keep the side-by-side stage and size everything off viewport
              HEIGHT so the QR + room code never overflow a 320–430px viewport.
           2. In landscape the notch / Dynamic Island + home indicator sit on
              the SIDES → pad edge content off safe-area-inset-left/right.
         iPad landscape (height ≥ 768) keeps the spacious base layout. ──────── */

      /* Keep browser controls clear of the QR on short landscape screens. */
      @media (orientation: landscape) and (max-height: 540px) {
        body.lobby-phase .lobby-info-panel {
          padding-top: 80px;
        }
        html:not(.native) body.lobby-phase .lobby-info-panel {
          margin-top: 72px;
          height: calc(100% - 72px);
          padding-top: 8px;
        }
      }
      @media (max-width: 768px) {
        html:not(.native) body.lobby-phase #top-left-bar {
          top: 16px;
          left: 16px;
          gap: 8px;
          height: 44px;
        }
        html:not(.native) body.lobby-phase #top-left-bar > * {
          margin: 0;
        }
        html:not(.native) body.lobby-phase #top-left-bar #back-btn {
          width: 92px;
          min-width: 0;
          height: 44px;
          min-height: 44px;
          padding: 6px 12px;
          font-size: 0.9rem;
        }
        html:not(.native) body.lobby-phase #room-code-pill {
          width: 68px;
          min-width: 68px;
          max-width: 68px;
          flex: 0 0 68px;
          padding: 4px 8px;
        }
        html:not(.native) body.lobby-phase #room-code-pill .rcp-value {
          font-size: 0.9rem;
          letter-spacing: 0.12em;
        }
        html:not(.native) body.lobby-phase #top-left-bar #gear-btn {
          width: 44px;
          min-width: 44px;
          height: 44px;
          min-height: 44px;
          padding: 0;
          font-size: 0;
        }
        html:not(.native) body.lobby-phase #top-left-bar #gear-btn::before {
          content: "⚙";
          font-size: 1rem;
        }
      }

      /* Legacy compatibility for older native shells that marked a forced
         landscape host directly on the document. */
      html.mj-host-locked #rotate-overlay {
        display: none !important;
      }

      /* Native shell polish: system safe areas replace browser chrome, and an
         HTML fullscreen control has no useful meaning inside an iOS scene. */
      html.native #fullscreen-btn {
        display: none !important;
      }
      html.native-ipad #main-menu .mm-auth,
      html.native-ipad #main-menu .btn-mm-mute {
        top: max(14px, calc(env(safe-area-inset-top) + 10px));
      }
      html.native-ipad #settings-overlay,
      html.native-ipad #store-overlay,
      html.native-ipad #cqhub-overlay,
      html.native-ipad #history-overlay,
      html.native-ipad #admin-overlay {
        padding-top: max(var(--sp-5), calc(env(safe-area-inset-top) + 12px));
        padding-right: max(var(--sp-6), calc(env(safe-area-inset-right) + 18px));
        padding-bottom: max(var(--sp-7), calc(env(safe-area-inset-bottom) + 18px));
        padding-left: max(var(--sp-6), calc(env(safe-area-inset-left) + 18px));
      }

      /* Keep SELECT inside every native host stage. The web layout intentionally
         scrolls the document and scales it with CSS zoom; in WKWebView that
         exposes page rubber-banding and feels like Safari. Both the resizable
         iPad host and short landscape iPhone host use a fixed shell with one
         bounded inner scroller instead. */
      html.native body.select-phase {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding-top: max(var(--sp-5), calc(var(--safe-top) + 12px));
        padding-right: max(var(--sp-6), calc(var(--safe-right) + 18px));
        padding-bottom: max(var(--sp-6), calc(var(--safe-bot) + 18px));
        padding-left: max(var(--sp-6), calc(var(--safe-left) + 18px));
      }
      html.native body.select-phase #app {
        height: 100%;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        zoom: 1;
      }
      @media (orientation: portrait) and (min-width: 600px) {
        html.native-android.native-ipad body.select-phase #top-left-bar {
          right: max(20px, var(--safe-right));
          justify-content: space-between;
        }
      }

      /* Edge-safe floating controls in ANY landscape (gameplay phases, iPad
         included). The lobby keeps fullscreen rightmost and offsets mute left. */
      @media (orientation: landscape) {
        #fullscreen-btn {
          top: max(16px, var(--safe-top));
          right: max(16px, var(--safe-right));
        }
        #top-left-bar {
          left: max(20px, var(--safe-left));
        }
      }

      /* Short landscape viewport ⇒ a phone. Reclaim the side-by-side stage and
         drive every dimension off viewport height so nothing scrolls. */
      @media (orientation: landscape) and (max-height: 540px) {
        body.lobby-phase #app {
          overflow: hidden;
        }
        body.lobby-phase .lobby-layout {
          flex-direction: row;
          height: 100%;
          min-height: 0;
          overflow: hidden;
          padding-bottom: 0;
        }
        .lobby-scatter {
          width: auto;
          flex: 1 1 0;
          min-height: 0;
          position: relative;
        }
        .lobby-scatter-bubbles {
          padding-top: clamp(40px, 12vh, 70px);
          min-height: 0;
        }
        /* Badge hugs the left edge again (clear of the side notch), scaled to
           the short height. */
        .lobby-badge-container {
          left: calc(-46px + var(--safe-left));
          top: 50%;
          transform: translateY(-50%);
          width: clamp(170px, 58vh, 250px);
          height: clamp(255px, 87vh, 375px);
        }
        .lobby-game-logo-img {
          left: 64%;
          top: 45%;
          width: clamp(140px, 46vh, 220px);
        }
        /* Footer flows under the bubbles instead of pinning a gradient over
           them — there is no vertical room to spare. */
        .lobby-scatter-footer {
          position: static;
          background: none;
          padding: 0 14px max(8px, var(--safe-bot));
          gap: 8px;
        }
        /* Right rail: fluid width, height-aware spacing, safe on the right.
           Anchor content to the TOP so the QR + room code (what players act on)
           are always fully visible; any overflow falls to the low-priority
           credit line at the bottom rather than clipping the QR off-screen. */
        .lobby-info-panel {
          width: clamp(232px, 32vw, 340px);
          padding: clamp(6px, 2.2vh, 14px)
            calc(clamp(14px, 2.5vw, 28px) + var(--safe-right))
            clamp(6px, 2.2vh, 14px) clamp(14px, 2.5vw, 28px);
          gap: clamp(5px, 1.6vh, 12px);
          justify-content: flex-start;
        }
        .lobby-qr-card {
          padding: 8px;
        }
        .lobby-qr-card img {
          width: clamp(100px, 32vh, 160px) !important;
          height: clamp(100px, 32vh, 160px) !important;
        }
        .lobby-room-code {
          font-size: clamp(2rem, 11vh, 3.4rem);
        }
        .lobby-player-count {
          font-size: clamp(1rem, 5vh, 1.5rem);
        }
        .lobby-top-controls {
          height: clamp(44px, 13vh, 64px);
        }
      }

      /* ── Main menu: reliable vertical scroll on SHORT viewports ───────────
         The forced-landscape host runs in a short viewport that is often WIDER
         than 768px, so the `@media (max-width:768px)` scroll rule above never
         fires there and the base `overflow:hidden` (Figma block) clips the
         lower buttons out of reach. Target the actual failure condition — a
         short viewport in landscape — independent of width, and make the
         overlay scroll with momentum + safe-area padding. The game-SELECT
         screen scrolls the same way. */
      @media (orientation: landscape) and (max-height: 600px) {
        #main-menu {
          overflow-y: auto;
          overflow-x: hidden;
          -webkit-overflow-scrolling: touch;
          /* Let content drive the height so it can grow past the viewport and
             scroll, while still filling a tall-enough screen. */
          justify-content: flex-start;
          padding-top: max(var(--sp-3), var(--safe-top));
          padding-bottom: max(var(--sp-4), var(--safe-bot));
        }
        /* Spacers must not consume the scroll height on a short screen —
           collapse the elastic flex so every button stays reachable. */
        #main-menu .mm-spacer-top {
          flex: 0 0 auto;
          min-height: var(--sp-3);
        }
        #main-menu .mm-spacer-mid {
          flex: 0 0 auto;
          min-height: var(--sp-2);
        }
        #main-menu .mm-spacer-bot {
          flex: 0 0 auto;
          min-height: var(--sp-3);
        }
      }

      /* The host is a TV-style surface: active game phases must fit in one
         frame. Compact desktop 720p and landscape iPad stages instead of
         allowing the lower result controls to fall below the scene. */
      @media (max-height: 1050px) and (min-width: 700px) {
        body:not(.leaderboard-phase) { padding: 10px 20px 14px; }
        .page-header { margin-bottom: 2px; }
        .page-header.has-game-logo .brand-logo { height: 38px; }
        .page-header.has-game-logo .game-logo { height: 56px; }
        .game-logo-wrap.visible { margin-right: 12px; }
        .round-badge { padding: 5px 20px; margin-bottom: 6px; }
        .label, .label.label-verb { margin: 3px auto 6px; }
        .prompt-text {
          padding: 18px 24px;
          margin-bottom: 8px !important;
          line-height: 1.3;
        }
        .answer-timer { margin: 4px auto 8px; padding: 7px 20px; }
        .counter { margin: 5px 0; }
        .duel-chip { padding: 5px 14px; margin-bottom: 4px; }
        .duel-arena { margin: 5px 0 3px; gap: 20px; }
        .duel-side {
          min-height: 190px;
          padding: 22px 24px;
          gap: 9px;
          border-radius: 24px;
        }
        .duel-judge-progress { margin-top: 5px; padding: 7px 14px; }
        .mission-card { padding: 16px 28px; gap: 9px; margin: 3px 0; }
        .mission-tagline { line-height: 1.25; }
        .mission-warn { padding: 6px 14px; }
        .avatar-grid { gap: 8px 16px; margin: 0; }
        .avatar-grid-img { width: 62px; height: 62px; }
        .faker-vote-card { padding: 16px 28px; margin: 3px 0; }
        .vote-counter-pill { margin: 5px 0; padding: 5px 20px; }
        .faker-verdict-frame {
          gap: 4px;
          margin: 2px 0 4px;
          padding: 7px 24px;
        }
        .faker-verdict-frame .verdict { font-size: clamp(1.8rem, 3.2vw, 3rem); }
        .faker-verdict-frame .verdict-sub { line-height: 1.25; }
        .faker-reveal-hero {
          flex-direction: row;
          justify-content: center;
          gap: 10px;
          margin: 2px 0;
        }
        .faker-reveal-avatar { width: 52px; height: 52px; }
        .faker-reveal-name { font-size: 1.55rem; }
        .prompt-reveal-line { padding: 7px 18px; margin: 3px 0; }
        .player-result-grid { gap: 8px; margin: 4px 0; }
        .result-card { padding: 6px 10px; border-radius: 16px; }
        .result-card .result-avatar { width: 38px; height: 38px; margin-bottom: 2px; }
        .result-card .name { font-size: 1.15rem; margin-bottom: 2px; }
        .result-card .vote-count { font-size: 0.9rem; }
        .result-card .tag { margin-top: 2px; padding: 2px 8px; }
        .faker-result-action .btn-primary { padding: 9px 22px; font-size: 1.1rem; }
        .mahkama-answer-grid { margin: 10px auto !important; gap: 9px !important; }
        .mahkama-reveal-action { margin-top: 6px !important; }
        .mahkama-reveal-action .btn-primary { padding: 10px 22px; font-size: 1.1rem; }
      }

      /* ── Canonical non-game navigation controls ─────────────────────────
         SELECT's illustrated back pill is the single asset for every menu,
         overlay, lobby and rules screen. Active games keep their own pause /
         exit language and never inherit this component. */
      #top-left-bar #back-btn,
      #settings-overlay .btn-back,
      #store-overlay .btn-back,
      #cqhub-overlay .btn-back,
      #history-overlay .btn-back,
      #admin-overlay .btn-back {
        width: clamp(146px, 12vw, 168px);
        min-width: clamp(146px, 12vw, 168px);
        height: clamp(82px, 7vw, 94px);
        min-height: clamp(82px, 7vw, 94px);
        padding: 0;
        border: 0;
        outline: 0;
        border-radius: 0;
        background: transparent url("/assets/select-backbtn.webp") left center / auto 100% no-repeat;
        color: transparent;
        font-size: 0;
        line-height: 0;
        text-shadow: none;
        box-shadow: none;
        backdrop-filter: none;
        overflow: hidden;
        cursor: pointer;
        filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.42));
        transition: transform 120ms var(--ease-out-soft), filter 120ms ease;
      }
      #top-left-bar #back-btn:hover,
      #settings-overlay .btn-back:hover,
      #store-overlay .btn-back:hover,
      #cqhub-overlay .btn-back:hover,
      #history-overlay .btn-back:hover,
      #admin-overlay .btn-back:hover {
        background: transparent url("/assets/select-backbtn.webp") left center / auto 100% no-repeat;
        transform: translateY(-2px);
        filter: brightness(1.08) drop-shadow(0 7px 11px rgba(0, 0, 0, 0.46));
      }
      #top-left-bar #back-btn:active,
      #settings-overlay .btn-back:active,
      #store-overlay .btn-back:active,
      #cqhub-overlay .btn-back:active,
      #history-overlay .btn-back:active,
      #admin-overlay .btn-back:active {
        transform: translateY(3px);
        filter: brightness(0.96) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.38));
      }

      /* The floating browser-fullscreen affordance needs TV-distance weight
         comparable to the larger navigation pill. */
      #fullscreen-btn {
        width: clamp(58px, 5.2vw, 68px);
        height: clamp(58px, 5.2vw, 68px);
        min-width: clamp(58px, 5.2vw, 68px);
        min-height: clamp(58px, 5.2vw, 68px);
        padding: 0;
        align-items: center;
        justify-content: center;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 18px;
        background: rgba(15, 89, 123, 0.9);
        color: #fff;
        box-shadow: 0 5px 0 #0a3a52, 0 8px 20px rgba(0, 0, 0, 0.42);
      }
      #fullscreen-btn svg {
        width: clamp(28px, 2.4vw, 32px);
        height: clamp(28px, 2.4vw, 32px);
      }

      /* Fullscreen stays available throughout web gameplay. Each mode gives
         the shared icon its own physical material so it belongs to the stage
         instead of looking like a menu control pasted over the game. */
      html:not(.native) body[data-theme]:not(.select-phase):not(.lobby-phase) #fullscreen-btn {
        display: inline-flex !important;
        z-index: 105;
        top: max(18px, env(safe-area-inset-top));
        right: max(18px, env(safe-area-inset-right));
        width: clamp(48px, 4.5vw, 58px);
        min-width: clamp(48px, 4.5vw, 58px);
        height: clamp(48px, 4.5vw, 58px);
        min-height: clamp(48px, 4.5vw, 58px);
        opacity: 0.84;
        transition: transform 140ms ease, opacity 140ms ease, filter 140ms ease;
      }
      html:not(.native) body[data-theme]:not(.select-phase):not(.lobby-phase) #fullscreen-btn:hover,
      html:not(.native) body[data-theme]:not(.select-phase):not(.lobby-phase) #fullscreen-btn:focus-visible {
        opacity: 1;
      }
      html:not(.native) body[data-theme="answers"]:not(.select-phase):not(.lobby-phase) #fullscreen-btn {
        color: #07090d;
        background: #fff;
        border: 3px solid #07090d;
        border-radius: 9px;
        box-shadow: 5px 5px 0 #07090d;
        transform: rotate(1deg);
      }
      html:not(.native) body[data-theme="answers"]:not(.select-phase):not(.lobby-phase) #fullscreen-btn:hover {
        transform: translateY(-2px) rotate(1deg);
      }
      html:not(.native) body[data-theme="faker"]:not(.select-phase):not(.lobby-phase) #fullscreen-btn {
        color: #11100e;
        background: #f8f5ed;
        border: 3px solid #11100e;
        border-radius: 3px;
        box-shadow: 6px 6px 0 #ef5f50;
        transform: rotate(-2deg);
      }
      html:not(.native) body[data-theme="faker"]:not(.select-phase):not(.lobby-phase) #fullscreen-btn:hover {
        transform: translateY(-2px) rotate(-2deg);
      }
      html:not(.native) body[data-theme="khallat"]:not(.select-phase):not(.lobby-phase) #fullscreen-btn {
        color: #171310;
        background: #f4e6ba;
        border: 3px solid #171310;
        border-radius: 5px 11px 6px 9px;
        box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.72);
        transform: rotate(1.5deg);
      }
      html:not(.native) body[data-theme="khallat"]:not(.select-phase):not(.lobby-phase) #fullscreen-btn:hover {
        transform: translateY(-2px) rotate(1.5deg);
      }
      html:not(.native) body[data-theme="percent"]:not(.select-phase):not(.lobby-phase) #fullscreen-btn {
        color: #071523;
        background: #f0a91d;
        border: 3px solid #fff4d5;
        border-radius: 50%;
        box-shadow: 0 0 0 3px #071523, 0 7px 0 #9b5700;
      }
      html:not(.native) body[data-theme="percent"]:not(.select-phase):not(.lobby-phase) #fullscreen-btn:hover {
        transform: translateY(-2px);
      }
      html:not(.native) body[data-theme="mahkama"]:not(.select-phase):not(.lobby-phase) #fullscreen-btn {
        color: #8ff5e6;
        background: #0a2418;
        border: 2px solid #2dd4bf;
        border-radius: 14px 4px 14px 4px;
        box-shadow: 0 0 0 3px #041410, 0 7px 0 #087568;
      }
      html:not(.native) body[data-theme="mahkama"]:not(.select-phase):not(.lobby-phase) #fullscreen-btn:hover {
        transform: translateY(-2px);
      }
      html:not(.native) body[data-theme="khedaa"]:not(.select-phase):not(.lobby-phase) #fullscreen-btn {
        color: #17130a;
        background: #e8b931;
        border: 3px solid #17130a;
        border-radius: 7px;
        box-shadow: 5px 5px 0 #17130a;
        transform: rotate(-1deg);
      }
      html:not(.native) body[data-theme="khedaa"]:not(.select-phase):not(.lobby-phase) #fullscreen-btn:hover {
        transform: translateY(-2px) rotate(-1deg);
      }
      html:not(.native) body[data-theme]:not(.select-phase):not(.lobby-phase) #fullscreen-btn.is-fullscreen {
        opacity: 1;
        filter: brightness(1.12);
      }
      html:not(.native) body.settings-overlay-open #fullscreen-btn {
        display: inline-flex !important;
        z-index: 220;
        top: clamp(8px, 1.2vh, 16px);
        right: clamp(8px, 2vw, 20px);
      }
      @media (max-width: 520px) {
        #settings-overlay .settings-title {
          font-size: 1.3rem;
        }
        #settings-overlay .btn-back {
          width: 112px;
          min-width: 112px;
          height: 64px;
          min-height: 64px;
        }
      }
      /* One timer face for writing, voting, results and round scores. */
      body :is(#auto-advance-indicator, .sh-unified-timer).sh-unified-timer {
        position: fixed;
        z-index: 90;
        top: var(--sh-timer-top, max(24px, env(safe-area-inset-top)));
        right: var(--sh-timer-right, auto);
        left: var(--sh-timer-left, max(24px, env(safe-area-inset-left)));
        bottom: auto;
        width: var(--sh-timer-size, 78px);
        height: var(--sh-timer-size, 78px);
        min-width: 0;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 4px;
        display: grid;
        place-items: stretch;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        gap: 0;
        box-sizing: border-box;
        border: 3px solid #07090d;
        border-radius: 8px 11px 7px 10px;
        background: #fff;
        color: #07090d;
        box-shadow: 3px 4px 0 #07090d;
        backdrop-filter: none;
        transform: none;
        animation: none;
        font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
        font-size: var(--sh-timer-font, 1.35rem);
        font-weight: 900;
        line-height: 1.15;
        pointer-events: none;
      }
      body .sh-stage-countdown-slot:has(.sh-unified-timer) {
        display: contents;
        opacity: 1;
        transform: none;
      }
      body :is(#auto-advance-indicator, .sh-unified-timer).sh-unified-timer :is(.aai-label, .at-fill) {
        display: none;
      }
      body :is(#auto-advance-indicator, .sh-unified-timer).sh-unified-timer :is(.aai-count, .at-num) {
        display: grid;
        place-items: center;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        min-width: 0;
        padding: 0;
        border: 3px solid #07090d;
        border-radius: 5px 7px 5px 6px;
        background: #ffd22e;
        color: #07090d;
        font-size: inherit;
        font-variant-numeric: tabular-nums;
        line-height: inherit;
        text-align: center;
        transform: rotate(1deg);
      }
      body #auto-advance-indicator.sh-unified-timer.is-paused {
        font-size: .7rem;
      }