.board { position: absolute; inset: 64px 0 230px 0; z-index: 5; }
.board .floor, .board .flow-layer { position: absolute; inset: 0; pointer-events: none; }
.board .flow-layer { z-index: 90; }
.board .ring-dash { animation: ringflow 6s linear infinite; }
@keyframes ringflow { to { stroke-dashoffset: 120; } } /* clockwise visual drift */

/* pads: an ellipse disc lying on the floor + label below */
.pad { position: absolute; width: 0; height: 0; cursor: pointer; }
.pad-disc { position: absolute; left: calc(-62px * var(--sc)); top: calc(-21px * var(--sc)); width: calc(124px * var(--sc)); height: calc(42px * var(--sc)); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(167,123,255,.28), rgba(42,29,68,.5) 60%, transparent 72%);
  border: 1px solid rgba(167,123,255,.55); box-shadow: 0 0 18px rgba(139,92,246,.25); transition: border-color .2s, box-shadow .2s, background .2s; }
.pad.st-retro .pad-disc { border-color: rgba(255,43,60,.5); background: radial-gradient(closest-side, rgba(255,43,60,.18), rgba(90,7,16,.4) 60%, transparent 72%); }
.pad.st-signal .pad-disc { border-color: rgba(31,182,209,.6); background: radial-gradient(closest-side, rgba(31,182,209,.2), rgba(11,70,81,.4) 60%, transparent 72%); }
.pad.pressured .pad-disc { box-shadow: 0 0 0 1px rgba(255,43,60,.35), 0 0 26px rgba(255,43,60,.35); }
.pad.bottleneck .pad-disc { border-color: var(--red-hot); animation: neck 1.2s ease-in-out infinite; }
@keyframes neck { 50% { box-shadow: 0 0 30px rgba(255,43,60,.6); } }
.pad.target .pad-disc { border-color: var(--paper); border-width: 2px; box-shadow: 0 0 0 4px rgba(244,244,239,.08), 0 0 34px rgba(167,123,255,.7); animation: tgt .9s ease-in-out infinite; }
@keyframes tgt { 50% { transform: scale(1.08); } }
.pad.disabled .pad-disc { filter: grayscale(1) brightness(.5); }
.pad-label { position: absolute; left: 50%; top: calc(28px * var(--sc)); padding: 2px 4px; background: var(--ink-0); transform: translateX(-50%); white-space: nowrap; display: flex; gap: 8px; align-items: baseline; font-size: calc(11px * var(--fs)); letter-spacing: .04em; text-shadow: 0 1px 0 #000, 0 0 8px #000; }
.pad-label .io { color: var(--paper-2); font-weight: 700; }
.pad-label .io i { font-style: normal; color: var(--muted); padding: 0 2px; }
.pad-label .of { color: var(--red-hot); font-weight: 700; }
.pad-label .of small { font-weight: 400; opacity: .8; }

/* cards standing on the floor: anchor = bottom centre */
.card.on-board { position: absolute; transform: translate(-50%, -100%) translateY(-6px); cursor: pointer; }
.card.on-board:hover { transform: translate(-50%, -100%) translateY(-14px); }
.card.on-board::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: -10px; height: 10px; background: radial-gradient(closest-side, rgba(0,0,0,.8), transparent); }
.card.crisis-actor { transform: translate(-50%, -100%) translateY(-2px); animation: hover 3.2s ease-in-out infinite; }
@keyframes hover { 50% { transform: translate(-50%, -100%) translateY(-8px); } }
.card.crisis-actor.targetable { outline: 2px solid var(--paper); outline-offset: 3px; animation: none; cursor: crosshair; }
.card.hit { animation: hit .5s var(--ease); }
@keyframes hit { 20% { filter: brightness(2.2) saturate(1.5); transform: translate(-50%, -100%) translateX(6px); } 45% { transform: translate(-50%, -100%) translateX(-5px); } }

.ghost-slot { position: absolute; transform: translate(-50%, -100%) translateY(-8px); width: calc(96px * var(--sc)); height: calc(120px * var(--sc)); border: 1px dashed rgba(244,244,239,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: calc(11px * var(--fs)); color: var(--paper-2); background: repeating-linear-gradient(135deg, rgba(244,244,239,.03) 0 6px, transparent 6px 12px), rgba(10,7,18,.48); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); cursor: pointer; }
.ghost-slot small { font-size: calc(9px * var(--fs)); opacity: .7; text-align: center; padding: 0 6px; }

