/* ===== BINGO BATTLE ROYALE - EPIC ARENA THEME ===== */

:root {
    --bg0: #07070b;
    --bg1: #0e0f18;
    --gold: #d6b25e;
    --gold2: #f6d27a;
    --red: #ff3b3b;
    --blue: #2f7bff;
    --white: #f2f2f2;
    --muted: #a4a7b7;
    --card: #111224;
    --line: #23254d;
    --ok: #19c37d;
    --warn: #ffcc00;
    --bad: #ff4d4d;
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background:
      radial-gradient(1200px 800px at 50% 18%, #1b1c33 0%, var(--bg1) 42%, var(--bg0) 78%),
      radial-gradient(900px 700px at 15% 10%, rgba(255, 59, 59, 0.14) 0%, transparent 60%),
      radial-gradient(900px 700px at 85% 85%, rgba(47, 123, 255, 0.14) 0%, transparent 60%);
    color: var(--white);
        min-height: 100vh;
        overflow-x: hidden;
  }
  
  /* ===== LAYOUT ===== */
  .wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px;
  }
  
  .grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 16px;
    margin-top: 16px;
  }
  
  @media (max-width: 980px) {
    .grid {
      grid-template-columns: 1fr;
    }
  }
  
  .lobbyGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
  }
  
  @media (max-width: 980px) {
    .lobbyGrid {
      grid-template-columns: 1fr;
    }
  }
  
  /* ===== SCREENS ===== */
  .screen {
    display: none;
  }
  
  .screen.active {
    display: block;
  }
  
  /* ===== HEADER ===== */
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  }
  
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
  }
  
  .badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    display: grid;
    place-items: center;
    color: var(--white);
    font-weight: 900;
    font-size: 14px;
  }

  /* ===== BRAND LOGO (uses logo.png / logo.jpg like landing) ===== */
  .brandLogo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    display: grid;
    place-items: center;
    overflow: hidden;
  }

  .brandLogoImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
  }

  .brandLogoFallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--white);
    font-weight: 900;
    font-size: 14px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  }

  .headerTitle {
    font-size: 16px;
  }
  
  .sub {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    margin-top: 4px;
  }
  
  /* ===== PANELS ===== */
  .panel {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.35);
    overflow: hidden;
  }
  
  .panel h2 {
    margin: 0;
    padding: 12px 14px;
    font-size: 13px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--muted);
  }
  
  /* ===== BUTTONS ===== */
  button {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--white);
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 900;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 160px;
    font-size: 14px;
  }
  
  button:hover:not([disabled]) {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
  }
  
  button:active:not([disabled]) {
    transform: translateY(1px);
  }
  
  button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
  }
  
  .primary {
    border-color: rgba(214, 178, 94, 0.45);
    background: rgba(214, 178, 94, 0.16);
  }
  
  .danger {
    border-color: rgba(255, 77, 77, 0.4);
    background: rgba(255, 77, 77, 0.12);
  }
  
  .ok {
    border-color: rgba(25, 195, 125, 0.4);
    background: rgba(25, 195, 125, 0.12);
  }
  
  .warn {
    border-color: rgba(255, 204, 0, 0.4);
    background: rgba(255, 204, 0, 0.1);
  }
  
  .mini {
    min-width: unset;
    padding: 10px 12px;
    font-weight: 800;
  }
  
  .btnRow {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
  }
  
  .row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
  }
  
  /* ===== EPIC LANDING PAGE ===== */
  .center {
    min-height: calc(100vh - 60px);
    display: grid;
    place-items: center;
    padding: 18px;
    position: relative;
    z-index: 1;
  }

  .landingBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
  }

  .energyOrb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: orbFloat 4s ease-in-out infinite;
  }

  .orb1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 59, 59, 0.7), transparent 70%);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
  }

  .orb2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(47, 123, 255, 0.7), transparent 70%);
    bottom: -80px;
    right: -80px;
    animation-delay: 1s;
  }

  .orb3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(214, 178, 94, 0.6), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 2s;
  }

  @keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(40px, -30px) scale(1.15); }
    50% { transform: translate(-30px, 40px) scale(0.9); }
    75% { transform: translate(30px, 30px) scale(1.1); }
  }

  /* ===== CANNON BALL ANIMATIONS ===== */
  .cannonBall {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }
  
  .cannonBall span:first-child {
    font-size: 12px;
    line-height: 1;
  }
  
  .cannonBall span:last-child {
    font-size: 18px;
    line-height: 1;
  }
  
  /* Ball colors - BINGO style */
  .ball-blue {
    background: radial-gradient(circle at 30% 30%, #6eb5ff, #1e90ff 40%, #0052a3 100%);
    box-shadow: 
      inset -8px -8px 20px rgba(0,0,0,0.3),
      inset 4px 4px 10px rgba(255,255,255,0.4),
      0 0 20px rgba(30, 144, 255, 0.5),
      0 0 40px rgba(30, 144, 255, 0.3);
  }
  
  .ball-red {
    background: radial-gradient(circle at 30% 30%, #ff7b7b, #e63946 40%, #8b0000 100%);
    box-shadow: 
      inset -8px -8px 20px rgba(0,0,0,0.3),
      inset 4px 4px 10px rgba(255,255,255,0.4),
      0 0 20px rgba(230, 57, 70, 0.5),
      0 0 40px rgba(230, 57, 70, 0.3);
  }
  
  .ball-white {
    background: radial-gradient(circle at 30% 30%, #ffffff, #e0e0e0 40%, #a0a0a0 100%);
    color: #1a1a2e;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
    box-shadow: 
      inset -8px -8px 20px rgba(0,0,0,0.15),
      inset 4px 4px 10px rgba(255,255,255,0.8),
      0 0 20px rgba(255, 255, 255, 0.4),
      0 0 40px rgba(255, 255, 255, 0.2);
  }
  
  .ball-green {
    background: radial-gradient(circle at 30% 30%, #7dff8a, #2ecc71 40%, #1a8a4a 100%);
    box-shadow: 
      inset -8px -8px 20px rgba(0,0,0,0.3),
      inset 4px 4px 10px rgba(255,255,255,0.4),
      0 0 20px rgba(46, 204, 113, 0.5),
      0 0 40px rgba(46, 204, 113, 0.3);
  }
  
  .ball-yellow {
    background: radial-gradient(circle at 30% 30%, #ffed7d, #f1c40f 40%, #a68a00 100%);
    color: #1a1a2e;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
    box-shadow: 
      inset -8px -8px 20px rgba(0,0,0,0.25),
      inset 4px 4px 10px rgba(255,255,255,0.5),
      0 0 20px rgba(241, 196, 15, 0.5),
      0 0 40px rgba(241, 196, 15, 0.3);
  }
  
  /* Different trajectories for each ball */
  .cb1 {
    animation: cannonFly1 8s linear infinite;
    animation-delay: 0s;
  }
  .cb2 {
    animation: cannonFly2 10s linear infinite;
    animation-delay: 2s;
    width: 50px;
    height: 50px;
  }
  .cb3 {
    animation: cannonFly3 7s linear infinite;
    animation-delay: 4s;
    width: 55px;
    height: 55px;
  }
  .cb4 {
    animation: cannonFly4 9s linear infinite;
    animation-delay: 1s;
    width: 45px;
    height: 45px;
  }
  .cb5 {
    animation: cannonFly5 11s linear infinite;
    animation-delay: 3s;
    width: 65px;
    height: 65px;
  }
  .cb6 {
    animation: cannonFly6 6s linear infinite;
    animation-delay: 5s;
    width: 40px;
    height: 40px;
  }
  
  @keyframes cannonFly1 {
    0% { transform: translate(-100px, 60vh) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { transform: translate(calc(100vw + 100px), 20vh) rotate(720deg); opacity: 0; }
  }
  
  @keyframes cannonFly2 {
    0% { transform: translate(calc(100vw + 80px), 80vh) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { transform: translate(-80px, 30vh) rotate(-540deg); opacity: 0; }
  }
  
  @keyframes cannonFly3 {
    0% { transform: translate(-80px, 30vh) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { transform: translate(calc(100vw + 80px), 70vh) rotate(480deg); opacity: 0; }
  }
  
  @keyframes cannonFly4 {
    0% { transform: translate(calc(100vw + 60px), 15vh) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { transform: translate(-60px, 85vh) rotate(-600deg); opacity: 0; }
  }
  
  @keyframes cannonFly5 {
    0% { transform: translate(-120px, 90vh) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { transform: translate(calc(100vw + 120px), 10vh) rotate(900deg); opacity: 0; }
  }
  
  @keyframes cannonFly6 {
    0% { transform: translate(50vw, -80px) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { transform: translate(30vw, calc(100vh + 80px)) rotate(360deg); opacity: 0; }
  }

  /* ===== GIANT BINGO BALL SILHOUETTES ===== */
  .ballSilhouette {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.04), rgba(0,0,0,0.08));
    border: 3px solid rgba(255,255,255,0.04);
    animation: ballSilhouetteFloat 6s ease-in-out infinite;
    pointer-events: none;
    box-shadow: inset 0 0 60px rgba(255,255,255,0.02);
  }
  
  .ballSil1 {
    width: 350px;
    height: 350px;
    bottom: -100px;
    left: -80px;
    animation-delay: 0s;
  }
  
  .ballSil2 {
    width: 250px;
    height: 250px;
    top: 5%;
    right: -60px;
    animation-delay: 2s;
  }
  
  .ballSil3 {
    width: 300px;
    height: 300px;
    top: 35%;
    left: -120px;
    animation-delay: 4s;
  }
  
  @keyframes ballSilhouetteFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.35; }
    50% { transform: translateY(-25px) rotate(12deg); opacity: 0.55; }
  }

  .landingCard {
    position: relative;
    z-index: 1;
    width: min(520px, 94vw);
    padding: 40px 32px;
    text-align: center;
  }

  .epicLogo {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .landingLogoImg {
    width: min(360px, 84vw);
    max-width: 420px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 18px 34px rgba(0,0,0,0.55)) drop-shadow(0 10px 22px rgba(47, 123, 255, 0.18));
    animation: logoFloat 2.5s ease-in-out infinite;
    will-change: transform;
    /* Ensure centered on mobile */
    position: relative;
    left: 0;
    transform-origin: center center;
  }

  @keyframes logoFloat {
    0%, 100% { transform: translateX(0) translateY(0) scale(1); }
    50% { transform: translateX(0) translateY(-14px) scale(1.02); }
  }

  .logoBadge {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }

  .badgeInner {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(135deg, #f6d27a 0%, #d6b25e 50%, #b8972e 100%);
    display: grid;
    place-items: center;
    font-size: 32px;
    font-weight: 950;
    color: #14121a;
    box-shadow: 0 10px 40px rgba(214, 178, 94, 0.4);
    position: relative;
    z-index: 1;
  }

  .badgeGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 24px;
    background: radial-gradient(circle, rgba(214, 178, 94, 0.4), transparent 70%);
    animation: badgePulse 2s ease-in-out infinite;
  }

  @keyframes badgePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.7; }
  }

  .epicTitle {
    margin: 0 0 16px 0;
    line-height: 1;
  }

  .titleLine1 {
    display: block;
    font-size: clamp(48px, 12vw, 72px);
    font-weight: 950;
    letter-spacing: 8px;
    color: var(--white);
    text-shadow: 0 4px 30px rgba(255, 255, 255, 0.2);
  }

  .titleLine2 {
  display: block;
  text-align: center;
  font-size: clamp(18px, 4.4vw, 26px);
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
  line-height: 1.05;
  margin-top: 12px;
  margin-bottom: 6px;
}

  
.arenaGradient {
  background: linear-gradient(90deg, rgba(255, 59, 59, 1) 0%, rgba(246, 210, 122, 1) 48%, rgba(47, 123, 255, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.epicTagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 24px;
  }

  .taglineIcon {
    font-size: 24px;
    animation: swordSwing 2s ease-in-out infinite;
  }

  .taglineIcon:last-child {
    animation-delay: 1s;
  }

  @keyframes swordSwing {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
  }

  .teamColors { display: none; }

  .teamDot { display:none; }

  .teamDot.red {
    background: var(--red);
    box-shadow: 0 0 20px rgba(255, 59, 59, 0.6);
    animation-delay: 0s;
  }

  .teamDot.white {
    background: var(--white);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
    animation-delay: 0.3s;
  }

  .teamDot.blue {
    background: var(--blue);
    box-shadow: 0 0 20px rgba(47, 123, 255, 0.6);
    animation-delay: 0.6s;
  }

  @keyframes teamDotPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
  }

  .epicButtons {
    display: flex;
    flex-direction: row;
    gap: 14px;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 26px;
  }

  /* Side-by-side on desktop, stacked on phones */
  @media (max-width: 640px) {
    .epicButtons { flex-direction: column; }
    
    /* Fix logo centering on mobile */
    .landingCard {
      padding: 30px 16px;
      width: 100%;
      max-width: 94vw;
      box-sizing: border-box;
    }
    
    .epicLogo {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding: 0;
    }
    
    .landingLogoImg {
      width: 80vw;
      max-width: 320px;
      margin: 0 auto;
      display: block;
    }
  }

  .epicBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 16px;
    border-radius: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-width: unset;
    width: 100%;
    max-width: 260px;
    min-height: 104px;
  }

  .epicBtn .btnIcon {
    font-size: 26px;
  }

  .epicBtn .btnText {
    font-size: 18px;
    font-weight: 900;
    display: block;
  
    letter-spacing: 1px;
  }

  .epicBtn .btnSub {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.7;
    display: block;
    margin-top: 0px;
  }

  .epicBtn.host {
    background: linear-gradient(135deg, rgba(214, 178, 94, 0.25), rgba(214, 178, 94, 0.1));
    border: 2px solid rgba(214, 178, 94, 0.5);
    color: var(--gold2);
  }

  .epicBtn.host:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(214, 178, 94, 0.3);
    border-color: var(--gold);
  }

  .epicBtn.join {
    background: linear-gradient(135deg, rgba(25, 195, 125, 0.2), rgba(25, 195, 125, 0.08));
    border: 2px solid rgba(25, 195, 125, 0.4);
    color: #88ffcc;
  }

  .epicBtn.join:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(25, 195, 125, 0.25);
    border-color: var(--ok);
  }

  .landingFooter {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .featureList {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
  }

  .featureList span {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  /* Social Media Section */
  .socialSection {
    text-align: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .socialText {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
  }
  
  .socialLinks {
    display: flex;
    justify-content: center;
    gap: 16px;
  }
  
  .socialLink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: var(--muted);
    transition: all 0.3s ease;
    text-decoration: none;
  }
  
  .socialLink svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
  }
  
  .socialLink:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  }
  
  .socialLink.facebook:hover {
    background: rgba(24, 119, 242, 0.3);
    border-color: #1877f2;
    color: #1877f2;
  }
  
  .socialLink.youtube:hover {
    background: rgba(255, 0, 0, 0.3);
    border-color: #ff0000;
    color: #ff0000;
  }
  
  .socialLink.instagram:hover {
    background: linear-gradient(135deg, rgba(131, 58, 180, 0.3), rgba(253, 29, 29, 0.3), rgba(252, 176, 69, 0.3));
    border-color: #e4405f;
    color: #e4405f;
  }
  
  .socialLink.email:hover {
    background: rgba(214, 178, 94, 0.3);
    border-color: var(--gold);
    color: var(--gold);
  }
  
  .socialLink:hover svg {
    transform: scale(1.15);
  }
  
  /* Keep old card class for other uses */
  .card {
    width: min(720px, 94vw);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
    padding: 18px;
  }
  
  .heroTitle {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 950;
    letter-spacing: 0.6px;
    margin: 8px 0 6px;
  }
  
  .tagline {
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 14px;
  }
  
  /* ===== LOBBY ===== */
  .controls {
    padding: 14px;
  }

  /* Spin Controls */
  .spinControls {
    margin-bottom: 10px;
  }
  
  .spinOption {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
  }
  
  .checkLabel {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
  }
  
  .checkLabel input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--gold);
  }
  
  .spinnerName {
    font-size: 12px;
    font-weight: 900;
    color: var(--gold);
  }
  
  .box {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 14px;
    margin-top: 12px;
  }
  
  .codeBig {
    font-size: 44px;
    font-weight: 950;
    letter-spacing: 0.2em;
    text-align: center;
    padding: 10px 0;
    border: 1px solid rgba(214, 178, 94, 0.35);
    border-radius: 16px;
    background: rgba(214, 178, 94, 0.12);
    margin-top: 8px;
    margin-bottom: 10px;
  }
  
  .label {
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  
  select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--white);
    font-weight: 900;
    margin-top: 8px;
    outline: none;
    cursor: pointer;
  }
  
  option {
    color: #111;
  }
  
  .list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }
  
  .playerRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    font-weight: 800;
  }
  
  .pill {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    font-size: 12px;
    font-weight: 900;
    color: var(--muted);
  }
  
  .pill.red {
    border-color: rgba(255, 59, 59, 0.4);
    background: rgba(255, 59, 59, 0.12);
    color: #ffaaaa;
  }
  
  .pill.white {
    border-color: rgba(242, 242, 242, 0.4);
    background: rgba(242, 242, 242, 0.12);
    color: var(--white);
  }
  
  .pill.blue {
    border-color: rgba(47, 123, 255, 0.4);
    background: rgba(47, 123, 255, 0.12);
    color: #aad4ff;
  }
  
  /* Player Row Enhancements */
  .playerInfo {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .playerName {
    font-weight: 800;
  }
  
  .pill.phone.connected {
    border-color: rgba(25, 195, 125, 0.5);
    background: rgba(25, 195, 125, 0.15);
    color: #7dffbe;
  }
  
  .pill.phone.disconnected {
    border-color: rgba(255, 77, 77, 0.4);
    background: rgba(255, 77, 77, 0.1);
    color: #ff9999;
  }
  
  .deletePlayerBtn {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid rgba(255, 77, 77, 0.2);
    background: rgba(255, 77, 77, 0.08);
    color: #ff6666;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .deletePlayerBtn:hover {
    background: rgba(255, 77, 77, 0.2);
    border-color: rgba(255, 77, 77, 0.4);
    transform: scale(1.1);
  }
  
  .status {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.25);
    color: var(--muted);
    font-weight: 700;
  }
  
  /* ===== GAME SCREEN ===== */
  .hero {
    padding: 16px;
  }
  
  .bigBall {
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(214, 178, 94, 0.25), rgba(17, 18, 36, 0.5));
    border: 1px solid rgba(214, 178, 94, 0.35);
    box-shadow: 0 18px 60px rgba(214, 178, 94, 0.12);
  }
  
  @keyframes ballPulse {
    0%, 100% {
      box-shadow: 0 18px 60px rgba(214, 178, 94, 0.12);
    }
    50% {
      box-shadow: 0 18px 80px rgba(214, 178, 94, 0.25);
    }
  }
  
  .ballText {
    font-size: clamp(52px, 9vw, 92px);
    font-weight: 950;
    letter-spacing: 1px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 10px 35px rgba(0, 0, 0, 0.55);
  }
  
  .ballSub {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
  }
  
  /* ===== HISTORY CHIPS ===== */
  .chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
  }
  
  .chip {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(60, 60, 60, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.15);
    font-weight: 800;
    letter-spacing: 0.4px;
    animation: slideIn 0.3s ease-out;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  
  /* Host chip ball colors */
  .chip.ball-blue {
    background: radial-gradient(circle at 30% 30%, #6eb5ff, #1e90ff 60%, #0052a3 100%);
    border-color: rgba(30, 144, 255, 0.5);
  }
  
  .chip.ball-red {
    background: radial-gradient(circle at 30% 30%, #ff7b7b, #e63946 60%, #8b0000 100%);
    border-color: rgba(230, 57, 70, 0.5);
  }
  
  .chip.ball-white {
    background: radial-gradient(circle at 30% 30%, #ffffff, #e0e0e0 60%, #a0a0a0 100%);
    border-color: rgba(255, 255, 255, 0.5);
    color: #1a1a2e;
    text-shadow: none;
  }
  
  .chip.ball-green {
    background: radial-gradient(circle at 30% 30%, #7dff8a, #2ecc71 60%, #1a8a4a 100%);
    border-color: rgba(46, 204, 113, 0.5);
  }
  
  .chip.ball-gold {
    background: radial-gradient(circle at 30% 30%, #ffed7d, #f1c40f 60%, #a68a00 100%);
    border-color: rgba(241, 196, 15, 0.5);
    color: #1a1a2e;
    text-shadow: none;
  }
  
  @keyframes slideIn {
    from {
      transform: translateX(-20px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* ===== SPIN BANNER ===== */
  .banner {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 204, 0, 0.45);
    background: rgba(255, 204, 0, 0.12);
    color: #ffe9a1;
    font-weight: 900;
    display: none;
    animation: bannerBounce 0.5s ease-out;
  }
  
  @keyframes bannerBounce {
    0% {
      transform: translateY(-10px);
      opacity: 0;
    }
    50% {
      transform: translateY(5px);
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  .banner.show {
    display: block;
  }
  
  /* ===== TEAM PILLS ===== */
  .teamPills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  
  /* ===== BINGO BOARD (75 numbers) ===== */
  .board {
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    gap: 8px;
  }
  
  .cell {
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 800;
    color: #d7daea;
    user-select: none;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  .cell:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(214, 178, 94, 0.4);
    transform: scale(1.08);
  }
  
  .cell.called:hover {
    background: radial-gradient(circle at 30% 30%, rgba(255, 100, 100, 0.65), rgba(255, 68, 68, 0.35));
    border-color: rgba(255, 68, 68, 0.6);
  }
  
  .cell.called {
    background: radial-gradient(circle at 30% 30%, rgba(246, 210, 122, 0.65), rgba(214, 178, 94, 0.25));
    border-color: rgba(214, 178, 94, 0.55);
    color: #14121a;
    box-shadow: 0 12px 28px rgba(214, 178, 94, 0.15);
    transform: translateY(-1px) scale(1.05);
    animation: popIn 0.4s ease-out;
  }
  
  @keyframes popIn {
    0% {
      transform: scale(0.8);
      opacity: 0;
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1.05);
    }
  }
  
  /* ===== ACTIVE RULES DISPLAY ===== */
  .activeRulesBox {
    margin-top: 12px;
    margin-bottom: 12px;
    border: 2px solid rgba(255, 170, 0, 0.4);
    background: linear-gradient(135deg, rgba(255, 170, 0, 0.15), rgba(255, 100, 0, 0.1));
    border-radius: 12px;
    padding: 12px;
    animation: activeRulesPulse 2s ease-in-out infinite;
  }
  
  @keyframes activeRulesPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 170, 0, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 170, 0, 0.4); }
  }
  
  .activeRulesHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 900;
    color: #ffaa00;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .activeRulesIcon {
    font-size: 16px;
    animation: iconFlash 1s ease-in-out infinite;
  }
  
  @keyframes iconFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  
  .activeRulesList {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .activeRule {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 7px;
    font-size: 13px;
    border-left: 3px solid;
  }
  
  .activeRule.red { border-left-color: #ff4444; }
  .activeRule.white { border-left-color: #f0f0f0; }
  .activeRule.blue { border-left-color: #4488ff; }
  .activeRule.all { border-left-color: #ffaa00; }
  
  .activeRule .ruleIcon {
    font-size: 16px;
  }
  
  .activeRule .ruleText {
    flex: 1;
    color: #e0e0e0;
  }
  
  .activeRule .ruleTeam {
    font-weight: 800;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
  }
  
  .activeRule .ruleTeam.red { background: rgba(255, 68, 68, 0.3); color: #ff6666; }
  .activeRule .ruleTeam.white { background: rgba(240, 240, 240, 0.3); color: #f0f0f0; }
  .activeRule .ruleTeam.blue { background: rgba(68, 136, 255, 0.3); color: #6699ff; }
  
  /* TV Active Rules Display */
  .tvActiveRules {
    margin-top: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 170, 0, 0.3);
    border-radius: 12px;
  }
  
  .tvActiveRulesHeader {
    font-size: 14px;
    font-weight: 800;
    color: #ffaa00;
    margin-bottom: 10px;
    text-align: center;
    letter-spacing: 1px;
  }
  
  .tvActiveRulesList {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
  }
  
  .tvActiveRule {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border-left: 3px solid #ffaa00;
  }
  
  .tvActiveRule.red { border-left-color: #ff4444; }
  .tvActiveRule.white { border-left-color: #f0f0f0; }
  .tvActiveRule.blue { border-left-color: #4488ff; }
  
  /* ===== PLAYER CARDS DISPLAY ===== */
  .cardsBox {
    margin-top: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 12px;
  }
  
  .cardsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  .cardsScroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
  }
  
  .cardsScroll::-webkit-scrollbar {
    width: 8px;
  }
  
  .cardsScroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
  
  .cardsScroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }
  
  .cardsScroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
  }
  
  .playerBlock {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 10px;
    margin-bottom: 10px;
  }
  
  .playerName {
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
  }
  
  .cardsRow {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  /* ===== BINGO CARD ===== */
  .bingoCard {
    width: 220px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(17, 18, 36, 0.55);
    overflow: hidden;
    transition: all 0.18s ease;
  }
  
  .bingoCard.hot {
    border-color: rgba(255, 204, 0, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.15), 0 16px 40px rgba(0, 0, 0, 0.35);
    animation: cardGlow 1.5s ease-in-out infinite;
  }
  
  @keyframes cardGlow {
    0%, 100% {
      box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.15), 0 16px 40px rgba(0, 0, 0, 0.35);
    }
    50% {
      box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.35), 0 20px 50px rgba(255, 204, 0, 0.2);
    }
  }
  
  .bingoCard.eliminated {
    opacity: 0.6;
    filter: grayscale(0.6);
    position: relative;
  }
  
  /* Hide the old pseudo-element overlay */
  .bingoCard.eliminated::after {
    display: none;
  }
  
  /* New eliminated overlay with restore button */
  .eliminatedOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    z-index: 10;
  }
  
  .eliminatedIcon {
    font-size: 32px;
  }
  
  .eliminatedText {
    font-size: 14px;
    font-weight: 900;
    color: #ff4444;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  
  .bingoCard.cry-wolf .eliminatedText {
    color: #d4a44a;
  }
  
  .restoreCardBtn {
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(68, 255, 136, 0.2);
    border: 1px solid rgba(68, 255, 136, 0.5);
    color: #44ff88;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .restoreCardBtn:hover {
    background: rgba(68, 255, 136, 0.4);
    transform: scale(1.05);
  }
  
  .bingoCard.eliminated.cry-wolf {
    filter: grayscale(0.3) sepia(0.3);
  }
  
  .bingoCard.eliminated.cry-wolf .eliminatedOverlay {
    background: rgba(60, 45, 30, 0.9);
  }
  
  .bingoCard.eliminated.cry-wolf .eliminatedText {
    color: #d4a44a;
  }
  
  .cardTop {
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    gap: 8px;
    font-size: 12px;
  }
  
  .cardTopRight {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .cardGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 10px;
  }
  
  .cardCell {
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #d7daea;
    user-select: none;
    font-size: 11px;
    transition: all 0.2s ease;
  }
  
  .cardCell.called {
    background: radial-gradient(circle at 30% 30%, rgba(246, 210, 122, 0.75), rgba(214, 178, 94, 0.22));
    border-color: rgba(214, 178, 94, 0.55);
    color: #14121a;
    transform: scale(1.05);
  }
  
  .cardCell.free {
    background: rgba(25, 195, 125, 0.1);
    border-color: rgba(25, 195, 125, 0.35);
    color: rgba(255, 255, 255, 0.9);
  }
  
  .cardCell.almost {
    border-color: rgba(255, 204, 0, 0.75);
    background: rgba(255, 204, 0, 0.1);
    color: rgba(255, 255, 255, 0.92);
    animation: pulse 1.5s ease-in-out infinite;
  }
  
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.08);
    }
  }
  
  .cardCell.eliminated {
    background: rgba(255, 77, 77, 0.15);
    border-color: rgba(255, 77, 77, 0.3);
    color: var(--bad);
    text-decoration: line-through;
    opacity: 0.5;
  }
  
  .cardCell.rewarded {
    background: radial-gradient(circle at 30% 30%, rgba(25, 195, 125, 0.5), rgba(25, 195, 125, 0.25));
    border-color: rgba(25, 195, 125, 0.6);
    color: #88ffcc;
  }
  
  /* ===== SMALL TAGS ===== */
  .smallTag {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    letter-spacing: 0.02em;
  }
  
  .smallTag.warn {
    border-color: rgba(255, 204, 0, 0.55);
    background: rgba(255, 204, 0, 0.12);
    color: #ffe9a1;
  }
  
  .smallTag.reward {
    border-color: rgba(25, 195, 125, 0.6);
    background: rgba(25, 195, 125, 0.15);
    color: #88ffcc;
    animation: rewardTagPulse 2s ease-in-out infinite;
  }
  
  @keyframes rewardTagPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(25, 195, 125, 0.3); }
    50% { box-shadow: 0 0 12px rgba(25, 195, 125, 0.6); }
  }
  
  .smallTag.red {
    border-color: rgba(255, 59, 59, 0.55);
    background: rgba(255, 59, 59, 0.12);
    color: #ffaaaa;
  }
  
  .smallTag.white {
    border-color: rgba(242, 242, 242, 0.4);
    background: rgba(242, 242, 242, 0.12);
  }
  
  .smallTag.blue {
    border-color: rgba(47, 123, 255, 0.55);
    background: rgba(47, 123, 255, 0.12);
    color: #aad4ff;
  }
  
  /* ===== CHOICE MODAL SYSTEM ===== */
  .choiceModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
  }
  
  .choiceModal.show {
    display: flex;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .choiceContent {
    background: linear-gradient(180deg, rgba(17, 18, 36, 0.95), rgba(7, 7, 11, 0.95));
    border: 2px solid var(--gold);
    border-radius: 24px;
    padding: 32px;
    max-width: 800px;
    width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 0 100px rgba(214, 178, 94, 0.4);
    animation: modalSlideIn 0.4s ease-out;
  }
  
  @keyframes modalSlideIn {
    from {
      transform: translateY(-50px) scale(0.9);
      opacity: 0;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
  
  .choiceTitle {
    font-size: 32px;
    font-weight: 950;
    text-align: center;
    margin: 0 0 12px 0;
    color: var(--gold2);
    text-shadow: 0 4px 20px rgba(214, 178, 94, 0.5);
  }
  
  .choiceDesc {
    text-align: center;
    color: var(--muted);
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 20px 0;
  }
  
  .choiceSubtitle {
    text-align: center;
    color: var(--white);
    font-weight: 800;
    font-size: 18px;
    margin: 16px 0;
  }
  
  /* Timer Display */
  .choiceTimer {
    text-align: center;
    padding: 16px;
    margin: 0 0 24px 0;
    border-radius: 16px;
    background: rgba(255, 204, 0, 0.1);
    border: 2px solid rgba(255, 204, 0, 0.3);
    font-weight: 800;
    font-size: 18px;
    color: #ffe9a1;
  }
  
  .timerNumber {
    font-size: 42px;
    font-weight: 950;
    display: inline-block;
    margin: 0 8px;
    color: var(--warn);
    animation: timerPulse 1s ease-in-out infinite;
  }
  
  .timerNumber.urgent {
    color: var(--bad);
    animation: timerUrgent 0.5s ease-in-out infinite;
  }
  
  @keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
  }
  
  @keyframes timerUrgent {
    0%, 100% { 
      transform: scale(1); 
      text-shadow: 0 0 20px rgba(255, 77, 77, 0.6);
    }
    50% { 
      transform: scale(1.2); 
      text-shadow: 0 0 40px rgba(255, 77, 77, 1);
    }
  }
  
  /* Choice Options Container */
  .choiceOptions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 20px;
  }
  
  .choiceError {
    text-align: center;
    padding: 20px;
    color: var(--bad);
    font-weight: 800;
    font-size: 18px;
  }
  
  /* Player Selection Button */
  .choicePlayerBtn {
    min-width: unset;
    padding: 20px;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: var(--white);
    font-weight: 900;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
  }
  
  .choicePlayerBtn:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--gold);
    background: rgba(214, 178, 94, 0.15);
    box-shadow: 0 10px 40px rgba(214, 178, 94, 0.3);
  }
  
  .choicePlayerBtn.danger {
    border-color: rgba(255, 77, 77, 0.4);
    background: rgba(255, 77, 77, 0.1);
  }
  
  .choicePlayerBtn.danger:hover {
    border-color: var(--bad);
    background: rgba(255, 77, 77, 0.2);
    box-shadow: 0 10px 40px rgba(255, 77, 77, 0.4);
  }
  
  .choicePlayerName {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 8px;
  }
  
  .choicePlayerCards {
    font-size: 14px;
    color: var(--muted);
    font-weight: 700;
  }
  
  /* Card Selection Button */
  .choiceCardBtn {
    min-width: unset;
    padding: 16px;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(17, 18, 36, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .choiceCardBtn:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--gold);
    box-shadow: 0 10px 40px rgba(214, 178, 94, 0.3);
  }
  
  .choiceCardBtn.danger:hover {
    border-color: var(--bad);
    box-shadow: 0 10px 40px rgba(255, 77, 77, 0.4);
}

.choiceCardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 900;
}

.choiceCardPreview {
  margin-top: 8px;
}

/* Mini Card Grid */
.miniCardGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.miniCell {
  height: 20px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 900;
}

.miniCell.called {
  background: radial-gradient(circle at 30% 30%, rgba(246, 210, 122, 0.7), rgba(214, 178, 94, 0.3));
  border-color: rgba(214, 178, 94, 0.6);
  color: #14121a;
}

/* Back Button */
.choiceBackBtn {
  grid-column: 1 / -1;
  margin-bottom: 16px;
}

/* ===== DUEL WHEEL MODAL ===== */
.duelModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.duelModal.show {
  display: flex;
}

.duelContent {
  background: linear-gradient(180deg, rgba(17, 18, 36, 0.95), rgba(7, 7, 11, 0.95));
  border: 3px solid var(--gold);
  border-radius: 24px;
  padding: 40px;
  max-width: 700px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 0 120px rgba(214, 178, 94, 0.5);
  animation: modalSlideIn 0.4s ease-out;
  text-align: center;
}

.duelTitle {
  font-size: 48px;
  font-weight: 950;
  margin: 0 0 16px 0;
  color: var(--gold2);
  text-shadow: 0 4px 30px rgba(214, 178, 94, 0.6);
  letter-spacing: 2px;
}

.duelSubtitle {
  font-size: 18px;
  font-weight: 800;
  color: var(--muted);
  margin: 0 0 32px 0;
}

.duelContestants h3 {
  font-size: 16px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.contestantsList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.contestant {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.contestant.highlighted {
  border-color: var(--gold);
  background: rgba(214, 178, 94, 0.15);
  box-shadow: 0 0 30px rgba(214, 178, 94, 0.3);
  transform: scale(1.02);
}

.contestant.winner {
  border-color: var(--ok);
  background: rgba(25, 195, 125, 0.2);
  box-shadow: 0 0 40px rgba(25, 195, 125, 0.5);
  transform: scale(1.05);
  animation: winnerPulse 1s ease-in-out infinite;
}

@keyframes winnerPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(25, 195, 125, 0.5); }
  50% { box-shadow: 0 0 60px rgba(25, 195, 125, 0.8); }
}

.contestant.loser {
  opacity: 0.3;
  border-color: rgba(255, 77, 77, 0.3);
}

.contestantNumber {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold2), var(--gold));
  color: #14121a;
  font-weight: 950;
  font-size: 24px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.contestantInfo {
  flex: 1;
  text-align: left;
}

.contestantName {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 4px;
}

.contestantCard {
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
}

.duelSpinBtn {
  margin: 24px auto;
  font-size: 18px;
  padding: 18px 36px;
  min-width: 300px;
}

.duelResult {
  margin-top: 24px;
}

.duelWinnerAnnouncement {
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(25, 195, 125, 0.2), rgba(25, 195, 125, 0.1));
  border: 2px solid var(--ok);
  box-shadow: 0 0 50px rgba(25, 195, 125, 0.3);
}

.duelWinnerAnnouncement h2 {
  font-size: 36px;
  font-weight: 950;
  color: var(--ok);
  margin: 0 0 16px 0;
  text-shadow: 0 2px 20px rgba(25, 195, 125, 0.6);
}

.duelWinnerName {
  font-size: 42px;
  font-weight: 950;
  color: var(--gold2);
  margin-bottom: 8px;
}

.duelWinnerDetails {
  font-size: 16px;
  color: var(--muted);
  font-weight: 800;
}

.duelCloseBtn {
  margin-top: 20px;
  font-size: 16px;
  padding: 14px 28px;
}

/* ===== CUSTOM GAME MODALS ===== */
.gameModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9500;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

.gameModal.show {
  display: flex;
}

.gameModalContent {
  background: linear-gradient(180deg, rgba(17, 18, 36, 0.98), rgba(7, 7, 11, 0.98));
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 32px;
  max-width: 420px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 0 60px rgba(214, 178, 94, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

.gameModalIcon {
  font-size: 48px;
  margin-bottom: 16px;
}

.gameModalMessage {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 24px;
  line-height: 1.5;
}

.gameModalTitle {
  font-size: 28px;
  font-weight: 950;
  color: var(--gold);
  margin-bottom: 16px;
}

.gameModalButtons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.gameModalBtn {
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 12px;
  min-width: 120px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gameModalBtn.cancel {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--muted);
}

.gameModalBtn.cancel:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.gameModalBtn.confirm {
  background: rgba(25, 195, 125, 0.2);
  border: 2px solid rgba(25, 195, 125, 0.4);
  color: #88ffcc;
}

.gameModalBtn.confirm:hover {
  background: rgba(25, 195, 125, 0.3);
  border-color: rgba(25, 195, 125, 0.6);
}

/* Spin Result Modal */
.spinContent {
  padding: 40px;
}

.spinContent.red {
  border-color: var(--red);
  box-shadow: 0 0 60px rgba(255, 59, 59, 0.4);
}

.spinContent.white {
  border-color: var(--white);
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.3);
}

.spinContent.blue {
  border-color: var(--blue);
  box-shadow: 0 0 60px rgba(47, 123, 255, 0.4);
}

.spinIcon {
  font-size: 64px;
  margin-bottom: 16px;
  animation: spinPulse 0.5s ease-out;
}

@keyframes spinPulse {
  0% { transform: scale(0.5) rotate(-180deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.spinTitle {
  font-size: 24px;
  font-weight: 900;
  color: var(--muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.spinResult {
  font-size: 42px;
  font-weight: 950;
  margin-bottom: 16px;
  animation: resultBounce 0.4s ease-out 0.2s both;
}

.spinResult.red { color: #ff6666; }
.spinResult.white { color: #ffffff; }
.spinResult.blue { color: #66aaff; }

@keyframes resultBounce {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.spinHint {
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
}

/* Reveal Board Modal */
.revealContent {
  max-width: 500px;
}

.revealInfo {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.revealLabel {
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.revealNumbers {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.6;
  word-wrap: break-word;
}

/* Reveal Board 75-Number Grid */
.revealContent {
  max-width: 600px;
}

.revealStats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 800;
}

.statCalled {
  color: var(--gold);
}

.statUncalled {
  color: var(--muted);
}

.revealBoardGrid {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 4px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}

.revealCell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
}

.revealCell.called {
  background: radial-gradient(circle at 30% 30%, rgba(246, 210, 122, 0.8), rgba(214, 178, 94, 0.5));
  border-color: rgba(214, 178, 94, 0.6);
  color: #14121a;
}

.revealLegend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.revealLegend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legendDot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.legendDot.called {
  background: radial-gradient(circle at 30% 30%, rgba(246, 210, 122, 0.8), rgba(214, 178, 94, 0.5));
  border-color: rgba(214, 178, 94, 0.6);
}

/* Choice Player Section */
.choicePlayerSection {
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
}

.choicePlayerLabel {
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 12px;
  text-transform: uppercase;
}


/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .energyOrb,
  .lightningBolt,
  .taglineIcon,
  .teamDot,
  .badgeGlow,
  .landingLogoImg {
    animation: none !important;
  }
}


/* Landing buttons: allow full width on small screens */
@media (max-width: 640px) {
  .epicBtn { max-width: none; }
}

/* ==========================================
   HOST LOGIN SCREEN STYLES
   ========================================== */

.loginBg {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0d0d15 100%);
  z-index: -1;
}

.loginCard {
  background: linear-gradient(145deg, rgba(30, 30, 50, 0.95), rgba(20, 20, 35, 0.98));
  border: 1px solid rgba(214, 178, 94, 0.3);
  border-radius: 20px;
  padding: 40px;
  max-width: 420px;
  width: 90%;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(214, 178, 94, 0.1);
}

.loginLogo {
  text-align: center;
  margin-bottom: 20px;
}

.loginLogoImg {
  max-width: 150px;
  height: auto;
}

.loginTitle {
  text-align: center;
  font-size: 1.8rem;
  color: #d6b25e;
  margin-bottom: 8px;
}

.loginSub {
  text-align: center;
  color: #888;
  font-size: 0.95rem;
  margin-bottom: 30px;
}

.loginForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.loginField {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.loginField label {
  color: #aaa;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.loginInput {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 1rem;
  color: #fff;
  transition: all 0.3s ease;
}

.loginInput:focus {
  outline: none;
  border-color: #d6b25e;
  box-shadow: 0 0 15px rgba(214, 178, 94, 0.2);
}

.loginInput::placeholder {
  color: #555;
}

.loginError {
  display: none;
  background: rgba(220, 53, 69, 0.2);
  border: 1px solid rgba(220, 53, 69, 0.5);
  color: #ff6b7a;
  padding: 12px;
  border-radius: 7px;
  font-size: 0.9rem;
  text-align: center;
}

.loginBtn {
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  width: 100%;
}

.loginBtn.primary {
  background: linear-gradient(135deg, #d6b25e, #c9a227) !important;
  color: #000 !important;
  box-shadow: 0 4px 20px rgba(214, 178, 94, 0.4);
}

.loginBtn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(214, 178, 94, 0.6);
}

.loginBtn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.loginBtn.secondary {
  background: rgba(80, 80, 80, 0.3) !important;
  border: 1px solid rgba(150, 150, 150, 0.3) !important;
  color: #888 !important;
}

.loginBtn.secondary:hover {
  background: rgba(80, 80, 80, 0.4) !important;
}

.loginBtn.secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.loginBtn.secondary.disabled-permanent {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(80, 80, 80, 0.3) !important;
  border-color: rgba(150, 150, 150, 0.3) !important;
  color: #888 !important;
}

/* Coming Soon Banner */
.comingSoonBanner {
  background: rgba(214, 178, 94, 0.08);
  border: 1px solid rgba(214, 178, 94, 0.25);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  text-align: center;
}

.comingSoonTitle {
  font-size: 1.1rem;
  font-weight: 700;
  color: #d6b25e;
  margin-bottom: 8px;
}

.comingSoonText {
  font-size: 0.85rem;
  color: #a0a0a0;
  line-height: 1.5;
}

.comingSoonText a {
  color: #d6b25e;
  text-decoration: underline;
}

.comingSoonText a:hover {
  color: #e8c96a;
}

.loginBack {
  text-align: center;
  margin-top: 24px;
}

.loginBack a {
  color: #888;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.loginBack a:hover {
  color: #d6b25e;
}

.loginFooter {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.loginFooter p {
  color: #666;
  font-size: 0.85rem;
}

.loginFooter a {
  color: #d6b25e;
  text-decoration: none;
}

.loginFooter a:hover {
  text-decoration: underline;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .loginCard {
    padding: 30px 20px;
  }
  
  .loginTitle {
    font-size: 1.5rem;
  }
}

/* ==========================================
   HOST HEADER - LOGOUT BUTTON
   ========================================== */

.headerRight {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hostInfo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hostEmail {
  color: #888;
  font-size: 0.85rem;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini.logout {
  background: rgba(220, 53, 69, 0.2);
  border-color: rgba(220, 53, 69, 0.5);
  color: #ff6b7a;
}

.mini.logout:hover {
  background: rgba(220, 53, 69, 0.3);
  border-color: rgba(220, 53, 69, 0.8);
}

@media (max-width: 768px) {
  .headerRight {
    flex-direction: column;
    gap: 8px;
  }
  
  .hostEmail {
    display: none;
  }
}



/* =========================================================
   TV DISPLAY (Big Screen Companion) - #display/ROOMCODE
   ========================================================= */

.tvShowBtn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(214, 178, 94, 0.35);
  background: linear-gradient(135deg, rgba(214, 178, 94, 0.18), rgba(47, 123, 255, 0.12));
  color: #f2ead1;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.tvShowBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 178, 94, 0.6);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}

.tvShowBtn:active {
  transform: translateY(0px);
}

#screenTVDisplay {
  overflow: hidden;
}

#screenTVDisplay .tvMain {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 22px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

#screenTVDisplay .tvLayout {
  width: min(1600px, 96vw);
  display: grid;
  grid-template-columns: minmax(280px, 320px) 1fr;
  gap: 18px;
  align-items: start;
}

#screenTVDisplay .tvLeft,
#screenTVDisplay .tvRight {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(7, 7, 11, 0.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 60px rgba(0,0,0,0.55);
}

#screenTVDisplay .tvLeft {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#screenTVDisplay .tvLogoWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Give the logo more breathing room on large TVs and avoid any clipping */
  padding: 14px 12px;
  max-height: none;
  overflow: visible;
}

#screenTVDisplay .tvLogoImg {
  /* Keep aspect ratio and avoid distortion when the whole TV layout is scaled */
  width: 100%;
  max-width: 260px;
  max-height: 150px;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.55));
}

#screenTVDisplay .tvRoomRow {
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
  text-align: center;
}

#screenTVDisplay .tvRoomLabel {
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.65);
  font-weight: 800;
}

#screenTVDisplay .tvRoomCode {
  margin-top: 6px;
  font-size: 40px;
  letter-spacing: 6px;
  font-weight: 900;
  color: #d6b25e;
  text-shadow: 0 10px 24px rgba(214,178,94,0.25);
}

#screenTVDisplay .tvQRPanel {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#screenTVDisplay .tvJoinQR {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}

#screenTVDisplay .tvJoinHint {
  color: rgba(255,255,255,0.8);
  font-weight: 700;
}

#screenTVDisplay .tvJoinUrl {
  max-width: 100%;
  word-break: break-all;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.06);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}

