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

/* ============================================================
   SCREENS
   ============================================================ */
.screen{
  display:none;flex-direction:column;align-items:center;
  justify-content:center;min-height:100vh;
  padding:28px 18px;gap:12px;text-align:center;position:relative;
  animation:screen-fade-in .32s cubic-bezier(.16,1,.3,1) both;
}
.screen.tall{justify-content:flex-start;padding-top:60px;}
@keyframes screen-fade-in{
  0%{opacity:0;transform:translateY(10px) scale(.99);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}


/* ============================================================
   SIDEBAR NAVIGATION
   ============================================================ */
#app-sidebar{
  width:264px;min-width:264px;height:100vh;flex-shrink:0;
  background:linear-gradient(180deg,rgba(8,8,14,.99) 0%,rgba(12,10,24,.99) 100%);
  border-right:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;overflow:hidden;
  z-index:10;
  box-shadow:2px 0 24px rgba(0,0,0,.4);
}
.sidebar-logo{
  padding:24px 20px 20px;display:flex;align-items:center;gap:13px;
  border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;
}
.sidebar-logo-icon{font-size:2rem;animation:title-pulse 2s ease-in-out infinite;}
.sidebar-logo-text{
  font-family:'Luckiest Guy',sans-serif;font-size:1.22rem;
  color:var(--Y);letter-spacing:1px;text-shadow:2px 2px 0 var(--R);
  display:block;line-height:1.1;
}
.sidebar-logo-sub{
  font-size:.58rem;color:rgba(255,255,255,.28);font-weight:900;
  letter-spacing:.8px;text-transform:uppercase;display:block;margin-top:3px;
}
.sidebar-nav{
  flex:1;display:flex;flex-direction:column;padding:16px 12px;gap:5px;
  overflow-y:auto;
}
.sidebar-nav::-webkit-scrollbar{display:none;}
.nav-item{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  border-radius:12px;cursor:pointer;
  border:1.5px solid transparent;
  font-family:'Luckiest Guy',sans-serif;font-size:.9rem;letter-spacing:.4px;
  color:rgba(255,255,255,.4);
  transition:background .18s,color .18s,border-color .18s,transform .1s;
  user-select:none;
  position:relative;overflow:hidden;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85);transform:translateX(2px);}
.nav-item.active{
  background:linear-gradient(135deg,rgba(255,230,0,.14),rgba(255,230,0,.04));
  border-color:rgba(255,230,0,.24);
  color:var(--Y);
  box-shadow:inset 3px 0 0 var(--Y),0 4px 18px rgba(255,230,0,.1);
  transform:translateX(2px);
}
.nav-item.active .nav-icon{filter:drop-shadow(0 0 6px rgba(255,230,0,.5));}
.nav-icon{font-size:1.2rem;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;text-align:center;flex-shrink:0;}
.nav-label{flex:1;}
.nav-section-divider{height:1px;background:rgba(255,255,255,.06);margin:9px 6px;}
.sidebar-bottom{
  padding:10px 8px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:7px;flex-shrink:0;
}
.sidebar-profile-mini{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:10px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.sidebar-avatar{
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  border:1.5px solid rgba(255,230,0,.3);flex-shrink:0;overflow:hidden;
}
.sidebar-user-info{flex:1;min-width:0;}
.sidebar-username{
  font-family:'Luckiest Guy',sans-serif;font-size:.76rem;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
}
.sidebar-pts{font-size:.58rem;color:var(--Y);font-weight:900;display:block;margin-top:1px;}
.sidebar-logout-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:7px;border-radius:9px;
  background:rgba(255,45,45,.07);border:1px solid rgba(255,45,45,.18);
  color:rgba(255,100,100,.65);font-family:'Luckiest Guy',sans-serif;
  font-size:.7rem;letter-spacing:.4px;cursor:pointer;
  transition:background .15s;width:100%;
}
.sidebar-logout-btn:hover{background:rgba(255,45,45,.14);}


/* ============================================================
   CONTENT AREA
   ============================================================ */
#content-area{
  flex:1;height:100vh;display:flex;flex-direction:column;overflow:hidden;
  position:relative;
}
.content-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.25);backdrop-filter:blur(10px);
  flex-shrink:0;z-index:5;
}
.content-title{
  font-family:'Luckiest Guy',sans-serif;font-size:1rem;
  letter-spacing:.8px;color:rgba(255,255,255,.85);
  display:flex;align-items:center;gap:8px;
}
.content-title-icon{width:20px;height:20px;object-fit:contain;flex-shrink:0;}
.topbar-right{display:flex;align-items:center;gap:8px;}
.status-mini-pills{display:flex;align-items:center;gap:4px;}
.smp{
  font-family:'Luckiest Guy',sans-serif;font-size:.6rem;letter-spacing:.3px;
  color:rgba(255,255,255,.45);padding:4px 8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;display:flex;align-items:center;gap:3px;
}
.mobile-menu-btn{
  display:none;width:36px;height:36px;border-radius:9px;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.12);
  color:#fff;font-size:1rem;align-items:center;justify-content:center;cursor:pointer;
}


/* ============================================================
   PANELS
   ============================================================ */
.lobby-panel{
  display:none;flex:1;overflow-y:auto;overflow-x:hidden;
  padding:18px 18px;flex-direction:column;
}
.lobby-panel::-webkit-scrollbar{width:4px;}
.lobby-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:2px;}
.lobby-panel.panel-active{display:flex;}
@keyframes panel-in{from{opacity:0;transform:translateX(8px) scale(.985)}to{opacity:1;transform:translateX(0) scale(1)}}
.lobby-panel.panel-active{animation:panel-in .26s cubic-bezier(.16,1,.3,1) both;}

