/* Layout: HUD strip on top, a 2:3 farmyard stage fitted into the remaining height, joystick and swing button laid over the stage. Single committed look: dusk-green farm with straw-yellow accents. */
:root{
  --ink:#141d0e;
  --fg:#f4edd8;
  --muted:#b9c2a4;
  --straw:#f2c14e;
  --straw-deep:#a97d1c;
  --barn:#c0392b;
  --alert:#ff6b57;
  --line:rgba(244,237,216,.2);
  --display:'Russo One','Arial Black',Impact,sans-serif;
  --body:'Nunito','Segoe UI',system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%;box-sizing:border-box}
body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font:600 15px/1.4 var(--body);
  padding-block:10px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
.app{height:100%;max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.hud{display:flex;align-items:flex-end;gap:20px;flex:none}
.stat{display:flex;flex-direction:column;min-width:0}
.stat small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800}
.stat b{font:400 26px/1.05 var(--display);font-variant-numeric:tabular-nums;color:var(--fg)}
.stat.low b{color:var(--alert)}
.spacer{flex:1}
.mute{
  font:800 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1.5px solid var(--line);
  border-radius:8px;padding:8px 10px;cursor:pointer;
}
.mute[aria-pressed="true"]{text-decoration:line-through;opacity:.7}
.mute:focus-visible,.go:focus-visible,.swing:focus-visible{outline:3px solid #fff;outline-offset:2px}
.frame{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center}
.stage{
  position:relative;flex:none;overflow:hidden;border-radius:10px;
  background:#2f4f25;box-shadow:0 0 0 2px var(--line);
  container-type:inline-size;touch-action:none;
}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stick{
  /* fixed in the corner opposite the swing button; touches anywhere on the left half steer it */
  position:absolute;left:14px;bottom:10px;width:104px;height:104px;border-radius:50%;
  border:2px solid rgba(244,237,216,.4);
  background:rgba(244,237,216,.08);pointer-events:none;display:none;opacity:.55;
}
.stick.on{opacity:1;background:rgba(244,237,216,.14)}
.knob{
  position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;
  background:rgba(244,237,216,.7);transform:translate(-50%,-50%);
}
.swing{
  position:absolute;right:14px;bottom:14px;width:84px;height:84px;border-radius:50%;
  border:0;background:var(--straw);color:var(--ink);cursor:pointer;
  box-shadow:0 5px 0 var(--straw-deep);touch-action:none;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font:400 13px/1 var(--display);
}
.swing:active{transform:translateY(3px);box-shadow:0 2px 0 var(--straw-deep)}
.stage[data-state="play"] .stick{display:block}
.stage[data-state="play"] .swing{display:flex}
.overlay{
  position:absolute;inset:0;display:flex;padding:20px;overflow:auto;
  background:linear-gradient(180deg,rgba(20,29,14,.86),rgba(20,29,14,.95));
}
.sheet{margin:auto 0;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
h1{
  margin:0;font:400 40px/.95 var(--display);
  font-size:clamp(34px,13cqw,54px);
  color:var(--straw);text-shadow:3px 3px 0 var(--barn);text-wrap:balance;
}
.lead{margin:0;font-size:14px;color:var(--fg);max-width:34ch}
.small{margin:0;font-size:12.5px;color:var(--muted);max-width:38ch}
.kicker{margin:0;font:400 14px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;width:100%;max-width:290px}
.legend li{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:10px;font-size:14px}
.legend i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.legend b{font:400 13px/1 var(--display);color:var(--straw);font-variant-numeric:tabular-nums}
.go{
  font:400 20px/1 var(--display);padding:13px 30px;border:0;border-radius:10px;
  background:var(--straw);color:var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--straw-deep);
}
.go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--straw-deep)}
.big{font:400 64px/1 var(--display);color:var(--straw);font-variant-numeric:tabular-nums;text-shadow:3px 3px 0 var(--barn)}
.best{margin:0;font:400 15px/1.2 var(--display);color:var(--fg)}
@media (prefers-reduced-motion:reduce){.go:active,.swing:active{transform:none}}
/* Leaderboard + save form (server-side records). */
.board{width:100%;max-width:34ch}
.board ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;font:600 13px/1.3 var(--body);color:var(--fg)}
.board li{display:grid;grid-template-columns:2ch 1fr auto;gap:8px;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.25)}
.board li.me{background:var(--straw);color:var(--ink)}
.board li b{font-family:var(--display);font-weight:400;font-variant-numeric:tabular-nums}
.board h2{margin:0 0 6px;font:400 14px/1 var(--display);color:var(--straw)}
.board .note{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.save{display:flex;gap:8px;width:100%;max-width:34ch}
.save input[name=name]{flex:1;min-width:0;font:600 16px/1 var(--body);padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--fg)}
.save[hidden]{display:none}
.small-go{font-size:16px;padding:10px 16px}
/* Multiplayer lobby, results and connection notice. */
.overlay{overflow-y:auto}
.h-lobby{font-size:30px}
.roster{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;width:100%;max-width:34ch}
.roster li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(0,0,0,.3);font:800 15px/1.2 var(--body);color:var(--fg)}
.roster li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c,transparent);flex:none}
.roster li.empty{color:var(--muted);font-weight:600;border:1px dashed var(--line);background:none}
.roster li.empty::before{border:1px dashed var(--line)}
.roster li.me{outline:2px solid var(--straw)}
.results li span{flex:1}
.results li b{font:400 16px/1 var(--display);font-variant-numeric:tabular-nums}
.count{font:400 22px/1 var(--display);color:var(--straw)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ghost{font:800 15px/1 var(--body);padding:11px 16px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--fg);cursor:pointer}
.net{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:999px;background:rgba(20,29,14,.9);color:var(--fg);font:800 13px/1.2 var(--body);white-space:nowrap;z-index:5}
.toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);margin:0;padding:7px 14px;border-radius:999px;background:rgba(20,29,14,.85);color:var(--straw);font:800 13px/1.2 var(--body);white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;z-index:4;pointer-events:none}
/* connection dot in the HUD; tap for details */
.netdot{font:800 11px/1 var(--body);padding:6px 8px 6px 18px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--muted);position:relative;cursor:pointer;margin-right:6px;font-variant-numeric:tabular-nums}
.netdot::before{content:"";position:absolute;left:7px;top:50%;width:7px;height:7px;border-radius:50%;transform:translateY(-50%);background:#7bd36a}
.netdot[data-q="1"]::before{background:var(--straw)}
.netdot[data-q="2"]::before{background:var(--alert)}
.netpanel{position:absolute;right:10px;top:10px;margin:0;padding:10px 12px;border-radius:10px;background:rgba(20,29,14,.92);color:var(--fg);font:700 12px/1.45 var(--body);white-space:pre-line;z-index:6;max-width:80%;pointer-events:none}