:root{--red:#fd0203;--pink:#e4b6ef;--blue:#d1eaee;--black:#000;--cream:#f4f3f1}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--cream);color:#000;font-family:"Inter",sans-serif;min-height:100vh;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.top{display:flex;justify-content:space-between;gap:8px;width:100%;max-width:650px;margin:0 auto;padding:8px 14px;background:var(--red);border-left:2px solid #000;border-right:2px solid #000;border-bottom:2px solid #000;font:400 12px "Anton",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.top a{text-decoration:none}
.wrap{width:100%;max-width:650px;min-height:calc(100vh - 34px);margin:0 auto;padding:26px 16px 60px;text-align:center;border-left:2px solid #000;border-right:2px solid #000}
h1{font:400 clamp(40px,11vw,64px)/.95 "Anton",sans-serif;text-transform:uppercase;letter-spacing:.01em}
h1 span{color:var(--red)}
.sub{max-width:360px;margin:12px auto 22px;font-size:14px;line-height:1.5}

.stage{position:relative;padding:16px 12px 12px;background:var(--blue);border:2px solid #000;box-shadow:7px 7px 0 #000}
.tag{position:absolute;top:-13px;left:14px;padding:5px 9px;background:var(--pink);border:2px solid #000;font:700 11px "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-3deg)}
.mood{min-height:28px;font:400 20px/1.1 "Anton",sans-serif;text-transform:uppercase;margin-bottom:2px}
svg.bowl{display:block;width:100%;max-width:380px;height:auto;margin:0 auto;overflow:visible}
.amt{margin:2px 0 12px;font:400 54px/1 "Anton",sans-serif}
.amt small{font-size:15px;font-family:"Inter",sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-left:6px}

.chips{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.chip{padding:9px 14px;border:2px solid #000;background:var(--cream);font:400 18px "Anton",sans-serif;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.chip:hover,.chip.on{background:#000;color:var(--cream)}
.chip:active{transform:translateY(2px)}
.pour{width:100%;padding:13px;border:2px solid #000;background:var(--pink);font:400 22px "Anton",sans-serif;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:4px 4px 0 #000;transition:transform .1s,box-shadow .1s}
.pour:active,.pour.hold{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}
.hint{margin:7px 0 12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
input[type=range]{width:100%;accent-color:#000;height:28px}
.row{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

.go{display:block;margin-top:20px;padding:15px;border:2px solid #000;background:var(--red);font:400 26px/1 "Anton",sans-serif;text-transform:uppercase;text-decoration:none;box-shadow:5px 5px 0 #000;transition:transform .15s,background .15s,color .15s}
.go:hover{background:#000;color:var(--cream);transform:translateY(-2px)}
.go[aria-disabled=true]{background:var(--cream);color:#0007;pointer-events:none;box-shadow:5px 5px 0 #0003;border-color:#0004}
.fine{margin-top:14px;font-size:11px;line-height:1.5;opacity:.7}

/* bowl bits */
.steam path{stroke:#000;stroke-width:3;fill:none;stroke-linecap:round;opacity:0}
.full .steam path{animation:steam 2.4s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:.6s!important}.steam path:nth-child(3){animation-delay:1.2s!important}
@keyframes steam{0%{opacity:0;transform:translateY(8px)}30%{opacity:.7}100%{opacity:0;transform:translateY(-22px)}}
.t{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center bottom;transition:opacity .25s,transform .45s cubic-bezier(.3,1.7,.5,1)}
.t.show{opacity:1;transform:scale(1)}
.bowl.full{animation:wob .5s ease 1}
@keyframes wob{25%{transform:rotate(-2deg) scale(1.02)}60%{transform:rotate(1.5deg)}}
.heart{position:absolute;pointer-events:none;font-size:22px;animation:rise 1.4s ease-out forwards}
@keyframes rise{from{opacity:1;transform:translateY(0) scale(.6)}to{opacity:0;transform:translateY(-130px) scale(1.2) rotate(18deg)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* Match Boy Paper desktop framing; remove the frame on mobile. */
@media(max-width:650px){.top,.wrap{max-width:none;border-left:0;border-right:0}.wrap{min-height:calc(100vh - 34px)}}