/* Shovel Simulator — engineering workshop, badly lit, seriously operated. */

:root {
  --bg: #12161c;
  --bg2: #171c24;
  --panel: #1b212a;
  --panel2: #212936;
  --line: #2f3a4a;
  --line2: #3d4a5e;
  --text: #dfe6ef;
  --muted: #8e9bad;
  --accent: #f0a326;
  --accent2: #ffc964;
  --good: #58c08a;
  --warn: #e5a13a;
  --bad: #e05a4a;
  --grid: rgba(120, 150, 190, 0.07);
  --shadow: 0 8px 30px rgba(0, 0, 0, .45);
  --r: 10px;
  font-size: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  overscroll-behavior: none;
}

body {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, #1c2531 0%, var(--bg) 62%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
}

/* Every screen sets its own `display`. These rules must carry the #app id
   selector or the base rule below wins on specificity and silently flattens
   the layout — that is how the arena stage once ended up 0px tall. */
#app { height: 100dvh; width: 100%; max-width: 720px; margin: 0 auto; overflow: hidden; }
#app.s-title { display: flex; flex-direction: column; }
#app.s-workshop { display: grid; grid-template-rows: auto minmax(150px, 1fr) auto auto minmax(120px, 1.05fr) auto; }
#app.s-arena { display: grid; grid-template-rows: auto minmax(200px, 1fr) auto; }
#app.s-report, #app.s-codex { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: .04em; }
h3 { font-size: .82rem; color: var(--accent); text-transform: uppercase; letter-spacing: .14em; margin: 18px 0 8px; }
p { margin: 0 0 10px; }

/* --- buttons ---------------------------------------------------------- */
.btn {
  font: inherit; font-size: .84rem; letter-spacing: .06em;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line2); border-radius: var(--r);
  padding: 11px 14px; cursor: pointer; transition: transform .06s, background .15s, border-color .15s;
  touch-action: manipulation;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, var(--accent2), var(--accent)); color: #241a04; border-color: #b97c12; font-weight: 800; }
