/* ═══════════════════════════════════════════════════
   PLUSFOUR MATE — Premium Casino Table Design System
   Warm emerald, gold, charcoal palette
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Core Palette ── */
  --felt:        #0B3B24;
  --felt-dark:   #062414;
  --felt-light:  #104A2F;
  --charcoal:    #1A110A;
  --charcoal-2:  #241910;
  --charcoal-3:  #36261A;
  --surface:     #1E1611;
  --surface-2:   #2A2018;

  --gold:        #D4AF37;
  --gold-dim:    #AA8A2A;
  --gold-bright: #F9E076;

  --ivory:       #F9F6EE;
  --ivory-dim:   #D1CBB8;
  --ivory-muted: #A19B8A;

  --crimson:     #8B0000;
  --crimson-bg:  #6A0000;
  --sapphire:    #0F52BA;
  --sapphire-bg: #0A3A8A;
  --forest:      #228B22;
  --forest-bg:   #1A661A;
  --amber:       #FFBF00;
  --amber-bg:    #CC9900;

  --danger:      #E34234;
  --success:     #50C878;

  /* ── Typography ── */
  --font-heading: 'Cinzel', Georgia, serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  /* ── Spacing ── */
  --s1: 4px;   --s2: 8px;   --s3: 12px;
  --s4: 16px;  --s5: 24px;  --s6: 32px;
  --s7: 48px;  --s8: 64px;

  /* ── Radius ── */
  --r1: 6px;  --r2: 10px;  --r3: 14px;
  --r4: 20px; --r-full: 999px;

  /* ── Motion ── */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
}

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family: var(--font-body);
  background: var(--charcoal);
  color: var(--ivory);
  -webkit-font-smoothing: antialiased;
}
::selection{background:var(--gold);color:var(--charcoal)}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--charcoal-3);border-radius:3px}

/* ═══════════════════════════════════════════════════
   FELT BACKGROUND — rich table texture via CSS
   ═══════════════════════════════════════════════════ */
.felt-bg{
  background-color: var(--felt);
  background-image: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 40%, transparent 20%, rgba(0,0,0,0.6) 120%);
}

/* ═══════════════════════════════════════════════════
   SCREEN MANAGEMENT
   ═══════════════════════════════════════════════════ */
.screen{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  z-index:1;
  opacity:0;visibility:hidden;
  transition: opacity var(--dur-slow), visibility var(--dur-slow);
}
.screen.active{opacity:1;visibility:visible}

/* ═══════════════════════════════════════════════════
   PANELS — solid surfaces with depth, NOT glass
   ═══════════════════════════════════════════════════ */
.panel{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r3);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 4px 24px rgba(0,0,0,.4);
}
.panel-felt{
  background:
    linear-gradient(135deg, var(--felt) 0%, var(--felt-dark) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r3);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 6px 32px rgba(0,0,0,.5);
}

/* ═══════════════════════════════════════════════════
   BUTTONS — solid, refined, no glow
   ═══════════════════════════════════════════════════ */
.btn{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .02em;
  padding: 11px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-fast);
  user-select: none;
  position: relative;
}
.btn:active{transform:translateY(0) scale(.97)}

.btn-primary{
  background: var(--gold);
  color: var(--charcoal);
  border-color: var(--gold-dim);
  box-shadow: 0 2px 8px rgba(0,0,0,.3),
              0 1px 0 var(--gold-bright) inset;
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.4),
              0 1px 0 var(--gold-bright) inset;
  background: var(--gold-bright);
}
.btn-primary:disabled{
  background: var(--charcoal-3);
  color: var(--ivory-muted);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary{
  background: var(--surface-2);
  color: var(--ivory);
  border-color: rgba(255,255,255,.1);
}
.btn-secondary:hover{
  background: var(--charcoal-3);
  border-color: rgba(255,255,255,.15);
  transform: translateY(-1px);
}

.btn-ghost{
  background: transparent;
  color: var(--ivory-muted);
  font-size: .85rem;
  padding: 8px 16px;
}
.btn-ghost:hover{color:var(--ivory);background:rgba(255,255,255,.04)}

.btn-large{font-size:1.05rem;padding:14px 36px}

.btn-small{
  font-size:.8rem;padding:7px 14px;
  background:var(--surface-2);color:var(--ivory-dim);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r1);
}
.btn-small:hover{border-color:rgba(255,255,255,.15);color:var(--ivory)}

