/* ============================================================
   LOBBY.CSS — extracted from index.html
   ============================================================ */

/* ============================================================
   LOBBY SCREEN — SIDEBAR CLIENT LAYOUT
   ============================================================ */
#screen-lobby{
  flex-direction:row !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  padding:0 !important;
  gap:0 !important;
  height:100vh;
  overflow:hidden;
}
.lobby-topbar{display:none !important;} /* replaced by sidebar */

/* Centered max-width wrapper to avoid stretching on ultrawide */
.lobby-scroll{
  width:100%;flex:1;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:0;
  padding:54px 14px 14px;
}
.lobby-scroll::-webkit-scrollbar{width:4px;}
.lobby-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px;}

/* Desktop: two-column grid inside a centered container */
.lobby-inner{
  width:100%;max-width:1440px;margin:0 auto;
  display:flex;flex-direction:column;gap:16px;
}

@media(min-width:900px){
  .lobby-scroll{padding:60px 24px 24px;}
  .lobby-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "status status"
      "profile chat"
      "play    chat"
      "private activity"
      "lbprev  rooms"
      "progress missions"
      "players players";
    gap:18px;
    align-items:start;
  }
  .lobby-status-area { grid-area: status; }
  .lobby-left-play   { grid-area: play; display:flex;flex-direction:column;gap:16px; }
  .lobby-profile-area{ grid-area: profile; }
  .lobby-chat-area   { grid-area: chat; display:flex;flex-direction:column;gap:0; }
  .lobby-private-area{ grid-area: private; }
  .lobby-activity-area{ grid-area: activity; }
  .lobby-lbprev-area { grid-area: lbprev; }
  .lobby-rooms-area  { grid-area: rooms; }
  .lobby-progress-area{ grid-area: progress; }
  .lobby-missions-area{ grid-area: missions; }
  .lobby-players-area{ grid-area: players; }
  .chat-area{height:52vh;min-height:280px;}
}

@media(min-width:1200px){
  .lobby-inner{
    grid-template-columns:340px 1fr 320px;
    grid-template-areas:
      "status  status   status"
      "profile play     chat"
      "profile private  chat"
      "lbprev  activity chat"
      "lbprev  rooms    chat"
      "progress missions players";
    gap:20px;
  }
  .chat-area{height:calc(100vh - 200px);min-height:400px;max-height:700px;}
}

.lobby-section-label{
  font-family:'Luckiest Guy',sans-serif;font-size:.74rem;letter-spacing:1.5px;
  color:rgba(255,255,255,.4);text-transform:uppercase;display:flex;align-items:center;gap:6px;
  padding:0 2px;margin-bottom:8px;
}

/* Status bar spanning full width */
.lobby-status-bar{
  display:flex;align-items:center;justify-content:center;gap:0;
  border-radius:14px;overflow:hidden;
  border:1.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  flex-wrap:wrap;
}
.status-pill{
  display:flex;align-items:center;gap:6px;padding:10px 18px;
  font-family:'Luckiest Guy',sans-serif;font-size:.8rem;letter-spacing:.5px;
  color:rgba(255,255,255,.7);border-right:1px solid rgba(255,255,255,.08);
  flex:1;min-width:120px;justify-content:center;
}
.status-pill:last-child{border-right:none;}
.status-pill .spval{color:#fff;font-size:.95rem;}
.status-pill .sp-dot{width:8px;height:8px;border-radius:50%;background:var(--G);box-shadow:0 0 8px var(--G);flex-shrink:0;animation:live-pulse 1.4s ease-in-out infinite;}

.online-banner{display:none;} /* hide the old banner, replaced by status bar */

.online-banner-dot{
  width:9px;height:9px;border-radius:50%;background:var(--G);
  box-shadow:0 0 10px var(--G);animation:live-pulse 1.4s ease-in-out infinite;
}
.lobby-section-label .cnt-pill{
  font-family:'Rajdhani',sans-serif;font-weight:900;font-size:.62rem;color:rgba(255,255,255,.3);
}

/* --- Settings / leaderboard quick-access bar --- */
.lobby-topbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:12px 14px;
  background:linear-gradient(180deg,rgba(10,10,10,.9),transparent);
  pointer-events:none;
  backdrop-filter:blur(4px);
}
@media(min-width:900px){
  .lobby-topbar{padding:14px 28px;}
}
.lobby-topbar > *{pointer-events:auto;}
.icon-btn{
  width:38px;height:38px;border-radius:11px;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.14);
  color:#fff;font-size:1.05rem;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s,transform .1s;backdrop-filter:blur(8px);
}
.icon-btn:active{transform:scale(.92);background:rgba(255,255,255,.18);}

