.controls{max-width:700px;align-items:end}.dpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px);gap:5px}.controls .dpad button{width:58px;height:58px;border-radius:15px;font-size:24px}.dpad #up{grid-column:2}.dpad #left{grid-column:1;grid-row:2}.dpad #down{grid-column:2;grid-row:2}.dpad #right{grid-column:3;grid-row:2}.controls #butter{width:132px;height:92px;background:#ffce45;border-color:#ba8520;color:#3c205a;font-size:25px}.controls #butter small{font-size:14px}.controls button.demo-key{background:#ffce45;outline:4px solid white;opacity:1}.labels span{font-size:12px}#ball{background:#fff1df;color:#a64311}#slot{background:#173c31de;color:#fff8b6;border:1px solid #fff5ad;font-size:12px}#cue{font-size:16px;margin-bottom:9px;min-height:38px;display:flex;align-items:center;justify-content:center}.overlay{padding:130px 15px 178px}.card{max-width:380px}.card p{margin:12px 0}.brand small{font-size:12px}.welcome-badge{width:62px;height:62px}#sub{font-size:14px!important}.scores span{font-size:14px}.controls #butter:disabled{opacity:.6}.progress .loss{background:#9a452d}.help-note{line-height:1.4}#exit-demo{font-size:14px!important}.demo-banner{position:absolute;top:150px;left:50%;transform:translateX(-50%);background:#ffc43b;color:#352047;padding:8px 14px;border-radius:12px;font-size:14px;font-weight:900;white-space:nowrap}.demo-banner[hidden]{display:none}@media(max-height:700px){.overlay{padding-top:105px;padding-bottom:170px}.welcome-badge{display:none}.card h1{font-size:26px}.card p{font-size:16px}.card{padding:14px}.demo-banner{top:130px}}@media(orientation:landscape) and (max-height:600px){header{max-width:340px}.overlay{padding:15px 210px}.bottom{padding:10px 18px}.controls{max-width:none}.demo-banner{top:12px;left:auto;right:20px;transform:none}#cue{position:absolute;bottom:10px;left:165px;right:215px;display:flex;font-size:14px}.card{max-width:400px}.card p{font-size:16px}.controls #butter{height:78px}.dpad{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,48px)}.controls .dpad button{width:52px;height:48px}}

.labels #butter-shout{background:#ffcf43;color:#3d1559;border:3px solid #fff8e3;border-radius:16px;padding:9px 15px;font-size:25px;font-weight:1000;font-style:italic;letter-spacing:1px;box-shadow:0 4px 0 #3d1559,0 7px 16px #0004;z-index:2;transform:translate(-50%,-100%) rotate(-6deg)}
.labels #butter-shout::after{content:"";position:absolute;bottom:-13px;left:48%;border-left:9px solid transparent;border-right:9px solid transparent;border-top:13px solid #ffcf43}
.labels #butter-shout.shouting{animation:butter-pop .22s ease-out}
.labels #butter-shout[hidden]{display:none}
@keyframes butter-pop{from{transform:translate(-50%,-100%) rotate(-12deg) scale(.5)}to{transform:translate(-50%,-100%) rotate(-6deg) scale(1)}}

/* Keep both start choices visible while longer instructions can scroll. */
.card{display:flex;flex-direction:column;overflow:hidden;padding:18px;gap:14px}
.card-content{min-height:0;overflow:auto;overscroll-behavior:contain}
.card-actions{display:flex;gap:10px;flex-shrink:0}
.card-actions button,.card-actions .secondary{flex:1;min-width:0;width:auto;margin:0;padding:12px 8px;min-height:52px;font-size:17px;line-height:1.2}
.card-actions .secondary{background:#ffcf43;color:#3d1559;border:2px solid #b7821c}
@media(max-height:740px){.card{padding:14px;gap:10px}.card-content .welcome-badge,.card-content .howto,.card-content #sub{display:none}.card-content h1{margin:6px 0;font-size:26px}.card-content p{margin:8px 0}.card-content .reward:empty{display:none}}
@media(orientation:landscape) and (max-height:600px){.overlay{padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));z-index:3}.card{max-width:400px}.card-content .reward{display:none}}

/* Rapid taps and long presses should operate the game, never select its text. */
html,body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

#joystick{position:relative;width:142px;height:142px;flex:0 0 142px;border:2px solid #ffffff70;border-radius:50%;background:#ffffff12;box-shadow:inset 0 0 24px #ffffff10;touch-action:none;cursor:grab;outline-offset:4px}
#joystick:focus-visible{outline:3px solid #ffcf43}
#joystick.active{border-color:#fffbe0;background:#ffffff20;cursor:grabbing}
#joystick[aria-disabled="true"]{opacity:.45}
#joystick.demo-stick{opacity:1;border-color:#ffcf43}
#stick-thumb{position:absolute;left:50%;top:50%;width:58px;height:58px;border:2px solid #fffbe0aa;border-radius:50%;background:#fffbe04d;box-shadow:0 3px 10px #0003;transform:translate(-50%,-50%);pointer-events:none}
.stick-guide{position:absolute;inset:0;display:grid;place-items:center;color:#ffffff55;font-size:38px;pointer-events:none}
.stick-label{position:absolute;bottom:8px;left:0;right:0;text-align:center;color:#fffbe0bb;font-size:12px;font-weight:bold;letter-spacing:2px;pointer-events:none}
#joystick.demo-stick #stick-thumb{background:#ffcf4380;border-color:#ffcf43}
@media(orientation:landscape) and (max-height:600px){#joystick{width:120px;height:120px;flex-basis:120px}#cue{left:165px;right:145px}}

#speed-banner{position:absolute;top:174px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);padding:12px 18px;border:2px solid #fff4bd;border-radius:16px;background:#ffcf43;color:#3d1559;box-shadow:0 4px 0 #3d1559;font-size:20px;font-weight:900;text-align:center;pointer-events:none;z-index:2}
#speed-banner[hidden]{display:none}
@media(max-height:700px){#speed-banner{top:146px;padding:9px 14px;font-size:18px}}
@media(orientation:landscape) and (max-height:600px){#speed-banner{top:14px;left:auto;right:16px;transform:none;max-width:45%}}