/* Fangs.io — menu = clean white premium; in-game HUD = arcade dark. */
:root{
  --ink:#0b0e14; --ink2:#3a4150; --line:#e6e9f0;
  --green:#12b981; --green-d:#0e9d6e; --neon:#39ff88;
  --cyan:#0bb7d4; --card:#ffffff;
  --mono:"Courier New",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#080a10}
body{font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
.hidden{display:none!important}

/* ---------- game canvas ---------- */
#game{position:fixed;inset:0;display:block;touch-action:none;cursor:crosshair}
body.menu-open #game{filter:blur(7px) brightness(0.7) saturate(1.1);transform:scale(1.04)}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:#080a10;color:#cfe;font-family:var(--mono);letter-spacing:.12em;z-index:60}

/* ============ MENU / LANDING (white) ============ */
#menu{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(247,249,252,.95));
  backdrop-filter:blur(2px);overflow:auto}
.menu-inner{flex:1;display:grid;grid-template-columns:1fr auto;gap:26px;
  align-items:center;justify-items:center;max-width:1180px;margin:0 auto;
  width:100%;padding:26px 28px 8px;grid-template-areas:"banner banner" "hero side"}
.ad-banner{grid-area:banner}
.hero{grid-area:hero;text-align:center;max-width:560px}
.ad-box{grid-area:side}

.brand{display:flex;align-items:center;justify-content:center;gap:14px}
.logo-mark{font-size:46px;filter:drop-shadow(0 4px 10px rgba(18,185,129,.35))}
.logo{font-family:"Sora",sans-serif;font-weight:800;font-size:clamp(46px,9vw,88px);
  letter-spacing:-.03em;line-height:.9;color:var(--ink)}
.dotio{color:var(--green);}
.tagline{margin-top:14px;font-size:clamp(16px,2.4vw,21px);color:var(--ink2);font-weight:600}
.tagline b{color:var(--ink)}

.play-card{margin:26px auto 0;max-width:420px;background:var(--card);
  border:1px solid var(--line);border-radius:20px;padding:22px 22px 18px;
  box-shadow:0 24px 60px -28px rgba(11,14,20,.35),0 2px 0 rgba(255,255,255,.6) inset;text-align:left}
.fld-lab{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink2);margin-bottom:7px}
#nameInput{width:100%;font-size:18px;font-weight:700;font-family:inherit;color:var(--ink);
  padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;background:#fbfcfe;outline:none;transition:.15s}
#nameInput:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(18,185,129,.12)}
.skin-row{margin-top:16px}
.skins{display:flex;gap:9px;flex-wrap:wrap;margin-top:2px}
.skinDot{width:34px;height:34px;border-radius:50%;background:var(--c);border:3px solid #fff;
  box-shadow:0 0 0 1.5px var(--line);cursor:pointer;transition:transform .12s,box-shadow .12s}
.skinDot:hover{transform:translateY(-2px) scale(1.06)}
.skinDot.sel{box-shadow:0 0 0 3px var(--ink);transform:translateY(-2px) scale(1.08)}

.play-btn{display:block;width:100%;margin-top:18px;font-family:"Sora",sans-serif;
  font-weight:800;font-size:20px;letter-spacing:.06em;color:#062218;
  background:linear-gradient(180deg,var(--neon),var(--green));border:none;border-radius:13px;
  padding:16px;cursor:pointer;box-shadow:0 14px 30px -12px rgba(18,185,129,.7);transition:.14s}
.play-btn:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(18,185,129,.85);filter:brightness(1.05)}
.play-btn:active{transform:translateY(0)}
.play-btn:disabled{filter:grayscale(.5) brightness(.9);cursor:default;transform:none;box-shadow:none}
.controls{margin-top:12px;text-align:center;font-size:12.5px;color:var(--ink2);font-weight:600}

.how{list-style:none;margin:24px auto 0;max-width:460px;display:grid;gap:8px;text-align:left}
.how li{font-size:14px;color:var(--ink2);font-weight:600;padding-left:22px;position:relative}
.how li::before{content:"›";position:absolute;left:6px;color:var(--green);font-weight:800}
.how b{color:var(--ink)}