#screenTVDisplay .tvMiniTips {
  display: grid;
  gap: 8px;
  padding: 6px 4px 2px;
}

#screenTVDisplay .tvTip {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  font-weight: 700;
}

#screenTVDisplay .tvRight {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#screenTVDisplay .tvBallHeader {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

#screenTVDisplay .tvCurrentBall {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.2);
  background: radial-gradient(circle at 30% 25%, rgba(80,80,80,0.8), rgba(40,40,40,0.9));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 60px rgba(0,0,0,0.6);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* TV Ball colors based on BINGO letter */
#screenTVDisplay .tvCurrentBall.ball-blue {
  background: radial-gradient(circle at 30% 25%, #6eb5ff, #1e90ff 40%, #0052a3 100%);
  border-color: rgba(30, 144, 255, 0.6);
  box-shadow: 0 16px 60px rgba(30, 144, 255, 0.4);
}

#screenTVDisplay .tvCurrentBall.ball-red {
  background: radial-gradient(circle at 30% 25%, #ff7b7b, #e63946 40%, #8b0000 100%);
  border-color: rgba(230, 57, 70, 0.6);
  box-shadow: 0 16px 60px rgba(230, 57, 70, 0.4);
}

#screenTVDisplay .tvCurrentBall.ball-white {
  background: radial-gradient(circle at 30% 25%, #ffffff, #e0e0e0 40%, #a0a0a0 100%);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 16px 60px rgba(255, 255, 255, 0.2);
}

