/* TODDY: Moon Brew — one committed night-café look (not theme-switched). */
:root {
  --night: #17112a;
  --night-2: #221838;
  --panel: rgba(30, 20, 48, 0.86);
  --panel-solid: #261b3e;
  --line: #4a3866;
  --cream: #fde3bd;
  --muted: #c3b2d8;
  --amber: #d87c37;
  --gold: #fdaf1e;
  --gold-hi: #fce25d;
  --choc: #3e1c14;
  --ice: #9fd8f2;
  --bad: #ff8a78;
  --good: #8fe3a4;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--night);
  color: var(--cream);
  font-family: var(--font);
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#app { height: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
img { max-width: 100%; }

.screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-inline: 16px;
  padding-block: max(12px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-bottom, 0px));
  max-width: 720px;
  margin: 0 auto;
  overflow-y: auto;
  gap: 12px;
}

/* ---------- Buttons ---------- */
.btn {
  border: 1px solid var(--line);
  background: var(--panel-solid);
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  transition: transform .08s ease, border-color .15s ease;
}
.btn:hover { border-color: var(--gold); }
.btn:active { transform: scale(.98); }
.btn small { font-weight: 600; color: var(--muted); font-size: 12px; }
.btn.primary { background: linear-gradient(180deg, #ffc23f, var(--gold)); color: var(--choc); border-color: #ffd36b; justify-content: center; font-size: 18px; box-shadow: 0 6px 18px #fdaf1e44; }
.btn.ghost { background: transparent; justify-content: center; }
.btn.small { padding: 8px 12px; font-size: 13px; border-radius: 11px; justify-content: center; }
.btn[disabled], .btn.locked { opacity: .5; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 22px; line-height: 1; display: grid; place-items: center; }
.icon-btn.off { opacity: .45; }

/* ---------- Title ---------- */
.title-screen { justify-content: flex-start; }
.hero { border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px #0008; border: 1px solid #ffffff14; flex: none; }
.hero img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.title-body { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.eyebrow { margin: 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 800; }
.logo { margin: 0; font-size: clamp(38px, 10vw, 56px); line-height: 1; font-weight: 900; color: var(--cream); letter-spacing: -.01em; text-shadow: 0 3px 0 var(--choc), 0 0 24px #fdaf1e33; }
.tag { margin: 2px 0 10px; color: var(--muted); }
.menu { display: flex; flex-direction: column; gap: 10px; }
.menu-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.menu-row .btn { padding: 10px 6px; font-size: 13px; }
.menu-row.four { grid-template-columns: repeat(4, 1fr); }
.build { margin: 8px 0 0; font-size: 11px; color: var(--muted); text-align: center; letter-spacing: .06em; }

/* ---------- Bars ---------- */
.bar { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px; flex: none; }
.bar-title { margin: 0; text-align: center; font-size: 17px; font-weight: 900; text-wrap: balance; }
.bar-stars { font-size: 12px; color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ---------- Map ---------- */
/* the Nights never run out, so the Night tabs scroll sideways */
.tabs { display: flex; gap: 6px; flex: none; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; min-width: 88px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 8px 12px; font-weight: 800; font-size: 13px; }
.tab[aria-selected="true"] { border-color: var(--gold); background: #3a2a55; }
.tab[disabled] { opacity: .45; }
.night-head { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; flex: none; }
.night-head img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.night-head h3 { margin: 2px 0; font-size: 18px; }
.night-head p { margin: 0; font-size: 12px; }
.trays { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tray-btn { aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-solid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 900; font-size: 17px; font-variant-numeric: tabular-nums; }
.tray-btn { position: relative; }
.tray-btn small { font-size: 10px; color: var(--gold); letter-spacing: 1px; min-height: 12px; }
/* how hard the tray is: one to four dots (Easy, Medium, Hard, Expert) */
.tray-btn .pips { position: absolute; top: 4px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 5px; letter-spacing: 1.5px; color: var(--muted); line-height: 1; }
.tray-btn.finale { background: linear-gradient(180deg, #4a3315, #2d200f); border-color: #8a6524; }
.tray-btn.locked { opacity: .38; }
.tray-btn.next { border-color: var(--gold); box-shadow: 0 0 0 2px #fdaf1e55; }
.playtest-toggle { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; justify-content: center; padding: 6px 0; }

/* ---------- Play ---------- */
.play-screen { gap: 8px; overflow: hidden; }
body.playing { background: #120b08 var(--counter-bg, none) center / cover no-repeat fixed; }
.visitor { display: flex; align-items: center; gap: 10px; flex: none; }
.visitor img { width: 58px; height: 58px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 6px #0007); }
.bubble { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: 13px; line-height: 1.35; display: flex; flex-direction: column; gap: 1px; backdrop-filter: blur(4px); }
.bubble b { color: var(--gold); font-size: 12px; }
.hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; min-height: 34px; }
.ticket { display: flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px 8px; min-height: 34px; }
.ticket .label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 4px; font-weight: 800; }
.chip { width: 30px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: #ffffff10; border: 2px solid transparent; }
.chip img { width: 26px; height: auto; display: block; }
.chip.done { border-color: var(--good); }
.chip.miss { opacity: .3; }
.chip.next { border-color: var(--gold-hi); box-shadow: 0 0 0 2px #fce25d55; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.perfect { font-size: 11px; font-weight: 900; margin-left: 4px; white-space: nowrap; }
.perfect.ok { color: var(--good); }
.perfect.lost { color: var(--bad); }
.ticket.none .label { margin: 0; }
.cracks { display: flex; gap: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.crack { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: inset 0 -3px 0 #a65d0e; }
.crack.used { background: #ffffff1c; box-shadow: none; }
.play-screen .bar-title { justify-self: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 7px 14px; font-size: 15px; backdrop-filter: blur(4px); }
.board-wrap { flex: 1; min-height: 0; display: grid; place-items: center; position: relative; }
#board { display: block; touch-action: manipulation; border-radius: 22px; }
.foot { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; flex: none; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 6px 10px 6px 4px; backdrop-filter: blur(4px); }
#toddy { width: 76px; height: 81px; display: block; margin-top: -26px; }
.grind { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.say { margin: 0; font-size: 13px; line-height: 1.3; min-height: 2.6em; }
.meter { height: 7px; border-radius: 99px; background: #0005; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), var(--gold)); transition: width .25s; }
.count { margin: 0; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.actions { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Overlay cards ---------- */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: #0d0818cc; padding: 16px; z-index: 10; animation: fade .2s ease; }
.card { width: min(440px, 100%); background: var(--panel-solid); border: 1px solid var(--line); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; box-shadow: 0 20px 50px #000a; max-height: 100%; overflow-y: auto; }
.card h3 { margin: 0; font-size: 26px; color: var(--gold); text-wrap: balance; }
.card p { margin: 0; line-height: 1.45; }
.card .stars { font-size: 38px; letter-spacing: 8px; color: var(--gold); }
.card .stars .off { color: #ffffff22; }
.card .postcard { width: auto; max-width: 100%; height: auto; max-height: 46vh; align-self: center; border-radius: 14px; border: 4px solid var(--cream); box-shadow: 0 10px 24px #0009; transform: rotate(-1.5deg); }
.card .tip-img { width: 96px; height: auto; }
.card .btns { display: flex; gap: 8px; width: 100%; }
.card .btns .btn { flex: 1; justify-content: center; }
.card .stat { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Album / How to ---------- */
.album { display: grid; gap: 14px; }
.pc { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-solid); }
.pc img, .pc canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } /* height:auto: the width/height attributes must never set a fixed pixel height (that cropped postcards on phones) */
.pc .pc-build { width: 100%; aspect-ratio: 3 / 2; background: #1c1530; }
.pc.locked img { filter: blur(14px) brightness(.35) saturate(.4); }
.pc .cap { padding: 10px 12px; display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.pc .cap b { color: var(--gold); }
.howto { display: flex; flex-direction: column; gap: 10px; }
.rule { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.rule img { width: 56px; height: auto; justify-self: center; }
.rule b { color: var(--gold); }
.rule p { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--cream); }
.big-stars { color: var(--gold); font-size: 18px; text-align: center; }

@media (min-width: 700px) {
  .title-screen { max-width: 980px; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 28px; }
  .trays { grid-template-columns: repeat(10, 1fr); }
  .album { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- My Brew dashboard ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile.wide { grid-column: 1 / -1; }
.tile .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.tile .v { font-size: 28px; font-weight: 900; color: var(--cream); font-variant-numeric: tabular-nums; line-height: 1.1; }
.tile .v small { font-size: 14px; color: var(--muted); font-weight: 700; }
.tile .sub { font-size: 12px; color: var(--muted); }
.tile.hot .v { color: var(--gold); }
.nightbar { display: grid; grid-template-columns: 64px 1fr 48px; align-items: center; gap: 8px; font-size: 12px; }
.nightbar .track { height: 8px; border-radius: 99px; background: #0005; overflow: hidden; }
.nightbar .track i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--gold)); }
.nightbar span:last-child { text-align: right; color: var(--gold); font-variant-numeric: tabular-nums; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 4px; }
.week .d { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.week .d.done { background: linear-gradient(180deg, #ffc23f, var(--gold)); color: var(--choc); border-color: #ffd36b; font-weight: 900; }
.week .d.today { outline: 2px solid var(--gold-hi); outline-offset: 1px; }
.small-note { font-size: 12px; }
.breakdown { width: 100%; display: grid; gap: 4px; font-size: 13px; }
.breakdown div { display: flex; justify-content: space-between; border-bottom: 1px dashed #ffffff1a; padding: 3px 0; font-variant-numeric: tabular-nums; }
.breakdown .total { border: 0; font-weight: 900; color: var(--gold); font-size: 16px; }

/* ---------- Share ---------- */
a.btn { text-decoration: none; color: var(--cream); justify-content: center; }
.card .btns { flex-wrap: wrap; }
.card .share-img { transform: none; max-height: 46vh; width: auto; max-width: 100%; align-self: center; }

/* ---------- Settings / About ---------- */
.settings { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; cursor: pointer; }
.setting span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setting small { color: var(--muted); font-size: 12px; }
.setting input { width: 22px; height: 22px; accent-color: var(--gold); flex: none; }
.linkish { background: none; border: 0; padding: 0; color: var(--gold); font-size: inherit; text-decoration: underline; letter-spacing: inherit; }
.about { display: flex; flex-direction: column; gap: 10px; }
.about a { color: var(--gold); }
html.big-text .bubble, html.big-text .say, html.big-text .card p, html.big-text .rule p, html.big-text .tile .sub, html.big-text .setting small { font-size: 16px; }
html.big-text .bubble b, html.big-text .count, html.big-text .stat { font-size: 14px; }
html.calm *, html.calm *::before, html.calm *::after { animation: none !important; transition: none !important; }

.about-btns { display: flex; gap: 8px; }
.about-btns .btn { flex: 1; justify-content: center; }
.stat { font-size: 13px; color: var(--muted); margin: 0; }

/* ---------- Phone held sideways: controls on the left, tray on the right ---------- */
@media (orientation: landscape) and (max-height: 600px) {
  .play-screen { display: grid; grid-template-columns: minmax(250px, 40%) 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 16px; row-gap: 8px; max-width: none; }
  .play-screen > .bar, .play-screen > .visitor, .play-screen > .hud, .play-screen > .foot { grid-column: 1; }
  .play-screen > .foot { align-self: end; }
  .play-screen > .board-wrap { grid-column: 2; grid-row: 1 / span 4; }
  .visitor img { width: 44px; height: 44px; }
  .bubble { font-size: 12px; }
  .title-screen { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; max-width: none; }
  .hero img { max-height: 70vh; }
}

/* Beta label and safety note (rc5) */
.beta-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--gold); color: var(--choc); font-size: 10px; letter-spacing: .12em; vertical-align: 1px; }
.safety { margin: 10px 0 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; line-height: 1.35; color: var(--cream); text-align: center; background: rgba(0, 0, 0, .18); }
.safety-rule b { color: var(--gold-hi); }

/* Daily Brew nudges (rc6): glow on the title button until today's Daily is played; result-card link */
#btn-daily.glow { border-color: var(--gold); animation: daily-glow 2.4s ease-in-out infinite; }
@keyframes daily-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(253, 175, 30, 0); } 50% { box-shadow: 0 0 18px 2px rgba(253, 175, 30, .45); } }
.calm #btn-daily.glow { animation: none; box-shadow: 0 0 0 1px var(--gold); }
@media (prefers-reduced-motion: reduce) { #btn-daily.glow { animation: none; box-shadow: 0 0 0 1px var(--gold); } }
.card .btn.daily-nudge { border-color: var(--gold); color: var(--gold-hi); }

/* ---------- P0/P1/P2 (rc8): show-don't-tell, the cup, live stars, the serve ---------- */
/* one line at a time: the visitor's line fades once play starts */
.bubble { transition: opacity .6s ease; }
.bubble.faded { opacity: .35; }
.bubble.faded #vis-line { display: none; }
.visitor img.pop { animation: vis-pop .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes vis-pop { 0% { transform: scale(.7) translateY(6px); } 100% { transform: none; } }

/* Toddy breathes, and hops a little when a bean is ground */
#toddy { transform-origin: 50% 100%; animation: breathe 3.2s ease-in-out infinite; }
#toddy.hop { animation: hop .38s ease-out; }
@keyframes breathe { 50% { transform: scaleY(1.025); } }
@keyframes hop { 30% { transform: translateY(-7px) scaleY(1.04); } 60% { transform: translateY(0) scaleY(.97); } 100% { transform: none; } }

/* the cup and the three live stars */
.brewrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
#cup { width: 48px; height: 44px; flex: none; }
.goals { display: flex; gap: 4px; }
.goal { position: relative; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #0004; border: 1px solid var(--line); }
.goal b { font-size: 20px; line-height: 1; color: #ffffff30; }
.goal img, .goal .nobump { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; object-fit: contain; }
.goal .nobump { border-radius: 50%; background: var(--gold); box-shadow: inset 0 -2px 0 #a65d0e; transform: scale(.75); }
.goal.keep b { color: #fdaf1e99; }
.goal.won b { color: var(--gold); text-shadow: 0 0 8px #fdaf1e99; }
.goal.lost { opacity: .45; }
.goal.lost b { color: #ffffff22; }
.goal.lost::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: var(--bad); transform: rotate(-35deg); }
.brewrow .count { margin-left: auto; white-space: nowrap; }
.pulse { animation: pulse-once .5s ease; }
@keyframes pulse-once { 40% { transform: scale(1.18); } }
.ticket.lost .chip.next { animation: none; }

/* the serve: the cup slides to the visitor, who reacts; then each star lands */
.serve { position: relative; width: 100%; height: 150px; display: flex; align-items: flex-end; justify-content: center; }
.serve.small { height: 110px; }
.serve-vis { height: 100%; width: auto; animation: vis-pop .8s .35s both cubic-bezier(.2, 1.6, .4, 1); filter: drop-shadow(0 8px 10px #0008); }
.serve-cup { position: absolute; bottom: 4px; width: 64px; animation: slide-cup .55s ease-out both; }
.serve.small .serve-cup { width: 48px; }
@keyframes slide-cup { from { transform: translateX(-120px); opacity: 0; } 70% { opacity: 1; } to { transform: translateX(-70px); opacity: 0; } }
.goals-big { display: flex; gap: 10px; justify-content: center; }
.gbig { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; animation: star-in .45s both cubic-bezier(.2, 1.8, .4, 1); }
.gbig b { font-size: 40px; line-height: 1; color: var(--gold); text-shadow: 0 0 14px #fdaf1e88; }
.gbig small { font-size: 12px; color: var(--muted); font-weight: 700; }
.gbig.lost b { color: #ffffff22; text-shadow: none; }
.gbig.d1 { animation-delay: .75s; } .gbig.d2 { animation-delay: 1.03s; } .gbig.d3 { animation-delay: 1.31s; }
@keyframes star-in { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* postcards: the crown mark from the finale bean */
.pc { position: relative; }
.pc-wrap { position: relative; width: 100%; }
.pc img.pc-mark, .card .pc-mark { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; aspect-ratio: auto; object-fit: contain; border: 0; filter: drop-shadow(0 2px 3px #000a); }

/* the café is alive: the lamp breathes, the background cup steams (placed by code) */
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; display: none; overflow: hidden; }
body.playing .ambient { display: block; }
.play-screen { position: relative; z-index: 1; }
.amb-lamp, .amb-steam { position: absolute; transform: translate(-50%, -50%) scale(var(--s, 1)); }
.amb-lamp { width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, #ffc56b55 0%, #ffb34722 35%, transparent 70%); animation: lamp 4.5s ease-in-out infinite; }
@keyframes lamp { 50% { opacity: .55; } }
.amb-steam { width: 60px; height: 90px; }
.amb-steam i { position: absolute; bottom: 0; left: 26px; width: 10px; height: 28px; border-radius: 50%; background: radial-gradient(ellipse, #fff8eec0, transparent 70%); opacity: 0; animation: steam 3.6s ease-in infinite; }
.amb-steam i:nth-child(2) { left: 16px; animation-delay: 1.2s; }
.amb-steam i:nth-child(3) { left: 34px; animation-delay: 2.4s; }
@keyframes steam { 0% { transform: translateY(0) scaleX(1); opacity: 0; } 25% { opacity: .7; } 100% { transform: translateY(-60px) translateX(6px) scaleX(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #toddy, .amb-lamp, .amb-steam i { animation: none; } }
html.calm .serve-cup { display: none; }
@media (prefers-reduced-motion: reduce) { .serve-cup { display: none; } .serve-vis, .gbig { animation: none; } }
/* the cup shows progress; the count stays for screen readers only */
.brewrow .count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
/* specks of dust drifting in the lamplight */
.amb-motes i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffd99a; box-shadow: 0 0 6px #ffc56b; opacity: 0; animation: mote 14s linear infinite; }
.amb-motes i:nth-child(1) { left: 12%; animation-delay: 0s; }
.amb-motes i:nth-child(2) { left: 30%; animation-delay: 4s; animation-duration: 17s; }
.amb-motes i:nth-child(3) { left: 52%; animation-delay: 8s; }
.amb-motes i:nth-child(4) { left: 70%; animation-delay: 2s; animation-duration: 19s; }
.amb-motes i:nth-child(5) { left: 86%; animation-delay: 10s; }
.amb-motes i:nth-child(6) { left: 42%; animation-delay: 6s; animation-duration: 21s; }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .35; } 100% { transform: translate(30px, -95vh); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .amb-motes { display: none; } }
html.calm .amb-motes { display: none; }

/* rc9: the journey is visible (Play label, tappable tray title, 20-dot Night path) */
.btn.play-main { flex-direction: column; gap: 0; padding-block: 10px; }
.btn.play-main small { color: #5a2e12; font-size: 12px; font-weight: 800; }
button.where { font: inherit; font-weight: 800; color: var(--cream); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; }
button.where .tier { font-size: 10px; letter-spacing: .1em; color: var(--gold); font-weight: 800; text-transform: uppercase; }
.path { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 300px; }
.path i { width: 10px; height: 10px; border-radius: 50%; background: #ffffff1f; }
.path i.done { background: var(--gold); }
.path i.cur { box-shadow: 0 0 0 3px #fce25d66; transform: scale(1.25); }
.path i.moon { width: 14px; height: 14px; margin-top: -2px; background: transparent; border-radius: 50%; box-shadow: inset -4px -1px 0 0 var(--gold-hi); opacity: .55; }
.path i.moon.done { opacity: 1; }

.legend { margin: 6px 0 0; text-align: center; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.card canvas.postcard { display: block; }

/* "coming up": a hint that the next Night, with a new visitor, is waiting */
.coming { display: flex; align-items: center; gap: 12px; border: 1px dashed var(--line); border-radius: 16px; padding: 8px 12px; flex: none; }
.coming[hidden] { display: none; }
.coming img { width: 44px; height: 44px; object-fit: contain; flex: none; filter: brightness(0) invert(.55) sepia(.3) saturate(2) hue-rotate(220deg); opacity: .8; }
.coming p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.35; }
.coming b { color: var(--cream); }

/* =====================================================================
   rc14 "classy look": night-café scene, gold & plum buttons, framed tray.
   Phone first; wider rules at the bottom. All pictures come from --i-* (set in main.js).
   ===================================================================== */
body:not(.playing) {
  background: var(--night) var(--i-scene-phone, none) center top / cover no-repeat fixed;
}
/* a soft dark veil keeps text readable on the busy scene */
body:not(.playing)::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #17112a99 0%, #17112acc 45%, #17112aee 100%);
}
/* hanging lights across the top (phone and desktop) */
body.on-title::after {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: min(24vw, 110px); z-index: 1; pointer-events: none;
  background: var(--i-garland, none) center top / 100% 100% no-repeat;
}
.screen { position: relative; z-index: 2; }
.title-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; display: none; }
body.on-title .title-video { display: block; }
body.on-title .title-video.on { opacity: .55; }
html.calm .title-video { display: none !important; }
/* warm light shaft over the title */
body.on-title #app::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: var(--i-light-phone, none) left top / cover no-repeat;
}
html.calm body.on-title #app::before { opacity: .3; }
body.playing #app::before { display: none; }

/* ---------- Buttons: gold (main) and plum (the rest) ----------
   Pill art: only the two end caps are cut out (slice top/bottom 0), the middle stretches.
   Cap width = 0.72 x button height, so the caps are never squashed. Set --h per kind of button. */
.btn {
  --h: 56px; --cap: calc(var(--h) * .72);
  border: 0 solid transparent; border-width: 0 var(--cap); background: transparent; color: var(--cream);
  border-image: var(--i-btn-plum-m) 0 112 fill / 0 var(--cap) stretch;
  min-height: var(--h); padding: 2px 0; border-radius: 0; text-shadow: 0 1px 0 #0008; line-height: 1.15; text-align: center;
}
.btn > span { min-width: 0; }
.btn small { white-space: nowrap; }
.btn:hover { filter: brightness(1.08); }
.btn:active { border-image-source: var(--i-btn-plum-down-m); transform: translateY(1px) scale(.99); }
.btn.primary { background: none; border-image-source: var(--i-btn-gold-m); color: var(--choc); text-shadow: 0 1px 0 #fff7; box-shadow: none; }
.btn.primary:active { border-image-source: var(--i-btn-gold-down-m); }
.btn.primary small { color: #5a3410; }
.btn.play-main { --h: 72px; padding-block: 2px; }
.btn.small { --h: 44px; font-size: 13px; }
.btn[disabled], .btn.locked { filter: grayscale(.6); }
/* the four small buttons under the menu: a rounded square picture, text kept on one line per word */
.menu-row .btn { --h: 52px; border-width: 0 8px; border-image: var(--i-btn-round-m) 60 fill / 14px 8px stretch; padding: 0; font-size: 12px; white-space: nowrap; }
.menu-row .btn:active { border-image-source: var(--i-btn-round-down-m); }
@media (max-width: 359px) { .menu-row.four { grid-template-columns: repeat(2, 1fr); } }
.icon-btn { width: 48px; height: 48px; border: 0; background: var(--i-btn-round-m) center / contain no-repeat; font-size: 24px; color: var(--cream); }
.icon-btn:active { background-image: var(--i-btn-round-down-m); }
.icon-btn.off { opacity: .55; }
.bar { grid-template-columns: 48px 1fr 48px; }
.card .btn.small, .card .btns .btn { --h: 52px; }

/* ---------- Cards: framed plum panel with gold corners ---------- */
.card {
  border: 0; border-style: solid; border-width: 26px 24px; padding: 16px 4px 4px;
  border-image: var(--i-panel-phone) 70 fill / 26px 24px stretch;
  border-radius: 10px; background-color: #1d1431;
}
.card h3 { text-shadow: 0 2px 0 #0008; }
.card h3::after { content: ""; display: block; height: 14px; margin: 8px auto 0; width: min(260px, 90%); background: var(--i-divider-moon) center / contain no-repeat; }

/* ---------- Title ---------- */
.logo { text-shadow: 0 3px 0 var(--choc), 0 0 28px #fdaf1e66; }
.tag { position: relative; padding-bottom: 14px; }
.tag::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 12px; background: var(--i-divider-wave) center / contain no-repeat; opacity: .9; }
.hero { box-shadow: 0 18px 40px #000a, 0 0 0 2px #c98a2a, 0 0 0 5px #17112a, 0 0 0 6px #fdaf1e66; border: 0; }

/* ---------- Tray map: round markers ---------- */
.tray-btn { border: 0; border-radius: 50%; background: var(--i-marker-open) center / contain no-repeat; color: var(--cream); text-shadow: 0 1px 2px #000a; font-weight: 900; }
.tray-btn.done { background-image: var(--i-marker-cleared); }
.tray-btn.locked { background-image: var(--i-marker-locked); opacity: .8; color: transparent; text-shadow: none; }
.tray-btn.locked small, .tray-btn.locked .pips { visibility: hidden; }
.tray-btn.finale { background: var(--i-marker-open) center / contain no-repeat; filter: hue-rotate(-12deg) saturate(1.15); border: 0; }
.tray-btn.finale.done { background-image: var(--i-marker-cleared); }
.tray-btn.next { box-shadow: 0 0 14px 3px #fce25dcc; animation: markerglow 1.8s ease-in-out infinite; }
@keyframes markerglow { 50% { box-shadow: 0 0 22px 7px #fce25d99; } }
html.calm .tray-btn.next { animation: none; }
.tray-btn .pips { top: 7px; }
.tray-btn small { color: var(--gold-hi); text-shadow: 0 1px 1px #000; }

/* ---------- Result stars ---------- */
.gbig b { width: 58px; height: 56px; font-size: 0; text-shadow: none; background: var(--i-ui-star) center / contain no-repeat; filter: drop-shadow(0 0 10px #fdaf1e88); }
.gbig.lost b { background-image: var(--i-ui-star-empty); filter: none; }

/* ---------- The framed tray ---------- */
.board-wrap { overflow: visible; }
.board-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none; pointer-events: none; z-index: 3; display: block; filter: drop-shadow(0 8px 14px #0009); }
#board { border-radius: 10px; }
.foot, .bubble, .ticket, .cracks { border-color: #7a5a2a; }

/* ---------- Desktop and tablets ---------- */
.wing { display: none; }
@media (min-width: 900px) {
  body:not(.playing) { background-image: var(--i-scene-desktop, none); }
  body.on-title #app::before { background-image: var(--i-light-desktop); }
  body.on-title::after { height: min(8vw, 120px); }
  .btn { border-image-source: var(--i-btn-plum-d); border-image-slice: 0 90 fill; --h: 52px; }
  .btn.play-main { --h: 66px; }
  .menu-row .btn { border-image-source: var(--i-btn-round-d); border-image-slice: 60 fill; }
  .btn:active { border-image-source: var(--i-btn-plum-down-d); }
  .btn.primary { border-image-source: var(--i-btn-gold-d); }
  .btn.primary:active { border-image-source: var(--i-btn-gold-down-d); }
  .icon-btn { background-image: var(--i-btn-round-d); }
  .icon-btn:active { background-image: var(--i-btn-round-down-d); }
  .card { border-image-source: var(--i-panel-desktop); border-image-slice: 70 fill; border-width: 26px 28px; border-image-width: 26px 28px; }
  /* window and plants framing the centre column */
  .wing { display: block; position: fixed; top: 0; bottom: 0; width: min(22vw, 300px); z-index: 1; pointer-events: none; opacity: .95; background-repeat: no-repeat; background-size: auto 100%; }
  .wing { -webkit-mask-image: linear-gradient(var(--wd, 90deg), #000 62%, transparent); mask-image: linear-gradient(var(--wd, 90deg), #000 62%, transparent); }
  .wing-l { left: 0; background-image: var(--i-wing-left); background-position: left center; }
  .wing-r { --wd: 270deg; right: 0; background-image: var(--i-wing-right); background-position: right center; }
  body.playing .wing { display: none; }
}

/* the Hint / Restart pair sits in the footer: keep it compact so the stars stay visible */
.actions .btn.small { --h: 36px; --cap: 20px; font-size: 12px; min-width: 0; }

/* tray markers: number as a small badge under the picture's own symbol, stars at the top right */
.tray-btn span { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); min-width: 22px; padding: 0 4px; border-radius: 99px; background: #17112acc; font-size: 13px; line-height: 18px; }
.tray-btn small { position: absolute; top: 5px; right: 6px; font-size: 9px; letter-spacing: 0; min-height: 0; }
.tray-btn .pips { left: 50%; right: auto; transform: translateX(-50%); top: 8px; }
.tray-btn.locked span { display: none; }

/* narrow phones: keep the footer on one tidy row (cup, three stars, Hint / Restart) */
@media (max-width: 399px) {
  .foot { grid-template-columns: 58px 1fr auto; gap: 6px; }
  #toddy { width: 58px; height: 62px; }
  .brewrow { gap: 4px; }
  .brewrow canvas { width: 56px; height: auto; }
  .goal { width: 26px; height: 26px; }
  .goal b { font-size: 17px; }
}
@media (max-width: 359px) {
  .foot { grid-template-columns: 58px 1fr; }
  .actions { grid-column: 1 / -1; flex-direction: row; }
  .actions .btn.small { flex: 1; }
}

/* the tray frame: slim 9-slice on phones (more room for beans), full picture on big screens */
.board-frame.slim { box-sizing: border-box; border: 15px solid transparent; border-image: var(--i-board-frame-thin) 66 / 15px stretch; }
.board-frame.broad { background: var(--i-board-frame-broad) center / 100% 100% no-repeat; }

/* wider play column on big screens so the tray can grow */
@media (min-width: 900px) { .play-screen { max-width: 920px; } }
/* phone held sideways: the left column is narrow, so Hint / Restart go on their own row */
@media (orientation: landscape) and (max-height: 450px) {
  .foot { grid-template-columns: 58px 1fr; gap: 6px; }
  #toddy { width: 58px; height: 62px; margin-top: -18px; }
  .actions { grid-column: 1 / -1; flex-direction: row; }
  .actions .btn.small { flex: 1; --h: 32px; }
}

/* no frame around the tray: a thin gold edge and a soft shadow instead, so beans get the room */
/* gold edge 2 px, then an 8 px (about 2 mm) dark gap, then the tray */
#board { border-radius: 10px; box-shadow: 0 0 0 8px #1c1330, 0 0 0 10px #c98a2a, 0 0 0 11px #17112a99, 0 12px 24px 8px #000a; }
/* the tray is wider than its column on phones: centre it (grid would pin it to the left) */
.board-wrap #board { justify-self: center; }
/* long order tickets (late Nights) shrink their chips instead of pushing the bumps counter off screen */
.hud { min-width: 0; }
.ticket { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.chip { flex: 1 1 0; min-width: 16px; max-width: 30px; }
.chip img { width: 100%; max-width: 26px; }
.cracks { flex: none; }

/* =====================================================================
   rc15 CLEAN LOOK (default; ?look=rich brings back the ornate gold look above).
   Play screen art stays. Menus, buttons, cards, map: plain and readable.
   ===================================================================== */
:root { --brass: #c99a3b; --ink: #1a1030; --gold-deep: #a65d0e; }
.keys { display: none; }
html.look-clean body:not(.playing) { background: var(--night); }
html.look-clean body:not(.playing)::before { background: linear-gradient(180deg, #221838, #17112a); }
html.look-clean body.on-title::after, html.look-clean body:not(.playing)::after { display: none; }
html.look-clean body.on-title #app::before { display: none; }
html.look-clean .wing { display: none !important; }
html.look-clean .tag::after { display: none; }
html.look-clean .tag { padding-bottom: 0; }
html.look-clean .hero { box-shadow: 0 14px 30px #0008; border: 2px solid var(--brass); }
html.look-clean .logo { text-shadow: 0 2px 0 var(--choc); }

/* buttons: solid gold main, outlined navy for the rest */
html.look-clean .btn { border: 2px solid var(--brass); border-image: none; border-radius: 14px; background: #1b1538; color: var(--cream); min-height: 48px; padding: 8px 16px; box-shadow: none; text-shadow: none; filter: none; }
html.look-clean .btn:hover { filter: brightness(1.12); }
html.look-clean .btn:active { transform: translateY(2px); }
html.look-clean .btn.primary { background: var(--gold); color: var(--choc); border-color: var(--ink); box-shadow: 0 3px 0 var(--gold-deep); }
html.look-clean .btn.primary:active { box-shadow: 0 1px 0 var(--gold-deep); }
html.look-clean .btn.primary small { color: #5a3410; }
html.look-clean .btn.play-main { min-height: 62px; }
html.look-clean .btn[disabled], html.look-clean .btn.locked { filter: none; opacity: .5; }
html.look-clean .menu-row .btn { min-height: 46px; padding: 6px 4px; border-radius: 12px; font-size: 12.5px; white-space: normal; }
html.look-clean .btn.small, html.look-clean .actions .btn.small { min-height: 42px; min-width: 0; padding: 6px 12px; font-size: 13px; border-radius: 12px; }
html.look-clean .card .btn.small, html.look-clean .card .btns .btn { min-height: 46px; }
html.look-clean .icon-btn { width: 40px; height: 40px; border: 2px solid var(--brass); border-radius: 11px; background: rgba(20, 16, 46, .82); font-size: 20px; }
html.look-clean .icon-btn:active { background: rgba(20, 16, 46, .82); transform: translateY(1px); }
html.look-clean .bar { grid-template-columns: 40px 1fr 40px; }

/* cards: thin brass border on navy, no flourish */
html.look-clean .card { border: 2px solid var(--brass); border-image: none; border-radius: 20px; background: linear-gradient(160deg, #241c52, #15102f); padding: 20px; }
html.look-clean .card h3::after { display: none; }
html.look-clean .card h3 { text-shadow: none; }

/* tray map: plain round markers */
html.look-clean .tray-btn { background: #1b1538; border: 2px solid var(--line); border-radius: 50%; color: var(--cream); text-shadow: none; filter: none; box-shadow: none; }
html.look-clean .tray-btn.done { background: var(--gold); border-color: var(--ink); color: var(--choc); }
html.look-clean .tray-btn.done small { color: var(--choc); text-shadow: none; }
html.look-clean .tray-btn.finale { background: linear-gradient(180deg, #4a3315, #2d200f); border: 2px solid var(--brass); filter: none; }
html.look-clean .tray-btn.finale.done { background: var(--gold); }
html.look-clean .tray-btn.locked { background: #1b1538; opacity: .4; color: var(--muted); }
html.look-clean .tray-btn.locked span { display: block; }
html.look-clean .tray-btn.locked small, html.look-clean .tray-btn.locked .pips { visibility: visible; }
html.look-clean .tray-btn.next { border-color: var(--gold); box-shadow: 0 0 0 3px #fdaf1e55; animation: none; }
html.look-clean .tray-btn span { position: static; transform: none; background: none; min-width: 0; padding: 0; font-size: 17px; line-height: 1.1; }
html.look-clean .tray-btn small { position: static; font-size: 10px; min-height: 12px; color: var(--gold); }
html.look-clean .tray-btn .pips { position: absolute; top: 5px; left: 0; right: 0; transform: none; }

/* desktop: wide screen with a mouse. Café still behind the column, controls card on the side */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  html.look-clean body:not(.playing) { background: var(--night) var(--i-scene-desktop, none) center / cover no-repeat fixed; }
  html.look-clean body:not(.playing)::before { background: linear-gradient(180deg, #17112a99, #17112acc); }
}
@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
  html.look-clean .keys { display: block; position: fixed; left: 24px; top: 50%; transform: translateY(-50%); width: 200px; z-index: 3; padding: 14px 16px; border: 2px solid var(--brass); border-radius: 16px; background: linear-gradient(160deg, #241c52e6, #15102fe6); font-size: 13px; }
  html.look-clean .keys b { display: block; color: var(--gold); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; margin-bottom: 8px; }
  html.look-clean .keys ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
  html.look-clean .keys li { display: flex; align-items: center; gap: 4px; }
  html.look-clean .keys em { margin-left: auto; font-style: normal; color: var(--muted); }
  html.look-clean .keys kbd { font: inherit; font-weight: 800; min-width: 24px; padding: 2px 6px; text-align: center; border: 1.5px solid var(--brass); border-radius: 7px; background: #0004; }
}