/* SLATE: the game's UI language (The Deep tasks/ui_slate_spec.md). Fonts self-hosted from the game: Hullgrave Text
   and Slab are the game's own pixel fonts (tools/bake/bake_fonts.py), Departure Mono is OFL. Each is crisp only at
   whole multiples of its grid: Text 14 (body 28), Slab 27 (titles 27, headings 54), Departure Mono 11. */
@font-face { font-family: 'Hullgrave Text'; src: url('/media/fonts/HullgraveText.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Hullgrave Slab'; src: url('/media/fonts/HullgraveSlab.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Departure Mono'; src: url('/media/fonts/DepartureMono.otf') format('opentype'); font-display: swap; }

/* master palette (Tools/art/palette.py) */
:root {
  --ab0: #05060d; --ab1: #0a0e1a; --ab2: #131c30; --ab3: #24314d; --ab4: #3d5273;
  --st0: #0d0f1a; --st1: #1c2233; --st2: #34405c; --st3: #5a6f8c; --st4: #8fa8bd;
  --ru0: #1d0f10; --ru1: #3d1f16; --ru2: #6e3a22; --ru3: #a3622f; --ru4: #d99e5c;
  --hz0: #332711; --hz2: #b8912e; --hz3: #e8c14a; --hz4: #fae98c;
  --bi0: #0a2e2b; --bi1: #14594f; --bi2: #23a68c; --bi3: #45e6c0; --bi4: #aefff0;
  --bo2: #736b57; --bo3: #a69d80; --bo4: #d9d3b8;
  --red: #ff4a3d; --grn: #58fa9e; --foam: #eef7fa;
  --t: 'Hullgrave Text', monospace; --s: 'Hullgrave Slab', 'Hullgrave Text', monospace; --d: 'Departure Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: var(--ab1); color: var(--bo4); font: 28px/32px var(--t); -webkit-font-smoothing: none; }
p { margin: 0; }
a { color: var(--hz3); text-decoration: none; }
a:hover { color: var(--hz4); }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--hz3); outline-offset: 2px; }

.sc { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.small { font: 11px/14px var(--d); }
.caps { font: 11px/14px var(--d); text-transform: uppercase; letter-spacing: 1px; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.section { padding: 64px 0; }
.section.ruled { border-top: 2px solid var(--st1); }
.deep { background: linear-gradient(180deg, var(--ab1) 0%, var(--ab0) 50%, var(--ab1) 100%); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* plate: flat Steel1 body, Steel3 line, Steel0 outline; 4 px bolts only on main panels */
.plate { background: var(--st1); border: 2px solid var(--st3); outline: 2px solid var(--st0); position: relative; }
.bolts { background:
  linear-gradient(var(--st4), var(--st4)) left 6px top 6px / 4px 4px no-repeat,
  linear-gradient(var(--st4), var(--st4)) right 6px top 6px / 4px 4px no-repeat,
  linear-gradient(var(--st4), var(--st4)) left 6px bottom 6px / 4px 4px no-repeat,
  linear-gradient(var(--st4), var(--st4)) right 6px bottom 6px / 4px 4px no-repeat,
  linear-gradient(var(--st0), var(--st0)) left 7px top 7px / 4px 4px no-repeat,
  linear-gradient(var(--st0), var(--st0)) right 5px top 7px / 4px 4px no-repeat,
  linear-gradient(var(--st0), var(--st0)) left 7px bottom 5px / 4px 4px no-repeat,
  linear-gradient(var(--st0), var(--st0)) right 5px bottom 5px / 4px 4px no-repeat,
  var(--st1); }
.trow { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 20px; border-bottom: 2px solid var(--st2);
  font: 27px/1 var(--s); letter-spacing: 1px; text-transform: uppercase; color: var(--foam); margin: 0; }
.trow.hz { color: var(--hz3); }
.trow .meta { margin-left: auto; font: 11px/14px var(--d); letter-spacing: 1px; color: var(--bo3); }
.sec { display: flex; align-items: center; gap: 8px; font: 11px/14px var(--d); text-transform: uppercase; letter-spacing: 1px; color: var(--bo3); }
.sec::after { content: ''; flex: 1; height: 1px; background: var(--st2); }

/* buttons: L = Slab 27; flat fills with a Steel0 edge */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 20px;
  font: 27px/1 var(--s); white-space: nowrap; background: var(--st2); color: var(--foam);
  border: 2px solid var(--st0); cursor: pointer; }
.btn:hover { background: var(--st3); color: var(--foam); }
.btn.pri { background: var(--ru2); color: var(--ru4); }
.btn.pri:hover { background: var(--ru3); color: var(--hz4); }
.btn.act { background: var(--bi1); color: var(--bi4); }
.btn.act:hover { background: var(--bi2); color: var(--foam); }
.btn.s { height: 28px; padding: 0 12px; font: 11px/14px var(--d); text-transform: uppercase; letter-spacing: 1px; }
.btn.off { background: var(--st1); color: var(--bo3); cursor: default; }

.chip { display: inline-flex; align-items: center; gap: 4px; height: 16px; padding: 0 5px; font: 11px/14px var(--d);
  color: var(--bo3); border: 1px solid var(--st3); white-space: nowrap; }
.chip.good { color: var(--bi3); border-color: var(--bi2); background: var(--bi0); }
.chip.warn { color: var(--hz3); border-color: var(--hz2); background: var(--hz0); }
.lamp { width: 6px; height: 6px; display: inline-block; background: currentColor; flex-shrink: 0; }

/* idle bob, stepped so the sprite stays on whole pixels */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.bob { animation: bob 3s steps(3, jump-none) infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bob { animation: none; }
}
@media (max-width: 768px) {
  .sc { padding: 0 16px; }
  /* a long label ("Steam page coming soon" is 355 px in Slab 27) wraps onto a second line instead of
     pushing the page sideways */
  .btn { white-space: normal; height: auto; min-height: 44px; padding: 8px 12px; text-align: center; }
}