/* Fonts are served from our own server so players' browsers never contact a third party (SIL OFL 1.1, see fonts/OFL-*.txt). */
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/pixelify-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/pixelify-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/silkscreen-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/silkscreen-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/silkscreen-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/silkscreen-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --s: 3;                       /* css px per game pixel, set from JS */
  --ink: #f4ecd8;
  --ink-dim: #b3a88f;
  --gold: #f2c45a;
  --panel: rgba(18, 14, 28, 0.92);
  --edge: #6b4f2a;
  --edge-hi: #c9a25b;
  --hp: #d9443a;
  --mp: #3f86e0;
  --bg: #0b0a10;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; color: var(--ink); font-family: 'Pixelify Sans', 'Silkscreen', monospace; user-select: none; -webkit-user-select: none; }
#stage { position: absolute; left: 50%; top: 50%; width: calc(480px * var(--s)); height: calc(270px * var(--s)); transform: translate(-50%, -50%); overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; cursor: none; background: #000; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; font-size: calc(6px * var(--s)); }
#me { position: absolute; left: calc(4px * var(--s)); top: calc(4px * var(--s)); display: flex; gap: calc(3px * var(--s)); align-items: flex-start; }
#portrait { width: calc(26px * var(--s)); height: calc(26px * var(--s)); image-rendering: pixelated; background: radial-gradient(circle at 50% 40%, #3a2f52, #15111f); border: calc(1px * var(--s)) solid var(--edge-hi); box-shadow: 0 0 0 calc(1px * var(--s)) #1a120a; }
.bars { display: flex; flex-direction: column; gap: calc(1.5px * var(--s)); }
.pname { font-family: 'Silkscreen', monospace; font-size: calc(5px * var(--s)); color: var(--gold); text-shadow: 0 calc(0.5px * var(--s)) 0 #000; line-height: 1; }
.bar { position: relative; width: calc(70px * var(--s)); height: calc(6px * var(--s)); background: #1b1420; border: calc(0.75px * var(--s)) solid #000; box-shadow: inset 0 0 0 calc(0.5px * var(--s)) #4b3a2a; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transition: width 0.12s; }
.bar.hp i { background: linear-gradient(#ff7a6b, var(--hp) 45%, #8e2620); }
.bar.mp i { background: linear-gradient(#8cc4ff, var(--mp) 45%, #1f4e94); }
.bar span { position: absolute; inset: 0; text-align: center; font-family: 'Silkscreen', monospace; font-size: calc(4.4px * var(--s)); line-height: calc(5.6px * var(--s)); text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }
#wavebox { position: absolute; left: 50%; top: calc(3px * var(--s)); transform: translateX(-50%); text-align: center; }
#wavebox .wl { font-family: 'Silkscreen', monospace; font-size: calc(5.5px * var(--s)); color: #ffe6a8; text-shadow: 0 1px 0 #000, 0 0 calc(4px * var(--s)) #000; margin-bottom: calc(1px * var(--s)); letter-spacing: 0.08em; }
#wavebox .wbar { width: calc(110px * var(--s)); height: calc(5px * var(--s)); background: #1b1420; border: calc(0.75px * var(--s)) solid #000; box-shadow: 0 0 0 calc(0.5px * var(--s)) #5a4a7a; position: relative; }
#wavebox .wbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(#d8c8ff, #8a5cff 50%, #3a1f8a); transition: width 0.2s; }
#wavebox .wbar span { position: absolute; inset: 0; font-family: 'Silkscreen', monospace; font-size: calc(3.6px * var(--s)); line-height: calc(4.6px * var(--s)); text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }
#wavebox.hit .wbar { box-shadow: 0 0 calc(4px * var(--s)) #ff5a4a; }
#party { position: absolute; left: calc(4px * var(--s)); top: calc(34px * var(--s)); display: flex; flex-direction: column; gap: calc(2px * var(--s)); }
.pm { display: flex; align-items: center; gap: calc(2px * var(--s)); font-family: 'Silkscreen', monospace; font-size: calc(4.2px * var(--s)); text-shadow: 0 1px 0 #000; }
.pm .dot { width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%; }
.pm .mini { width: calc(36px * var(--s)); height: calc(3px * var(--s)); background: #1b1420; border: 1px solid #000; position: relative; }
.pm .mini i { position: absolute; inset: 0; background: var(--hp); }
.pm.down { opacity: 0.6; }

#hotbar { position: absolute; left: 50%; bottom: calc(3px * var(--s)); transform: translateX(-50%); display: flex; gap: calc(1.5px * var(--s)); padding: calc(2px * var(--s)); background: linear-gradient(#2a1f14ee, #120c08ee); border: calc(1px * var(--s)) solid var(--edge); box-shadow: 0 0 0 calc(0.5px * var(--s)) #000, inset 0 0 0 calc(0.5px * var(--s)) #8a6a3a; pointer-events: auto; }
.slot { position: relative; width: calc(18px * var(--s)); height: calc(18px * var(--s)); background: #0c0a10; border: calc(0.75px * var(--s)) solid #3a2c1c; image-rendering: pixelated; cursor: pointer; }
.slot img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.slot.empty { background: repeating-linear-gradient(45deg, #120f17, #120f17 3px, #17131d 3px, #17131d 6px); }
.slot.empty::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; color: #3a3346; font-family: 'Silkscreen', monospace; font-size: calc(7px * var(--s)); }
.slot .key { position: absolute; left: calc(0.8px * var(--s)); top: calc(0.2px * var(--s)); font-family: 'Silkscreen', monospace; font-size: calc(3.8px * var(--s)); color: #fff; text-shadow: 0 1px 0 #000, 1px 0 0 #000; z-index: 3; }
.slot .cd { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.slot .cd.ready { animation: cdready 0.4s ease-out; }
@keyframes cdready { from { background: rgba(255, 244, 214, 0.6); } to { background: transparent; } }
.slot .cdn { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; font-family: 'Silkscreen', monospace; font-size: calc(6.5px * var(--s)); color: #fff; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.slot.sel { border-color: var(--gold); box-shadow: 0 0 calc(3px * var(--s)) var(--gold); }
.slot.nomana img { filter: grayscale(0.7) brightness(0.55) sepia(0.4) hue-rotate(180deg); }
.slot.newspell { animation: newspell 1.2s ease-out 3; }
.slot[draggable="true"] { cursor: grab; }
.slot.dragging { opacity: 0.35; }
.slot.dragover { outline: calc(0.75px * var(--s)) dashed var(--gold); outline-offset: calc(0.5px * var(--s)); }

/* spell cards offered by a tome */
#cards { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(2px * var(--s)); pointer-events: none; animation: cardsin 0.25s ease-out; }
@keyframes cardsin { from { opacity: 0; transform: translateX(-50%) translateY(calc(6px * var(--s))); } }
.cards-title { font-family: 'Pixelify Sans', monospace; font-weight: 700; font-size: calc(10px * var(--s)); color: #ffe6a8; text-shadow: 0 calc(1px * var(--s)) 0 #000, 0 0 calc(6px * var(--s)) #000; }
.cards-row { display: flex; gap: calc(4px * var(--s)); }
.card { position: relative; width: calc(78px * var(--s)); padding: calc(4px * var(--s)) calc(3px * var(--s)); text-align: center; background: linear-gradient(#2a1f14f4, #120c08f4); border: calc(1px * var(--s)) solid var(--school); box-shadow: 0 0 0 calc(0.5px * var(--s)) #000, 0 calc(2px * var(--s)) calc(8px * var(--s)) #000, inset 0 0 calc(8px * var(--s)) color-mix(in srgb, var(--school) 25%, transparent); cursor: pointer; pointer-events: auto; transition: transform 0.12s; }
.card:hover { transform: translateY(calc(-3px * var(--s))); box-shadow: 0 0 0 calc(0.5px * var(--s)) #000, 0 0 calc(8px * var(--s)) var(--school); }
.card img { width: calc(26px * var(--s)); height: calc(26px * var(--s)); image-rendering: pixelated; border: calc(0.75px * var(--s)) solid var(--school); display: block; margin: calc(2px * var(--s)) auto; }
.card .ck { position: absolute; left: calc(2px * var(--s)); top: calc(1px * var(--s)); font-family: 'Silkscreen', monospace; font-size: calc(5px * var(--s)); color: var(--gold); }
.card .cn { font-family: 'Pixelify Sans', monospace; font-weight: 700; font-size: calc(7px * var(--s)); color: #ffe6a8; }
.card .cs { font-family: 'Silkscreen', monospace; font-size: calc(3.6px * var(--s)); color: var(--school); letter-spacing: 0.08em; }
.card .cb { display: inline-block; margin: calc(1.5px * var(--s)) 0; padding: 0 calc(2px * var(--s)); font-family: 'Silkscreen', monospace; font-size: calc(3.8px * var(--s)); }
.card .cb.new { background: #3f7f2f; color: #eaffd8; }
.card .cb.up { background: #6b4a1a; color: #ffe6a8; }
.card .cd { font-size: calc(4.6px * var(--s)); line-height: 1.3; min-height: calc(18px * var(--s)); }
.card .cm { font-family: 'Silkscreen', monospace; font-size: calc(3.6px * var(--s)); color: var(--ink-dim); margin-top: calc(1px * var(--s)); }
.cards-hint { font-family: 'Silkscreen', monospace; font-size: calc(4px * var(--s)); color: var(--ink-dim); text-shadow: 0 1px 0 #000; }
.cards-hint b { color: var(--gold); }

/* grimoire: icon grids per school and the nine hotbar slots */
.sgrid { display: flex; flex-wrap: wrap; gap: calc(1.5px * var(--s)); margin-bottom: calc(1px * var(--s)); }
.tile { position: relative; width: calc(15px * var(--s)); height: calc(15px * var(--s)); border: calc(0.75px * var(--s)) solid #5a2a14; background: #3a2614; display: grid; place-items: center; color: #8a6a4a; font-family: 'Silkscreen', monospace; font-size: calc(6px * var(--s)); cursor: pointer; }
.tile img { width: 100%; height: 100%; image-rendering: pixelated; }
.tile[draggable="true"] { cursor: grab; }
.tile.cur { outline: calc(1px * var(--s)) solid #ffb04a; }
.tile b, .tile i { position: absolute; font-style: normal; font-family: 'Silkscreen', monospace; font-size: calc(3.6px * var(--s)); line-height: 1; padding: calc(0.3px * var(--s)) calc(0.6px * var(--s)); text-shadow: 0 1px 0 #000; }
.tile b { left: 0; top: 0; background: #000a; color: #ffe6a8; }
.tile i { right: 0; bottom: 0; background: #6b4a1acc; color: #ffe6a8; }
.detail .unk { width: 30%; aspect-ratio: 1; margin: 6% auto 3%; display: grid; place-items: center; background: #3a2614; color: #8a6a4a; font-size: 300%; }
.loadout { display: flex; justify-content: center; gap: calc(1.2px * var(--s)); margin-top: calc(4px * var(--s)); }
.lslot { position: relative; width: calc(15px * var(--s)); height: calc(15px * var(--s)); background: #2a1608; border: calc(0.75px * var(--s)) solid #5a2a14; }
.lslot img { width: 100%; height: 100%; image-rendering: pixelated; }
.lslot span { position: absolute; left: calc(0.5px * var(--s)); top: 0; font-family: 'Silkscreen', monospace; font-size: calc(3.4px * var(--s)); color: #e9c88a; text-shadow: 0 1px 0 #000; z-index: 1; }
.lslot[draggable="true"] { cursor: grab; }
.lslot.dragover { outline: calc(0.75px * var(--s)) dashed #ffb04a; }
.detail + .loadout + .hint, .hint { font-size: calc(4.4px * var(--s)); text-align: center; margin-top: calc(2px * var(--s)); }

#spelltip { position: absolute; width: calc(112px * var(--s)); padding: calc(3px * var(--s)) calc(4px * var(--s)); background: linear-gradient(#2a1f14f4, #120c08f4); border: calc(0.75px * var(--s)) solid var(--edge-hi); box-shadow: 0 0 0 calc(0.5px * var(--s)) #000, 0 calc(2px * var(--s)) calc(6px * var(--s)) #000; pointer-events: none; opacity: 0; transition: opacity 0.12s; z-index: 5; }
#spelltip.show { opacity: 1; }
#spelltip .sn { font-family: 'Pixelify Sans', monospace; font-weight: 700; font-size: calc(7px * var(--s)); color: #ffe6a8; line-height: 1.1; }
#spelltip .ss, #spelltip .st, #spelltip .sk { font-family: 'Silkscreen', monospace; font-size: calc(3.8px * var(--s)); letter-spacing: 0.06em; }
#spelltip .sd { font-size: calc(4.8px * var(--s)); line-height: 1.35; margin: calc(1.5px * var(--s)) 0; }
#spelltip .st { display: flex; flex-wrap: wrap; gap: calc(3px * var(--s)); color: var(--ink-dim); }
#spelltip .sk { color: var(--ink-dim); margin-top: calc(1px * var(--s)); }
#spelltip .sk b { color: var(--gold); }
@keyframes newspell { 0% { box-shadow: 0 0 calc(10px * var(--s)) #fff; } 100% { box-shadow: none; } }

#minimap { position: absolute; right: calc(4px * var(--s)); top: calc(4px * var(--s)); display: grid; grid-template-columns: calc(24px * var(--s)); grid-auto-rows: calc(13.5px * var(--s)); padding: calc(1.5px * var(--s)); background: #0c0a10cc; border: calc(0.75px * var(--s)) solid var(--edge); }
#minimap div { background: #3b5a3a; position: relative; overflow: hidden; }
#minimap div.grave { background: #33354a; }
#minimap div.temple { background: #5d5444; }
#minimap div i { position: absolute; width: calc(1.5px * var(--s)); height: calc(1.5px * var(--s)); border-radius: 50%; transform: translate(-50%, -50%); }
#minimap div i.p { width: calc(2.5px * var(--s)); height: calc(2.5px * var(--s)); box-shadow: 0 0 0 calc(0.5px * var(--s)) #000; z-index: 2; }
#minimap div i.m { background: #ff5a4a; }
#minimap div i.m.big { width: calc(3px * var(--s)); height: calc(3px * var(--s)); background: #ff2a6a; }
#minimap div i.t { background: #ffe66b; width: calc(2px * var(--s)); height: calc(2px * var(--s)); border-radius: 0; }
#minimap div b.ward { position: absolute; left: 0; right: 0; height: calc(0.75px * var(--s)); background: #a98bff; box-shadow: 0 0 calc(2px * var(--s)) #8a5cff; }
#minimap .view { position: absolute; left: calc(1.5px * var(--s)); right: calc(1.5px * var(--s)); border: calc(0.5px * var(--s)) solid #ffffffaa; pointer-events: none; }

#bossbar { position: absolute; left: 50%; top: calc(20px * var(--s)); transform: translateX(-50%); text-align: center; }
#bossbar .bname { font-family: 'Silkscreen', monospace; font-size: calc(5.5px * var(--s)); color: #ffd7a8; text-shadow: 0 1px 0 #000, 0 0 calc(4px * var(--s)) #a33; margin-bottom: calc(1px * var(--s)); }
#bossbar .bbar { width: calc(150px * var(--s)); height: calc(5px * var(--s)); background: #1b1420; border: calc(0.75px * var(--s)) solid #000; box-shadow: 0 0 0 calc(0.5px * var(--s)) #8a6a3a; position: relative; }
#bossbar .bbar i { position: absolute; inset: 0; background: linear-gradient(#ff8a5a, #c0302a 50%, #6e1712); transition: width 0.2s; }

#banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-family: 'Pixelify Sans', monospace; font-weight: 700; font-size: calc(14px * var(--s)); color: #fff4d6; text-shadow: 0 calc(1px * var(--s)) 0 #000, 0 0 calc(8px * var(--s)) #000; opacity: 0; transition: opacity 0.6s; letter-spacing: 0.04em; }
#banner small { display: block; font-size: calc(5px * var(--s)); font-family: 'Silkscreen', monospace; color: var(--gold); letter-spacing: 0.3em; }
#banner.show { opacity: 1; }
#toast { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); display: flex; align-items: center; gap: calc(4px * var(--s)); padding: calc(3px * var(--s)) calc(6px * var(--s)); background: var(--panel); border: calc(1px * var(--s)) solid var(--edge-hi); opacity: 0; transition: opacity 0.4s, transform 0.4s; white-space: nowrap; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(calc(-4px * var(--s))); }
#toast img { width: calc(20px * var(--s)); height: calc(20px * var(--s)); image-rendering: pixelated; border: calc(0.75px * var(--s)) solid var(--gold); }
#toast .tt { font-family: 'Silkscreen', monospace; font-size: calc(4.5px * var(--s)); color: var(--gold); }
#toast .tn { font-size: calc(9px * var(--s)); font-weight: 700; }
#toast .td { font-size: calc(5px * var(--s)); color: var(--ink-dim); max-width: calc(170px * var(--s)); white-space: normal; }
#log { position: absolute; left: calc(4px * var(--s)); bottom: calc(26px * var(--s)); font-size: calc(5px * var(--s)); display: flex; flex-direction: column; gap: calc(1px * var(--s)); text-shadow: 0 1px 0 #000, 1px 0 0 #000; }
#log div { transition: opacity 1s; }
#hint { position: absolute; left: 0; right: 0; bottom: calc(26px * var(--s)); text-align: center; font-size: calc(5.5px * var(--s)); color: #fff; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; opacity: 0; transition: opacity 0.5s; }
#hint.show { opacity: 1; }
#hint b { color: var(--gold); }
#sessioncode { position: absolute; right: calc(4px * var(--s)); top: calc(56px * var(--s)); font-family: 'Silkscreen', monospace; font-size: calc(4.5px * var(--s)); background: #0c0a10cc; border: calc(0.75px * var(--s)) solid var(--edge); padding: calc(1px * var(--s)) calc(3px * var(--s)); text-align: right; }
#sessioncode b { color: var(--gold); font-size: calc(6px * var(--s)); letter-spacing: 0.15em; }
#sessioncode .ver { color: var(--ink-dim); font-size: calc(3.6px * var(--s)); letter-spacing: 0.04em; }
#sessioncode .warn { color: #ff8a6b; font-size: calc(3.6px * var(--s)); }
#dmeter { position: absolute; right: calc(4px * var(--s)); top: calc(78px * var(--s)); width: calc(62px * var(--s)); font-family: 'Silkscreen', monospace; font-size: calc(3.8px * var(--s)); background: #0c0a10cc; border: calc(0.75px * var(--s)) solid var(--edge); padding: calc(1.5px * var(--s)) calc(2px * var(--s)); display: flex; flex-direction: column; gap: calc(1px * var(--s)); }
#dmeter .dh { color: var(--ink-dim); font-size: calc(3.4px * var(--s)); letter-spacing: 0.08em; }
#dmeter .dr { position: relative; z-index: 0; display: flex; justify-content: space-between; gap: calc(2px * var(--s)); padding: 0 calc(1px * var(--s)); line-height: calc(5px * var(--s)); text-shadow: 0 1px 0 #000; }
#dmeter .dr i { position: absolute; left: 0; top: 0; bottom: 0; opacity: 0.35; z-index: -1; }
#dmeter .dr span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#dmeter .dr.me span:first-child { color: var(--gold); }
#downed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(transparent 30%, rgba(60, 0, 0, 0.55)); }
#downed .t { font-size: calc(14px * var(--s)); font-weight: 700; color: #ffb0a0; text-shadow: 0 calc(1px * var(--s)) 0 #000; }
#downed .s { font-size: calc(6px * var(--s)); color: #fff; text-shadow: 0 1px 0 #000; }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(6px * var(--s)); }
#title { background: radial-gradient(ellipse at 50% 45%, rgba(10, 8, 20, 0.15), rgba(6, 4, 12, 0.85)); gap: calc(6px * var(--s)); }
.logo { text-align: center; }
.logo span { display: block; font-family: 'Pixelify Sans', monospace; font-weight: 700; font-size: calc(34px * var(--s)); letter-spacing: 0.06em; color: #ffe6a8; text-shadow: 0 calc(2px * var(--s)) 0 #6b2f12, 0 calc(3px * var(--s)) 0 #2a1208, 0 0 calc(18px * var(--s)) rgba(255, 150, 60, 0.55); animation: glow 3s ease-in-out infinite; }
.logo small { font-family: 'Silkscreen', monospace; font-size: calc(5.5px * var(--s)); letter-spacing: 0.35em; color: #c9b8ff; text-shadow: 0 1px 0 #000; }
@keyframes glow { 50% { text-shadow: 0 calc(2px * var(--s)) 0 #6b2f12, 0 calc(3px * var(--s)) 0 #2a1208, 0 0 calc(28px * var(--s)) rgba(255, 170, 80, 0.8); } }
.panel { background: var(--panel); border: calc(1px * var(--s)) solid var(--edge-hi); box-shadow: 0 0 0 calc(1px * var(--s)) #000, inset 0 0 0 calc(1px * var(--s)) #2b2014, 0 calc(4px * var(--s)) calc(16px * var(--s)) #000; padding: calc(6px * var(--s)) calc(8px * var(--s)); display: flex; flex-direction: column; gap: calc(4px * var(--s)); align-items: stretch; min-width: calc(200px * var(--s)); }
.panel.small { min-width: calc(140px * var(--s)); }
.panel h1, .panel h2 { margin: 0; text-align: center; font-weight: 700; color: #ffe6a8; }
.panel h1 { font-size: calc(16px * var(--s)); }
.panel h2 { font-size: calc(10px * var(--s)); }
.panel p { margin: 0; text-align: center; font-size: calc(6px * var(--s)); }
.dim { color: var(--ink-dim); }
.lbl { font-family: 'Silkscreen', monospace; font-size: calc(4.5px * var(--s)); color: var(--ink-dim); display: flex; flex-direction: column; gap: calc(1px * var(--s)); }
input { font: inherit; font-size: calc(6px * var(--s)); background: #0d0a12; color: var(--ink); border: calc(0.75px * var(--s)) solid #4b3a2a; padding: calc(1.5px * var(--s)) calc(3px * var(--s)); outline: none; }
input:focus { border-color: var(--gold); }
button { font: inherit; font-size: calc(6.5px * var(--s)); font-weight: 600; color: var(--ink); background: linear-gradient(#3b2c1c, #241a10); border: calc(0.75px * var(--s)) solid #8a6a3a; padding: calc(2px * var(--s)) calc(6px * var(--s)); cursor: pointer; box-shadow: inset 0 calc(0.5px * var(--s)) 0 #6b5434, 0 calc(1px * var(--s)) 0 #000; }
button:hover, button.focus { background: linear-gradient(#5a4126, #362614); border-color: var(--gold); color: #fff; }
button.primary { background: linear-gradient(#7a3a16, #4a200a); border-color: #ffb04a; color: #fff2d2; }
button.primary:hover { background: linear-gradient(#9a4a1c, #5e2a0e); }
.buttons { display: flex; flex-direction: column; gap: calc(2.5px * var(--s)); }
.join { display: flex; gap: calc(2px * var(--s)); }
.join input { flex: 1; text-transform: uppercase; letter-spacing: 0.3em; text-align: center; }
#title-err { color: #ff8a7a; text-align: center; font-size: calc(5px * var(--s)); min-height: calc(6px * var(--s)); }
#magepick { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(2px * var(--s)); }
.mcard { display: flex; flex-direction: column; align-items: center; padding: calc(1px * var(--s)); background: #0d0a12; border: calc(0.75px * var(--s)) solid #3a2c1c; cursor: pointer; }
.mcard canvas { width: calc(40px * var(--s)); height: calc(40px * var(--s)); image-rendering: pixelated; }
.mcard span { font-family: 'Silkscreen', monospace; font-size: calc(3.8px * var(--s)); color: var(--ink-dim); white-space: nowrap; }
.mcard.sel { border-color: var(--gold); background: #1e1610; box-shadow: 0 0 calc(4px * var(--s)) #f2c45a88; }
.mcard.sel span { color: var(--gold); }
.controls { font-size: calc(4.6px * var(--s)); color: var(--ink-dim); text-shadow: 0 1px 0 #000; text-align: center; max-width: calc(440px * var(--s)); }
.controls b { color: var(--ink); }
.credits { position: absolute; bottom: calc(3px * var(--s)); font-family: 'Silkscreen', monospace; font-size: calc(3.8px * var(--s)); color: #6d6480; }
#pause, #victory { background: rgba(5, 3, 10, 0.6); }
#credits { background: rgba(5, 3, 10, 0.8); }
.credits-panel { width: calc(290px * var(--s)); max-height: calc(240px * var(--s)); overflow-y: auto; display: flex; flex-direction: column; gap: calc(3px * var(--s)); }
.credits-panel h3 { margin: 0 0 calc(1px * var(--s)); font-family: 'Silkscreen', monospace; font-size: calc(5.5px * var(--s)); color: var(--gold); letter-spacing: 0.1em; }
.credits-panel p, .credits-panel li { font-size: calc(5px * var(--s)); text-align: left; line-height: 1.4; }
.credits-panel ul { margin: 0; padding-left: calc(8px * var(--s)); }
.credits-panel a { color: #c9b8ff; }
.slider, .check { display: flex; align-items: center; justify-content: space-between; gap: calc(4px * var(--s)); font-size: calc(5.5px * var(--s)); }
#vstats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1px * var(--s)) calc(8px * var(--s)); font-size: calc(6px * var(--s)); margin: calc(2px * var(--s)) auto; }
#vstats b { color: var(--gold); text-align: right; }
#loading { background: var(--bg); font-family: 'Silkscreen', monospace; font-size: calc(7px * var(--s)); color: var(--ink-dim); }

/* ---------- spellbook ---------- */
#book { background: rgba(5, 3, 10, 0.7); }
.tome { position: relative; width: calc(400px * var(--s)); height: calc(220px * var(--s)); display: flex; padding: calc(8px * var(--s)); background: linear-gradient(#5a2a14, #3a1a0c); border: calc(1px * var(--s)) solid #1a0a04; box-shadow: 0 0 0 calc(1px * var(--s)) #a0703a, 0 calc(6px * var(--s)) calc(20px * var(--s)) #000; }
.page { flex: 1; background: linear-gradient(90deg, #e9dcb8, #f4ead0 60%, #e2d2a8); color: #3a2614; padding: calc(6px * var(--s)) calc(8px * var(--s)); overflow: hidden; }
.page.left { box-shadow: inset calc(-6px * var(--s)) 0 calc(8px * var(--s)) -calc(4px * var(--s)) #0004; border-right: calc(1px * var(--s)) solid #b89a68; }
.page.right { background: linear-gradient(90deg, #e2d2a8, #f4ead0 40%, #e9dcb8); }
.page h2 { margin: 0 0 calc(3px * var(--s)); font-size: calc(10px * var(--s)); text-align: center; color: #5a2a14; }
.school { font-family: 'Silkscreen', monospace; font-size: calc(4.5px * var(--s)); letter-spacing: 0.2em; margin: calc(3px * var(--s)) 0 calc(1.5px * var(--s)); border-bottom: 1px solid #b89a68; }
.entry { display: flex; gap: calc(3px * var(--s)); align-items: center; padding: calc(1px * var(--s)); cursor: pointer; }
.entry img, .entry .unk { width: calc(14px * var(--s)); height: calc(14px * var(--s)); image-rendering: pixelated; border: calc(0.75px * var(--s)) solid #5a2a14; }
.entry .unk { background: #3a2614; display: grid; place-items: center; color: #8a6a4a; font-family: 'Silkscreen', monospace; font-size: calc(6px * var(--s)); }
.entry .en { font-size: calc(6.5px * var(--s)); font-weight: 600; }
.entry.locked .en { color: #9a8462; }
.entry.cur { background: #d8c494; }
.detail img { width: calc(24px * var(--s)); height: calc(24px * var(--s)); image-rendering: pixelated; border: calc(1px * var(--s)) solid #5a2a14; display: block; margin: calc(2px * var(--s)) auto calc(2px * var(--s)); }
.detail h3 { margin: 0; text-align: center; font-size: calc(10px * var(--s)); }
.detail .sch { text-align: center; font-family: 'Silkscreen', monospace; font-size: calc(4.5px * var(--s)); letter-spacing: 0.2em; }
.detail p { font-size: calc(6px * var(--s)); line-height: 1.3; text-align: center; margin: calc(4px * var(--s)) calc(4px * var(--s)); }
.detail .stats { display: flex; justify-content: center; gap: calc(8px * var(--s)); font-family: 'Silkscreen', monospace; font-size: calc(4.8px * var(--s)); }
.tome .close { position: absolute; bottom: calc(1.5px * var(--s)); left: 0; right: 0; text-align: center; font-family: 'Silkscreen', monospace; font-size: calc(4px * var(--s)); color: #e9c88a; }
.spin { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

#intro { background: rgba(4, 3, 8, 0.92); gap: calc(6px * var(--s)); text-align: center; cursor: pointer; }
#intro p { margin: 0; font-size: calc(7px * var(--s)); line-height: 1.5; opacity: 0; animation: fadein 1.2s forwards; text-shadow: 0 1px 0 #000; }
#intro .l1 { color: #ffe6a8; font-size: calc(9px * var(--s)); }
#intro .l2 { animation-delay: 1.2s; color: var(--ink-dim); }
#intro .l3 { animation-delay: 2.6s; color: #c9b8ff; font-weight: 700; font-size: calc(9px * var(--s)); }
#intro small { position: absolute; bottom: calc(10px * var(--s)); font-family: 'Silkscreen', monospace; font-size: calc(4.5px * var(--s)); color: #6d6480; opacity: 0; animation: fadein 1s 3.5s forwards; }
@keyframes fadein { to { opacity: 1; } }