:root {
  --bg0: #05100b;
  --bg1: #0b2418;
  --bg2: #123c26;
  --gold: #e8c15a;
  --gold-2: #fff0b8;
  --brew: #34d399;
  --brew-deep: #059669;
  --flame: #fb923c;
  --panel: #081710;
  --muted: #93b8a4;
  --win: #34d399;
  --lose: #e11d48;
  --iron: #1c2426;
  --iron-2: #313e41;

  --liquid-hue: 160; /* app.js slides this toward red as heat rises */
  --heat-pct: 0%;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: #eefaf2;
  background-color: var(--bg0);
  background-image:
    radial-gradient(circle at 50% -10%, rgba(5, 150, 105, 0.4), transparent 55%),
    radial-gradient(circle at 85% 110%, rgba(251, 146, 60, 0.16), transparent 45%),
    linear-gradient(160deg, rgba(5, 16, 11, 0.8), rgba(18, 60, 38, 0.55));
}

.layout {
  position: relative;
  z-index: 1;
  width: min(1080px, 96vw);
  margin: 1rem auto;
  padding: 1rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.12), rgba(0, 0, 0, 0.38));
  border: 1px solid rgba(232, 193, 90, 0.22);
}

/* ---- floating embers ---- */

.embers { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.embers span {
  position: absolute;
  bottom: -12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-2), var(--flame));
  opacity: 0;
  animation: ember-rise 9s linear infinite;
}
.embers span:nth-child(1) { left: 8%;  animation-delay: 0s; }
.embers span:nth-child(2) { left: 21%; animation-delay: 2.2s; }
.embers span:nth-child(3) { left: 33%; animation-delay: 4.6s; }
.embers span:nth-child(4) { left: 47%; animation-delay: 1.4s; }
.embers span:nth-child(5) { left: 58%; animation-delay: 5.8s; }
.embers span:nth-child(6) { left: 71%; animation-delay: 3.1s; }
.embers span:nth-child(7) { left: 84%; animation-delay: 6.9s; }
.embers span:nth-child(8) { left: 93%; animation-delay: 0.9s; }
@keyframes ember-rise {
  0%   { transform: translateY(0) scale(0.7); opacity: 0; }
  12%  { opacity: 0.8; }
  100% { transform: translateY(-105vh) scale(0.25); opacity: 0; }
}

/* ---- topbar ---- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.logo-wrap { display: flex; align-items: center; gap: 0.6rem; }

.cauldron-mark {
  width: 40px; height: 40px;
  border-radius: 0 0 50% 50%;
  background:
    radial-gradient(circle at 50% 24%, hsl(var(--liquid-hue) 70% 45%) 0 32%, transparent 33%),
    linear-gradient(180deg, var(--iron-2), var(--iron));
  border: 2px solid var(--gold);
  border-top-width: 4px;
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.5);
}

.topbar h1 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: 0.24em;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(232, 193, 90, 0.45);
}

.topbar-right { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }

.pill {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.86rem;
  border: 1px solid rgba(232, 193, 90, 0.35);
  background: rgba(0, 0, 0, 0.4);
}
.mode-pill { color: var(--brew); }
.balance-pill { color: var(--gold-2); }

.demo-toggle {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.82rem; color: var(--muted); cursor: pointer;
}

/* ---- stage ---- */

.stage {
  display: grid;
  grid-template-columns: 1.25fr auto 1fr;
  gap: 1rem;
  align-items: stretch;
  padding: 1rem;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 120%, rgba(251, 146, 60, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(8, 23, 16, 0.9), rgba(4, 10, 7, 0.95));
  border: 1px solid rgba(52, 211, 153, 0.18);
}

.scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 340px;
  overflow: hidden;
  border-radius: 12px;
}