#screenTVDisplay .tvCurrentBall.ball-white .tvBallLetter,
#screenTVDisplay .tvCurrentBall.ball-white .tvBallNumber {
  color: #1a1a2e;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

#screenTVDisplay .tvCurrentBall.ball-green {
  background: radial-gradient(circle at 30% 25%, #7dff8a, #2ecc71 40%, #1a8a4a 100%);
  border-color: rgba(46, 204, 113, 0.6);
  box-shadow: 0 16px 60px rgba(46, 204, 113, 0.4);
}

#screenTVDisplay .tvCurrentBall.ball-gold {
  background: radial-gradient(circle at 30% 25%, #ffed7d, #f1c40f 40%, #a68a00 100%);
  border-color: rgba(241, 196, 15, 0.6);
  box-shadow: 0 16px 60px rgba(241, 196, 15, 0.4);
}

#screenTVDisplay .tvCurrentBall.ball-gold .tvBallLetter,
#screenTVDisplay .tvCurrentBall.ball-gold .tvBallNumber {
  color: #1a1a2e;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

#screenTVDisplay .tvBallLetter {
  font-size: 44px;
  font-weight: 900;
  color: rgba(255,255,255,0.9);
  line-height: 1;
}

#screenTVDisplay .tvBallNumber {
  font-size: 64px;
  font-weight: 1000;
  color: #ffffff;
  line-height: 1;
}

