/* ============================================================
   FIVE MECHANICS — Defuser · Constellation · Auction · Vote · Secrets
   Reuses the Torchlit tokens (.liquid-glass, Cinzel/Inter, HSL vars).
   ============================================================ */

/* shared stage scaffold (mirrors .circuit-stage) */
.defuser-stage, .const-stage, .auction-stage, .vote-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(164px, 19.5vh, 192px) clamp(1rem, 3vw, 2.4rem) clamp(18px, 3vh, 34px);
  overflow: hidden;
}
.main-screen.defuser-mode .scene-grad,
.main-screen.auction-mode .scene-grad,
.main-screen.vote-mode .scene-grad { z-index: 1; }

/* ============================================================
   1 — THE DEFUSER
   ============================================================ */
.df-zap { position:absolute; inset:0; z-index:40; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 35%, hsl(var(--damage)/.55) 100%);
  animation: df-flash .42s ease-out forwards; }
@keyframes df-flash { 0%{opacity:0;} 25%{opacity:1;} 100%{opacity:0;} }

.df-topbar { position:relative; z-index:2; display:flex; align-items:center; gap:clamp(1rem,3vw,2.4rem); }
.df-title { font-size: clamp(1.5rem,3vw,2.4rem); color: hsl(var(--foreground)); letter-spacing:.06em; }
.df-timer { font-family: var(--font-display); font-size: clamp(1.8rem,3.4vw,2.8rem); color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums; letter-spacing:.04em; }
.df-timer.low { color: hsl(var(--damage)); animation: df-pulse 1s infinite; }
@keyframes df-pulse { 50%{opacity:.45;} }
.df-strikes { display:flex; gap:.35rem; }
.df-strike { font-size:1.2rem; color: hsl(var(--border)); }
.df-strike.hit { color: hsl(var(--damage)); filter: drop-shadow(0 0 6px hsl(var(--damage)/.8)); }

.trap { position:relative; z-index:1; flex:1; display:grid; place-items:center; width:100%; min-height:0; }
.df-grid { display:grid; grid-template-columns: repeat(var(--cols,2), minmax(220px, 320px)); gap: clamp(.8rem,2vw,1.6rem);
  max-width:100%; }
.df-cell { background: hsl(var(--surface)/.55); border:1px solid hsl(var(--border)/.6); border-radius:16px;
  padding:.9rem; display:flex; flex-direction:column; gap:.5rem; transition: box-shadow .3s; }
.df-cell.locked { box-shadow: inset 0 0 0 2px hsl(var(--heal)); }
.df-cell.struck { animation: df-cell-zap .45s ease-out; }
@keyframes df-cell-zap { 30%{ box-shadow: inset 0 0 0 2px hsl(var(--damage)), 0 0 30px hsl(var(--damage)/.6);} }
.df-cell-owner { font-size:.66rem; letter-spacing:.04em; color: hsl(var(--muted-foreground)); text-align:center; }

.df-foot { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem; width:min(92%,760px); }
.df-foot-status { display:flex; flex-direction:column; align-items:center; gap:.1rem; }
.df-foot-count { font-family:var(--font-display); color: hsl(var(--foreground)); font-size:.95rem; }
.df-foot-hint { font-size:.72rem; color: hsl(var(--muted-foreground)); letter-spacing:.04em; }
.df-revealed-rule { display:flex; flex-direction:column; gap:.15rem; padding:.6rem 1rem; border-radius:12px;
  background: hsl(var(--primary)/.1); border:1px solid hsl(var(--primary)/.4); max-width:560px; text-align:center; }
.df-rr-title { font-family:var(--font-display); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:hsl(var(--primary)); }
.df-rr-text { font-size:.86rem; color: hsl(var(--foreground)); }
.df-end { font-size: clamp(2rem,5vw,3.4rem); letter-spacing:.12em; animation: cl-open-rise 1s ease-out both; }
.df-end.disarmed { color: hsl(var(--heal)); text-shadow:0 0 40px hsl(var(--heal)/.6); }
.df-end.boom { color: hsl(var(--damage)); text-shadow:0 0 40px hsl(var(--damage)/.7); }

