:root {
  --gold: #f2c94c;
  --gold-dark: #9c7a26;
  --parchment: #f3e6c4;
  --panel: rgba(20, 16, 30, 0.86);
  --panel-border: #8a6d2f;
  --text: #f1e9d6;
  --muted: #b8a98a;
  --red: #d8402f;
  --green: #4fd36a;
  --blue: #5aa8ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0b14; color: var(--text); font-family: 'Alegreya Sans', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

.panel {
  background: var(--panel);
  border: 2px solid var(--panel-border);
  border-radius: 10px;
  box-shadow: 0 0 0 1px #000, inset 0 0 30px rgba(0, 0, 0, 0.6), 0 10px 40px rgba(0, 0, 0, 0.5);
}
.panel.small { padding: 8px 10px; }

/* ---------------- Lobby ---------------- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at center, rgba(10, 8, 20, 0.15), rgba(10, 8, 20, 0.75)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* centred when it fits, scrollable from the top when it doesn't (plain justify-content: center clips the top) */
.screen::before { content: ''; margin-top: auto; }
.screen::after { content: ''; margin-bottom: auto; }
.screen > * { flex-shrink: 0; }
.lobby-header { text-align: center; text-shadow: 0 3px 12px #000; }
.title { font-family: 'Cinzel', serif; font-weight: 900; font-size: clamp(40px, 7vw, 76px); margin: 0; letter-spacing: 2px;
  background: linear-gradient(#fff6c8, #f2c94c 45%, #9c6a12); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #2a1a05) drop-shadow(0 0 18px rgba(255, 170, 40, 0.35)); }
.title span { background: linear-gradient(#ffd0d0, #ff5a3a 50%, #8c1a0a); -webkit-background-clip: text; background-clip: text; }
.subtitle { color: var(--parchment); font-size: 18px; opacity: 0.9; }
.lobby-panel { width: min(900px, 100%); padding: 0 0 16px; }
.tabs { display: flex; align-items: center; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid #4a3a1a; }
.tab { background: transparent; color: var(--muted); border: none; padding: 10px 18px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 16px; border-bottom: 3px solid transparent; }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.tab:hover { color: var(--parchment); }
.gold-chip { margin-left: auto; display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--gold); font-size: 18px; }
.gold-chip.inline { margin: 0; }
.coin { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, #f2c94c 45%, #8a6312); box-shadow: 0 0 6px rgba(242, 201, 76, 0.6); display: inline-block; }
.tab-body { padding: 16px 20px 0; }
.play-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
@media (max-width: 700px) { .play-grid { grid-template-columns: minmax(0, 1fr); } .preview-col { display: none; } }
.field-label { display: block; font-family: 'Cinzel', serif; color: var(--gold); margin: 6px 0; font-size: 14px; }
.field-label small { color: var(--muted); font-family: 'Alegreya Sans'; }
input { font-family: inherit; }
#auth-panel input { width: 100%; padding: 10px 12px; font-size: 18px; background: #120e1c; color: var(--text); border: 1px solid #6b5426; border-radius: 6px; outline: none; }
#auth-panel input:focus { border-color: var(--gold); }
.btn-primary { display: block; width: 100%; padding: 14px; margin-top: 10px; font-family: 'Cinzel', serif; font-weight: 900; font-size: 20px; color: #2a1a05;
  background: linear-gradient(#ffe48a, #e0a82e 60%, #a8741a); border: 2px solid #5b3f0c; border-radius: 8px; box-shadow: 0 4px 0 #4a3008, 0 0 20px rgba(242, 180, 60, 0.35); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #4a3008; }
.btn-primary:disabled { filter: grayscale(0.8); cursor: not-allowed; }
.btn-secondary { display: block; width: 100%; padding: 10px; margin-top: 10px; font-family: 'Cinzel', serif; font-size: 15px; color: var(--text); background: #2a2238; border: 1px solid #6b5426; border-radius: 8px; }
.btn-secondary:hover { background: #3a2f4e; }
.online-line { margin-top: 10px; color: var(--muted); text-align: center; }
.error-line { color: #ff7b6b; text-align: center; min-height: 20px; }
.stats-line { color: var(--muted); font-size: 14px; }
.preview-col { display: flex; flex-direction: column; align-items: center; }
/* 3D preview: one canvas that moves between the Play, Spellbook and Wardrobe tabs */
.preview-slot { position: relative; border-radius: 10px; overflow: hidden; }
.preview-slot canvas { display: block; width: 100%; height: 100%; }
.skin-slot { background: radial-gradient(circle at 50% 70%, rgba(242, 201, 76, 0.18), transparent 70%); }
#play-preview { width: 260px; height: 300px; }
.spell-slot { aspect-ratio: 4 / 3; border: 1px solid #4a3a1a; background: #17121f; }
#skin-preview { aspect-ratio: 26 / 30; max-height: 300px; margin: 0 auto; }
.pv-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pv-float { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 16px; text-shadow: 0 2px 2px #000, 0 0 4px #000; color: #ffe066; white-space: nowrap; }
.pv-float.heal { color: #6dff9a; }
.pv-float.dot { color: #c58cff; font-size: 13px; }
.pv-float.shield { color: #a9c8ff; font-size: 14px; }
.preview-name { font-family: 'Cinzel', serif; color: var(--gold); }
.howto { margin-top: 14px; color: var(--muted); font-size: 14px; text-align: center; line-height: 1.6; }
.howto b { color: var(--parchment); }
.hint { color: var(--muted); margin-bottom: 12px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.card { position: relative; border: 1px solid #4a3a1a; border-radius: 8px; padding: 10px; background: linear-gradient(rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.2)); cursor: pointer; transition: transform 0.1s, border-color 0.1s; }
.card:hover { transform: translateY(-2px); border-color: #8a6d2f; }
.card.selected { border-color: var(--gold); box-shadow: 0 0 12px rgba(242, 201, 76, 0.4), inset 0 0 20px rgba(242, 201, 76, 0.12); }
.card.locked { opacity: 0.85; }
.card .card-top { display: flex; align-items: center; gap: 8px; }
.card .ico { font-size: 28px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(0, 0, 0, 0.4); }
.card .nm { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; }
.card .school { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.card .desc { font-size: 13px; color: #d7ccb3; margin: 6px 0; min-height: 34px; }
.card .meta { font-size: 12px; color: var(--muted); }
.card .buy { margin-top: 6px; width: 100%; padding: 6px; border-radius: 6px; border: 1px solid #6b5426; background: #3a2a10; color: var(--gold); font-weight: 700; }
.card .buy:disabled { opacity: 0.5; cursor: not-allowed; }
.card .price { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--gold); }
.card .price .coin { width: 12px; height: 12px; }
.card .price.short { color: #c98a7f; }
.card .badge { position: absolute; top: 8px; right: 8px; font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--gold); color: #2a1a05; font-weight: 700; }
.skin-swatch { width: 40px; height: 40px; border-radius: 8px; border: 2px solid; }

/* shop tabs: cards on the left, preview + details of the picked one on the right */
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; align-items: start; }
.shop-layout .card-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.shop-detail { position: sticky; top: 0; padding: 10px; border: 1px solid #6b5426; border-radius: 10px; background: rgba(0, 0, 0, 0.35); }
.detail-body { margin-top: 8px; }
.dt-title { display: flex; align-items: center; gap: 8px; }
.dt-title .ic { font-size: 30px; }
.dt-title .nm { font-family: 'Cinzel', serif; font-weight: 900; font-size: 18px; color: var(--parchment); }
.dt-title .school { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 4px; }
.dt-title .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #000; }
.dt-desc { font-size: 14px; color: #d7ccb3; margin: 6px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 12px; padding: 2px 7px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); border: 1px solid #4a3a1a; color: var(--parchment); }
.shop-detail .btn-primary { font-size: 17px; padding: 10px; }
.owned-line { margin-top: 10px; color: var(--green); font-weight: 700; }
.owned-line a { color: var(--gold); }
.need { margin-top: 6px; font-size: 13px; color: #c98a7f; text-align: center; }
@media (max-width: 700px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .shop-detail { position: static; order: -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
  .detail-body { margin-top: 0; }
  #skin-preview { aspect-ratio: auto; height: 180px; }
}

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud-topleft { position: absolute; top: 12px; left: 12px; display: flex; gap: 16px; align-items: center; font-weight: 700; }
#hud-kd::before { content: '⚔ '; color: var(--muted); }
#hud-online { color: var(--muted); font-weight: 500; }
#minimap-wrap { position: absolute; top: 12px; right: 12px; padding: 6px; text-align: center; }
#minimap { display: block; border-radius: 50%; border: 2px solid #5b4520; }
#zone-name { font-family: 'Cinzel', serif; color: var(--gold); font-size: 14px; margin-top: 4px; }
#killfeed { position: absolute; top: 230px; right: 12px; width: 300px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; pointer-events: none; }
.kf { background: rgba(10, 8, 16, 0.75); padding: 4px 10px; border-radius: 6px; font-size: 14px; animation: fadein 0.2s; border-left: 3px solid var(--panel-border); }
.kf.me { border-left-color: var(--gold); }
.kf .k { color: #ffb1a6; font-weight: 700; }
.kf .v { color: #c9d6ff; font-weight: 700; }
#chat { position: absolute; left: 12px; bottom: 12px; width: 360px; }
#chat-log { max-height: 180px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; font-size: 14px; text-shadow: 0 1px 2px #000; }
#chat-log .line { padding: 1px 0; }
#chat-log .line b { color: var(--gold); }
#chat-log .sys { color: #9fd6ff; font-style: italic; }
#chat-input { width: 100%; margin-top: 4px; padding: 8px; background: rgba(10, 8, 16, 0.85); color: var(--text); border: 1px solid var(--panel-border); border-radius: 6px; outline: none; font-size: 14px; }
#bottom-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
#hp-bar { position: relative; width: 340px; height: 22px; background: #2a0d0d; border: 2px solid #5b4520; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #000; }
#hp-fill { position: absolute; inset: 0; width: 100%; background: linear-gradient(#ff7a6a, #c3261a 60%, #8a120a); transition: width 0.12s; }
#shield-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: repeating-linear-gradient(45deg, rgba(160, 200, 255, 0.75) 0 6px, rgba(110, 160, 255, 0.55) 6px 12px); }
#hp-text { position: absolute; inset: 0; text-align: center; line-height: 18px; font-weight: 700; font-size: 14px; text-shadow: 0 1px 2px #000; }
#spellbar { display: flex; gap: 10px; }
.slot { position: relative; width: 64px; height: 64px; border: 2px solid #8a6d2f; border-radius: 10px; background: radial-gradient(circle, #2e2440, #120e1c); display: flex; align-items: center; justify-content: center; font-size: 32px; box-shadow: 0 0 0 1px #000, inset 0 0 12px rgba(0, 0, 0, 0.8); overflow: hidden; }
.slot .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, 0.75) var(--p, 0%), transparent 0); }
.slot .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; text-shadow: 0 0 4px #000, 0 0 2px #000; }
.slot .key { position: absolute; left: 4px; top: 1px; font-size: 12px; color: var(--parchment); text-shadow: 0 1px 2px #000; font-weight: 700; }
.slot.ready { border-color: var(--gold); }
.slot.flash { animation: flash 0.25s; }
@keyframes flash { from { box-shadow: 0 0 20px var(--gold); } }
#status-icons { display: flex; gap: 6px; min-height: 22px; }
.status { font-size: 13px; padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.6); border: 1px solid #555; }
#death-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse, rgba(80, 0, 0, 0.25), rgba(30, 0, 0, 0.7)); pointer-events: none; }
.death-title { font-family: 'Cinzel', serif; font-size: 48px; font-weight: 900; color: #ff6a55; text-shadow: 0 3px 10px #000; }
#death-by { font-size: 20px; margin-top: 6px; }
#death-timer { font-size: 18px; color: var(--muted); margin-top: 10px; }
#scoreboard { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 16px 20px; min-width: min(460px, calc(100vw - 24px)); max-height: 80vh; overflow: auto; }
#scoreboard h2, #esc-menu h2, #keybinds h2 { font-family: 'Cinzel', serif; color: var(--gold); margin: 0 0 10px; text-align: center; }
#scoreboard table { width: 100%; border-collapse: collapse; }
#scoreboard td, #scoreboard th { padding: 5px 10px; text-align: left; }
#scoreboard th { color: var(--muted); font-weight: 500; border-bottom: 1px solid #4a3a1a; }
#scoreboard tr.me td { color: var(--gold); font-weight: 700; }
#scoreboard .bot { color: var(--muted); font-size: 12px; }
#esc-menu .settings { margin-top: 6px; }
#esc-menu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 24px); overflow-y: auto; }
/* in-game spell swapping: a compact drawer that keeps the middle of the screen (your mage) visible.
   Wide screens: bottom-right corner. Narrower: just above the spell bar. */
#swap-panel { position: absolute; right: 12px; bottom: 12px; width: 420px; max-height: calc(100vh - 430px);
  overflow-y: auto; padding: 8px 12px 10px; z-index: 3; animation: swapin 0.12s ease-out; }
@media (max-width: 1120px) {
  #swap-panel { right: auto; left: 50%; bottom: 130px; transform: translateX(-50%); width: min(520px, calc(100vw - 24px)); max-height: max(200px, calc(48vh - 130px)); }
}
@keyframes swapin { from { opacity: 0; } }
.swap-head { display: flex; align-items: center; justify-content: center; position: relative; }
#swap-panel h2 { font-family: 'Cinzel', serif; color: var(--gold); margin: 0; font-size: 18px; }
#swap-close { position: absolute; right: -4px; top: -2px; width: 30px; height: 30px; padding: 0; font-size: 16px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 6px; }
#swap-close:hover { color: var(--text); border-color: #6b5426; }
.swap-step { margin: 6px 0 4px; font-size: 13px; color: var(--muted); }
.swap-step b { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; color: #2a1a05; background: var(--gold); font-size: 12px; margin-right: 4px; }
.swap-keys { opacity: 0.8; }
#swap-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.swap-slot { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: center; text-align: left; padding: 5px 6px 5px 8px; color: var(--text);
  background: radial-gradient(circle at 20% 50%, #2e2440, #120e1c); border: 2px solid #4a3a1a; border-radius: 10px; }
.swap-slot .ic { grid-row: span 2; font-size: 24px; line-height: 1; }
.swap-slot .nm { font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swap-slot .wait { font-size: 12px; color: #ff9d8a; white-space: nowrap; }
.swap-slot .key { left: 2px; top: 2px; min-width: 14px; padding: 0 3px; font-size: 10px; }
.swap-slot .wait.ready { color: var(--green); }
.swap-slot:hover { border-color: #8a6d2f; }
.swap-slot.selected { border-color: var(--gold); box-shadow: 0 0 12px rgba(242, 201, 76, 0.4), inset 0 0 16px rgba(242, 201, 76, 0.12); }
#swap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 5px; }
#swap-grid .swap-spell { padding: 4px 7px; }
#swap-grid .swap-spell .nm { font-size: 13px; }
.swap-spell:hover { border-color: var(--gold); background: rgba(242, 201, 76, 0.1); }
.swap-empty { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
#swap-grid.queue .swap-spell { border-style: dashed; }
.swap-spell.queued { border-color: var(--gold); border-style: solid !important; box-shadow: inset 0 0 12px rgba(242, 201, 76, 0.2); }
#swap-info { min-height: 34px; margin-top: 5px; font-size: 13px; color: #d7ccb3; }
#swap-panel .hint { font-size: 12px; text-align: center; margin: 4px 0 0; }
.slot .queued { position: absolute; right: 2px; bottom: 0; font-size: 16px; filter: drop-shadow(0 0 3px var(--gold)); }

/* in-game cursor: a gold reticle; hidden while right-dragging the camera */
body.in-world canvas#game { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='8' stroke='%23000' stroke-opacity='.55' stroke-width='4'/%3E%3Ccircle cx='16' cy='16' r='8' stroke='%23f2c94c' stroke-width='2'/%3E%3Cpath d='M16 2v6M16 24v6M2 16h6M24 16h6' stroke='%23000' stroke-opacity='.55' stroke-width='4'/%3E%3Cpath d='M16 2v6M16 24v6M2 16h6M24 16h6' stroke='%23fff3c4' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='2' fill='%23fff3c4' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 16 16, crosshair; }
body.in-world.cam-rotating canvas#game { cursor: none; }
.slot { cursor: pointer; }

#toast { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); font-family: 'Cinzel', serif; font-size: 24px; font-weight: 700; color: var(--gold); text-shadow: 0 2px 8px #000; pointer-events: none; opacity: 0; transition: opacity 0.3s; text-align: center; }
#toast.show { opacity: 1; }

/* ---------------- World overlays (nameplates etc) ---------------- */
#overlay-world { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.plate { position: absolute; transform: translate(-50%, -100%); text-align: center; white-space: nowrap; will-change: transform; }
.plate .pn { font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 3px #000; color: #ffd9d0; }
.plate.me .pn { color: #b8ffbf; }
.plate.bot .pn { color: #ffe0b0; }
.plate .pb { width: 64px; height: 6px; margin: 2px auto 0; background: #300; border: 1px solid #000; border-radius: 3px; overflow: hidden; position: relative; }
.plate .pf { position: absolute; inset: 0; background: linear-gradient(#ff6a5a, #b81d10); }
.plate.me .pf { background: linear-gradient(#7dff8a, #1f9b30); }
.plate .ps { position: absolute; top: 0; bottom: 0; left: 0; background: rgba(150, 200, 255, 0.9); }
.dmg { position: absolute; font-weight: 900; font-size: 18px; text-shadow: 0 2px 2px #000, 0 0 4px #000; transform: translate(-50%, -50%); pointer-events: none; }
.dmg.mine { color: #ffe066; font-size: 22px; }
.dmg.taken { color: #ff5a4a; }
.dmg.other { color: #ddd; font-size: 14px; opacity: 0.8; }
.dmg.heal { color: #6dff9a; }

#tooltip { position: fixed; z-index: 10; max-width: 260px; padding: 8px 10px; background: rgba(10, 8, 16, 0.95); border: 1px solid var(--panel-border); border-radius: 6px; font-size: 13px; pointer-events: none; }
@keyframes fadein { from { opacity: 0; transform: translateX(20px); } }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #4a3a1a; border-radius: 4px; }

/* ---------------- Key bindings ---------------- */
#keybinds { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; width: min(440px, calc(100% - 32px)); max-height: 90vh; overflow-y: auto; padding: 20px; }
.kb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(138, 109, 47, 0.25); }
.kb-row button { min-width: 140px; padding: 6px 10px; background: #120e1c; color: var(--gold); border: 1px solid #6b5426; border-radius: 6px; font-weight: 700; }
.kb-row button:hover { border-color: var(--gold); }
.kb-row button.listening { color: #2a1a05; background: var(--gold); animation: pulse 0.8s infinite alternate; }
.kb-row button.unbound { color: #ff7b6b; }
.kb-buttons { display: flex; gap: 10px; align-items: flex-end; }
.kb-buttons button { flex: 1; }
@keyframes pulse { to { filter: brightness(1.25); } }

/* ---------------- Loadout picker (Play tab) ---------------- */
.lo-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lo-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 6px; color: var(--text);
  background: radial-gradient(circle at 50% 35%, #2e2440, #120e1c); border: 2px solid #4a3a1a; border-radius: 10px; transition: border-color 0.1s, box-shadow 0.1s; }
.lo-slot .ic { font-size: 30px; line-height: 1.1; }
.lo-slot .nm { font-family: 'Cinzel', serif; font-weight: 700; font-size: 13px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-slot .key, .swap-slot .key { position: absolute; left: 6px; top: 4px; min-width: 18px; padding: 0 4px; font-size: 11px; font-weight: 700; border-radius: 4px;
  color: #2a1a05; background: var(--parchment); text-align: center; }
.lo-slot:hover { border-color: #8a6d2f; }
.lo-slot.selected, .lo-slot.drop { border-color: var(--gold); box-shadow: 0 0 12px rgba(242, 201, 76, 0.4), inset 0 0 16px rgba(242, 201, 76, 0.12); }
.lo-slot.selected::after { content: '\25BC'; position: absolute; bottom: -15px; font-size: 10px; color: var(--gold); }
.lo-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; margin-top: 14px; padding: 8px; border: 1px dashed #4a3a1a; border-radius: 8px; background: rgba(0, 0, 0, 0.25); }
.lo-spell, .swap-spell { position: relative; display: flex; align-items: center; gap: 6px; padding: 5px 8px; text-align: left; color: var(--text);
  background: rgba(0, 0, 0, 0.35); border: 1px solid #4a3a1a; border-radius: 8px; }
.lo-spell .ic, .swap-spell .ic { font-size: 20px; }
.lo-spell .nm, .swap-spell .nm { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-spell .tag, .swap-spell .tag { font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 4px; color: #2a1a05; background: var(--muted); }
.lo-spell:hover { border-color: var(--gold); background: rgba(242, 201, 76, 0.08); }
.lo-spell.equipped { opacity: 0.6; }
.lo-spell.current { border-color: var(--gold); }
.lo-spell.current .tag { background: var(--gold); }
.lo-info { min-height: 38px; margin: 6px 0 4px; font-size: 13px; color: #d7ccb3; }
.lo-info .meta, #swap-info .meta { color: var(--muted); white-space: nowrap; }
.fancy-select { width: 100%; padding: 8px 10px; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--text); background: #120e1c; border: 1px solid #6b5426; border-radius: 6px; outline: none; cursor: pointer; }
.fancy-select:hover, .fancy-select:focus { border-color: var(--gold); }
.fancy-range { width: 100%; margin: 4px 0; accent-color: var(--gold); cursor: pointer; }
.set-value { color: var(--parchment); font-family: 'Alegreya Sans', sans-serif; }
.fancy-select option { background: #1a1426; color: var(--text); }
.shop-hint { margin: 8px 0 4px; font-size: 14px; color: var(--muted); }
.shop-hint a { color: var(--gold); }
.card.owned .badge { background: #4fd36a; }
.card.owned .card-top { padding-right: 50px; }

/* ---------------- Login ---------------- */
.auth-panel { width: min(420px, 100%); padding: 18px 22px 20px; }
.auth-panel h2 { font-family: 'Cinzel', serif; color: var(--gold); margin: 0 0 8px; text-align: center; }
.auth-panel input { margin-bottom: 4px; }
.auth-note { margin-top: 12px; font-size: 13px; color: var(--muted); text-align: center; }
.auth-status { color: var(--parchment); text-shadow: 0 1px 4px #000; min-height: 20px; }
.account-line { margin-bottom: 6px; color: var(--muted); }
.account-line b { color: var(--parchment); font-size: 18px; }
.account-line a { color: var(--gold); }

/* ---------------- Small screens (lobby) ---------------- */
@media (max-height: 520px) {
  .screen { gap: 8px; }
  .title { font-size: 34px; }
  .subtitle { display: none; }
  .tab { padding: 8px 12px; font-size: 14px; }
  .tab-body { padding: 10px 12px 0; }
  .card-grid { max-height: none; overflow: visible; }
  #play-preview { width: 170px; height: 196px; }
  .shop-layout { grid-template-columns: minmax(0, 1fr) 240px; }
  .play-grid { grid-template-columns: minmax(0, 1fr) 180px; gap: 12px; }
  .btn-primary { padding: 10px; font-size: 18px; }
  .auth-panel { padding: 12px 18px 14px; }
  #auth-panel input { padding: 8px 10px; }
  .auth-note { display: none; }
}
@media (max-width: 480px) {
  .tabs { padding: 6px 6px 0; gap: 0; flex-wrap: wrap; }
  .tab { padding: 8px; font-size: 13px; }
  .gold-chip { font-size: 16px; }
  .tab-body { padding: 12px 12px 0; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .card .ico { font-size: 22px; width: 32px; height: 32px; }
  .lo-pool { grid-template-columns: 1fr 1fr; }
  .shop-detail { grid-template-columns: minmax(0, 1fr); }
  .spell-slot { aspect-ratio: 16 / 9; }
}

/* ---------------- Touch mode ---------------- */
.touch-only, .touch-howto, #touch-controls, #rotate-hint { display: none; }
body.touch .touch-only, body.touch .touch-howto { display: block; }
body.touch .desktop-only, body.touch #howto { display: none; }
body.touch #touch-controls { display: block; }
body.touch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch input { -webkit-user-select: text; user-select: text; }

#hud > #touch-controls { position: absolute; inset: 0; pointer-events: none; }
#touch-controls > * { pointer-events: auto; touch-action: none; }

/* floating joystick: rests bottom-left as a hint, jumps to wherever the left thumb lands */
#touch-controls > #joy-base { position: fixed; left: calc(env(safe-area-inset-left) + 110px); top: calc(100% - 110px - env(safe-area-inset-bottom));
  width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.14) 70%, transparent 72%);
  border: 2px solid rgba(242, 201, 76, 0.45); box-shadow: 0 0 18px rgba(0, 0, 0, 0.4); }
#joy-base.idle { opacity: 0.45; }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3c4, #e0a82e 55%, #7a5210); border: 2px solid #4a3008; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6); }

/* spell buttons: an arc around the big primary button in the bottom-right corner */
#touch-spells { position: fixed; width: 0; height: 0;
  right: calc(env(safe-area-inset-right) + 70px); bottom: calc(env(safe-area-inset-bottom) + 66px); }
.tspell { --s: 66px; position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; border: 3px solid #8a6d2f; background: radial-gradient(circle, #3a2e52, #120e1c 75%); overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: calc(var(--s) * 0.48); touch-action: none;
  box-shadow: 0 0 0 1px #000, inset 0 0 14px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5); transition: transform 0.08s; }
.tspell[data-slot="0"] { --s: 92px; left: 0; top: 0; }
.tspell[data-slot="1"] { left: -112px; top: 14px; }
.tspell[data-slot="2"] { left: -82px; top: -86px; }
.tspell .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, 0.75) var(--p, 0%), transparent 0); }
.tspell .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; text-shadow: 0 0 4px #000, 0 0 2px #000; }
.tspell.ready { border-color: var(--gold); box-shadow: 0 0 0 1px #000, inset 0 0 14px rgba(0, 0, 0, 0.8), 0 0 14px rgba(242, 201, 76, 0.35); }
.tspell.pressed { transform: scale(0.92); border-color: #fff3c4; }
.tspell.flash { animation: flash 0.25s; }
#touch-controls > #touch-cancel { position: fixed; right: calc(env(safe-area-inset-right) + 205px); bottom: calc(env(safe-area-inset-bottom) + 180px);
  width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700;
  color: #ffd0c8; background: rgba(60, 10, 10, 0.75); border: 2px solid #a8402f; pointer-events: none; transition: transform 0.1s; }
#touch-cancel.hot { background: #d8402f; color: #fff; transform: scale(1.15); }

#touch-top { position: fixed; top: calc(env(safe-area-inset-top) + 10px); right: calc(env(safe-area-inset-right) + 140px); display: flex; gap: 8px; }
#touch-top button { width: 42px; height: 42px; border-radius: 10px; font-size: 20px; padding: 0; color: var(--text);
  background: var(--panel); border: 2px solid var(--panel-border); box-shadow: 0 0 0 1px #000; }
#touch-top button:active { filter: brightness(1.3); }

/* HUD rearranged for thumbs: health on top, chat small in the top-left, spell bar replaced by the buttons */
body.touch #hud-topleft { top: calc(env(safe-area-inset-top) + 8px); left: calc(env(safe-area-inset-left) + 8px); gap: 10px; font-size: 14px; padding: 6px 8px; }
body.touch #hud-online { display: none; }
body.touch #minimap-wrap { top: calc(env(safe-area-inset-top) + 8px); right: calc(env(safe-area-inset-right) + 8px); padding: 4px; }
body.touch #minimap { width: 110px; height: 110px; }
body.touch #zone-name { font-size: 11px; margin-top: 2px; }
body.touch #killfeed { top: calc(env(safe-area-inset-top) + 150px); right: calc(env(safe-area-inset-right) + 8px); width: 220px; }
body.touch .kf { font-size: 12px; padding: 3px 8px; }
body.touch #chat { left: calc(env(safe-area-inset-left) + 8px); top: calc(env(safe-area-inset-top) + 52px); bottom: auto; width: min(300px, 36vw); pointer-events: none; }
body.touch #chat-log { max-height: 84px; font-size: 12px; }
body.touch #chat-input { pointer-events: auto; font-size: 16px; /* >= 16px stops iOS zooming in on focus */ }
body.touch #bottom-bar { top: calc(env(safe-area-inset-top) + 10px); bottom: auto; pointer-events: none; flex-direction: column-reverse; gap: 4px; }
body.touch #hp-bar { width: min(280px, 32vw); height: 18px; }
body.touch #hp-text { line-height: 14px; font-size: 12px; }
body.touch #spellbar { display: none; }
body.touch .status { font-size: 11px; padding: 1px 6px; }
body.touch #toast { top: 70px; font-size: 20px; width: 60vw; }
body.touch .death-title { font-size: clamp(28px, 7vw, 48px); }
body.touch #scoreboard { font-size: 13px; padding: 12px; }
/* touch: compact, under the top bar and between the joystick and the spell buttons */
body.touch #swap-panel { top: calc(env(safe-area-inset-top) + 56px); bottom: auto; right: auto; left: 50%; transform: translateX(-50%);
  width: min(460px, calc(100vw - 280px)); max-height: calc(100vh - 70px); padding: 6px 8px 8px; }
/* the 📖 button toggles it and picking a spell closes it, so no header is needed here */
body.touch .swap-head, body.touch .swap-step { display: none; }
body.touch #swap-panel { background: rgba(20, 16, 30, 0.72); }
body.touch #swap-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
body.touch #swap-grid .swap-spell { padding: 6px 7px; }
body.touch .swap-keys, body.touch #swap-panel .hint, body.touch #swap-info:empty { display: none; }
body.touch #swap-slots { margin-bottom: 6px; }
body.touch #scoreboard td, body.touch #scoreboard th { padding: 4px 6px; }
body.touch .plate .pn { font-size: 11px; }
body.touch .plate .pb { width: 52px; }

@media (orientation: portrait) {
  body.touch #hud > #rotate-hint { display: flex; position: fixed; inset: 0; z-index: 20; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: rgba(13, 11, 20, 0.94); font-family: 'Cinzel', serif; font-size: 20px; color: var(--gold); text-align: center; padding: 24px; }
  .rot-ico { font-size: 64px; animation: rot 1.8s ease-in-out infinite; }
}
@keyframes rot { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (max-height: 400px) {
  body.touch #minimap { width: 90px; height: 90px; }
  body.touch #killfeed { top: calc(env(safe-area-inset-top) + 124px); }
  body.touch #touch-top { right: calc(env(safe-area-inset-right) + 118px); }
}