/* BREWDECK — latte-light espresso bar. Mobile-first. */

:root {
  --bg: #f6efe3;
  --panel: #fffaf1;
  --paper: #fffdf6;
  --ink: #3b2f27;
  --dim: #8a776a;
  --line: #e6d9c6;
  --espresso: #6f4e37;
  --espresso-deep: #4c3527;
  --amber: #e8a33d;
  --amber-deep: #c97f16;
  --steam: #9fb4bc;
  --good: #2f9e6e;
  --bad: #d9534f;
  --shadow: 0 8px 24px rgba(76, 53, 39, 0.14);
  --r: 18px;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background:
    radial-gradient(1200px 500px at 50% -200px, #fdf6e9, transparent),
    var(--bg);
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ================= lock ================= */
#lock {
  height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px;
}
.lock-cup { font-size: 64px; animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-7px);} }
.lock-title { font-size: 34px; font-weight: 900; letter-spacing: 0.14em; }
.lock-sub { color: var(--dim); font-size: 14px; margin-bottom: 8px; }
.pin-dots { display: flex; gap: 14px; margin: 10px 0 16px; }
.pin-dots i {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--espresso); background: transparent;
  transition: background 0.12s ease, transform 0.12s ease;
}
.pin-dots i.fill { background: var(--espresso); transform: scale(1.15); }
.pin-dots.shake { animation: shake 0.4s ease; }
@keyframes shake { 0%,100%{transform:none} 25%{transform:translateX(-9px)} 75%{transform:translateX(9px)} }
.pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; }
.pad button {
  height: 76px; border-radius: 22px;
  background: var(--panel); border: 1.5px solid var(--line);
  font-size: 26px; font-weight: 800; box-shadow: 0 3px 0 var(--line);
  transition: transform 0.06s ease;
}
.pad button:active { transform: translateY(2px); box-shadow: none; background: #fff3dd; }
.lock-hint { color: var(--dim); font-size: 12px; margin-top: 18px; text-align: center; }

/* ================= layout ================= */
#app { height: 100dvh; display: flex; flex-direction: column; }

#top {
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 10px;
}
.brand { font-size: 17px; letter-spacing: 0.05em; margin-right: auto; }
.brand b { font-weight: 900; color: var(--espresso); }
#conn-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bad); margin-left: 4px; vertical-align: 2px;
  transition: background 0.3s ease;
}
#conn-dot.on { background: var(--good); }
/* Icon-only round buttons: labels ("LOG", "TAB", the folder name) were
   unreadable at phone width and pushed each other off the bar, so the icon
   carries the meaning and the text lives in title=/the sheet it opens. */