#screenTVDisplay .tvLastCallsWrap {
  flex: 1;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
  min-height: 96px;
}

#screenTVDisplay .tvLastLabel {
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.65);
  font-weight: 800;
  margin-bottom: 10px;
}

#screenTVDisplay .tvLastCalls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

#screenTVDisplay .tvLastChip {
  min-width: 64px;
  padding: 10px 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  background: rgba(60,60,60,0.8);
  text-align: center;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  font-size: 16px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Last chip ball colors */
#screenTVDisplay .tvLastChip.ball-blue {
  background: radial-gradient(circle at 30% 30%, #6eb5ff, #1e90ff 50%, #0052a3 100%);
  border-color: rgba(30, 144, 255, 0.5);
}

#screenTVDisplay .tvLastChip.ball-red {
  background: radial-gradient(circle at 30% 30%, #ff7b7b, #e63946 50%, #8b0000 100%);
  border-color: rgba(230, 57, 70, 0.5);
}

#screenTVDisplay .tvLastChip.ball-white {
  background: radial-gradient(circle at 30% 30%, #ffffff, #e0e0e0 50%, #a0a0a0 100%);
  border-color: rgba(255, 255, 255, 0.5);
  color: #1a1a2e;
}

#screenTVDisplay .tvLastChip.ball-green {
  background: radial-gradient(circle at 30% 30%, #7dff8a, #2ecc71 50%, #1a8a4a 100%);
  border-color: rgba(46, 204, 113, 0.5);
}

