:root { --paper:#f3eee5; --ink:#342721; --muted:#76675e; --pink:#ec88a6; --yellow:#f4d35e; --line:#342721; }
html, body { width:100%; height:100%; overflow:hidden; background:var(--paper); }
body { min-height:100dvh; }
button { min-width:48px; min-height:48px; border:2px solid var(--line); border-radius:999px; background:#fffaf3; color:var(--ink); cursor:pointer; touch-action:manipulation; }
button:active { background:var(--yellow); }
.game-shell { width:min(100%, 700px); height:100dvh; margin:auto; padding:12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:10px; }
.game-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.game-header h1 { margin:0; text-align:center; font-size:clamp(1rem, 4vw, 1.4rem); letter-spacing:.06em; }
.text-link { color:var(--ink); font-size:.75rem; font-weight:800; text-decoration:none; }
.level-pill { justify-self:end; font-size:.72rem; font-weight:800; }
.hud { display:flex; justify-content:space-between; align-items:center; border-block:2px solid var(--line); padding:8px 0; text-transform:uppercase; font-size:.72rem; letter-spacing:.06em; }
.hud strong { font-size:1rem; margin-left:4px; }
.target-guide { display:flex; align-items:center; gap:4px; min-width:0; }
.target-guide strong { max-width:9ch; overflow-wrap:anywhere; font-size:.72rem; }
.target-guide img { width:42px; height:42px; object-fit:contain; flex:0 0 42px; }
.playfield { position:relative; min-height:0; overflow:hidden; border:2px solid var(--line); border-radius:28px; background:#f9f5ed; isolation:isolate; }
.lane-guide { position:absolute; inset:5% 8% 14%; display:flex; justify-content:space-around; background-image:linear-gradient(to right, transparent 0 calc(100% - 1px), rgba(52,39,33,.12) calc(100% - 1px) 100%); background-size:calc(100% / var(--lanes, 2)) 100%; }
.catch-zone { position:absolute; left:50%; bottom:2%; width:42%; height:23%; display:flex; align-items:end; justify-content:center; pointer-events:none; transform:translateX(-50%); }
.catch-zone img:first-child { position:absolute; width:82%; height:100%; object-fit:contain; }
.catch-zone img:last-child { position:relative; width:min(50%, 150px); height:100%; object-fit:contain; }
.falling-doll { position:absolute; width:min(34%, 156px); aspect-ratio:1; object-fit:contain; transform:translateX(-50%); transition:none; }
.controls { display:flex; justify-content:center; gap:18px; }
.controls button { font-size:1.6rem; font-weight:800; }
.result-screen { position:fixed; inset:0; z-index:3; display:grid; place-items:center; align-content:center; gap:8px; padding:24px max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background:var(--paper); text-align:center; }
.result-screen[hidden] { display:none; }
.result-screen > img { width:min(82vw, 420px); height:min(54vh, 420px); object-fit:contain; }
.result-copy { display:grid; gap:6px; justify-items:center; }
.result-copy p, .result-copy h2 { margin:0; }
.result-copy h2 { font-size:clamp(2rem, 9vw, 4rem); letter-spacing:.04em; }
.result-kicker { font-size:.8rem; font-weight:800; letter-spacing:.12em; }
.result-actions { display:flex; gap:10px; margin-top:8px; }
.result-actions button { padding:8px 18px; font-weight:800; }
@media (max-width:667px) and (orientation:landscape) {
  .game-shell { padding-top:8px; gap:5px; grid-template-rows:auto auto minmax(0,1fr) auto; }
  .playfield { border-radius:18px; }
  .catch-zone { height:28%; }
  .controls { gap:10px; }
  .result-screen {
    grid-template-columns:minmax(0, 45%) minmax(0, 1fr);
    place-items:center;
    align-content:stretch;
    gap:8px;
    padding:8px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .result-screen > img { width:100%; height:calc(100dvh - 16px); max-height:340px; }
  .result-copy { align-self:center; gap:4px; min-width:0; }
  .result-copy h2 { font-size:clamp(2rem, 7vw, 3rem); line-height:.95; }
  .result-actions { margin-top:4px; }
}
@media (prefers-reduced-motion: reduce) { .falling-doll { transition:none; } }