:root {
  color-scheme: dark;
  --wood: #3b2414;
  --wood2: #241508;
  --paper: #e9dcb6;
  --paper2: #d9c79a;
  --ink: #2a1d10;
  --brass1: #f0d890;
  --brass2: #b08a3a;
  --brass3: #6a4c14;
  --red: #8a1a10;
  --hud: #f4ecd0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a120a; color: var(--ink); font-family: "IM Fell English", Georgia, serif; }
#gl, #overlay { position: fixed; inset: 0; display: block; }
#overlay { pointer-events: none; }

/* ---------------------------------------------------------------- screens */
.screen { position: fixed; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; padding-block: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: radial-gradient(ellipse at center, rgba(20,12,4,0.25), rgba(20,12,4,0.75)); }
.screen > :first-child { margin-top: auto; }
.screen > :last-child { margin-bottom: auto; }
.screen.replay { background: none; justify-content: flex-end; pointer-events: none; }
.screen.replay > :first-child { margin-top: auto; margin-bottom: 0; }
.screen.replay .vcr { pointer-events: auto; }
.screen[hidden] { display: none; }
.panel { background: linear-gradient(#efe3c0, #dfcd9e); border: 3px solid var(--brass3); outline: 2px solid var(--brass1); outline-offset: -7px; border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 0 60px rgba(120,80,20,0.25); padding: 22px 26px; max-width: min(560px, 100%); width: 100%; }
.panel.wide { max-width: min(1080px, 100%); }
h1, h2 { font-family: "IM Fell English SC", Georgia, serif; margin: 0 0 12px; color: var(--red); letter-spacing: 0.04em; text-align: center; }
h1 { font-size: 34px; border-bottom: 1px solid rgba(90,60,20,0.4); padding-bottom: 6px; }
h3 { margin: 14px 0 4px; font-family: "IM Fell English SC", Georgia, serif; color: #4a2a10; }
p { margin: 6px 0; line-height: 1.35; }
small { display: block; opacity: 0.75; font-size: 0.8em; }
.date { font-style: italic; color: #5a3a1a; }
.note { font-size: 0.9em; color: #6a4a2a; font-style: italic; }
.bad { color: #8a1a10; font-weight: bold; }

.title-block { text-align: center; color: #f3e4b8; text-shadow: 0 3px 0 #000, 0 0 30px rgba(0,0,0,0.9); }
.logo { font-family: "IM Fell English SC", Georgia, serif; font-size: clamp(54px, 12vw, 120px); line-height: 0.9; color: #c4281c; letter-spacing: 0.06em;
  text-shadow: 0 4px 0 #3a0a04, 0 8px 30px rgba(0,0,0,0.8); -webkit-text-stroke: 1px #f0d890; }
.sub { font-style: italic; font-size: clamp(16px, 2.5vw, 22px); margin-top: 6px; }
.foot { color: #e8d8b0; font-size: 13px; text-shadow: 0 1px 2px #000; text-align: center; }
.menu { display: flex; flex-direction: column; gap: 9px; }
.menu.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.menu.grid2 .primary { grid-column: 1 / -1; }
@media (max-width: 600px) { .menu.grid2 { grid-template-columns: 1fr; } }

button { font-family: inherit; cursor: pointer; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.brass { background: linear-gradient(var(--brass1), var(--brass2) 55%, #8a6a24); color: #2a1a06; border: 2px solid var(--brass3); border-radius: 3px; padding: 8px 18px;
  font-size: 18px; font-family: "IM Fell English SC", Georgia, serif; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.4); text-shadow: 0 1px 0 rgba(255,240,200,0.6); }
.brass:hover:not(:disabled) { filter: brightness(1.1); }
.brass:active { transform: translateY(1px); }
.brass.big { font-size: 22px; padding: 11px 18px; }
.brass.primary { background: linear-gradient(#e86a50, #a8281a 55%, #6a1208); color: #fff2d8; text-shadow: 0 1px 0 #3a0a04; border-color: #3a0a04; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }

.opt { display: block; width: 100%; text-align: left; background: rgba(255,250,235,0.55); border: 1px solid rgba(90,60,20,0.35); padding: 7px 10px; margin: 0 0 4px; font-size: 17px; color: var(--ink); border-radius: 2px; }
.opt:hover:not(:disabled) { background: rgba(255,240,200,0.95); }
.opt.sel, .opt.sel:hover:not(:disabled) { background: #8a1a10; color: #fff2d8; border-color: #3a0a04; }
.opt.small { display: inline-block; width: auto; font-size: 14px; padding: 3px 8px; margin: 1px 2px; }
.seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.seg .opt { width: auto; display: inline-block; }
.cols { display: grid; grid-template-columns: minmax(220px, 1fr) 1.4fr; gap: 20px; align-items: start; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .cols, .cols3 { grid-template-columns: 1fr; } }
.list.scroll { max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.desc { min-width: 0; }
canvas#acepv, canvas#pp { width: 100%; height: auto; display: block; margin-top: 8px; }
.mapwrap canvas { width: 100%; height: auto; display: block; border: 2px solid var(--brass3); box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
.brief .plan { white-space: normal; font-family: "VT323", monospace; font-size: 19px; }
table.flight, table.tbl, table.keys { width: 100%; border-collapse: collapse; font-size: 15px; }
table.flight td, .tbl td, .tbl th, .keys td { border-bottom: 1px solid rgba(90,60,20,0.25); padding: 4px 6px; text-align: left; vertical-align: top; }
.keys td:first-child { font-family: "VT323", monospace; font-size: 26px; white-space: nowrap; color: #6a1a10; font-weight: bold; }

.setup-text { font-size: 21px; line-height: 2.0; }
button.inline { background: #f6edd2; border: 1px solid var(--brass3); border-bottom: 3px solid var(--brass2); padding: 0 8px; font-size: 20px; color: #6a1408; border-radius: 3px; font-family: inherit; }
button.inline:hover { background: #fff8e0; }

.realism .toggles, .prefs .toggles { display: flex; flex-direction: column; gap: 4px; }
.tog { text-align: left; background: rgba(255,250,235,0.5); border: 1px solid rgba(90,60,20,0.3); padding: 6px 10px; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.tog .chk { width: 22px; height: 22px; border: 1px solid #6a4c14; background: #fff8e8; color: #b01010; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; }
.presets { margin-bottom: 10px; }
.factor { font-family: "VT323", monospace; font-size: 22px; text-align: center; margin-top: 12px; }

.review .scorebox { text-align: center; background: rgba(40,20,5,0.08); border: 1px solid rgba(90,60,20,0.3); padding: 14px; }
.scorebox .big { font-family: "VT323", monospace; font-size: 48px; color: #3a2008; }
.scorebox .total { color: #8a1a10; font-size: 64px; }
.lbl { font-size: 14px; color: #5a3a1a; }
input { font-family: "VT323", monospace; font-size: 20px; padding: 4px 8px; border: 1px solid var(--brass3); background: #fffaf0; width: 100%; max-width: 320px; }

.record .log { max-height: 60vh; overflow-y: auto; font-size: 14px; background: rgba(255,250,235,0.4); padding: 6px 10px; border: 1px solid rgba(90,60,20,0.25); }
.medals { display: flex; flex-direction: column; gap: 6px; }
.medalrow { display: flex; align-items: center; gap: 10px; }
.medal { width: 34px; height: 44px; flex: none; border-radius: 2px; background: linear-gradient(90deg, #6a1a8a 0 33%, #f0f0f0 33% 66%, #6a1a8a 66%); position: relative; }
.medal::after { content: ''; position: absolute; left: 7px; bottom: -14px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(#f8e8a0, #a8842c); border: 1px solid #6a4c14; }
.medal-mc, .medal-mcbar { background: linear-gradient(90deg, #f0f0f0 0 33%, #6a2a8a 33% 66%, #f0f0f0 66%); }
.medal-dso, .medal-dsobar { background: linear-gradient(90deg, #1d3e8a 0 20%, #b8231b 20% 80%, #1d3e8a 80%); }
.medal-dfc { background: repeating-linear-gradient(135deg, #6a2a8a 0 6px, #f0f0f0 6px 12px); }
.medal-vc { background: #8a1a2a; }
.medal-vc::after, .medal-ek1::after, .medal-ek2::after, .medal-plm::after { border-radius: 2px; }
.medal-ek2 { background: linear-gradient(90deg, #111 0 20%, #f0f0f0 20% 80%, #111 80%); }
.medal-ek1 { background: none; }
.medal-ek1::after, .medal-ek2::after { background: #111; border: 2px solid #ddd; clip-path: polygon(35% 0, 65% 0, 60% 40%, 100% 35%, 100% 65%, 60% 60%, 65% 100%, 35% 100%, 40% 60%, 0 65%, 0 35%, 40% 40%); }
.medal-hoh { background: linear-gradient(90deg, #f0f0f0 0 20%, #111 20% 30%, #f0f0f0 30% 70%, #111 70% 80%, #f0f0f0 80%); }
.medal-plm { background: linear-gradient(90deg, #111 0 15%, #f0f0f0 15% 30%, #111 30% 70%, #f0f0f0 70% 85%, #111 85%); }
.medal-plm::after { background: #2a5ab0; border: 2px solid #e8c060; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.medal-rae { background: linear-gradient(90deg, #f0f0f0 0 30%, #c8a020 30% 70%, #f0f0f0 70%); }
.medal-rae::after { background: radial-gradient(#e83020, #8a1010); }
.dialog .medal { margin: 0 auto 18px; transform: scale(1.6); }

.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sw { width: 34px; height: 34px; border: 2px solid #3a2a10; border-radius: 3px; }

/* ---------------------------------------------------------------- modal */
#modal { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(10,6,2,0.55); padding: 16px; }
#modal[hidden] { display: none; }
.dialog { max-width: min(520px, 100%); max-height: 90vh; overflow-y: auto; }
.dialog .body { font-size: 18px; }
.chooser .opts { max-height: 58vh; overflow-y: auto; }
.event.promotion h2, .event.medal h2 { color: #6a4c14; }
.event.death h2 { color: #000; }

/* ---------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-family: "VT323", monospace; color: var(--hud); text-shadow: 0 1px 2px #000, 0 0 6px #000; }
#hud[hidden] { display: none; }
#msgs { position: absolute; top: calc(50px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: min(820px, 92vw); text-align: center; font-size: 23px; display: flex; flex-direction: column; gap: 2px; }
.msg { transition: opacity 1.2s; }
.msg.fade { opacity: 0; }
.msg.good { color: #b8f0a0; } .msg.bad { color: #ff9a80; } .msg.warn { color: #ffd870; }
#status { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -260%); font-size: 26px; color: #ffe8a0; letter-spacing: 0.1em; }
#sector { position: absolute; left: calc(14px + env(safe-area-inset-left, 0px)); bottom: calc(25vh + 30px); font-size: 19px; opacity: 0.9; }
#viewname { position: absolute; right: calc(16px + env(safe-area-inset-right, 0px)); top: calc(14px + env(safe-area-inset-top, 0px)); font-size: 20px; opacity: 0; transition: opacity 0.6s; }
#minimap { position: absolute; right: calc(14px + env(safe-area-inset-right, 0px)); top: calc(44px + env(safe-area-inset-top, 0px)); width: min(220px, 30vw); height: auto; aspect-ratio: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6)); }
#minimap[hidden] { display: none; }
#mapcv { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 3px solid var(--brass3); box-shadow: 0 10px 40px #000; }
#pause { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); background: rgba(30,18,6,0.85); border: 2px solid var(--brass2); padding: 18px 30px; text-align: center; font-size: 22px; pointer-events: auto; max-width: 90vw; }
#pause h2 { color: #ffd870; }

.vcr { max-width: min(1100px, 100%); padding: 10px 14px; background: linear-gradient(rgba(239,227,192,0.94), rgba(223,205,158,0.94)); }
.vcr.hidden { display: none; }
.vcr .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.vcr .opt { width: auto; display: inline-block; margin: 0; }
.vcr input[type=range] { flex: 1; min-width: 160px; max-width: none; padding: 0; }
.vcr .hint { font-size: 13px; opacity: 0.7; flex: 1; }
.main .menu.panel { max-width: 380px; }

/* ---------------------------------------------------------------- touch controls */
#touch { position: fixed; inset: 0; z-index: 12; pointer-events: none; font-family: "VT323", monospace; }
#touch[hidden] { display: none; }
#touch .tstick { position: absolute; left: calc(18px + env(safe-area-inset-left, 0px)); bottom: calc(25vh + 16px); width: 150px; height: 150px; border-radius: 50%; background: rgba(40,25,10,0.35); border: 2px solid rgba(240,216,144,0.6); pointer-events: auto; touch-action: none; }
#touch .tknob { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; background: radial-gradient(#f0d890, #8a6a24); }
#touch .tright { position: absolute; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(25vh + 16px); display: flex; align-items: flex-end; gap: 14px; pointer-events: auto; }
#touch .tbtn.tfire, #touch .tfire { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(#e86a50, #8a1a10); color: #fff2d8; font-size: 22px; border: 2px solid #3a0a04; }
#touch .tthr { writing-mode: vertical-lr; direction: rtl; height: 150px; width: 34px; }
#touch .ttop { position: absolute; top: calc(56px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; pointer-events: auto; max-width: 96vw; }
#touch .tbtn { background: rgba(40,25,10,0.55); color: #f4ecd0; border: 1px solid rgba(240,216,144,0.6); padding: 6px 10px; font-size: 16px; font-family: inherit; border-radius: 3px; touch-action: manipulation; }

@media (pointer: coarse) { #sector { left: 180px; } }
@media (max-height: 500px) { .panel { padding: 14px 16px; } h1 { font-size: 26px; } .setup-text { font-size: 18px; line-height: 1.8; } }

/* ---------------------------------------------------------------- in-flight buttons and panels */
#hudbtns { position: absolute; left: calc(14px + env(safe-area-inset-left, 0px)); top: calc(14px + env(safe-area-inset-top, 0px)); display: flex; gap: 8px; pointer-events: auto; }
.hbtn { font-family: "VT323", monospace; font-size: 18px; color: #f4ecd0; background: rgba(30,18,6,0.72); border: 1px solid rgba(240,216,144,0.7); border-radius: 3px; padding: 3px 10px; cursor: pointer; text-shadow: none; }
.hbtn:hover { background: rgba(70,44,14,0.9); }
.hbtn:focus-visible { outline: 2px solid #ffd870; outline-offset: 2px; }
.hbtn.big { font-size: 22px; padding: 6px 16px; margin: 4px 6px; }
.hbtn kbd, #controlsPanel kbd { font-family: inherit; background: rgba(240,216,144,0.18); border: 1px solid rgba(240,216,144,0.5); border-radius: 2px; padding: 0 5px; margin-left: 4px; }
#pause .pbtns { margin-top: 10px; }
#controlsPanel { position: absolute; inset: 5vh max(16px, 4vw); overflow-y: auto; pointer-events: auto; background: rgba(28,17,6,0.95); border: 2px solid var(--brass2); padding: 16px 22px; font-size: 22px; }
#controlsPanel .keys { font-size: 22px; }
#controlsPanel .keys td:first-child { font-size: 26px; }
#controlsPanel[hidden], #focusnote[hidden] { display: none; }
#controlsPanel h2 { color: #ffd870; }
#controlsPanel h3 { color: #f0d890; font-family: "IM Fell English SC", Georgia, serif; }
#controlsPanel .keys td { border-bottom: 1px solid rgba(240,216,144,0.18); color: #f4ecd0; }
#controlsPanel .keys td:first-child { color: #ffd870; }
#controlsPanel .close { text-align: center; margin-top: 12px; }
#focusnote { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); pointer-events: auto; background: rgba(30,18,6,0.9); border: 2px solid var(--brass2); padding: 16px 26px; text-align: center; font-size: 22px; }
.dialog.wide-dialog { max-width: min(1000px, 100%); }
.ctl-dialog { font-size: 19px; }
.help .keys, .ctl-dialog .keys { font-size: 19px; }
.help .keys td, .ctl-dialog .keys td { padding: 6px 8px; }
.help h3, .ctl-dialog h3 { font-size: 24px; }
.credits p { max-width: 75ch; }
.credits a { color: #6a1408; }
.sel { user-select: all; font-family: "VT323", monospace; font-size: 20px; }