#screenTVDisplay .tvLastChip.ball-gold {
  background: radial-gradient(circle at 30% 30%, #ffed7d, #f1c40f 50%, #a68a00 100%);
  border-color: rgba(241, 196, 15, 0.5);
  color: #1a1a2e;
}

#screenTVDisplay .tvMetaLine {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.9);
  font-weight: 800;
  letter-spacing: 0.4px;
}

#screenTVDisplay .tvWinnerBanner {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(214,178,94,0.25);
  background: linear-gradient(135deg, rgba(214,178,94,0.14), rgba(255,255,255,0.05));
  color: #f7f1dd;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-align: center;
}

#screenTVDisplay .tvCalledBoard {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: start;
}

#screenTVDisplay .tvCol {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22);
  overflow: hidden;
}

#screenTVDisplay .tvColHeader {
  padding: 10px 12px;
  font-weight: 1000;
  letter-spacing: 6px;
  text-align: center;
  font-size: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.06);
}

#screenTVDisplay .tvColCells {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

#screenTVDisplay .tvNum {
  padding: 10px 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  text-align: center;
  font-weight: 900;
  color: rgba(255,255,255,0.9);
  font-size: 18px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

#screenTVDisplay .tvNum.called {
  background: rgba(47, 123, 255, 0.18);
  border-color: rgba(47, 123, 255, 0.35);
}