.core { position: absolute; transform: translate(-50%, -100%); text-align: center; z-index: 8; pointer-events: none; }
.core-k { font-size: calc(9px * var(--fs)); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.core-v { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.core-v .clar { font-family: var(--brand); font-size: calc(44px * var(--fs)); color: var(--violet-hot); text-shadow: 0 0 24px rgba(167,123,255,.6); line-height: 1; }
.core-v span { color: var(--paper-2); font-size: calc(12px * var(--fs)); }
.core-n { font-size: calc(11px * var(--fs)); color: var(--paper-2); margin-top: 2px; }
.core-n b { color: var(--paper); }
.core-n b.up { color: var(--red-hot); }
.noise-pool { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin: 0 0 6px; font-size: calc(9px * var(--fs)); line-height: 1; color: rgba(255,43,60,.55); opacity: .8; }
.noise-pool b { color: var(--red-hot); }

.pop { position: absolute; z-index: 120; transform: translate(-50%, -50%); font-family: var(--brand); font-size: calc(30px * var(--fs)); pointer-events: none; animation: pop .65s var(--ease) forwards; text-shadow: 0 0 14px currentColor; }
.pop.dmg { color: var(--violet-hot); }
.pop.bad { color: var(--red-hot); }
.pop.good { color: var(--cyan); }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 25% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }

/* week tally: a chip per station as the pulse passes, the core counter carries the running value */
.count-chip { position: absolute; z-index: 110; transform: translate(-50%, -100%); min-width: 64px; padding: 6px 10px 5px; background: rgba(5,4,7,.9); border: 1px solid currentColor; box-shadow: 0 0 22px -6px currentColor; font-family: var(--brand); font-size: calc(30px * var(--fs)); line-height: 1; text-align: center; pointer-events: none; text-shadow: 0 0 16px currentColor; animation: chip 1.3s var(--ease) forwards; }
.count-chip small { display: block; margin-top: 3px; font-family: var(--mono); font-size: calc(10px * var(--fs)); letter-spacing: .12em; color: var(--paper-2); text-shadow: none; }
.count-chip em { display: block; margin-top: 2px; font-style: normal; font-family: var(--mono); font-size: calc(11px * var(--fs)); color: var(--red-hot); text-shadow: 0 0 10px rgba(255,43,60,.6); }
.count-chip.narrow small { color: var(--red-hot); }
@keyframes chip {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(.6); }
  14% { opacity: 1; transform: translate(-50%, -100%) scale(1.18); }
  28% { transform: translate(-50%, -100%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -150%); }
}
.core-v .clar { display: inline-block; }
.core-v .clar.bump { animation: bump .34s var(--ease); }
@keyframes bump { 0% { transform: scale(1.55); color: var(--paper); } 100% { transform: scale(1); } }

/* projection breakdown under the core numbers */
.core-f { margin: 3px auto 0; font-size: calc(10.5px * var(--fs)); line-height: 1.35; color: var(--paper-2); text-wrap: balance; }
.core-f .pi { margin-right: 5px; }
/* light again (15.10, Alex: «half-transparent, as it was»): a thin veil that dims the ring's lines under the numbers and
   lets the board show through; it firms up only while a card is previewed */
