:root {
  --bg: #1a0806; --ink: #120604; --stone: #2a2629; --stone2: #3a3438; --iron: #6e6e78; --char: #1e1412;
  --ember: #ff6a12; --ember2: #ffb02e; --flame: #fff3b0; --blood: #b3121a; --gold: #ffd25a;
  --text: #ffeedd; --muted: #c9a894; --rare: #6fb6ff; --legend: #ffb02e; --common: #d9d4c7; --green: #4ade4a;
  --px: "Press Start 2P", monospace; --font: "Pixelify Sans", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 500; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }
kbd { display: inline-block; min-width: 20px; padding: 2px 5px; margin: 0 2px; font: 9px var(--px); color: var(--text); text-align: center; background: var(--stone2); border: 2px solid #000; border-bottom-width: 4px; }

#game { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; transition: filter 1s ease; }
body:not(.playing) #game { filter: brightness(.7) saturate(1.1); }
body.dead #game { filter: grayscale(.75) brightness(.55) sepia(.35); }

/* ---------- pixel panels ---------- */
.px-panel, .menu-panel, .side-card, .panel, .pause-card, .panel-s, #board, #map-card {
  background: linear-gradient(180deg, rgba(42, 30, 28, .94), rgba(22, 14, 12, .94));
  border: 3px solid #000; box-shadow: inset 0 0 0 2px #5a3a2a, inset 0 -6px 0 rgba(0, 0, 0, .35), 0 8px 0 rgba(0, 0, 0, .35);
}

/* ================= MAIN MENU ================= */
#title { position: fixed; inset: 0; z-index: 20; display: grid; align-content: center; justify-items: center; gap: 14px; overflow-y: auto; overflow-x: hidden;
  padding: max(20px, env(safe-area-inset-top)) clamp(16px, 4vw, 56px) max(20px, env(safe-area-inset-bottom)); transition: opacity .8s ease, transform .9s ease; }
#title.leaving { opacity: 0; transform: scale(1.04); pointer-events: none; }
.menu-shade { position: fixed; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse at 50% 120%, rgba(255, 90, 10, .35), transparent 60%),
  linear-gradient(90deg, rgba(14, 4, 2, .9) 0%, rgba(14, 4, 2, .55) 50%, rgba(14, 4, 2, .3) 100%),
  linear-gradient(180deg, transparent 60%, rgba(14, 4, 2, .9)); }