/* module internals (shared by Main + operator phone) */
.df-mod { display:flex; flex-direction:column; gap:.5rem; }
.df-mod.compact { gap:.4rem; }
.df-mod-head { display:flex; align-items:center; gap:.4rem; }
.df-mod-icon { font-size:1rem; color: hsl(var(--primary)); }
.df-mod-label { font-family:var(--font-display); font-size:.86rem; color: hsl(var(--foreground)); letter-spacing:.03em; }
.df-mod-ok { margin-left:auto; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color: hsl(var(--heal)); }

.df-wires { display:flex; flex-direction:column; gap:.4rem; }
.df-wire { display:flex; align-items:center; gap:.5rem; }
.df-wire-n { width:1.1rem; font-size:.72rem; color:hsl(var(--muted-foreground)); font-variant-numeric:tabular-nums; }
.df-wire-line { position:relative; flex:1; height:8px; display:flex; }
.df-wire-seg { height:8px; border-radius:99px; background: var(--wc); box-shadow:0 0 8px var(--wc); }
.df-wire-seg.a { width:46%; } .df-wire-seg.b { width:46%; margin-left:8%; }
.df-wire.cut .df-wire-seg.a { transform: translateX(-3px) rotate(-4deg); opacity:.5; }
.df-wire.cut .df-wire-seg.b { transform: translateX(3px) rotate(4deg); opacity:.5; }
.df-wire-name { font-size:.74rem; min-width:42px; }
.df-cut-btn { margin-left:auto; font-family:var(--font-body); font-size:.72rem; padding:.2rem .6rem; border-radius:99px;
  border:1px solid hsl(var(--damage)/.6); background: hsl(var(--damage)/.14); color: hsl(var(--foreground)); cursor:pointer; }
.df-cut-btn:active { transform: scale(.94); }