.btn-icon{
  width:36px;height:36px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);
  border:1px solid rgba(255,255,255,.08);
  color:var(--ivory-dim);
  cursor:pointer;
  transition:all var(--dur-fast);
  flex-shrink:0;
  padding:0;
}
.btn-icon:hover{background:var(--charcoal-3);color:var(--ivory)}
.btn-icon.active{background:var(--gold);color:var(--charcoal);border-color:var(--gold-dim)}
.btn-icon svg{width:16px;height:16px}

/* ═══════════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════════ */
.input-group{display:flex;flex-direction:column;gap:var(--s1)}
.input-group label{
  font-family:var(--font-body);
  font-size:.75rem;font-weight:500;
  color:var(--ivory-muted);
  text-transform:uppercase;letter-spacing:.08em;
}

input[type="text"]{
  font-family:var(--font-body);
  font-size:.95rem;
  padding:11px 14px;
  background:var(--charcoal);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r2);
  color:var(--ivory);
  outline:none;
  transition:border-color var(--dur-fast);
}
input[type="text"]:focus{border-color:var(--gold-dim)}
input[type="text"]::placeholder{color:var(--ivory-muted)}

/* ═══════════════════════════════════════════════════
   LANDING SCREEN
   ═══════════════════════════════════════════════════ */
#screen-landing{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201,168,76,.06) 0%, transparent 50%),
    var(--charcoal);
}

.landing-container{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--s6);padding:var(--s5);
  max-width:420px;width:100%;
}

.logo-wrapper{text-align:center;margin-bottom:var(--s2)}

.logo{
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--font-heading);
}

.logo-mark{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s3);
}
.logo-mark svg{width:48px;height:48px}

.logo-text{
  font-size:3.2rem;font-weight:700;
  letter-spacing:.06em;
  color:var(--ivory);
  line-height:1;
}
.logo-text span{color:var(--gold)}

.logo-sub{
  font-size:.95rem;
  font-weight:400;
  letter-spacing:.35em;
  color:var(--ivory-muted);
  margin-top:var(--s1);
  margin-left:.35em;
  font-family:var(--font-body);
  text-transform:uppercase;
}

.tagline{
  font-size:.85rem;
  color:var(--ivory-muted);
  margin-top:var(--s3);
  font-style:italic;
  font-family:var(--font-heading);
}

.landing-form{
  width:100%;
  display:flex;flex-direction:column;
  gap:var(--s5);
  padding:var(--s5);
}

.landing-actions{display:flex;flex-direction:column;gap:var(--s4)}

.divider{
  display:flex;align-items:center;gap:var(--s3);
  color:var(--ivory-muted);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.1em;
}
.divider::before,.divider::after{
  content:'';flex:1;height:1px;
  background:rgba(255,255,255,.08);
}

.join-row{display:flex;gap:var(--s2)}
.join-row input{
  flex:1;text-transform:uppercase;
  font-weight:600;letter-spacing:.15em;text-align:center;
}
.join-row .btn{flex-shrink:0;white-space:nowrap}

.server-stats{font-size:.75rem;color:var(--ivory-muted);letter-spacing:.04em}

.landing-error{
  color:var(--danger);font-size:.85rem;font-weight:500;
  min-height:1.4em;text-align:center;
}

/* ═══════════════════════════════════════════════════
   LOBBY SCREEN
   ═══════════════════════════════════════════════════ */
#screen-lobby{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201,168,76,.04) 0%, transparent 50%),
    var(--charcoal);
}

.lobby-container{
  display:flex;flex-direction:column;
  gap:var(--s5);padding:var(--s5);
  max-width:480px;width:100%;
  max-height:92vh;overflow-y:auto;
}

.lobby-header{padding:var(--s5);text-align:center}
.lobby-header .label{
  font-family:var(--font-body);font-size:.7rem;font-weight:600;
  color:var(--ivory-muted);text-transform:uppercase;letter-spacing:.12em;
}

.room-code-display{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--font-heading);
  font-size:2.4rem;font-weight:700;
  letter-spacing:.18em;
  color:var(--gold);
  cursor:pointer;
  padding:var(--s2) var(--s3);
  border-radius:var(--r2);
  transition:background var(--dur-fast);
  position:relative;
}
.room-code-display:hover{background:rgba(201,168,76,.06)}

.copy-indicator{
  width:20px;height:20px;
  color:var(--ivory-muted);opacity:.5;
}
.copy-indicator svg{width:100%;height:100%}

