:root{
  --sky-top:#F0E4C4;
  --sky-bottom:#E6CE9A;
  --sun:#E8A93A;
  --grass:#63804A;
  --grass-dark:#4E6B3A;
  --soil:#7A5230;
  --soil-dark:#3A2415;
  --amber:#B5601F;
  --amber-light:#D98A3D;
  --cream:#FBF6EA;
  --ink:#2B2013;
  --ink-soft:#6B5A44;
  --line:#D8C7A4;
  --safe:#3F6E52;
  --danger:#A6362B;
  --white-piece:#EFE3C7;
  --white-piece-line:#4A3220;
  --black-piece:#241A10;
  --black-piece-line:#0E0A05;
  color-scheme: light;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--cream);
  color:var(--ink);
  font-family:"IBM Plex Mono", "SF Mono", Consolas, monospace;
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; }
button:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

.wrap{ max-width:900px; margin:0 auto; padding:24px 20px 48px; }

h1{
  font-family:"Big Shoulders Display", sans-serif;
  text-transform:uppercase; letter-spacing:0.02em;
  font-size:clamp(1.7rem,4vw,2.3rem); font-weight:800;
  margin:0 0 4px; text-wrap:balance;
}
.subtitle{ font-size:12.5px; color:var(--ink-soft); margin:0 0 18px; }

.back-link{ display:inline-block; font-size:12px; color:var(--ink-soft); text-decoration:underline; margin-bottom:14px; }

.stage-frame{
  position:relative;
  border-radius:14px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow: 0 6px 22px rgba(58,36,21,0.18);
  background:var(--sky-top);
  touch-action:none;
}
canvas{ display:block; width:100%; height:auto; }

.hud{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  pointer-events:none;
}
.score{
  font-family:"Big Shoulders Display", sans-serif;
  font-weight:800; font-size:1.6rem; letter-spacing:0.02em;
  color:var(--cream);
  text-shadow:0 2px 4px rgba(43,32,19,0.55);
  display:flex; align-items:center; gap:10px;
  font-variant-numeric: tabular-nums;
}
.score .dash{ color:rgba(251,246,234,0.6); font-size:1.1rem; }
.timer{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.95rem; font-weight:600; color:var(--cream);
  background:rgba(58,36,21,0.45); border-radius:20px; padding:5px 14px;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
  font-variant-numeric: tabular-nums;
}

.overlay{
  position:absolute; inset:0;
  background:rgba(43,32,19,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.overlay .panel{
  background:#fff; border-radius:14px; padding:26px 28px;
  max-width:340px; width:100%; text-align:center;
  display:flex; flex-direction:column; gap:14px;
}
.overlay h2{
  font-family:"Big Shoulders Display", sans-serif;
  text-transform:uppercase; letter-spacing:0.02em;
  font-size:1.4rem; font-weight:800; margin:0; color:var(--ink);
}
.overlay p{ font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.6; }
.btn{
  border:1px solid var(--amber); background:var(--amber); color:var(--cream);
  border-radius:8px; padding:11px 20px; cursor:pointer; font-size:13.5px;
  font-weight:600; font-family:"IBM Plex Mono",monospace;
}
.btn:hover{ background:var(--amber-light); }
.btn:active{ transform:scale(0.97); }

.controls-hint{
  display:flex; justify-content:center; gap:22px; flex-wrap:wrap;
  margin-top:14px; font-size:11.5px; color:var(--ink-soft);
}
.controls-hint kbd{
  font-family:"IBM Plex Mono",monospace; background:#fff; border:1px solid var(--line);
  border-radius:5px; padding:2px 7px; font-size:11px; color:var(--ink);
}

footer{ margin-top:22px; font-size:11px; color:var(--ink-soft); text-align:center; }

[hidden]{ display:none !important; }