/* Glassmorphism cards */
.card, .profile-card, .mission-card, .world-play-card, .prog-card, .action-card,
.activity-panel, .chat-panel, .match-ticker, .room-row {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---- HOME PANEL GRID ---- */
.home-grid{display:flex;flex-direction:column;gap:14px;width:100%;}
@media(min-width:900px){
  .home-grid{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start;}
  .hg-left-col{display:flex;flex-direction:column;gap:14px;}
  .hg-mid-col{display:flex;flex-direction:column;gap:14px;}
  .hg-right-col{display:flex;flex-direction:column;gap:14px;}
}
@media(min-width:1280px){
  .home-grid{grid-template-columns:280px 1fr 260px;}
}

/* ---- WORLD PLAY PANEL ---- */
.worldplay-hero{
  background:linear-gradient(135deg,#0a2a0a,#0d3311 55%,#071509);
  border:1.5px solid rgba(0,255,135,.15);border-radius:20px;
  padding:28px 24px;text-align:center;position:relative;overflow:hidden;margin-bottom:18px;
}
.worldplay-hero::before{
  /* A rotating conic-gradient here used to have a visible hard seam
     (conic gradients always have one) that swept across the clipped
     card on every rotation — it read as a stutter/glitch, like the
     page was lagging. A soft pulsing radial glow has no seam, so it
     stays perfectly smooth. */
  content:'';position:absolute;inset:-20%;
  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 6s ease-in-out infinite;filter:blur(28px);
}
@keyframes hero-glow-pulse{
  0%,100%{opacity:.7;transform:scale(1);}
  50%{opacity:1;transform:scale(1.08);}
}
.worldplay-hero-inner{position:relative;z-index:1;}
.worldplay-find-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 44px;background:var(--G);color:var(--BK);
  border:none;border-radius:14px;
  font-family:'Luckiest Guy',sans-serif;font-size:1.2rem;letter-spacing:1px;
  cursor:pointer;margin:18px 0;
  box-shadow:4px 4px 0 rgba(0,0,0,.4),0 0 36px rgba(0,255,135,.22);
  transition:transform .08s,box-shadow .08s;
}
.worldplay-find-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(0,0,0,.4),0 0 48px rgba(0,255,135,.32);}
.worldplay-find-btn:active{transform:translate(2px,2px)!important;box-shadow:none!important;}
.worldplay-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px;}
.wp-stat-box{
  background:rgba(0,0,0,.3);border:1px solid rgba(0,255,135,.14);
  border-radius:12px;padding:10px 18px;text-align:center;min-width:90px;
}
.wp-stat-val{font-family:'Luckiest Guy',sans-serif;font-size:1.3rem;color:var(--G);}
.wp-stat-lbl{font-size:.58rem;color:rgba(255,255,255,.4);font-weight:900;letter-spacing:.4px;text-transform:uppercase;margin-top:2px;}
.wp-grid{display:grid;gap:14px;grid-template-columns:1fr;}
@media(min-width:900px){.wp-grid{grid-template-columns:1fr 1fr;}}
.match-history-list{display:flex;flex-direction:column;gap:5px;}
.mh-row{
  display:flex;align-items:center;gap:9px;padding:8px 11px;
  border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
}
.mh-result{
  font-family:'Luckiest Guy',sans-serif;font-size:.68rem;
  width:30px;text-align:center;padding:2px 4px;border-radius:6px;flex-shrink:0;
}
.mh-result.win{background:rgba(0,255,135,.14);color:var(--G);}
.mh-result.loss{background:rgba(255,45,45,.14);color:var(--R);}
.mh-result.draw{background:rgba(255,230,0,.12);color:var(--Y);}
.mh-opp{flex:1;font-family:'Luckiest Guy',sans-serif;font-size:.78rem;color:rgba(255,255,255,.7);}
.mh-pts{font-size:.68rem;color:var(--Y);font-weight:900;}

/* ---- PRIVATE MATCH PANEL ---- */
.private-panel-grid{display:grid;gap:14px;grid-template-columns:1fr;}
@media(min-width:900px){.private-panel-grid{grid-template-columns:1fr 1fr;}}

/* ---- PROFILE PANEL ---- */
.profile-panel-hero{
  border-radius:20px;padding:22px;background:var(--panel);
  border:1.5px solid var(--panel-bd);display:flex;flex-direction:column;gap:18px;
  margin-bottom:14px;
}
.profile-hero-top{display:flex;align-items:center;gap:16px;}
.profile-big-avatar-wrap{position:relative;width:76px;height:76px;flex-shrink:0;}
.profile-big-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;
}
.profile-big-ring::after{content:'';position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;background:#15151d;}
.profile-big-avatar{
  position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;background:#1a1a24;
  display:flex;align-items:center;justify-content:center;font-size:2.2rem;z-index:2;
  overflow:hidden;
}
/* Shared by every "my own avatar" slot (sidebar, home, profile, settings
   preview) — renderMyAvatarEls() in avatar.js injects this <img> in place
   of the emoji textContent whenever a photo has been uploaded. */
.my-avatar-photo{width:100%;height:100%;object-fit:cover;display:block;}
/* Uploaded photo inside any round list avatar (leaderboard, podium, home
   Top Players, match-found). Fills + crops to the circular slot. */
.list-avatar-photo{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.lb-avatar,.lb-preview-avatar,.podium-avatar{overflow:hidden;}

.avatar-photo-edit-btn{
  position:absolute;bottom:-2px;right:-2px;z-index:3;width:34px;height:34px;
  border-radius:50%;border:2px solid #15151d;background:var(--Y);color:#1a1200;
  font-size:.8rem;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
}
.avatar-photo-edit-btn:hover{filter:brightness(1.08);}

.profile-avatar-sub{font-size:.76rem;color:rgba(255,255,255,.45);font-weight:600;margin:-4px 0 10px;}
.profile-avatar-actions{display:flex;gap:8px;margin-bottom:12px;}

/* Settings panel's small avatar preview (next to nickname) needs its own
   fixed box so an injected photo <img> doesn't render at native size. */
#panel-settings-avatar{
  width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);
}

