:root { color-scheme: light; font-family: ui-rounded, 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif; color: #403047; background: #f8ead5; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 20% 0, #fff6df, transparent 65%), #f8ead5; min-height: 100vh; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 4px solid #403047; outline-offset: 5px; }
.game-shell { width: min(1080px, 96%, max(680px, calc((100svh - 245px) * 1.47))); margin: 0 auto; padding: 22px 0 14px; }
.topbar { margin-bottom: 20px; }
.eyebrow { margin: 0 0 3px; color: #8c4c4e; font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(1.4rem, 3.3vw, 2.35rem); letter-spacing: -.05em; }
.restart { border: 2px solid #decbb8; background: #fff8e8; padding: 12px 18px; min-height: 48px; border-radius: 18px; font-weight: 800; }
.restart:hover { background: white; }
.bowling-room { position: relative; overflow: hidden; border: 3px solid #49354b; border-radius: 30px; box-shadow: 0 9px 0 #dfc9b4; background: #ffe9d3; }
.scene-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 28px 4px; }
.scene-heading h2 { margin: 0; font-size: clamp(1rem, 2.4vw, 1.6rem); letter-spacing: -.035em; }
.dots { display: flex; gap: 7px; flex-shrink: 0; }
.dot { width: 19px; height: 19px; border: 2px solid #755568; background: #fff8e8; border-radius: 50%; transition: background .2s; }
.dot.down { background: #549b8c; border-color: #366559; }
.dot.down::after { content: '✓'; display: block; color: white; font: 900 13px/15px sans-serif; text-align: center; }
.lane { display: block; position: relative; border: 0; padding: 0; width: 100%; background: transparent; overflow: hidden; }
.lane:focus-visible { outline-offset: -6px; border-radius: 20px; }
.lane[aria-disabled="true"] { cursor: default; }
canvas { display: block; width: 100%; aspect-ratio: 1000 / 680; }
.gesture { pointer-events: none; position: absolute; top: 57%; left: 61%; width: 66px; height: 80px; transform: rotate(-20deg); animation: tap-demo 2s ease-in-out infinite; }
.finger { position: absolute; font-size: 55px; filter: drop-shadow(0 3px 0 #59354733); }
.tap-ring { position: absolute; top: 0; left: 4px; width: 45px; height: 45px; border: 4px solid #fffbed; border-radius: 50%; box-shadow: 0 0 0 3px #594157; }
.lane.started .gesture { display: none; }
.room-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 12px 25px; background: #fff5e5; border-top: 2px solid #eacfb5; }
.room-footer p { margin: 0; font-weight: 800; font-size: .95rem; }
.club-label { font-size: .65rem; letter-spacing: .12em; font-weight: 900; color: #916864; }
.keyboard-help { text-align: center; color: #755e67; font-size: .8rem; margin: 19px 0 0; }
.celebration { position: absolute; z-index: 2; left: 50%; top: 52%; transform: translate(-50%, -50%); width: min(430px, 88%); padding: 22px; background: #fff9e9; border: 3px solid #403047; border-radius: 30px; text-align: center; box-shadow: 0 9px 0 #40304725; }
[hidden] { display: none !important; }
.celebration h2 { font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -.05em; margin: 2px 0 8px; }
.celebration p { margin: 0 0 20px; }
.party-star { color: #ed9262; font-size: 40px; }
#again { min-width: 180px; min-height: 62px; border: 3px solid #403047; border-radius: 20px; font-size: 1.5rem; font-weight: 900; background: #a9dac4; box-shadow: 0 5px 0 #403047; }
#again:active { transform: translateY(3px); box-shadow: 0 2px 0 #403047; }
@keyframes tap-demo { 0%, 100% { transform: translate(0, 5px) rotate(-20deg); opacity: .75; } 40%, 65% { transform: translate(-5px, -6px) rotate(-20deg); opacity: 1; } }
@media (max-width: 700px) {
  .game-shell { padding-top: 12px; }
  .game-shell .topbar:has(> .home-link) { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 9px; }
  body .game-shell .topbar:has(> .home-link) > button.restart { grid-column: auto; justify-self: end; }
  .restart { padding: 9px 12px; }
  .restart span { display: none; }
  .scene-heading { padding: 18px 15px 0; flex-direction: column; gap: 10px; }
  .dot { width: 17px; height: 17px; }
  .bowling-room { border-radius: 22px; }
  canvas { min-height: 360px; }
  .club-label { display: none; }
  .room-footer { justify-content: center; text-align: center; padding: 12px; }
  .keyboard-help { max-width: 290px; margin-inline: auto; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }