/* ============================================================
   PACK #2 MECHANICS — styling for the nine "more mechanics".
   Light-Bender · Possessed Ally · Breath Meter · Spectral Guide ·
   Bonds · Ritual + Phase Totems · The Wager · Alchemy Sequence.
   Reuses Torchlit tokens (HSL vars, .liquid-glass, Cinzel/Inter,
   .display, .gold, Embers). Built one mechanic per section.
   ============================================================ */

/* ============================================================
   1 — THE LIGHT-BENDER  (beam-redirection takeover)
   ============================================================ */
.main-screen.lb-mode .scene-grad { z-index: 1; }

.lb-stage {
  position: absolute; inset: 0; z-index: 24;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.5rem, 1.6vh, 1.1rem);
  padding: clamp(150px, 18vh, 184px) clamp(1rem, 3vw, 2.4rem) clamp(18px, 3vh, 30px);
  overflow: hidden;
}
.lb-stage::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, hsl(var(--primary) / .07), transparent 62%);
}
.lb-stage.is-complete { animation: lb-flare 1s ease-out 2; }
@keyframes lb-flare {
  0%,100% { filter: drop-shadow(0 0 10px hsl(var(--primary) / .4)); }
  50%     { filter: drop-shadow(0 0 44px hsl(var(--primary) / .9)); }
}

.lb-titlebar { position: relative; z-index: 2; text-align: center; }
.lb-title { font-size: clamp(1.5rem, 3.2vw, 2.5rem); color: hsl(var(--foreground)); letter-spacing: .07em; }
.lb-sub { margin-top: .25rem; font-size: clamp(.74rem, 1.4vw, .95rem); color: hsl(var(--muted-foreground)); letter-spacing: .03em; }

.lb-board { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; place-items: center; width: 100%; }
.lb-svg {
  width: min(78vh, 92vw, 760px); height: min(78vh, 92vw, 760px); max-width: 100%;
  border-radius: 20px; overflow: visible;
  filter: drop-shadow(0 18px 50px rgba(0,0,0,.55));
}
.lb-chamber {
  fill: hsl(var(--surface) / .35); stroke: hsl(var(--border) / .7); stroke-width: .5;
  rx: 3;
}

/* the traced beam */
.beam {
  fill: none; stroke: hsl(var(--primary)); stroke-width: .8;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 2.4px hsl(var(--primary)));
  stroke-dasharray: 3 2.4; animation: lb-beam-flow 1s linear infinite; opacity: .92;
}
@keyframes lb-beam-flow { to { stroke-dashoffset: -5.4; } }
.beam.stray {
  stroke: hsl(var(--damage)); stroke-width: .9; opacity: .6;
  stroke-dasharray: 2 2.2; animation: lb-beam-flow .9s linear infinite;
  filter: drop-shadow(0 0 2px hsl(var(--damage) / .7));
}
.beam.true {
  stroke: #fff3d6; stroke-width: 1.2; opacity: 1;
  stroke-dasharray: none; animation: none;
  filter: drop-shadow(0 0 4px hsl(var(--primary))) drop-shadow(0 0 9px hsl(var(--primary) / .8));
}

/* emitter */
.lb-emit-core { fill: #fff3d6; filter: drop-shadow(0 0 3px hsl(var(--primary))); }
.lb-emit-halo { fill: hsl(var(--primary) / .2); animation: lb-emit-pulse 2.4s ease-in-out infinite; }
@keyframes lb-emit-pulse { 0%,100% { opacity: .45; } 50% { opacity: .9; } }

/* target receptacle */
.lb-target-tol { fill: hsl(var(--foreground) / .05); stroke: hsl(var(--foreground) / .3); stroke-width: .35; stroke-dasharray: 1.4 1.2; }
.lb-target-core { fill: hsl(var(--muted-foreground)); transition: fill .3s; }
.target.hit .lb-target-tol { fill: url(#lb-target-grad); stroke: hsl(var(--primary)); animation: lb-target-spin 7s linear infinite; transform-box: fill-box; transform-origin: center; }
.target.hit .lb-target-core { fill: #fff3d6; filter: drop-shadow(0 0 4px hsl(var(--primary))); }
@keyframes lb-target-spin { to { transform: rotate(360deg); } }

/* mirrors */
.lb-mirror-line { stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; opacity: .55; transition: opacity .25s; filter: drop-shadow(0 0 1px currentColor); }
.lb-mirror-pivot { fill: hsl(var(--background)); stroke: currentColor; stroke-width: .5; }
.mirror.lit .lb-mirror-line { opacity: 1; stroke-width: 1.7; filter: drop-shadow(0 0 2.5px currentColor) drop-shadow(0 0 5px currentColor); }
.mirror.break .lb-mirror-line { stroke: hsl(var(--damage)); opacity: 1; stroke-width: 1.8; filter: drop-shadow(0 0 3px hsl(var(--damage))); animation: lb-break-pulse 1s ease-in-out infinite; }
@keyframes lb-break-pulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
.lb-mirror-hint { stroke: hsl(var(--foreground)); stroke-width: 2; stroke-linecap: round; opacity: 0; animation: lb-mhint 2.4s ease-out; }
@keyframes lb-mhint { 0%,100% { opacity: 0; } 14%,60% { opacity: .6; } }

/* HUD */
.lb-hud { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .55rem; width: min(94%, 860px); }
.lb-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .8rem; }
.lb-leg { display: flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: 999px;
  background: hsl(var(--surface) / .5); border: 1px solid hsl(var(--border) / .6); opacity: .65; transition: opacity .25s, box-shadow .25s; }
.lb-leg.lit { opacity: 1; box-shadow: 0 0 0 1px var(--mc), 0 0 16px color-mix(in oklab, var(--mc) 45%, transparent); }
.lb-leg.break { opacity: 1; box-shadow: 0 0 0 1px hsl(var(--damage)), 0 0 16px hsl(var(--damage) / .4); }
.lb-leg.break .lb-leg-dot { background: hsl(var(--damage)); box-shadow: 0 0 8px hsl(var(--damage)); animation: lb-dot-pulse 1s ease-in-out infinite; }
.lb-leg-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--mc); box-shadow: 0 0 8px var(--mc); }
.lb-leg.lit .lb-leg-dot { animation: lb-dot-pulse 1.1s ease-in-out infinite; }
@keyframes lb-dot-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.lb-leg-name { font-family: var(--font-display); font-size: .8rem; color: hsl(var(--foreground)); letter-spacing: .03em; }
.lb-leg-owner { font-size: .72rem; color: hsl(var(--muted-foreground)); }
.lb-progress { font-size: .78rem; color: hsl(var(--muted-foreground)); letter-spacing: .03em; text-align: center; text-wrap: pretty; }
.lb-done { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 3.6rem); color: hsl(var(--primary));
  letter-spacing: .14em; text-shadow: 0 0 50px hsl(var(--primary) / .7); animation: cl-open-rise 1.2s ease-out both; }

/* ---- player handset overlay ---- */
.lb-overlay {
  position: absolute; inset: 0; z-index: 5500; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 5vw;
  background: radial-gradient(ellipse at 50% 38%, hsl(38 50% 14% / .5), hsl(var(--background)) 66%);
}
.lb-ov-inner { position: relative; z-index: 2; width: min(420px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.lb-ov-eyebrow { font-family: var(--font-display); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--primary)); }
.lb-ov-inner h2 { font-size: clamp(1.5rem, 6vw, 2.1rem); }
.lb-ov-cue { font-size: .9rem; line-height: 1.45; max-width: 34ch; }
.lb-ov-burst { position: absolute; top: -10%; width: 60vmin; height: 60vmin; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, hsl(var(--primary) / .5), transparent 62%); animation: lb-burst 1.1s ease-out both; }
@keyframes lb-burst { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }

.lb-ctrl-stack { display: flex; flex-direction: column; gap: 1rem; width: 100%; margin-top: .4rem; }
.lb-ctrl { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem; border-radius: 18px;
  background: hsl(var(--surface) / .55); border: 1px solid hsl(var(--border) / .6);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mc) 30%, transparent); }
.lb-ctrl.secondary { opacity: .92; }
.lb-ctrl-head { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.lb-ctrl-eyebrow { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.lb-ctrl-name { font-family: var(--font-display); font-size: .95rem; color: var(--mc); letter-spacing: .03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-ctrl-dial { position: relative; width: min(58vw, 230px); aspect-ratio: 1; touch-action: none; cursor: grab; }
.lb-ctrl-dial:active { cursor: grabbing; }
.lb-ctrl-svg { width: 100%; height: 100%; overflow: visible; }
.lb-ctrl-ring { fill: hsl(var(--background) / .6); stroke: hsl(var(--border)); stroke-width: 1.5; stroke-dasharray: 2 3; }
.lb-ctrl-mirror { stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px currentColor); }
.lb-ctrl-grab { position: absolute; left: 0; right: 0; bottom: -1.2rem; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--muted-foreground)); text-align: center; pointer-events: none; }
.lb-nudge-row { display: flex; gap: .5rem; margin-top: .8rem; }
.lb-nudge { font-family: var(--font-body); font-size: .9rem; min-width: 48px; padding: .55rem .4rem; border-radius: 12px; cursor: pointer;
  border: 1px solid hsl(var(--border)); background: hsl(var(--surface)); color: hsl(var(--foreground)); }
.lb-nudge:active { transform: scale(.93); background: hsl(var(--primary) / .18); border-color: hsl(var(--primary) / .6); }

/* ============================================================
   2 — POSSESSED ALLY  (charm: main banner rides on the scene;
       victim takeover + ally helper dock on handsets)
   --charm: eerie violet, distinct from the amber UI.
   ============================================================ */
.charm-main-layer { --charm: 282 68% 62%;
  position: absolute; top: clamp(150px, 18vh, 184px); left: 50%; transform: translateX(-50%);
  z-index: 32; pointer-events: none; width: min(92%, 520px);
}
.charm-banner {
  display: flex; align-items: center; gap: 1rem; padding: .8rem 1.2rem .8rem .8rem;
  border-radius: 18px; background: linear-gradient(180deg, hsl(var(--charm) / .16), hsl(var(--surface) / .7));
  border: 1px solid hsl(var(--charm) / .5);
  box-shadow: 0 10px 36px hsl(var(--charm) / .25), inset 0 0 30px hsl(var(--charm) / .12);
  backdrop-filter: blur(10px); animation: charm-breathe 3.2s ease-in-out infinite;
}
@keyframes charm-breathe {
  0%,100% { box-shadow: 0 10px 36px hsl(var(--charm) / .22), inset 0 0 26px hsl(var(--charm) / .1); }
  50%     { box-shadow: 0 12px 46px hsl(var(--charm) / .4), inset 0 0 40px hsl(var(--charm) / .2); }
}
.charm-aura-ring { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; }
.charm-ring-svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.charm-ring-bg { fill: none; stroke: hsl(var(--charm) / .2); stroke-width: 5; }
.charm-ring-time { fill: none; stroke: hsl(var(--charm)); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 214; filter: drop-shadow(0 0 5px hsl(var(--charm))); transition: stroke-dashoffset .15s linear; }
.charm-eye { position: absolute; font-size: 1.5rem; filter: drop-shadow(0 0 8px hsl(var(--charm) / .9)); animation: charm-eye-pulse 1.6s ease-in-out infinite; }
@keyframes charm-eye-pulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.14); opacity: 1; } }
.charm-banner-text { flex: 1; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.charm-banner-name { font-family: var(--font-display); font-size: 1.05rem; color: hsl(var(--foreground)); letter-spacing: .03em; }
.charm-cleanse-meter { height: 9px; border-radius: 99px; background: hsl(var(--background) / .7); overflow: hidden; border: 1px solid hsl(var(--charm) / .3); }
.charm-cleanse-meter .fill, .charm-cleanse-big .fill, .charm-help-cleanse .fill {
  height: 100%; border-radius: 99px; transition: width .3s ease;
  background: linear-gradient(90deg, hsl(var(--charm)), hsl(var(--heal))); box-shadow: 0 0 12px hsl(var(--heal) / .5); }
.charm-banner-sub { font-size: .72rem; color: hsl(var(--charm) / .9); letter-spacing: .04em; text-transform: uppercase; }

/* ---- victim takeover (handset) ---- */
.charm-overlay.possessed { --charm: 282 68% 62%;
  position: absolute; inset: 0; z-index: 6000; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 6vw;
  background: radial-gradient(ellipse at 50% 42%, hsl(282 60% 16% / .92), hsl(280 40% 5%) 70%);
  animation: charm-shudder 5s ease-in-out infinite;
}
@keyframes charm-shudder { 0%,92%,100% { transform: translate(0,0); } 94% { transform: translate(-2px,1px); } 96% { transform: translate(2px,-1px); } 98% { transform: translate(-1px,1px); } }
.charm-ov-glitch { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: repeating-linear-gradient(0deg, transparent 0 2px, hsl(var(--charm) / .07) 2px 3px);
  animation: charm-scan 6s linear infinite; }
@keyframes charm-scan { to { background-position: 0 60px; } }
.charm-ov-inner { position: relative; z-index: 2; width: min(420px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.charm-ov-eyebrow { font-family: var(--font-display); font-size: .8rem; letter-spacing: .2em; color: hsl(var(--charm)); text-shadow: 0 0 14px hsl(var(--charm) / .8); animation: charm-eye-pulse 1.4s ease-in-out infinite; }
.charm-ov-title { font-family: var(--font-display); font-size: clamp(1.8rem, 8vw, 2.6rem); color: hsl(var(--foreground)); text-shadow: 0 0 30px hsl(var(--charm) / .5); }
.charm-ov-cue { font-size: .92rem; line-height: 1.5; color: hsl(var(--muted-foreground)); max-width: 32ch; }
.charm-cleanse-big { width: 100%; max-width: 340px; height: 16px; border-radius: 99px; background: hsl(var(--background) / .7); overflow: hidden; border: 1px solid hsl(var(--charm) / .4); margin-top: .3rem; }
.charm-mash { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .14em; padding: 1rem 2.4rem; border-radius: 16px; cursor: pointer; user-select: none;
  color: hsl(var(--foreground)); border: 1px solid hsl(var(--charm) / .7);
  background: linear-gradient(180deg, hsl(var(--charm) / .35), hsl(var(--charm) / .12));
  box-shadow: 0 0 26px hsl(var(--charm) / .45), inset 0 1px 0 hsl(var(--charm) / .4); transition: transform .06s; }
.charm-mash:active { transform: scale(.94); box-shadow: 0 0 40px hsl(var(--charm) / .8), inset 0 1px 0 hsl(var(--charm) / .6); }
.charm-ov-sub { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--charm) / .9); font-variant-numeric: tabular-nums; }

/* ---- ally helper dock (handset, non-possessed players) ---- */
.charm-help-dock { --charm: 282 68% 62%;
  position: absolute; left: 50%; bottom: clamp(14px, 4vh, 30px); transform: translateX(-50%);
  z-index: 5800; width: min(92%, 380px); display: flex; flex-direction: column; gap: .5rem;
  padding: .8rem 1rem; border-radius: 16px;
  background: linear-gradient(180deg, hsl(var(--charm) / .14), hsl(var(--surface) / .85));
  border: 1px solid hsl(var(--charm) / .45); box-shadow: 0 10px 30px hsl(0 0% 0% / .4); backdrop-filter: blur(8px);
}
.charm-help-cleanse { height: 8px; border-radius: 99px; background: hsl(var(--background) / .7); overflow: hidden; border: 1px solid hsl(var(--charm) / .3); }
.charm-help-btn { font-family: var(--font-body); font-size: .92rem; padding: .7rem 1rem; border-radius: 12px; cursor: pointer; user-select: none;
  color: hsl(var(--foreground)); border: 1px solid hsl(var(--charm) / .6);
  background: linear-gradient(180deg, hsl(var(--charm) / .28), hsl(var(--charm) / .1)); transition: transform .06s; }
.charm-help-btn:active { transform: scale(.96); background: hsl(var(--charm) / .4); }

/* ============================================================
   3 — BREATH METER  (drowning/air-pocket: shared bars on main,
       air bar + Surface button on each handset)
   --air: submerged cyan, distinct from amber + charm violet.
   ============================================================ */
.breath-main-layer { --air: 190 80% 56%;
  position: absolute; top: clamp(150px, 18vh, 184px); left: clamp(14px, 3vw, 30px);
  z-index: 30; width: min(86vw, 340px);
  padding: .85rem 1rem 1rem; border-radius: 16px;
  background: linear-gradient(180deg, hsl(198 60% 14% / .82), hsl(200 50% 8% / .9));
  border: 1px solid hsl(var(--air) / .4);
  box-shadow: 0 12px 40px hsl(200 70% 4% / .5), inset 0 0 26px hsl(var(--air) / .08);
  backdrop-filter: blur(9px); overflow: hidden;
}
.breath-main-layer::before { /* drifting bubbles */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at 20% 90%, hsl(var(--air) / .5) 0 1.5px, transparent 2px),
    radial-gradient(circle at 60% 95%, hsl(var(--air) / .4) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 92%, hsl(var(--air) / .5) 0 2px, transparent 2.5px);
  background-size: 100% 220%; animation: breath-bubbles 7s linear infinite;
}
@keyframes breath-bubbles { to { background-position: 0 -220%, 10px -220%, -6px -220%; } }
.breath-head { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .15rem; margin-bottom: .7rem; }
.breath-title { font-family: var(--font-display); font-size: 1rem; color: hsl(var(--foreground)); letter-spacing: .02em; }
.breath-pocket { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--air)); }
.breath-bars { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .5rem; }
.breath-row { display: grid; grid-template-columns: 4.4rem 1fr auto; align-items: center; gap: .55rem; }
.breath-name { font-size: .8rem; color: hsl(var(--muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breath-bar { height: 10px; border-radius: 99px; background: hsl(200 40% 6% / .8); overflow: hidden; border: 1px solid hsl(var(--air) / .22); }
.breath-bar .fill, .breath-dock-bar .fill {
  height: 100%; border-radius: 99px; transition: width .4s linear;
  background: linear-gradient(90deg, hsl(var(--air) / .7), hsl(var(--air)));
  box-shadow: 0 0 10px hsl(var(--air) / .55);
}
.breath-row.breathing .fill { background: linear-gradient(90deg, hsl(var(--air)), hsl(var(--heal))); box-shadow: 0 0 14px hsl(var(--heal) / .6); }
.breath-row.critical .breath-name { color: hsl(var(--damage)); }
.breath-row.critical .fill { background: linear-gradient(90deg, hsl(var(--damage) / .8), hsl(var(--damage))); box-shadow: 0 0 12px hsl(var(--damage) / .6); animation: breath-gasp .9s ease-in-out infinite; }
@keyframes breath-gasp { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.breath-air { font-size: .68rem; letter-spacing: .04em; color: hsl(var(--heal)); white-space: nowrap; animation: breath-rise 1.4s ease-in-out infinite; }
@keyframes breath-rise { 0%,100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(-2px); opacity: 1; } }

/* ---- player dock (handset, bottom) ---- */
.breath-dock { --air: 190 80% 56%;
  position: absolute; left: 50%; bottom: clamp(14px, 4vh, 30px); transform: translateX(-50%);
  z-index: 5700; width: min(92%, 400px); display: flex; flex-direction: column; gap: .55rem;
  padding: .8rem 1rem .9rem; border-radius: 18px;
  background: linear-gradient(180deg, hsl(198 60% 14% / .85), hsl(200 50% 8% / .94));
  border: 1px solid hsl(var(--air) / .45); box-shadow: 0 12px 34px hsl(200 70% 3% / .55); backdrop-filter: blur(10px);
}
.breath-dock.critical { border-color: hsl(var(--damage) / .7); animation: breath-dock-flash 1s ease-in-out infinite; }
@keyframes breath-dock-flash { 0%,100% { box-shadow: 0 12px 34px hsl(200 70% 3% / .55); } 50% { box-shadow: 0 12px 34px hsl(200 70% 3% / .55), 0 0 0 1px hsl(var(--damage) / .6), 0 0 30px hsl(var(--damage) / .4); } }
.breath-dock-bar { height: 14px; border-radius: 99px; background: hsl(200 40% 6% / .85); overflow: hidden; border: 1px solid hsl(var(--air) / .3); }
.breath-dock.critical .breath-dock-bar .fill { background: linear-gradient(90deg, hsl(var(--damage) / .8), hsl(var(--damage))); box-shadow: 0 0 14px hsl(var(--damage) / .6); }
.breath-dock-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.breath-dock-pct { font-family: var(--font-display); font-size: .9rem; color: hsl(var(--air)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.breath-dock.critical .breath-dock-pct { color: hsl(var(--damage)); }
.breath-btn { flex: 1; font-family: var(--font-body); font-size: .9rem; padding: .7rem 1rem; border-radius: 12px; cursor: pointer; user-select: none;
  color: hsl(var(--foreground)); border: 1px solid hsl(var(--air) / .6);
  background: linear-gradient(180deg, hsl(var(--air) / .3), hsl(var(--air) / .1)); transition: transform .06s; text-align: center; }
.breath-btn:active { transform: scale(.96); }
.breath-btn.breathing { border-color: hsl(var(--heal) / .7); background: linear-gradient(180deg, hsl(var(--heal) / .3), hsl(var(--heal) / .1)); color: hsl(var(--heal)); }
.breath-dock-note { font-size: .7rem; text-align: center; letter-spacing: .04em; color: hsl(var(--heal) / .9); }

/* ============================================================
   4 — SPECTRAL GUIDE  (dead players whisper one word; whispers
       drift across the main scene; ghostly between-worlds overlay)
   --spec: pale spectral blue-white.
   ============================================================ */
.spectral-main-layer { --spec: 200 60% 82%;
  position: absolute; inset: 0; z-index: 28; pointer-events: none; overflow: hidden;
}
.whisper {
  position: absolute; font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  color: hsl(var(--spec)); letter-spacing: .08em; white-space: nowrap;
  text-shadow: 0 0 12px hsl(var(--spec) / .8), 0 0 30px hsl(var(--spec) / .4);
  opacity: 0; transform: translateY(8px); mix-blend-mode: screen;
  animation: whisper-drift 7s ease-in-out forwards;
}
@keyframes whisper-drift {
  0%   { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(3px); }
  16%  { opacity: .92; filter: blur(0); }
  72%  { opacity: .82; transform: translateY(-22px) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-46px) scale(1.03); filter: blur(2px); }
}
.whisper-from {
  display: block; margin-top: .15rem; font-family: var(--font-body); font-size: .6em;
  letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--spec) / .55);
  text-shadow: none;
}

/* ---- dead-player overlay (handset) ---- */
.spectral-overlay { --spec: 200 60% 82%;
  position: absolute; inset: 0; z-index: 5600; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 6vw;
  background: radial-gradient(ellipse at 50% 36%, hsl(210 36% 16% / .9), hsl(214 40% 5%) 72%);
}
.spectral-overlay::before { /* slow drifting fog */
  content: ''; position: absolute; inset: -20%; pointer-events: none; opacity: .5; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 40% 30% at 30% 40%, hsl(var(--spec) / .14), transparent 70%),
    radial-gradient(ellipse 50% 26% at 72% 64%, hsl(var(--spec) / .1), transparent 72%);
  animation: spectral-fog 16s ease-in-out infinite alternate;
}
@keyframes spectral-fog { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(4%, -3%) scale(1.08); } }
.spectral-ov-inner { position: relative; z-index: 2; width: min(440px, 100%); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .85rem; }
.spectral-ui { color: hsl(var(--spec)); }
.spectral-ov-eyebrow { font-family: var(--font-display); font-size: .8rem; letter-spacing: .2em;
  color: hsl(var(--spec)); text-shadow: 0 0 16px hsl(var(--spec) / .7); animation: spectral-pulse 3s ease-in-out infinite; }