.copy-toast{
  position:absolute;top:-28px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:var(--charcoal);
  font-size:.7rem;font-weight:600;font-family:var(--font-body);
  padding:3px 10px;border-radius:var(--r-full);
  opacity:0;transition:all var(--dur-fast);pointer-events:none;
}
.copy-toast.show{opacity:1;top:-34px}

.lobby-hint{font-size:.8rem;color:var(--ivory-muted);margin-top:var(--s1)}

/* Player List */
.lobby-players{padding:var(--s5)}
.lobby-players .section-title{
  font-family:var(--font-body);font-size:.75rem;font-weight:600;
  color:var(--ivory-muted);text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:var(--s3);display:flex;align-items:center;gap:var(--s2);
}

.player-list{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}

.player-list li{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s3);
  background:var(--charcoal);
  border-radius:var(--r2);
  border:1px solid transparent;
  transition:all var(--dur-fast);
  animation:player-slide .3s var(--ease-out);
}
@keyframes player-slide{
  from{opacity:0;transform:translateX(-12px)}
  to{opacity:1;transform:translateX(0)}
}

.player-list li.is-you{border-color:var(--gold-dim);background:rgba(201,168,76,.04)}

.player-avatar{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;
  background:var(--surface-2);
  border:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
  color:var(--ivory-dim);
  font-weight:700;
  font-family:var(--font-body);
}

.player-name{flex:1;font-weight:500;font-size:.9rem}

.player-badge{
  font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  padding:2px 7px;border-radius:var(--r-full);
}
.badge-host{background:var(--gold);color:var(--charcoal)}
.badge-you{background:var(--felt-light);color:var(--ivory)}

/* Voice indicator dot */
.voice-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--charcoal-3);
  flex-shrink:0;
  transition:background var(--dur-fast);
}
.voice-dot.speaking{
  background:var(--success);
  box-shadow:0 0 6px rgba(60,179,113,.5);
}
.voice-dot.muted{background:var(--danger)}

/* Lobby Actions */
.lobby-actions{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--s3);
}
.lobby-status{font-size:.8rem;color:var(--ivory-muted)}

/* Voice Controls Row */
.voice-controls{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3);
  background:var(--charcoal);
  border-radius:var(--r2);
  border:1px solid rgba(255,255,255,.06);
}
.voice-controls .voice-label{
  font-size:.78rem;color:var(--ivory-muted);
}
.mic-level{
  width:40px;height:4px;
  background:var(--charcoal-3);
  border-radius:2px;overflow:hidden;
}
.mic-level-fill{
  height:100%;width:0%;
  background:var(--success);
  border-radius:2px;
  transition:width 80ms linear;
}

/* ── Chat ── */
.lobby-chat{padding:var(--s4)}
.chat-messages{
  overflow-y:auto;
  display:flex;flex-direction:column;gap:var(--s1);
  min-height:50px;max-height:130px;
  padding:var(--s2);
  background:var(--charcoal);
  border-radius:var(--r1);
}

.chat-msg{font-size:.8rem;animation:msg-fade .2s var(--ease-out)}
@keyframes msg-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.chat-msg .chat-name{font-weight:600;color:var(--gold)}
.chat-msg .chat-text{color:var(--ivory-dim);margin-left:var(--s1)}
.chat-msg.system-msg{color:var(--ivory-muted);font-style:italic;font-size:.75rem}

.chat-input-row{display:flex;gap:var(--s2);margin-top:var(--s2)}
.chat-input-row input{flex:1;padding:8px 10px;font-size:.8rem}

/* ═══════════════════════════════════════════════════
   GAME SCREEN — felt table
   ═══════════════════════════════════════════════════ */
.game-container{
  width:100%;height:100%;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}

/* Top Bar */
.game-top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s2) var(--s4);
  background:rgba(28,28,30,.92);
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:10;flex-shrink:0;
}
.game-info-left,.game-info-right{display:flex;align-items:center;gap:var(--s2)}
.game-info-center{display:flex;align-items:center;gap:var(--s3)}

.direction-indicator{
  font-size:1.3rem;color:var(--gold);
  transition:transform var(--dur-base);
}
.direction-indicator.reverse{transform:scaleX(-1)}

.room-label{
  font-family:var(--font-body);font-size:.75rem;font-weight:600;
  color:var(--ivory-muted);letter-spacing:.1em;
}

