@font-face { font-family: 'Oswald'; font-weight: 500; src: url(fonts/oswald-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2010-2212; }
@font-face { font-family: 'Oswald'; font-weight: 500; src: url(fonts/oswald-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0400-04FF; }
@font-face { font-family: 'Oswald'; font-weight: 700; src: url(fonts/oswald-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2010-2212; }
@font-face { font-family: 'Oswald'; font-weight: 700; src: url(fonts/oswald-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0400-04FF; }
@font-face { font-family: 'PT Mono'; font-weight: 400; src: url(fonts/pt-mono-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2010-2212; }
@font-face { font-family: 'PT Mono'; font-weight: 400; src: url(fonts/pt-mono-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0400-04FF; }
@font-face { font-family: 'PT Sans Narrow'; font-weight: 400; src: url(fonts/pt-sans-narrow-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2010-2212; }
@font-face { font-family: 'PT Sans Narrow'; font-weight: 400; src: url(fonts/pt-sans-narrow-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0400-04FF; }
@font-face { font-family: 'PT Sans Narrow'; font-weight: 700; src: url(fonts/pt-sans-narrow-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2010-2212; }
@font-face { font-family: 'PT Sans Narrow'; font-weight: 700; src: url(fonts/pt-sans-narrow-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0400-04FF; }

:root {
  --ink: #0d0d0a;
  --paper: #e8dcc0;
  --khaki-hi: #5b5638;
  --khaki-mid: #3e3a26;
  --khaki-lo: #2a2719;
  --plate: #f3d335;
  --hud: #9fe07a;
  --hud-bg: rgba(10, 12, 8, .82);
  --brass: #d9a441;
  --copper: #b87333;
  --bg: #1b1a14;
  --touch: 48px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--paper); overflow: hidden;
  font-family: 'PT Sans Narrow', sans-serif; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#app { position: fixed; inset: 0; display: grid; place-items: center; }

/* The stage keeps 16:10 inside any screen; 4:3 iPads get bands above and below. */
.stage { position: relative; width: min(100vw, 160vh); aspect-ratio: 16 / 10; max-height: 100vh; background: var(--bg); }
.panel { position: absolute; inset: 1.5%; border: 4px solid var(--ink); box-shadow: 0 0 0 3px var(--paper); overflow: hidden;
  background: linear-gradient(160deg, var(--khaki-hi) 0%, var(--khaki-mid) 55%, var(--khaki-lo) 100%); }
.panel .art { position: absolute; inset: 0; background-size: cover; background-position: center; }
.panel .art { transition: filter .5s; }
.panel.dim .art { filter: brightness(.42) saturate(.6); }
.panel .halftone { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,.22) 1.2px, transparent 1.4px); background-size: 7px 7px; }
.layer { position: absolute; inset: 0; }

.plate { display: inline-block; background: var(--plate); color: #111; border: 3px solid #111; box-shadow: 4px 4px 0 #111;
  font: 700 clamp(16px, 2.6vw, 34px) 'Oswald', sans-serif; text-transform: uppercase; padding: .2em .6em; line-height: 1.15; }
.plate-slot { position: absolute; top: 5%; right: 4%; max-width: 60%; text-align: right; z-index: 5; }
.subtitle { position: absolute; left: 4%; bottom: 4%; max-width: 62%; z-index: 5; background: var(--plate); color: #111;
  border: 2px solid #111; font: 500 clamp(12px, 1.6vw, 20px) 'Oswald', sans-serif; padding: .3em .7em; }
.subtitle:empty { display: none; }

.hud { position: absolute; top: 5%; left: 4%; z-index: 5; background: var(--hud-bg); color: var(--hud);
  font: clamp(11px, 1.3vw, 16px) 'PT Mono', monospace; padding: .5em .8em; border: 1px solid rgba(159,224,122,.35); line-height: 1.5; white-space: pre; }
.hud:empty { display: none; }

.btn { min-width: var(--touch); min-height: var(--touch); border: 3px solid #111; background: #111; color: var(--plate);
  font: 700 clamp(14px, 1.8vw, 22px) 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .05em; padding: .3em 1em; cursor: pointer; }
.btn.light { background: var(--plate); color: #111; box-shadow: 4px 4px 0 #111; }
.btn:disabled { opacity: .35; }
.btn:active { transform: translate(2px, 2px); }

.tear-sheet { position: absolute; inset: -2% -10%; z-index: 50; background: var(--paper); pointer-events: none;
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 8% 100%, 4% 92%, 9% 83%, 3% 74%, 8% 65%, 2% 56%, 7% 47%, 3% 38%, 9% 29%, 4% 20%, 8% 11%, 3% 4%); }

.rotate { display: none; position: fixed; inset: 0; z-index: 100; background: var(--bg); place-items: center; }
@media (orientation: portrait) { .rotate { display: grid; } }

/* Placeholder art until illustrated panels exist: one hue per place. */
.panel[data-panel="forest"] .art { background: url(art/panels/forest.svg) center / cover no-repeat, radial-gradient(ellipse at 70% 15%, #6b6a48 0%, transparent 55%), linear-gradient(170deg, #4a4f33, #23261a); }
.panel[data-panel="hq"] .art { background: radial-gradient(ellipse at 20% 20%, #7a6034 0%, transparent 50%), linear-gradient(160deg, #4b3f28, #1f1a12); }
.panel[data-panel="maxim"] .art { background: url(art/panels/maxim.svg) center / cover no-repeat, radial-gradient(ellipse at 80% 60%, #8a5a2a 0%, transparent 45%), linear-gradient(160deg, #565236, #282517); }
.panel[data-panel="quartermaster"] .art { background: url(art/panels/quartermaster.svg) center / cover no-repeat, #3a2f1e; }
.panel[data-panel="recon"] .art { background: url(art/panels/recon.svg) center / cover no-repeat, #3a3a26; }
.panel[data-panel="depot"] .art { background: url(art/panels/depot.svg) center / cover no-repeat, #2b2617; }
.panel[data-panel="dugout"] .art { background: url(art/panels/dugout.svg) center / cover no-repeat, #15120c; }
.panel[data-panel="ppsh"] .art { background: url(art/panels/ppsh.svg) center / cover no-repeat, #3a3a26; }
.panel[data-panel="dp27"] .art { background: url(art/panels/dp27.svg) center / cover no-repeat, #3a3a26; }
.panel[data-panel="range"] .art { background: url(art/panels/range.svg) center / cover no-repeat, #23251a; }
.panel[data-panel="bench"] .art { background: url(art/panels/bench.svg) center / cover no-repeat, #1d170f; }

.start { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6vh; z-index: 5; }
.start .plate { font-size: clamp(28px, 5vw, 64px); }
.btn.big { font-size: clamp(22px, 3vw, 40px); padding: .4em 1.6em; }

.missions { position: absolute; left: 4%; right: 4%; top: 22%; bottom: 5%; display: grid; grid-template-columns: 1fr 1fr; gap: 3%; z-index: 4; }
.mission { position: relative; background: var(--paper); color: #111; border: 3px solid #111; box-shadow: 4px 4px 0 #111;
  padding: 3% 4%; display: flex; flex-direction: column; gap: 4%; }
.mission.locked { opacity: .45; }
.mission-title { font: 700 clamp(18px, 2.4vw, 32px) 'Oswald', sans-serif; text-transform: uppercase; }
.mission-blurb { font: clamp(14px, 1.6vw, 20px) 'PT Mono', monospace; }
.mission-actions { margin-top: auto; display: flex; gap: 4%; }
.stamp { position: absolute; top: 10%; right: 5%; transform: rotate(-8deg); border: 3px solid #a8261d; color: #a8261d;
  font: 700 clamp(12px, 1.5vw, 18px) 'Oswald', sans-serif; padding: .1em .5em; text-transform: uppercase; letter-spacing: .1em; }

.content { z-index: 3; }
.belt { position: absolute; left: 8%; width: 84%; top: 15%; touch-action: none; overflow: visible; }
.belt-band { fill: #6e6248; stroke: #111; stroke-width: 2; }
.round .case { fill: var(--brass); stroke: #111; stroke-width: 1.6; }
.round .bullet { fill: var(--copper); stroke: #111; stroke-width: 1.6; }
.round .rim { fill: #a8792c; stroke: #111; stroke-width: 1.6; }
.round.spent .case { fill: none; stroke: var(--paper); stroke-dasharray: 3 2; opacity: .5; }
.round.spent .bullet, .round.spent .rim { display: none; }
.brace { fill: none; stroke: var(--paper); stroke-width: 2.5; }
.label rect { fill: rgba(13, 13, 10, .8); stroke: var(--paper); stroke-width: 1.5; }
.label text { fill: var(--paper); font: 700 22px 'Oswald', sans-serif; }
.label .caption { fill: var(--paper); font: 11px 'PT Mono', monospace; letter-spacing: .08em; }
.label.q rect, .label.hl rect { fill: var(--plate); stroke: #111; stroke-width: 2.5; }
.label.q text:not(.caption), .label.hl text:not(.caption) { fill: #111; }
.divider line { stroke: var(--plate); stroke-width: 4; }
.divider circle { fill: var(--plate); stroke: #111; stroke-width: 3; cursor: grab; }

/* Below the belt's part labels, and clear of the lesson controls in the bottom right. */
.eq { position: absolute; left: 4%; right: 30%; top: 69%; text-align: center; white-space: pre-line; z-index: 4;
  font: 700 clamp(18px, 2.8vw, 38px) 'Oswald', sans-serif; color: var(--paper); text-shadow: 3px 3px 0 #111; }
.eq:empty { display: none; }
.eq { line-height: 1.12; } /* after the font shorthand, which resets it */
.actions { position: absolute; left: 0; right: 0; bottom: 16%; display: flex; justify-content: center; gap: 4%; z-index: 6; }
.btn.op { font-size: clamp(20px, 2.6vw, 34px); min-width: 22%; }
.lesson-controls { position: absolute; right: 3%; bottom: 3%; display: flex; gap: 1.2vw; z-index: 7; }
.lesson-controls .btn { font-size: clamp(12px, 1.4vw, 17px); padding: .2em .7em; }

.practice .belt { left: 3%; width: 60%; top: 20%; }
.practice .eq { left: 3%; right: auto; width: 60%; top: 62%; font-size: clamp(20px, 3vw, 40px); font-family: 'Oswald', sans-serif; }
.practice .actions { left: 3%; right: auto; width: 60%; bottom: 5%; }
.keypad { position: absolute; right: 3%; top: 19%; bottom: 4%; width: 30%; z-index: 6; display: flex; flex-direction: column; gap: 3%; }
.keypad.off { opacity: .25; pointer-events: none; }
.keypad.gone { display: none; }
.kp-display { background: var(--hud-bg); color: var(--hud); border: 2px solid #111; text-align: right; padding: 0 .4em;
  font: clamp(26px, 3.6vw, 48px) 'PT Mono', monospace; }
.kp-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 4%; }
.btn.kp { font-size: clamp(22px, 3vw, 40px); padding: 0; }
.btn.hint { position: absolute; left: 3%; bottom: 3%; z-index: 7; font-size: clamp(12px, 1.4vw, 17px); padding: .2em .7em; }
.btn.exit { position: absolute; right: 3%; top: 4%; z-index: 8; font-size: clamp(12px, 1.4vw, 17px); padding: .1em .6em; }
.practice .art { filter: brightness(.38) saturate(.6); } /* the range stays behind the record and the keypad */
.practice .plate-slot { right: 36%; max-width: 42%; } /* long plates wrap instead of covering the HUD */


/* A record of the equation: large tappable places with a label under each. */
.eqv { position: absolute; left: 4%; right: 4%; top: 50%; display: flex; justify-content: center; align-items: flex-start;
  gap: 1.2vw; z-index: 4; }
.eqv-place { display: flex; flex-direction: column; align-items: center; gap: .25em; }
.eqv-num { min-width: var(--touch); min-height: var(--touch); padding: .02em .3em; border: 3px solid var(--paper);
  background: rgba(13, 13, 10, .78); color: var(--paper); font: 700 clamp(28px, 4.8vw, 62px) 'Oswald', sans-serif; line-height: 1.1; }
.eqv-num.x { color: var(--plate); }
.eqv-num.sub { color: var(--hud); }
/* A bracket is one place, set smaller so a long one fits; a closed box is brass. */
.eqv-num.group { font-size: clamp(20px, 3.4vw, 44px); padding: .2em .3em; border-style: dashed; white-space: nowrap; }
.eqv-num.group.long { font-size: clamp(16px, 2.5vw, 32px); }
.eqv-num.box { color: var(--brass); }
.eqv.tappable .eqv-num { border-color: var(--plate); cursor: pointer; }
.eqv.tappable .eqv-num.inert { border-color: var(--paper); cursor: default; }
.eqv-place.hl .eqv-num { background: var(--plate); color: #111; border-color: #111; }
/* Picked for the record: HUD green, so a pick never looks like the highlighted whole. */
.eqv-num.picked { background: var(--hud); color: #111; border-color: #111; }
.eqv-num.bad { background: #a8261d; color: var(--paper); border-color: #111; }
.eqv-op { font: 700 clamp(28px, 4.8vw, 62px) 'Oswald', sans-serif; line-height: 1.1; padding-top: .08em; color: var(--paper);
  text-shadow: 3px 3px 0 #111; }
.eqv-label { min-height: 1.3em; font: 700 clamp(11px, 1.3vw, 16px) 'PT Mono', monospace; letter-spacing: .06em; color: var(--plate);
  text-shadow: 2px 2px 0 #111; }

.practice .eqv { left: 3%; right: auto; width: 60%; top: 25%; }
.practice .eq.record { top: 45%; }
.practice .belt.mini { left: 8%; width: 48%; top: 54%; }


/* Briefings with a record: a smaller belt above, the record below it. */
.kit .belt { left: 20%; width: 60%; top: 15%; }
.kit .eqv { top: 55%; }
.kit .eq { top: 76%; }