/* ══════════════════════════════════════════════
   ABYSS HUNTER — mature deep-sea shooting arcade
   ══════════════════════════════════════════════ */

:root{
  --bg-0:#02080f;
  --bg-1:#04121f;
  --bg-2:#082236;
  --teal:#28e0c8;
  --teal-dim:#137e75;
  --gold:#ffce63;
  --gold-deep:#e8a32c;
  --ink:#cfe9ef;
  --ink-dim:#6f93a0;
  --danger:#ff5d6c;
  --glass:rgba(8,30,46,.62);
  --glass-line:rgba(70,200,210,.22);
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{
  height:100%;width:100%;overflow:hidden;background:var(--bg-0);
  font-family:var(--font);color:var(--ink);
  user-select:none;-webkit-user-select:none;
  overscroll-behavior:none;
}

/* ── SHELL ── */
#shell{position:fixed;inset:0;display:flex;flex-direction:column;}

#game{
  flex:1;display:block;width:100%;height:100%;
  touch-action:none;cursor:crosshair;
}

/* ── TOP HUD ── */
#hud{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:linear-gradient(180deg,rgba(2,8,15,.85) 0%,rgba(2,8,15,0) 100%);
  pointer-events:none;
}
#hud .hud-block{pointer-events:none;}

#back-btn{
  pointer-events:auto;
  font-size:12px;letter-spacing:1.5px;font-weight:700;
  color:var(--ink-dim);text-decoration:none;
  padding:7px 12px;border:1px solid var(--glass-line);border-radius:9px;
  background:var(--glass);backdrop-filter:blur(6px);
  transition:.18s;white-space:nowrap;
}
#back-btn:hover{color:var(--teal);border-color:var(--teal);}

#mute-btn{
  pointer-events:auto;font-size:15px;line-height:1;cursor:pointer;
  padding:7px 10px;border:1px solid var(--glass-line);border-radius:9px;
  background:var(--glass);backdrop-filter:blur(6px);transition:.16s;
}
#mute-btn:hover{border-color:var(--teal);}
#mute-btn:active{transform:scale(.92);}

.hud-block{
  display:flex;flex-direction:column;align-items:center;
  min-width:62px;padding:5px 12px;border-radius:11px;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(6px);
}
.hud-label{font-size:9px;letter-spacing:2px;color:var(--ink-dim);font-weight:700;}
.hud-value{font-size:20px;font-weight:800;line-height:1.05;letter-spacing:.5px;
  font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(40,224,200,.4);}
.hud-value.gold{color:var(--gold);text-shadow:0 0 14px rgba(255,206,99,.45);}
.hud-value.combo{color:var(--teal);}

#exit-btn{
  pointer-events:auto;display:none;margin-left:8px;
  font-size:12px;letter-spacing:1.5px;font-weight:800;
  color:var(--danger);text-decoration:none;cursor:pointer;
  padding:8px 13px;border:1px solid rgba(255,93,108,.4);border-radius:9px;
  background:rgba(255,93,108,.08);backdrop-filter:blur(6px);
  transition:.16s;white-space:nowrap;
}
#exit-btn:hover{background:rgba(255,93,108,.2);border-color:var(--danger);
  box-shadow:0 0 18px rgba(255,93,108,.35);}
#exit-btn:active{transform:scale(.94);}
body.playing #exit-btn{display:block;}

.combo-block{margin-left:auto;transition:transform .15s,opacity .25s;opacity:.55;}
.combo-block.live{opacity:1;transform:scale(1.06);
  box-shadow:0 0 22px rgba(40,224,200,.35);border-color:var(--teal);}

/* ── WEAPON BAR ── */
#weapon-bar{
  position:absolute;bottom:14px;left:14px;z-index:5;
  display:flex;align-items:center;gap:12px;
  padding:7px 9px;border-radius:14px;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(8px);box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.wpn-btn{
  width:42px;height:42px;border-radius:12px;font-size:24px;font-weight:700;
  color:var(--ink);background:rgba(40,224,200,.08);
  border:1px solid var(--glass-line);cursor:pointer;transition:.14s;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.wpn-btn:hover{background:rgba(40,224,200,.2);border-color:var(--teal);color:var(--teal);}
.wpn-btn:active{transform:scale(.92);}
.wpn-info{display:flex;flex-direction:column;align-items:center;min-width:120px;}
.wpn-label{font-size:9px;letter-spacing:3px;color:var(--ink-dim);font-weight:700;}
.wpn-level{font-size:18px;font-weight:800;color:var(--gold);letter-spacing:1px;}
.wpn-cost{font-size:10px;color:var(--ink-dim);letter-spacing:.5px;}

/* HUD stats + weapon bar appear ONLY in-game; PORTAL button always shows */
.hud-block{display:none;}
body.playing .hud-block{display:flex;}
#weapon-bar{display:none;}
body.playing #weapon-bar{display:flex;}

/* ── OVERLAYS ── */
.overlay{
  position:fixed;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(circle at 50% 35%,rgba(8,40,60,.55),rgba(2,8,15,.93));
  backdrop-filter:blur(4px);
}
.overlay.hidden{display:none;}

/* ── BOOT / SPLASH ── */
.overlay.boot{
  background:transparent;backdrop-filter:none;
  transition:opacity .6s ease;flex-direction:column;
}
.overlay.boot.fade{opacity:0;pointer-events:none;}
.boot-inner{display:flex;flex-direction:column;align-items:center;
  animation:bootRise .9s cubic-bezier(.2,.8,.2,1) both;}
@keyframes bootRise{from{opacity:0;transform:translateY(24px) scale(.96);}to{opacity:1;transform:none;}}

#boot-logo-img{max-width:min(84vw,560px);display:none;
  filter:drop-shadow(0 12px 50px rgba(40,224,200,.5));
  animation:logoFloat 4s ease-in-out infinite;}