@keyframes spectral-pulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
.spectral-ov-inner h2 { font-size: clamp(1.6rem, 7vw, 2.3rem); color: hsl(var(--foreground)); text-shadow: 0 0 28px hsl(var(--spec) / .35); }
.spectral-ov-cue { font-size: .9rem; line-height: 1.5; color: hsl(var(--spec) / .8); max-width: 34ch; text-wrap: pretty; }

.spectral-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .3rem; }
.spectral-word {
  font-family: var(--font-display); font-size: .92rem; letter-spacing: .04em; padding: .55rem 1rem; border-radius: 99px; cursor: pointer;
  color: hsl(var(--spec)); border: 1px solid hsl(var(--spec) / .4);
  background: hsl(var(--spec) / .08); transition: transform .08s, background .2s, box-shadow .2s;
}
.spectral-word:hover:not(:disabled) { background: hsl(var(--spec) / .18); box-shadow: 0 0 16px hsl(var(--spec) / .35); }
.spectral-word:active:not(:disabled) { transform: scale(.93); }
.spectral-word:disabled { opacity: .4; cursor: not-allowed; }

.spectral-input-row { display: flex; gap: .5rem; width: 100%; max-width: 340px; margin-top: .3rem; }
.spectral-input { flex: 1; text-align: center; letter-spacing: .06em;
  background: hsl(var(--spec) / .06) !important; border-color: hsl(var(--spec) / .35) !important; color: hsl(var(--spec)) !important; }
.spectral-input:focus { border-color: hsl(var(--spec) / .7) !important; box-shadow: 0 0 16px hsl(var(--spec) / .25); }
.spectral-input::placeholder { color: hsl(var(--spec) / .4); }
.spectral-send {
  font-family: var(--font-body); font-size: .9rem; padding: .7rem 1.2rem; border-radius: 12px; cursor: pointer; white-space: nowrap;
  color: hsl(var(--background)); border: 1px solid hsl(var(--spec) / .7);
  background: linear-gradient(180deg, hsl(var(--spec)), hsl(var(--spec) / .75)); transition: transform .08s, opacity .2s;
}
.spectral-send:active:not(:disabled) { transform: scale(.95); }
.spectral-send:disabled { opacity: .35; cursor: not-allowed; }
.spectral-cd { font-size: .76rem; letter-spacing: .06em; color: hsl(var(--spec) / .7); font-variant-numeric: tabular-nums; margin-top: .2rem; }

/* ============================================================
   5 — BONDS  (a soul-thread arcs between two allied health bars;
       handset badge names your partner & buff state)
   active = warm flowing gold · inactive = thin strained grey.
   ============================================================ */
.bonds-layer {
  position: absolute; inset: 0; z-index: 26; pointer-events: none; overflow: visible;
}
.bond-thread {
  fill: none; stroke: hsl(var(--muted-foreground) / .45); stroke-width: 1.4;
  stroke-linecap: round; stroke-dasharray: 4 7; opacity: .6;
  animation: bond-strain 2.4s ease-in-out infinite;
}
@keyframes bond-strain { 0%,100% { opacity: .4; } 50% { opacity: .7; } }
.bond-thread.active {
  stroke: hsl(var(--primary)); stroke-width: 2.2; opacity: 1;
  stroke-dasharray: 5 9;
  filter: drop-shadow(0 0 4px hsl(var(--primary) / .8)) drop-shadow(0 0 10px hsl(var(--primary) / .45));
  animation: bond-flow 1.1s linear infinite;
}
@keyframes bond-flow { to { stroke-dashoffset: -14; } }

/* ---- handset badge ---- */
.bond-badge {
  position: absolute; top: clamp(150px, 18vh, 184px); left: 50%; transform: translateX(-50%);
  z-index: 4800; display: flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem; border-radius: 999px;
  background: hsl(var(--surface) / .82); border: 1px solid hsl(var(--border) / .8);
  box-shadow: 0 6px 20px hsl(0 0% 0% / .4); backdrop-filter: blur(8px); white-space: nowrap;
}
.bond-badge.active {
  border-color: hsl(var(--primary) / .6);
  box-shadow: 0 6px 24px hsl(var(--primary) / .25), inset 0 0 18px hsl(var(--primary) / .12);
}
.bond-badge-thread { font-size: 1.05rem; line-height: 1; color: hsl(var(--muted-foreground)); filter: grayscale(1) opacity(.7); transition: color .3s, filter .3s; }
.bond-badge.active .bond-badge-thread { color: hsl(var(--primary)); filter: none; animation: bond-glyph 2s ease-in-out infinite; }
@keyframes bond-glyph { 0%,100% { text-shadow: 0 0 6px hsl(var(--primary) / .6); } 50% { text-shadow: 0 0 16px hsl(var(--primary) / .95); } }
.bond-badge-text { font-family: var(--font-display); font-size: .85rem; letter-spacing: .03em; color: hsl(var(--foreground)); }
.bond-badge-state {
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: .2rem .55rem; border-radius: 99px;
  color: hsl(var(--muted-foreground)); background: hsl(var(--background) / .5);
}
.bond-badge.active .bond-badge-state { color: hsl(var(--primary)); background: hsl(var(--primary) / .14); }

/* ============================================================
   6 — RITUAL INTERRUPT  (boss-phase takeover: party's gold
       interrupt bar races the boss's red cast bar)
   ============================================================ */
.ritual-stage, .totems-stage {
  position: absolute; inset: 0; z-index: 24;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.6rem, 1.8vh, 1.3rem);
  padding: clamp(150px, 18vh, 184px) clamp(1rem, 3vw, 2.4rem) clamp(20px, 3.4vh, 36px);
  overflow: hidden;
}
.main-screen.ritual-mode .scene-grad,
.main-screen.totems-mode .scene-grad { z-index: 1; }
.ritual-stage { background: radial-gradient(ellipse at 50% 40%, hsl(var(--damage) / .12), transparent 60%); }
.ritual-stage.urgent { animation: ritual-urgent 0.9s ease-in-out infinite; }
@keyframes ritual-urgent { 0%,100% { background: radial-gradient(ellipse at 50% 40%, hsl(var(--damage) / .12), transparent 60%); } 50% { background: radial-gradient(ellipse at 50% 40%, hsl(var(--damage) / .26), transparent 64%); } }