.menu-embers { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.menu-embers i { position: absolute; bottom: -10px; width: var(--s); height: var(--s); background: var(--ember2); box-shadow: 0 0 8px var(--ember), 0 0 18px var(--ember);
  animation: ember var(--d) linear infinite; animation-delay: var(--dl); }
@keyframes ember { from { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 70% { background: var(--ember); } to { transform: translate(var(--x), -105vh); opacity: 0; } }
.menu { position: relative; width: min(1120px, 100%); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr); gap: clamp(18px, 4vw, 48px); align-items: center; }
.hero { display: flex; flex-direction: column; gap: 14px; min-width: 0; animation: rise .8s both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.brand-row { display: flex; flex-wrap: wrap; gap: 10px; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; font: 9px var(--px); text-transform: uppercase; color: var(--text);
  background: rgba(0, 0, 0, .55); border: 2px solid #000; box-shadow: inset 0 0 0 2px rgba(255, 106, 18, .5); }
.live-pill i { width: 8px; height: 8px; background: var(--ember); box-shadow: 0 0 10px var(--ember); animation: blink 1.2s infinite; }
.pump-pill { color: var(--gold); }
@keyframes blink { 50% { opacity: .3; } }
.logo-frame { width: min(440px, 100%); aspect-ratio: 1.9; overflow: hidden; border: 4px solid #000; box-shadow: 0 0 0 3px #7a2a10, 0 0 50px rgba(255, 90, 10, .45), 0 10px 0 rgba(0, 0, 0, .5);
  background: #000; animation: emberpulse 3s ease-in-out infinite; }
.logo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; display: block; image-rendering: auto; }
.logo-frame.small { width: 220px; margin: 0 auto 6px; }
@keyframes emberpulse { 50% { box-shadow: 0 0 0 3px #a8380e, 0 0 70px rgba(255, 120, 20, .6), 0 10px 0 rgba(0, 0, 0, .5); } }
.tagline { margin: 0; max-width: 540px; font: 500 clamp(16px, 2vw, 19px)/1.45 var(--font); color: #f2d6c4; text-shadow: 0 2px 0 #000; }
.tagline b { color: var(--ember2); }

.menu-panel { width: min(440px, 100%); padding: 16px; margin-top: 4px; }
.mscreen { display: flex; flex-direction: column; gap: 12px; animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mtitle { margin: 0; font: 12px/1.5 var(--px); color: var(--text); text-align: center; }
#login-name { font: 600 22px var(--font); padding: 12px 14px; outline: none; color: var(--text); text-align: center; background: #0e0806; border: 3px solid #000; box-shadow: inset 0 0 0 2px #5a3a2a; }
#login-name:focus { box-shadow: inset 0 0 0 2px var(--ember); }
.err { color: #ff9a8a; font-size: 15px; margin: 0; text-align: center; }
.err:empty { display: none; }
.err a { color: var(--gold); }
.link-btn { background: none; border: 0; color: var(--muted); font: 600 15px var(--font); padding: 4px; }
.link-btn:hover { color: var(--ember2); }
.back { align-self: center; }
.choose-note { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }

.vbtn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 16px; font: 10px var(--px); color: var(--text); text-transform: uppercase;
  background: var(--stone2); border: 3px solid #000; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .4), inset 0 3px 0 rgba(255, 255, 255, .12); transition: transform .08s, filter .15s; }
.vbtn:hover { filter: brightness(1.18); }
.vbtn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .4); }
.vbtn:disabled { opacity: .6; }
.vbtn.loading .vbtn-label::after { content: '…'; }
.vbtn-play { font-size: 22px; padding: 16px; color: #2a0a02; text-shadow: 0 2px 0 rgba(255, 240, 180, .5);
  background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(0, 0, 0, .06) 8px 16px), linear-gradient(180deg, #ffd25a 0%, #ff8a12 45%, #e04a00 100%);
  box-shadow: inset 0 -6px 0 #8a2a04, inset 0 4px 0 #fff3b0, 0 0 30px rgba(255, 106, 18, .5); animation: lavaglow 2.4s ease-in-out infinite; }
@keyframes lavaglow { 50% { box-shadow: inset 0 -6px 0 #8a2a04, inset 0 4px 0 #fff3b0, 0 0 46px rgba(255, 140, 30, .75); } }
.sword-ico { width: 26px; height: 26px; background:
  linear-gradient(45deg, transparent 44%, #2a0a02 44% 56%, transparent 56%) 0 0 / 100% 100%,
  linear-gradient(-45deg, transparent 40%, #2a0a02 40% 60%, transparent 60%) 18% 18% / 34% 34% no-repeat; }
.vbtn-iron { background: linear-gradient(180deg, #7a7a84, #4a4a52); }
.vbtn-stone { background: linear-gradient(180deg, #4a3a34, #2a1e1a); }
.vbtn-dark { background: #140a08; font-size: 9px; }
.vbtn-phantom { background: linear-gradient(180deg, #ab9ff2, #7a6ad8); color: #fff; font-size: 11px; }
.vbtn-phantom svg { width: 26px; height: 26px; }
.vbtn-phantom.no-ext { opacity: .8; }
.who-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 15px; background: rgba(0, 0, 0, .35); border: 2px solid #000; }
.who-chip .kind { font-style: normal; font: 8px var(--px); padding: 3px 5px; background: var(--stone2); color: var(--muted); }
.who-chip .link-btn { margin-left: auto; }
.avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; font: 14px var(--px); color: #fff; text-shadow: 0 2px 0 #000; border: 3px solid #000; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3); }
.avatar.sm { width: 30px; height: 30px; font-size: 11px; }

.side-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; animation: rise .8s .15s both; }
.side-card h3 { margin: 0; font: 11px var(--px); color: var(--ember2); }
.district-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.district-list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: rgba(0, 0, 0, .3); border-left: 4px solid var(--ember); }
.district-list li.d-peaks { border-color: #8a8a92; } .district-list li.d-rift { border-color: #ff3a12; } .district-list li.d-camp { border-color: #b3121a; }
.district-list b { font-size: 16px; } .district-list span { font-size: 13px; color: var(--muted); }
.reward-strip { display: flex; flex-direction: column; gap: 6px; }
.reward-strip div { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.reward-strip b { margin-left: auto; color: var(--gold); }
.dot { display: inline-block; width: 10px; height: 10px; border: 2px solid #000; vertical-align: middle; }
.dot.common { background: var(--common); } .dot.rare { background: var(--rare); } .dot.legendary { background: var(--legend); box-shadow: 0 0 8px var(--legend); }
.paid-note { margin: 0; font-size: 14px; color: var(--muted); }
.paid-note b { color: var(--text); }
.menu-foot { margin: 0; font: 8px/1.6 var(--px); color: var(--muted); text-align: center; position: relative; }
#sound-hint { position: fixed; bottom: 14px; right: 14px; font: 8px var(--px); color: var(--text); background: rgba(0, 0, 0, .6); border: 2px solid #000; padding: 8px 10px; transition: opacity .5s; }
#sound-hint.gone { opacity: 0; pointer-events: none; }
@media (max-width: 860px) { .menu { grid-template-columns: 1fr; } .side-card { display: none; } .hero { align-items: center; text-align: center; } .brand-row { justify-content: center; } }

/* ================= HUD ================= */
#hud, #map-card, #killfeed, #chat, #hotbar, #crosshair, #touch, #toasts { display: none; }
body.playing #hud, body.playing #map-card, body.playing #killfeed, body.playing #chat, body.playing #hotbar, body.playing #toasts { display: flex; }
body.playing #crosshair { display: block; }
body.dead #crosshair, body.dead #hotbar { display: none; }
#hud { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; z-index: 5; gap: 10px; align-items: flex-start; pointer-events: none; }
.panel-s { pointer-events: auto; padding: 8px 10px; display: flex; align-items: center; gap: 10px; }
.player .who { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.player b { font: 10px var(--px); }
.player span { font-size: 13px; color: var(--muted); }
.hp { position: relative; height: 16px; background: #120604; border: 2px solid #000; }
.hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #7aff6a, #2a9a2a); transition: width .2s; }
.hp i.mid { background: linear-gradient(180deg, #ffe066, #c98a12); }
.hp i.low { background: linear-gradient(180deg, #ff6a5a, #9a0a0a); animation: blink .6s infinite; }
.hp span { position: relative; display: block; text-align: center; font: 8px/12px var(--px); text-shadow: 1px 1px 0 #000; }
.money { gap: 14px; }
.pouch { display: flex; align-items: center; gap: 8px; padding-right: 12px; border-right: 2px solid #000; }
.pouch b { display: block; font: 10px var(--px); color: var(--muted); }
.pouch.full b { color: var(--gold); text-shadow: 0 0 8px rgba(255, 176, 46, .7); }
.pouch small { font-size: 12px; color: var(--muted); }
.coin-ico { width: 22px; height: 22px; background: radial-gradient(circle, #fff0a8 0 22%, #f2b32a 24% 58%, #a86a0a 60% 70%, transparent 72%); }
.bank { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.bank-top { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--muted); }
.bank-top b { font: 10px var(--px); color: var(--text); } .bank-top em { font-style: normal; font-size: 12px; }
.bar { height: 8px; background: #120604; border: 2px solid #000; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c98a12, var(--gold)); transition: width .3s; }
.bar.big { height: 14px; }
.kd { font: 8px var(--px); color: var(--muted); }
.actions { margin-left: auto; gap: 4px; }
.actions button { width: 38px; height: 38px; display: grid; place-items: center; background: var(--stone2); border: 2px solid #000; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .4); color: var(--text); padding: 0; }
.actions button:hover { filter: brightness(1.25); }
.actions svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#btn-sound .off-i, #btn-sound.off .on-i { display: none; } #btn-sound.off .off-i { display: block; }
#killfeed { position: fixed; top: 74px; right: 10px; z-index: 5; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.kf { display: flex; align-items: center; gap: 8px; padding: 5px 9px; font-size: 15px; background: rgba(14, 6, 4, .8); border: 2px solid #000; animation: slidein .25s; }
.kf b { font-weight: 700; } .kf em { font-style: normal; color: var(--gold); font-size: 13px; }
.kf.mine { box-shadow: inset 0 0 0 2px var(--ember); } .kf.dead { box-shadow: inset 0 0 0 2px var(--blood); background: rgba(80, 6, 6, .85); }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }
#map-card { position: fixed; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 4; flex-direction: column; gap: 4px; padding: 6px; }
#minimap { width: 150px; height: 150px; image-rendering: pixelated; border: 2px solid #000; display: block; }
#radar-text { font-size: 12px; color: var(--muted); max-width: 150px; line-height: 1.2; }

/* hotbar */
#hotbar { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 5; flex-direction: column; align-items: center; gap: 6px; }
.held { display: flex; gap: 12px; align-items: baseline; font: 9px var(--px); text-shadow: 2px 2px 0 #000; }
.held span { font: 600 15px var(--font); color: var(--text); }
#potions.none { opacity: .4; }
.slots { display: flex; gap: 4px; padding: 4px; background: rgba(0, 0, 0, .6); border: 3px solid #000; }
.slot { position: relative; width: 54px; height: 54px; display: grid; place-items: center; background: #2a1e1a; border: 2px solid #000; box-shadow: inset 0 0 0 2px #4a3a34; cursor: pointer; }
.slot .ic canvas { width: 38px; height: 38px; image-rendering: pixelated; display: block; }
.slot kbd { position: absolute; top: -2px; left: -2px; font-size: 7px; padding: 1px 3px; min-width: 0; border-width: 1px; }
.slot.empty { opacity: .45; }
.slot[data-tier="rare"] { box-shadow: inset 0 0 0 2px var(--rare); }
.slot[data-tier="legendary"] { box-shadow: inset 0 0 0 2px var(--legend), inset 0 0 14px rgba(255, 176, 46, .5); }
.slot.active { outline: 3px solid var(--text); outline-offset: 0; transform: translateY(-3px); background: #3a2a24; }

/* crosshair + combat overlays */
#crosshair { position: fixed; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; z-index: 3; pointer-events: none;
  background: linear-gradient(#fff, #fff) center / 2px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 2px no-repeat; mix-blend-mode: difference; }
#hitmark { position: fixed; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(45deg, transparent 46%, #fff 46% 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #fff 46% 54%, transparent 54%);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
#hitmark.show { animation: hit .25s ease-out; }
#hitmark.hs { background: linear-gradient(45deg, transparent 44%, #ff3a2a 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #ff3a2a 44% 56%, transparent 56%); }
@keyframes hit { from { opacity: 1; transform: scale(1.3); } to { opacity: 0; transform: scale(1); } }
#vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
#vignette.show { animation: vig .55s ease-out; }
#vignette.hurt { background: radial-gradient(ellipse at center, transparent 45%, rgba(179, 18, 26, .7)); }
#vignette.burn { background: radial-gradient(ellipse at center, transparent 35%, rgba(255, 106, 18, .65)); }
#vignette.heal { background: radial-gradient(ellipse at center, transparent 50%, rgba(255, 90, 120, .45)); }
@keyframes vig { from { opacity: 1; } to { opacity: 0; } }
#dmg-dir { position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; opacity: 0; transform: rotate(var(--a, 0rad)); }
#dmg-dir i { position: absolute; left: -40px; top: -150px; width: 80px; height: 26px; background: radial-gradient(ellipse at 50% 100%, rgba(255, 40, 30, .9), transparent 70%); }
#dmg-dir.show { animation: vig 1.1s ease-out; }
#area-banner { position: fixed; top: 22%; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none; font: clamp(14px, 2.6vw, 24px) var(--px); color: var(--ember2); text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255, 106, 18, .6); opacity: 0; white-space: nowrap; }
#area-banner.show { animation: banner 3s ease-out; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, 10px); } 15%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
#center-msg { position: fixed; top: 32%; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; text-align: center; }
#center-msg b { font: clamp(20px, 4vw, 36px) var(--px); text-shadow: 4px 4px 0 #000; }
#center-msg span { font: 600 18px var(--font); text-shadow: 2px 2px 0 #000; }
#center-msg.red b { color: #ff3a2a; } #center-msg.gold b { color: var(--gold); }
#center-msg.show { animation: pop 2.2s ease-out; }
@keyframes pop { 0% { opacity: 0; transform: translateX(-50%) scale(1.6); } 12% { opacity: 1; transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
#prompt { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 4; pointer-events: none; font: 10px var(--px); padding: 8px 12px; background: rgba(0, 0, 0, .7); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--ember); opacity: 0; transition: opacity .15s; white-space: nowrap; }
#prompt.show { opacity: 1; }
#spawnprot, #lavawarn { position: fixed; left: 50%; top: 64%; transform: translateX(-50%); z-index: 4; pointer-events: none; font: 9px var(--px); padding: 6px 10px; display: none; border: 2px solid #000; }
#spawnprot { background: rgba(60, 120, 200, .8); } #lavawarn { background: rgba(200, 60, 10, .85); animation: blink .5s infinite; top: 68%; }
#spawnprot.show, #lavawarn.show { display: block; }
#bankring { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 4; pointer-events: none; display: none; flex-direction: column; align-items: center; gap: 10px; }
#bankring.show { display: flex; }
#bank-fill { --k: 0; width: 84px; height: 84px; border-radius: 50%; border: 3px solid #000; background: conic-gradient(var(--gold) calc(var(--k) * 360deg), rgba(0, 0, 0, .6) 0);
  -webkit-mask: radial-gradient(circle, transparent 30px, #000 31px); mask: radial-gradient(circle, transparent 30px, #000 31px); filter: drop-shadow(0 0 10px rgba(255, 210, 90, .7)); }
#bank-text { font: 9px var(--px); color: var(--gold); text-shadow: 2px 2px 0 #000; }

/* scoreboard */
#board { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; width: min(440px, 92vw); padding: 14px; display: none; flex-direction: column; gap: 8px; }
#board.show { display: flex; }
#board h3 { margin: 0 0 4px; font: 11px var(--px); color: var(--ember2); } #board h3 small { font: 13px var(--font); color: var(--muted); }
.brow { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; background: rgba(0, 0, 0, .35); font-size: 16px; }
.brow .rk { font: 9px var(--px); color: var(--muted); } .brow em { font-style: normal; font-size: 12px; color: var(--muted); } .brow .bt { color: var(--gold); }
.brow.you { box-shadow: inset 0 0 0 2px var(--ember); } .brow.down { opacity: .45; }

/* death screen */
#death { position: fixed; inset: 0; z-index: 7; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; text-align: center;
  background: radial-gradient(ellipse at center, rgba(60, 0, 0, .25), rgba(20, 0, 0, .75)); padding: 20px; }
#death.show { display: flex; animation: fade .6s; }
#death h2 { margin: 0; font: clamp(22px, 5vw, 46px) var(--px); color: #ff3a2a; text-shadow: 5px 5px 0 #000; }
#death p { margin: 0; font: 600 20px var(--font); text-shadow: 2px 2px 0 #000; }
#death .lost { color: var(--gold); } #death .timer { font: 10px var(--px); color: var(--muted); margin-top: 10px; }

/* toasts + announce */
#toasts { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 6; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: min(560px, 92vw); }
.toast { padding: 8px 14px; font-size: 16px; text-align: center; background: rgba(20, 10, 8, .92); border: 2px solid #000; box-shadow: inset 0 0 0 2px #5a3a2a; animation: fade .3s; }
.toast b { color: var(--ember2); } .toast.legendary { box-shadow: inset 0 0 0 2px var(--gold); }
#announce { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; padding: 12px 18px; max-width: 92vw;
  font: 10px/1.5 var(--px); color: #2a0a02; text-decoration: none; background: linear-gradient(180deg, #ffd25a, #ff8a12); border: 3px solid #000; box-shadow: 0 0 30px rgba(255, 140, 30, .6); }
#announce.show { animation: pop 7.5s ease-out forwards; }
#announce.big { font-size: 12px; }
#announce em { font: 600 13px var(--font); font-style: normal; }
.ann-ico { font-size: 22px; }

/* chat */
#chat { position: fixed; left: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 5; flex-direction: column; gap: 4px; width: min(360px, 60vw); }
#chat-log { max-height: 170px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; opacity: .35; transition: opacity .3s; scrollbar-width: none; }
#chat.fresh #chat-log, #chat.open #chat-log, #chat:hover #chat-log { opacity: 1; }
.msg { font-size: 15px; padding: 2px 6px; background: rgba(0, 0, 0, .5); text-shadow: 1px 1px 0 #000; overflow-wrap: anywhere; }
.msg b { margin-right: 6px; } .msg.sys { color: #ffc89a; } .msg.ann { color: var(--gold); } .msg a { color: var(--gold); }
#chat-form { display: none; gap: 4px; }
#chat.open #chat-form { display: flex; }
#chat-input { flex: 1; font: 600 15px var(--font); padding: 8px; color: var(--text); background: rgba(0, 0, 0, .75); border: 2px solid #000; outline: none; }
#chat-form button { width: 38px; background: var(--ember); border: 2px solid #000; }
#chat-form svg { width: 18px; height: 18px; fill: #2a0a02; }
#talk { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6; display: none; align-items: center; gap: 8px; padding: 6px 12px; font: 9px var(--px); background: var(--ember2); color: #2a0a02; border: 2px solid #000; }
#talk.show { display: flex; }
.talk-dot { width: 10px; height: 10px; background: #b3121a; animation: blink .6s infinite; }

/* touch controls */
body.playing #touch { display: none; }
@media (pointer: coarse) {
  body.playing #touch { display: block; }
  #touch button, #joy { position: fixed; z-index: 6; border: 3px solid #000; color: var(--text); background: rgba(42, 30, 28, .75); font-size: 22px; touch-action: none; }
  #joy { left: 18px; bottom: 120px; width: 120px; height: 120px; border-radius: 50%; }
  #joy-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--ember); border: 3px solid #000; }
  #btn-atk { right: 24px; bottom: 140px; width: 84px; height: 84px; border-radius: 50%; background: rgba(179, 18, 26, .8); font-size: 34px; }
  #btn-jump { right: 120px; bottom: 112px; width: 60px; height: 60px; border-radius: 50%; }
  #btn-use { right: 24px; bottom: 240px; width: 56px; height: 56px; }
  #btn-heal { right: 90px; bottom: 200px; width: 50px; height: 50px; }
  #btn-swap { right: 150px; bottom: 182px; width: 46px; height: 46px; }
  #btn-mic { left: 30px; bottom: 260px; width: 48px; height: 48px; }
  #touch button.on { background: var(--ember); }
  #map-card { top: 120px; bottom: auto; } #minimap { width: 110px; height: 110px; } #radar-text { display: none; }
  #chat { top: 150px; bottom: auto; width: 56vw; } #chat-log { max-height: 92px; } .msg { font-size: 12px; }
  #chat.open { top: 70px; z-index: 9; } #chat.open #chat-log { max-height: 160px; }
  #hotbar { bottom: 8px; } .slot { width: 44px; height: 44px; } .slot .ic canvas { width: 30px; height: 30px; }
  #map-card { top: 150px; } #killfeed { top: 260px; }
  .money .bank, .kd, .actions #btn-full, .actions #btn-sound { display: none; }
  #hud { gap: 6px; } .panel-s { padding: 5px 6px; gap: 6px; } .player .who { min-width: 0; } .player b { font-size: 8px; } .avatar { width: 30px; height: 30px; font-size: 10px; }
  .pouch { border: 0; padding: 0; } .pouch b { font-size: 8px; } .actions { flex-wrap: wrap; justify-content: flex-end; width: 80px; } .pouch b, .pouch small, .player span { white-space: nowrap; } .player span { font-size: 11px; } .actions button { width: 30px; height: 30px; }
  #prompt { top: 46%; font-size: 8px; } #spawnprot, #lavawarn { top: 52%; }
  #crosshair { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
}
@media (max-width: 720px) { .player .who { min-width: 110px; } .money { gap: 8px; } .actions button { width: 32px; height: 32px; } #killfeed { top: 120px; } .kf { font-size: 13px; } }

/* ================= modals + pause ================= */
.modal, #pause { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(10, 4, 2, .6); }
.panel { width: min(560px, 100%); max-height: 88vh; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.panel-head { display: flex; align-items: center; gap: 10px; }
.panel-head h2 { margin: 0; font: 13px var(--px); color: var(--ember2); flex: 1; }
.panel-head button { width: 34px; height: 34px; background: var(--stone2); border: 2px solid #000; color: var(--text); font-size: 16px; }
.panel h3 { margin: 6px 0 0; font: 10px var(--px); color: var(--muted); }
.muted { color: var(--muted); font-size: 15px; margin: 0; }
.wbal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.wbal b { font: 22px var(--px); color: var(--gold); } .pump-eq { color: var(--text); font-size: 16px; }
.carry-line { margin: 0; font-size: 15px; } .carry-line b { color: var(--gold); }
#w-form { display: flex; flex-direction: column; gap: 8px; } #w-form label { font-size: 14px; color: var(--muted); }
#w-wallet { width: 100%; font: 600 15px var(--font); padding: 10px; color: var(--text); background: #0e0806; border: 2px solid #000; outline: none; }
.linked { margin: 0; font-size: 14px; color: #c9b8ff; } .ok { margin: 0; color: var(--green); }
.hist { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; padding: 6px 8px; background: rgba(0, 0, 0, .3); font-size: 14px; }
.hist .st { text-transform: uppercase; font: 8px var(--px); align-self: center; } .hist.paid .st { color: var(--green); } .hist.rejected .st { color: #ff6a5a; } .hist a { color: var(--gold); }
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.how-step { display: flex; flex-direction: column; gap: 4px; padding: 10px; background: rgba(0, 0, 0, .3); }
.how-ico { font-size: 26px; } .how-step b { font: 10px var(--px); color: var(--ember2); } .how-step p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.35; }
.how-table { display: flex; flex-direction: column; gap: 4px; }
.how-table div { display: grid; grid-template-columns: 1.4fr auto 1.6fr; gap: 10px; align-items: center; padding: 6px 8px; background: rgba(0, 0, 0, .3); font-size: 15px; }
.how-table b { color: var(--gold); } .how-table span { color: var(--muted); font-size: 13px; }
.how-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 14px; }
@media (max-width: 560px) { .how-steps, .how-keys { grid-template-columns: 1fr; } .how-table div { grid-template-columns: 1fr auto; } .how-table span { grid-column: 1 / -1; } }
.set-row { display: grid; grid-template-columns: 1fr 1.2fr 52px; gap: 10px; align-items: center; font-size: 16px; }
.set-row input[type=range] { accent-color: var(--ember); } .set-row b { font: 8px var(--px); text-align: right; }
.set-row.check { grid-template-columns: 1fr auto; } .set-row.check input { width: 22px; height: 22px; accent-color: var(--ember); }
.pause-card { width: min(400px, 100%); padding: 18px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.pause-card h2 { margin: 0; font: 16px var(--px); color: var(--ember2); }
.pause-warn { margin: 0; font-size: 14px; color: #ff9a8a; }
.pause-keys { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* X (Twitter) link in the menu */
.x-link { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 14px; font: 600 16px var(--font); color: #fff; text-decoration: none;
  background: #000; border: 3px solid #000; box-shadow: inset 0 0 0 2px #3a3a3a, inset 0 -4px 0 rgba(255, 255, 255, .06); transition: filter .15s, transform .08s; }
.x-link:hover { filter: brightness(1.4); }
.x-link:active { transform: translateY(2px); }
.x-link svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.x-link b { color: var(--ember2); }

/* Pump.fun buy button next to X */
.social-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.social-row .x-link { padding: 11px 8px; font-size: 15px; }
.pump-link { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 8px; font: 600 15px var(--font); color: #062a14; text-decoration: none;
  background: linear-gradient(180deg, #86f7b0, #3ed37a); border: 3px solid #000; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), inset 0 3px 0 rgba(255, 255, 255, .45); transition: filter .15s, transform .08s; }
.pump-link:hover { filter: brightness(1.1); }
.pump-link:active { transform: translateY(2px); }
.pump-link b { color: #000; }
.pf-pill { width: 24px; height: 12px; flex: none; border: 2px solid #062a14; border-radius: 8px; transform: rotate(-35deg);
  background: linear-gradient(90deg, #fff 50%, #2a9a5a 50%); }
@media (max-width: 380px) { .social-row { grid-template-columns: 1fr; } }
.social-row a { white-space: nowrap; min-width: 0; }
.social-row a span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .social-row a { font-size: 13px; gap: 6px; } .pf-pill { width: 20px; height: 10px; } .social-row .x-link svg { width: 15px; height: 15px; } }