/* --- PROFILE CARD --- */
.profile-card{
  position:relative;border-radius:20px;padding:16px;
  background:var(--panel);border:1.5px solid var(--panel-bd);
  display:flex;flex-direction:column;gap:12px;overflow:hidden;
}
.profile-top{display:flex;align-items:center;gap:13px;}
.profile-avatar-wrap{position:relative;width:62px;height:62px;flex-shrink:0;}
.profile-avatar-ring{
  position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;
  background:conic-gradient(from 0deg,var(--Y),var(--G),var(--B),var(--P),var(--Y));
  animation:ring-spin 6s linear infinite;
  padding:3px;
}
.profile-avatar-ring::after{
  content:'';position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;background:#15151d;
}
.profile-avatar{
  position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
  background:radial-gradient(circle at 35% 30%,#23232f,#15151d);
  z-index:2;overflow:hidden;
}
@keyframes ring-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.profile-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.profile-name-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.profile-username{font-family:'Luckiest Guy',sans-serif;font-size:1.12rem;letter-spacing:.5px;color:#fff;}
.profile-rankchip{
  font-family:'Luckiest Guy',sans-serif;font-size:.66rem;letter-spacing:.5px;
  padding:2px 9px 2px 6px;border-radius:9px;
  background:rgba(255,230,0,.14);color:var(--Y);border:1px solid rgba(255,230,0,.3);
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.profile-globalrank{
  font-family:'Luckiest Guy',sans-serif;font-size:.66rem;color:var(--V);
  background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.3);
  padding:2px 9px;border-radius:9px;white-space:nowrap;
}
.profile-stats-row{display:flex;gap:6px;}
.pstat{
  flex:1;min-width:0;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:7px 4px;text-align:center;display:flex;flex-direction:column;gap:1px;
}
.pstat-val{font-family:'Luckiest Guy',sans-serif;font-size:1.02rem;color:#fff;line-height:1;}
.pstat-val.streak{color:var(--R);}
.pstat-val.wr{color:var(--G);}
.pstat-lbl{font-size:.58rem;color:rgba(255,255,255,.4);font-weight:900;letter-spacing:.5px;text-transform:uppercase;}

/* Rank progress bar */
.rank-progress-wrap{display:flex;flex-direction:column;gap:5px;}
.rank-progress-labels{display:flex;justify-content:space-between;font-size:.62rem;font-weight:900;color:rgba(255,255,255,.45);}
.rank-progress-labels b{color:var(--Y);font-weight:900;}
.rank-progress-track{
  position:relative;height:10px;border-radius:6px;overflow:hidden;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);
}
.rank-progress-fill{
  position:absolute;top:0;right:0;bottom:0;left:0;width:0%;border-radius:6px;
  background:linear-gradient(90deg,var(--B),var(--G) 55%,var(--Y));
  transition:width 1s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
.rank-progress-fill::after{
  content:'';position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 65%);
  background-size:60% 100%;background-repeat:no-repeat;
  animation:rank-sheen 2.6s ease-in-out infinite;
}
@keyframes rank-sheen{0%{background-position:-150% 0}100%{background-position:250% 0}}

/* --- HERO EVENT BANNER --- */
.hero-banner{
  position:relative;border-radius:20px;padding:20px 18px;min-height:108px;
  overflow:hidden;cursor:pointer;border:1.5px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg,#3a1f5c,#1a0f33 55%,#0c0820);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  isolation:isolate;
}
.hero-banner::before{
  /* Was a rotating conic-gradient — under blur inside a clipped card it
     showed a visible seam sweeping past on every rotation, reading as
     a stutter/glitch rather than a smooth glow. Swapped for a seamless
     pulsing radial glow. */
  content:'';position:absolute;inset:-15%;z-index:0;
  background:radial-gradient(circle at 25% 30%,rgba(255,230,0,.2),transparent 60%),
             radial-gradient(circle at 78% 70%,rgba(139,92,246,.18),transparent 60%);
  animation:hero-glow-pulse 7s ease-in-out infinite;
  filter:blur(18px);
}
.hero-banner::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  animation:hero-sweep 3.4s ease-in-out infinite;
}
@keyframes hero-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes hero-sweep{0%{left:-60%}55%{left:130%}100%{left:130%}}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:5px;}
.hero-eyebrow{
  font-family:'Luckiest Guy',sans-serif;font-size:.66rem;letter-spacing:2px;
  color:var(--Y);text-transform:uppercase;display:flex;align-items:center;gap:6px;
}
.hero-eyebrow .live-dot{width:6px;height:6px;border-radius:50%;background:var(--R);box-shadow:0 0 8px var(--R);animation:live-pulse 1.4s ease-in-out infinite;}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero-title{font-family:'Luckiest Guy',sans-serif;font-size:1.5rem;color:#fff;letter-spacing:.5px;line-height:1.05;text-shadow:0 2px 12px rgba(0,0,0,.4);}
.hero-sub{font-size:.78rem;color:rgba(255,255,255,.65);font-weight:800;max-width:90%;}
.hero-glow-orb{
  position:absolute;z-index:1;border-radius:50%;pointer-events:none;
  width:130px;height:130px;right:-30px;top:-30px;
  background:radial-gradient(circle,rgba(255,230,0,.35),transparent 70%);
  filter:blur(8px);
}

/* --- MAIN ACTION CARDS --- */
.action-grid{display:flex;flex-direction:column;gap:10px;}
.action-card{
  position:relative;display:flex;align-items:center;gap:14px;
  border-radius:18px;padding:14px 16px;cursor:pointer;
  background:var(--panel);border:1.5px solid var(--panel-bd);
  transition:transform .12s,border-color .15s,box-shadow .15s;
  overflow:hidden;
}
.action-card::before{
  content:'';position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;z-index:0;
  background:radial-gradient(circle at 0% 50%,var(--acc,var(--Y)) 0%,transparent 65%);
  transition:opacity .2s;
}
.action-card:active{transform:scale(.97);}
.action-card:hover::before{opacity:.16;}
.action-card:hover{border-color:var(--acc,var(--Y));box-shadow:0 0 22px -8px var(--acc,var(--Y));}
.action-card.featured{padding:18px 16px;}
.ac-icon{
  position:relative;z-index:1;width:52px;height:52px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;
  background:linear-gradient(155deg,color-mix(in srgb,var(--acc,var(--Y)) 28%,transparent),color-mix(in srgb,var(--acc,var(--Y)) 8%,transparent));
  border:1.5px solid color-mix(in srgb,var(--acc,var(--Y)) 40%,transparent);
}
.ac-body{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;gap:1px;text-align:left;}
.ac-title{font-family:'Luckiest Guy',sans-serif;font-size:1.02rem;color:#fff;letter-spacing:.5px;}
.ac-sub{font-size:.74rem;color:rgba(255,255,255,.45);font-weight:800;}
.ac-arrow{position:relative;z-index:1;color:rgba(255,255,255,.25);font-size:1.2rem;flex-shrink:0;}

/* --- PROGRESSION: rewards + missions --- */
.progression-row{display:flex;gap:10px;}
.prog-card{
  flex:1;border-radius:16px;padding:13px;background:var(--panel);border:1.5px solid var(--panel-bd);
  display:flex;flex-direction:column;gap:8px;min-width:0;
}
.prog-card-head{display:flex;align-items:center;gap:6px;}
.prog-card-title{font-family:'Luckiest Guy',sans-serif;font-size:.8rem;color:#fff;letter-spacing:.5px;}
.daily-reward-amt{display:flex;align-items:baseline;gap:5px;}
.daily-reward-amt b{font-family:'Luckiest Guy',sans-serif;font-size:1.5rem;color:var(--Y);text-shadow:0 0 16px rgba(255,230,0,.4);}
.daily-reward-amt span{font-size:.68rem;color:rgba(255,255,255,.4);font-weight:800;}
.claim-btn{
  margin-top:2px;font-family:'Luckiest Guy',sans-serif;font-size:.74rem;letter-spacing:.5px;
  padding:8px;border-radius:9px;border:none;cursor:pointer;text-align:center;
  background:var(--Y);color:var(--BK);transition:transform .1s;
}
.claim-btn:active{transform:scale(.95);}
.claim-btn.claimed{background:rgba(255,255,255,.08);color:rgba(255,255,255,.35);}
.mission-list{display:flex;flex-direction:column;gap:7px;}
.mission-item{display:flex;flex-direction:column;gap:3px;}
.mission-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px;}
.mission-name{font-size:.7rem;color:rgba(255,255,255,.75);font-weight:800;}
.mission-reward{font-size:.66rem;color:var(--G);font-weight:900;white-space:nowrap;}
.mission-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;}
.mission-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--B),var(--G));}

