/* The tester download page. One left-aligned column on the menu's dark ground; square
   bracketed panels for sections, a cut corner only on things you can click (the game's
   button-standard rule). The fonts are the game's own, served from this Worker. */

@font-face { font-family: "Chakra Petch"; src: url("fonts/ChakraPetch-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/ChakraPetch-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/ChakraPetch-SemiBold.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("fonts/Michroma-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url("fonts/ShareTechMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --bg: #020409;
  --bg-mid: #08101e;
  --bg-center: #13213a;
  --panel: rgba(9, 14, 25, 0.88);
  --line: #1b2940;
  --line-bright: #2c4263;
  --fg: #c4d3e6;
  --label: #93a7c1;
  --dim: #6d7f99;
  --cyan: #7fc4e0;
  --bracket: #4f8aa8;
  --primary: #e08a3c;
  --error: #ff6a5c;
  --good: #5fcf7a;
  --font-display: "Michroma", "Eurostile", "Arial Black", sans-serif;
  --font-body: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--bg); }
/* The in-game menu scrim (menu_backdrop.tscn): a radial falloff centered just above the
   middle, here from navy to near-black with no space image under it. */
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: radial-gradient(ellipse 90% 80% at 50% 45%, var(--bg-center) 0%, var(--bg-mid) 55%, var(--bg) 100%);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding-block: 40px 56px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 28px;
}

header { display: flex; flex-direction: column; gap: 10px; }
.game-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 6vw, 44px); letter-spacing: 0.24em; color: #edf3fa;
  line-height: 1.2;
}
.page-name { font-size: 15px; font-weight: 500; letter-spacing: 0.32em; color: var(--primary); }

/* Square section panel with corner brackets. */
.panel {
  --b: var(--bracket);
  background:
    linear-gradient(var(--b), var(--b)) top left / 14px 1px no-repeat,
    linear-gradient(var(--b), var(--b)) top left / 1px 14px no-repeat,
    linear-gradient(var(--b), var(--b)) top right / 14px 1px no-repeat,
    linear-gradient(var(--b), var(--b)) top right / 1px 14px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / 1px 14px no-repeat,
    var(--panel);
  border: 1px solid var(--line);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
}
.panel.error { --b: var(--error); }
.panel h2 {
  margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.22em; color: var(--label);
  text-wrap: balance;
}
.panel p { margin: 0; max-width: 62ch; }
.muted { color: var(--label); font-size: 15px; }
.mono { font-family: var(--font-mono); }

form { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
input[type="text"] {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--font-mono); font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #edf3fa; background: #060a12;
  border: 1px solid var(--line-bright); border-radius: 0; padding: 12px 14px;
}
input[type="text"]::placeholder { color: #3e4d63; }
input[type="text"]:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
input[aria-invalid="true"] { border-color: var(--error); }

/* Clickable things get the cut corner. */
.btn {
  --cut: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: 0.18em;
  padding: 13px 26px; cursor: pointer; text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  border: none; border-radius: 0;
}
.btn-primary { background: var(--primary); color: #1a0f04; }
.btn-primary:hover { background: #f09a4c; }
.btn-secondary { background: #16233a; color: var(--fg); }
.btn-secondary:hover { background: #1e3050; }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; clip-path: none; }
.btn[disabled] { opacity: 0.55; cursor: wait; }
.btn-small { font-size: 13px; padding: 6px 14px; --cut: 7px; letter-spacing: 0.12em; }

.message { font-size: 16px; }
.message.error { color: var(--error); }

.status { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.chip {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.1em;
  padding: 3px 10px; border: 1px solid currentColor;
}
.chip.good { color: var(--good); }

/* Build facts: label / value pairs. */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; margin: 0; }
.facts dt { color: var(--dim); font-size: 14px; letter-spacing: 0.12em; padding-top: 2px; }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.download-row { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }

.hash-box { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; }
.hash-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hash {
  flex: 1 1 280px; min-width: 0;
  font-family: var(--font-mono); font-size: 14px; color: var(--label);
  word-break: break-all; user-select: all;
}

ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 14px; }
ol.steps li { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; max-width: 66ch; }
ol.steps li::before {
  content: counter(step);
  font-family: var(--font-mono); font-size: 18px; color: var(--cyan);
  border: 1px solid var(--line-bright); width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
}
.warn-quote { color: #edf3fa; }

ul.plain { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 66ch; }
ul.plain li::marker { color: var(--bracket); }

.notice { display: flex; flex-direction: column; gap: 12px; }
.notice h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.2em; color: var(--dim); }

.help { display: flex; flex-direction: column; gap: 4px; }
.help .address { font-family: var(--font-mono); font-size: 18px; color: #edf3fa; user-select: all; }

footer {
  border-top: 1px solid var(--line); padding-top: 16px;
  font-size: 13px; color: var(--dim); display: flex; flex-direction: column; gap: 4px;
}

@media (max-width: 480px) {
  .panel { padding: 18px; }
  .btn { width: 100%; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts dd { margin-bottom: 8px; }
}