.ritual-boss { position: relative; z-index: 1; display: grid; place-items: center; margin-top: -.4rem; }
.ritual-boss-glyph { position: relative; z-index: 2; font-size: clamp(3rem, 9vw, 5.4rem); color: hsl(var(--damage)); filter: drop-shadow(0 0 18px hsl(var(--damage) / .8)); animation: ritual-boss-bob 3.4s ease-in-out infinite; }
@keyframes ritual-boss-bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.ritual-boss-aura { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, hsl(var(--damage) / .35), transparent 64%); animation: ritual-aura 2.6s ease-in-out infinite; }
@keyframes ritual-aura { 0%,100% { transform: scale(.85); opacity: .5; } 50% { transform: scale(1.12); opacity: .9; } }
.ritual-stage.urgent .ritual-boss-aura { animation-duration: 1.1s; }

.ritual-titlebar { position: relative; z-index: 2; text-align: center; }
.ritual-eyebrow { font-family: var(--font-display); font-size: clamp(.74rem, 1.5vw, .95rem); letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--damage)); }
.ritual-spell { font-size: clamp(1.8rem, 4.4vw, 3.2rem); color: hsl(var(--foreground)); letter-spacing: .04em; text-shadow: 0 0 30px hsl(var(--damage) / .4); }

.ritual-bars { position: relative; z-index: 2; width: min(92%, 720px); display: flex; flex-direction: column; gap: .35rem; }
.ritual-bar-row { display: grid; grid-template-columns: 5.5rem 1fr 3rem; align-items: center; gap: .8rem; }
.ritual-bar-lbl { font-family: var(--font-display); font-size: .92rem; letter-spacing: .06em; text-align: right; }
.ritual-bar-lbl.cast { color: hsl(var(--damage)); }
.ritual-bar-lbl.int { color: hsl(var(--primary)); }
.cast-bar, .interrupt-bar { height: 22px; border-radius: 99px; background: hsl(var(--background) / .7); overflow: hidden; border: 1px solid hsl(var(--border) / .7); }
.cast-bar .fill { height: 100%; border-radius: 99px; transition: width .1s linear; background: linear-gradient(90deg, hsl(var(--damage) / .8), hsl(var(--damage))); box-shadow: 0 0 16px hsl(var(--damage) / .6); }
.interrupt-bar .fill { height: 100%; border-radius: 99px; transition: width .2s ease; background: linear-gradient(90deg, hsl(var(--primary) / .8), hsl(var(--primary))); box-shadow: 0 0 16px hsl(var(--primary) / .6); }
.ritual-bar-pct { font-family: var(--font-display); font-size: .9rem; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.ritual-vs { text-align: center; font-family: var(--font-display); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: hsl(var(--muted-foreground)); padding: .1rem 0; }

.ritual-foot { position: relative; z-index: 2; text-align: center; min-height: 2.4rem; display: grid; place-items: center; }
.ritual-end { font-size: clamp(2rem, 6vw, 4rem); letter-spacing: .12em; animation: cl-open-rise 1s ease-out both; }
.ritual-end.interrupted { color: hsl(var(--primary)); text-shadow: 0 0 50px hsl(var(--primary) / .7); }
.ritual-end.cast { color: hsl(var(--damage)); text-shadow: 0 0 50px hsl(var(--damage) / .8); animation: cl-open-rise 1s ease-out both, ritual-urgent 0.6s ease-in-out infinite; }

/* ---- ritual player overlay ---- */
.ritual-overlay {
  position: absolute; inset: 0; z-index: 5400; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 6vw;
  background: radial-gradient(ellipse at 50% 40%, hsl(0 45% 14% / .92), hsl(0 30% 5%) 70%);
}
.ritual-overlay.interrupted { background: radial-gradient(ellipse at 50% 40%, hsl(38 50% 16% / .92), hsl(20 20% 5%) 70%); }
.ritual-ov-inner { position: relative; z-index: 2; width: min(420px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.ritual-ov-eyebrow { font-family: var(--font-display); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--damage)); }
.ritual-ov-inner h2 { font-size: clamp(1.5rem, 6vw, 2.1rem); }
.ritual-ov-cue { font-size: .86rem; line-height: 1.5; color: hsl(var(--muted-foreground)); max-width: 32ch; }
.ritual-tap, .ritual-hold { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .12em; padding: 1.4rem 2.6rem; border-radius: 18px; cursor: pointer; user-select: none;
  color: hsl(var(--foreground)); border: 1px solid hsl(var(--primary) / .7);
  background: linear-gradient(180deg, hsl(var(--primary) / .32), hsl(var(--primary) / .1));
  box-shadow: 0 0 26px hsl(var(--primary) / .4), inset 0 1px 0 hsl(var(--primary) / .4); transition: transform .06s; }
.ritual-tap:active { transform: scale(.93); box-shadow: 0 0 44px hsl(var(--primary) / .7); }
.ritual-hold:active { transform: scale(.97); box-shadow: 0 0 40px hsl(var(--primary) / .8), inset 0 0 30px hsl(var(--primary) / .3); }
.ritual-seq { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.ritual-seq-target { display: flex; gap: .6rem; }
.ritual-seq-ghost { font-size: 1.6rem; color: hsl(var(--muted-foreground) / .4); transition: color .2s, transform .2s; }
.ritual-seq-ghost.on { color: hsl(var(--primary)); transform: scale(1.18); filter: drop-shadow(0 0 8px hsl(var(--primary) / .7)); }
.ritual-seq-keys { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.ritual-seq-key { font-size: 1.8rem; width: 84px; height: 84px; border-radius: 16px; cursor: pointer; color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border)); background: hsl(var(--surface) / .7); transition: transform .06s, background .15s; }
.ritual-seq-key:active { transform: scale(.9); background: hsl(var(--primary) / .25); border-color: hsl(var(--primary) / .6); }
.ritual-ov-end { display: flex; flex-direction: column; gap: .7rem; }

/* ============================================================
   7 — PHASE TOTEMS  (break all four colored totems within a
       window to drop the boss's shield)
   ============================================================ */
.totems-stage { background: radial-gradient(ellipse at 50% 42%, hsl(var(--damage) / .08), transparent 62%); }
.totems-stage.shield-down { animation: totems-flash 1.2s ease-out 1; }
@keyframes totems-flash { 0% { background: radial-gradient(ellipse at 50% 42%, hsl(var(--primary) / .4), transparent 70%); } 100% { background: radial-gradient(ellipse at 50% 42%, hsl(var(--primary) / .08), transparent 62%); } }
.totems-titlebar { position: relative; z-index: 2; text-align: center; }
.totems-eyebrow { font-family: var(--font-display); font-size: clamp(.74rem, 1.5vw, .95rem); letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.totems-stage.shield-down .totems-eyebrow { color: hsl(var(--primary)); }
.totems-title { font-size: clamp(1.6rem, 4vw, 2.8rem); color: hsl(var(--foreground)); letter-spacing: .05em; }

.totems-arena { position: relative; z-index: 1; flex: 1; min-height: 0; width: 100%; max-width: 900px; display: grid; place-items: center; }
/* central boss */
.totems-arena .boss { position: relative; display: grid; place-items: center; width: clamp(140px, 21vh, 200px); aspect-ratio: 1; }
.totems-arena .boss-core { position: relative; z-index: 3; font-size: clamp(3rem, 10vh, 5.4rem); color: hsl(var(--foreground)); filter: drop-shadow(0 0 14px hsl(0 0% 0% / .7)); }
.totems-arena .boss.shielded .boss-core { color: hsl(var(--muted-foreground)); }
.boss-shield { position: absolute; inset: -6%; z-index: 2; border-radius: 50%; border: 2px solid hsl(190 70% 60% / .5);
  background: radial-gradient(circle, hsl(190 70% 55% / .12), transparent 66%);
  box-shadow: 0 0 26px hsl(190 70% 55% / .35), inset 0 0 30px hsl(190 70% 55% / .2);
  animation: totems-shield-spin 8s linear infinite, totems-shield-pulse 2.4s ease-in-out infinite; }
@keyframes totems-shield-spin { to { transform: rotate(360deg); } }
@keyframes totems-shield-pulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
.shield.shatter { position: absolute; inset: -6%; z-index: 2; border-radius: 50%; border: 2px solid hsl(190 70% 60% / .6); animation: totems-shatter .7s ease-out forwards; }
@keyframes totems-shatter { 0% { opacity: 1; transform: scale(1); filter: blur(0); } 100% { opacity: 0; transform: scale(1.5); filter: blur(6px); } }
.boss-label { position: absolute; bottom: -1.7rem; z-index: 4; font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: hsl(var(--muted-foreground)); }
.totems-arena .boss:not(.shielded) .boss-label { color: hsl(var(--primary)); text-shadow: 0 0 12px hsl(var(--primary) / .6); }

/* totem ring */
.totems-ring { position: absolute; inset: 0; pointer-events: none; }
.totem { position: absolute; width: clamp(92px, 13vw, 124px); display: flex; flex-direction: column; align-items: center; gap: .3rem; transform: translate(-50%, -50%); }
.totem[style*="--i:0"] { left: 50%; top: 4%; }
.totem[style*="--i:1"] { left: 96%; top: 50%; }
.totem[style*="--i:2"] { left: 50%; top: 96%; }
.totem[style*="--i:3"] { left: 4%; top: 50%; }
/* robust fallback (React serializes custom props as "--i: 0" with a space,
   so the attribute selectors above may not match) — position by order */
.totems-ring .totem:nth-child(1) { left: 50%; top: 14%; }
.totems-ring .totem:nth-child(2) { left: 88%; top: 50%; }
.totems-ring .totem:nth-child(3) { left: 50%; top: 86%; }
.totems-ring .totem:nth-child(4) { left: 12%; top: 50%; }
.totem-body { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--tc); filter: drop-shadow(0 0 8px color-mix(in oklab, var(--tc) 70%, transparent)); transition: transform .2s, filter .2s; }
.totem.primed .totem-body { animation: totem-prime 0.7s ease-in-out infinite; }
@keyframes totem-prime { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); filter: drop-shadow(0 0 16px var(--tc)); } }
.totem.broken .totem-body { color: hsl(var(--muted-foreground)); filter: none; opacity: .5; }
.totem-hp { width: 100%; height: 7px; border-radius: 99px; background: hsl(var(--background) / .8); overflow: hidden; border: 1px solid color-mix(in oklab, var(--tc) 40%, transparent); }
.totem-hp-fill { height: 100%; border-radius: 99px; background: var(--tc); box-shadow: 0 0 8px var(--tc); transition: width .25s ease; }
.totem.broken .totem-hp-fill { background: hsl(var(--muted-foreground)); box-shadow: none; }
.totem-owner { font-size: .72rem; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.totem-primed-tag { font-family: var(--font-display); font-size: .6rem; letter-spacing: .12em; color: var(--tc); text-shadow: 0 0 8px var(--tc); animation: totems-shield-pulse 0.8s ease-in-out infinite; }

.totems-foot { position: relative; z-index: 2; text-align: center; min-height: 2.2rem; display: grid; place-items: center; }
.totems-done { font-size: clamp(2rem, 6vw, 3.6rem); color: hsl(var(--primary)); letter-spacing: .14em; text-shadow: 0 0 50px hsl(var(--primary) / .7); animation: cl-open-rise 1s ease-out both; }

/* ---- totems player overlay ---- */
.totems-overlay {
  position: absolute; inset: 0; z-index: 5400; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 6vw;
  background: radial-gradient(ellipse at 50% 38%, hsl(260 30% 14% / .92), hsl(255 26% 5%) 72%);
}
.totems-overlay.down { background: radial-gradient(ellipse at 50% 38%, hsl(38 50% 16% / .92), hsl(20 20% 5%) 70%); }
.totems-ov-inner { position: relative; z-index: 2; width: min(440px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.totems-ov-inner h2 { font-size: clamp(1.5rem, 6vw, 2.1rem); }
.totems-ov-eyebrow { font-family: var(--font-display); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--primary)); }
.totems-ov-cue { font-size: .86rem; line-height: 1.5; color: hsl(var(--muted-foreground)); max-width: 34ch; text-wrap: pretty; }
.totems-ctrl-stack { display: flex; flex-direction: column; gap: .9rem; width: 100%; margin-top: .4rem; }
.totems-ctrl { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; border-radius: 18px;
  background: hsl(var(--surface) / .6); border: 1px solid color-mix(in oklab, var(--tc) 50%, transparent);
  box-shadow: inset 0 0 18px color-mix(in oklab, var(--tc) 14%, transparent); }
.totems-ctrl.primed { box-shadow: 0 0 22px color-mix(in oklab, var(--tc) 45%, transparent), inset 0 0 18px color-mix(in oklab, var(--tc) 22%, transparent); animation: totem-prime-card 0.8s ease-in-out infinite; }
@keyframes totem-prime-card { 0%,100% { border-color: color-mix(in oklab, var(--tc) 50%, transparent); } 50% { border-color: var(--tc); } }
.totems-ctrl.broken { opacity: .65; }
.totems-ctrl-head { font-family: var(--font-display); font-size: .92rem; color: var(--tc); letter-spacing: .03em; }
.totems-ctrl-hp { width: 100%; height: 12px; border-radius: 99px; background: hsl(var(--background) / .8); overflow: hidden; border: 1px solid color-mix(in oklab, var(--tc) 40%, transparent); }
.totems-ctrl-hp-fill { height: 100%; border-radius: 99px; background: var(--tc); box-shadow: 0 0 10px var(--tc); transition: width .25s ease; }
.totems-hit, .totems-break { font-family: var(--font-display); font-size: 1rem; letter-spacing: .06em; padding: .85rem 1rem; border-radius: 12px; cursor: pointer; user-select: none;
  color: hsl(var(--foreground)); transition: transform .06s; }
.totems-hit { border: 1px solid color-mix(in oklab, var(--tc) 60%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--tc) 28%, transparent), color-mix(in oklab, var(--tc) 8%, transparent)); }
.totems-hit:active { transform: scale(.96); }
.totems-break { border: 1px solid var(--tc); background: linear-gradient(180deg, color-mix(in oklab, var(--tc) 55%, transparent), color-mix(in oklab, var(--tc) 25%, transparent));
  box-shadow: 0 0 22px color-mix(in oklab, var(--tc) 55%, transparent); animation: totems-shield-pulse 0.7s ease-in-out infinite; }
