:root{color-scheme:light;--ink:#25180f;--yellow:#ffc914;--red:#e82d3e;--blue:#16b8e8;--paper:#fff;--soft-blue:#e3f8ff;font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}html{width:100%;height:100%;overflow:hidden}
body{margin:0;width:100%;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));gap:10px;background:#086fd0;color:var(--ink);overscroll-behavior:none}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:var(--ink)}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--red);outline-offset:3px}button:disabled{opacity:.55;cursor:wait}button,img{-webkit-user-select:none;user-select:none}img{display:block;max-width:100%}button svg{display:block;width:100%;height:100%;fill:currentColor}
#game-shell{flex:1 1 auto;min-height:0;width:100%;display:grid;place-items:center}
#game-stage{position:relative;isolation:isolate;width:min(1180px,calc(100vw - 36px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - 62px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.7777778));aspect-ratio:16/9;flex:none;border-radius:22px;outline:4px solid var(--ink);overflow:hidden;background:var(--soft-blue);box-shadow:7px 7px 0 #0457b1;container-type:size;container-name:stage}
#game-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-5px}#game-canvas:active{cursor:grabbing}
#hud{position:absolute;inset:0;z-index:4;pointer-events:none}
.score-board{position:absolute;left:2.3%;top:2%;min-width:clamp(112px,16.5cqw,184px);padding:4px 10px 3px;border:3px solid var(--ink);border-radius:11px;background:var(--paper);display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:baseline}
.score-label{grid-column:1/-1;font-size:clamp(8.5px,1cqw,11px);font-weight:900;letter-spacing:.065em;line-height:1.05}#score-value{font-size:clamp(20px,2.8cqw,29px);line-height:1.02;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.level-label{font-size:clamp(8.5px,1cqw,11px);font-weight:900;white-space:nowrap}
.icon-button{width:46px;height:46px;min-width:44px;min-height:44px;padding:10px;border:3px solid var(--ink);border-radius:11px;background:var(--yellow);pointer-events:auto;touch-action:manipulation}#pause-button{position:absolute;right:2.3%;top:2%}
#meter-root{position:absolute;top:1.5%;left:50%;width:24%;transform:translateX(-50%);pointer-events:none}#meter-root>svg,#meter-root>img{display:block;width:100%;height:auto;overflow:visible}
#game-message{position:absolute;z-index:5;top:16%;left:50%;transform:translateX(-50%);max-width:66%;width:max-content;border:2px solid var(--ink);border-radius:9px;padding:5px 10px;background:var(--yellow);text-align:center;font-size:clamp(11px,1.65cqw,18px);font-weight:900;line-height:1.1;pointer-events:none}#game-message:empty{display:none}
#move-controls{position:absolute;z-index:6;left:2.3%;right:2.3%;bottom:2.5%;display:flex;justify-content:space-between;pointer-events:none}.move-button{width:clamp(50px,6cqw,68px);height:clamp(44px,5cqw,56px);min-width:44px;min-height:44px;padding:6px 10px;border:3px solid var(--ink);border-radius:12px;background:var(--paper);pointer-events:auto;touch-action:none}.move-button:active,.move-button.is-held{background:var(--yellow);transform:translateY(2px)}
.screen{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:clamp(10px,2cqw,24px);background:rgb(17 80 100 / 8%)}
.menu-card{width:min(92%,900px);max-height:100%;padding:clamp(17px,2.5cqw,30px);border:4px solid var(--ink);border-radius:24px;background:var(--paper);text-align:center;box-shadow:5px 6px 0 rgb(37 24 15 / 24%)}
.welcome-card,.gameover-card{display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;gap:clamp(16px,3cqw,36px)}
.welcome-art,.welcome-actions,.serve-art,.serve-actions,.cleanup-art,.cleanup-actions{min-width:0}
.little-label{margin:0 0 7px;color:var(--red);font-size:clamp(9px,1.2cqw,13px);font-weight:900;letter-spacing:.095em;line-height:1.2}
h1,h2,p{margin-top:0}h1{margin-bottom:5px;font-size:clamp(27px,4.7cqw,57px);font-weight:900;line-height:.95;letter-spacing:-.045em}h1 span{display:block;color:var(--red)}h2{margin-bottom:13px;font-size:clamp(24px,3.8cqw,43px);line-height:1.03;letter-spacing:-.04em}
.welcome-mascot{width:100%;height:clamp(94px,18cqw,205px);object-fit:contain;margin:8px auto 0}
.how-to{display:grid;gap:clamp(7px,1.2cqw,13px);list-style:none;padding:0;margin:0 0 clamp(15px,2.3cqw,26px);text-align:left;font-size:clamp(11.5px,1.55cqw,18px);font-weight:700;line-height:1.25}.how-to li{display:flex;gap:8px;align-items:center}.step-number{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border:2px solid var(--ink);border-radius:7px;background:var(--yellow);font-size:12px;font-weight:900}
.mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.game-button{min-height:48px;width:100%;border:3px solid var(--ink);border-radius:12px;padding:10px 13px;font-size:clamp(15px,2cqw,23px);font-weight:900;line-height:1.05;touch-action:manipulation}.game-button.primary{background:var(--yellow)}.game-button.secondary{background:var(--soft-blue)}.game-button:not(:disabled):hover{filter:brightness(1.025)}.game-button:not(:disabled):active{transform:translateY(2px)}
.loading-status{min-height:15px;margin:8px 0 6px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:clamp(10px,1.2cqw,13px);line-height:1.25}.best-line{margin:0;font-size:clamp(8.5px,1cqw,11px);font-weight:900;letter-spacing:.04em;line-height:1.3}.best-line strong{margin-left:5px;font-size:clamp(14px,1.6cqw,19px);letter-spacing:0}
.compact-card{max-width:660px}.gameover-card{max-width:840px}.menu-copy{margin-bottom:20px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:clamp(12px,1.55cqw,18px);line-height:1.4}.button-stack{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.serve-card{display:grid;grid-template-columns:1.4fr .8fr;align-items:center;gap:clamp(18px,3cqw,36px);max-width:900px}.serve-card h2{font-size:clamp(23px,3.4cqw,39px);margin-bottom:3px}
#serve-pull{position:relative;width:100%;height:clamp(120px,23cqw,265px);overflow:visible;margin:0 auto}
.pull-left,.pull-right{position:absolute;z-index:2;top:10%;width:37%;height:80%;object-fit:contain;transition:transform 1.25s cubic-bezier(.2,.6,.2,1)}.pull-left{left:12%;transform:translateX(28%)}.pull-right{right:12%;transform:translateX(-28%)}
.pull-bridge{position:absolute;z-index:1;left:35%;top:25%;width:30%;height:50%;object-fit:fill;transform:scaleX(.2);transition:transform 1.25s cubic-bezier(.2,.6,.2,1)}
#serve-score{position:absolute;z-index:3;inset:auto;left:50%;top:50%;width:max-content;max-width:96%;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:clamp(25px,5.2cqw,57px);line-height:1;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.05em;color:var(--yellow);-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .4s .6s,transform .55s .55s}
#serve-pull.is-open .pull-left{transform:translateX(-28%)}#serve-pull.is-open .pull-right{transform:translateX(28%)}#serve-pull.is-open .pull-bridge{transform:scaleX(1.85)}#serve-pull.is-open #serve-score{opacity:1;transform:translate(-50%,-50%) scale(1)}
.serve-stats{display:grid;gap:14px;margin-bottom:22px}.serve-stats p{margin:0;font-size:clamp(9px,1.2cqw,13px);font-weight:900;line-height:1.35}.serve-stats strong{display:block;font-size:clamp(22px,3.5cqw,40px);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.cleanup-mascot{width:100%;height:clamp(85px,17cqw,190px);margin:8px auto 0;object-fit:contain}.final-stats{display:grid;gap:12px;padding:0;margin:0 0 23px}.final-stats>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.final-stats dt{font-family:"Trebuchet MS",Arial,sans-serif;font-size:clamp(11px,1.45cqw,17px)}.final-stats dd{margin:0;font-size:clamp(20px,3cqw,34px);font-weight:900;font-variant-numeric:tabular-nums}
.error-screen{z-index:50;background:rgb(17 80 100 / 8%)}.error-card .game-button{max-width:330px}
.prototype-caption{flex:0 0 auto;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:3px 12px;margin:0;padding:1px 0 0;text-align:center;font-family:"Trebuchet MS",Arial,sans-serif;font-size:11px;line-height:1.3;color:#375769}.prototype-caption a{color:#174a63;font-weight:700;text-underline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@container stage (max-width:700px){
.menu-card{width:96%;padding:16px;border-width:3px;border-radius:19px;box-shadow:4px 4px 0 rgb(37 24 15 / 24%)}.welcome-card,.gameover-card{gap:19px;grid-template-columns:.9fr 1.1fr}h1{font-size:clamp(25px,4.7cqw,32px)}h2{font-size:clamp(22px,3.8cqw,27px)}.little-label{font-size:8.5px;margin-bottom:6px}.welcome-mascot{height:17cqw;min-height:84px;margin-top:7px}.how-to{gap:7px;margin-bottom:14px;font-size:11.5px}.how-to li{gap:6px}.step-number{flex-basis:20px;width:20px;height:20px;font-size:11px;border-radius:6px}.game-button{min-height:44px;padding:8px;font-size:15px;border-radius:10px}.loading-status{font-size:10px;margin:7px 0 4px}.best-line{font-size:8px}.best-line strong{font-size:13px}.button-stack{gap:8px}.menu-copy{margin-bottom:15px;font-size:12px}.serve-card{gap:18px;grid-template-columns:1.3fr .8fr}.serve-card h2{font-size:23px}#serve-pull{height:20cqw;min-height:113px}#serve-score{font-size:4.7cqw}.serve-stats{gap:10px;margin-bottom:14px}.serve-stats p{font-size:9px}.serve-stats strong{font-size:24px}.cleanup-mascot{height:16cqw;min-height:75px}.final-stats{gap:8px;margin-bottom:16px}.final-stats dt{font-size:11px}.final-stats dd{font-size:22px}
}
@container stage (max-width:520px){
.menu-card{padding:11px}.welcome-card,.gameover-card{gap:12px}h1{font-size:22px}h2{font-size:20px}.little-label{font-size:7px}.welcome-mascot{min-height:0;height:15cqw;margin-top:4px}.how-to{gap:5px;font-size:10px;margin-bottom:8px}.step-number{flex-basis:16px;width:16px;height:16px;font-size:9px}.mode-buttons{gap:6px}.game-button{font-size:13px;padding:6px}.loading-status{font-size:8px;min-height:10px;margin:5px 0 3px}.best-line{font-size:7px}.best-line strong{font-size:11px}.serve-card{gap:10px}.serve-card h2{font-size:19px}#serve-pull{min-height:92px}.serve-stats{gap:6px;margin-bottom:8px}.serve-stats p{font-size:8px}.serve-stats strong{font-size:20px}.cleanup-mascot{min-height:60px}.final-stats{gap:5px;margin-bottom:10px}.final-stats dt{font-size:10px}.final-stats dd{font-size:18px}
}
@media(max-height:540px) and (orientation:landscape){
body{padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));gap:0}#game-stage{width:min(1180px,calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.7777778));border-radius:15px;outline-width:3px;box-shadow:3px 3px 0 #0457b1}.prototype-caption{display:none}.icon-button{width:44px;height:44px;padding:10px}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
}

