/* Wheel of Urchin's page (SPEC 10.2). The variables are the spec's; the
   purple and gold are recommendations until the owner settles the colours
   (SPEC 1.4). Contrast: cream on night is well over 4.5:1. */
:root {
  --night: #100820;
  --panel: #201038;
  --panel-2: #281848;
  --frame: #301858;
  --tile-off: #482878;
  --tile-off-hi: #583890;
  --tile-on: #f8f8f8;
  --tile-edge: #c8c8d8;
  --ink: #100820;
  --glow: #f8e060;
  --filled: #f8e8a0;
  --gold: #f8c840;
  --gold-dark: #c89020;
  --cream: #f8f0f8;
  --muted: #b8a8d0;
  --right: #40b848;
  --wrong: #e04848;
  --key: #382860;
  --key-used: #201838;
  --typed: #d0e0f8;
  --typed-ink: #183078;
  --missed: #a8a8b8;
  --missed-ink: #303040;
}

* { box-sizing: border-box; }

html { background: var(--night); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--cream);
  font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top, .col { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 16px; }

/* ---- the header (SPEC 10.1) ---- */
.top { height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand { margin: 0; line-height: 0; min-width: 0; }
.brand canvas { image-rendering: pixelated; display: block; }
.hbtns { display: flex; flex: none; }
.hbtn { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.hbtn canvas { image-rendering: pixelated; }

/* ---- the board (SPEC 7.6) ---- */
#boardblock { margin-top: 4px; }
#board {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 3px;
  padding: 8px;
  background: var(--frame);
  border: 3px solid var(--gold);
  border-radius: 6px;
}
.tile {
  aspect-ratio: 5 / 6;
  display: grid;
  place-items: center;
  font: 800 clamp(11px, 4.2vw, 22px) / 1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  user-select: none;
}
.tile.filler { background: var(--tile-off); border-top: 1px solid var(--tile-off-hi); }
.tile.letter, .tile.mark { background: var(--tile-on); border: 1px solid var(--tile-edge); }
.tile.glow { background: var(--glow); }
.tile.typed { background: var(--typed); color: var(--typed-ink); }
.tile.filled { background: var(--filled); }
.tile.missed { background: var(--missed); color: var(--missed-ink); }
.tile.wrong { background: var(--wrong); color: var(--cream); }
.solving .tile.letter[role='button'] { cursor: pointer; }
.tile.cursor { box-shadow: inset 0 -3px 0 var(--typed-ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { box-shadow: none; } }
.reduced .tile.cursor { animation: none; }
#category {
  height: 28px;
  margin-top: 4px;
  display: grid;
  place-items: center;
  background: var(--frame);
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
}

/* ---- the stage (SPEC 10.1, 7.1) ---- */
#stagebox {
  margin-top: 8px;
  height: clamp(160px, 26dvh, 320px);
  background: var(--night);
  display: grid;
  place-items: center;
  overflow: hidden;
}
#stage { image-rendering: pixelated; touch-action: none; display: block; }

/* ---- the status row ---- */
#status { height: 36px; display: flex; align-items: center; justify-content: space-between; }
#status[hidden] { display: none; }
.lbl { font-variant: small-caps; text-transform: lowercase; color: var(--muted); font-size: 15px; }
#bank-amt { font-weight: 700; font-size: 22px; color: var(--gold); font-variant-numeric: tabular-nums; }
#bank.wrong #bank-amt { color: var(--wrong); }
#slots { display: inline-flex; gap: 2px; }
.slot { width: 20px; text-align: center; color: var(--muted); display: inline-block; }
.slot.on { color: var(--wrong); font-weight: 700; }

/* ---- the panel ---- */
#panel { margin-top: 4px; padding: 12px 0 0; }
#message { min-height: 24px; margin: 0 0 8px; font-size: 16px; }
#actions { min-height: 56px; display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
#actions .btn { flex: 1; }
#actions .act-spin, #actions .act-go { flex: 2; }
.act-line { flex: 2; align-self: center; color: var(--muted); }

.btn {
  min-height: 48px;
  padding: 6px 12px;
  font: inherit;
  font-weight: 700;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}
.btn.primary { background: var(--gold); color: var(--ink); border: 2px solid var(--ink); }
.btn.secondary { background: transparent; color: var(--cream); border: 2px solid var(--cream); }
.btn[aria-disabled='true'] { opacity: 0.45; }
.act-sub { font-size: 13px; font-weight: 600; }
.digit { position: absolute; top: 2px; left: 5px; font-size: 11px; opacity: 0.8; }
.linkish { background: none; border: 0; color: var(--gold); text-decoration: underline; font: inherit; cursor: pointer; padding: 0 4px; }

