:root {
  --case:#bb3434; --case-dark:#7f1d1d; --case-light:#ef6a62;
  --lcd:#d8dfb6; --ink:#263426; --cream:#f4e9d0;
}
* { box-sizing:border-box; }
html,body { min-height:100%; }
body {
  margin:0;
  background:radial-gradient(circle at 50% -10%,#293548 0,#111827 45%,#080d16 100%);
  color:#fff;
  font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
button { font:inherit; }
.app-shell { min-height:100vh; display:grid; place-items:center; padding:max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
.game-card { width:min(100%,520px); padding:18px 16px 17px; border:1px solid rgba(255,255,255,.16); border-radius:30px; background:linear-gradient(155deg,var(--case-light),var(--case) 28%,var(--case-dark)); box-shadow:0 24px 70px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.28),inset 0 -3px rgba(0,0,0,.2); }
.game-header { display:flex; justify-content:space-between; gap:12px; align-items:end; padding:0 8px 12px; text-shadow:0 2px 0 rgba(0,0,0,.22); }
.eyebrow { margin:0 0 2px; font-size:11px; letter-spacing:.28em; font-weight:900; color:#ffd9bd; }
h1 { margin:0; font-size:clamp(30px,10vw,48px); line-height:.92; letter-spacing:-.045em; }
.scoreboard { display:flex; gap:12px; text-align:right; }
.scoreboard div { display:grid; }
.scoreboard span { font-size:9px; letter-spacing:.13em; font-weight:800; color:#ffd9bd; }
.scoreboard strong { font:800 23px/1.05 ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
.lcd-wrap { padding:9px; border-radius:23px; background:linear-gradient(145deg,#702025,#f06b63 45%,#762126); box-shadow:inset 0 0 0 2px rgba(65,13,13,.42),0 4px 10px rgba(0,0,0,.24); }
.lcd { position:relative; width:100%; aspect-ratio:100/118; overflow:hidden; border:5px solid #4e3d35; border-radius:15px; background:linear-gradient(rgba(38,52,38,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(38,52,38,.028) 1px,transparent 1px),radial-gradient(circle at 50% 48%,#e4e8c6,var(--lcd)); background-size:5px 5px,5px 5px,auto; box-shadow:inset 0 0 26px rgba(43,55,28,.18),0 1px rgba(255,255,255,.6); outline:none; }
.lcd:focus-visible { box-shadow:inset 0 0 26px rgba(43,55,28,.18),0 0 0 4px rgba(255,255,255,.4); }
.tracks { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:var(--ink); stroke-width:1.22; stroke-linecap:round; opacity:.80; }
.track-rungs { stroke-width:.72; opacity:.58; }
.hen { position:absolute; width:14%; height:11%; color:var(--ink); }
.hen span { position:absolute; left:8%; top:30%; width:62%; height:48%; border-radius:58% 45% 48% 52%; background:var(--ink); }
.hen span::before { content:""; position:absolute; right:-20%; top:-32%; width:42%; aspect-ratio:1; border-radius:50%; background:var(--ink); box-shadow:-8px -5px 0 -5px var(--ink),-2px -9px 0 -6px var(--ink); }
.hen span::after { content:""; position:absolute; right:-38%; top:-13%; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:9px solid var(--ink); }
.hen i { position:absolute; left:28%; bottom:5%; width:3px; height:22%; background:var(--ink); box-shadow:10px 0 0 var(--ink); }
.hen i::after { content:""; position:absolute; left:-5px; bottom:-2px; width:18px; border-top:2px solid var(--ink); }
.hen-ul { left:4%; top:8%; }
.hen-ur { right:4%; top:8%; transform:scaleX(-1); }
.hen-ll { left:4%; top:48%; }
.hen-lr { right:4%; top:48%; transform:scaleX(-1); }
.eggs { position:absolute; inset:0; pointer-events:none; }
.egg { position:absolute; width:4.4%; aspect-ratio:.76; border:2px solid var(--ink); border-radius:52% 52% 47% 47%/63% 63% 39% 39%; background:var(--lcd); transform:translate(-50%,-50%) rotate(var(--rot,0deg)); box-shadow:inset 1px 1px rgba(255,255,255,.18); transition:left var(--egg-move-ms,520ms) linear,top var(--egg-move-ms,520ms) linear,transform var(--egg-move-ms,520ms) linear; will-change:left,top,transform; z-index:2; }
.egg.no-motion { transition:none; }
.egg.fresh { animation:egg-appear 90ms linear; }
@keyframes egg-appear { from{opacity:.2} to{opacity:1} }

.catcher { position:absolute; left:50%; top:58%; width:30%; height:34%; transform:translate(-50%,-50%); color:var(--ink); transition:transform 80ms ease; z-index:3; }
.catcher.measuring,.catcher.measuring * { transition:none!important; animation:none!important; }
.catcher .body { position:absolute; z-index:2; left:32%; top:49%; width:38%; height:39%; border-radius:48% 48% 35% 35%; background:var(--ink); }
.catcher .head { position:absolute; z-index:4; left:27%; top:14%; width:46%; aspect-ratio:.98; border-radius:48% 48% 44% 44%; background:var(--ink); }
.catcher .ears i { position:absolute; top:2%; width:24%; aspect-ratio:.68; border-radius:70% 70% 38% 38%; background:var(--ink); transform-origin:bottom; z-index:3; }
.catcher .ears i:first-child { left:24%; transform:rotate(-22deg); } .catcher .ears i:last-child { right:21%; transform:rotate(25deg); }
.catcher .eye { position:absolute; top:32%; width:12%; aspect-ratio:.8; border-radius:50%; background:var(--lcd); }
.catcher .eye-l { left:25%; } .catcher .eye-r { right:25%; }
.catcher .nose { position:absolute; left:43%; top:59%; width:17%; aspect-ratio:1; border-radius:50%; background:var(--lcd); }
.catcher .arms { position:absolute; inset:0; z-index:3; pointer-events:none; }
.catcher .arm { position:absolute; height:4px; border-radius:999px; background:var(--ink); transform-origin:0 50%; }
.catcher .arm::after { content:""; position:absolute; right:-3px; top:50%; width:9px; height:9px; border-radius:50%; background:var(--ink); transform:translateY(-50%); }
.catcher .basket { position:absolute; z-index:5; width:34%; height:20%; border:3px solid var(--ink); border-top-width:2px; border-radius:5px 5px 45% 45%; background:rgba(216,223,182,.88); transform:none; transform-origin:50% 0%; }
.catcher .basket::before { content:""; position:absolute; left:11%; right:11%; top:-45%; height:56%; border:2px solid var(--ink); border-bottom:0; border-radius:50% 50% 0 0; }
.catcher .basket span { position:absolute; left:11%; right:11%; top:43%; border-top:1px solid var(--ink); }
.catcher .mouth-marker,.catcher .grip-marker { position:absolute; width:2px; height:2px; opacity:0; pointer-events:none; }
.catcher .mouth-marker { left:50%; top:0; transform:translate(-50%,-50%); }
.catcher .grip-a { left:22%; top:54%; transform:translate(-50%,-50%); }
.catcher .grip-b { left:78%; top:54%; transform:translate(-50%,-50%); }
.catcher.lane-ul .basket { left:-10%; top:28%; }
.catcher.lane-ll .basket { left:-10%; top:77%; }
.catcher.lane-ur .basket { right:-10%; top:28%; }
.catcher.lane-lr .basket { right:-10%; top:77%; }
.catcher.catch { transform:translate(-50%,-50%) scale(1.045); }

.misses { position:absolute; left:50%; bottom:3.5%; transform:translateX(-50%); display:flex; gap:7px; color:var(--ink); font:900 19px/1 ui-monospace,monospace; }
.misses span.used { color:var(--ink); font-size:0; } .misses span.used::before { content:"×"; font-size:19px; }
.board-message { position:absolute; inset:37% 18% auto; min-height:19%; display:grid; place-content:center; text-align:center; color:var(--ink); background:rgba(216,223,182,.90); border:2px solid rgba(38,52,38,.68); border-radius:10px; box-shadow:0 3px 0 rgba(38,52,38,.14); z-index:6; }
.board-message strong { font:900 clamp(25px,8vw,41px)/.95 ui-monospace,monospace; text-transform:uppercase; }
.board-message span { margin-top:7px; font-size:clamp(12px,3.5vw,16px); font-weight:800; letter-spacing:.04em; }
.board-message.hidden { display:none; }
.controls { display:grid; grid-template-columns:1fr 1fr; gap:10px 48px; width:min(88%,390px); margin:18px auto 0; }
.control { min-height:60px; border:0; border-radius:50%; color:#3f1918; background:radial-gradient(circle at 34% 27%,#fff0d4 0 13%,var(--cream) 14% 58%,#bda47e 100%); box-shadow:0 6px 0 #6c2422,0 9px 14px rgba(0,0,0,.3),inset 0 2px 4px rgba(255,255,255,.75); cursor:pointer; touch-action:manipulation; }
.control span { font-size:29px; font-weight:900; vertical-align:middle; } .control small { margin-left:5px; font:900 10px/1 ui-monospace,monospace; opacity:.55; }
.control.active,.control:active { transform:translateY(4px); box-shadow:0 2px 0 #6c2422,0 4px 8px rgba(0,0,0,.28),inset 0 2px 4px rgba(255,255,255,.65); }
.control:focus-visible,.action:focus-visible,.version:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:19px; }
.action { min-height:44px; padding:0 17px; border-radius:999px; border:2px solid rgba(255,255,255,.5); color:#fff; background:rgba(75,19,19,.42); font-size:12px; font-weight:900; letter-spacing:.09em; cursor:pointer; }
.action.primary { background:#f2d9a9; color:#4e1b18; border-color:#fff1d4; box-shadow:0 3px 0 #6d2421; }
.action:active { transform:translateY(2px); }
.hint { margin:15px 8px 0; text-align:center; color:#ffd9bd; font-size:11px; line-height:1.4; }
.version { display:block; margin:7px auto 0; padding:5px 10px; border:0; border-radius:999px; background:transparent; color:rgba(255,217,189,.72); font:800 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; cursor:pointer; touch-action:manipulation; }
.version:active { background:rgba(255,255,255,.08); color:#fff1d4; } .version:disabled { opacity:.65; cursor:wait; }
@media(max-width:380px){ .game-card{border-radius:24px;padding:14px 11px 14px}.game-header{padding-inline:5px}.scoreboard{gap:7px}.scoreboard strong{font-size:18px}.controls{gap:8px 34px;margin-top:14px}.control{min-height:54px} }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} }