.chip {
  width: 40px; height: 40px; flex: none; position: relative;
  display: grid; place-items: center;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 50%;
  font-size: 17px; font-weight: 800; box-shadow: 0 2px 0 var(--line);
  line-height: 1;
}
.chip:active { transform: translateY(1px); box-shadow: none; }
.chip-accent { background: linear-gradient(140deg, #ffe9c4, #ffd98f); border-color: var(--amber-deep); }
#bell-chip.on { border-color: var(--good); background: #f0faf3; }
/* the broom lives where the history lives — only useful in LOG view */
#clear-btn { display: none; }
#app.chat-full #clear-btn { display: grid; }
#ws-name { display: none; }
/* unread marker: a brew wrote to the log while you were on the machine view */
.chip-dot {
  position: absolute; top: 1px; right: 1px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--bad); border: 1.5px solid var(--panel);
}

/* ================= machine ================= */
#machine {
  margin: 0 12px; padding: 12px 12px 14px;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.mlabel {
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.22em; color: var(--dim);
  margin: 2px 4px 8px;
}
.mlabel.center { text-align: center; margin-bottom: 2px; }
#bean-note { font-weight: 600; letter-spacing: 0.02em; text-transform: none; margin-left: 6px; }

#beans {
  display: flex; gap: 10px; overflow-x: auto;
  /* headroom for the selected bag's lift + scale — never clip the pop-out */
  padding: 13px 4px 12px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
#beans::-webkit-scrollbar { display: none; }
.bag {
  scroll-snap-align: center;
  flex: 0 0 96px; height: 118px; border-radius: 16px;
  border: 2px solid var(--line); background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 8px; position: relative; overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.bag svg { position: absolute; top: 6px; }
.bag .bag-name { font-size: 12px; font-weight: 900; letter-spacing: 0.08em; z-index: 1; }
.bag .bag-roast { font-size: 9.5px; color: var(--dim); font-weight: 700; z-index: 1; }
.bag.sel {
  transform: translateY(-5px) scale(1.05);
  border-color: var(--amber-deep);
  box-shadow: 0 8px 18px rgba(201, 127, 22, 0.28);
  background: #fff6e2;
}

#gauge-row { display: flex; gap: 12px; align-items: stretch; }
#grind-wrap { flex: 1.25; text-align: center; position: relative; }
#grinder { width: 100%; max-width: 218px; touch-action: none; filter: drop-shadow(0 4px 8px rgba(76, 53, 39, 0.18)); }
#grinder-knob {
  transition: transform 0.5s cubic-bezier(0.22, 1.6, 0.36, 1); /* springy click-stop twist */
  transform-origin: 100px 100px; transform-box: view-box;
}
#knob-grips line { stroke: rgba(255, 247, 234, 0.14); stroke-width: 3.4; stroke-linecap: round; }
#grind-fill { transition: stroke-dasharray 0.35s ease, stroke 0.2s ease; }
#grind-ticks .det { fill: var(--dim); opacity: 0.5; transition: fill 0.2s, opacity 0.2s; }
#grind-ticks .det.hot { fill: var(--amber-deep); opacity: 1; }
#grind-ticks .skull { font-size: 13px; }
#grind-ticks .skull.hot { fill: var(--bad); }
#grind-ticks .rn { font-size: 9.5px; font-weight: 800; fill: var(--dim); letter-spacing: 0.04em; transition: fill 0.2s; }
#grind-ticks .rn.hot { fill: var(--espresso-deep); }
#effort-name { font-size: 17px; font-weight: 900; letter-spacing: 0.12em; color: var(--espresso-deep); margin-top: 2px; }
#effort-note { font-size: 11px; color: var(--dim); font-weight: 600; }

#goto-chat {
  display: block; width: 100%; margin-top: 12px; height: 44px; border-radius: 14px;
  background: linear-gradient(150deg, var(--amber), var(--amber-deep));
  color: #fff; font-weight: 900; font-size: 13px; letter-spacing: 0.06em;
  box-shadow: 0 3px 0 var(--amber-deep);
}
#goto-chat:active { transform: translateY(2px); box-shadow: none; }