.totems-break:active { transform: scale(.94); }
.totems-ctrl-broke { font-family: var(--font-display); font-size: .85rem; letter-spacing: .06em; color: hsl(var(--muted-foreground)); padding: .6rem; text-align: center; }
.totems-ov-end, .totems-ov-idle { display: flex; flex-direction: column; gap: .6rem; }

/* ============================================================
   8 — THE WAGER  (sealed side-bets; flip-to-reveal on resolve.
       Reuses Auction slider/steps/actions + bid-face card faces.)
   ============================================================ */
.main-screen.wager-mode .scene-grad { z-index: 1; }
.wager-stage {
  position: absolute; inset: 0; z-index: 24;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.7rem, 2vh, 1.4rem);
  padding: clamp(150px, 18vh, 184px) clamp(1rem, 3vw, 2.4rem) clamp(20px, 3.4vh, 36px);
  overflow: hidden;
}
.wager-titlebar { position: relative; z-index: 2; text-align: center; }
.wager-eyebrow { font-family: var(--font-display); font-size: clamp(.74rem, 1.5vw, .95rem); letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--primary)); }
.wager-prompt { font-size: clamp(1.6rem, 4vw, 2.8rem); color: hsl(var(--foreground)); letter-spacing: .03em; text-wrap: balance; max-width: 22ch; margin: .25rem auto 0; }

