@import url('/pressure.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&display=swap');
:root{font-family:'Noto Sans JP',sans-serif;color:#202428;background:#f2f3f4;font-synthesis:none;--ink:#202428;--muted:#697078;--lime:#c3f04b;--line:#e4e6e8;--red:#c64054}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #5d7e17;outline-offset:4px}button:disabled{cursor:default}button[hidden]{display:none}button,input,a{-webkit-tap-highlight-color:transparent}
.site-header{max-width:1080px;margin:auto;padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-family:Arial,sans-serif;font-size:24px;font-weight:900;letter-spacing:-1.3px;display:flex;align-items:center;gap:4px}.brand>span{background:var(--ink);color:var(--lime);padding:3px 5px}.brand small{font:11px monospace;letter-spacing:1.7px;margin-left:15px}.quiet{background:none;border:0;padding:10px 0;font-size:14px;color:var(--muted)}.quiet:hover{color:var(--ink)}main{max-width:1080px;margin:auto;padding:4px 28px 0}.game-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 8px 24px #20242805}.round-hud{display:flex;align-items:center;gap:24px;padding:17px 32px}.round-hud>span{font-size:14px;font-weight:700;margin-right:auto}.cup-count,.clock{white-space:nowrap}.cup-count strong{font:700 24px monospace}.cup-count span,.clock span{font-size:14px;color:var(--muted)}.clock strong{font:700 34px monospace;letter-spacing:-2px;display:inline-block;min-width:64px;text-align:right;margin-right:6px}.clock.urgent{color:var(--red)}#pause-game{font-size:23px;padding:0 4px}.time-track{height:4px;background:#edf0e8}#time-bar{height:100%;background:var(--ink);transition:width .08s linear}
.counter-scene{height:196px;position:relative;display:flex;align-items:center;padding:12px 36px 0;gap:24px;background:#f9faf7;border-bottom:1px solid var(--line)}.character{width:170px;height:180px;align-self:flex-end;flex-shrink:0;overflow:hidden}.portrait{width:100%;aspect-ratio:1;background-image:url('/assets/barista-modern.png');background-size:200% 200%;background-repeat:no-repeat}.expression-0{background-position:0 0}.expression-1{background-position:100% 0}.expression-2{background-position:0 100%}.expression-3{background-position:100% 100%}.conversation{flex:1;min-width:0;align-self:center;padding-bottom:12px}.speaker{font:12px monospace;color:var(--muted);letter-spacing:1px}.conversation p{font-size:18px;font-weight:600;line-height:1.7;margin:12px 0}.conversation #queue{font-size:13px;color:var(--muted);line-height:1.5}.custom-cup{width:190px;flex-shrink:0;align-self:center;text-align:center}.custom-cup #mix-caption{display:block;font-size:12px;color:var(--muted);line-height:1.5;min-height:30px}.drink-studio{height:146px;position:relative;overflow:hidden}.drink-composite{position:absolute;width:212px;height:212px;left:50%;bottom:-24px;transform:translateX(-50%) scale(calc(var(--cup-scale,1)*.76));transform-origin:50% 85%}.drink-art{aspect-ratio:1;background-image:url('/assets/retro-drinks.png');background-size:300% 200%;background-repeat:no-repeat;image-rendering:pixelated}.art-0{background-position:0 0}.art-1{background-position:50% 0}.art-2{background-position:100% 0}.art-3{background-position:0 100%}.art-4{background-position:50% 100%}.art-5{background-position:100% 100%}.drink-composite>.drink-art{position:absolute;inset:0;mix-blend-mode:multiply}.drink-ghost{filter:grayscale(1);opacity:.08}.drink-fill{transition:clip-path .1s linear}.topping-layer{position:absolute;width:132px;height:132px;top:-6px;left:42px;z-index:3;opacity:0;transform:translateY(calc((1 - var(--pour,0))*-16px)) scale(calc(.65 + var(--pour,0)*.35));transition:opacity .12s,transform .12s;pointer-events:none}.topping-sprite{position:absolute;inset:0;background-image:url('/assets/topping-atlas.png');background-size:300% 200%;background-repeat:no-repeat;image-rendering:pixelated}.topping-0{background-position:0 0}.topping-1{background-position:50% 0}.topping-2{background-position:100% 0}.topping-3{background-position:0 100%}.topping-4{background-position:50% 100%}.topping-5{background-position:100% 100%}.topping-caramel,.topping-vanilla{width:110px;height:110px;top:28px;left:51px;z-index:5;transform:scale(calc(var(--amount)*(.7 + var(--pour,0)*.3)))}.topping-vanilla{filter:saturate(.4) brightness(1.5)}.topping-chips{width:114px;height:114px;top:19px;left:49px;z-index:6}.topping-milk{width:124px;height:124px;top:63px;left:44px;z-index:4}.topping-espresso{width:122px;height:122px;top:46px;left:47px;z-index:4}.topping-whip{top:-12px;left:40px}.extra-whip{transform:translateY(-36px) scale(.75)}.extra-whip.second{transform:translateY(-64px) scale(.52)}.cosmic-mark{position:absolute;z-index:6;opacity:0;color:#677c20;font-family:serif;transition:opacity .2s}.cosmic-mark.moon{right:-3px;top:10px;font-size:48px}.cosmic-mark.stars{left:2px;top:3px;font-size:28px;letter-spacing:13px}.temperature-note{position:absolute;left:-3px;bottom:12px;background:#fff;padding:3px 5px;font-size:12px;opacity:0;z-index:5}.drink-composite.floating{animation:float 2s ease-in-out infinite}.order-receipt{position:absolute;font-size:12px;bottom:5px;right:10px;opacity:0;background:white}.custom-cup{position:relative}
#order-area{min-width:0}.order-ticket{padding:28px 42px 30px;min-height:254px;transition:background .1s}.ticket-top{display:flex;justify-content:space-between;gap:14px;font:13px monospace;color:var(--muted);min-height:24px}.ticket-top>span:last-child{font-family:'Noto Sans JP',sans-serif;font-size:13px}.order-name{position:relative;font-size:clamp(24px,2.5vw,30px);font-weight:700;line-height:2.1;letter-spacing:.025em;margin:18px 0 15px;max-height:138px;overflow:auto;overflow-wrap:anywhere;scrollbar-width:thin}.jp-part{display:inline;margin-right:.38em}.jp-unit{padding:2px 0;box-decoration-break:clone;-webkit-box-decoration-break:clone}.jp-unit.pending{color:var(--ink)}.jp-unit.done{color:#858b91}.jp-unit.current{background:var(--lime);color:var(--ink);box-shadow:0 3px 0 var(--ink);border-radius:2px}ruby{ruby-align:center}rt{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0}.romaji{position:relative;font:24px/1.85 Consolas,'Courier New',monospace;letter-spacing:.8px;overflow-wrap:anywhere;max-height:92px;overflow:auto;scrollbar-width:thin;color:var(--ink)}#typed{color:#858b91}#caret{display:inline;background:var(--lime);color:var(--ink);border-bottom:3px solid var(--ink);padding:2px 0}#remaining{color:var(--ink)}.order-ticket.key-miss{background:#fff0f2}.key-miss #caret{background:#ffb3be}.input-wrap{display:block;height:0;overflow:hidden}.input-wrap input{width:100%;padding:10px 14px;font-size:16px;background:#fff;border:1px solid #aeb5ba;border-radius:8px;outline-offset:2px}.play-bottom{min-height:88px;padding:12px 32px;display:flex;align-items:center;gap:20px;border-top:1px solid var(--line)}#completed-cups{display:flex;gap:8px;min-width:0}#combo-status{font:700 14px monospace;margin-left:auto;white-space:nowrap}#exit-game{font-size:13px}.completed-cup{width:54px;height:58px;position:relative;overflow:hidden;border-radius:8px;background:#f9faf7}.completed-cup .finished-cup{left:50%;bottom:-6px;transform:translateX(-50%) scale(.28);transform-origin:50% 100%;animation:appear .24s ease-out}.completed-cup .drink-ghost{display:none}#hit-feedback{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font-size:14px;font-weight:700;padding:6px 12px;border-radius:5px;white-space:nowrap;pointer-events:none}#hit-feedback:empty{display:none}#hit-feedback.success{background:var(--lime)}#hit-feedback.miss{background:#ffe0e6;color:#a8253b}
.under-note{font-size:13px;text-align:center;color:var(--muted);margin:18px 0 24px;line-height:1.8}.ad-space{height:66px;max-width:728px;margin:0 auto 22px;border:1px dashed #d6d9dc;border-radius:8px;display:grid;place-items:center;color:#737b82;font:10px monospace;letter-spacing:2px}footer{text-align:center;padding:10px 25px 24px;color:var(--muted);font-size:12px;line-height:1.8}.primary{display:inline-flex;align-items:center;justify-content:center;gap:30px;background:var(--ink);border:2px solid var(--ink);border-radius:10px;color:#fff;min-height:54px;padding:12px 28px;font-size:16px;font-weight:700;transition:background .15s,transform .15s}.primary span{color:var(--lime);font-size:24px}.primary:hover{background:#373e42;transform:translateY(-1px)}.secondary{border:1px solid #bcc2c6;border-radius:10px;background:#fff;padding:12px 20px;font-size:14px}.eyebrow{font-size:14px;color:var(--muted);letter-spacing:.08em;margin:0 0 18px}.ready-content{padding:46px 42px 54px 40%;position:relative}.game-logo-frame{width:min(100%,570px);margin:0 0 16px;background:#fff}.game-logo{display:block;width:100%;height:auto;object-fit:contain}.intro{font-size:14px;line-height:1.9;margin:0 0 25px;color:var(--muted)}.level-list{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:11px}.level{font-size:14px;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;white-space:nowrap}.level:hover{border-color:var(--ink)}.level.selected{border-color:var(--ink);background:var(--lime);font-weight:700}.level-description{font-size:13px;line-height:1.8;min-height:24px;margin:0 0 24px;color:var(--muted)}.level-description strong{font-size:13px;font-weight:500;display:inline-block;margin-left:8px;color:var(--ink)}.space-hint{font:12px monospace;display:block;color:var(--muted);margin-top:14px}
[data-screen=idle] .round-hud,[data-screen=idle] .time-track,[data-screen=idle] .play-bottom{display:none}[data-screen=idle] .counter-scene{position:absolute;inset:0 auto 0 0;width:37%;height:100%;padding:0;display:block;border:0;background:#eff3e8}[data-screen=idle] .character{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);width:110%;height:auto;aspect-ratio:1;max-width:390px}[data-screen=idle] .conversation{position:absolute;bottom:35px;left:0;width:100%;padding:0;text-align:center}[data-screen=idle] .conversation p{font-size:15px;margin:7px 0 0}[data-screen=idle] .speaker{font-size:12px}[data-screen=idle] .custom-cup{display:none}[data-screen=playing] .ad-space,[data-screen=countdown] .ad-space,[data-screen=paused] .ad-space{display:none}[data-screen=countdown] #pause-game,[data-screen=result] #pause-game{visibility:hidden}[data-screen=result] .play-bottom{justify-content:center}[data-screen=result] #combo-status,[data-screen=result] #exit-game{display:none}
.countdown{min-height:254px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.countdown span{font-size:14px;color:var(--muted)}.countdown strong{font:900 86px monospace}.result-content{padding:30px 36px;text-align:center}.result-content h2{font-size:30px;letter-spacing:-.8px;margin:8px 0 12px}.result-content>p{color:var(--muted);font-size:15px}.result-content .eyebrow{font-family:monospace;margin-bottom:10px}.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:650px;margin:28px auto}.result-stats>div{display:flex;flex-direction:column;gap:8px}.result-stats strong{font:700 30px monospace}.result-stats small{font-size:16px}.result-stats span{font-size:13px;color:var(--muted)}.result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}#scene-overlay:empty{display:none}.pause-card{position:absolute;inset:0;z-index:10;background:#fffffff5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;text-align:center}.pause-card>span{font:14px monospace;letter-spacing:4px;color:var(--muted)}.pause-card h2{font-size:26px;margin:0 0 5px}dialog{width:min(590px,calc(100% - 32px));max-height:85vh;overflow:auto;border:0;border-radius:16px;padding:38px;color:var(--ink);box-shadow:0 30px 100px #0002}dialog::backdrop{background:#20242880;backdrop-filter:blur(4px)}dialog h2{font-size:24px;margin:10px 0 24px}dialog p{font-size:16px;line-height:1.9;color:#505960}.dialog-close{position:absolute;right:16px;top:8px;background:none;border:0;font-size:28px}.sound-settings{display:flex;gap:12px;margin:26px 0}.sound-settings button{border:1px solid #cbd0d2;background:#fff;border-radius:8px;padding:12px 20px;font-size:15px}.sound-settings strong{margin-left:10px;color:#536f14}.sound-settings [aria-pressed=false] strong{color:var(--muted)}dialog>.primary{width:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes float{50%{translate:0 -6px}}@keyframes appear{from{opacity:0;translate:12px 0}to{opacity:1;translate:0 0}}
@media(max-width:800px){.brand small{display:none}.ready-content{padding:36px 24px 38px 40%}.level-description strong{display:block;margin-left:0}.counter-scene{padding-left:20px;padding-right:20px;gap:12px}.character{width:140px;height:154px}.conversation p{font-size:16px}.custom-cup{width:155px}.order-ticket{padding:24px 28px}.order-name{font-size:26px}}
@media(max-width:600px){.site-header{padding:19px 16px}.brand{font-size:21px}.site-header .quiet{font-size:12px}main{padding:0 12px}.game-card{border-radius:14px}.round-hud{padding:14px 17px;gap:15px}.round-hud>span{font-size:13px}.clock strong{font-size:28px;min-width:44px}.cup-count strong{font-size:21px}.counter-scene{height:158px;padding:8px 8px 0;gap:4px}.character{width:106px;height:120px}.conversation{padding-bottom:0}.conversation p{font-size:14px;margin:8px 0;line-height:1.6}.speaker{font-size:10px;letter-spacing:0}.conversation #queue{font-size:11px}.custom-cup{width:105px}.custom-cup #mix-caption{font-size:10px;min-height:25px}.drink-studio{height:108px}.custom-cup .drink-composite{transform:translateX(-50%) scale(calc(var(--cup-scale,1)*.52));bottom:-28px}.order-ticket{padding:22px 20px;min-height:265px}.order-name{font-size:23px;line-height:2.25;max-height:163px;margin-top:16px}rt{font-size:10px}.romaji{font-size:20px;max-height:115px}.input-wrap{height:auto;margin-top:20px;overflow:visible}.play-bottom{min-height:73px;padding:10px 15px;gap:8px}#combo-status{font-size:11px}#exit-game{font-size:11px}.completed-cup{width:39px;height:46px}.completed-cup .finished-cup{transform:translateX(-50%) scale(.22)}#completed-cups{gap:4px}.under-note{font-size:12px;margin:14px 10px 20px}.ready-content{padding:225px 18px 32px;text-align:center}.game-logo-frame{width:100%;margin-bottom:16px}.intro{font-size:13px;margin-bottom:23px}.level-list{justify-content:center;gap:5px}.level{font-size:13px;padding:7px 8px;min-height:38px}.level-description{font-size:12px;margin-bottom:19px}.level-description strong{display:inline;margin-left:7px;font-size:12px}.ready-content .primary{width:100%;max-width:320px}.space-hint{font-size:11px}[data-screen=idle] .counter-scene{top:0;left:0;width:100%;height:205px;background:#eff3e8;overflow:hidden}[data-screen=idle] .character{width:205px;max-width:none;bottom:-1px;left:50%}[data-screen=idle] .conversation{display:none}.result-content{padding:26px 18px}.result-content h2{font-size:25px}.result-stats{gap:7px;margin:24px 0}.result-stats strong{font-size:25px}.result-stats span{font-size:11px}.result-content .primary{font-size:15px}.result-actions{gap:9px}.countdown{min-height:265px}.ad-space{height:54px}.order-receipt{font-size:10px}.sound-settings button{padding:10px 13px;font-size:14px}dialog{padding:32px 23px}dialog h2{font-size:22px}}
/* Separate cup and ingredient sprites. Each completed custom lands once. */
.assembly-piece.assembly-note{right:-12px;top:80px;padding:0;background:none;max-width:155px}.assembly-piece.assembly-note>.assembly-note{max-width:155px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.assembly-piece[hidden]{display:none}
[data-screen=idle] .speaker{display:none}
.ingredient-sprite{position:absolute;inset:0;background-image:url('/assets/ingredient-atlas.png');background-size:300% 300%;background-repeat:no-repeat}
.ingredient-0{background-position:0 0}.ingredient-1{background-position:50% 0}.ingredient-2{background-position:100% 0}.ingredient-3{background-position:0 50%}.ingredient-4{background-position:50% 50%}.ingredient-5{background-position:100% 50%}.ingredient-6{background-position:0 100%}.ingredient-7{background-position:50% 100%}.ingredient-8{background-position:100% 100%}
.drink-studio{overflow:visible}.assembled-drink{bottom:-12px;transform:translateX(-50%) scale(calc(var(--cup-scale,1)*.62))}.empty-cup{opacity:.65}.assembly-piece{position:absolute;opacity:0;transform:none;z-index:calc(3 + var(--layer));pointer-events:none}.assembly-piece.placed{opacity:1;animation:ingredient-land .48s cubic-bezier(.2,.7,.25,1) both;animation-delay:var(--drop-delay,0ms)}.assembly-base{inset:0;z-index:1}.assembly-base.placed{animation:drink-pour .55s ease-out both}.assembly-whip{width:122px;height:122px;left:45px;top:calc(-20px - var(--stack,0)*23px)}.assembly-caramel,.assembly-vanilla{width:108px;height:80px;left:52px;top:8px;scale:var(--amount)}.assembly-vanilla{filter:saturate(.4) brightness(1.3)}.assembly-chips{width:105px;height:95px;left:53px;top:2px}.assembly-milk,.assembly-espresso{width:118px;height:90px;left:47px;top:16px}.assembly-lobster{width:112px;height:140px;left:51px;top:-78px}.assembly-noodles{width:143px;height:105px;left:35px;top:-3px}.assembly-ring{width:205px;height:150px;left:4px;top:8px}.assembly-note{display:block;background:#fff;font-size:14px;color:#526820;white-space:nowrap;padding:3px 5px;border-radius:4px}.assembly-moon{right:-8px;top:-8px}.assembly-moon .assembly-note{font-size:42px;background:none}.assembly-stars{left:-12px;top:0}.assembly-stars .assembly-note{font-size:26px;background:none}.assembly-temperature{bottom:5px;left:0}.assembly-receipt{bottom:-14px;left:30px}.assembly-floating{left:0;bottom:30px}.extra-piece{position:absolute;inset:0;transform:translateY(-28px) scale(.8)}.extra-piece.second{transform:translateY(-52px) scale(.6)}.assembly-ring .extra-piece{transform:translateY(-18px) rotate(15deg)}.assembly-ring .extra-piece.second{transform:translateY(-36px) rotate(-15deg)}
.pour-stream{position:absolute;left:30%;top:-48px;width:40%;height:85px;opacity:0}.placed>.pour-stream{animation:pour-ingredient .6s ease-in-out both;animation-delay:var(--drop-delay,0ms)}.assembly-base .pour-stream{left:30%;top:-25px;width:40%;height:100px}.assembly-base:has(~.assembly-piece.placed)>.pour-stream{pointer-events:none}.preview-drink .assembly-piece{animation:none!important}.preview-drink .pour-stream{display:none}.completed-cup .assembly-piece{animation-duration:.4s;animation-delay:0ms}.completed-cup .pour-stream{display:none}.completed-cup .empty-cup{display:none}[data-screen=paused] .assembly-piece,[data-screen=paused] .pour-stream{animation-play-state:paused}
@keyframes ingredient-land{0%{opacity:0;transform:translateY(-75px) rotate(-8deg)}25%{opacity:1}75%{transform:translateY(4px) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes drink-pour{0%{opacity:0}40%{opacity:.3}100%{opacity:1}}
@keyframes pour-ingredient{0%{opacity:0;transform:translateY(-25px) scaleY(.3)}25%,65%{opacity:1;transform:translateY(0) scaleY(1)}100%{opacity:0;transform:translateY(10px) scaleY(.6)}}
@media(max-width:600px){.custom-cup .assembled-drink{transform:translateX(-50%) scale(calc(var(--cup-scale,1)*.43));bottom:-8px}.assembly-note{font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.pour-stream{display:none}}