/* draw float */
.draw-float {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--gold-2);
  text-shadow: 0 0 24px rgba(232, 193, 90, 0.8);
  z-index: 6;
  pointer-events: none;
}
.draw-float.pop { animation: draw-pop 1.2s ease-out forwards; }
.draw-float.bust-pop { color: var(--lose); text-shadow: 0 0 24px rgba(225, 29, 72, 0.8); }
@keyframes draw-pop {
  0%   { opacity: 0; transform: translate(-50%, 16px) scale(0.6); }
  18%  { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -64px) scale(0.95); }
}

/* result banner */
.banner {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  padding: 0.5rem 1.2rem;
  border-radius: 12px;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  animation: banner-in 320ms ease-out;
  white-space: nowrap;
}
.banner.win  { background: rgba(5, 150, 105, 0.88); color: #eafff6; box-shadow: 0 0 34px rgba(52, 211, 153, 0.55); }
.banner.gold { background: linear-gradient(120deg, #b98b1f, var(--gold)); color: #241a02; box-shadow: 0 0 44px rgba(232, 193, 90, 0.85); }
.banner.lose { background: rgba(159, 18, 57, 0.9); color: #ffe4ea; box-shadow: 0 0 34px rgba(225, 29, 72, 0.55); }
.banner.near-miss { background: rgba(124, 45, 18, 0.94); color: #ffedd5; box-shadow: 0 0 38px rgba(251, 146, 60, 0.8); font-size: 1.3rem; }
.win-tier { position: absolute; top: 26%; left: 50%; transform: translateX(-50%); z-index: 8; font-size: 2rem; font-weight: 900; letter-spacing: .12em; color: var(--gold-2); text-shadow: 0 0 30px rgba(232,193,90,.9); animation: banner-in 320ms ease-out; pointer-events: none; }
.win-tier.mega, .win-tier.epic { font-size: 2.6rem; }
.win-count { position: absolute; top: 40%; left: 50%; transform: translateX(-50%); z-index: 8; font-weight: 900; color: var(--win); }
.scene.tension-1 .pot-liquid { filter: brightness(1.12); }
.scene.tension-2 .pot-liquid { filter: brightness(1.28); box-shadow: 0 -4px 34px hsl(var(--liquid-hue) 95% 60% / .95); }
.scene.tension-3, .cauldron.tension-3 { animation: tension-pulse .7s ease-in-out infinite alternate; }
.scene.anticipation { filter: brightness(1.18) saturate(1.25); }
@keyframes tension-pulse { from { filter: brightness(1); } to { filter: brightness(1.22); } }
body.quick-pour .pot-liquid, body.quick-pour .gauge-fill { transition-duration: 140ms !important; }
.stake-chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .45rem; }
.stake-chips button { flex: 1; padding: .4rem .2rem; border-radius: 8px; border: 1px solid rgba(232,193,90,.3); background: rgba(0,0,0,.4); color: var(--gold-2); font-weight: 800; cursor: pointer; }
.stake-chips button.selected { background: var(--gold); color: #241a02; }
.stake-chips button.anchor { flex: 1.4; background: linear-gradient(120deg,#b98b1f,var(--gold)); color: #241a02; border-color: var(--gold-2); }
.quick-pour-toggle { display: flex; gap: .4rem; align-items: center; font-size: .8rem; color: var(--muted); cursor: pointer; }
.quick-pour-toggle span { opacity: .75; }
.nerve-line { margin: 0; font-size: .82rem; color: var(--gold-2); letter-spacing: .04em; }
button.rebet { border-color: var(--brew); color: var(--brew); }
.recent-wins { margin-top: 1rem; }
.recent-wins-list { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .4rem; }
.recent-win { padding: .35rem .65rem; border-radius: 999px; background: rgba(5,150,105,.16); border: 1px solid rgba(52,211,153,.35); color: #bbf7d0; font-size: .8rem; font-weight: 700; }
.sound-btn { cursor: pointer; color: var(--gold-2); }
@keyframes banner-in {
  from { opacity: 0; transform: translate(-50%, -12px) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* ---- cauldron ---- */

.cauldron { position: relative; width: 230px; margin-bottom: 0.4rem; }
.cauldron.shake { animation: pot-shake 500ms ease-in-out; }
@keyframes pot-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-1.4deg); }
  40% { transform: translateX(7px) rotate(1.4deg); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.pot { position: relative; width: 230px; height: 172px; }

.pot-inner {
  position: absolute;
  inset: 14px 10px 10px 10px;
  border-radius: 46% 46% 50% 50% / 30% 30% 68% 68%;
  background: linear-gradient(180deg, #10181a, #06090a 70%);
  overflow: hidden;
  box-shadow: inset 0 8px 18px rgba(0, 0, 0, 0.85);
}

.pot-liquid {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(12% + var(--heat-pct) * 0.84);
  background:
    linear-gradient(180deg,
      hsl(var(--liquid-hue) 85% 62%) 0%,
      hsl(var(--liquid-hue) 80% 40%) 34%,
      hsl(var(--liquid-hue) 75% 22%) 100%);
  box-shadow: 0 -4px 26px hsl(var(--liquid-hue) 90% 55% / 0.75);
  transition: height 600ms cubic-bezier(0.22, 1, 0.36, 1), background 600ms linear, box-shadow 600ms linear;
}
.pot-liquid::before {
  content: "";
  position: absolute;
  top: -7px; left: -6%; right: -6%;
  height: 14px;
  border-radius: 50%;
  background: hsl(var(--liquid-hue) 90% 70% / 0.9);
  filter: blur(1px);
}

.bubbles b {
  position: absolute;
  bottom: 4px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: hsl(var(--liquid-hue) 95% 82% / 0.8);
  animation: bubble-rise var(--bub-t, 2.6s) ease-in infinite;
}
.bubbles b:nth-child(1) { left: 14%; --bub-t: 2.9s; animation-delay: 0.1s; }
.bubbles b:nth-child(2) { left: 30%; --bub-t: 2.2s; animation-delay: 0.8s; width: 6px; height: 6px; }
.bubbles b:nth-child(3) { left: 46%; --bub-t: 3.2s; animation-delay: 0.3s; }
.bubbles b:nth-child(4) { left: 60%; --bub-t: 2.5s; animation-delay: 1.4s; width: 12px; height: 12px; }
.bubbles b:nth-child(5) { left: 74%; --bub-t: 2.8s; animation-delay: 0.6s; }
.bubbles b:nth-child(6) { left: 86%; --bub-t: 2.1s; animation-delay: 1.9s; width: 6px; height: 6px; }
.bubbles b:nth-child(7) { left: 52%; --bub-t: 1.9s; animation-delay: 2.3s; width: 7px; height: 7px; }
@keyframes bubble-rise {
  0%   { transform: translateY(0) scale(0.7); opacity: 0; }
  15%  { opacity: 0.9; }
  100% { transform: translateY(-96px) scale(1.15); opacity: 0; }
}
.cauldron.raging .bubbles b { animation-duration: calc(var(--bub-t) * 0.55); }

.pot-rim {
  position: absolute;
  top: 4px; left: -4px; right: -4px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--iron-2), var(--iron));
  border: 2px solid rgba(232, 193, 90, 0.75);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.pot::before {
  content: "";
  position: absolute;
  inset: 16px 0 0 0;
  border-radius: 46% 46% 50% 50% / 26% 26% 70% 70%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.12), transparent 40%),
    linear-gradient(180deg, var(--iron-2), #0c1112 75%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
}

/* Painted after ::before in tree order, so the interior sits on the iron
   body while leaving the walls visible around it. */
.pot-inner {
  inset: 20px 16px 16px 16px;
  border: 3px solid rgba(0, 0, 0, 0.55);
}

.pot-leg {
  position: absolute;
  bottom: -16px;
  width: 16px; height: 24px;
  background: linear-gradient(180deg, var(--iron), #000);
  border-radius: 0 0 6px 6px;
  transform: skewX(6deg);
}
.pot-leg.left { left: 44px; transform: skewX(-14deg); }
.pot-leg.right { right: 44px; transform: skewX(14deg); }

/* fire */
.fire {
  position: relative;
  width: 150px; height: 42px;
  margin: 14px auto 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
}
.fire i {
  width: 20px;
  height: 34px;
  border-radius: 50% 50% 42% 42% / 82% 82% 22% 22%;
  background: linear-gradient(180deg, var(--gold-2), var(--flame) 45%, #b91c1c);
  filter: blur(0.5px);
  transform-origin: bottom center;
  animation: flame-flick 640ms ease-in-out infinite alternate;
}
.fire i:nth-child(1) { height: 20px; animation-delay: 120ms; }
.fire i:nth-child(2) { height: 30px; animation-delay: 320ms; }
.fire i:nth-child(3) { height: 38px; animation-delay: 0ms; }
.fire i:nth-child(4) { height: 28px; animation-delay: 460ms; }
.fire i:nth-child(5) { height: 18px; animation-delay: 240ms; }
@keyframes flame-flick {
  from { transform: scaleY(0.86) scaleX(1.06); }
  to   { transform: scaleY(1.12) scaleX(0.92); }
}

/* steam */
.steam { position: absolute; top: -6px; left: 0; right: 0; height: 60px; z-index: 4; opacity: 0; transition: opacity 500ms; }
.cauldron.hot .steam { opacity: 1; }
.steam i {
  position: absolute;
  bottom: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(230, 255, 244, 0.24);
  filter: blur(4px);
  animation: steam-rise 2.6s ease-out infinite;
}
.steam i:nth-child(1) { left: 34%; animation-delay: 0.2s; }
.steam i:nth-child(2) { left: 50%; animation-delay: 1.2s; }
.steam i:nth-child(3) { left: 64%; animation-delay: 0.7s; }
@keyframes steam-rise {
  0%   { transform: translateY(0) scale(0.7); opacity: 0; }
  25%  { opacity: 0.8; }
  100% { transform: translateY(-52px) scale(1.9); opacity: 0; }
}

.heat-big { display: flex; align-items: baseline; gap: 0.45rem; margin-top: 1.2rem; }
.heat-big strong { font-size: 2rem; color: var(--gold-2); }
.heat-cap { color: var(--muted); font-size: 0.9rem; }

/* overboil flash on the whole scene */
.scene.flash-lose::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(225, 29, 72, 0.34), transparent 70%);
  animation: lose-flash 700ms ease-out forwards;
  pointer-events: none;
}
.scene.flash-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(232, 193, 90, 0.4), transparent 70%);
  animation: lose-flash 900ms ease-out forwards;
  pointer-events: none;
}
@keyframes lose-flash { from { opacity: 1; } to { opacity: 0; } }

/* ---- gauge ---- */

.gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.2rem;
}

.gauge-overflow {
  position: relative;
  width: 26px; height: 46px;
  border: 1px solid rgba(225, 29, 72, 0.55);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: rgba(225, 29, 72, 0.08);
  overflow: visible;
}
.overflow-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(180deg, #fda4af, var(--lose));
  border-radius: 6px 6px 0 0;
  transition: height 300ms ease-out;
}
.overflow-label {
  position: absolute;
  left: 34px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: #fda4af;
}

.gauge-track {
  position: relative;
  width: 26px;
  height: 250px;
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 0 0 12px 12px;
  background: rgba(0, 0, 0, 0.5);
  overflow: visible;
}

.gauge-fill {
  position: absolute;
  left: 2px; right: 2px; bottom: 2px;
  height: var(--heat-pct);
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg,
    hsl(var(--liquid-hue) 85% 60%),
    hsl(var(--liquid-hue) 75% 32%));
  box-shadow: 0 0 14px hsl(var(--liquid-hue) 90% 55% / 0.6);
  transition: height 600ms cubic-bezier(0.22, 1, 0.36, 1), background 600ms linear;
  z-index: 2;
}

.gauge-reach {
  position: absolute;
  left: 2px; right: 2px;
  bottom: 0;
  height: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(232, 193, 90, 0.4) 0 5px,
    rgba(232, 193, 90, 0.12) 5px 10px);
  border: 1px dashed rgba(232, 193, 90, 0.6);
  z-index: 3;
  transition: bottom 250ms ease-out, height 250ms ease-out;
}

.perfect-line {
  position: absolute;
  top: 0; left: -6px; right: -6px;
  border-top: 2px solid var(--gold);
  box-shadow: 0 0 10px rgba(232, 193, 90, 0.8);
  z-index: 4;
}
.perfect-line em {
  position: absolute;
  right: -8px;
  top: -18px;
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  white-space: nowrap;
}

.gauge-ticks span {
  position: absolute;
  left: 0; right: 8px;
  border-top: 1px solid rgba(147, 184, 164, 0.35);
}
.gauge-ticks span::after {
  content: attr(data-v);
  position: absolute;
  left: -22px;
  top: -8px;
  font-size: 0.6rem;
  color: var(--muted);
}
.gauge-ticks span[data-v="75"] { top: 25%; }
.gauge-ticks span[data-v="50"] { top: 50%; }
.gauge-ticks span[data-v="25"] { top: 75%; }

.gauge-caption { font-size: 0.6rem; letter-spacing: 0.14em; color: var(--muted); }

/* ---- HUD ---- */

.hud {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  justify-content: center;
}

.hud-label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.hud-main {
  padding: 0.9rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(232, 193, 90, 0.28);
  display: grid;
  gap: 0.2rem;
}
.hud-mult {
  font-size: 2.3rem;
  color: var(--gold-2);
  text-shadow: 0 0 26px rgba(232, 193, 90, 0.5);
  transition: transform 150ms ease-out;
}
.hud-mult.bump { transform: scale(1.12); }
.hud-bottle { font-size: 1.25rem; color: var(--win); }

.hud-next {
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(52, 211, 153, 0.22);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 0.9rem;
}
.hud-next-title {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--brew);
}
.hud-next strong { font-size: 1.02rem; }
.hud-next .risk { color: #fda4af; }
.hud-next .gold { color: var(--gold); }

/* ---- controls ---- */

.controls {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) 1.4fr minmax(220px, 1fr);
  gap: 1rem;
  align-items: end;
  margin-top: 1rem;
}

.control-block label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.control-block input[type="number"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(0, 0, 0, 0.5);
  color: #eefaf2;
  font-size: 1rem;
  font-weight: 700;
}

.quick-bets { display: flex; gap: 0.4rem; margin-top: 0.45rem; }
.quick-bets button {
  flex: 1;
  padding: 0.35rem 0;
  border-radius: 8px;
  border: 1px solid rgba(232, 193, 90, 0.3);
  background: rgba(0, 0, 0, 0.4);
  color: var(--gold-2);
  font-weight: 700;
  cursor: pointer;
}
.quick-bets button:hover { background: rgba(232, 193, 90, 0.16); }

.size-readout {
  color: var(--gold-2);
  font-size: 1.05rem;
  margin-left: 0.4rem;
  letter-spacing: 0;
}

.size-slider {
  width: 100%;
  appearance: none;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brew-deep), var(--gold) 55%, var(--lose));
  outline: none;
  cursor: pointer;
}
.size-slider::-webkit-slider-thumb {
  appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff7dd, var(--gold) 65%);
  border: 2px solid #4d3a08;
  box-shadow: 0 0 16px rgba(232, 193, 90, 0.7);
}
.size-slider::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff7dd, var(--gold) 65%);
  border: 2px solid #4d3a08;
}
.size-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.64rem;
  color: var(--muted);
  margin-top: 0.3rem;
  letter-spacing: 0.08em;
}