.menu-foot{padding:14px 20px 20px;text-align:center;color:var(--ink2);font-size:13px;font-weight:600;
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.menu-foot b{color:var(--green)}
.foot-links{opacity:.75}

/* ---------- ad slots ---------- */
.ad-slot{position:relative;display:flex;align-items:center;justify-content:center;
  background:#f2f4f8;border:1px dashed #cfd6e2;border-radius:12px;color:#9aa4b4;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ad-tag{position:absolute;top:6px;left:8px;font-size:9px;letter-spacing:.14em;color:#b3bccb}
.ad-banner{width:100%;max-width:970px;height:90px}
.ad-box{width:300px;height:250px}
.ad-inter{width:100%;height:250px;margin:16px 0;background:#141a28;border-color:#26314a;color:#4b586f}

/* ============ DEATH SCREEN ============ */
#death{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(10,13,20,.55),rgba(6,8,14,.86))}
.death-card{width:min(440px,92vw);background:rgba(14,18,28,.96);border:1px solid #26314a;
  border-radius:18px;padding:26px 24px;text-align:center;color:#e6ecf5;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.death-card h2{font-family:"Sora",sans-serif;font-size:26px;font-weight:800;color:#ff6b7f;letter-spacing:-.01em}
.death-stats{display:flex;gap:12px;justify-content:center;margin:18px 0 4px}
.death-stats>div{flex:1;background:#0e1320;border:1px solid #232e46;border-radius:12px;padding:12px 6px}
.death-stats span{display:block;font-size:10px;letter-spacing:.12em;color:#7d8aa3;font-weight:700}
.death-stats b{font-family:var(--mono);font-size:26px;color:var(--neon)}
.death-btns{display:flex;gap:10px;margin-top:10px}
.death-btns .play-btn{margin-top:0;flex:2}
.ghost-btn{flex:1;font-family:"Sora",sans-serif;font-weight:800;letter-spacing:.06em;font-size:15px;
  color:#cbd5e6;background:transparent;border:1.5px solid #33405c;border-radius:13px;cursor:pointer;transition:.14s}
.ghost-btn:hover{border-color:#54627f;color:#fff}

/* ============ IN-GAME HUD ============ */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;font-family:var(--mono)}
#hud #fx{position:fixed;inset:0;pointer-events:none}
.hidden#hud{display:none}

#stats{position:fixed;left:14px;top:14px;display:flex;gap:8px}
#stats .stat{background:rgba(10,14,22,.72);border:1px solid #223052;border-radius:10px;
  padding:7px 12px;min-width:74px;text-align:center}
#stats .lab{display:block;font-size:9px;letter-spacing:.14em;color:#7d8aa3}
#stats b{font-size:22px;color:var(--neon);letter-spacing:.02em}

#board{position:fixed;right:14px;top:14px;width:190px;background:rgba(10,14,22,.72);
  border:1px solid #223052;border-radius:10px;padding:9px 11px}
.btitle{font-size:10px;letter-spacing:.16em;color:#7d8aa3;margin-bottom:6px;text-align:center}
#boardList{list-style:none;counter-reset:r}
#boardList li{counter-increment:r;display:flex;justify-content:space-between;gap:8px;
  font-size:12px;color:#c4cee0;padding:2px 0}
#boardList li::before{content:counter(r)".";color:#5f6d88;width:18px;display:inline-block}
#boardList li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#boardList li b{color:#eaf0fa}
#boardList li.me span,#boardList li.me b{color:var(--neon)}

#feed{position:fixed;right:14px;top:230px;width:230px;display:flex;flex-direction:column;gap:4px;text-align:right}
.feedRow{font-size:11.5px;background:rgba(10,14,22,.55);border-radius:7px;padding:3px 8px;transition:opacity .6s}
.feedRow.fade{opacity:0}
.feedRow .k{color:#eaf0fa}.feedRow .v{color:#ff8a9c}.feedRow .wn{color:#7d8aa3}

#gear{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;width:280px}
#weaponWrap{width:100%;background:rgba(10,14,22,.72);border:1px solid #223052;border-radius:10px;padding:7px 12px;text-align:center}
#weaponName{font-size:13px;letter-spacing:.1em;color:var(--neon)}
#ammo{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-top:5px;min-height:6px}
#ammo i{width:7px;height:7px;border-radius:2px;background:#26314a}
#ammo i.on{background:var(--neon)}
#powerWrap{width:100%;background:rgba(10,14,22,.72);border:1px solid #3a2f52;border-radius:10px;padding:6px 12px;text-align:center}
#powerName{font-size:11px;letter-spacing:.1em;color:#c77dff}
#powerBar{height:5px;background:#2a2140;border-radius:3px;margin-top:5px;overflow:hidden}
#powerFill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#c77dff,#8a5bff)}

#minimap{position:fixed;right:14px;bottom:14px;border-radius:10px;border:1px solid #223052}

#banner{position:fixed;left:50%;top:88px;transform:translateX(-50%);
  font-family:"Sora",sans-serif;font-weight:800;font-size:24px;letter-spacing:.04em;
  color:#fff;text-shadow:0 2px 12px rgba(255,60,90,.8),0 0 2px #000;white-space:nowrap}

#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);
  background:rgba(10,14,22,.82);border:1px solid #223052;border-radius:20px;
  padding:6px 16px;font-size:12.5px;color:#dbe4f2;letter-spacing:.04em}

#hint{position:fixed;left:50%;top:16px;transform:translateX(-50%);
  font-size:12px;color:#8fa; opacity:.72;letter-spacing:.03em;transition:opacity 1s;text-align:center}
#hint.fade{opacity:0}

#boostBtn{display:none}

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .menu-inner{grid-template-columns:1fr;grid-template-areas:"banner" "hero";padding:16px}
  .ad-box{display:none}
  .ad-banner{height:70px}
  .how{display:none}
  #board{width:150px}
  #feed{width:160px;top:auto;bottom:150px}
  #boostBtn{display:flex;position:fixed;right:18px;bottom:150px;z-index:22;pointer-events:auto;
    width:82px;height:82px;border-radius:50%;border:2px solid rgba(57,255,136,.5);
    background:rgba(10,14,22,.5);color:var(--neon);font-family:var(--mono);font-weight:700;
    font-size:13px;letter-spacing:.08em;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}
  #stats b{font-size:18px}
}
@media (max-width:820px) and (pointer:coarse){
  #hint{font-size:11px}
}
/* RAJ OS local leaderboard */
.local-scores {
  width: min(100%, 470px);
  margin: 18px auto 0;
  overflow: hidden;
  border: 2px solid #111;
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.local-scores header {
  padding: 11px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  background: #111;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}
.local-scores ol { margin: 0; padding: 8px 14px 12px; list-style: none; }
.local-scores li {
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #ddd;
  font-size: 12px;
  font-weight: 800;
}
.local-scores li:last-child { border-bottom: 0; }
.local-scores b { color: #146f49; font-variant-numeric: tabular-nums; }
.death-rank {
  margin: 12px 0 0;
  color: #146f49;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
}