.profile-stats-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:14px;
}
@media(min-width:600px){.profile-stats-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:900px){.profile-stats-grid{grid-template-columns:repeat(4,1fr);}}
.profile-stat-box{
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.07);
  border-radius:12px;padding:11px 8px;text-align:center;
}
.profile-stat-val{font-family:'Luckiest Guy',sans-serif;font-size:1.25rem;color:#fff;line-height:1;}
.profile-stat-lbl{font-size:.56rem;color:rgba(255,255,255,.38);font-weight:900;letter-spacing:.4px;text-transform:uppercase;margin-top:4px;}

/* ---- MISSIONS & REWARDS PANELS ---- */
.missions-grid,.rewards-grid{display:grid;gap:14px;grid-template-columns:1fr;}
@media(min-width:900px){.missions-grid,.rewards-grid{grid-template-columns:1fr 1fr;}}
.mission-card,.reward-card{
  background:var(--panel);border:1.5px solid var(--panel-bd);
  border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:11px;
}
.mission-card-header{display:flex;align-items:center;justify-content:space-between;}
.mission-card-title{
  font-family:'Luckiest Guy',sans-serif;font-size:.86rem;letter-spacing:.4px;
  display:flex;align-items:center;gap:7px;
}
.mission-badge{
  font-family:'Luckiest Guy',sans-serif;font-size:.58rem;letter-spacing:.8px;
  padding:3px 9px;border-radius:20px;text-transform:uppercase;
}
.mission-badge.daily{background:rgba(0,194,255,.14);color:var(--B);border:1px solid rgba(0,194,255,.28);}
.mission-badge.weekly{background:rgba(139,92,246,.14);color:var(--V);border:1px solid rgba(139,92,246,.28);}
.reward-big{
  text-align:center;padding:18px;border-radius:14px;
  background:rgba(255,230,0,.05);border:1.5px solid rgba(255,230,0,.14);
}
.reward-amount{
  font-family:'Luckiest Guy',sans-serif;font-size:2.8rem;
  color:var(--Y);text-shadow:3px 3px 0 rgba(255,45,45,.28);line-height:1;
}
.streak-boxes{display:flex;gap:5px;flex-wrap:wrap;}
.streak-box{
  flex:1;min-width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;
  font-family:'Luckiest Guy',sans-serif;font-size:.68rem;color:rgba(255,255,255,.28);
}
.streak-box.done{background:rgba(0,255,135,.11);border-color:rgba(0,255,135,.28);color:var(--G);}
.streak-box.today{background:rgba(255,230,0,.13);border-color:var(--Y);color:var(--Y);box-shadow:0 0 10px rgba(255,230,0,.18);}


/* ============================================================
   SETTINGS PANEL — sliders, toggles, selects
   ============================================================ */
.settings-slider{
  -webkit-appearance:none;width:120px;height:5px;border-radius:4px;
  background:rgba(255,255,255,.12);outline:none;cursor:pointer;
}
.settings-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--Y);box-shadow:0 0 8px rgba(255,230,0,.5);cursor:pointer;
}
.slider-val{
  font-family:'Luckiest Guy',sans-serif;font-size:.72rem;color:var(--Y);
  min-width:36px;text-align:right;
}
.settings-select{
  font-family:'Luckiest Guy',sans-serif;font-size:.78rem;
  background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.18);
  border-radius:9px;padding:7px 12px;cursor:pointer;outline:none;
}
.settings-select option{background:#1a1a2e;color:#fff;}
.settings-toggle{
  width:46px;height:26px;border-radius:13px;cursor:pointer;
  background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.15);
  position:relative;transition:background .2s,border-color .2s;flex-shrink:0;
}
.settings-toggle.active{background:var(--G);border-color:var(--G);box-shadow:0 0 10px rgba(0,255,135,.35);}
.settings-toggle-knob{
  position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .2s;
}
.settings-toggle.active .settings-toggle-knob{transform:translateX(20px);}


/* ============================================================
   LEADERBOARD PANEL — podium + list
   ============================================================ */
