:root{color-scheme:dark;--ink:#24283f;--night:#191e35;--cream:#fff0cf;--gold:#efd08b;--muted:#afb0c2;--line:#424760;--mint:#a7d6c0}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 26%,#31354d 0,#1b2036 52%,#141a2b 100%);color:var(--cream);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--mint);outline-offset:4px}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}.game-shell{width:min(100% - 48px,1040px);margin:0 auto;padding:26px 0 16px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.brand{color:#a5a9be;font-size:10px;letter-spacing:2.4px;font-weight:700;text-decoration:none}.brand span{display:block;margin-top:5px;color:var(--cream);font-size:20px;letter-spacing:1px;font-weight:700}.tools{display:flex;gap:8px}.tools button{border:1px solid #56596e;color:#e2d8c5;background:#242940;padding:9px 13px;font-size:12px;min-height:38px}.tools button:hover:not(:disabled){background:#373c54}.cabinet{border:2px solid #55516a;box-shadow:0 0 0 6px #22263b,0 16px 40px #060c2066;background:#22263c}.scorebar{display:flex;justify-content:space-between;align-items:center;height:75px;padding:10px 28px;background:#262b43;border-bottom:2px solid #45445c}.eyebrow{display:block;color:#c0b7bc;font-size:10px;letter-spacing:2px;margin-bottom:3px}.scorebar strong{font:700 25px/1.1 ui-monospace,monospace;letter-spacing:2px;color:var(--gold)}.time{text-align:right}.time small{font-size:12px;letter-spacing:0;color:#b6b5c5}.round{text-align:center}.round .eyebrow{font-size:12px;letter-spacing:1px}.round-dots{font-size:10px;letter-spacing:7px;color:#d8ba8d}.stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:8/5;background:#202940}#canvas{width:100%;height:100%;display:block;image-rendering:pixelated;touch-action:none;cursor:crosshair;outline-offset:-5px}#canvas:focus{outline:none}#canvas:focus-visible{outline:3px solid var(--mint);outline-offset:-4px}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#101a342d;pointer-events:none}.paper{pointer-events:auto;position:relative;width:356px;text-align:center;padding:25px 34px 19px;color:#3c3544;background:#fff0d3;box-shadow:0 8px 0 #101c3655;clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,100% 4px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) 100%,8px 100%,8px calc(100% - 4px),0 calc(100% - 4px),0 8px,8px 8px)}.tiny-star{display:block;font-size:23px;color:#ac7862;line-height:1}.kicker{font-size:11px;letter-spacing:1px;margin:12px 0 11px;color:#827079}h1{font-size:30px;line-height:1.5;font-weight:700;letter-spacing:4px;margin:0}h1 em{font-style:normal;font-size:34px;color:#5b4d6d;letter-spacing:2px}.intro-copy{font-size:13px;line-height:1.85;margin:13px 0 15px;color:#7d6570}.lesson{display:flex;justify-content:center;gap:13px;font-size:11px;margin:0 0 17px}.lesson b{display:inline-grid;place-items:center;width:18px;height:18px;color:#fff0d3;background:#9b7b82;font-size:10px;margin-right:3px}.primary{border:0;background:#6b5679;color:#fff3d7;width:100%;padding:12px 14px;font-size:14px;font-weight:700;box-shadow:0 4px 0 #493c59;letter-spacing:1px;min-height:44px}.primary:hover{background:#7d648c}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #493c59}.primary span{padding-left:12px}.small-note{font-size:10px;color:#95838b;margin:12px 0 0}.status-line{position:absolute;left:50%;top:23px;transform:translateX(-50%);padding:7px 14px;max-width:90%;white-space:nowrap;background:#1e2947e6;border:1px solid #7d7185;color:#fff0c8;font-size:13px;pointer-events:none;opacity:0;transition:opacity .12s}.status-line.show{opacity:1}.bottom-hud{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;min-height:51px;background:#272b41;border-top:2px solid #575068}.latte-meter{display:flex;align-items:center;gap:11px;font-size:11px;letter-spacing:.5px}.meter-track{width:132px;height:8px;background:#464356;box-shadow:inset 0 2px 0 #1e2436}.meter-track i{display:block;width:0;height:100%;background:#e7bd8c;transition:width .3s}.latte-meter b{font:12px ui-monospace,monospace;color:var(--gold);width:34px}.combo{font-size:12px;color:#d9b996}.compact{padding:30px 32px}.compact h2{font-size:25px;line-height:1.65;letter-spacing:1px}.compact>p:not(.kicker){font-size:12px;line-height:1.8;margin-bottom:25px}.text-button{border:0;border-bottom:1px solid #a39398;color:#6a5b70;background:none;margin-top:18px;padding:5px;font-size:12px}.result{width:420px;padding:22px 30px}.result h2{font-size:24px;letter-spacing:1px;margin:8px 0 0}.result #latte-art{width:220px;height:125px;image-rendering:pixelated;display:block;margin:0 auto}.result-quote{font-size:13px;line-height:1.7;margin:0 0 14px;color:#7d6570;min-height:22px}.result-numbers{display:flex;justify-content:space-around;border-top:1px solid #d3bfad;border-bottom:1px solid #d3bfad;padding:10px 0}.result-numbers small{display:block;font-size:10px;color:#827079}.result-numbers b{display:block;font:22px ui-monospace,monospace;margin-top:4px}.result-detail{font-size:11px;margin:12px 0 18px;color:#7d6570}footer{display:flex;gap:12px;align-items:start;justify-content:space-between;padding:13px 1px 0;color:#a7a7bb;font-size:11px;line-height:1.85}footer p{margin:0}.keys{font-size:10px;color:#7f849d;display:block}.legend{white-space:nowrap;font-size:10px}.legend span{margin-left:9px;margin-right:2px}.star-dot{color:#f7d78c}.sugar-dot{color:#c4e8ec}.bean-dot{color:#dfbba0}.mobile-break{display:none}@media(max-width:700px){.game-shell{width:calc(100% - 20px);padding-top:18px}.brand{font-size:8px;letter-spacing:1.3px}.brand span{font-size:16px}.tools{gap:5px}.tools button{font-size:10px;padding:7px 9px}.scorebar{height:62px;padding:9px 15px}.scorebar strong{font-size:21px}.round .eyebrow{font-size:10px;letter-spacing:0}.eyebrow{font-size:8px}.stage{aspect-ratio:6/5}#canvas{object-fit:cover}.paper{width:310px;padding:18px 23px 14px}.tiny-star{font-size:18px}.kicker{font-size:10px;margin:9px 0 8px}h1{font-size:22px;line-height:1.35}h1 em{font-size:27px}.intro-copy{font-size:11px;margin:10px 0}.lesson{font-size:10px;margin:0 0 13px;gap:11px}.primary{font-size:12px;padding:10px;min-height:40px}.small-note{font-size:9px}.bottom-hud{padding:10px 13px;gap:6px}.latte-meter{gap:6px;font-size:10px}.meter-track{width:70px}.combo{font-size:10px}.latte-meter b{font-size:10px;width:25px}footer{display:block;font-size:10px;padding-top:13px}.keys{font-size:9px}.legend{margin-top:5px}.legend span:first-child{margin-left:0}.status-line{top:10px;font-size:11px;padding:5px 9px}.result{width:310px;padding:16px 24px}.result h2{font-size:19px}.result #latte-art{width:170px;height:97px}.result-quote{font-size:11px;margin:0 0 8px}.result-numbers{padding:7px 0}.result-numbers b{font-size:19px}.result-numbers small{font-size:9px}.result-detail{margin:9px 0 13px;font-size:10px}.compact h2{font-size:22px}.compact>p:not(.kicker){margin-bottom:18px;font-size:11px}}@media(max-width:380px){.stage{aspect-ratio:5/5}.paper{width:280px;padding:15px 20px}.round .eyebrow{font-size:9px}.brand span{font-size:14px}.combo{font-size:9px}.bottom-hud{padding:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Phone dialogs stay in the viewport; the actual world never crops or distorts. */
@media(max-width:700px){.stage{aspect-ratio:8/5}#canvas{object-fit:fill}.overlay{position:fixed;z-index:10;padding:18px 12px;background:#111a37b8;overflow:auto}.paper{flex-shrink:0;margin:auto}.result{max-height:calc(100svh - 36px);overflow:auto}.keys{font-size:10px}.mobile-break{display:block}.legend{font-size:11px}}
@media(max-height:520px) and (max-width:700px){.overlay{align-items:flex-start}.paper{margin:auto}.intro-copy{display:none}.kicker{margin-top:4px}.result #latte-art{height:65px;width:114px}}

.hosted-links{display:flex;justify-content:space-between;gap:18px;margin-top:16px;padding-top:12px;border-top:1px solid #3d4157;font-size:11px}.hosted-links a{color:#aba8bd;text-decoration:none}.hosted-links a:hover{color:#f1d29e}
/* Keep the full rooftop and help in view on common laptop screens. */
@media(min-width:701px){.game-shell{width:min(calc(100% - 48px),1040px,max(620px,calc((100svh - 285px)*1.6)))}}