/* The kids' guide. Colours, panels, keys and the quick bar come from the game's style.css;
   every room takes the sky of one game depth (body[data-theme], values from src/themes/). */
:root {
  --sky1: #163640; --sky2: #081218; --accent: #76ad50;
  --text: #d8dde6; --muted: #aab3c2; --dim: #8a96a8; --line: #444c5c; --panel: #12161ee6; --deep: #0b0d12;
  --gold: #ffcf7a; --title: #ffe4ae; --portal: #ffc94a; --cyan: #5fd3ff; --green: #70d6aa; --violet: #b98cff;
  --water: #2e86de; --lava: #ff5a00; --acid: #7dff3a;
  --lv1: #61dc6b; --lv2: #51a9ff; --lv3: #fd9f07;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --read: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
}
[data-theme=meadow]   { --sky1: #163640; --sky2: #081218; --accent: #76ad50; }
[data-theme=peaks]    { --sky1: #1c2e46; --sky2: #0a0f18; --accent: #c3d3d8; }
[data-theme=badlands] { --sky1: #40282e; --sky2: #110a0c; --accent: #d3a466; }
[data-theme=roots]    { --sky1: #231c14; --sky2: #050506; --accent: #c9a46a; }
[data-theme=frozen]   { --sky1: #12202c; --sky2: #020305; --accent: #aacbd7; }
[data-theme=swamp]    { --sky1: #142010; --sky2: #020302; --accent: #7dff3a; }
[data-theme=nests]    { --sky1: #1c1520; --sky2: #020203; --accent: #d0503a; }
[data-theme=mines]    { --sky1: #121630; --sky2: #020203; --accent: #8fd8ff; }
[data-theme=ruins]    { --sky1: #2a1e10; --sky2: #030201; --accent: #e0c080; }
[data-theme=volcanic] { --sky1: #3a0e06; --sky2: #050101; --accent: #ff8a2a; }
[data-theme=abyss]    { --sky1: #300a14; --sky2: #040101; --accent: #e05a8a; }
[data-theme=core]     { --sky1: #4a1404; --sky2: #0a0201; --accent: #ff5a00; }

* { box-sizing: border-box; }
/* every text block exists twice, <x lang="en"> and <x lang="de">; lang.js picks one */
html:not([data-lang=de]) body [lang=de], html[data-lang=de] body [lang=en] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { background: radial-gradient(ellipse at 50% 35%, var(--sky1) 0%, var(--sky2) 70%, #05070a 100%) fixed;
  color: var(--text); font: 17px/1.55 var(--read); }
#stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
a { color: var(--cyan); }
a:hover { color: #9ae6ff; }
h1, h2, h3, h4, .mono, button, select, input, kbd, code, pre, .bar, .tag { font-family: var(--mono); }
h1 { color: var(--title); letter-spacing: 3px; font-size: 30px; margin: 0 0 8px; }
h2 { color: var(--title); letter-spacing: 2px; font-size: 25px; margin: 0 0 14px; line-height: 1.25; }
h3 { color: #c5cdbc; font-size: 16px; margin: 18px 0 6px; letter-spacing: 1px; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; padding-left: 1.3em; }
li { margin: 3px 0; }
b, strong { color: #fff; }
em { color: var(--gold); font-style: normal; }
kbd { display: inline-block; min-width: 1.4em; text-align: center; background: #2a2f3a; border: 1px solid var(--line); border-radius: 3px;
  padding: 0 5px; color: #e6e9ef; font-size: .82em; line-height: 1.5; }
code { background: #0b0d12aa; border: 1px solid #2a2f3a; border-radius: 3px; padding: 0 4px; font-size: .84em; color: #e8dcc0; white-space: nowrap; }
pre { background: var(--deep); border: 1px solid #2a2f3a; border-left: 3px solid var(--accent); border-radius: 4px; padding: 10px 14px;
  font-size: 13px; line-height: 1.5; overflow: auto; margin: 0 0 12px; color: #d6dbe4; }
pre code { background: none; border: 0; padding: 0; white-space: pre; color: inherit; font-size: inherit; }
pre .c { color: #6f7f95; font-style: italic; } pre .s { color: #a5d6a7; } pre .k { color: #ffb86b; } pre .n { color: #8fd8ff; }
pre .file { display: block; color: var(--dim); font-size: 11px; margin-bottom: 4px; font-style: normal; }
pre .file .live, pre .file .excerpt { font-size: 9px; letter-spacing: 1px; border: 1px solid; border-radius: 3px; padding: 0 4px; margin-left: 6px; }
pre .file .live { color: var(--lv1); } pre .file .excerpt { color: var(--dim); }
pre[data-code] { max-height: 62vh; }
.note.stale { border-color: #ff8a7a; } .note.stale b:first-child { color: #ff8a7a; }
img { max-width: 100%; }
button, .btn { font-size: 13px; color: #e7dfcf; background: #343d46; border: 1px solid #69746d; border-radius: 4px; padding: 6px 10px;
  cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.3; }
button:hover:not(:disabled), .btn:hover { background: #465249; color: #fff; }
button:focus-visible, .btn:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button.on { background: #5a4a26; border-color: var(--gold); color: var(--title); }
button:disabled { opacity: .45; cursor: default; }
select, input[type=number], input[type=text] { font-size: 13px; color: #e7dfcf; background: #343d46; border: 1px solid #69746d; border-radius: 4px; padding: 5px 6px; }
input[type=number] { width: 6em; }
input[type=range] { accent-color: var(--gold); vertical-align: middle; }
label { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }

/* ---- top bar ---------------------------------------------------------------------------- */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  font-size: 12px; color: var(--muted); background: linear-gradient(#0b0d12ee, #0b0d1200); }
.bar a { color: var(--muted); text-decoration: none; }
.bar a:hover { color: #fff; }
.bar .where { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .where b { color: var(--title); font-weight: normal; letter-spacing: 1px; }
.bar .where i { font-style: normal; color: var(--accent); }
.bar .tools { display: flex; gap: 6px; align-items: center; }
.bar button { font-size: 11px; padding: 3px 7px; }
.lvpick { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.lvpick button { border: 0; border-radius: 0; background: #1a1f28; color: var(--dim); }
.lvpick button.on { background: #2a3140; color: #fff; box-shadow: inset 0 -2px 0 var(--c); }

/* ---- slides ----------------------------------------------------------------------------- */
main { padding: 54px 16px 90px; }
.slide { display: none; max-width: 1120px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 16px 60px #0008; padding: 26px 32px 22px; position: relative; }
.slide.current { display: block; animation: slidein .25s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body.slides .slide.current { min-height: calc(100dvh - 160px); }
body.scroll .slide { display: block; margin-bottom: 26px; animation: none; }
body.scroll .slide.too-deep { display: none; }
.slide > .tag { position: absolute; top: 12px; right: 14px; font-size: 11px; color: var(--c); border: 1px solid var(--c); border-radius: 3px; padding: 0 6px; }
.slide[data-lv="1"] { --c: var(--lv1); } .slide[data-lv="2"] { --c: var(--lv2); } .slide[data-lv="3"] { --c: var(--lv3); }
.slide > h2 { padding-right: 120px; }
.lead { font-size: 20px; color: #eef1f5; }
.muted { color: var(--muted); } .small { font-size: 14px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.cols.wide-left { grid-template-columns: 3fr 2fr; } .cols.wide-right { grid-template-columns: 2fr 3fr; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cols > *, .cols3 > * { min-width: 0; }
@media (max-width: 860px) { .cols, .cols.wide-left, .cols.wide-right, .cols3 { grid-template-columns: 1fr; } .slide { padding: 20px 16px; } .slide > h2 { padding-right: 0; margin-top: 18px; } main { padding: 54px 8px 90px; } }
.shot { display: block; width: 100%; border-radius: 6px; border: 1px solid var(--line); box-shadow: 0 8px 30px #0008; }
figure { margin: 0 0 12px; } figcaption { font-size: 13px; color: var(--dim); margin-top: 6px; font-family: var(--mono); }
.card { background: #181e28; border: 1px solid #2f3846; border-radius: 6px; padding: 12px 14px; }
.card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.icon { width: 64px; height: 64px; object-fit: contain; vertical-align: middle; }
.icon.s { width: 36px; height: 36px; }
.note { border-left: 3px solid var(--gold); background: #2a24161f; padding: 8px 12px; border-radius: 0 4px 4px 0; margin: 0 0 12px; }
.note.think { border-color: var(--violet); }
.note > :last-child { margin-bottom: 0; }
.note b:first-child { font-family: var(--mono); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); margin-right: 4px; }
.note.think b:first-child { color: var(--violet); }
table { border-collapse: collapse; font-size: 15px; margin: 0 0 12px; width: 100%; }
th, td { text-align: left; padding: 4px 10px 4px 0; border-bottom: 1px solid #2a2f3a; vertical-align: top; }
th { font-family: var(--mono); font-size: 12px; color: var(--dim); font-weight: normal; letter-spacing: 1px; }
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps > li { counter-increment: s; position: relative; padding-left: 38px; margin: 8px 0; }
.steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 4px; background: #2a2f3a;
  border: 1px solid var(--line); color: var(--gold); font: 13px/26px var(--mono); text-align: center; }

/* links: words (glossary), dive deeper, portals to other rooms */
a.w { color: inherit; text-decoration: underline dotted var(--gold); text-underline-offset: 3px; }
a.w:hover { color: var(--title); }
#wordtip { position: fixed; z-index: 30; max-width: 340px; background: #1d2532f5; border: 1px solid var(--gold); border-radius: 6px; padding: 8px 11px;
  font-size: 14px; color: var(--text); pointer-events: none; box-shadow: 0 8px 30px #000a; }
#wordtip b { display: block; font-family: var(--mono); color: var(--title); font-size: 13px; letter-spacing: 1px; margin-bottom: 2px; }
.deeper, .portal { display: inline-flex; align-items: center; gap: 8px; font: 13px var(--mono); text-decoration: none; border-radius: 4px; padding: 6px 11px; margin: 4px 6px 4px 0; }
.deeper { color: #fff; background: #1d2532; border: 1px solid var(--c, var(--lv2)); }
.deeper::before { content: "\25BC"; font-size: 9px; color: var(--c, var(--lv2)); }
.deeper[data-lv="2"] { --c: var(--lv2); } .deeper[data-lv="3"] { --c: var(--lv3); } .deeper[data-lv="1"] { --c: var(--lv1); }
.portal { color: var(--title); background: #2a2416; border: 1px solid var(--portal); }
.portal::before { content: ""; width: 9px; height: 13px; border: 2px solid var(--portal); border-bottom: 0; border-radius: 6px 6px 0 0; }
.deeper:hover, .portal:hover { filter: brightness(1.25); color: #fff; }
/* the end of a room: on to the next room, or back to the map */
.roomend { margin-top: 26px; padding-top: 16px; border-top: 1px dashed var(--line); }
.roomend .done { font: 13px var(--mono); color: var(--green); letter-spacing: 1px; margin-bottom: 10px; }
.roomend .done b { color: var(--title); font-weight: normal; }
.roomend .ways { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch; }
.roomend .way { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 8px; text-decoration: none; color: var(--text); }
.roomend .way span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.roomend .way small { font: 11px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.roomend .way b { font: 18px var(--mono); color: var(--title); font-weight: normal; letter-spacing: 1px; }
.roomend .way i { font-style: normal; font-size: 14px; color: var(--muted); }
.roomend .way em { font-size: 22px; color: var(--portal); }
.roomend .next { background: linear-gradient(90deg, #2a2416, #3a3018); border: 2px solid var(--portal); box-shadow: 0 0 24px #ffc94a22; }
.roomend .next em { margin-left: auto; }
.roomend .next img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.roomend .map { background: #181e28; border: 1px solid var(--line); }
.roomend .map b { font-size: 15px; }
.roomend .way:hover { filter: brightness(1.2); color: var(--text); }
.roomend .last { margin: 0; align-self: center; color: var(--title); }
@media (max-width: 860px) { .roomend .ways { grid-template-columns: 1fr; } }


/* the quick bar at the bottom: one slot per slide */
.qbar { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 10; display: flex; gap: 5px; align-items: center;
  padding: 6px; background: #0b0d12d0; border: 1px solid var(--line); border-radius: 6px; max-width: calc(100vw - 24px); }
.qbar .slots { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.qbar a.slot { position: relative; flex: none; width: 38px; height: 38px; border: 1px solid #3a4352; border-radius: 4px; text-decoration: none;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 22%, transparent), #181e28 70%); color: #e6e9ef; font: 11px/1 var(--mono); }
.qbar a.slot span { position: absolute; left: 4px; top: 3px; }
.qbar a.slot::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--c); }
.qbar a.slot.lv1 { --c: var(--lv1); } .qbar a.slot.lv2 { --c: var(--lv2); } .qbar a.slot.lv3 { --c: var(--lv3); }
.qbar a.slot:hover { border-color: #8a96a8; }
.qbar a.slot.current { box-shadow: inset 0 0 0 2px var(--gold); }
.qbar a.slot.too-deep { opacity: .3; }
.qbar .arrow { flex: none; font-size: 15px; padding: 7px 10px; }
.qbar .arrow.to-room { background: #3a3018; border-color: var(--portal); color: var(--portal); box-shadow: 0 0 12px #ffc94a55; }
.qbar .door { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--portal); border-radius: 19px 19px 4px 4px;
  background: #2a2416; margin-left: 4px; }
.qbar .door img { width: 28px; height: 28px; object-fit: contain; }
.qbar .door:hover { filter: brightness(1.25); }
.qbar .door:first-child { margin: 0 4px 0 0; }
body.scroll .qbar { display: none; }
body.scroll .bar { background: #0b0d12f0; border-bottom: 1px solid #2a2f3a; }

/* language switch: in the room bar, or top right on the map and the word book */
.langsw { font-weight: bold; letter-spacing: 1px; }
.langbar { position: fixed; top: 10px; right: 14px; z-index: 10; }
.langbar .langsw { font-size: 12px; padding: 4px 9px; }

/* help overlay, like the game's */
#help { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: #080c13a0; }
#help section { width: min(480px, 92vw); padding: 16px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
#help h1 { font-size: 15px; } #help dl { display: grid; grid-template-columns: 9em 1fr; gap: 5px 12px; margin: 0; }
#help dt { color: #e6e9ef; } #help dd { margin: 0; color: var(--muted); }

/* ---- demos ------------------------------------------------------------------------------ */
.demo { background: #0b0d12cc; border: 1px solid var(--line); border-radius: 6px; padding: 10px; margin: 0 0 12px; position: relative; }
.demo::before { content: "TRY IT"; position: absolute; top: -9px; left: 10px; background: var(--deep); color: var(--accent); border: 1px solid var(--line);
  border-radius: 3px; font: 10px var(--mono); letter-spacing: 2px; padding: 1px 6px; }
.demo[data-keys]:focus { outline: 1px solid var(--gold); }
.demo.real::before { content: "TRY IT \00B7 REAL GAME CODE"; color: var(--gold); border-color: #6a5a30; }
html[data-lang=de] .demo::before { content: "AUSPROBIEREN"; }
html[data-lang=de] .demo.real::before { content: "AUSPROBIEREN \00B7 ECHTER SPIELCODE"; }
.demo canvas { display: block; width: 100%; height: auto; max-height: 54vh; object-fit: contain; margin: 0 auto; border-radius: 4px; background: #070910; touch-action: none; }
.demo .row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0 0; }
.demo .out { font: 13px/1.5 var(--mono); color: var(--muted); margin-top: 8px; min-height: 1.5em; white-space: pre-wrap; }
.demo .out b { color: #fff; font-weight: normal; }
.demo .loading { color: var(--dim); font: 13px var(--mono); padding: 20px; text-align: center; }
.demo .err { color: #ff8a7a; font: 13px var(--mono); padding: 12px; }
.chip { display: inline-block; font: 12px var(--mono); border: 1px solid var(--line); border-radius: 3px; padding: 1px 7px; margin: 2px 3px 2px 0; background: #181e28; }
.chip.ok { border-color: #3c8a4a; color: #8fe39a; } .chip.no { border-color: #8a3c3c; color: #ff9a8a; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 12px var(--mono); color: var(--muted); margin-top: 6px; }
.legend i { display: inline-block; width: 11px; height: 11px; border: 1px solid #0006; vertical-align: -1px; margin-right: 5px; }

/* the parts of the game (parts demo) and journeys through them */
.parts .partsvg svg { display: block; width: 100%; height: auto; max-height: 58vh; }
.parts .zone { fill: #ffffff05; stroke-dasharray: 5 4; stroke-width: 1; }
.parts .zone.main { stroke: color-mix(in srgb, var(--cyan) 45%, transparent); }
.parts .zone.worker { stroke: color-mix(in srgb, var(--violet) 55%, transparent); }
.parts .zlabel { font: 10px var(--mono); fill: var(--dim); letter-spacing: 1px; }
.parts .edges path { fill: none; stroke: #8a96a8; opacity: .35; transition: opacity .2s; }
.parts .edges path.out { stroke: var(--gold); opacity: 1; } .parts .edges path.in { stroke: var(--cyan); opacity: 1; }
.parts .edges path.walk { stroke: var(--accent); opacity: 1; } .parts .edges path.dim { opacity: .08; } .parts .edges path.minor { opacity: 0; }
.parts .ah.base { fill: #8a96a8; } .parts .ah.out { fill: var(--gold); } .parts .ah.in { fill: var(--cyan); } .parts .ah.walk { fill: var(--accent); }
.parts .node { cursor: pointer; outline: none; }
.parts .node rect { fill: #181e28; stroke: #3a4352; stroke-width: 1.5; }
.parts .node:hover rect, .parts .node:focus-visible rect { stroke: #8a96a8; }
.parts .node.on rect { stroke: var(--gold); stroke-width: 2.5; fill: #222a36; }
.parts .node text { text-anchor: middle; }
.parts .node .n { font: 14px var(--mono); fill: var(--title); } .parts .node .nick { font: 11px var(--read); fill: var(--muted); }
.parts .t.main { fill: var(--cyan); } .parts .t.worker { fill: var(--violet); }
.parts .walker { fill: var(--accent); stroke: #fff; stroke-width: 2; pointer-events: none; }
ol.journey > li { cursor: pointer; border-radius: 4px; padding-top: 2px; padding-bottom: 2px; margin: 4px 0; }
ol.journey > li:hover { background: #ffffff08; }
ol.journey > li.on { background: #ffffff12; color: #fff; }
ol.journey > li.on::before { background: var(--accent); color: #0b0d12; border-color: var(--accent); }
.demo .things button { font-family: var(--mono); }

/* function machines (machine demo) and stepping through code (stepper demo) */
.machine { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin: 10px 0 4px; }
.machine .in, .machine .outv { display: flex; flex-direction: column; gap: 4px; background: #181e28; border: 1px solid #2f3846; border-radius: 6px; padding: 8px 10px; }
.machine .in { position: relative; } .machine .in::after, .machine .outv::before { content: "\25B6"; position: absolute; color: var(--accent); }
.machine .in::after { right: -14px; top: 40%; } .machine .outv { position: relative; } .machine .outv::before { left: -14px; top: 40%; }
.machine .in input { width: 100%; font-size: 18px; }
.machine .body { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 18px; border: 2px solid var(--accent); border-radius: 10px;
  background: linear-gradient(#232b38, #161b24); font-family: var(--mono); }
.machine .body .name { color: var(--title); font-weight: normal; }
.machine .gear { font-size: 26px; color: var(--accent); transition: transform .35s ease-out; display: inline-block; }
.machine .res { font: 20px var(--mono); color: var(--gold); word-break: break-all; }
pre.mcode { margin-top: 10px; }
/* code that wraps instead of scrolling sideways (narrow columns) */
pre.wrap, pre.mcode { white-space: pre-wrap; overflow-wrap: anywhere; }
pre.stepper .ln { display: block; padding: 0 6px; margin: 0 -6px; border-radius: 3px; }
pre.stepper .ln.ran { background: #ffffff08; }
pre.stepper .ln.on { background: color-mix(in srgb, var(--accent) 28%, transparent); box-shadow: inset 3px 0 0 var(--accent); }

/* the bag (bag demo), like the game's inventory */
.bagview { max-width: 620px; margin-top: 8px; }
.bagview .slots, .bagview .qslots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.bagview .qslots { grid-template-columns: repeat(6, 1fr); max-width: 50%; }
.bagview .bl { margin: 8px 0 4px; }
.bagview .slot { position: relative; aspect-ratio: 1; background: #181e28; border: 1px solid #2f3846; border-radius: 4px; }
.bagview .slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.bagview .slot span { position: absolute; right: 3px; bottom: 1px; font: 11px var(--mono); color: #fff; text-shadow: 0 1px 2px #000; }
.bagview .slot.gone img { opacity: .3; }

/* weapon card (loot demo), like the inventory's detail panel */
.weapon { display: grid; grid-template-columns: 110px 1fr; gap: 12px; background: #181e28; border: 1px solid var(--rarity, var(--line)); border-radius: 6px; padding: 10px;
  background-image: radial-gradient(circle at 55px 55px, color-mix(in srgb, var(--rarity) 25%, transparent), transparent 70px); }
.weapon img { width: 110px; height: 110px; object-fit: contain; }
.weapon h4 { margin: 0; color: var(--rarity); font-size: 17px; }
.weapon .base { color: #8f9aaa; font: 12px var(--mono); }
.weapon .stats { color: #b8c2d0; font: 12px/1.6 var(--mono); margin: 6px 0 0; white-space: pre-line; }
.weapon ul { list-style: none; padding: 0; margin: 4px 0 0; color: #8fb6ff; font: 12px var(--mono); }
/* 100 chests at once: every weapon, its card on hover (loot demo) */
.loots { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 5px; margin: 10px 0; }
.loots .it { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid var(--rarity); border-radius: 5px; cursor: pointer;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rarity) 35%, transparent), #181e28 72%); }
.loots .it img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; }
.loots .it:hover, .loots .it:focus-visible { background-color: #222a36; box-shadow: 0 0 0 1px var(--rarity), 0 0 12px color-mix(in srgb, var(--rarity) 60%, transparent); }
.loots .it.on { box-shadow: 0 0 0 2px var(--gold); }
.weapontip { position: fixed; z-index: 30; width: min(440px, 90vw); pointer-events: none; box-shadow: 0 10px 40px #000c; border-radius: 6px; background: #12161e; }

/* ---- the map (index.html) --------------------------------------------------------------- */
.hero { max-width: 1120px; margin: 0 auto 22px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: center; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }
.hero h1 { font-size: 34px; }
.map { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; counter-reset: room; }
.room { --c: var(--accent); position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 4px 12px; align-items: start; text-decoration: none; color: var(--text);
  padding: 14px; border-radius: 8px; border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--sky1) 70%, #12161e), #12161ef0 60%); }
.room:hover { border-color: var(--c); transform: translateY(-2px); transition: transform .15s; color: var(--text); }
.room img { width: 58px; height: 58px; object-fit: contain; grid-row: span 3; filter: drop-shadow(0 4px 8px #000a); }
.room .d { font: 11px var(--mono); color: var(--c); letter-spacing: 1px; }
.room h3 { margin: 0; color: var(--title); font-size: 16px; }
.room p { margin: 0; font-size: 14px; color: var(--muted); }
.room .seen { position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-radius: 2px; background: var(--portal); box-shadow: 0 0 8px var(--portal); }
.room.visited .seen { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.page { max-width: 1120px; margin: 0 auto; }

/* glossary */
.words { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.words div { background: #181e28; border: 1px solid #2f3846; border-radius: 6px; padding: 10px 12px; }
.words div:target { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.words dt { font: 15px var(--mono); color: var(--title); letter-spacing: 1px; }
.words dd { margin: 4px 0 0; font-size: 15px; }
.words dd .more { display: block; margin-top: 4px; font-size: 13px; }

@media print {
  body { background: #fff; color: #000; } .bar, .qbar, #stars { display: none; }
  .slide { display: block !important; box-shadow: none; break-inside: avoid; background: #fff; border-color: #aaa; }
  h1, h2, b { color: #000; }
}