/* ---- LEADERBOARD PREVIEW ---- */
.lb-preview-list{display:flex;flex-direction:column;gap:6px;}
.lb-preview-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
}
.lb-preview-rank{font-family:'Luckiest Guy',sans-serif;font-size:.92rem;min-width:26px;text-align:center;color:rgba(255,255,255,.4);}
.lb-preview-rank.gold{color:#FFD700;}
.lb-preview-rank.silver{color:#C0C0C0;}
.lb-preview-rank.bronze{color:#CD7F32;}
.lb-preview-avatar{font-size:1.1rem;width:28px;text-align:center;}
.lb-preview-name{flex:1;font-family:'Luckiest Guy',sans-serif;font-size:.82rem;color:#fff;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-preview-pts{font-family:'Luckiest Guy',sans-serif;font-size:.88rem;color:var(--Y);}
.lb-view-btn{
  width:100%;margin-top:8px;padding:9px;border-radius:10px;border:none;cursor:pointer;
  background:rgba(255,230,0,.1);border:1.5px solid rgba(255,230,0,.25);
  color:var(--Y);font-family:'Luckiest Guy',sans-serif;font-size:.8rem;letter-spacing:.5px;
  transition:background .15s;
}
.lb-view-btn:hover{background:rgba(255,230,0,.18);}
.lb-view-btn:active{transform:scale(.97);}

/* ---- Activity Feed Panel ---- */
.activity-panel{
  border-radius:16px;background:var(--panel);border:1.5px solid var(--panel-bd);
  overflow:hidden;
}
.activity-feed{display:flex;flex-direction:column;max-height:220px;overflow-y:auto;padding:6px 0;}
.activity-feed::-webkit-scrollbar{width:3px;}
.activity-feed::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:2px;}
.activity-item{
  padding:7px 14px;font-size:.78rem;font-weight:800;color:rgba(255,255,255,.75);
  border-bottom:1px solid rgba(255,255,255,.04);animation:chat-pop .22s ease both;
}
.activity-item:last-child{border-bottom:none;}

/* ---- Community stats compact ---- */
.community-stats-row{display:flex;gap:8px;margin-bottom:8px;}
.cs-stat{
  flex:1;border-radius:12px;padding:10px 8px;text-align:center;
  background:var(--panel);border:1.5px solid var(--panel-bd);
}
.cs-stat-val{font-family:'Luckiest Guy',sans-serif;font-size:1.1rem;color:#fff;}
.cs-stat-lbl{font-size:.58rem;color:rgba(255,255,255,.4);font-weight:900;letter-spacing:.5px;text-transform:uppercase;margin-top:2px;}

/* ---- World Play featured card ---- */
.world-play-card{
  position:relative;border-radius:20px;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,#1a3a1a,#0d2010 55%,#081508);
  border:1.5px solid rgba(0,255,135,.2);
  transition:transform .12s,border-color .15s,box-shadow .15s;
  padding:22px 20px;
}
.world-play-card:hover{
  transform:translateY(-2px);
  border-color:rgba(0,255,135,.5);
  box-shadow:0 0 32px -8px rgba(0,255,135,.4);
}
.world-play-card:active{transform:scale(.98);}
.world-play-card::before{
  /* Was a rotating conic-gradient — same visible-seam issue as
     .hero-banner::before above, fixed the same way. */
  content:'';position:absolute;inset:-15%;z-index:0;
  background:radial-gradient(circle at 30% 30%,rgba(0,255,135,.16),transparent 60%),
             radial-gradient(circle at 75% 70%,rgba(0,194,255,.12),transparent 60%);
  animation:hero-glow-pulse 8s ease-in-out infinite;filter:blur(20px);
}
.wpc-inner{position:relative;z-index:1;}
.wpc-label{
  font-family:'Luckiest Guy',sans-serif;font-size:.66rem;letter-spacing:2px;
  color:var(--G);text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-bottom:8px;
}
.wpc-label .live-dot{width:6px;height:6px;border-radius:50%;background:var(--G);box-shadow:0 0 8px var(--G);animation:live-pulse 1.4s ease-in-out infinite;}
.wpc-title{font-family:'Luckiest Guy',sans-serif;font-size:1.8rem;color:#fff;letter-spacing:.5px;line-height:1.05;}
.wpc-sub{font-size:.8rem;color:rgba(255,255,255,.55);font-weight:800;margin-top:6px;}
.wpc-btn{
  display:inline-block;margin-top:14px;padding:12px 28px;
  background:var(--G);color:var(--BK);border:none;border-radius:10px;
  font-family:'Luckiest Guy',sans-serif;font-size:1rem;letter-spacing:.5px;cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,.4);transition:transform .08s,box-shadow .08s;
}
.wpc-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(0,0,0,.4);}
.wpc-btn:active{transform:translate(2px,2px)!important;box-shadow:none!important;}
.wpc-stats{display:flex;gap:16px;margin-top:12px;}
.wpc-stat{display:flex;flex-direction:column;gap:1px;}
.wpc-stat-val{font-family:'Luckiest Guy',sans-serif;font-size:1.1rem;color:var(--G);}
.wpc-stat-lbl{font-size:.6rem;color:rgba(255,255,255,.4);font-weight:900;text-transform:uppercase;letter-spacing:.5px;}
.community-strip{display:flex;gap:8px;}
.comm-stat{
  flex:1;border-radius:14px;padding:10px 6px;text-align:center;
  background:var(--panel);border:1.5px solid var(--panel-bd);
  display:flex;flex-direction:column;gap:2px;
}
.comm-stat-val{font-family:'Luckiest Guy',sans-serif;font-size:1.05rem;color:#fff;}
.comm-stat-val .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--G);margin-right:4px;box-shadow:0 0 6px var(--G);}
.comm-stat-lbl{font-size:.58rem;color:rgba(255,255,255,.4);font-weight:900;letter-spacing:.4px;text-transform:uppercase;}
.match-ticker{
  border-radius:14px;background:var(--panel);border:1.5px solid var(--panel-bd);
  padding:4px 0;overflow:hidden;
}
.match-ticker-track{display:flex;flex-direction:column;}
.ticker-row{
  display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:.78rem;font-weight:800;
  color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.05);
}
.ticker-row:last-child{border-bottom:none;}
.ticker-row b{color:#fff;}

/* --- ONLINE PLAYERS (horizontal cards) --- */
.players-scroll{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 6px;}
.players-scroll::-webkit-scrollbar{display:none;}
.player-card{
  flex-shrink:0;width:92px;border-radius:14px;padding:10px 8px;text-align:center;
  background:var(--panel);border:1.5px solid var(--panel-bd);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.player-card .op-avatar{width:42px;height:42px;font-size:1.4rem;margin-bottom:2px;}
.player-card .op-name{font-size:.68rem;color:#fff;font-weight:800;max-width:100%;}
.player-card .op-rankpts{font-size:.6rem;color:var(--Y);font-weight:900;}
.online-count-pill{
  font-family:'Luckiest Guy',sans-serif;font-size:.62rem;color:rgba(255,255,255,.4);
}

/* --- GLOBAL CHAT (always-visible panel) --- */
.chat-live-pill{color:var(--G)!important;}
.chat-panel{
  border-radius:16px;background:var(--panel);border:1.5px solid var(--panel-bd);
  display:flex;flex-direction:column;overflow:hidden;
}

/* Online players strip (legacy class kept for JS compat, unused visually) */
.online-strip{display:none;}
.online-player{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:52px;}
.op-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:1.3rem;border:2px solid rgba(255,255,255,.15);position:relative;}
.op-avatar .green-dot{position:absolute;bottom:1px;right:1px;width:9px;height:9px;border-radius:50%;background:var(--G);border:2px solid var(--BK);}
.op-name{font-size:.6rem;color:rgba(255,255,255,.5);font-weight:800;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.online-count{font-family:'Luckiest Guy',sans-serif;font-size:.72rem;color:rgba(255,255,255,.35);white-space:nowrap;padding-right:6px;}

/* Chat area */
.chat-area{height:32vh;min-height:180px;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px;}
.chat-area::-webkit-scrollbar{width:3px;}
.chat-area::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px;}
.chat-msg{display:flex;gap:8px;align-items:flex-start;animation:chat-pop .22s ease both;}
@keyframes chat-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.chat-msg .cm-avatar{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;margin-top:2px;border:1.5px solid rgba(255,255,255,.12);}
.chat-msg .cm-body{display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:78%;}
.chat-msg .cm-name-row{display:flex;align-items:center;gap:5px;}
.chat-msg .cm-name{font-size:.66rem;color:rgba(255,255,255,.45);font-weight:800;}
.chat-msg .cm-rank-badge{
  font-size:.55rem;font-family:'Luckiest Guy',sans-serif;line-height:1;
  padding:1px 5px;border-radius:6px;background:rgba(255,230,0,.13);color:var(--Y);
  border:1px solid rgba(255,230,0,.25);white-space:nowrap;
}
.chat-msg .cm-time{font-size:.56rem;color:rgba(255,255,255,.25);font-weight:700;}
.chat-msg .cm-text{font-size:.86rem;color:rgba(255,255,255,.88);font-weight:800;background:rgba(255,255,255,.06);padding:6px 11px;border-radius:0 12px 12px 12px;word-break:break-word;text-align:left;}
.chat-msg.mine{flex-direction:row-reverse;}
.chat-msg.mine .cm-body{align-items:flex-end;}
.chat-msg.mine .cm-text{background:rgba(255,230,0,.15);color:var(--Y);border-radius:12px 0 12px 12px;}
.chat-msg.mine .cm-name-row{flex-direction:row-reverse;}
.chat-msg.system{justify-content:center;}
.chat-msg.system .cm-text{background:transparent;color:rgba(255,255,255,.35);font-size:.74rem;padding:2px 0;border-radius:0;font-weight:800;}

/* Chat input row */
.chat-input-row{padding:8px 14px 10px;border-top:1px solid var(--border);display:flex;gap:8px;}
.chat-txt{
  flex:1;font-family:'Rajdhani',sans-serif;font-weight:800;font-size:.88rem;
  padding:10px 14px;border-radius:20px;
  border:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);
  color:var(--W);outline:none;transition:border-color .15s;
}
.chat-txt:focus{border-color:var(--Y);}
.chat-send{
  width:40px;height:40px;border-radius:50%;
  background:var(--Y);color:var(--BK);border:none;cursor:pointer;
  font-size:1.1rem;display:flex;align-items:center;justify-content:center;
  font-family:'Luckiest Guy',sans-serif;transition:transform .1s;
  flex-shrink:0;
}
.chat-send:active{transform:scale(.9);}

/* --- LIVE ROOMS (public room browser) --- */
.rooms-list{display:flex;flex-direction:column;gap:8px;}
.rooms-empty{
  font-size:.76rem;color:rgba(255,255,255,.3);font-weight:800;text-align:center;
  padding:16px;background:var(--panel);border:1.5px solid var(--panel-bd);border-radius:14px;
}
.room-row{
  display:flex;align-items:center;gap:10px;
  border-radius:14px;padding:10px 12px;
  background:var(--panel);border:1.5px solid var(--panel-bd);
}
.room-row-icon{width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  background:rgba(0,194,255,.12);border:1px solid rgba(0,194,255,.3);}
.room-row-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.room-row-name{font-family:'Luckiest Guy',sans-serif;font-size:.86rem;color:#fff;letter-spacing:.3px;}
.room-row-meta{font-size:.68rem;color:rgba(255,255,255,.45);font-weight:800;}
.room-row-status{
  font-size:.62rem;font-family:'Luckiest Guy',sans-serif;padding:2px 8px;border-radius:8px;
  background:rgba(0,255,135,.12);color:var(--G);border:1px solid rgba(0,255,135,.3);white-space:nowrap;
}
.room-join-btn{
  font-family:'Luckiest Guy',sans-serif;font-size:.72rem;letter-spacing:.5px;
  padding:8px 14px;border-radius:9px;border:none;cursor:pointer;
  background:var(--B);color:var(--BK);flex-shrink:0;transition:transform .1s;
}
.room-join-btn:active{transform:scale(.93);}

/* Lobby action buttons (legacy, no longer placed in lobby but kept for safety) */
.lobby-actions{display:none;}


/* ============================================================
   MATCHMAKING / SEARCHING
   ============================================================ */
.search-ring{
  width:80px;height:80px;border-radius:50%;
  border:4px solid rgba(255,255,255,.1);
  border-top-color:var(--Y);
  animation:spin 1s linear infinite;
  margin:0 auto;
}


/* ============================================================
   LEADERBOARD SCREEN
   ============================================================ */
#screen-leaderboard{justify-content:flex-start;padding:0;}
.lb-header{width:100%;padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.4);}
.lb-title{font-family:'Luckiest Guy',sans-serif;font-size:1.4rem;letter-spacing:1px;color:var(--Y);}
.lb-list{width:100%;overflow-y:auto;flex:1;padding:8px 14px;}
.lb-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;margin-bottom:6px;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.07);
  transition:background .15s;
}
.lb-row.me{background:rgba(255,230,0,.08);border-color:rgba(255,230,0,.2);}
.lb-row.top3{border-color:rgba(255,230,0,.35);}
.lb-rank{font-family:'Luckiest Guy',sans-serif;font-size:1rem;color:rgba(255,255,255,.3);min-width:28px;text-align:center;}
.lb-rank.gold{color:#FFD700;}
.lb-rank.silver{color:#C0C0C0;}
.lb-rank.bronze{color:#CD7F32;}
.lb-avatar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.lb-info{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
.lb-name{font-family:'Luckiest Guy',sans-serif;font-size:.9rem;letter-spacing:.5px;}
.lb-stats{font-size:.68rem;color:rgba(255,255,255,.4);font-weight:800;}
.lb-pts{font-family:'Luckiest Guy',sans-serif;font-size:1.1rem;color:var(--Y);}
.lb-my-rank{
  width:100%;padding:10px 14px;border-top:1px solid var(--border);
  background:rgba(0,0,0,.4);display:flex;align-items:center;gap:8px;
}
.lb-my-rank .t-label{color:rgba(255,255,255,.5);}


/* ============================================================
   ROOM CODE SCREEN
   ============================================================ */
.room-code-display{font-family:'Luckiest Guy',sans-serif;font-size:2.8rem;color:var(--Y);letter-spacing:8px;text-shadow:3px 3px 0 rgba(255,230,0,.25);}
.copy-toast{font-size:.86rem;color:var(--G);font-weight:800;min-height:18px;}


/* ============================================================
   AUTH SCREEN — login / register
   ============================================================ */
.auth-wrap{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:0;}
.auth-tabs{display:flex;gap:0;border-radius:12px 12px 0 0;overflow:hidden;width:100%;border:2px solid rgba(255,255,255,.1);border-bottom:none;}
.auth-tab{
  flex:1;font-family:'Luckiest Guy',sans-serif;font-size:.88rem;letter-spacing:1px;
  padding:12px;cursor:pointer;border:none;background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.35);transition:all .18s;
}
.auth-tab.active{background:rgba(255,230,0,.12);color:var(--Y);border-bottom:2.5px solid var(--Y);}
.auth-panel{
  width:100%;border-radius:0 0 14px 14px;
  border:2px solid rgba(255,255,255,.1);border-top:none;
  background:rgba(255,255,255,.03);padding:18px 16px 20px;
  display:flex;flex-direction:column;gap:10px;
}
.auth-input-group{display:flex;flex-direction:column;gap:4px;width:100%;}
.auth-label{font-family:'Luckiest Guy',sans-serif;font-size:.65rem;letter-spacing:1.5px;color:rgba(255,255,255,.4);text-transform:uppercase;padding-left:2px;}
.auth-input{
  font-family:'Luckiest Guy',sans-serif;font-size:1rem;
  padding:12px 14px;border-radius:9px;
  border:2px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);color:var(--W);
  outline:none;width:100%;letter-spacing:.5px;
  transition:border-color .15s,box-shadow .15s;
}
.auth-input:focus{border-color:var(--Y);box-shadow:0 0 0 3px rgba(255,230,0,.1);}
.auth-input::placeholder{color:rgba(255,255,255,.2);}
.auth-input.error{border-color:var(--R);box-shadow:0 0 0 3px rgba(255,45,45,.1);}
.remember-row{display:flex;align-items:center;gap:8px;cursor:pointer;}
.remember-row input[type=checkbox]{width:17px;height:17px;cursor:pointer;accent-color:var(--Y);}
.remember-row span{font-size:.78rem;color:rgba(255,255,255,.45);font-weight:800;}
.auth-err{color:#ff8080;font-weight:800;min-height:16px;font-size:.82rem;text-align:center;}
.auth-ok{color:var(--G);font-weight:800;min-height:16px;font-size:.82rem;text-align:center;}
.auth-btn{
  font-family:'Luckiest Guy',sans-serif;font-size:1rem;
  padding:13px;border-radius:9px;border:none;cursor:pointer;
  width:100%;letter-spacing:1px;transition:transform .08s,filter .08s;
  background:var(--Y);color:var(--BK);box-shadow:3px 3px 0 #000;margin-top:2px;
}
.auth-btn:active{transform:translate(2px,2px);box-shadow:none;}
.auth-btn:disabled{opacity:.4;cursor:not-allowed;}
.forgot-pw-link{
  display:block;width:100%;margin-top:10px;padding:4px;
  background:none;border:none;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.82rem;
  color:rgba(255,255,255,.45);text-align:center;text-decoration:underline;
}
.forgot-pw-link:hover{color:var(--Y);}
.auth-session-bar{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:rgba(0,255,135,.08);border:1.5px solid rgba(0,255,135,.25);
  border-radius:12px;width:100%;margin-top:4px;
}
.auth-session-avatar{font-size:1.4rem;}
.auth-session-info{flex:1;display:flex;flex-direction:column;gap:1px;}
.auth-session-name{font-family:'Luckiest Guy',sans-serif;font-size:.92rem;color:var(--W);}
.auth-session-sub{font-size:.68rem;color:rgba(255,255,255,.4);font-weight:800;}

/* ============================================================
   SETTINGS SCREEN
   ============================================================ */
#screen-settings{justify-content:flex-start;padding:0;}
.settings-header{width:100%;padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.4);}
.settings-title{font-family:'Luckiest Guy',sans-serif;font-size:1.3rem;letter-spacing:1px;color:#fff;}
.settings-body{width:100%;flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:0;}
.settings-section{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
.settings-section-label{font-family:'Luckiest Guy',sans-serif;font-size:.66rem;letter-spacing:2px;color:rgba(255,255,255,.35);text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.07);}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.07);}
.settings-row-info{display:flex;flex-direction:column;gap:1px;}
.settings-row-label{font-family:'Luckiest Guy',sans-serif;font-size:.88rem;color:#fff;letter-spacing:.3px;}
.settings-row-sub{font-size:.7rem;color:rgba(255,255,255,.35);font-weight:800;}
.settings-row-btn{font-family:'Luckiest Guy',sans-serif;font-size:.72rem;letter-spacing:.5px;padding:8px 14px;border-radius:9px;border:none;cursor:pointer;background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);transition:background .15s;white-space:nowrap;}
.settings-row-btn:active{background:rgba(255,255,255,.22);}
.settings-row-btn.danger{background:rgba(255,45,45,.15);color:var(--R);}
.settings-row-btn.danger:active{background:rgba(255,45,45,.3);}
.chpw-form{display:none;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.08);margin-top:4px;}
.chpw-form.open{display:flex;}
#lobby-logout-btn{font-family:'Luckiest Guy',sans-serif;font-size:.72rem;letter-spacing:.5px;padding:6px 12px;border-radius:9px;border:1.5px solid rgba(255,45,45,.3);background:rgba(255,45,45,.08);color:rgba(255,100,100,.8);cursor:pointer;transition:background .15s;}
#lobby-logout-btn:active{background:rgba(255,45,45,.2);}
.avatar-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.avatar-opt{width:44px;height:44px;border-radius:12px;font-size:1.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.1);transition:all .12s;}
.avatar-opt:hover{border-color:rgba(255,230,0,.4);}
.avatar-opt.selected{border-color:var(--Y);background:rgba(255,230,0,.1);transform:scale(1.1);}


