/* Everything is laid out in game pixels on a 240×168 stage (4px brick band, 160px course, 4px brick band) that app.js scales to fill the window. */

:root {
  --ink: #201f1d;
  --ink-2: #2a2622;
  --stone: #3a3631;
  --stone-edge: #6e665a;
  --stone-dark: #554e44;
  --paper: #f3f2f2;
  --muted: #9c968c;
  --gold: #b68235;
  --gold-hi: #d9a24a;
  --gold-pale: #e9c98f;
  --gold-glow: #f6d58e;
  --gold-deep: #5a3b0a;
  --red: #f0957a;
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: #141311; }

#stage {
  position: absolute; left: 0; top: 0; width: 240px; height: 168px; transform-origin: 0 0;
  font-family: 'Silkscreen', monospace; font-size: 8px; line-height: 10px; color: var(--paper);
  -webkit-font-smoothing: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 1px #000, 0 6px 30px rgba(0, 0, 0, .6);
}
#course {
  position: absolute; inset: 0; width: 240px; height: 168px; display: block;
  image-rendering: pixelated; cursor: crosshair; touch-action: none;
}
#ui { position: absolute; inset: 0; pointer-events: none; }

/* — screens: centred over the whole frame, so their dimming covers the brick bands too — */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  pointer-events: auto;
}
.screen.dim { background: rgba(20, 19, 17, .5); }
#s-title { gap: 10px; background: linear-gradient(rgba(20, 19, 17, .25), rgba(20, 19, 17, .6) 30%, rgba(20, 19, 17, .6) 70%, rgba(20, 19, 17, .25)); }
.layer { position: absolute; inset: 0; }

/* — title — */
.logo {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 16px; line-height: 16px; font-weight: 700; color: var(--gold-pale); letter-spacing: .04em;
  text-shadow: 1px 0 var(--ink), -1px 0 var(--ink), 0 1px var(--ink), 0 -1px var(--ink), 1px 1px var(--ink), 2px 2px 0 var(--gold-deep);
}
.logo > span { display: flex; align-items: center; gap: 6px; }
.logo .amp { width: 11px; height: 14px; fill: var(--gold-hi); filter: drop-shadow(1px 1px 0 var(--ink)) drop-shadow(1px 1px 0 var(--gold-deep)); }
.menu { display: flex; flex-direction: column; gap: 4px; width: 104px; }
.foot { color: var(--paper); opacity: .7; text-shadow: 1px 1px 0 var(--ink); }

/* — panels — */
.panel {
  width: 150px; max-height: 154px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--stone-edge) transparent;
  display: flex; flex-direction: column; gap: 5px; padding: 6px 7px 7px;
  background: var(--ink); border: 1px solid var(--gold);
  box-shadow: inset 0 1px 0 var(--gold-deep), 2px 2px 0 rgba(0, 0, 0, .4);
  user-select: text; -webkit-user-select: text;
}
.panel.wide { width: 196px; }
.panel.narrow { width: 112px; }
.panel h2 { margin: 0 0 1px; font-size: 8px; font-weight: 400; color: var(--gold-pale); text-align: center; letter-spacing: .08em; }

.field { display: flex; flex-direction: column; gap: 2px; }
.field > span { color: var(--muted); }
.row { display: flex; gap: 4px; }
.grow { flex: 1; }
.rule { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.rule::before, .rule::after { content: ''; flex: 1; height: 1px; background: var(--stone-dark); }
.note { color: var(--muted); text-align: center; }
.note.win { color: var(--gold-glow); }
.note:empty, .error:empty { display: none; }
.error { color: var(--red); text-align: center; }
.big { font-size: 16px; line-height: 16px; letter-spacing: .3em; padding-left: .3em; text-align: center; color: var(--gold-glow); user-select: all; }
.actions { display: flex; gap: 4px; }
.actions > * { flex: 1; }

/* — controls — */
.pbtn {
  font: inherit; line-height: 10px; color: var(--paper); text-align: center; cursor: pointer;
  background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 0;
  padding: 1px 6px 2px; /* line-height 10 puts the caps 1px low; the extra bottom pixel centres them */ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35);
}
.pbtn:hover, .pbtn:focus-visible { border-color: var(--gold-hi); color: var(--gold-glow); outline: none; }
.pbtn:active { transform: translateY(1px); box-shadow: none; }
.pbtn.primary { background: var(--gold); border-color: var(--gold-pale); color: var(--ink); }
.pbtn.primary:hover, .pbtn.primary:focus-visible { background: var(--gold-hi); color: var(--ink); }
.pbtn.ghost { background: none; border-color: transparent; box-shadow: none; color: var(--muted); }
.pbtn.ghost:hover, .pbtn.ghost:focus-visible { color: var(--gold-glow); border-color: transparent; }
.pbtn:disabled { opacity: .4; cursor: default; transform: none; }
.pbtn:disabled:hover { border-color: var(--stone-edge); color: var(--paper); }
.pbtn.primary:disabled:hover { background: var(--gold); border-color: var(--gold-pale); color: var(--ink); }

