:root { --paper:#f8f4e7; --ink:#293b46; --muted:#68747a; --line:#d3dbd5; --accent:#b75033; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:radial-gradient(ellipse at 85% 0%, #e8e1c9, transparent 60%), repeating-linear-gradient(0deg, transparent 0 31px, #607b8010 31px 32px), var(--paper); font:15px/1.6 "Avenir Next", "Trebuchet MS", sans-serif; }
header, main { width:min(1160px, calc(100% - 48px)); margin:auto; }
header { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:26px 0 22px; }
h1, h2 { font-family:"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif; font-weight:normal; line-height:1.15; }
h1 { font-size:clamp(28px, 4vw, 38px); letter-spacing:-1px; margin:0; }
.label { color:var(--accent); font-size:12px; }
.toolbar, .toolbar > div, .mobile-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.toolbar { justify-content:space-between; margin-bottom:12px; gap:12px; }
button, select { font:inherit; font-size:13px; color:var(--ink); border:1px solid #aab5b2; border-radius:4px; padding:7px 12px; background:#fffaf0; cursor:pointer; }
button:hover:not(:disabled) { background:#ece7d5; border-color:var(--ink); }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
button[aria-pressed="false"]#toggle-marks, button[aria-pressed="false"]#toggle-hand { color:var(--muted); border-style:dashed; }
button kbd { margin-left:4px; border:0; padding:0; color:var(--muted); }
.play-area { position:relative; width:100%; aspect-ratio:11/7; background:var(--paper); border:1px solid #b4beb7; }
iframe { display:block; width:100%; height:100%; border:0; background:var(--paper); }
iframe:fullscreen { width:100vw; height:100vh; background:var(--paper); }
.cover { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px; background:radial-gradient(ellipse at center, #fffaf2, #f8f4e7d9); }
.cover p { margin:8px 0 0; color:var(--muted); font-size:13px; }
#start, #mobile-start { padding:10px 38px; background:var(--ink); border-color:var(--ink); color:white; font-size:16px; }
#start:hover, #mobile-start:hover { background:#3e545e; }
.small { color:var(--muted); font-size:12px; }
.status-row { display:flex; justify-content:space-between; gap:20px; font-size:12px; color:var(--muted); }
.status-row p { margin:10px 0; }
.controls { font-size:14px; margin:10px 0 22px; }
kbd { border:1px solid #c4cdc5; border-bottom-width:2px; border-radius:3px; padding:1px 5px; color:var(--ink); font:12px "Courier New", monospace; }
details { border-top:1px solid var(--line); padding:14px 0 24px; font-size:13px; color:var(--muted); }
summary { cursor:pointer; color:var(--ink); }
#mobile-landing { display:none; max-width:600px; margin:0 auto; }
#mobile-landing img { display:block; width:100%; height:auto; border:1px solid #b4beb7; }
#mobile-landing h2 { font-size:25px; margin:24px 0 10px; }
#mobile-landing p { margin:10px 0 20px; }
.mobile-actions button { min-height:44px; }
#mobile-link { color:var(--ink); overflow-wrap:anywhere; }
@media (max-width:700px) {
  header, main { width:calc(100% - 28px); }
  header { padding:22px 0; }
  .toolbar { justify-content:flex-start; }
  .status-row { flex-direction:column; gap:0; }
  .status-row p { margin:4px 0; }
}
@media (hover:none) and (pointer:coarse) {
  .toolbar button, select { min-height:44px; }
  body:not(.game-open) #mobile-landing { display:block; }
  body:not(.game-open) #desktop-game { display:none; }
}