/* ============================================================
   HYPE BACKGROUND ART — promo poster images layered behind
   key screens for extra wow-factor. Dark gradient overlay
   keeps all existing text/buttons fully readable.
   ============================================================ */
#screen-auth{
  background:
    linear-gradient(180deg, rgba(6,4,14,.80) 0%, rgba(6,4,14,.72) 45%, rgba(6,4,14,.94) 100%),
    url("../assets/backgrounds/promo/hero-bark-battle-poster.webp");
  background-size:cover;
  background-position:center 20%;
}

/* These promo photos are marketing screenshots with huge baked-in
   titles/CTAs (and in one case a fake phone-UI mockup) — under a light
   overlay that text/UI ghosts through and reads as broken second panels
   sitting behind the real screen. Overlay is darker + blurred on all of
   them so only an atmospheric, unreadable backdrop remains. */
#screen-searching,
#screen-matchfound,
#screen-hostwait{
  background:
    linear-gradient(180deg, rgba(6,4,14,.90) 0%, rgba(6,4,14,.95) 100%),
    url("../assets/backgrounds/promo/battle-now-wide.webp");
  background-size:cover;
  background-position:center;
}

#screen-mic,
#screen-calibrate{
  background:
    linear-gradient(180deg, rgba(6,4,14,.93) 0%, rgba(6,4,14,.97) 100%),
    url("../assets/backgrounds/promo/how-loud-can-you-bark.webp");
  background-size:cover;
  background-position:center;
}