.panel-lb-podium{
  display:flex;align-items:flex-end;justify-content:center;gap:12px;
  padding:20px 0 10px;
}
.podium-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;max-width:120px;
}
.podium-avatar{width:52px;height:52px;border-radius:50%;font-size:1.8rem;display:flex;align-items:center;justify-content:center;margin:0 auto;}
.podium-item.rank1 .podium-avatar{width:64px;height:64px;font-size:2.2rem;box-shadow:0 0 22px rgba(255,215,0,.4);border:2px solid #FFD700;}
.podium-item.rank2 .podium-avatar{box-shadow:0 0 12px rgba(192,192,192,.3);border:2px solid #C0C0C0;}
.podium-item.rank3 .podium-avatar{box-shadow:0 0 12px rgba(205,127,50,.3);border:2px solid #CD7F32;}
.podium-name{font-family:'Luckiest Guy',sans-serif;font-size:.78rem;color:#fff;text-align:center;max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.podium-pts{font-family:'Luckiest Guy',sans-serif;font-size:.88rem;color:var(--Y);}
.podium-stand{
  border-radius:10px 10px 0 0;width:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Luckiest Guy',sans-serif;font-size:1.4rem;
}
.podium-item.rank1 .podium-stand{height:70px;background:linear-gradient(180deg,rgba(255,215,0,.25),rgba(255,215,0,.05));border:1px solid rgba(255,215,0,.3);}
.podium-item.rank2 .podium-stand{height:52px;background:linear-gradient(180deg,rgba(192,192,192,.2),rgba(192,192,192,.04));border:1px solid rgba(192,192,192,.2);}
.podium-item.rank3 .podium-stand{height:40px;background:linear-gradient(180deg,rgba(205,127,50,.2),rgba(205,127,50,.04));border:1px solid rgba(205,127,50,.2);}
.podium-loading{text-align:center;padding:24px;font-size:.78rem;color:rgba(255,255,255,.3);font-weight:800;width:100%;}
.panel-lb-my-rank{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:rgba(255,230,0,.07);border:1.5px solid rgba(255,230,0,.2);
  border-radius:12px;margin-top:8px;
}


/* ============================================================
   ENHANCED NAV + SIDEBAR GLOW
   ============================================================ */
.nav-item{position:relative;}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:65%;border-radius:0 2px 2px 0;
  background:var(--Y);box-shadow:0 0 10px var(--Y);
}
.nav-item:hover .nav-icon{transform:scale(1.15);}
.nav-icon{transition:transform .15s;}


/* ============================================================
   REWARDS PANEL — coming soon
   ============================================================ */
.rewards-coming-soon{
  text-align:center;padding:40px 20px;display:flex;flex-direction:column;align-items:center;gap:16px;
}
.rewards-cs-icon{font-size:4rem;width:80px;height:80px;display:flex;align-items:center;justify-content:center;animation:mic-bounce 2s ease-in-out infinite;}
.rewards-cs-title{font-family:'Luckiest Guy',sans-serif;font-size:2rem;color:var(--Y);text-shadow:3px 3px 0 var(--R);}
.rewards-cs-sub{font-size:.92rem;color:rgba(255,255,255,.5);font-weight:800;max-width:340px;line-height:1.5;}
.rewards-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:16px;margin-top:14px;width:100%;max-width:820px;}
.rewards-preview-card{
  border-radius:18px;padding:24px 16px;text-align:center;
  background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;align-items:center;gap:11px;
  transition:border-color .2s,transform .2s;
}
.rewards-preview-card:hover{border-color:rgba(255,230,0,.25);transform:translateY(-2px);}
.rpc-icon{font-size:2.6rem;width:64px;height:64px;margin:0 auto;display:flex;align-items:center;justify-content:center;}
.rpc-name{font-family:'Luckiest Guy',sans-serif;font-size:.84rem;color:rgba(255,255,255,.6);letter-spacing:.3px;}
.rpc-lock{font-size:.64rem;color:rgba(255,255,255,.25);font-weight:800;margin-top:2px;}
.rewards-coming-badge{
  font-family:'Luckiest Guy',sans-serif;font-size:.72rem;letter-spacing:1.5px;
  padding:8px 22px;border-radius:30px;
  background:linear-gradient(135deg,rgba(255,230,0,.15),rgba(255,107,214,.15));
  border:1.5px solid rgba(255,230,0,.3);color:var(--Y);
  animation:glow-pulse 2s ease-in-out infinite;
}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 10px rgba(255,230,0,.15)}50%{box-shadow:0 0 22px rgba(255,230,0,.35)}}


/* ============================================================
   BARK COIN — premium Web3 "Coming Soon" token page
   ============================================================ */
.bc-wrap{
  position:relative;text-align:center;padding:36px 16px 44px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  width:100%;margin:0 auto;overflow:hidden;
}
.bc-bg-glow{
  position:absolute;inset:-25%;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 22% 18%,rgba(255,205,0,.32),transparent 55%),
    radial-gradient(circle at 80% 12%,rgba(0,194,255,.22),transparent 50%),
    radial-gradient(circle at 78% 78%,rgba(255,80,180,.22),transparent 50%),
    radial-gradient(circle at 15% 80%,rgba(139,92,246,.2),transparent 55%),
    radial-gradient(circle at 50% 45%,rgba(255,150,0,.1),transparent 60%);
  animation:bc-bg-drift 14s ease-in-out infinite alternate;
}
@keyframes bc-bg-drift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-3%,3%) scale(1.08);}}
.bc-grid-overlay{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:
    linear-gradient(rgba(255,230,0,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,230,0,.05) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 30%,transparent 80%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 30%,transparent 80%);
}
.bc-sparkle{position:absolute;border-radius:50%;background:#FFE65A;box-shadow:0 0 6px 2px rgba(255,230,90,.8);opacity:0;pointer-events:none;animation:bc-sparkle-pop 2.6s ease-in-out infinite;z-index:1;}
@keyframes bc-sparkle-pop{0%{opacity:0;transform:scale(0);}30%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(.3) translateY(-14px);}}