.btn.primary:disabled { background: #3a3f48; color: #7b8593; border-color: #444b56; font-weight: 600; }
.btn.big { padding: 16px; font-size: 1rem; width: 100%; }
.btn.ghost { background: transparent; }
.btn.small { padding: 8px 10px; font-size: .74rem; }
.btn.icon { padding: 8px 12px; font-size: 1.05rem; }
.btn.danger { color: var(--bad); border-color: #5a3330; margin-top: 22px; }

/* --- title ------------------------------------------------------------ */
.s-title { justify-content: center; align-items: center; padding: 20px; text-align: center; }
.s-title .title-wrap { min-height: 0; }
.title-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 420px; }
.title-mark { height: 34vh; display: flex; }
.title-svg { height: 100%; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .55)); animation: sway 6s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.s-title h1 { font-size: clamp(1.5rem, 7vw, 2.3rem); letter-spacing: .1em; }
.tag { color: var(--muted); font-size: .82rem; }
.tag.dim { color: #61707f; font-size: .72rem; }
.title-opts { display: flex; gap: 8px; }

/* --- workshop --------------------------------------------------------- */
.ws-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--bg2); }
.ws-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ws-name .label { font-size: .58rem; color: var(--muted); letter-spacing: .18em; }
.name-input { font: inherit; font-size: .92rem; font-weight: 700; background: transparent; border: none; border-bottom: 1px dashed var(--line2); color: var(--text); padding: 2px 0; width: 100%; }
.name-input:focus { outline: none; border-color: var(--accent); }
.budget { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.budget-track { width: 96px; height: 8px; background: #0e1218; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.budget-fill { height: 100%; width: 0; background: var(--good); transition: width .18s; }
.budget-fill.high { background: var(--warn); }
.budget-fill.over { background: var(--bad); }
.budget-text { font-size: .66rem; color: var(--muted); }

.ws-stage { position: relative; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #1d2531, #12161c 72%); border-bottom: 1px solid var(--line); }
.ws-shovel { width: 100%; height: 100%; touch-action: none; }
.node-hit { cursor: grab; }
.dim-line { stroke: var(--line2); stroke-width: 1.4; fill: none; }
.dim-t { fill: var(--muted); font-size: 22px; font-family: inherit; }
.xs-t { fill: var(--muted); font-size: 11px; font-family: inherit; }

.warn-box { padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; background: var(--bg2); border-bottom: 1px solid var(--line); min-height: 0; }
.warn { display: flex; gap: 8px; align-items: flex-start; font-size: .68rem; line-height: 1.35; color: var(--muted); }
.warn .w-i { flex: none; width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-size: .62rem; background: #2a3140; }
.warn.bad { color: #f0a79c; } .warn.bad .w-i { background: #4a2320; color: #ffb4a6; }
.warn.warn { color: #e8c48b; } .warn.warn .w-i { background: #453620; color: #ffd79a; }

/* Eight tabs will not fit one row on a phone, and a hidden horizontal
   scrollbar just makes the last ones invisible. Two even rows of four. */
.ws-tabs { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg2); border-bottom: 1px solid var(--line); }
.tab {
  min-width: 0; font: inherit; font-size: .66rem; letter-spacing: .05em;
  text-transform: uppercase; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); padding: 10px 4px; cursor: pointer; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tab.on { color: var(--accent); border-bottom-color: var(--accent); background: #1e2531; }
/* Only wide enough for a single row while the layout is still one column. */
@media (min-width: 580px) and (max-width: 759px) { .ws-tabs { grid-template-columns: repeat(8, 1fr); } }
@media (min-width: 420px) { .tab { font-size: .7rem; padding: 11px 8px; letter-spacing: .08em; } }

.ws-panel { overflow-y: auto; padding: 12px 12px 18px; -webkit-overflow-scrolling: touch; }
.hint { font-size: .7rem; color: var(--muted); line-height: 1.45; }
.hint.bad { color: #f0a79c; }
.hint.dim { color: #61707f; }
.locked-hint { border: 1px dashed var(--line2); border-radius: var(--r); padding: 10px; }

.field { margin-bottom: 12px; }
.field-label { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: .74rem; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 8px 11px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.chip small { font-size: .58rem; color: var(--muted); }
.chip.on { border-color: var(--accent); background: #35291255; color: var(--accent2); }
.chip.locked { opacity: .34; cursor: not-allowed; }
.chip.locked .mn b { text-decoration: line-through; }

/* material swatches */
.mat-group { margin-bottom: 12px; }
.mat-group.shut { opacity: .5; }
.chip.mat { flex-direction: row; align-items: center; gap: 8px; padding: 7px 10px; min-width: 46%; flex: 1 1 46%; }
.chip.mat .sw { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--line2); flex: none; }
.chip.mat .mn { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; flex: 1; }
.chip.mat .mn b { font-size: .72rem; }
.chip.mat .mn small { font-size: .54rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chip.mat .beau { display: flex; gap: 2px; flex: none; }
.chip.mat .beau i { width: 4px; height: 10px; border-radius: 1px; background: #2f3a4a; display: block; }
.chip.mat .beau i.on { background: var(--accent); }
.chip.mat .rare { position: absolute; }
.chip.mat { position: relative; }
.chip.mat .rare { top: -6px; right: 6px; font-size: .46rem; letter-spacing: .1em; background: var(--accent); color: #241a04; padding: 1px 4px; border-radius: 3px; font-weight: 800; }

.sl { display: block; margin-bottom: 14px; }
.sl-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.sl-label { font-size: .72rem; color: var(--muted); }
.sl-val { font-size: .74rem; color: var(--accent2); font-weight: 700; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; background: #0e1218; border: 1px solid var(--line); border-radius: 4px; }
input[type=range]::-moz-range-track { height: 6px; background: #0e1218; border: 1px solid var(--line); border-radius: 4px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: linear-gradient(180deg, var(--accent2), var(--accent)); border: 2px solid #7d5409; }
input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 2px solid #7d5409; }

.row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.toggle { font: inherit; font-size: .74rem; display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px 7px 7px; color: var(--muted); cursor: pointer; }
.toggle .knob { width: 26px; height: 15px; border-radius: 999px; background: #0e1218; border: 1px solid var(--line2); position: relative; }
.toggle .knob::after { content: ''; position: absolute; top: 1px; left: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--muted); transition: transform .16s, background .16s; }
.toggle.on { color: var(--accent2); border-color: var(--accent); }
.toggle.on .knob::after { transform: translateX(11px); background: var(--accent); }
.toggle.locked { opacity: .38; cursor: not-allowed; }

.xsection-wrap { background: #0e1218; border: 1px solid var(--line); border-radius: var(--r); padding: 8px; margin-bottom: 10px; }
.xsection { width: 100%; height: 96px; display: block; }

.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 10px; }
.mini { display: flex; flex-direction: column; gap: 4px; }
.mini .k { font-size: .64rem; color: var(--muted); }
.meter { height: 7px; background: #0e1218; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, #6c8ec0, var(--accent)); }

.readout { display: flex; flex-direction: column; gap: 7px; }
.ro-row { display: grid; grid-template-columns: 6.6rem 1fr 4.4rem; align-items: center; gap: 8px; font-size: .7rem; }
.readout.small .ro-row { grid-template-columns: 1fr auto; }
.ro-k { color: var(--muted); }
.ro-v { text-align: right; color: var(--accent2); }
.ro-v.wide { text-align: right; }

.ws-footer { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg2); border-top: 1px solid var(--line); }
.ws-tools { display: flex; gap: 8px; }
.ws-tools .btn { flex: 1; }

/* --- arena ------------------------------------------------------------ */
.arena-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.arena-titles { flex: 1; min-width: 0; }
.arena-sub { font-size: .58rem; letter-spacing: .2em; color: var(--accent); text-transform: uppercase; }
.arena-title { font-size: .96rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arena-dots { display: flex; gap: 5px; }
.arena-dots .dot { width: 9px; height: 9px; border-radius: 50%; background: #2c3542; border: 1px solid var(--line2); }
.arena-dots .dot.passed { background: var(--good); border-color: var(--good); }
.arena-dots .dot.active { background: var(--accent); border-color: var(--accent2); box-shadow: 0 0 8px var(--accent); }

.arena-stage { position: relative; min-height: 0; overflow: hidden; background: linear-gradient(180deg, #131922 0%, #1b232e 100%); }
.arena-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.arena-shovel { position: absolute; left: 50%; bottom: 4%; width: 62%; height: 92%; transform-origin: 50% 12%; margin-left: -31%; will-change: transform; }
.arena-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.arena-lower { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg2); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.arena-flash { height: 0; opacity: 0; overflow: hidden; transition: opacity .2s; font-size: .72rem; border-radius: 8px; }
.arena-flash.show { height: auto; opacity: 1; padding: 8px 10px; }
.arena-flash.sev-warn { background: #40331a; color: #ffd79a; }
.arena-flash.sev-bad { background: #4a2320; color: #ffb4a6; }
.arena-flash.sev-fatal { background: #5c1f18; color: #ffd2c9; font-weight: 700; animation: pulse .5s ease-in-out 3; }
.arena-flash.sev-note { background: #24303f; color: #a9c4e0; }
@keyframes pulse { 50% { filter: brightness(1.6); } }

.arena-caption { min-height: 2.6em; font-size: .78rem; line-height: 1.35; color: var(--text); }
.arena-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.stat-chip { display: flex; gap: 6px; align-items: baseline; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; font-size: .66rem; }
.stat-chip .k { color: var(--muted); }
.stat-chip .v { color: var(--accent2); font-weight: 700; }
.arena-controls { display: flex; gap: 8px; }
.arena-controls .btn { flex: 1; }

/* --- report ----------------------------------------------------------- */
/* Needs the #app specificity to beat the base `overflow: hidden`. */
#app.s-report, #app.s-codex { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.report, .codex { flex: 0 0 auto; width: 100%; padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); }
/* Keep the way out reachable no matter how long the report runs. */
.report-actions, .codex > .btn.danger:last-child {
  position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 3;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .6); border-radius: var(--r);
}
.report-actions { display: flex; gap: 8px; background: var(--bg); padding: 6px 0; }
.report-actions .btn.ghost { flex: 0 0 auto; background: var(--panel); }
.report-actions .btn.big { flex: 1; }
.codex-head { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 8px 0; margin: -8px 0 6px; }
.rep-title { font-size: .88rem; letter-spacing: .18em; color: var(--accent); text-align: center; margin-bottom: 14px; }
.rep-grid { display: grid; grid-template-columns: 38% 1fr; gap: 12px; align-items: start; }
.rep-diagram { background: #0e1218; border: 1px solid var(--line); border-radius: var(--r); padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fail-diagram { width: 100%; height: 190px; }
.diag-cap { font-size: .56rem; color: var(--muted); letter-spacing: .1em; text-align: center; }
.report-rows { display: flex; flex-direction: column; gap: 6px; }
.rep-row { display: flex; flex-direction: column; border-bottom: 1px dotted var(--line); padding-bottom: 5px; }
.rep-row .k { font-size: .58rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.rep-row .v { font-size: .76rem; }

/* --- the brief -------------------------------------------------------- */
.brief-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.brief-kind { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.brief-name { font-size: 1rem; color: var(--text); text-transform: none; letter-spacing: .02em; margin: 0; }
.brief-date { font-size: .6rem; color: var(--muted); }
.brief-list { list-style: none; counter-reset: b; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.brief-item { counter-increment: b; position: relative; display: flex; flex-direction: column; gap: 3px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line2);
  border-radius: 8px; padding: 9px 11px 9px 34px; }
.brief-item::before { content: counter(b); position: absolute; left: 11px; top: 9px;
  font-size: .72rem; font-weight: 800; color: var(--muted); }
.brief-item.headline { border-left-color: var(--accent); background: #241f14; }
.brief-item.headline::before { color: var(--accent); }
.bi-n { font-size: .78rem; font-weight: 700; }
.bi-b { font-size: .64rem; color: var(--muted); }
.bi-w { font-size: .64rem; color: var(--accent2); }

.bonus-rows { display: flex; flex-direction: column; gap: 4px; }
.rep-row.inline { flex-direction: row; justify-content: space-between; align-items: baseline; }
.rep-row.inline .k { text-transform: none; letter-spacing: 0; font-size: .68rem; }
.rep-row.inline .v { font-size: .72rem; color: var(--accent2); }

.per-test { display: flex; flex-direction: column; gap: 6px; }
.pt.wrecked { opacity: .5; border-style: dashed; }
.pt { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.pt-n { font-size: .74rem; font-weight: 700; }
.pt-s { font-size: .74rem; color: var(--accent2); font-weight: 700; grid-row: 1 / span 2; align-self: center; }
.pt-note { font-size: .64rem; color: var(--muted); }

.score-box { margin: 18px 0; padding: 16px; text-align: center; background: linear-gradient(180deg, #23201a, #191d24); border: 1px solid #4a3c1c; border-radius: var(--r); display: flex; flex-direction: column; gap: 4px; }
.sc-l { font-size: .6rem; letter-spacing: .24em; color: var(--muted); }
.sc-v { font-size: 2.2rem; font-weight: 800; color: var(--accent2); line-height: 1; }
.sc-ep { font-size: .66rem; color: var(--good); }

.awards { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.award { display: flex; flex-direction: column; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.award b { font-size: .78rem; }
.award span { font-size: .64rem; color: var(--muted); }
.award.ach { border-color: #4a3c1c; background: #241f14; }
.award.ach b { color: var(--accent2); }
.award.unlock { border-color: #1f4436; background: #16241f; }
.award.unlock b { color: var(--good); }

/* --- codex ------------------------------------------------------------ */
.codex-head { display: flex; align-items: center; gap: 10px; }
.codex-head h2 { font-size: 1rem; flex: 1; }
.ep-badge { font-size: .66rem; color: var(--good); border: 1px solid #1f4436; border-radius: 999px; padding: 4px 9px; }
.codex-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cs { display: flex; justify-content: space-between; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: .66rem; }
.cs .k { color: var(--muted); }
.cs .v { color: var(--accent2); font-weight: 700; }
.upgrades { display: flex; flex-direction: column; gap: 6px; }
.upgrade { font: inherit; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; color: var(--text); cursor: pointer; }
.upgrade b { font-size: .76rem; }
.upgrade span { font-size: .62rem; color: var(--muted); }
.upgrade .cost { grid-row: 1 / span 2; align-self: center; color: var(--accent2); font-size: .7rem; font-weight: 700; }
.upgrade.owned { border-color: #1f4436; opacity: .7; }
.upgrade.cant { opacity: .45; }
.unlock-list, .ach-list { display: flex; flex-direction: column; gap: 5px; }
.ul { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.ul-n { font-size: .72rem; color: var(--muted); }
.ul-k { font-size: .58rem; color: #5f6d7d; }
.ul-h { grid-column: 1 / -1; font-size: .6rem; color: #5f6d7d; }
.ul.got .ul-n { color: var(--accent2); font-weight: 700; }
.ul.got .ul-h { color: var(--good); }
.ach { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; opacity: .5; }
.ach b { font-size: .72rem; } .ach span { font-size: .6rem; color: var(--muted); }
.ach.got { opacity: 1; border-color: #4a3c1c; background: #221d13; }
.ach.got b { color: var(--accent2); }

/* --- wider screens ---------------------------------------------------- */
@media (min-width: 760px) {
  #app { max-width: 980px; }
  #app.s-workshop {
    grid-template-columns: 1fr 380px;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "head head" "stage tabs" "stage panel" "warn foot";
  }
  .ws-header { grid-area: head; }
  .ws-stage { grid-area: stage; border-right: 1px solid var(--line); }
  .warn-box { grid-area: warn; }
  .ws-tabs { grid-area: tabs; }
  .ws-panel { grid-area: panel; }
  .ws-footer { grid-area: foot; flex-direction: row; align-items: center; }
  .ws-tools { flex: 0 0 auto; }
  .ws-footer .btn.big { width: auto; flex: 1; }
  .fail-diagram { height: 260px; }
  .codex-stats { grid-template-columns: repeat(4, 1fr); }
}

.frag { transition: transform .25s ease-out; }