:root {
  --ink: #e8dfcc;
  --ink-dim: #a99f8c;
  --gold: #d8b56a;
  --blood: #8e1a12;
  --hp: #9b2219;
  --hp-hi: #c4382b;
  --stamina: #3d7a3a;
  --stamina-hi: #5ea255;
  --lag: #d9c58a;
  --panel: rgba(12, 10, 9, 0.82);
  --line: rgba(216, 181, 106, 0.35);
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --title: 'Cinzel', 'Trajan Pro', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0c10; color: var(--ink); font-family: var(--serif); }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#ui { position: fixed; inset: 0; pointer-events: none; user-select: none; }
#ui .interactive { pointer-events: auto; }
.hidden { display: none !important; }

/* ------------------------------------------------------------------ HUD */
.hud { position: absolute; inset: 0; }
.hud .bars { position: absolute; left: 34px; top: 30px; display: flex; flex-direction: column; gap: 7px; }
.bar { position: relative; height: 11px; background: rgba(8, 7, 6, 0.75); border: 1px solid rgba(205, 180, 120, 0.45); box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.5); }
.bar .fill, .bar .lag { position: absolute; left: 0; top: 0; bottom: 0; }
.bar .lag { background: var(--lag); opacity: 0.85; }
.bar.hp .fill { background: linear-gradient(180deg, var(--hp-hi), var(--hp) 60%, #5e130d); }
.bar.st .fill { background: linear-gradient(180deg, var(--stamina-hi), var(--stamina) 60%, #234a21); }
.bar.st { height: 8px; }
.hud .flask { position: absolute; left: 34px; bottom: 34px; width: 64px; height: 64px; background: rgba(10, 9, 8, 0.7); border: 1px solid var(--line); display: grid; place-items: center; }
.hud .flask img { width: 44px; height: 44px; image-rendering: pixelated; }
.hud .flask span { position: absolute; right: 5px; bottom: 1px; font-size: 20px; font-family: var(--serif); text-shadow: 0 1px 3px #000; }
.hud .flask.none img { filter: grayscale(1) brightness(0.5); }
.hud .flask.empty { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.hud .boss { position: absolute; left: 50%; bottom: 64px; width: min(760px, 70vw); transform: translateX(-50%); display: none; }
.hud .boss.on { display: block; }
.hud .boss .name { font-family: var(--serif); font-size: 21px; letter-spacing: 0.02em; margin-bottom: 4px; text-shadow: 0 1px 4px #000; }
.hud .boss .dmg { position: absolute; right: 0; top: 2px; font-size: 18px; color: var(--ink); text-shadow: 0 1px 4px #000; }
.hud .boss .bar { width: 100%; height: 9px; }
.hud .reticle { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, rgba(255,255,255,0.35) 32% 55%, transparent 58%); box-shadow: 0 0 8px rgba(255,255,255,0.6); display: none; }
.hud .toast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-family: var(--title); font-size: 22px; letter-spacing: 0.2em; color: var(--gold); opacity: 0; text-shadow: 0 2px 10px #000; }
.hud .toast.show { animation: toast 1.4s ease-out; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 8px); } 15% { opacity: 1; transform: translate(-50%, 0); } 70% { opacity: 1; } 100% { opacity: 0; } }

/* ------------------------------------------------------------------ screens */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(ellipse at center, rgba(8,8,10,0.55), rgba(5,5,7,0.92)); padding: 16px; overflow: auto; }
.screen h1 { font-family: var(--title); font-weight: 700; font-size: clamp(44px, 9vw, 104px); letter-spacing: 0.14em; margin: 0; color: var(--ink); text-shadow: 0 4px 30px rgba(0,0,0,0.9), 0 0 40px rgba(216,181,106,0.15); }
.screen h2 { font-family: var(--title); font-weight: 500; font-size: 40px; letter-spacing: 0.2em; margin: 0 0 8px; }
.screen .sub { font-style: italic; color: var(--ink-dim); font-size: 20px; margin-top: -6px; }
.screen .note { color: var(--ink-dim); font-size: 16px; font-style: italic; }
.screen button, .prompt button { font-family: var(--title); font-size: 18px; letter-spacing: 0.12em; color: var(--ink); background: rgba(20, 17, 14, 0.85); border: 1px solid var(--line); padding: 12px 26px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.screen button:hover, .prompt button:hover { border-color: var(--gold); background: rgba(48, 38, 24, 0.9); }
.screen button.go { font-size: 20px; padding: 14px 36px; margin: 8px 0 10px; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { border-color: var(--gold); } }
.screen .buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
table.controls { border-collapse: collapse; font-size: 16px; background: rgba(10,9,8,0.55); border: 1px solid rgba(216,181,106,0.18); }
table.controls td { padding: 4px 14px; border-bottom: 1px solid rgba(216,181,106,0.08); }
table.controls td.what { color: var(--ink); }
table.controls td.kb { color: var(--gold); font-family: var(--serif); }
table.controls td.pad { color: var(--ink-dim); }

.banner { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 150px; display: grid; place-items: center; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78) 25%, rgba(0,0,0,0.78) 75%, transparent); opacity: 0; }
.banner .text { font-family: var(--title); font-weight: 500; font-size: clamp(40px, 7vw, 86px); letter-spacing: 0.08em; }
.banner.death .text { color: #a31b12; text-shadow: 0 0 24px rgba(160, 20, 10, 0.45); }
.banner.victory .text { color: var(--gold); text-shadow: 0 0 24px rgba(216, 181, 106, 0.45); }
.banner.show { animation: banner 3.6s ease-out forwards; }
.banner.victory.show { animation: banner-stay 2.4s ease-out forwards; }
.banner.show .text { animation: grow 4s ease-out forwards; }
@keyframes banner { 0% { opacity: 0; } 18% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes banner-stay { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; } }
@keyframes grow { from { transform: scale(0.96); } to { transform: scale(1.04); } }
.prompt { position: absolute; left: 50%; top: calc(50% + 110px); transform: translateX(-50%); }

pre.debug { position: absolute; right: 12px; top: 12px; margin: 0; padding: 8px 10px; font: 12px/1.4 ui-monospace, Consolas, monospace; color: #cfe; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); white-space: pre; }

@media (max-width: 700px) {
  .hud .bars { left: 16px; top: 16px; }
  .hud .flask { left: 16px; bottom: 16px; }
  table.controls { font-size: 13px; }
  table.controls td { padding: 3px 8px; }
}