/* DEGEN ROYALE — Battlelands Royale style: flat low-poly cartoon, chunky rounded UI */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* never use bold fonts anywhere — normalize the browser's default bold elements */
b, strong, h1, h2, h3, h4, h5, h6, th { font-weight: 400; }
:root {
  /* Battlelands palette: bright, saturated, friendly */
  --ink:        #2c2b46;   /* dark navy outline / text */
  --ink-soft:   #46446a;
  --panel:      #fffdf5;   /* warm cream card */
  --panel-2:    #fff;
  --green:      #74c93f;   /* primary action */
  --green-dk:   #4f9a23;   /* button bottom bevel */
  --blue:       #36b6e8;   /* secondary / banner */
  --blue-dk:    #2189bd;
  --orange:     #ff9e2c;   /* accent */
  --orange-dk:  #d97a13;
  --purple:     #8b6cf0;   /* phantom */
  --purple-dk:  #5f43c4;
  --red:        #ff5a5a;
  --red-dk:     #c93434;
  --gold:       #ffcf3a;
  --sky-top:    #3b86b8;
  --sky-bot:    #5fa244;
  /* iso voxel world tones (match the in-game renderer) */
  --grass:      #458d3c;
  --grass-lo:   #3f8438;
  --grass-dk:   #2f6b29;
  --dirt:       #6e4a22;
  /* dark popup theme (matches the in-game HUD navy) */
  --surface:    #2f2e47;   /* popup body */
  --surface-2:  #3a3858;   /* raised rows / chips */
  --surface-3:  #26253b;   /* sunken fields */
  --text:       #f1eefb;   /* light body text */
  --text-soft:  #b7b4d0;
}
html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: 'Luckiest Guy', cursive;
  letter-spacing: .4px; line-height: 1.25;
  color: var(--ink); user-select: none; -webkit-user-select: none;
  touch-action: none;
  /* iso voxel world: deep sky → grass horizon */
  background: linear-gradient(180deg, var(--sky-top) 0%, #5aa6cb 26%, #88c8da 44%, var(--sky-bot) 60%, var(--grass-lo) 100%);
}
/* low-poly hills silhouette (iso grass tones) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 60% at 20% 118%, var(--grass-dk) 0 40%, transparent 41%),
    radial-gradient(120% 55% at 85% 122%, #367a2e 0 42%, transparent 43%),
    radial-gradient(80% 40% at 50% 130%, #2a6024 0 50%, transparent 51%);
  opacity: .9;
}
.hidden { display: none !important; }

/* inline game icons (see js/icons.js) — flow with text, sized by font-size */
svg.gi { width: 1em; height: 1em; vertical-align: -0.16em; flex: none; }
/* icon-only buttons: center the glyph */
button[data-ico] { display: inline-flex; align-items: center; justify-content: center; }
button[data-ico] svg.gi { vertical-align: 0; }

/* ---- screens ---- */
.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1; }
.screen.active { display: flex; }
#game.active { display: block; }

