:root { --u: 3px; --ink: #16121a; --stone: #2b2530; --stone2: #3d3440; --stone3: #54484f; --gold: #e2ae47; --gold2: #a06f26; --paper: #efe2c4; --red: #c63a2a; --mute: #a99a8c; }
html, body { margin: 0; height: 100%; background: #0a0810; overflow: hidden; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
#over { pointer-events: none; }
#hud { position: fixed; inset: 0; pointer-events: none; font-family: 'Pixelify Sans', monospace; color: var(--paper); user-select: none; -webkit-font-smoothing: none; }
#hud button { font: inherit; color: inherit; pointer-events: auto; background: none; border: 0; padding: 0; cursor: pointer; }
#boot { position: fixed; inset: 0; background: #0a0810; display: grid; place-content: center; justify-items: center; gap: 10px; font-family: 'Pixelify Sans', monospace; color: var(--paper); transition: opacity .6s; z-index: 50; }
#boot .b-t { font-size: 64px; font-weight: 700; letter-spacing: 1px; color: #ff9a3c; text-shadow: 0 4px 0 #6a1d12; }
#boot .b-s { font-size: 20px; color: var(--mute); }
#boot .b-bar { width: 320px; height: 12px; background: #000; box-shadow: 0 0 0 3px var(--gold2); margin-top: 18px; }
#boot .b-bar i { display: block; height: 100%; width: 0; background: #ff8a3a; }

/* a pixel frame: dark stone with a gold line, hard corners cut by shadows */
.pf { background: var(--stone); box-shadow:
  0 calc(var(--u) * -1) 0 0 var(--ink), 0 var(--u) 0 0 var(--ink), calc(var(--u) * -1) 0 0 0 var(--ink), var(--u) 0 0 0 var(--ink),
  inset 0 var(--u) 0 0 var(--stone3), inset 0 calc(var(--u) * -1) 0 0 #17131b, inset var(--u) 0 0 0 #36303b, inset calc(var(--u) * -1) 0 0 0 #1f1a24; }

#who { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 6); display: flex; align-items: center; gap: calc(var(--u) * 4); }
#who .ph { width: calc(var(--u) * 26); height: calc(var(--u) * 26); position: relative; overflow: hidden; background: #41222a; }
#who .ph canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#who .bars { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }
#who .nm { font-size: calc(var(--u) * 6.4); line-height: 1; font-weight: 600; color: var(--paper); text-shadow: var(--u) var(--u) 0 #000; display: flex; gap: calc(var(--u) * 3); align-items: baseline; }
#who .nm small { font-size: calc(var(--u) * 4.6); color: var(--gold); font-weight: 500; }
.bar { position: relative; width: calc(var(--u) * 78); height: calc(var(--u) * 6); background: #000; box-shadow: 0 0 0 var(--u) #000; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; }
.bar.hp > i { background: #4dbb3f; box-shadow: inset 0 var(--u) 0 0 #8fe06f; }
.bar.mp > i { background: #2f7fd6; box-shadow: inset 0 var(--u) 0 0 #73b6f2; }
.bar .tick { position: absolute; top: 0; bottom: 0; width: var(--u); background: #000; }
.bar .tick.big { background: #000; width: calc(var(--u) * 1); }
.bar .tv { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--u) * 4.6); line-height: 1; text-shadow: var(--u) var(--u) 0 #000; }

#bar { position: absolute; left: 50%; bottom: calc(var(--u) * 6); transform: translateX(-50%); display: flex; gap: calc(var(--u) * 3); align-items: flex-end; padding: calc(var(--u) * 3); }
.sl { position: relative; width: calc(var(--u) * 32); height: calc(var(--u) * 32); pointer-events: auto; cursor: pointer; }
.sl .ic { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.sl .cd { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(8, 5, 12, .72); }
.sl .t { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--u) * 8); font-weight: 600; text-shadow: var(--u) var(--u) 0 #000; }
.sl .k { position: absolute; left: calc(var(--u) * -1); top: calc(var(--u) * -2); min-width: calc(var(--u) * 9); text-align: center; background: var(--ink); color: var(--gold); font-size: calc(var(--u) * 5); line-height: calc(var(--u) * 7); padding: 0 var(--u); }
.sl.big { width: calc(var(--u) * 38); height: calc(var(--u) * 38); }
.sl::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 var(--u) var(--gold2); pointer-events: none; }
.sl:hover::after, .sl.on::after { box-shadow: inset 0 0 0 var(--u) var(--gold); }
.sl.fire::after { box-shadow: inset 0 0 0 calc(var(--u) * 2) #ffd27a; }
.sl.pass { width: calc(var(--u) * 24); height: calc(var(--u) * 24); cursor: help; }

#map { position: absolute; right: calc(var(--u) * 6); top: calc(var(--u) * 6); padding: calc(var(--u) * 2); }
#map .mm { width: calc(var(--u) * 48); height: calc(var(--u) * 48); position: relative; overflow: hidden; background: #1a1c2c; }
#map canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#map .rn { text-align: center; font-size: calc(var(--u) * 5); line-height: 1.5; color: var(--paper); margin-top: var(--u); }
#tools { position: absolute; right: calc(var(--u) * 6); top: calc(var(--u) * 72); display: none; grid-template-columns: repeat(4, calc(var(--u) * 15)); gap: var(--u); padding: calc(var(--u) * 2); }
#tools button { height: calc(var(--u) * 15); display: grid; place-items: center; background: var(--stone2); }
#tools button:hover, #tools button.on { background: #6a4a2c; }
#tools svg { width: calc(var(--u) * 11); height: calc(var(--u) * 11); shape-rendering: crispEdges; fill: var(--paper); }

#menu { position: absolute; left: calc(var(--u) * 6); bottom: calc(var(--u) * 6); display: flex; gap: calc(var(--u) * 2); }
@media (max-width: 1250px) { #menu { flex-direction: column; align-items: flex-start; } }
#menu button { padding: calc(var(--u) * 2) calc(var(--u) * 5); font-size: calc(var(--u) * 5.6); }
#menu button:hover { color: var(--gold); }
#menu kbd { font: inherit; color: var(--gold); margin-right: calc(var(--u) * 2); }

#tip { position: absolute; display: none; width: calc(var(--u) * 92); padding: calc(var(--u) * 4); font-size: calc(var(--u) * 5.2); line-height: 1.26; z-index: 30; }
#tip b { display: block; font-size: calc(var(--u) * 6.4); font-weight: 600; color: var(--gold); margin-bottom: var(--u); }
#tip .m { color: var(--mute); margin-top: calc(var(--u) * 2); }

#region { position: absolute; left: 50%; top: 15%; transform: translateX(-50%); text-align: center; font-size: calc(var(--u) * 13); font-weight: 600; color: #ffe6b0; text-shadow: var(--u) var(--u) 0 #2a1408, calc(var(--u) * -1) var(--u) 0 #2a1408; opacity: 0; transition: opacity .5s; white-space: nowrap; }
#region small { display: block; font-size: calc(var(--u) * 5.6); font-weight: 500; color: var(--gold); }

#cast { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); font-size: calc(var(--u) * 7); color: #ffe6b0; text-shadow: var(--u) var(--u) 0 #000; opacity: 0; transition: opacity .2s; white-space: nowrap; }

#boss { position: absolute; left: 50%; top: calc(var(--u) * 6); transform: translateX(-50%); width: calc(var(--u) * 200); display: none; text-align: center; font-size: calc(var(--u) * 7); text-shadow: var(--u) var(--u) 0 #000; }
#boss .bar { width: 100%; height: calc(var(--u) * 7); margin-top: var(--u); }
#boss .bar > i { background: #c63a2a; box-shadow: inset 0 var(--u) 0 0 #f0705a; }

.win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: calc(var(--u) * 6); display: none; pointer-events: auto; max-height: 92vh; overflow: auto; }
.win h2 { margin: 0 0 calc(var(--u) * 4); font-size: calc(var(--u) * 9); font-weight: 600; color: var(--gold); text-align: center; }
.win .x { position: absolute; right: calc(var(--u) * 4); top: calc(var(--u) * 3); font-size: calc(var(--u) * 8); color: var(--mute); }
.win .x:hover { color: #fff; }

#tree .rows { display: grid; gap: calc(var(--u) * 5); }
#tree .row { display: grid; grid-template-columns: calc(var(--u) * 18) repeat(7, calc(var(--u) * 26)); gap: calc(var(--u) * 3); align-items: center; }
#tree .key { font-size: calc(var(--u) * 12); font-weight: 600; color: var(--gold); text-align: center; line-height: 1; }
#tree .key small { display: block; font-size: calc(var(--u) * 4.2); color: var(--mute); font-weight: 400; }
#tree .node { position: relative; width: calc(var(--u) * 26); height: calc(var(--u) * 26); cursor: pointer; }
#tree .node img { width: 100%; height: 100%; display: block; image-rendering: pixelated; opacity: .7; }
#tree .node:hover img { opacity: 1; }
#tree .node::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 var(--u) #5a4a40; }
#tree .node:hover::after { box-shadow: inset 0 0 0 var(--u) var(--gold2); }
#tree .node.sel img { opacity: 1; }
#tree .node.sel::after { box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--gold); }
#tree .node .tier { position: absolute; right: var(--u); bottom: 0; font-size: calc(var(--u) * 4.4); text-shadow: var(--u) var(--u) 0 #000; }
#tree .hint { margin-top: calc(var(--u) * 5); text-align: center; color: var(--mute); font-size: calc(var(--u) * 5); }

#anims .list { display: grid; grid-template-columns: repeat(4, calc(var(--u) * 62)); gap: calc(var(--u) * 2); }
#anims button { text-align: left; padding: calc(var(--u) * 2) calc(var(--u) * 4); font-size: calc(var(--u) * 5.6); background: var(--stone2); }
#anims button:hover { background: #6a4a2c; }

#keys .grid { display: grid; grid-template-columns: auto auto; gap: calc(var(--u) * 1.5) calc(var(--u) * 8); font-size: calc(var(--u) * 5.6); }
#keys kbd { font: inherit; color: var(--gold); text-align: right; }
#keys .more { display: flex; justify-content: center; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 5); }
#keys .more button { padding: calc(var(--u) * 2) calc(var(--u) * 5); font-size: calc(var(--u) * 5.6); background: var(--stone2); }
#keys .more button:hover { background: #6a4a2c; }

#caption { position: absolute; left: 50%; bottom: 23%; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity .25s; white-space: nowrap; }
#caption .a { font-size: calc(var(--u) * 11); font-weight: 600; color: #ffe6b0; text-shadow: var(--u) var(--u) 0 #2a1408, calc(var(--u) * -1) var(--u) 0 #2a1408; }
#caption .b { font-size: calc(var(--u) * 6); color: var(--paper); text-shadow: var(--u) var(--u) 0 #000; }

.hide-hud #who, .hide-hud #bar, .hide-hud #map, .hide-hud #tools, .hide-hud #menu { display: none; }
#over.hide { display: none; }