#screen-hostjoin,
#screen-join{
  background:
    linear-gradient(180deg, rgba(6,4,14,.92) 0%, rgba(6,4,14,.96) 100%),
    url("../assets/backgrounds/promo/challenge-a-friend.webp");
  background-size:cover;
  background-position:center;
}

#screen-leaderboard{
  background:
    linear-gradient(180deg, rgba(6,4,14,.94) 0%, rgba(6,4,14,.97) 30%),
    url("../assets/backgrounds/promo/global-rivals-leaderboard.webp");
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
}

#screen-waitscore{
  background:
    linear-gradient(180deg, rgba(6,4,14,.93) 0%, rgba(6,4,14,.97) 100%),
    url("../assets/backgrounds/promo/loudest-wins-phone.webp");
  background-size:cover;
  background-position:center;
}

#screen-searching::before, #screen-matchfound::before, #screen-hostwait::before,
#screen-mic::before, #screen-calibrate::before,
#screen-hostjoin::before, #screen-join::before,
#screen-leaderboard::before,
#screen-waitscore::before{
  content:"";
  position:absolute;
  inset:0;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  pointer-events:none;
  z-index:0;
}
#screen-searching > *, #screen-matchfound > *, #screen-hostwait > *,
#screen-mic > *, #screen-calibrate > *,
#screen-hostjoin > *, #screen-join > *,
#screen-leaderboard > *,
#screen-waitscore > *{
  position:relative;
  z-index:1;
}

