.physics-prompt { font-size: clamp(1.6rem, 3.5vw, 2.8rem); font-weight: 800; text-align: center; }
.power-meter { position: relative; width: min(700px, 90vw); height: 56px; border-radius: 28px; border: 4px solid #fff; overflow: hidden; background: linear-gradient(90deg, #d4f7dc 0 34%, #fff3b8 34% 67%, #ffd0d0 67% 100%); }
.power-meter-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #22c55e 0 34%, #facc15 34% 67%, #ef4444 67% 100%); background-size: min(700px, 90vw) 100%; transition: width 0.04s linear; }
.power-meter-marks { position: absolute; inset: 0; display: flex; align-items: center; font-weight: 800; font-size: 1.6rem; color: #1b1f3a; }
.power-meter-marks span { flex: 1; text-align: center; }
.hit-button { padding: 18px 40px; font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 800; border-radius: 28px; border: 4px solid #fff; background: linear-gradient(180deg, #ff4b4b, #b00020); color: #fff; cursor: pointer; touch-action: none; user-select: none; transition: transform 0.15s; }
.hit-button.holding { transform: scale(0.94); }
.hit-button.correct { background: linear-gradient(180deg, #4cd964, #1b8a2f); }
.hit-button.wrong { background: linear-gradient(180deg, #8a8fb0, #565a78); }
.hit-button:disabled { cursor: default; }
.court-player.charging { transform: translateX(calc(var(--charge, 0) * -0.3px)) rotate(calc(var(--charge, 0) * -0.5deg)); }
.power-button { display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(120px, 16vw, 220px); font-size: clamp(24px, 3.5vw, 48px); line-height: 1.1; }
.power-button small { font-size: clamp(18px, 2.4vw, 32px); }

.court { position: relative; width: min(900px, 94vw); height: clamp(150px, 26vh, 260px); border-radius: 24px; background: linear-gradient(180deg, #2e9e4f, #1b6e34); border: 4px solid #fff; overflow: hidden; }
.court-player { position: absolute; left: 3%; bottom: 8%; font-size: clamp(2.5rem, 6vw, 4.5rem); }
.court-net { position: absolute; left: 30%; bottom: 0; width: 8px; height: 70%; background: repeating-linear-gradient(0deg, #fff 0 6px, #ccc 6px 12px); }
.court-zone { position: absolute; bottom: 8%; height: 40%; border: 3px dashed rgba(255,255,255,0.6); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: clamp(2rem, 5vw, 3.5rem); }
.zone-1 { left: 36%; width: 17%; }
.zone-2 { left: 55%; width: 17%; }
.zone-3 { left: 74%; width: 17%; }
.court-zone.target { background: rgba(255, 213, 74, 0.35); border-color: #ffd54a; }
.shuttle { position: absolute; left: 10%; bottom: 20%; width: 46px; height: 26px; display: flex; align-items: center; transform: translateX(-50%); animation-duration: 0.9s; animation-timing-function: linear; animation-fill-mode: forwards; }
.shuttle-cork { order: 2; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e8c27a 70%, #b8863b); border: 2px solid #8a6a3b; box-sizing: border-box; flex: none; }
.shuttle-feathers { order: 1; width: 32px; height: 26px; background: repeating-linear-gradient(0deg, #fff 0 3px, #dfe6f2 3px 6px); clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); border-radius: 4px; margin-right: -4px; }
.shuttle.shot-1 { animation-name: shuttle-1; }
.shuttle.shot-2 { animation-name: shuttle-2; }
.shuttle.shot-3 { animation-name: shuttle-3; }
@keyframes shuttle-1 { 0% { left: 10%; bottom: 25%; } 50% { left: 27%; bottom: 65%; } 100% { left: 44.5%; bottom: 20%; } }
@keyframes shuttle-2 { 0% { left: 10%; bottom: 25%; } 50% { left: 37%; bottom: 80%; } 100% { left: 63.5%; bottom: 20%; } }
@keyframes shuttle-3 { 0% { left: 10%; bottom: 25%; } 50% { left: 46%; bottom: 90%; } 100% { left: 82.5%; bottom: 20%; } }

.lego-block { position: relative; height: calc(40px * var(--s, 1)); border-radius: 6px; border: 2px solid rgba(0,0,0,0.25); display: flex; justify-content: space-around; align-items: flex-start; box-shadow: inset 0 -6px 0 rgba(0,0,0,0.2); margin-top: calc(14px * var(--s, 1)); box-sizing: border-box; }
.lego-stud { width: calc(22px * var(--s, 1)); height: calc(14px * var(--s, 1)); margin-top: calc(-14px * var(--s, 1)); border-radius: 6px 6px 0 0; background: inherit; border: 2px solid rgba(0,0,0,0.25); border-bottom: 0; box-sizing: border-box; }

.seesaw-wrap { position: relative; width: min(600px, 94vw); height: clamp(170px, 26vh, 240px); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.seesaw { position: relative; width: 100%; height: 14px; background: #c98a3b; border-radius: 8px; transition: transform 0.8s ease-in-out; }
.seesaw.tilt-left { transform: rotate(-8deg); }
.seesaw.tilt-right { transform: rotate(8deg); }
.seesaw-block { position: absolute; bottom: 14px; }
.seesaw-block.left { left: 6%; }
.seesaw-block.right { right: 6%; }
.seesaw-pivot { font-size: 3rem; line-height: 1; margin-top: -6px; }

.ramps { display: flex; gap: clamp(20px, 5vw, 80px); flex-wrap: wrap; justify-content: center; zoom: 1.5; }
.ramp-box { width: min(380px, 30vw); height: 170px; position: relative; border-bottom: 6px solid #8a6a3b; }
.ramp { position: absolute; left: 5%; bottom: 0; width: 40%; transform-origin: bottom right; background: #c98a3b; border-radius: 6px; height: 12px; }
.ramp-low { transform: rotate(14deg); }
.ramp-high { transform: rotate(32deg); }
.lego-slider { position: absolute; transform-origin: bottom left; animation-duration: 1.4s; animation-timing-function: ease-in; animation-fill-mode: forwards; }
.lego-slider.s-low { left: 7%; bottom: 46px; transform: rotate(14deg); }
.lego-slider.s-high { left: 12%; bottom: 88px; transform: rotate(32deg); }
.lego-slider.s-low.go { animation-name: slide-low; }
.lego-slider.s-high.go { animation-name: slide-high; }
@keyframes slide-low { 0% { left: 7%; bottom: 46px; transform: rotate(14deg); } 45% { left: 45%; bottom: 0; transform: rotate(0deg); } 100% { left: 52%; bottom: 0; transform: rotate(0deg); } }
@keyframes slide-high { 0% { left: 12%; bottom: 88px; transform: rotate(32deg); } 45% { left: 45%; bottom: 0; transform: rotate(0deg); } 100% { left: 68%; bottom: 0; transform: rotate(0deg); } }