:root {
    --bg: #07070d;
    --surface: rgba(255,255,255,0.035);
    --surface-solid: #111118;
    --surface-2: rgba(255,255,255,0.06);
    --border: rgba(255,255,255,0.07);
    --border-hover: rgba(255,255,255,0.14);
    --text: #ece9e1;
    --text-dim: #7d7a8a;
    --text-mid: #a9a6b5;
    --accent: #00d2d3;
    --accent-2: #c56cf0;
    --success: #00d26a;
    --warning: #feca57;
    --danger: #ff4060;
    --radius: 20px;
  }

  html.theme-servicenow {
    --bg: #00182D;
    --surface: rgba(0,100,170,0.08);
    --surface-solid: #002244;
    --surface-2: rgba(0,100,170,0.14);
    --border: rgba(255,255,255,0.09);
    --border-hover: rgba(255,255,255,0.18);
    --text: #E8EFF7;
    --text-dim: #7A9CBF;
    --text-mid: #A8C0D8;
    --accent: #62D84E;
    --accent-2: #00C7B1;
    --success: #62D84E;
    --warning: #F5A623;
    --danger: #FF4D4D;
  }

  * { margin:0; padding:0; box-sizing:border-box; }

  body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  .atmosphere {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
  }
  .atmosphere .mesh {
    position: absolute; border-radius: 50%; filter: blur(140px); opacity: 0.1;
    animation: drift 25s ease-in-out infinite;
  }
  .atmosphere .mesh:nth-child(1) { width: 600px; height: 600px; background: var(--accent); top: -15%; left: -10%; }
  .atmosphere .mesh:nth-child(2) { width: 500px; height: 500px; background: var(--accent-2); bottom: -15%; right: -10%; animation-delay: -9s; }
  .atmosphere .mesh:nth-child(3) { width: 400px; height: 400px; background: var(--warning); top: 50%; left: 40%; animation-delay: -16s; opacity: 0.06; }
  
  @keyframes drift {
    0%,100% { transform: translate(0,0) scale(1); }
    25% { transform: translate(40px,-30px) scale(1.08); }
    50% { transform: translate(-20px,40px) scale(0.95); }
    75% { transform: translate(30px,20px) scale(1.03); }
  }

  .grain {
    position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  #particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

  .app {
    position: relative; z-index: 1;
    max-width: 1200px; margin: 0 auto; padding: 20px;
    min-height: 100vh;
  }

  .app-footer {
    margin-top: 32px;
    padding: 18px 20px 28px;
    border-top: 1px solid rgba(255,255,255,0.09);
    text-align: center;
  }

  .app-footer-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--warning);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .app-footer-quote {
    max-width: 760px;
    margin: 0 auto;
    color: var(--text-mid);
    font-size: 0.98rem;
    line-height: 1.6;
  }

  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
  @keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
  @keyframes gameMovePop {
    0% { transform: scale(0.68); filter: brightness(1.35); }
    58% { transform: scale(1.14); filter: brightness(1.18); }
    100% { transform: scale(1); filter: brightness(1); }
  }
  @keyframes battleshipHitBurst {
    0% { transform: scale(0.72); filter: brightness(1.8); box-shadow: 0 0 0 rgba(255,85,126,0); }
    45% { transform: scale(1.18); filter: brightness(1.35); box-shadow: 0 0 0 8px rgba(255,85,126,0.2), 0 0 34px rgba(255,85,126,0.6); }
    100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 18px rgba(255,85,126,0.35); }
  }
  @keyframes battleshipShotSplash {
    0% { transform: scale(0.78); filter: brightness(1.4); }
    50% { transform: scale(1.1); filter: brightness(1.25); box-shadow: 0 0 0 7px rgba(97,190,255,0.16), 0 0 28px rgba(97,190,255,0.45); }
    100% { transform: scale(1); filter: brightness(1); }
  }
  .game-move-pop {
    animation: gameMovePop 420ms cubic-bezier(0.18, 0.9, 0.2, 1.22);
  }
  .battleship-hit-burst {
    animation: battleshipHitBurst 620ms ease-out;
  }
  .battleship-shot-splash {
    animation: battleshipShotSplash 520ms ease-out;
  }
  @keyframes bingoBallRollIn {
    0% { opacity: 0; transform: translateX(120px) rotate(540deg) scale(0.55); }
    65% { opacity: 1; transform: translateX(-12px) rotate(-14deg) scale(1.05); }
    100% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
  }
  @keyframes djBoothMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  @keyframes djBoothGlowPulse {
    0%, 100% { transform: translateY(0) scaleY(0.72); opacity: 0.48; }
    50% { transform: translateY(-2px) scaleY(1.08); opacity: 1; }
  }
  @keyframes djBoothPadFlash {
    0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0), inset 0 1px 0 rgba(255,255,255,0.08); }
    50% { box-shadow: 0 0 24px rgba(255,255,255,0.22), 0 0 42px var(--pad-glow, rgba(0,210,211,0.42)); }
  }

  .dj-booth-shell {
    display: grid;
    gap: 18px;
    max-width: 1320px;
    margin: 24px auto 0;
  }

  .dj-booth-banner {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.12);
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    padding: 16px 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  }

  .dj-booth-banner-track {
    display: inline-flex;
    min-width: max-content;
    gap: 48px;
    padding-right: 48px;
    animation: djBoothMarquee 18s linear infinite;
    will-change: transform;
  }

  .dj-booth-banner-copy {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.92rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.86);
    white-space: nowrap;
  }

  .dj-booth-light-rig {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    min-height: 110px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.1);
    background:
      radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  }

  .dj-booth-light {
    border-radius: 999px 999px 16px 16px;
    min-height: 26px;
    animation: djBoothGlowPulse 1.8s ease-in-out infinite;
    transform-origin: bottom center;
    box-shadow: 0 0 22px color-mix(in srgb, var(--light-color, var(--accent)) 48%, transparent);
  }

  .dj-booth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .dj-booth-panel,
  .dj-booth-mixer,
  .dj-booth-status-card,
  .dj-booth-pad-card {
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  }

  .dj-booth-player-frame {
    overflow: hidden;
    border-radius: 18px;
    min-height: 260px;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
  }

  .dj-booth-meter {
    position: relative;
    display: flex;
    align-items: end;
    gap: 6px;
    min-height: 68px;
  }

  .dj-booth-meter-bar {
    flex: 1;
    min-height: 10px;
    border-radius: 999px 999px 10px 10px;
    animation: djBoothGlowPulse 1.6s ease-in-out infinite;
  }

  .dj-booth-pad-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .dj-booth-pad {
    position: relative;
    width: 100%;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 16px 14px;
    text-align: left;
    color: #ffffff;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease;
  }

  .dj-booth-pad:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.22);
  }

  .dj-booth-pad:disabled {
    opacity: 0.75;
    cursor: default;
  }

  .dj-booth-pad-active {
    animation: djBoothPadFlash 0.55s ease-out 2;
  }

  .dj-booth-range {
    width: 100%;
    accent-color: var(--accent);
  }

  @media (max-width: 1040px) {
    .dj-booth-layout {
      grid-template-columns: 1fr;
    }

    .dj-booth-pad-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 640px) {
    .dj-booth-banner-copy {
      font-size: 0.78rem;
      letter-spacing: 0.1em;
    }

    .dj-booth-light-rig {
      gap: 6px;
      padding: 14px;
      min-height: 80px;
    }

    .dj-booth-pad-grid {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
  }

  .bingo-call-ball {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
      radial-gradient(circle at 28% 26%, rgba(255,255,255,0.98) 0 12%, rgba(255,255,255,0.32) 13%, rgba(255,255,255,0.06) 26%, transparent 27%),
      radial-gradient(circle at 34% 30%, rgba(255,255,255,0.24) 0 18%, transparent 46%),
      linear-gradient(160deg, rgba(255,255,255,0.38), rgba(255,255,255,0.08) 34%, color-mix(in srgb, var(--ball-color, #ef233c) 80%, #220312 20%) 35%, color-mix(in srgb, var(--ball-color, #ef233c) 64%, #07070d 36%) 100%);
    border: 4px solid rgba(255,255,255,0.82);
    box-shadow: 0 18px 34px rgba(0,0,0,0.34), inset -10px -12px 20px rgba(0,0,0,0.18), inset 10px 10px 18px rgba(255,255,255,0.18);
  }

  .bingo-call-ball::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.22);
    pointer-events: none;
  }

  .bingo-call-ball-faint {
    background:
      radial-gradient(circle at 28% 26%, rgba(255,255,255,0.68) 0 12%, rgba(255,255,255,0.2) 13%, rgba(255,255,255,0.04) 26%, transparent 27%),
      linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06) 38%, rgba(255,255,255,0.03) 100%);
    border-color: rgba(255,255,255,0.18);
    box-shadow: inset -8px -10px 16px rgba(0,0,0,0.08), inset 8px 8px 14px rgba(255,255,255,0.08);
    animation: none;
  }

  .bingo-call-ball-animate {
    animation: bingoBallRollIn 720ms cubic-bezier(0.2, 0.82, 0.24, 1);
  }

  .slides-studio-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }

  .slides-studio-sidebar,
  .slides-studio-panel {
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  }

  .slides-studio-filmstrip {
    display: grid;
    gap: 10px;
    max-height: 72vh;
    overflow: auto;
    padding-right: 2px;
  }

  .slides-studio-thumb {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.02);
    border-radius: 18px;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
    color: inherit;
  }

  .slides-studio-thumb:hover {
    transform: translateY(-1px);
    border-color: rgba(0,210,211,0.35);
  }

  .slides-studio-thumb-active {
    border-color: rgba(0,210,211,0.5);
    box-shadow: 0 0 0 1px rgba(0,210,211,0.18), 0 12px 28px rgba(0,0,0,0.22);
  }

  .slides-studio-stage {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.1);
    min-height: min(74vh, 760px);
    box-shadow: 0 28px 70px rgba(0,0,0,0.28);
    isolation: isolate;
  }

  .slides-studio-stage.slides-studio-stage-thumb {
    min-height: 150px;
    border-radius: 18px;
    box-shadow: none;
  }

  .slides-studio-stage-bg-image,
  .slides-studio-stage-bg-fade {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .slides-studio-stage-bg-image {
    background-size: cover;
    background-position: center;
    opacity: 0.9;
    transform: scale(1.02);
  }

  .slides-studio-stage-bg-fade {
    background: linear-gradient(180deg, rgba(0,0,0,0.02) 8%, rgba(0,0,0,var(--slide-fade-strength, 0.78)) 100%);
  }

  .slides-studio-stage-shell {
    position: relative;
    z-index: 1;
    min-height: inherit;
    padding: clamp(24px, 4vw, 42px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
  }

  .slides-studio-stage-has-card .slides-studio-stage-shell {
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
    align-items: stretch;
    gap: clamp(18px, 2vw, 28px);
  }

  .slides-studio-stage-copy {
    position: relative;
    z-index: 2;
    max-width: 720px;
    align-self: end;
  }

  .slides-studio-stage-card {
    position: relative;
    min-height: 100%;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 22px 50px rgba(0,0,0,0.25);
    align-self: stretch;
  }

  .slides-studio-stage-card-image,
  .slides-studio-stage-card-fade {
    position: absolute;
    inset: 0;
  }

  .slides-studio-stage-card-image {
    background-size: cover;
    background-position: center;
  }

  .slides-studio-stage-card-fade {
    background: linear-gradient(180deg, rgba(0,0,0,0.02) 10%, rgba(0,0,0,var(--slide-fade-strength, 0.78)) 100%);
  }

  .slides-studio-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    font-weight: 700;
  }

  .slides-studio-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(2.1rem, 5vw, 4.2rem);
    line-height: 0.96;
    margin: 0;
    text-wrap: balance;
  }

  .slides-studio-stage-thumb .slides-studio-title {
    font-size: 1.25rem;
  }

  .slides-studio-subtitle {
    margin-top: 10px;
    font-size: clamp(1rem, 1.8vw, 1.45rem);
    color: rgba(255,255,255,0.9);
    font-weight: 600;
  }

  .slides-studio-stage-thumb .slides-studio-subtitle {
    font-size: 0.78rem;
    margin-top: 6px;
  }

  .slides-studio-description {
    margin-top: 16px;
    max-width: 58ch;
    font-size: clamp(1rem, 1.6vw, 1.22rem);
    line-height: 1.6;
    color: rgba(255,255,255,0.88);
  }

  .slides-studio-stage-thumb .slides-studio-description {
    font-size: 0.7rem;
    line-height: 1.45;
    margin-top: 10px;
  }

  .slides-studio-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-mid);
    font-size: 0.82rem;
    font-weight: 600;
  }

  .slides-studio-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .slides-studio-editor-grid .form-group {
    margin: 0;
  }

  .slides-studio-editor-grid .form-group-full {
    grid-column: 1 / -1;
  }

  .slides-studio-range {
    width: 100%;
    accent-color: var(--accent);
  }

  .slides-studio-audience-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 18px;
  }

  .slides-studio-template-center .slides-studio-stage-shell {
    align-items: center;
    text-align: center;
    justify-items: center;
  }

  .slides-studio-template-center .slides-studio-stage-copy {
    max-width: 840px;
    margin: 0 auto;
    align-self: center;
  }

  .slides-studio-template-panel .slides-studio-stage-copy {
    max-width: 880px;
    padding: clamp(18px, 2vw, 26px);
    border-radius: 26px;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
  }

  .slides-studio-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 18px;
  }

  .slides-studio-feature-card {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.92);
    font-size: 0.98rem;
    line-height: 1.45;
    min-height: 88px;
  }

  .slides-studio-fact-card {
    margin-top: 18px;
    padding: clamp(18px, 2vw, 24px);
    border-radius: 24px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  }

  .slides-studio-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    align-items: center;
  }

  .slides-studio-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--slides-template-accent) 78%, #ffffff 22%), color-mix(in srgb, var(--slides-template-accent) 56%, #09090f 44%));
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 28px rgba(0,0,0,0.24);
  }

  .slides-studio-source-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 2px;
  }

  @media (max-width: 980px) {
    .slides-studio-layout {
      grid-template-columns: 1fr;
    }

    .slides-studio-filmstrip {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      max-height: none;
    }

    .slides-studio-stage {
      min-height: 520px;
    }

    .slides-studio-stage-has-card .slides-studio-stage-shell {
      grid-template-columns: 1fr;
      align-items: end;
    }

    .slides-studio-stage-card {
      min-height: 220px;
    }

    .slides-studio-editor-grid {
      grid-template-columns: 1fr;
    }
  }

  .header {
    text-align: center; padding: 40px 0 30px;
  }

  .logo {
    font-family: 'Fraunces', serif; font-weight: 800;
    font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 1;
    background: linear-gradient(135deg, var(--text) 0%, var(--warning) 40%, var(--accent) 70%, var(--accent-2) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: shimmer 6s linear infinite;
    margin-bottom: 10px;
  }

  .tagline {
    color: var(--text-dim); font-size: 1rem;
  }

  .player-card {
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .avatar-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    flex-shrink: 0;
  }

  .player-info {
    flex: 1;
  }

  .player-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
  }

  .player-stats {
    display: flex;
    gap: 20px;
    color: var(--text-dim);
    font-size: 0.9rem;
  }

  .stat {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .level-badge {
    background: var(--accent);
    color: var(--bg);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
  }

  .btn-primary {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--bg);
    cursor: pointer;
    transition: all 0.3s;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0,210,211,0.2);
  }

  .btn-secondary {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 24px;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
  }

  .btn-secondary:hover {
    border-color: var(--accent);
  }

  .grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 30px 0;
  }

  .avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
    gap: 10px;
    width: 100%;
  }

  .avatar-option {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    font-size: 2rem;
    padding: 10px 0;
    background: var(--surface-2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
  }
  
  .tile-btn {
    font: inherit;
    color: inherit;
    text-align: inherit;
    background: none;
  }

  button.card,
  button.kahoot-answer,
  button.tile-btn {
    font-family: 'Outfit', sans-serif;
  }

  button.card {
    width: 100%;
  }

  button.card:focus-visible,
  button.kahoot-answer:focus-visible,
  button.tile-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  button[data-action="select-avatar"]:hover,
  button[data-action="select-edit-avatar"]:hover {
    border-color: var(--accent) !important;
  }

  button[data-action="select-avatar"].selected,
  button[data-action="select-edit-avatar"].selected {
    border-color: var(--accent) !important;
  }

  .tile-btn:hover:not(:disabled) {
    border-color: var(--border-hover) !important;
    transform: translateY(-2px);
  }

  .tile-btn:disabled:hover {
    transform: none;
  }

  .card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
  }

  .card-icon {
    font-size: 3rem;
    margin-bottom: 15px;
  }

  .card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
  }

  .card-desc {
    color: var(--text-dim);
    font-size: 0.9rem;
  }

  .form-container {
    max-width: 500px;
    margin: 0 auto;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
  }

  .form-input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 1rem;
    font-family: 'Outfit', sans-serif;
    outline: none;
  }

  .form-input:focus {
    border-color: var(--accent);
  }

  .presentation-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s;
  }

  .presentation-toggle:hover {
    border-color: var(--accent);
  }

  .presentation-mode .app {
    max-width: 100%;
    padding: 40px;
  }

  .presentation-mode .logo {
    font-size: 4rem;
  }

  .presentation-mode .question-text {
    font-size: 3rem;
  }

  .kahoot-timer {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    position: relative;
  }

  .timer-circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }

  .timer-bg {
    fill: none;
    stroke: var(--surface-2);
    stroke-width: 10;
  }

  .timer-progress {
    fill: none;
    stroke: var(--accent);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
  }

  .timer-progress.warning {
    stroke: var(--danger);
  }

  .timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
  }

  .kahoot-answer {
    padding: 24px;
    border-radius: 16px;
    border: 3px solid;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .kahoot-answer:active:not(.disabled) {
    transform: scale(0.97);
  }

  .kahoot-answer.disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .kahoot-answer.selected {
    transform: scale(0.95);
  }

  .kahoot-selected-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--success);
    color: var(--bg);
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 210, 106, 0.35);
  }

  .kahoot-answer.correct {
    background: var(--success);
    border-color: var(--success);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.18), 0 0 0 8px rgba(0, 210, 106, 0.38), 0 0 36px rgba(0, 210, 106, 0.42);
  }

  .kahoot-answer.wrong {
    opacity: 1;
  }

  .kahoot-answer.disabled.correct,
  .kahoot-answer.disabled.wrong {
    opacity: 1;
  }

  .kahoot-red { background: #e21b3c; border-color: #e21b3c; color: white; }
  .kahoot-blue { background: #1368ce; border-color: #1368ce; color: white; }
  .kahoot-yellow { background: #d89e00; border-color: #d89e00; color: white; }
  .kahoot-green { background: #26890c; border-color: #26890c; color: white; }

  .podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
  }

  .podium-place {
    background: var(--surface-solid);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    min-width: 120px;
  }

  .podium-place.first {
    border-color: #ffd700;
    transform: translateY(-20px);
  }

  .podium-place.second {
    border-color: #c0c0c0;
  }

  .podium-place.third {
    border-color: #cd7f32;
  }

  .podium-medal {
    font-size: 3rem;
    margin-bottom: 10px;
  }

  @keyframes confettiFall {
    0% {
      transform: translate3d(0, -12vh, 0) rotate(0deg);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    100% {
      transform: translate3d(var(--confetti-drift, 0px), 110vh, 0) rotate(680deg);
      opacity: 0;
    }
  }

  .trivia-confetti {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
  }

  .trivia-confetti-piece {
    position: absolute;
    top: -12vh;
    width: 10px;
    height: 18px;
    border-radius: 2px;
    animation-name: confettiFall;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    will-change: transform, opacity;
  }

  @media (prefers-reduced-motion: reduce) {
    .trivia-confetti {
      display: none;
    }
  }

  .wordle-grid {
    display: grid;
    gap: 8px;
    max-width: 350px;
    margin: 30px auto;
  }

  .wordle-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }

  .wordle-cell {
    width: 60px;
    height: 60px;
    border: 2px solid var(--border);
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--surface-2);
  }

  .wordle-cell.correct {
    background: var(--success);
    border-color: var(--success);
    color: var(--bg);
  }

  .wordle-cell.present {
    background: var(--warning);
    border-color: var(--warning);
    color: var(--bg);
  }

  .wordle-cell.absent {
    background: var(--surface);
    opacity: 0.5;
  }

  .host-wordle-cell-input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--text);
    text-transform: uppercase;
    text-align: center;
    font: inherit;
    font-weight: 700;
    outline: none;
  }

  .word-chain-shell {
    max-width: 820px;
    margin: 0 auto 20px;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    color: var(--text);
  }

  .word-chain-help {
    font-size: 0.92rem;
    color: var(--text-dim);
    margin-bottom: 8px;
  }

  .word-chain-board {
    display: grid;
    gap: 8px;
    margin-top: 14px;
  }

  .word-chain-board-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }

  .word-chain-row {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 8px;
    align-items: center;
  }

  .word-chain-cell {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    border: 2px solid var(--border);
    display: grid;
    place-items: center;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    font-size: 1.02rem;
    background: var(--surface-2);
    color: var(--text);
  }

  .word-chain-cell.blank {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.05);
    color: transparent;
  }

  .word-chain-cell.top-anchor {
    background: var(--warning);
    border-color: var(--warning);
    color: var(--bg);
  }

  .word-chain-cell.bottom-anchor {
    background: var(--success);
    border-color: var(--success);
    color: var(--bg);
  }

  .word-chain-cell.solved {
    background: var(--success);
    border-color: var(--success);
    color: var(--bg);
  }

  .word-chain-score-bubble {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--success);
    color: var(--bg);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
  }

  @keyframes wordChainFocusCue {
    0% { box-shadow: 0 0 0 0 rgba(0, 210, 211, 0.35); }
    100% { box-shadow: 0 0 0 8px rgba(0, 210, 211, 0); }
  }

  .word-chain-letter-input {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    text-align: center;
    font-size: 1.02rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0;
    outline: none;
  }

  .word-chain-letter-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 210, 211, 0.14);
  }

  .word-chain-letter-input.autofocus-cue {
    animation: wordChainFocusCue 380ms ease-out;
  }

  .word-chain-status {
    margin-top: 12px;
    padding: 10px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-mid);
  }

  .emoji-charades-prompt {
    font-size: clamp(2.2rem, 7vw, 4rem);
    letter-spacing: 6px;
    line-height: 1.2;
  }

  .emoji-charades-guess-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-top: 14px;
  }

  .emoji-charades-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
  }

  .brain-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
  }

  .brain-lane {
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    min-height: 220px;
  }

  .brain-lane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: 700;
  }

  .brain-note {
    background: #fef3a7;
    color: #1f2937;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: grab;
  }

  .brain-lane-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .brain-note:active {
    cursor: grabbing;
  }

  .brain-note-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 0.78rem;
    color: #334155;
  }

  .brain-vote-btn {
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
  }

  .brain-vote-btn.voted {
    background: #dcfce7;
    border-color: #16a34a;
    color: #166534;
  }

  .brain-note-controls {
    display: flex;
    gap: 6px;
    margin-top: 8px;
  }

  .brain-note-controls .btn-secondary {
    min-width: 34px;
    padding: 5px 8px;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    background: rgba(255,255,255,0.72);
    border-color: rgba(15,23,42,0.18);
    color: #0f172a;
    box-shadow: 0 3px 10px rgba(15,23,42,0.12);
  }

  .brain-note-controls .btn-secondary:hover:not(:disabled) {
    background: rgba(255,255,255,0.92);
    border-color: rgba(15,23,42,0.32);
    transform: translateY(-1px);
  }

  .brain-note-controls .btn-secondary:disabled {
    opacity: 0.45;
    background: rgba(255,255,255,0.48);
    color: rgba(15,23,42,0.55);
  }

  .host-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }

  .host-tab-btn {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-mid);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
  }

  .host-tab-btn.active {
    border-color: var(--accent);
    background: rgba(0, 210, 211, 0.12);
    color: var(--text);
  }

  .host-tab-panel[hidden] {
    display: none !important;
  }

  @media (max-width: 900px) {
    .brain-board {
      grid-template-columns: 1fr;
    }

    .brain-lane-notes {
      grid-template-columns: 1fr;
    }
  }

  .key-btn {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 14px 10px;
    min-width: 40px;
    transition: all 0.2s;
  }

  .key-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
  }

  .key-btn.wide {
    padding: 14px 20px;
    min-width: 80px;
  }

  .key-btn.correct { background: var(--success); border-color: var(--success); }
  .key-btn.present { background: var(--warning); border-color: var(--warning); }
  .key-btn.absent { opacity: 0.3; }

  .reaction-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
  }

  .reaction-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.2s ease;
  }

  .reaction-btn:hover {
    border-color: var(--accent);
  }

  .reaction-btn:active {
    transform: scale(0.92);
  }

  .reaction-stream {
    position: relative;
    min-height: 88px;
    overflow: hidden;
    margin-bottom: 12px;
    pointer-events: none;
  }

  .reaction-pill {
    position: absolute;
    left: var(--reaction-left, 50%);
    bottom: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 18px;
    padding: 8px 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    animation: riseFade 3s ease-out both;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .reaction-pill-emoji {
    font-size: 1.5rem;
    line-height: 1;
  }

  .reaction-pill-name {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.1;
    text-align: center;
  }

  @keyframes riseFade {
    from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.94); }
    15% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    to { opacity: 0; transform: translateX(calc(-50% + var(--reaction-drift, 0px))) translateY(-56px) scale(1.03); }
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes wheelSpinBetween {
    from { transform: rotate(var(--wheel-spin-from, 0deg)); }
    to { transform: rotate(var(--wheel-spin-to, 0deg)); }
  }
  @keyframes wheelWinnerPulse {
    0% { transform: scale(0.96); opacity: 0; }
    20% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes wheelRingFlash {
    0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.75; }
    100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0; }
  }
  @keyframes wheelWinnerBounce {
    0% { transform: scale(0.9); opacity: 0; }
    35% { transform: scale(1.07); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes funSignFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }

  .wheel-of-fun-shell {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at top, rgba(255, 227, 146, 0.14), transparent 36%),
      linear-gradient(180deg, rgba(116, 28, 10, 0.82), rgba(28, 12, 7, 0.94));
    border: 1px solid rgba(255, 202, 107, 0.34);
    box-shadow: 0 18px 46px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  }

  .wheel-of-fun-sign {
    position: relative;
    margin: 0 auto 16px;
    max-width: 620px;
    padding: 22px 26px 18px;
    border-radius: 26px;
    border: 3px solid #7a4a10;
    background:
      linear-gradient(180deg, rgba(151, 43, 19, 0.96), rgba(106, 31, 13, 0.96) 56%, rgba(21, 74, 153, 0.96) 56%, rgba(12, 53, 118, 0.98));
    box-shadow:
      0 18px 34px rgba(0,0,0,0.32),
      inset 0 0 0 2px rgba(255,225,153,0.2),
      inset 0 -10px 18px rgba(0,0,0,0.15);
    animation: funSignFloat 4.8s ease-in-out infinite;
  }

  .wheel-of-fun-sign::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 20px;
    border: 2px solid rgba(255, 221, 134, 0.28);
    pointer-events: none;
  }

  .wheel-of-fun-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(255, 232, 180, 0.88);
    text-align: center;
    margin-bottom: 8px;
  }

  .wheel-of-fun-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(2rem, 5vw, 3.55rem);
    line-height: 0.95;
    text-align: center;
    color: #fff2d1;
    text-shadow: 0 3px 0 rgba(92, 39, 0, 0.6), 0 10px 24px rgba(0,0,0,0.26);
  }

  .wheel-of-fun-title strong {
    display: block;
    color: #ffd24a;
    margin-top: 6px;
  }

  .wheel-of-fun-slash {
    position: relative;
    display: inline-block;
    margin: 0 0.15em;
    color: #fff2d1;
  }

  .wheel-of-fun-slash::after {
    content: '';
    position: absolute;
    left: -6%;
    right: -6%;
    top: 53%;
    height: 0.18em;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff6b53, #d91e18 55%, #8d0f10);
    transform: rotate(-7deg);
    box-shadow: 0 0 10px rgba(255, 77, 64, 0.35);
  }

  .wheel-of-fun-subtitle {
    margin-top: 10px;
    text-align: center;
    color: rgba(255, 236, 200, 0.88);
    font-weight: 600;
  }

  .wheel-of-fun-prompt-card {
    background:
      linear-gradient(135deg, rgba(255, 239, 196, 0.96), rgba(255, 213, 95, 0.94));
    border: 2px solid rgba(133, 75, 8, 0.5);
    box-shadow: 0 14px 28px rgba(0,0,0,0.24);
    color: #5d2404;
  }

  .wheel-of-fun-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
  }

  .wheel-of-fun-mini {
    background: rgba(255, 243, 210, 0.08);
    border: 1px solid rgba(255, 205, 102, 0.2);
    border-radius: 12px;
    padding: 10px 12px;
  }

  .wheel-of-fun-mini strong {
    display: block;
    color: #ffe09a;
    margin-bottom: 4px;
    font-size: 0.86rem;
  }

  .wheel-of-fun-mini span {
    color: rgba(255,255,255,0.78);
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .wheel-of-fun-settings {
    background: linear-gradient(180deg, rgba(116, 37, 12, 0.3), rgba(16, 22, 45, 0.48));
    border: 1px solid rgba(255, 199, 95, 0.22);
  }

  .spin-wheel-shell {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 14% 12%, rgba(0, 210, 211, 0.16), transparent 28%),
      radial-gradient(circle at 88% 18%, rgba(197, 108, 240, 0.16), transparent 26%),
      radial-gradient(circle at 48% -10%, rgba(254, 202, 87, 0.16), transparent 32%),
      linear-gradient(160deg, rgba(12, 18, 42, 0.94), rgba(18, 27, 58, 0.96) 48%, rgba(14, 12, 34, 0.98));
    border: 1px solid rgba(125, 206, 255, 0.2);
    box-shadow: 0 20px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
  }

  .spin-wheel-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, transparent, rgba(255,255,255,0.035), transparent),
      radial-gradient(circle at center, transparent 56%, rgba(255,255,255,0.02) 57%, transparent 58%);
    pointer-events: none;
  }

  .spin-wheel-hero {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
  }

  .spin-wheel-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(141, 232, 255, 0.18);
    color: rgba(244, 249, 255, 0.9);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(10px);
  }

  .spin-wheel-stage {
    position: relative;
    padding: 18px 18px 14px;
    border-radius: 24px;
    background:
      radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 38%),
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }

  .spin-wheel-pointer {
    filter: drop-shadow(0 3px 8px rgba(255, 177, 66, 0.35));
  }

  .spin-wheel-spin-btn {
    background: radial-gradient(circle at 32% 30%, #fff4c1, #ffd86a 44%, #ff9f43 74%, #9a4d02 100%);
    color: #4a1900;
    border: 2px solid rgba(130, 62, 6, 0.46);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3), inset 0 2px 10px rgba(255,255,255,0.24);
  }

  .spin-wheel-status {
    display: inline-block;
    margin-top: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(141, 232, 255, 0.16);
    color: rgba(242, 248, 255, 0.84);
    font-size: 0.84rem;
    font-weight: 600;
  }

  .spin-wheel-result-card {
    border: 2px solid rgba(255, 203, 104, 0.46);
    background: linear-gradient(135deg, rgba(255,246,208,0.96), rgba(255,189,103,0.96));
    box-shadow: 0 12px 24px rgba(0,0,0,0.24);
    color: #5f2400;
  }

  .spin-wheel-picks {
    margin: 14px auto 0;
    max-width: 680px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(8, 13, 30, 0.36);
    border: 1px solid rgba(255,255,255,0.08);
  }

  .spin-wheel-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
  }

  .spin-wheel-pick-btn {
    margin: 0;
    padding: 10px 12px;
    border-radius: 14px;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }

  .spin-wheel-pick-btn:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  .spin-wheel-winners {
    margin: 14px auto 0;
    max-width: 540px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 12px 14px;
  }

  .spin-wheel-settings {
    background:
      radial-gradient(circle at top right, rgba(0, 210, 211, 0.09), transparent 24%),
      linear-gradient(180deg, rgba(17, 27, 55, 0.92), rgba(10, 14, 31, 0.98));
    border: 1px solid rgba(125, 206, 255, 0.18);
    box-shadow: 0 14px 32px rgba(0,0,0,0.18);
  }

  .uno-shell {
    display: grid;
    gap: 18px;
    max-width: 1100px;
    margin: 20px auto 0;
  }

  .uno-board {
    background:
      radial-gradient(circle at top left, rgba(245, 214, 99, 0.12), transparent 24%),
      radial-gradient(circle at bottom right, rgba(0, 210, 211, 0.12), transparent 26%),
      linear-gradient(180deg, rgba(17, 27, 55, 0.94), rgba(8, 12, 29, 0.98));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.22);
  }

  .uno-table {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 18px;
    align-items: start;
  }

  .uno-pile-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 180px));
    gap: 18px;
    justify-content: center;
    margin-bottom: 16px;
  }

  .uno-pile-card {
    position: relative;
    min-height: 176px;
    border-radius: 20px;
    border: 3px solid rgba(255,255,255,0.12);
    box-shadow: 0 16px 30px rgba(0,0,0,0.22);
    overflow: hidden;
  }

  .uno-pile-card.back {
    background:
      radial-gradient(circle at 30% 28%, rgba(255,255,255,0.08), transparent 28%),
      repeating-linear-gradient(135deg, rgba(8,12,30,0.95) 0 12px, rgba(16,26,58,0.95) 12px 24px),
      linear-gradient(135deg, #ff5a5f, #ffbd4a, #1dd47c, #2d8cff);
  }

  .uno-pile-card.back::after {
    content: 'UNO';
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    font-family: 'Fraunces', serif;
    font-size: 2.3rem;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 6px 16px rgba(0,0,0,0.28);
  }

  .uno-pile-meta {
    text-align: center;
    color: var(--text-dim);
    font-size: 0.84rem;
    margin-top: 8px;
  }

  .uno-card {
    position: relative;
    width: 100%;
    min-height: 168px;
    border-radius: 20px;
    border: 3px solid var(--uno-card-border, rgba(255,255,255,0.18));
    background: var(--uno-card-bg, linear-gradient(135deg, #1f2937, #111827));
    color: var(--uno-card-ink, #ffffff);
    padding: 14px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.24);
    overflow: hidden;
    text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  }

  button.uno-card {
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
  }

  button.uno-card:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(0,0,0,0.26);
  }

  button.uno-card:disabled {
    cursor: default;
    opacity: 0.6;
  }

  .uno-card::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.12);
  }

  .uno-card-corner {
    position: relative;
    z-index: 1;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
  }

  .uno-card-corner.bottom {
    position: absolute;
    right: 14px;
    bottom: 12px;
    transform: rotate(180deg);
  }

  .uno-card-center {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-family: 'Fraunces', serif;
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-shadow: 0 8px 18px rgba(0,0,0,0.22);
  }

  .uno-card-sub {
    display: block;
    margin-top: 6px;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .uno-hand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
  }

  .uno-hand-grid .uno-card {
    min-height: 158px;
  }

  .uno-side-panel {
    display: grid;
    gap: 14px;
  }

  .uno-panel-card {
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
  }

  .uno-status-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
  }

  .uno-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.82rem;
    color: var(--text-mid);
    font-weight: 700;
  }

  .uno-player-list {
    display: grid;
    gap: 10px;
  }

  .uno-player-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 12px 14px;
  }

  .uno-player-row.active {
    border-color: rgba(255, 210, 80, 0.55);
    background: rgba(255, 210, 80, 0.1);
  }

  .uno-player-row.pending {
    border-color: rgba(255, 101, 132, 0.45);
    background: rgba(255, 101, 132, 0.08);
  }

  .uno-color-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .uno-color-btn {
    border: none;
    border-radius: 12px;
    min-height: 44px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
  }

  .uno-message {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    color: var(--text-mid);
    line-height: 1.45;
  }

  .uno-message.alert {
    border-color: rgba(255, 115, 115, 0.3);
    background: rgba(255, 93, 115, 0.1);
    color: #ffd6da;
  }

  .uno-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
  }

  .game-mobile-shell,
  .game-mobile-main,
  .game-mobile-side {
    width: 100%;
  }

  .game-mobile-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }

  .bingo-card-grid {
    min-width: 290px;
  }

  .battleship-grid {
    min-width: 320px;
  }

  .backgammon-grid {
    min-width: 760px;
  }

  .connect4-grid {
    min-width: 300px;
  }

  @media (max-width: 960px) {
    .uno-table {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .grid-2 {
      grid-template-columns: 1fr;
    }

    .avatar-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .avatar-option {
      min-height: 52px;
      font-size: 1.75rem;
      padding: 8px 0;
    }
    
      .qr-grid {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
      }
      .qr-grid > div {
        margin-bottom: 18px;
      }
      .qr-grid img {
        margin-left: auto;
        margin-right: auto;
      }

    .kahoot-answer {
      padding: 18px;
      font-size: 1rem;
    }

    .wheel-of-fun-sign {
      padding: 20px 18px 16px;
      border-radius: 20px;
    }

    .wheel-of-fun-title {
      font-size: clamp(1.7rem, 9vw, 2.7rem);
    }

    .spin-wheel-stage {
      padding: 14px 12px 12px;
      border-radius: 18px;
    }

    .uno-pile-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .uno-hand-panel {
      order: 0;
    }

    .uno-color-panel {
      order: 1;
    }

    .uno-board {
      order: 2;
    }

    .uno-hand-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-mobile-main {
      grid-template-columns: 1fr !important;
      gap: 14px !important;
    }

    .rps-shell {
      grid-template-columns: 1fr !important;
      gap: 14px !important;
      margin-top: 16px !important;
    }

    .rps-stage,
    .rps-panel {
      border-radius: 20px !important;
      padding: 16px !important;
    }

    .rps-topbar {
      gap: 10px !important;
      margin-bottom: 16px !important;
    }

    .rps-status {
      width: 100%;
      text-align: left !important;
      padding: 10px 12px !important;
      border-radius: 14px !important;
    }

    .rps-chant {
      font-size: clamp(2rem, 14vw, 4rem) !important;
      line-height: 0.98 !important;
    }

    .rps-choice-grid {
      gap: 8px !important;
      margin-bottom: 16px !important;
    }

    .rps-choice-btn {
      min-height: 112px !important;
      border-radius: 16px !important;
      padding: 10px 6px !important;
      align-content: center !important;
      gap: 6px !important;
    }

    .rps-choice-icon {
      font-size: clamp(2.15rem, 12vw, 3.4rem) !important;
    }

    .rps-choice-label {
      font-size: 0.86rem !important;
      line-height: 1.05 !important;
    }

    .rps-actions {
      align-items: stretch !important;
    }

    .rps-actions .btn-primary,
    .rps-actions .btn-secondary {
      flex: 1 1 140px;
      min-width: 0;
    }

    .rps-side {
      gap: 12px !important;
    }

    .game-mobile-scroll {
      margin-left: -4px;
      margin-right: -4px;
      padding-left: 4px;
      padding-right: 4px;
    }

    .bingo-card-frame {
      padding: 8px !important;
      border-width: 5px !important;
      border-radius: 18px !important;
    }

    .bingo-card-header-cell {
      font-size: 1.1rem !important;
      padding: 8px 0 !important;
    }

    .bingo-card-cell {
      padding: 4px !important;
      font-size: 1.7rem !important;
      border-width: 1px !important;
    }

    .bingo-card-cell-free {
      font-size: 0.72rem !important;
      line-height: 1.1 !important;
      letter-spacing: 0.01em !important;
    }

    .bingo-call-ball {
      width: 74px;
      height: 74px;
    }

    .battleship-board-shell {
      padding: 12px !important;
      border-radius: 18px !important;
    }

    .battleship-board-grid {
      grid-template-columns: 22px repeat(10, minmax(0, 1fr)) !important;
      gap: 3px !important;
    }

    .battleship-board-grid-spectator {
      grid-template-columns: 18px repeat(10, minmax(0, 1fr)) !important;
      gap: 2px !important;
    }

    .battleship-grid-label {
      font-size: 0.66rem !important;
    }

    .battleship-cell {
      border-radius: 7px !important;
      font-size: 0.66rem !important;
    }

    .battleship-cell-spectator {
      border-radius: 5px !important;
      font-size: 0.56rem !important;
    }

    .backgammon-board-shell {
      padding: 12px !important;
      border-radius: 22px !important;
    }

    .backgammon-board-layout {
      grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) !important;
      gap: 8px !important;
    }

    .backgammon-half-grid {
      gap: 4px !important;
    }

    .backgammon-point {
      min-height: 164px !important;
      border-radius: 10px !important;
    }

    .backgammon-point-label {
      font-size: 0.62rem !important;
    }

    .backgammon-point-stack {
      min-height: 144px !important;
    }

    .backgammon-point-triangle {
      max-width: 52px !important;
    }

    .backgammon-checker {
      width: 28px !important;
      height: 28px !important;
      font-size: 0.62rem !important;
    }

    .backgammon-bar-card {
      min-height: 112px !important;
      border-radius: 14px !important;
    }

    .backgammon-bar-btn {
      min-height: 72px !important;
      border-radius: 14px !important;
      font-size: 0.72rem !important;
    }

    .backgammon-die {
      width: 46px !important;
      height: 46px !important;
      border-radius: 12px !important;
      font-size: 1.18rem !important;
    }

    .connect4-board-shell {
      padding: 12px !important;
      border-radius: 20px !important;
    }

    .connect4-column-grid {
      gap: 6px !important;
    }

    .connect4-column-btn {
      border-radius: 12px !important;
      padding: 8px 0 !important;
      font-size: 0.75rem !important;
    }

    .connect4-board-pad {
      padding: 10px !important;
      border-radius: 20px !important;
    }

    .connect4-board-grid {
      gap: 6px !important;
    }

    .connect4-cell {
      border-radius: 14px !important;
    }

    .connect4-disc {
      width: 82% !important;
      height: 82% !important;
    }
  }

  @media (max-width: 480px) {
    .rps-stage,
    .rps-panel {
      padding: 14px !important;
      border-radius: 18px !important;
    }

    .rps-choice-grid {
      gap: 7px !important;
    }

    .rps-choice-btn {
      min-height: 94px !important;
      padding: 8px 4px !important;
      border-radius: 14px !important;
    }

    .rps-choice-icon {
      font-size: clamp(1.85rem, 13vw, 2.7rem) !important;
    }

    .rps-choice-label {
      font-size: 0.76rem !important;
    }

    .rps-mode-grid {
      grid-template-columns: 1fr !important;
    }

    .bingo-card-cell {
      font-size: 1.28rem !important;
    }

    .bingo-card-cell-free {
      font-size: 0.64rem !important;
    }

    .battleship-grid {
      min-width: 280px;
    }

    .backgammon-grid {
      min-width: 560px;
    }

    .backgammon-board-layout {
      grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr) !important;
      gap: 6px !important;
    }

    .backgammon-point {
      min-height: 142px !important;
    }

    .backgammon-point-stack {
      min-height: 124px !important;
    }

    .backgammon-point-triangle {
      max-width: 44px !important;
    }

    .backgammon-checker {
      width: 24px !important;
      height: 24px !important;
      margin-top: -8px !important;
      margin-bottom: -8px !important;
    }

    .backgammon-bar-card {
      min-height: 92px !important;
    }

    .backgammon-bar-btn {
      min-height: 64px !important;
      font-size: 0.66rem !important;
    }

    .backgammon-die {
      width: 40px !important;
      height: 40px !important;
      font-size: 1rem !important;
    }

    .connect4-grid {
      min-width: 270px;
    }
  }

  /* ═══════════════════════════════════════════ */
  /* COSMOS BOUND — MISSION CONTROL ACTIVITY    */
  /* ═══════════════════════════════════════════ */
  .cosmos-bound {
    --cb-hull: #0a0e1a;
    --cb-panel: #0d1225;
    --cb-panel-edge: #1a2340;
    --cb-glow-blue: #00d4ff;
    --cb-glow-green: #00ff88;
    --cb-glow-orange: #ff6b2b;
    --cb-glow-red: #ff2244;
    --cb-glow-yellow: #ffd700;
    --cb-glow-purple: #b44dff;
    --cb-text-dim: #4a5580;
    --cb-text-mid: #8090b0;
    --cb-text-bright: #c0d0f0;
    font-family: 'Share Tech Mono', monospace;
    color: var(--cb-text-bright);
  }

  /* Crew Assignment Screen */
  .cb-assign-shell {
    max-width: 700px;
    margin: 0 auto;
    padding: 24px;
    background: var(--cb-hull);
    border: 1px solid var(--cb-panel-edge);
    border-radius: 16px;
  }
  .cb-assign-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 4px;
    text-align: center;
    background: linear-gradient(90deg, var(--cb-glow-blue), var(--cb-glow-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
  }
  .cb-assign-sub {
    text-align: center;
    font-size: 11px;
    color: var(--cb-text-dim);
    letter-spacing: 2px;
    margin-bottom: 20px;
  }
  .cb-crew-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
  }
  .cb-crew-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--cb-panel);
    border: 1px solid var(--cb-panel-edge);
    border-radius: 8px;
  }
  .cb-crew-row.is-me {
    border-color: var(--cb-glow-blue);
    box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.05);
  }
  .cb-crew-name {
    flex: 1;
    font-size: 13px;
    color: var(--cb-text-bright);
  }
  .cb-role-badge {
    display: inline-block;
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid;
  }
  .cb-role-CDR { color: var(--cb-glow-orange); border-color: var(--cb-glow-orange); background: rgba(255,107,43,.08); }
  .cb-role-PLT { color: var(--cb-glow-purple); border-color: var(--cb-glow-purple); background: rgba(180,77,255,.08); }
  .cb-role-ENG { color: var(--cb-glow-green); border-color: var(--cb-glow-green); background: rgba(0,255,136,.08); }
  .cb-role-NAV { color: var(--cb-glow-blue); border-color: var(--cb-glow-blue); background: rgba(0,212,255,.08); }
  .cb-role-SCI { color: var(--cb-glow-yellow); border-color: var(--cb-glow-yellow); background: rgba(255,215,0,.08); }
  .cb-role-COM { color: #ff8fa3; border-color: #ff8fa3; background: rgba(255,143,163,.08); }
  .cb-role-MED { color: #7af59f; border-color: #7af59f; background: rgba(122,245,159,.08); }
  .cb-role-select {
    background: var(--cb-hull);
    border: 1px solid var(--cb-panel-edge);
    color: var(--cb-text-bright);
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
  }
  .cb-begin-btn {
    display: block;
    width: 100%;
    padding: 14px;
    border: 2px solid var(--cb-glow-blue);
    background: transparent;
    color: var(--cb-glow-blue);
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    border-radius: 8px;
    cursor: pointer;
    transition: .3s;
  }
  .cb-begin-btn:hover {
    background: rgba(0, 212, 255, .1);
    box-shadow: 0 0 25px rgba(0, 212, 255, .3);
  }

  /* Cockpit Layout */
  .cb-cockpit {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 240px 1fr 240px;
    grid-template-areas: "chdr chdr chdr" "cleft cview cright" "ccon ccon ccon";
    gap: 0;
    background: var(--cb-hull);
    border: 1px solid var(--cb-panel-edge);
    border-radius: 12px;
    overflow: hidden;
    min-height: 520px;
    max-height: 80vh;
  }

  /* Cockpit Header */
  .cb-hdr {
    grid-area: chdr;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: linear-gradient(180deg, #0f1530 0%, var(--cb-hull) 100%);
    border-bottom: 1px solid var(--cb-panel-edge);
    flex-wrap: wrap;
    gap: 8px;
  }
  .cb-hdr-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(12px, 1.8vw, 18px);
    font-weight: 800;
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--cb-glow-blue), var(--cb-glow-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .cb-mission-badge {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--cb-glow-orange);
    border: 1px solid var(--cb-glow-orange);
    padding: 2px 8px;
    border-radius: 3px;
  }
  .cb-crew-dots {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
  }
  .cb-crew-dot {
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 10px;
    border: 1px solid var(--cb-panel-edge);
    color: var(--cb-text-dim);
  }
  .cb-crew-dot.me {
    border-color: var(--cb-glow-blue);
    color: var(--cb-glow-blue);
    background: rgba(0, 212, 255, .1);
  }
  .cb-status-bar {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .cb-status-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: var(--cb-text-dim);
  }
  .cb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cb-text-dim);
  }
  .cb-dot.on {
    background: var(--cb-glow-green);
    box-shadow: 0 0 6px var(--cb-glow-green);
  }

  /* Left Panel */
  .cb-left {
    grid-area: cleft;
    background: var(--cb-panel);
    border-right: 1px solid var(--cb-panel-edge);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
  }
  .cb-panel-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 3px;
    color: var(--cb-text-dim);
    text-transform: uppercase;
  }

  /* Switch Rows */
  .cb-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    background: var(--cb-hull);
    border: 1px solid var(--cb-panel-edge);
    border-radius: 6px;
    cursor: pointer;
    transition: .2s;
  }
  .cb-switch:hover:not(.disabled) { border-color: var(--cb-glow-blue); }
  .cb-switch.on { border-color: var(--cb-glow-green); box-shadow: inset 0 0 20px rgba(0,255,136,.05); }
  .cb-switch.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
  .cb-switch-label { font-size: 10px; color: var(--cb-text-mid); }
  .cb-switch.on .cb-switch-label { color: var(--cb-glow-green); }
  .cb-switch-status { font-family: 'Orbitron', sans-serif; font-size: 7px; letter-spacing: 1px; margin-top: 1px; }
  .cb-toggle {
    width: 36px;
    height: 18px;
    border-radius: 9px;
    background: #1a1f35;
    border: 1px solid var(--cb-panel-edge);
    position: relative;
    transition: .3s;
    flex-shrink: 0;
  }
  .cb-toggle::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cb-text-dim);
    top: 1px;
    left: 1px;
    transition: .3s;
  }
  .cb-switch.on .cb-toggle { background: rgba(0,255,136,.15); border-color: var(--cb-glow-green); }
  .cb-switch.on .cb-toggle::after { left: 19px; background: var(--cb-glow-green); box-shadow: 0 0 8px var(--cb-glow-green); }
  .cb-switch-owner {
    font-family: 'Orbitron', sans-serif;
    font-size: 7px;
    letter-spacing: 1px;
    color: var(--cb-text-dim);
    margin-top: 1px;
  }

  /* Throttle Lever */
  .cb-lever-container {
    background: var(--cb-hull);
    border: 1px solid var(--cb-panel-edge);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
  }
  .cb-lever-track {
    width: 20px;
    height: 90px;
    background: var(--cb-panel);
    border: 1px solid var(--cb-panel-edge);
    border-radius: 10px;
    margin: 6px auto;
    position: relative;
    cursor: pointer;
  }
  .cb-lever-track.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
  .cb-lever-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0 0 10px 10px;
    transition: height .3s;
    background: linear-gradient(0deg, var(--cb-glow-orange), var(--cb-glow-red));
  }
  .cb-lever-handle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 12px;
    background: linear-gradient(180deg, #555, #333);
    border: 1px solid #666;
    border-radius: 4px;
    cursor: grab;
    transition: bottom .3s;
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
  }
  .cb-lever-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--cb-glow-orange);
    margin-top: 4px;
  }
  .cb-lever-label {
    font-size: 9px;
    color: var(--cb-text-dim);
    margin-top: 2px;
  }

  /* Right Panel */
  .cb-right {
    grid-area: cright;
    background: var(--cb-panel);
    border-left: 1px solid var(--cb-panel-edge);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
  }

  /* Coordinate Group */
  .cb-coord-group {
    background: var(--cb-hull);
    border: 1px solid var(--cb-panel-edge);
    border-radius: 8px;
    padding: 10px;
  }
  .cb-coord-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
  }
  .cb-coord-row label {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    color: var(--cb-glow-orange);
    width: 14px;
  }
  .cb-coord-input {
    flex: 1;
    background: var(--cb-panel);
    border: 1px solid var(--cb-panel-edge);
    border-radius: 4px;
    padding: 5px 6px;
    color: var(--cb-glow-blue);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    text-align: center;
    outline: none;
  }
  .cb-coord-input:focus { border-color: var(--cb-glow-blue); box-shadow: 0 0 8px rgba(0,212,255,.2); }
  .cb-coord-input.locked { color: var(--cb-glow-green); border-color: var(--cb-glow-green); pointer-events: none; }
  .cb-coord-input:disabled { opacity: .45; cursor: not-allowed; }
  .cb-coord-lock-btn {
    width: 100%;
    margin-top: 6px;
    padding: 7px;
    border: 1px solid var(--cb-glow-orange);
    background: transparent;
    color: var(--cb-glow-orange);
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: .3s;
  }
  .cb-coord-lock-btn:hover { background: rgba(255,107,43,.1); }
  .cb-coord-lock-btn.locked { border-color: var(--cb-glow-green); color: var(--cb-glow-green); background: rgba(0,255,136,.05); pointer-events: none; }
  .cb-coord-lock-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

  /* Dial */
  .cb-dial-container {
    background: var(--cb-hull);
    border: 1px solid var(--cb-panel-edge);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
  }
  .cb-dial {
    width: 80px;
    height: 80px;
    margin: 6px auto;
    position: relative;
  }
  .cb-dial svg { width: 100%; height: 100%; }
  .cb-dial-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--cb-glow-blue);
  }
  .cb-dial-label { font-size: 9px; color: var(--cb-text-dim); margin-top: 3px; }
  .cb-dial-buttons { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
  .cb-dial-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--cb-panel-edge);
    background: var(--cb-panel);
    color: var(--cb-text-mid);
    font-size: 14px;
    cursor: pointer;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cb-dial-btn:hover:not(:disabled) { border-color: var(--cb-glow-blue); color: var(--cb-glow-blue); }
  .cb-dial-btn:disabled { opacity: .45; cursor: not-allowed; }

  /* Data Display */
  .cb-data-display {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 4px 0;
  }

  /* Viewport */
  .cb-viewport {
    grid-area: cview;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 80%, #0a1628 0%, #050810 60%, #000 100%);
    border-left: 1px solid var(--cb-panel-edge);
    border-right: 1px solid var(--cb-panel-edge);
    min-height: 300px;
  }
  .cb-viewport-frame {
    position: absolute;
    inset: 0;
    border: 2px solid var(--cb-panel-edge);
    border-radius: 8px;
    pointer-events: none;
    z-index: 5;
    box-shadow: inset 0 0 60px rgba(0,0,0,.8);
  }
  .cb-viewport-hud {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--cb-glow-blue);
    opacity: .6;
    text-shadow: 0 0 10px var(--cb-glow-blue);
  }
  .cb-viewport canvas { width: 100%; height: 100%; display: block; }

  /* Phase Banner */
  .cb-phase-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 8;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(16px, 3vw, 32px);
    font-weight: 900;
    letter-spacing: 4px;
    color: #fff;
    text-shadow: 0 0 30px var(--cb-glow-blue), 0 0 60px var(--cb-glow-blue);
    opacity: 0;
    pointer-events: none;
    text-align: center;
    line-height: 1.4;
    transition: opacity .5s;
  }
  .cb-phase-banner.show { opacity: 1; animation: cbBannerPulse 2.5s ease-in-out; }
  .cb-phase-sub { font-size: clamp(9px, 1.2vw, 12px); letter-spacing: 3px; color: var(--cb-glow-green); margin-top: 6px; }

  /* Countdown */
  .cb-countdown-overlay {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
  }
  .cb-countdown-overlay.show { opacity: 1; }
  .cb-countdown-num {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(60px, 12vw, 140px);
    font-weight: 900;
    color: var(--cb-glow-orange);
    text-shadow: 0 0 40px var(--cb-glow-orange), 0 0 80px var(--cb-glow-red);
    animation: cbCountPulse 1s ease-in-out infinite;
  }

  /* Log Strip */
  .cb-log-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 7;
    background: linear-gradient(0deg, rgba(10,14,26,.95) 0%, transparent 100%);
    padding: 6px 12px;
  }
  .cb-log-line {
    font-size: 10px;
    color: var(--cb-glow-green);
    opacity: .8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: cbFadeInLog .4s ease;
  }

  /* Bottom Console */
  .cb-console {
    grid-area: ccon;
    background: linear-gradient(0deg, #0f1530 0%, var(--cb-hull) 100%);
    border-top: 1px solid var(--cb-panel-edge);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Progress Bar */
  .cb-progress { width: 100%; max-width: 500px; margin: 0 auto; }
  .cb-progress-track { height: 4px; background: var(--cb-panel-edge); border-radius: 2px; overflow: hidden; }
  .cb-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cb-glow-blue), var(--cb-glow-green));
    border-radius: 2px;
    transition: width .8s ease;
  }
  .cb-progress-labels { display: flex; justify-content: space-between; margin-top: 3px; }
  .cb-progress-labels span {
    font-family: 'Orbitron', sans-serif;
    font-size: 6px;
    letter-spacing: 1px;
    color: var(--cb-text-dim);
  }
  .cb-progress-labels span.done { color: var(--cb-glow-green); }
  .cb-progress-labels span.current { color: var(--cb-glow-blue); }

  /* Action Buttons */
  .cb-action-btn {
    position: relative;
    padding: 10px 20px;
    border: 2px solid;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(9px, 1.1vw, 11px);
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    background: transparent;
    transition: .3s;
    text-transform: uppercase;
    min-width: 120px;
  }
  .cb-action-btn:disabled { opacity: .3; cursor: not-allowed; }
  .cb-btn-ignite { color: var(--cb-glow-orange); border-color: var(--cb-glow-orange); }
  .cb-btn-ignite:hover:not(:disabled) { background: rgba(255,107,43,.1); box-shadow: 0 0 25px rgba(255,107,43,.3); }
  .cb-btn-launch { color: var(--cb-glow-red); border-color: var(--cb-glow-red); }
  .cb-btn-launch:hover:not(:disabled) { background: rgba(255,34,68,.1); box-shadow: 0 0 25px rgba(255,34,68,.3); }
  .cb-btn-navigate { color: var(--cb-glow-purple); border-color: var(--cb-glow-purple); }
  .cb-btn-navigate:hover:not(:disabled) { background: rgba(180,77,255,.1); box-shadow: 0 0 25px rgba(180,77,255,.3); }
  .cb-btn-land { color: var(--cb-glow-green); border-color: var(--cb-glow-green); }
  .cb-btn-land:hover:not(:disabled) { background: rgba(0,255,136,.1); box-shadow: 0 0 25px rgba(0,255,136,.3); }
  .cb-btn-glow { animation: cbBtnGlow 1.5s ease-in-out infinite alternate; }

  /* COM Broadcast */
  .cb-broadcast-input {
    flex: 1;
    background: var(--cb-hull);
    border: 1px solid var(--cb-panel-edge);
    border-radius: 4px;
    padding: 6px 8px;
    color: var(--cb-text-bright);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    outline: none;
  }
  .cb-broadcast-input:focus { border-color: #ff8fa3; }
  .cb-broadcast-btn {
    padding: 6px 12px;
    border: 1px solid #ff8fa3;
    background: transparent;
    color: #ff8fa3;
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    transition: .2s;
  }
  .cb-broadcast-btn:hover { background: rgba(255,143,163,.1); }

  /* MED Vitals */
  .cb-vitals-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    background: var(--cb-hull);
    border: 1px solid var(--cb-panel-edge);
    border-radius: 4px;
    margin-top: 4px;
  }
  .cb-vital-name { font-size: 10px; color: var(--cb-text-mid); }
  .cb-vital-status { font-family: 'Orbitron', sans-serif; font-size: 8px; letter-spacing: 1px; }
  .cb-vital-status.nominal { color: var(--cb-glow-green); }
  .cb-vital-status.caution { color: var(--cb-glow-orange); }
  .cb-med-confirm-btn {
    width: 100%;
    margin-top: 6px;
    padding: 7px;
    border: 1px solid #7af59f;
    background: transparent;
    color: #7af59f;
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: .3s;
  }
  .cb-med-confirm-btn:hover { background: rgba(122,245,159,.1); }
  .cb-med-confirm-btn.confirmed { background: rgba(122,245,159,.08); pointer-events: none; }
  .cb-med-confirm-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

  /* SCI Scan */
  .cb-sci-scan-btn {
    width: 100%;
    margin-top: 6px;
    padding: 7px;
    border: 1px solid var(--cb-glow-yellow);
    background: transparent;
    color: var(--cb-glow-yellow);
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: .3s;
  }
  .cb-sci-scan-btn:hover { background: rgba(255,215,0,.1); }
  .cb-sci-scan-btn.scanned { background: rgba(255,215,0,.08); pointer-events: none; }
  .cb-sci-scan-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
  .cb-sci-checklist { font-size: 10px; margin-top: 4px; }
  .cb-sci-checklist div { padding: 2px 0; color: var(--cb-text-dim); }
  .cb-sci-checklist div.ok { color: var(--cb-glow-green); }

  /* Mission Complete Overlay */
  .cb-complete-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.85);
    border-radius: 12px;
  }
  .cb-mc-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(20px, 4vw, 40px);
    font-weight: 900;
    background: linear-gradient(90deg, var(--cb-glow-blue), var(--cb-glow-green), var(--cb-glow-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 5px;
    animation: cbMcGlow 2s ease-in-out infinite alternate;
  }
  .cb-mc-sub {
    font-size: clamp(10px, 1.5vw, 14px);
    color: var(--cb-text-mid);
    margin-top: 8px;
    letter-spacing: 3px;
  }
  .cb-mc-stats { display: flex; gap: 24px; margin-top: 20px; }
  .cb-mc-stat { text-align: center; }
  .cb-mc-stat-val { font-family: 'Orbitron', sans-serif; font-size: 20px; font-weight: 700; color: var(--cb-glow-blue); }
  .cb-mc-stat-lbl { font-size: 9px; color: var(--cb-text-dim); margin-top: 3px; letter-spacing: 2px; }

  /* Rumble */
  .cb-rumble { animation: cbRumble .15s linear infinite; }

  /* Keyframes */
  @keyframes cbBannerPulse {
    0% { transform: translate(-50%,-50%) scale(.8); opacity: 0; }
    20% { transform: translate(-50%,-50%) scale(1.05); opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes cbCountPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
  @keyframes cbBtnGlow { 0% { box-shadow: 0 0 5px currentColor; } 100% { box-shadow: 0 0 25px currentColor, 0 0 50px currentColor; } }
  @keyframes cbRumble {
    0% { transform: translate(1px,1px); }
    25% { transform: translate(-1px,0); }
    50% { transform: translate(0,-1px); }
    75% { transform: translate(1px,0); }
    100% { transform: translate(-1px,1px); }
  }
  @keyframes cbFadeInLog { from { opacity: 0; transform: translateY(6px); } to { opacity: .8; transform: none; } }
  @keyframes cbMcGlow { 0% { filter: brightness(1); } 100% { filter: brightness(1.3); } }

  /* Responsive */
  @media (max-width: 960px) {
    .cb-cockpit {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto auto;
      grid-template-areas: "chdr" "cview" "ccon" "cleft" "cright";
      max-height: none;
    }
    .cb-left, .cb-right {
      border: none;
      border-top: 1px solid var(--cb-panel-edge);
    }
    .cb-viewport { min-height: 250px; }
  }

.chess-square {
  position: relative;
  overflow: visible;
}

.chess-square::after {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: 1;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
}

.chess-square-move-from::after {
  opacity: 1;
  border: 2px solid rgba(255, 209, 102, 0.78);
  background: rgba(255, 209, 102, 0.16);
}

.chess-square-move-to::after {
  opacity: 1;
  border: 2px solid rgba(0, 210, 211, 0.78);
  box-shadow: inset 0 0 0 3px rgba(0, 210, 211, 0.16);
}

.chess-piece-glyph {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.chess-square-animate-move .chess-piece-glyph {
  animation: chessPieceSlide 420ms cubic-bezier(.18, .84, .22, 1);
}

@keyframes chessPieceSlide {
  0% {
    opacity: .86;
    transform: translate(var(--chess-move-x, 0), var(--chess-move-y, 0)) scale(1.08);
    filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .34));
  }
  72% {
    opacity: 1;
    transform: translate(0, 0) scale(1.08);
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .24));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chess-square-animate-move .chess-piece-glyph {
    animation: none;
  }
}