.df-dials { display:flex; gap:.5rem; justify-content:center; }
.df-dial { display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.df-dial-face { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:1.6rem;
  background: radial-gradient(circle at 50% 40%, hsl(var(--surface)), hsl(var(--background))); border:2px solid hsl(var(--primary)/.5);
  color: hsl(var(--primary)); box-shadow: inset 0 0 10px hsl(0 0% 0% /.5); }
.df-dial-name { font-size:.66rem; color: hsl(var(--muted-foreground)); }
.df-dial-btn { font-family:var(--font-body); font-size:.7rem; padding:.2rem .5rem; border-radius:99px; cursor:pointer;
  border:1px solid hsl(var(--border)); background: hsl(var(--surface)); color: hsl(var(--foreground)); }
.df-dial-btn:active { transform: scale(.94); }

.df-levers { display:flex; gap:.7rem; justify-content:center; }
.df-lever { display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.df-lever-track { width:34px; height:64px; border-radius:18px; background: hsl(var(--background)); border:1px solid hsl(var(--border));
  position:relative; cursor:pointer; padding:0; }
.df-lever-track:disabled { cursor:default; }
.df-lever-knob { position:absolute; left:3px; right:3px; height:26px; border-radius:14px; background: hsl(var(--primary));
  box-shadow:0 0 10px hsl(var(--primary)/.6); transition: top .2s cubic-bezier(.34,1.4,.6,1); }
.df-lever.up .df-lever-knob { top:3px; } .df-lever.down .df-lever-knob { top:35px; background: hsl(var(--muted-foreground)); box-shadow:none; }
.df-lever-n { font-size:.7rem; color: hsl(var(--muted-foreground)); }

.df-seq { display:flex; flex-direction:column; gap:.5rem; align-items:center; }
.df-seq-progress { display:flex; gap:.3rem; }
.df-seq-pip { width:10px; height:10px; border-radius:50%; background: hsl(var(--border)); }
.df-seq-pip.on { background: hsl(var(--heal)); box-shadow:0 0 8px hsl(var(--heal)/.7); }
.df-seq-keys { display:grid; grid-template-columns: repeat(2,1fr); gap:.5rem; }
.df-seq-key { font-family:var(--font-display); font-size:1rem; padding:.55rem .9rem; border-radius:12px; cursor:pointer;
  border:1px solid hsl(var(--primary)/.4); background: hsl(var(--surface)); color: hsl(var(--foreground)); letter-spacing:.05em; }
.df-seq-key:active { transform: scale(.95); }
.df-seq-key:disabled { opacity:.5; }

/* Defuser player overlay */
.defuser-overlay, .const-overlay, .auction-overlay, .vote-overlay {
  position: fixed; inset:0; z-index:6000; display:grid; place-items:center; overflow-y:auto; padding:1.2rem;
  background: radial-gradient(ellipse at 50% 25%, hsl(24 24% 9% /.97), hsl(18 14% 5% /.99));
}
.df-ov-inner { width:min(94vw,460px); display:flex; flex-direction:column; gap:.7rem; }
.df-ov-top { display:flex; align-items:center; justify-content:space-between; }
.df-ov-eyebrow { font-family:var(--font-display); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color: hsl(var(--primary)); }
.df-ov-timer { font-family:var(--font-display); font-size:1.4rem; font-variant-numeric:tabular-nums; color: hsl(var(--foreground)); }
.df-ov-timer.low { color: hsl(var(--damage)); animation: df-pulse 1s infinite; }
.df-ov-section { background: hsl(var(--surface)/.6); border:1px solid hsl(var(--border)/.6); border-radius:16px; padding:.9rem; display:flex; flex-direction:column; gap:.5rem; }
.df-ov-section.reader { border-color: hsl(var(--primary)/.4); }
.df-ov-role { font-family:var(--font-display); font-size:.8rem; letter-spacing:.03em; }
.df-ov-role.op { color: hsl(var(--heal)); } .df-ov-role.rd { color: hsl(var(--primary)); }
.df-ov-cue { font-size:.78rem; color: hsl(var(--muted-foreground)); line-height:1.45; }
.df-rule { background: hsl(var(--primary)/.08); border:1px solid hsl(var(--primary)/.3); border-radius:12px; padding:.7rem .85rem; }
.df-rule-title { font-family:var(--font-display); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: hsl(var(--primary)); margin-bottom:.25rem; }
.df-rule-text { font-size:.95rem; color: hsl(var(--foreground)); line-height:1.5; }
.df-ov-end, .df-ov-idle { text-align:center; padding:1.5rem 0; }
.df-ov-end h2, .df-ov-idle h2 { font-size:1.8rem; margin-bottom:.4rem; }
.df-ov-end.disarmed h2 { color: hsl(var(--heal)); } .df-ov-end.boom h2 { color: hsl(var(--damage)); }

/* host: defuser assignment rows */
.df-assign-list { display:flex; flex-direction:column; gap:.4rem; }
.df-assign-row { display:flex; align-items:center; gap:.5rem; }
.df-assign-mod { font-size:.76rem; color: hsl(var(--foreground)); min-width:96px; }
.df-assign-cell { display:flex; align-items:center; gap:.25rem; }
.df-assign-cell span { font-size:.62rem; color: hsl(var(--muted-foreground)); text-transform:uppercase; }
.df-assign-cell select { min-width:62px; }

/* ============================================================
   2 — CONSTELLATION
   ============================================================ */
.const-stage { justify-content:center; }
.const-sky, .const-ov-sky { position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 30% 20%, hsl(230 40% 14% /.9), transparent 50%),
    radial-gradient(circle at 70% 70%, hsl(265 36% 12% /.85), transparent 55%),
    linear-gradient(180deg, hsl(240 30% 6%), hsl(250 36% 3%)); }
.const-stage::after { content:''; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent), radial-gradient(1px 1px at 80% 20%, #fff 50%, transparent),
    radial-gradient(1px 1px at 60% 60%, #fff 50%, transparent), radial-gradient(1px 1px at 35% 80%, #fff 50%, transparent),
    radial-gradient(1px 1px at 90% 50%, #fff 50%, transparent); }
.const-titlebar { position:relative; z-index:2; text-align:center; }
.const-title { font-size: clamp(1.6rem,3.4vw,2.8rem); color: hsl(var(--foreground)); letter-spacing:.08em; }
.const-sub { margin-top:.3rem; color: hsl(var(--muted-foreground)); font-size:clamp(.78rem,1.4vw,1rem); }
.const-board { position:relative; z-index:1; width:min(58vh,58vw); aspect-ratio:1; max-width:640px; }
.const-svg { width:100%; height:100%; overflow:visible; }
.const-target-line { stroke: hsl(var(--muted-foreground)); stroke-width:.4; stroke-dasharray:2 2; opacity:.4; }
.const-target-star { fill: hsl(var(--muted-foreground)); opacity:.45; }
.const-line { stroke: hsl(var(--primary)); stroke-width:.7; opacity:0; transition: opacity .4s; }
.const-line.live { opacity:1; filter: drop-shadow(0 0 1.4px hsl(var(--primary)/.9)); }
.const-star { transition: r .3s, filter .3s; }
.const-star.lit { filter: drop-shadow(0 0 2px currentColor); }
.const-stage.is-complete .const-line { stroke: hsl(var(--primary)); opacity:1; animation: const-shimmer 1.4s ease-in-out infinite; }
@keyframes const-shimmer { 50%{ filter: drop-shadow(0 0 3px hsl(var(--primary))); } }

.const-hud { position:relative; z-index:2; width:min(92%,720px); display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.const-legend { display:grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap:.5rem; width:100%; }
.const-leg { display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.5rem; border-radius:12px;
  background: hsl(var(--surface)/.5); border:1px solid hsl(var(--border)/.5); opacity:.6; transition: opacity .3s, box-shadow .3s; }
.const-leg.lit { opacity:1; box-shadow: inset 0 0 0 1px var(--lc); }
.const-leg-dot { width:13px; height:13px; border-radius:50%; background: var(--lc); box-shadow:0 0 8px var(--lc); }
.const-leg-name { font-family:var(--font-display); font-size:.78rem; color: hsl(var(--foreground)); }
.const-leg-owner { font-size:.7rem; color: hsl(var(--muted-foreground)); }
.const-leg-state { font-size:.64rem; letter-spacing:.06em; color: var(--lc); }
.const-leg:not(.lit) .const-leg-state { color: hsl(var(--muted-foreground)); }
.const-progress-text { font-size:.78rem; color: hsl(var(--muted-foreground)); letter-spacing:.02em; }
.const-done { font-size: clamp(1.8rem,5vw,3.2rem); 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; }

/* constellation player overlay */
.const-ov-inner { width:min(94vw,440px); text-align:center; display:flex; flex-direction:column; align-items:center; position:relative; z-index:2; }
.const-ov-inner h2 { font-size: clamp(1.5rem,7vw,2rem); margin-bottom:.4rem; }
.const-ov-eyebrow { font-family:var(--font-display); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color: hsl(var(--primary)); margin-bottom:.4rem; }
.const-ov-cue { font-size:.88rem; line-height:1.5; margin-bottom:1rem; max-width:36ch; }
.const-ctrl-stack { display:flex; flex-direction:column; gap:1rem; width:100%; }
.const-ctrl { border-radius:18px; padding:1rem; background: hsl(var(--surface)/.6); border:1px solid hsl(var(--border)/.6); box-shadow: inset 0 0 0 1.5px var(--lc); }
.const-ctrl.secondary { border-top:2px dashed var(--lc); }
.const-ctrl-head { display:flex; flex-direction:column; align-items:center; gap:.1rem; margin-bottom:.6rem; }
.const-ctrl-eyebrow { font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color: hsl(var(--muted-foreground)); white-space:nowrap; }
.const-ctrl-name { font-family:var(--font-display); font-size:1.1rem; color: var(--lc); }
.const-ctrl-dial { position:relative; width:200px; height:200px; margin:0 auto; touch-action:none; cursor:grab; }
.const-ctrl-dial:active { cursor:grabbing; }
.const-ctrl-svg { width:100%; height:100%; }
.const-ctrl-ring { fill:none; stroke: hsl(var(--border)/.7); stroke-width:1; stroke-dasharray:2 3; }
.const-ctrl-star { filter: drop-shadow(0 0 3px currentColor); }
.const-ctrl-line { stroke-width:1.2; opacity:.7; }
.const-ctrl-needle { stroke: hsl(var(--primary)/.6); stroke-width:1.2; stroke-dasharray:2 2; }
.const-ctrl-grab { position:absolute; bottom:6px; left:0; right:0; text-align:center; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: hsl(var(--muted-foreground)); pointer-events:none; }
.const-nudge-row { display:flex; gap:.4rem; justify-content:center; margin-top:.6rem; }
.const-nudge { font-family:var(--font-body); font-size:.78rem; padding:.45rem .7rem; border-radius:99px; cursor:pointer;
  border:1px solid hsl(var(--border)); background: hsl(var(--surface)); color: hsl(var(--foreground)); }
.const-nudge:active { transform: scale(.94); }
.const-ov-burst { width:90px; height:90px; margin:0 auto .8rem; border-radius:50%;
  background: radial-gradient(circle, #fff, hsl(var(--primary)) 45%, transparent 72%); box-shadow:0 0 70px hsl(var(--primary)/.8); animation: cl-spark 1.4s ease-out infinite; }

/* ============================================================
   3 — LOOT AUCTION
   ============================================================ */
.auction-titlebar { position:relative; z-index:2; text-align:center; }
.auction-eyebrow { font-family:var(--font-display); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: hsl(var(--primary)); }
.auction-title { font-size: clamp(1.8rem,3.6vw,3rem); color: hsl(var(--foreground)); letter-spacing:.04em; margin-top:.2rem; }
.auction-main { position:relative; z-index:1; flex:1; display:flex; gap: clamp(1rem,3vw,2.6rem); align-items:center; width:min(94%,1100px); min-height:0; }
.auction-item { flex:0 0 clamp(220px,28vw,340px); display:flex; flex-direction:column; gap:.6rem; align-items:center; text-align:center; }
.auction-art { position:relative; width:100%; aspect-ratio:3/4; border-radius:18px; display:grid; place-items:center;
  background: repeating-linear-gradient(135deg, hsl(var(--surface)) 0 12px, hsl(24 16% 13%) 12px 24px);
  border:1px solid hsl(var(--border)); box-shadow: inset 0 0 40px hsl(0 0% 0% /.5); overflow:hidden; }
.auction-art::after { content:''; position:absolute; inset:0; background: radial-gradient(circle at 50% 35%, hsl(var(--primary)/.18), transparent 60%); }
.auction-art-glyph { font-size: clamp(3rem,6vw,5rem); color: hsl(var(--primary)); filter: drop-shadow(0 0 20px hsl(var(--primary)/.6)); }
.auction-art-tag { position:absolute; bottom:.7rem; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: hsl(var(--muted-foreground)); }
.auction-desc { font-size:.86rem; color: hsl(var(--foreground)/.85); line-height:1.4; }
.auction-reqs, .auction-reserve { font-size:.72rem; color: hsl(var(--muted-foreground)); }
.auction-side { flex:1; display:flex; flex-direction:column; align-items:center; gap:1rem; min-width:0; }
.auction-timer { font-family:var(--font-display); font-size: clamp(2.4rem,5vw,4rem); color: hsl(var(--foreground)); font-variant-numeric:tabular-nums; }
.auction-timer span { font-size:.4em; color: hsl(var(--muted-foreground)); margin-left:.1em; }
.auction-timer.low { color: hsl(var(--damage)); animation: df-pulse 1s infinite; }
.auction-hammer { font-size: clamp(2rem,4.5vw,3.4rem); color: hsl(var(--primary)); letter-spacing:.14em; animation: cl-open-rise 1s ease-out both; }
.auction-cards { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.bid-card { width:120px; height:84px; perspective:600px; }
.bid-card-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition: transform .55s cubic-bezier(.4,.8,.3,1); }
.bid-card.revealed .bid-card-inner { transform: rotateY(180deg); }
.bid-face { position:absolute; inset:0; backface-visibility:hidden; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  background: hsl(var(--surface)/.7); border:1px solid hsl(var(--border)); }
.bid-face.back { transform: rotateY(180deg); }
.bid-card.winner .bid-face.back { box-shadow:0 0 28px hsl(var(--primary)); border-color: hsl(var(--primary)); }
.bid-card.tie .bid-face.back { border-color: hsl(var(--primary)/.6); }
.bid-name { font-family:var(--font-display); font-size:.82rem; color: hsl(var(--foreground)); }
.bid-status { font-size:.68rem; letter-spacing:.04em; }
.bid-status.in { color: hsl(var(--heal)); } .bid-status.pass { color: hsl(var(--muted-foreground)); } .bid-status.wait { color: hsl(var(--muted-foreground)); opacity:.7; }
.bid-amount { font-family:var(--font-display); font-size:1.3rem; color: hsl(var(--primary)); }
.bid-win-tag { font-size:.6rem; letter-spacing:.14em; color: hsl(var(--primary)); }

/* auction player overlay */
.auction-ov-inner { width:min(94vw,420px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.auction-ov-eyebrow { font-family:var(--font-display); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color: hsl(var(--primary)); }
.auction-ov-coins { font-size:.86rem; color: hsl(var(--muted-foreground)); }
.auction-bid-display { display:flex; align-items:baseline; gap:.4rem; }
.auction-bid-amt { font-family:var(--font-display); font-size:3.4rem; color: hsl(var(--foreground)); line-height:1; }
.auction-bid-c { font-size:.9rem; color: hsl(var(--muted-foreground)); }
.auction-slider { width:100%; accent-color: hsl(var(--primary)); height:6px; }
.auction-step-row { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; }
.auction-step { font-family:var(--font-body); font-size:.84rem; padding:.5rem .8rem; border-radius:99px; cursor:pointer;
  border:1px solid hsl(var(--border)); background: hsl(var(--surface)); color: hsl(var(--foreground)); min-width:48px; }
.auction-step.max { border-color: hsl(var(--primary)/.6); color: hsl(var(--primary)); }
.auction-step:active { transform: scale(.94); }
.auction-actions { display:flex; gap:.6rem; width:100%; margin-top:.3rem; }
.auction-place { flex:1; padding:.85rem; border-radius:14px; font-family:var(--font-display); font-size:1rem; color: hsl(var(--foreground)); cursor:pointer; }
.auction-place:disabled { opacity:.4; }
.auction-pass { padding:.85rem 1.2rem; border-radius:14px; border:1px solid hsl(var(--border)); background:transparent; color: hsl(var(--muted-foreground)); cursor:pointer; }
.auction-ov-state { font-size:.76rem; color: hsl(var(--muted-foreground)); margin-top:.3rem; }
.auction-ov-result { padding:2rem 0; } .auction-ov-result h2 { font-size:2rem; margin-bottom:.4rem; }

/* ============================================================
   4 — BRANCHING VOTES
   ============================================================ */
.vote-titlebar { position:relative; z-index:2; text-align:center; max-width:min(90%,900px); }
.vote-eyebrow { font-family:var(--font-display); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: hsl(var(--primary)); }
.vote-prompt { font-size: clamp(1.6rem,3.4vw,2.8rem); color: hsl(var(--foreground)); letter-spacing:.02em; margin-top:.3rem; text-wrap:balance; }
.vote-options { position:relative; z-index:1; flex:1; display:grid; gap: clamp(.8rem,2vw,1.4rem); align-content:center; width:min(94%,1000px);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.vote-options.n2 { grid-template-columns: repeat(2,1fr); } .vote-options.n3 { grid-template-columns: repeat(3,1fr); } .vote-options.n4 { grid-template-columns: repeat(2,1fr); }
.vote-card { background: hsl(var(--surface)/.6); border:1px solid hsl(var(--border)/.7); border-radius:16px; padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.6rem; transition: box-shadow .3s; position:relative; }
.vote-card.win { box-shadow: inset 0 0 0 2px hsl(var(--primary)), 0 0 26px hsl(var(--primary)/.25); }
.vote-card-label { font-family:var(--font-display); font-size: clamp(1rem,1.8vw,1.4rem); color: hsl(var(--foreground)); }
.vote-bar-track { height:8px; border-radius:99px; background: hsl(var(--background)/.7); overflow:hidden; }
.vote-bar { height:100%; background: hsl(var(--primary)); border-radius:99px; transition: width .5s ease-out; }
.vote-card-foot { display:flex; align-items:center; justify-content:space-between; }
.vote-count { font-size:.84rem; color: hsl(var(--foreground)); } .vote-count.muted { color: hsl(var(--muted-foreground)); }
.vote-pct { font-family:var(--font-display); color: hsl(var(--primary)); }
.vote-voters { display:flex; flex-wrap:wrap; gap:.3rem; }
.vote-chip { font-size:.66rem; padding:.15rem .5rem; border-radius:99px; background: hsl(var(--surface)); border:1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.vote-win-flag { position:absolute; top:.7rem; right:.8rem; font-size:.6rem; letter-spacing:.14em; color: hsl(var(--primary)); }
.vote-foot { position:relative; z-index:2; font-size:.82rem; }
.vote-tie { color: hsl(var(--primary)); }

/* vote player overlay */
.vote-ov-inner { width:min(94vw,460px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.vote-ov-eyebrow { font-family:var(--font-display); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color: hsl(var(--primary)); }
.vote-ov-prompt { font-size: clamp(1.3rem,6vw,1.7rem); margin-bottom:.4rem; text-wrap:balance; }
.vote-ov-cards { display:flex; flex-direction:column; gap:.6rem; width:100%; }
.vote-ov-card { display:flex; flex-direction:column; align-items:center; gap:.25rem; padding:1rem; border-radius:14px; cursor:pointer;
  color: hsl(var(--foreground)); }
.vote-ov-card.selected { box-shadow: inset 0 0 0 2px hsl(var(--primary)); }
.vote-ov-card.win { box-shadow: inset 0 0 0 2px hsl(var(--primary)), 0 0 22px hsl(var(--primary)/.3); }
.vote-ov-card:disabled { cursor:default; }
.vote-ov-card-label { font-family:var(--font-display); font-size:1.1rem; }
.vote-ov-tick { font-size:.68rem; letter-spacing:.06em; color: hsl(var(--primary)); }
.vote-ov-tick.win { color: hsl(var(--heal)); }
.vote-ov-state { font-size:.78rem; color: hsl(var(--muted-foreground)); margin-top:.3rem; }

/* ============================================================
   5 — SECRET ROLES
   ============================================================ */
.secret-cue { position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:30;
  display:flex; align-items:center; gap:.5rem; padding:.5rem 1.1rem; border-radius:99px;
  background: hsl(265 30% 10% /.7); border:1px solid hsl(265 40% 40% /.5); backdrop-filter: blur(6px); }
.secret-cue-eye { color: hsl(265 60% 70%); animation: df-pulse 2.4s infinite; }
.secret-cue-text { font-family:var(--font-display); font-size:.82rem; letter-spacing:.06em; color: hsl(265 30% 80%); font-style:italic; }

.secret-reveal-stage { position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem;
  padding: clamp(100px,12vh,140px) 2rem 2rem; background: radial-gradient(ellipse at 50% 30%, hsl(265 30% 10% /.9), hsl(20 14% 5% /.96)); overflow:hidden; }
.secret-reveal-title { font-size: clamp(1.8rem,4vw,3rem); color: hsl(var(--foreground)); letter-spacing:.1em; }
.secret-reveal-grid { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; max-width:1100px; }
.secret-reveal-card { width:220px; background: hsl(var(--surface)/.7); border:1px solid hsl(var(--border)); border-radius:16px; padding:1rem; display:flex; flex-direction:column; gap:.4rem; }
.secret-reveal-card.traitor { border-color: hsl(var(--damage)/.6); box-shadow: inset 0 0 0 1px hsl(var(--damage)/.4), 0 0 24px hsl(var(--damage)/.18); }
.secret-rc-name { font-family:var(--font-display); font-size:1.1rem; color: hsl(var(--foreground)); }
.secret-rc-faction { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.secret-rc-faction.traitor { color: hsl(var(--damage)); } .secret-rc-faction.party { color: hsl(var(--heal)); }
.secret-rc-role { font-family:var(--font-display); font-size:.92rem; color: hsl(var(--primary)); }
.secret-rc-objs { display:flex; flex-direction:column; gap:.25rem; margin-top:.3rem; }
.secret-rc-obj { display:flex; gap:.4rem; font-size:.76rem; color: hsl(var(--foreground)/.85); text-align:left; }
.secret-rc-obj.met { color: hsl(var(--heal)); } .secret-rc-obj.failed { color: hsl(var(--damage)); opacity:.8; }
.secret-rc-obj-mark { flex:0 0 auto; }
.secret-verdict { font-family:var(--font-display); font-size: clamp(1rem,2vw,1.4rem); color: hsl(var(--primary)); text-align:center; max-width:40ch; text-wrap:balance; }

/* secret player chip + modal */
.secret-chip { position:fixed; top:.7rem; left:50%; transform:translateX(-50%); z-index:5500;
  display:flex; align-items:center; gap:.4rem; padding:.45rem 1rem; border-radius:99px; cursor:pointer;
  font-family:var(--font-display); font-size:.8rem; letter-spacing:.04em;
  background: hsl(265 30% 12% /.85); border:1px solid hsl(265 40% 45% /.6); color: hsl(265 30% 84%); backdrop-filter: blur(6px); }
.secret-chip.traitor { border-color: hsl(var(--damage)/.55); }
.secret-chip.open { background: hsl(var(--surface)/.9); border-color: hsl(var(--primary)/.5); color: hsl(var(--foreground)); }
.secret-chip-mask { font-size:1rem; }
.secret-modal { position:fixed; inset:0; z-index:6500; display:grid; place-items:center; padding:1.2rem; background: hsl(20 14% 4% /.86); backdrop-filter: blur(4px); }
.secret-card { width:min(92vw,380px); background: hsl(var(--surface)); border:1px solid hsl(var(--border)); border-radius:20px; padding:1.2rem; display:flex; flex-direction:column; gap:.8rem; }
.secret-card.traitor { border-color: hsl(var(--damage)/.5); }
.secret-card-head { display:flex; align-items:center; justify-content:space-between; }
.secret-card-eyebrow { font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color: hsl(var(--muted-foreground)); }
.secret-card-x { background:none; border:none; color: hsl(var(--muted-foreground)); font-size:1.1rem; cursor:pointer; }
.secret-card-body { position:relative; min-height:120px; }
.secret-card .face { filter: blur(9px); transition: filter .25s; }
.secret-card.viewing .face { filter:none; }
.secret-cover { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); letter-spacing:.06em; color: hsl(var(--muted-foreground)); }
.secret-faction-badge { display:inline-block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; padding:.2rem .6rem; border-radius:99px; margin-bottom:.5rem; }
.secret-faction-badge.party { color: hsl(var(--heal)); background: hsl(var(--heal)/.12); }
.secret-faction-badge.traitor { color: hsl(var(--damage)); background: hsl(var(--damage)/.14); }
.secret-role-name { font-size:1.5rem; color: hsl(var(--primary)); margin-bottom:.5rem; }
.secret-objs { display:flex; flex-direction:column; gap:.4rem; text-align:left; }
.secret-obj { display:flex; gap:.5rem; font-size:.9rem; color: hsl(var(--foreground)); line-height:1.4; }
.secret-obj.met { color: hsl(var(--heal)); } .secret-obj.failed { color: hsl(var(--damage)); }
.secret-obj-dot { flex:0 0 auto; }
.secret-hold-btn { padding:.9rem; border-radius:14px; border:1px solid hsl(var(--primary)/.5); background: hsl(var(--primary)/.12);
  color: hsl(var(--foreground)); font-family:var(--font-display); font-size:.95rem; cursor:pointer; user-select:none; touch-action:none; }
.secret-hold-btn:active { background: hsl(var(--primary)/.22); }
.secret-card-note { font-size:.72rem; color: hsl(var(--muted-foreground)); text-align:center; }

/* host: secret assignment list */
.secret-host-list { display:flex; flex-direction:column; gap:.5rem; }
.secret-host-row { background: hsl(var(--background)/.5); border:1px solid hsl(var(--border)/.6); border-radius:12px; padding:.55rem .65rem; display:flex; flex-direction:column; gap:.35rem; }
.secret-host-row.traitor { border-color: hsl(var(--damage)/.45); }
.shr-top { display:flex; align-items:center; gap:.5rem; }
.shr-name { font-family:var(--font-display); font-size:.82rem; color: hsl(var(--foreground)); }
.shr-fac { font-size:.7rem; color: hsl(var(--muted-foreground)); flex:1; }
.shr-fac.traitor { color: hsl(var(--damage)); } .shr-fac.party { color: hsl(var(--heal)); }
.shr-obj { display:flex; align-items:center; gap:.4rem; }
.shr-obj-text { flex:1; font-size:.74rem; color: hsl(var(--foreground)/.85); }

@media (max-width: 720px){
  .auction-main { flex-direction:column; gap:1rem; }
  .auction-item { flex-basis:auto; max-width:200px; }
  .df-grid { grid-template-columns: 1fr; }
}