.current-color-indicator{
  width:24px;height:24px;border-radius:50%;
  border:2px solid rgba(255,255,255,.15);
  transition:all var(--dur-base);
}
.current-color-indicator.color-red{background:var(--crimson)}
.current-color-indicator.color-blue{background:var(--sapphire)}
.current-color-indicator.color-green{background:var(--forest)}
.current-color-indicator.color-yellow{background:var(--amber)}

.draw-stack-label{
  font-family:var(--font-body);font-weight:700;
  font-size:.85rem;color:var(--danger);
}

/* Opponents */
.opponents-area{
  display:flex;justify-content:center;
  gap:var(--s4);padding:var(--s3) var(--s5);
  flex-wrap:wrap;flex-shrink:0;
}

.opponent{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--s1);padding:var(--s2) var(--s3);
  border-radius:var(--r2);
  background:rgba(44,44,46,.6);
  border:1px solid transparent;
  transition:all var(--dur-base);
  min-width:90px;position:relative;
}
.opponent.active-turn{
  border-color:var(--gold-dim);
  background:rgba(201,168,76,.06);
}

.opponent-name{
  font-family:var(--font-body);font-size:.78rem;
  font-weight:600;color:var(--ivory);
}

.opponent-cards{display:flex}
.opponent-card-mini{
  width:14px;height:20px;
  background:var(--surface-2);
  border-radius:2px;
  border:1px solid rgba(255,255,255,.08);
  margin-left:-3px;
}
.opponent-card-mini:first-child{margin-left:0}

.opponent-count{font-size:.68rem;color:var(--ivory-muted);font-weight:600}

.opponent .voice-dot{
  position:absolute;top:var(--s1);right:var(--s1);
}

/* Table Center */
.table-center{
  flex:1;display:flex;
  align-items:center;justify-content:center;
  gap:var(--s7);position:relative;
  min-height:160px;
}

.draw-pile{
  cursor:pointer;
  transition:transform var(--dur-base) var(--ease-spring);
  position:relative;
}
.draw-pile:hover{transform:translateY(-3px)}
.draw-pile:active{transform:scale(.97)}

.pile-count{
  position:absolute;bottom:-6px;right:-6px;
  background:var(--surface);color:var(--ivory-muted);
  font-size:.65rem;font-weight:700;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.08);
}

.discard-pile{position:relative;min-width:76px;min-height:110px}

.turn-indicator{
  position:absolute;bottom:var(--s3);left:50%;
  transform:translateX(-50%);
  padding:var(--s2) var(--s5);
  font-family:var(--font-body);font-weight:600;font-size:.82rem;
  white-space:nowrap;pointer-events:none;
  background:var(--surface);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-full);
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.turn-indicator.your-turn{color:var(--gold)}
.turn-indicator.other-turn{color:var(--ivory-muted)}

/* Player Hand */
.player-hand-area{
  padding:var(--s2) var(--s5) var(--s4);
  display:flex;justify-content:center;
  overflow-x:auto;flex-shrink:0;z-index:5;
}
.hand-container{
  display:flex;justify-content:center;
  padding:var(--s2);min-height:120px;
}

/* ── BLITZ Button ── */
.btn-blitz{
  position:fixed;bottom:190px;left:50%;
  transform:translateX(-50%);z-index:50;
  background:var(--crimson);color:white;
  border:2px solid rgba(255,255,255,.2);
  border-radius:var(--r-full);
  padding:14px 44px;
  font-family:var(--font-heading);
  font-size:1.3rem;font-weight:700;
  cursor:pointer;
  animation:blitz-bob .6s ease-in-out infinite;
  box-shadow:0 4px 24px rgba(192,57,43,.4);
}
@keyframes blitz-bob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-4px)}
}
.btn-blitz.hidden{display:none}

/* ── Overlays ── */
.overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;
  z-index:100;
}
.overlay.hidden{display:none}

.color-picker,.target-picker,.peek-panel{
  text-align:center;
  padding:var(--s5);
  animation:modal-up .25s var(--ease-spring);
}
@keyframes modal-up{
  from{opacity:0;transform:translateY(16px) scale(.96)}
  to{opacity:1;transform:none}
}

.color-picker h3,.target-picker h3,.peek-panel h3{
  font-family:var(--font-heading);font-size:1.1rem;
  margin-bottom:var(--s5);color:var(--ivory);
}