#screenTVDisplay .tvNum.current {
  background: rgba(214, 178, 94, 0.22);
  border-color: rgba(214, 178, 94, 0.6);
  box-shadow: 0 12px 28px rgba(214,178,94,0.15);
  transform: translateY(-1px);
}

#screenTVDisplay .tvOverlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  transition: opacity 220ms ease;
}

#screenTVDisplay .tvOverlay.hidden {
  opacity: 0;
  pointer-events: none;
}

#screenTVDisplay .tvOverlayCard {
  width: min(900px, 92vw);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(7, 7, 11, 0.78);
  box-shadow: 0 24px 120px rgba(0,0,0,0.75);
  padding: 22px;
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

#screenTVDisplay .tvOverlayLogo {
  width: auto;
  max-width: min(520px, 76vw);
  height: auto;
  max-height: 30vh;
  object-fit: contain;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,0.7));
}

#screenTVDisplay .tvOverlayTitle {
  font-weight: 1000;
  letter-spacing: 4px;
  font-size: 22px;
  color: rgba(255,255,255,0.9);
}

#screenTVDisplay .tvOverlayRoom {
  font-weight: 1000;
  font-size: 20px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.85);
}

#screenTVDisplay .tvOverlayRoom span {
  color: #d6b25e;
  letter-spacing: 6px;
  margin-left: 6px;
}