/* Meter reactions are triggered by the game; each filled section stays red. */
#meter-root .yuck-section.is-filled .section-red{opacity:1}
#meter-root .yuck-reaction{opacity:0}
#meter-root.is-reacting .yuck-reaction.is-current{animation:yuck-callout 1.1s linear both}
#meter-root .yuck-section.is-new .section-red{animation:red-glow .85s ease-out both}
@keyframes yuck-callout{0%,65%{opacity:1}100%{opacity:0}}
@keyframes red-glow{0%{filter:drop-shadow(0 0 0 rgba(255,38,58,0))}25%{filter:drop-shadow(0 0 7px rgba(255,38,58,.95)) drop-shadow(0 0 13px rgba(255,38,58,.4))}100%{filter:drop-shadow(0 0 0 rgba(255,38,58,0))}}
@media(prefers-reduced-motion:reduce){
#meter-root.is-reacting .yuck-reaction.is-current{animation:none!important;opacity:1}
#meter-root .yuck-section.is-new .section-red{animation:none!important;filter:none}
}

.level-label{font-size:clamp(10px,1.25cqw,14px);color:var(--red)}
#game-message.is-level{font-size:clamp(14px,2.4cqw,27px);padding:8px 16px;border-width:3px;animation:level-arrives .22s ease-out both}
@keyframes level-arrives{from{opacity:0;transform:translate(-50%,7px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}


/* Portrait uses the same live game and controls in a taller 480 x 800 room. */
@media (orientation:portrait) {
  #game-stage { width:min(600px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - 62px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .6)); aspect-ratio:480/800; border-radius:20px; outline-width:3px; box-shadow:5px 5px 0 #0457b1; }
  .screen { padding:clamp(10px,3cqw,18px); }
  .menu-card { width:96%; max-width:500px; padding:clamp(13px,4cqw,24px); border-width:3px; border-radius:21px; }
  .welcome-card,.gameover-card,.serve-card { grid-template-columns:1fr; gap:clamp(10px,2.8cqw,16px); }
  .little-label { font-size:clamp(9px,2.4cqw,12px); margin-bottom:6px; }
  h1 { font-size:clamp(28px,9cqw,46px); line-height:.95; }
  h2,.serve-card h2 { font-size:clamp(24px,6.8cqw,36px); }
  .welcome-mascot { width:80%; height:clamp(74px,24cqw,132px); min-height:0; margin:7px auto 0; }
  .how-to { width:fit-content; max-width:100%; margin:0 auto clamp(14px,3.6cqw,20px); gap:clamp(7px,2cqw,10px); font-size:clamp(12px,3.2cqw,17px); }
  .how-to li { gap:7px; }
  .step-number { flex-basis:22px; width:22px; height:22px; font-size:12px; border-radius:7px; }
  .mode-buttons { gap:9px; }
  .game-button { min-height:44px; padding:9px 11px; font-size:clamp(15px,4.1cqw,21px); border-radius:11px; }
  .loading-status { min-height:14px; margin:7px 0 4px; font-size:clamp(10px,2.6cqw,13px); }
  .best-line { font-size:clamp(8px,2.1cqw,11px); }
  .best-line strong { font-size:clamp(13px,3.6cqw,18px); }
  .button-stack { grid-template-columns:1fr; gap:9px; }
  .menu-copy { font-size:clamp(12px,3.3cqw,17px); margin-bottom:17px; }
  #serve-pull { height:clamp(130px,42cqw,225px); min-height:0; }
  #serve-score { font-size:clamp(27px,8.7cqw,48px); }
  .serve-stats { grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
  .serve-stats p { font-size:clamp(9px,2.5cqw,12px); }
  .serve-stats strong { font-size:clamp(22px,6cqw,32px); }
  .cleanup-mascot { width:80%; height:clamp(74px,23cqw,126px); min-height:0; margin:6px auto 0; }
  .final-stats { gap:8px; margin-bottom:16px; }
  .final-stats dt { font-size:clamp(12px,3.2cqw,16px); }
  .final-stats dd { font-size:clamp(20px,5.5cqw,29px); }
  .score-board { left:4%; top:2.2%; min-width:clamp(124px,38cqw,200px); padding:4px 9px 3px; }
  .score-label { font-size:clamp(8.5px,2.4cqw,12px); }
  #score-value { font-size:clamp(22px,6.4cqw,36px); }
  .level-label { font-size:clamp(10px,2.8cqw,15px); }
  #pause-button { right:4%; top:2.2%; }
  #meter-root { left:50%; top:10%; width:55%; transform:translateX(-50%); }
  #game-message { top:22%; max-width:80%; font-size:clamp(12px,3.4cqw,18px); padding:4px 10px; }
  #game-message.is-level { font-size:clamp(14px,3.8cqw,20px); padding:4px 10px; border-width:2px; }
  #move-controls { left:4%; right:4%; bottom:3.5%; }
  .move-button { width:clamp(52px,14cqw,68px); height:clamp(44px,12cqw,56px); }
}



/* Native top-layer settings remain reachable even in a short landscape stage. */
.settings-gear { position:absolute; z-index:4; top:12px; right:12px; display:grid; place-items:center; width:44px; height:44px; min-width:44px; min-height:44px; padding:10px; border:2px solid #675584; border-radius:14px; color:#361052; background:#e7f5ff; touch-action:manipulation; }
.settings-gear svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.settings-gear:hover { background:#f5fbff; }
.settings-gear:active { background:#d0e8f7; }
.settings-gear:focus-visible { outline-color:#543579; outline-offset:3px; }
#audio-settings { width:min(460px,calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-width:none; max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin:auto; padding:24px; overflow-y:auto; overscroll-behavior:contain; border:3px solid #543178; border-radius:23px; color:#361052; background:#dcedfa; box-shadow:0 6px 0 #36105266,0 12px 40px #21102f33; font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; text-align:left; }
#audio-settings::backdrop { background:#21132d88; }
#audio-settings-title { margin:0 0 21px; font:900 clamp(29px,6vw,38px)/1.15 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; letter-spacing:0; text-align:center; text-wrap:balance; }
.audio-settings-groups { display:grid; gap:22px; }
.audio-setting-group { min-width:0; }
.audio-setting-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.audio-setting-heading label { font-size:17px; font-weight:800; line-height:1.25; }
.audio-mute-button { flex:0 0 auto; min-width:84px; min-height:44px; padding:9px 12px; border:2px solid #675584; border-radius:12px; background:#f3f9ff; color:#361052; font-size:14px; font-weight:800; line-height:1.2; touch-action:manipulation; }
.audio-mute-button[aria-pressed="true"] { border-color:#543178; background:#543178; color:#fff; }
.audio-volume-row { display:grid; grid-template-columns:minmax(0,1fr) 3.7em; align-items:center; gap:12px; }
.audio-volume-row output { display:block; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.3; text-align:right; }
.audio-volume-row input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; min-width:0; height:44px; margin:0; padding:0; background:transparent; accent-color:#543178; cursor:pointer; touch-action:pan-y; }
.audio-volume-row input[type="range"]::-webkit-slider-runnable-track { height:7px; border:1px solid #74658d; border-radius:8px; background:linear-gradient(to right,#755099 var(--volume-fill,25%),#b5c9e0 var(--volume-fill,25%)); }
.audio-volume-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:25px; height:25px; margin-top:-10px; border:2px solid #543178; border-radius:50%; background:#ffe02b; }
.audio-volume-row input[type="range"]::-moz-range-track { height:5px; border:1px solid #74658d; border-radius:8px; background:#b5c9e0; }
.audio-volume-row input[type="range"]::-moz-range-progress { height:5px; border-radius:8px; background:#755099; }
.audio-volume-row input[type="range"]::-moz-range-thumb { width:21px; height:21px; border:2px solid #543178; border-radius:50%; background:#ffe02b; }
.audio-setting-hint { margin:1px 0 0; color:#51466a; font:400 12px/1.4 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; }
#settings-close { display:block; width:100%; min-height:48px; margin-top:24px; padding:10px 16px; border:2px solid #543178; border-radius:13px; color:#361052; background:#ffe02b; font-size:18px; font-weight:900; line-height:1.2; touch-action:manipulation; }
#settings-close:active { background:#ffd416; }
.game-center-settings { margin-top:22px; padding-top:18px; border-top:1px solid #54317844; }
.game-center-settings h3 { margin:0 0 8px; font:900 26px/1.2 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; }
.settings-copy,.game-center-player,.settings-details p { font-size:14px; line-height:1.5; }
.settings-action { min-height:48px; padding:10px 15px; border:2px solid #543178; border-radius:12px; background:#ffe02b; color:#361052; font:800 16px/1.3 "Trebuchet MS",Arial,sans-serif; }
.settings-action:disabled { opacity:.65; }
.leaderboard-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.leaderboard-buttons strong { display:block; font-size:27px; }
.leaderboard-buttons span { display:block; font-size:12px; font-weight:400; }
.settings-links { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; }
.settings-links button { min-height:44px; padding:8px 0; border:0; background:transparent; color:#4b226b; font-size:13px; text-decoration:underline; }
.settings-details { border-top:1px solid #54317844; margin-top:16px; }
.settings-details summary { padding:14px 0 2px; min-height:44px; font-size:16px; font-weight:800; cursor:pointer; }
.settings-details p { margin:8px 0; }
.settings-details a { color:#48106c; overflow-wrap:anywhere; }
.settings-version { opacity:.75; }
#audio-settings button:focus-visible,#audio-settings input:focus-visible { outline:3px solid #6c4297; outline-offset:3px; }
@media (orientation:landscape) and (max-height:500px) and (min-width:520px) {
  #audio-settings { width:min(630px,calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))); padding:18px 22px; border-radius:19px; }
  #audio-settings-title { margin-bottom:14px; font-size:30px; }
  .audio-settings-groups { grid-template-columns:1fr 1fr; gap:26px; }
  .audio-setting-heading { gap:8px; }
  .audio-setting-heading label { font-size:16px; }
  .audio-mute-button { min-width:76px; padding-inline:9px; }
  #settings-close { max-width:260px; min-height:44px; margin:18px auto 0; }
}
@media (max-width:360px) {
  #audio-settings { padding:19px; border-radius:19px; }
  #audio-settings-title { font-size:29px; }
  .audio-setting-heading label { font-size:16px; }
  .audio-mute-button { min-width:76px; }
}

/* A calm home screen keeps the vivid cast and logo in the foreground. */
#game-stage { background:#079deb; }
.prototype-caption,.prototype-caption a { color:#fff; }
.game-button.secondary { background:#45e8b0; }
#welcome-screen { --arcade-ink:#2b0845; padding:0; background:#b8ddf4; }
body:has(#welcome-screen:not([hidden])) { background:#d9effc; }
body:has(#welcome-screen:not([hidden])) .prototype-caption { display:none; }
body:has(#welcome-screen:not([hidden])) #game-stage { width:min(1180px,100%); height:100%; max-height:900px; aspect-ratio:auto; outline-color:#91bbdb; box-shadow:0 8px 24px #2c5e8733; }
.welcome-atmosphere { position:absolute; inset:0; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse at 30% 45%,#e2f5ff 0%,#bfdff5 55%,#acd3f0 100%); }
.welcome-rays { position:absolute; width:max(180cqw,190cqh); height:auto; max-width:none; left:30%; top:45%; opacity:.32; transform:translate(-50%,-50%) rotate(-8deg); animation:welcome-rays-turn 180s linear infinite; animation-play-state:paused; will-change:transform; }
#welcome-screen:not([hidden]) .welcome-rays { animation-play-state:running; }
.welcome-atmosphere::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#9ccbef33,transparent 42%); }
@keyframes welcome-rays-turn { from { transform:translate(-50%,-50%) rotate(-8deg); } to { transform:translate(-50%,-50%) rotate(352deg); } }
#welcome-screen .welcome-card { position:relative; z-index:1; display:grid; grid-template-columns:1.25fr .9fr; gap:5%; align-items:center; width:100%; height:100%; max-width:none; max-height:none; padding:clamp(20px,3.8cqw,44px); border:0; border-radius:0; background:transparent; box-shadow:none; }
#welcome-screen .welcome-art { position:relative; display:grid; grid-template-rows:45% 55%; width:100%; height:100%; min-height:0; align-items:center; justify-items:center; }
#welcome-title { position:relative; z-index:2; width:100%; height:100%; max-width:590px; margin:0; padding:0; line-height:0; }
#welcome-title .welcome-logo { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 5px 3px #384c8050); }
.welcome-hero { position:relative; display:grid; grid-template-rows:minmax(0,1fr) auto; width:104%; max-width:680px; height:100%; min-height:0; margin:0; }
#character-picker { position:relative; isolation:isolate; width:100%; height:100%; min-height:0; touch-action:pan-y; user-select:none; cursor:grab; }
#character-picker[data-dragging] { cursor:grabbing; }
.character-choice { position:absolute; left:54%; top:54%; display:block; width:24%; height:92%; padding:0; border:0; border-radius:28px; background:none; cursor:inherit; touch-action:pan-y; transform:translate(-50%,-50%) scale(1); transform-origin:center center; transition:left .5s cubic-bezier(.22,.72,.2,1),top .5s cubic-bezier(.22,.72,.2,1),transform .5s cubic-bezier(.22,.72,.2,1); }
.character-choice[data-slot="left"] { z-index:1; left:23%; top:43%; transform:translate(-50%,-50%) scale(.7); }
.character-choice[data-slot="right"] { z-index:1; left:79%; top:43%; transform:translate(-50%,-50%) scale(.7); }
.character-choice[data-slot="center"] { z-index:3; }
.character-choice:focus-visible { outline:2px solid #543579; outline-offset:-12px; }
.character-portrait,.character-animation-portrait { position:absolute; left:50%; top:50%; width:283.333%; height:100%; max-width:none; transform:translate(-50%,-50%); object-fit:contain; pointer-events:none; filter:drop-shadow(1px 0 0 #fff2c9) drop-shadow(-1px 0 0 #fff2c9) drop-shadow(0 2px 0 #fff2c9) drop-shadow(0 6px 4px #315e8855); }
.has-animated-portrait .character-portrait { visibility:hidden; }
.character-caption { position:relative; z-index:4; text-align:center; color:#361052; pointer-events:none; padding:4px 0 0; }
#character-name { margin:0; font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; font-size:clamp(17px,2cqw,23px); line-height:1.2; }
#character-hint { margin:4px 0 0; font:700 clamp(10.5px,1.15cqw,12px)/1.3 "Trebuchet MS",Arial,sans-serif; color:#375170; }
.quiet-menu-button { display:block; min-height:44px; margin:10px auto 0; padding:8px 14px; border:0; background:none; font:700 13px/1.2 "Trebuchet MS",Arial,sans-serif; text-decoration:underline; text-underline-offset:3px; color:#361052; }
.pause-secondary-actions { display:flex; flex-wrap:wrap; justify-content:center; column-gap:12px; margin-top:8px; }
.pause-secondary-actions .quiet-menu-button { margin:0; padding-inline:8px; }
#welcome-screen .welcome-actions { width:100%; max-width:430px; justify-self:center; color:#361052; }
#welcome-screen .mode-buttons { gap:14px; align-items:stretch; }
#welcome-screen .attack-mode { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:88px; padding:14px 8px; border:2px solid #2b0845; border-radius:17px; box-shadow:0 4px 0 #5e5a88; transition:transform .12s,box-shadow .12s; }
#start-button { background:#ffe02b; color:#361052; }
#welcome-screen #cozy-button { background:#e7f5ff; color:#361052; border-color:#574376; box-shadow:none; }
.mode-title { display:block; font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; font-size:clamp(25px,3.2cqw,36px); font-weight:900; line-height:1; letter-spacing:0; }
.mode-description { font:700 clamp(11px,1.2cqw,14px)/1.2 "Trebuchet MS",Arial,sans-serif; white-space:nowrap; }
#welcome-screen .attack-mode:not(:disabled):hover { filter:none; transform:translateY(-2px); box-shadow:0 6px 0 #5e5a88; }
#welcome-screen .attack-mode:not(:disabled):active { transform:translateY(2px); box-shadow:0 2px 0 #5e5a88; }
#welcome-screen .attack-mode:focus-visible { outline:3px solid #543579; outline-offset:5px; }
#welcome-screen button:disabled { opacity:1; filter:saturate(.7); }
#welcome-screen .loading-status { min-height:0; margin:14px auto 0; color:#375170; font:700 12px/1.3 "Trebuchet MS",Arial,sans-serif; }
#welcome-screen .loading-status:empty { display:none; }
#welcome-screen .best-line { display:flex; align-items:baseline; justify-content:center; gap:9px; width:100%; margin:18px 0 0; padding:0; border:0; background:none; box-shadow:none; color:#375170; font:700 clamp(11px,1.2cqw,13px)/1.4 "Trebuchet MS",Arial,sans-serif; letter-spacing:0; }
#welcome-screen .best-line strong { margin:0; color:#361052; font:900 clamp(15px,1.6cqw,19px)/1.2 "Trebuchet MS",Arial,sans-serif; letter-spacing:0; font-variant-numeric:tabular-nums; }
@media (orientation:landscape) and (max-height:520px) {
  #welcome-screen .welcome-card { padding:16px 25px; gap:5%; grid-template-columns:1.2fr .9fr; }
  #welcome-screen .welcome-art { grid-template-rows:44% 56%; }
  #welcome-screen .mode-buttons { gap:12px; }
  #welcome-screen .attack-mode { min-height:76px; padding:12px 7px; gap:6px; border-radius:14px; }
  .mode-title { font-size:25px; }
  .mode-description { font-size:11px; }
  #welcome-screen .best-line { margin-top:16px; font-size:11px; }
  #welcome-screen .best-line strong { font-size:16px; }
}
@media (orientation:portrait) {
  body:has(#welcome-screen:not([hidden])) #game-stage { width:min(600px,100%); height:100%; max-height:1000px; aspect-ratio:auto; }
  .welcome-atmosphere { background:radial-gradient(ellipse at 50% 44%,#e2f5ff 0%,#bfdff5 58%,#acd3f0 100%); }
  .welcome-rays { left:50%; top:44%; }
  #welcome-screen .welcome-card { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; gap:24px; padding:clamp(18px,5cqw,30px) clamp(16px,4.5cqw,27px) clamp(24px,6cqw,34px); }
  #welcome-screen .welcome-art { grid-template-rows:45% 55%; }
  #welcome-title { width:100%; max-width:520px; }
  .welcome-hero { width:106%; max-width:630px; }
  #welcome-screen .welcome-actions { max-width:460px; }
  #welcome-screen .mode-buttons { gap:13px; }
  #welcome-screen .attack-mode { min-height:78px; padding:12px 6px; gap:6px; }
  .mode-title { font-size:clamp(25px,7cqw,35px); }
  .mode-description { font-size:clamp(11px,2.9cqw,14px); }
  #welcome-screen .best-line { margin-top:16px; font-size:clamp(11px,2.9cqw,13px); }
  #welcome-screen .best-line strong { font-size:clamp(15px,4.3cqw,19px); }
}
@media (orientation:portrait) and (max-height:650px) {
  #welcome-screen .welcome-card { padding:12px 16px 20px; gap:18px; }
  #welcome-screen .welcome-art { grid-template-rows:44% 56%; }
  #welcome-screen .attack-mode { min-height:72px; padding:10px 5px; }
  .mode-title { font-size:25px; }
  .mode-description { font-size:10.5px; }
  #welcome-screen .best-line { margin-top:14px; font-size:11px; }
  #welcome-screen .best-line strong { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) {
  .welcome-rays { animation:none; will-change:auto; }
  #welcome-screen .attack-mode { transition:none; }
  .character-choice { transition:none; }
}

/* Gameplay controls share the welcome screen's cheese-yellow and violet palette. */
body:not(:has(#welcome-screen:not([hidden]))) { background:#292139; }
#game-stage:not(:has(#welcome-screen:not([hidden]))) { outline-color:#49305f; box-shadow:4px 5px 0 #1f162f; }
.score-board { color:#361052; background:#ffe02b; border-color:#361052; border-radius:15px; box-shadow:0 4px 0 #6b3895,inset 0 2px 0 #fff8b1; padding:7px 11px 6px; column-gap:12px; }
.score-label { font:700 clamp(9px,1.15cqw,12px)/1.15 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; letter-spacing:.055em; }
#score-value { font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; letter-spacing:0; line-height:1.2; }
.level-label { align-self:center; padding:4px 6px; border-radius:6px; color:#fff5d1; background:#542178; font:900 clamp(9px,1.05cqw,12px)/1.1 "Trebuchet MS",sans-serif; }
#pause-button { color:#361052; background:#ffe02b; border-color:#361052; border-radius:14px; box-shadow:0 4px 0 #6b3895,inset 0 2px 0 #fff8b1; }
#pause-button:active { transform:translateY(3px); box-shadow:0 1px 0 #6b3895; }
#pause-button:focus-visible { outline-color:#fff4b9; }
.move-button { color:#361052; background:#e7f5ff; border-color:#543376; box-shadow:0 3px 0 #342343; }
#meter-root .yuck-count { fill:#fff4d1; stroke:#30104b; stroke-width:2px; paint-order:stroke fill; }
#game-message { color:#361052; background:#ffe02b; border-color:#361052; box-shadow:0 3px 0 #66318a; }
.pause-card { color:#361052; border-color:#543178; background:#e7f5ff; box-shadow:0 6px 0 #2b153d; }
.pause-card h2 { font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; }
.pause-card .game-button { color:#361052; border-color:#543178; }
.pause-card .game-button.primary { background:#ffe02b; }
.pause-card .game-button.secondary { background:#d0e8f7; }
#game-stage[data-screen="gameover"] #hud,
#game-stage[data-screen="gameover"] #move-controls,
#game-stage[data-screen="gameover"] #game-message { visibility:hidden; }

/* An illustrated reaction against the current kitchen, with one clear retry. */
#gameover-screen { padding:0; background:linear-gradient(90deg,#1a16365c,#1a1636d9); color:#fff6da; }
#gameover-screen .gameover-card { position:relative; width:100%; height:100%; max-width:none; max-height:none; padding:clamp(18px,4cqw,48px); border:0; border-radius:0; box-shadow:none; background:transparent; grid-template-columns:1.15fr 1fr; gap:5%; animation:cleanup-arrive .3s ease-out both; }
#gameover-screen .cleanup-art { height:100%; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#gameover-title { width:100%; margin:0; color:#ffe02b; font:900 clamp(35px,7.5cqw,88px)/1.12 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; letter-spacing:-.025em; -webkit-text-stroke:clamp(2px,.4cqw,5px) #361052; paint-order:stroke fill; text-shadow:0 4px 0 #754199; transform:rotate(-4deg); }
.cleanup-copy { margin:9px 0 0; color:#fff6da; font:700 clamp(11px,1.6cqw,18px)/1.35 "Trebuchet MS",Arial,sans-serif; text-shadow:0 2px 2px #160e27; }
.cleanup-hero { position:relative; width:115%; max-width:460px; height:58cqh; max-height:430px; flex:0 1 auto; min-height:0; }
#gameover-screen .cleanup-mascot { width:100%; height:100%; max-width:none; min-height:0; margin:0; object-fit:contain; filter:drop-shadow(0 8px 5px #100b2870); animation:cleanup-flinch .45s ease-out both; }
#gameover-screen .cleanup-actions { width:100%; max-width:430px; justify-self:center; }
#gameover-screen .final-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; margin:0 0 25px; }
#gameover-screen .final-stats>div { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; border:0; background:none; box-shadow:none; }
#gameover-screen .final-stats dt { color:#d8d1eb; font:700 clamp(10px,1.3cqw,14px)/1.25 "Trebuchet MS",Arial,sans-serif; }
#gameover-screen .final-stats dd { max-width:100%; margin:0; color:#fff6da; font:900 clamp(24px,3.5cqw,38px)/1.1 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; text-shadow:0 3px 0 #27143c; }
#gameover-screen .final-score-card { grid-column:1/-1; }
#gameover-screen .final-score-card dt { color:#fff6da; font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; font-size:clamp(16px,2.4cqw,27px); }
#gameover-screen #final-score { font-size:clamp(48px,9cqw,98px); color:#ffe02b; line-height:1.15; -webkit-text-stroke:2px #361052; paint-order:stroke fill; text-shadow:0 5px 0 #714196; }
#gameover-screen .final-stats .final-best-card { grid-column:1/-1; flex-direction:row; gap:12px; padding-top:12px; border-top:1px solid #cdc1e84d; }
#gameover-screen #final-best { font-size:clamp(21px,2.8cqw,30px); }
#retry-button { min-height:50px; background:#ffe02b; color:#361052; border:3px solid #361052; border-radius:15px; box-shadow:0 5px 0 #754199,inset 0 2px 0 #fff8b1; font:900 clamp(20px,3cqw,32px)/1.1 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; padding:12px 15px; transition:transform .12s,box-shadow .12s; }
#retry-button:active { transform:translateY(4px); box-shadow:0 1px 0 #754199; }
#retry-button:focus-visible { outline-color:#fff6da; outline-offset:5px; }
@keyframes cleanup-arrive { from { transform:translateY(10px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes cleanup-flinch { 0% { transform:rotate(-5deg) scale(.96); } 50% { transform:rotate(3deg); } 100% { transform:none; } }
@container stage (max-height:380px) {
  #gameover-screen .gameover-card { padding:18px 25px; }
  #gameover-screen .final-stats { gap:9px; margin-bottom:15px; }
  #gameover-screen #final-score { font-size:55px; }
  #gameover-screen .final-stats dd { font-size:24px; }
  #gameover-screen .final-stats .final-best-card { padding-top:8px; }
  #retry-button { min-height:44px; padding:8px 12px; font-size:22px; }
}
@media (orientation:portrait) {
  .score-board { padding:6px 9px; min-width:38cqw; height:clamp(56px,17cqw,76px); }
  .score-label { font-size:clamp(9px,2.4cqw,12px); }
  .level-label { font-size:clamp(9px,2.5cqw,12px); }
  #meter-root { top:calc(2.2% + clamp(56px,17cqw,76px) + 8px); }
  #game-message { top:calc(2.2% + clamp(56px,17cqw,76px) + 16.5cqw + 16px); }
  #gameover-screen { background:linear-gradient(#1a163669,#1a1636e6); }
  #gameover-screen .gameover-card { padding:clamp(18px,5cqw,32px); grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; gap:12px; }
  #gameover-title { font-size:clamp(44px,14cqw,72px); -webkit-text-stroke:3px #361052; }
  .cleanup-copy { font-size:clamp(12px,3.5cqw,17px); }
  .cleanup-hero { width:110%; height:33cqh; max-height:370px; }
  #gameover-screen .cleanup-actions { max-width:430px; }
  #gameover-screen .final-stats { gap:12px; margin-bottom:18px; }
  #gameover-screen .final-stats dt { font-size:clamp(11px,3.1cqw,15px); }
  #gameover-screen .final-stats dd { font-size:clamp(23px,7cqw,35px); }
  #gameover-screen .final-score-card dt { font-size:clamp(18px,5cqw,25px); }
  #gameover-screen #final-score { font-size:clamp(52px,17cqw,82px); }
  #gameover-screen #final-best { font-size:clamp(23px,6.5cqw,33px); }
  #retry-button { min-height:50px; font-size:clamp(23px,6cqw,30px); }
}
@media (prefers-reduced-motion:reduce) {
  #gameover-screen .gameover-card,#gameover-screen .cleanup-mascot { animation:none; }
  #retry-button { transition:none; }
}

/* The cheese pull shares the lettering, depth and quiet kitchen of the new menus. */
#game-stage[data-screen="serve"] #hud,
#game-stage[data-screen="serve"] #move-controls,
#game-stage[data-screen="serve"] #game-message { visibility:hidden; }
#serve-screen { padding:0; background:linear-gradient(105deg,#211831b8,#211637e8); color:#fff6da; }
#serve-screen .serve-card { width:100%; height:100%; max-width:none; max-height:none; padding:clamp(22px,4cqw,48px); border:0; border-radius:0; background:none; box-shadow:none; grid-template-columns:1.35fr .8fr; gap:5%; }
#serve-screen .serve-art { height:100%; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#serve-level-label { width:fit-content; margin:0 0 13px; padding:7px 12px; border:1px solid #ac8ac6; border-radius:9px; color:#fff2c5; background:#40245dbf; font:900 clamp(10px,1.25cqw,14px)/1.2 "Trebuchet MS",Arial,sans-serif; letter-spacing:.08em; }
#serve-screen #serve-title { width:100%; max-width:540px; margin:0 0 7px; font:900 clamp(31px,5.6cqw,67px)/1.05 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; color:#ffe72b; -webkit-text-stroke:clamp(2px,.4cqw,5px) #361052; paint-order:stroke fill; text-shadow:0 4px 0 #7742a0; transform:rotate(-2deg); text-wrap:balance; }
#serve-screen #serve-pull { flex:0 1 auto; min-height:0; width:108%; max-width:600px; height:45cqh; max-height:330px; margin:12px 0 0; }
#serve-screen .pull-left,#serve-screen .pull-right { filter:drop-shadow(0 5px 3px #180c2860); }
#serve-screen .pull-bridge { top:20%; height:60%; }
#serve-screen #serve-score { color:#fff; background:rgb(54 16 82 / 78%); border:2px solid rgb(203 164 244 / 70%); border-radius:14px; padding:.13em .25em; font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; font-size:clamp(34px,6.2cqw,70px); font-weight:800; line-height:1; letter-spacing:0; text-align:center; white-space:nowrap; -webkit-text-stroke:0; text-shadow:0 2px 2px #190727; }
#serve-screen .serve-actions { width:100%; max-width:380px; justify-self:center; }
#serve-screen .serve-stats { display:grid; grid-template-columns:1fr; gap:22px; margin:0 0 28px; }
#serve-screen .serve-stats p { margin:0; color:#eee4fc; font:700 clamp(12px,1.6cqw,18px)/1.35 "Trebuchet MS",Arial,sans-serif; letter-spacing:0; }
#serve-screen .serve-stats strong { margin-top:3px; color:#fff6da; font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; font-size:clamp(34px,5.5cqw,60px); font-weight:800; line-height:1.15; letter-spacing:0; overflow-wrap:anywhere; text-shadow:0 2px 0 #29133c; }
#serve-screen #serve-earned { color:#ffe72b; }
#serve-screen .serve-celebration { display:flex; flex:0 0 auto; align-items:center; justify-content:center; gap:8px; margin:0 0 10px; }
#serve-screen .serve-celebration #serve-level-label { margin:0; }
#serve-mascot { width:clamp(48px,10cqh,90px); height:clamp(48px,10cqh,90px); object-fit:contain; filter:drop-shadow(0 3px 2px #180c2840); }
#continue-button { min-height:52px; padding:12px; color:#361052; background:#ffe02b; border:3px solid #361052; border-radius:15px; box-shadow:0 5px 0 #754199,inset 0 2px 0 #fff8b1; font:800 clamp(19px,2.7cqw,29px)/1.2 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; letter-spacing:0; }
#continue-button:active { transform:translateY(4px); box-shadow:0 1px 0 #754199; }
#continue-button:focus-visible { outline-color:#fff6da; outline-offset:5px; }
#continue-button:disabled { opacity:.6; cursor:default; }
@container stage (max-height:380px) {
  #serve-screen .serve-card { padding:18px 27px; }
  #serve-level-label { margin-bottom:9px; padding:5px 9px; font-size:10px; }
  #serve-screen #serve-title { font-size:clamp(27px,5cqw,40px); }
  #serve-screen #serve-pull { height:43cqh; margin-top:8px; }
  #serve-screen .serve-stats { gap:12px; margin-bottom:18px; }
  #serve-screen .serve-stats strong { font-size:35px; }
  #continue-button { min-height:44px; padding:9px; font-size:19px; }
}
@media (orientation:portrait) {
  #serve-screen { background:linear-gradient(#211831ad,#211637eb); }
  #serve-screen .serve-card { padding:clamp(19px,5cqw,34px); grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; gap:20px; }
  #serve-level-label { font-size:clamp(10px,3cqw,15px); padding:7px 11px; margin-bottom:17px; }
  #serve-screen #serve-title { font-size:clamp(34px,11cqw,61px); -webkit-text-stroke:3px #361052; }
  #serve-screen #serve-pull { width:108%; height:32cqh; max-height:310px; margin-top:20px; }
  #serve-screen #serve-score { font-size:clamp(34px,11.2cqw,60px); }
  #serve-screen .serve-actions { max-width:none; }
  #serve-screen .serve-stats { grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }
  #serve-screen .serve-stats p { font-size:clamp(12px,3.5cqw,17px); }
  #serve-screen .serve-stats strong { font-size:clamp(32px,10cqw,54px); }
  #continue-button { min-height:52px; font-size:clamp(23px,6cqw,30px); }
}
@container stage (max-width:340px) {
  #serve-screen .serve-stats strong { font-size:26px; white-space:nowrap; }
}

/* One centered dashboard keeps the score, mistakes and pause together. */
#game-dashboard {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:min(520px,calc(100% - 24px)); display:grid;
  grid-template-columns:minmax(94px,.85fr) minmax(0,1.6fr) 44px;
  align-items:center; column-gap:12px; row-gap:5px; padding:7px 11px;
  color:#fff8e4; background:rgb(43 22 66 / 82%); border:1.5px solid #bd9cdbb3;
  border-radius:16px; box-shadow:0 3px 10px #14091d30,inset 0 1px 0 #ffffff1c;
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
#game-dashboard .score-board {
  position:static; display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:0 7px;
  min-width:0; width:100%; height:auto; padding:0;
  border:0; border-radius:0;
  background:none; box-shadow:none;
}
#game-dashboard .score-label {
  grid-column:1; grid-row:1; color:#fff8e4;
  font:900 15px/1.1 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;
  letter-spacing:.01em; white-space:nowrap;
}
#game-dashboard #score-value {
  grid-column:1/-1; grid-row:2; max-width:100%; color:#ffe02b;
  font:800 28px/1.05 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;
  font-variant-numeric:tabular-nums; letter-spacing:0;
}
#game-dashboard #score-value.is-long { font-size:22px; }
#game-dashboard .level-label {
  grid-column:2; grid-row:1; justify-self:end; align-self:center; margin:0; padding:0; border-radius:0;
  color:#decdf2; background:none; font:900 12px/1.1 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;
}
#game-dashboard #level-value { font:800 12px/1.1 "Trebuchet MS",Arial,sans-serif; }
#game-dashboard #meter-root {
  position:relative; top:auto; left:auto; width:100%; max-width:200px; margin:0; justify-self:center;
  transform:none; align-self:center;
}
#game-dashboard #meter-root > svg { width:100%; height:auto; aspect-ratio:720/174; }
#game-dashboard .yuck-count { display:none; }
#game-dashboard #meter-root > svg > path { fill:rgb(239 231 255 / 24%); }
#game-dashboard #meter-root > svg > g[fill="none"] { stroke:#e4d6f3; }
#game-dashboard #meter-root > svg > g[fill="none"] > path { stroke-width:7px; }
#game-dashboard .yuck-reaction > g { fill:#ffe02b; stroke:#361052; }
#game-dashboard #pause-button {
  position:static; width:44px; height:44px; min-width:44px; min-height:44px;
  padding:11px; border:1.5px solid #fff0a3; border-radius:50%;
  color:#361052; background:#ffe02b; box-shadow:0 2px 0 #19092455;
}
#game-dashboard #pause-button:active { transform:translateY(2px); box-shadow:0 1px 0 #361052; }
/* Height risk is separate from the three bad-catch sections. */
#height-indicator {
  --height-color:#ffd500; --warning-period:1.2s; grid-column:1/-1; display:grid;
  grid-template-columns:auto 1fr; column-gap:10px; row-gap:4px;
  margin:0; padding:0; border:0;
  color:#fff8e4; font:700 11px/1.2 "Trebuchet MS",Arial,sans-serif;
}
.height-label { display:flex; align-items:baseline; white-space:nowrap; letter-spacing:0; }
.height-word { color:#fff8e4; font:900 14px/1 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; }
#height-count { margin-left:7px; font-size:12px; letter-spacing:0; font-variant-numeric:tabular-nums; }
#height-advice {
  text-align:right; align-self:center; border-radius:4px; color:#eedfff;
  font:900 13px/1.1 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; padding:1px 4px;
}
.height-track {
  position:relative; grid-column:1/-1; height:10px; border:1px solid #dcc7ef99;
  border-radius:5px; background:#140d244d; box-shadow:inset 0 1px 2px #140b2d30;
}
#height-fill {
  display:block; width:0; height:100%; border-radius:4px;
  background:var(--height-color); box-shadow:inset 0 2px 0 #ffffff66;
  transition:width .15s ease-out,background-color .2s linear;
}
#height-indicator[data-state="warning"] #height-count { color:#ffcc72; }
#height-indicator[data-state="critical"],#height-indicator[data-state="toppled"] {
  --warning-period:.85s; color:#ffb1b9;
}
#height-indicator[data-imminent="true"] { --warning-period:.65s; }
#height-indicator:is([data-state="warning"],[data-state="critical"]) .height-track {
  animation:height-bar-warning var(--warning-period) ease-in-out infinite;
}
#height-indicator:is([data-state="warning"],[data-state="critical"]) #height-advice {
  animation:height-text-warning var(--warning-period) ease-in-out infinite;
}
#height-indicator[data-state="critical"] #height-advice,
#height-indicator[data-state="toppled"] #height-advice { font-weight:900; }
@keyframes height-bar-warning {
  0%,100% { border-color:#dcc7ef99; box-shadow:0 0 0 0 #ff183a00; }
  50% { border-color:#ff183a; box-shadow:0 0 0 2px #ff183a44,0 0 9px #ff183a70; }
}
@keyframes height-text-warning {
  0%,100% { color:#ffd2d8; background-color:transparent; }
  50% { color:#fff; background-color:#bd1030; }
}
#game-stage:not([data-screen="playing"]) .height-track,
#game-stage:not([data-screen="playing"]) #height-advice { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) {
  #height-indicator .height-track,#height-indicator #height-advice { animation:none!important; }
  #height-fill { transition:none; }
}
#game-stage.is-toppling #pause-button,#game-stage.is-toppling #move-controls { opacity:.45; pointer-events:none; }
#gameover-copy { max-width:32em; margin-left:auto; margin-right:auto; text-wrap:pretty; }
/* On a topple, the failed level's zero is primary; earlier points are the run total. */
#gameover-screen #failed-level-result { grid-column:1/-1; }
#gameover-screen #failed-level-label { color:#fff6da; font-weight:900; font-size:clamp(14px,2cqw,22px); }
#gameover-screen #failed-level-points {
  color:#fff6da; font:900 clamp(48px,9cqw,98px)/1.15 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;
  text-shadow:0 4px 0 #714196; -webkit-text-stroke:2px #361052; paint-order:stroke fill;
}
#gameover-screen[data-reason="height"] .final-score-card { grid-column:auto; }
#gameover-screen[data-reason="height"] #final-score-label {
  color:#d8d1eb; font:700 clamp(10px,1.3cqw,14px)/1.25 "Trebuchet MS",Arial,sans-serif;
}
#gameover-screen[data-reason="height"] #final-score {
  color:#ffe02b; font:900 clamp(24px,3.5cqw,38px)/1.1 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;
  -webkit-text-stroke:0; text-shadow:0 2px 0 #27143c;
}
@media (orientation:portrait) {
  #gameover-screen #failed-level-label { font-size:clamp(16px,4.5cqw,22px); }
  #gameover-screen #failed-level-points { font-size:clamp(52px,17cqw,82px); }
  #gameover-screen[data-reason="height"] #final-score-label { font-size:clamp(11px,3.1cqw,15px); }
}
@container stage (max-height:380px) {
  #gameover-screen #failed-level-points { font-size:55px; }
  #gameover-screen[data-reason="height"] #final-score { font-size:24px; }
}
#game-message { top:calc(var(--dashboard-bottom,110px) + 16px); }
@media (orientation:landscape) {
  #game-dashboard { top:9px; width:min(490px,calc(100% - 28px)); }
  #game-dashboard #score-value { font-size:26px; }
}
@container stage (max-width:340px) {
  #game-dashboard { column-gap:8px; padding:7px 9px; grid-template-columns:86px minmax(0,1fr) 44px; }
  #game-dashboard .score-label { font-size:14px; }
  #game-dashboard #score-value { font-size:24px; }
  #game-dashboard #score-value.is-long { font-size:20px; }
  #height-advice { font-size:12px; }
}

/* A wide tablet gets a full-width hero and a shared row of play buttons. */
@media (orientation:landscape) and (min-width:850px) and (min-height:600px) {
  #welcome-screen .welcome-card {
    grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto;
    gap:clamp(20px,3cqh,32px);
  }
  #welcome-screen .welcome-art {
    grid-template-columns:.88fr 1.12fr; grid-template-rows:1fr; gap:1%;
  }
  #welcome-screen #welcome-title { max-width:600px; height:88%; }
  #welcome-screen .welcome-hero { width:100%; max-width:760px; height:94%; }
  #welcome-screen .welcome-actions { width:68%; max-width:700px; }
  #welcome-screen .mode-buttons { gap:22px; }
  #welcome-screen .attack-mode { min-height:92px; }
  #welcome-screen .best-line { margin-top:16px; }
  #welcome-screen #character-name { font-size:clamp(23px,2.6cqw,30px); }
  #welcome-screen #character-hint { font-size:13px; }
  #welcome-screen .welcome-rays { left:64%; top:44%; }
  #serve-screen .serve-card {
    grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto;
    gap:18px; justify-items:center;
  }
  #serve-screen .serve-art { width:100%; }
  #serve-screen #serve-title { max-width:740px; font-size:clamp(42px,5.2cqw,64px); }
  #serve-screen #serve-pull { width:74%; max-width:720px; height:34cqh; max-height:340px; margin-top:14px; }
  #serve-screen .serve-actions { width:100%; max-width:560px; }
  #serve-screen .serve-stats { grid-template-columns:1fr 1fr; gap:24px; margin-bottom:18px; }
  #serve-screen .serve-stats strong { font-size:clamp(40px,4.8cqw,56px); }
  #serve-screen #continue-button { min-height:58px; }
}

.license-text { white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.5 ui-monospace,monospace; }

/* Completed phrase artwork keeps the playful lettering without shipping a font. */
[data-display-lettering] { position:relative; }
.display-lettering-art { display:none; }
.display-lettering-ready > .display-lettering-label {
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
  margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important;
  clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important;
  text-shadow:none!important; -webkit-text-stroke:0!important;
}
.display-lettering-ready > .display-lettering-art { display:block; }
.display-lettering-art > img {
  width:var(--lettering-width); height:auto; max-width:100%; margin-inline:auto;
  object-fit:contain; pointer-events:none;
}
#game-center-title .display-lettering-art > img,
#game-dashboard .display-lettering-art > img { margin-inline:0; }
#level-word { display:inline-block; vertical-align:baseline; }
#level-word .display-lettering-art > img { display:inline-block; vertical-align:-.14em; }
@media (orientation:portrait) {
  .display-lettering-art > img { width:var(--lettering-portrait-width); }
}