input {
  font: inherit; line-height: 10px; color: var(--paper); caret-color: var(--gold-hi);
  background: var(--ink-2); border: 1px solid var(--stone-dark); border-radius: 0;
  padding: 1px 3px 2px; min-width: 0; outline: none;
}
input:focus { border-color: var(--gold-hi); }
input::placeholder { color: var(--stone-edge); }
.code { width: 50px; text-transform: uppercase; letter-spacing: .25em; text-align: center; }

.seg { display: flex; }
.seg .pbtn { flex: 1; }
.seg .pbtn + .pbtn { border-left: 0; }
.seg .pbtn[aria-pressed='true'] { background: var(--gold); color: var(--ink); border-color: var(--gold-pale); }
.slots { display: flex; flex-direction: column; gap: 3px; }
.slot { display: flex; align-items: center; gap: 4px; }
.slot input { flex: 1; }

.sw { flex: none; width: 5px; height: 5px; box-shadow: 0 0 0 1px #000; }
.roster { list-style: none; margin: 0; padding: 0; max-height: 52px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.roster li { display: flex; align-items: center; gap: 4px; }
.tag { color: var(--ink); background: var(--gold-pale); padding: 0 2px 1px; line-height: 8px; }
.tag.dim { background: var(--stone-edge); }

.rules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.rules b { font-weight: 400; color: var(--gold-hi); }

/* — in play — */
.status {
  position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); max-width: 170px;
  line-height: 6px; padding: 0 5px 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(32, 31, 29, .85); border: 1px solid var(--gold-deep); color: var(--paper);
}
.status:empty { display: none; }
.status .hi { color: var(--gold-glow); }
.chip {
  position: absolute; bottom: 1px; pointer-events: auto; cursor: pointer;
  font: inherit; line-height: 6px; padding: 0 4px 1px; color: var(--paper);
  background: rgba(32, 31, 29, .85); border: 1px solid var(--stone-edge); border-radius: 0;
}
.chip:hover, .chip:focus-visible { border-color: var(--gold-hi); color: var(--gold-glow); outline: none; }
.chip.left { left: 2px; }
.chip.right { right: 2px; }

/* — scorecard and results — */
.card-body { overflow: auto; max-height: 100px; scrollbar-width: thin; scrollbar-color: var(--stone-edge) transparent; }
.sc { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sc th, .sc td { padding: 1px 2px 0; text-align: center; white-space: nowrap; }
.sc th { color: var(--muted); font-weight: 400; border-bottom: 1px solid var(--stone-dark); }
.sc .name { text-align: left; max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
.sc .name > span { display: inline-flex; align-items: center; gap: 3px; }
.sc .num { text-align: right; }
.sc .par td { color: var(--muted); }
.sc .cur { color: var(--gold-pale); }
.sc .under { color: var(--gold-hi); }
.sc .empty { color: var(--stone-dark); }
.sc .live { color: var(--gold-glow); }
.sc tr.me td { color: var(--gold-glow); }
.sc tr.me td.empty { color: var(--stone-dark); }
.sc tr.away td.name { opacity: .5; }
.sc .rank { color: var(--muted); width: 8px; }
.sc tr:first-child .rank { color: var(--gold-hi); }
.sc .to { color: var(--muted); }

/* — phones held upright: the landscape course is small, so suggest turning — */
.turn-hint { display: none; }
@media (orientation: portrait) and (max-width: 600px) {
  .turn-hint {
    display: block; position: fixed; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom));
    font: 12px/1.4 'Silkscreen', monospace; color: #9c968c; text-align: center; padding: 0 24px;
  }
}

/* — debug panel (npm run dev only) — */
.pbtn.toggle { display: flex; justify-content: space-between; }
.pbtn.toggle::after { content: 'OFF'; color: var(--muted); }
.pbtn.toggle[aria-pressed='true']::after { content: 'ON'; color: var(--gold-glow); }