#screenTVDisplay .tvOverlayQR {
  width: min(460px, 78vw);
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 70px rgba(0,0,0,0.65);
}

/* ===== TV DISPLAY - RESPONSIVE / FIT FIXES ===== */
/* Prevent the Join overlay from being clipped in smaller popup windows */
#screenTVDisplay .tvOverlayCard {
  max-height: calc(100vh - 44px);
}

/* Make logo + QR shrink to fit shorter viewports */
#screenTVDisplay .tvOverlayLogo {
  max-height: 28vh;
  width: auto;
  object-fit: contain;
}

#screenTVDisplay .tvOverlayQR {
  max-height: 44vh;
  width: auto;
  object-fit: contain;
}

/* Keep the left logo from getting too tall on short windows */
#screenTVDisplay .tvLogoImg {
  max-height: 22vh;
}

/* Short-height tuning (common when TV Display is in a smaller pop-up) */
@media (max-height: 760px) {
  #screenTVDisplay .tvMain {
    padding: 14px;
  }
  #screenTVDisplay .tvOverlayCard {
    padding: 14px;
    gap: 10px;
  }
  #screenTVDisplay .tvOverlayTitle {
    font-size: 18px;
    letter-spacing: 3px;
  }
  #screenTVDisplay .tvOverlayStatus {
    font-size: 15px;
  }
  #screenTVDisplay .tvRoomCode {
    font-size: 34px;
  }
  #screenTVDisplay .tvJoinQR {
    max-width: 240px;
  }
}


#screenTVDisplay .tvOverlayStatus {
  color: rgba(255,255,255,0.85);
  font-weight: 800;
  font-size: 18px;
}

#screenTVDisplay .tvOverlayWinner {
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(214,178,94,0.25);
  background: linear-gradient(135deg, rgba(214,178,94,0.16), rgba(255,255,255,0.06));
  color: #f7f1dd;
  font-weight: 1000;
  font-size: 22px;
}

/* Small screens: stack columns with board first */
@media (max-width: 980px) {
  #screenTVDisplay .tvLayout {
    grid-template-columns: 1fr;
  }
  #screenTVDisplay .tvRight {
    order: -1; /* Board appears first */
  }
  #screenTVDisplay .tvLeft {
    order: 1; /* Logo/QR appears second */
    max-height: 300px;
    overflow: hidden;
  }
  #screenTVDisplay .tvCurrentBall {
    width: 140px;
    height: 140px;
  }
}

/* When window is narrow but tall (like a portrait monitor), prioritize board */
@media (max-width: 1100px) and (min-height: 600px) {
  #screenTVDisplay .tvLayout {
    grid-template-columns: minmax(200px, 260px) 1fr;
  }
  #screenTVDisplay .tvLogoImg {
    max-width: 200px;
    max-height: 120px;
  }
  #screenTVDisplay .tvQRPanel {
    padding: 10px;
  }
  #screenTVDisplay .tvJoinQR {
    max-width: 180px;
  }
}

/* ==========================================
   THEME SELECTOR STYLES
   ========================================== */