/* coin stage with orbiting rings + rotating shine */
.bc-coin-stage{position:relative;width:180px;height:180px;flex:none;z-index:1;animation:bc-coin-float 3.2s ease-in-out infinite;}
@keyframes bc-coin-float{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-12px) rotate(2deg);}}
.bc-coin-ring{
  position:absolute;inset:-18px;border-radius:50%;
  border:1.5px dashed rgba(255,230,0,.3);
  animation:bc-ring-spin 16s linear infinite;
}
.bc-coin-ring.r2{inset:-34px;border-color:rgba(0,194,255,.22);animation-duration:24s;animation-direction:reverse;}
@keyframes bc-ring-spin{to{transform:rotate(360deg);}}
.bc-coin-stage .bark-coin-icon{width:100%;height:100%;border-width:5px;box-shadow:0 0 0 3px #B8860B,0 0 46px 10px rgba(255,190,40,.55),inset 0 0 18px rgba(255,240,200,.55),inset 0 -8px 14px rgba(120,60,0,.35);}
.bc-coin-stage .bark-mascot-img{
  width:100%;height:100%;border:5px solid #FFD24A;
  box-shadow:0 0 0 3px #B8860B,0 0 46px 10px rgba(255,190,40,.55),inset 0 0 18px rgba(255,240,200,.35);
}
.bc-coin-shine{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;}
.bc-coin-shine::after{content:'';position:absolute;top:-50%;left:-150%;width:60%;height:200%;background:linear-gradient(75deg,transparent,rgba(255,255,255,.55),transparent);animation:bc-shine-sweep 3.6s ease-in-out infinite;}
@keyframes bc-shine-sweep{0%{left:-150%;}55%{left:150%;}100%{left:150%;}}

.bc-title{font-family:'Luckiest Guy',sans-serif;font-size:clamp(2.2rem,6vw,3.6rem);letter-spacing:2px;color:var(--Y);text-shadow:3px 3px 0 var(--R),0 0 30px rgba(255,210,40,.4);z-index:1;}
.bc-badge{
  font-family:'Luckiest Guy',sans-serif;font-size:.85rem;letter-spacing:1.8px;padding:9px 24px;border-radius:30px;
  background:linear-gradient(135deg,rgba(255,230,0,.2),rgba(255,107,214,.18));
  border:1.5px solid rgba(255,230,0,.4);color:var(--Y);
  box-shadow:0 0 0 1px rgba(255,230,0,.08), 0 0 18px rgba(255,210,40,.25);
  animation:glow-pulse 2s ease-in-out infinite;z-index:1;
}
.bc-sub{font-size:1rem;color:rgba(255,255,255,.65);font-weight:600;max-width:560px;line-height:1.5;z-index:1;}

/* conversion card — premium neon glass */
.bc-glass-card{
  position:relative;width:100%;max-width:580px;border-radius:24px;padding:26px 32px;z-index:1;
  background:
    radial-gradient(circle at 15% 0%,rgba(255,205,0,.14),transparent 55%),
    radial-gradient(circle at 100% 100%,rgba(0,194,255,.1),transparent 55%),
    linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  border:1.5px solid rgba(255,230,0,.4);
  box-shadow:0 10px 38px rgba(0,0,0,.45), 0 0 0 1px rgba(255,230,0,.06), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(10px);
  text-align:center;
  transition:transform .25s,box-shadow .25s;
  overflow:hidden;
}
.bc-glass-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(255,200,40,.22), inset 0 1px 0 rgba(255,255,255,.09);}
.bc-conv-label{font-family:'Luckiest Guy',sans-serif;font-size:.8rem;letter-spacing:2px;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:12px;}
.bc-conv-row{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;}
.bc-conv-num{font-family:'Luckiest Guy',sans-serif;font-size:3rem;line-height:1;}
.bc-conv-arrow{
  font-family:'Luckiest Guy',sans-serif;font-size:2rem;color:var(--Y);
  text-shadow:2px 2px 0 var(--R),0 0 14px rgba(255,210,40,.5);
  animation:bc-arrow-pulse 1.6s ease-in-out infinite;
}
@keyframes bc-arrow-pulse{0%,100%{transform:translateX(0);opacity:1;}50%{transform:translateX(5px);opacity:.55;}}
.bc-footrate{margin-top:12px;font-size:.75rem;color:rgba(255,255,255,.35);font-weight:600;}
.bc-conv-row .bc-conv-mascot{
  border:2px solid #FFD24A;
  box-shadow:0 0 0 1.5px #B8860B, 0 0 12px 2px rgba(255,190,40,.55), inset 0 0 6px rgba(255,240,200,.4);
}

/* feature cards */
.bc-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px;width:100%;max-width:1200px;z-index:1;}
.bc-feature-card{
  --fc:255,205,0; /* per-card accent color, overridden by modifier classes below */
  border-radius:18px;padding:22px 20px 18px;text-align:left;
  background:linear-gradient(160deg,rgba(var(--fc),.1),rgba(255,255,255,.02) 55%);
  border:1.5px solid rgba(var(--fc),.28);
  display:flex;flex-direction:column;gap:6px;
  transition:border-color .2s,transform .22s,box-shadow .22s,background .2s;
  position:relative;overflow:hidden;backdrop-filter:blur(6px);
}
.bc-feature-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(var(--fc),.9),transparent);
}
.bc-feature-card::after{
  content:'';position:absolute;top:-50%;left:-130%;width:50%;height:220%;
  background:linear-gradient(75deg,transparent,rgba(255,255,255,.08),transparent);
  transition:left .6s ease;pointer-events:none;
}
.bc-feature-card:hover::after{left:150%;}
.bc-feature-card:hover{
  border-color:rgba(var(--fc),.65);transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(var(--fc),.22), 0 0 0 1px rgba(var(--fc),.1);
  background:linear-gradient(160deg,rgba(var(--fc),.16),rgba(255,255,255,.02) 55%);
}
.bc-feature-card--gold{--fc:255,205,0;}
.bc-feature-card--violet{--fc:139,92,246;}
.bc-feature-card--cyan{--fc:0,194,255;}
.bc-feature-card--pink{--fc:255,107,214;}
.bc-feature-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.bc-feature-icon{
  width:50px;height:50px;flex:none;padding:8px;border-radius:14px;
  background:radial-gradient(circle,rgba(var(--fc),.22),rgba(var(--fc),.05) 70%);
  border:1px solid rgba(var(--fc),.3);
}
.bc-feature-name{font-family:'Luckiest Guy',sans-serif;font-size:1.05rem;color:#fff;letter-spacing:.3px;}
.bc-feature-list{list-style:none;display:flex;flex-direction:column;gap:5px;margin-top:3px;}
.bc-feature-list li{
  font-size:.82rem;color:rgba(255,255,255,.65);font-weight:600;line-height:1.4;
  padding-left:14px;position:relative;
}
.bc-feature-list li::before{
  content:'';position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;
  background:rgb(var(--fc));box-shadow:0 0 6px rgba(var(--fc),.7);
}
.bc-feature-soon{align-self:flex-start;font-size:.68rem;font-weight:700;color:rgb(var(--fc));background:rgba(var(--fc),.14);border:1px solid rgba(var(--fc),.35);border-radius:20px;padding:3px 11px;margin-top:2px;letter-spacing:.4px;}
.bc-feature-soon.planned{color:rgb(var(--fc));background:rgba(var(--fc),.14);border-color:rgba(var(--fc),.35);}
.bc-footnote{font-size:.82rem;color:rgba(255,255,255,.35);font-weight:600;margin-top:6px;z-index:1;}

/* Bark Coin now uses larger art/type than before, so it no longer
   reliably fits one viewport on desktop — it uses the same
   .lobby-panel overflow-y:auto scroll as every other panel instead
   of the old fixed-height/no-scroll special case. */

@media (max-width:480px){
  .bc-wrap{padding:30px 10px 24px;gap:12px;}
  .bc-coin-stage{width:126px;height:126px;}
  .bc-coin-ring{inset:-12px;}
  .bc-coin-ring.r2{inset:-22px;}
  .bc-glass-card{padding:22px 16px;border-radius:20px;}
  .bc-conv-num{font-size:2.2rem;}
  .bc-feature-grid{grid-template-columns:1fr;}
}
@media (min-width:481px) and (max-width:767px){
  .bc-feature-grid{grid-template-columns:repeat(2,1fr);}
}


#chat-side-panel{
  width:280px;min-width:280px;height:100vh;flex-shrink:0;
  background:linear-gradient(180deg,rgba(8,8,12,.97),rgba(12,10,22,.97));
  border-left:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;overflow:hidden;
  transition:width .25s cubic-bezier(.4,0,.2,1),min-width .25s cubic-bezier(.4,0,.2,1),opacity .2s;
}
#chat-side-panel.chat-collapsed{width:0;min-width:0;opacity:0;pointer-events:none;}
.chat-panel-header{
  padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.chat-panel-title{
  font-family:'Luckiest Guy',sans-serif;font-size:.78rem;letter-spacing:.4px;
  color:rgba(255,255,255,.65);display:flex;align-items:center;gap:6px;
}
.chat-collapse-btn{
  width:34px;height:34px;border-radius:7px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);
  cursor:pointer;font-size:.75rem;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.chat-collapse-btn:hover{background:rgba(255,255,255,.14);}


/* ============================================================
   HYPE BACKGROUND ART — dog select + lobby ambience
   ============================================================ */
#screen-dogselect{
  background:
    linear-gradient(180deg, rgba(6,4,14,.86) 0%, rgba(6,4,14,.94) 55%),
    url("../assets/backgrounds/promo/pick-your-dog.webp");
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
}