.core-read { position: relative; width: max-content; max-width: 300px; padding: 6px 12px 7px; background: radial-gradient(120% 110% at 50% 10%, rgba(18,12,32,.46), rgba(8,5,14,.22) 72%); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); border: 1px solid rgba(167,123,255,.13); clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px); transition: background .25s, border-color .25s; }
.core.previewing .core-read { border-color: rgba(167,123,255,.42); background: radial-gradient(120% 110% at 50% 10%, rgba(36,23,62,.72), rgba(8,5,14,.5) 72%); }
.core-k { opacity: .75; }
.core-read .core-n { white-space: nowrap; }
.core-v .clar { font-size: calc(36px * var(--fs)); }
.core-week { margin-top: 5px; padding-top: 4px; border-top: 1px dashed rgba(244,244,239,.1); }
.core-wk { font-size: calc(8.5px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); opacity: .8; }
/* the inflow under the clarity, then a line per meter the week's end moves: now → after and what moves it */
.core-in { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 4px; font-size: calc(10.5px * var(--fs)); color: #7fd3e4; margin-top: 1px; }
.core-in b { color: var(--paper); }
.core-in small { color: var(--muted); font-size: calc(9.5px * var(--fs)); text-wrap: balance; }
.core-m { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 5px; margin-top: 2px; font-size: calc(10.5px * var(--fs)); line-height: 1.35; color: var(--paper-2); }
.core-m b { color: var(--paper); white-space: nowrap; }
.core-m.down b { color: var(--red-hot); }
.core-m.up b { color: #8fe0b8; }
.core-m small { color: var(--muted); font-size: calc(9.5px * var(--fs)); text-wrap: balance; }
.core-f.calm { color: var(--muted); font-size: calc(9.5px * var(--fs)); }
.core-k kbd { font: inherit; font-size: calc(8px * var(--fs)); letter-spacing: 0; padding: 0 3px; margin-left: 4px; border: 1px solid rgba(244,244,239,.18); color: var(--muted); }
/* no room between the first fight's hint and the front retro card: the title lines go, the number shrinks */
.core.tight .core-k, .core.tight .core-wk { display: none; }
.core.tight .core-v .clar { font-size: calc(26px * var(--fs)); }
.core.tight .core-read { max-width: 320px; }
.core.tight .core-week { margin-top: 3px; padding-top: 2px; }
/* P: the clarity alone */
.core.brief .core-read { padding: 4px 10px 5px; }
.core-f b { color: var(--paper); }
.core-f.good { color: var(--violet-hot); }
.core-f.bad { color: var(--red-hot); }
.core-f.warn { color: #ff9a3d; }

/* effective pass on a board card when it differs from the printed one */
.card.on-board .cap-now { position: absolute; left: calc(78px * var(--s, 1)); bottom: calc(8px * var(--s, 1)); z-index: 3; padding: 0 calc(5px * var(--s, 1)); font-family: var(--brand); font-size: calc(12px * var(--s, 1)); line-height: 1.4; background: var(--ink-0); border: 1px solid var(--violet-hot); color: var(--violet-hot); box-shadow: 0 0 14px -4px var(--violet-hot); pointer-events: auto; }
.card.on-board .cap-now.down { border-color: var(--red-hot); color: var(--red-hot); box-shadow: 0 0 14px -4px var(--red-hot); }

/* the readout under each disc is one flex item group; the preview swaps it in place */
.pad-label .read { display: contents; }
.pad-label .io b { color: var(--paper); }
.pad-label .io.pv-up, .pad-label .io.pv-up b { color: var(--violet-hot); text-shadow: 0 0 10px rgba(167,123,255,.8), 0 1px 0 #000; }
.pad-label .io.pv-down, .pad-label .io.pv-down b { color: var(--red-hot); }
.pad.pv-gain .pad-disc { box-shadow: 0 0 0 2px rgba(167,123,255,.7), 0 0 36px rgba(167,123,255,.55); }
.pad.pv-loss .pad-disc { box-shadow: 0 0 0 2px rgba(255,43,60,.6), 0 0 30px rgba(255,43,60,.4); }
.pad-label .load i.nw { animation: cell-new .9s var(--ease) infinite alternate; border-color: var(--violet-hot); }
.pad-label .load i.c.nw { background: rgba(167,123,255,.25); }
.pad-label .load i.gone { border-style: dashed; border-color: rgba(255,43,60,.6); opacity: .7; }
@keyframes cell-new { from { transform: scale(1); box-shadow: 0 0 0 rgba(167,123,255,0); } to { transform: scale(1.35); box-shadow: 0 0 10px rgba(167,123,255,.9); } }

/* the core answers the card in hand: this week without the move, an arrow, the week with it */
.core.previewing .core-k { color: var(--violet-hot); letter-spacing: .08em; text-transform: none; }
.core .pv-to { display: inline-flex; align-items: baseline; gap: 4px; animation: pv-in .22s var(--ease); }
.core-v .pv-to i { font-style: normal; color: var(--muted); font-size: calc(20px * var(--fs)); }
.core-v .pv-to b { font-family: var(--brand); font-size: calc(44px * var(--fs)); line-height: 1; }
.core-v .pv-to small { font-size: calc(12px * var(--fs)); font-weight: 700; }
.core .pv-to.up b, .core .pv-to.up small { color: #c8a8ff; text-shadow: 0 0 22px rgba(167,123,255,.85); }
.core .pv-to.down b, .core .pv-to.down small { color: var(--red-hot); text-shadow: 0 0 18px rgba(255,43,60,.6); }
.core .pv-note { display: block; font-size: calc(10.5px * var(--fs)); line-height: 1.35; color: var(--paper-2); margin: 3px 0 2px; text-wrap: balance; }
.core .pv-note b { color: var(--red-hot); }
.pad.pv-neck .pad-disc { animation: neck 0.8s ease-in-out infinite alternate; }
.pad.pv-neck .pad-label .brace b { color: var(--red-hot); }
@keyframes neck { from { box-shadow: 0 0 0 2px rgba(255,43,60,.35), 0 0 12px rgba(255,43,60,.2); } to { box-shadow: 0 0 0 3px rgba(255,43,60,.85), 0 0 40px rgba(255,43,60,.6); } }
.core.previewing .core-v .clar { opacity: .55; }
.core-n .pv-to b { font-size: inherit; }
@keyframes pv-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pad-label .load i.nw, .core .pv-to, .pad.pv-neck .pad-disc { animation: none; } }

/* a decoy crisis (incidents): the fight ends without closing it – a dashed frame and a tag */
.crisis-actor.decoy { outline: 1px dashed rgba(255,214,102,.75); outline-offset: 3px; filter: saturate(.7); }
.crisis-actor .decoy-tag { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); padding: 1px 6px; font-style: normal; font-size: calc(9px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: #ffd666; background: rgba(7,4,12,.92); border: 1px dashed rgba(255,214,102,.75); white-space: nowrap; pointer-events: auto; }

/* 15.10 (Alex: «the plate in the centre – make it beautiful, keep it light»): an instrument readout over the ring –
   corner brackets in place of a box, the label on a small tab with a live pip, the clarity number lit from above,
   a hairline between the move and the end of the week, a soft glow on the floor under it */
.core-read { --cb: rgba(167,123,255,.5); --cg: radial-gradient(95% 125% at 50% 0%, rgba(30,19,54,.52), rgba(8,5,14,.16) 76%);
  --brk: linear-gradient(var(--cb), var(--cb)) 0 0 / 12px 1px no-repeat, linear-gradient(var(--cb), var(--cb)) 0 0 / 1px 12px no-repeat,
    linear-gradient(var(--cb), var(--cb)) 100% 0 / 12px 1px no-repeat, linear-gradient(var(--cb), var(--cb)) 100% 0 / 1px 12px no-repeat,
    linear-gradient(var(--cb), var(--cb)) 0 100% / 12px 1px no-repeat, linear-gradient(var(--cb), var(--cb)) 0 100% / 1px 12px no-repeat,
    linear-gradient(var(--cb), var(--cb)) 100% 100% / 12px 1px no-repeat, linear-gradient(var(--cb), var(--cb)) 100% 100% / 1px 12px no-repeat;
  padding: 9px 18px 9px; border: 0; clip-path: none; background: var(--brk), var(--cg); }
.core.previewing .core-read { --cb: var(--violet-hot); --cg: radial-gradient(95% 125% at 50% 0%, rgba(40,25,72,.74), rgba(8,5,14,.46) 76%); background: var(--brk), var(--cg); }
.core-read::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px); }
.core-read::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -16px; height: 14px; pointer-events: none; background: radial-gradient(closest-side, rgba(167,123,255,.3), transparent); filter: blur(3px); }
.core-k { display: inline-flex; align-items: center; gap: 6px; margin: -1px auto 3px; padding: 1px 9px 1px 7px; font-size: calc(8.5px * var(--fs)); color: #cdbdf2; background: rgba(167,123,255,.13); opacity: 1; }
.core-k::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--violet-hot); box-shadow: 0 0 6px var(--violet-hot); animation: core-pip 2.4s ease-in-out infinite; }
@keyframes core-pip { 50% { opacity: .3; } }
.core-v .clar { font-size: calc(40px * var(--fs)); color: #e4d6ff; text-shadow: 0 0 18px rgba(167,123,255,.75), 0 0 2px rgba(255,255,255,.6); }
.core-v .cv-i { filter: drop-shadow(0 0 6px rgba(167,123,255,.8)); }
.core-week { border-top: 0; padding-top: 6px; margin-top: 6px; background: linear-gradient(90deg, transparent, rgba(167,123,255,.4), transparent) top / 100% 1px no-repeat; }
.core-wk { color: #a99cc4; }
.cw-c { padding: 1px 7px 1px 5px; background: rgba(9,6,16,.35); box-shadow: inset 2px 0 0 rgba(31,182,209,.6); }
.cw-c.warn { box-shadow: inset 2px 0 0 rgba(255,154,61,.75); }
.cw-c.bad { box-shadow: inset 2px 0 0 rgba(255,43,60,.8); }
@media (prefers-reduced-motion: reduce) { .core-k::before { animation: none; } }