:root { --mint:#7ecfc0; --mint-dark:#4fb3a3; --dark:#1e1e1e; --correct:#2ecc71; --wrong:#e74c3c; }
  * { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  body { font-family:'DM Sans',sans-serif; background:#c8f0e8; min-height:100vh; display:flex; flex-direction:column; align-items:center; overflow-x:hidden; }
  .screen { display:none; width:100%; min-height:100vh; flex-direction:column; align-items:center; position:relative; z-index:1; }
  .screen.active { display:flex; }

  @media (min-width: 600px) {
    body { background:#111; display:block; }
    .screen { width:560px; min-height:100vh; margin:0 auto; box-shadow:0 0 60px rgba(0,0,0,0.6); }
    #home { background:var(--dark); }
    .mint-btn, .dark-btn, .nrl-btn, .ticker-wrap, .home-lb-wrap, .category-grid,
    .save-box, .ng-results-section, .share-overlay-btns { max-width:100% !important; width:100% !important; box-sizing:border-box; }
    .card-container, .lb-list, .ng-lb-content, .ng-lb-tabs { max-width:100% !important; width:100% !important; box-sizing:border-box; }
    .results-bar-wrap { max-width:360px; }
    .results-msg { max-width:480px; }
    .result-breakdown { max-width:520px; }
    .home-desc { max-width:480px; }
    div[style*="max-width:360px"] { max-width:100% !important; width:100% !important; }
  }
  @media (min-width: 900px) {
    .screen { width:720px; }
    .category-grid { grid-template-columns:1fr 1fr 1fr 1fr !important; }
    .home-desc { max-width:600px; }
  }


  /* ── STICKY NAV BAR ── */
  #lotNav { position:fixed; top:0; left:0; right:0; z-index:9999; background:#0d0d0d; border-bottom:2px solid #1e1e1e; display:flex; justify-content:center; }
  .lot-nav-inner { width:100%; max-width:720px; display:flex; align-items:center; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding:0 4px; }
  .lot-nav-inner::-webkit-scrollbar { display:none; }
  .lot-nav-btn { flex-shrink:0; background:none; border:none; color:#666; font-family:'Bebas Neue',cursive; font-size:13px; letter-spacing:1.5px; padding:10px 10px; cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; transition:all 0.2s; line-height:1; }
  .lot-nav-btn:active { color:#fff; }
  .lot-nav-btn.active { color:#fff; border-bottom-color:var(--mint); }
  .lot-nav-btn.wtl-nav { color:#e2b714; }
  .lot-nav-btn.wtl-nav.active { border-bottom-color:#e2b714; }
  /* Push all screens down to account for nav bar */
  .screen { padding-top:44px; }

  /* HOME */
  #home { background:var(--dark); justify-content:flex-start; padding:44px 24px 28px; }
  .logo-box { width:200px; height:200px; border-radius:24px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; margin-top:20px; }
  @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
  .logo-emoji { font-size:48px; }
  .logo-title { font-family:'Bebas Neue',cursive; font-size:18px; color:var(--mint); letter-spacing:2px; margin-top:4px; }
  .logo-sub { font-size:9px; color:#888; letter-spacing:1px; }
  .home-divider { width:60px; height:3px; background:var(--mint); border-radius:2px; margin:0 auto 18px; }
  .home-desc { color:#aaa; font-size:14px; text-align:center; line-height:1.6; margin-bottom:28px; max-width:280px; }
  .category-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:360px; margin-bottom:12px; }
  .cat-btn { background:#2a2a2a; border:2px solid #333; border-radius:14px; padding:14px 10px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; transition:all 0.2s; color:white; }
  .cat-btn:active { transform:scale(0.95); }
  .cat-btn.selected { border-color:var(--mint); background:rgba(126,207,192,0.15); }
  .cat-btn.all-btn { grid-column:span 2; flex-direction:row; justify-content:center; gap:12px; }
  .cat-icon { font-size:24px; }
  .cat-name { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
  .mint-btn { width:100%; max-width:360px; background:var(--mint); color:var(--dark); border:none; border-radius:16px; padding:16px; font-family:'Bebas Neue',cursive; font-size:22px; letter-spacing:3px; cursor:pointer; transition:all 0.2s; box-shadow:0 4px 20px rgba(126,207,192,0.4); margin-top:8px; }
  .mint-btn:active { transform:scale(0.97); }
  .nrl-btn { width:100%; max-width:360px; background:linear-gradient(135deg,#1a2a4a,#0d1f3a); color:#5b9bd5; border:2px solid #2a4a7a; border-radius:16px; padding:12px 6px; font-family:'Bebas Neue',cursive; font-size:14px; letter-spacing:1px; cursor:pointer; margin-top:8px; transition:all 0.2s; animation:nrl-pulse 2.4s ease-in-out infinite; position:relative; overflow:hidden; }
  .nrl-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(91,155,213,0.15), rgba(232,25,44,0.1)); opacity:0; animation:nrl-shimmer 2.4s ease-in-out infinite; border-radius:14px; }
  @keyframes nrl-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(91,155,213,0.5), 0 0 0 0 rgba(232,25,44,0.3); border-color:#2a4a7a; }
    50% { box-shadow: 0 0 18px 4px rgba(91,155,213,0.35), 0 0 32px 8px rgba(232,25,44,0.15); border-color:#4a7ab0; }
  }
  @keyframes nrl-shimmer {
    0%,100% { opacity:0; }
    50% { opacity:1; }
  }
  .nrl-btn:active { transform:scale(0.97); animation:none; box-shadow:none; }
  @keyframes ht-pulse {
    0%,100% { box-shadow:0 0 0 0 rgba(232,25,44,0), 0 0 0 0 rgba(91,155,213,0); }
    50% { box-shadow:0 0 18px 4px rgba(232,25,44,0.45), 0 0 32px 10px rgba(91,155,213,0.2); }
  }
  .insta-link { display:inline-block; color:#aaa; font-size:13px; font-weight:600; text-decoration:none; letter-spacing:0.5px; margin-bottom:4px; transition:color 0.2s; }
  .insta-link:active { color:var(--mint); }
  .dark-btn { width:100%; max-width:360px; background:#2a2a2a; color:var(--mint); border:2px solid #333; border-radius:16px; padding:14px; font-family:'Bebas Neue',cursive; font-size:18px; letter-spacing:2px; cursor:pointer; margin-top:8px; transition:all 0.2s; }
  .dark-btn:active { transform:scale(0.97); }

  /* RECENT SCORES TICKER */
  .ticker-wrap { width:100%; max-width:360px; overflow:hidden; background:#111; border:1px solid #2a2a2a; border-radius:12px; padding:8px 0; margin-top:14px; margin-bottom:0; }
  .ticker-inner { display:flex; white-space:nowrap; animation:ticker-scroll 8s linear infinite; }
  .ticker-inner:hover { animation-play-state:paused; }
  .ticker-item { display:inline-block; padding:0 20px; font-size:12px; color:#aaa; font-weight:500; letter-spacing:0.3px; }
  .ticker-item span { color:var(--mint); font-weight:700; }
  @keyframes ticker-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

  /* HOME LEADERBOARD PREVIEW */
  .home-lb-wrap { width:100%; max-width:360px; background:#111; border:1px solid #2a2a2a; border-radius:16px; padding:14px 16px; margin-bottom:12px; margin-top:14px; }
  .home-lb-title { font-family:'Bebas Neue',cursive; font-size:16px; letter-spacing:2px; color:var(--mint); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
  .home-lb-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid #1e1e1e; }
  .home-lb-row:last-child { border-bottom:none; }
  .home-lb-rank { font-family:'Bebas Neue',cursive; font-size:15px; color:#555; width:20px; text-align:center; flex-shrink:0; }
  .home-lb-name { font-size:12px; font-weight:600; color:#ccc; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .home-lb-score { font-family:'Bebas Neue',cursive; font-size:15px; color:var(--mint); flex-shrink:0; }
  .home-lb-loading { font-size:12px; color:#444; text-align:center; padding:6px 0; }
  .home-lb-footer { font-size:10px; color:#444; text-align:center; margin-top:8px; letter-spacing:0.5px; cursor:pointer; }
  .home-lb-footer:active { color:var(--mint); }

  /* QUIZ HEADER */
  #quiz { background:#c8f0e8; padding:0; padding-top:44px; justify-content:flex-start; }
  .quiz-header { width:100%; background:var(--dark); padding:16px 20px 14px; display:flex; align-items:center; justify-content:space-between; }
  .back-btn { background:none; border:none; color:var(--mint); font-size:22px; cursor:pointer; padding:4px 8px; }
  .progress-wrap { flex:1; margin:0 12px; }
  .progress-label { font-size:11px; color:#888; margin-bottom:4px; text-align:center; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
  .progress-bar { height:6px; background:#333; border-radius:3px; overflow:hidden; }
  .progress-fill { height:100%; background:var(--mint); border-radius:3px; transition:width 0.4s ease; }
  .score-badge { background:var(--mint); color:var(--dark); font-family:'Bebas Neue',cursive; font-size:18px; letter-spacing:1px; padding:4px 12px; border-radius:20px; min-width:60px; text-align:center; }
  .card-container { width:100%; max-width:420px; padding:16px; flex:1; }
  .quiz-card { background:white; border-radius:20px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.15); animation:slideIn 0.3s ease; }
  @keyframes slideIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
  .card-header { background:var(--mint); padding:12px 20px; display:flex; align-items:center; justify-content:space-between; }
  .card-brand { font-family:'Bebas Neue',cursive; font-size:22px; letter-spacing:2px; color:var(--dark); }
  .card-italic { font-family:'Permanent Marker',cursive; font-size:11px; color:var(--dark); }
  .card-category { background:var(--dark); color:var(--mint); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:20px; }
  .card-body { padding:16px 16px 12px; }
  .question-block { margin-bottom:16px; }
  .question-label { font-family:'Bebas Neue',cursive; font-size:15px; letter-spacing:2px; color:var(--mint-dark); margin-bottom:5px; }
  .question-text { font-size:13.5px; font-weight:700; color:var(--dark); line-height:1.4; margin-bottom:12px; text-align:center; }
  .options-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
  .option-btn { background:var(--dark); color:white; border:2.5px solid #e74c3c; border-radius:10px; padding:10px 6px; font-size:11.5px; font-weight:700; cursor:pointer; transition:all 0.15s; text-align:center; line-height:1.3; }
  .option-btn:active:not(:disabled) { transform:scale(0.96); }
  .option-btn.correct { border-color:var(--correct); background:var(--correct); color:white; }
  .option-btn.wrong { border-color:var(--wrong); background:var(--wrong); color:white; opacity:0.7; }
  .option-btn.reveal-correct { border-color:var(--correct); background:var(--correct); color:white; }
  .option-btn:disabled { cursor:default; }
  .did-you-know { background:#f8fffe; border-left:3px solid var(--mint); border-radius:8px; padding:10px 12px; margin-top:8px; font-size:11px; color:#555; line-height:1.5; display:none; }
  .did-you-know.visible { display:block; }
  .did-you-know strong { color:var(--mint-dark); font-size:10px; text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:3px; }
  .card-divider { height:1px; background:#eee; margin:12px 0; }
  .option-stat { display:block; font-size:11px; font-family:'DM Sans',sans-serif; letter-spacing:0.5px; margin-top:3px; opacity:0.85; font-weight:700; }
  .next-btn { width:100%; background:var(--dark); color:var(--mint); border:none; border-radius:12px; padding:14px; font-family:'Bebas Neue',cursive; font-size:20px; letter-spacing:2px; cursor:pointer; margin-top:14px; display:none; }
  .next-btn.visible { display:block; }

  /* NAME GAME */
  .name-game-letter { background:var(--dark); border-radius:16px; width:110px; height:110px; display:flex; align-items:center; justify-content:center; margin:12px auto; box-shadow:0 4px 20px rgba(0,0,0,0.2); }
  .name-game-letter span { font-family:'Bebas Neue',cursive; font-size:72px; color:var(--mint); line-height:1; }
  .name-game-text { font-size:13px; font-weight:600; color:#333; text-align:center; line-height:1.5; padding:0 8px; }
  .name-game-rules { font-size:12px; color:#666; text-align:center; line-height:1.6; padding:10px 12px; background:#f8fffe; border-radius:10px; margin-top:10px; }
  .name-game-examples { font-size:11px; color:#999; text-align:center; margin-top:6px; font-style:italic; }
  .timer-wrap { display:flex; flex-direction:column; align-items:center; margin:12px 0 6px; gap:10px; }
  .timer-ring-wrap { position:relative; width:90px; height:90px; }
  .timer-ring-wrap svg { transform:rotate(-90deg); position:absolute; top:0; left:0; }
  .timer-circle-bg { fill:none; stroke:#e8e8e8; stroke-width:6; }
  .timer-circle { fill:none; stroke-width:6; stroke-linecap:round; stroke-dasharray:226; stroke-dashoffset:0; transition:stroke-dashoffset 1s linear,stroke 0.3s; }
  .timer-number { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'Bebas Neue',cursive; font-size:36px; color:var(--dark); line-height:1; }
  .timer-number.urgent { color:var(--wrong); animation:pulse 0.5s ease infinite alternate; }
  @keyframes pulse { from{transform:translate(-50%,-50%) scale(1)} to{transform:translate(-50%,-50%) scale(1.15)} }
  .timer-btns { display:flex; gap:8px; }
  .timer-btn { background:var(--dark); color:var(--mint); border:none; border-radius:10px; padding:10px 16px; font-family:'Bebas Neue',cursive; font-size:16px; letter-spacing:1px; cursor:pointer; }
  .timer-btn.reset { background:var(--mint); color:var(--dark); }
  .timer-expired { background:var(--wrong); color:white; font-family:'Bebas Neue',cursive; font-size:16px; letter-spacing:1px; text-align:center; padding:10px; border-radius:10px; margin-top:4px; display:none; }
  .timer-expired.show { display:block; }

  .ng-mode-pick { display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 0 8px; }
  .ng-mode-title { font-family:'Bebas Neue',cursive; font-size:18px; color:var(--mint-dark); letter-spacing:2px; margin-bottom:4px; }
  .ng-mode-btn { width:100%; background:var(--dark); border:2px solid #333; border-radius:14px; padding:14px 16px; cursor:pointer; text-align:left; transition:all 0.15s; }
  .ng-mode-btn:active { transform:scale(0.97); }
  .ng-mode-btn.timed { border-color:#e8192c; }
  .ng-mode-btn.untimed { border-color:var(--mint); }
  .ng-mode-btn-title { font-family:'Bebas Neue',cursive; font-size:20px; letter-spacing:2px; }
  .ng-mode-btn.timed .ng-mode-btn-title { color:#e8192c; }
  .ng-mode-btn.untimed .ng-mode-btn-title { color:var(--mint); }
  .ng-mode-btn-desc { font-size:12px; color:#888; margin-top:3px; line-height:1.4; }
  /* 2-min countdown display */
  .ng-countdown { font-family:'Bebas Neue',cursive; font-size:52px; color:var(--mint); text-align:center; letter-spacing:4px; line-height:1; margin:8px 0 4px; }
  .ng-countdown.urgent { color:#e8192c; animation:pulse 0.5s ease infinite alternate; }
  .ng-countdown-label { font-size:11px; color:#888; text-align:center; letter-spacing:1px; font-weight:700; text-transform:uppercase; margin-bottom:8px; }
  /* RESULTS SCREEN */
  #savescore { background:var(--dark); padding: 30px 20px 40px; gap: 14px; }
  .results-trophy { font-size:72px; text-align:center; animation:bounce 0.6s ease; margin-bottom:4px; }
  @keyframes bounce { 0%{transform:scale(0);opacity:0} 60%{transform:scale(1.2)} 100%{transform:scale(1);opacity:1} }
  .results-title { font-family:'Bebas Neue',cursive; font-size:48px; color:var(--mint); letter-spacing:5px; text-align:center; }
  .results-score { font-family:'Bebas Neue',cursive; font-size:80px; color:#fff; line-height:1; text-align:center; }
  .results-total { color:#888; font-size:14px; text-align:center; margin-top:-6px; }
  .results-bar-wrap { width:100%; max-width:320px; margin-top:4px; }
  .results-bar { height:10px; background:#2a2a2a; border-radius:6px; overflow:hidden; margin-bottom:10px; }
  .results-bar-fill { height:100%; background:var(--mint); border-radius:6px; transition:width 1s ease 0.3s; }
  .results-msg { font-size:15px; font-weight:700; color:var(--mint); text-align:center; line-height:1.5; max-width:300px; background:rgba(126,207,192,0.08); border:1px solid rgba(126,207,192,0.2); border-radius:12px; padding:12px 16px; }
  .save-box { width:100%; max-width:360px; background:#1a1a1a; border:1px solid #2e2e2e; border-radius:18px; padding:22px 20px; margin-top:4px; }
  .save-title { font-family:'Bebas Neue',cursive; font-size:18px; color:var(--mint); letter-spacing:2px; margin-bottom:14px; text-align:center; }
  .name-input { width:100%; background:#111; border:2px solid #333; border-radius:12px; padding:13px 14px; color:#fff; font-size:16px; font-family:'DM Sans',sans-serif; outline:none; box-sizing:border-box; }
  .name-input:focus { border-color:var(--mint); }
  .saved-msg { text-align:center; color:var(--mint); font-size:15px; font-weight:700; padding:10px 8px; }
  .result-breakdown { width:100%; max-width:360px; display:flex; flex-direction:column; gap:8px; }
  .breakdown-item { display:flex; justify-content:space-between; align-items:center; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:12px; padding:12px 16px; font-size:14px; }
  .breakdown-cat { color:#aaa; }
  .breakdown-score { font-weight:700; color:var(--mint); font-size:15px; }
  .dark-btn { width:100%; max-width:360px; background:#1a1a1a; color:var(--mint); border:1.5px solid #2e2e2e; border-radius:16px; padding:15px; font-family:'Bebas Neue',cursive; font-size:18px; letter-spacing:2px; cursor:pointer; margin-top:0; transition:all 0.2s; }
  .dark-btn:active { transform:scale(0.97); }


  /* NRL QUIZ */
  #nrlscreen, #nrlscreen2, #nrlscreen3, #nrlscreen4, #nrlscreenAT { background:#0b0f1a; padding:0; justify-content:flex-start; }
  #nrlleaderboardAT { background:var(--dark); justify-content:flex-start; padding:44px 0 0; }
  #nrlleaderboard2, #nrlseasonlb { background:var(--dark); justify-content:flex-start; padding:44px 0 0; }
  #nrlLbSubHub { background:var(--dark); justify-content:flex-start; padding:44px 0 0; }
  .nrl-header { width:100%; background:#0d1220; padding:60px 20px 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:3px solid #e8192c; }
  .nrl-title { font-family:'Bebas Neue',cursive; font-size:22px; color:#ffffff; letter-spacing:3px; line-height:1; }
  .nrl-round-label { font-size:10px; color:#e8192c; letter-spacing:2px; text-transform:uppercase; margin-top:3px; font-weight:700; }
  .nrl-loading { text-align:center; padding:40px 20px; color:#555; font-size:14px; }
  .nrl-error { text-align:center; padding:40px 20px; color:#e74c3c; font-size:13px; line-height:1.6; }

  /* NRL CARD CHROME */
  .nrl-card-chrome { background:#0d1220; border-radius:20px; overflow:hidden; box-shadow:0 8px 40px rgba(232,25,44,0.2); animation:slideIn 0.3s ease; border:1px solid #1e2540; }
  .nrl-card-header { background:linear-gradient(135deg,#e8192c 0%,#a00d1d 100%); padding:14px 20px; display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden; }
  .nrl-card-header::after { content:''; position:absolute; right:-20px; top:-20px; width:100px; height:100px; background:rgba(255,255,255,0.06); border-radius:50%; }
  .nrl-card-header::before { content:''; position:absolute; right:40px; bottom:-30px; width:80px; height:80px; background:rgba(255,255,255,0.04); border-radius:50%; }
  .nrl-card-brand { font-family:'Bebas Neue',cursive; font-size:20px; letter-spacing:3px; color:#ffffff; position:relative; z-index:1; }
  .nrl-card-badge { background:rgba(0,0,0,0.35); color:#fff; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:5px 12px; border-radius:20px; position:relative; z-index:1; }
  .nrl-card-body { padding:20px 18px 16px; background:#0d1220; }
  .nrl-q-label { font-family:'Bebas Neue',cursive; font-size:13px; letter-spacing:3px; color:#e8192c; margin-bottom:8px; }
  .nrl-q-text { font-size:14px; font-weight:700; color:#f0f0f0; line-height:1.5; margin-bottom:16px; text-align:center; }
  .nrl-options-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .nrl-option-btn { background:#141928; color:#d0d8f0; border:2px solid #2a3050; border-radius:12px; padding:12px 8px; font-size:12px; font-weight:700; cursor:pointer; transition:all 0.15s; text-align:center; line-height:1.3; font-family:'DM Sans',sans-serif; }
  .nrl-option-btn:active:not(:disabled) { transform:scale(0.96); }
  .nrl-option-btn.correct { border-color:#27ae60; background:#27ae60; color:#fff; }
  .nrl-option-btn.wrong { border-color:#e8192c; background:#e8192c; color:#fff; opacity:0.8; }
  .nrl-option-btn.reveal-correct { border-color:#27ae60; background:#27ae60; color:#fff; }
  .nrl-option-btn:disabled { cursor:default; }
  .nrl-next-btn { width:100%; background:#e8192c; color:#fff; border:none; border-radius:12px; padding:14px; font-family:'Bebas Neue',cursive; font-size:20px; letter-spacing:2px; cursor:pointer; margin-top:14px; display:none; }
  .nrl-next-btn.visible { display:block; }
  .nrl-score-badge { background:#e8192c; color:#fff; font-family:'Bebas Neue',cursive; font-size:18px; letter-spacing:1px; padding:4px 12px; border-radius:20px; min-width:60px; text-align:center; }

  /* NRL SAVE SCREEN */
  #nrlsave { background:#0b0f1a; justify-content:center; padding:40px 24px; gap:16px; }

  /* LEADERBOARD HUB */
  #lbhub { background:var(--dark); justify-content:flex-start; padding:44px 0 0; }
  .lbhub-tabs { display:flex; width:100%; border-bottom:2px solid #222; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .lbhub-tab { flex:1; background:transparent; border:none; color:#666; font-family:'Bebas Neue',cursive; font-size:15px; letter-spacing:1px; padding:14px 6px; cursor:pointer; transition:all 0.2s; border-bottom:3px solid transparent; margin-bottom:-2px; }
  .lbhub-tab.active { color:var(--mint); border-bottom-color:var(--mint); }

  /* NRL LEADERBOARD */
  #nrlleaderboard { background:var(--dark); justify-content:flex-start; padding:44px 0 0; }
  .nrl-lb-header { width:100%; background:#0d1220; padding:16px 20px; display:flex; align-items:center; gap:12px; border-bottom:3px solid #e8192c; }
  .nrl-lb-title { font-family:'Bebas Neue',cursive; font-size:26px; color:#fff; letter-spacing:3px; }


  .lb-header { width:100%; background:var(--dark); padding:16px 20px; display:flex; align-items:center; gap:12px; border-bottom:2px solid #333; }
  .lb-title { font-family:'Bebas Neue',cursive; font-size:28px; color:var(--mint); letter-spacing:3px; }
  .lb-list { width:100%; max-width:420px; padding:16px; flex:1; }
  .lb-entry { background:#2a2a2a; border:2px solid #333; border-radius:14px; padding:12px 16px; margin-bottom:10px; display:flex; align-items:center; gap:12px; }
  .lb-entry.top { background:#2a2a2a; border-color:#333; }
  .lb-entry.gold { border-left:4px solid #ffc832 !important; }
  .lb-entry.silver { border-left:4px solid #b4b4c8 !important; }
  .lb-entry.bronze { border-left:4px solid #c87840 !important; }
  .lb-medal { font-size:28px; min-width:36px; text-align:center; }
  .lb-rank { font-size:16px; font-weight:700; color:#888; min-width:36px; text-align:center; }
  .lb-info { flex:1; }
  .lb-name { font-family:'Bebas Neue',cursive; font-size:18px; color:white; letter-spacing:1px; }
  .lb-meta { font-size:11px; color:#888; margin-top:2px; }
  .lb-score-wrap { text-align:right; }
  .lb-pct { font-family:'Bebas Neue',cursive; font-size:22px; color:var(--mint); }
  .lb-pts { font-size:11px; color:#888; }
  .lb-empty { color:#aaa; text-align:center; padding:40px 20px; }
  .lb-empty-icon { font-size:48px; margin-bottom:12px; }
  .lb-empty-title { font-family:'Bebas Neue',cursive; font-size:22px; color:var(--mint); letter-spacing:2px; }
  .lb-empty-msg { font-size:13px; margin-top:8px; }

  /* ANSWER ANIMATIONS */
  @keyframes correctBounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.18); }
    50%  { transform: scale(0.93); }
    70%  { transform: scale(1.08); }
    100% { transform: scale(1); }
  }
  @keyframes wrongShake {
    0%,100% { transform: translateX(0); }
    15%  { transform: translateX(-8px) rotate(-1.5deg); }
    30%  { transform: translateX(8px) rotate(1.5deg); }
    45%  { transform: translateX(-6px) rotate(-1deg); }
    60%  { transform: translateX(6px) rotate(1deg); }
    75%  { transform: translateX(-3px); }
  }
  @keyframes revealPop {
    0%   { transform: scale(0.85); opacity:0.5; }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1); opacity:1; }
  }
  @keyframes scoreFlash {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); color: #2ecc71; }
    100% { transform: scale(1); }
  }
  .anim-correct { animation: correctBounce 0.45s cubic-bezier(0.36,0.07,0.19,0.97) both; }
  .anim-wrong   { animation: wrongShake 0.45s cubic-bezier(0.36,0.07,0.19,0.97) both; }
  .anim-reveal  { animation: revealPop 0.3s ease both; }
  .anim-score   { animation: scoreFlash 0.4s ease both; }

  /* NAME GAME ENTRY */
  .ng-entry-wrap { margin:12px 0 4px; }
  .ng-entry-row { display:flex; gap:8px; margin-bottom:8px; }
  .ng-input { flex:1; background:#1e1e1e; border:2px solid #444; border-radius:10px; padding:10px 12px; color:white; font-size:14px; font-family:'DM Sans',sans-serif; outline:none; }
  .ng-input:focus { border-color:var(--mint); }
  .ng-add-btn { background:var(--mint); color:var(--dark); border:none; border-radius:10px; padding:10px 14px; font-family:'Bebas Neue',cursive; font-size:16px; letter-spacing:1px; cursor:pointer; white-space:nowrap; }
  .ng-count { font-family:'Bebas Neue',cursive; font-size:14px; color:var(--mint); letter-spacing:1px; text-align:center; margin-bottom:6px; }
  .ng-names-list { display:flex; flex-wrap:wrap; gap:6px; min-height:32px; }
  .ng-name-tag { background:#2a2a2a; border:1.5px solid #444; border-radius:20px; padding:4px 10px; font-size:12px; color:white; display:flex; align-items:center; gap:6px; }
  .ng-name-tag button { background:none; border:none; color:#888; font-size:14px; cursor:pointer; padding:0; line-height:1; }
  .ng-name-tag button:hover { color:var(--wrong); }

  /* NAME GAME RESULTS */
  /* SHARE CARD OVERLAY */
  .share-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:999; flex-direction:column; align-items:center; justify-content:center; padding:16px; overflow:hidden; }
  .share-overlay.active { display:flex; }
  .share-card-img { width:auto; max-width:100%; max-height:calc(100vh - 180px); border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,0.5); object-fit:contain; }
  .share-overlay-title { font-family:'Bebas Neue',cursive; font-size:18px; color:white; letter-spacing:2px; margin-bottom:10px; }
  .share-overlay-sub { font-size:11px; color:#666; margin-top:6px; text-align:center; }
  .share-overlay-btns { display:flex; gap:10px; margin-top:10px; width:100%; max-width:360px; flex-shrink:0; }
  .share-dl-btn { flex:1; background:var(--mint); color:var(--dark); border:none; border-radius:14px; padding:13px; font-family:'Bebas Neue',cursive; font-size:17px; letter-spacing:2px; cursor:pointer; }
  .share-close-btn { background:#2a2a2a; color:#aaa; border:2px solid #333; border-radius:14px; padding:13px 18px; font-family:'Bebas Neue',cursive; font-size:17px; letter-spacing:1px; cursor:pointer; }

  .ng-results-section { width:100%; max-width:360px; margin-top:4px; }

  /* WHO AM I CARD */
  .wai-sport { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--mint); margin-bottom:4px; }
  .wai-question { font-family:'Bebas Neue',cursive; font-size:28px; letter-spacing:2px; color:#fff; margin:10px 0 14px; }
  .wai-pts-bar { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
  .wai-pts-label { font-size:11px; font-weight:700; letter-spacing:2px; color:#555; text-transform:uppercase; }
  .wai-pts-badge { width:38px; height:38px; border-radius:50%; border:2px solid #2a2a2a; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',cursive; font-size:17px; color:#444; transition:all 0.3s; }
  .wai-pts-badge.active { border-color:var(--mint); color:var(--mint); background:rgba(126,207,192,0.1); }
  .wai-pts-badge.used { border-color:#222; color:#333; }
  .wai-pts-badge.won { border-color:#2ecc71; color:#2ecc71; background:rgba(46,204,113,0.1); }
  .wai-clues { list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
  .wai-clue { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; background:#141414; border-radius:10px; border-left:3px solid #222; transition:all 0.3s; }
  .wai-clue.visible { border-left-color:var(--mint-dark); }
  .wai-clue.visible .wai-clue-num { background:var(--mint); color:#0d0d0d; }
  .wai-clue-num { min-width:22px; height:22px; border-radius:50%; background:#2a2a2a; color:#666; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
  .wai-clue-text { font-size:13px; line-height:1.5; color:#ccc; }
  .wai-clue-hidden { font-size:13px; color:#333; font-style:italic; }
  .wai-reveal-btn { width:100%; background:#1e1e1e; border:2px solid #2a2a2a; border-radius:12px; padding:11px; color:#777; font-family:'Bebas Neue',cursive; font-size:14px; letter-spacing:1.5px; cursor:pointer; margin-bottom:10px; transition:all 0.2s; }
  .wai-reveal-btn:hover { border-color:var(--mint); color:var(--mint); }
  .wai-reveal-btn:disabled { opacity:0.3; cursor:default; }
  .wai-input { width:100%; padding:11px 14px; background:#141414; border:2px solid #2a2a2a; border-radius:12px; color:#fff; font-family:'DM Sans',sans-serif; font-size:15px; outline:none; margin-bottom:8px; transition:border-color 0.2s; }
  .wai-input:focus { border-color:var(--mint); }
  .wai-input.shake { animation:wai-shake 0.35s ease; border-color:var(--wrong); }
  @keyframes wai-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
  .wai-submit-btn { width:100%; background:var(--mint); border:none; border-radius:12px; padding:12px; color:var(--dark); font-family:'Bebas Neue',cursive; font-size:16px; letter-spacing:2px; cursor:pointer; }
  .wai-answer-reveal { background:rgba(126,207,192,0.08); border:1px solid rgba(126,207,192,0.25); border-radius:12px; padding:12px 16px; text-align:center; margin-bottom:10px; }
  .wai-answer-label { font-size:10px; font-weight:700; letter-spacing:3px; color:var(--mint); text-transform:uppercase; margin-bottom:4px; }
  .wai-answer-name { font-family:'Bebas Neue',cursive; font-size:28px; letter-spacing:2px; color:var(--mint); }
  .wai-result { border-radius:12px; padding:12px 16px; text-align:center; margin-bottom:10px; }
  .wai-result.correct { background:rgba(46,204,113,0.1); border:1px solid rgba(46,204,113,0.3); }
  .wai-result.wrong { background:rgba(231,76,60,0.08); border:1px solid rgba(231,76,60,0.2); }
  .wai-result-pts { font-family:'Bebas Neue',cursive; font-size:32px; letter-spacing:2px; }
  .wai-result.correct .wai-result-pts { color:#2ecc71; }
  .wai-result.wrong .wai-result-pts { color:var(--wrong); }
  .wai-result-msg { font-size:12px; color:#999; margin-top:2px; }
  .ng-results-title { font-family:'Bebas Neue',cursive; font-size:18px; color:var(--mint); letter-spacing:2px; text-align:center; margin-bottom:10px; }
  .ng-result-card { background:#2a2a2a; border-radius:14px; padding:14px 16px; margin-bottom:10px; }
  .ng-result-letter { font-family:'Bebas Neue',cursive; font-size:28px; color:var(--mint); margin-bottom:2px; }
  .ng-result-count { font-size:12px; color:#aaa; margin-bottom:8px; font-weight:600; }
  .ng-result-tags { display:flex; flex-wrap:wrap; gap:5px; }
  .ng-result-tag { background:#1e1e1e; border:1.5px solid #444; border-radius:20px; padding:3px 10px; font-size:12px; color:white; }
  .ng-no-names { font-size:12px; color:#666; font-style:italic; }

  /* NAME GAME LEADERBOARD */
  #ngleaderboard { background:var(--dark); justify-content:flex-start; padding:44px 0 0; }

  /* ── HOT TAKES ── */
  #hottakes { background:var(--dark); justify-content:flex-start; padding:0; padding-top:44px; overflow-y:auto; }
  .ht-header { display:flex; align-items:center; gap:12px; padding:16px 16px 12px; width:100%; box-sizing:border-box; border-bottom:2px solid #222; flex-shrink:0; }
  .ht-title { font-family:'Bebas Neue',cursive; font-size:22px; letter-spacing:2px; color:#fff; flex:1; }
  .ht-submit-btn { background:linear-gradient(135deg,#e8192c,#c0001e); color:#fff; border:none; border-radius:12px; padding:9px 16px; font-family:'Bebas Neue',cursive; font-size:15px; letter-spacing:1px; cursor:pointer; flex-shrink:0; transition:all 0.18s; box-shadow:0 3px 12px rgba(232,25,44,0.35); }
  .ht-submit-btn:active { transform:scale(0.96); }
  .ht-feed { width:100%; padding:12px 14px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; }
  .ht-card { background:#1a1a1a; border-radius:16px; padding:16px; border:1.5px solid #2a2a2a; transition:border-color 0.2s; }
  .ht-card-take { font-family:'DM Sans',sans-serif; font-size:15px; color:#eee; line-height:1.45; margin-bottom:12px; }
  .ht-card-meta { font-size:11px; color:#555; margin-bottom:10px; font-family:'DM Sans',sans-serif; }
  .ht-vote-row { display:flex; gap:8px; align-items:center; }
  .ht-vote-btn { flex:1; border:none; border-radius:10px; padding:10px 8px; font-family:'Bebas Neue',cursive; font-size:14px; letter-spacing:1.5px; cursor:pointer; transition:all 0.18s; position:relative; overflow:hidden; }
  .ht-vote-btn.agree { background:#1a3a1a; color:#4caf50; border:1.5px solid #2a5a2a; }
  .ht-vote-btn.disagree { background:#3a1a1a; color:#e8192c; border:1.5px solid #5a2a2a; }
  .ht-vote-btn.agree:active { transform:scale(0.97); background:#1e4a1e; }
  .ht-vote-btn.disagree:active { transform:scale(0.97); background:#4a1e1e; }
  .ht-vote-btn.voted-agree { background:#1e4a1e; color:#66bb6a; border-color:#4caf50; }
  .ht-vote-btn.voted-disagree { background:#4a1e1e; color:#ef5350; border-color:#e8192c; }
  .ht-bar-wrap { margin-top:10px; }
  .ht-bar-track { background:#2a2a2a; border-radius:6px; height:8px; overflow:hidden; position:relative; }
  .ht-bar-agree { height:100%; border-radius:6px; background:linear-gradient(90deg,#2e7d32,#66bb6a); transition:width 0.5s ease; }
  .ht-bar-labels { display:flex; justify-content:space-between; margin-top:5px; font-size:11px; font-family:'DM Sans',sans-serif; }
  .ht-bar-agree-label { color:#66bb6a; }
  .ht-bar-disagree-label { color:#ef5350; }
  .ht-count { font-size:11px; color:#555; font-family:'DM Sans',sans-serif; text-align:center; margin-top:4px; }
  .ht-empty { text-align:center; color:#555; font-family:'DM Sans',sans-serif; font-size:14px; padding:40px 20px; }
  .ht-loading { text-align:center; color:#555; font-family:'DM Sans',sans-serif; font-size:14px; padding:40px 20px; }

  /* Submit modal */
  #htModal { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:3000; display:none; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; }
  #htModal.open { display:flex; }
  .ht-modal-box { background:#1a1a1a; border-radius:20px; padding:24px; width:100%; max-width:380px; border:1.5px solid #333; animation:htModalIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275) both; }
  @keyframes htModalIn { from{opacity:0;transform:scale(0.88)translateY(20px)} to{opacity:1;transform:none} }
  .ht-modal-title { font-family:'Bebas Neue',cursive; font-size:22px; letter-spacing:2px; color:#fff; margin-bottom:6px; }
  .ht-modal-sub { font-size:13px; color:#888; font-family:'DM Sans',sans-serif; margin-bottom:16px; }
  .ht-modal-textarea { width:100%; background:#111; border:1.5px solid #333; border-radius:12px; color:#eee; font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.45; padding:12px; box-sizing:border-box; resize:none; height:110px; outline:none; transition:border-color 0.2s; }
  .ht-modal-textarea:focus { border-color:var(--mint); }
  .ht-modal-charcount { text-align:right; font-size:11px; color:#555; font-family:'DM Sans',sans-serif; margin:4px 0 12px; }
  .ht-modal-name { width:100%; background:#111; border:1.5px solid #333; border-radius:12px; color:#eee; font-family:'DM Sans',sans-serif; font-size:14px; padding:11px 12px; box-sizing:border-box; outline:none; transition:border-color 0.2s; margin-bottom:14px; }
  .ht-modal-name:focus { border-color:var(--mint); }
  .ht-modal-btns { display:flex; gap:10px; }
  .ht-modal-cancel { flex:1; background:#222; color:#aaa; border:1.5px solid #333; border-radius:12px; padding:13px; font-family:'Bebas Neue',cursive; font-size:16px; letter-spacing:1px; cursor:pointer; transition:all 0.18s; }
  .ht-modal-cancel:active { transform:scale(0.97); }
  .ht-modal-post { flex:2; background:linear-gradient(135deg,#e8192c,#c0001e); color:#fff; border:none; border-radius:12px; padding:13px; font-family:'Bebas Neue',cursive; font-size:16px; letter-spacing:1px; cursor:pointer; transition:all 0.18s; box-shadow:0 3px 14px rgba(232,25,44,0.4); }
  .ht-modal-post:active { transform:scale(0.97); }

  /* Leaderboard show more */
  .lb-show-more { width:100%; background:transparent; border:1.5px solid #333; border-radius:12px; padding:12px; color:#888; font-family:'Bebas Neue',cursive; font-size:15px; letter-spacing:1.5px; cursor:pointer; margin:8px 0 4px; transition:all 0.2s; }
  .lb-show-more:active { background:#222; color:var(--mint); border-color:var(--mint); }

  /* Comments */
  .ht-comments-toggle { display:flex; align-items:center; gap:6px; margin-top:12px; background:none; border:none; color:#666; font-family:'DM Sans',sans-serif; font-size:12px; cursor:pointer; padding:0; transition:color 0.2s; }
  .ht-comments-toggle:hover { color:#aaa; }
  .ht-comments-toggle .ht-chevron { transition:transform 0.25s; display:inline-block; font-size:10px; }
  .ht-comments-toggle.open .ht-chevron { transform:rotate(180deg); }
  .ht-comments-section { overflow:hidden; max-height:0; transition:max-height 0.35s ease; }
  .ht-comments-section.open { max-height:600px; }
  .ht-comments-inner { padding-top:12px; border-top:1px solid #222; margin-top:12px; display:flex; flex-direction:column; gap:10px; }
  .ht-comment { display:flex; flex-direction:column; gap:2px; }
  .ht-comment-name { font-family:'DM Sans',sans-serif; font-size:11px; font-weight:700; color:var(--mint); }
  .ht-comment-text { font-family:'DM Sans',sans-serif; font-size:13px; color:#ccc; line-height:1.4; }
  .ht-comment-input-row { display:flex; gap:8px; margin-top:4px; }
  .ht-comment-input { flex:1; background:#111; border:1.5px solid #333; border-radius:10px; color:#eee; font-family:'DM Sans',sans-serif; font-size:13px; padding:9px 11px; outline:none; transition:border-color 0.2s; }
  .ht-comment-input:focus { border-color:var(--mint); }
  .ht-comment-send { background:var(--mint); color:var(--dark); border:none; border-radius:10px; padding:9px 14px; font-family:'Bebas Neue',cursive; font-size:14px; letter-spacing:1px; cursor:pointer; transition:all 0.18s; flex-shrink:0; }
  .ht-comment-send:active { transform:scale(0.96); }
  .ht-no-comments { font-family:'DM Sans',sans-serif; font-size:12px; color:#444; font-style:italic; }
  .ng-lb-header { width:100%; background:var(--dark); padding:16px 20px; display:flex; align-items:center; gap:12px; border-bottom:2px solid #333; }
  .ng-lb-title { font-family:'Bebas Neue',cursive; font-size:24px; color:var(--mint); letter-spacing:3px; }
  .ng-lb-tabs { display:flex; gap:8px; padding:12px 16px 0; width:100%; max-width:420px; flex-wrap:wrap; }
  .ng-lb-tab { background:#2a2a2a; border:2px solid #333; border-radius:10px; padding:8px 14px; font-family:'Bebas Neue',cursive; font-size:18px; color:#aaa; cursor:pointer; letter-spacing:1px; }
  .ng-lb-tab.active { border-color:var(--mint); color:var(--mint); background:rgba(126,207,192,0.1); }
  .ng-lb-content { width:100%; max-width:420px; padding:12px 16px; flex:1; }
  .ng-lb-entry { background:#2a2a2a; border:2px solid #333; border-radius:14px; padding:12px 16px; margin-bottom:10px; display:flex; align-items:center; gap:12px; }
  .ng-lb-entry.top { background:#2a2a2a; border-color:#333; }
  .ng-lb-entry.gold { border-left:4px solid #ffc832 !important; }
  .ng-lb-entry.silver { border-left:4px solid #b4b4c8 !important; }
  .ng-lb-entry.bronze { border-left:4px solid #c87840 !important; }
  .ng-lb-name { font-family:'Bebas Neue',cursive; font-size:18px; color:white; letter-spacing:1px; flex:1; }
  .ng-lb-count { font-family:'Bebas Neue',cursive; font-size:22px; color:var(--mint); }
  .ng-lb-date { font-size:11px; color:#888; }
  .ng-lb-empty { color:#aaa; text-align:center; padding:30px 20px; font-size:13px; }
  .ng-submit-box { background:#2a2a2a; border-radius:14px; padding:14px 16px; margin-bottom:10px; }
  .ng-submit-title { font-family:'Bebas Neue',cursive; font-size:15px; color:var(--mint); letter-spacing:1px; margin-bottom:8px; }
  .ng-submit-row { display:flex; gap:8px; }
  .ng-submit-input { flex:1; background:#1e1e1e; border:2px solid #444; border-radius:10px; padding:10px 12px; color:white; font-size:14px; font-family:'DM Sans',sans-serif; outline:none; }
  .ng-submit-input:focus { border-color:var(--mint); }
  .ng-submit-num { width:70px; background:#1e1e1e; border:2px solid #444; border-radius:10px; padding:10px 8px; color:white; font-size:14px; font-family:'DM Sans',sans-serif; outline:none; text-align:center; }
  .ng-submit-num:focus { border-color:var(--mint); }
  .ng-submit-btn { background:var(--mint); color:var(--dark); border:none; border-radius:10px; padding:10px 14px; font-family:'Bebas Neue',cursive; font-size:16px; cursor:pointer; }
  .ng-saved-msg { color:var(--mint); font-size:13px; font-weight:700; text-align:center; padding:6px; display:none; }

  /* NAME GAME MILESTONE TOAST */
  .ng-toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.7); background:#1e1e1e; border:2px solid var(--mint); border-radius:20px; padding:20px 28px; text-align:center; z-index:2000; opacity:0; pointer-events:none; transition:none; max-width:280px; box-shadow:0 8px 40px rgba(0,0,0,0.6); }
  .ng-toast.show { animation:toastPop 2.6s cubic-bezier(0.34,1.56,0.64,1) forwards; }
  @keyframes toastPop {
    0%   { opacity:0; transform:translate(-50%,-50%) scale(0.7); }
    15%  { opacity:1; transform:translate(-50%,-50%) scale(1.05); }
    25%  { transform:translate(-50%,-50%) scale(1); }
    70%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
    100% { opacity:0; transform:translate(-50%,-50%) scale(0.9); }
  }
  .ng-toast-emoji { font-size:44px; line-height:1; margin-bottom:8px; }
  .ng-toast-count { font-family:'Bebas Neue',cursive; font-size:42px; color:var(--mint); letter-spacing:3px; line-height:1; }
  .ng-toast-label { font-size:11px; color:#888; letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; }
  .ng-toast-msg { font-size:15px; font-weight:700; color:white; line-height:1.4; }

  /* NAME MODAL */
  .name-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:1000; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(4px); }
  .name-modal-overlay.active { display:flex; }
  .name-modal { background:#1e1e1e; border:2px solid #333; border-radius:20px; padding:28px 24px 24px; width:100%; max-width:340px; animation:modalPop 0.25s cubic-bezier(0.34,1.56,0.64,1); }
  @keyframes modalPop { from{opacity:0;transform:scale(0.88) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }
  .name-modal-icon { font-size:40px; text-align:center; margin-bottom:10px; }
  .name-modal-title { font-family:'Bebas Neue',cursive; font-size:26px; letter-spacing:3px; color:var(--mint); text-align:center; margin-bottom:4px; }
  .name-modal-sub { font-size:13px; color:#888; text-align:center; margin-bottom:18px; line-height:1.5; }
  .name-modal-input { width:100%; background:#111; border:2px solid #444; border-radius:12px; padding:14px 16px; color:white; font-size:17px; font-family:'DM Sans',sans-serif; outline:none; margin-bottom:10px; transition:border-color 0.2s; }
  .name-modal-input:focus { border-color:var(--mint); }
  .name-modal-go { width:100%; background:var(--mint); color:var(--dark); border:none; border-radius:14px; padding:15px; font-family:'Bebas Neue',cursive; font-size:22px; letter-spacing:3px; cursor:pointer; transition:opacity 0.15s; }
  .name-modal-go:active { opacity:0.85; }
  .name-modal-skip { width:100%; background:none; border:none; color:#555; font-size:13px; cursor:pointer; padding:10px; margin-top:2px; font-family:'DM Sans',sans-serif; }
  .name-modal-skip:active { color:#888; }
  .name-modal-saved-tag { display:inline-flex; align-items:center; gap:6px; background:rgba(126,207,192,0.1); border:1px solid rgba(126,207,192,0.3); border-radius:20px; padding:4px 12px; font-size:12px; color:var(--mint); margin-bottom:14px; font-weight:600; }

  /* PRODUCT PAGE */
  .product-page { background:var(--dark); justify-content:flex-start; padding:0; overflow-y:auto; }
  .product-header { display:flex; align-items:center; gap:12px; padding:60px 20px 16px; border-bottom:2px solid #2a2a2a; }
  .product-title-text { font-family:'Bebas Neue',cursive; font-size:22px; color:var(--mint); letter-spacing:2px; }
  .product-img-carousel { width:100%; max-width:420px; overflow:hidden; }
  .product-img-track { display:flex; transition:transform 0.3s ease; }
  .product-img-slide { min-width:100%; height:auto; max-height:400px; object-fit:contain; background:#111; }
  .carousel-dots { display:flex; justify-content:center; gap:8px; padding:10px 0; }
  .carousel-dot { width:8px; height:8px; border-radius:50%; background:#444; border:none; cursor:pointer; transition:background 0.2s; }
  .carousel-dot.active { background:var(--mint); }
  .product-body { padding:16px 20px; width:100%; max-width:420px; }
  .product-name { font-family:'Bebas Neue',cursive; font-size:30px; color:white; letter-spacing:2px; margin-bottom:4px; }
  .product-price { font-family:'Bebas Neue',cursive; font-size:26px; color:var(--mint); letter-spacing:2px; margin-bottom:14px; }
  .product-desc { font-size:14px; color:#aaa; line-height:1.7; margin-bottom:16px; }
  .product-features { background:#1a1a1a; border-radius:12px; padding:14px 16px; margin-bottom:16px; }
  .product-feature { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid #2a2a2a; font-size:13px; color:#ccc; }
  .product-feature:last-child { border-bottom:none; }
  .product-feature-icon { font-size:16px; min-width:20px; text-align:center; }
  .product-review { background:#1a1a1a; border:1px solid #2a2a2a; border-radius:12px; padding:14px 16px; margin-bottom:10px; }
  .product-review-stars { color:#f5c518; font-size:14px; margin-bottom:6px; }
  .product-review-title { font-weight:700; color:white; font-size:14px; margin-bottom:4px; }
  .product-review-text { font-size:13px; color:#aaa; line-height:1.5; }
  .product-review-author { font-size:11px; color:#666; margin-top:6px; }
  .buy-btn { width:100%; background:var(--mint); color:var(--dark); border:none; border-radius:16px; padding:16px; font-family:'Bebas Neue',cursive; font-size:24px; letter-spacing:3px; cursor:pointer; transition:all 0.2s; box-shadow:0 4px 20px rgba(126,207,192,0.4); margin-bottom:10px; display:block; text-align:center; text-decoration:none; }
  .buy-btn:active { opacity:0.85; transform:scale(0.98); }
  .product-shipping { font-size:12px; color:#666; text-align:center; margin-bottom:20px; }

  /* ===== EMAIL SIGNUP ===== */
  .email-signup-box {
    display: none;
    margin: 16px 0 8px;
    background: rgba(126,207,192,0.07);
    border: 1px solid rgba(126,207,192,0.25);
    border-radius: 16px;
    padding: 20px 18px;
    text-align: center;
  }
  .email-signup-box.visible { display: block; }
  .email-signup-title {
    font-family: 'Bebas Neue', cursive;
    font-size: 20px;
    color: var(--mint);
    letter-spacing: 2px;
    margin-bottom: 4px;
  }
  .email-signup-sub {
    font-size: 12px;
    color: #888;
    margin-bottom: 14px;
    letter-spacing: 0.3px;
  }
  .email-signup-row {
    display: flex;
    gap: 8px;
  }
  .email-signup-input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(126,207,192,0.3);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    color: #fff;
    font-family: inherit;
    outline: none;
  }
  .email-signup-input::placeholder { color: #555; }
  .email-signup-input:focus { border-color: var(--mint); }
  .email-signup-btn {
    background: var(--mint);
    color: var(--dark);
    border: none;
    border-radius: 10px;
    padding: 11px 18px;
    font-family: 'Bebas Neue', cursive;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
  }
  .email-signup-btn:active { opacity: 0.8; }
  .email-signup-success {
    font-size: 13px;
    color: var(--mint);
    margin-top: 10px;
    display: none;
  }
  .email-signup-skip {
    font-size: 11px;
    color: #555;
    margin-top: 10px;
    cursor: pointer;
    text-decoration: underline;
  }


  /* WTL STATS MODAL */
  #wtlStatsModal { position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:3000; display:none; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; }
  #wtlStatsModal.open { display:flex; }
  .wtl-stats-box { background:#1a1a1a; border-radius:20px; padding:22px 20px; width:100%; max-width:380px; border:1.5px solid #333; }
  .wtl-stats-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .wtl-stats-title { font-family:'Bebas Neue',cursive; font-size:22px; letter-spacing:2px; color:#e2b714; }
  .wtl-stats-close { background:none; border:none; color:#666; font-size:22px; cursor:pointer; padding:0 4px; line-height:1; }
  .wtl-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px; }
  .wtl-stat-box { background:#111; border-radius:12px; padding:10px 6px; text-align:center; }
  .wtl-stat-num { font-family:'Bebas Neue',cursive; font-size:30px; color:#fff; line-height:1; }
  .wtl-stat-label { font-size:10px; color:#555; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; margin-top:3px; line-height:1.2; }
  .wtl-dist-title { font-family:'Bebas Neue',cursive; font-size:14px; letter-spacing:2px; color:#555; margin-bottom:10px; }
  .wtl-dist-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .wtl-dist-label { font-family:'Bebas Neue',cursive; font-size:15px; color:#888; width:16px; text-align:right; flex-shrink:0; }
  .wtl-dist-bar-wrap { flex:1; background:#111; border-radius:4px; height:22px; overflow:hidden; }
  .wtl-dist-bar { height:100%; border-radius:4px; background:#333; min-width:4px; transition:width 0.5s ease; display:flex; align-items:center; justify-content:flex-end; padding-right:6px; box-sizing:border-box; }
  .wtl-dist-bar.highlight { background:#e2b714; }
  .wtl-dist-bar span { font-size:11px; font-weight:700; color:#111; }
  .wtl-dist-bar.dim span { color:#666; }

  /* ═══════════════════════════════════
     WHO'S THE LAD — NRL WORDLE STYLES
  ═══════════════════════════════════ */
  #wtlscreen { background:#111; justify-content:flex-start; padding:0; padding-top:44px; overflow-y:auto; }
  .wtl-header { width:100%; background:#0d0d0d; padding:14px 16px 12px; display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid #222; flex-shrink:0; }
  .wtl-title { font-family:'Bebas Neue',cursive; font-size:22px; letter-spacing:3px; color:#e2b714; }
  .wtl-subtitle { font-size:10px; color:#555; letter-spacing:1px; text-transform:uppercase; margin-top:1px; }
  .wtl-streak { background:#1a1a0d; border:1px solid #3a3a1a; border-radius:10px; padding:4px 10px; font-family:'Bebas Neue',cursive; font-size:14px; color:#e2b714; letter-spacing:1px; }
  .wtl-how-btn { background:none; border:1.5px solid #333; border-radius:8px; padding:5px 10px; color:#666; font-size:12px; cursor:pointer; letter-spacing:0.5px; font-family:'DM Sans',sans-serif; }

  .wtl-search-wrap { width:100%; padding:10px 10px 6px; box-sizing:border-box; flex-shrink:0; }
  .wtl-search-row { display:flex; gap:8px; }
  .wtl-search-input { flex:1; background:#1a1a1a; border:2px solid #333; border-radius:12px; padding:11px 14px; color:#fff; font-family:'DM Sans',sans-serif; font-size:14px; outline:none; transition:border-color 0.2s; }
  .wtl-search-input:focus { border-color:#e2b714; }
  .wtl-search-btn { background:#e2b714; color:#111; border:none; border-radius:12px; padding:11px 18px; font-family:'Bebas Neue',cursive; font-size:16px; letter-spacing:1px; cursor:pointer; white-space:nowrap; }
  .wtl-search-btn:active { opacity:0.85; }
  .wtl-search-btn:disabled { opacity:0.4; cursor:default; }
  .wtl-suggestions { background:#1a1a1a; border:1.5px solid #333; border-radius:10px; margin-top:4px; overflow:hidden; display:none; }
  .wtl-suggestions.open { display:block; }
  .wtl-suggestion { padding:10px 14px; font-size:13px; color:#ddd; cursor:pointer; border-bottom:1px solid #222; font-family:'DM Sans',sans-serif; }
  .wtl-suggestion:last-child { border-bottom:none; }
  .wtl-suggestion:active { background:#252525; color:#e2b714; }

  .wtl-guesses-wrap { width:100%; padding:6px 8px; box-sizing:border-box; flex:1; }
  .wtl-tries-left { font-size:11px; color:#555; text-align:center; margin-bottom:8px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }

  /* Column headers */
  .wtl-header-row { display:grid; grid-template-columns:repeat(8,1fr); gap:3px; margin-bottom:3px; padding:0 1px; }
  .wtl-col-hdr { font-size:7.5px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; color:#444; text-align:center; padding:2px 1px; }

  /* Guess row */
  .wtl-guess-row { display:grid; grid-template-columns:repeat(8,1fr); gap:3px; margin-bottom:3px; }
  .wtl-cell { border-radius:7px; padding:3px 2px; font-family:'DM Sans',sans-serif; display:flex; flex-direction:column; align-items:center; justify-content:center; height:44px; min-height:44px; max-height:44px; overflow:hidden; position:relative; border:1.5px solid transparent; transition:background 0.3s,border-color 0.3s; box-sizing:border-box; }
  .wtl-cell-val { font-size:10px; font-weight:700; line-height:1.2; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; text-align:center; display:block; }
  .wtl-guess-row .wtl-cell:first-child .wtl-cell-val { font-size:9px; }
  .wtl-cell-arrow { font-size:11px; margin-top:2px; opacity:1; flex-shrink:0; line-height:1; color:#fff !important; font-weight:900; text-shadow:0 1px 3px rgba(0,0,0,0.8); }

  .wtl-cell.green { background:#1a3a1a; border-color:#2ecc71; }
  .wtl-cell.green .wtl-cell-val { color:#2ecc71; }
  .wtl-cell.yellow { background:#2a2200; border-color:#e2b714; }
  .wtl-cell.yellow .wtl-cell-val { color:#e2b714; }
  .wtl-cell.red { background:#2a0d0d; border-color:#c0392b; }
  .wtl-cell.red .wtl-cell-val { color:#e74c3c; }
  .wtl-cell.empty { background:#1a1a1a; border-color:#2a2a2a; }
  .wtl-cell.empty .wtl-cell-val { color:#333; }

  /* Flip animation for revealed cells */
  @keyframes wtl-flip { 0%{transform:scaleY(1)} 50%{transform:scaleY(0)} 100%{transform:scaleY(1)} }
  .wtl-cell.flip { animation:wtl-flip 0.4s ease; }

  /* Result banner */
  .wtl-result-banner { margin:10px 14px; border-radius:14px; padding:16px; text-align:center; flex-shrink:0; }
  .wtl-result-banner.win { background:rgba(46,204,113,0.1); border:1.5px solid rgba(46,204,113,0.4); }
  .wtl-result-banner.loss { background:rgba(231,76,60,0.08); border:1.5px solid rgba(231,76,60,0.25); }
  .wtl-result-banner.hidden { display:none; }
  .wtl-result-emoji { font-size:32px; margin-bottom:4px; }
  .wtl-result-title { font-family:'Bebas Neue',cursive; font-size:24px; letter-spacing:3px; margin-bottom:4px; }
  .wtl-result-banner.win .wtl-result-title { color:#2ecc71; }
  .wtl-result-banner.loss .wtl-result-title { color:#e74c3c; }
  .wtl-result-answer { font-size:13px; color:#aaa; margin-bottom:10px; }
  .wtl-result-answer strong { color:#fff; font-size:15px; }
  .wtl-result-btns { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
  .wtl-share-btn { background:#e2b714; color:#111; border:none; border-radius:12px; padding:10px 18px; font-family:'Bebas Neue',cursive; font-size:15px; letter-spacing:1.5px; cursor:pointer; }
  .wtl-next-btn { background:#1a1a1a; color:#888; border:1.5px solid #333; border-radius:12px; padding:10px 14px; font-family:'Bebas Neue',cursive; font-size:14px; letter-spacing:1px; cursor:pointer; }
  .wtl-next-btn:active { color:var(--mint); border-color:var(--mint); }

  /* New game countdown */
  .wtl-countdown { text-align:center; font-size:11px; color:#555; margin-top:8px; letter-spacing:0.5px; }
  .wtl-countdown strong { color:#888; font-family:'Bebas Neue',cursive; font-size:14px; letter-spacing:1px; }

  /* How to play modal */
  #wtlHowModal { position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:3000; display:none; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; }
  #wtlHowModal.open { display:flex; }
  .wtl-how-box { background:#1a1a1a; border-radius:20px; padding:22px; width:100%; max-width:380px; border:1.5px solid #333; max-height:85vh; overflow-y:auto; }
  .wtl-how-title { font-family:'Bebas Neue',cursive; font-size:22px; letter-spacing:2px; color:#e2b714; margin-bottom:4px; }
  .wtl-how-sub { font-size:12px; color:#666; margin-bottom:14px; }
  .wtl-how-legend { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
  .wtl-how-item { display:flex; align-items:center; gap:10px; }
  .wtl-how-swatch { width:28px; height:28px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; }
  .wtl-how-swatch.green { background:#1a3a1a; border:2px solid #2ecc71; color:#2ecc71; }
  .wtl-how-swatch.yellow { background:#2a2200; border:2px solid #e2b714; color:#e2b714; }
  .wtl-how-swatch.red { background:#2a0d0d; border:2px solid #c0392b; color:#e74c3c; }
  .wtl-how-desc { font-size:12px; color:#bbb; line-height:1.4; }
  .wtl-how-attrs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:16px; }
  .wtl-how-attr { background:#111; border-radius:8px; padding:7px 10px; }
  .wtl-how-attr-name { font-size:10px; font-weight:700; letter-spacing:0.5px; color:#e2b714; text-transform:uppercase; }
  .wtl-how-attr-desc { font-size:11px; color:#666; margin-top:2px; }
  .wtl-how-close { width:100%; background:#e2b714; color:#111; border:none; border-radius:12px; padding:13px; font-family:'Bebas Neue',cursive; font-size:17px; letter-spacing:2px; cursor:pointer; margin-top:4px; }

  /* Loading state */
  .wtl-loading { text-align:center; padding:40px 20px; color:#555; font-family:'DM Sans',sans-serif; font-size:14px; }
  .wtl-error { text-align:center; padding:20px; color:#e74c3c; font-size:12px; }

  /* Share overlay for WTL */
  #wtlShareOverlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.92); z-index:4000; flex-direction:column; align-items:center; justify-content:center; padding:16px; }
  #wtlShareOverlay.active { display:flex; }
  .wtl-share-card-img { max-width:100%; max-height:calc(100vh - 160px); border-radius:12px; object-fit:contain; }
  .wtl-share-overlay-btns { display:flex; gap:10px; margin-top:12px; width:100%; max-width:360px; }