:root {
  --panel: rgba(12, 18, 36, 0.62);
  --panel-solid: #121a33;
  --line: rgba(255, 255, 255, 0.14);
  --accent: #ffd23f;
  --accent2: #37e0ff;
  --text: #f4f7ff;
  --dim: #aab6d4;
  --health: #4ee06a;
  --shield: #3fa2ff;
  --danger: #ff4a5a;
  --font: 'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
}
html, body { margin: 0; padding: 0; overflow: hidden; background: #0b1220; width: 100%; height: 100%; }
body { font-family: var(--font); color: var(--text); user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; outline: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: none; }
button { font-family: var(--font); }

/* ---------------- loading ---------------- */
#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #3a5dd8 0%, #1c2a78 45%, #0b1030 100%); z-index: 50; transition: opacity .6s; }
#loading.hide { opacity: 0; pointer-events: none; }
.load-inner { text-align: center; width: min(520px, 86vw); }
.logo, .menu-logo { font-weight: 900; font-style: italic; letter-spacing: 2px; line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #ffe46b 55%, #ff9f1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 #1a1f5c) drop-shadow(0 10px 18px rgba(0,0,0,.45)); transform: skewX(-6deg); }
.logo { font-size: clamp(56px, 11vw, 120px); }
.load-sub { margin-top: 6px; font-weight: 800; letter-spacing: 8px; font-size: 16px; color: #bfe0ff; }
.load-bar { margin: 34px auto 10px; height: 12px; border-radius: 8px; background: rgba(255,255,255,.12); overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
#load-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #5ef0ff, #ffe46b); transition: width .25s; }
#load-text { font-size: 14px; color: #cfe3ff; letter-spacing: 1px; }

/* ---------------- main menu ---------------- */
.menu { position: fixed; inset: 0; pointer-events: auto !important; display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(8,14,40,.88) 0%, rgba(8,14,40,.55) 38%, rgba(8,14,40,0) 70%); transition: opacity .35s; }
.menu.hidden { opacity: 0; pointer-events: none !important; }
.menu-left { margin-left: clamp(24px, 7vw, 110px); width: min(460px, 86vw); }
.menu-logo { font-size: clamp(64px, 10vw, 128px); }
.menu-sub { margin: 10px 0 34px 6px; font-weight: 800; letter-spacing: 7px; color: var(--accent2); font-size: 15px; }
.play-btn { width: 100%; padding: 20px 0; font-size: 34px; font-weight: 900; font-style: italic; letter-spacing: 3px; color: #1b1400; cursor: pointer;
  background: linear-gradient(180deg, #fff27a, #ffc21a 60%, #ff9a0a); border: 0; border-radius: 10px; transform: skewX(-6deg);
  box-shadow: 0 6px 0 #a45c00, 0 14px 30px rgba(0,0,0,.4); transition: transform .08s, filter .15s; }
.play-btn:hover { filter: brightness(1.08); transform: skewX(-6deg) translateY(-2px); }
.play-btn:active { transform: skewX(-6deg) translateY(3px); box-shadow: 0 3px 0 #a45c00; }
.menu-opts { margin-top: 22px; display: grid; gap: 10px; }
.menu-opts label, .menu-panel label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; color: var(--dim);
  background: var(--panel); padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); }
select, input[type=range] { font-family: var(--font); }
select { background: #1d2a52; color: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-weight: 700; min-width: 150px; }
.menu-row { display: flex; gap: 10px; margin-top: 14px; }
.menu-row button, .menu-panel button, .pause-card button, .end-buttons button {
  flex: 1; padding: 11px 10px; font-weight: 800; letter-spacing: 1px; color: #fff; cursor: pointer; background: #24356b;
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px; transition: background .12s, transform .08s; }
.menu-row button:hover, .menu-panel button:hover, .pause-card button:hover, .end-buttons button:hover { background: #30479a; }
button.primary { background: linear-gradient(180deg, #ffe45a, #ffb31a); color: #241800; border: 0; }
button.primary:hover { background: linear-gradient(180deg, #fff07a, #ffc23a); }
.menu-tip { margin-top: 18px; color: var(--dim); font-size: 13px; line-height: 1.5; }
.menu-panel { position: absolute; right: clamp(20px, 6vw, 90px); top: 50%; transform: translateY(-50%) scale(.96); width: min(460px, 88vw);
  background: rgba(14, 20, 44, .94); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 10px;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.menu-panel.show { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.menu-panel h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: 2px; }
.menu-panel input[type=range] { flex: 1; accent-color: var(--accent); }
.menu-panel output { width: 44px; text-align: right; color: #fff; }
.menu-panel label.chk { justify-content: flex-start; }
.menu-panel label.chk input { width: 18px; height: 18px; accent-color: var(--accent); }
/* keybinds */
.menu-panel.controls { width: min(560px, 92vw); }
.kb-help { font-size: 13px; color: var(--dim); line-height: 1.4; }
.kb-list { display: grid; gap: 4px; max-height: min(56vh, 520px); overflow-y: auto; padding-right: 6px; }
.kb-sec { margin: 10px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--accent2); }
.kb-sec:first-child { margin-top: 0; }
.kb-row { display: grid; grid-template-columns: 1fr 118px 118px; gap: 6px; align-items: center; font-size: 14px; font-weight: 700; color: var(--dim); }
.kb-row.unbound > span:first-child { color: var(--danger); }
.menu-panel .kb-key { box-sizing: border-box; flex: none; min-height: 32px; padding: 5px 6px; font-size: 13px; font-weight: 800; letter-spacing: .5px; background: #1d2a52; color: #fff;
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-panel .kb-key.empty { color: rgba(255,255,255,.3); }
.menu-panel .kb-key.listening { background: var(--accent); color: #241800; border-color: var(--accent); animation: kb-pulse .9s ease-in-out infinite; }
.kb-row.fixed .kb-key { display: grid; place-items: center; background: transparent; border-color: transparent; color: var(--dim); }
@keyframes kb-pulse { 50% { filter: brightness(1.25); } }
.kb-note { min-height: 18px; font-size: 13px; font-weight: 700; color: var(--accent); }
.kb-foot { display: flex; gap: 10px; }
.menu-toast { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); background: var(--panel); padding: 10px 18px; border-radius: 8px; font-weight: 800; }

/* ---------------- pause / overlays ---------------- */
.pause, .inventory, .bigmap { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(6,10,24,.55); pointer-events: auto !important; }
.pause.show, .inventory.show, .bigmap.show { display: flex; }
.pause-card, .inv-card { background: rgba(14,20,44,.95); border: 1px solid var(--line); border-radius: 14px; padding: 26px; display: grid; gap: 10px; min-width: 300px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.pause-card h2, .inv-card h2 { margin: 0 0 8px; letter-spacing: 4px; font-style: italic; }
.pause .menu-panel { right: 50%; transform: translate(50%, -50%) scale(.96); }
.pause.panel-open .pause-card { visibility: hidden; }
.pause .menu-panel.show { transform: translate(50%, -50%) scale(1); }
.lock-hint { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); background: var(--panel); padding: 12px 22px; border-radius: 10px; font-weight: 800; display: none; pointer-events: auto !important; cursor: pointer; }
.lock-hint.show { display: block; }
/* inventory: item cards you can drag onto each other to swap them, or out of the card to drop them */
.inv-card { position: relative; min-width: min(900px, 96vw); max-width: 96vw; gap: 14px; }
.inv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.inv-head h2 { margin: 0; }
.inv-help { color: var(--dim); font-size: 12px; font-weight: 700; }
/* (a fixed minimum height and a stats panel that adds none of its own: what is hovered never resizes
   or moves the card) */
.inv-main { display: flex; gap: 18px; align-items: stretch; min-height: 412px; }
.inv-left { flex: 1; display: grid; gap: 8px; min-width: 0; }
.inv-sec { font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--accent2); margin-top: 4px; }
.inv-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.islot { position: relative; display: flex; flex-direction: column; gap: 5px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.islot .icard { position: relative; aspect-ratio: 1; border-radius: 9px; border: 2px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); transition: transform .12s, border-color .12s, box-shadow .12s; }
.islot .icard img { position: absolute; inset: 0; width: 100%; height: 100%; }
.islot.empty { cursor: default; }
.islot.empty .icard { border-style: dashed; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.islot.ipick { cursor: pointer; }
.islot.filled:hover .icard { transform: translateY(-2px); border-color: rgba(255,255,255,.55); }
.islot.sel .icard { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.islot.swapsel .icard { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,210,63,.45); }
.islot.dragfrom .icard { opacity: .35; }
.islot.dragover .icard { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,210,63,.55); transform: scale(1.04); }
.icard .ikey { position: absolute; left: 6px; top: 4px; z-index: 1; font-size: 11px; font-weight: 900; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.icard .iextra { position: absolute; right: 6px; bottom: 4px; z-index: 1; font-size: 13px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.iname { font-weight: 800; font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iname.dim { color: var(--dim); font-weight: 700; }
.irar { margin-top: -4px; font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; text-align: center; }
.inv-traps, .inv-ammo, .inv-mats { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-traps .islot { width: 88px; }
.inv-traps .iname { white-space: normal; line-height: 1.15; font-size: 11px; }
.inv-ammo .ichip, .inv-mats .ichip { width: 74px; }
.inv-traps .none { color: var(--dim); font-size: 12px; font-weight: 700; padding: 6px 0; }
.ichip { position: relative; }
.ichip .icard { position: relative; aspect-ratio: 1; border-radius: 8px; border: 2px solid rgba(255,255,255,.1); }
.ichip .icard img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ichip .iextra { position: absolute; right: 5px; bottom: 3px; z-index: 1; font-size: 13px; font-weight: 900; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.ichip .iname { font-size: 11px; margin-top: 3px; }
.ichip.zero { opacity: .45; }
.inv-row2 { display: flex; gap: 22px; flex-wrap: wrap; }
.inv-info { width: 240px; flex: none; contain: size; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.inv-info .big { position: relative; flex: none; aspect-ratio: 1.45; border-radius: 10px; }
.inv-info .big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.inv-info h3 { margin: 0; font-size: 18px; letter-spacing: .5px; }
.inv-info .rarity { margin-top: -4px; font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
.inv-info .stats { display: grid; gap: 4px; }
.inv-info .stats div { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--dim); }
.inv-info .stats b { color: #fff; }
.inv-info .desc { font-size: 12px; line-height: 1.45; color: #d6def0; }
.inv-info .hint { color: var(--dim); font-size: 12px; margin: auto 0; text-align: center; line-height: 1.5; }
/* drop target: appears while dragging, and dropping anywhere off the card works too */
/* (under the card, so showing it doesn't resize the card either) */
.inv-drop { display: none; position: absolute; left: 26px; right: 26px; top: calc(100% + 10px); align-items: center; justify-content: center; gap: 10px; height: 46px; border: 2px dashed rgba(255,120,120,.55); border-radius: 10px;
  color: #ffb0b0; font-weight: 900; letter-spacing: 2px; font-size: 13px; background: rgba(14,20,44,.95); transition: background .12s, border-color .12s; }
.inventory.dragging .inv-drop { display: flex; }
.inv-drop.over { background: rgba(96,26,36,.95); border-color: #ff7a7a; color: #fff; }
.inventory.dragging, .inventory.dragging * { cursor: grabbing !important; }
.inv-ghost { position: fixed; left: 0; top: 0; width: 92px; height: 92px; border-radius: 10px; pointer-events: none; z-index: 60; opacity: .92;
  box-shadow: 0 10px 24px rgba(0,0,0,.5); transform: translate(-50%, -50%) rotate(-4deg) scale(1.05); }
.inv-ghost img { position: absolute; inset: 0; width: 100%; height: 100%; }
.inv-ghost.drop { outline: 3px solid #ff6a6a; }
.map-card { position: relative; background: #0d1530; border-radius: 12px; padding: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.map-card canvas { display: block; border-radius: 8px; }
.map-legend { position: absolute; left: 20px; bottom: 18px; display: flex; gap: 14px; background: rgba(10,14,30,.75); padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.lg-storm { background: #9a50e0; } .lg-safe { border: 2px solid #fff; width: 8px !important; height: 8px !important; } .lg-you { background: #ffe14a; }

/* ---------------- HUD ---------------- */
.hud { position: fixed; inset: 0; transition: opacity .3s; }
.hud.hidden { opacity: 0; }
.hud-top { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.compass { width: 420px; height: 26px; overflow: hidden; position: relative; background: linear-gradient(90deg, transparent, rgba(8,12,28,.55) 18%, rgba(8,12,28,.55) 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.cmp-strip { position: absolute; top: 0; left: 0; display: flex; height: 100%; align-items: center; white-space: nowrap; will-change: transform; }
.cmp-strip span { width: 34px; flex: 0 0 34px; text-align: center; font-weight: 800; font-size: 11px; color: rgba(255,255,255,.55); }
.cmp-strip .cmp-main { color: #fff; font-size: 15px; }
.cmp-strip .cmp-sub { color: #cfe0ff; font-size: 12px; }
.cmp-mark { position: absolute; left: 50%; top: 0; width: 2px; height: 8px; background: var(--accent); transform: translateX(-50%); }
.announce { margin-top: 16px; text-align: center; opacity: 0; transform: translateY(-8px); transition: opacity .35s, transform .35s; }
.announce.show { opacity: 1; transform: none; }
.ann-title { font-size: 30px; font-weight: 900; font-style: italic; letter-spacing: 2px; text-shadow: 0 3px 0 rgba(0,0,0,.4), 0 0 20px rgba(0,0,0,.35); }
.ann-sub { font-size: 15px; font-weight: 700; color: #dfe8ff; text-shadow: 0 2px 4px rgba(0,0,0,.6); }

.hud-tr { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.minimap-wrap { position: relative; }
.minimap { width: 200px; height: 200px; border-radius: 14px; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 6px 18px rgba(0,0,0,.4); background: #2f79b8; display: block; }
.poi-label { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: rgba(10,14,30,.7); padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.poi-label.show { opacity: 1; }
.stats { display: flex; gap: 8px; }
.stat { display: flex; align-items: center; gap: 6px; background: var(--panel); padding: 4px 10px; border-radius: 8px; font-size: 18px; font-weight: 900; }
.stat svg { width: 17px; height: 17px; color: #cfe0ff; }
.storm-info { display: flex; align-items: center; gap: 6px; background: var(--panel); padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 800; }
.storm-info svg { width: 15px; height: 15px; color: #c58aff; }
.storm-info.shrinking { color: #e9c9ff; background: rgba(90, 30, 150, .6); }

.killfeed { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 4px; max-width: 42vw; }
.kf { background: rgba(8,12,28,.55); padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; color: #e6ecff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf b { color: #fff; font-weight: 800; }
.kf.me { background: rgba(160, 110, 0, .55); }
.kf-w { color: #ffd87a; font-weight: 700; }

.crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.crosshair.hidden { display: none; }
.crosshair i { position: absolute; left: 0; top: 0; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55); display: none; }
.crosshair .ch-t, .crosshair .ch-b { width: 2px; height: 10px; }
.crosshair .ch-l, .crosshair .ch-r { width: 10px; height: 2px; }
.crosshair .ch-dot { width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%, -50%); }
.crosshair .ch-circle { background: none; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.35); transform: translate(-50%, -50%); }
.crosshair[data-mode=lines] .ch-t, .crosshair[data-mode=lines] .ch-b, .crosshair[data-mode=lines] .ch-l, .crosshair[data-mode=lines] .ch-r,
.crosshair[data-mode=lines] .ch-dot, .crosshair[data-mode=dot] .ch-dot, .crosshair[data-mode=circle] .ch-circle, .crosshair[data-mode=circle] .ch-dot { display: block; }
.crosshair[data-mode=build] .ch-dot { display: block; width: 6px; height: 6px; background: var(--accent2); }
.crosshair[data-mode=edit] .ch-dot { display: block; width: 8px; height: 8px; border-radius: 1px; background: #7fc6ff; box-shadow: 0 0 0 2px rgba(10, 30, 60, .6); }
.hitmarker { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
.hitmarker.show { opacity: 1; }
.hitmarker i { position: absolute; width: 12px; height: 2.5px; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8); }
.hitmarker i:nth-child(1) { transform: translate(-18px, -12px) rotate(45deg); }
.hitmarker i:nth-child(2) { transform: translate(6px, -12px) rotate(-45deg); }
.hitmarker i:nth-child(3) { transform: translate(-18px, 10px) rotate(-45deg); }
.hitmarker i:nth-child(4) { transform: translate(6px, 10px) rotate(45deg); }
.hitmarker.head i { background: #ffd23f; }
.hitmarker.kill i { background: var(--danger); width: 16px; }
.dmgnums, .dmgdirs { position: absolute; inset: 0; }
.dmgnum { position: absolute; left: 0; top: 0; font-size: 26px; font-weight: 900; font-style: italic; color: #fff; opacity: 0; will-change: transform;
  text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 6px rgba(0,0,0,.35); display: none; }
.dmgnum.show { display: block; }
.dmgnum.head { color: #ffd23f; font-size: 32px; }
/* damage to the shield: blue (a headshot on the shield keeps the bigger size) */
.dmgnum.shield { color: #58b8ff; text-shadow: 0 2px 0 rgba(4,22,60,.8), 0 0 6px rgba(20,90,200,.45); }
/* the shield broken: a blue shield icon splitting along a crack */
.shieldbrk { position: absolute; left: 0; top: 0; width: 34px; height: 38px; display: none; will-change: transform; }
.shieldbrk.show { display: block; }
.shieldbrk svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 4px rgba(60,160,255,.8)); }
.shieldbrk .sb-l, .shieldbrk .sb-r { fill: #58b8ff; stroke: #d8f0ff; stroke-width: 1.4; stroke-linejoin: round; transform-box: fill-box; }
.shieldbrk .sb-l { transform-origin: 100% 100%; }
.shieldbrk .sb-r { transform-origin: 0% 100%; }
.shieldbrk .sb-c { fill: none; stroke: #0b2a5a; stroke-width: 1.6; stroke-linejoin: round; }
.shieldbrk.show svg { animation: sbpop .75s ease-out forwards; }
.shieldbrk.show .sb-l { animation: sbl .75s ease-in forwards; }
.shieldbrk.show .sb-r { animation: sbr .75s ease-in forwards; }
.shieldbrk.show .sb-c { animation: sbc .75s linear forwards; }
@keyframes sbpop { 0% { transform: scale(.6); opacity: 0; } 12% { transform: scale(1.12); opacity: 1; } 30% { transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sbl { 0%, 28% { transform: none; } 100% { transform: translate(-7px, 5px) rotate(-14deg); } }
@keyframes sbr { 0%, 28% { transform: none; } 100% { transform: translate(7px, 5px) rotate(14deg); } }
@keyframes sbc { 0%, 28% { opacity: 1; } 40%, 100% { opacity: 0; } }
.dmgdir { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; border-radius: 50%; opacity: 0;
  border-top: 7px solid rgba(255, 50, 60, .85); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 45%, #000 55%, transparent 70%); mask-image: linear-gradient(90deg, transparent 30%, #000 45%, #000 55%, transparent 70%); }
.weakpoint { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #5ad8ff; box-shadow: 0 0 12px #5ad8ff, inset 0 0 8px rgba(90,216,255,.8); display: none; animation: pulse .8s infinite alternate; }
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.6); } }
.bus-hint .key { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; background: #fff; color: #111; border-radius: 6px; font-weight: 900; font-size: 14px; }
/* interaction prompt: round key badge, and a ring that fills round it while the key is held */
.prompt { position: absolute; left: 50%; top: calc(50% + 64px); display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px;
  background: linear-gradient(90deg, rgba(10,16,34,.78), rgba(10,16,34,.5)); border-radius: 30px; font-size: 15px; font-weight: 700; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 6px) scale(.96); transition: opacity .12s, transform .12s; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.prompt.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.prompt .pkey { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.prompt .key { position: relative; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0; box-sizing: border-box; border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #dfe6f2); color: #10131c; font-weight: 900; font-size: 15px; box-shadow: 0 2px 5px rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.12);
  transition: transform .15s, background .15s; }
.prompt .key.long { border-radius: 15px; padding: 0 7px; font-size: 12px; }
.prompt .pring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.prompt .pr-track { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 4; opacity: 0; transition: opacity .12s; }
.prompt .pr-fill { fill: none; stroke: #ffe066; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: 0; transition: opacity .1s;
  filter: drop-shadow(0 0 3px rgba(255, 200, 60, .85)); }
.prompt.holding .pr-track, .prompt.holding .pr-fill { opacity: 1; }
.prompt.holding .key { transform: scale(.9); background: linear-gradient(180deg, #fff6c8, #ffd95a); }
.prompt .ptext i { font-style: normal; color: #d8e2f6; font-weight: 700; }
.prompt .ptext b { font-weight: 900; }
.prompt .ptext b.gold { color: #ffcf4a; }
.prompt .rar { font-size: 10px; font-weight: 900; color: #111; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
.prompt .swap { color: var(--dim); font-size: 12px; }
/* edit mode: which keys select, confirm and reset */
.edit-hint { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); display: none; align-items: center; gap: 7px; background: var(--panel); padding: 6px 12px; border-radius: 9px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.edit-hint.show { display: flex; }
.edit-hint b { color: #7fc6ff; font-weight: 900; letter-spacing: 1px; margin-right: 4px; }
.edit-hint i { font-style: normal; color: rgba(255,255,255,.65); margin-left: 6px; }
.edit-hint .key { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; background: #fff; color: #111; border-radius: 5px; font-weight: 900; font-size: 12px; }
.using { position: absolute; left: 50%; top: calc(50% + 110px); transform: translateX(-50%); width: 240px; display: none; text-align: center; }
.use-label { font-weight: 800; font-size: 14px; text-shadow: 0 2px 3px rgba(0,0,0,.6); margin-bottom: 4px; }
.use-bar { height: 8px; background: rgba(0,0,0,.45); border-radius: 5px; overflow: hidden; }
.use-fill { height: 100%; width: 0; background: linear-gradient(90deg, #5ef0ff, #ffe46b); }
.structhp { position: absolute; left: calc(50% + 40px); top: calc(50% + 24px); display: none; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.sh-bar { width: 90px; height: 6px; background: rgba(0,0,0,.5); border-radius: 3px; overflow: hidden; }
.sh-bar div { height: 100%; background: #9ef08a; }

.bars { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(420px, 44vw); display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-num { width: 42px; text-align: right; font-size: 22px; font-weight: 900; font-style: italic; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.bar { flex: 1; height: 18px; background: rgba(0,0,0,.45); border-radius: 4px; position: relative; overflow: hidden; transform: skewX(-12deg); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.bar-fill { height: 100%; width: 100%; transition: width .18s; }
.bar-seg { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), rgba(0,0,0,.35) calc(25% - 2px) 25%); }
.health .bar-fill { background: linear-gradient(180deg, #7dff8f, #2fbf4a); }
.shield .bar-fill { background: linear-gradient(180deg, #8fd0ff, #2f86ff); }
.shield.empty .bar-num { color: #7f93b8; }

.hud-br { position: absolute; right: 18px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ammo { display: flex; align-items: baseline; gap: 8px; font-style: italic; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.ammo b { font-size: 34px; font-weight: 900; }
.ammo span { font-size: 18px; font-weight: 800; color: #cfd8ee; }
.ammo.low b { color: #ff8a5a; }
.slots, .buildbar { display: flex; gap: 6px; }
.slot, .bslot { position: relative; width: 64px; height: 64px; border-radius: 10px; background: rgba(8,12,28,.55); border: 2px solid rgba(255,255,255,.18); display: grid; place-items: center; transition: transform .1s, border-color .1s; }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.slot:not(.filled):not(.pick) { background: rgba(8,12,28,.55); }
.slot.sel, .bslot.sel { border-color: #fff; transform: translateY(-6px); box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 8px 16px rgba(0,0,0,.35); }
.slot .cnt, .bslot .cnt { position: absolute; right: 5px; bottom: 2px; z-index: 1; font-weight: 900; font-size: 14px; text-shadow: 0 1px 2px #000; }
.slot .kn, .bslot .kn { position: absolute; left: 5px; top: 2px; z-index: 1; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.8); text-shadow: 0 1px 2px rgba(0,0,0,.7); white-space: nowrap; max-width: calc(100% - 10px); overflow: hidden; text-overflow: ellipsis; }
.bslot { color: #bfe8ff; }
.bslot svg { width: 40px; height: 40px; }
.bslot.sel { color: #fff; background: rgba(40, 140, 220, .55); }
/* the build bar's trap slot: the trap outline when empty, the selected trap's art when we carry one */
.bslot .ticon { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
/* stairs turned with the rotate key: which way they go up, seen from above */
.bslot .rot { display: none; position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; box-sizing: border-box; padding: 2px; border-radius: 50%;
  background: var(--accent); color: #241800; box-shadow: 0 1px 3px rgba(0,0,0,.55); transition: transform .12s; }
.bslot .rot svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.bslot.trapslot.filled svg { display: none; }
.bslot.trapslot.filled .ticon { display: block; }
/* kept below the minimap, stats and storm timer (about 300 px tall) on short windows */
.mats { position: absolute; right: 18px; top: max(50%, 380px); transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; }
.mat { position: relative; display: flex; align-items: center; gap: 6px; background: rgba(8,12,28,.5); padding: 3px 10px 3px 4px; border-radius: 8px; border: 2px solid transparent; font-weight: 900; font-size: 17px; }
.mat .mico { width: 34px; height: 34px; border-radius: 7px; background: radial-gradient(110% 95% at 50% 30%, #aeb6bf, #4d5761 85%); overflow: hidden; flex: none; }
.mat .mico img { width: 100%; height: 100%; display: block; }
.mat b { min-width: 36px; text-align: right; }
.mat.sel { border-color: #fff; background: rgba(40, 140, 220, .55); }
.mat.low { border-color: var(--danger); }
.mat .gain { position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); color: #9ef08a; font-style: normal; font-weight: 900; opacity: 0; transition: opacity .2s; text-shadow: 0 1px 3px #000; }
.mat .gain.show { opacity: 1; }
.toasts { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.toast { background: rgba(8,12,28,.72); padding: 8px 16px; border-radius: 8px; font-weight: 800; transition: opacity .4s; }
.toast.out, .pick.out { opacity: 0; }
.pickups { position: absolute; left: 18px; bottom: 120px; display: flex; flex-direction: column; gap: 4px; }
.pick { display: flex; align-items: center; gap: 8px; background: rgba(8,12,28,.55); padding: 3px 12px 3px 4px; border-radius: 8px; font-weight: 800; font-size: 14px; transition: opacity .4s; }
.pick .pico { position: relative; width: 38px; height: 38px; border-radius: 7px; flex: none; }
.pick .pico img { position: absolute; inset: 0; width: 100%; height: 100%; }
.elimpop { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-size: 22px; font-weight: 900; font-style: italic; opacity: 0; text-shadow: 0 2px 0 rgba(0,0,0,.5); white-space: nowrap; }
.elimpop span { color: var(--danger); }
.elimpop.show { animation: elimpop 2.2s forwards; }
@keyframes elimpop { 0% { opacity: 0; transform: translateX(-50%) scale(1.4); } 10% { opacity: 1; transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.storm-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(120,40,200,0) 35%, rgba(110,30,190,.55) 100%); opacity: 0; transition: opacity .6s; }
.storm-vignette.show { opacity: 1; }
.hurt-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255,0,0,0) 45%, rgba(220,20,30,.6) 100%); opacity: 0; }
.scope { position: absolute; inset: 0; display: none; }
.scope.show { display: block; }
.scope-ring { position: absolute; left: 50%; top: 50%; width: 76vh; height: 76vh; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 200vmax #000, inset 0 0 40px 10px rgba(0,0,0,.75); }
.scope i { position: absolute; background: rgba(0,0,0,.85); }
.scope .sc-h { left: calc(50% - 38vh); width: 76vh; top: 50%; height: 2px; }
.scope .sc-v { top: 12vh; height: 76vh; left: 50%; width: 2px; }
.bus-hint { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); font-size: 22px; font-weight: 900; font-style: italic; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.5); display: none; }
.bus-hint.ready { animation: busPulse 1s infinite alternate; }
@keyframes busPulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.07); } }
.spectate { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); background: var(--panel); padding: 8px 18px; border-radius: 10px; font-weight: 800; display: none; }
.fps { position: absolute; left: 14px; bottom: 10px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.7); text-shadow: 0 1px 2px #000; }
.hud.building .crosshair { }

/* ---------------- item art backgrounds ---------------- */
/* Item cards by rarity, like the classic game's item art: a radial gradient in the rarity colour and a
   lighter band slanting across the bottom. The icon art (iconArt.js) is drawn over it. */
.ibg { overflow: hidden; }
.ibg.rb0, .ibg.rb1, .ibg.rb2, .ibg.rb3, .ibg.rb4, .ibg .icard.rb0, .ibg .icard.rb1, .ibg .icard.rb2, .ibg .icard.rb3, .ibg .icard.rb4,
.rb0.icard, .rb1.icard, .rb2.icard, .rb3.icard, .rb4.icard, .big.rb0, .big.rb1, .big.rb2, .big.rb3, .big.rb4, .pico.rb0, .pico.rb1, .pico.rb2, .pico.rb3, .pico.rb4,
.inv-ghost.rb0, .inv-ghost.rb1, .inv-ghost.rb2, .inv-ghost.rb3, .inv-ghost.rb4 {
  background: radial-gradient(120% 95% at 50% 28%, var(--r1) 0%, var(--r2) 82%); overflow: hidden; }
.rb0::before, .rb1::before, .rb2::before, .rb3::before, .rb4::before { content: ''; position: absolute; left: -5%; right: -5%; bottom: -1%; height: 22%;
  background: var(--r3); clip-path: polygon(0 62%, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
.rb0 > img, .rb1 > img, .rb2 > img, .rb3 > img, .rb4 > img { filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.rb0 { --r1: #c5ccd3; --r2: #5f6a75; --r3: rgba(255,255,255,.18); }
.rb1 { --r1: #86d136; --r2: #2f7016; --r3: rgba(200,255,140,.3); }
.rb2 { --r1: #5cc0ff; --r2: #1b56b8; --r3: rgba(160,220,255,.3); }
.rb3 { --r1: #d170ff; --r2: #54209a; --r3: rgba(235,180,255,.28); }
.rb4 { --r1: #ffb54a; --r2: #b44d12; --r3: rgba(255,220,150,.33); }
/* ammo and materials have no rarity: a neutral card */
.rbn { --r1: #9aa3ad; --r2: #3c4550; --r3: rgba(255,255,255,.14); background: radial-gradient(120% 95% at 50% 28%, var(--r1) 0%, var(--r2) 82%); overflow: hidden; }
.rbn::before { content: ''; position: absolute; left: -5%; right: -5%; bottom: -1%; height: 22%; background: var(--r3); clip-path: polygon(0 62%, 100% 0, 100% 100%, 0 100%); pointer-events: none; }

/* ---------------- end screen ---------------- */
.endscreen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: auto !important; background: radial-gradient(ellipse at center, rgba(8,12,30,.35), rgba(8,12,30,.8)); }
.endscreen.show { display: flex; animation: fadein .5s; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.end-card { text-align: center; background: rgba(14,20,44,.92); padding: 30px 40px; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.6); min-width: min(520px, 90vw); }
.end-place { font-size: 84px; font-weight: 900; font-style: italic; line-height: 1; }
.end-place.win { font-size: 72px; background: linear-gradient(180deg, #fff 0%, #ffe46b 55%, #ff9f1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 5px 0 #6a3a00); }
.end-crown { font-size: 54px; color: var(--accent); text-shadow: 0 0 30px rgba(255,210,63,.7); }
.end-title { margin: 10px 0 20px; font-size: 20px; font-weight: 800; letter-spacing: 2px; color: #dfe8ff; }
.end-title b { color: var(--danger); }
.end-stats { display: flex; justify-content: center; gap: 16px; margin-bottom: 22px; }
.end-stats div { background: rgba(255,255,255,.05); border-radius: 10px; padding: 10px 18px; min-width: 100px; }
.end-stats b { display: block; font-size: 28px; font-weight: 900; }
.end-stats span { font-size: 12px; font-weight: 700; color: var(--dim); letter-spacing: 1px; text-transform: uppercase; }
.end-buttons { display: flex; gap: 10px; }

/* the wide controls panel would cover the main menu column on narrower screens */
@media (max-width: 1250px) {
  .menu.panel-open .menu-left { opacity: .12; pointer-events: none; transition: opacity .18s; }
}

@media (max-width: 900px) {
  .minimap { width: 150px; height: 150px; }
  .slot, .bslot { width: 52px; height: 52px; }
  .slot img { width: 46px; height: 46px; }
  .compass { width: 280px; }
}

/* ---------------- coins & locker ---------------- */
.coin { display: inline-block; width: 1em; height: 1em; margin-right: .3em; vertical-align: -.12em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6b8 0 18%, #ffd23f 42%, #e89a10 78%, #b86a00 100%); box-shadow: inset 0 0 0 .09em rgba(120,60,0,.55); }
.menu-coins { position: absolute; top: 22px; right: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px;
  font-size: 20px; font-weight: 900; letter-spacing: 1px; transition: opacity .2s; }
.menu.locker-open .menu-left, .menu.locker-open .menu-coins { opacity: 0; pointer-events: none; }
/* (a way back to the site hosting the game, when there is one: see src/core/host.js). Under the coins:
   top left, a short window put it on the logo */
.menu-host { position: absolute; top: 76px; right: 28px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--dim); font-size: 15px; font-weight: 800;
  letter-spacing: .5px; text-decoration: none; transition: color .15s, background .15s, opacity .2s; }
.menu-host:hover { color: #fff; background: rgba(36, 53, 107, .85); }
.menu-host .lk-chev { width: 7px; height: 7px; border-width: 0 0 2px 2px; transform: rotate(45deg); margin: 0 0 0 3px; }
.menu.locker-open .menu-host, .menu.panel-open .menu-host { opacity: 0; pointer-events: none; }
.locker { position: absolute; inset: 0; display: none; pointer-events: none; }
.locker.show { display: block; }
.lk-side { position: absolute; left: clamp(16px, 4vw, 60px); top: 50%; transform: translateY(-50%); width: min(470px, 46vw); max-height: 88vh; box-sizing: border-box;
  background: rgba(14, 20, 44, .96); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; pointer-events: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lk-head { display: flex; align-items: center; justify-content: space-between; }
.lk-head h3 { margin: 0; font-size: 24px; letter-spacing: 3px; font-style: italic; }
.lk-coins { font-size: 22px; font-weight: 900; }
.lk-note { font-size: 13px; color: var(--dim); }
/* (sized by Locker.fit so every card fits; no browser scrollbar: it scrolls with the wheel, and an edge
   fades while there is more beyond it) */
.lk-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), var(--cw, 1fr)); justify-content: center; gap: 8px; flex: 0 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 2px; margin: -2px; }
.lk-grid::-webkit-scrollbar { display: none; }
.lk-grid.more-down { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); }
.lk-grid.more-up { -webkit-mask-image: linear-gradient(0deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(0deg, #000 calc(100% - 44px), transparent); }
.lk-grid.more-up.more-down { -webkit-mask-image: linear-gradient(180deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(180deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.lk-card { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: transform .08s, border-color .12s;
  background: radial-gradient(ellipse at 50% 35%, #7a8aa0 0%, #4a5670 70%); aspect-ratio: 96 / 138; display: flex; flex-direction: column; }
.lk-card.r1 { background: radial-gradient(ellipse at 50% 35%, #7ad06a 0%, #2f7a2c 75%); }
.lk-card.r2 { background: radial-gradient(ellipse at 50% 35%, #6ac0ff 0%, #1f5fb0 75%); }
.lk-card.r3 { background: radial-gradient(ellipse at 50% 35%, #d08aff 0%, #6a2fb0 75%); }
.lk-card.r4 { background: radial-gradient(ellipse at 50% 35%, #ffc66a 0%, #b0621f 75%); }
.lk-card canvas { width: 100%; height: auto; display: block; }
.lk-card:hover { transform: translateY(-2px); }
.lk-card.sel { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.lk-card.locked canvas { filter: saturate(.55) brightness(.8); }
.lk-cn { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 4px 4px; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; text-align: center;
  background: linear-gradient(0deg, rgba(8,12,28,.9), rgba(8,12,28,0)); }
.lk-tag { position: absolute; top: 4px; right: 4px; font-size: 10px; font-weight: 900; padding: 2px 5px; border-radius: 5px; background: rgba(8,12,28,.75); }
.lk-tag:empty { display: none; }
.lk-card.eq .lk-tag { background: var(--accent); color: #241800; }
.lk-foot { display: flex; padding-top: 4px; }
.lk-back { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 14px; cursor: pointer; color: #fff; font-size: 16px; font-weight: 900;
  font-style: italic; letter-spacing: 2px; text-transform: uppercase; background: linear-gradient(180deg, #2c3f7c, #1f2d5c); border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; box-shadow: 0 3px 0 #0d1433, 0 8px 18px rgba(0,0,0,.3); transform: skewX(-6deg); transition: filter .12s, transform .08s, box-shadow .08s; }
.lk-back > * { transform: skewX(6deg); }
.lk-back:hover { filter: brightness(1.18); }
.lk-back:active { transform: skewX(-6deg) translateY(2px); box-shadow: 0 1px 0 #0d1433, 0 4px 10px rgba(0,0,0,.3); }
.lk-chev { width: 9px; height: 9px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: skewX(6deg) rotate(45deg); margin: 0 2px 0 3px; }
.lk-back .key { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 5px; background: rgba(255,255,255,.14);
  color: #cfd8ee; font-size: 11px; font-style: normal; font-weight: 900; letter-spacing: .5px; }
.lk-stage { position: absolute; left: calc(clamp(16px, 4vw, 60px) + min(470px, 46vw) + 20px); right: 0; top: 4vh; bottom: 4vh; pointer-events: auto; cursor: grab; }
.lk-stage:active { cursor: grabbing; }
.lk-info { position: absolute; right: clamp(20px, 4vw, 60px); bottom: 7vh; text-align: right; pointer-events: auto; }
.lk-rar { font-size: 13px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #cfd6e4; }
.lk-rar.r1 { color: #7ad06a; } .lk-rar.r2 { color: #6ac0ff; } .lk-rar.r3 { color: #d08aff; } .lk-rar.r4 { color: #ffc66a; }
.lk-name { font-size: clamp(30px, 4vw, 52px); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 1px; line-height: 1.05;
  text-shadow: 0 4px 0 rgba(10,16,40,.8), 0 8px 24px rgba(0,0,0,.5); }
.lk-desc { margin: 4px 0 12px; color: #dfe8ff; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,.6); min-height: 1.2em; }
.lk-btns { display: flex; gap: 10px; justify-content: flex-end; }
.lk-btns button { padding: 12px 20px; font-size: 16px; font-weight: 900; letter-spacing: 1px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(255,255,255,.18); background: #24356b; color: #fff; }
.lk-btns button.primary { background: linear-gradient(180deg, #ffe45a, #ffb31a); color: #241800; border: 0; min-width: 150px; }
.lk-btns button:disabled { filter: grayscale(.7) brightness(.8); cursor: default; }
.coinpop { position: fixed; left: 50%; top: 31%; transform: translateX(-50%); font-size: 26px; font-weight: 900; color: #ffe46b;
  text-shadow: 0 3px 0 rgba(90,50,0,.8), 0 6px 18px rgba(0,0,0,.5); animation: coinpop .35s ease-out; transition: opacity .5s, transform .5s; }
.coinpop span { margin-left: 10px; font-size: 14px; letter-spacing: 2px; color: #fff; text-transform: uppercase; }
.coinpop.out { opacity: 0; transform: translate(-50%, -16px); }
@keyframes coinpop { from { transform: translate(-50%, 10px) scale(.8); opacity: 0; } }
.end-coins b { color: #ffe46b; }