@font-face{font-family:Fredoka;src:url('fonts/Fredoka-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Fredoka;src:url('fonts/Fredoka-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Fredoka;src:url('fonts/Fredoka-700.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--ink:#fff8e6;--gold:#ffd46b;--gold-deep:#b9791f;--panel:#14324acc;--teal:#13a7a3;font-family:Fredoka,ui-rounded,system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0d2236;color:var(--ink);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#stage{position:fixed;inset:0}
#stage canvas{display:block;width:100%;height:100%}
.brew-hud{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 16px 8px;pointer-events:none}
.brew-title{display:flex;flex-direction:column;line-height:1.05;text-shadow:0 2px 0 #0008}
.brew-title{min-width:0}.brew-title small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:600;color:#bfe9ef;letter-spacing:.04em;text-transform:uppercase}
.brew-title strong{font-size:22px;font-weight:700;color:var(--gold)}
.brew-tag{white-space:nowrap;flex:none;font-size:11px;font-weight:600;padding:4px 8px;border-radius:999px;background:#0006;color:#cfe;border:1px solid #fff3}
.brew-controls{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:10px;padding:8px 16px calc(env(safe-area-inset-bottom) + 12px)}
.brew-controls button,.brew-card-actions button{font:inherit;font-weight:700;font-size:16px;color:#3b2205;min-height:46px;min-width:46px;padding:0 16px;border:0;border-radius:16px;background:linear-gradient(#ffe9a3,#ffc94a 55%,#e9a42a);box-shadow:0 4px 0 var(--gold-deep),0 8px 18px #0006;cursor:pointer}
.brew-controls button:active,.brew-card-actions button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--gold-deep)}
.brew-controls button:disabled{filter:grayscale(.7) brightness(.8);cursor:default}
.brew-controls #brew-prev,.brew-controls #brew-next{background:linear-gradient(#bff6f0,#58d2c6 60%,#2a9d93);box-shadow:0 4px 0 #1b6d66,0 8px 18px #0006;color:#073a36}
.brew-card{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:#071522a8;backdrop-filter:blur(2px);z-index:5}
.brew-card[hidden]{display:none}
.brew-card.low{place-items:end center;padding-bottom:calc(env(safe-area-inset-bottom) + 18px);background:linear-gradient(#07152200 62%,#071522b0);backdrop-filter:none}
.brew-card.low .brew-card-inner{width:min(340px,100%);padding:12px 16px 16px}.brew-card.low h2{font-size:23px}.brew-card.low p{margin-bottom:12px}
.brew-card.low .brew-card-inner{padding-top:12px}.brew-card.low img{display:none}
.brew-card-inner{width:min(360px,100%);text-align:center;padding:18px 18px 20px;border-radius:26px;background:linear-gradient(#1d4f6c,#123349);border:3px solid #ffd46b;box-shadow:0 18px 50px #000a,inset 0 2px 0 #fff3;animation:card-in .35s cubic-bezier(.2,1.4,.4,1)}
.brew-card img{width:150px;height:150px;margin:-70px auto 0;display:block;filter:drop-shadow(0 8px 10px #0008)}
.brew-card h2{margin:4px 0 6px;font-size:26px;color:var(--gold);line-height:1.1}
.brew-card p{margin:0 0 16px;font-size:16px;line-height:1.35;color:#e4f6f8}
.brew-card-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.brew-status{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 72px);margin:0;padding:6px 14px;border-radius:999px;background:#0009;font-size:14px;font-weight:600;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
.brew-status.show{opacity:1}
@keyframes card-in{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.brew-card-inner{animation:none}}
@media (max-height:520px){.brew-title strong{font-size:18px}.brew-controls{justify-content:flex-end;padding-bottom:calc(env(safe-area-inset-bottom) + 8px)}.brew-card img{width:110px;height:110px;margin-top:-50px}}

/* Difficulty tiers: our own colours for Hard and Super Hard brews. */
body[data-tier=hard] .brew-title small{color:#d9b3ff}
body[data-tier=super] .brew-title small{color:#ff9a9a}
body[data-tier=super] .brew-title strong{color:#ffb36b;text-shadow:0 0 12px #ff4d4d88,0 2px 0 #0008}

/* Supplies: lives and gold */
.brew-res{display:flex;gap:6px;flex:none;pointer-events:auto}
.brew-res .pill{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px 0 4px;border-radius:999px;background:#0a1e2ecc;border:2px solid #ffd46b88;font-weight:700;font-size:15px;color:#fff8e6;white-space:nowrap}
.brew-res .pill small{font-size:11px;font-weight:600;color:#bfe9ef}
.brew-res .pill small:empty{display:none}
.brew-res i{display:block;width:22px;height:22px;border-radius:50%}
.brew-res .coin{background:radial-gradient(circle at 35% 30%,#fff5b8,#ffcf3d 45%,#c98a17);box-shadow:inset 0 0 0 2px #a8700f}
.brew-res .heart{background:none;position:relative}
.brew-res .heart::before{content:'\2665';position:absolute;inset:-4px 0 0;font-size:22px;line-height:26px;text-align:center;color:#ff4d6d;text-shadow:0 1px 0 #7a0f22}
.brew-res .pill.bump{animation:bump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{40%{transform:scale(1.25)}}
.brew-reward{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 14px;border-radius:999px;background:#0006;font-size:20px;font-weight:700;color:#ffd46b}
.brew-reward i{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff5b8,#ffcf3d 45%,#c98a17);box-shadow:inset 0 0 0 2px #a8700f}

/* Booster bar */
.brew-controls{align-items:center;gap:8px}
.brew-controls .mini{min-width:40px;min-height:40px;padding:0;font-size:18px;border-radius:14px}
.boosters{display:flex;gap:10px}
.brew-controls .booster{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:68px;height:62px;padding:4px 0 0;border:0;border-radius:18px;font:inherit;font-weight:700;font-size:12px;color:#fff8e6;cursor:pointer;
 background:linear-gradient(#2fb7b0,#14807b);box-shadow:0 4px 0 #0c524f,0 8px 18px #0006,inset 0 2px 0 #ffffff55}
.booster svg{width:28px;height:28px;fill:none;stroke:#fff8e6;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.brew-controls .booster:active{transform:translateY(3px);box-shadow:0 1px 0 #0c524f}
.booster:disabled{filter:grayscale(.8) brightness(.75)}
.booster .badge{position:absolute;right:-7px;top:-7px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#ff4d6d;border:2px solid #fff3;color:#fff;font-size:13px;line-height:20px}
.booster .badge.price{background:#2a1a05;color:#ffd46b;font-size:11px}
.booster .badge.price::before{content:'';display:inline-block;width:10px;height:10px;margin-right:3px;border-radius:50%;background:#ffcf3d;vertical-align:-1px}
.booster.denied{animation:deny .35s}
@keyframes deny{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (max-width:360px){.brew-controls .booster{width:60px}.boosters{gap:7px}}

.brew-card-actions button.quiet{background:linear-gradient(#ff9b9b,#e0555a);box-shadow:0 4px 0 #8f2a2e,0 8px 18px #0006;color:#fff}

/* Album, card packs */
.brew-res .album-btn{padding:0 6px;cursor:pointer;font:inherit}
.brew-res .book,.home-row .book{width:20px;height:22px;border-radius:3px 6px 6px 3px;background:linear-gradient(90deg,#7a3a12 0 18%,#c96f2b 18%);box-shadow:inset -3px 0 0 #fff3}
.brew-card p{white-space:pre-line}
.pack-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 14px}
.lab-card-mini{position:relative;width:86px;height:112px;border-radius:12px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
 background:linear-gradient(160deg,color-mix(in srgb,var(--set) 70%,white),var(--set));border:2px solid #ffe7a3;box-shadow:0 4px 10px #0007;color:#fff;animation:card-flip .45s ease-out both}
.lab-card-mini:nth-child(2){animation-delay:.12s}.lab-card-mini:nth-child(3){animation-delay:.24s}
.lab-card-mini .stars{font-size:11px;color:#ffe27a;letter-spacing:1px;text-shadow:0 1px 0 #0006}
.lab-card-mini .emblem{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff9,#fff2 60%);border:2px solid #fff8}
.lab-card-mini .name{font-size:12px;font-weight:700;line-height:1.1;text-align:center;text-shadow:0 1px 0 #0007}
.lab-card-mini em{position:absolute;top:-8px;right:-6px;padding:1px 6px;border-radius:999px;background:#ff4d6d;font-style:normal;font-size:10px;font-weight:700}
.lab-card-mini.missing{background:#0b2233;border-style:dashed;border-color:#ffffff40;justify-content:center;animation:none}
.lab-card-mini.missing b{font-size:28px;color:#ffffff40}
.album{max-height:52vh;overflow:auto;margin:0 -6px 12px;padding:0 6px}
.album section h3{margin:6px 0;font-size:15px;color:#ffd46b;text-align:left}
.album .lab-card-mini{width:64px;height:86px;animation:none}.album .lab-card-mini .emblem{width:26px;height:26px}.album .lab-card-mini .name{font-size:10px}
@keyframes card-flip{from{transform:rotateY(90deg) scale(.8);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.lab-card-mini{animation:none}}

/* Race pill and boards */
.brew-res .flag,.home-row .flag{width:18px;height:20px;border-radius:2px;background:linear-gradient(90deg,#ffd46b 0 3px,transparent 3px),conic-gradient(from 90deg at 3px 0,#ff4d6d 0 25%,#fff 0 50%,#ff4d6d 0 75%,#fff 0);clip-path:polygon(0 0,100% 15%,100% 60%,3px 55%,3px 100%,0 100%)}
.brew-res #brew-race b:empty{display:none}
.brew-res #brew-race.live{border-color:#ff9a9a}
.board{list-style:none;margin:0;padding:0;width:100%;max-width:300px;counter-reset:r}
.board li{counter-increment:r;display:flex;justify-content:space-between;gap:10px;padding:5px 10px;margin:3px 0;border-radius:10px;background:#0006;font-weight:600}
.board li span::before{content:counter(r) '. ';color:#bfe9ef}
.board li.you{background:#ffd46b33;outline:2px solid #ffd46b}
.board li b{color:#ffd46b}
/* Narrow phones: keep the header on one line */
.brew-title strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){
 .brew-hud{padding-left:10px;padding-right:10px;gap:6px}
 .brew-res{gap:4px}
 .brew-res .pill{height:28px;padding:0 7px 0 3px;font-size:13px;gap:3px;border-width:1.5px}
 .brew-res i{width:18px;height:18px}
 .brew-res .heart::before{font-size:18px;line-height:22px}
 .brew-title strong{font-size:18px}
}
.brew-controls .booster[hidden]{display:none}
/* Four boosters (trial brews add the Cooler or the Hint): tighten the bar so it fits a 360px phone. */
.brew-controls.crowded{gap:5px}
.brew-controls.crowded .boosters{gap:6px}
.brew-controls.crowded .booster{width:54px;font-size:11px}
.brew-controls.crowded .mini{min-width:34px}
#brew-settings svg{width:20px;height:20px;fill:none;stroke:#fff8e6;stroke-width:1.8;stroke-linejoin:round}
.brew-gauge{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:2px 0 12px;height:32px}
.brew-gauge span{display:grid;place-items:center;border-radius:9px;background:#0a1e2e;border:1.5px solid #ffd46b66;color:#ffd46b;font-weight:700;font-size:15px}
.brew-gauge span.x5{background:#2f7a3f;border-color:#8ff0a4;color:#fff}
.brew-gauge i{position:absolute;top:-9px;left:50%;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:11px solid #fff;transform:translateX(-50%);filter:drop-shadow(0 1px 1px #0008)}
/* Home screen (14-15 Nov 2026): the one game opens here. */
.brew-home{position:fixed;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(env(safe-area-inset-top) + 56px) 16px calc(env(safe-area-inset-bottom) + 24px);background:radial-gradient(ellipse at 50% 40%,#2a2457cc,#08071af2 70%);text-align:center}
.brew-home[hidden]{display:none}
.home-logo{width:min(300px,78vw);height:auto}
.home-prof{position:relative;display:flex;flex-direction:column;align-items:center}
.home-prof img{width:min(200px,48vw);height:auto}
.home-bubble{margin:0 0 -4px;max-width:260px;padding:8px 14px;border-radius:16px;background:#fff8e6;color:#3b2205;font-weight:700;font-size:15px;box-shadow:0 4px 0 #d9b25a}
.home-bubble:empty{display:none}
.home-play{display:flex;flex-direction:column;align-items:center;min-width:220px;padding:10px 28px 12px;border:0;border-radius:22px;font:inherit;font-weight:700;font-size:28px;color:#fff;background:linear-gradient(#8ff0a4,#3fbf62 55%,#2a9a4a);box-shadow:0 6px 0 #1f6b37,0 12px 24px #0008;cursor:pointer}
.home-play small{font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.home-play:active{transform:translateY(4px);box-shadow:0 2px 0 #1f6b37}
.home-row{display:flex;gap:12px}
.home-row button{display:flex;flex-direction:column;align-items:center;gap:4px;width:76px;padding:10px 0 8px;border:0;border-radius:18px;font:inherit;font-weight:700;font-size:13px;color:#fff8e6;background:#0a1e2ecc;border:2px solid #ffd46b88;cursor:pointer}
.home-row svg{width:24px;height:24px;fill:none;stroke:#fff8e6;stroke-width:1.8;stroke-linejoin:round}
body.at-home .brew-controls{display:none}
.brew-controls .dev-only{display:none}
body.dev .brew-controls .dev-only{display:inline-flex;align-items:center;justify-content:center}
#brew-home-btn svg{width:22px;height:22px;fill:none;stroke:#073a36;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.brew-controls #brew-home-btn{background:linear-gradient(#bff6f0,#58d2c6 60%,#2a9d93);box-shadow:0 4px 0 #1b6d66,0 8px 18px #0006}
.home-row i{display:block;width:20px;height:22px}
.brew-hud{z-index:5}
.brew-card{z-index:6}
/* Shop (15 Nov 2026) */
.brew-shop{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 12px);background:#08071af5;color:#fff8e6}
.brew-shop[hidden]{display:none}
.shop-head{display:flex;align-items:center;gap:10px}
.shop-head h2{margin:0;flex:1;font-size:26px;color:#ffd46b}
.shop-gold{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 6px;border-radius:999px;background:#0a1e2e;border:2px solid #ffd46b88;font-weight:700}
.shop-head button,.shop-tabs button,.shop-item button{font:inherit;font-weight:700;border:0;border-radius:14px;cursor:pointer}
.shop-head button{min-height:40px;padding:0 14px;background:linear-gradient(#ffe9a3,#ffc94a 55%,#e9a42a);color:#3b2205}
.shop-tabs{display:flex;gap:8px;margin:12px 0 8px}
.shop-tabs button{flex:1;min-height:40px;background:#0a1e2e;color:#fff8e6;border:2px solid #ffd46b55}
.shop-tabs button[aria-pressed=true]{background:#ffd46b;color:#3b2205}
.shop-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:2px 0}
.shop-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:18px;background:linear-gradient(#1d4f6c,#123349);border:2px solid #ffd46b55}
.shop-item .what{flex:1;min-width:0}
.shop-item strong{display:block;font-size:17px}
.shop-item small{display:block;font-size:12px;color:#cfe9e6;margin-top:2px}
.shop-item em{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#ff6fae;color:#fff;font-style:normal;font-size:11px;vertical-align:middle}
.shop-item button{min-width:92px;min-height:44px;padding:0 10px;background:linear-gradient(#8ff0a4,#3fbf62 55%,#2a9a4a);color:#fff;box-shadow:0 4px 0 #1f6b37}
.shop-item button.gold{background:linear-gradient(#ffe9a3,#ffc94a 55%,#e9a42a);color:#3b2205;box-shadow:0 4px 0 #a36f12}
.shop-item button:disabled{filter:grayscale(.8) brightness(.8);box-shadow:none}
.shop-note{margin:8px 0 0;text-align:center;font-size:12px;color:#cfe9e6}
.home-row .coin,.shop-gold .coin{display:block;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffc83d 45%,#c98a12);box-shadow:inset 0 0 0 2px #a86b12}
.brew-card{z-index:7}
#brew-gold{cursor:pointer;pointer-events:auto}
.brew-res .pill.unlimited b{font-size:18px}
.home-row{gap:8px}
.home-row button{width:68px}
/* Daily gift (15 Nov 2026) */
.home-daily{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 10px;border:0;border-radius:999px;font:inherit;font-weight:700;font-size:15px;color:#3b2205;background:linear-gradient(#ffe9a3,#ffc94a 55%,#e9a42a);box-shadow:0 4px 0 #a36f12;cursor:pointer}
.home-daily.waiting{background:#0a1e2ecc;color:#cfe9e6;box-shadow:none;border:2px solid #ffd46b55}
.home-daily .gift{display:block;width:22px;height:20px;border-radius:4px;background:linear-gradient(90deg,transparent 42%,#ffd46b 42% 58%,transparent 58%),linear-gradient(#ff6fae,#e0457f);box-shadow:inset 0 5px 0 #ffd46b}
.home-daily:not(.waiting){animation:giftpulse 1.8s ease-in-out infinite}
@keyframes giftpulse{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.home-daily{animation:none!important}}
.daily-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:0 0 12px}
.daily-strip span{display:grid;place-items:center;min-height:40px;padding:2px;border-radius:10px;background:#0a1e2e;border:1.5px solid #ffd46b44;font-size:10px;font-weight:700;line-height:1.15}
.daily-strip span.done{opacity:.45}
.daily-strip span.today{background:#ffd46b;color:#3b2205;border-color:#fff}
/* Big Jar introduction (15 Nov 2026) */
.jar-intro{display:flex;align-items:center;gap:12px;margin:0 0 12px;text-align:left}
.jar-intro svg{flex:none}
.jar-intro ul{margin:0;padding-left:18px;font-size:15px;line-height:1.35}
.jar-intro li+li{margin-top:6px}
.jar-intro b{color:#ffd46b}