/* measure/measure.css — THE MEASURE's screens (docs/the-measure-spec.md §9/§10). * * Framed as a COMIC PANEL, not a spreadsheet: paper ground, ink borders, halftone behind * the foe faces, captions in the mission-control voice the rest of the game speaks * (docs/ui-design-system.md). Mobile-first — the grid, the party strip and the command * rail all stack on a phone, and every hit target clears 44px. * * It reuses the onboarding chrome (.ob-overlay / .ob-frame / .fx-key / .ob-focused) rather * than minting a parallel look; only the board's own furniture is new here. * * THE MOBILE PASS (playtest 2026-08-28) reworked the footer into THE ACTION BAR (`.ms-bar*`, * finding 3) and added the hit-FX layer (`.ms-foe-hit`/`.ms-foe-crit`/`.ms-dmg-float`/…, * finding 5). The old standing caption (`.ms-caption*`) is gone — finding 4 — and its * vertical budget went to the grid. */ /* ── THE SEAWORTHY HULL (2026-08-29 hull pass) ────────────────────────────── * `.ob-overlay` (styles.css) is `position:fixed; inset:0`, which on a dynamic-toolbar * mobile browser resolves against the LARGE viewport — at a real iPhone Safari 402x932-large * /402x660-visible split the overlay came out 932px tall while only 660px was actually on * screen, and the gap is exactly the elastic distance iOS lets a touch drag the document * into (the reported "page scrolls" bug). `height:100svh` (the SMALL viewport — what is * actually visible right now) wins the CSS 10.6.4 over-constrained resolution against * `inset:0`'s `top:0;bottom:0` — with an explicit height also set, `bottom` is the one * recomputed, so the box stays pinned to the top at exactly the visible height. `100vh` * stays first as the fallback for a browser with no `svh` support (an unsupported value * invalidates only that one declaration, leaving the earlier one live). `overscroll-behavior` * stops the page-level bounce from ever engaging on this screen; `touch-action` drops the * double-tap-to-zoom delay on its buttons. Scoped to `.ms-overlay` only — no other * `.ob-overlay` screen's sizing or touch behavior changes. */ .ms-overlay { /* THE ZOOM FIX (2026-10-04): under the UI SCALE `zoom` (styles.css `.ob-overlay`) — or any zoom up the tree — a viewport-unit length paints at zoom × the viewport, so this box covered only zoom² of the screen (measured at 0.75: 322×552 of a 430×736 page, the FPS canvas showing through below and to the right — Jeff's "empty black space"). Divide by the zoom in effect: `--ms-zoom` is the MEASURED effective zoom board.js `_fitZoom()` writes on a real mount, the `--ui-scale` fallback the one zoom this codebase sets itself. The WIDTH is set the same way by `_fitZoom()` inline (`calc(100vw / z)`), only on a real fixed mount and only under a zoom, so the headless harness, which mounts the board inside a 430px host, keeps its box. */ height: calc(100vh / var(--ms-zoom, var(--ui-scale, 1))); height: calc(100svh / var(--ms-zoom, var(--ui-scale, 1))); /* THE FIGURE'S REAL BOX (2026-08-29) — establishes the `cqw` reference `.ms-figure-body` below resolves against; see that rule's own comment for why `vw` alone isn't safe to measure headlessly. `.ms-overlay` always spans the true device width in real play, so this changes nothing on a device — it only stops a nested fake-width test mount from silently reading past its own edges. */ container-type: inline-size; overscroll-behavior: none; touch-action: manipulation; } /* ── THE PALETTE (2026-08-29 hull pass) ───────────────────────────────────── * The board's hardcoded hex literals, named once. Pure refactor — every rendered value * below is byte-identical to the literal it replaces; only the `var()` indirection is new. * `--ms-accent`/`--ms-world-accent`/`--ms-pw-accent`/`--ms-cutin-accent` are a DIFFERENT * family (per-instance JS-set accents with their own inline fallback) and are untouched. */ .ms-overlay { --ms-gold: #ffd76a; /* the one warm accent: cursor, CAST/ENTER, ready meters */ --ms-shock: #5bc8f5; /* shock element */ --ms-burn: #ff6b2b; /* burn element */ --ms-rupture: #c45ff0; /* rupture element */ --ms-kinetic: #d8ecff; /* kinetic element + the Conduit shield/tether mark */ --ms-hp-foe: #b83333; /* enemy HP fill */ --ms-hp-party: #7fd67f; /* party HP fill */ --ms-boss-gold: #f2c350; /* boss border + the elite tier's HP fill */ --ms-party-danger: #ff6b6b; /* damage dealt TO the party + the DOWN tag */ --ms-ink: #f4efe4; /* the standard off-white text colour */ --ms-ink-on-gold: #0b0d12; /* dark text drawn on a gold surface (CAST, tiers, etc.) */ --ms-white: #fff; /* pure-white emphasis (crit flash, hover outline) */ } /* ── The board ───────────────────────────────────────────────────────────── */ .ms-overlay .ms-stage { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: clamp(10px, 2.4vh, 22px) clamp(10px, 2.6vw, 28px); /* The rail is the surface a thumb touches every single turn, so it must clear the home indicator rather than sit under it (docs/measure-phone-controls.md §3.2). */ padding-bottom: calc(clamp(10px, 2.4vh, 22px) + env(safe-area-inset-bottom, 0px)); overflow: hidden; } .ms-head { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.16); flex: 0 0 auto; } .ms-kv { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; letter-spacing: 0.06em; } .ms-kv-v { color: var(--ms-ink); font-variant-numeric: tabular-nums; } .ms-kv-meter { gap: 8px; min-width: 0; } /* THE SEAWORTHY HULL — the meter row's label + value are text with no shrink budget to give up (a flex item's automatic minimum size is its own content, unless told otherwise), so at a narrow effective width the BAR has to be the only thing that gives: `min-width:0` removes its own content-based floor so it can shrink toward zero, and the label/value get `flex-shrink:0` so they are never the ones asked to wrap or clip off the right edge. */ .ms-kv-meter .fx-key { flex: 0 0 auto; } .ms-kv-meter .ms-kv-v { flex: 0 0 auto; white-space: nowrap; } .ms-meter { width: clamp(70px, 12vw, 140px); height: 7px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); position: relative; overflow: hidden; flex: 1 1 auto; min-width: 0; } .ms-meter-fill { position: absolute; inset: 0 auto 0 0; background: var(--ms-shock); transition: width 180ms ease; } .ms-kv-meter.ms-meter-ready .ms-meter-fill { background: var(--ms-gold); box-shadow: 0 0 10px rgba(255,215,106,0.7); } .ms-kv-meter.ms-meter-broken .ms-meter-fill { background: var(--ms-burn); } .ms-kv-meter.ms-meter-broken .ms-kv-v { color: var(--ms-burn); font-weight: 700; } /* ── The 4x3 grid ────────────────────────────────────────────────────────── */ .ms-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(var(--ms-cols, 4), 1fr); gap: clamp(5px, 1vw, 12px); /* CENTER, not start: the grid is the flex child that takes the slack, and starting the rows left a tall phone with a screen of dead space between the last foe and the party strip. The board is a comic PANEL — the wave belongs in the middle of it. */ align-content: center; } .ms-cell { position: relative; min-height: 0; border: 1px solid rgba(255,255,255,0.14); background: rgba(8,10,14,0.5); display: flex; flex-direction: column; gap: 4px; padding: 5px; overflow: hidden; } .ms-cell-empty { border-style: dashed; opacity: 0.28; } .ms-foe { cursor: pointer; text-align: left; font: inherit; color: inherit; border-color: color-mix(in srgb, var(--ms-accent) 55%, transparent); transition: transform 120ms ease, box-shadow 120ms ease; } /* `:not(.ms-world-figure)` on both rules below (found investigating the standing 'scene/every-figure-and-its-cursor-plate-stay-inside-the-scene' failure, 2026-08-29 — a REAL bug, not a harness artifact): `.ms-grid`'s old 4x3 card tray is fully DELETED from board.js (THE COCKPIT FRAME) — `.ms-foe` is minted ONLY on `.ms-world-figure` cards now ('scene/phone-world-replaces-the-grid' asserts `.ms-grid` no longer exists at all) — but these two rules are dead-code leftovers from the tray era, still selecting on `.ms-foe` alone. `.ms-foe.ms-cursor{transform:none}` ties `.ms-world-figure.ms-cursor`'s own transform rule above at (0,0,2,0) specificity and this rule comes SECOND in cascade order, so it was winning outright and cancelling the cursor'd figure's entire placement transform (anchor translate + tier scale + THE FIGURE FLOOR's own edge nudge) — not overriding one property, erasing all of it. That collapsed the cursor'd figure to its untransformed top-left corner, which is exactly why the DEFAULT-cursor'd body in every run of that failing test sat outside the scene. */ .ms-foe:not(.ms-world-figure):hover, .ms-foe:not(.ms-world-figure).ob-focused { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--ms-accent), 0 6px 18px rgba(0,0,0,0.55); outline: none; } .ms-foe-boss { border-width: 2px; border-color: var(--ms-boss-gold); } /* THE CURSOR — the "point you can move around". It is deliberately LOUDER than the focus ring: focus says "the pad is here", the cursor says "this is what the command will hit", and on a phone those are the same thing but on a pad they are not. */ /* A foe that is BOTH the cursor and the pad focus should carry one visual language, not two stacked rings — the cursor wins and the focus treatment stands down. */ .ms-foe.ms-cursor:not(.ms-world-figure) { transform: none; } .ms-cursor { box-shadow: 0 0 0 2px var(--ms-gold), 0 0 16px rgba(255,215,106,0.45) !important; } .ms-foe.ms-cursor::after { content: '▼'; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); color: var(--ms-gold); font-size: 0.8rem; line-height: 1; text-shadow: 0 0 6px rgba(255,215,106,0.8); } /* The ally cursor is drawn whenever an ally-facing cast is armed — BOTH cursors at once, one commit. `-live` is the one the ◀/▶ are currently steering. */ .ms-cursor-live { border-color: var(--ms-gold) !important; background: rgba(255,215,106,0.10); } /* ── THE REACH IS LIT (THE SUPPORT PASS's presentation half, 2026-08-30) ────────────────── * A rider that lands on the whole party or the whole enemy row lights EVERY body it lands * on while it is armed. Deliberately one step QUIETER than `.ms-cursor` (1px ring, no glow, * no ▼ caret): the cursor still says "this is the one you are steering", the reach mark says * "and these come with it" — one visual family (the same gold), two weights, never two * competing rings. The cursor'd card carries both classes and `.ms-cursor`'s own * `!important` box-shadow wins outright, which is the intended order. * NOTE the deliberate `:not(.ms-world-figure)` shape, matching `.ms-cursor`'s own split * below: a free-standing world figure gets its mark on the PLATE (a gold rectangle drawn * around a standing robot reads as a card tray — the 2026-08-29 finding), never on the card. */ .ms-reach:not(.ms-world-figure) { box-shadow: 0 0 0 1.5px rgba(255,215,106,0.7); background: rgba(255,215,106,0.055); } .ms-world-figure.ms-reach .ms-plate { box-shadow: 0 0 0 1.5px rgba(255,215,106,0.72), 0 0 10px rgba(255,215,106,0.22); border-color: color-mix(in srgb, var(--ms-gold) 55%, transparent); } /* The standing hero figure has no plate to mark — a soft gold cast on the body itself, the same weight the foe plate's ring carries and clearly under `.ms-cursor`'s bracket. */ .ms-world-hero.ms-reach .ms-figure-body { filter: drop-shadow(0 0 6px rgba(255,215,106,0.5)); } /* A Conduit-tethered body cannot be damaged at all — the mark has to read as a HARD gate, because that is exactly what it is in the resolver (§7: kill the Conduit to strip it). THE COCKPIT PASS (defect 2, 2026-08-29): scoped to `.ms-figure-body` only, both the saturation AND the hatch overlay — the old rule painted the WHOLE card (plate included), which among free-standing world figures read as a leftover card-tray box wrapped around the entire figure. `.ms-shield-mark` is now appended as a CHILD of `.ms-figure-body` (board.js `_worldFigureCard`) so its `inset:0` sizes to that box alone; this is shared code for both platforms (`_worldFigureCard` has no desktop/phone fork), so the desktop world's shield read changes identically — the one permitted desktop visual change here. */ .ms-foe-shielded .ms-figure-body { filter: saturate(0.6); } /* THE TETHER IS A BUBBLE (2026-10-04): the hatch was a RECTANGLE around the body, which on the phone read as one more grey card behind the robot (Jeff: "better handling of the enemy cards"). Same element, same kinetic stroke and hatch, drawn as the field it is. */ .ms-shield-mark { position: absolute; inset: 2% 4%; pointer-events: none; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ms-kinetic) 80%, transparent); background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(216,236,255,0.16) 100%), repeating-linear-gradient(45deg, rgba(216,236,255,0.07) 0 6px, transparent 6px 12px); box-shadow: 0 0 10px rgba(160,210,255,0.35), inset 0 0 12px rgba(160,210,255,0.25); } .ms-face { position: relative; flex: 1 1 auto; min-height: 42px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ms-face img, .ms-face .ms-plate { max-width: 100%; max-height: 100%; object-fit: contain; } /* Tier 2's halftone backdrop — what keeps the offline fallback inside the comic frame rather than looking like a debug view (§9 THE HONEST COST). */ .ms-face-t2::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--ms-accent) 34%, transparent) 0%, transparent 68%), repeating-radial-gradient(circle at 0 0, rgba(255,255,255,0.07) 0 1px, transparent 1px 4px); } .ms-foe-name { font-size: 0.6rem; letter-spacing: 0.08em; color: var(--ms-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ms-hp { height: 5px; background: rgba(255,255,255,0.12); position: relative; overflow: hidden; } /* THE HIT LANDS (item 2b, THE COCKPIT PASS · PASS 2) — the bar TWEENS to its new width * rather than snapping; the numeral overlay (`.ms-hp-nums`) still snaps, since the exact * number is the information and the bar is only the glance. Shared by every `.ms-hp-fill` * user — foe plates, the party window's bars, AND the strip chips' own bars * (`.ms-chip-hp .ms-hp-fill`) — one rule, three surfaces. */ .ms-hp-fill { position: absolute; inset: 0 auto 0 0; background: var(--ms-hp-foe); transition: width var(--ms-hp-tween-ms, 240ms) ease-out; } .ms-hp-party { background: var(--ms-hp-party); } .ms-shield-fill { position: absolute; inset: 0 auto 0 0; height: 2px; background: var(--ms-shock); } /* THE WARD (docs/the-measure-spec.md §9) — a party member's PROTECTION painted inside their * own HP bar, right-aligned, so no card/chip/strip grows by a pixel. Two segments, and they * deliberately do not look alike: a cast ABSORB is solid (it stands until spent), a BANKED * overheal is HATCHED (§6.1 — it decays, three rounds, and the desktop chip says by when). * Sits under `.ms-hp-nums`, which is appended after it, so the numerals still win. */ /* Spans the WHOLE bar (inset:0) — the segments' widths are percentages of the member's * maxHp, and a shrink-to-fit box would resolve them against its own zero content width. The * segments sit at the right end via `justify-content`. */ .ms-ward { position: absolute; inset: 0; display: flex; justify-content: flex-end; pointer-events: none; } .ms-ward-seg { height: 100%; } /* Both segments are deliberately dimmer than the HP fill under them: the numerals * (`.ms-hp-nums`, cream on a dark shadow) are drawn OVER the ward and must stay the most * legible thing on the bar — a full-strength shock fill washed them out at chip size. */ .ms-ward-absorb { background: var(--ms-shock); opacity: 0.55; } .ms-ward-banked { background: repeating-linear-gradient(135deg, rgba(91,200,245,0.55) 0 2px, rgba(91,200,245,0.12) 2px 5px); } .ms-tier-line .ms-hp-fill { background: #e89020; } .ms-tier-specialist .ms-hp-fill { background: #9a5cff; } .ms-tier-elite .ms-hp-fill { background: var(--ms-boss-gold); } /* The two prime dots ARE the composition readout (§5.2). */ .ms-primes { display: flex; align-items: center; gap: 3px; } /* THE ROW IS CENTRED AND NOTHING TOUCHES (Jeff 2026-10-09: "center the prime dots, and i don't * like it when they collide with each other"). On a plate the dots sit centred under the HP * bar, the composition word riding after them as one centred group. The gap is sized off the * largest scale either stack ever reaches — a landing pulse (1.45) beside a FOCUSED strain * (1.28) grows 13 px bubbles by (0.45 + 0.28) × 13 / 2 ≈ 4.7 px into the gap — so the 6 px gap * never closes, at rest or mid-animation. */ .ms-plate .ms-primes { justify-content: center; gap: 6px; } /* ── THE BUBBLE (docs/loaded-body-spec.md §2/§2.1) ──────────────────────────────────────── * A prime is stored pressure, not a status pip — a rim + translucent interior + one * catch-light reads as a VOLUME, and a slow resting breathe says "loaded" between casts * (today's dot has no life at rest at all). Lives entirely on `.ms-dot`, a LEAF inside the * figure card — figures.css's strategy 1 (a different element from anything the card/body * already animates), so it composes with the hit-shake/idle-bob/critical-pulse layers for * free; see the guard `figure-state/idle-and-critical-compose-with-the-attack-tell` in * measure-board.test.js for the proof-of-technique this file reuses. NEVER write `transform` * on `.ms-world-figure` here (B5). * * B1 — THE ELEMENT OWNS HUE, THE BUBBLE OWNS FORM: every colour below is one of the four * `--ms-burn/-shock/-rupture/-kinetic` tokens (via `--ms-dot-hue`) or an achromatic white/ * transparent highlight — no new hue, no new token. * B3 — ONLY A LOADED STACK ANIMATES: `.ms-dot-empty` carries no `animation` declaration * anywhere in this file and never matches an element-hue class, so it is a static disc — * no keyframe, no promoted layer, no `will-change`. That is also the budget: 12 bodies x 2 * stacks = 24 possible bubbles, well inside the ~10-20 concurrent-animation ceiling this * spec measures against, because most slots are empty most of the time (§2.2). * §2.2's three rules: transform/opacity/filter ONLY (no animated box-shadow, no * filter:blur()); breathe on `transform: scale()`; rim+interior+catch-light are ONE static * `background` set once per element class, never recomputed per render. */ .ms-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: transparent; position: relative; transform-origin: 50% 50%; } .ms-dot-empty { background: transparent; border-color: rgba(255,255,255,0.22); opacity: 0.4; } .ms-dot-burn, .ms-dot-shock, .ms-dot-rupture, .ms-dot-kinetic { border-color: var(--ms-dot-hue); /* rim = the border above; interior + catch-light = this one static gradient stack */ background: radial-gradient(circle at 30% 26%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.12) 20%, transparent 36%), radial-gradient(circle at 54% 60%, var(--ms-dot-hue) 0%, transparent 74%), var(--ms-dot-hue); /* MONO's resting breathe (§2.1) — FOCUSED reuses this exact `animation-name` at a * strained intensity below (B2); MIXED replaces it entirely (the categorical break). */ animation: ms-dot-breathe var(--ms-dot-breathe-ms, 2400ms) ease-in-out infinite; animation-delay: calc(var(--ms-fig-phase, 0) * -1 * var(--ms-dot-breathe-ms, 2400ms)); } .ms-dot-burn { --ms-dot-hue: var(--ms-burn); } .ms-dot-shock { --ms-dot-hue: var(--ms-shock); } .ms-dot-rupture { --ms-dot-hue: var(--ms-rupture); } .ms-dot-kinetic { --ms-dot-hue: var(--ms-kinetic); } @keyframes ms-dot-breathe { 0%, 100% { transform: scale(var(--ms-dot-breathe-lo, 1)); } 50% { transform: scale(var(--ms-dot-breathe-hi, 1.12)); filter: brightness(var(--ms-dot-breathe-bright, 1.08)); } } /* A body's SECOND stack breathes out of phase with its first (§2 "desynchronised per * stack") — the same phase-offset idiom `--ms-fig-phase` already uses one level up * (figures.css), applied again at the stack level as a fixed structural offset (never * randomised, so it stays deterministic for the guard). */ .ms-primes > .ms-dot:nth-child(2) { animation-delay: calc(var(--ms-fig-phase, 0) * -1 * var(--ms-dot-breathe-ms, 2400ms) + 260ms); } /* FOCUSED (2 stacks, SAME element) — B2/§2.1: the SAME bubble language, doubled and * STRAINING. Only the custom properties the keyframe reads change; `animation-name` stays * `ms-dot-breathe` on both stacks, so this is intensity, never a third shape. */ .ms-primes-focused .ms-dot:not(.ms-dot-empty) { --ms-dot-breathe-lo: 1.04; --ms-dot-breathe-hi: 1.28; --ms-dot-breathe-bright: 1.32; --ms-dot-breathe-ms: 1200ms; } /* MIXED (2 stacks, DIFFERENT elements) — B2's categorical break, §2.1's loudest state: two * bubbles that lean toward each other — a STATIC facing-edge deformation via * `border-radius` that survives reduced motion untouched (B6), plus a genuinely different * keyframe (`ms-dot-mixed-throb`, not `ms-dot-breathe`) — a different STRUCTURE, per B2, * not just different numbers on the same one. */ .ms-primes-mixed > .ms-dot:nth-child(1):not(.ms-dot-empty) { border-radius: 62% 38% 55% 45% / 58% 42% 62% 38%; } .ms-primes-mixed > .ms-dot:nth-child(2):not(.ms-dot-empty) { border-radius: 38% 62% 45% 55% / 42% 58% 38% 62%; } @keyframes ms-dot-mixed-throb { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(-3deg); filter: brightness(1.24); } } .ms-primes-mixed > .ms-dot:not(.ms-dot-empty) { --ms-dot-breathe-ms: 1100ms; animation-name: ms-dot-mixed-throb; animation-duration: var(--ms-dot-breathe-ms); animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .ms-primes-mixed > .ms-dot:nth-child(2):not(.ms-dot-empty) { animation-delay: calc(var(--ms-fig-phase, 0) * -1 * var(--ms-dot-breathe-ms, 1100ms) + 200ms); } .ms-comp { font-size: 0.5rem; letter-spacing: 0.1em; color: var(--ms-gold); } /* ── THE STATUS MARKS (docs/status-marks-spec.md) ───────────────────────────────────────── * A status is a VISUAL, never a label (§3c, 2026-10-10): the body burns in the element(s) that * put it there (THE SCORCH READ, below), the phone strip's portrait wears a ring, and the LOG * names it. The badge chips this block once drew are retired with the label. */ /* THE AURA, on the phone strip — the portrait wears a ring in the element(s) the member is afflicted by (an even split for a mix). A visual only (§3c). Everything here is absolutely positioned: the strip's fixed height does not move. */ .ms-chip-portrait-wrap { position: relative; flex: 0 0 auto; display: flex; } .ms-chip-portrait-wrap.ms-aura::before { content: ''; position: absolute; inset: -2px; z-index: 0; pointer-events: none; background: var(--ms-aura); border-radius: 2px; } .ms-chip-portrait-wrap > .ms-chip-portrait { position: relative; z-index: 1; } /* The portrait's own fill is translucent; under an aura it goes opaque so the ring reads as a RING, not a tint washed through the whole portrait. */ .ms-chip-portrait-wrap.ms-aura > .ms-chip-portrait-img { background: #0b0e14; } /* THE SCORCH READ (status-marks-spec §3a, 2026-10-09 — "on their body, like scorch in destiny. this way it doesn't compete with prime"). A world figure's marks live INSIDE `.ms-figure-body` (board.js), so they sit on the drawn body on the board and on the projected 3D body on the live stage (which sizes that box per frame). Two layers, none of them on the plate — the plate is the prime's row — and NO LABEL (Jeff, same day: "remove the labels on the status effects. it will just be a visual, and they will look at the log to know what happened"; the flank badges are gone, the log names each status and each tick): 1. THE GLOW — the drawn image's own alpha rimmed in the afflicting element (drop-shadow follows the silhouette, never the box). It lives on the IMG, which only THE ATTACKER RIM animates — an animation outranks a static declaration, so the strike flare plays over it and the glow returns when it ends. A mix: the inner rim one element, the bloom the other. 2. THE FLARE — a rising wash per afflicting element over the lower body; a mix interleaves them on staggered phases, two fires on one body. transform/opacity only. */ .ms-body-glow .ms-figure-body :is(img, .ms-hero-badge) { filter: drop-shadow(0 0 1px var(--ms-glow-a)) drop-shadow(0 0 1px var(--ms-glow-a)) drop-shadow(0 0 7px color-mix(in srgb, var(--ms-glow-b) 70%, transparent)); } .ms-body-status { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .ms-body-flares { position: absolute; left: 4%; right: 4%; top: 8%; bottom: 0; mix-blend-mode: screen; overflow: hidden; border-radius: 45% 45% 30% 30% / 60% 60% 20% 20%; } .ms-body-flare { position: absolute; inset: 0; transform-origin: 50% 100%; background: radial-gradient(ellipse 22% 46% at 34% 96%, var(--ms-flare) 0%, transparent 70%), radial-gradient(ellipse 20% 54% at 64% 96%, var(--ms-flare) 0%, transparent 70%), radial-gradient(ellipse 52% 70% at 50% 100%, color-mix(in srgb, var(--ms-flare) 85%, transparent) 0%, color-mix(in srgb, var(--ms-flare) 35%, transparent) 48%, transparent 76%); opacity: 0.5; animation: ms-body-flare 1500ms ease-in-out infinite; animation-delay: calc((var(--ms-fig-phase, 0) * -1500ms) - var(--ms-flare-i, 0) * 1500ms / var(--ms-flare-n, 1)); } @keyframes ms-body-flare { 0%, 100% { opacity: 0.35; transform: translateY(6%) scaleY(0.78) skewX(2deg); } 45% { opacity: 0.9; transform: translateY(-4%) scaleY(1.1) skewX(-3deg); } } /* the embers — two motes per element, lifting off the body and fading */ .ms-body-flare::before, .ms-body-flare::after { content: ''; position: absolute; left: 36%; bottom: 18%; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px 1px var(--ms-flare), 0 0 7px var(--ms-flare); animation: ms-body-ember 1900ms linear infinite; animation-delay: calc(var(--ms-flare-i, 0) * -700ms); } .ms-body-flare::after { left: 60%; animation-delay: calc(var(--ms-flare-i, 0) * -700ms - 950ms); } @keyframes ms-body-ember { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -46px); } } /* a dying body stops burning — the collapse owns it */ .ms-foe-dying .ms-body-status { display: none; } @media (prefers-reduced-motion: reduce) { .ms-body-flare, .ms-body-flare::before, .ms-body-flare::after { animation: none; } .ms-body-flare { opacity: 0.6; } .ms-body-flare::before, .ms-body-flare::after { display: none; } } /* THE PRIME SIGIL (status-marks-spec §3b) — the loaded bubble stamps its element's glyph in comic ink. The bubble grows a size to hold it (a 10px disc was a colour; 13px holds a shape); the empty slot stays the small hollow ring it was. The tiny forecast/aim dots hide the glyph — at 6-7px it would be noise. */ .ms-dot { display: inline-flex; align-items: center; justify-content: center; } .ms-plate .ms-dot:not(.ms-dot-empty), .ms-boss-banner .ms-dot:not(.ms-dot-empty) { width: 13px; height: 13px; } .ms-dot-sigil { width: 82%; height: 82%; pointer-events: none; opacity: 0.9; } .ms-aim-info-target .ms-dot-sigil, .ms-preview-dots .ms-dot-sigil { display: none; } /* The landing word wears the element that inflicted it. */ .ms-status-pop-burn { background: color-mix(in srgb, var(--ms-burn) 88%, black); } .ms-status-pop-shock { background: color-mix(in srgb, var(--ms-shock) 80%, black); color: #06121a; } .ms-status-pop-rupture { background: color-mix(in srgb, var(--ms-rupture) 85%, black); } .ms-telegraph { font-size: 0.55rem; letter-spacing: 0.08em; color: var(--ms-burn); font-weight: 700; } /* THE NAMED SHOT (playtest-r15 §3) — the plate names its target; LETHAL is the loudest read on * the board because it is the one a heal or a shield can still undo this turn. */ .ms-telegraph-lethal { color: #fff; background: var(--ms-burn); padding: 0 3px; } /* The party half — the targeted card wears a burn outline and a corner ▼ (the phone chip has no * room for the words; the desktop card adds a `.ms-rider-marked` chip). */ .ms-member-marked { box-shadow: inset 0 0 0 1px var(--ms-burn); position: relative; } .ms-member-marked::before { content: '▼'; position: absolute; top: 2px; left: 3px; line-height: 1; font-size: 0.5rem; color: var(--ms-burn); pointer-events: none; } .ms-member-marked-lethal { box-shadow: inset 0 0 0 2px var(--ms-burn); } .ms-member-marked-lethal::before { animation: ms-telegraph-pulse 900ms ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .ms-member-marked-lethal::before { animation: none; } } .ms-rider-marked { color: var(--ms-burn); border-color: rgba(255,107,43,0.6); } .ms-rider-lethal { color: #fff; background: var(--ms-burn); } /* ── THE HIT LAYER (finding 5, §B4/§B5) ────────────────────────────────────── * Player hits and the enemy phase's playback both drive the SAME small vocabulary: a shake * on the acting/hurt card, a floating number, a pulsed dot. Every animation here has a * `prefers-reduced-motion` twin at the bottom of this file that removes the motion and * leaves the number in place — the shake is decoration, the number is the information. */ @keyframes ms-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px) rotate(-1deg); } 40% { transform: translateX(4px) rotate(1deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } /* `.ms-member-hit`'s own party-strip chip carries no positioning transform to lose (it is a plain flow card), so `ms-shake`'s direct `transform:` keyframes are harmless there and stay exactly as they were. `.ms-foe-hit`/`.ms-foe-crit` are a WORLD FIGURE's own card, which does — THE FX CHANNEL above (near `.ms-world-figure`'s base rule) is what fixes that, so this shake writes `--ms-fx-x`/`--ms-fx-rot` instead of `transform` directly. */ @keyframes ms-fig-shake { 0%, 100% { --ms-fx-x: 0px; --ms-fx-rot: 0deg; } 20% { --ms-fx-x: -4px; --ms-fx-rot: -1deg; } 40% { --ms-fx-x: 4px; --ms-fx-rot: 1deg; } 60% { --ms-fx-x: -3px; --ms-fx-rot: 0deg; } 80% { --ms-fx-x: 3px; --ms-fx-rot: 0deg; } } /* THE HURT (2026-09-26, docs/playtest-r13.md §7 — "animations for taking damage"). A hit is a BLOW FROM SOMEWHERE, so the struck body recoils AWAY from it and squashes at the feet before it settles — not a symmetric side-to-side wobble. The blow's direction is the board's own composition: on the phone the party stands DOWNSTAGE, so a struck foe is knocked UP the stage (−y) and a struck Fateforged knocked DOWN toward the camera (+y); on desktop the party stands stage-LEFT, so a foe goes RIGHT (+x) and a hero LEFT (−x). `--ms-hurt-amp` scales the whole curve: 1 for a hit, bigger for a crit — one keyframe set, two weights, never two hand-tuned copies that drift. Everything writes THE FX CHANNEL (`--ms-fx-*`), never `transform`, so the anchor translate + tier scale survive the beat. (`ms-fig-shake` above is kept for the layers that still name it.) */ @keyframes ms-fig-hurt-up { 0% { --ms-fx-x: 0px; --ms-fx-y: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } 18% { --ms-fx-x: calc(var(--ms-hurt-amp, 1) * -3px); --ms-fx-y: calc(var(--ms-hurt-amp, 1) * -7px); --ms-fx-rot: calc(var(--ms-hurt-amp, 1) * -3deg); --ms-fx-scale: calc(1 - var(--ms-hurt-amp, 1) * 0.06); } 45% { --ms-fx-x: calc(var(--ms-hurt-amp, 1) * 4px); --ms-fx-y: calc(var(--ms-hurt-amp, 1) * -2px); --ms-fx-rot: calc(var(--ms-hurt-amp, 1) * 2deg); --ms-fx-scale: calc(1 + var(--ms-hurt-amp, 1) * 0.04); } 72% { --ms-fx-x: calc(var(--ms-hurt-amp, 1) * -2px); --ms-fx-y: 1px; --ms-fx-rot: -1deg; --ms-fx-scale: 0.99; } 100% { --ms-fx-x: 0px; --ms-fx-y: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } } @keyframes ms-fig-hurt-down { 0% { --ms-fx-x: 0px; --ms-fx-y: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } 18% { --ms-fx-x: calc(var(--ms-hurt-amp, 1) * 3px); --ms-fx-y: calc(var(--ms-hurt-amp, 1) * 6px); --ms-fx-rot: calc(var(--ms-hurt-amp, 1) * 3deg); --ms-fx-scale: calc(1 - var(--ms-hurt-amp, 1) * 0.06); } 45% { --ms-fx-x: calc(var(--ms-hurt-amp, 1) * -4px); --ms-fx-y: calc(var(--ms-hurt-amp, 1) * 2px); --ms-fx-rot: calc(var(--ms-hurt-amp, 1) * -2deg); --ms-fx-scale: calc(1 + var(--ms-hurt-amp, 1) * 0.04); } 72% { --ms-fx-x: calc(var(--ms-hurt-amp, 1) * 2px); --ms-fx-y: -1px; --ms-fx-rot: 1deg; --ms-fx-scale: 0.99; } 100% { --ms-fx-x: 0px; --ms-fx-y: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } } @keyframes ms-fig-hurt-right { 0% { --ms-fx-x: 0px; --ms-fx-y: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } 18% { --ms-fx-x: calc(var(--ms-hurt-amp, 1) * 8px); --ms-fx-y: calc(var(--ms-hurt-amp, 1) * -2px); --ms-fx-rot: calc(var(--ms-hurt-amp, 1) * 4deg); --ms-fx-scale: calc(1 - var(--ms-hurt-amp, 1) * 0.06); } 45% { --ms-fx-x: calc(var(--ms-hurt-amp, 1) * -3px); --ms-fx-y: 0px; --ms-fx-rot: calc(var(--ms-hurt-amp, 1) * -2deg); --ms-fx-scale: calc(1 + var(--ms-hurt-amp, 1) * 0.04); } 72% { --ms-fx-x: calc(var(--ms-hurt-amp, 1) * 2px); --ms-fx-y: 0px; --ms-fx-rot: 1deg; --ms-fx-scale: 0.99; } 100% { --ms-fx-x: 0px; --ms-fx-y: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } } @keyframes ms-fig-hurt-left { 0% { --ms-fx-x: 0px; --ms-fx-y: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } 18% { --ms-fx-x: calc(var(--ms-hurt-amp, 1) * -8px); --ms-fx-y: calc(var(--ms-hurt-amp, 1) * -2px); --ms-fx-rot: calc(var(--ms-hurt-amp, 1) * -4deg); --ms-fx-scale: calc(1 - var(--ms-hurt-amp, 1) * 0.06); } 45% { --ms-fx-x: calc(var(--ms-hurt-amp, 1) * 3px); --ms-fx-y: 0px; --ms-fx-rot: calc(var(--ms-hurt-amp, 1) * 2deg); --ms-fx-scale: calc(1 + var(--ms-hurt-amp, 1) * 0.04); } 72% { --ms-fx-x: calc(var(--ms-hurt-amp, 1) * -2px); --ms-fx-y: 0px; --ms-fx-rot: -1deg; --ms-fx-scale: 0.99; } 100% { --ms-fx-x: 0px; --ms-fx-y: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } } /* The GAUGE's flinch — the strip chip / party-window row is a plain flow card with no positioning transform to lose, so `ms-shake`'s direct `transform:` stays correct THERE. */ .ms-member-hit { animation: ms-shake var(--ms-hit-shake-ms, 320ms) ease-in-out; } /* …but a STANDING FIGURE is a `.ms-world-figure`, whose one `transform` declaration (THE FX CHANNEL, below near its base rule) is the anchor translate + tier scale. Before this pass `_hitMember` landed `.ms-member-hit` on the hero figure too, and `ms-shake` REPLACED that transform for 320 ms — the body jumped a full box down-right and un-scaled, then snapped back (the exact clobber THE FX CHANNEL's own comment describes, on the one class it did not yet cover). The figure now takes the same recoil grammar the foes do. */ .ms-world-figure.ms-member-hit { --ms-hurt-amp: 1; animation: ms-fig-hurt-down var(--ms-hit-shake-ms, 320ms) ease-out; } .ms-stage.ms-desktop .ms-world-figure.ms-member-hit { animation-name: ms-fig-hurt-left; } .ms-foe-hit { --ms-hurt-amp: 1; animation: ms-fig-hurt-up var(--ms-hit-shake-ms, 320ms) ease-out; } .ms-stage.ms-desktop .ms-foe-hit { animation-name: ms-fig-hurt-right; } .ms-foe-crit { --ms-hurt-amp: 1.7; animation: ms-fig-hurt-up var(--ms-hit-shake-ms, 320ms) ease-out; box-shadow: 0 0 0 3px var(--ms-white), 0 0 22px rgba(255,255,255,0.65) !important; } .ms-stage.ms-desktop .ms-foe-crit { animation-name: ms-fig-hurt-right; } /* The gauge takes a hurt WASH with its flinch — the number that drops on the strip drops on a card that visibly took the blow. `::before` (the chip's `::after` is THE ACTED glyph). */ .ms-chip.ms-member-hit::before, .ms-pw-row.ms-member-hit::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit; background: rgba(255,84,64,0.42); mix-blend-mode: screen; animation: ms-impact-flash var(--ms-hit-shake-ms, 320ms) ease-out forwards; } .ms-member { position: relative; } /* The future damage-state art hook (playtest note: "different states for them taking * damage") — a plain white flash today, a real hurt-material swap later without touching * the JS that toggles the class. */ .ms-face-hurt::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.35); mix-blend-mode: screen; pointer-events: none; } /* THE IMPACT FLASH (item 2a, THE COCKPIT PASS · PASS 2) — a brief white/accent flash on the * struck FIGURE'S BODY, layered with (never replacing) the hit-shake above: `.ms-foe-hit` * shakes the whole card, `.ms-face-hurt` washes the face art, and this washes the whole * standing figure (foe or hero) — three effects, one hit, each on a different element so * none clobbers another's class. `.ms-figure-body` is already `position:relative`. */ @keyframes ms-impact-flash { 0% { opacity: 0.85; } 100% { opacity: 0; } } .ms-impact-flash::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: rgba(255,255,255,0.6); mix-blend-mode: screen; animation: ms-impact-flash var(--ms-impact-flash-ms, 90ms) ease-out forwards; } /* THE HURT — a Fateforged's flash is RED and lingers a touch longer: "we got hit" must never read as the same white pop "we hit them" does (the same colour law the damage floats use — `.ms-dmg-float-party` is the party's own tint). */ .ms-world-hero .ms-impact-flash::after { background: rgba(255,88,66,0.62); animation-duration: calc(var(--ms-impact-flash-ms, 90ms) * 2); } /* THE HITSTOP (item 2c) — a KILLING blow only (board.js `_releaseDying`/`_hitstopUids` — since THE BLAST LANDS the kill is released at the pop/reveal, never at commit): every * animation on the struck figure (and its own descendants — the hit-shake, the impact * flash, the damage float) freezes in place for HITSTOP_MS before the kill-collapse is * allowed to actually advance. Scoped to the one figure carrying the class — never global, * per the pass's own hard rule. `!important` because it has to outrank whichever OTHER * pulse class (`.ms-foe-crit`/`.ms-foe-hit`) is riding the same element at the same moment. * THE HITSTOP SCALES WITH THE POP (THE LADDER, LOUDER, 2026-10-03): when the killing blow was a * detonation the SAME class is held longer — `fx.js hitstopMsFor()` = HITSTOP_MS + magnitude × * fx.DET_HITSTOP_MAG_MS — so the biggest pop freezes longest. This is THE ONE freeze primitive in * the mode (`measure-fx.test.js hitstop/*` asserts this is the only `paused !important` rule in the * measure stylesheets and that fx.css declares none — figures.css's `.ms-walk-strike` pause is THE * PACE's gait, not a freeze). */ .ms-hitstop, .ms-hitstop * { animation-play-state: paused !important; } @keyframes ms-dmg-float { 0% { opacity: 0; transform: translate(-50%, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px); } } .ms-dmg-float { position: absolute; left: 50%; top: 28%; transform: translate(-50%, 0); font-size: 0.72rem; font-weight: 700; color: #ff8a5c; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,0.7); pointer-events: none; z-index: 2; white-space: nowrap; animation: ms-dmg-float var(--ms-dmg-float-ms, 750ms) ease-out forwards; } /* THE BIG HIT (item 2d) — a non-crit hit whose OWN magnitude (dealt / target maxHp) clears * DMG_FLOAT_BIG_HP_FRAC gets a size bump without borrowing the crit's gold colour (that * colour means "the resolver flagged this a crit", which a big ability hit is not). Ordered * BEFORE `.ms-dmg-float-crit` so a hit carrying BOTH classes (board.js never sets `big` when * `crit` is already true, but the cascade is kept correct regardless) still reads as a crit * — crit's font-size/colour win. */ .ms-dmg-float-big { font-size: 0.86rem; text-shadow: 0 0 6px rgba(255,255,255,0.55), 0 1px 3px rgba(0,0,0,0.75); } .ms-dmg-float-crit { font-size: 0.9rem; color: var(--ms-gold); } .ms-dmg-float-party { color: var(--ms-party-danger); } /* THE REACH IS LIT's landing beat — a class rider's own float, on EVERY body it reached. Gold (the reach family's colour, not damage's), a size down from a damage number and letter-spaced like the rider chips it echoes, so three of them at PARTY reach read as one event rather than three hits. */ .ms-dmg-float-rider { color: var(--ms-gold); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.06em; } .ms-dmg-float-burn { color: var(--ms-burn); } .ms-dmg-float-break { color: var(--ms-burn); font-weight: 700; letter-spacing: 0.08em; } /* THE COURIER (playtest-r18 §2) — a foe's primes are being / were wiped. The wave's own mark colour, never an element token: it is the enemy talking, not your build. */ .ms-dmg-float-scrub { color: var(--ms-wave-mark, #e8e2d0); font-weight: 700; letter-spacing: 0.08em; } /* A status chip riding the same float animation (finding 5: "telegraphs read out"). */ .ms-status-pop { background: rgba(196,95,240,0.85); color: var(--ms-white); padding: 2px 6px; top: 6px; font-size: 0.5rem; letter-spacing: 0.08em; } /* THE KILL COLLAPSE — a just-killed card stays on screen, collapsing, for one beat rather * than vanishing on the very next render (see board.js's _dyingUids/_holdDying/_releaseDying). Writes * THE FX CHANNEL's `--ms-fx-scale`/`--ms-fx-y` (opacity stays a plain, direct property — * it was never part of the clobber, nothing else on this card animates it). */ @keyframes ms-kill-collapse { 0% { opacity: 1; --ms-fx-scale: 1; --ms-fx-y: 0px; } 100% { opacity: 0; --ms-fx-scale: 0.7; --ms-fx-y: 6px; } } .ms-foe-dying { animation: ms-kill-collapse var(--ms-kill-fade-ms, 420ms) ease-in forwards; pointer-events: none; } /* ── THE BLAST SHOVES (docs/playtest-r13.md §14, 2026-09-28 — Jeff: "Enemies should get rocked * by the explosion, and have a detonated animation"). Three beats, all on THE FX CHANNEL * (`--ms-fx-*`, never `transform`), all fed by board.js's blast plan through four custom * properties: `--ms-blast-x`/`--ms-blast-y` (a UNIT vector, epicentre → body, on screen), * `--ms-blast-amp` (a length — the shared `RUNG_MULT[rung].knock` already multiplied in) and * `--ms-blast-color` (the reaction's own colour, fx.js `_colorFor`). * .ms-foe-blasted — a SPLASHED body: thrown along the vector, squashed on the way out, * overshoots back and settles. It is what makes the explosion a thing * with a CENTRE rather than a ring drawn over a shake. * .ms-foe-detonated — the POPPED body: rocked in place — a hard scale punch, a hop, a * tumble either way, no net throw (the blast is centred on it). * .ms-foe-dying-blast — a body a pop KILLED dies BLOWN: it flies along the vector, tumbles * and shrinks as it fades, instead of `ms-kill-collapse`'s sink. Same * `--ms-kill-fade-ms` clock, so the hand-off math is untouched. * All three are state-timed by board.js (`_pulseFoe` records the tell, `_worldFigureCard` * re-applies it on a re-render), so a mid-beat rebuild of the card no longer erases the shove. */ @keyframes ms-fig-blast { 0% { --ms-fx-x: 0px; --ms-fx-y: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } 22% { --ms-fx-x: calc(var(--ms-blast-x, 0) * var(--ms-blast-amp, 12px)); --ms-fx-y: calc(var(--ms-blast-y, -1) * var(--ms-blast-amp, 12px)); --ms-fx-rot: calc(var(--ms-blast-x, 0) * 7deg); --ms-fx-scale: 0.93; } 52% { --ms-fx-x: calc(var(--ms-blast-x, 0) * var(--ms-blast-amp, 12px) * 0.5); --ms-fx-y: calc(var(--ms-blast-y, -1) * var(--ms-blast-amp, 12px) * 0.5); --ms-fx-rot: calc(var(--ms-blast-x, 0) * -3deg); --ms-fx-scale: 1.04; } 80% { --ms-fx-x: calc(var(--ms-blast-x, 0) * var(--ms-blast-amp, 12px) * 0.12); --ms-fx-y: calc(var(--ms-blast-y, -1) * var(--ms-blast-amp, 12px) * 0.12); --ms-fx-rot: calc(var(--ms-blast-x, 0) * 1deg); --ms-fx-scale: 0.99; } 100% { --ms-fx-x: 0px; --ms-fx-y: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } } .ms-foe-blasted { animation: ms-fig-blast var(--ms-blast-ms, 520ms) cubic-bezier(.15,.8,.3,1); } @keyframes ms-fig-detonated { 0% { --ms-fx-y: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } 9% { --ms-fx-y: calc(var(--ms-blast-amp, 10px) * -1); --ms-fx-rot: 0deg; --ms-fx-scale: 1.24; } 28% { --ms-fx-y: calc(var(--ms-blast-amp, 10px) * 0.35); --ms-fx-rot: 6deg; --ms-fx-scale: 0.88; } 52% { --ms-fx-y: calc(var(--ms-blast-amp, 10px) * -0.4); --ms-fx-rot: -5deg; --ms-fx-scale: 1.07; } 78% { --ms-fx-y: 1px; --ms-fx-rot: 2deg; --ms-fx-scale: 0.98; } 100% { --ms-fx-y: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } } .ms-foe-detonated { animation: ms-fig-detonated var(--ms-blast-ms, 520ms) ease-out; } @keyframes ms-kill-blast { 0% { opacity: 1; --ms-fx-x: 0px; --ms-fx-y: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } 14% { opacity: 1; --ms-fx-scale: 1.16; } 100% { opacity: 0; --ms-fx-x: calc(var(--ms-blast-x, 0) * var(--ms-kill-blast-px, 46px)); --ms-fx-y: calc(var(--ms-blast-y, -1) * var(--ms-kill-blast-px, 46px)); --ms-fx-rot: calc(28deg + var(--ms-blast-x, 0) * 34deg); --ms-fx-scale: 0.55; } } .ms-foe-dying.ms-foe-dying-blast { animation: ms-kill-blast var(--ms-kill-fade-ms, 420ms) cubic-bezier(.2,.7,.4,1) forwards; } /* The popped body's white-out wears the REACTION's colour and holds twice as long as a plain * hit's flash — the detonated state is a different event from being shot, and reads as one. */ .ms-impact-flash.ms-impact-flash-blast::after { background: color-mix(in srgb, var(--ms-blast-color, #fff) 55%, white 45%); animation-duration: var(--ms-blast-flash-ms, 180ms); } /* THE ANSWERED WAVE's own beats — an attacker "lunges" toward the party strip, a telegraph * pulses instead of shaking (it is a warning, not a hit). Writes THE FX CHANNEL's * `--ms-fx-y`/`--ms-fx-scale` — same reasoning as `ms-fig-shake` above. */ @keyframes ms-foe-acting { 0%, 100% { --ms-fx-y: 0px; --ms-fx-scale: 1; } 50% { --ms-fx-y: 6px; --ms-fx-scale: 1.03; } } /* THE ANSWERED WAVE reads as attacks (item 4, THE COCKPIT PASS · PASS 2) — timed off its OWN * ATTACK_STEP_MS now (was HIT_SHAKE_MS) so the forward step reads as a committed lunge * rather than a hit reaction; the beat SCHEDULING (PLAYBACK_STEP_MS) is untouched. */ .ms-foe-acting { animation: ms-foe-acting var(--ms-attack-step-ms, 200ms) ease-in-out; } /* On desktop the party stands stage-LEFT, so a wave body's committed step goes left (−x), not down — the lunge points at what it hits on both compositions. */ @keyframes ms-foe-acting-left { 0%, 100% { --ms-fx-x: 0px; --ms-fx-scale: 1; } 50% { --ms-fx-x: -7px; --ms-fx-scale: 1.03; } } .ms-stage.ms-desktop .ms-foe-acting { animation-name: ms-foe-acting-left; } /* THE BLOW (2026-09-26, docs/playtest-r13.md §7 — "animations for … dealing damage"). The acting Fateforged never moved on its own strike: the walk wrapper carried it to the berth and `.ms-walk-strike` leaned it 3px, and that was the whole "I hit you". This is the party's twin of `.ms-foe-acting` — a committed lunge TOWARD THE WAVE (up the stage on the phone, stage-right on desktop), a little bigger and a shade quicker than the wave's own step, paired by board.js with the same `.ms-attacker-rim` ring in the class's accent. THE FX CHANNEL only; the wrapper's travel and the body's ambient bob compose under it. */ @keyframes ms-hero-strike-up { 0%, 100% { --ms-fx-y: 0px; --ms-fx-x: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } 30%, 60% { --ms-fx-y: -9px; --ms-fx-x: 2px; --ms-fx-rot: -2deg; --ms-fx-scale: 1.06; } } @keyframes ms-hero-strike-right { 0%, 100% { --ms-fx-x: 0px; --ms-fx-y: 0px; --ms-fx-rot: 0deg; --ms-fx-scale: 1; } 30%, 60% { --ms-fx-x: 10px; --ms-fx-y: -2px; --ms-fx-rot: 3deg; --ms-fx-scale: 1.06; } } .ms-world-hero.ms-hero-strike { animation: ms-hero-strike-up var(--ms-attack-step-ms, 200ms) ease-out; } .ms-stage.ms-desktop .ms-world-hero.ms-hero-strike { animation-name: ms-hero-strike-right; } @keyframes ms-telegraph-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .ms-telegraph-pulse { animation: ms-telegraph-pulse var(--ms-hit-shake-ms, 320ms) ease-in-out; } /* THE ATTACKER RIM (item 4) — "THIS one is striking", paired with `.ms-foe-acting`'s forward * step (and the party's `.ms-hero-strike` lunge). `--ms-accent` is set inline per-figure * (board.js `_worldFigureCard`). * THE SILHOUETTE, NOT THE BOX (2026-10-04 — "when enemies take action they are surrounded by * a box which is not very cool looking"). The tell used to be a `box-shadow` ring on * `.ms-figure-body` — and a box-shadow draws the element's RECTANGLE, never its pixels, so * every strike framed the body in a glowing square (THE INK BOX sized the box to the drawn * figure's height, so the square hugged it closely enough to read as deliberate). It is two * shape-true marks now: * 1. THE RIM LIGHT — a `filter: drop-shadow()` stack on the drawn image itself. drop-shadow * follows ALPHA, so a hard 1-2px accent outline + a wide bloom trace the figure's own * silhouette, and the body flares bright for the plateau. It lives on the IMG (or the * hero badge), never `.ms-figure-body`, so it never contends with idle/critical/broken's * `animation`/`filter` there — a child's filter composes UNDER its parent's for free * (figures.css's rule 1: different element), and no compound selector is owed. * 2. THE STAMP — an accent ellipse that blooms out under the feet and fades, so the strike * lands on the floor as well as the body. It rides the walk wrapper's own `::after` * (not the contact shadow, whose idle breathe would dim it), so it travels with an * arriving walker and contends with no animation of anyone else's. * The beat is still exactly `--ms-attack-step-ms` long (THE ANSWERED WAVE's scheduling is * untouched); only what it paints changed. */ @keyframes ms-attacker-rim { 0%, 100% { filter: none; } 20%, 60% { filter: brightness(1.22) drop-shadow(0 0 1px var(--ms-accent, var(--ms-gold))) drop-shadow(0 0 1px var(--ms-accent, var(--ms-gold))) drop-shadow(0 0 14px color-mix(in srgb, var(--ms-accent, var(--ms-gold)) 75%, transparent)); } } .ms-attacker-rim .ms-figure-body :is(img, .ms-hero-badge) { animation: ms-attacker-rim var(--ms-attack-step-ms, 200ms) ease-out; } @keyframes ms-attacker-stamp { 0% { opacity: 0; transform: translate(-50%, 50%) scale(0.45); } 25% { opacity: 0.95; } 100% { opacity: 0; transform: translate(-50%, 50%) scale(1.35); } } .ms-attacker-rim .ms-figure-walk { position: relative; } .ms-attacker-rim .ms-figure-walk::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 115%; height: 20px; border-radius: 50%; pointer-events: none; opacity: 0; z-index: -1; border: 2px solid var(--ms-accent, var(--ms-gold)); background: radial-gradient(ellipse, color-mix(in srgb, var(--ms-accent, var(--ms-gold)) 45%, transparent) 0%, transparent 70%); box-shadow: 0 0 12px color-mix(in srgb, var(--ms-accent, var(--ms-gold)) 70%, transparent); animation: ms-attacker-stamp var(--ms-attack-step-ms, 200ms) ease-out; } /* THE LIVE STAGE stands real 3D bodies where these DOM figures stand hidden — no floor stamp floating over a body it does not belong to. */ .ms-overlay.ms-live .ms-attacker-rim .ms-figure-walk::after { display: none; } /* A newly-applied prime stack pulses its dot rather than just silently appearing. Specificity * note: `.ms-dot.ms-dot-new` (2 classes) already outranks the resting-breathe base rule * `.ms-dot-burn`/etc (1 class), so the pulse plays over MONO/FOCUSED's breathe automatically. * MIXED's throb selector (`.ms-primes-mixed > .ms-dot:not(.ms-dot-empty)`, 3 classes) outranks * a plain 2-class `.ms-dot-new`, so it gets an explicit, order-independent override below via * one extra ancestor class (`.ms-stage`, always present) rather than relying on source order. */ /* 1.45, not 1.7: at 1.7 a landing stack reached into its neighbour (THE ROW IS CENTRED AND * NOTHING TOUCHES, above) — the flash carries the rest of the beat. */ @keyframes ms-dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); filter: brightness(1.75); } } .ms-dot.ms-dot-new { animation: ms-dot-pulse var(--ms-hit-shake-ms, 320ms) ease-in-out; } .ms-stage .ms-primes-mixed > .ms-dot.ms-dot-new { animation-name: ms-dot-pulse; animation-duration: var(--ms-hit-shake-ms, 320ms); animation-timing-function: ease-in-out; animation-iteration-count: 1; } /* ── The party strip ─────────────────────────────────────────────────────── */ .ms-party { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ms-member { border: 1px solid rgba(255,255,255,0.16); padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; background: rgba(8,10,14,0.45); } .ms-member-active { border-color: var(--ms-gold); box-shadow: inset 0 0 0 1px rgba(255,215,106,0.35); } .ms-member-down { opacity: 0.35; } /* THE OTHERS FADE (docs/playtest-r10.md §3 — "in addition to highlighting the player's turn, let's fade out the other players"). While the party's turn is live (`.ms-turn-live`, set by board.js render() for COMMAND / AIM / the actor's own beat — never THE ANSWERED WAVE, where nobody is acting) every living member who is NOT the actor steps back, on all three party surfaces (phone chip · desktop row · the world figure's plate). A card that is itself a live control stays bright: a charged Ultimate trigger (THE SUPER IS AN INTERRUPT), the armed CAST card, and the ally cursor during an ally-facing aim. Opacity only — never a `filter`, which `.ms-hero-acted` and live-stage.css already own on these nodes. THE TURN IS YOURS (docs/measure-turn-select-spec.md §4): a SELECTABLE card fades its BODY (the children) and keeps its own frame at full, so the class-colour ring below stays a legible "you may pick me" tell under the fade — the card's own opacity would take the ring down with it. */ .ms-overlay { --ms-others-fade: 0.5; } .ms-member { transition: opacity 160ms ease; } .ms-turn-live .ms-member:not(.ms-member-active):not(.ms-member-down):not(.ms-member-charged):not(.ms-member-cast):not(.ms-cursor):not(.ms-member-select) { opacity: var(--ms-others-fade); } .ms-turn-live .ms-member-select > * { opacity: var(--ms-others-fade); transition: opacity 160ms ease; } /* THE TAP LADDER's rung one — the "you may pick me" tell on every card a tap would SELECT. THE SELECTED ONE IS GOLD (playtest-r13 §10, 2026-09-27 — Jeff: "for the non selected players, the colored outlines are making it seem like it's selected"): the first cut drew this ring in the member's own CLASS colour at full strength, which on the phone read as two more selected cards beside the gold one. Now: exactly ONE card on the strip carries a solid coloured frame — the actor's gold `.ms-member-active` — and a selectable card gets a NEUTRAL, DASHED hairline at low alpha (a frame you can see is a door, not a frame that is lit), brightening solid-white on hover/focus so the pointer still reads. The class colour stays on the portrait badge and the HP bar where it names the class, never the frame. An acted, uncharged card is not selectable and gets no ring — only its ACTED ✓. */ .ms-member-select { cursor: pointer; border-color: rgba(244,239,228,0.30); border-style: dashed; box-shadow: none; } .ms-member-select:hover, .ms-member-select.ob-focused { border-color: rgba(244,239,228,0.75); border-style: solid; box-shadow: 0 0 0 1px rgba(244,239,228,0.35); } /* The actor's own frame always outranks the selectable tell (an acted+charged card can be both `-active` and a ladder rung in the same render). */ .ms-member-active.ms-member-select { border-color: var(--ms-gold); border-style: solid; box-shadow: inset 0 0 0 1px rgba(255,215,106,0.35); } .ms-turn-live .ms-world-hero:not(.ms-hero-acting):not(.ms-hero-down):not(.ms-cursor) { opacity: var(--ms-others-fade); transition: opacity 160ms ease; } .ms-member-name { font-size: 0.68rem; letter-spacing: 0.12em; color: var(--ms-ink); } .ms-member-hp { font-size: 0.6rem; color: rgba(244,239,228,0.7); font-variant-numeric: tabular-nums; } .ms-statuses { display: flex; flex-wrap: wrap; gap: 3px; } .ms-status { font-size: 0.5rem; letter-spacing: 0.06em; padding: 1px 4px; border: 1px solid currentColor; } .ms-status-burn { color: var(--ms-burn); } .ms-status-slow { color: var(--ms-shock); } .ms-status-delay { color: var(--ms-rupture); } .ms-acted { font-size: 0.5rem; letter-spacing: 0.14em; color: rgba(244,239,228,0.4); } /* §6.2 riders — the only reason to read an ally's card mid-fight. */ .ms-riders { display: flex; flex-wrap: wrap; gap: 3px; } .ms-rider { font-size: 0.5rem; letter-spacing: 0.06em; padding: 1px 4px; color: var(--ms-gold); border: 1px solid rgba(255,215,106,0.55); } /* THE WARD's two pools in words (desktop party card only — the phone strip has the bar * segments and no room for chips). Shock-hued to match the bar segments they name. */ .ms-rider-ward { color: var(--ms-shock); border-color: rgba(91,200,245,0.55); } .ms-rider-banked { color: var(--ms-shock); border-color: rgba(91,200,245,0.35); border-style: dashed; } /* While the ally pane is up, the party strip is a target list, so it has to LOOK pickable. */ .ms-member-pick { cursor: pointer; } .ms-member-pick:hover { border-color: var(--ms-gold); } .ms-cmd-class { border-color: rgba(91,200,245,0.55); } .ms-cmd-class .ms-cmd-label { color: var(--ms-shock); } /* ── The command rail ────────────────────────────────────────────────────── */ /* A GRID, not `flex-wrap`. Wrapping means the buttons move between turns as commands become legal and illegal — which breaks muscle memory AND THE SAME SPOT RULE, since CAST is placed by grid auto-placement at the armed command's own position in the slot list. */ .ms-rail { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); /* THE AIM INFO PANEL spans rows: the rows keep the cells' own floor so a card shorter than the ghosts it replaced never pulls the CAST row up (THE SAME SPOT RULE, measured by aim/cast-inherits-the-armed-cell). */ grid-auto-rows: minmax(48px, auto); gap: 6px; align-items: stretch; border-top: 1px solid rgba(255,255,255,0.16); padding-top: 8px; } /* NO LAYOUT SHIFT (2026-10-03): while a command is armed the rows are PINNED to the cell height the command pane uses (48 here; the phone's `--ms-rail-cell-min-h` in the two phone blocks below; 38 on desktop's action rail) — the rail is the same height in COMMAND and AIM, CAST inherits its cell's whole rect, the card and the headline are clipped to the rows they take. Guard: `aim/no-layout-shift-*`. */ .ms-rail.ms-rail-aim { grid-auto-rows: 48px; } .ms-cmd { /* box-sizing:border-box FIXES THE SAME SPOT RULE (docs/measure-phone-controls.md §1.3, 2026-08-29 investigation): a real command cell is a `