:root { --bg: #0c0a0b; --panel: rgba(18, 14, 14, 0.92); --edge: #5a4a32; --gold: #c9a14a; --red: #b0202a; --text: #e2d8c4; --dim: #8f8574; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 14px/1.35 "Segoe UI", system-ui, sans-serif; user-select: none; }
canvas#view, canvas#overlay { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
canvas#overlay { pointer-events: none; }
.hidden { display: none !important; }
button { background: linear-gradient(#3a2f22, #241c14); color: var(--text); border: 1px solid var(--edge); padding: 6px 12px; font: inherit; cursor: pointer; letter-spacing: 0.05em; }
button:hover:not(:disabled) { border-color: var(--gold); color: #fff; }
button:disabled { opacity: 0.4; cursor: default; }
button.big { font-size: 18px; padding: 10px 28px; border-color: var(--gold); }

/* screens */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(40, 12, 10, 0.75), rgba(0, 0, 0, 0.92)); z-index: 20; }
#menu { background: radial-gradient(ellipse at 50% 30%, rgba(90, 20, 14, 0.55), rgba(5, 3, 3, 0.95)); }
.panel { background: var(--panel); border: 1px solid var(--edge); padding: 24px 30px; max-width: 640px; width: calc(100% - 32px); max-height: calc(100% - 32px); overflow: auto; box-shadow: 0 0 60px #000; }
.panel.wide { max-width: 860px; }
h1 { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0.18em; font-size: 42px; margin: 0; color: var(--gold); text-align: center; text-shadow: 0 2px 0 #000, 0 0 30px rgba(200, 40, 20, 0.4); }
h1.red { color: #e04030; font-size: 32px; }
h2 { font-family: Georgia, serif; letter-spacing: 0.1em; color: var(--gold); font-weight: normal; margin: 18px 0 10px; }
.sub { text-align: center; color: var(--dim); margin: 6px 0; }
.row { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.row.small { font-size: 13px; color: var(--dim); }
select { background: #1c1612; color: var(--text); border: 1px solid var(--edge); }
#chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { #chapters { grid-template-columns: 1fr; } h1 { font-size: 30px; } }
.chap { border: 2px solid #333; padding: 14px; cursor: pointer; background: rgba(0, 0, 0, 0.35); position: relative; }
.chap.on { border-color: var(--gold); box-shadow: 0 0 20px rgba(201, 161, 74, 0.35); }
.chap h3 { margin: 0 0 6px; font-family: Georgia, serif; letter-spacing: 0.06em; }
.chap .sw { display: flex; gap: 4px; margin-bottom: 8px; }
.chap .sw span { width: 26px; height: 14px; border: 1px solid #000; }
.chap p { margin: 4px 0; color: #cfc4ae; font-size: 13px; }
.chap .units { color: var(--dim); font-size: 12px; }
ul { padding-left: 18px; } li { margin: 4px 0; }
table.keys { width: 100%; border-collapse: collapse; font-size: 13px; }
table.keys td { padding: 3px 6px; border-bottom: 1px solid #2a2218; }
table.keys td:first-child { color: var(--gold); white-space: nowrap; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { pointer-events: auto; }
#top { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 14px; align-items: center; padding: 6px 12px; background: linear-gradient(rgba(10, 6, 6, 0.95), rgba(10, 6, 6, 0.7)); border-bottom: 1px solid var(--edge); flex-wrap: wrap; }
.res { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.res i { width: 14px; height: 14px; display: inline-block; transform: rotate(45deg); }
.res.req i { background: #c9a14a; } .res.pow i { background: #4ab8ff; border-radius: 50%; transform: none; } .res.pop i { background: #a8a8a8; } .res.pts i { background: #b0202a; transform: none; clip-path: polygon(0 0, 100% 20%, 0 45%); }
.res small { color: var(--dim); font-weight: normal; }
.sep { flex: 1; }
.clock { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.clock span { font-size: 10px; color: var(--dim); letter-spacing: 0.1em; }
.clock b { font-size: 17px; font-family: Georgia, serif; }
.clock.wave b { color: #ff6a50; }
#powerBtn { display: flex; flex-direction: column; line-height: 1.1; padding: 4px 12px; border-color: var(--gold); }
#powerBtn small { font-size: 10px; color: var(--dim); }
#powerBtn.ready { box-shadow: 0 0 12px rgba(220, 60, 40, 0.6); }
#log { position: absolute; top: 56px; left: 12px; pointer-events: none; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 2px #000; }
#log div { transition: opacity 0.6s; font-size: 13px; }
#log .good { color: #a8e08a; } #log .bad { color: #ff7a6a; } #log .wave { color: #ffb050; font-weight: 600; } #log .power { color: #ff4a3a; font-weight: 700; }
#banner { position: absolute; top: 22%; left: 0; right: 0; text-align: center; font: 34px Georgia, serif; letter-spacing: 0.15em; color: #ff6a50; text-shadow: 0 0 20px #000, 0 2px 0 #000; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
#bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: 8px; background: linear-gradient(rgba(10, 6, 6, 0.6), rgba(10, 6, 6, 0.95)); border-top: 1px solid var(--edge); height: 200px; }
#mini { width: 180px; height: 180px; border: 1px solid var(--edge); background: #120e0c; cursor: crosshair; flex: none; }
#info { flex: 1; min-width: 200px; overflow: auto; }
#cmds { width: 330px; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 58px; gap: 4px; align-content: start; flex: none; }
#cmds button { padding: 3px; font-size: 11px; line-height: 1.15; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; }
#cmds button .k { position: absolute; top: 1px; right: 3px; color: var(--gold); font-size: 10px; }
#cmds button .c { color: var(--dim); font-size: 10px; }
#cmds button .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--gold); }
#info h3 { margin: 0 0 4px; font-family: Georgia, serif; letter-spacing: 0.05em; color: var(--gold); font-weight: normal; }
#info .rank { color: #ffd060; letter-spacing: 2px; }
#info .hp { height: 8px; background: #2a1414; border: 1px solid #000; margin: 4px 0; max-width: 360px; }
#info .hp div { height: 100%; background: linear-gradient(#6ad050, #3a9030); }
#info .xp { height: 4px; background: #222; max-width: 360px; } #info .xp div { height: 100%; background: #ffd060; }
#info p { margin: 3px 0; color: #cfc4ae; font-size: 13px; }
#info .chips { display: flex; flex-wrap: wrap; gap: 4px; }
#info .chip { border: 1px solid var(--edge); padding: 2px 6px; font-size: 12px; cursor: pointer; background: rgba(0, 0, 0, 0.4); }
#info .queue { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
#info .queue span { border: 1px solid var(--edge); padding: 2px 6px; font-size: 11px; cursor: pointer; position: relative; }
#tip { position: fixed; max-width: 280px; background: rgba(10, 8, 6, 0.96); border: 1px solid var(--gold); padding: 8px 10px; font-size: 12px; z-index: 30; pointer-events: none; }
#tip b { color: var(--gold); }
#placeHint { position: fixed; bottom: 214px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); padding: 4px 12px; border: 1px solid var(--edge); }
#overStats { text-align: center; font-size: 16px; margin-top: 14px; }
#overStats b { color: var(--gold); }
@media (max-width: 900px) { #cmds { width: 250px; } #mini { width: 130px; height: 130px; } #bottom { height: 160px; } }