.themeSelector {
  position: relative;
}

.themeSelector select {
  padding-right: 50px;
}

.themePreview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 15px;
  background: var(--gradient-card, linear-gradient(145deg, rgba(30, 30, 50, 0.95), rgba(20, 20, 35, 0.98)));
  border: 1px solid var(--color-primary, #d6b25e);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.themePreviewIcon {
  font-size: 24px;
  animation: themeIconPulse 2s ease-in-out infinite;
}

@keyframes themeIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.themePreviewName {
  font-family: var(--font-heading, 'Russo One', sans-serif);
  font-size: 16px;
  color: var(--color-primary, #d6b25e);
}

/* ==========================================
   THEME-AWARE GLOBAL STYLES
   ========================================== */

body {
  background: var(--gradient-background, radial-gradient(ellipse at center, #1a1a2e 0%, #0d0d15 100%));
  color: var(--color-text-primary, #ffffff);
  font-family: var(--font-body, 'Segoe UI', sans-serif);
}

/* Apply theme primary color to key elements */
.epicTitle, .landingLogoImg, .arenaGradient {
  color: var(--color-primary, #d6b25e);
}

.panel, .loginCard, .joinCard {
  background: var(--gradient-card, linear-gradient(145deg, rgba(30, 30, 50, 0.95), rgba(20, 20, 35, 0.98)));
  border: var(--border-card, 1px solid rgba(214, 178, 94, 0.3));
}

/* Buttons */
button.ok, .loginBtn.primary, .joinBtn.primary {
  background: var(--gradient-primary, linear-gradient(135deg, #d6b25e, #b8962f));
  box-shadow: var(--shadow-button, 0 4px 20px rgba(214, 178, 94, 0.4));
}

button.ok:hover, .loginBtn.primary:hover, .joinBtn.primary:hover {
  box-shadow: 0 6px 30px var(--effect-glow, rgba(214, 178, 94, 0.6));
}

/* Code display */
.codeBig {
  color: var(--color-primary, #d6b25e);
  text-shadow: 0 0 20px var(--effect-glow, rgba(214, 178, 94, 0.4));
}

/* Status messages */
.status {
  color: var(--color-text-secondary, #b0b0b0);
}

/* Selection highlights */
::selection {
  background: var(--color-primary, #d6b25e);
  color: var(--color-bg-primary, #0d0d15);
}

/* Scrollbar theming */
::-webkit-scrollbar-thumb {
  background: var(--color-primary, #d6b25e);
}

::-webkit-scrollbar-track {
  background: var(--color-bg-secondary, #1a1a2e);
}

/* Team color overrides for themes */
.red-border, .teamBadge.red {
  border-color: var(--color-team-red, #ff4444);
  background: var(--color-team-red, #ff4444);
}

.white-border, .teamBadge.white {
  border-color: var(--color-team-white, #f0f0f0);
  background: var(--color-team-white, #f0f0f0);
  color: #333;
}

.blue-border, .teamBadge.blue {
  border-color: var(--color-team-blue, #4488ff);
  background: var(--color-team-blue, #4488ff);
}

/* Ball colors based on theme */
.ballCircle[data-letter="B"], .bingoLetter.B {
  background: var(--ball-B, #3366ff);
}

.ballCircle[data-letter="I"], .bingoLetter.I {
  background: var(--ball-I, #ff4444);
}

.ballCircle[data-letter="N"], .bingoLetter.N {
  background: var(--ball-N, #d6b25e);
}

.ballCircle[data-letter="G"], .bingoLetter.G {
  background: var(--ball-G, #44bb44);
}

.ballCircle[data-letter="O"], .bingoLetter.O {
  background: var(--ball-O, #ff8844);
}

/* Wheel theming */
.wheelBorder, .wheel-border {
  border-color: var(--wheel-border, #d6b25e);
}

.wheelCenter, .wheel-center {
  background: var(--wheel-center, #1a1a2e);
}

.wheelPointer, .wheel-pointer {
  border-top-color: var(--wheel-pointer, #d6b25e);
}

/* Theme-specific body classes */
body.theme-halloween {
  --ambient-color: rgba(255, 136, 0, 0.05);
}

body.theme-christmas {
  --ambient-color: rgba(204, 0, 0, 0.05);
}

body.theme-summer {
  --ambient-color: rgba(0, 204, 204, 0.05);
}

body.theme-neonRave {
  --ambient-color: rgba(255, 0, 255, 0.05);
}

body.theme-casino {
  --ambient-color: rgba(255, 215, 0, 0.05);
}

/* Ambient glow effect for themes */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--ambient-color, transparent);
  pointer-events: none;
  z-index: -1;
}

/* Glowing elements */
.glow, [data-glow] {
  box-shadow: var(--shadow-glow, 0 0 30px rgba(214, 178, 94, 0.4));
}


/* ===== NETWORK STATUS BANNER ===== */
.networkBanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 20px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  z-index: 100000;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.networkBanner.success {
  background: linear-gradient(90deg, #28a745, #20c997);
  color: white;
}

.networkBanner.warning {
  background: linear-gradient(90deg, #ffc107, #fd7e14);
  color: #333;
}

.networkBanner.error {
  background: linear-gradient(90deg, #dc3545, #c82333);
  color: white;
}

/* ===== ACCESSIBILITY - SCREEN READER ONLY ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== REDUCED MOTION PREFERENCES ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ===== FOCUS STYLES FOR KEYBOARD NAVIGATION ===== */
.cell:focus,
.cardCell:focus,
.targetCard:focus,
.epicBtn:focus,
button:focus {
  outline: 3px solid #ffaa00;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .cell, .cardCell {
    border-width: 2px;
  }
  
  .cell.called, .cardCell.called {
    border-color: #000;
    background: #ffcc00;
  }
}

/* ===== SOUND TOGGLE ===== */
.soundToggleRow {
  position: absolute;
  top: 10px;
  right: 10px;
}

.soundToggle {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: all 0.2s ease;
}

.soundToggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.soundToggle.muted {
  opacity: 0.6;
}

.panel {
  position: relative;
}

/* ===== TV Display Fullscreen ===== */
.tvFullscreenBtn{
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 20001;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.tvFullscreenBtn:hover{
  background: rgba(0,0,0,0.65);
}

:fullscreen #screenTVDisplay,
:-webkit-full-screen #screenTVDisplay,
:-moz-full-screen #screenTVDisplay,
:-ms-fullscreen #screenTVDisplay{
  width: 100vw;
  height: 100vh;
}

:fullscreen #screenTVDisplay .tvLayout,
:-webkit-full-screen #screenTVDisplay .tvLayout,
:-moz-full-screen #screenTVDisplay .tvLayout,
:-ms-fullscreen #screenTVDisplay .tvLayout{
  max-width: none;
  width: 100%;
}

/* ===== TV Display Auto-Scale (Big Screens / Projectors) ===== */
/* These are safe, TV-only improvements: they do not affect gameplay logic. */

:root {
  /* Default for non-TV windows */
  --bbr-tv-scale: 1;
}

#screenTVDisplay {
  /* Local scale for the TV UI layout */
  --tv-ui-scale: 1;
}

/* Scale the whole TV layout to better fill large displays */
#screenTVDisplay .tvLayout {
  transform: scale(var(--tv-ui-scale));
  transform-origin: top center;
}

/* Scale the pre/post-game QR overlay card too */
#screenTVDisplay .tvOverlayCard {
  transform: scale(var(--tv-ui-scale));
  transform-origin: center;
}

/* In fullscreen we keep the layout width "designed" and let auto-scale do the sizing */
:fullscreen #screenTVDisplay .tvLayout,
:-webkit-full-screen #screenTVDisplay .tvLayout,
:-moz-full-screen #screenTVDisplay .tvLayout,
:-ms-fullscreen #screenTVDisplay .tvLayout{
  width: min(1600px, 96vw);
}

/* Scale the big overlay animations (wheel spins, victory, spin moment, ball call) in the TV window */
body.bbr-tv-mode .wheelContainer,
body.bbr-tv-mode .victory-content,
body.bbr-tv-mode .spin-moment-content,
body.bbr-tv-mode .ball-call-container {
  transform: scale(var(--bbr-tv-scale));
  transform-origin: center;
}