/* ============================================================
   REWARD SHOP + DAILY ETH RACE
   ============================================================ */
.rewards-shop-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:6px;
}
.rewards-shop-title{ font-weight:900; font-size:1.15rem; color:var(--W,#fff); }
.rewards-balance-chip{
  font-weight:800; font-size:.85rem; color:var(--Y,#FFE600);
  background:var(--card,rgba(255,255,255,.05)); border:1px solid var(--border,rgba(255,255,255,.12));
  padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.rewards-balance-chip #rewards-balance{ color:var(--W,#fff); }
.rewards-shop-sub{ font-size:.82rem; color:rgba(255,255,255,.55); margin:0 0 14px; line-height:1.45; }
.rewards-shop-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px;
}
.reward-item{
  background:var(--card,rgba(255,255,255,.05)); border:1px solid var(--border,rgba(255,255,255,.12));
  border-radius:16px; padding:14px 10px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:transform .12s ease, border-color .12s ease;
}
.reward-item:hover{ transform:translateY(-3px); border-color:var(--Y,#FFE600); }
.reward-item.is-owned{ opacity:.72; border-color:rgba(0,255,135,.5); }
.reward-item-icon{ width:52px; height:52px; }
.reward-item-icon img{ width:100%; height:100%; object-fit:contain; }
.reward-item-cat{ font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.4); font-weight:800; }
.reward-item-name{ font-weight:800; font-size:.86rem; color:var(--W,#fff); }
.reward-item-cost{ font-size:.78rem; font-weight:800; color:var(--Y,#FFE600); }
.reward-item-btn{
  margin-top:4px; width:100%; border:none; cursor:pointer;
  padding:8px 6px; border-radius:10px; font-weight:800; font-size:.8rem;
  background:linear-gradient(135deg,var(--Y,#FFE600),#ffb800); color:#1a1400;
  transition:filter .12s ease;
}
.reward-item-btn:hover{ filter:brightness(1.08); }
.reward-item-btn.cant, .reward-item-btn:disabled{
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.4); cursor:not-allowed;
}
.reward-item-btn.owned{ background:rgba(0,255,135,.15); color:#8effc4; cursor:default; }
.rewards-token-soon{
  margin-top:18px; display:flex; align-items:center; gap:14px; cursor:pointer;
  background:linear-gradient(135deg,rgba(255,230,0,.08),rgba(255,140,0,.05));
  border:1px dashed rgba(255,230,0,.4); border-radius:16px; padding:14px 16px;
  transition:border-color .12s ease;
}
.rewards-token-soon:hover{ border-color:var(--Y,#FFE600); }
.rewards-token-soon-icon{ width:44px; height:44px; flex:0 0 auto; }
.rewards-token-soon-title{ font-weight:800; color:var(--W,#fff); font-size:.9rem; }
.rewards-token-soon-sub{ font-size:.75rem; color:rgba(255,255,255,.5); margin-top:2px; }

/* ---- Daily ETH race ---- */
.daily-race-card{
  background:linear-gradient(135deg,rgba(0,194,255,.08),rgba(157,0,255,.06));
  border:1px solid rgba(0,194,255,.35); border-radius:18px;
  padding:14px 16px; margin-bottom:18px;
}
.daily-race-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.daily-race-title{ font-weight:900; font-size:1.05rem; color:var(--W,#fff); }
.daily-race-reset{ font-size:.78rem; color:rgba(255,255,255,.6); font-weight:700; }
.daily-race-reset #daily-countdown{ color:var(--Y,#FFE600); font-variant-numeric:tabular-nums; }
.daily-race-prizes{ display:flex; gap:8px; margin:10px 0 12px; }
.daily-prize-pill{
  font-weight:800; font-size:.76rem; padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--border,rgba(255,255,255,.14));
}
.daily-prize-pill.gold{ color:#ffd94b; border-color:rgba(255,217,75,.5); }
.daily-prize-pill.silver{ color:#d7dde6; border-color:rgba(215,221,230,.4); }
.daily-race-list{ display:flex; flex-direction:column; gap:6px; }
.daily-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:12px; background:rgba(0,0,0,.22);
}
.daily-row.win{ background:rgba(255,217,75,.08); border:1px solid rgba(255,217,75,.25); }
.daily-row.me{ outline:1.5px solid var(--Y,#FFE600); }
.daily-rank{ width:28px; font-weight:900; text-align:center; }
.daily-avatar{ font-size:1.1rem; }
.daily-name{ flex:1; font-weight:700; font-size:.85rem; color:var(--W,#fff); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.daily-pts{ font-weight:800; font-size:.8rem; color:var(--Y,#FFE600); white-space:nowrap; }
.daily-prize{ font-weight:800; font-size:.72rem; color:#ffd94b; white-space:nowrap; }
.daily-my-rank{ margin-top:10px; font-size:.8rem; font-weight:700; color:rgba(255,255,255,.7); text-align:center; }
.daily-elig{ margin-top:8px; font-size:.76rem; color:rgba(255,255,255,.6); text-align:center; }
.daily-elig a{ color:var(--Y,#FFE600); font-weight:800; }
.daily-empty, .daily-loading{ text-align:center; padding:16px; color:rgba(255,255,255,.4); font-weight:700; font-size:.82rem; }