.color-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.color-btn{
  width:72px;height:72px;border-radius:var(--r2);
  border:3px solid transparent;cursor:pointer;
  transition:transform var(--dur-base) var(--ease-spring),
             border-color var(--dur-fast);
}
.color-btn:hover{transform:scale(1.08);border-color:rgba(255,255,255,.4)}
.color-btn.color-red{background:var(--crimson)}
.color-btn.color-blue{background:var(--sapphire)}
.color-btn.color-green{background:var(--forest)}
.color-btn.color-yellow{background:var(--amber)}

.target-list{display:flex;flex-direction:column;gap:var(--s2)}
.target-list button{
  padding:11px 20px;
  background:var(--charcoal);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r2);
  color:var(--ivory);font-family:var(--font-body);
  font-size:.9rem;font-weight:500;cursor:pointer;
  transition:all var(--dur-fast);
}
.target-list button:hover{border-color:var(--gold-dim);background:rgba(201,168,76,.06)}

.peek-panel h3{color:var(--gold)}
.peek-cards{
  display:flex;justify-content:center;gap:var(--s2);
  flex-wrap:wrap;margin-bottom:var(--s3);
}
.peek-timer{color:var(--ivory-muted);font-size:.8rem}

/* ── Game Chat ── */
.game-chat{
  position:fixed;right:0;top:0;bottom:0;
  width:260px;
  background:var(--surface);
  border-left:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;z-index:20;
  animation:chat-in .25s var(--ease-out);
}
.game-chat.hidden{display:none}
@keyframes chat-in{from{transform:translateX(100%)}to{transform:none}}

.chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s3) var(--s4);
  border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--font-body);font-weight:600;font-size:.85rem;
}
.game-chat .chat-messages{flex:1;padding:var(--s2);max-height:none}
.game-chat .chat-input-row{padding:var(--s2);border-top:1px solid rgba(255,255,255,.06)}

/* ── Event Toast ── */
.event-toast{
  position:fixed;top:56px;left:50%;transform:translateX(-50%);
  background:var(--surface);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-full);
  padding:9px 22px;
  font-family:var(--font-body);font-weight:500;font-size:.82rem;
  color:var(--ivory);z-index:60;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  animation:toast-drop .25s var(--ease-spring);
  white-space:nowrap;
}
.event-toast.hidden{display:none}
@keyframes toast-drop{
  from{opacity:0;transform:translateX(-50%) translateY(-12px)}
  to{opacity:1;transform:translateX(-50%)}
}

/* ═══════════════════════════════════════════════════
   RESULTS SCREEN
   ═══════════════════════════════════════════════════ */
#screen-results{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201,168,76,.08) 0%, transparent 50%),
    var(--charcoal);
}

.results-container{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--s5);padding:var(--s5);
  max-width:480px;width:100%;z-index:1;
}

.results-header{text-align:center}
.trophy{font-size:3rem;margin-bottom:var(--s2)}

.results-header h2{
  font-family:var(--font-heading);font-size:2.2rem;font-weight:700;
  color:var(--gold);
}
.results-subtitle{color:var(--ivory-dim);font-size:1rem;margin-top:var(--s1)}

.results-scoreboard{width:100%;padding:var(--s5)}
.results-scoreboard h3{
  font-family:var(--font-heading);font-size:1rem;
  margin-bottom:var(--s4);text-align:center;
  color:var(--ivory-dim);
}

.results-scoreboard table{width:100%;border-collapse:collapse}
.results-scoreboard th,.results-scoreboard td{
  padding:var(--s2) var(--s3);text-align:center;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.results-scoreboard th{
  font-size:.7rem;color:var(--ivory-muted);
  text-transform:uppercase;letter-spacing:.06em;
}
.results-scoreboard td{font-weight:500}
.results-scoreboard tr.winner td{color:var(--gold);font-weight:700}

.results-actions{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--s3);
}

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

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media(max-width:768px){
  .logo-text{font-size:2.4rem}
  .room-code-display{font-size:1.8rem}
  .opponents-area{gap:var(--s2);padding:var(--s2)}
  .opponent{min-width:70px;padding:var(--s1) var(--s2)}
  .table-center{gap:var(--s5)}
  .game-chat{width:100%}
  .results-header h2{font-size:1.6rem}
}
@media(max-width:480px){
  .logo-text{font-size:1.9rem}
  .btn-large{font-size:.95rem;padding:12px 28px}
  .btn-blitz{bottom:165px;padding:12px 32px;font-size:1.1rem}
}

.hidden{display:none!important}