:root { color-scheme: light; --paper:#fff; --ink:#000; --field:#e8edf3; --blue:#1758cc; --food:#d34a36; --muted:#536171; font-family: "Trebuchet MS", Arial, sans-serif; color:var(--ink); background:var(--field); }
* { box-sizing:border-box; }
body { margin:0; }
button,input,select { font:inherit; }
button,select,summary,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; border:1px solid #b1bac5; border-radius:7px; color:var(--ink); background:var(--paper); padding:.8rem 1rem; font-weight:600; }
button:hover:not(:disabled) { border-color:var(--ink); background:#f6f8fb; }
button:disabled { opacity:.48; cursor:wait; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,canvas:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
main { max-width:1250px; padding:0 45px; margin:auto; }
header { display:flex; justify-content:space-between; align-items:center; padding:33px 0 31px; }
a { color:inherit; text-underline-offset:4px; }
.wordmark { position:relative; font-size:27px; font-weight:900; letter-spacing:-1.4px; text-decoration:none; }
.wordmark-tail { display:inline-block; width:8px; height:8px; background:var(--blue); margin-left:7px; box-shadow:8px 0 var(--blue),8px -8px var(--blue); }
.header-note { font-size:14px; color:var(--muted); }
.game-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(285px,1fr); gap:62px; align-items:center; }
.play-area { min-width:0; }
.board-header { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:15px; margin-bottom:13px; }
#status { color:var(--blue); font-weight:700; }
#score { font-variant-numeric:tabular-nums; }
.qr-frame { position:relative; background:white; padding:0; aspect-ratio:1; overflow:hidden; border-radius:3px; box-shadow:0 8px 30px #1f36500d; touch-action:none; }
canvas { display:block; width:100%; height:100%; image-rendering:pixelated; }
#loading { position:absolute; inset:0; display:grid; place-content:center; font-size:15px; margin:0; background:#fff; padding:30px; text-align:center; }
#loading[hidden] { display:none; }
.board-caption { display:flex; align-items:center; gap:20px; color:var(--muted); font-size:12px; margin-top:14px; }
.board-caption>span { display:flex; align-items:center; gap:6px; }
.board-caption>span:last-child { margin-left:auto; }
.sample { display:inline-block; width:12px; height:12px; background:#123d70; }
.food-sample { background:#8c2418; clip-path:polygon(33% 0,66% 0,66% 33%,100% 33%,100% 66%,66% 66%,66% 100%,33% 100%,33% 66%,0 66%,0 33%,33% 33%); }
.monochrome .sample { background:#000; }
.view-options { display:flex; gap:20px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin:-8px 0 17px; grid-column:1 / -1; }
.view-options label { display:flex; align-items:center; gap:8px; }
.view-options input { width:16px; height:16px; accent-color:var(--blue); margin:0; }
h1 { font-size:clamp(32px,4.5vw,52px); line-height:1.02; letter-spacing:-2px; margin:0 0 21px; font-weight:800; }
.intro { max-width:34ch; color:#35465b; font-size:16px; line-height:1.6; margin:0 0 25px; }
.primary-controls { display:flex; gap:10px; }
.primary-controls>button { flex:1; white-space:nowrap; }
button.primary { background:var(--blue); border-color:var(--blue); color:white; }
button.primary:hover:not(:disabled) { background:#1047a8; border-color:#1047a8; }
.hint { font-size:12px; color:var(--muted); min-height:32px; line-height:1.5; margin:13px 0 8px; }
.dpad { display:grid; width:158px; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,46px); gap:5px; margin:0 0 22px; }
.dpad button { padding:0; font-size:24px; touch-action:manipulation; }
.up { grid-column:2; }.left { grid-row:2;grid-column:1; }.down { grid-row:2;grid-column:2; }.right { grid-row:2;grid-column:3; }
.game-options { display:flex; align-items:center; gap:12px; margin:0 0 22px; font-size:13px; }
select { border:1px solid #b1bac5; border-radius:5px; background:transparent; padding:7px 20px 7px 9px; color:#000; }
.text-button { margin-left:auto; border:0; padding:6px 0 6px 6px; text-decoration:underline; text-underline-offset:4px; background:transparent; font-weight:normal; }
.share-controls { display:flex; gap:9px; }
.share-controls button { flex:1; font-size:12px; padding:11px 8px; }
.feedback { color:var(--blue); font-size:12px; line-height:1.5; min-height:18px; margin:9px 0 13px; }
.feedback.error { color:#9c291a; }
details { color:var(--muted); font-size:12px; }
summary { cursor:pointer; width:fit-content; }
details p { line-height:1.5; max-width:43ch; }
form { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
form label { width:100%; }
input { min-width:0; width:100%; padding:9px; background:#fff; border:1px solid #b1bac5; border-radius:4px; font-size:12px; }
form button { font-size:12px; padding:8px 11px; }
footer { display:flex; justify-content:space-between; color:var(--muted); gap:20px; font-size:12px; padding:31px 0 25px; }
@media(min-width:1400px) { main { padding-top:15px; } }
@media(max-width:900px) { main { padding:0 24px; }.game-layout { gap:28px; grid-template-columns:minmax(0,1.3fr) minmax(265px,1fr); }h1 { font-size:37px; } .intro { font-size:14px; }.board-caption>span:last-child { display:none; } }
@media(max-width:650px) { main { max-width:480px; padding:0 18px; }header { padding:22px 0; }.header-note { font-size:11px; }.wordmark { font-size:24px; }.game-layout { display:flex; flex-direction:column; gap:23px; align-items:stretch; }.board-header { font-size:13px; margin-bottom:9px; }.board-caption { margin-top:10px; }.board-caption>span:last-child { display:flex; font-size:10px; }h1 { display:none; }.intro { font-size:13px; margin:0 0 15px; max-width:none; }.controls { display:grid; grid-template-columns:1fr 140px; column-gap:17px; align-items:start; }.intro,.game-options,.mono-option,.share-controls,.feedback,details { grid-column:1 / -1; }.primary-controls { grid-column:1; flex-direction:column; }.primary-controls button { padding:11px; }.hint { grid-column:1; margin-top:9px; }.dpad { grid-column:2; grid-row:2 / 4; width:140px; margin:12px 0 0; }.game-options { margin-bottom:17px; }.share-controls button { font-size:13px; }footer { padding-top:24px; font-size:11px; }.qr-frame { box-shadow:none; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }
/* Desktop uses the available width; the board leaves room for its controls. */
@media(min-width:1100px) {
  main { max-width:1720px; padding:16px 32px 12px; }
  header { padding:8px 0 18px; }
  .game-layout { grid-template-columns:minmax(0,min(58vw,calc(100dvh - 190px))) minmax(340px,1fr); gap:40px; align-items:start; }
  .controls { max-width:650px; align-self:center; }
  h1 { font-size:38px; margin-bottom:12px; }
  .intro { max-width:52ch; font-size:14px; line-height:1.45; margin-bottom:14px; }
  .hint { min-height:0; margin:8px 0; }
  .dpad { margin-bottom:12px; }
  .game-options { margin-bottom:12px; }
  .view-options { margin:0 0 12px; }
  .feedback { margin:6px 0; }
  footer { padding:18px 0 8px; }
}