.actions { display: grid; gap: 0.55rem; }

button.primary, button.secondary {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: none;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}
button.primary {
  background: linear-gradient(120deg, #b98b1f, var(--gold));
  color: #241a02;
  box-shadow: 0 6px 22px rgba(232, 193, 90, 0.35);
}
button.primary.pour {
  background: linear-gradient(120deg, var(--brew-deep), var(--brew));
  color: #03130c;
  box-shadow: 0 6px 22px rgba(52, 211, 153, 0.35);
}
button.secondary {
  background: rgba(0, 0, 0, 0.5);
  color: var(--gold-2);
  border: 1px solid rgba(232, 193, 90, 0.5);
}
button.primary:hover:not(:disabled),
button.secondary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---- history ---- */

.history-wrap { margin-top: 1rem; }
.history-strip { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.4rem; }
.history-empty { color: var(--muted); font-size: 0.85rem; }
.history-chip {
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
}
.history-chip.bottled  { color: var(--win); border-color: rgba(52, 211, 153, 0.5); }
.history-chip.perfect  { color: #241a02; background: linear-gradient(120deg, #b98b1f, var(--gold)); }
.history-chip.overboil { color: #fda4af; border-color: rgba(225, 29, 72, 0.5); }

/* ---- results row / verify ---- */

.results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}
.results div {
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(52, 211, 153, 0.16);
  display: grid;
  gap: 0.15rem;
}
.results span { font-size: 0.66rem; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.results strong { font-size: 0.92rem; word-break: break-all; }

.verify-links { display: flex; gap: 0.8rem; margin-top: 0.6rem; }
.verify-link {
  background: none;
  border: none;
  color: var(--brew);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.2rem 0;
}
.verify-link:disabled { color: var(--muted); cursor: not-allowed; }

/* ---- modal ---- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 8, 5, 0.78);
  padding: 1rem;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  width: min(560px, 94vw);
  max-height: 86vh;
  overflow: auto;
  padding: 1.2rem;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--bg2), var(--panel));
  border: 1px solid rgba(232, 193, 90, 0.4);
}
.modal-card h2 { margin: 0 0 0.5rem; color: var(--gold); letter-spacing: 0.18em; font-size: 1rem; }
.verify-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.8rem;
  margin: 0.6rem 0;
  font-size: 0.84rem;
}
.verify-details dt { color: var(--muted); }
.verify-details dd { margin: 0; word-break: break-all; }
.verify-pours { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin: 0.5rem 0 0.8rem; }
.verify-pours th, .verify-pours td {
  padding: 0.3rem 0.45rem;
  text-align: left;
  border-bottom: 1px solid rgba(147, 184, 164, 0.18);
}
.verify-pours .ok { color: var(--win); }
.verify-pours .bad { color: var(--lose); }

/* ---- toast ---- */

.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  background: rgba(159, 18, 57, 0.94);
  color: #ffe4ea;
  font-weight: 700;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* ---- panels ---- */

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.8rem;
  margin-top: 1.1rem;
}
.panel {
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(52, 211, 153, 0.16);
}
.panel h2 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  text-transform: uppercase;
}
.panel ul { margin: 0; padding-left: 1.1rem; font-size: 0.82rem; color: #cfe8da; display: grid; gap: 0.3rem; }
.panel table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.panel th, .panel td { padding: 0.3rem 0.35rem; text-align: left; border-bottom: 1px solid rgba(147, 184, 164, 0.16); }
.panel th { color: var(--muted); font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.stat-grid strong { font-size: 0.95rem; }

/* ---- responsive ---- */

@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr auto; }
  .hud { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .hud-main, .hud-next { flex: 1 1 240px; }
  .controls { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}