.boot-logo{
  font-size:clamp(54px,15vw,128px);font-weight:900;letter-spacing:5px;line-height:.84;
  text-align:center;color:#eafcff;
  text-shadow:0 0 50px rgba(40,224,200,.65),0 0 120px rgba(40,224,200,.35),0 8px 36px rgba(0,0,0,.7);
  animation:logoGlow 2.6s ease-in-out infinite,logoFloat 4s ease-in-out infinite;
}
.boot-logo span{display:block;color:var(--teal);
  background:linear-gradient(180deg,#aef9ec,#28e0c8 55%,#1aa897);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 60px rgba(40,224,200,.9);}
@keyframes logoGlow{0%,100%{filter:brightness(1);}50%{filter:brightness(1.2);}}
@keyframes logoFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.boot-sub{margin-top:18px;font-size:clamp(12px,2.6vw,17px);letter-spacing:8px;
  color:var(--teal);font-weight:700;opacity:.85;
  animation:subPulse 2.6s ease-in-out infinite;}
@keyframes subPulse{0%,100%{opacity:.5;}50%{opacity:.95;}}

/* dive transition — title plunges upward as the camera sinks */
.overlay.boot.dive .boot-inner{animation:diveUp .9s cubic-bezier(.5,0,.85,.3) forwards;}
@keyframes diveUp{to{transform:translateY(-72vh) scale(1.35);opacity:0;filter:blur(6px);}}

.loading-wrap{margin-top:44px;width:min(78vw,360px);}
.loading-track{height:6px;border-radius:6px;overflow:hidden;
  background:rgba(120,220,230,.12);box-shadow:inset 0 0 0 1px rgba(120,220,230,.15);}
.loading-fill{height:100%;width:0%;border-radius:6px;
  background:linear-gradient(90deg,#0b6f66,#28e0c8,#aef9ec);
  box-shadow:0 0 18px rgba(40,224,200,.7);transition:width .12s linear;}
.loading-row{display:flex;justify-content:space-between;margin-top:10px;
  font-size:11px;letter-spacing:1.5px;color:var(--ink-dim);font-variant-numeric:tabular-nums;}
#loading-pct{color:var(--teal);font-weight:800;}

.ov-card{
  width:min(440px,94vw);max-height:94vh;overflow:auto;text-align:center;
  padding:30px 26px;border-radius:22px;
  background:linear-gradient(165deg,rgba(10,34,52,.96),rgba(3,14,24,.97));
  border:1px solid var(--glass-line);
  box-shadow:0 20px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(120,220,230,.12);
}

.ov-logo{
  font-size:40px;font-weight:900;letter-spacing:3px;line-height:.95;
  color:var(--ink);text-shadow:0 0 30px rgba(40,224,200,.5);
}
.ov-logo span{display:block;color:var(--teal);font-size:40px;}
.ov-tag{margin:14px 0 18px;font-size:13px;line-height:1.5;color:var(--ink-dim);}

.ov-rules{
  text-align:left;display:flex;flex-direction:column;gap:9px;
  margin-bottom:18px;padding:14px;border-radius:14px;
  background:rgba(0,0,0,.22);border:1px solid rgba(70,200,210,.12);
}
.rule{font-size:12.5px;color:var(--ink);line-height:1.4;}
.rk{display:inline-block;min-width:54px;margin-right:8px;
  font-weight:800;font-size:11px;letter-spacing:1px;color:var(--gold);}

.ov-mode{display:flex;gap:10px;margin-bottom:20px;}
.mode-btn{
  flex:1;padding:12px 8px;border-radius:13px;cursor:pointer;transition:.16s;
  background:rgba(40,224,200,.05);border:1px solid var(--glass-line);
  display:flex;flex-direction:column;gap:3px;color:var(--ink);
}
.mode-btn .mode-name{font-size:13px;font-weight:800;letter-spacing:1px;}
.mode-btn .mode-sub{font-size:10px;color:var(--ink-dim);}
.mode-btn:hover{border-color:var(--teal-dim);}
.mode-btn.active{background:rgba(40,224,200,.16);border-color:var(--teal);
  box-shadow:0 0 22px rgba(40,224,200,.25);}
.mode-btn.active .mode-name{color:var(--teal);}

.big-btn{
  width:100%;padding:15px;border:none;border-radius:14px;cursor:pointer;
  font-size:17px;font-weight:900;letter-spacing:2px;color:#03161a;
  background:linear-gradient(135deg,var(--teal),#7ff0dd);
  box-shadow:0 8px 26px rgba(40,224,200,.4);transition:.16s;
}
.big-btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(40,224,200,.55);}
.big-btn:active{transform:translateY(0);}

.ov-best{margin-top:14px;font-size:12px;color:var(--ink-dim);}
.ov-best strong{color:var(--gold);}

/* ── LOBBY MENU ── */
.ov-card.lobby{width:min(560px,95vw);}
.menu-logo-img{display:none;max-width:min(76vw,360px);margin:0 auto 4px;
  filter:drop-shadow(0 8px 30px rgba(40,224,200,.45));}
.lobby .ov-tag{margin:8px 0 16px;}

.daily-card{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 14px;margin-bottom:16px;border-radius:13px;
  background:linear-gradient(135deg,rgba(40,224,200,.14),rgba(40,224,200,.04));
  border:1px solid var(--teal);box-shadow:0 0 22px rgba(40,224,200,.18);
}
.daily-card .dc-tag{font-size:10px;letter-spacing:3px;font-weight:800;color:var(--teal);}
.daily-card b{font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:1px;}
.daily-card .dc-sub{font-size:10.5px;color:var(--ink-dim);letter-spacing:.5px;}

.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px;}
.lobby-panel{padding:12px;border-radius:13px;text-align:left;
  background:rgba(0,0,0,.24);border:1px solid rgba(70,200,210,.12);}
.panel-title{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--ink-dim);
  text-align:center;margin-bottom:10px;}
.st-row{display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;color:var(--ink-dim);padding:4px 0;}
.st-row b{color:var(--ink);font-variant-numeric:tabular-nums;}
#menu-lb .lb-row{padding:5px 8px;font-size:12px;gap:7px;}
#menu-lb .lb-empty{font-size:11px;color:var(--ink-dim);text-align:center;padding:14px 4px;}

.how-to{margin-top:14px;text-align:left;}
.how-to summary{cursor:pointer;font-size:11px;letter-spacing:1.5px;color:var(--ink-dim);
  font-weight:700;text-align:center;list-style:none;padding:6px;}
.how-to summary::-webkit-details-marker{display:none;}
.how-to summary:hover{color:var(--teal);}
.how-to .ov-rules{margin-top:10px;margin-bottom:0;}

@media (max-width:480px){
  .lobby-grid{grid-template-columns:1fr;}
}

.ov-result{font-size:14px;letter-spacing:4px;color:var(--ink-dim);font-weight:700;}
.end-score{font-size:60px;font-weight:900;color:var(--teal);line-height:1.1;
  margin:6px 0 14px;text-shadow:0 0 36px rgba(40,224,200,.55);
  font-variant-numeric:tabular-nums;}
.end-line{font-size:13px;color:var(--ink-dim);margin-bottom:6px;}
.end-line strong{color:var(--gold);}
.end-pb-hit{color:var(--gold)!important;font-weight:800;letter-spacing:1px;}
.end-stats{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
  margin:14px 0 20px;}
.end-stats .es{display:flex;flex-direction:column;}
.end-stats .es b{font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums;}
.end-stats .es span{font-size:10px;letter-spacing:1.5px;color:var(--ink-dim);}
.menu-daily{margin:-6px 0 18px;font-size:11px;letter-spacing:1.5px;color:var(--teal);
  font-weight:700;opacity:.85;text-align:center;}
.end-daily{font-size:11.5px;letter-spacing:.5px;color:var(--teal);margin:2px 0 14px;}
.end-lb{margin:0 auto 18px;width:min(320px,90%);text-align:left;}
.lb-title{font-size:10px;letter-spacing:2px;color:var(--ink-dim);font-weight:800;
  text-align:center;margin-bottom:8px;}
.lb-row{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:9px;
  font-size:13px;margin-bottom:4px;background:rgba(0,0,0,.22);border:1px solid rgba(70,200,210,.10);}
.lb-row.me{background:rgba(40,224,200,.14);border-color:var(--teal);}
.lb-rk{min-width:22px;text-align:center;font-weight:800;}
.lb-nm{flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-row.me .lb-nm{color:var(--teal);font-weight:700;}
.lb-sc{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums;}

.text-link{display:inline-block;margin-top:14px;font-size:12px;color:var(--ink-dim);
  text-decoration:none;letter-spacing:1px;}
.text-link:hover{color:var(--teal);}

@media (max-width:480px){
  .hud-value{font-size:16px;}
  .hud-block{min-width:50px;padding:4px 8px;}
  .ov-logo,.ov-logo span{font-size:32px;}
  .end-score{font-size:48px;}
}


/* menu juice */
@keyframes panelIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes dailyGlow{0%,100%{box-shadow:0 0 18px rgba(40,224,200,.18);}50%{box-shadow:0 0 34px rgba(40,224,200,.45);}}
@keyframes shine{0%{left:-60%;}55%{left:140%;}100%{left:140%;}}
.lobby .daily-card{animation:panelIn .5s .05s both, dailyGlow 3.4s ease-in-out 1s infinite;overflow:hidden;}
.lobby .lobby-grid{animation:panelIn .5s .12s both;}
.lobby .ov-mode{animation:panelIn .5s .19s both;}
.lobby > .big-btn{animation:panelIn .5s .26s both;}
.big-btn{position:relative;overflow:hidden;}
.big-btn::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);animation:shine 3.4s ease-in-out infinite;pointer-events:none;}
.lobby-panel{transition:transform .15s,border-color .15s;}
.lobby-panel:hover{transform:translateY(-2px);border-color:rgba(40,224,200,.4);}

