/* ==========================================================================
   Quacks Online — gothic horror theme
   Stone and iron panels, tarnished brass trim, blood-red wax, witch-light green.
   ========================================================================== */

:root {
  --bg: #0a0809;
  --bg-2: #120e11;
  --panel: #161116;
  --panel-2: #211921;
  --panel-3: #2b2129;
  --iron: #3d3239;
  --iron-hi: #5a4a52;
  --text: #e6dccb;
  --muted: #9d9184;
  --brass: #b08d57;
  --brass-hi: #dcbd84;
  --blood: #7d1414;
  --blood-hi: #c0392b;
  --ember: #ff7a3a;
  --witch: #7dff9b;
  --witch-dim: #3fae6a;
  --ghost: #a6e3ff;
  --danger: #e0473f;
  --warn: #e3a248;
  --ok: #7fcf8e;
  --parchment: #e3d4b4;
  --ink: #2a1c12;
  --radius: 6px;
  --c-white: #ebe3d1;
  --c-orange: #d9771e;
  --c-green: #2f8f4e;
  --c-red: #b3261e;
  --c-blue: #2c5fb8;
  --c-yellow: #d8a920;
  --c-purple: #7a3b98;
  --c-black: #18161a;
  --f-body: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --f-head: 'Pirata One', 'Crimson Pro', Georgia, serif;
  --f-title: 'UnifrakturMaguntia', 'Pirata One', Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, #241521 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 110%, #2a0b0b 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, #0d1f17 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.45;
  min-height: 100vh;
  overflow-x: hidden;
}
#app { position: relative; z-index: 1; }
h1, h2, h3, .brand { font-family: var(--f-head); font-weight: 400; letter-spacing: .02em; }
h2 { font-size: 1.55rem; margin: 0 0 .75rem; color: var(--brass-hi); text-shadow: 0 2px 6px #000; }
h3 { font-size: 1.3rem; margin: 0 0 .6rem; color: var(--brass-hi); text-shadow: 0 2px 6px #000; }
h2::after, h3::after {
  content: ''; display: block; height: 1px; margin-top: .3rem; width: 100%;
  background: linear-gradient(90deg, var(--brass) 0%, rgba(176, 141, 87, .25) 40%, transparent 85%);
}
.panel-head h2::after, .panel-head h3::after { display: none; }
p { margin: .4rem 0; }
a { color: var(--brass-hi); }
b, strong { font-weight: 700; }
code { background: #000; border: 1px solid var(--iron); padding: 2px 6px; border-radius: 4px; font-size: .82em; word-break: break-all; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.bad { color: var(--danger); }
.warn { color: var(--warn); }
[hidden] { display: none !important; }
::selection { background: var(--blood); color: #fff; }

.loading { display: grid; place-items: center; min-height: 80vh; color: var(--muted); font-size: 1.2rem; font-style: italic; }

/* ------------------------------------------------------------ icons */

.ic { width: 1.1em; height: 1.1em; vertical-align: -.18em; fill: currentColor; flex: none; }
.ic-star { color: var(--brass-hi); }
.ic-ruby { color: #e0303a; filter: drop-shadow(0 0 3px rgba(224, 48, 58, .5)); }
.ic-drop { color: var(--ghost); filter: drop-shadow(0 0 3px rgba(166, 227, 255, .45)); }
.ic-flask { color: #9fd6b0; }
.ic-flask.empty { color: var(--iron-hi); }
.ic-bag { color: #b89a74; }
.ic-rat { color: #c7ad8a; }
.ic-die { color: var(--parchment); }
.ic-coin { color: var(--brass-hi); }
.ic-bomb { color: #d9cdb8; }
.ic-burst { color: var(--ember); }
.ic-skull { color: var(--parchment); }
.ic-ghost { color: #cfe8f0; }
.ic-crown { color: var(--brass-hi); }
.ic-play { color: var(--brass); width: .8em; height: .8em; vertical-align: 0; }

/* ------------------------------------------------------------ atmosphere */

.atmos { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.moon {
  position: absolute; top: 74px; right: 2.5vw; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #f3f1e2 0%, #d7d6c3 45%, #a7a895 75%, #7c7d6e 100%);
  box-shadow: 0 0 60px 20px rgba(214, 228, 200, .12), 0 0 180px 60px rgba(150, 190, 170, .07);
  opacity: .55;
}
body:not([data-screen="home"]) .moon { display: none; }
.moon::after { /* craters */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 62% 58%, rgba(90, 90, 80, .35) 0 9%, transparent 10%),
    radial-gradient(circle at 35% 68%, rgba(90, 90, 80, .3) 0 6%, transparent 7%),
    radial-gradient(circle at 55% 28%, rgba(90, 90, 80, .25) 0 5%, transparent 6%);
}
.fog {
  position: absolute; left: -50%; width: 200%; height: 60vh; opacity: .5;
  background:
    radial-gradient(ellipse 20% 40% at 10% 50%, rgba(160, 170, 165, .10), transparent 70%),
    radial-gradient(ellipse 25% 35% at 35% 60%, rgba(150, 160, 160, .08), transparent 70%),
    radial-gradient(ellipse 18% 30% at 60% 45%, rgba(170, 175, 170, .09), transparent 70%),
    radial-gradient(ellipse 22% 38% at 85% 55%, rgba(150, 160, 155, .08), transparent 70%);
  filter: blur(8px);
}
.fog-a { bottom: -10vh; animation: drift 80s linear infinite; }
.fog-b { bottom: 25vh; opacity: .3; animation: drift 120s linear infinite reverse; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(25%); } }

.bat { position: absolute; width: 40px; height: 20px; color: #2a1d27; opacity: 0; filter: drop-shadow(0 0 2px rgba(200, 180, 220, .15)); }
.bat-1 { top: 14vh; animation: fly 31s linear infinite 3s, flap .22s ease-in-out infinite alternate; }
.bat-2 { top: 24vh; width: 28px; height: 14px; animation: fly 43s linear infinite 17s, flap .18s ease-in-out infinite alternate; }
.bat-3 { top: 9vh; width: 22px; height: 11px; animation: fly 57s linear infinite 29s, flap .2s ease-in-out infinite alternate; }
@keyframes fly {
  0% { left: -6vw; opacity: 0; transform: translateY(0); }
  2% { opacity: .9; }
  8% { transform: translateY(-3vh); }
  14% { transform: translateY(2vh); }
  20% { left: 106vw; opacity: .9; transform: translateY(-2vh); }
  21%, 100% { left: 106vw; opacity: 0; }
}
@keyframes flap { from { scale: 1 1; } to { scale: 1 .45; } }

/* ------------------------------------------------------------ night scene (drawn by scene.ts) */

.scene-layer { position: absolute; left: 0; right: 0; bottom: 0; height: 44vh; min-height: 240px; max-height: 470px; }
.scene-layer svg { width: 100%; height: 100%; display: block; overflow: visible; }
.scene.far .hill, .scene.far .castle { fill: #1a1220; }
.scene.far .fwins rect { fill: #d08f42; opacity: .55; }
.scene.far .fwins .flick { animation: winflick 5s ease-in-out infinite; }
.scene .h1 { fill: #0c090e; }
.scene .h2 { fill: #110c13; }
.scene .timbers path { fill: none; stroke: #1b1318; stroke-width: 2; }
.scene .wins rect, .scene .wins circle:not(.wglow) { fill: #ffb54d; }
.scene .wglow { fill: url(#scene-wglow); }
.scene .flick { animation: winflick 4s ease-in-out infinite; }
@keyframes winflick { 0%, 100% { opacity: 1; } 40% { opacity: .55; } 45% { opacity: .9; } 60% { opacity: .3; } 72% { opacity: .85; } }
.scene .street, .scene .pole, .scene .table { fill: #08060a; }
.scene .smoke { fill: url(#scene-smoke); animation: smoke 6.3s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: .55; } 100% { opacity: 0; transform: translate(-18px, -72px) scale(3.2); } }
.scene .canopy { fill: #2a0e17; }
.scene .stripe { fill: #3d1521; }
.scene .lantern { animation: sway 3.4s ease-in-out infinite alternate; transform-box: view-box; }
@keyframes sway { from { rotate: -8deg; } to { rotate: 8deg; } }
.scene .lantern line { stroke: #0a0709; stroke-width: 1.5; }
.scene .lbody { fill: #2b1f12; }
.scene .lcore { fill: #ffd98a; }
.scene .lglow { fill: url(#scene-lglow); animation: lanternglow 2.2s ease-in-out infinite alternate; }
@keyframes lanternglow { to { opacity: .65; } }

.wisps { position: absolute; inset: 0; }
.wisp {
  position: absolute; bottom: -10px; width: var(--size); height: var(--size); border-radius: 50%;
  background: var(--c); box-shadow: 0 0 8px 2px var(--c); opacity: 0; animation: wisp linear infinite;
}
@keyframes wisp {
  0% { opacity: 0; transform: translate(0, 0); }
  10% { opacity: .8; }
  50% { transform: translate(var(--sway), -35vh); }
  85% { opacity: .45; }
  100% { opacity: 0; transform: translate(calc(var(--sway) * -.5), -72vh); }
}

.sky-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 90% 70% at 70% 0%, rgba(190, 205, 255, .45), rgba(160, 180, 255, .08) 60%, transparent 80%); }
.sky-flash.on { animation: lightning 1.4s ease-out; }
@keyframes lightning { 0% { opacity: 0; } 4% { opacity: 1; } 9% { opacity: .15; } 14% { opacity: .85; } 22% { opacity: .1; } 30% { opacity: .4; } 100% { opacity: 0; } }
.boom-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 60% 45% at 50% 100%, rgba(255, 120, 40, .42), rgba(125, 255, 155, .12) 50%, transparent 75%); }
.boom-flash.on { animation: boomflash 1.3s ease-out; }
@keyframes boomflash { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }
/* The final round: a blood-red sky. */
.blood-sky { position: absolute; inset: 0; opacity: 0; transition: opacity 4s; background: radial-gradient(ellipse 100% 70% at 50% 0%, rgba(150, 10, 20, .45), transparent 70%); }
body.final-round .blood-sky { opacity: 1; }
body.final-round .moon { background: radial-gradient(circle at 38% 35%, #ffa090, #c0392b 55%, #6e1010 100%); box-shadow: 0 0 60px 20px rgba(200, 40, 30, .25); }

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

.audio-ctl { display: inline-flex; align-items: center; gap: .3rem; }
.icon-toggle {
  position: relative; width: 32px; height: 30px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid rgba(176, 141, 87, .45); border-radius: 4px; color: var(--brass-hi);
}
.icon-toggle:hover { border-color: var(--brass); box-shadow: 0 0 10px rgba(176, 141, 87, .25); }
.icon-toggle .ic { width: 16px; height: 16px; vertical-align: 0; }
.icon-toggle.off { color: var(--muted); opacity: .65; }
.icon-toggle.off::after { content: ''; position: absolute; width: 22px; height: 2px; border-radius: 2px; background: var(--blood-hi); transform: rotate(-45deg); }
.audio-ctl input[type="range"] { width: 86px; padding: 0; border: none; box-shadow: none; background: transparent; accent-color: var(--blood-hi); cursor: pointer; }
.home-tools { display: flex; justify-content: flex-end; margin-bottom: -.6rem; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after { /* vignette */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 59;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

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

input, select {
  background: #0c090b;
  color: var(--text);
  border: 1px solid var(--iron);
  border-radius: 4px;
  padding: .55rem .75rem;
  font: inherit;
  width: 100%;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7);
}
input::placeholder { color: #6d6259; font-style: italic; }
input:focus, select:focus { outline: 1px solid var(--brass); border-color: var(--brass); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), 0 0 0 3px rgba(176, 141, 87, .15); }
select { width: auto; cursor: pointer; }

.btn {
  font-family: var(--f-head);
  font-size: 1.1rem;
  letter-spacing: .04em;
  border: 1px solid var(--iron-hi);
  background: linear-gradient(180deg, #2f262d 0%, #1a1418 100%);
  color: var(--text);
  padding: .45rem 1.05rem;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .08s, box-shadow .2s, border-color .2s, filter .2s;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 6px rgba(0, 0, 0, .6);
  text-shadow: 0 1px 2px #000;
}
.btn:hover:not(:disabled) { border-color: var(--brass); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 12px rgba(176, 141, 87, .25), 0 2px 6px rgba(0, 0, 0, .6); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
.btn.primary {
  background: radial-gradient(ellipse at 50% 0%, #c42a22 0%, #8a1512 55%, #4d0a09 100%);
  border-color: #d2463a;
  color: #fbe9d6;
  box-shadow: inset 0 1px 0 rgba(255, 200, 180, .25), 0 0 14px rgba(196, 42, 34, .35), 0 3px 8px rgba(0, 0, 0, .7);
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.15); box-shadow: inset 0 1px 0 rgba(255, 200, 180, .3), 0 0 22px rgba(230, 60, 40, .55), 0 3px 8px rgba(0, 0, 0, .7); }
.btn.ghost { background: transparent; border-color: rgba(176, 141, 87, .45); box-shadow: none; }
.btn.small { padding: .25rem .7rem; font-size: .98rem; }
.btn.xs { padding: .05rem .45rem; font-size: .82rem; }
.btn.big { padding: .7rem 1.4rem; font-size: 1.35rem; }
.btn kbd { font-family: var(--f-body); font-size: .72rem; opacity: .65; border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: 8px; vertical-align: 2px; }
.btn .ic { margin-right: .3em; }
.icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 0 .3rem; }
.icon-btn:hover { color: var(--danger); }

.row { display: flex; gap: .6rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.center { justify-content: center; flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; color: var(--muted); font-size: .95rem; cursor: pointer; }
.check input { width: auto; accent-color: var(--blood-hi); }
.field-label { display: block; font-family: var(--f-head); font-size: 1.15rem; color: var(--brass-hi); margin-bottom: .4rem; }

/* Panels: dark stone with brass corner brackets. */
.panel {
  position: relative;
  /* Slightly translucent so the night town shows through behind the game. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 30%),
    linear-gradient(180deg, rgba(22, 17, 22, .84) 0%, rgba(14, 10, 14, .9) 100%);
  border: 1px solid var(--iron);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .55), 0 10px 30px rgba(0, 0, 0, .55);
  min-width: 0;
}
.panel::before {
  content: ''; position: absolute; inset: 5px; pointer-events: none; opacity: .7;
  --c: var(--brass);
  background:
    linear-gradient(var(--c) 0 0) top left / 16px 1px no-repeat,
    linear-gradient(var(--c) 0 0) top left / 1px 16px no-repeat,
    linear-gradient(var(--c) 0 0) top right / 16px 1px no-repeat,
    linear-gradient(var(--c) 0 0) top right / 1px 16px no-repeat,
    linear-gradient(var(--c) 0 0) bottom left / 16px 1px no-repeat,
    linear-gradient(var(--c) 0 0) bottom left / 1px 16px no-repeat,
    linear-gradient(var(--c) 0 0) bottom right / 16px 1px no-repeat,
    linear-gradient(var(--c) 0 0) bottom right / 1px 16px no-repeat;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.panel-head h2, .panel-head h3 { margin: 0; }

.tag { font-family: var(--f-body); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; border-radius: 3px; padding: 1px 6px; background: #0c090b; color: var(--muted); border: 1px solid var(--iron); white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; }
.tag.host { color: var(--brass-hi); border-color: rgba(176, 141, 87, .5); }
.tag.bot { color: #bfe3ee; border-color: rgba(166, 227, 255, .3); }
.tag.off { color: var(--danger); border-color: rgba(224, 71, 63, .4); }
.pill { font-size: .8rem; font-weight: 700; padding: 1px 10px; border-radius: 999px; background: #0c090b; border: 1px solid var(--iron); white-space: nowrap; letter-spacing: .04em; }
.pill.waiting { color: var(--witch); border-color: rgba(125, 255, 155, .3); }
.pill.playing { color: var(--warn); }
.badge { background: var(--blood-hi); color: white; border-radius: 999px; font-family: var(--f-body); font-size: .72rem; padding: 0 6px; margin-left: 4px; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; box-shadow: 0 0 0 2px #000, 0 0 8px currentColor; }

/* ------------------------------------------------------------ chips (HTML) */

.chip {
  --size: 30px;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-family: var(--f-body); font-weight: 700; font-size: calc(var(--size) * .52);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
  box-shadow:
    inset 0 0 0 calc(var(--size) * .09) rgba(0, 0, 0, .22),
    inset 0 -3px 0 rgba(0, 0, 0, .3),
    inset 0 2px 0 rgba(255, 255, 255, .2),
    0 2px 4px rgba(0, 0, 0, .7);
  flex: none;
  vertical-align: middle;
}
.chip.xs { --size: 19px; }
.chip.sm { --size: 25px; }
.chip.lg { --size: 50px; }
.chip.c-white { background: radial-gradient(circle at 40% 35%, #fbf6ea, var(--c-white) 60%, #bdb29b); color: #2b241c; text-shadow: none; }
.chip.c-orange { background: radial-gradient(circle at 40% 35%, #f0a050, var(--c-orange) 60%, #8f4a0e); color: #2a1404; text-shadow: none; }
.chip.c-green { background: radial-gradient(circle at 40% 35%, #4fb46e, var(--c-green) 60%, #17502a); }
.chip.c-red { background: radial-gradient(circle at 40% 35%, #dc4a40, var(--c-red) 60%, #5e0f0b); }
.chip.c-blue { background: radial-gradient(circle at 40% 35%, #5585d6, var(--c-blue) 60%, #173569); }
.chip.c-yellow { background: radial-gradient(circle at 40% 35%, #f0cd58, var(--c-yellow) 60%, #7d5f0b); color: #2a1f02; text-shadow: none; }
.chip.c-purple { background: radial-gradient(circle at 40% 35%, #a05cc0, var(--c-purple) 60%, #3d1a50); }
.chip.c-black { background: radial-gradient(circle at 40% 35%, #47424c, var(--c-black) 60%, #000); box-shadow: inset 0 0 0 1px #6b6370, inset 0 -3px 0 rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .7); }
.chip-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1px #000; }
.chip-dot.c-white { background: var(--c-white); } .chip-dot.c-orange { background: var(--c-orange); }
.chip-dot.c-green { background: var(--c-green); } .chip-dot.c-red { background: var(--c-red); }
.chip-dot.c-blue { background: var(--c-blue); } .chip-dot.c-yellow { background: var(--c-yellow); }
.chip-dot.c-purple { background: var(--c-purple); } .chip-dot.c-black { background: var(--c-black); box-shadow: 0 0 0 1px #6b6370; }

/* ------------------------------------------------------------ home */

.home { max-width: 920px; margin: 0 auto; padding: 1.5rem 16px 3rem; display: grid; gap: 1.1rem; }
.hero { display: flex; align-items: center; gap: 1.4rem; padding: 1.2rem 0 .4rem; }
.hero h1 {
  margin: 0; font-family: var(--f-title); font-size: clamp(2.1rem, 7vw, 4rem); line-height: 1.05;
  color: #efe3cc;
  text-shadow: 0 0 1px #000, 0 3px 0 #3a0806, 0 0 24px rgba(192, 57, 43, .45), 0 0 60px rgba(125, 20, 20, .5);
}
.hero-sub { font-family: var(--f-head); color: var(--brass); letter-spacing: .12em; font-size: 1.05rem; margin-top: .2rem; }
.hero-pot svg { width: 150px; height: 132px; display: block; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .8)); }
.tagline { color: var(--muted); margin: .3rem 0 0; font-style: italic; font-size: 1.08rem; }
.hp-vapor path { opacity: 0; animation: vapor 5s ease-in-out infinite; }
.hp-vapor .v2 { animation-delay: 1.7s; }
.hp-vapor .v3 { animation-delay: 3.3s; }
@keyframes vapor { 0% { opacity: 0; transform: translateY(6px); } 35% { opacity: .55; } 100% { opacity: 0; transform: translateY(-16px); } }
.hp-fire { transform-box: fill-box; transform-origin: 50% 100%; animation: fire .9s ease-in-out infinite alternate; }
@keyframes fire { from { transform: scaleY(.88) skewX(-3deg); } to { transform: scaleY(1.08) skewX(3deg); } }
.hp-bub { animation: hpbub 2.4s ease-in infinite; transform-box: fill-box; transform-origin: center; }
.hp-bub.b2 { animation-delay: 1.1s; }
@keyframes hpbub { 0% { scale: .2; opacity: 0; } 50% { opacity: .85; } 100% { scale: 1.5; opacity: 0; } }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.home-grid .panel { display: flex; flex-direction: column; gap: .65rem; }
.home-grid .panel .btn { align-self: flex-start; }
.code-input { text-transform: uppercase; letter-spacing: .4em; font-family: var(--f-head); font-size: 1.5rem; max-width: 10rem; padding: .3rem .7rem; }
.lobby-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .65rem 0; border-top: 1px solid rgba(90, 74, 82, .5); flex-wrap: wrap; }
.lobby-row:first-child { border-top: none; }
.lobby-row b { font-family: var(--f-head); font-weight: 400; font-size: 1.2rem; color: var(--text); }
.lobby-row-right { display: flex; align-items: center; gap: .5rem; }
.how ol { margin: 0; padding-left: 1.4rem; display: grid; gap: .45rem; color: #d8cdbb; }
.how ol li::marker { font-family: var(--f-head); color: var(--blood-hi); }
.how b { color: var(--brass-hi); }

/* ------------------------------------------------------------ top bar */

.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem 16px;
  background: linear-gradient(180deg, rgba(8, 6, 8, .95), rgba(14, 10, 13, .85));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--iron);
  box-shadow: 0 1px 0 rgba(176, 141, 87, .25), 0 6px 20px rgba(0, 0, 0, .6);
  position: sticky; top: 0; z-index: 20;
  flex-wrap: wrap;
}
.brand { color: var(--brass-hi); font-size: 1.5rem; display: flex; align-items: center; gap: .35rem; text-shadow: 0 0 12px rgba(176, 141, 87, .35); }
.brand .ic { color: var(--brass); width: 1.2em; height: 1.2em; }
.lobby-title { flex: 1; display: flex; align-items: center; gap: .7rem; min-width: 0; }
.lobby-title b { font-family: var(--f-head); font-weight: 400; font-size: 1.3rem; }
.code-tag { font-family: var(--f-head); letter-spacing: .3em; background: #0c090b; border: 1px solid rgba(176, 141, 87, .5); padding: 0 6px 0 10px; border-radius: 3px; color: var(--brass-hi); font-size: 1.15rem; }
.top-right { display: flex; gap: .4rem; margin-left: auto; }

/* ------------------------------------------------------------ lobby */

.lobby-screen .lobby-grid { max-width: 1240px; margin: 1.1rem auto; padding: 0 16px; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 1.1rem; align-items: start; }
.member {
  display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border-radius: 4px; margin-bottom: .45rem; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(255, 255, 255, .03), transparent), #0e0a0d; border: 1px solid #2a2027;
}
.member.me { border-color: rgba(176, 141, 87, .55); }
.member.empty { color: #6d6259; border: 1px dashed #3a2f36; background: transparent; justify-content: center; font-style: italic; }
.m-name { flex: 1; min-width: 6rem; font-weight: 700; font-size: 1.05rem; }
.m-ready { font-size: .85rem; color: var(--muted); font-style: italic; }
.m-ready.ok { color: var(--witch); font-style: normal; }
.lobby-actions { display: grid; gap: .75rem; margin-top: .9rem; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #000; cursor: pointer; box-shadow: 0 0 0 1px var(--iron); }
.swatch.sel { box-shadow: 0 0 0 2px var(--brass-hi), 0 0 12px var(--brass); }
.swatch:disabled { opacity: .18; cursor: not-allowed; }
.invite { display: grid; gap: .3rem; }
.custom-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; margin: .7rem 0; }
.custom-sets label { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-size: .98rem; }
.book-preview { display: grid; gap: .55rem; margin-top: .8rem; }
.book {
  background: linear-gradient(180deg, #1a1419, #0f0b0e); border: 1px solid #30252d; border-left: 3px solid var(--book-c, var(--brass));
  border-radius: 4px; padding: .6rem .75rem; margin-bottom: .5rem;
}
.book.locked { opacity: .55; }
.book p { margin: .35rem 0 0; font-size: .95rem; color: #d3c8b6; }
.book-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.book-head b { font-family: var(--f-head); font-weight: 400; font-size: 1.15rem; }
.prices { display: flex; gap: .8rem; margin-top: .35rem; flex-wrap: wrap; }
.price { display: inline-flex; align-items: center; gap: .3rem; font-size: .95rem; }
.price b { color: var(--brass-hi); }

.chat-panel { display: flex; flex-direction: column; }
.chat-log { height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; padding-right: .3rem; }
.chat-line { font-size: .98rem; overflow-wrap: anywhere; }
.chat-line b { font-family: var(--f-head); font-weight: 400; font-size: 1.05rem; margin-right: .2rem; }
.chat-line.system { color: #8d8276; font-style: italic; font-size: .92rem; }
.chat-form { display: flex; gap: .5rem; margin-top: .6rem; }

/* ------------------------------------------------------------ game layout */

.game-grid {
  max-width: 1520px; margin: 0 auto; padding: 1.1rem 16px 2rem;
  display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 1.1rem; align-items: start;
}
.my-area, .side { display: grid; gap: 1.1rem; min-width: 0; }

/* Round track: a row of candles. Past rounds are burnt down, the current one is lit. */
.round-track { display: flex; align-items: flex-end; gap: .35rem; flex-wrap: wrap; }
.candle { position: relative; width: 22px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.wax {
  position: relative; width: 16px; height: 26px; border-radius: 3px 3px 2px 2px;
  background: linear-gradient(90deg, #a99a7d, #efe5cf 40%, #d5c7a8 70%, #9d8e72);
  color: #3c2d1d; font-family: var(--f-body); font-weight: 700; font-size: .72rem;
  display: grid; place-items: end center; padding-bottom: 1px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .6);
}
.wax::before { content: ''; position: absolute; top: -4px; left: 50%; width: 1.5px; height: 5px; background: #1b1410; transform: translateX(-50%); }
.wax::after { content: ''; position: absolute; top: 0; left: 3px; width: 4px; height: 7px; border-radius: 0 0 3px 3px; background: #f3ead6; opacity: .8; }
.candle.past .wax { height: 12px; opacity: .45; }
.candle.past .wax::after { display: none; }
.candle.future .wax { opacity: .75; }
.candle.now .wax { box-shadow: 0 2px 3px rgba(0, 0, 0, .6), 0 0 16px 4px rgba(255, 170, 70, .35); }
.flame { display: none; }
.candle.now .flame {
  display: block; position: absolute; bottom: 28px; left: 50%; width: 9px; height: 15px; margin-left: -4.5px;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 75%, #fffbe6 0%, #ffd27a 30%, #ff8a2b 62%, rgba(255, 80, 0, 0) 75%);
  box-shadow: 0 0 10px 3px rgba(255, 150, 50, .55), 0 0 26px 8px rgba(255, 120, 40, .22);
  transform-origin: 50% 90%;
  animation: flicker 1.6s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { transform: scale(1, 1) rotate(-1deg); opacity: 1; }
  20% { transform: scale(.92, 1.08) rotate(2deg); }
  40% { transform: scale(1.05, .94) rotate(-2deg); opacity: .9; }
  60% { transform: scale(.96, 1.1) rotate(1deg); }
  80% { transform: scale(1.03, .97) rotate(-1.5deg); opacity: .95; }
}
.candle .mark { position: absolute; bottom: -7px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #000; }
.m-yellow { background: var(--c-yellow); } .m-purple { background: var(--c-purple); }
.m-white { background: var(--c-white); } .m-final { background: var(--blood-hi); box-shadow: 0 0 6px var(--blood-hi); }
.phase-name { margin-left: .9rem; font-family: var(--f-head); color: var(--brass-hi); font-size: 1.25rem; align-self: center; text-shadow: 0 0 10px rgba(176, 141, 87, .4); }

/* Fortune teller card, styled like a tarot card. */
.fortune {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; align-items: center;
  border-radius: 6px; padding: .9rem 1.1rem; border: 1px solid rgba(176, 141, 87, .7);
  box-shadow: inset 0 0 0 4px #0a0809, inset 0 0 0 5px rgba(176, 141, 87, .35), inset 0 0 40px rgba(0, 0, 0, .6), 0 10px 26px rgba(0, 0, 0, .6);
}
.fortune.purple { background: radial-gradient(ellipse at 15% 50%, #3b1a48 0%, #1d0e25 55%, #0f0813 100%); --sigil: #c79bff; }
.fortune.blue { background: radial-gradient(ellipse at 15% 50%, #123446 0%, #0b1c27 55%, #060e14 100%); --sigil: #7fd8ff; }
.fortune.fresh { animation: cardIn 1s ease-out; }
.fortune-sigil {
  grid-row: span 3; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(176, 141, 87, .6); background: radial-gradient(circle, rgba(255, 255, 255, .06), transparent 70%);
  color: var(--sigil); box-shadow: 0 0 18px color-mix(in srgb, var(--sigil) 35%, transparent), inset 0 0 12px rgba(0, 0, 0, .7);
}
.fortune-sigil .ic { width: 34px; height: 34px; filter: drop-shadow(0 0 6px var(--sigil)); animation: gaze 6s ease-in-out infinite; }
@keyframes gaze { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-2px); } 60% { transform: translateX(2px); } }
.fortune-kind { font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; color: var(--brass); font-weight: 700; }
.fortune-name { font-family: var(--f-head); font-size: 1.6rem; line-height: 1.1; color: #f2e6cf; text-shadow: 0 0 14px color-mix(in srgb, var(--sigil) 45%, transparent); }
.fortune-text { font-size: 1.05rem; color: #d9cfbf; font-style: italic; }
@keyframes cardIn { 0% { transform: rotateY(90deg) scale(.92); opacity: 0; filter: brightness(2); } 60% { transform: rotateY(-8deg); opacity: 1; } 100% { transform: none; filter: none; } }

.status-row { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; margin-bottom: .7rem; }
.stat { font-size: 1.05rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
.stat b { color: var(--brass-hi); font-size: 1.15rem; }
.stat.dim { opacity: .55; }

.cauldron-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 1rem; align-items: center; }
.my-pot { display: grid; place-items: center; }
.my-pot svg { width: 100%; max-width: 580px; height: auto; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .8)); }
.my-side { display: grid; gap: .65rem; align-content: start; }
.cauldron-panel { background: radial-gradient(ellipse at 40% 45%, rgba(63, 174, 106, .09), transparent 60%), linear-gradient(180deg, rgba(22, 17, 22, .84) 0%, rgba(14, 10, 14, .9) 100%); }
.cauldron-panel.boom { animation: shake .55s; }
.cauldron-panel.boom::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none; animation: redflash .9s ease-out; }
@keyframes redflash { from { background: rgba(220, 40, 20, .35); } to { background: transparent; } }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); }
}

.meter-label { font-size: 1rem; margin-bottom: .3rem; display: flex; align-items: center; gap: .35rem; }
.meter { height: 12px; background: #050405; border-radius: 2px; overflow: hidden; border: 1px solid var(--iron); box-shadow: inset 0 2px 4px #000; position: relative; }
.meter::after { /* notch for each point up to the limit */
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--steps, 7) - 1px), rgba(0, 0, 0, .7) calc(100% / var(--steps, 7) - 1px) calc(100% / var(--steps, 7)));
}
.meter-fill { height: 100%; background: linear-gradient(90deg, #8d846f, #e8dcc2); transition: width .35s; }
.meter-fill.warn { background: linear-gradient(90deg, #a5551c, var(--warn)); box-shadow: 0 0 10px rgba(227, 162, 72, .6); }
.meter-fill.bad { background: linear-gradient(90deg, #6e0f0b, var(--danger)); box-shadow: 0 0 12px rgba(224, 71, 63, .8); }
.odds { font-size: .95rem; color: var(--muted); }
.odds.warn b { color: var(--warn); }
.odds.bad b { color: var(--danger); }
.side-note { font-size: .95rem; color: #d3c8b6; background: #0c090b; padding: .45rem .65rem; border-radius: 3px; border-left: 2px solid var(--iron-hi); display: flex; gap: .4rem; align-items: flex-start; }
.side-note .ic { margin-top: .15em; }
.field-box, .ev-box { background: #0c090b; border-radius: 3px; padding: .55rem .75rem; border: 1px solid var(--iron); }
.field-vals { display: flex; gap: 1rem; font-weight: 700; font-size: 1.2rem; color: var(--brass-hi); }
.field-vals span { display: inline-flex; align-items: center; gap: .3rem; }

.action-panel { margin-top: .9rem; border-top: 1px solid var(--iron); padding-top: 1rem; min-height: 64px; position: relative; }
.action-panel::before { content: ''; position: absolute; top: -1px; left: 0; width: 120px; height: 1px; background: linear-gradient(90deg, var(--brass), transparent); }
.brew-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.prompt { font-size: 1.12rem; font-weight: 600; margin-bottom: .65rem; color: #efe3cc; }
.options { display: flex; flex-wrap: wrap; gap: .55rem; }
.info { color: var(--text); display: grid; gap: .3rem; font-size: 1.05rem; }
.info .lead { font-style: italic; display: flex; gap: .45rem; align-items: center; }
.pick-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .75rem; }
.chip-btn { background: #0c090b; border: 1px solid var(--iron); border-radius: 50%; padding: .35rem; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.chip-btn:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--brass); box-shadow: 0 0 16px rgba(125, 255, 155, .3); }
.chip-btn:disabled { opacity: .3; cursor: not-allowed; }

.shop { display: grid; gap: .3rem; margin-bottom: .8rem; }
.shop-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .35rem 0; border-bottom: 1px solid rgba(90, 74, 82, .35); }
.shop-row.locked { opacity: .45; }
.shop-name { width: 12rem; font-family: var(--f-head); font-size: 1.12rem; display: flex; align-items: center; }
.shop-items { display: flex; gap: .45rem; flex-wrap: wrap; }
.shop-item {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #0c090b; border: 1px solid var(--iron); border-radius: 999px;
  padding: .22rem .65rem .22rem .25rem; color: var(--text); font: inherit; font-weight: 700; cursor: pointer;
}
.shop-item:hover:not(:disabled) { border-color: var(--brass); }
.shop-item.sel { border-color: var(--brass-hi); background: #2a1c10; box-shadow: 0 0 12px rgba(220, 189, 132, .35); }
.shop-item:disabled { opacity: .3; cursor: not-allowed; }
.shop-item .cost { color: var(--brass-hi); display: inline-flex; align-items: center; gap: .15rem; }
.shop-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }

.bag { display: flex; flex-wrap: wrap; gap: .55rem .9rem; }
.bag-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .95rem; font-weight: 700; }
.bag-item.out { opacity: .4; }

/* Opponents: nameplates with a mini cauldron. */
.players { display: grid; gap: .65rem; }
.pcard {
  border: 1px solid #2c2229; border-left: 3px solid var(--pc); border-radius: 4px; padding: .55rem .7rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 9%, transparent), transparent 45%), #0d0a0c;
}
.pcard.me { border-color: rgba(176, 141, 87, .5); border-left-color: var(--pc); }
.pcard-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pname { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-head); font-weight: 400; font-size: 1.2rem; }
.pstatus { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--muted); letter-spacing: .03em; display: inline-flex; align-items: center; gap: .25rem; }
.pstatus.busy { color: var(--witch); }
.pstatus.busy::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; animation: blink 1.2s infinite; }
.pstatus.bad { color: var(--danger); }
@keyframes blink { 50% { opacity: .15; } }
.pcard-body { display: grid; grid-template-columns: 140px 1fr; gap: .7rem; align-items: center; margin-top: .4rem; }
.mini-pot svg { width: 140px; height: 140px; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .8)); }
.pstats { font-size: .95rem; display: grid; gap: .12rem; }
.pstats > div { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.pstats b { color: var(--brass-hi); }

/* tabs */
.tabs-panel { padding: 0; overflow: hidden; }
.tabs { display: flex; border-bottom: 1px solid var(--iron); background: #0b080a; }
.tabs button { flex: 1; background: none; border: none; color: var(--muted); font-family: var(--f-head); font-size: 1.12rem; padding: .55rem .3rem; cursor: pointer; border-bottom: 2px solid transparent; }
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--brass-hi); border-bottom-color: var(--blood-hi); text-shadow: 0 0 10px rgba(176, 141, 87, .4); }
.tab-body { padding: .85rem 1.1rem; max-height: 440px; overflow-y: auto; }
#tab-chat { overflow: visible; max-height: none; }
#tab-chat .chat-log { height: 300px; }
.log-round { font-family: var(--f-head); color: var(--brass); font-size: 1.05rem; margin: .7rem 0 .2rem; border-bottom: 1px solid rgba(176, 141, 87, .25); }
.log-line { font-size: .94rem; padding: .1rem 0; color: #cfc4b2; }
.log-line.boom { color: #ff9a7a; }
.log-line.die { color: var(--brass-hi); }
.log-line.end { color: var(--witch); font-weight: 700; }
table.scores { width: 100%; border-collapse: collapse; font-size: .95rem; }
.scores th, .scores td { padding: .32rem .35rem; text-align: center; border-bottom: 1px solid rgba(90, 74, 82, .35); }
.scores th { font-family: var(--f-head); font-weight: 400; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; max-width: 6rem; white-space: nowrap; }
.scores td .ic { width: .9em; height: .9em; }
.scores tr.total td { border-top: 2px solid var(--brass); font-size: 1.1rem; color: var(--brass-hi); }

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

svg.pot .pot-outer { fill: url(#iron-grad); stroke: #000; stroke-width: 2; }
svg.pot .pot-lip { fill: none; stroke: #5d5560; stroke-width: 2; opacity: .6; }
svg.pot .rivet { fill: #5c4f3f; stroke: #000; stroke-width: .8; }
svg.pot .pot-shade { fill: url(#shade-grad); pointer-events: none; }
svg.pot .track-line { fill: none; stroke: rgba(0, 0, 0, .55); stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; }
svg.pot .space-bg { fill: url(#space-grad); stroke: #4e3c29; stroke-width: 1.3; }
svg.pot .space-bg.has-ruby { stroke: #9b1c1c; stroke-width: 2.2; }
svg.pot .spoon { fill: url(#spoon-grad); stroke: #3d2a0c; stroke-width: 1.5; }
svg.pot text { text-anchor: middle; font-family: 'Crimson Pro', Georgia, serif; pointer-events: none; }
svg.pot .coin { font-size: 12.5px; font-weight: 700; fill: var(--ink); }
svg.pot .vp { font-size: 7px; font-weight: 700; fill: #6e4f17; }
svg.pot .ruby { fill: #d4232f; stroke: #4a0508; stroke-width: .8; }
svg.pot .drop-glow { fill: rgba(166, 227, 255, .22); }
svg.pot .droplet { fill: var(--ghost); stroke: #0e3550; stroke-width: 1.5; }
svg.pot .rat-bg { fill: #2c2018; stroke: #8a6a48; stroke-width: 1.5; }
svg.pot .rat-ic { color: #d8c3a2; }
svg.pot .chip-c { stroke: rgba(0, 0, 0, .75); stroke-width: 1.5; }
svg.pot .chip-ring { fill: none; stroke: rgba(0, 0, 0, .28); stroke-width: 1.4; }
svg.pot .chip-c.c-white { fill: var(--c-white); } svg.pot .chip-c.c-orange { fill: var(--c-orange); }
svg.pot .chip-c.c-green { fill: var(--c-green); } svg.pot .chip-c.c-red { fill: var(--c-red); }
svg.pot .chip-c.c-blue { fill: var(--c-blue); } svg.pot .chip-c.c-yellow { fill: var(--c-yellow); }
svg.pot .chip-c.c-purple { fill: var(--c-purple); } svg.pot .chip-c.c-black { fill: var(--c-black); stroke: #6b6370; }
svg.pot .chip-t { font-size: 15px; font-weight: 700; fill: #fff; }
svg.pot .chip-t.dark { fill: #241b12; }
svg.pot .chip-g.last .chip-c { stroke: var(--witch); stroke-width: 2.5; }
svg.pot .chip-g.last .chip-glow { fill: rgba(125, 255, 155, .25); }
svg.pot .pop { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: center; }
@keyframes pop { 0% { opacity: 0; scale: .2; } 100% { opacity: 1; scale: 1; } }
svg.pot .field-glow { fill: rgba(125, 255, 155, .16); }
svg.pot .field-ring { fill: none; stroke: var(--witch); stroke-width: 2.5; stroke-dasharray: 4 3; animation: spin 7s linear infinite; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 3px var(--witch)); }
@keyframes spin { to { rotate: 360deg; } }
svg.pot .bubble { fill: rgba(170, 255, 190, .4); stroke: rgba(210, 255, 220, .75); stroke-width: 1; animation: bubble 4.5s ease-in infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bubble { 0% { opacity: 0; scale: .3; } 15% { opacity: 1; } 75% { opacity: .9; scale: 1; } 85% { opacity: 0; scale: 1.5; } 100% { opacity: 0; } }
svg.pot .boom-outer { fill: #ff5a1f; opacity: .55; animation: throb 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
svg.pot .boom-inner { fill: #ffd27a; opacity: .6; animation: throb 1.2s ease-in-out infinite reverse; transform-box: fill-box; transform-origin: center; }
@keyframes throb { 50% { scale: 1.08; } }
svg.pot.mini .space-bg { stroke-width: 0; }
svg.pot.mini .chip-t { font-size: 16px; }

/* ------------------------------------------------------------ overlay */

.modal-back { position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(30, 6, 8, .78), rgba(0, 0, 0, .92)); display: grid; place-items: center; z-index: 50; padding: 16px; animation: fadeIn .6s; }
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  position: relative; background: linear-gradient(180deg, #19121a, #0d090c); border: 1px solid var(--brass); border-radius: 6px;
  padding: 1.6rem 1.5rem; width: min(680px, 100%); max-height: 92vh; overflow-y: auto; display: grid; gap: 1rem;
  box-shadow: inset 0 0 0 5px #0a0809, inset 0 0 0 6px rgba(176, 141, 87, .4), 0 0 60px rgba(125, 20, 20, .45), 0 30px 80px #000;
}
.modal h2 { text-align: center; font-family: var(--f-title); font-size: 2.3rem; color: #efe3cc; text-shadow: 0 0 20px rgba(192, 57, 43, .55); }
.modal h2::after { background: linear-gradient(90deg, transparent, var(--brass), transparent); }
.modal .epitaph { text-align: center; color: var(--muted); font-style: italic; margin-top: -.6rem; }
.ranking { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.ranking li { display: flex; align-items: center; gap: .65rem; background: #0c090b; border: 1px solid #2c2229; border-radius: 4px; padding: .55rem .85rem; flex-wrap: wrap; }
.ranking li b { font-family: var(--f-head); font-weight: 400; font-size: 1.3rem; }
.ranking li.winner { background: linear-gradient(90deg, rgba(125, 20, 20, .45), #0c090b 70%); border-color: var(--brass); box-shadow: 0 0 18px rgba(192, 57, 43, .3); }
.seal {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-family: var(--f-head); font-size: 1rem; color: #f3d9c4;
  background: radial-gradient(circle at 40% 35%, #c2382c, #7a1210 60%, #3e0706);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25), 0 2px 6px #000;
}
.ranking li:not(.winner) .seal { background: radial-gradient(circle at 40% 35%, #5a4a52, #2b2228 60%, #120e11); color: var(--muted); }
.rank-score { margin-left: auto; font-weight: 700; color: var(--brass-hi); font-size: 1.15rem; }

/* toasts + banner */
#toasts { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); display: grid; gap: .5rem; z-index: 100; width: min(440px, calc(100% - 32px)); pointer-events: none; }
.toast {
  background: linear-gradient(180deg, #1d151c, #110c10); border: 1px solid var(--brass); padding: .6rem 1rem; border-radius: 4px;
  box-shadow: 0 10px 30px #000c; text-align: center; animation: toastIn .3s ease-out; transition: opacity .4s, transform .4s; font-size: 1.05rem;
}
.toast.error { border-color: var(--blood-hi); box-shadow: 0 0 20px rgba(192, 57, 43, .45), 0 10px 30px #000c; }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px); } }
#conn-banner { position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(90deg, #4d0a09, #8a1512, #4d0a09); color: #fbe9d6; text-align: center; padding: .35rem; font-family: var(--f-head); font-size: 1.1rem; letter-spacing: .05em; z-index: 200; }
.autopilot-btn { margin-left: auto; }

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

@media (max-width: 1100px) {
  .game-grid { grid-template-columns: minmax(0, 1fr); }
  .lobby-screen .lobby-grid { grid-template-columns: 1fr 1fr; }
  .lobby-screen .chat-panel { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .home-grid, .lobby-screen .lobby-grid { grid-template-columns: 1fr; }
  .cauldron-wrap { grid-template-columns: 1fr; }
  .hero { gap: .8rem; }
  .hero-pot svg { width: 92px; height: 82px; }
  .moon { top: 10px; right: 10px; width: 50px; height: 50px; opacity: .45; }
  .audio-ctl input[type="range"] { display: none; }
  .home-tools { justify-content: flex-start; margin-bottom: 0; }
  .shop-name { width: 100%; }
  .pcard-body { grid-template-columns: 110px 1fr; }
  .mini-pot svg { width: 110px; height: 110px; }
  .btn.big { padding: .6rem 1rem; font-size: 1.2rem; flex: 1; }
  .candle { width: 18px; }
  .wax { width: 13px; }
  .game-top .brand { display: none; }
  .phase-name { margin-left: .4rem; font-size: 1.1rem; }
  .fortune { grid-template-columns: 1fr; }
  .fortune-sigil { display: none; }
  /* Keep Draw / Stop reachable while looking at the cauldron on a phone. */
  .action-panel { position: sticky; bottom: 0; z-index: 5; background: linear-gradient(180deg, #19121a, #100c10); margin: .8rem -1.15rem -1.1rem; padding: .8rem 1.15rem 1rem; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 -10px 18px rgba(0, 0, 0, .55); }
  .cauldron-wrap { gap: .6rem; }
}

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