/* outcomes board */
.wager-outcomes { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; width: min(94%, 820px); }
.wager-out { display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 150px; padding: .8rem 1.1rem; border-radius: 14px;
  background: hsl(var(--surface) / .55); border: 1px solid hsl(var(--border) / .7); transition: border-color .3s, box-shadow .3s, background .3s; }
.wager-out.actual { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .12); box-shadow: 0 0 26px hsl(var(--primary) / .3); }
.wager-out-label { font-family: var(--font-display); font-size: 1.05rem; color: hsl(var(--foreground)); letter-spacing: .02em; text-align: center; }
.wager-out.actual .wager-out-label { color: hsl(var(--primary)); }
.wager-out-flag { font-family: var(--font-display); font-size: .66rem; letter-spacing: .14em; color: hsl(var(--primary)); text-shadow: 0 0 10px hsl(var(--primary) / .6); }
.wager-out-backers { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.wager-chip { font-size: .68rem; letter-spacing: .03em; padding: .15rem .5rem; border-radius: 99px; color: hsl(var(--primary)); background: hsl(var(--primary) / .14); border: 1px solid hsl(var(--primary) / .35); }

/* bet cards (flip-to-reveal) — Wager uses .bet-card; mirror Auction's .bid-card */
.wager-cards { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.bet-card { width: 124px; height: 88px; perspective: 600px; }
.bet-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,.8,.3,1); }
.bet-card.revealed .bet-card-inner { transform: rotateY(180deg); }
.bet-card .bid-face { padding: .4rem; text-align: center; }
.bet-card.win .bid-face.back { box-shadow: 0 0 28px hsl(var(--primary)); border-color: hsl(var(--primary)); }
.bet-card.win .bid-amount { color: hsl(var(--primary)); }

.wager-foot { position: relative; z-index: 2; text-align: center; min-height: 1.6rem; }

/* ---- wager player overlay (reuses .auction-* controls) ---- */
.wager-overlay {
  position: absolute; inset: 0; z-index: 5400; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 6vw;
  background: radial-gradient(ellipse at 50% 38%, hsl(36 44% 13% / .92), hsl(28 28% 5%) 72%);
}
.wager-ov-inner { position: relative; z-index: 2; width: min(420px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: .85rem; }
.wager-ov-eyebrow { font-family: var(--font-display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--primary)); }
.wager-ov-prompt { font-size: clamp(1.4rem, 5.5vw, 2rem); color: hsl(var(--foreground)); letter-spacing: .02em; text-wrap: balance; }
.wager-ov-options { display: flex; flex-direction: column; gap: .55rem; width: 100%; }
.wager-ov-opt { font-family: var(--font-display); font-size: 1rem; letter-spacing: .02em; padding: .85rem 1rem; border-radius: 14px; cursor: pointer; text-align: center;
  color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); background: hsl(var(--surface) / .6); transition: transform .06s, border-color .2s, background .2s, box-shadow .2s; }
.wager-ov-opt:active { transform: scale(.97); }
.wager-ov-opt.sel { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .16); box-shadow: 0 0 18px hsl(var(--primary) / .3); color: hsl(var(--primary)); }
.wager-ov-stake { display: flex; align-items: baseline; gap: .4rem; margin-top: .3rem; }
.wager-stake-amt { font-family: var(--font-display); font-size: 2.8rem; line-height: 1; color: hsl(var(--primary)); font-variant-numeric: tabular-nums; text-shadow: 0 0 24px hsl(var(--primary) / .4); }
.wager-stake-c { font-size: .85rem; letter-spacing: .06em; color: hsl(var(--muted-foreground)); }

/* ============================================================
   9 — ALCHEMY SEQUENCE  (order-matters brewing takeover;
       each phone holds a reagent + a secret recipe fragment)
   ============================================================ */
.main-screen.alch-mode .scene-grad { z-index: 1; }
.alch-stage {
  position: absolute; inset: 0; z-index: 24;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.6rem, 1.8vh, 1.2rem);
  padding: clamp(150px, 18vh, 184px) clamp(1rem, 3vw, 2.4rem) clamp(20px, 3.4vh, 36px);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 64%, hsl(160 36% 14% / .5), transparent 60%);
}
.alch-backfire-flash { position: absolute; inset: 0; z-index: 40; pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, hsl(var(--damage) / .6), transparent 64%); animation: alch-backfire .55s ease-out forwards; }
@keyframes alch-backfire { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

.alch-titlebar { position: relative; z-index: 2; text-align: center; }
.alch-title { font-size: clamp(1.7rem, 4vw, 2.9rem); color: hsl(var(--foreground)); letter-spacing: .05em; }
.alch-sub { margin-top: .25rem; font-size: clamp(.76rem, 1.5vw, .98rem); color: hsl(var(--muted-foreground)); letter-spacing: .02em; text-wrap: pretty; }

.alch-main { position: relative; z-index: 1; flex: 1; min-height: 0; width: 100%; max-width: 980px;
  display: grid; grid-template-columns: minmax(200px, 320px) 1fr; align-items: center; gap: clamp(1rem, 4vw, 3rem); }

/* ---- cauldron ---- */
.alch-cauldron { position: relative; justify-self: center; width: clamp(170px, 26vh, 250px); aspect-ratio: 1 / .9;
  border-radius: 0 0 48% 48% / 0 0 60% 60%;
  background: linear-gradient(180deg, hsl(220 12% 16%), hsl(220 14% 8%));
  border: 3px solid hsl(38 24% 22%); border-top: none;
  box-shadow: inset 0 -20px 40px hsl(0 0% 0% / .6), 0 18px 40px hsl(0 0% 0% / .5);
  overflow: hidden; transition: box-shadow .4s; }
.alch-cauldron.backfire { animation: alch-shake .5s ease-in-out; }
@keyframes alch-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.alch-cauldron-brew { position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--brew) 80%, white 10%), var(--brew) 70%);
  box-shadow: 0 0 40px var(--brew), inset 0 6px 16px color-mix(in oklab, var(--brew) 50%, white);
  transition: height .6s cubic-bezier(.4,.8,.3,1), background .8s, box-shadow .8s; }
