/* Heliolabe — UI styles. Warm parchment & bronze, high-contrast text. */
:root {
  --gold: #e8c27a; --gold2: #d9a640; --ink: #1b140e; --panel: rgba(24, 17, 11, 0.86); --cream: #f6ecd6; --red: #e0543a;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0806; color: var(--cream); font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
body { touch-action: none; user-select: none; -webkit-user-select: none; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; outline: none; }
.hidden { display: none !important; }
kbd { display: inline-block; padding: 1px 6px; border: 1px solid rgba(232, 194, 122, 0.7); border-bottom-width: 2px; border-radius: 4px; font: 600 0.82em ui-monospace, Menlo, monospace; color: var(--gold); background: rgba(0, 0, 0, 0.35); }

#vignette { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(120, 10, 0, 0.75) 100%); z-index: 2; }
#letterbox .bar { position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 3; transition: height 0.5s ease; pointer-events: none; }
#letterbox .bar.top { top: 0; } #letterbox .bar.bottom { bottom: 0; }
#letterbox.on .bar { height: 11vh; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 40; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
#hud-tl { position: absolute; top: calc(8px + var(--sat)); left: calc(8px + var(--sal)); max-width: min(46vw, 440px); padding: 6px 10px 8px; border-radius: 6px; background: radial-gradient(ellipse at 20% 40%, rgba(10,6,3,0.42), rgba(10,6,3,0) 75%); }
#chapter-tag { font: 600 12px/1 Georgia, "Palatino Linotype", serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); opacity: 0.9; margin-bottom: 6px; }
#objective { font-size: 15px; line-height: 1.3; background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0)); padding: 6px 12px 6px 8px; border-left: 3px solid var(--gold2); }
#objective.pulse { animation: objPulse 1.4s ease; }
@keyframes objPulse { 0% { background-color: rgba(232,194,122,0.45); } 100% { background-color: rgba(0,0,0,0); } }
.obj-dia { color: var(--gold); }
#health { margin-top: 8px; width: 180px; height: 7px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; overflow: hidden; }
#health-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #d9a640, #f6e0a0); transition: width 0.15s; }
#health.low #health-fill { background: linear-gradient(90deg, #b3261e, #ff7a5a); }
#hud-tr { position: absolute; top: calc(12px + var(--sat)); right: calc(14px + var(--sar)); display: flex; gap: 8px; pointer-events: auto; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(232,194,122,0.6); background: rgba(20,14,9,0.7); color: var(--cream); font-size: 16px; cursor: pointer; }
.icon-btn:focus-visible { outline: 2px solid var(--gold); }
#hud-br { position: absolute; right: calc(14px + var(--sar)); bottom: calc(14px + var(--sab)); text-align: right; padding: 8px 10px; border-radius: 6px; background: radial-gradient(ellipse at 70% 60%, rgba(10,6,3,0.45), rgba(10,6,3,0) 75%); }
#ammo { font: 700 34px/1 Georgia, serif; }
#ammo .sep { opacity: 0.5; margin: 0 4px; font-size: 22px; }
#ammo-res { font-size: 20px; opacity: 0.85; }
#ammo.empty #ammo-mag { color: var(--red); }
.gun-name { font: 600 10px/1.4 sans-serif; letter-spacing: 0.2em; color: var(--gold); opacity: 0.8; }
#reload-ind { font: 700 12px sans-serif; letter-spacing: 0.15em; color: var(--gold); margin-top: 4px; }
#relic-wrap { font-size: 14px; color: var(--gold); margin-bottom: 8px; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair i { position: absolute; background: rgba(255,248,230,0.92); box-shadow: 0 0 2px #000; transition: all 0.12s; }
#crosshair i:nth-child(1) { width: 2px; height: 8px; left: -1px; top: -18px; }
#crosshair i:nth-child(2) { width: 2px; height: 8px; left: -1px; top: 10px; }
#crosshair i:nth-child(3) { width: 8px; height: 2px; left: -18px; top: -1px; }
#crosshair i:nth-child(4) { width: 8px; height: 2px; left: 10px; top: -1px; }
#crosshair b { position: absolute; width: 4px; height: 4px; left: -2px; top: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 2px #000; }
#crosshair.aim i:nth-child(1) { top: -11px; } #crosshair.aim i:nth-child(2) { top: 3px; } #crosshair.aim i:nth-child(3) { left: -11px; } #crosshair.aim i:nth-child(4) { left: 3px; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 0; }
#hitmarker::before, #hitmarker::after { content: ""; position: absolute; left: 12px; top: 0; width: 2px; height: 26px; background: #fff; }
#hitmarker::before { transform: rotate(45deg); } #hitmarker::after { transform: rotate(-45deg); }
#hitmarker.on { opacity: 1; }
#hitmarker.hm-crit::before, #hitmarker.hm-crit::after { background: #ffc040; }
#hitmarker.hm-kill::before, #hitmarker.hm-kill::after { background: #ff4a2a; height: 32px; top: -3px; }
#hitmarker.hm-block::before, #hitmarker.hm-block::after { background: #8ac8ff; height: 14px; top: 6px; }
#dmg-dir { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; opacity: 0; transform: translate(-50%, -50%); }
#dmg-dir .arc { position: absolute; left: 50%; top: 0; width: 70px; height: 18px; margin-left: -35px; border-top: 5px solid rgba(255, 60, 30, 0.9); border-radius: 50% 50% 0 0; }
#cover-ind { position: absolute; left: 50%; bottom: calc(96px + var(--sab)); transform: translateX(-50%); font: 700 12px sans-serif; letter-spacing: 0.2em; color: #bfe3ff; background: rgba(0,20,40,0.5); padding: 4px 10px; border-radius: 3px; }
#prompt { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); background: rgba(15,10,6,0.78); border: 1px solid rgba(232,194,122,0.55); padding: 7px 14px; border-radius: 4px; font-size: 15px; white-space: nowrap; }
#prompt .tbtn { font-style: normal; }
#boss-bar { position: absolute; top: calc(16px + var(--sat)); left: 50%; transform: translateX(-50%); width: min(460px, 44vw); text-align: center; }
#boss-name { font: 700 12px Georgia, serif; letter-spacing: 0.18em; color: #ffb28a; margin-bottom: 4px; }
#boss-bar .track { height: 9px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,160,120,0.6); }
#boss-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #c2381f, #ff9a4a); transition: width 0.2s; }
#escape-timer { position: absolute; top: calc(56px + var(--sat)); left: 50%; transform: translateX(-50%); font: 800 20px Georgia, serif; color: #ffb070; letter-spacing: 0.1em; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.55; } }
#toast { position: absolute; top: 24%; left: 50%; transform: translate(-50%, -10px); max-width: min(560px, 86vw); text-align: center; background: rgba(15,10,6,0.82); border: 1px solid rgba(232,194,122,0.5); padding: 10px 16px; border-radius: 4px; font-size: 14px; line-height: 1.4; opacity: 0; transition: opacity 0.35s, transform 0.35s; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast span { color: #e6d6b6; font-style: italic; }

#subtitles { position: fixed; left: 50%; bottom: calc(12vh + 14px + var(--sab)); transform: translateX(-50%); max-width: min(760px, 88vw); background: rgba(0,0,0,0.62); padding: 8px 14px; border-radius: 4px; font-size: 17px; line-height: 1.35; text-align: center; z-index: 8; pointer-events: none; text-shadow: 0 1px 2px #000; }
#sub-who { font-weight: 800; letter-spacing: 0.1em; margin-right: 8px; font-size: 13px; }
.who-wren { color: #f3c47a; } .who-oskar { color: #8fd0ff; } .who-thorne { color: #ff8e7a; } .who-merc { color: #c0c0c0; }
#chapter-card { position: fixed; left: 0; right: 0; top: 30%; text-align: center; z-index: 9; pointer-events: none; opacity: 0; }
#chapter-card.show { animation: card 4.2s ease forwards; }
@keyframes card { 0% { opacity: 0; letter-spacing: 0.1em; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; letter-spacing: 0.3em; } }
#card-num { font: 600 14px Georgia, serif; letter-spacing: 0.5em; color: var(--gold); text-transform: uppercase; }
#card-title { font: 700 clamp(26px, min(6vw, 9vh), 58px) Georgia, "Palatino Linotype", serif; text-shadow: 0 3px 12px rgba(0,0,0,0.8); }
#card-sub { font: italic 15px Georgia, serif; opacity: 0.85; }
#skip-hint { position: fixed; right: calc(18px + var(--sar)); bottom: calc(3vh + var(--sab)); z-index: 9; background: rgba(0,0,0,0.5); color: var(--cream); border: 1px solid rgba(232,194,122,0.5); padding: 6px 12px; border-radius: 4px; font-size: 13px; cursor: pointer; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(20,12,6,0.35), rgba(8,5,3,0.82)); padding: 16px; overflow: auto; }
#screen-title { background: linear-gradient(180deg, rgba(10,6,3,0.15), rgba(10,6,3,0.72)); }
.panel { background: var(--panel); border: 1px solid rgba(232,194,122,0.45); box-shadow: 0 20px 60px rgba(0,0,0,0.6); padding: 26px 30px; border-radius: 6px; max-width: 460px; width: 100%; text-align: center; max-height: calc(100vh - 32px); overflow: auto; }
.panel.wide { max-width: 900px; }
.title-panel { background: rgba(18,12,7,0.7); max-width: 560px; }
h1 { font: 700 clamp(34px, 8vw, 62px)/1 Georgia, "Palatino Linotype", serif; letter-spacing: 0.1em; margin: 8px 0 4px; color: #f8e6bd; text-shadow: 0 0 24px rgba(232,170,80,0.55), 0 3px 0 #6a4210; }
h2 { font: 700 28px Georgia, serif; margin: 0 0 14px; color: #f8e6bd; } h2.red { color: #ff8e7a; }
h3 { font: 700 14px sans-serif; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin: 14px 0 8px; }
.tagline { font: italic 17px Georgia, serif; color: var(--gold); letter-spacing: 0.08em; }
.blurb { font-size: 14px; line-height: 1.55; color: #e9dcc0; margin: 16px 0; }
.fine { font-size: 12px; opacity: 0.7; margin-top: 14px; }
.logo-sun { width: 74px; height: 74px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, #ffe7a0 0 30%, #d9a640 31% 45%, transparent 46%), repeating-conic-gradient(from 0deg, #e8c27a 0 6deg, transparent 6deg 22.5deg); box-shadow: 0 0 40px rgba(255,190,90,0.5); }
.logo-sun.small { width: 48px; height: 48px; }
.btns { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; align-items: stretch; }
.btns.row { flex-direction: row; justify-content: center; flex-wrap: wrap; }
button { font: 600 15px "Segoe UI", system-ui, sans-serif; }
.btns button { padding: 11px 18px; border-radius: 4px; border: 1px solid rgba(232,194,122,0.55); background: rgba(40,28,16,0.9); color: var(--cream); cursor: pointer; min-height: 44px; }
.btns button:hover, .btns button:focus-visible { background: rgba(90,62,30,0.95); outline: 2px solid var(--gold); outline-offset: 1px; }
.btns button.primary { background: linear-gradient(180deg, #d9a640, #a8741f); color: #1b1208; border-color: #f0cc80; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; }
table.keys { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.keys td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.08); vertical-align: top; }
table.keys td:first-child { white-space: nowrap; color: var(--gold); width: 1%; }
ul.notes { font-size: 13px; line-height: 1.45; padding-left: 18px; margin: 0; }
.settings { display: flex; flex-direction: column; gap: 10px; text-align: left; font-size: 14px; }
.settings label { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.settings label.chk { justify-content: flex-start; }
.settings input[type=range] { width: 50%; accent-color: var(--gold2); }
.settings select { background: #2a1d10; color: var(--cream); border: 1px solid rgba(232,194,122,0.5); padding: 5px; border-radius: 3px; }
.tip { font-size: 13px; color: var(--gold); font-style: italic; }
.epilogue { font: 15px/1.6 Georgia, serif; color: #eadcbc; max-width: 700px; margin: 0 auto 14px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 14px; }
.stats div { background: rgba(0,0,0,0.35); border: 1px solid rgba(232,194,122,0.25); padding: 8px; border-radius: 4px; }
.stats span { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.stats b { font: 700 20px Georgia, serif; color: var(--gold); }
.noscript { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; }

/* ---------- touch controls ---------- */
#touch { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
#look-zone { position: absolute; right: 0; top: 18%; width: 58%; height: 82%; pointer-events: auto; }
#stick-zone { position: absolute; left: 0; bottom: 0; width: 42%; height: 48%; pointer-events: auto; }
#stick-base { position: absolute; left: calc(92px + var(--sal)); top: calc(100% - 100px - var(--sab)); width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; border: 2px solid rgba(232,194,122,0.45); background: rgba(0,0,0,0.22); }
#stick-base.on { border-color: rgba(232,194,122,0.85); }
#stick-knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(232,194,122,0.55); border: 2px solid rgba(255,240,200,0.8); }
.stick-hint { position: absolute; left: calc(70px + var(--sal)); bottom: calc(8px + var(--sab)); font: 700 10px sans-serif; letter-spacing: 0.2em; opacity: 0.5; }
#btn-cluster { position: absolute; right: calc(10px + var(--sar)); bottom: calc(10px + var(--sab)); width: 214px; height: 196px; pointer-events: none; }
.tb { position: absolute; pointer-events: auto; border-radius: 50%; border: 2px solid rgba(232,194,122,0.6); background: rgba(20,14,9,0.55); color: var(--cream); font: 700 10px sans-serif; letter-spacing: 0.06em; width: 54px; height: 54px; padding: 0; touch-action: none; }
.tb.big { width: 74px; height: 74px; font-size: 12px; }
.tb.down { background: rgba(232,194,122,0.6); color: #1b1208; }
.tb.fire { border-color: rgba(255,120,90,0.75); }
#tb-jump { right: 0; bottom: 0; }
#tb-fire { right: 88px; bottom: 30px; }
#tb-aim { right: 150px; bottom: 112px; }
#tb-crouch { right: 0; bottom: 86px; }
#tb-reload { right: 70px; bottom: 116px; }
#tb-use { right: 8px; bottom: 148px; width: 58px; height: 44px; border-radius: 22px; }

body.touch-mode #hud-br { right: calc(14px + var(--sar)); bottom: auto; top: calc(60px + var(--sat)); }
body.touch-mode #ammo { font-size: 24px; }
body.touch-mode #ammo-res { font-size: 15px; }
body.touch-mode #relic-wrap { margin-bottom: 4px; font-size: 12px; }
body.touch-mode #subtitles { bottom: calc(212px + var(--sab)); font-size: 14px; max-width: min(560px, 92vw); }
body.touch-mode #cover-ind { bottom: auto; top: 58%; }
body.touch-mode #prompt { top: 36%; font-size: 14px; }
body.touch-mode #skip-hint { bottom: auto; top: calc(12vh + 8px + var(--sat)); }
body.touch-mode #objective { font-size: 13px; }
body.touch-mode #health { width: 130px; }

@media (max-width: 700px) {
  .cols { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .panel { padding: 18px 16px; }
  #hud-tl { max-width: 58vw; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #stick-zone { width: 38%; height: 70%; }
  #look-zone { top: 22%; }
  body.touch-mode #subtitles { bottom: calc(10px + var(--sab)); max-width: 36vw; font-size: 12.5px; padding: 5px 8px; }
  body.touch-mode #hud-tl { max-width: 40vw; }
  #letterbox.on .bar { height: 7vh; }
  .panel { padding: 14px 18px; }
  h1 { font-size: 40px; }
  .blurb { display: none; }
  #toast { top: 18%; max-width: 50vw; }
}
@media (prefers-reduced-motion: reduce) {
  #chapter-card.show { animation-duration: 4.2s; }
  #escape-timer { animation: none; }
}