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

  :root {  
    --orange:        #FF6B00;  
    --orange-2:      #ff8c33;  
    --orange-dim:    rgba(255,107,0,0.10);  
    --orange-glow:   rgba(255,107,0,0.25);  
    --orange-border: rgba(255,107,0,0.35);  
    --green:         #3ddc84;  
    --green-dim:     rgba(61,220,132,0.08);  
    --green-border:  rgba(61,220,132,0.25);  
    --blue:          #4fc3f7;  
    --blue-dim:      rgba(79,195,247,0.10);  
    --blue-border:   rgba(79,195,247,0.30);  
    --red:           #ff5252;  
    --card:          #0f1214;  
    --card-2:        #161b1f;  
    --border:        rgba(255,255,255,0.08);  
    --border-hi:     rgba(255,255,255,0.14);  
    --text:          #e8eaed;  
    --muted:         rgba(255,255,255,0.38);  
    --muted2:        rgba(255,255,255,0.20);  
  }

  html, body {  
    height: 100%;  
    background: #080a0c;  
    color: var(--text);  
    font-family: 'Barlow', sans-serif;  
    line-height: 1.5;  
    overflow-x: hidden;  
    -webkit-text-size-adjust: 100%;  
    scrollbar-color: rgba(255,255,255,0.2) #080a0c;
    scrollbar-width: thin;
  }
  html::-webkit-scrollbar {
    width: 10px;
  }
  html::-webkit-scrollbar-track {
    background: #080a0c;
  }
  html::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    border: 2px solid #080a0c;
  }
  html::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.28);
  }

  body {  
    display: flex;  
    flex-direction: column;  
    min-height: 100vh;  
    min-height: 100dvh;  
    position: relative;  
  }

  /* Atmospheric BG */  
  body::before {  
    content: '';  
    position: fixed;  
    inset: 0;  
    pointer-events: none;  
    z-index: 0;  
    background:  
      radial-gradient(ellipse 70% 45% at 50% -5%, rgba(255,107,0,.11) 0%, transparent 65%),  
      radial-gradient(ellipse 50% 30% at 90% 100%, rgba(255,107,0,.05) 0%, transparent 55%),  
      radial-gradient(ellipse 40% 25% at 5% 60%, rgba(79,195,247,.04) 0%, transparent 50%);  
  }

  /* No scanline/grid overlay on main — keeps the page clean on mobile and desktop */
  body::after {
    display: none;
  }
  main::before {
    display: none;
  }

  /* ── Header ── */
  header {
    background: rgba(10,13,15,0.95);
    border-bottom: 1px solid var(--border-hi);
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .header-top {
    display: flex;
    align-items: center;
    height: 60px;
    gap: 10px;
  }

  .logo {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    text-decoration: none;
  }
  .logo img { width: 32px; height: 32px; image-rendering: crisp-edges; }
  .logo a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }

  /* ── Nav buttons bar ── */
  .nav-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-wrap: nowrap;
    padding: 0;
    border-top: none;
  }

  .nav-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
  }
  .nav-btn:active { transform: scale(.97); }

  /* Account pill in homepage nav — don't stretch and push buttons apart */
  .nav-bar .sq-account-nav-host,
  .nav-bar .sq-account-nav {
    flex: 0 0 auto;
    min-width: 0;
  }
  .nav-bar .sq-account-nav-btn {
    width: auto;
    min-height: 36px;
  }

  /* Hamburger — hidden on desktop */
  .header-top-actions {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
  }
  .header-mobile-account {
    display: none;
  }
  .nav-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text);
    flex-shrink: 0;
    padding: 0;
  }

  /* Mobile nav drawer */
  .nav-drawer {
    background: rgba(10,13,15,0.98);
    border-top: 1px solid var(--border);
    padding: 10px 0;
  }
  .nav-drawer[hidden] { display: none; }
  .nav-drawer-item {
    display: block;
    padding: 12px 20px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: background .12s;
  }
  .nav-drawer-item:hover { background: var(--card-2); }
  .nav-drawer-signup {
    color: #fff;
    background: var(--orange);
    margin: 10px 20px;
    border-radius: 6px;
    text-align: center;
    border-bottom: none;
  }
  .nav-drawer-signup:hover { background: var(--orange-2); }

  .nav-btn-admin {  
    color: var(--muted2);  
    border-color: var(--border);  
    background: var(--card-2);  
  }  
  .nav-btn-admin:hover {  
    color: var(--text);  
    border-color: var(--border-hi);  
    background: #1e252a;  
  }
  .nav-btn-muted {
    opacity: 0.72;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .nav-btn-muted:hover { opacity: 1; }

  .nav-btn-lookup {  
    color: var(--orange);  
    border-color: var(--orange-border);  
    background: var(--orange-dim);  
  }  
  .nav-btn-lookup:hover {  
    background: rgba(255,107,0,.18);  
    border-color: rgba(255,107,0,.55);  
  }

  .nav-btn-tournament {  
    color: var(--green);  
    border-color: var(--green-border);  
    background: var(--green-dim);  
  }  
  .nav-btn-tournament:hover {  
    color: #fff;  
    background: rgba(61,220,132,.15);  
    border-color: rgba(61,220,132,.48);  
  }

  .nav-btn-login {
    color: var(--blue);
    border-color: var(--blue-border);
    background: var(--blue-dim);
  }
  .nav-btn-login:hover {
    color: #fff;
    background: rgba(79,195,247,.22);
    border-color: rgba(79,195,247,.52);
    box-shadow: 0 0 14px rgba(79,195,247,.2);
  }

  .nav-btn-queue-setup {
    color: var(--orange);
    border-color: var(--orange-border);
    background: var(--orange-dim);
  }
  .nav-btn-queue-setup:hover {
    color: #fff;
    background: rgba(255,107,0,.18);
    border-color: rgba(255,107,0,.55);
    box-shadow: 0 0 14px rgba(255,107,0,.2);
  }

  .nav-btn-panel {
    color: var(--blue);
    border-color: var(--blue-border);
    background: var(--blue-dim);
  }
  .nav-btn-panel:hover {
    color: #fff;
    background: rgba(79,195,247,.22);
    border-color: rgba(79,195,247,.52);
    box-shadow: 0 0 14px rgba(79,195,247,.2);
  }

  .nav-btn-profile {
    color: var(--orange);
    border-color: var(--orange-border);
    background: var(--orange-dim);
  }
  .nav-btn-profile:hover {
    color: #fff;
    background: rgba(255,107,0,.18);
    border-color: rgba(255,107,0,.55);
    box-shadow: 0 0 14px rgba(255,107,0,.2);
  }

  .nav-btn-signup {
    color: #fff;
    border-color: rgba(255,107,0,.72);
    background: var(--orange);
  }
  .nav-btn-signup:hover {
    background: var(--orange-2);
    border-color: rgba(255,107,0,.95);
    box-shadow: 0 0 14px rgba(255,107,0,.38);
  }

  @media (max-width: 860px) {
    .nav-bar { display: none; }
    .header-top-actions { display: flex; }
    .header-mobile-account { display: flex; }
    .nav-hamburger { display: flex; }
    .header-top { gap: 12px; }
  }

  @media (min-width: 861px) {
    .nav-drawer { display: none !important; }
  }

  /* ── Main layout ── */  
  main {  
    flex: 1 0 auto;  
    max-width: 900px;  
    width: 100%;  
    margin: 20px auto;  
    padding: 0 14px;  
    position: relative;  
    z-index: 1;  
  }

  @media (min-width: 540px) {
    main { margin: 32px auto; padding: 0 16px; }
    header { padding: 0 24px; }
  }

  @media (min-width: 1100px) {
    main {
      max-width: min(1040px, calc(100vw - 48px));
    }
  }

  .platform-home-card {
    background: linear-gradient(180deg, rgba(255,255,255,.05), transparent), #0d1115;
    border: 1px solid var(--border-hi);
    border-radius: 6px;
    padding: 20px 16px;
    margin-bottom: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
  }

  .platform-kicker {
    color: var(--orange);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .platform-home-card h1 {
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(34px, 8vw, 52px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: .92;
    text-transform: uppercase;
    margin: 0 0 10px;
  }

  .platform-home-card p {
    color: rgba(255,255,255,.68);
    font-weight: 600;
    margin: 0 0 14px;
  }

  .platform-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }

  .platform-actions a {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .platform-primary {
    color: #fff;
    background: var(--orange);
    border: 1px solid rgba(255,107,0,.72);
  }

  .platform-secondary {
    color: var(--blue);
    background: var(--blue-dim);
    border: 1px solid var(--blue-border);
  }

  .platform-live {
    border-top: 1px solid var(--border);
    padding-top: 12px;
  }

  .platform-live-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
  }

  .platform-live-head button {
    border: 1px solid var(--border);
    background: var(--card-2);
    color: var(--muted);
    border-radius: 4px;
    padding: 6px 8px;
    font: 800 10px/1 'Barlow', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .platform-live-list {
    display: grid;
    gap: 8px;
  }

  .platform-streamer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.035);
    border-radius: 5px;
    padding: 10px;
    text-decoration: none;
  }

  .platform-streamer strong {
    display: block;
    color: #fff;
    font-weight: 800;
  }

  .platform-streamer span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  .platform-streamer i {
    color: var(--green);
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .platform-empty {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
  }

  @media (max-width: 430px) {
    .platform-actions { grid-template-columns: 1fr; }
  }

  .streamer-column-card { display: none; }

  /* ── Homepage: hide header logo — hero owns the wordmark ── */
  .sq-page-home header .logo {
    display: none;
  }

  .sq-page-home .sq-beta-banner {
    padding: 6px 14px;
    margin-bottom: 4px;
    width: min(1200px, calc(100% - 32px));
  }

  .sq-page-home main {
    max-width: min(1200px, calc(100vw - 32px));
    margin-top: 0;
    margin-bottom: 16px;
    padding-left: clamp(16px, 2.5vw, 28px);
    padding-right: clamp(16px, 2.5vw, 28px);
  }

  @media (min-width: 1100px) {
    .sq-page-home main {
      max-width: min(1200px, calc(100vw - 48px));
      margin-top: 0;
    }
  }

  .sq-home-hub {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(1200px, 100%);
    margin: 0 auto;
  }

  .sq-page-home .sq-home-hub > .sq-hero {
    margin-bottom: clamp(10px, 2vw, 16px);
  }

  .sq-home-hub .sq-showcase {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
  }

  /* ── Hero (brand) ── */
  .sq-page-home .sq-hero {
    text-align: center;
    padding: 2px 0 6px;
    width: 100%;
    margin: 0;
  }
  .sq-page-home .sq-hero-title {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    font: 800 clamp(64px, 11vw, 120px) / 0.86 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: -0.035em;
  }
  .sq-page-home .sq-hero-title .sq-wordmark {
    font: inherit;
    letter-spacing: -0.045em;
    justify-content: center;
    width: min(92vw, 600px);
    max-width: 600px;
    filter: none;
  }
  .sq-page-home .sq-hero-title .sq-wm-siege {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  }
  .sq-page-home .sq-hero-title .sq-wm-queue {
    text-shadow: 0 0 14px rgba(255, 107, 0, 0.28);
  }
  .sq-page-home .sq-hero-desc {
    margin: 8px auto 0;
    max-width: 720px;
    font-size: clamp(16px, 2vw, 21px);
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.74);
  }

  .sq-hero {
    text-align: center;
    padding: clamp(4px, 1vw, 10px) 0 clamp(6px, 1.2vw, 10px);
    width: 100%;
    margin: 0;
  }
  .sq-hero-title {
    font: 800 clamp(88px, 20vw, 172px) / 0.86 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    letter-spacing: -0.035em;
  }
  .sq-hero-title .sq-wordmark {
    font: inherit;
    letter-spacing: -0.045em;
    justify-content: center;
    filter: drop-shadow(0 8px 32px rgba(255, 107, 0, 0.28));
  }
  .sq-hero-title .sq-wm-siege {
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.12);
  }
  .sq-hero-title .sq-wm-queue {
    text-shadow:
      0 0 48px rgba(255, 107, 0, 0.55),
      0 0 100px rgba(255, 107, 0, 0.22);
  }
  .sq-hero-desc {
    margin: clamp(6px, 1.5vw, 10px) auto 0;
    max-width: 560px;
    font-size: clamp(16px, 2.5vw, 20px);
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
  }

  .sq-hero-rule {
    display: none;
  }

  .sq-page-home .sq-host-cta {
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 22px clamp(20px, 3vw, 32px) 26px;
    border: 1px solid var(--border-hi);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 16px 16px;
    background: linear-gradient(180deg, rgba(14, 17, 24, 0.92) 0%, rgba(10, 12, 16, 0.98) 100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  }

  .sq-host-cta {
    text-align: center;
    padding: 4px 0 8px;
    width: 100%;
    margin: 0;
  }

  .sq-host-cta-title {
    display: none;
  }

  .sq-page-home .sq-host-cta-btn {
    min-height: 56px;
    min-width: min(100%, 380px);
    padding: 0 36px;
    font-size: 14px;
  }

  .sq-host-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    min-width: min(100%, 340px);
    padding: 0 32px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(180deg, #ff9a4d 0%, var(--orange) 48%, #e85a00 100%);
    color: #1a0800;
    font: 800 13px / 1 'Barlow Condensed', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.28) inset,
      0 8px 24px rgba(255, 107, 0, 0.32);
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
  }

  .sq-host-cta-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.32) inset,
      0 12px 28px rgba(255, 107, 0, 0.4);
  }

  .sq-host-cta-btn:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 3px rgba(255, 196, 120, 0.5),
      0 8px 24px rgba(255, 107, 0, 0.32);
  }

  .sq-host-cta-note {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.58);
  }

  .sq-host-cta-signup {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.48);
  }

  .sq-host-cta .sq-hero-signup-link {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--orange);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .sq-host-cta .sq-hero-signup-link:hover {
    color: #ffb347;
    background: none;
  }
  .sq-hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
  }
  .sq-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 168px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    text-decoration: none;
    font: 800 12.5px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition:
      transform 0.14s ease,
      box-shadow 0.14s ease,
      border-color 0.14s ease,
      filter 0.14s ease,
      background 0.14s ease;
  }
  .sq-hero-btn:focus-visible {
    outline: none;
  }
  .sq-hero-btn-primary:focus-visible {
    box-shadow:
      0 0 0 2px #0f1318,
      0 0 0 5px rgba(255, 140, 60, 0.55),
      0 10px 32px rgba(255, 82, 0, 0.28);
  }
  .sq-hero-btn-secondary:focus-visible {
    box-shadow:
      0 0 0 2px #0f1318,
      0 0 0 5px rgba(79, 195, 247, 0.45),
      0 1px 0 rgba(79, 195, 247, 0.12) inset;
  }
  .sq-hero-btn-primary {
    background: linear-gradient(180deg, #ff8533 0%, #ff5a00 100%);
    color: #fffbf7;
    border: 1px solid rgba(255, 209, 170, 0.35);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.18) inset,
      0 10px 32px rgba(255, 82, 0, 0.28);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  }
  .sq-hero-btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.22) inset,
      0 14px 40px rgba(255, 82, 0, 0.36);
  }
  .sq-hero-btn-primary:active {
    transform: translateY(0);
    filter: brightness(0.98);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.12) inset,
      0 6px 20px rgba(255, 82, 0, 0.22);
  }

  .sq-hero-btn-secondary {
    background: linear-gradient(
      180deg,
      rgba(79, 195, 247, 0.12) 0%,
      rgba(79, 195, 247, 0.06) 100%
    );
    color: #bfeaff;
    border: 1px solid rgba(79, 195, 247, 0.42);
    box-shadow: 0 1px 0 rgba(79, 195, 247, 0.12) inset;
  }
  .sq-hero-btn-secondary:hover {
    background: linear-gradient(
      180deg,
      rgba(79, 195, 247, 0.2) 0%,
      rgba(79, 195, 247, 0.1) 100%
    );
    border-color: rgba(147, 220, 255, 0.55);
    color: #e8f7ff;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  }
  .sq-hero-btn-secondary:active {
    transform: translateY(0);
  }

  .sq-hero-host-bridge {
    margin: 26px auto 0;
    max-width: 480px;
    font: 700 12px / 1.4 Barlow, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
    color: rgba(255, 255, 255, 0.38);
  }

  .sq-hero-guest-row {
    --sq-hero-field-h: 56px;
    margin: 0 auto;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    position: relative;
    z-index: 2;
  }

  .sq-hero-copy {
    display: none;
  }

  .sq-hero-guest-kicker {
    display: none;
  }

  .sq-hero-guest-sub {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
  }

  .sq-hero-guest-sub strong {
    color: #fff;
    font-weight: 600;
  }

  .sq-hero-queue-card {
    position: relative;
    padding: 20px 20px 18px;
    border-radius: 14px;
    background: rgba(14, 17, 24, 0.62);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--orange);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.06) inset,
      0 12px 40px rgba(0, 0, 0, 0.42);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .sq-hero-queue-card--host {
    margin-top: 2px;
  }

  .sq-hero-queue-card--host::before {
    display: none;
  }

  .sq-hero-queue-card:focus-within {
    border-color: rgba(255, 107, 0, 0.45);
    border-top-color: var(--orange);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 0 0 3px rgba(255, 107, 0, 0.12),
      0 16px 44px rgba(0, 0, 0, 0.48);
  }

  .sq-hero-host-badge {
    display: none;
  }

  .sq-hero-queue-label {
    display: block;
    margin: 0 0 10px 1px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.58);
    text-align: left;
    cursor: pointer;
  }

  .sq-hero-queue-fields {
    display: flex;
    align-items: stretch;
    gap: 10px;
  }

  .sq-hero-queue-input-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    height: var(--sq-hero-field-h);
    min-height: var(--sq-hero-field-h);
    box-sizing: border-box;
    padding: 0 16px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }

  .sq-hero-queue-input-wrap:focus-within {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.5);
    box-shadow:
      0 0 0 3px rgba(255, 107, 0, 0.1),
      0 1px 0 rgba(255, 255, 255, 0.05) inset;
  }

  .sq-hero-guest-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    font: 600 clamp(18px, 4.2vw, 22px) / 1 'Barlow Condensed', sans-serif;
    letter-spacing: -0.01em;
    color: #fff;
    outline: none;
  }

  .sq-hero-guest-input::placeholder {
    color: rgba(255, 255, 255, 0.42);
    font-weight: 500;
    font-size: clamp(18px, 4.2vw, 22px);
  }

  .sq-hero-guest-input[aria-invalid='true'] {
    color: #ffd0d0;
  }

  .sq-hero-queue-input-wrap:has(.sq-hero-guest-input[aria-invalid='true']) {
    border-color: rgba(255, 90, 90, 0.6);
    background: rgba(80, 20, 20, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 82, 82, 0.12);
  }

  .sq-hero-guest-go {
    flex: 0 0 auto;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--sq-hero-field-h);
    min-height: var(--sq-hero-field-h);
    min-width: 148px;
    padding: 0 18px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #ff9a4d 0%, var(--orange) 50%, #e85a00 100%);
    color: #1a0800;
    font: 800 12px / 1 'Barlow Condensed', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.28) inset,
      0 6px 20px rgba(255, 107, 0, 0.32);
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
  }

  .sq-hero-go-short {
    display: none;
  }

  .sq-hero-go-icon {
    flex-shrink: 0;
    opacity: 0.9;
    transition: transform 0.15s ease;
  }

  .sq-hero-guest-go:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.32) inset,
      0 14px 32px rgba(255, 107, 0, 0.45);
  }

  .sq-hero-guest-go:hover .sq-hero-go-icon {
    transform: translateX(3px);
  }

  .sq-hero-guest-go:active {
    transform: translateY(0) scale(0.98);
    filter: brightness(0.97);
  }

  .sq-hero-guest-go:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 3px rgba(255, 196, 120, 0.55),
      0 10px 28px rgba(255, 107, 0, 0.38);
  }

  .sq-hero-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
  }

  .sq-hero-messages:empty,
  .sq-hero-messages:not(:has(:not([hidden]))) {
    display: none;
  }

  .sq-hero-form-error {
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    font: 600 13px / 1.5 Barlow, sans-serif;
    text-align: center;
    color: #ffc4c4;
    background: rgba(255, 70, 70, 0.1);
    border: 1px solid rgba(255, 110, 110, 0.32);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }

  .sq-hero-form-error[hidden] {
    display: none;
  }

  .sq-hero-account-msg {
    color: rgba(255, 210, 140, 0.95);
    background: rgba(255, 140, 40, 0.1);
    border-color: rgba(255, 160, 60, 0.35);
  }

  .sq-hero-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    padding-top: 0;
  }

  .sq-hero-guest-hint {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
  }

  .sq-hero-hint-line {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.52);
  }

  .sq-hero-guest-hint code {
    font-size: 0.92em;
    font-weight: 600;
    color: rgba(126, 232, 255, 0.95);
    background: rgba(50, 213, 255, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
  }

  .sq-hero-hint-signup {
    margin: 4px 0 0;
  }

  .sq-hero-signup-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .sq-hero-signup-link:hover {
    color: #fff;
    border-color: rgba(255, 107, 0, 0.4);
    background: rgba(255, 107, 0, 0.08);
  }

  .sq-hero-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 6px 0 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.28);
  }

  .sq-hero-divider::before,
  .sq-hero-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
  }

  .sq-hero-join-redirect {
    margin: 0;
    width: 100%;
  }

  .sq-hero-join-text {
    display: none;
  }

  .sq-hero-join-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    text-decoration: none;
    font: 600 13px / 1 Barlow, sans-serif;
    color: rgba(255, 255, 255, 0.62);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition:
      border-color 0.14s ease,
      color 0.14s ease,
      background 0.14s ease;
  }

  .sq-hero-join-btn:hover {
    color: rgba(126, 232, 255, 0.95);
    border-color: rgba(79, 195, 247, 0.35);
    background: rgba(79, 195, 247, 0.06);
  }

  .sq-hero-join-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2);
  }

  @media (max-width: 520px) {
    .sq-hero-guest-row {
      --sq-hero-field-h: 52px;
    }

    .sq-hero-queue-fields {
      flex-direction: column;
      gap: 8px;
    }

    .sq-hero-guest-go {
      width: 100%;
      min-width: 0;
    }
  }

  @media (max-width: 520px) {
    .sq-page-home .sq-hero-title {
      font-size: clamp(56px, 17vw, 80px);
    }

    .sq-page-home .sq-hero-title .sq-wordmark {
      width: min(94vw, 420px);
    }

    .sq-page-home .sq-host-cta-btn {
      width: 100%;
      min-width: 0;
    }

    .sq-page-home .sq-showcase-home,
    .sq-page-home .sq-host-cta {
      border-radius: 14px;
    }

    .sq-home-hub .sq-showcase {
      border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
      border-bottom-color: var(--border-hi);
    }

    .sq-page-home .sq-host-cta {
      margin-top: 10px;
      border-radius: 14px;
      border-top-color: var(--border-hi);
    }
  }

  #live-queues,
  #start-hosting { scroll-margin-top: 96px; }

  /* ── Streamer Showcase ── */
  .sq-showcase {
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), #0d1115;
    border: 1px solid var(--border-hi); border-radius: 14px;
    padding: 22px 18px; margin-bottom: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
  }
  .sq-showcase-home {
    margin: 0;
    width: 100%;
    padding: clamp(20px, 3vw, 26px) clamp(18px, 2.5vw, 24px) clamp(18px, 2.5vw, 22px);
  }

  .sq-page-home .sq-showcase-home {
    padding: clamp(26px, 3.5vw, 36px) clamp(24px, 3vw, 32px) clamp(22px, 3vw, 28px);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  }

  .sq-page-home .sq-showcase-head {
    padding-bottom: 18px;
    margin-bottom: 20px;
  }

  .sq-page-home .sq-showcase-kicker {
    font-size: 13px;
    margin-bottom: 6px;
    letter-spacing: 0.18em;
  }

  .sq-page-home .sq-showcase-title {
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: -0.02em;
  }

  .sq-page-home .sq-showcase-filters {
    margin-bottom: 4px;
  }

  .sq-page-home .sq-showcase-empty {
    max-width: none;
    width: 100%;
    padding: clamp(40px, 5vw, 56px) clamp(24px, 4vw, 48px);
  }

  .sq-page-home .sq-showcase-empty-title {
    font-size: clamp(20px, 2.8vw, 28px);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.94);
    margin-bottom: 12px;
  }

  .sq-page-home .sq-showcase-empty-body {
    font-size: clamp(16px, 2vw, 19px);
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.6;
    max-width: 760px;
    margin: 0 auto;
  }

  .sq-page-home .sq-showcase-empty-body a {
    color: var(--orange);
    font-weight: 700;
    text-decoration: none;
  }

  .sq-page-home .sq-showcase-empty-body a:hover {
    text-decoration: underline;
  }

  /* Vertical scrollable host list (homepage + /join) */
  .sq-showcase-home .sq-showcase-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: min(68vh, 540px);
    padding: 0;
    scroll-snap-type: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
    scrollbar-width: thin;
  }

  .sq-showcase-home .sq-showcase-grid::-webkit-scrollbar { width: 8px; }
  .sq-showcase-home .sq-showcase-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
  }

  .sq-host-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 14px 16px 14px 14px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .sq-host-row:last-child { border-bottom: none; }

  .sq-host-row:hover {
    background: rgba(255, 255, 255, 0.045);
  }

  .sq-host-row.is-you {
    background: rgba(255, 107, 0, 0.04);
  }

  .sq-host-row.is-you:hover {
    background: rgba(255, 107, 0, 0.07);
  }

  .sq-host-row-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .sq-host-row-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 7px;
    background: var(--muted);
  }

  .sq-host-row-dot.is-online {
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.14);
  }

  .sq-host-row-dot.is-offline {
    background: rgba(139, 147, 167, 0.85);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
  }

  .sq-host-row-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .sq-host-row-name {
    font: 800 18px/1.1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sq-host-row-yours {
    display: inline-block;
    margin-left: 8px;
    font: 700 10px/1 Barlow, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--orange);
    vertical-align: middle;
  }

  .sq-host-row-game {
    font: 600 14px/1.3 Barlow, sans-serif;
    color: rgba(255, 255, 255, 0.58);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sq-host-row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
    text-align: right;
  }

  .sq-host-row-queue {
    font: 800 15px/1.1 'Barlow Condensed', sans-serif;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
  }

  .sq-host-row-queue-count { color: var(--orange); }

  .sq-host-row.is-online .sq-host-row-queue-count { color: var(--green); }

  .sq-host-row-queue-label {
    margin-left: 5px;
    font: 600 11px/1 Barlow, sans-serif;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.46);
  }

  .sq-host-row-queue--closed {
    color: #e74c3c;
    text-transform: uppercase;
    font-size: 13px;
  }

  .sq-host-row-route {
    font: 600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 0.01em;
  }

  .sq-host-row-chevron {
    display: none;
    font-size: 22px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.35);
    margin-left: 4px;
  }

  @media (min-width: 640px) {
    .sq-host-row-right {
      flex-direction: row;
      align-items: center;
      gap: 12px;
    }

    .sq-host-row-chevron { display: block; }
  }

  @media (max-width: 520px) {
    .sq-host-row {
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 10px 12px;
      padding: 12px 12px 12px 10px;
    }

    .sq-host-row-right {
      width: 100%;
      padding-left: 22px;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .sq-host-row-chevron { display: block; }
  }

  .sq-page-home .sq-how,
  .sq-page-home .sq-features {
    max-width: min(1200px, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  .sq-showcase-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
  }
  .sq-showcase-kicker {
    color: var(--orange); font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; margin-bottom: 3px;
  }
  .sq-showcase-title {
    color: #fff; font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(24px, 5vw, 32px); font-weight: 800;
    line-height: 1; text-transform: uppercase;
  }
  .sq-showcase-refresh {
    display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--border); background: var(--card-2);
    color: var(--muted); border-radius: 8px; padding: 9px 14px;
    font: 800 11px/1 'Barlow', sans-serif; text-transform: uppercase;
    letter-spacing: .08em; cursor: pointer; transition: all .15s;
    white-space: nowrap;
  }
  .sq-showcase-refresh:hover { color: var(--text); border-color: var(--border-hi); }

  .sq-showcase-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, min(88vw, 380px));
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-color: rgba(255,255,255,.18) transparent;
    scrollbar-width: thin;
  }
  .sq-showcase-grid::-webkit-scrollbar { height: 8px; }
  .sq-showcase-grid::-webkit-scrollbar-track { background: transparent; }
  .sq-showcase-grid::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.16);
    border-radius: 999px;
  }
  .sq-showcase-grid.has-single {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    padding-bottom: 0;
    justify-items: center;
  }
  .sq-showcase-grid.has-single .sq-streamer-card {
    width: min(100%, 680px);
    padding: 28px 26px 24px;
    gap: 18px;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  }

  .sq-showcase-loading {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    color: var(--muted); font-size: 14px; font-weight: 600; padding: 34px;
    min-width: min(100%, 520px);
  }
  .sq-showcase-spinner {
    width: 20px; height: 20px; border: 2px solid var(--border-hi);
    border-top-color: var(--orange); border-radius: 50%;
    animation: sqSpin .7s linear infinite;
  }
  @keyframes sqSpin { to { transform: rotate(360deg); } }

  /* ── Streamer Card ── */
  .sq-streamer-card {
    display: flex; flex-direction: column; gap: 16px;
    padding: 22px 20px 20px; border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background:
      radial-gradient(ellipse 120% 80% at 100% 0%, rgba(255, 107, 0, 0.07), transparent 55%),
      linear-gradient(165deg, rgba(255,255,255,.06) 0%, transparent 45%),
      #0f141c;
    text-decoration: none; color: var(--text);
    transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease;
    position: relative; overflow: hidden;
    scroll-snap-align: start;
    min-width: 0;
  }
  .sq-streamer-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 5px; height: 100%; background: var(--border-hi);
    transition: background .25s;
  }
  .sq-streamer-card:hover {
    border-color: rgba(255,107,0,.35); transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
  }
  .sq-streamer-card:hover::before { background: var(--orange); }
  .sq-streamer-card.live::before { background: var(--green); }
  .sq-streamer-card.live {
    border-color: rgba(61,220,132,.28);
    background:
      radial-gradient(ellipse 100% 70% at 0% 100%, rgba(61, 220, 132, 0.08), transparent 50%),
      radial-gradient(ellipse 120% 80% at 100% 0%, rgba(255, 107, 0, 0.06), transparent 55%),
      linear-gradient(165deg, rgba(255,255,255,.06) 0%, transparent 45%),
      #0f141c;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(61, 220, 132, 0.06) inset;
  }
  .sq-streamer-card.live:hover {
    border-color: rgba(61,220,132,.45);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), 0 0 24px rgba(61, 220, 132, 0.08);
  }
  .sq-streamer-card.away::before { background: var(--muted, #8b93a7); }
  .sq-streamer-card.away .sq-sc-badge { color: var(--muted, #8b93a7); border-color: rgba(139,147,167,.35); }

  .sq-sc-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
  .sq-sc-dot {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
    margin-top: 6px;
    background: var(--muted); box-shadow: 0 0 0 3px rgba(255,255,255,.06);
    transition: all .3s;
  }
  .sq-sc-dot.is-green { background: var(--green); box-shadow: 0 0 0 4px rgba(61,220,132,.15); }
  .sq-sc-dot.is-yellow { background: #f5b233; box-shadow: 0 0 0 4px rgba(245,178,51,.15); }
  .sq-sc-dot.is-grey { background: var(--muted); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
  .sq-streamer-card.live .sq-sc-dot {
    background: var(--green); box-shadow: 0 0 0 4px rgba(61,220,132,.15);
    animation: scPulse 2s ease-in-out infinite;
  }
  @keyframes scPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(61,220,132,.15); }
    50%      { box-shadow: 0 0 0 9px rgba(61,220,132,.04); }
  }
  .sq-sc-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }
  .sq-sc-name {
    font: 800 20px/1 'Barlow Condensed', sans-serif; text-transform: uppercase;
    color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1;
  }
  .sq-sc-you {
    font: 700 11px/1 Barlow, sans-serif;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(255, 140, 80, 0.95);
    white-space: nowrap;
  }
  .sq-streamer-card.is-you {
    border-color: rgba(255, 107, 0, 0.28);
  }
  .sq-sc-owner {
    flex-shrink: 0;
    font: 700 10px/1 Barlow, sans-serif;
    letter-spacing: 0.04em;
    color: rgba(255, 200, 120, 0.95);
    white-space: nowrap;
  }
  .sq-sc-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
  }
  .sq-sc-badge {
    font: 800 11px/1 'Barlow Condensed', sans-serif;
    letter-spacing: .10em;
    text-transform: uppercase; padding: 6px 10px; border-radius: 999px;
    background: rgba(255,107,0,.12); color: var(--orange);
    border: 1px solid rgba(255,107,0,.25); white-space: nowrap;
  }
  .sq-sc-badge-guest {
    color: rgba(180, 210, 255, 0.98);
    background: rgba(100, 160, 255, 0.12);
    border-color: rgba(100, 160, 255, 0.35);
  }
  .sq-streamer-card.is-guest-host {
    border-color: rgba(100, 160, 255, 0.22);
  }
  .sq-streamer-card.is-guest-host.live {
    border-color: rgba(61, 220, 132, 0.28);
  }
  .sq-streamer-card.live .sq-sc-badge {
    background: rgba(61,220,132,.10); color: var(--green);
    border-color: rgba(61,220,132,.25);
  }
  .sq-sc-badge.owner-live {
    background: rgba(61,220,132,.16);
    color: #d6ffe8;
    border-color: rgba(61,220,132,.55);
    box-shadow: 0 0 0 1px rgba(61,220,132,.2) inset;
  }

  .sq-sc-game {
    font: 700 16px/1.25 Barlow, sans-serif;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: -4px;
  }
  .sq-streamer-card.live .sq-sc-game {
    color: rgba(255, 255, 255, 0.95);
  }

  .sq-sc-connections {
    margin-top: -2px;
    margin-bottom: 2px;
  }

  .sq-sc-connections .sq-gaming-chip {
    font-size: 11px;
    padding: 5px 9px;
  }

  .sq-sc-stats {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .sq-sc-stat-queue {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    min-width: 0;
  }
  .sq-sc-queue-frac {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    line-height: 1;
  }
  .sq-sc-queue-num {
    font-size: clamp(36px, 8vw, 48px);
    font-weight: 800;
    color: var(--orange);
    letter-spacing: -0.02em;
  }
  .sq-streamer-card.live .sq-sc-queue-num { color: var(--green); }
  .sq-sc-queue-tail {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
  }
  .sq-sc-queue-denom {
    font-size: clamp(22px, 5vw, 28px);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
  }
  .sq-sc-queue-label {
    font: 700 13px/1 Barlow, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
  }
  .sq-sc-queue-closed {
    font: 800 22px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #e74c3c;
  }
  .sq-sc-stat-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
    flex-shrink: 0;
  }
  .sq-sc-need {
    font: 800 13px/1.1 'Barlow Condensed', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--orange);
    background: rgba(255,107,0,.12);
    border: 1px solid rgba(255,107,0,.32);
    border-radius: 999px;
    padding: 7px 12px;
    white-space: nowrap;
  }
  .sq-sc-need.ready {
    color: var(--green);
    background: rgba(61,220,132,.12);
    border-color: rgba(61,220,132,.35);
  }
  .sq-sc-live-for {
    font: 800 12px/1 'Barlow Condensed', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 140, 80, 0.95);
  }
  .sq-streamer-card.away .sq-sc-live-for { color: var(--muted, #8b93a7); }
  .sq-sc-match-hint {
    font: 600 12px/1.3 Barlow, sans-serif;
    color: rgba(255, 255, 255, 0.42);
    max-width: 160px;
  }
  .sq-streamer-card.closed .sq-sc-badge {
    color: #f1948a;
    border-color: rgba(231, 76, 60, 0.45);
  }

  .sq-sc-bar-wrap {
    width: 100%; height: 8px; background: rgba(255,255,255,.08);
    border-radius: 4px; overflow: hidden;
  }
  .sq-sc-bar {
    height: 100%; border-radius: 3px; background: var(--orange);
    transition: width .4s ease;
  }
  .sq-streamer-card.live .sq-sc-bar { background: var(--green); }

  .sq-sc-join {
    text-align: center; font: 800 15px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--orange); padding: 14px 16px; border-radius: 10px;
    background: rgba(255,107,0,.10); border: 1px solid rgba(255,107,0,.28);
    transition: all .2s;
  }
  .sq-showcase-grid.has-single .sq-sc-join {
    padding: 16px 18px;
    font-size: 16px;
  }
  .sq-streamer-card:hover .sq-sc-join {
    background: rgba(255,107,0,.15); border-color: rgba(255,107,0,.4);
  }
  .sq-streamer-card.live .sq-sc-join {
    color: var(--green); background: rgba(61,220,132,.08);
    border-color: rgba(61,220,132,.20);
  }
  .sq-streamer-card.live:hover .sq-sc-join {
    background: rgba(61,220,132,.15); border-color: rgba(61,220,132,.4);
  }

  .sq-showcase-empty {
    text-align: center; padding: 36px 20px 32px; color: var(--muted);
    font-size: 14px; font-weight: 500; line-height: 1.45;
    min-width: min(100%, 560px);
    max-width: 420px; margin: 0 auto;
  }
  .sq-showcase-empty-title {
    margin: 0 0 10px; padding: 0;
    font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--text);
  }
  .sq-showcase-empty-body {
    margin: 0; padding: 0;
    font-size: 14px; font-weight: 500; color: var(--muted2);
    line-height: 1.5;
  }

  .sq-showcase-cta {
    border-top: 1px solid var(--border); margin-top: 18px;
    padding-top: 14px; text-align: center;
    color: var(--muted); font-size: 13px; font-weight: 700;
  }
  .sq-showcase-cta a { color: var(--orange); text-decoration: none; font-weight: 800; }
  .sq-showcase-cta a:hover { text-decoration: underline; }
  .sq-showcase-cta code {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: 0.92em;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
  }

  /* ── How it works & features ── */
  .sq-section-head {
    text-align: center;
    margin-bottom: 22px;
  }
  .sq-section-kicker {
    margin: 0 0 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--orange);
  }
  .sq-section-title {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(24px, 5vw, 32px);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #fff;
  }

  .sq-how {
    max-width: 920px;
    margin: 0 auto;
    padding: 20px 16px 28px;
  }
  .sq-how-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
  }
  @media (min-width: 720px) {
    .sq-how-steps {
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
  }
  .sq-how-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 16px;
    border-radius: 12px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid var(--border);
  }
  .sq-how-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--orange);
    background: rgba(255, 107, 0, 0.12);
    border: 1px solid rgba(255, 107, 0, 0.25);
  }
  .sq-how-step-title {
    margin: 0 0 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
  }
  .sq-how-step-body {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--muted2);
  }

  .sq-features {
    max-width: 980px;
    margin: 0 auto;
    padding: 8px 16px 40px;
  }

  .sq-anchor {
    display: block;
    position: relative;
    top: -72px;
    visibility: hidden;
    pointer-events: none;
  }
  .sq-live-panel {
    display: block;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px 40px;
  }
  .sq-live-panel-collapse {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  }
  .sq-live-panel-collapse-summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 18px;
    margin: 0;
    user-select: none;
  }
  .sq-live-panel-collapse-summary::-webkit-details-marker {
    display: none;
  }
  .sq-live-panel-collapse-summary-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
  }
  .sq-live-panel-collapse-title {
    text-align: left;
    min-width: 0;
    flex: 1 1 220px;
  }
  .sq-live-panel-collapse-title .sq-section-kicker,
  .sq-live-panel-collapse-title .sq-section-title {
    text-align: left;
  }
  .sq-live-panel-collapse-hint {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted2);
  }
  .sq-live-panel-collapse-body {
    border-top: 1px solid var(--border2);
    padding: 0 0 14px;
  }
  .sq-live-panel-collapse-body .sq-live-embed-stack {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
  }
  .sq-live-panel-collapse-body .sq-live-debug {
    margin: 14px 14px 0;
  }
  .sq-live-collapse-chevron {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--orange);
    border-bottom: 2px solid var(--orange);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .sq-live-panel-collapse[open] .sq-live-collapse-chevron {
    transform: rotate(-135deg);
    margin-top: 6px;
  }
  .sq-live-panel-head {
    margin-bottom: 0;
  }
  .sq-live-panel-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
  }
  .sq-live-status {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted2);
  }
  .sq-live-status[data-state="live"] {
    color: #b8f0c8;
    border-color: rgba(46, 204, 113, 0.45);
    background: rgba(46, 204, 113, 0.12);
  }
  .sq-live-status[data-state="offline"] {
    color: var(--muted2);
  }
  .sq-live-status[data-state="error"] {
    color: #ffb4a8;
    border-color: rgba(231, 76, 60, 0.4);
    background: rgba(231, 76, 60, 0.1);
  }
  .sq-live-status[data-state="idle"] {
    color: #ffe08a;
    border-color: rgba(241, 196, 15, 0.35);
    background: rgba(241, 196, 15, 0.08);
  }
  .sq-live-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    z-index: 2;
    background: linear-gradient(180deg, rgba(8, 10, 12, 0.55), rgba(8, 10, 12, 0.92));
  }
  .sq-live-placeholder[hidden] {
    display: none;
  }
  .sq-live-placeholder-title {
    margin: 0;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
  }
  .sq-live-placeholder-body {
    margin: 0;
    max-width: 420px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--muted2);
  }
  .sq-live-debug {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
    overflow: hidden;
  }
  .sq-live-debug-summary {
    cursor: pointer;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--orange);
    list-style: none;
  }
  .sq-live-debug-summary::-webkit-details-marker {
    display: none;
  }
  .sq-live-debug-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 0 14px 12px;
  }
  .sq-live-debug-btn {
    appearance: none;
    border: 1px solid var(--orange-border);
    background: var(--orange-dim);
    color: var(--orange);
    border-radius: 8px;
    padding: 8px 14px;
    font: 800 11px Barlow, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .sq-live-debug-btn:hover {
    background: rgba(255, 107, 0, 0.18);
  }
  .sq-live-debug-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted2);
    cursor: pointer;
  }
  .sq-live-debug-input {
    flex: 1;
    min-width: 140px;
    max-width: 220px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font: 600 13px Barlow, sans-serif;
  }
  .sq-live-debug-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--orange);
    text-decoration: none;
  }
  .sq-live-debug-link:hover {
    text-decoration: underline;
  }
  .sq-live-debug-log {
    margin: 0;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--border2);
    font: 600 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #c8d0d8;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 280px;
    overflow: auto;
  }
  .sq-live-embed-join {
    align-self: flex-end;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--orange);
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid var(--orange-border);
    border-radius: 8px;
    background: var(--orange-dim);
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .sq-live-embed-join:hover {
    background: rgba(255, 107, 0, 0.18);
    border-color: rgba(255, 107, 0, 0.5);
  }
  .sq-live-embed-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--orange-border);
    box-shadow:
      0 0 0 1px rgba(255, 107, 0, 0.08),
      0 18px 48px rgba(0, 0, 0, 0.45);
  }
  .sq-live-embed-frame,
  #sqLiveEmbedFrame {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #000;
    box-shadow: none;
  }
  .sq-live-chat {
    border-top: 1px solid rgba(255, 107, 0, 0.22);
    background: linear-gradient(180deg, rgba(8, 10, 14, 0.98), rgba(6, 8, 12, 1));
  }
  .sq-live-chat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted2);
  }
  .sq-live-chat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff6b8a;
    box-shadow: 0 0 0 3px rgba(255, 107, 138, 0.2);
    flex-shrink: 0;
  }
  .sq-live-chat-title {
    color: rgba(255, 255, 255, 0.82);
  }
  .sq-live-chat-badges {
    display: flex;
    gap: 6px;
    margin-left: 4px;
  }
  .sq-live-chat-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 99px;
    border: 1px solid transparent;
  }
  .sq-live-chat-badge--tiktok {
    color: #ffc1ce;
    background: rgba(255, 138, 161, 0.14);
    border-color: rgba(255, 138, 161, 0.35);
  }
  .sq-live-chat-badge--twitch {
    color: #e1d1ff;
    background: rgba(199, 166, 255, 0.14);
    border-color: rgba(199, 166, 255, 0.35);
  }
  .sq-live-chat-count {
    margin-left: auto;
    font-size: 10px;
    color: var(--muted);
  }
  .sq-live-chat-feed {
    max-height: 148px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-behavior: smooth;
  }
  .sq-live-chat-empty {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    padding: 6px 4px;
    display: grid;
    gap: 3px;
  }
  .sq-live-chat-empty span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
  }
  .sq-live-chat-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 14, 18, 0.88);
    animation: sq-live-chat-in 0.2s ease-out both;
  }
  @keyframes sq-live-chat-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .sq-live-chat-row--tiktok {
    border-color: rgba(255, 138, 161, 0.28);
    background: linear-gradient(90deg, rgba(255, 138, 161, 0.1), rgba(12, 14, 18, 0.9) 55%);
  }
  .sq-live-chat-row--twitch {
    border-color: rgba(199, 166, 255, 0.3);
    background: linear-gradient(90deg, rgba(199, 166, 255, 0.1), rgba(12, 14, 18, 0.9) 55%);
  }
  .sq-live-chat-platform {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 99px;
    line-height: 1;
    white-space: nowrap;
  }
  .sq-live-chat-row--tiktok .sq-live-chat-platform {
    color: #1a1116;
    background: #ff8aa1;
  }
  .sq-live-chat-row--twitch .sq-live-chat-platform {
    color: #100d19;
    background: #c7a6ff;
  }
  .sq-live-chat-line {
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(248, 250, 252, 0.92);
  }
  .sq-live-chat-name {
    font-weight: 800;
    color: #ffc1ce;
    margin-right: 6px;
  }
  .sq-live-chat-row--twitch .sq-live-chat-name {
    color: #e1d1ff;
  }
  .sq-live-chat-text {
    font-weight: 600;
    color: rgba(248, 250, 252, 0.88);
    word-break: break-word;
  }
  .sq-live-chat-cmd {
    display: inline-block;
    margin-left: 6px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0c1a22;
    background: rgba(125, 211, 252, 0.95);
    padding: 2px 6px;
    border-radius: 99px;
    vertical-align: middle;
  }
  .sq-live-embed-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 80px rgba(255, 107, 0, 0.06);
    z-index: 1;
  }
  .sq-live-embed-video {
    display: block;
    width: 100%;
    max-height: min(56vh, 520px);
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
    cursor: pointer;
  }
  .sq-live-embed-hint {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted2);
    text-align: center;
  }
  .sq-features-grid {
    display: grid;
    gap: 14px;
  }
  @media (min-width: 600px) {
    .sq-features-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 900px) {
    .sq-features-grid { grid-template-columns: repeat(4, 1fr); }
  }
  .sq-feature-card {
    padding: 20px 16px 18px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    transition: border-color 0.2s ease, transform 0.2s ease;
  }
  .sq-feature-card:hover {
    border-color: var(--border-hi);
    transform: translateY(-2px);
  }
  .sq-feature-icon {
    display: block;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 12px;
  }
  .sq-feature-title {
    margin: 0 0 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
  }
  .sq-feature-body {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--muted2);
  }
  .sq-feature-body strong {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
  }


  /* ── Cards ── */  
  .card {  
    background: var(--card);  
    border: 1px solid var(--border-hi);  
    border-radius: 4px;  
    padding: 18px 16px;  
    margin-bottom: 12px;  
    position: relative;  
    overflow: hidden;  
    transition: border-color .2s;  
  }  
  @media (min-width: 400px) { .card { padding: 22px 20px; } }  
  @media (min-width: 540px) { .card { padding: 22px 24px; margin-bottom: 14px; } }

  .card::before {  
    content: '';  
    position: absolute;  
    top: 0; left: 0;  
    width: 3px; height: 100%;  
    background: var(--orange);  
  }  
  .card:hover { border-color: rgba(255,255,255,.18); }

  .card-title {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 10px;  
    font-weight: 700;  
    letter-spacing: .18em;  
    text-transform: uppercase;  
    color: var(--muted2);  
    margin-bottom: 16px;  
    display: flex;  
    align-items: center;  
    gap: 8px;  
  }  
  .card-title::after {  
    content: '';  
    flex: 1;  
    height: 1px;  
    background: var(--border);  
  }

  /* ── Pause banner ── */  
  #pauseBanner {  
    display: none;  
    background: var(--green-dim);  
    border: 1px solid var(--green-border);  
    border-radius: 3px;  
    padding: 10px 14px;  
    margin-bottom: 14px;  
    font-size: 13px;  
    color: var(--green);  
    text-align: center;  
    font-weight: 600;  
    letter-spacing: .3px;  
    font-family: 'Barlow Condensed', sans-serif;  
  }  
  #pauseBanner.visible { display: block; }

  /* ── Input & buttons ── */  
  .join-input {  
    width: 100%;  
    height: 52px;  
    padding: 0 14px;  
    font-size: 16px; /* prevents iOS zoom on focus */  
    font-weight: 500;  
    background: #0a0d0f;  
    border: 1px solid var(--border);  
    border-radius: 3px;  
    color: var(--text);  
    margin-bottom: 10px;  
    outline: none;  
    font-family: 'Barlow', sans-serif;  
    transition: border-color .15s, background .15s;  
    letter-spacing: .01em;  
    -webkit-appearance: none;  
    appearance: none;  
  }  
  .join-input:focus {  
    border-color: rgba(255,107,0,.5);  
    background: #0d1012;  
  }  
  .join-input::placeholder { color: var(--muted2); }  
  .join-input:disabled { opacity: 0.4; cursor: not-allowed; }

  .btn {  
    width: 100%;  
    height: 50px;  
    font-size: 13px;  
    font-weight: 700;  
    letter-spacing: .12em;  
    border: none;  
    border-radius: 3px;  
    cursor: pointer;  
    transition: background .15s, transform .1s, filter .15s;  
    text-transform: uppercase;  
    font-family: 'Barlow Condensed', sans-serif;  
    touch-action: manipulation;  
    -webkit-tap-highlight-color: transparent;  
  }  
  .btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }  
  .btn:active:not(:disabled) { transform: scale(.98); }  
  .btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

  .btn-primary { background: var(--orange); color: #fff; }  
  .btn-danger  { background: #c0392b; color: #fff; }  
  .btn-ghost   {  
    background: var(--card-2);  
    color: var(--orange);  
    border: 1px solid var(--orange-border);  
  }  
  .btn-ghost:hover:not(:disabled) { background: var(--orange-dim); }

  .err { font-size: 13px; color: var(--red);   margin-top: 10px; min-height: 18px; }  
  .ok  { font-size: 13px; color: var(--green); margin-top: 10px; }

  /* ── Remove container ── */  
  #removeContainer {  
    transition: all .3s ease;  
    overflow: hidden;  
    margin-top: 10px;  
  }  
  #removeContainer.hidden { height: 0; opacity: 0; margin-top: 0; }

  /* ── Playing card ── */  
  .playing-card {  
    background: var(--card);  
    border: 1px solid rgba(61,220,132,.2);  
    border-radius: 4px;  
    padding: 22px 24px;  
    margin-bottom: 14px;  
    position: relative;  
    overflow: hidden;  
  }  
  .playing-card::before {  
    content: '';  
    position: absolute;  
    top: 0; left: 0;  
    width: 3px; height: 100%;  
    background: var(--green);  
  }

  .playing-title {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 10px;  
    font-weight: 700;  
    letter-spacing: .18em;  
    text-transform: uppercase;  
    color: var(--green);  
    margin-bottom: 14px;  
    display: flex;  
    align-items: center;  
    gap: 8px;  
  }  
  .playing-title::after {  
    content: '';  
    flex: 1;  
    height: 1px;  
    background: rgba(61,220,132,.2);  
  }

  .live-dot {  
    width: 7px; height: 7px;  
    border-radius: 50%;  
    background: var(--green);  
    display: inline-block;  
    flex-shrink: 0;  
    animation: pulse 1.8s ease-in-out infinite;  
  }

  @keyframes pulse {  
    0%, 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0.5); }  
    50%       { box-shadow: 0 0 0 5px rgba(61,220,132,0); }  
  }

  /* ── Player rows ── */  
  .player-row {  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    padding: 11px 13px;  
    background: var(--card-2);  
    border-radius: 3px;  
    margin-bottom: 5px;  
    font-size: 14px;  
    border: 1px solid transparent;  
    transition: border-color .15s;  
    min-height: 44px; /* WCAG touch target */  
  }  
  .player-row:last-child { margin-bottom: 0; }  
  .player-row.my-row {  
    border-color: var(--orange-border);  
    background: rgba(255,107,0,.07);  
  }  
  .playing-card .player-row {  
    background: rgba(0,0,0,.25);  
  }

  .pos   { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; color: var(--muted2); width: 22px; flex-shrink: 0; }  
  .pname { flex: 1; font-weight: 500; color: var(--text); }

  .pill {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 10px;  
    padding: 2px 8px;  
    border-radius: 3px;  
    font-weight: 700;  
    letter-spacing: .08em;  
    text-transform: uppercase;  
  }  
  .pill-orange { background: var(--orange-dim); color: var(--orange); border: 1px solid var(--orange-border); }  
  .pill-green  { background: var(--green-dim);  color: var(--green);  border: 1px solid var(--green-border);  }  
  .pill-console { background: var(--blue-dim); color: var(--blue); border: 1px solid var(--blue-border); }

  .you-tag { font-size: 11px; color: var(--muted); font-style: italic; }

  .copy-btn {  
    display: inline-flex;  
    align-items: center;  
    justify-content: center;  
    width: 32px;  
    height: 32px;  
    border-radius: 3px;  
    border: 1px solid var(--border);  
    background: transparent;  
    color: var(--muted2);  
    cursor: pointer;  
    flex-shrink: 0;  
    transition: background .15s, border-color .15s, color .15s;  
    padding: 0;  
    -webkit-tap-highlight-color: transparent;  
    touch-action: manipulation;  
  }  
  .copy-btn:hover { background: var(--card-2); border-color: var(--border-hi); color: var(--text); }  
  .copy-btn.copied { color: var(--green); border-color: var(--green-border); background: var(--green-dim); }

  .empty {  
    font-size: 13px;  
    color: var(--muted2);  
    padding: 14px 0;  
    text-align: center;  
    letter-spacing: .3px;  
  }

  /* ── Queue header ── */  
  .queue-hd {  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    margin-bottom: 14px;  
  }  
  .queue-hd .card-title { margin-bottom: 0; flex: 1; }  
  .q-count {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 11px;  
    color: var(--muted2);  
    font-weight: 700;  
    letter-spacing: .08em;  
    text-transform: uppercase;  
  }

  /* ── Snake game ── */  
  #snakePrompt { text-align: center; padding: 4px 0; }  
  #snakeGame { display: none; }

  .snake-hud {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    margin-bottom: 10px;  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 11px;  
    color: var(--muted2);  
    font-weight: 700;  
    letter-spacing: .1em;  
    text-transform: uppercase;  
  }  
  .snake-score { font-size: 20px; font-weight: 800; color: var(--orange); letter-spacing: -.01em; }

  .snake-wrap { position: relative; width: 100%; }

  #snakeCanvas {  
    display: block;  
    width: 100%;  
    height: auto;  
    border-radius: 3px;  
    border: 1px solid var(--border);  
    background: #0a0a0c;  
  }

  .snake-info {  
    font-size: 11px;  
    color: var(--muted2);  
    text-align: center;  
    margin-top: 8px;  
    letter-spacing: .04em;  
  }

  .snake-legend {  
    display: flex;  
    gap: 14px;  
    flex-wrap: wrap;  
    margin-top: 10px;  
    font-size: 11px;  
    color: var(--muted);  
    justify-content: center;  
    font-family: 'Barlow Condensed', sans-serif;  
    letter-spacing: .06em;  
    text-transform: uppercase;  
  }  
  .snake-legend span { display: flex; align-items: center; gap: 5px; }  
  .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }

  #snakeOverlay {  
    position: absolute;  
    inset: 0;  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
    background: rgba(8,10,12,0.92);  
    border-radius: 3px;  
    gap: 10px;  
    backdrop-filter: blur(3px);  
  }  
  #snakeOverlay h3 {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 24px;  
    color: var(--orange);  
    letter-spacing: .2em;  
    font-weight: 800;  
    text-transform: uppercase;  
  }  
  #snakeOverlay p { font-size: 13px; color: var(--muted); }  
  #snakeOverlay button {  
    padding: 10px 28px;  
    font-size: 12px;  
    font-weight: 700;  
    letter-spacing: .12em;  
    background: var(--orange);  
    color: #fff;  
    border: none;  
    border-radius: 3px;  
    cursor: pointer;  
    text-transform: uppercase;  
    font-family: 'Barlow Condensed', sans-serif;  
    transition: filter .15s;  
  }  
  #snakeOverlay button:hover { filter: brightness(1.1); }

  .power-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; min-height: 20px; }  
  .power-tag {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 10px;  
    font-weight: 700;  
    padding: 3px 9px;  
    border-radius: 3px;  
    border: 1px solid;  
    letter-spacing: .06em;  
    text-transform: uppercase;  
    animation: fadeIn .2s ease;  
  }  
  @keyframes fadeIn { from { opacity:0; transform: scale(.85); } to { opacity:1; transform: scale(1); } }

  /* ── Snake mobile D-pad ── */  
  .snake-dpad {  
    display: none;  
    grid-template-columns: repeat(3, 1fr);  
    grid-template-rows: repeat(3, 1fr);  
    gap: 9px;  
    width: 198px;  
    margin: 14px auto 4px;  
  }  
  @media (pointer: coarse) {  
    .snake-dpad { display: grid; }  
    .snake-info { display: none; }  
  }

  .dpad-btn {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    height: 60px;  
    background: var(--card-2);  
    border: 1px solid var(--border-hi);  
    border-radius: 10px;  
    color: var(--muted);  
    font-size: 28px;  
    font-weight: 800;  
    cursor: pointer;  
    user-select: none;  
    -webkit-user-select: none;  
    -webkit-tap-highlight-color: transparent;  
    touch-action: manipulation;  
    transition: background .1s, border-color .1s;  
  }  
  .dpad-btn:active { background: rgba(255,107,0,.15); border-color: var(--orange-border); color: var(--orange); }  
  .dpad-center { background: transparent; border: none; cursor: default; }  
  .dpad-center:active { background: transparent; }

  /* ── Pac-Man enhanced UI ── */  
  #pacmanTab .pm-hud {  
    display: grid;  
    grid-template-columns: 1fr 1fr 1fr;  
    gap: 8px;  
    margin-bottom: 10px;  
  }  
  #pacmanTab .pm-hud-box {  
    background: #06061a;  
    border: 2px solid rgba(26,63,255,0.6);  
    border-radius: 4px;  
    padding: 7px 8px;  
    text-align: center;  
    box-shadow: 0 0 12px rgba(26,63,255,0.35);  
  }  
  #pacmanTab .pm-hud-label {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 9px;  
    color: #00FFFF;  
    letter-spacing: .15em;  
    margin-bottom: 3px;  
    font-weight: 700;  
    text-transform: uppercase;  
  }  
  #pacmanTab .pm-hud-value {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 18px;  
    font-weight: 800;  
    color: #fff;  
    letter-spacing: .05em;  
  }  
  #pacmanTab #pmLives {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 18px;  
    font-weight: 800;  
    color: #FFE000;  
    text-shadow: 0 0 8px #FFE000;  
    letter-spacing: 2px;  
  }  
  #pacmanTab .pm-canvas-shell {  
    position: relative;  
    border: 3px solid rgba(26,63,255,0.8);  
    border-radius: 6px;  
    box-shadow: 0 0 20px rgba(26,63,255,0.5), inset 0 0 20px rgba(0,0,8,0.8);  
    background: #000008;  
    overflow: hidden;  
  }  
  #pacmanTab .pm-canvas-shell::before,  
  #pacmanTab .pm-canvas-shell::after {  
    content: '';  
    position: absolute;  
    width: 18px; height: 18px;  
    border-color: #FFE000;  
    border-style: solid;  
    z-index: 10;  
    box-shadow: 0 0 10px #FFE000;  
  }  
  #pacmanTab .pm-canvas-shell::before { top:-2px;left:-2px;border-width:3px 0 0 3px;border-radius:4px 0 0 0; }  
  #pacmanTab .pm-canvas-shell::after  { bottom:-2px;right:-2px;border-width:0 3px 3px 0;border-radius:0 0 4px 0; }  
  #pacmanTab #pmCanvas {  
    display: block; width: 100%; image-rendering: pixelated;  
  }  
  #pacmanTab #pmOverlay {  
    position: absolute; inset: 0;  
    display: flex; flex-direction: column; align-items: center; justify-content: center;  
    background: rgba(0,0,12,0.88);  
    backdrop-filter: blur(2px);  
    z-index: 50; gap: 12px; padding: 16px;  
  }  
  #pacmanTab .pm-ghost-parade {  
    display: flex; gap: 10px; margin: 2px 0;  
  }  
  #pacmanTab .pm-ghost-icon {  
    font-size: 22px;  
    animation: pmGhostBob 1.2s ease-in-out infinite;  
  }  
  #pacmanTab .pm-ghost-icon:nth-child(2) { animation-delay:.15s; }  
  #pacmanTab .pm-ghost-icon:nth-child(3) { animation-delay:.3s; }  
  #pacmanTab .pm-ghost-icon:nth-child(4) { animation-delay:.45s; }  
  @keyframes pmGhostBob {  
    0%,100% { transform: translateY(0); }  
    50%      { transform: translateY(-5px); }  
  }  
  #pacmanTab #pmOverlayTitle {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: clamp(20px, 5vw, 30px);  
    font-weight: 900;  
    letter-spacing: .15em;  
    color: #FFE000;  
    text-shadow: 0 0 15px #FFE000, 4px 4px 0 #b8a000;  
    text-transform: uppercase;  
    text-align: center;  
    animation: pmTitleFlicker 4s ease-in-out infinite;  
  }  
  @keyframes pmTitleFlicker {  
    0%,95%,100%{opacity:1} 96%{opacity:.7} 97%{opacity:1} 98%{opacity:.5} 99%{opacity:1}  
  }  
  #pacmanTab #pmOverlayMsg {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 11px; color: #FFB8FF; text-align: center; line-height: 1.8;  
    text-shadow: 0 0 6px #FFB8FF; letter-spacing: .05em; max-width: 280px;  
  }  
  #pacmanTab .pm-start-btn {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 13px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;  
    background: transparent; color: #FFE000;  
    border: 2px solid #FFE000; border-radius: 4px; padding: 10px 26px; cursor: pointer;  
    box-shadow: 0 0 15px #FFE000; transition: background .15s, color .15s;  
    animation: pmBtnBlink 1.5s ease-in-out infinite;  
  }  
  @keyframes pmBtnBlink {  
    0%,100%{box-shadow:0 0 15px #FFE000;} 50%{box-shadow:0 0 30px #FFE000,0 0 60px #FFE00066;}  
  }  
  #pacmanTab .pm-start-btn:hover { background:#FFE000;color:#000;box-shadow:0 0 40px #FFE000;animation:none; }  
  #pacmanTab .pm-start-btn:active { transform:scale(.97); }  
  #pacmanTab .pm-controls-hint {  
    text-align: center; font-family: 'Barlow Condensed', sans-serif;  
    font-size: 9px; color: #2244bb; letter-spacing: .12em; margin-bottom: 8px; text-transform: uppercase;  
  }  
  #pacmanTab .pm-dpad {  
    display: grid;  
    grid-template-columns: repeat(3, 64px);  
    grid-template-rows: repeat(3, 64px);  
    gap: 8px; margin: 0 auto; width: fit-content;  
  }  
  #pacmanTab .pm-dpad-btn {  
    background: #06061a; border: 2px solid rgba(26,63,255,0.55); border-radius: 12px;  
    color: #00FFFF; font-size: 30px; font-weight: 800; cursor: pointer;  
    display: flex; align-items: center; justify-content: center;  
    transition: background .1s, border-color .1s, transform .08s;  
    user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;  
  }  
  #pacmanTab .pm-dpad-btn:active,  
  #pacmanTab .pm-dpad-btn.pressed {  
    background: rgba(26,63,255,0.2); border-color: #00FFFF;  
    transform: scale(0.9); box-shadow: 0 0 10px #00FFFF;  
  }  
  #pacmanTab .pm-dpad-center { visibility: hidden; pointer-events: none; border: none; background: transparent; }

  /* ── Snake unlockable selector ── */  
  .snake-skin-panel {  
    margin-top: 12px;  
    padding: 12px;  
    background: rgba(255,255,255,0.025);  
    border: 1px solid var(--border);  
    border-radius: 4px;  
  }  
  .snake-skin-title {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 10px;  
    font-weight: 700;  
    letter-spacing: .18em;  
    text-transform: uppercase;  
    color: rgba(255,255,255,0.28);  
    margin-bottom: 8px;  
  }  
  .snake-skin-picker {  
    display: grid;  
    grid-template-columns: repeat(2, 1fr);  
    gap: 8px;  
  }  
  @media (min-width: 540px) {  
    .snake-skin-picker { grid-template-columns: repeat(4, 1fr); }  
  }  
  .skin-btn {  
    min-height: 72px;  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 12px;  
    font-weight: 800;  
    letter-spacing: .07em;  
    text-transform: uppercase;  
    border-radius: 6px;  
    padding: 10px 10px 8px;  
    cursor: pointer;  
    border: 1px solid var(--border-hi);  
    background: var(--card-2);  
    color: var(--text);  
    transition: transform .1s, filter .15s, border-color .2s, background .2s, box-shadow .2s;  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    gap: 4px;  
    position: relative;  
    overflow: hidden;  
  }  
  .skin-btn::after {  
    content: '';  
    position: absolute;  
    bottom: 0; left: 0; right: 0;  
    height: 2px;  
    background: transparent;  
    transition: background .2s;  
  }  
  .skin-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }  
  .skin-btn:active:not(:disabled) { transform: scale(.97); }  
  .skin-btn.selected {  
    background: rgba(255,107,0,0.07);  
    border-color: rgba(255,107,0,0.45);  
    color: var(--orange);  
    box-shadow: 0 0 16px rgba(255,107,0,0.12), inset 0 0 20px rgba(255,107,0,0.04);  
  }  
  .skin-btn.selected::after { background: var(--orange); }  
  .skin-btn.locked {  
    opacity: .50;  
    cursor: not-allowed;  
    color: var(--muted2);  
    background: rgba(255,255,255,.018);  
    filter: grayscale(0.4);  
  }  
  .skin-btn small {  
    display: block;  
    font-size: 9px;  
    font-weight: 700;  
    letter-spacing: .05em;  
    color: var(--muted);  
    margin-top: 1px;  
  }  
  .skin-btn.selected small { color: rgba(255,107,0,0.7); }  
  /* Mini snake SVG preview strip */  
  .skin-snake-svg {  
    width: 100%;  
    height: 18px;  
    display: block;  
    border-radius: 3px;  
    overflow: visible;  
  }  
  .skin-btn-label { font-size: 11px; font-weight: 800; letter-spacing: .07em; margin-top: 1px; }  
  .skin-note {  
    font-size: 11px;  
    color: var(--muted2);  
    margin-top: 8px;  
    font-family: 'Barlow Condensed', sans-serif;  
    letter-spacing: .04em;  
    text-align: center;  
  }

  /* ── How to Play Panel ── */  
  .games-card-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  .games-card-toolbar .how-to-play-toggle {
    flex: 1;
    margin-bottom: 0;
    min-width: 0;
  }
  .games-card-toolbar .sound-toggle-btn {
    width: auto;
    min-width: 44px;
    height: 38px;
    padding: 0 12px;
    font: 800 11px/1 'Barlow Condensed', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .games-bridge {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 8px;
  }
  .games-bridge-btn {
    flex: 1 1 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, filter .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .games-bridge-btn-primary {
    background: linear-gradient(135deg, var(--orange), #ff3f62);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  }
  .games-bridge-btn-primary:hover {
    filter: brightness(1.06);
    color: #fff;
  }
  .games-bridge-btn-secondary {
    background: rgba(50,213,255,0.10);
    border-color: rgba(50,213,255,0.32);
    color: #dff7ff;
  }
  .games-bridge-btn-secondary:hover {
    background: rgba(50,213,255,0.16);
    border-color: rgba(50,213,255,0.48);
    color: #fff;
  }
  .games-bridge-fallback {
    margin: 0 0 14px;
    font-size: 11px;
    color: var(--muted2);
    line-height: 1.45;
  }
  .games-bridge-fallback a {
    color: rgba(255,255,255,0.72);
    font-weight: 600;
    text-decoration: none;
  }
  .games-bridge-fallback a:hover {
    color: var(--cyan);
    text-decoration: underline;
  }
  @media (max-width: 480px) {
    .games-bridge-btn {
      flex: 1 1 100%;
    }
  }
  .how-to-play-toggle {  
    display: flex; align-items: center; justify-content: space-between;  
    padding: 9px 13px;  
    background: rgba(255,107,0,0.06);  
    border: 1px solid rgba(255,107,0,0.20);  
    border-radius: 4px;  
    cursor: pointer;  
    margin-bottom: 12px;  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 11px; font-weight: 700; letter-spacing: .13em;  
    text-transform: uppercase; color: var(--orange);  
    user-select: none; -webkit-tap-highlight-color: transparent;  
    transition: background .15s, border-color .15s;  
  }  
  .how-to-play-toggle:hover { background: rgba(255,107,0,0.11); border-color: rgba(255,107,0,0.32); }  
  .how-to-play-toggle .htp-chevron { transition: transform .2s; font-style: normal; }  
  .how-to-play-toggle.open .htp-chevron { transform: rotate(180deg); }  
  .how-to-play-body {  
    display: none;  
    background: rgba(255,255,255,0.022);  
    border: 1px solid var(--border);  
    border-radius: 4px;  
    padding: 14px 14px 12px;  
    margin-bottom: 14px;  
    animation: htpIn .18s ease;  
  }  
  @keyframes htpIn { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform: translateY(0); } }  
  .how-to-play-body.open { display: block; }  
  .htp-section { margin-bottom: 13px; }  
  .htp-section:last-child { margin-bottom: 0; }  
  .htp-head {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 10px; font-weight: 700; letter-spacing: .16em;  
    text-transform: uppercase; color: var(--orange);  
    margin-bottom: 7px; display: flex; align-items: center; gap: 6px;  
  }  
  .htp-head::after { content: ''; flex: 1; height: 1px; background: rgba(255,107,0,0.15); }  
  .htp-row {  
    display: flex; align-items: flex-start; gap: 9px;  
    margin-bottom: 5px; font-size: 12px; color: rgba(255,255,255,0.52); line-height: 1.45;  
  }  
  .htp-icon {  
    flex-shrink: 0; min-width: 22px; height: 22px;  
    border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 13px;  
  }  
  .htp-label { font-weight: 600; color: var(--text); }

  /* ── Sound toggle ── */  
  .sound-toggle-btn {  
    background: var(--card-2); border: 1px solid var(--border-hi);  
    border-radius: 3px; width: 30px; height: 30px;  
    display: flex; align-items: center; justify-content: center;  
    cursor: pointer; font-size: 14px; color: var(--muted2);  
    transition: background .15s, border-color .15s, color .15s, transform .08s;  
    flex-shrink: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation;  
  }  
  .sound-toggle-btn:hover { background: rgba(255,107,0,0.08); border-color: var(--orange-border); color: var(--orange); }  
  .sound-toggle-btn:active { transform: scale(.92); }  
  .sound-toggle-btn.muted { color: rgba(255,82,82,0.7); border-color: rgba(255,82,82,0.25); }

  /* ── Skin preview swatches / mini snake art ── */  
  .skin-preview { display: flex; gap: 2px; justify-content: center; margin-bottom: 4px; }  
  .skin-swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }  
  .skin-snake-art {  
    width: 100%;  
    height: 24px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    gap: 2px;  
    margin-bottom: 4px;  
  }  
  .skin-mini-seg {  
    width: 15px;  
    height: 15px;  
    border-radius: 4px;  
    border: 1px solid rgba(255,255,255,0.14);  
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);  
    flex: 0 0 auto;  
  }  
  .skin-mini-head-img {  
    width: 21px;  
    height: 21px;  
    border-radius: 5px;  
    object-fit: cover;  
    border: 1px solid rgba(255,255,255,0.20);  
    background: rgba(255,255,255,0.08);  
    box-shadow: 0 0 8px rgba(0,0,0,0.35);  
    flex: 0 0 auto;  
  }  
  .skin-btn.locked .skin-snake-art { opacity: .45; filter: grayscale(.75); }

  /* ── Bigger D-pad on touch devices ── */  
  @media (pointer: coarse) {  
    .snake-dpad { width: 210px !important; gap: 9px !important; }  
    .dpad-btn { height: 62px !important; font-size: 30px !important; border-radius: 11px !important; }  
    #pacmanTab .pm-dpad { grid-template-columns: repeat(3, 66px) !important; grid-template-rows: repeat(3, 66px) !important; gap: 8px !important; }  
    #pacmanTab .pm-dpad-btn { font-size: 32px !important; border-radius: 12px !important; }  
  }  
  /* D-pad press animation */  
  .dpad-btn:active, .dpad-btn.pressed {  
    background: rgba(255,107,0,0.18) !important; border-color: var(--orange-border) !important;  
    color: var(--orange) !important; transform: scale(0.90) !important;  
    box-shadow: 0 0 8px rgba(255,107,0,0.3) !important;  
  }

  /* ── Skin unlock modal ── */  
  #skinUnlockModal {  
    display: none; position: fixed; inset: 0; z-index: 10000;  
    background: rgba(0,0,0,0.80); backdrop-filter: blur(5px);  
    align-items: center; justify-content: center;  
  }  
  .skin-unlock-box {  
    background: #0f1214; border: 1px solid rgba(255,107,0,0.50);  
    border-radius: 8px; padding: 28px 24px 22px;  
    max-width: 290px; width: 90%; margin: 0 16px;  
    text-align: center; position: relative;  
    box-shadow: 0 0 40px rgba(255,107,0,0.15);  
    animation: unlockPop .28s cubic-bezier(.175,.885,.32,1.275);  
  }  
  @keyframes unlockPop { from { opacity:0; transform: scale(.82); } to { opacity:1; transform: scale(1); } }  
  .skin-unlock-box::before { content: ''; position: absolute; top:0; left:0; width:3px; height:100%; background:var(--orange); border-radius:3px 0 0 3px; }  
  .skin-unlock-eyebrow { font-family:'Barlow Condensed',sans-serif; font-size:9px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--orange); margin-bottom:8px; }  
  .skin-unlock-emoji { font-size:42px; margin:4px 0 8px; }  
  .skin-unlock-name { font-family:'Barlow Condensed',sans-serif; font-size:26px; font-weight:900; color:#fff; margin-bottom:5px; }  
  .skin-unlock-desc { font-size:12px; color:var(--muted); margin-bottom:14px; line-height:1.5; }  
  .skin-unlock-swatches { display:flex; gap:4px; justify-content:center; margin-bottom:18px; }  
  .skin-unlock-swatch { width:18px; height:18px; border-radius:3px; }  
  .skin-unlock-actions { display:flex; gap:8px; }  
  .skin-unlock-use { flex:1; height:42px; background:var(--orange); color:#fff; border:none; border-radius:4px; font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:filter .15s, transform .08s; }  
  .skin-unlock-use:hover { filter:brightness(1.1); }  
  .skin-unlock-use:active { transform:scale(.97); }  
  .skin-unlock-later { flex:0 0 auto; height:42px; padding:0 16px; background:var(--card-2); color:var(--muted2); border:1px solid var(--border-hi); border-radius:4px; font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; cursor:pointer; transition:background .15s; }  
  .skin-unlock-later:hover { background:#1e252a; }

  /* ── New High Score banner ── */  
  .new-hs-banner {  
    font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 800;  
    letter-spacing: .18em; text-transform: uppercase; color: #FFE000;  
    text-shadow: 0 0 12px #FFE000; display: none;  
    animation: hsBlink 0.6s ease-in-out infinite alternate;  
  }  
  @keyframes hsBlink { from { opacity:.65; text-shadow: 0 0 8px #FFE000; } to { opacity:1; text-shadow: 0 0 22px #FFE000, 0 0 44px #FFE00055; } }  
  .game-over-scores {  
    display: none; flex-direction: column; align-items: center; gap: 3px; margin: 4px 0 2px;  
  }  
  .go-score-big { font-family:'Barlow Condensed',sans-serif; font-size:38px; font-weight:900; color:var(--orange); letter-spacing:-.01em; line-height:1; }  
  .go-score-best { font-family:'Barlow Condensed',sans-serif; font-size:13px; color:var(--muted); }  
  .go-saved-badge { font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green); background:var(--green-dim); border:1px solid var(--green-border); border-radius:3px; padding:3px 10px; display:none; }

  /* ── Footer ── */  
  footer {  
    background: rgba(10,13,15,0.85);  
    border-top: 1px solid var(--border-hi);  
    padding: 12px 16px;  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: center;  
    align-items: center;  
    gap: 14px;  
    flex-shrink: 0;  
    position: relative;  
    z-index: 1;  
    backdrop-filter: blur(12px);  
  }

  .footer-person {  
    display: flex;  
    align-items: center;  
    gap: 8px;  
  }

  .footer-name {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 11px;  
    font-weight: 700;  
    color: var(--muted2);  
    text-transform: uppercase;  
    letter-spacing: .12em;  
  }

  .footer-links {  
    display: flex;  
    align-items: center;  
    gap: 5px;  
    flex-wrap: wrap;
  }

  .tiktok-follower-badge {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #FE2C55;
    background: rgba(254, 44, 85, 0.10);
    border: 1px solid rgba(254, 44, 85, 0.30);
    border-radius: 3px;
    padding: 2px 7px;
    white-space: nowrap;
    cursor: default;
  }

  .footer-links a {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    width: 34px;  
    height: 34px;  
    border-radius: 3px;  
    background: var(--card-2);  
    border: 1px solid var(--border);  
    transition: all .15s;  
    text-decoration: none;  
    -webkit-tap-highlight-color: transparent;  
  }  
  .footer-links a:hover {  
    border-color: var(--border-hi);  
    background: #1e252a;  
    transform: translateY(-1px);  
  }

  .footer-divider {  
    width: 1px;  
    height: 24px;  
    background: var(--border);  
  }

  .footer-legal-strip {
    flex-basis: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: center;
    align-items: center;
    padding-top: 12px;
    margin-top: 10px;
    border-top: 1px solid var(--border-hi);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--muted2);
  }

  .footer-legal-strip a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
  }

  .footer-legal-strip a:hover {
    color: var(--orange);
  }

  .footer-legal-sep {
    opacity: 0.5;
    user-select: none;
  }

  .footer-tagline {
    flex-basis: 100%;
    width: 100%;
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted2);
    letter-spacing: 0.02em;
  }

  .footer-copy {
    flex-basis: 100%;
    width: 100%;
    margin: 6px 0 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
  }

  /* ═══════════════════════════════════════════════════════  
     Guess Styles  
  ═══════════════════════════════════════════════════════ */

  /* Letter tile in word display */  
  .sg-letter-tile {  
    display: inline-flex;  
    align-items: center;  
    justify-content: center;  
    min-width: 28px;  
    height: 36px;  
    padding: 0 4px;  
    background: var(--card-2);  
    border: 1px solid var(--border-hi);  
    border-radius: 3px;  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 20px;  
    font-weight: 800;  
    color: var(--text);  
    letter-spacing: .02em;  
    transition: background .2s, color .2s, border-color .2s, transform .15s;  
    position: relative;  
    flex-shrink: 0;  
  }  
  .sg-letter-tile.revealed {  
    background: rgba(255,107,0,0.12);  
    border-color: var(--orange-border);  
    color: var(--orange);  
    transform: scale(1.05);  
  }  
  .sg-letter-tile.blank {  
    min-width: 28px;  
    background: rgba(255,255,255,0.03);  
    border-color: rgba(255,255,255,0.14);  
    border-bottom: 2px solid rgba(255,255,255,0.45);  
  }  
  .sg-letter-tile.space-tile {  
    background: transparent;  
    border: none;  
    min-width: 16px;  
  }

  /* Keyboard keys */  
  .sg-key {  
    min-width: 32px;  
    height: 42px;  
    padding: 0 6px;  
    background: var(--card-2);  
    border: 1px solid var(--border-hi);  
    border-radius: 4px;  
    color: var(--text);  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 16px;  
    font-weight: 700;  
    cursor: pointer;  
    transition: background .1s, border-color .1s, transform .08s, color .1s;  
    -webkit-tap-highlight-color: transparent;  
    touch-action: manipulation;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
  }  
  @media (max-width: 400px) {  
    .sg-key { min-width: 26px; height: 38px; font-size: 14px; padding: 0 3px; }  
  }  
  .sg-key:active { transform: scale(.9); }  
  .sg-key.hit {  
    background: rgba(255,107,0,0.18);  
    border-color: var(--orange-border);  
    color: var(--orange);  
    cursor: default;  
  }  
  .sg-key.miss {  
    background: rgba(255,82,82,0.08);  
    border-color: rgba(255,82,82,0.2);  
    color: rgba(255,82,82,0.45);  
    cursor: default;  
  }  
  .sg-key:disabled { cursor: default; }

  /* Standing rows in live scoreboard */  
  .sg-standing-row {  
    display: flex;  
    align-items: center;  
    gap: 8px;  
    padding: 8px 12px;  
    background: var(--card-2);  
    border: 1px solid transparent;  
    border-radius: 3px;  
    font-size: 13px;  
    transition: border-color .15s;  
    min-height: 40px;  
  }  
  .sg-standing-row.me {  
    border-color: var(--orange-border);  
    background: rgba(255,107,0,0.07);  
  }  
  .sg-standing-row.solved {  
    border-color: rgba(61,220,132,0.35);  
    background: var(--green-dim);  
  }  
  .sg-standing-row.eliminated {  
    opacity: .5;  
  }  
  .sg-standing-name {  
    flex: 1;  
    font-weight: 600;  
    color: var(--text);  
    min-width: 0;  
    white-space: nowrap;  
    overflow: hidden;  
    text-overflow: ellipsis;  
  }  
  .sg-standing-lives {  
    font-size: 13px;  
    letter-spacing: 1px;  
    flex-shrink: 0;  
  }  
  .sg-standing-progress {  
    height: 4px;  
    width: 60px;  
    background: var(--border);  
    border-radius: 2px;  
    overflow: hidden;  
    flex-shrink: 0;  
  }  
  .sg-standing-bar {  
    height: 100%;  
    background: var(--orange);  
    border-radius: 2px;  
    transition: width .3s ease;  
  }

  /* Result rows */  
  .sg-result-row {  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    padding: 10px 14px;  
    background: var(--card-2);  
    border: 1px solid var(--border);  
    border-radius: 3px;  
    min-height: 44px;  
  }  
  .sg-result-row.winner {  
    background: rgba(61,220,132,0.08);  
    border-color: rgba(61,220,132,0.35);  
  }  
  .sg-result-pos {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 13px;  
    font-weight: 700;  
    color: var(--muted2);  
    width: 24px;  
    flex-shrink: 0;  
  }  
  .sg-result-name {  
    flex: 1;  
    font-weight: 600;  
    min-width: 0;  
    white-space: nowrap;  
    overflow: hidden;  
    text-overflow: ellipsis;  
  }  
  .sg-result-pts {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 16px;  
    font-weight: 800;  
    color: var(--orange);  
    flex-shrink: 0;  
  }  
  .sg-result-detail {  
    font-size: 11px;  
    color: var(--muted);  
    flex-shrink: 0;  
  }

  /* Animations */  
  @keyframes sgBounce {  
    0%, 100% { transform: translateY(0); }  
    50% { transform: translateY(-6px); }  
  }  
  @keyframes sgPop {  
    from { transform: scale(0.4); opacity: 0; }  
    to   { transform: scale(1);   opacity: 1; }  
  }  
  @keyframes sgFlash {  
    0%,100% { background: var(--card-2); }  
    50%     { background: rgba(255,107,0,0.25); }  
  }  
  @keyframes sgShake {  
    0%,100% { transform: translateX(0); }  
    20%,60% { transform: translateX(-4px); }  
    40%,80% { transform: translateX(4px); }  
  }  
  .sg-shake { animation: sgShake .35s ease; }  
  .sg-flash { animation: sgFlash .3s ease; }

  @keyframes sgLetterPop {  
    0%   { transform: scale(0.2) rotateY(90deg); opacity: 0; }  
    55%  { transform: scale(1.2) rotateY(-6deg);  opacity: 1; }  
    80%  { transform: scale(0.95) rotateY(2deg); }  
    100% { transform: scale(1.05) rotateY(0deg); }  
  }  
  .sg-letter-tile.pop {  
    animation: sgLetterPop .4s cubic-bezier(.17,.89,.32,1.28) forwards;  
  }

  /* Picker avatar pulse */  
  .sg-picker-pulse {  
    display: inline-block;  
    animation: sgBounce 1.2s ease-in-out infinite;  
  }

  /* ── Artistic responsive polish ───────────────────────────────────── */  
  :root {  
    --ink: #06070a;  
    --ink-2: #0b1115;  
    --panel: rgba(13, 18, 22, 0.82);  
    --panel-strong: rgba(17, 24, 29, 0.94);  
    --cyan: #32d5ff;  
    --cyan-dim: rgba(50,213,255,0.11);  
    --cyan-border: rgba(50,213,255,0.32);  
    --magenta: #ff3f8f;  
    --gold: #ffd166;  
    --glass-line: rgba(255,255,255,0.10);  
  }

  html { background: var(--ink); }

  body {  
    background:  
      linear-gradient(135deg, rgba(255,107,0,0.10) 0 18%, transparent 18% 100%),  
      linear-gradient(215deg, transparent 0 58%, rgba(50,213,255,0.075) 58% 72%, transparent 72% 100%),  
      linear-gradient(180deg, #05070a 0%, #0a1012 48%, #08090d 100%);  
  }

  body::before {  
    background:  
      linear-gradient(120deg, rgba(255,107,0,0.12), transparent 34%),  
      linear-gradient(300deg, transparent 47%, rgba(61,220,132,0.06) 47% 53%, transparent 53%);  
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.78) 56%, transparent 100%);  
    opacity: 1;  
  }

  body::after {
    display: none;
  }

  main::before {
    display: none;
  }

  header {  
    background: rgba(5, 8, 11, 0.78);  
    border-bottom-color: rgba(255,255,255,0.12);  
    box-shadow: 0 12px 42px rgba(0,0,0,0.35);  
  }

  .header-top,  
  .nav-bar {  
    max-width: 1180px;  
    margin-inline: auto;  
  }

  .logo {  
    letter-spacing: 0;  
    text-shadow: 0 0 22px rgba(255,107,0,0.20);  
  }

  .logo img {
    filter: drop-shadow(0 0 10px rgba(255,107,0,0.42));
  }

  .nav-btn,  
  .btn,  
  .join-input,  
  .copy-btn,  
  .dpad-btn,  
  #pacmanTab .pm-dpad-btn,  
  .sg-key {  
    border-radius: 8px;  
  }

  .nav-btn {  
    min-height: 44px;  
    background: rgba(255,255,255,0.035);  
    border-color: rgba(255,255,255,0.10);  
  }

  .nav-btn-lookup {  
    color: #fff;  
    background: linear-gradient(135deg, rgba(255,107,0,0.24), rgba(50,213,255,0.10));  
  }

  main,  
  .games-shell {  
    width: min(100%, 1180px);  
    margin-inline: auto;  
    padding-inline: clamp(12px, 3vw, 24px);  
  }

  main {  
    max-width: none;  
    margin-block: clamp(14px, 3vw, 34px) clamp(12px, 2vw, 24px);  
  }

  .games-shell {  
    margin-bottom: clamp(28px, 6vw, 56px);  
    position: relative;  
    z-index: 1;  
  }

  .card,  
  .playing-card {  
    background:  
      linear-gradient(180deg, rgba(255,255,255,0.035), transparent 38%),  
      var(--panel);  
    border-color: var(--glass-line);  
    border-radius: 8px;  
    box-shadow:  
      0 18px 48px rgba(0,0,0,0.28),  
      inset 0 1px 0 rgba(255,255,255,0.06);  
    backdrop-filter: blur(14px);  
    -webkit-backdrop-filter: blur(14px);  
  }

  .card::before,  
  .playing-card::before {  
    width: 4px;  
    background: linear-gradient(180deg, var(--orange), var(--cyan), var(--green));  
  }

  .card::after,  
  .playing-card::after {  
    content: '';  
    position: absolute;  
    inset: 0;  
    pointer-events: none;  
    background: linear-gradient(135deg, rgba(255,255,255,0.075), transparent 22%);
    opacity: .5;  
  }

  .card > *,  
  .playing-card > * {  
    position: relative;  
    z-index: 1;  
  }

  .card-title,  
  .playing-title {  
    color: rgba(255,255,255,0.48);  
  }

  .card-title::after,  
  .playing-title::after {  
    background: linear-gradient(90deg, rgba(255,255,255,0.12), transparent);  
  }

  .join-input {  
    background: rgba(1,4,7,0.64);  
    border-color: rgba(255,255,255,0.13);  
    min-height: 52px;  
  }

  .join-input:focus {  
    border-color: var(--cyan-border);  
    box-shadow: 0 0 0 3px rgba(50,213,255,0.10);  
  }

  .btn {  
    min-height: 50px;  
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);  
  }

  .btn-primary {  
    background: linear-gradient(135deg, var(--orange), #ff3f62);  
  }

  .btn-danger {  
    background: linear-gradient(135deg, #d84538, #8d1f2d);  
  }

  .btn-ghost {  
    background: rgba(255,255,255,0.045);  
    color: rgba(255,255,255,0.80);  
    border-color: rgba(255,255,255,0.12);  
  }

  .btn-ghost:hover:not(:disabled) {  
    background: rgba(50,213,255,0.09);  
    border-color: var(--cyan-border);  
    color: #fff;  
  }

  .player-row,  
  .sg-result-row,  
  .sg-standing-row {  
    background: rgba(255,255,255,0.045);  
    border-color: rgba(255,255,255,0.065);  
    border-radius: 8px;  
  }

  .player-row.my-row {  
    background: linear-gradient(90deg, rgba(255,107,0,0.15), rgba(50,213,255,0.055));  
    border-color: rgba(255,107,0,0.38);  
  }

  .pname,  
  .sg-result-name,  
  .sg-standing-name {  
    min-width: 0;  
    overflow: hidden;  
    text-overflow: ellipsis;  
  }

  .copy-btn {  
    min-width: 34px;  
    min-height: 34px;  
    background: rgba(255,255,255,0.035);  
  }

  .snake-wrap,  
  #pacmanTab .pm-canvas-shell {  
    isolation: isolate;  
  }

  #snakeCanvas,  
  #pacmanTab #pmCanvas {  
    border-radius: 8px;  
  }

  #snakeCanvas {  
    border-color: rgba(255,107,0,0.22);  
    box-shadow: inset 0 0 30px rgba(255,107,0,0.06);  
  }

  #snakeOverlay,  
  #pacmanTab #pmOverlay {  
    border-radius: 8px;  
  }

  .game-tabbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
  }

  .game-tabbar .btn {
    align-items: center;
    display: flex;
    justify-content: center;
    min-width: 0 !important;
    height: 42px !important;
    padding-inline: 8px;
    text-align: center;
    text-decoration: none;
  }

  .fr-hud {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 10px;
  }

  .fr-hud-box {
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--border-hi);
    border-radius: 6px;
    padding: 8px 10px;
    text-align: center;
  }

  .fr-hud-label {
    color: var(--muted2);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .fr-hud-value {
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    margin-top: 2px;
    text-shadow: 0 0 12px rgba(50,213,255,0.35);
  }

  #frScore {
    color: #7ee8ff;
  }

  .fr-wrap {
    aspect-ratio: 16 / 9;
    background: linear-gradient(180deg, #0c1020 0%, #141c32 100%);
    min-height: 300px;
  }

  #frCanvas {
    border: 1px solid rgba(50,213,255,0.28);
    border-radius: 8px;
    box-shadow:
      inset 0 0 40px rgba(50,213,255,0.08),
      0 0 24px rgba(255,107,0,0.12);
    display: block;
    height: 100%;
    width: 100%;
  }

  #frOverlay {
    align-items: center;
    background: linear-gradient(180deg, rgba(8,10,12,0.44), rgba(8,10,12,0.82));
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: absolute;
    text-align: center;
  }

  #frOverlay h3 {
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(30px, 7vw, 56px);
    font-weight: 800;
    letter-spacing: .12em;
    margin: 0 0 8px;
    text-transform: uppercase;
  }

  #frOverlay button {
    background: linear-gradient(135deg, #ff5252, var(--orange));
    border: 0;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    height: 42px;
    letter-spacing: .14em;
    padding: 0 18px;
    text-transform: uppercase;
  }

  #frOverlayMsg {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 14px;
  }

  .fr-touch-row {
    display: none;
    margin-top: 12px;
  }

  .fr-touch-row .btn {
    height: 46px;
  }

  .mini-save-status,
  .fr-save-status {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
    text-align: center;
  }

  .mini-save-status button,
  .fr-save-status button {
    background: transparent;
    border: 0;
    color: #ff8a8a;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    padding: 0;
    text-transform: uppercase;
  }

  .how-to-play-toggle {  
    min-height: 44px;  
    border-radius: 8px;  
  }

  .how-to-play-body {  
    border-radius: 8px;  
    background:  
      linear-gradient(135deg, rgba(50,213,255,0.055), transparent 42%),  
      rgba(255,255,255,0.035);  
  }

  #hmKeyboard {  
    display: grid !important;  
    grid-template-columns: repeat(7, minmax(0, 1fr));  
    gap: 6px !important;  
  }

  .sg-key {  
    min-width: 0;  
    width: 100%;  
  }

  footer {  
    width: min(100%, 1180px);  
    margin-inline: auto;  
    padding-inline: clamp(12px, 3vw, 24px);  
  }

  @media (min-width: 880px) {  
    main {  
      display: grid;  
      grid-template-columns: minmax(310px, 390px) minmax(0, 1fr);  
      grid-template-areas:  
        "join queue"  
        "playing queue";  
      gap: 16px;  
      align-items: start;  
    }

    main > .card:first-of-type { grid-area: join; margin-bottom: 0; }  
    #playingCard { grid-area: playing; margin-bottom: 0; }  
    main > .card:last-of-type { grid-area: queue; margin-bottom: 0; min-height: 100%; }

    .games-shell > .card {  
      max-width: 880px;  
      margin-inline: auto;  
    }

    .queue-hd {  
      min-height: 34px;  
    }

    .player-row {  
      padding-block: 12px;  
    }  
  }

  @media (min-width: 1180px) {  
    main {  
      grid-template-columns: minmax(340px, 410px) minmax(0, 1fr);  
      gap: 20px;  
    }

    .games-shell > .card {  
      max-width: 960px;  
    }  
  }

  @media (max-width: 680px) {  
    header {  
      padding-inline: 12px;  
    }

    .header-top {  
      gap: 10px;  
      padding-block: 10px;  
    }

    .logo {  
      font-size: 28px;  
      min-width: 0;  
    }

    .logo img {  
      width: 28px;  
      height: 28px;  
    }

    .nav-bar {
      gap: 7px;
    }

    .nav-btn {  
      font-size: 11px;  
      letter-spacing: .08em;  
      height: 42px;  
      padding-inline: 6px;  
    }

    main {  
      margin-top: 14px;  
      padding-inline: 12px;  
    }

    .games-shell {  
      padding-inline: 12px;  
    }

    .card,  
    .playing-card {  
      padding: 17px 15px;  
      margin-bottom: 12px;  
    }

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

    .game-tabbar .btn {
      height: 44px !important;
      font-size: 11px !important;
    }

    .fr-wrap {
      aspect-ratio: 4 / 5;
      min-height: 360px;
    }

    .fr-touch-row {
      display: block;
    }

    #hmKeyboard {  
      grid-template-columns: repeat(6, minmax(0, 1fr));  
    }

    .sg-key {  
      height: 40px;  
      font-size: 15px;  
    }

    .snake-dpad,  
    #pacmanTab .pm-dpad {  
      width: min(220px, 72vw);  
    }

    .dpad-btn,  
    #pacmanTab .pm-dpad-btn {  
      min-height: 60px;  
    }

    footer {  
      align-items: stretch;  
      gap: 10px;  
    }

    .footer-person {  
      justify-content: space-between;  
      width: 100%;  
    }

    .footer-divider {  
      display: none;  
    }  
  }

  @media (max-width: 380px) {  
    .logo {  
      font-size: 24px;  
    }

    .nav-btn {  
      font-size: 10px;  
      letter-spacing: .06em;  
    }

    .card,  
    .playing-card {  
      padding-inline: 13px;  
    }

    #hmKeyboard {  
      gap: 5px !important;  
    }

    .sg-key {  
      height: 38px;  
      font-size: 14px;  
    }  
  }

  @media (prefers-reduced-motion: reduce) {  
    *,  
    *::before,  
    *::after {  
      animation-duration: .001ms !important;  
      animation-iteration-count: 1 !important;  
      scroll-behavior: auto !important;  
      transition-duration: .001ms !important;  
    }  
  }  
    
  .queue-command-help {  
    margin: 10px 0 12px;  
    padding: 11px 13px;  
    border: 1px solid rgba(255,107,0,0.24);  
    border-radius: 8px;  
    background: rgba(255,107,0,0.055);  
    color: rgba(255,255,255,0.76);  
    font-size: 15px;  
    line-height: 1.45;  
    font-weight: 500;  
  }  
  .queue-command-help b {  
    color: var(--orange);  
    font-weight: 800;  
  }

  /* ── Tournament Banner Card (enhanced) ── */
  .tournament-home-link {
    display: block;
    margin: 0 0 18px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--green-border);
    background: linear-gradient(135deg, rgba(61,220,132,.12), rgba(255,107,0,.06)), var(--card);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    position: relative;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
  }
  .tournament-home-link::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--green), var(--orange), transparent);
  }
  .tournament-home-link:hover {
    border-color: rgba(61,220,132,.55);
    box-shadow: 0 0 0 1px rgba(61,220,132,.14), 0 8px 36px rgba(0,0,0,.4);
    transform: translateY(-1px);
  }
  .tournament-home-link:active { transform: scale(.99); }

  .thl-inner {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .thl-icon {
    font-size: 32px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 14px rgba(61,220,132,.35));
    animation: thl-float 3s ease-in-out infinite;
  }
  @keyframes thl-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
  .thl-body { flex: 1; min-width: 0; }
  .thl-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 5px;
  }
  .thl-pill::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(61,220,132,.22);
    animation: thl-pulse 2s ease-in-out infinite;
  }
  @keyframes thl-pulse { 0%,100%{box-shadow:0 0 0 3px rgba(61,220,132,.22)} 50%{box-shadow:0 0 0 6px rgba(61,220,132,0)} }
  .thl-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .thl-desc {
    display: block;
    color: var(--muted);
    font-weight: 500;
    font-size: 12px;
    margin-top: 2px;
  }
  .thl-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(61,220,132,.10);
    border: 1px solid rgba(61,220,132,.28);
    color: var(--green);
    font-size: 18px;
    flex-shrink: 0;
    transition: background .2s;
  }
  .tournament-home-link:hover .thl-arrow {
    background: rgba(61,220,132,.20);
  }

  .thl-footer {
    padding: 8px 18px;
    background: rgba(0,0,0,.18);
    border-top: 1px solid rgba(61,220,132,.10);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  .thl-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--muted2);
  }

    
  /* ── Centered queue layout fix ────────────────────────────── */  
  main {  
    display: block !important;  
    max-width: 760px !important;  
    width: min(100%, 760px) !important;  
    margin: clamp(18px, 3vw, 34px) auto clamp(16px, 3vw, 28px) !important;  
    padding-inline: clamp(12px, 3vw, 22px) !important;  
  }

  main > .card,  
  main > .playing-card {  
    width: 100% !important;  
    margin-left: auto !important;  
    margin-right: auto !important;  
    margin-bottom: 16px !important;  
  }

  .games-shell {  
    max-width: 980px !important;  
    width: min(100%, 980px) !important;  
    margin-left: auto !important;  
    margin-right: auto !important;  
    padding-inline: clamp(12px, 3vw, 22px) !important;  
  }

  .games-shell > .card {  
    width: 100% !important;  
    margin-left: auto !important;  
    margin-right: auto !important;  
  }

  @media (min-width: 880px) {  
    main {  
      display: block !important;  
      grid-template-columns: none !important;  
      grid-template-areas: none !important;  
      max-width: 760px !important;  
    }

    main > .card:first-of-type,  
    #playingCard,  
    main > .card:last-of-type {  
      grid-area: auto !important;  
      min-height: auto !important;  
      margin-bottom: 16px !important;  
    }  
  }

  /* ── Beta signup callout ───────────────────────────────── */  
  .beta-card {  
    border-color: rgba(255,107,0,0.24);  
    background:  
      linear-gradient(135deg, rgba(255,107,0,0.10), rgba(50,213,255,0.045)),  
      var(--panel);  
  }

  .beta-card::before {  
    background: linear-gradient(180deg, var(--orange), var(--cyan));  
  }

  .beta-eyebrow {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 10px;  
    font-weight: 800;  
    letter-spacing: .18em;  
    text-transform: uppercase;  
    color: var(--orange);  
    margin-bottom: 8px;  
  }

  .beta-title {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: clamp(24px, 6vw, 34px);  
    line-height: 1;  
    font-weight: 900;  
    letter-spacing: .02em;  
    text-transform: uppercase;  
    color: #fff;  
    margin-bottom: 9px;  
  }

  .beta-copy {  
    color: rgba(255,255,255,0.66);  
    font-size: 14px;  
    line-height: 1.55;  
    margin-bottom: 14px;  
  }

  .beta-mini-list {  
    display: grid;  
    grid-template-columns: 1fr;  
    gap: 7px;  
    margin-bottom: 14px;  
  }

  .beta-mini-item {  
    display: flex;  
    align-items: center;  
    gap: 8px;  
    padding: 8px 10px;  
    border-radius: 8px;  
    border: 1px solid rgba(255,255,255,0.08);  
    background: rgba(255,255,255,0.035);  
    color: rgba(255,255,255,0.76);  
    font-size: 13px;  
    font-weight: 600;  
  }

  .beta-mini-item span {  
    font-size: 16px;  
    line-height: 1;  
  }

  .beta-btn {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    width: 100%;  
    min-height: 50px;  
    border-radius: 8px;  
    background: linear-gradient(135deg, var(--orange), #ff3f62);  
    color: #fff;  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 13px;  
    font-weight: 800;  
    letter-spacing: .14em;  
    text-transform: uppercase;  
    text-decoration: none;  
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 22px rgba(255,107,0,0.12);  
    transition: transform .1s, filter .15s;  
    -webkit-tap-highlight-color: transparent;  
  }

  .beta-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }  
  .beta-btn:active { transform: scale(.98); }

  /* ── Voice Chat Room ── */  
  .voice-card::before { background: var(--blue); }  
  .voice-title-row {  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    gap: 10px;  
    margin-bottom: 12px;  
  }  
  .voice-room-badge {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 10px;  
    font-weight: 800;  
    letter-spacing: .12em;  
    text-transform: uppercase;  
    padding: 3px 8px;  
    border-radius: 3px;  
    border: 1px solid var(--blue-border);  
    color: var(--blue);  
    background: var(--blue-dim);  
    white-space: nowrap;  
  }  
  .voice-copy {  
    font-size: 13px;  
    color: rgba(255,255,255,0.48);  
    line-height: 1.55;  
    margin-bottom: 12px;  
  }  
  .voice-join-row {  
    display: grid;  
    grid-template-columns: 1fr;  
    gap: 8px;  
  }  
  @media (min-width: 500px) {  
    .voice-join-row { grid-template-columns: 1fr 138px; }  
  }  
  .voice-name-input {  
    width: 100%;  
    height: 46px;  
    padding: 0 12px;  
    font-size: 15px;  
    font-weight: 500;  
    background: #0a0d0f;  
    border: 1px solid var(--border);  
    border-radius: 3px;  
    color: var(--text);  
    outline: none;  
    font-family: 'Barlow', sans-serif;  
  }  
  .voice-name-input:focus { border-color: rgba(79,195,247,.55); }  
  .voice-mini-btn {  
    height: 46px;  
    border-radius: 3px;  
    border: 1px solid var(--blue-border);  
    background: var(--blue-dim);  
    color: var(--blue);  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 12px;  
    font-weight: 800;  
    letter-spacing: .12em;  
    text-transform: uppercase;  
    cursor: pointer;  
  }  
  .voice-mini-btn:hover { filter: brightness(1.12); }  
  .voice-controls {  
    display: none;  
    grid-template-columns: 1fr 1fr;  
    gap: 8px;  
    margin-top: 10px;  
  }  
  .voice-controls.visible { display: grid; }  
  .voice-control-btn {  
    min-height: 42px;  
    border-radius: 3px;  
    border: 1px solid var(--border-hi);  
    background: var(--card-2);  
    color: var(--text);  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 12px;  
    font-weight: 800;  
    letter-spacing: .1em;  
    text-transform: uppercase;  
    cursor: pointer;  
  }  
  .voice-control-btn.danger { border-color: rgba(255,82,82,0.35); color: var(--red); }  
  .voice-status-line {  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    gap: 8px;  
    margin-top: 12px;  
    padding: 9px 10px;  
    background: rgba(255,255,255,0.025);  
    border: 1px solid var(--border);  
    border-radius: 3px;  
    color: rgba(255,255,255,0.48);  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 11px;  
    font-weight: 700;  
    letter-spacing: .08em;  
    text-transform: uppercase;  
  }  
  .voice-dot {  
    width: 8px;  
    height: 8px;  
    border-radius: 50%;  
    background: var(--muted2);  
    display: inline-block;  
    margin-right: 7px;  
  }  
  .voice-dot.on { background: var(--green); box-shadow: 0 0 8px rgba(61,220,132,0.7); }  

  /* Beta banner */
  .sq-beta-banner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(241, 196, 15, 0.35);
    background: linear-gradient(90deg, rgba(255, 107, 0, 0.12), rgba(241, 196, 15, 0.08));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }
  .sq-beta-banner-text {
    flex: 1;
    min-width: 200px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.45;
  }
  .sq-beta-banner-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid rgba(241, 196, 15, 0.5);
    background: rgba(241, 196, 15, 0.14);
    color: #f7dc6f;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .sq-beta-banner-btn:hover {
    background: rgba(241, 196, 15, 0.22);
    border-color: rgba(241, 196, 15, 0.7);
    color: #fff;
  }

  @media (min-width: 1100px) {
    header {
      padding-inline: clamp(28px, 4vw, 72px);
    }

    .header-top,
    .nav-bar {
      max-width: 1560px;
    }

    .header-top {
      height: 82px;
      gap: 22px;
    }

    .logo {
      font-size: 34px;
      gap: 11px;
    }

    .logo a {
      gap: 11px;
    }

    .logo img {
      width: 42px;
      height: 42px;
    }

    .nav-bar {
      gap: 9px;
    }

    .nav-btn {
      min-height: 50px;
      height: 50px;
      padding-inline: 17px;
      gap: 8px;
      font-size: 13px;
      letter-spacing: .11em;
    }

    .nav-btn svg {
      width: 16px;
      height: 16px;
    }

    .nav-btn-muted {
      font-size: 12px;
    }

    .nav-bar .sq-account-nav-btn {
      min-height: 50px;
      padding-inline: 12px;
    }

    .nav-bar .sq-account-nav-avatar {
      width: 34px;
      height: 34px;
    }

    .sq-beta-banner {
      width: min(1480px, calc(100% - 64px));
      min-height: 74px;
      margin-top: 0;
      padding: 14px 22px;
      gap: 20px;
      border-radius: 10px;
    }

    .sq-beta-banner-text {
      font-size: 15px;
      line-height: 1.5;
    }

    .sq-beta-banner-btn {
      min-height: 44px;
      padding-inline: 20px;
      font-size: 14px;
      letter-spacing: .08em;
    }
  }

  /* Homepage suggestions */
  .sq-suggestions {
    width: min(720px, 100%);
    margin: 48px auto 32px;
    padding: 0 16px;
  }
  .sq-suggestions-lead {
    margin-top: 8px;
    font-size: 14px;
    color: var(--muted);
  }
  .sq-suggestions-form {
    margin-top: 20px;
    padding: 22px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 60%), #111820;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    color-scheme: dark;
  }
  .sq-suggestions-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
  }
  .sq-suggestions-optional {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted2);
  }
  .sq-suggestions-textarea,
  .sq-suggestions-input {
    display: block;
    width: 100%;
    margin-bottom: 14px;
    padding: 12px 14px;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background-color: #161b1f;
    border: 1px solid var(--border);
    border-radius: 8px;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }
  .sq-suggestions-textarea {
    min-height: 120px;
    resize: vertical;
  }
  .sq-suggestions-textarea::placeholder,
  .sq-suggestions-input::placeholder {
    color: var(--muted);
    opacity: 1;
  }
  .sq-suggestions-textarea:focus,
  .sq-suggestions-input:focus {
    outline: none;
    background-color: #1a2228;
    border-color: rgba(255, 107, 0, 0.45);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12), 0 0 18px rgba(255, 107, 0, 0.08);
  }
  .sq-suggestions-input:focus {
    border-color: rgba(79, 195, 247, 0.45);
    box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.12), 0 0 18px rgba(79, 195, 247, 0.08);
  }
  .sq-suggestions-textarea:-webkit-autofill,
  .sq-suggestions-textarea:-webkit-autofill:hover,
  .sq-suggestions-textarea:-webkit-autofill:focus,
  .sq-suggestions-input:-webkit-autofill,
  .sq-suggestions-input:-webkit-autofill:hover,
  .sq-suggestions-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px #161b1f inset;
    box-shadow: 0 0 0 1000px #161b1f inset;
    border-color: var(--border);
  }
  .sq-suggestions-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .sq-suggestions-submit {
    padding: 10px 22px;
    border-radius: 6px;
    border: 1px solid var(--orange-border);
    background: var(--orange-dim);
    color: var(--orange-2);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .sq-suggestions-submit:hover:not(:disabled) {
    background: rgba(255, 107, 0, 0.2);
    color: #fff;
  }
  .sq-suggestions-submit:disabled {
    opacity: 0.6;
    cursor: wait;
  }
  .sq-suggestions-thanks {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--green);
  }
  .sq-suggestions-error {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
  }
  .sq-suggestions-feed-wrap {
    margin-top: 28px;
  }
  .sq-suggestions-feed-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
  }
  .sq-suggestions-feed {
    list-style: none;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 60%), #111820;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }
  .sq-suggestions-feed-empty {
    padding: 18px 16px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
  }
  .sq-suggestions-feed-item {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease;
  }
  .sq-suggestions-feed-item:hover {
    background: rgba(255, 255, 255, 0.02);
  }
  .sq-suggestions-feed-item:last-child {
    border-bottom: none;
  }
  .sq-suggestions-feed-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
  }
  .sq-suggestions-feed-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
  }
  .sq-suggestions-feed-time {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
  }
  .sq-suggestions-feed-msg {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    white-space: pre-wrap;
    word-break: break-word;
  }

  @media (max-width: 640px) {
    .sq-beta-banner {
      width: calc(100% - 24px);
      margin-top: 4px;
    }
    .sq-beta-banner-btn {
      width: 100%;
    }
  }
  .voice-participants {  
    display: grid;  
    gap: 7px;  
    margin-top: 10px;  
  }  
  .voice-person {  
    display: grid;  
    grid-template-columns: 1fr auto;  
    gap: 10px;  
    align-items: center;  
    padding: 9px 10px;  
    background: var(--card-2);  
    border: 1px solid var(--border);  
    border-radius: 3px;  
  }  
  .voice-person-name {  
    min-width: 0;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    white-space: nowrap;  
    font-weight: 600;  
    color: var(--text);  
  }  
  .voice-person-meta {  
    font-family: 'Barlow Condensed', sans-serif;  
    font-size: 10px;  
    font-weight: 700;  
    letter-spacing: .08em;  
    text-transform: uppercase;  
    color: var(--muted);  
  }  
  .voice-volume {  
    width: 92px;  
    accent-color: var(--blue);  
  }  
  .voice-note {  
    margin-top: 8px;  
    font-size: 11px;  
    color: var(--muted2);  
    line-height: 1.45;  
  }