.alch-cauldron.step-1 .alch-cauldron-brew { height: 42%; }
.alch-cauldron.step-2 .alch-cauldron-brew { height: 54%; }
.alch-cauldron.step-3 .alch-cauldron-brew { height: 66%; }
.alch-cauldron.step-4 .alch-cauldron-brew { height: 76%; }
.alch-cauldron.step-5 .alch-cauldron-brew, .alch-cauldron.done .alch-cauldron-brew { height: 84%; }
.alch-cauldron-brew::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 8px;
  background: color-mix(in oklab, var(--brew) 40%, white 50%); opacity: .7;
  animation: alch-surface 3s ease-in-out infinite; }
@keyframes alch-surface { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(2px) scaleY(1.4); } }
.alch-cauldron.done { box-shadow: inset 0 -20px 40px hsl(0 0% 0% / .6), 0 0 50px hsl(var(--primary) / .6), 0 18px 40px hsl(0 0% 0% / .5); }

.alch-bubbles { position: absolute; inset: 0; pointer-events: none; }
.alch-bubble { position: absolute; bottom: 8%; left: var(--x); width: 9px; height: 9px; border-radius: 50%;
  background: hsl(0 0% 100% / .35); box-shadow: 0 0 6px hsl(0 0% 100% / .3);
  animation: alch-bubble-rise 2.6s ease-in var(--d) infinite; opacity: 0; }
@keyframes alch-bubble-rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: .8; } 100% { opacity: 0; transform: translateY(-130px) scale(1.1); } }
.alch-cauldron-rim { position: absolute; top: -3px; left: -8px; right: -8px; height: 16px; border-radius: 50%;
  background: linear-gradient(180deg, hsl(38 24% 28%), hsl(38 24% 16%));
  box-shadow: inset 0 2px 4px hsl(38 30% 40% / .5), 0 4px 10px hsl(0 0% 0% / .5); z-index: 3; }

/* ---- recipe track + pool ---- */
.alch-track { display: flex; flex-direction: column; gap: clamp(.7rem, 2vh, 1.2rem); min-width: 0; }
.alch-track-label { font-family: var(--font-display); font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.alch-slots { display: flex; flex-wrap: wrap; gap: .55rem; }
.alch-slot { width: clamp(48px, 6vw, 62px); aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center;
  background: hsl(var(--surface) / .5); border: 1px solid hsl(var(--border) / .7); position: relative; transition: border-color .3s, background .3s; }
.alch-slot.filled { border-color: hsl(var(--primary) / .5); background: hsl(var(--surface) / .8); }
.alch-slot-num { font-family: var(--font-display); font-size: 1.1rem; color: hsl(var(--muted-foreground) / .6); }
.alch-slot-glyph { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1; filter: drop-shadow(0 0 8px currentColor); animation: cl-open-rise .5s ease-out both; }
.alch-pool { display: flex; flex-wrap: wrap; gap: .5rem; }
.alch-reagent { display: flex; align-items: center; gap: .45rem; padding: .4rem .75rem; border-radius: 999px;
  background: hsl(var(--surface) / .5); border: 1px solid color-mix(in oklab, var(--rc) 40%, transparent); transition: opacity .3s, filter .3s; }
.alch-reagent.used { opacity: .35; filter: grayscale(.7); }
.alch-reagent-glyph { font-size: 1.1rem; line-height: 1; color: var(--rc); filter: drop-shadow(0 0 5px color-mix(in oklab, var(--rc) 60%, transparent)); }
.alch-reagent-name { font-size: .78rem; color: hsl(var(--foreground)); white-space: nowrap; }

.alch-foot { position: relative; z-index: 2; text-align: center; min-height: 2rem; display: grid; place-items: center; }
.alch-done { font-size: clamp(1.8rem, 5vw, 3.4rem); color: hsl(var(--primary)); letter-spacing: .12em; text-shadow: 0 0 50px hsl(var(--primary) / .7); animation: cl-open-rise 1s ease-out both; }

/* ---- alchemy player overlay ---- */
.alch-overlay {
  position: absolute; inset: 0; z-index: 5400; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 6vw;
  background: radial-gradient(ellipse at 50% 40%, hsl(160 34% 13% / .92), hsl(165 30% 5%) 72%);
}
.alch-ov-inner { position: relative; z-index: 2; width: min(440px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: .85rem; }
.alch-ov-eyebrow { font-family: var(--font-display); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: hsl(150 50% 60%); }
.alch-clue { position: relative; font-family: var(--font-display); font-size: clamp(1.2rem, 5vw, 1.7rem); line-height: 1.35; color: hsl(var(--foreground));
  padding: 1rem 1.4rem; border-radius: 16px; background: hsl(150 30% 12% / .6); border: 1px solid hsl(150 40% 40% / .4);
  box-shadow: inset 0 0 24px hsl(150 50% 30% / .15); text-wrap: pretty; max-width: 32ch; }
.alch-clue-mark { color: hsl(150 50% 55%); font-size: 1.4em; line-height: 0; vertical-align: -.2em; opacity: .7; }
.alch-ov-cue { font-size: .84rem; line-height: 1.5; color: hsl(var(--muted-foreground)); max-width: 34ch; text-wrap: pretty; }
.alch-ov-label { font-family: var(--font-display); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-top: .3rem; }
.alch-ov-none { font-size: .86rem; line-height: 1.5; color: hsl(var(--muted-foreground)); max-width: 32ch; padding: .8rem 1rem; border-radius: 14px;
  background: hsl(var(--surface) / .5); border: 1px dashed hsl(var(--border)); text-wrap: pretty; }
.alch-ov-reagents { display: flex; flex-direction: column; gap: .7rem; width: 100%; }
.alch-add { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .85rem 1.1rem; border-radius: 16px; cursor: pointer; text-align: left;
  color: hsl(var(--foreground)); border: 1px solid color-mix(in oklab, var(--rc) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--rc) 22%, transparent), color-mix(in oklab, var(--rc) 6%, transparent));
  box-shadow: inset 0 0 16px color-mix(in oklab, var(--rc) 14%, transparent); transition: transform .06s, opacity .3s; }
.alch-add:active:not(:disabled) { transform: scale(.97); }
.alch-add.used, .alch-add:disabled { opacity: .45; cursor: default; filter: grayscale(.4); }
.alch-add-glyph { font-size: 1.7rem; line-height: 1; color: var(--rc); filter: drop-shadow(0 0 8px color-mix(in oklab, var(--rc) 60%, transparent)); }
.alch-add-name { font-family: var(--font-display); font-size: 1rem; letter-spacing: .02em; }
.alch-add-cta { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rc); white-space: nowrap; }
.alch-progress { font-size: .78rem; letter-spacing: .04em; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; margin-top: .2rem; }
.alch-ov-result { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.alch-ov-vial { width: 64px; height: 84px; border-radius: 10px 10px 22px 22px; position: relative;
  background: linear-gradient(180deg, transparent 28%, hsl(var(--primary) / .8) 28%);
  border: 2px solid hsl(var(--primary) / .6); box-shadow: 0 0 30px hsl(var(--primary) / .5), inset 0 0 16px hsl(var(--primary) / .4);
  animation: alch-vial-glow 2.4s ease-in-out infinite; }
@keyframes alch-vial-glow { 0%,100% { box-shadow: 0 0 22px hsl(var(--primary) / .4), inset 0 0 16px hsl(var(--primary) / .4); } 50% { box-shadow: 0 0 42px hsl(var(--primary) / .8), inset 0 0 18px hsl(var(--primary) / .6); } }
.alch-ov-vial::before { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 26px; height: 12px; border-radius: 4px 4px 0 0; background: hsl(38 24% 28%); }