@font-face{font-family:GameRound;src:local('Arial Rounded MT Bold'),local('Nunito ExtraBold'),local('Trebuchet MS');font-weight:400 900;font-display:swap}
:root{font-family:GameRound,'Trebuchet MS',sans-serif;font-synthesis:none;color:#fff2dd;--ink:#683b45;--pink:#ff56aa;--cream:#fff4d9;--cyan:#64fff5;--machine:#e98f92}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;padding:12px;background:radial-gradient(ellipse at 20% 20%,#643c60,transparent 55%),radial-gradient(ellipse at 80% 80%,#253d65,transparent 55%),#161729}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button,img,svg{-webkit-user-select:none;user-select:none}button:focus-visible{outline:3px solid #73fff4;outline-offset:6px}button:disabled{cursor:default;filter:saturate(.35) brightness(.7)}svg{width:1.5em;height:1.5em;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.stage{position:relative;width:min(100%,calc(100svh - 24px),1120px);aspect-ratio:1;isolation:isolate;container-type:inline-size;overflow:hidden;background:#e99598 url('assets/vending-background.png') center/100% 100% no-repeat;border-radius:24px;box-shadow:0 25px 100px #0009,0 0 45px #fe72a620;border:1px solid #ffb9bc60}
.game-header{position:absolute;z-index:4;left:20%;top:1.1%;width:60%;height:12.4%;pointer-events:none;display:flex;align-items:center;justify-content:center}.logo{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 1px #77342f40)}
.logo{position:absolute;top:50%;transform:translateY(-50%);height:auto;width:100%;max-height:none}
.difficulty-badge{position:absolute;top:105%;left:50%;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;justify-content:center;min-width:42%;min-height:3.7cqw;padding:.15em 1em;border:2px solid #d99b7f;border-radius:999px;background:linear-gradient(#fffdef 0%,#fff9d8 48%,#ffdab8 100%);box-shadow:inset 0 2px 2px white,inset 0 -3px 4px #e5a877,0 0 0 3px #ffc0a573,0 0 17px #ffcc74a3;color:#723d46;font-size:clamp(14px,2.3cqw,27px);font-weight:900;text-shadow:0 1px white}
.screen{position:absolute;inset:0}.settings-button{position:absolute;right:11.5%;top:2.3%;width:6.3%;aspect-ratio:1;z-index:8;padding:15%;padding:0;display:grid;place-items:center}.settings-button svg{width:58%;height:58%;fill:#fff0e5;stroke:#fff0e5;filter:drop-shadow(0 3px 1px #9b3969)}
/* All controls share the same molded plastic cap. */
.candy-button,.round-button{--cap-top:#fface1;--cap-mid:#ee68b3;--cap-bottom:#c8327f;--cap-shadow:#80234e;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:.45em;border:3px solid #f3d2c3;border-radius:999px;background:radial-gradient(ellipse at 30% 8%,#fff9 0,transparent 35%),linear-gradient(165deg,var(--cap-top),var(--cap-mid) 52%,var(--cap-bottom));box-shadow:inset 0 3px 1px #fff9,inset 2px 0 3px #fff5,inset 0 -7px 2px var(--cap-shadow),0 3px 0 #b1acbb,0 6px 0 #423d50,0 9px 0 #241d32,0 10px 12px #251e3c80;font-weight:900;color:#fff6eb;text-shadow:0 2px 1px var(--cap-shadow),0 0 4px #fff1;transition:transform .16s,filter .16s;}
.candy-button::before,.round-button::before{content:'';position:absolute;inset:-6px;border-radius:inherit;z-index:-2;background:linear-gradient(135deg,#fff8e0,#8b8597 23%,#efdfd9 45%,#3b354c 72%,#b4adba);box-shadow:0 1px 2px #fff9;pointer-events:none}
.candy-button::after,.round-button::after{content:'';position:absolute;inset:2px;border-radius:inherit;z-index:-1;background:radial-gradient(ellipse at 40% 0,#fff5,transparent 48%),linear-gradient(160deg,var(--cap-top),var(--cap-mid) 54%,var(--cap-bottom));box-shadow:inset 0 2px 1px #fffc,inset 0 -4px 0 #0002;pointer-events:none}
.candy-button:hover:not(:disabled),.round-button:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px)}.candy-button:active:not(:disabled),.round-button:active:not(:disabled){transform:translateY(4px);filter:brightness(.98)}
.lavender,.menu-settings{--cap-top:#e4beff;--cap-mid:#a276e7;--cap-bottom:#7444b1;--cap-shadow:#4b287d}.yellow{--cap-top:#fff298;--cap-mid:#ffcd38;--cap-bottom:#e49808;--cap-shadow:#a6650f}.pink{--cap-top:#ffb6e5;--cap-mid:#fa65b8;--cap-bottom:#d32b86;--cap-shadow:#972451}
.settings-button.round-button{position:absolute}
.candy-button svg{filter:drop-shadow(0 3px 1px var(--cap-shadow));flex-shrink:0}.start-button svg{fill:currentColor;stroke-width:2}
/* Menu lives behind the same vending glass as the puzzle. */
.menu-card{position:absolute;inset:21% 24% 13%;display:flex;align-items:center;flex-direction:column;text-align:center;animation:menu-in .5s ease-out both}
.menu-bottles{position:relative;display:flex;align-items:end;justify-content:center;gap:10%;width:100%;height:30cqw;max-height:49%;padding-bottom:3%;filter:drop-shadow(0 0 22px #4bfbd022)}
.menu-bottles::after{content:'';position:absolute;left:-5%;right:-5%;bottom:0;height:6%;background:linear-gradient(#e2d5cb,#6b727e 30%,#c0b6b0 38%,#555667 75%,#322940);border:1px solid #e8d3c1;border-radius:4px;box-shadow:0 4px 5px #0008,0 1px 8px #40efe94a;z-index:-1}
.menu-bottles .bottle{width:auto;aspect-ratio:.60;height:90%;flex:0 0 auto;animation:can-bob 4.5s ease-in-out infinite;pointer-events:none}.menu-bottles .bottle:first-child{height:78%;transform:rotate(-7deg);animation-delay:-1.3s}.menu-bottles .bottle:last-child{height:78%;transform:rotate(7deg);animation-delay:-2.6s}.menu-bottles .price-tag,.menu-bottles .bottle-number{display:none}
.menu-message{margin:6% -5% 6%;text-shadow:0 2px 2px #28162a,0 0 14px #e4739166}.menu-message h1{margin:0 0 .35em;font-size:clamp(18px,2.8cqw,32px);font-weight:900;color:#fff2d7}.menu-message p{font-size:clamp(14px,1.6cqw,19px);margin:0;line-height:1.4;color:#f4dfda}
.start-button{font-size:clamp(23px,3.4cqw,38px);min-height:8cqw;width:81%;margin:1% 0 5%;padding:.45em .7em}.menu-settings{font-size:clamp(18px,2.4cqw,28px);min-height:6cqw;width:62%;padding:.45em .7em}
/* Live, transparent cans stand on responsive illuminated chrome shelves. */
.board{position:absolute;top:19.4%;bottom:31.8%;left:20.7%;right:20.7%;display:flex;flex-direction:column;gap:4%;--cols:4}
.bottle-row{position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));align-items:center;justify-items:center;gap:2%;height:48%;padding:3% 2% 5%;container-type:size;isolation:isolate;min-height:0}
.bottle-row::before{content:'';position:absolute;left:1%;right:1%;top:-1%;height:4%;background:radial-gradient(ellipse,#fffce8 0,#ffc98e 26%,#ffad5640 56%,transparent 75%) 0 0/calc(100% / var(--cols)) 100%;filter:drop-shadow(0 3px 7px #ffa95c);opacity:.85;pointer-events:none}
.bottle-row::after{content:'';position:absolute;left:-1%;right:-1%;bottom:0;height:8%;border:1px solid #c9c5cc;border-radius:3px;background:linear-gradient(#ffe8d0 0%,#93979f 12%,#ebe5dd 19%,#74818a 31%,#4d5360 51%,#aca6a8 57%,#6b626c 83%,#242235 100%);box-shadow:0 6px 5px #0d172580,0 -1px 4px #65fff377;z-index:-1}
.bottle{position:relative;display:block;background:none;padding:0;border:0;aspect-ratio:.60;isolation:isolate;transform-origin:50% 89%;transition:transform .25s cubic-bezier(.2,.8,.3,1),filter .2s;outline:none;filter:drop-shadow(0 6px 3px #0c102a90);touch-action:manipulation}
.board .bottle{height:min(90cqh,calc((100cqw / var(--cols) - 3cqw) / .60));width:auto;max-width:100%}
.bottle>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:2}
.liquid-window{position:absolute;left:14%;right:14%;top:23%;bottom:23%;border-radius:14% / 8%;overflow:hidden;display:flex;flex-direction:column-reverse;z-index:1;background:linear-gradient(95deg,#22132830,#d2fdf915 60%,#04122240);box-shadow:0 0 10px #e8ffed0a;pointer-events:none}
.liquid-layer{position:relative;width:100%;height:25%;flex-shrink:0;background:linear-gradient(90deg,#0003,#fff1 17%,#fff4 28%,transparent 50%,#0002 85%,#0004),var(--soda);border-top:1px solid #ffffd99c;box-shadow:inset 0 3px 5px #fff3,inset 0 -1px 3px #0002;}
.liquid-layer::before,.liquid-layer::after{content:'';position:absolute;width:5px;height:5px;left:23%;bottom:30%;border:1px solid #fff9;border-radius:50%;box-shadow:inset 1px 1px 1px #fff9,0 0 3px #fff2;animation:fizz-rise 3s var(--delay,0s) ease-in-out infinite}.liquid-layer::after{width:3px;height:3px;left:73%;bottom:60%;animation-delay:calc(var(--delay,0s) - 1.4s)}.layer-symbol{position:absolute;right:17%;top:13%;font-size:clamp(8px,1.05cqw,13px);font-family:Arial,sans-serif;color:#fff9;opacity:.6;line-height:1}
.bottle:hover:not(:disabled){transform:translateY(-4px)}.bottle.selected{transform:translateY(-9px) rotate(-3deg);filter:drop-shadow(0 0 3px #ff78d0) drop-shadow(0 0 8px #ff2dae)}.bottle.complete{filter:drop-shadow(0 0 6px #fcdc6877)}.bottle.hint-source{animation:hint-glow .8s alternate infinite;filter:drop-shadow(0 0 7px #ffe486)}.bottle.hint-target{animation:hint-glow .8s .3s alternate infinite;filter:drop-shadow(0 0 7px #65fff4)}.bottle:focus-visible{outline:2px dashed #bcfff5;outline-offset:3px;border-radius:18px}
.price-tag{position:absolute;left:17%;right:17%;bottom:-7%;font-size:clamp(9px,1.25cqw,15px);line-height:1.2;padding:1px;color:#3d3544;border:1px solid #9c888e;background:linear-gradient(#fff4d9,#cfc0b0);box-shadow:0 1px 1px #1117;border-radius:2px;z-index:4;text-align:center;pointer-events:none;text-shadow:0 1px #fff7}.bottle-number{display:none}
.stage[data-difficulty="easy"] .board{left:24%;right:24%;--cols:3}.stage[data-difficulty="hard"] .board{left:20%;right:20%;--cols:6}.stage[data-difficulty="hard"] .board .bottle{height:min(80cqh,calc((100cqw / var(--cols) - 2cqw) / .60))}.stage[data-difficulty="hard"] .price-tag{font-size:clamp(8px,1cqw,12px)}
/* Buttons align with the mockup's lower machine console. */
.game-bottom{position:absolute;inset:70.5% 24% 5.5%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
#instruction{position:relative;width:100%;flex-shrink:0;min-height:3.3cqw;padding:.2em .45em;margin:0;border:2px solid #d59d82;border-radius:9px;color:#733c48;background:linear-gradient(#fffce4,#ffe9cd);box-shadow:inset 0 2px 2px #fff,0 0 7px #ffd19b80;font-size:clamp(13px,2.05cqw,25px);line-height:1.1;font-weight:900;text-shadow:0 1px #fff9}
.controls{display:flex;width:100%;justify-content:space-around;align-items:center;gap:6%;padding-top:1%}.controls .candy-button{flex-direction:column;gap:0;width:13.1cqw;height:13.1cqw;flex-shrink:0;border-radius:50%;font-size:clamp(14px,2.25cqw,27px);line-height:1.2;padding:9% 1% 10%}.controls svg{width:43%;height:43%;margin-bottom:3%;flex-shrink:0;stroke-width:4.2}.main-menu-button{width:54%;min-height:4.8cqw;padding:.25em .6em;margin-top:2%;font-size:clamp(14px,2cqw,24px);gap:.4em}.main-menu-button svg{width:1.25em;height:1.25em}
/* Dialogs are illuminated machine panels, with the same physical controls. */
.modal-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:30;background:#11102b94;backdrop-filter:blur(6px);padding:10% 19%}.modal{position:relative;width:100%;max-height:100%;overflow:auto;padding:10% 8% 9%;border:3px solid #e2b7b6;border-radius:29px;background:radial-gradient(ellipse at 50% 0,#c56d9755,transparent 65%),linear-gradient(140deg,#454052f7,#252938f7);box-shadow:inset 0 0 0 4px #3c3049,inset 0 1px 30px #89fff51c,0 0 0 3px #805060,0 0 0 6px #d99b9e,0 13px 0 #1c1a3299,0 20px 60px #060a2780;animation:menu-in .3s ease-out both;text-align:center}
.modal h2{font-size:clamp(22px,3.25cqw,36px);line-height:1.12;margin:0 0 .45em;color:#fff1d6;text-shadow:0 2px 1px #602e4a,0 0 15px #ff95c04a}.modal p{font-size:clamp(14px,1.7cqw,20px);line-height:1.5;margin:0 0 7%;color:#f0d7e0}.close-button{position:absolute;right:13px;top:12px;display:grid;place-items:center;width:30px;height:30px;border:1px solid #bc8d9c;border-radius:50%;background:linear-gradient(#875771,#47364e);box-shadow:inset 0 1px 1px #ffe1d988,0 3px 2px #0005;color:#fff3e6;padding:3px}.close-button svg{width:100%;height:100%}
.difficulty-options{display:flex;flex-direction:column;gap:20px;margin-top:7%}.difficulty-option{border-radius:24px;width:100%;min-height:80px;padding:.7em 1em;justify-content:space-between;text-align:left}.difficulty-option strong{display:block;font-size:clamp(20px,2.4cqw,27px);line-height:1.1}.difficulty-option small{display:block;font-size:14px;margin-top:.4em;font-weight:700;line-height:1.1}.difficulty-dots{font-size:clamp(17px,2cqw,24px);white-space:nowrap;letter-spacing:2px;margin-left:6px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0;border-bottom:1px solid #ccb3c83d;font-size:clamp(17px,2.25cqw,25px);font-weight:800;text-align:left}.toggle{position:relative;width:76px;height:42px;flex-shrink:0;border:2px solid #c1b6c1;background:linear-gradient(#2c2537,#665268);border-radius:99px;box-shadow:0 0 0 3px #574857,inset 0 3px 6px #0008;transition:background .2s}.toggle[aria-checked="true"]{background:linear-gradient(#226c72,#5be1d3);box-shadow:0 0 0 3px #574857,inset 0 3px 5px #17474c,0 0 14px #51ffef66}.toggle::after{content:'';position:absolute;left:3px;top:3px;width:32px;height:32px;border:2px solid #fae4d9;border-radius:50%;background:radial-gradient(circle at 30% 15%,white,#fff0d5 40%,#b68599);box-shadow:inset 0 2px 0 white,0 2px 4px #12102b88;transition:transform .2s}.toggle[aria-checked="true"]::after{transform:translateX(33px)}.modal .wide{width:100%;min-height:58px;padding:.5em 1em;margin-top:28px;font-size:clamp(19px,2.3cqw,27px)}
.result-symbol{font-size:clamp(36px,5cqw,62px);color:#ffd764;text-shadow:0 3px #b76644,0 0 22px #ffd174;line-height:1.1;margin-bottom:20px}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:22px}.result-actions .candy-button{min-height:94px;flex-direction:column;font-size:clamp(18px,2.4cqw,26px);padding:14px 5px;border-radius:26px}.menu-link{display:inline-block;border:0;color:#fff0db;background:none;font-size:14px;text-decoration:underline;margin-top:25px;cursor:pointer}
.toast{position:absolute;top:17.8%;left:50%;transform:translate(-50%,-10px);width:max-content;max-width:76%;padding:9px 17px;background:#fff0dbf7;color:#713c52;border:2px solid #edbaa4;border-radius:18px;box-shadow:0 4px 18px #140d3590;z-index:24;text-align:center;font-size:clamp(14px,1.65cqw,19px);pointer-events:none;opacity:0;transition:opacity .18s,transform .18s}.toast.visible{opacity:1;transform:translate(-50%,0)}
.loading{position:absolute;inset:17.5% 19% 30%;z-index:40;background:#26283dea;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;border-radius:22px;color:#fff1d7;font-size:clamp(17px,2.4cqw,28px)}.loading-bubble{width:52px;height:52px;border:4px solid #94eeec44;border-top-color:#72fff3;border-radius:50%;box-shadow:0 0 20px #4bf6e826;animation:spin .8s linear infinite}
.pour-ghost{position:fixed!important;z-index:60!important;margin:0;pointer-events:none;max-width:none!important;transform-origin:50% 9%;filter:drop-shadow(0 8px 12px #16132d90) drop-shadow(0 0 4px #ffacdd70)}.pour-ghost .price-tag,.pour-ghost .bottle-number{display:none}.pour-stream{position:fixed;z-index:59;width:8px;pointer-events:none;transform-origin:top;border-radius:99px;background:linear-gradient(90deg,#fff6,transparent 60%,#0002),var(--soda);box-shadow:0 0 8px var(--soda),inset 1px 0 #fff9;animation:stream-fizz .13s alternate infinite}#particles{position:absolute;inset:0;z-index:22;pointer-events:none;overflow:hidden}.particle{position:absolute;color:var(--soda);font-size:20px;text-shadow:0 0 5px currentColor;animation:pop-away 1s ease-out forwards}.confetti{position:absolute;top:-5%;width:8px;height:14px;border-radius:2px;background:var(--soda);box-shadow:0 0 3px currentColor;animation:confetti 2.5s var(--delay) ease-in forwards}.ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}.ambient i{position:absolute;bottom:-5%;left:10%;width:1.5%;aspect-ratio:1;border:1px solid #fff7;border-radius:50%;box-shadow:inset 1px 1px 2px #fff6,0 0 7px #ffa9df66;animation:float-up 18s linear infinite}.ambient i:nth-child(2){left:90%;animation-delay:-7s}.ambient i:nth-child(3){left:7%;animation-delay:-3s}.ambient i:nth-child(4){left:87%;animation-delay:-12s}.ambient i:nth-child(5){left:95%;animation-delay:-5s}
@keyframes menu-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes can-bob{50%{translate:0 -5px}}@keyframes fizz-rise{0%,100%{translate:0 0;opacity:.4}65%{translate:0 -6px;opacity:.9}}@keyframes hint-glow{to{opacity:.82}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes stream-fizz{to{width:7px;filter:brightness(1.15)}}@keyframes pop-away{to{transform:translate(var(--dx),var(--dy)) rotate(90deg) scale(.5);opacity:0}}@keyframes confetti{to{transform:translateY(110cqw) rotate(650deg);opacity:.1}}@keyframes float-up{to{transform:translateY(-110cqw);opacity:0}}
@media(max-width:600px){
 body{padding:0}.stage{width:100%;aspect-ratio:3/4;min-height:min(100svh,840px);border:0;border-radius:0;background-size:148% 100%;background-position:center}.game-header{left:10%;width:80%;top:2%;height:11.8%}.logo{filter:drop-shadow(0 2px 1px #71303940)}.settings-button{width:10%;right:2%;top:1.2%}.difficulty-badge{top:105%;min-height:26px;font-size:clamp(14px,3.9cqw,18px);border-width:1px;padding:.2em .75em}.board{left:9%;right:9%;top:20%;bottom:32.5%;gap:5%}.bottle-row{height:47.5%;padding:3% 2% 7%;gap:2%}.board .bottle{height:min(90cqh,calc((100cqw / var(--cols) - 3cqw) / .60))}.stage[data-difficulty="easy"] .board{left:13%;right:13%}.stage[data-difficulty="hard"] .board{left:9%;right:9%;--cols:4;gap:3%}.stage[data-difficulty="hard"] .bottle-row{height:31.3%;padding:2% 2% 5%}.stage[data-difficulty="hard"] .board .bottle{height:min(84cqh,calc((100cqw / var(--cols) - 3cqw) / .60))}.price-tag{font-size:10px;bottom:-9%}.stage[data-difficulty="hard"] .price-tag{font-size:9px}.layer-symbol{font-size:9px}.liquid-layer::before{width:4px;height:4px}.liquid-layer::after{width:3px;height:3px}
 .game-bottom{left:13%;right:13%;top:70%;bottom:6%}#instruction{font-size:clamp(13px,3.6cqw,17px);min-height:30px;display:grid;place-items:center;border-width:1px;border-radius:8px;padding:.3em .15em}.controls{gap:5%}.controls .candy-button{width:20.5cqw;height:20.5cqw;font-size:clamp(14px,4cqw,20px);border-width:2px;padding:8% 0 10%}.candy-button::before,.round-button::before{inset:-4px}.controls svg{width:39%;height:39%;margin-bottom:4%}.main-menu-button{width:66%;min-height:38px;font-size:16px;border-width:2px;padding:.25em .4em;margin-top:2%}
 .menu-card{inset:23% 12% 17%}.menu-bottles{height:48cqw;max-height:45%;gap:10%;width:86%}.menu-message{margin:7% -2% 8%}.menu-message h1{font-size:clamp(18px,5cqw,24px)}.menu-message p{font-size:14px}.start-button{font-size:clamp(22px,6.3cqw,29px);min-height:14cqw;width:85%;margin:0 0 7%;border-width:2px}.menu-settings{font-size:20px;min-height:11cqw;width:68%;border-width:2px}
 .modal-layer{padding:13% 7% 8%}.modal{padding:15% 8% 10%;border-radius:24px}.modal h2{font-size:26px}.modal p{font-size:15px}.difficulty-options{gap:18px}.difficulty-option{padding:13px 15px;min-height:76px;border-width:2px;border-radius:24px}.difficulty-option strong{font-size:21px}.difficulty-option small{font-size:14px}.difficulty-dots{font-size:18px;letter-spacing:0}.switch-row{font-size:19px;padding:18px 0}.modal .wide{font-size:21px;min-height:52px}.result-actions{gap:18px}.result-actions .candy-button{font-size:19px;min-height:88px}.toast{top:18%;max-width:86%;font-size:14px;padding:8px 12px}.loading{left:8%;right:8%;top:18%;bottom:31%}
}
@media(max-width:600px) and (max-height:620px){.menu-card{top:21%;bottom:15%}.menu-bottles{height:32cqw}.menu-message{margin:5% 0 6%}.menu-message h1{font-size:18px}.menu-message p{font-size:13px}.start-button{min-height:12cqw;margin-bottom:6%}.menu-settings{min-height:10cqw;font-size:18px}.game-bottom{top:69%;bottom:5%}.controls .candy-button{width:18.5cqw;height:18.5cqw;font-size:14px}.main-menu-button{min-height:32px;font-size:14px}.modal{padding:12% 7% 7%}.difficulty-options{gap:15px}.difficulty-option{min-height:66px}.modal h2{font-size:23px}.modal p{margin-bottom:5%}}
/* Fit the transparent sprite to its visible can, rather than its canvas padding. */
.bottle{aspect-ratio:.56}.bottle>img{inset:auto;left:-15.8%;top:-3.6%;width:131.6%;height:107%}
.liquid-window{left:7%;right:7%;top:21%;bottom:22%;border-radius:17% / 9%}
.menu-bottles .bottle{aspect-ratio:.56}
.bottle-row{padding:1% 2% 6%}
.board .bottle{height:min(96cqh,calc((100cqw / var(--cols) - 3cqw) / .56))}
.stage[data-difficulty="hard"] .board .bottle{height:min(88cqh,calc((100cqw / var(--cols) - 2cqw) / .56))}
.controls .candy-button{padding:1cqw .3cqw 1.5cqw}
.controls svg{width:4.6cqw;height:4.6cqw;margin-bottom:.3cqw}
.modal{padding:clamp(28px,5cqw,54px) clamp(20px,3.6cqw,42px) clamp(26px,4cqw,45px)}
.difficulty-option{min-height:clamp(62px,7.5cqw,84px)}
.difficulty-options{gap:clamp(14px,1.8cqw,22px)}
@media(max-width:600px){.board .bottle{height:min(94cqh,calc((100cqw / var(--cols) - 3cqw) / .56))}.stage[data-difficulty="hard"] .board .bottle{height:min(86cqh,calc((100cqw / var(--cols) - 3cqw) / .56))}.controls .candy-button{padding:1.2cqw .3cqw 1.7cqw}.controls svg{width:7cqw;height:7cqw;margin-bottom:.6cqw}.modal{padding:42px 24px 30px}.difficulty-option{min-height:72px}}
@media(max-width:600px) and (max-height:620px){.controls svg{width:6cqw;height:6cqw}.difficulty-option{min-height:62px}.modal{padding:34px 22px 25px}}
/* Fill the former metal surround with the colored button face. */
.stage{border-radius:0}
.candy-button,.round-button{border-color:transparent;background:none;box-shadow:none}
.candy-button::before,.round-button::before{display:none}
.candy-button::after,.round-button::after{inset:-6px;box-shadow:inset 0 3px 2px #fffa,inset 0 -5px 0 var(--cap-shadow),0 4px 0 var(--cap-shadow),0 7px 9px #251e3c65}
@media(max-width:600px){.candy-button::after,.round-button::after{inset:-4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}