:root {
  font-family: "Trebuchet MS", system-ui, sans-serif;
  color: #27351f;
  background: #fff3c4;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; padding: 1rem; background: radial-gradient(circle at 20% 0%, #fffdf0, #ffe6a1); }
.shell { width: min(100%, 1020px); margin: auto; }
.topbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: .5rem 0 .8rem; }
.eyebrow { margin: 0; color: #da6b28; font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
h1 { margin: .15rem 0 0; color: #315c35; font-size: clamp(1.6rem, 5vw, 2.7rem); }
.score-card { border: 3px solid #e7a62c; border-radius: 999px; background: #fff9dc; padding: .65rem 1rem; color: #9a551f; font-weight: 800; white-space: nowrap; }
.score-card strong { color: #315c35; font-size: 1.35rem; margin-left: .35rem; }
.game-panel { position: relative; overflow: hidden; border: 5px solid #fff; border-radius: 20px; box-shadow: 0 8px 0 #d49a3b, 0 14px 30px #b8783040; background: #8ddcf2; }
canvas { display: block; width: 100%; height: auto; }
.status { position: absolute; top: .8rem; left: 50%; transform: translateX(-50%); border-radius: 999px; padding: .45rem .9rem; background: #ffffffe8; color: #315c35; font-weight: 800; pointer-events: none; white-space: nowrap; }
.controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .7rem 1rem; padding: 1.1rem .3rem; color: #5d642f; }
.controls p { margin: 0; }
button { border: 0; border-radius: 999px; padding: .75rem 1.1rem; background: #e66b36; color: white; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 #ad4725; }
button:active { transform: translateY(3px); box-shadow: 0 1px 0 #ad4725; }
button.secondary { background: #5e9d59; box-shadow: 0 4px 0 #39703a; }
@media (max-width: 560px) { body { padding: .55rem; } .topbar { align-items: start; flex-direction: column; } .score-card { align-self: stretch; text-align: center; } .status { font-size: .78rem; } .controls { font-size: .85rem; } }