#world{touch-action:none}.pass-charge{position:absolute;z-index:6;width:210px;pointer-events:none;border:1px solid #c5a779;background:#17273bef;border-radius:12px;padding:9px 11px;box-shadow:0 7px 25px #07111b66}.pass-charge[hidden]{display:none!important}.pass-charge strong{display:block;font-size:12px;color:#ffe0ad}.pass-charge small{display:block;font-size:10px;color:#acbed1;margin-top:4px}.pass-charge-track{height:9px;overflow:hidden;border-radius:5px;background:linear-gradient(to right,#305761 0 33.33%,#5c593b 33.33% 69%,#715047 69% 100%);margin:7px 0 4px}.pass-charge-track i{display:block;width:100%;height:100%;background:#ffc679;transform-origin:left center}.pass-charge-zones{display:flex;justify-content:space-between;color:#b4c7da;font-size:10px}.pass-charge[data-power='0'] .pass-charge-zones span:first-child,.pass-charge[data-power='1'] .pass-charge-zones span:nth-child(2),.pass-charge[data-power='2'] .pass-charge-zones span:last-child{color:#ffe3b3;font-weight:800}.pass-charge[data-target=ready]{border-color:#a8d6bc}.pass-charge[data-target=ready] strong{color:#caffde}
.gesture-hint{font-size:10px;color:#cdbb9e;margin:0;line-height:1.5}.commands .gesture-hint{grid-column:1/-1}.pass-gesture-active #execute{opacity:.55}
@media(max-height:600px) and (min-width:650px){.pass-charge{width:195px;padding:6px 9px}.pass-charge-track{margin:5px 0 3px}.pass-charge small{font-size:9px}.gesture-hint{font-size:9px}}

/* A small corner meter keeps the actual players and ball visible. */
.pass-charge{width:220px;padding:6px 9px;border-radius:9px}.pass-charge strong{font-size:11px;line-height:1.35}.pass-charge small{display:none}.pass-charge-track{height:6px;margin:5px 0 2px}.pass-charge-zones{font-size:9px;line-height:1.3}
.finish{position:fixed;inset:12px 8px;z-index:30;padding:12px;border-radius:12px}.finish .card{max-height:100%;overflow:auto;overscroll-behavior:contain}
@media(max-width:649px){.cover{position:fixed;inset:12px 8px;z-index:30;padding:12px;border-radius:12px}.cover .card{max-height:100%;overflow:auto}}
@media(max-height:600px) and (min-width:650px){
 .cover{padding:8px}.cover .card{width:min(740px,100%);max-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'overview steps' 'description description' 'modes modes' 'start start';gap:5px 12px;padding:10px 12px;overflow:auto}
 .cover .start-overview{grid-area:overview;align-self:center}.cover .start-overview .eyebrow{font-size:9px;letter-spacing:.4px}.cover .start-overview h1{font-size:22px;margin:2px 0}.cover .start-overview .intro-goal{font-size:12px;line-height:1.4;margin:3px 0}
 .cover .start-steps{grid-area:steps;display:grid;gap:4px;margin:0}.cover .start-steps li{font-size:10px;padding:4px 6px}.cover .start-steps b{display:inline;font-size:11px;margin-right:5px}
 .cover #mode-description{grid-area:description;font-size:10px;line-height:1.4;margin:0}.cover .mode-choice{grid-area:modes;margin:0;width:100%;max-width:none;flex-wrap:nowrap}.cover .mode-choice .quiet{min-height:38px;padding:5px;font-size:12px}
 .cover #start{grid-area:start;margin:0;min-height:44px}
}