/* coins-to-HUD pop */
#hud-credits{display:inline-block;}
.coin-pop{animation:coinPop .32s ease;}
@keyframes coinPop{0%{transform:scale(1);}40%{transform:scale(1.28);filter:brightness(1.7);}100%{transform:scale(1);}}

/* LOBBY v2: clear background, left menu, right weekly board */
.overlay.lobby2{background:transparent!important;backdrop-filter:none!important;pointer-events:none;
  flex-direction:column;justify-content:flex-start;padding:3vh 4vw;}
.lobby2-inner{width:100%;max-width:1080px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;}
.lobby2 .menu-logo-img2{display:none;max-width:min(54vw,280px);pointer-events:none;filter:drop-shadow(0 8px 30px rgba(40,224,200,.5));}
.lobby2 .lobby2-logotext{font-size:clamp(32px,6.5vw,60px);}
.lobby2-cols{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;}
.lobby2-left{pointer-events:auto;width:min(300px,44%);display:flex;flex-direction:column;gap:11px;}
.lobby2-right{pointer-events:auto;width:min(320px,44%);background:var(--glass);border:1px solid var(--glass-line);border-radius:16px;padding:14px;backdrop-filter:blur(6px);}
.lobby2 .how-to{pointer-events:auto;}
.menu-cta{pointer-events:auto;width:100%;padding:15px;border:none;border-radius:14px;cursor:pointer;font-size:17px;font-weight:900;letter-spacing:2px;color:#03161a;background:linear-gradient(135deg,var(--teal),#7ff0dd);box-shadow:0 8px 26px rgba(40,224,200,.4);transition:.16s;}
.menu-cta:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(40,224,200,.55);}
.menu-cta.secondary{background:rgba(8,30,46,.72);color:var(--ink);border:1px solid var(--glass-line);box-shadow:none;display:flex;justify-content:center;align-items:center;gap:8px;font-size:14px;letter-spacing:1.5px;}
.menu-cta.secondary:hover{transform:translateY(-1px);border-color:var(--teal);}
.menu-cta .soon{font-size:9px;letter-spacing:1px;color:var(--gold);border:1px solid var(--gold);border-radius:6px;padding:1px 5px;}
.daily-mini{font-size:10.5px;letter-spacing:.5px;color:var(--teal);text-align:center;font-weight:700;background:rgba(40,224,200,.08);border:1px solid var(--glass-line);border-radius:10px;padding:7px;}
.soon-msg{font-size:11px;color:var(--gold);text-align:center;height:14px;opacity:0;transition:opacity .2s;letter-spacing:.5px;}
.soon-msg.show{opacity:1;}
.weekly-lb{max-height:240px;overflow:auto;}
.weekly-lb .lb-empty{font-size:11px;color:var(--ink-dim);text-align:center;padding:24px 6px;}
@media (max-width:560px){ .lobby2-cols{flex-direction:column;align-items:stretch;} .lobby2-left,.lobby2-right{width:100%;} }

