:root { --cream:#fffaf2; --ink:#241e22; --pink:#ef6f8d; --hot-pink:#e94f79; --sage:#b9d3bd; --matcha:#789d7e; --latte:#c99e80; --berry:#c94f72; --ice:#c4dfe4; --yellow:#f8d66d; --line:#2f282c; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:'Karla',sans-serif; background-image:radial-gradient(#eadfce 1px,transparent 1px); background-size:18px 18px; }
.filter-defs { position:absolute; pointer-events:none; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.6),transparent 35%); }
.app-shell { max-width:1240px; margin:auto; padding:30px 52px 22px; }
.topbar { display:flex; align-items:center; border-bottom:1.5px solid var(--line); padding-bottom:20px; }
.brand { display:flex; gap:10px; color:inherit; text-decoration:none; text-transform:uppercase; font:500 12px/1.05 'IBM Plex Mono',monospace; letter-spacing:.08em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border:2px solid var(--line); border-radius:50%; background:var(--pink); font:700 11px 'Karla'; letter-spacing:-.08em; transform:rotate(-9deg); }
.day-stamp { margin:auto; text-align:center; font:500 10px/1.4 'IBM Plex Mono',monospace; letter-spacing:.12em; }.day-stamp span { color:#9c8e85; }
.scoreboard { display:flex; align-items:center; gap:12px; font:500 10px 'IBM Plex Mono',monospace; letter-spacing:.09em; }.scoreboard strong { font:700 15px 'IBM Plex Mono',monospace; }.coin { color:var(--hot-pink); font-size:22px; }
.intro { padding:62px 0 52px; text-align:center; }.eyebrow,.section-label { font:500 10px 'IBM Plex Mono',monospace; letter-spacing:.16em; }.intro h1 { margin:10px 0 8px; font:800 clamp(44px,6vw,75px)/.95 'Fraunces',serif; letter-spacing:-.04em; }.intro h1 em { color:var(--hot-pink); font-style:normal; }.intro p { margin:18px 0 0; color:#75666b; font-size:14px; line-height:1.55; }
.game-grid { display:grid; grid-template-columns:250px 1fr; gap:68px; }.section-label { display:flex; gap:12px; align-items:center; }.section-label span { color:var(--hot-pink); }
.recipe-list { margin-top:24px; display:grid; gap:10px; }.recipe-card { border:1.5px solid #d9cfc5; padding:15px 14px; cursor:pointer; background:rgba(255,255,255,.35); transition:.2s; }.recipe-card:hover,.recipe-card.active { transform:translate(-4px,-4px); border-color:var(--line); box-shadow:5px 5px 0 var(--line); background:#fff; }.recipe-card.active { border-left:5px solid var(--hot-pink); }.recipe-card strong { font:700 17px 'Fraunces',serif; }.recipe-card small { display:block; color:#9d8f88; font:10px 'IBM Plex Mono',monospace; margin-top:7px; letter-spacing:.05em; }.order-note { display:flex; gap:13px; margin-top:30px; padding-top:22px; border-top:1px solid #ded4cb; color:#887878; font:12px/1.45 'IBM Plex Mono',monospace; }.order-note p { margin:0; }.order-note b { color:var(--ink); }.spark { color:var(--yellow); font-size:25px; }
.station-panel { min-width:0; }.station-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:17px; }.station-heading h2 { margin:10px 0 0; font:700 28px 'Fraunces',serif; }.text-button { border:0; background:none; color:#8f7d80; font:500 10px 'IBM Plex Mono',monospace; cursor:pointer; letter-spacing:.1em; }.text-button span { font-size:20px; color:var(--hot-pink); vertical-align:-2px; }
.countertop { position:relative; min-height:340px; overflow:hidden; border:1.5px solid var(--line); background:#e7c9b8; background-image:linear-gradient(105deg,rgba(255,255,255,.25),transparent 45%),repeating-linear-gradient(165deg,transparent 0 50px,rgba(134,90,75,.07) 51px 53px); }.order-ticket { position:absolute; top:20px; left:22px; z-index:5; display:grid; gap:4px; max-width:220px; }.order-ticket span,.recipe-readout span { font:500 9px 'IBM Plex Mono',monospace; letter-spacing:.12em; color:#6f5856; }.order-ticket strong { font:700 16px 'Fraunces',serif; }.order-ticket i { position:absolute; left:60px; top:-8px; color:var(--hot-pink); font-style:normal; }.order-ticket > input { width:150px; padding:0; border:0; outline:0; background:transparent; color:var(--ink); font:700 16px 'Fraunces',serif; text-transform:uppercase; }.quote-editor { position:relative; display:block; margin:6px 0 0; transform:rotate(-4deg); transform-origin:left top; }.quote-editor textarea { width:220px; min-height:52px; padding:9px 10px 22px; resize:none; border:1.5px solid var(--line); border-radius:3px 12px 12px 12px; outline:none; background:var(--cream); color:var(--ink); font:10px/1.35 'IBM Plex Mono',monospace; box-shadow:3px 3px 0 rgba(47,40,44,.16); }.quote-editor textarea:focus { border-color:var(--hot-pink); }.quote-editor button { position:absolute; bottom:6px; right:8px; border:0; background:none; color:var(--hot-pink); cursor:pointer; font:500 8px 'IBM Plex Mono',monospace; }
.drink-stage { position:absolute; inset:25px 0 0; display:grid; place-items:center; }.glass { width:150px; height:205px; position:relative; z-index:2; overflow:hidden; border:3px solid rgba(47,40,44,.5); border-top:0; border-radius:10px 10px 34px 34px; background:linear-gradient(100deg,rgba(255,255,255,.28),rgba(255,255,255,.08) 45%,rgba(80,55,55,.12)); transform:perspective(400px) rotateX(-1deg); box-shadow:inset 8px 0 14px rgba(255,255,255,.2),inset -8px 0 14px rgba(80,55,55,.12),0 10px 0 rgba(47,40,44,.08); transition:box-shadow .25s,transform .25s; }.glass::before { content:''; position:absolute; inset:0; z-index:6; pointer-events:none; background:transparent; filter:url(#paper-noise); opacity:.28; }.glass::after { content:''; position:absolute; left:5%; top:2%; width:8%; height:82%; z-index:7; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.45),transparent); border-radius:50%; opacity:.9; }.glass-rim { position:absolute; left:-4px; top:-11px; width:152px; height:32px; z-index:8; border:3px solid rgba(47,40,44,.55); border-radius:50%; background:rgba(255,255,255,.18); box-shadow:inset 0 5px 4px rgba(255,255,255,.5),0 2px 4px rgba(47,40,44,.18); pointer-events:none; }.glass-rim::after { content:''; position:absolute; left:8px; right:8px; top:7px; height:15px; border-radius:50%; background:rgba(255,255,255,.12); }.glass-reflection { position:absolute; left:13px; top:20px; width:9px; height:135px; z-index:9; border-radius:50%; background:linear-gradient(90deg,rgba(255,255,255,.55),transparent); transform:rotate(3deg); pointer-events:none; }.glass.mixing { animation:jarMix .85s ease-in-out; box-shadow:inset 8px 0 14px rgba(255,255,255,.2),inset -8px 0 14px rgba(80,55,55,.12),0 0 0 5px rgba(239,111,141,.16),0 10px 0 rgba(47,40,44,.08); }.glass.mixing .layer { animation:liquidSwirl .85s ease-in-out; }.layer { position:absolute; bottom:0; left:0; width:100%; height:0; overflow:hidden; transition:height .45s cubic-bezier(.2,.8,.2,1),background-color .3s; border-top:1px solid rgba(255,255,255,.35); background:var(--marble); filter:url(#liquid-blur); }.layer::before,.layer::after { content:''; position:absolute; pointer-events:none; border-radius:50% 60% 40% 50%; }.layer::before { width:80%; height:35%; left:-10%; top:-18%; background:rgba(255,255,255,.18); }.layer::after { width:60%; height:45%; right:-12%; bottom:-25%; background:rgba(255,255,255,.1); }.micro-bubble { position:absolute; left:var(--bubble-x); top:var(--bubble-y); width:var(--bubble-size); height:var(--bubble-size); border:1px solid rgba(255,255,255,.6); border-radius:50%; background:rgba(255,255,255,.18); }.foam-cloud { position:absolute; left:3%; right:3%; top:-10%; height:46%; border-radius:50% 60% 40% 50%; background:radial-gradient(circle at 20% 65%,rgba(255,255,255,.68) 0 18%,transparent 19%),radial-gradient(circle at 49% 35%,rgba(255,255,255,.75) 0 24%,transparent 25%),radial-gradient(circle at 78% 65%,rgba(255,255,255,.55) 0 20%,transparent 21%); filter:blur(.3px); }.saucer { position:absolute; bottom:18px; width:200px; height:23px; background:#faf1e8; border:2px solid var(--line); border-radius:50%; z-index:1; }.table-shadow { position:absolute; bottom:20px; width:230px; height:20px; background:rgba(91,57,52,.2); filter:blur(10px); border-radius:50%; }.steam { position:absolute; z-index:3; width:22px; height:64px; border-left:2px solid rgba(255,255,255,.7); border-radius:50%; animation:float 3s infinite ease-in-out; }.steam-one { margin-left:-45px; margin-top:-190px; }.steam-two { margin-left:43px; margin-top:-200px; animation-delay:1s; } @keyframes float { 50% { transform:translateY(-13px) rotate(8deg); opacity:.35; } } @keyframes jarMix { 25% { transform:perspective(400px) rotateX(-1deg) rotate(-2deg); } 75% { transform:perspective(400px) rotateX(-1deg) rotate(2deg); } } @keyframes liquidSwirl { 50% { transform:scaleX(1.035) skewX(-1deg); } }
.recipe-readout { margin:16px 0 0; display:flex; align-items:center; justify-content:space-between; gap:16px; }.recipe-readout span { display:block; flex:none; font:500 9px 'IBM Plex Mono',monospace; letter-spacing:.12em; color:#6f5856; }.recipe-readout div { display:flex; gap:7px; justify-content:flex-end; flex-wrap:wrap; }.layer-chip { padding:5px 8px; border:1px solid rgba(47,40,44,.35); border-radius:20px; font:10px 'IBM Plex Mono',monospace; background:rgba(255,250,242,.65); }.layer-chip::before { content:'●'; margin-right:5px; color:var(--chip); }.cafe-passport { max-width:100%; margin:10px 0 0; color:#765f5b; font:9px/1.4 'IBM Plex Mono',monospace; }
.controls-heading { display:flex; justify-content:space-between; align-items:center; margin:30px 0 15px; }.hint { color:#ae9c96; font:10px 'IBM Plex Mono',monospace; letter-spacing:.1em; }.ingredient-buttons { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }.ingredient { min-height:72px; border:1.5px solid var(--line); border-radius:8px; background:#fffaf2; box-shadow:3px 3px 0 var(--line); cursor:pointer; font:500 11px 'IBM Plex Mono',monospace; color:var(--ink); transition:.15s; }.ingredient:hover,.ingredient.pouring { transform:translateY(3px); box-shadow:0 0 0 var(--line); background:var(--button-color); }.ingredient .swatch { display:block; width:24px; height:24px; margin:0 auto 8px; border-radius:50%; background:var(--button-color); border:1px solid rgba(47,40,44,.2); }.action-row { display:flex; gap:10px; align-items:stretch; margin-top:25px; }.serve-button { width:100%; margin-top:0; padding:15px 20px; display:flex; justify-content:space-between; align-items:center; border:2px solid var(--line); border-radius:7px; background:var(--hot-pink); box-shadow:5px 5px 0 var(--line); cursor:pointer; color:#fff; font:700 12px 'IBM Plex Mono',monospace; letter-spacing:.1em; transition:.15s; }.serve-button:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--line); }.serve-button b { font-size:22px; }.sound-button { width:54px; border:2px solid var(--line); border-radius:7px; background:var(--yellow); box-shadow:5px 5px 0 var(--line); color:var(--ink); cursor:pointer; font-size:21px; }.sound-button:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--line); }.result { min-height:25px; margin-top:15px; text-align:center; font:700 13px 'IBM Plex Mono',monospace; color:var(--hot-pink); }.success .countertop { animation:shake .45s; } @keyframes shake { 25% { transform:translateX(-5px) rotate(-.4deg); } 75% { transform:translateX(5px) rotate(.4deg); } }
footer { display:flex; justify-content:space-between; margin-top:55px; padding-top:15px; border-top:1px solid #ded4cb; color:#6f6260; font:9px 'IBM Plex Mono',monospace; letter-spacing:.12em; } footer span:nth-child(2) { color:var(--hot-pink); } .footer-link { color:var(--ink); font:700 9px 'IBM Plex Mono',monospace; letter-spacing:.12em; text-decoration:underline; text-underline-offset:3px; transition:.15s; } .footer-link:hover { color:var(--hot-pink); }
@media (max-width:800px) { .app-shell { padding:18px 14px 20px; }.topbar { padding-bottom:14px; }.intro { padding:35px 0 28px; }.intro h1 { font-size:52px; }.game-grid { display:flex; flex-direction:column; gap:30px; }.station-panel { order:2; }.orders-panel { order:1; }.recipe-list { grid-template-columns:repeat(2,1fr); }.order-note { display:none; }.countertop { min-height:395px; }.ingredient-buttons { grid-template-columns:repeat(3,1fr); gap:8px; }.ingredient:last-child { grid-column:auto; }.day-stamp { display:none; }.scoreboard { margin-left:auto; }.recipe-readout { align-items:flex-start; flex-direction:column; gap:9px; }.recipe-readout div { justify-content:flex-start; }.cafe-passport { margin:10px 0 0; }.order-ticket { left:14px; }.quote-editor textarea { width:min(220px,calc(100vw - 45px)); } }
@media (max-width:430px) { .recipe-list { grid-template-columns:1fr 1fr; }.recipe-card { padding:12px 10px; }.recipe-card strong { font-size:14px; }.countertop { min-height:395px; }.glass { transform:scale(.78); }.recipe-readout { right:8px; bottom:12px; }.recipe-readout div { max-width:145px; }.ingredient { min-height:66px; font-size:9px; }.ingredient .swatch { width:20px; height:20px; }.order-ticket { top:14px; }.order-ticket strong { font-size:14px; } }
.layer:last-child { box-shadow:inset 0 8px rgba(255,255,255,.12); }.layer:last-child::after { content:'·  ·  ·'; position:absolute; top:4px; right:12px; color:rgba(255,255,255,.55); font:14px 'Fraunces',serif; letter-spacing:3px; }
.photo-card { margin-top:28px; padding-top:22px; border-top:1px solid #ded4cb; scroll-margin-top:18px; }.photo-card[hidden] { display:none; }.photo-card canvas { display:block; width:min(100%,320px); margin:18px auto 0; border:2px solid var(--line); box-shadow:6px 6px 0 var(--line); }.photo-actions { display:flex; gap:9px; margin-top:18px; }.photo-actions button { flex:1; padding:12px 8px; border:1.5px solid var(--line); background:var(--cream); color:var(--ink); cursor:pointer; font:500 10px 'IBM Plex Mono',monospace; }.photo-actions button:last-child { background:var(--yellow); box-shadow:3px 3px 0 var(--line); }
@media (max-width:430px) { footer { gap:10px; flex-wrap:wrap; line-height:1.5; } footer span:last-child { width:100%; } }
.station-heading h2 { animation: softType 4s ease-in-out infinite; transform-origin:left center; }.photo-card .section-label { animation: photoLabel 1.2s steps(12,end) both; overflow:hidden; white-space:nowrap; } @keyframes softType { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } } @keyframes photoLabel { from { max-width:0; opacity:.2; } to { max-width:260px; opacity:1; } }
.play-guide { display:flex; justify-content:center; gap:10px; margin:28px auto 0; flex-wrap:wrap; }.play-guide span { padding:8px 10px; border:1px solid #d9cfc5; border-radius:20px; color:#7c6d6b; font:9px 'IBM Plex Mono',monospace; letter-spacing:.04em; }.play-guide b { margin-right:5px; color:var(--hot-pink); }.share-note { max-width:320px; margin:18px auto 0; color:#7c6d6b; text-align:center; font:italic 13px/1.4 'Fraunces',serif; }
@media (max-width:430px) { .intro h1 { font-size:48px; }.play-guide { gap:6px; margin-top:22px; }.play-guide span { padding:7px 8px; font-size:8px; }.share-note { font-size:12px; } }
.glass { overflow:visible; border:0; background:none; box-shadow:none; transform:none; }.jar-svg { display:block; width:164px; height:220px; overflow:visible; filter:drop-shadow(0 7px 5px rgba(72,49,48,.18)); }.jar-body { fill:url(#jarGlassGradient); stroke:rgba(47,40,44,.62); stroke-width:2.5; }.jar-mouth { fill:rgba(255,255,255,.22); stroke:rgba(255,255,255,.32); stroke-width:1; }.jar-floor-shadow { fill:url(#jarFloorShadow); }.jar-shine { fill:rgba(255,255,255,.4); mix-blend-mode:screen; pointer-events:none; transform-box:fill-box; transform-origin:center; animation:jarShineSweep 6.5s ease-in-out infinite; }@keyframes jarShineSweep { 0%,12% { transform:translateX(-70px) skewX(-18deg); opacity:0; } 24% { opacity:.5; } 45% { transform:translateX(230px) skewX(-18deg); opacity:.5; } 58%,100% { transform:translateX(230px) skewX(-18deg); opacity:0; } }.jar-rim { fill:none; stroke:rgba(47,40,44,.72); stroke-width:2.8; }.jar-inner-rim { fill:none; stroke:rgba(90,69,65,.42); stroke-width:1.5; }.svg-saucer { fill:#faf1e8; stroke:rgba(47,40,44,.72); stroke-width:2; }.svg-layer { filter:url(#liquid-blur); }.svg-foam { fill:rgba(255,250,242,.76); }.svg-ice rect { fill:rgba(239,251,251,.48); stroke:rgba(255,255,255,.82); stroke-width:1.5; }.jar-highlight { fill:none; stroke:rgba(255,255,255,.5); stroke-width:6; stroke-linecap:round; animation:jarGlint 5s ease-in-out infinite; }.jar-highlight-right { stroke-width:3; opacity:.36; animation-delay:-2.5s; }@keyframes jarGlint { 0%,100% { opacity:.42; } 50% { opacity:.8; } }.condensation circle,.condensation rect { fill:rgba(255,255,255,.58); opacity:0; transform-box:fill-box; transform-origin:center; animation:jarDrip 5.5s ease-in infinite; animation-delay:var(--drip-delay,0s); }@keyframes jarDrip { 0% { transform:translateY(0); opacity:0; } 8% { opacity:.7; } 70% { opacity:.5; } 100% { transform:translateY(22px); opacity:0; } }.jar-straw rect { fill:#f7ddb0; stroke:rgba(47,40,44,.55); stroke-width:1.5; }.jar-straw path { fill:none; stroke:rgba(126,86,54,.4); stroke-width:2; stroke-linecap:round; }.glass.mixing { box-shadow:none; }.glass.mixing .jar-svg { animation:jarMix .85s ease-in-out; }.photo-actions { align-items:stretch; gap:14px; }.photo-actions button { min-width:120px; min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:12px; border:1px solid rgba(47,40,44,.3); border-radius:999px; background:linear-gradient(135deg,#f7c3cd,#ef8fa9); color:var(--ink); box-shadow:0 4px 10px rgba(47,40,44,.12); font:500 10px 'IBM Plex Mono',monospace; transition:background .18s,box-shadow .18s,transform .12s; }.photo-actions button:first-child { background:linear-gradient(135deg,#fffaf2,#f7d9d5); }.photo-actions button:hover { background:linear-gradient(135deg,#ef8fa9,#e96d8d); box-shadow:0 6px 14px rgba(47,40,44,.18); }.photo-actions button:active { transform:scale(.97); box-shadow:0 2px 4px rgba(47,40,44,.12); }.photo-actions svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
@media (max-width:430px) { .jar-svg { width:150px; height:202px; }.photo-actions { gap:8px; }.photo-actions button { min-width:0; width:50%; padding:10px 5px; gap:8px; font-size:8px; } }
.glass.traditional-cup::after { left:143px; right:auto; }
.glass.traditional-cup { width:172px; height:188px; }.glass.traditional-cup::after { content:''; position:absolute; right:-12px; top:78px; width:38px; height:58px; border:9px solid rgba(145,100,70,.62); border-left:0; border-radius:0 28px 28px 0; z-index:0; }.traditional-cup .jar-svg { width:172px; height:188px; transform:translateY(9px); }.traditional-cup .jar-straw,.traditional-cup .jar-highlight-right { display:none; }.traditional-cup .jar-body { fill:rgba(232,184,128,.22); stroke:rgba(108,70,53,.72); }.traditional-cup .jar-mouth { fill:rgba(237,203,157,.38); }.traditional-cup .jar-rim { stroke:rgba(108,70,53,.72); }.traditional-cup .svg-saucer { fill:#f7e7ce; }.traditional-cup .jar-spoon { display:none; }
.mix-prompt { display:flex; align-items:center; gap:10px; margin:14px 0 -4px; padding:10px 12px; border:1px solid #e2c3b7; border-radius:14px; background:#fff6ed; color:#6f5856; font:500 11px 'IBM Plex Mono',monospace; }.mix-prompt[hidden] { display:none; }.mix-prompt span { flex:1; }.mix-prompt button { min-height:32px; padding:6px 10px; border:1px solid rgba(47,40,44,.3); border-radius:999px; background:#f7d9d5; color:var(--ink); cursor:pointer; font:500 9px 'IBM Plex Mono',monospace; }.mix-prompt button:first-of-type { background:var(--yellow); }.mix-prompt button:active { transform:scale(.97); }.jar-spoon { opacity:0; transform-origin:156px 94px; }.glass.mixing .jar-spoon { opacity:1; animation:spoonMix 1.2s ease-in-out; }.svg-garnish { fill:#8db596; stroke:rgba(47,40,44,.45); stroke-width:1.5; }.garnish-strawberry circle { fill:#d75472; }.garnish-strawberry path { fill:#789d7e; }.garnish-cinnamon path { fill:none; stroke:#a85b3f; stroke-width:3; stroke-linecap:round; }.garnish-coffee-beans ellipse { fill:#593c3b; }.garnish-cocoa circle { fill:#85533f; stroke:none; }.jar-spoon rect { fill:#eee4d5; stroke:rgba(47,40,44,.45); stroke-width:1; }.jar-spoon ellipse { fill:#f8efe2; stroke:rgba(47,40,44,.45); stroke-width:1; }.glass.mixing .svg-layer,.glass.mixing .svg-mixed { animation:liquidSwirl 1.2s ease-in-out; }
@keyframes spoonMix { 0% { transform:rotate(-8deg); } 50% { transform:rotate(10deg); } 100% { transform:rotate(-8deg); } }