#side-opts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 58px; height: 58px; flex: none;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 18px;
  box-shadow: 0 2px 0 var(--line);
}
.opt:active { transform: translateY(1px); box-shadow: none; }
.opt .opt-ico { font-size: 19px; line-height: 1; }
.opt .opt-v { font-size: 9.5px; font-weight: 900; letter-spacing: 0.06em; color: var(--dim); }
.opt.on { border-color: var(--good); background: #f0faf3; }
.opt.on .opt-v { color: var(--good); }

/* ================= chat =================
   The machine view and the chat view are two mutually exclusive panes of the
   same slot — never both at once. The chat used to stay in layout as an
   invisible spacer, which left a squeezed strip of live transcript wedged
   between the grinder and the mic; now each pane is display-toggled and owns
   the full space between the header and the deck. */
#machine-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 10px; }
#chat { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 6px; display: none; }
#app.chat-full #machine-scroll { display: none; }
#app.chat-full #chat { display: block; }
#log-btn.on { background: linear-gradient(140deg, #ffe9c4, #ffd98f); border-color: var(--amber-deep); }
#chat-inner { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; }
.hello-card {
  background: var(--panel); border: 1.5px dashed var(--line); border-radius: var(--r);
  padding: 13px 15px; font-size: 13.5px; color: var(--dim); line-height: 1.5;
}
.hello-card b { color: var(--ink); }

.order {
  align-self: flex-end; max-width: 86%;
  background: linear-gradient(150deg, #7a5740, var(--espresso-deep));
  color: #fff7ea; border-radius: 16px 16px 5px 16px;
  padding: 10px 14px; font-size: 14.5px; line-height: 1.45;
  box-shadow: var(--shadow);
}
.order .meta { font-size: 10px; opacity: 0.75; font-weight: 800; letter-spacing: 0.1em; margin-bottom: 3px; }

.receipt {
  align-self: flex-start; max-width: 94%; min-width: 200px;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 5px 16px 16px 16px; padding: 10px 13px 8px;
  box-shadow: var(--shadow); position: relative;
}
.receipt::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--amber) 0 8px, transparent 8px 14px);
  border-radius: 2px;
}
.receipt .r-body {
  font-family: "Cascadia Mono", ui-monospace, Consolas, monospace;
  font-size: 12.8px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  user-select: text; -webkit-user-select: text;
}
.receipt .r-tools { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 2px; }
.tool-pill {
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  background: #f1e7d4; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 9px; color: var(--espresso-deep);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.receipt .r-foot {
  margin-top: 8px; padding-top: 6px; border-top: 1.5px dashed var(--line);
  font-size: 10.5px; font-weight: 800; color: var(--dim); letter-spacing: 0.06em;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.receipt .r-foot .ok { color: var(--good); }
.receipt .r-foot .err { color: var(--bad); }
.receipt.err { border-color: #f0b9b7; background: #fff6f5; }

.brew-status {
  align-self: flex-start; display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; color: var(--espresso); letter-spacing: 0.04em;
  padding: 4px 6px;
}
.brew-status .steam { display: inline-flex; gap: 3px; }
.brew-status .steam i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--steam);
  animation: puff 1.1s ease-in-out infinite;
}
.brew-status .steam i:nth-child(2) { animation-delay: 0.18s; }
.brew-status .steam i:nth-child(3) { animation-delay: 0.36s; }
@keyframes puff { 0%,100% { transform: translateY(0); opacity: 0.5;} 50% { transform: translateY(-5px); opacity: 1;} }

/* ================= deck =================
   display:none by default (see the chat-full toggle above) — only the
   chat view turns this into a flex column. */
#deck {
  position: relative;
  display: none; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 14px calc(env(safe-area-inset-bottom) + 10px);
}
#app.chat-full #deck { display: flex; }
/* kbd and spill flank the mic without shifting it: both sides reserve the
   same width, so the mic stays dead-centre whether or not spill is showing */
#deck-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px; width: 100%; max-width: 420px;
}
#kbd-btn { justify-self: end; }
#spill { justify-self: start; }
#kbd-btn, #spill {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 19px; line-height: 1;
  background: var(--panel); border: 1.5px solid var(--line);
  box-shadow: 0 3px 0 var(--line);
}
#kbd-btn:active, #spill:active { transform: translateY(2px); box-shadow: none; }
#spill { background: #fff2f1; border-color: var(--bad); box-shadow: 0 3px 0 rgba(217, 83, 79, 0.4); }

/* push-to-talk: one round mic, the way every voice UI does it */
#lever {
  width: 84px; height: 84px; border-radius: 50%; position: relative;
  display: grid; place-items: center; justify-self: center;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.45), transparent 55%),
    linear-gradient(160deg, #f2bc59, var(--amber) 45%, var(--amber-deep) 92%);
  border: 2px solid #a3670f;
  box-shadow: 0 6px 0 #8a5a0c, inset 0 2px 0 rgba(255, 255, 255, 0.35), var(--shadow);
  color: #fff; touch-action: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.2s ease, background 0.2s ease;
}
#lever:active, #lever.listening {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #8a5a0c, inset 0 2px 0 rgba(255, 255, 255, 0.22);
}
#lever-ico { font-size: 32px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
#lever.listening {
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.35), transparent 55%),
    linear-gradient(160deg, #f07a68, var(--bad) 55%, #b03a36);
  border-color: #b03a36;
}
#lever.brewing { filter: saturate(0.45) brightness(0.97); pointer-events: none; }
#lever-ring {
  position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  border: 3px solid transparent;
}
#lever.listening #lever-ring { border-color: rgba(217, 83, 79, 0.5); animation: ring 1.1s ease-out infinite; }
#lever.brewing #lever-ring { border-color: rgba(232, 163, 61, 0.55); animation: ring 1.6s ease-out infinite; }
@keyframes ring { 0% { transform: scale(0.97); opacity: 1;} 100% { transform: scale(1.14); opacity: 0;} }