/* ---- the keyboard (SPEC 10.5) ---- */
#keyboard { display: flex; flex-direction: column; gap: 5px; }
.krow { display: flex; gap: 5px; justify-content: center; }
.key {
  flex: 0 1 calc((100% - 45px) / 10);
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--key);
  color: var(--cream);
  font: 700 17px system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  position: relative;
  cursor: pointer;
}
.key.dead { opacity: 0.4; cursor: default; }
.key.hit { background: var(--key-used); color: var(--muted); }
.key.miss { background: linear-gradient(rgba(224, 72, 72, 0.35), rgba(224, 72, 72, 0.35)), var(--key-used); color: var(--cream); }
.key.hit::after, .key.miss::after { position: absolute; top: 1px; right: 4px; font-size: 10px; }
.key.hit::after { content: '✓'; }
.key.miss::after { content: '✗'; }

/* ---- the title view (SPEC 10.3) ---- */
.title-view { text-align: center; }
.wordmark-big { image-rendering: pixelated; display: block; margin: 0 auto 8px; }
.tagline { margin: 0 0 4px; font-weight: 700; }
.hosted { margin: 0 0 14px; color: var(--muted); }
.title-view .play { min-width: 200px; font-size: 18px; }
.intro { margin: 14px 0 12px; }
.howto-head { margin: 16px 0 8px; font-size: 1.1rem; }
.howto { margin: 0; padding-left: 1.25rem; text-align: left; }
.howto li, .howto-more li { margin-bottom: 8px; }
.statsline, .countdown { color: var(--muted); margin: 12px 0 0; text-align: center; }
.error { margin: 16px 0; }

/* ---- the results (SPEC 10.7) ---- */
#results-view { text-align: center; }
.headline { margin: 4px 0; font-size: 28px; letter-spacing: 0.08em; }
.headline.won { color: var(--gold); }
.headline:focus { outline: none; }
.sub { margin: 0 0 12px; }
.everyone { background: var(--panel); padding: 12px; }
.winnings-label { margin: 0; color: var(--muted); }
.winnings { margin: 0; font-size: 32px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.beat, .solvedline, .letters { margin: 6px 0; }
.boxes { display: flex; gap: 8px; margin: 10px 0; }
.box { flex: 1; background: var(--panel-2); padding: 6px; display: flex; flex-direction: column; }
.box-label { font-size: 13px; color: var(--muted); }
.box-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.bars { margin: 12px 0 4px; text-align: left; }
.bars h3 { margin: 0 0 6px; font-size: 15px; text-align: center; }
.bar { display: grid; grid-template-columns: 7.5em 1fr 5.6em; gap: 6px; align-items: center; margin: 3px 0; font-size: 14px; }
.bars.dist .bar { grid-template-columns: 12em 1fr 3em; }
.bar-track { height: 14px; background: var(--panel-2); }
.bar-fill { display: block; height: 100%; background: var(--muted); }
.bar.mine .bar-fill { background: var(--gold); }
.bar.mine .bar-pct { color: var(--gold); font-weight: 700; }
.bar-pct { font-variant-numeric: tabular-nums; }
.yourgame h3 { margin: 14px 0 4px; }
.yourgame p { margin: 2px 0; }
.share-row { margin: 14px 0; display: flex; justify-content: center; align-items: center; gap: 10px; }
.toast { color: var(--gold); min-width: 4em; }
.enjoy { display: inline-block; margin: 6px 0; padding: 6px 12px; border: 2px dashed var(--gold); color: var(--gold); font-size: 14px; }

/* ---- panels (SPEC 10.8) ---- */
#sheet h2 { margin: 12px 0; }
#sheet h2:focus { outline: none; }
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; }
.statgrid div { display: flex; justify-content: space-between; background: var(--panel); padding: 6px 8px; }
.statgrid dd { margin: 0; font-weight: 700; }
.motion { border: 2px solid var(--frame); }
.motion label { display: block; padding: 6px 0; }

.foot { padding: 20px 0 24px; color: var(--muted); text-align: center; }
.foot p { margin: 0; }
a { color: var(--gold); }
:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }

.noscript { padding: 16px; text-align: center; }

@media (max-width: 359px) {
  .bar { grid-template-columns: 6.5em 1fr 5.2em; font-size: 13px; }
}