/* ---- loading ---- */
.load-box { text-align: center; z-index: 2; }
.logo {
  font-family: 'Luckiest Guy', cursive; font-weight: 400;
  font-size: 72px; line-height: .95; letter-spacing: 2px; color: #fff;
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 8px 0 var(--ink), 0 10px 14px rgba(0,0,0,.35);
  margin-bottom: 34px; animation: wobble 2.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes wobble { 0%,100% { transform: rotate(-2deg) scale(1) } 50% { transform: rotate(2deg) scale(1.03) } }
.load-bar { width: 340px; height: 30px; border: 4px solid var(--ink); background: #fff; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
#load-fill { width: 0%; height: 100%; background: linear-gradient(180deg, #9be05a, var(--green)); transition: width .25s; border-radius: 0 12px 12px 0; }
#load-text { margin-top: 16px; color: #fff; font-size: 15px; font-weight: 400; text-shadow: 0 2px 0 var(--ink); letter-spacing: .5px; }

/* ---- card / window ---- */
.xp-window {
  background: var(--surface); color: var(--text); border: 4px solid var(--ink);
  border-radius: 16px;
  /* voxel slab: solid extruded ink base + soft ground shadow */
  box-shadow: 0 13px 0 var(--ink), 0 15px 0 rgba(0,0,0,.25), 0 24px 40px rgba(0,0,0,.45);
  min-width: 340px; max-width: 94vw; max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.title-bar {
  /* grass-topped voxel header: lit top sliver over a grass block */
  background: linear-gradient(180deg, #6fc24e 0%, var(--grass) 46%, var(--grass-dk) 100%);
  color: #fff; padding: 12px 16px; font-size: 17px; font-weight: 400; letter-spacing: .5px;
  display: flex; justify-content: space-between; align-items: center;
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
  border-bottom: 4px solid var(--ink);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.28);
}
.title-btns { display: flex; gap: 8px; }
.tb-btn {
  background: linear-gradient(180deg, #fff 0 46%, #e7eaf2 46% 100%); border: 3px solid var(--ink); border-radius: 9px;
  width: 36px; height: 32px; font-size: 16px; cursor: pointer; color: var(--ink);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 3px 0 var(--ink), 0 5px 6px rgba(0,0,0,.22); transition: transform .06s, box-shadow .06s;
}
.tb-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 0 0 var(--ink); }
/* pill link in a title bar (e.g. INFO → full docs) */
.docs-link-btn {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  font-family: 'Luckiest Guy', cursive; font-size: 13px; letter-spacing: .5px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, var(--gold) 0 46%, #e7af1e 46% 100%);
  border: 3px solid var(--ink); border-radius: 9px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 3px 0 var(--ink), 0 5px 6px rgba(0,0,0,.22);
  transition: transform .06s, box-shadow .06s;
}
.docs-link-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 0 0 var(--ink); }
.window-body { padding: 22px; background: var(--surface); color: var(--text); overflow-y: auto; }
.window-body.center { text-align: center; }

.pixel-h { font-family: 'Luckiest Guy', cursive; font-weight: 400; font-size: 24px; margin: 6px 0 16px; color: var(--text); letter-spacing: .5px; }

/* ---- buttons / inputs (voxel blocks: lit top face + matte front, ink edge, solid side) ---- */
.xp-btn {
  font-family: 'Luckiest Guy', cursive; font-weight: 400; font-size: 16px;
  padding: 13px 16px; margin: 6px 0; width: 100%;
  /* hard two-tone: sunlit cap over the front face (reads as a voxel top + side) */
  background: linear-gradient(180deg, #8ada4f 0 44%, var(--green) 44% 100%);
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.32);
  border: 4px solid var(--ink); border-radius: 11px; cursor: pointer;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 6px 0 var(--ink), 0 8px 8px rgba(0,0,0,.22);
  transition: transform .06s ease, box-shadow .06s ease;
}
.xp-btn:hover { filter: brightness(1.05); }
.xp-btn:active { transform: translateY(6px); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 0 0 var(--ink); }
.xp-btn.big { font-size: 20px; padding: 16px; letter-spacing: .5px; }
.xp-btn.danger { background: linear-gradient(180deg, #ff8f8f 0 44%, var(--red) 44% 100%); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 6px 0 var(--ink), 0 8px 8px rgba(0,0,0,.22); }
.xp-btn.danger:active { box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 0 0 var(--ink); }
.xp-input {
  font-family: 'Luckiest Guy', cursive; font-weight: 400; font-size: 16px; color: var(--ink);
  padding: 13px 14px; width: 100%; margin: 6px 0;
  border: 4px solid var(--ink); border-radius: 10px; background: #fff;
  box-shadow: inset 0 3px 0 rgba(0,0,0,.08);
}
.xp-input::placeholder { color: #9a98b0; }
.xp-input:focus { outline: none; border-color: var(--blue); }

/* ---- shared auth styling (used inside the sign-in card) ---- */
.auth-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.auth-tab { flex: 1; font-family: inherit; font-weight: 400; font-size: 15px; padding: 11px; cursor: pointer;
  background: var(--surface-2); color: var(--text); border: 3px solid var(--ink); border-radius: 9px; box-shadow: 0 4px 0 var(--ink); }
.auth-tab.active { background: linear-gradient(180deg, #8ada4f 0 44%, var(--green) 44% 100%); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 var(--ink); }
.auth-error { color: var(--red-dk); font-size: 13px; font-weight: 400; min-height: 18px; margin: 4px 0; }
.auth-or { text-align: center; font-size: 14px; font-weight: 400; color: #9a98b0; margin: 14px 0; }
.xp-btn.phantom { background: linear-gradient(180deg, #b49bff 0 44%, var(--purple) 44% 100%); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 6px 0 var(--ink), 0 8px 8px rgba(0,0,0,.22); }
.xp-btn.phantom:active { box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 0 0 var(--ink); }

/* ======================================================================
   MAIN MENU — full-screen battle lobby (Battlelands-style)
   ====================================================================== */
#menu.screen.active { display: block; }   /* override the centered-flex screen */

/* iso voxel diorama backdrop (drawn by js/menuBg.js with the game's iso primitives) */
.menu-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* vignette scrim so the logo / cards / dock read cleanly over the busy world */
#loading::after,
#menu::after,
#lobby::after,
#dropselect::after,
#gameover::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(125% 85% at 50% 40%, transparent 38%, rgba(18,28,16,.5) 100%);
}

/* matchmaking / drop-select / results: lift the window above the iso backdrop + vignette */
#lobby .xp-window, #dropselect .xp-window, #gameover .xp-window { position: relative; z-index: 4; }

/* drifting clouds for depth */
.menu-clouds { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.menu-clouds::before, .menu-clouds::after {
  content: ""; position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.9), rgba(255,255,255,.55) 60%, transparent 70%);
  filter: blur(2px);
}
.menu-clouds::before { width: 360px; height: 140px; top: 12%; left: -200px; animation: cloud 38s linear infinite; }
.menu-clouds::after  { width: 280px; height: 110px; top: 26%; left: -200px; animation: cloud 30s linear infinite 6s; opacity: .8; }
@keyframes cloud { from { transform: translateX(0); } to { transform: translateX(110vw); } }

/* logo */
.menu-logo {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  font-family: 'Luckiest Guy', cursive; font-size: 54px; line-height: .92; text-align: center;
  color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 0 7px 0 var(--ink), 0 10px 12px rgba(0,0,0,.35);
  letter-spacing: 1px; z-index: 3; animation: logobob 3s ease-in-out infinite;
}
@keyframes logobob { 0%,100% { transform: translateX(-50%) rotate(-1.5deg); } 50% { transform: translateX(-50%) rotate(1.5deg); } }

/* sign-in card (logged out) — centered */
.menu-card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%);
  width: 420px; max-width: 92vw; background: var(--surface); color: var(--text);
  border: 4px solid var(--ink); border-radius: 16px; padding: 24px;
  box-shadow: 0 13px 0 var(--ink), 0 15px 0 rgba(0,0,0,.25), 0 24px 40px rgba(0,0,0,.45); z-index: 4;
}

/* top resource bar */
/* The topbar container spans the full width and is as tall as its left nav column, so its empty
   center area sits over the hero's head and would swallow the drag-to-rotate cursor. Let pointers
   fall through the container and re-enable them only on the two real content columns. */
.menu-topbar { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 5; gap: 10px; pointer-events: none; }
.menu-topbar > .topbar-left, .menu-topbar > .topbar-right { pointer-events: auto; }
/* unified player card: profile + rank + trophies in one shell */
.player-card {
  position: relative; overflow: hidden;
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, #4a4878 0%, #38365c 55%, var(--ink) 100%);
  border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 5px 0 rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.14);
}
/* glossy top sheen across the whole card */
.player-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0));
  pointer-events: none; z-index: 2;
}
/* sweeping shine across the whole card */
.player-card::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 22%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); pointer-events: none; z-index: 3;
  animation: rank-shine 4.5s ease-in-out infinite;
}
@keyframes rank-shine {
  0%, 65% { left: -30%; }
  85%, 100% { left: 115%; }
}
.profile-pill {
  position: relative;
  display: flex; gap: 13px; align-items: center;
  padding: 10px 20px 10px 10px; border-radius: 12px 0 0 12px;
  background: transparent; border: none; cursor: pointer;
  transition: filter .12s, background .12s;
}
.profile-pill:hover { background: rgba(255,255,255,.07); filter: brightness(1.05); }
.profile-pill:active { background: rgba(0,0,0,.12); }
.pill-avatar {
  width: 52px; height: 52px; border-radius: 14px; border: 3px solid var(--ink);
  background: #dcdce8; flex: none; image-rendering: auto; position: relative; z-index: 1;
  box-shadow: 0 3px 6px rgba(0,0,0,.35);
}
.pill-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; position: relative; z-index: 1; }
#pill-name { color: #fff; font-size: 18px; letter-spacing: .5px; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.topbar-left { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* skins / tokenomics cards stacked under the profile card */
.profile-nav { display: flex; flex-direction: column; gap: 12px; padding-left: 2px; }
/* match each nav button's height to the profile (pfp) card above */
.profile-nav .dock-icon { min-height: 0; height: 78px; width: 78px; font-size: 10px; padding: 10px 6px 9px; }
.profile-nav .dock-icon .di-emoji { font-size: 26px; }
.rank-btn {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  cursor: pointer; text-align: left;
  color: var(--gold); font-family: inherit; letter-spacing: .5px;
  background: transparent;
  border: none; border-left: 2px solid rgba(0,0,0,.32);
  border-radius: 0; padding: 0 22px;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.07);
  transition: filter .12s, background .12s;
}
.rank-group { display: flex; align-items: stretch; cursor: pointer; transition: background .12s; }
.rank-group:hover { background: rgba(255,255,255,.07); }
.rank-group:active { background: rgba(0,0,0,.12); }
.rank-group:hover .rank-btn { filter: brightness(1.08); }
.rank-group:hover .trophy-chip {
  background: linear-gradient(180deg, #fff, #fff2c8);
  box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 2px rgba(255,207,58,.55);
}
.rank-group:active .trophy-chip { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6); }
.rank-btn-label { color: #c7c9e8; font-size: 12px; line-height: 1.1; position: relative; z-index: 1; }
.rank-btn-val { display: flex; align-items: center; gap: 7px; font-size: 19px; line-height: 1.1; position: relative; z-index: 1; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.rank-btn-val svg.gi { width: 1.5em; height: 1.5em; }
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rank-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px;
  border: 3px solid var(--ink); border-radius: 16px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3)); color: var(--text);
}
.rank-row .rank-head { display: flex; align-items: center; gap: 10px; }
.rank-row .rank-ico svg.gi { width: 48px; height: 48px; vertical-align: middle; }
.rank-row .rank-name { flex: 1; font-size: 19px; letter-spacing: .5px; }
.rank-row .rank-req { display: flex; align-items: center; gap: 7px; font-size: 14px; opacity: .8; }
.rank-row .rank-req svg.gi { width: 1.1em; height: 1.1em; }
@media (max-width: 720px) { .rank-list { grid-template-columns: 1fr; } }
.rank-row.current {
  background: linear-gradient(180deg, #4c4528, #38311c);
  box-shadow: 0 0 0 2px var(--gold) inset; border-color: var(--gold);
}
.rank-row .rank-you {
  font-size: 13px; color: var(--ink);
  background: var(--gold); border-radius: 8px; padding: 3px 10px; letter-spacing: .5px;
}
/* Per-placement payout, hidden until the row is tapped. */
.rank-row .rank-payout {
  display: none; flex-basis: 100%; flex-direction: column; gap: 8px; padding-top: 12px; margin-top: 2px;
  border-top: 2px solid rgba(255,255,255,.12); font-size: 16px;
}
.rank-row.expanded .rank-payout { display: flex; }
.rank-row .rank-pay-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rank-row .rank-place { opacity: .8; }
.rank-row .rank-pay-line > span:last-child { display: flex; align-items: center; gap: 7px; }
.rank-row .rank-payout svg.gi { width: 1.1em; height: 1.1em; }
.rank-row .rank-gain { color: #4ade80; }
.rank-row .rank-drop { color: #f87171; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.trophy-chip {
  position: relative; align-self: center;
  display: flex; align-items: center; gap: 6px; font-size: 18px; color: var(--ink);
  background: linear-gradient(180deg, #fff, #ffe9a8); border: 2px solid var(--ink);
  border-radius: 13px; padding: 8px 14px; margin: 0 12px 0 16px;
  box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6);
  transition: background .12s, box-shadow .12s, transform .08s;
}
.icon-btn {
  width: 48px; height: 48px; font-size: 22px; cursor: pointer; color: var(--ink);
  background: linear-gradient(180deg, #fff 0 46%, #e7eaf2 46% 100%); border: 4px solid var(--ink);
  border-radius: 13px; box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 5px 0 var(--ink), 0 8px 8px rgba(0,0,0,.22); transition: transform .06s, box-shadow .06s;
}
.trophy-chip svg.gi { width: 1.3em; height: 1.3em; vertical-align: 0; }
.coin-count {
  display: flex; align-items: center; gap: 6px; font-size: 18px; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 4px rgba(0,0,0,.45);
}
.coin-count svg.gi { width: 1.3em; height: 1.3em; vertical-align: 0; }
#btn-leaderboard svg.gi { width: 1.3em; height: 1.3em; }
.icon-btn:hover { filter: brightness(1.05); }
.icon-btn:active { transform: translateY(5px); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 0 0 var(--ink); }

/* hero character on a podium (center stage) */
.hero-stage { position: absolute; top: calc(50% - 20px); left: 50%; transform: translate(-50%, -66%); z-index: 2; text-align: center; }
/* The canvas buffer is oversized (720×640) so a MAX skin's aura glow isn't cropped at the edge;
   the negative margins shrink the LAYOUT box back to the original 480×520, so stage centring,
   the podium anchor and the mobile scale() media queries are unaffected — the extra pixels just
   overflow visually around the character. Keep in sync with #hero-canvas in index.html and the
   bodyFit compensation in ui.js _drawHero. */
#hero-canvas { display: block; position: relative; z-index: 2; margin: -120px -120px 0; }
/* voxel grass tile the hero stands on: a diamond top over a dirt side.
   The diamond's height:width ratio (≈0.55) matches the SKIN LAB camera's ground
   foreshortening (camera at 11,13,11 → sin(view elevation) ≈ 0.55) so the tile
   sits at the SAME iso angle as the character's voxel cube tops. */
.hero-podium {
  position: absolute; left: 50%; bottom: -48px; transform: translateX(-50%);
  width: 300px; height: 190px; z-index: 1;
  filter: drop-shadow(0 16px 16px rgba(0,0,0,.4));
}
.hero-podium::before, .hero-podium::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 166px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.hero-podium::before { top: 24px; background: var(--dirt); }          /* dirt side */
.hero-podium::after  { top: 0;  background: linear-gradient(180deg, #58a83f, var(--grass)); }  /* grass top */

/* bottom dock */
.menu-dock { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; align-items: flex-end; justify-content: center; gap: 26px; z-index: 5; }
/* Stumble-style nav card: glossy rounded tile, light inner rim, sheen, icon over label */
.dock-icon {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; width: 94px; min-height: 94px; padding: 13px 8px 11px;
  position: relative; overflow: hidden;
  font-family: 'Luckiest Guy', cursive; font-size: 12px; letter-spacing: .3px; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
  background: linear-gradient(180deg, #5cccf2 0%, var(--blue) 55%, var(--blue-dk) 100%);
  border: 4px solid var(--ink); border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), inset 0 3px 0 rgba(255,255,255,.55),
              0 6px 0 var(--ink), 0 10px 12px rgba(0,0,0,.28);
  transition: transform .06s, box-shadow .06s, filter .12s;
}
/* glossy top sheen */
.dock-icon::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 7px; height: 38%;
  border-radius: 10px 10px 18px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events: none; z-index: 1;
}
.dock-icon > * { position: relative; z-index: 2; line-height: 1.05; }
.dock-icon .di-emoji { font-size: 32px; text-shadow: none; filter: drop-shadow(0 2px 1px rgba(0,0,0,.3)); }
#btn-skins .di-emoji svg.gi { width: 1.2em; height: 1.2em; }
#btn-accessories .di-emoji svg.gi { width: 1.2em; height: 1.2em; }
#btn-info .di-emoji svg.gi { width: 1.25em; height: 1.25em; }
#btn-tokenomics .di-emoji svg.gi { width: 1.25em; height: 1.25em; }
#btn-squads .di-emoji svg.gi { width: 1.35em; height: 1.35em; }
.dock-icon:hover { filter: brightness(1.06); }
.dock-icon:active { transform: translateY(6px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), inset 0 3px 0 rgba(255,255,255,.55), 0 0 0 var(--ink); }
/* per-button colors (top sheen → base → dark side face) */
#btn-skins, #btn-accessories { background: linear-gradient(180deg, #ffc56e 0%, var(--orange) 55%, var(--orange-dk) 100%); }
#btn-tokenomics { background: linear-gradient(180deg, #b6a0f6 0%, var(--purple) 55%, var(--purple-dk) 100%); }
#btn-wager { background: #eba828; }
#btn-squads { background: #eba828; }

/* bottom-left: god mode (admins only) */
.menu-left { position: absolute; left: 14px; bottom: 26px; z-index: 5; display: flex; flex-direction: row; align-items: stretch; gap: 10px; }

/* admin dashboard: compact icon-only button, same height as the god-mode button beside it (admins only) */
.admin-icon-btn {
  flex: none; width: 56px; display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; text-decoration: none;
  background: linear-gradient(180deg, #ff7a7a 0 44%, #e23b3b 44% 100%);
  border: 4px solid var(--ink); border-radius: 13px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 6px 0 var(--ink), 0 8px 8px rgba(0,0,0,.22);
  transition: transform .06s, box-shadow .06s;
}
.admin-icon-btn svg.gi { width: 28px; height: 28px; }
.admin-icon-btn:hover { filter: brightness(1.05); }
.admin-icon-btn:active { transform: translateY(6px); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 0 0 #a01f1f; }

/* socials (bottom-right squared buttons) */
.menu-social { position: absolute; right: 14px; bottom: 26px; display: flex; gap: 10px; z-index: 5; }
.social-btn {
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--ink);
  background: linear-gradient(180deg, #fff, #e7eaf2); border: 4px solid var(--ink);
  border-radius: 13px; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 5px 0 var(--ink), 0 8px 8px rgba(0,0,0,.22); transition: transform .06s, box-shadow .06s; cursor: pointer;
}
.social-btn:hover { filter: brightness(1.05); }
.social-btn:active { transform: translateY(5px); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 0 0 var(--ink); }
.social-btn svg.gi { width: 24px; height: 24px; }
.social-btn svg.gi path { fill: #fff; stroke: none; }
#btn-x { background: linear-gradient(180deg, #2a2a2a, #000); }
#btn-discord { background: linear-gradient(180deg, #8b9bff, #5865f2); }


/* tokenomics button (bottom-left) */
.btn-tokenomics {
  cursor: pointer;
  font-family: 'Luckiest Guy', cursive; font-size: 19px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3);
  padding: 15px 22px; background: linear-gradient(180deg, #a98cf5 0 44%, var(--purple) 44% 100%);
  border: 4px solid var(--ink); border-radius: 13px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 6px 0 var(--ink), 0 8px 8px rgba(0,0,0,.22); transition: transform .06s, box-shadow .06s;
}
.btn-tokenomics svg.gi { width: 1.4em; height: 1.4em; vertical-align: -0.35em; }
.btn-tokenomics:hover { filter: brightness(1.05); }
.btn-tokenomics:active { transform: translateY(6px); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 0 0 var(--purple-dk); }

/* god-mode button (admins only): red while off, glowing green when active */
.godmode-btn { background: linear-gradient(180deg, #ff7a7a 0 44%, #e23b3b 44% 100%); }
.godmode-btn:active { box-shadow: inset 0 3px 0 rgba(255,255,255,.28), 0 0 0 #a01f1f; }
.godmode-btn.on { background: linear-gradient(180deg, #7dffb0 0 44%, #18c964 44% 100%); color: #07210f; text-shadow: 0 2px 0 rgba(255,255,255,.3); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 6px 0 var(--ink), 0 0 16px rgba(24,201,100,.6); }

/* tokenomics modal */
.tk-info { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.tk-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--surface-3); border: 3px solid var(--ink); border-radius: 12px;
}
.tk-label { font-family: 'Luckiest Guy', cursive; font-size: 16px; color: var(--text); }
.tk-val { color: var(--text); }
.tk-row .tk-val { font-size: 15px; }
.tk-sub { text-align: center; color: var(--text); margin: 0 0 12px; opacity: .85; }
.tk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.tk-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 16px 10px 14px; background: linear-gradient(180deg, #a98cf5 0 40%, var(--purple) 40% 100%);
  border: 4px solid var(--ink); border-radius: 11px; box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 5px 0 var(--purple-dk);
}
.tk-ico {
  display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  background: rgba(255,255,255,.9); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 3px 0 var(--purple-dk);
}
.tk-ico svg.gi { width: 22px; height: 22px; }
.tk-pct { font-family: 'Luckiest Guy', cursive; font-size: 32px; line-height: 1; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.tk-name {
  font-family: 'Luckiest Guy', cursive; font-size: 15px; letter-spacing: .5px; color: #ffe9a8;
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.tk-desc { font-size: 11.5px; line-height: 1.35; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.2); opacity: .95; }

.dock-center { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#btn-wager { background: linear-gradient(180deg, #ffe07a 0%, #f6b32e 55%, #c47f12 100%); }
#btn-wager .di-emoji svg.gi { width: 1.25em; height: 1.25em; }
.wager-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: 8px; }
.wager-amt {
  font-family: 'Luckiest Guy', cursive; font-size: 17px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3);
  padding: 16px 6px; cursor: pointer;
  background: linear-gradient(180deg, #8ada4f 0 44%, var(--green) 44% 100%); border: 4px solid var(--ink); border-radius: 11px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 5px 0 var(--ink), 0 7px 8px rgba(0,0,0,.24); transition: transform .06s, box-shadow .06s;
}
.wager-amt:hover:not(:disabled) { filter: brightness(1.05); }
.wager-amt:active:not(:disabled) { transform: translateY(5px); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 0 0 var(--ink); }
.wager-amt:disabled {
  background: linear-gradient(180deg, #b8b8c4, #9a9aa8);
  box-shadow: 0 5px 0 var(--ink), 0 8px 10px rgba(0,0,0,.2); cursor: not-allowed; opacity: .85;
}
.btn-play-big {
  position: relative; overflow: hidden;
  font-family: 'Luckiest Guy', cursive; font-size: 40px; letter-spacing: 2px; color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,.32); padding: 18px 74px; cursor: pointer;
  background: #eba828; border: 4px solid var(--ink); border-radius: 14px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.28), inset 0 4px 0 rgba(255,255,255,.45), 0 9px 0 var(--ink), 0 13px 13px rgba(0,0,0,.24);
  transition: transform .07s, box-shadow .07s;
}
.btn-play-big > span { position: relative; z-index: 2; }
/* glossy top sheen */
.btn-play-big::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 6px; height: 42%;
  border-radius: 10px 10px 22px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events: none; z-index: 1;
}
/* sweeping shine reflex (matches the player-card / pfp component) */
.btn-play-big::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 22%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); pointer-events: none; z-index: 1;
  animation: rank-shine 4.5s ease-in-out infinite;
}
.btn-play-big:hover { filter: brightness(1.06); }
.btn-play-big:active { transform: translateY(9px); box-shadow: inset 0 0 0 3px rgba(255,255,255,.28), inset 0 4px 0 rgba(255,255,255,.45), 0 0 0 var(--ink); animation: none; }
@keyframes playpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* ---- lobby ---- */
.lobby-window { width: 500px; }
.lobby-pot { background: var(--ink); color: var(--gold); text-align: center; padding: 12px; font-size: 20px; font-weight: 400; margin: 10px 0; border: 4px solid var(--gold); border-radius: 14px; }
.lobby-countdown { font-family: 'Luckiest Guy', cursive; text-align: center; font-size: 46px; color: var(--red); min-height: 50px; text-shadow: 0 3px 0 var(--ink); }
.lobby-players { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.lobby-player { background: var(--surface-2); color: var(--text); border: 3px solid var(--ink); border-radius: 12px; padding: 10px; font-size: 13px; font-weight: 400; display: flex; gap: 8px; align-items: center; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.lobby-player .dot { width: 14px; height: 14px; background: var(--green); border: 2px solid var(--ink); border-radius: 50%; }

/* ---- wagered prize split (matchmaking screen) ---- */
.lobby-prizes { background: var(--surface-2); border: 3px solid var(--ink); border-radius: 12px; padding: 10px 12px; margin: 8px 0; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.lobby-prizes .prize-title { text-align: center; color: var(--gold); font-size: 13px; letter-spacing: 1px; margin-bottom: 6px; }
.lobby-prizes .prize-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 3px 0; font-size: 13px; color: var(--text); }
.lobby-prizes .prize-place { font-weight: 400; }
.lobby-prizes .prize-pct { color: var(--text-soft); text-align: right; min-width: 38px; }
.lobby-prizes .prize-sol { color: var(--gold); text-align: right; min-width: 76px; }
.lobby-prizes .prize-fee { border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 6px; opacity: .75; }
.lobby-prizes .prize-fee .prize-sol { color: var(--text-soft); }
.lobby-note { text-align: center; color: var(--text-soft); font-size: 12px; line-height: 1.4; margin: 6px 4px 0; }

/* ---- drop select (pre-match landing pick) ---- */
/* Same look as the matchmaking popup: voxel menu backdrop + an xp-window holding the big map. */
.drop-window { min-width: 0; }
.drop-window .window-body { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.drop-window .lobby-countdown { min-height: 0; line-height: 1; }
.drop-map-wrap {
  /* square map sized to the viewport's short side so the whole window always fits on screen */
  width: min(58vh, 82vw, 560px); height: min(58vh, 82vw, 560px);
  border: 4px solid var(--ink); border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
}
#drop-map { width: 100%; height: 100%; display: block; cursor: crosshair; image-rendering: pixelated; touch-action: manipulation; }
.drop-hint { color: var(--text); opacity: .85; font-size: 13px; font-weight: 400; letter-spacing: .5px; }

/* ---- game ---- */
#canvas { display: block; width: 100vw; height: 100vh; background: #79c942; cursor: crosshair; }
#hud { position: fixed; inset: 0; pointer-events: none; font-size: 15px; font-weight: 400; }
.hud-top { position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; }
.hud-box { background: rgba(44,43,70,.82); color: #fff; padding: 9px 14px; border: 3px solid #fff; border-radius: 14px; text-shadow: 0 2px 0 rgba(0,0,0,.4); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.hud-box.red { color: #ff8c8c; border-color: var(--red); }
.hud-box.orange { color: var(--gold); border-color: var(--orange); }
.hud-box.blink { animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

.hud-bottom-left { position: absolute; bottom: 18px; left: 18px; }
.hp-bar { position: relative; width: 230px; height: 30px; background: #5a1b1b; border: 4px solid var(--ink); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
#hp-fill { height: 100%; width: 100%; background: linear-gradient(180deg, #ff8a8a, #ff4d4d); transition: width .15s; }
#hp-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 400; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.shield-bar { position: relative; width: 230px; height: 30px; margin-bottom: 6px; background: #123048; border: 4px solid var(--ink); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 0 rgba(0,0,0,.3), 0 0 10px rgba(70,190,255,.35); }
#shield-fill { height: 100%; width: 0%; background: linear-gradient(180deg, #aef0ff, #29b6ff 55%, #1187e0); box-shadow: 0 0 12px rgba(120,220,255,.85) inset; transition: width .15s; }
#shield-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #eafcff; font-weight: 400; text-shadow: 0 1px 0 rgba(0,0,0,.7); }
#weapon-slots { display: flex; gap: 10px; margin-top: 10px; width: 230px; }
.weapon-slot { flex: 1; background: rgba(44,43,70,.82); color: #fff; padding: 9px 11px; border: 3px solid #6a6890; border-radius: 14px; font-size: 12px; font-weight: 400; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.weapon-slot.active { border-color: var(--green); color: #c6f59a; }
.weapon-slot.active.gold {
  border-color: #e8c75a; color: #fbf0c8;
  background: linear-gradient(120deg, rgba(168,134,46,.9), rgba(110,84,24,.9));
  box-shadow: 0 4px 0 rgba(0,0,0,.25), 0 0 12px rgba(232,199,90,.5);
}
.weapon-slot.empty { opacity: .4; }
/* god-mode loadout: stack all held weapons so each label fits and the active one is clear */
#weapon-slots.multi { flex-direction: column; align-items: stretch; width: 230px; gap: 5px; }
#weapon-slots.multi .weapon-slot { flex: none; padding: 6px 10px; font-size: 11px; }
.reload-bar { height: 5px; background: var(--green); margin-top: 5px; width: 0%; border-radius: 3px; }

.hud-top-right { position: absolute; top: 14px; right: 14px; text-align: right; }
#minimap { width: 168px; height: 168px; background: #21618f; border: 4px solid #fff; border-radius: 14px; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
#killfeed { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.kill-entry { background: rgba(44,43,70,.82); color: #fff; padding: 6px 9px; font-size: 11px; font-weight: 400; border-radius: 10px; border: 2px solid rgba(255,255,255,.5); transition: opacity .5s; }

/* In-game god-mode 5× view toggle (admins only) */
.god-view-btn {
  position: absolute; left: 14px; top: 14px;
  font-family: 'Luckiest Guy', cursive; font-size: 13px; letter-spacing: .5px;
  color: #07210f; padding: 9px 14px; border: 3px solid var(--ink); border-radius: 12px;
  background: linear-gradient(180deg, #ffe27d 0 44%, #f0b429 44% 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 5px 0 var(--ink);
  cursor: pointer; pointer-events: auto; user-select: none;
}
.god-view-btn:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.28), 0 2px 0 var(--ink); }
.god-view-btn.on {
  background: linear-gradient(180deg, #7dffb0 0 44%, #18c964 44% 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 5px 0 var(--ink), 0 0 16px rgba(24,201,100,.6);
}

.open-prompt {
  position: absolute; left: 50%; top: 62%; transform: translateX(-50%);
  background: var(--ink); color: var(--gold); border: 4px solid var(--gold);
  padding: 12px 20px; border-radius: 16px; font-size: 16px; font-weight: 400; white-space: nowrap;
  box-shadow: 0 6px 0 rgba(0,0,0,.35); animation: promptpulse 1s infinite;
}
@keyframes promptpulse { 50% { transform: translateX(-50%) scale(1.06); } }
.ping-display, .fps-display { position: absolute; color: #fff; font-size: 12px; font-weight: 400; background: rgba(44,43,70,.6); padding: 4px 7px; border-radius: 8px; }
.ping-display { bottom: 18px; right: 18px; }
.fps-display { bottom: 18px; right: 100px; }

/* ---- game over ---- */
.big-place { font-family: 'Luckiest Guy', cursive; font-weight: 400; font-size: 72px; color: var(--gold); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); }
.go-title { font-family: 'Luckiest Guy', cursive; font-size: 26px; color: var(--orange); margin-bottom: 18px; text-shadow: 0 2px 0 var(--ink); }
.go-stats { font-size: 16px; font-weight: 400; line-height: 2.1; margin-bottom: 18px; color: var(--text-soft); }

/* ---- modals ---- */
.modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(14,26,14,.62); z-index: 50; }
.modal.hidden { display: none; }
.modal-screen { align-items: center; justify-content: center; background: rgba(14,26,14,.62); z-index: 50; }
.lb-tabs, .set-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.lb-tab, .set-tab { font-family: inherit; font-weight: 400; font-size: 13px; padding: 10px 12px; cursor: pointer; background: var(--surface-2); color: var(--text); border: 3px solid var(--ink); border-radius: 9px; box-shadow: 0 4px 0 var(--ink); }
.lb-tab.active, .set-tab.active { background: linear-gradient(180deg, #8ada4f 0 44%, var(--green) 44% 100%); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 var(--ink); }
.lb-table { width: 100%; border-collapse: separate; border-spacing: 0 5px; font-size: 14px; }
.lb-table th { font-family: 'Luckiest Guy', cursive; font-weight: 400; color: var(--text-soft); padding: 4px 8px; text-align: left; }
.lb-table td { background: var(--surface-2); color: var(--text); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 9px 8px; }
.lb-table td:first-child { border-left: 2px solid var(--ink); border-radius: 10px 0 0 10px; }
.lb-table td:last-child { border-right: 2px solid var(--ink); border-radius: 0 10px 10px 0; }
.lb-table tr.me td { background: var(--green); color: #fff; font-weight: 400; }
.lb-nav { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 12px; font-size: 18px; font-weight: 400; }
.lb-nav .xp-btn { width: auto; padding: 10px 16px; }
.lb-nav .xp-btn:disabled { opacity: .4; cursor: default; filter: none; }
.lb-nav .xp-btn:disabled:hover { filter: none; }
.lb-nav .xp-btn:disabled:active { transform: none; box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 6px 0 var(--ink), 0 8px 8px rgba(0,0,0,.22); }

/* bigger leaderboard popup */
#leaderboard-modal .xp-window { width: 640px; max-width: 94vw; }
#leaderboard-modal .window-body { min-height: 520px; }
#leaderboard-modal .lb-table { font-size: 16px; border-spacing: 0 4px; }
#leaderboard-modal .lb-table td { padding: 7px 10px; }
.lb-name { display: flex; align-items: center; gap: 12px; }
.lb-avatar {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  object-fit: cover; background: #dcdce8;
  border: 2px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.lb-username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-table tr.me .lb-avatar { border-color: rgba(0, 0, 0, 0.4); }
/* Pin the value column so its header/values start at the same x for every tab. */
.lb-table th:last-child, .lb-table td:last-child { width: 140px; }

.set-panel { display: none; flex-direction: column; gap: 14px; font-size: 15px; font-weight: 400; }
.set-panel.active { display: flex; }
.set-panel label { display: flex; flex-direction: column; gap: 7px; }
.set-panel label.chk { flex-direction: row; align-items: center; gap: 10px; }
.set-panel select, .set-panel input[type=range] { font-family: inherit; accent-color: var(--green); }
.set-panel select { padding: 8px; border: 3px solid var(--ink); border-radius: 10px; font-weight: 400; background: var(--surface-2); color: var(--text); }
.acct-id { display: flex; align-items: center; gap: 14px; }
.acct-info { display: flex; flex-direction: column; gap: 10px; }
.acct-row { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
.acct-label {
  font-size: 11px; font-weight: 400; letter-spacing: 1px; color: #fff;
  background: var(--grass-dk); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.acct-val {
  font-family: 'Luckiest Guy', cursive; font-size: 19px; letter-spacing: .5px;
  color: #8ada4f; text-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.acct-val.muted { color: var(--text-soft); opacity: .65; font-size: 15px; }
#acct-name { margin-top: 8px; }
#account-modal .set-panel { gap: 8px; }
.acct-skin { width: 114px; height: 114px; border: 4px solid var(--ink); border-radius: 16px; image-rendering: auto; background: #dcdce8; margin-top: -2px; }

#rank-modal .xp-window { width: 920px; max-width: 94vw; }
#info-modal .xp-window { width: 1120px; max-width: 96vw; }
#info-modal .window-body { overflow-y: hidden; }
#tokenomics-modal .xp-window { width: 600px; max-width: 94vw; }
.info-body { font-size: 15px; font-weight: 400; line-height: 1.6; max-width: 1120px; }
.info-body .pixel-h { margin: 18px 0 12px; }
.info-body .pixel-h:first-child { margin-top: 4px; }
.zone-note { background: rgba(255,90,90,.12); border: 2px dashed var(--red); border-radius: 12px; padding: 10px 12px; }
.made-by { text-align: center; color: var(--orange); font-weight: 400; margin-top: 20px; }

/* controls as keycaps */
.controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.ctrl { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ctrl .keys { display: inline-flex; gap: 3px; }
.ctrl kbd {
  font-family: 'Luckiest Guy', cursive; font-size: 11px; color: var(--ink);
  background: linear-gradient(180deg, #fff, #e7eaf2); border: 2px solid var(--ink);
  border-radius: 7px; padding: 4px 7px; box-shadow: 0 3px 0 rgba(0,0,0,.25); min-width: 14px; text-align: center;
}

/* weapon stat cards */
.weapon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.weapon-card {
  --wc: #888;
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, color-mix(in srgb, var(--wc) 9%, var(--surface-2)), var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--wc) 32%, rgba(255,255,255,.06));
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* top accent line in the weapon's colour */
.weapon-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--wc), transparent);
  opacity: .9;
}
.weapon-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--wc) 60%, transparent);
  box-shadow: 0 12px 26px rgba(0,0,0,.4), 0 0 22px -6px color-mix(in srgb, var(--wc) 70%, transparent);
}

/* teaser placeholder for upcoming weapons */
.weapon-card-soon { --wc: var(--orange); }
.weapon-card-soon .wc-soon {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 18px; min-height: 100%;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--wc) 18%, transparent) 0%, transparent 62%),
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(255,255,255,.025) 11px 22px);
}
.weapon-card-soon .wc-soon span {
  font-family: 'Luckiest Guy', cursive; font-size: 20px; line-height: 1.3; letter-spacing: .4px;
  color: color-mix(in srgb, var(--wc) 30%, #fff);
}

/* clean header with a thin colour underline */
.wc-head {
  position: relative; padding: 11px 14px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--wc) 38%, rgba(255,255,255,.05));
  background: linear-gradient(180deg, color-mix(in srgb, var(--wc) 16%, transparent), transparent);
}
.wc-name {
  position: relative; z-index: 1; font-size: 19px; letter-spacing: .5px;
  color: #fff;
}
.wc-shine { display: none; }

/* weapon art stage — the procedural gun on a softly-lit recessed panel */
.wc-art {
  position: relative; height: 78px; overflow: hidden;
  background:
    radial-gradient(110% 130% at 50% 30%, color-mix(in srgb, var(--wc) 22%, transparent) 0%, transparent 70%),
    radial-gradient(90% 100% at 50% 130%, rgba(0,0,0,.4), transparent 72%),
    color-mix(in srgb, var(--wc) 5%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--wc) 18%, rgba(255,255,255,.04));
  box-shadow: inset 0 1px 10px rgba(0,0,0,.4);
}
.wc-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.05) 50%, transparent 58%);
}
.wc-canvas {
  position: relative; display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.5));
}

/* stat row — minimal cells split by thin dividers */
.wc-stats { position: relative; display: flex; padding: 12px 6px; }
.wc-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--text); text-align: center;
}
.wc-stat + .wc-stat { border-left: 1px solid rgba(255,255,255,.07); }
.wc-stat .wc-ico {
  font-size: 12px; line-height: 1; margin-bottom: 1px;
  color: color-mix(in srgb, var(--wc) 70%, var(--text-soft));
}
.wc-stat b {
  font-family: 'Luckiest Guy', cursive; font-size: 17px; line-height: 1.05; color: #fff;
}
.wc-stat small {
  font-size: 8px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-soft);
}

/* ---- skins ---- */
#skins-screen .xp-window { width: 1066px; max-width: 97vw; }
.skins-layout { display: flex; gap: 26px; align-items: stretch; height: min(700px, calc(100dvh - 120px)); }
/* left: big preview */
.skin-preview-pane {
  flex: 0 0 380px; display: flex; flex-direction: column; align-items: center;
  background: var(--surface-2); border: 4px solid var(--ink); border-radius: 20px; padding: 24px;
  box-shadow: inset 0 4px 0 rgba(0,0,0,.18); position: relative;
}
/* canvas margin-top:auto + name margin-bottom:auto split the free space evenly above the canvas and
   below the name, so the skin + name stay vertically centered in both MY SKINS and ALL SKINS while
   the bottom group (level/upgrade row + equip button) stays pinned to the bottom. */
.skin-preview-canvas { width: 320px; height: 400px; image-rendering: auto; cursor: grab; touch-action: none; margin-top: auto; }
.skin-preview-canvas:active { cursor: grabbing; }
.skin-preview-name { margin-top: 10px; font-family: 'Luckiest Guy', cursive; font-size: 24px; color: var(--text); letter-spacing: .5px; }
/* supply counter under the name (ALL SKINS only). Always in the DOM — even when empty it carries the
   margin-bottom:auto spacer that pins the bottom group, so the layout matches MY SKINS / ALL SKINS. */
.skin-preview-supply { margin-top: 6px; margin-bottom: auto; font-family: 'Luckiest Guy', cursive; font-size: 12px; letter-spacing: .5px; color: var(--text-soft); }
.skin-preview-supply.sold-out { color: var(--red, #e05a5a); }
/* small toggle pinned to the top-right of the preview component */
.skin-rotate-btn {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; padding: 0; margin: 0; border-radius: 10px;
  font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.skin-rotate-btn.on { background: var(--green); border-color: var(--green-dk); color: #10210a; }
/* upgrade track + base/MAX variant toggle (under the preview name) */
/* level + upgrade row: current level (left) | UPGRADE button (right) */
.skin-upgrade { width: 100%; margin-top: 14px; display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; gap: 12px; }
.skin-upgrade[hidden] { display: none; }
/* left: the skin's current level (gold once it hits MAX) — same shape/size as the upgrade button */
.skin-level {
  position: relative;
  flex: 1; min-width: 0; min-height: 72px; padding: 6px 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
  border: 4px solid var(--ink); border-radius: 11px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 6px 0 var(--ink);
  font-family: 'Luckiest Guy', cursive; letter-spacing: .5px;
}
.skin-level-label { font-size: 11px; color: var(--text-soft); }
.skin-level-val { font-size: 26px; line-height: 1; color: var(--text); text-shadow: 0 1px 0 rgba(0,0,0,.4); }
/* small circular "i" info button, top-right of the level box — opens the level-info popup */
.skin-level-info {
  position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--surface-3); color: var(--text-soft);
  font-family: 'Luckiest Guy', cursive; font-size: 12px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 0 var(--ink);
}
.skin-level-info:hover { background: var(--surface-2); color: var(--text); }
/* level-info popup body: a row per tier */
.level-info-list { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; gap: 12px; }
.level-info-list li { display: flex; align-items: center; gap: 14px; }
.level-info-list .lvl-badge {
  flex: 0 0 auto; min-width: 52px; padding: 6px 10px; text-align: center;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
  border: 3px solid var(--ink); border-radius: 9px;
  font-family: 'Luckiest Guy', cursive; color: var(--text); box-shadow: 0 3px 0 var(--ink);
}
.level-info-list .lvl-desc { font-size: 15px; color: var(--text); }
/* right: upgrade one tier — equal width to the level box */
.skin-upgrade-btn { flex: 1; min-width: 0; min-height: 72px; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; line-height: 1.1; }
.skin-upgrade-btn:disabled { opacity: .5; cursor: default; }
/* stacked button content: "UPGRADE" on top, the coin cost below it */
.skin-upgrade-btn .up-label { font-size: 1em; }
.skin-upgrade-btn .up-cost { font-size: .8em; opacity: .9; display: inline-flex; align-items: center; gap: 4px; }
.skin-upgrade-btn .up-cost svg { width: 1em; height: 1em; }
/* maxed skin: gold "MAXED" button (stays full-opacity even though it's disabled) */
.skin-upgrade-btn.maxed { background: linear-gradient(180deg, #ffe27a 0 44%, var(--gold) 44% 100%); color: #3a2c00; border-color: #c79a13; text-shadow: 0 1px 0 rgba(255,255,255,.25); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 6px 0 var(--ink), 0 8px 8px rgba(0,0,0,.22); }
.skin-upgrade-btn.maxed:disabled { opacity: 1; }
.variant-toggle { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; border: 3px solid var(--ink); border-radius: 11px; overflow: hidden; box-shadow: 0 4px 0 var(--ink); }
.variant-toggle[hidden] { display: none; }
.variant-opt {
  min-width: 84px; padding: 8px 14px; cursor: pointer; border: none; background: var(--surface-3);
  color: var(--text-soft); font-family: 'Luckiest Guy', cursive; font-size: 15px; letter-spacing: 1px;
}
.variant-opt + .variant-opt { border-left: 3px solid var(--ink); }
.variant-opt.on { background: linear-gradient(180deg, #8ada4f 0 44%, var(--green) 44% 100%); color: #10210a; }
.variant-opt[data-variant="max"].on { background: linear-gradient(180deg, #ffe27a 0 44%, var(--gold) 44% 100%); color: #3a2c00; }
.variant-opt:disabled { opacity: .42; cursor: not-allowed; }
.skin-equip-btn { width: 100%; margin-top: 16px; }
.skin-equip-btn:disabled { opacity: .5; cursor: default; }
/* right: filter switch on top of the scrollable grid */
.skins-right { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.skins-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.skins-filter { display: flex; border: 3px solid var(--ink); border-radius: 11px; overflow: hidden; box-shadow: 0 4px 0 var(--ink); }
.skins-coins { display: flex; align-items: center; gap: 6px; font-family: 'Luckiest Guy', cursive; font-size: 20px; color: var(--gold); letter-spacing: .5px; }
.skins-coins svg { width: 22px; height: 22px; }
.filter-opt {
  min-width: 120px; padding: 9px 16px; cursor: pointer; border: none; background: var(--surface-3);
  color: var(--text-soft); font-family: 'Luckiest Guy', cursive; font-size: 15px; letter-spacing: 1px;
}
.filter-opt + .filter-opt { border-left: 3px solid var(--ink); }
.filter-opt.on { background: linear-gradient(180deg, #8ada4f 0 44%, var(--green) 44% 100%); color: #10210a; }
.skins-empty { grid-column: 1 / -1; text-align: center; color: var(--text-soft); padding: 32px 0; font-size: 14px; }
/* scrollable grid of boxes */
.skins-grid { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-content: start; overflow-x: hidden; overflow-y: auto; padding-right: 8px; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent; }
/* minimal scrollbar in the popup's navy tones */
.skins-grid::-webkit-scrollbar { width: 8px; }
.skins-grid::-webkit-scrollbar-track { background: transparent; }
.skins-grid::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; }
.skins-grid::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }
.skins-grid::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.skin-card { background: var(--surface-2); color: var(--text); border: 4px solid var(--ink); border-radius: 18px; padding: 12px; text-align: center; cursor: pointer; font-size: 13px; font-weight: 400; box-shadow: 0 5px 0 rgba(0,0,0,.3); }
.skin-card.previewing { border-color: var(--blue); box-shadow: 0 5px 0 var(--blue-dk); }
.skin-card.selected { border-color: var(--green); box-shadow: 0 5px 0 var(--green-dk); }
.skin-card.selected.previewing { border-color: var(--green); box-shadow: 0 5px 0 var(--green-dk); }
.skin-card.locked { opacity: .55; }
.skin-card canvas, .skin-card img { width: 96px; height: 96px; image-rendering: auto; background: var(--surface-3); border-radius: 12px; }
.skin-card .skin-name { margin-top: 8px; }

/* ---- toast / rankup ---- */
#toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 100; }
.toast { background: var(--ink); color: #fff; border: 4px solid var(--green); padding: 14px 20px; font-size: 14px; font-weight: 400; border-radius: 16px; box-shadow: 0 6px 0 rgba(0,0,0,.3); animation: toastin .3s; }
@keyframes toastin { from { transform: translateY(20px); opacity: 0; } }
.rankup { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 200; background: rgba(20,18,40,.6); }
.rankup .card { font-family: 'Luckiest Guy', cursive; background: var(--surface); border: 5px solid var(--gold); border-radius: 16px; padding: 36px; text-align: center; font-size: 22px; color: var(--text); box-shadow: 0 10px 0 rgba(0,0,0,.3); animation: slidein .4s; }
@keyframes slidein { from { transform: translateY(-80px) scale(.7); opacity: 0; } }

/* ---- mobile ---- */
.joystick { position: fixed; bottom: 34px; width: 124px; height: 124px; border: 4px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(44,43,70,.25); pointer-events: auto; }
#joy-move { left: 34px; }
#joy-aim.right { right: 34px; }
.joy-stick { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; background: rgba(255,255,255,.6); border: 3px solid rgba(44,43,70,.4); border-radius: 50%; }
.muted { color: #9a98b0; font-size: 13px; font-weight: 400; margin: 10px 0; }

/* ---- force landscape on touch devices ---- */
/* Mobile keeps the exact desktop layout; we only require a horizontal screen. */
#rotate-prompt { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-prompt {
    display: flex; position: fixed; inset: 0; z-index: 99999;
    align-items: center; justify-content: center; text-align: center;
    background: linear-gradient(180deg, var(--sky-top) 0%, #8fdcef 45%, var(--sky-bot) 100%);
    color: var(--panel);
  }
  .rotate-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px; }
  .rotate-phone {
    width: 64px; height: 108px; border: 5px solid var(--panel); border-radius: 14px;
    box-shadow: 0 6px 0 rgba(0,0,0,.25); animation: rotate-hint 1.6s ease-in-out infinite;
  }
  .rotate-title { font-size: 30px; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
  .rotate-sub { font-size: 15px; opacity: .85; }
}
@keyframes rotate-hint {
  0%, 40% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}

/* ---- compact the menu on short (landscape phone) viewports ----
   The lobby is laid out for a tall desktop window; on a short landscape phone the
   absolutely-positioned clusters collide — the top bar covers the centred logo, the
   stacked side cards run into the bottom dock, and GOD MODE overlaps the WAGER tile.
   Shrink each cluster toward its OWN anchor corner so it keeps its position but takes
   less room, clearing the overlaps without re-tuning every individual element. */
@media (max-height: 640px) {
  .menu-logo { font-size: 38px; top: 8px; -webkit-text-stroke-width: 4px;
    text-shadow: 0 5px 0 var(--ink), 0 8px 10px rgba(0,0,0,.35); }
  .topbar-left  { transform: scale(.8);  transform-origin: top left; }
  .topbar-right { transform: scale(.85); transform-origin: top right; }
  .menu-dock    { bottom: 14px; transform: scale(.82); transform-origin: bottom center; }
  .menu-left    { bottom: 16px; transform: scale(.8);  transform-origin: bottom left; }
  .menu-social  { bottom: 16px; transform: scale(.85); transform-origin: bottom right; }
  .hero-stage   { transform: translate(-50%, -64%) scale(.74); }
}
@media (max-height: 480px) {
  .menu-logo    { font-size: 30px; top: 6px; }
  .topbar-left  { transform: scale(.66); }
  .topbar-right { transform: scale(.74); }
  .menu-dock    { transform: scale(.7); }
  .menu-left    { transform: scale(.66); }
  .menu-social  { transform: scale(.76); }
  .hero-stage   { transform: translate(-50%, -62%) scale(.6); }
}