#lever-label {
  font-size: 9.5px; font-weight: 900; letter-spacing: 0.2em;
  color: var(--dim); text-align: center; min-height: 12px;
}

#ticket {
  position: absolute; left: 14px; right: 14px; bottom: 100%;
  margin-bottom: 8px; background: var(--paper); border: 1.5px solid var(--amber-deep);
  border-radius: 14px; padding: 10px 14px; font-size: 14px; line-height: 1.4;
  box-shadow: var(--shadow); color: var(--ink);
  max-height: 30vh; overflow-y: auto;
}
#ticket::before { content: "🎙 "; }

#type-wrap {
  position: absolute; left: 14px; right: 14px; bottom: 100%;
  margin-bottom: 8px; display: flex; gap: 8px; align-items: center;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px;
  padding: 9px 10px; box-shadow: var(--shadow);
}
#type-input {
  flex: 1; border: none; outline: none; resize: none; background: transparent;
  font: inherit; font-size: 14.5px; max-height: 30vh; color: var(--ink);
  user-select: text; -webkit-user-select: text;
  text-align: center;
}
#type-send {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: linear-gradient(150deg, var(--amber), var(--amber-deep));
  color: #fff; font-size: 17px; font-weight: 900;
}
#img-btn {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--panel); border: 1.5px solid var(--line);
  font-size: 17px;
}
#img-btn:active { transform: translateY(1px); }
#img-btn.has-file { border-color: var(--amber); }