/* daily reward + victory confetti + prize */
.ov-card{position:relative;}
.ov-card.record{box-shadow:0 0 60px rgba(255,206,99,.5),0 20px 70px rgba(0,0,0,.6);}
.confetti-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:22px;}
.confetti{position:absolute;top:-18px;width:8px;height:14px;border-radius:2px;animation:confFall linear forwards;}
@keyframes confFall{from{transform:translateY(-18px) rotate(0);}to{transform:translateY(560px) rotate(720deg);}}
.dr-claim{width:100%;padding:11px;border:none;border-radius:12px;cursor:pointer;font-weight:800;letter-spacing:1px;font-size:13px;color:#2a1c00;background:linear-gradient(135deg,#ffce63,#ffe7a8);box-shadow:0 6px 20px rgba(255,206,99,.4);animation:dailyGlow 2.4s ease-in-out infinite;}
.dr-claim:hover{transform:translateY(-1px);}
.dr-done{font-size:11px;color:var(--ink-dim);text-align:center;padding:6px;letter-spacing:.5px;}
.prize-line{font-size:10px;letter-spacing:1.5px;color:var(--gold);text-align:center;font-weight:800;margin:-4px 0 10px;}

/* credits coin icon */
.credits-val{display:flex;align-items:center;gap:5px;justify-content:center;}
.coin-ico{width:17px;height:17px;border-radius:50%;flex:0 0 auto;
  background:url(assets/coin.png) center/contain no-repeat, radial-gradient(circle at 35% 30%,#fff0bf,#ffce63 55%,#dd9418);
  box-shadow:0 0 6px rgba(255,206,99,.55), inset 0 0 0 1.5px #b8801a;}

/* cannon shop */
.shop-card{width:min(540px,95vw);}
.shop-wallet{font-size:12px;color:var(--ink-dim);margin:6px 0 16px;}
.shop-wallet strong{color:var(--gold);}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:10px;margin-bottom:18px;}
.shop-cell{padding:9px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid rgba(70,200,210,.12);display:flex;flex-direction:column;align-items:center;gap:6px;}
.shop-cell.sel{border-color:var(--teal);box-shadow:0 0 16px rgba(40,224,200,.25);}
.shop-prev{width:72px;height:72px;}
.shop-nm{font-size:10px;letter-spacing:1px;font-weight:800;}
.shop-btn{width:100%;padding:7px;border:none;border-radius:8px;cursor:pointer;font-size:10px;font-weight:800;letter-spacing:.5px;color:#03161a;background:linear-gradient(135deg,var(--teal),#7ff0dd);}
.shop-btn:disabled{opacity:.75;cursor:default;background:rgba(8,30,46,.7);color:var(--ink-dim);}
.shop-btn.locked{color:var(--ink-dim);}

/* lobby supreme */
.lobby2 .menu-logo-img2{max-width:min(62vw,360px);}
.lobby2 .lobby2-logotext{font-size:clamp(38px,8vw,76px);text-shadow:0 0 50px rgba(40,224,200,.55),0 0 110px rgba(40,224,200,.3);}
.menu-cta.cta-play{font-size:21px;padding:18px;letter-spacing:4px;box-shadow:0 10px 34px rgba(40,224,200,.55);animation:playPulse 2.6s ease-in-out infinite;}
@keyframes playPulse{0%,100%{box-shadow:0 10px 30px rgba(40,224,200,.45);}50%{box-shadow:0 12px 46px rgba(40,224,200,.8);}}
.menu-cta.cta-play:hover{transform:translateY(-3px);}
.weekly-lb{max-height:330px;}
.lobby2-right{padding:16px;}
.credits-stats{margin:8px 0 18px;text-align:left;}
.credits-stats .st-row{font-size:14px;padding:8px 4px;border-bottom:1px solid rgba(70,200,210,.08);}

/* fire-mode toggle */
.wpn-mode{margin-left:8px;padding:8px 12px;border-radius:11px;font-size:11px;font-weight:800;letter-spacing:1px;cursor:pointer;color:var(--teal);background:rgba(40,224,200,.08);border:1px solid var(--glass-line);transition:.14s;white-space:nowrap;}
.wpn-mode:hover{border-color:var(--teal);}
.wpn-mode.focus{color:var(--gold);background:rgba(255,206,99,.1);border-color:var(--gold);}

#wallet-hud{display:flex;align-items:center;gap:5px;margin-left:2px;padding:4px 9px;border-radius:11px;background:rgba(0,0,0,.30);border:1px solid rgba(255,206,99,.38);}
#wallet-hud .coin-ico{width:16px;height:16px;}
#wallet-val{font:800 14px/1 'Segoe UI',sans-serif;color:#ffce63;}

.seat-card{max-width:640px;}
.seat-table{position:relative;width:min(560px,82vw);height:320px;margin:18px auto;border-radius:24px;background:radial-gradient(ellipse at center,rgba(20,70,80,.5),rgba(4,18,28,.7));border:1px solid rgba(80,200,200,.25);box-shadow:inset 0 0 40px rgba(0,0,0,.5);}
.seat-table::before{content:'\1F41F';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:34px;opacity:.45;}
.seat{position:absolute;width:108px;box-sizing:border-box;padding:12px 8px;border-radius:14px;text-align:center;background:rgba(8,26,36,.85);border:2px solid rgba(120,210,210,.35);cursor:pointer;transition:transform .12s,border-color .12s,background .12s;}
.seat:hover{transform:scale(1.07);border-color:#28e0c8;background:rgba(14,44,56,.95);}
.seat.taken{border-color:#ffce63;background:rgba(60,46,10,.9);transform:scale(1.04);cursor:default;}
.seat .seat-ico{font-size:30px;line-height:1;}
.seat .seat-lbl{font:800 12px/1.4 'Segoe UI',sans-serif;color:#cfe9ee;letter-spacing:.5px;margin-top:4px;}
.seat.taken .seat-lbl{color:#ffce63;}
.seat.left{left:7%;top:50%;margin-top:-46px;}
.seat.right{right:7%;top:50%;margin-top:-46px;}
.seat.tl{left:12%;top:9%;}
.seat.tr{right:12%;top:9%;}
.seat.bl{left:12%;bottom:9%;}
.seat.br{right:12%;bottom:9%;}

.rooms-head{text-align:center;margin:4px 0 14px;}
.rooms-title{font:900 22px 'Segoe UI',sans-serif;color:#aef9ec;letter-spacing:1px;}
.rooms-sub{font:600 13px 'Segoe UI',sans-serif;color:rgba(200,230,240,.7);margin-top:3px;}
.rooms-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-height:56vh;overflow-y:auto;padding:4px 6px;}
.room-card{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(14,40,52,.92),rgba(8,24,34,.92));border:1px solid rgba(80,200,200,.25);border-radius:14px;padding:11px 13px;transition:border-color .15s,transform .12s;}
.room-card:hover{border-color:#28e0c8;transform:translateY(-2px);}
.room-logo img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}
.room-mid{flex:1;text-align:left;min-width:0;}
.room-name{font:800 16px 'Segoe UI',sans-serif;color:#eaf7ff;}
.room-meta{font:600 12px 'Segoe UI',sans-serif;color:rgba(190,220,230,.75);margin-top:2px;}
.room-players{font:700 11px 'Segoe UI',sans-serif;color:#7fd4ff;margin-top:4px;}
.room-right{text-align:center;flex:0 0 auto;}
.room-prize{font:800 13px 'Segoe UI',sans-serif;color:#ffce63;margin-bottom:6px;white-space:nowrap;}
.room-join{background:linear-gradient(135deg,#28e0c8,#1aa890);color:#03161a;font:900 14px 'Segoe UI',sans-serif;border:none;border-radius:10px;padding:8px 20px;cursor:pointer;transition:transform .1s,box-shadow .15s;}
.room-join:hover{transform:scale(1.05);box-shadow:0 4px 14px rgba(40,224,200,.45);}
.practice-link{display:inline-block;margin-top:14px;color:rgba(180,210,220,.7);font:600 13px 'Segoe UI',sans-serif;cursor:pointer;text-decoration:none;}
.practice-link:hover{color:#aef9ec;}

.wallet-bar{display:inline-block;margin-top:8px;padding:6px 16px;border-radius:20px;background:rgba(8,26,36,.8);border:1px solid rgba(255,206,99,.4);font:700 14px 'Segoe UI',sans-serif;color:#cfe9ee;}
.wallet-bar strong{color:#ffce63;}

.lobby-landing{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:18px;}
.multi-cta{font-size:26px;padding:18px 64px;letter-spacing:2px;}
.rooms-view{display:flex;flex-direction:column;align-items:center;width:100%;pointer-events:auto;}
.rooms-back{margin-top:14px;background:rgba(8,26,36,.85);border:1px solid rgba(127,212,255,.45);color:#cfe9ee;padding:10px 24px;border-radius:22px;font:700 14px 'Segoe UI',sans-serif;cursor:pointer;}
.rooms-back:hover{background:rgba(18,46,60,.95);}

/* Ensure hidden always beats the layout display on these panels (specificity fix) */
.rooms-view.hidden{display:none !important;}
#lobby-landing.hidden{display:none !important;}

/* landing wrapper must not affect layout — restore original lobby positioning */
#lobby-landing{display:contents;}

/* Balance chip in the top bar (next to the sound button) */
#balance-hud{display:flex;align-items:center;gap:5px;margin-left:2px;padding:4px 11px;border-radius:11px;background:rgba(0,0,0,.32);border:1px solid rgba(255,206,99,.45);}
#balance-hud .coin-ico{width:16px;height:16px;}
#bal-val{font:800 14px/1 'Segoe UI',sans-serif;color:#ffce63;}
#bal-val::before{content:'$';opacity:.85;}
/* Show balance only in the lobby; show the in-game credits coin only while playing */
body.playing #balance-hud{display:none;}
body:not(.playing) #wallet-hud{display:none;}

/* room group headers (1v1 / 6 PLAYERS / 8 PLAYERS) */
.rooms-section{grid-column:1/-1;margin:6px 2px 2px;padding-bottom:4px;font:800 13px 'Segoe UI',sans-serif;letter-spacing:1.5px;color:#9fe6dd;border-bottom:1px solid rgba(120,200,210,.18);text-transform:uppercase;}
.rooms-section:first-child{margin-top:0;}

/* ===== idea pass: simple cannon UI off, rooms-first full-screen lobby ===== */
#weapon-bar{display:none !important;}                 /* #3 no cannon-level bar */
.rooms-back{display:none !important;}                 /* #5 rooms ARE the lobby now */
.overlay.lobby2{align-items:flex-start !important;}
.lobby2-inner{max-width:96vw !important;gap:8px !important;padding-top:6px;}
.lobby2 .menu-logo-img2{max-width:min(28vw,170px) !important;}
.lobby2 .lobby2-logotext{font-size:clamp(24px,4.2vw,40px) !important;}
.rooms-view{width:100% !important;}
.rooms-head{margin-bottom:2px;}
.rooms-head .rooms-sub{font-size:11px;}
/* #6 fill the screen, no scroll: dense auto-fit grid + compact vertical cards */
.rooms-list{grid-template-columns:repeat(auto-fit,minmax(185px,1fr)) !important;max-height:none !important;overflow:visible !important;gap:9px !important;width:100% !important;}
.room-card{flex-direction:column !important;align-items:center !important;text-align:center !important;gap:4px !important;padding:11px 9px !important;}
.room-card:hover{transform:translateY(-3px);}
.room-logo img{width:38px !important;height:38px !important;}
.room-mid{display:flex;flex-direction:column;align-items:center;gap:1px;}
.room-name{font-size:14px !important;}
.room-meta,.room-players{font-size:10.5px !important;}
.room-right{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;margin-top:2px;}
.room-prize{font-size:15px !important;}
.room-join{width:100% !important;padding:8px 0 !important;}
.rooms-section{margin:4px 2px 0 !important;font-size:12px !important;}

/* ===== XP chip, daily/skins buttons, quests overlay ===== */
#xp-hud{display:flex;align-items:center;gap:5px;margin-left:2px;padding:4px 11px;border-radius:11px;background:rgba(0,0,0,.32);border:1px solid rgba(176,123,255,.5);font:800 14px 'Segoe UI',sans-serif;color:#cdaaff;}
#xp-hud .xp-ico{font-size:13px;}
body.playing #xp-hud{display:none;}
.rooms-actions{display:flex;justify-content:center;gap:10px;margin-top:8px;}
.rooms-act-btn{cursor:pointer;pointer-events:auto;background:rgba(8,30,42,.85);border:1px solid rgba(127,212,255,.45);color:#dbeef5;padding:8px 18px;border-radius:20px;font:800 12.5px 'Segoe UI',sans-serif;letter-spacing:.5px;transition:.15s;}
.rooms-act-btn:hover{border-color:#28e0c8;background:rgba(18,46,60,.95);transform:translateY(-1px);}
.daily-list{display:flex;flex-direction:column;gap:12px;margin:14px 0;text-align:left;}
.dq-login{font:700 13px 'Segoe UI',sans-serif;color:#ffce63;text-align:center;margin-bottom:2px;}
.dq-login b{color:#fff;}
.dq-item{background:rgba(8,26,36,.7);border:1px solid rgba(120,200,210,.18);border-radius:12px;padding:11px 13px;}
.dq-top{display:flex;justify-content:space-between;align-items:center;}
.dq-desc{font:800 14px 'Segoe UI',sans-serif;color:#eaf7ff;}
.dq-xp{font:800 13px 'Segoe UI',sans-serif;color:#cdaaff;}
.dq-bar{height:7px;border-radius:5px;background:rgba(255,255,255,.10);margin:8px 0 6px;overflow:hidden;}
.dq-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,#28e0c8,#7ff0dd);transition:width .3s;}
.dq-bot{display:flex;justify-content:space-between;align-items:center;font:700 12px 'Segoe UI',sans-serif;}
.dq-prog{color:#9fb4c0;}
.dq-todo{color:#7fa6b4;}
.dq-claimed{color:#33e6a4;font-weight:800;}
.dq-claim{cursor:pointer;background:linear-gradient(135deg,#28e0c8,#7ff0dd);border:none;border-radius:16px;color:#03161a;font:800 12px 'Segoe UI',sans-serif;padding:5px 16px;}
.dq-claim:hover{filter:brightness(1.08);}

/* ===== lobby polish: full-width room grid + tighter top ===== */
.rooms-list{grid-template-columns:repeat(5,1fr) !important;gap:12px !important;}
@media (max-width:1100px){ .rooms-list{grid-template-columns:repeat(3,1fr) !important;} }
@media (max-width:680px){ .rooms-list{grid-template-columns:repeat(2,1fr) !important;} }
.lobby2-inner{padding-top:2px !important;gap:5px !important;}
.lobby2 .menu-logo-img2{max-width:min(20vw,130px) !important;}
.lobby2 .lobby2-logotext{font-size:clamp(22px,3.6vw,36px) !important;}
.rooms-head{margin-bottom:2px !important;}
.room-card{padding:14px 12px !important;gap:5px !important;}
.room-logo img{width:44px !important;height:44px !important;}

/* ===== compact lobby: fit all 3 room rows + JOIN with no scroll ===== */
.lobby2-inner{padding-top:0 !important;gap:2px !important;}
.lobby2 .menu-logo-img2{max-width:min(15vw,96px) !important;}
.lobby2 .lobby2-logotext{font-size:clamp(18px,2.8vw,28px) !important;}
.rooms-head{margin-bottom:0 !important;}
.rooms-head .rooms-title{font-size:18px !important;margin:0 !important;}
.rooms-head .rooms-sub{font-size:10px !important;}
.rooms-actions{margin-top:4px !important;}
.rooms-act-btn{padding:5px 14px !important;font-size:11px !important;}
.rooms-list{gap:7px !important;}
.rooms-section{margin:1px 2px 0 !important;font-size:11px !important;padding-bottom:2px !important;}
.room-card{padding:6px 8px !important;gap:1px !important;}
.room-logo img{width:28px !important;height:28px !important;}
.room-name{font-size:12px !important;}
.room-meta,.room-players{font-size:9px !important;}
.room-prize{font-size:12.5px !important;}
.room-right{gap:3px !important;margin-top:0 !important;}
.room-join{padding:5px 0 !important;font-size:12.5px !important;}

/* ════════════════════════════════════════════════
   LOBBY REDESIGN — top bar · featured banner · table grid + side rail
   (overrides the earlier compact-pass rules above)
   ════════════════════════════════════════════════ */

/* frosted deep-sea backdrop: scene still moves behind, but text stays readable */
.overlay.lobby2{background:linear-gradient(180deg,rgba(3,12,20,.62),rgba(3,12,20,.34) 50%,rgba(3,12,20,.55)) !important;backdrop-filter:blur(3px) !important;align-items:flex-start !important;}
.lobby2-inner{max-width:1180px !important;width:96vw !important;gap:10px !important;padding-top:10px !important;}

/* ── persistent top bar ── */
.lobby-bar{pointer-events:auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 12px;border-radius:14px;background:linear-gradient(180deg,rgba(8,30,46,.66),rgba(4,18,31,.5));
  border:1px solid var(--glass-line);backdrop-filter:blur(7px);}
.lobby-brand{display:flex;align-items:center;min-width:0;}
.lobby-bar .menu-logo-img2{display:block !important;max-width:min(34vw,150px) !important;margin:0 !important;filter:drop-shadow(0 4px 14px rgba(40,224,200,.45));}
.lobby-bar .lobby2-logotext{font-size:clamp(18px,3vw,26px) !important;text-shadow:0 0 26px rgba(40,224,200,.45);}
.lobby-bar-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.stat-pill{display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:11px;font:800 14px var(--font);
  background:rgba(0,0,0,.34);border:1px solid var(--glass-line);font-variant-numeric:tabular-nums;white-space:nowrap;}
.stat-pill.bal{color:var(--gold);border-color:rgba(255,206,99,.45);}
.stat-pill.xp{color:#cdaaff;border-color:rgba(176,123,255,.5);}
.stat-pill .xp-ico{font-size:13px;}
.lobby-bar .pill-btn{display:flex;align-items:center;text-decoration:none;cursor:pointer;padding:8px 14px;border-radius:11px;
  font:800 12px var(--font);letter-spacing:1px;color:var(--ink-dim);background:var(--glass);border:1px solid var(--glass-line);transition:.16s;}
.lobby-bar .pill-btn:hover{color:var(--teal);border-color:var(--teal);}

/* ── featured tournament banner ── */
.lobby-banner{pointer-events:auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 18px;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(110deg,rgba(19,126,117,.34),rgba(8,30,46,.40) 58%,rgba(255,206,99,.12));
  border:1px solid rgba(40,224,200,.32);}
.banner-main{text-align:left;min-width:0;}
.banner-kicker{font:800 10px var(--font);letter-spacing:2px;color:var(--gold);}
.banner-title{font:900 clamp(15px,2.4vw,21px) var(--font);color:#eaffff;letter-spacing:.4px;margin-top:2px;}
.banner-sub{font:700 11px var(--font);color:var(--ink-dim);margin-top:3px;}
.banner-cta{flex:0 0 auto;cursor:pointer;border:none;border-radius:12px;padding:12px 22px;font:900 14px var(--font);
  letter-spacing:1px;color:#03161a;background:linear-gradient(135deg,var(--teal),#7ff0dd);box-shadow:0 6px 20px rgba(40,224,200,.4);transition:.16s;}
.banner-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(40,224,200,.55);}

/* ── main split: table grid + side rail ── */
.lobby-main{width:100%;display:flex;gap:14px;align-items:stretch;}
.lobby-main #rooms-list{flex:1 1 auto;min-width:0;align-content:start;max-height:62vh !important;overflow-y:auto !important;}
.lobby-side{flex:0 0 248px;display:flex;flex-direction:column;gap:8px;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:16px;padding:13px;backdrop-filter:blur(6px);}
.lobby-side .panel-title{margin:0;}
.lobby-side .weekly-lb{flex:1 1 auto;max-height:40vh;}
.lobby-side .how-to{margin-top:6px;border-top:1px solid var(--glass-line);padding-top:8px;}

/* ── room cards: stakes-tier badge + seat-fill bar ── */
.tier-badge{display:inline-block;vertical-align:middle;font:800 8.5px var(--font);letter-spacing:.5px;
  padding:1px 6px;border-radius:6px;margin-left:4px;color:#03161a;background:var(--teal);}
.tier-0 .tier-badge{background:#7fd4ff;}
.tier-1 .tier-badge{background:#28e0c8;}
.tier-2 .tier-badge{background:#7ff0dd;}
.tier-3 .tier-badge{background:var(--gold);}
.tier-4 .tier-badge{background:#ff9d4d;color:#fff;}
.room-card.tier-3{border-color:rgba(255,206,99,.5) !important;}
.room-card.tier-4{border-color:rgba(255,157,77,.55) !important;}
.seat-bar{width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden;margin:3px 0 1px;}
.seat-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--teal),#7ff0dd);}

/* ── responsive: stack side rail under the grid on narrow screens ── */
@media (max-width:820px){
  .lobby-main{flex-direction:column;}
  .lobby-side{flex:1 1 auto;width:100%;}
  .lobby-side .weekly-lb{max-height:200px;}
  .lobby-main #rooms-list{max-height:none !important;}
  .lobby-bar{flex-wrap:wrap;justify-content:center;}
}

/* ════════════════════════════════════════════════
   IN-GAME HUD DECLUTTER · EVENT CALLOUTS · VISUAL SYSTEM
   ════════════════════════════════════════════════ */

/* ── HUD: three balanced zones, SCORE as the hero ── */
#hud{justify-content:space-between;gap:8px;}
.hud-zone{display:flex;align-items:center;gap:8px;pointer-events:none;}
.hud-zone>*{pointer-events:auto;}
.hud-left{flex:1 1 0;justify-content:flex-start;}
.hud-center{flex:0 0 auto;justify-content:center;gap:10px;}
.hud-right{flex:1 1 0;justify-content:flex-end;}
.score-block{min-width:104px;}
.score-block .hud-value{font-size:30px;color:#fff;text-shadow:0 0 20px rgba(40,224,200,.6);}
.hud-center .combo-block{margin-left:0 !important;}      /* was right-pushed in the old flat bar */
.combo-meter{width:100%;height:3px;margin-top:5px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;}
.combo-fill{height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--gold));box-shadow:0 0 8px rgba(40,224,200,.6);transition:width .08s linear;}
/* phones: compact the 3-zone HUD so credits + EXIT never overflow off-screen */
@media (max-width:560px){
  #hud{gap:5px;padding:8px;}
  .hud-zone{gap:5px;}
  .hud-left,.hud-right{flex:0 0 auto;}
  .hud-center{gap:6px;}
  .hud-left #back-btn{display:none;}              /* EXIT returns to the lobby, which has PORTAL */
  .hud-block{min-width:0;padding:4px 7px;}
  .score-block{min-width:0;}
  .score-block .hud-value{font-size:20px;}
  .hud-value{font-size:15px;}
  .hud-label{font-size:8px;letter-spacing:1px;}
  #wallet-hud{display:none;}                      /* credits hidden on the tiny in-play bar; end screen reports winnings */
  #exit-btn{padding:6px 11px;font-size:11px;}
}

/* ── center-screen event callout (boss · big catch · combo milestones) ── */
#callout{position:fixed;left:50%;top:30%;z-index:6;pointer-events:none;white-space:nowrap;text-align:center;
  font:900 clamp(26px,5.2vw,54px) var(--font);letter-spacing:2px;opacity:0;color:#eaffff;
  transform:translate(-50%,-50%) scale(.5);text-shadow:0 0 22px rgba(40,224,200,.7),0 3px 14px rgba(0,0,0,.85);}
#callout.gold{color:var(--gold);text-shadow:0 0 26px rgba(255,206,99,.85),0 3px 14px rgba(0,0,0,.85);}
#callout.danger{color:#ff6a78;text-shadow:0 0 26px rgba(255,93,108,.85),0 3px 14px rgba(0,0,0,.9);}
#callout.teal{color:var(--teal);text-shadow:0 0 24px rgba(40,224,200,.8),0 3px 14px rgba(0,0,0,.85);}
#callout.show{animation:calloutPop 1.5s cubic-bezier(.18,.8,.2,1) forwards;}
@keyframes calloutPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5);}
  13%{opacity:1;transform:translate(-50%,-50%) scale(1.14);}
  26%{transform:translate(-50%,-50%) scale(1);}
  70%{opacity:1;transform:translate(-50%,-54%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-72%) scale(.95);}
}

/* ── visual system: cohesive deep-sea overlays + bioluminescent accents ── */
.ov-card{
  background:linear-gradient(180deg,rgba(9,30,46,.93),rgba(4,16,28,.95)) !important;
  border:1px solid var(--glass-line) !important;
  box-shadow:0 26px 80px rgba(0,0,0,.62),0 0 60px rgba(40,224,200,.10),inset 0 1px 0 rgba(174,249,236,.07) !important;
  backdrop-filter:blur(11px) !important;
}
.ov-result{color:var(--teal) !important;text-shadow:0 0 18px rgba(40,224,200,.45);}
.mode-btn{transition:.16s;}
.big-btn:hover,.mode-btn:hover{box-shadow:0 10px 30px rgba(40,224,200,.42);}
@keyframes bioPulse{0%,100%{box-shadow:0 8px 26px rgba(40,224,200,.4);}50%{box-shadow:0 8px 34px rgba(40,224,200,.6);}}
.big-btn{animation:bioPulse 3.4s ease-in-out infinite;}

/* ── top-level error toast (non-blocking) ── */
#err-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(20px);z-index:60;
  pointer-events:none;opacity:0;transition:opacity .25s,transform .25s;
  background:rgba(255,93,108,.16);border:1px solid rgba(255,93,108,.5);color:#ffd9de;
  font:700 12.5px var(--font);letter-spacing:.5px;padding:9px 16px;border-radius:11px;backdrop-filter:blur(6px);max-width:90vw;text-align:center;}
#err-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── perf: drop backdrop-filter blur on the in-play HUD ──
   Several blurred glass elements layered over the animating canvas are GPU-
   heavy (esp. mobile). Remove the blur during play; a denser bg keeps contrast. */
#hud .hud-block,#hud #back-btn,#hud #mute-btn,#hud #exit-btn,#hud #wallet-hud{backdrop-filter:none !important;}
#hud .hud-block,#hud #back-btn,#hud #mute-btn,#hud #wallet-hud{background:rgba(6,22,34,.82);}
#hud #exit-btn{background:rgba(44,12,16,.85);}