#screen-lobby{
  background:
    linear-gradient(180deg, rgba(6,4,14,.90) 0%, rgba(6,4,14,.96) 100%),
    url("../assets/backgrounds/promo/enter-the-arena.webp");
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
}

/* Bark Coin: verified-points line (server-verified, the only convertible balance) */
.bc-verified{margin-top:12px;font-size:.9rem;font-weight:700;color:#8effc4;}
.bc-verified b{color:#fff;font-size:1.05rem;}
.bc-verified-sub{display:block;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.45);margin-top:2px;}

.bc-claim{margin:10px 0;padding:12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.bc-claim-row{display:flex;justify-content:space-between;font-weight:800;padding:3px 0}
.bc-claim-note{font-size:.72rem;color:rgba(255,255,255,.5);margin:6px 0 10px}
#bc-claim-btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- How-to-play tutorial (js/tutorial.js) ---------- */
.tut-overlay{position:fixed;inset:0;z-index:10050;background:rgba(6,6,12,.82);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:18px;}
.tut-card{width:100%;max-width:420px;background:#14141c;border:1.5px solid var(--panel-bd,rgba(255,255,255,.12));
  border-radius:22px;padding:22px 22px 16px;text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.85);
  animation:tut-pop .25s ease-out;}
@keyframes tut-pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.tut-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.tut-tag{font-size:.68rem;font-weight:900;letter-spacing:.12em;color:var(--Y,#ffe600);}
.tut-step{font-size:.72rem;font-weight:800;color:rgba(255,255,255,.4);}
.tut-icon{font-size:3.2rem;line-height:1;margin:6px 0 10px;filter:drop-shadow(0 6px 14px rgba(255,230,0,.25));}
.tut-title{font-family:'Luckiest Guy',sans-serif;font-size:1.45rem;color:#fff;margin-bottom:8px;letter-spacing:.02em;}
.tut-body{font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.72);min-height:84px;}
.tut-body b{color:#fff;}
.tut-dots{display:flex;justify-content:center;gap:7px;margin:16px 0 14px;}
.tut-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);transition:all .2s;}
.tut-dot.on{background:var(--Y,#ffe600);width:22px;border-radius:5px;}
.tut-actions{display:flex;gap:10px;}
.tut-btn{flex:1;padding:13px 10px;border-radius:14px;border:1.5px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  color:#fff;font-weight:900;font-size:.9rem;cursor:pointer;font-family:inherit;}
.tut-btn.tut-primary{background:var(--Y,#ffe600);color:#1a1200;border-color:transparent;box-shadow:0 8px 24px rgba(255,230,0,.25);}
.tut-btn:active{transform:scale(.97);}
.tut-skip{margin-top:10px;background:none;border:0;color:rgba(255,255,255,.4);font-weight:700;font-size:.78rem;cursor:pointer;font-family:inherit;}
.howto-btn{width:100%;margin-top:10px;padding:12px;border-radius:14px;border:1.5px dashed rgba(255,230,0,.35);
  background:rgba(255,230,0,.06);color:var(--Y,#ffe600);font-weight:900;font-size:.85rem;cursor:pointer;font-family:inherit;}
.howto-btn:hover{background:rgba(255,230,0,.12);}


/* ---------- mobile bottom tab bar (index.html #bottom-tabs, router.js switchPanel) ---------- */
.bottom-tabs{display:none;}
@media(max-width:900px){
  .bottom-tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:65;
    background:rgba(12,12,20,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);
    padding:6px 4px max(6px, env(safe-area-inset-bottom));}
  .bottom-tab{flex:1;background:none;border:0;color:rgba(255,255,255,.55);font-family:inherit;font-weight:900;
    font-size:.62rem;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;min-height:48px;
    cursor:pointer;border-radius:12px;letter-spacing:.04em;}
  .bottom-tab .bt-ico{font-size:1.25rem;line-height:1;}
  .bottom-tab.active{color:var(--Y,#ffe600);background:rgba(255,230,0,.08);}
  #content-area .lobby-panel{padding-bottom:96px;}
}
/* ---------- auth polish ---------- */
.auth-input-group{position:relative;}
.pw-eye{position:absolute;right:8px;bottom:6px;background:none;border:0;font-size:1rem;cursor:pointer;
  color:rgba(255,255,255,.7);padding:6px 8px;line-height:1;}
.auth-legal{font-size:.72rem;color:rgba(255,255,255,.45);margin-top:10px;text-align:center;}
.auth-legal a{color:rgba(255,255,255,.75);}
/* ---------- private panel note / recent matches ---------- */
.private-note{font-size:.78rem;color:rgba(255,255,255,.6);background:rgba(255,255,255,.05);
  border:1px dashed rgba(255,255,255,.18);border-radius:12px;padding:10px 12px;margin:0 0 12px;font-weight:700;}
.mh-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.04);
  margin-bottom:6px;font-size:.78rem;font-weight:800;}
.mh-row.win{border-left:3px solid var(--G,#7cff6b);} .mh-row.lose{border-left:3px solid #ff6b6b;} .mh-row.draw{border-left:3px solid rgba(255,255,255,.3);}
.mh-opp{flex:1;color:rgba(255,255,255,.75);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mh-pts{color:var(--Y,#ffe600);} .mh-time{color:rgba(255,255,255,.35);font-size:.68rem;}
/* room code must be copyable */
.room-code-display{user-select:text;-webkit-user-select:text;}
/* ---------- round screen on short phones (375x667) ---------- */
@media(max-width:480px) and (max-height:720px){
  #round-tip{display:none;}
  #peak-row{font-size:.72rem;gap:8px;}
  #live-leader{font-size:.72rem;padding:4px 10px;}
  #countdown-display{font-size:2.4rem;}
}

/* ---------- missions: claim button / owned items ---------- */
.mission-claim{background:var(--Y,#ffe600);color:#1a1200;border:0;border-radius:9px;padding:4px 9px;font-weight:900;font-size:.66rem;cursor:pointer;font-family:inherit;}
.mission-reward.claimed{color:var(--G,#7cff6b);}
.owned-items{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.owned-item{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:6px 10px;font-size:.72rem;font-weight:800;}
.owned-item img{width:22px;height:22px;object-fit:contain;}
.owned-empty{font-size:.74rem;color:rgba(255,255,255,.4);font-weight:700;}
/* tutorial: bark do / don't columns */
.tut-cols{display:flex;gap:8px;text-align:left;font-size:.78rem;line-height:1.5;}
.tut-cols > div{flex:1;border-radius:12px;padding:9px 10px;}
.tut-do{background:rgba(124,255,107,.08);border:1px solid rgba(124,255,107,.25);}
.tut-dont{background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.25);}
.tut-cols small{display:block;margin-top:6px;color:rgba(255,255,255,.5);font-size:.66rem;line-height:1.35;}
/* Bark AI load status chip (Home) */
.ai-status-chip{margin-top:8px;font-size:.7rem;font-weight:800;color:rgba(255,255,255,.55);text-align:center;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);}
.ai-status-chip.ok{color:var(--G,#7cff6b);border-color:rgba(124,255,107,.3);}
.ai-status-chip.warn{color:#ffb86b;border-color:rgba(255,184,107,.35);}
/* ---------- install (PWA) + update bar ---------- */
.install-btn{border-style:solid;border-color:rgba(124,255,107,.35);background:rgba(124,255,107,.07);color:var(--G,#7cff6b);}
.install-btn:disabled{opacity:.7;cursor:default;}
.install-steps{margin:0 0 16px;padding-left:20px;color:rgba(255,255,255,.8);font-size:.9rem;line-height:1.7;}
.install-ico{display:inline-block;border:1px solid rgba(255,255,255,.4);border-radius:6px;padding:0 6px;font-size:.85em;}
#bb-update-bar{position:fixed;left:50%;transform:translateX(-50%);top:max(12px, env(safe-area-inset-top));z-index:10300;
  background:#1b1b26;border:1px solid var(--Y,#ffe600);color:#fff;border-radius:14px;padding:10px 14px;font-weight:800;font-size:.8rem;
  display:flex;gap:10px;align-items:center;box-shadow:0 8px 30px rgba(0,0,0,.5);white-space:nowrap;}
#bb-update-bar button{background:var(--Y,#ffe600);color:#1a1200;border:0;border-radius:9px;padding:6px 10px;font-weight:900;cursor:pointer;font-family:inherit;}
/* the floating sound toggle must sit ABOVE the mobile tab bar, not on the Profile tab */
@media(max-width:900px){
  #sfx-toggle{bottom:calc(86px + env(safe-area-inset-bottom));right:12px;width:40px;height:40px;font-size:17px;}
}
/* bottom tabs use the same icon art as the sidebar nav */
@media(max-width:900px){
  .bottom-tab img.bt-ico{width:26px;height:26px;object-fit:contain;filter:grayscale(.35) brightness(.85);transition:filter .15s, transform .15s;}
  .bottom-tab.active img.bt-ico{filter:none;transform:scale(1.1);}
}
/* Bark Coin panel: the panel is a flex column; children with overflow:hidden
   (bc-wrap, bc-glass-card) were SHRINKING to fit the viewport instead of
   overflowing, which hid the conversion/claim card and killed scrolling. */
#panel-barkcoin.panel-active{display:block;} /* (id selector must only apply when active — .lobby-panel is display:none otherwise) */
.bc-wrap, .bc-wrap > *{flex-shrink:0;}

/* ---------- rematch / streak / weekly board ---------- */
.rematch-status{min-height:20px;margin-top:8px;font-weight:800;font-size:.85rem;color:var(--Y,#ffe600);text-align:center;position:relative;z-index:2;}
#rematch-btn:disabled{opacity:.7;cursor:default;}
.daily-streak{font-size:.72rem;font-weight:800;color:#ffb86b;margin:2px 0 10px;}
.lb-scope{display:flex;gap:8px;justify-content:center;margin:14px 0 6px;}
.lb-scope-btn{flex:0 1 160px;padding:10px 12px;border-radius:12px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.65);font-weight:900;font-family:inherit;font-size:.8rem;cursor:pointer;}
.lb-scope-btn.active{background:rgba(255,230,0,.12);border-color:rgba(255,230,0,.5);color:var(--Y,#ffe600);}
.lb-champs{text-align:center;font-size:.74rem;color:rgba(255,255,255,.6);margin-bottom:4px;min-height:1px;}
.lb-champs b{color:var(--Y,#ffe600);}
.champ-badge{font-size:.85em;filter:drop-shadow(0 0 4px rgba(255,230,0,.5));}

/* install help: SVG share glyph, in-app browser warning */
svg.install-ico{display:inline-block;vertical-align:-3px;border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:2px;box-sizing:content-box;}
.install-sub{display:block;font-size:.78em;color:rgba(255,255,255,.55);}
.install-warn{background:rgba(255,184,107,.1);border:1px solid rgba(255,184,107,.4);color:#ffcf9a;border-radius:12px;padding:10px 12px;font-size:.85rem;font-weight:700;margin-bottom:10px;line-height:1.45;}
.install-copy{width:100%;padding:11px;border-radius:12px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-weight:900;font-family:inherit;margin-bottom:12px;cursor:pointer;}
/* "Install for better play / Continue on web" popup */
.install-perks{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px;}
.install-perks li{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:10px 12px;font-size:.88rem;color:rgba(255,255,255,.85);}
.install-perks li.install-perk-bonus{border-color:rgba(255,230,0,.4);background:rgba(255,230,0,.08);color:#fff;}
.install-ask-actions{display:flex;flex-direction:column;gap:10px;}
.install-ask-actions .wallet-connect-btn{width:100%;padding:14px;font-size:1rem;}
.install-ask-web{width:100%;padding:12px;border-radius:12px;border:1.5px solid rgba(255,255,255,.18);background:transparent;color:rgba(255,255,255,.75);font-weight:900;font-family:inherit;font-size:.9rem;cursor:pointer;}

/* $BARK withdraw progress (toward the $5 minimum) */
.bc-progress{height:10px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin:10px 0 4px;}
.bc-progress-fill{height:100%;width:0;background:linear-gradient(90deg,#00FF87,#FFE600);transition:width .4s ease;}
.bc-progress-lbl{font-size:.7rem;font-weight:800;color:rgba(255,255,255,.6);text-align:left;}

/* Leaderboard (all screen sizes): the whole panel scrolls. With a full podium + "Your rank"
   the list used to get squeezed into a ~25px inner scroller on desktop, hiding the top players. */
#panel-leaderboard > *{ flex:0 0 auto; }
#panel-leaderboard .lb-list{ overflow:visible; max-height:none; }

/* tutorial v2: image art instead of emoji, fixed-height body so the card doesn't jump between steps */
.tut-icon{ height:104px; display:flex; align-items:center; justify-content:center; margin:2px 0 8px; }
.tut-icon img{ max-width:104px; max-height:104px; object-fit:contain; animation:tut-bob 2.4s ease-in-out infinite; }
@keyframes tut-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.tut-body{ min-height:112px; }
.tut-cols{ display:grid; grid-template-columns:1fr 1fr; gap:8px; text-align:left; font-size:.82rem; }
.tut-do, .tut-dont{ padding:9px 10px; border-radius:12px; line-height:1.55; }
.tut-do{ background:rgba(0,255,135,.08); border:1px solid rgba(0,255,135,.35); }
.tut-dont{ background:rgba(255,60,60,.08); border:1px solid rgba(255,60,60,.35); }
.tut-do > b{ color:#00ff87; } .tut-dont > b{ color:#ff6b6b; }
.tut-cols small{ color:rgba(255,255,255,.5); }
@media (max-height:640px){ .tut-icon{ height:70px; } .tut-icon img{ max-width:70px; max-height:70px; } .tut-card{ padding:16px 16px 12px; } }

/* ---- install popup (owner 2026-09-23): always closable — ✕ in the header, actions always on screen,
   body scrolls when the phone landscape viewport is shorter than the card ---- */
#install-ask{ overflow:hidden; }
#install-ask .tos-gate-card{ display:flex; flex-direction:column; max-height:calc(100dvh - 16px); max-height:calc(100vh - 16px); overflow:hidden; }
#install-ask .tos-gate-banner{ flex:0 0 auto; }
#install-ask .tos-gate-body{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; }
#install-ask .install-perks{ flex:0 0 auto; }
#install-ask .install-ask-actions{ position:sticky; bottom:0; flex:0 0 auto; padding-top:8px; background:inherit; }
#install-ask .tos-gate-title-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.install-ask-close{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; border:1.5px solid rgba(255,255,255,.22); background:rgba(0,0,0,.35); color:#fff; font-size:1.1rem; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.install-ask-web{ min-height:44px; }
@media (max-height:520px) and (orientation:landscape){
  #install-ask .tos-gate-banner{ display:none; }                 /* the mascot banner eats half the phone screen */
  #install-ask .tos-gate-card{ max-height:calc(100dvh - 8px); }
  #install-ask .install-perks li{ padding:6px 10px; font-size:.85rem; }
  #install-ask .install-ask-actions{ flex-direction:row; gap:8px; }
  #install-ask .install-ask-actions .wallet-connect-btn, #install-ask .install-ask-web{ padding:10px; font-size:.9rem; }
}