:root{--dpad-zone:200px;--dpad-ratio:1.8;--dpad-gap:13.5%}*{box-sizing:border-box}html,body{color:#e5e7eb;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#0b1020;height:100%;margin:0;padding:0;font-family:system-ui,sans-serif}body{justify-content:center;align-items:center;display:flex;overflow:hidden}#field{background:#0b1020;display:block}.overlay{text-align:center;touch-action:pan-y;background:#0b1020d9;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:2rem;display:flex;position:fixed;inset:0;overflow-y:auto}.overlay.hidden{display:none}.overlay h1{letter-spacing:.1em;margin:0;font-size:3rem}.overlay h2{margin:0;font-size:2rem}.overlay form{flex-direction:column;align-items:stretch;gap:.75rem;min-width:16rem;display:flex}.overlay label{justify-content:space-between;align-items:center;gap:1rem;display:flex}.overlay input,.overlay select{width:6rem;color:inherit;font:inherit;background:#1f2937;border:1px solid #374151;border-radius:4px;padding:.25rem .5rem}.overlay button{color:#0b1020;font:inherit;cursor:pointer;background:#4ade80;border:none;border-radius:4px;padding:.5rem 1rem;font-weight:600}.overlay button:disabled{color:#6b7280;cursor:not-allowed;background:#374151}.hint{opacity:.7;font-size:.9rem}.last-round{opacity:.8}#touch-controls,.overlay .touch-only{display:none}@media (pointer:coarse){body.seating-side-by-side{padding-bottom:var(--dpad-zone)}body.seating-facing{padding-top:var(--dpad-zone);padding-bottom:var(--dpad-zone)}#touch-controls{pointer-events:none;display:block;position:fixed;inset:0}.overlay .touch-only{display:flex}}.dpad{height:calc(var(--dpad-zone) - 1rem);aspect-ratio:var(--dpad-ratio);pointer-events:auto;opacity:.55;position:absolute}.seating-side-by-side #dpad-p1{bottom:.5rem;left:1rem}.seating-side-by-side #dpad-p2{bottom:.5rem;right:1rem}.seating-facing #dpad-p1{bottom:.5rem;left:50%;transform:translate(-50%)}.seating-facing #dpad-p2{top:.5rem;left:50%;transform:translate(-50%)}.dpad button{color:inherit;font:inherit;touch-action:none;background:#1f2937;border:none;padding:1rem;font-size:1.5rem;line-height:1;display:flex;position:absolute;inset:0}.dpad button:active{background:#374151}#dpad-p1 button{color:#4ade80}#dpad-p2 button{color:#60a5fa}.dpad .up{clip-path:polygon(3px 3px, calc(100% - 3px) 3px, calc(50% + var(--dpad-gap) - 3px) calc(50% - 3px), calc(50% - var(--dpad-gap) + 3px) calc(50% - 3px));justify-content:center;align-items:flex-start}.dpad .down{clip-path:polygon(3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(50% + var(--dpad-gap) - 3px) calc(50% + 3px), calc(50% - var(--dpad-gap) + 3px) calc(50% + 3px));justify-content:center;align-items:flex-end}.dpad .left{clip-path:polygon(3px 3px, calc(50% - var(--dpad-gap) - 4px) 50%, 3px calc(100% - 3px));justify-content:flex-start;align-items:center}.dpad .right{clip-path:polygon(calc(100% - 3px) 3px, calc(50% + var(--dpad-gap) + 4px) 50%, calc(100% - 3px) calc(100% - 3px));justify-content:flex-end;align-items:center}