/* ================= sheets ================= */
#sheet-veil {
  position: fixed; inset: 0; background: rgba(59, 47, 39, 0.28);
  backdrop-filter: blur(2px); z-index: 30;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
  background: var(--panel); border-radius: 26px 26px 0 0;
  border: 1.5px solid var(--line); border-bottom: none;
  padding: 10px 18px calc(env(safe-area-inset-bottom) + 18px);
  max-height: 78dvh; overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(76, 53, 39, 0.25);
  animation: sheetUp 0.24s cubic-bezier(0.2, 1.1, 0.4, 1);
}
@keyframes sheetUp { from { transform: translateY(40%); opacity: 0.4; } to { transform: none; opacity: 1; } }
.sheet-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 2px auto 12px; }
.sheet h2 { font-size: 15px; letter-spacing: 0.12em; font-weight: 900; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.mini {
  margin-left: auto; background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 10px; width: 34px; height: 34px; font-size: 16px; font-weight: 900;
}
.dim { color: var(--dim); }
.small { font-size: 12px; margin-bottom: 10px; }

/* usage tab */
.tab-hero {
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px;
  padding: 14px; text-align: center; margin-bottom: 12px;
}
.tab-hero .big { font-size: 34px; font-weight: 900; color: var(--espresso-deep); }
.tab-hero .lbl { font-size: 10px; font-weight: 900; letter-spacing: 0.24em; color: var(--dim); }
.tab-cells { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.tab-cell { background: var(--paper); border: 1.5px solid var(--line); border-radius: 13px; padding: 9px 4px; text-align: center; }
.tab-cell b { display: block; font-size: 15px; }
.tab-cell span { font-size: 9px; font-weight: 900; letter-spacing: 0.14em; color: var(--dim); }
.bars { display: flex; align-items: flex-end; gap: 7px; height: 90px; padding: 0 4px; margin: 6px 0 2px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.bar-col i {
  width: 100%; border-radius: 6px 6px 3px 3px; min-height: 3px;
  background: linear-gradient(180deg, var(--amber), var(--amber-deep));
}
.bar-col.today i { background: linear-gradient(180deg, #8a5f45, var(--espresso-deep)); }
.bar-col span { font-size: 8.5px; font-weight: 800; color: var(--dim); }
.bar-col b { font-size: 8.5px; color: var(--espresso-deep); }
.model-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 13px;
  padding: 9px 12px; margin-bottom: 7px; font-size: 12.5px; font-weight: 800;
}
.model-row .dotm { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.model-row .cost { margin-left: auto; color: var(--espresso-deep); }
.model-row .msgs { color: var(--dim); font-weight: 700; font-size: 11px; }
.sec-label { font-size: 10px; font-weight: 900; letter-spacing: 0.2em; color: var(--dim); margin: 12px 2px 7px; }
.est-note { font-size: 10.5px; color: var(--dim); text-align: center; margin-top: 10px; }

/* workspace list */
.ws-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 13px;
  padding: 12px 14px; margin-bottom: 8px; font-size: 14px; font-weight: 700;
}
.ws-item.sel { border-color: var(--amber-deep); background: #fff6e2; }
.ws-item .ws-path { display: block; font-size: 10px; color: var(--dim); font-weight: 600; word-break: break-all; }

/* ================= character stage ================= */
#stage-wrap {
  position: relative; height: clamp(112px, 22dvh, 168px);
  margin-bottom: 10px; border: 1.5px solid var(--line); border-radius: 16px;
  background:
    radial-gradient(340px 100px at 50% 100%, #fdf3df, transparent),
    var(--paper);
  overflow: hidden;
}
#fx-stage { position: absolute; inset: 0; width: 100%; height: 100%; }
#stage-cap { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; pointer-events: none; }
#stage-cap #stage-name { font-size: 12px; font-weight: 900; letter-spacing: 0.24em; color: var(--espresso-deep); display: block; }
#stage-cap #stage-roast { font-size: 8px; font-weight: 800; letter-spacing: 0.3em; color: var(--dim); }
#stage-cap.pop { animation: capPop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes capPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#fx-mute {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--panel); border: 1.5px solid var(--line);
  font-size: 13px; z-index: 2;
}
#fx-mute:active { transform: translateY(1px); }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 130px; transform: translateX(-50%);
  background: var(--espresso-deep); color: #fff7ea; z-index: 40;
  border-radius: 999px; padding: 10px 18px; font-size: 13px; font-weight: 700;
  box-shadow: var(--shadow); max-width: 86vw; text-align: center;
  animation: toastIn 0.2s ease;
}
@keyframes toastIn { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ================= responsive ================= */

/* very small phones (or a keyboard eating the viewport): claw back height */
@media (max-width: 360px), (max-height: 640px) {
  #stage-wrap { height: clamp(92px, 17dvh, 128px); }
  .bag { flex: 0 0 84px; height: 104px; }
  #lever { width: 72px; height: 72px; }
  #lever-ico { font-size: 27px; }
  .opt { width: 52px; height: 52px; border-radius: 16px; }
  #machine { margin: 0 8px; padding: 10px; }
}

/* landscape phone: the machine goes two-up so the stage isn't squashed */
@media (max-height: 480px) and (orientation: landscape) {
  #stage-wrap { height: 96px; }
  #beans { padding: 10px 4px 8px; }
  #lever { width: 64px; height: 64px; }
  #lever-ico { font-size: 24px; }
  #lever-label { display: none; }
  #deck { padding-top: 4px; }
}

@media (min-width: 560px) {
  /* room for the folder name again — the icon alone stops being enough
     once you have several workspaces */
  #ws-name { display: inline; margin-left: 6px; font-size: 12px; }
  #ws-chip { width: auto; border-radius: 999px; padding: 0 14px; }
}

@media (min-width: 700px) {
  #machine { max-width: 640px; margin: 0 auto; width: calc(100% - 24px); }
  #chat, #deck { max-width: 700px; margin: 0 auto; width: 100%; }
  /* four bags always fit here — center them instead of hugging the left */
  #beans { justify-content: center; }
  #top { max-width: 700px; margin: 0 auto; width: 100%; }
}

@media (min-width: 1000px) {
  #machine, #chat, #deck, #top { max-width: 860px; }
  #stage-wrap { height: clamp(150px, 24dvh, 210px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}