/* /play/ (BRIEF.md Workstream C): the Daily Shred, game cards, the record. */
.play-wrap { display: grid; gap: 2.5rem; }
.daily { padding: 1.4rem 1.5rem; border-radius: var(--r); background: color-mix(in srgb, var(--ember) 10%, var(--surface)); border: 2px solid color-mix(in srgb, var(--ember) 45%, var(--line)); }
.daily h2 { margin: .2rem 0 .4rem; }
.game-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); align-items: start; }
.game-card { padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); scroll-margin-top: 6rem; }
.game-card h2 { font-size: 1.35rem; margin: .2rem 0 .4rem; }
.game-meta { margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.game-actions { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: 0; }
.game-stage { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
/* a game in play gets the whole row */
.game-card:has(.game-stage:not([hidden])) { grid-column: 1 / -1; }
.game-quote { margin: .6rem 0; padding: .8rem 1rem; border-left: 4px solid var(--accent, var(--ember)); background: var(--surface-2); border-radius: var(--r-sm); }
.game-quote p { font: 500 1.1rem/1.5 var(--serif); margin: 0 0 .4rem; }
.game-quote footer { font-size: .92rem; color: var(--ink-2); }
.game-conf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .8rem 0; font-weight: 600; }
.game-conf input { flex: 1 1 10rem; accent-color: var(--ember); }
.game-opts { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.game-opt { display: grid; justify-items: start; gap: .15rem; text-align: left; padding: .7rem .9rem; min-height: 3rem; }
.game-verdict { font-weight: 700; font-size: 1.1rem; }
.game-verdict.is-right { color: var(--ok, #2f7a3e); }
.game-verdict.is-wrong { color: var(--warn, #a04a1f); }
.game-score { font: 700 2rem/1 var(--serif); margin: .4rem 0; }
.game-after { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1rem; }
.record h2 { margin-bottom: .8rem; }
.record-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.belts { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.belt { display: grid; gap: .15rem; padding: .7rem .9rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); border-left: 6px solid var(--line-strong); }
.belt-name { font: 650 .75rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.belt-2 { border-left-color: color-mix(in srgb, var(--ember) 45%, var(--line)); }
.belt-3 { border-left-color: color-mix(in srgb, var(--ember) 75%, var(--line)); }
.belt-4 { border-left-color: var(--ember); }
.belt-4 .belt-name { color: var(--ember); }
.cal-svg { width: 100%; max-width: 22rem; height: auto; display: block; }
.cal-axis { stroke: var(--line-strong); stroke-width: 1.5; }
.cal-ideal { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 5; }
.cal-dot { fill: color-mix(in srgb, var(--ember) 70%, transparent); stroke: var(--ember); stroke-width: 1.5; }
.cal-label, .cal-tick { fill: var(--ink-2); font: 12px var(--sans); }
.cal-table { border-collapse: collapse; font-size: .92rem; }
.cal-table th, .cal-table td { padding: .3rem .7rem; border-bottom: 1px solid var(--line); text-align: left; }

/* Ear gym (js/play/games/ear-gym.js). No animation: nothing moves, so reduced motion needs no extra rule. */
.ear-gym-prompt { font: 650 1.15rem/1.3 var(--sans); margin: .3rem 0; }
.ear-gym-bar { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin: .6rem 0; }
.ear-gym .btn[aria-disabled="true"] { cursor: progress; border-style: dashed; }
.ear-gym-start { display: grid; gap: .35rem; margin: .8rem 0; font-weight: 600; }
.ear-gym-start select { width: 100%; max-width: 32rem; }
.ear-gym-note { margin: .8rem 0; padding: .6rem .9rem; border-radius: var(--r-sm); background: var(--surface-2); }
.ear-gym-note p { margin: .2rem 0; }
.ear-gym-strip { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; max-width: 26rem; margin: .8rem 0 .4rem; }
.ear-gym-strip span { display: grid; place-items: center; min-height: 1.9rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink-3); font: 600 .75rem/1 var(--sans); }
.ear-gym-strip span.on { background: var(--ember); border-color: var(--ember); color: var(--on-accent); }
.ear-gym-facts p { margin: .25rem 0; }
.ear-gym .game-opts { grid-template-columns: repeat(auto-fill, minmax(min(7rem, 100%), 1fr)); }
.ear-gym .game-opt { padding: .5rem .7rem; border-radius: var(--r); }

/* Fretboard sprint (game id fretboard-sprint): six strings by frets 0-12. Narrow: nut at the top, low E on the left.
   Wide (container query): as in tab, high E on top. Each cell carries --vr/--vc and --hr/--hc for its place in both. */
.game-card:has(.fretboard-sprint) { grid-column: 1 / -1; }
.fretboard-sprint { container-type: inline-size; --fs-bg: var(--surface); }
.daily .fretboard-sprint { --fs-bg: color-mix(in srgb, var(--ember) 10%, var(--surface)); }
.fretboard-sprint .fs-top { position: sticky; top: calc(4rem + 1px + env(safe-area-inset-top, 0px)); z-index: 2; padding: .4rem 0 .7rem; margin-top: -.4rem; background: var(--fs-bg); }
.fretboard-sprint .fs-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.2rem; margin-bottom: .5rem; }
.fretboard-sprint .fs-head p { margin: 0; }
.fretboard-sprint .fs-target { font: 600 1.45rem/1.2 var(--serif); }
.fretboard-sprint .fs-target strong { color: var(--accent); font-weight: 700; }
.fretboard-sprint .fs-count { font-weight: 600; }
.fretboard-sprint .fs-clock { margin-left: auto; font: 700 1.1rem/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.fretboard-sprint .fs-bar { height: .4rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fretboard-sprint .fs-bar span { display: block; height: 100%; background: var(--accent); transform-origin: left center; }
.fretboard-sprint .fs-bar.is-low span { background: var(--bad); }
.fretboard-sprint .fs-board { --fs-orient: v; display: grid; grid-template-columns: 1.6rem repeat(6, minmax(0, 1fr)); grid-template-rows: 0 repeat(13, 2.5rem); max-width: 24rem; margin: 0 auto .6rem; }
/* Upright neck: the string names ride in the sticky bar (.fs-strhead), on the board's columns; the board's own are for tab layout. */
.fretboard-sprint .fs-strhead { display: grid; grid-template-columns: 1.6rem repeat(6, minmax(0, 1fr)); max-width: 24rem; margin: .5rem auto 0; text-align: center; font: 700 .85rem/1.2 var(--mono); color: var(--ink-2); }
.fretboard-sprint .fs-board .fs-slabel { display: none; }
.fretboard-sprint .fs-cell, .fretboard-sprint .fs-slabel, .fretboard-sprint .fs-flabel { grid-row: var(--vr); grid-column: var(--vc); }
.fretboard-sprint .fs-cell { position: relative; display: grid; place-items: center; border-bottom: 2px solid var(--line-strong); }
.fretboard-sprint .fs-cell.is-open { border-bottom: 5px solid var(--ink-2); }
.fretboard-sprint .fs-cell::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--sw, 1px); transform: translateX(-50%); background: var(--ink-3); opacity: .7; }
.fretboard-sprint .fs-cell.is-dot::after { content: ""; position: absolute; top: 50%; right: 0; width: .5rem; height: .5rem; border-radius: 50%; background: var(--line-strong); transform: translate(50%, -50%); }
.fretboard-sprint .fs-slabel { display: grid; place-items: center; font: 700 .85rem/1 var(--mono); color: var(--ink-2); }
.fretboard-sprint .fs-flabel { display: grid; place-items: center; font: .8rem/1 var(--mono); color: var(--ink-3); }
.fretboard-sprint .fs-flabel.is-inlay { color: var(--accent); font-weight: 700; }
.fretboard-sprint .fs-note {
  position: relative; z-index: 1; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; background: transparent; color: var(--ink); font: 700 .8rem/1 var(--sans);
}
.fretboard-sprint .fs-note:hover { background: var(--surface-2); border-color: var(--line-strong); }
.fretboard-sprint .fs-note:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--ink); border-radius: 50%; }
.fretboard-sprint .fs-note.is-hit { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.fretboard-sprint .fs-note.is-wrong, .fretboard-sprint .fs-note.is-wrong:focus-visible { background: var(--bad); border-color: var(--bad); color: var(--surface); border-radius: 5px; }
.fretboard-sprint .fs-note.is-missed { background: var(--surface); border: 2px dashed var(--warn); color: var(--ink); }
.fretboard-sprint .fs-note.is-pop { animation: fretboard-sprint-pop .2s ease-out; }
@keyframes fretboard-sprint-pop { from { transform: scale(1.3); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fretboard-sprint .fs-note.is-pop { animation: none; } }
.fretboard-sprint .fs-legend { margin-bottom: .2rem; }
.fretboard-sprint .fs-settings { max-width: 34rem; margin-bottom: 1rem; }
.fretboard-sprint .fs-h { margin-top: 1.2rem; }
.fretboard-sprint .fs-strings { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .3rem; }
.fretboard-sprint .fs-strings li { display: flex; gap: .6rem; align-items: center; }
.fretboard-sprint .fs-sq { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 3px; }
.fretboard-sprint .fs-sq.is-g { background: var(--ok); }
.fretboard-sprint .fs-sq.is-y { background: var(--gold); }
.fretboard-sprint .fs-sq.is-r { background: var(--bad); }
.fretboard-sprint .fs-tips { margin-bottom: 1rem; }
.fretboard-sprint .fs-tips summary { cursor: pointer; font-weight: 600; }
@container (min-width: 38rem) {
  .fretboard-sprint .fs-board { --fs-orient: h; grid-template-columns: 1.6rem repeat(13, minmax(0, 1fr)); grid-template-rows: repeat(6, 2.6rem) 1.6rem; max-width: 52rem; }
  .fretboard-sprint .fs-cell, .fretboard-sprint .fs-slabel, .fretboard-sprint .fs-flabel { grid-row: var(--hr); grid-column: var(--hc); }
  .fretboard-sprint .fs-strhead { display: none; }
  .fretboard-sprint .fs-board .fs-slabel { display: grid; }
  .fretboard-sprint .fs-cell { border-bottom: 0; border-right: 2px solid var(--line-strong); }
  .fretboard-sprint .fs-cell.is-open { border-bottom: 0; border-right: 5px solid var(--ink-2); }
  .fretboard-sprint .fs-cell::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: var(--sw, 1px); transform: translateY(-50%); }
  .fretboard-sprint .fs-cell.is-dot::after { top: 0; right: auto; left: 50%; transform: translate(-50%, -50%); }
}

/* Tempo ladder (js/play/games/tempo-ladder.js): the click's lights, the ladder chart, the tap pad */
.tempo-ladder-setup { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); margin: .8rem 0; }
.tempo-ladder-honest { padding: .7rem .9rem; border-left: 4px solid var(--ember); background: var(--surface-2); border-radius: var(--r-sm); }
.tempo-ladder-now { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: .3rem 0 .4rem; }
.tempo-ladder-bpm { margin: 0; display: flex; align-items: baseline; gap: .4rem; }
.tempo-ladder-num { font: 700 clamp(2.5rem, 10vw, 3.5rem)/1 var(--mono); font-variant-numeric: tabular-nums; }
.tempo-ladder-unit { font: 650 1rem/1 var(--sans); color: var(--ink-2); }
.tempo-ladder-lights { display: flex; gap: .5rem; }
.tempo-ladder-lights span { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--line-strong); }
.tempo-ladder-lights span.is-accent { border-color: var(--ember); }
.tempo-ladder-lights span.is-on { background: var(--ember); border-color: var(--ember); }
.tempo-ladder-row { margin: .8rem 0 .2rem; }
.tempo-ladder-chart { width: 100%; max-width: 26rem; height: auto; display: block; margin-top: .8rem; overflow: visible; }
.tempo-ladder-axis { stroke: var(--line-strong); stroke-width: 1.5; }
.tempo-ladder-tick { fill: var(--ink-2); font: 16px var(--sans); }
.tempo-ladder-best { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.tempo-ladder-path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linejoin: round; }
.tempo-ladder-clean circle { fill: var(--ok); stroke: var(--surface); stroke-width: 2; }
.tempo-ladder-missed circle { fill: var(--surface); stroke: var(--bad); stroke-width: 2.5; }
.tempo-ladder-missed path { stroke: var(--bad); stroke-width: 2; stroke-linecap: round; }
.tempo-ladder-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .4rem 0 0; font-size: .9rem; color: var(--ink-2); }
.tempo-ladder-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.tempo-ladder-legend svg { overflow: visible; }
.tempo-ladder-pad { display: grid; justify-items: center; gap: .2rem; width: 100%; max-width: 22rem; min-height: 7rem; margin: 1rem 0 .5rem; padding: 1rem;
  border: 2px solid var(--line-strong); border-radius: var(--r); background: var(--surface-2); color: var(--ink); font: 700 1.5rem/1.2 var(--sans);
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tempo-ladder-pad .small { font-weight: 500; color: var(--ink-2); }
.tempo-ladder-pad:disabled { cursor: default; border-style: dashed; }
.tempo-ladder-pad:not(:disabled) { border-color: var(--ember); }
.tempo-ladder-pad.is-hit { background: color-mix(in srgb, var(--ember) 22%, var(--surface-2)); }
.tempo-ladder-status { font-weight: 650; min-height: 1.5em; margin: .2rem 0; }

/* Kill the beats (Science of Sound): the tuner */
.kill-the-beats-bar { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin: 0 0 .8rem; }
.kill-the-beats-h { font-size: 1.2rem; margin: .2rem 0 .4rem; }
.kill-the-beats-tuner { display: grid; gap: .6rem; margin: .8rem 0; padding: .8rem 1rem; border-radius: var(--r-sm); background: var(--surface-2); }
.kill-the-beats-tuner > p { margin: 0; }
.kill-the-beats-read { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.kill-the-beats-read label { font-weight: 600; }
.kill-the-beats-out { font: 600 .95rem/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.kill-the-beats-slider { width: 100%; min-height: 2.25rem; margin: 0; accent-color: var(--ember); }
.kill-the-beats-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.kill-the-beats-steps .btn { min-width: 0; padding-inline: .2rem; justify-content: center; font-variant-numeric: tabular-nums; }
.kill-the-beats-math { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kill-the-beats-close { color: var(--ink); }
.kill-the-beats-compare { margin: .8rem 0; }
.kill-the-beats-summary { margin: .4rem 0 .8rem; padding-left: 1.4rem; }
.kill-the-beats-math p { margin: 0 0 .5rem; }
.kill-the-beats-work { list-style: none; display: grid; gap: .25rem; margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: var(--r-sm); background: var(--surface-2); font-size: .95rem; line-height: 1.5; }

/* Stack the fifths (js/play/games/stack-the-fifths.js): a circle of one octave with twelve note buttons around it */
.game-card:has(.stack-the-fifths) { grid-column: 1 / -1; }   /* the circle needs the whole row while it is played */
.stack-the-fifths { container: stf-body / inline-size; }
.stack-the-fifths .stf-side { container: stf-side / inline-size; }
.stack-the-fifths .stf-ask { font-weight: 650; font-size: 1.08rem; margin: .4rem 0; }
.stack-the-fifths .game-opt { justify-content: start; }   /* .btn centres the grid track: short options sat centred, long ones left */
.stack-the-fifths .stf-bet { margin: 0 0 .4rem; color: var(--ink-2); }
.stack-the-fifths .stf-play { display: grid; gap: 1rem 1.75rem; align-items: start; margin-top: .6rem; }
@container stf-body (min-width: 40rem) { .stack-the-fifths .stf-play { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }
.stack-the-fifths .stf-dial { position: relative; width: min(100%, 22rem); aspect-ratio: 1; margin: 0 auto; }
.stack-the-fifths .stf-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stack-the-fifths .stf-note { position: absolute; width: 2.6rem; height: 2.6rem; min-height: 0; padding: 0; border-radius: 50%; font: 650 .95rem/1 var(--sans); }
.stack-the-fifths .stf-note.is-placed { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.stack-the-fifths .stf-note[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.stack-the-fifths .stf-note.is-miss { border: 2px dashed var(--bad); }
.stack-the-fifths .stf-note:disabled { cursor: default; }
.stack-the-fifths .stf-pc-0 { left: calc(50% - 1.3rem); top: calc(9% - 1.3rem); }
.stack-the-fifths .stf-pc-1 { left: calc(70.5% - 1.3rem); top: calc(14.49% - 1.3rem); }
.stack-the-fifths .stf-pc-2 { left: calc(85.51% - 1.3rem); top: calc(29.5% - 1.3rem); }
.stack-the-fifths .stf-pc-3 { left: calc(91% - 1.3rem); top: calc(50% - 1.3rem); }
.stack-the-fifths .stf-pc-4 { left: calc(85.51% - 1.3rem); top: calc(70.5% - 1.3rem); }
.stack-the-fifths .stf-pc-5 { left: calc(70.5% - 1.3rem); top: calc(85.51% - 1.3rem); }
.stack-the-fifths .stf-pc-6 { left: calc(50% - 1.3rem); top: calc(91% - 1.3rem); }
.stack-the-fifths .stf-pc-7 { left: calc(29.5% - 1.3rem); top: calc(85.51% - 1.3rem); }
.stack-the-fifths .stf-pc-8 { left: calc(14.49% - 1.3rem); top: calc(70.5% - 1.3rem); }
.stack-the-fifths .stf-pc-9 { left: calc(9% - 1.3rem); top: calc(50% - 1.3rem); }
.stack-the-fifths .stf-pc-10 { left: calc(14.49% - 1.3rem); top: calc(29.5% - 1.3rem); }
.stack-the-fifths .stf-pc-11 { left: calc(29.5% - 1.3rem); top: calc(14.49% - 1.3rem); }
.stack-the-fifths .stf-ring { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.stack-the-fifths .stf-tick { stroke: var(--ink-3); stroke-width: 1.5; }
.stack-the-fifths .stf-star { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; opacity: .6; }
.stack-the-fifths .stf-hub { fill: var(--surface); stroke: var(--line); }
.stack-the-fifths .stf-dot { fill: var(--accent); }
.stack-the-fifths .stf-dot.is-now { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.stack-the-fifths .stf-ref { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 3 3; }
.stack-the-fifths .stf-gap { stroke: var(--bad); stroke-width: 2.5; }
.stack-the-fifths .stf-center { fill: var(--ink); font: 600 20px var(--serif); text-anchor: middle; dominant-baseline: middle; }
.stack-the-fifths .stf-center-sub { fill: var(--bad); font: 700 10px var(--sans); text-anchor: middle; dominant-baseline: middle; }
.stack-the-fifths .stf-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 .6rem; }
@container stf-side (min-width: 30rem) { .stack-the-fifths .stf-readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stack-the-fifths .stf-readouts .readout { padding: .5rem .6rem; }
.stack-the-fifths .stf-readouts dd { font-size: 1rem; overflow-wrap: anywhere; }
.stack-the-fifths .game-verdict { min-height: 1.5em; margin: .3rem 0 .6rem; }
.stack-the-fifths .stf-wide { grid-column: 1 / -1; }
.stack-the-fifths .stf-work { font: .92rem/1.45 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; margin: 0 0 .8rem; }
.stack-the-fifths .stf-drift svg { display: block; width: 100%; height: .8rem; border-radius: 999px; }
.stack-the-fifths .stf-drift p { margin: .3rem 0 .6rem; }
.stack-the-fifths .stf-track { fill: var(--surface-2); }
.stack-the-fifths .stf-fill { fill: var(--accent); }
.stack-the-fifths .stf-reveal:not(:empty) { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.stack-the-fifths .stf-reveal-h { font-size: 1.35rem; margin: 0 0 .4rem; }
.stack-the-fifths .stf-math { display: grid; gap: .3rem; margin: .6rem 0; padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--surface-2); font: .95rem/1.45 var(--mono); overflow-wrap: anywhere; }
.stack-the-fifths .stf-math p { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .stack-the-fifths .stf-dot.is-new { animation: stack-the-fifths-pop .35s ease-out; transform-box: fill-box; transform-origin: center; }
  .stack-the-fifths .stf-fill { transition: width .3s ease-out; }
}
@keyframes stack-the-fifths-pop { from { transform: scale(2.4); opacity: 0; } }

/* Construction puzzles (games/construction-puzzles.js): compass and straightedge on an SVG board */
.construction-puzzles .cp-title { font-size: 1.25rem; margin: .1rem 0 .3rem; }
.construction-puzzles .cp-task { margin: 0 0 .7rem; }
.construction-puzzles .cp-board { max-width: 40rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.construction-puzzles .cp-svg { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: manipulation; }
.construction-puzzles .cp-target { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 7 6; }
.construction-puzzles .is-solved .cp-target { stroke: var(--ok); stroke-width: 4; stroke-dasharray: none; }
.construction-puzzles .cp-giv { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.construction-puzzles .cp-obj { fill: none; stroke: var(--lapis); stroke-width: 1.6; }
.construction-puzzles .cp-ghostmove { fill: none; stroke: var(--ember); stroke-width: 1.5; stroke-dasharray: 3 5; }
.construction-puzzles .cp-dot { fill: var(--ink-2); }
.construction-puzzles .cp-dot.is-given { fill: var(--ink); }
.construction-puzzles .cp-dot.is-new { fill: var(--ember); }
.construction-puzzles .cp-sel { fill: color-mix(in srgb, var(--ember) 18%, transparent); stroke: var(--ember); stroke-width: 2.5; }
.construction-puzzles .cp-label { font: italic 600 calc(13px * var(--fig-k, 1)) var(--serif); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.construction-puzzles .cp-meter { margin: .6rem 0 .1rem; font-weight: 650; }
.construction-puzzles .cp-status { margin: 0 0 .5rem; color: var(--ink-2); min-height: 1.5em; }
.construction-puzzles .cp-tools, .construction-puzzles .cp-points { display: flex; flex-wrap: wrap; gap: .45rem; margin: .4rem 0 .7rem; }
.construction-puzzles .cp-points-h { margin: .4rem 0 0; }
.construction-puzzles .cp-pt { min-width: 2.75rem; font-family: var(--serif); font-style: italic; }
.construction-puzzles .cp-how { padding: .7rem 1rem; border-left: 4px solid var(--lapis); background: var(--surface-2); border-radius: var(--r-sm); }
.construction-puzzles .cp-how-h { font-weight: 650; margin: 0 0 .3rem; }
.construction-puzzles .cp-how ol { margin: 0; padding-left: 1.3rem; }
.construction-puzzles .cp-summary { padding-left: 1.2rem; }
@media (prefers-reduced-motion: no-preference) {
  .construction-puzzles .cp-obj.is-new { animation: construction-puzzles-in .3s ease-out; }
}
@keyframes construction-puzzles-in { from { opacity: 0; } }

/* Proof scramble (js/play/games/proof-scramble.js): reorder a demonstration's steps by drag, ↑ ↓ or the keyboard */
.proof-scramble .ps-claim { font: 600 1.15rem/1.35 var(--serif); margin: .3rem 0 .45rem; scroll-margin-top: 6rem; }
.proof-scramble .ps-meta { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; margin: 0 0 .5rem; }
.proof-scramble .ps-note { padding: .5rem .75rem; border-left: 3px solid var(--line-strong); background: var(--surface-2); border-radius: var(--r-sm); }
.proof-scramble .ps-how { margin: .4rem 0 0; }
.proof-scramble .ps-list { list-style: none; padding: 0; margin: .9rem 0; display: grid; gap: .5rem; }
.proof-scramble .ps-step {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; grid-template-areas: "grip text move" "grip mark move";
  gap: .1rem .5rem; align-items: start; padding: .45rem; border: 1px solid var(--line); border-left-width: 5px;
  border-radius: var(--r-sm); background: var(--surface); transition: border-color .15s, background-color .15s;
}
.proof-scramble .ps-done .ps-step { grid-template-columns: 2.25rem minmax(0, 1fr); grid-template-areas: "grip text" "grip mark"; }
.proof-scramble .ps-grip {
  grid-area: grip; align-self: stretch; display: grid; align-content: center; justify-items: center; gap: .3rem; min-height: 2.75rem;
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font: 700 1rem/1 var(--sans);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.proof-scramble .ps-list:not(.ps-done) .ps-grip::after {
  content: ""; width: .7rem; height: 1rem; opacity: .7;
  background: radial-gradient(circle, currentColor 1.2px, transparent 1.6px) 0 0 / .35rem .33rem;
}
.proof-scramble .ps-done .ps-grip { cursor: default; }
.proof-scramble .ps-pick, .proof-scramble .ps-done .ps-text {
  grid-area: text; display: block; width: 100%; margin: 0; padding: .3rem .4rem; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink); font: 1rem/1.5 var(--serif); text-align: left; cursor: pointer;
}
.proof-scramble .ps-done .ps-text { cursor: auto; }
.proof-scramble .ps-pick:hover { background: var(--surface-2); }
.proof-scramble .ps-pick[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.proof-scramble .ps-step:has(.ps-pick[aria-pressed="true"]) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.proof-scramble .ps-mark { grid-area: mark; padding: 0 .4rem .15rem; font: 650 .88rem/1.3 var(--sans); }
.proof-scramble .ps-step.is-right { border-left-color: var(--ok); }
.proof-scramble .ps-step.is-right .ps-mark { color: var(--ok); }
.proof-scramble .ps-step.is-wrong { border-left-color: var(--warn); }
.proof-scramble .ps-step.is-wrong .ps-mark { color: var(--warn); }
.proof-scramble .ps-move { grid-area: move; display: grid; gap: .3rem; }
.proof-scramble .ps-move button {
  width: 2.5rem; height: 2.25rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: 700 1.05rem/1 var(--sans); cursor: pointer;
}
.proof-scramble .ps-move button:hover { border-color: var(--ink-3); }
.proof-scramble .ps-move button[aria-disabled="true"] { opacity: .45; cursor: default; }
.proof-scramble .ps-step.is-dragging { position: relative; z-index: 1; background: var(--surface-2); box-shadow: 0 8px 20px rgb(0 0 0 / .18); }
.proof-scramble .ps-step.is-dragging .ps-grip { cursor: grabbing; }
.proof-scramble .ps-actions { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; }
.proof-scramble .ps-summary { padding-left: 1.2rem; display: grid; gap: .3rem; }
/* phones: the ↑ ↓ buttons go in a row under the text, so a step reads at full width */
@media (max-width: 24rem) {
  .proof-scramble .ps-step { grid-template-columns: 1.9rem minmax(0, 1fr); grid-template-areas: "grip text" "grip mark" "grip move"; gap: .1rem .3rem; padding: .35rem; }
  .proof-scramble .ps-move { display: flex; justify-content: flex-end; gap: .4rem; }
  .proof-scramble .ps-move button { width: 2.75rem; }
  .proof-scramble .ps-pick, .proof-scramble .ps-done .ps-text { padding: .25rem; font-size: .97rem; }
}

/* branching-elenchus: Socratic cross-examination as a branching dialogue */
.branching-elenchus { max-width: 44rem; }
.branching-elenchus .be-h { font-size: 1.15rem; margin: 1rem 0 .6rem; }
.branching-elenchus .be-h:focus, .branching-elenchus .be-q:focus { outline-offset: 4px; }
.branching-elenchus .be-lede { margin-top: 0; }
.branching-elenchus .be-note, .branching-elenchus .be-src { margin-top: .9rem; }
.branching-elenchus .be-setting { color: var(--ink-2); }
.branching-elenchus .be-table { margin: .4rem 0 .8rem; padding: .7rem .9rem; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }
.branching-elenchus .be-table-h { margin: 0 0 .2rem; font: 650 .75rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.branching-elenchus .be-def { margin: 0; font: 600 1.02rem/1.45 var(--serif); }
.branching-elenchus .be-gone { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .9rem; color: var(--ink-3); }
.branching-elenchus .be-gone s { text-decoration-thickness: 1px; }
.branching-elenchus .be-then { font-style: italic; color: var(--ink-2); margin: .4rem 0; }
.branching-elenchus .be-q { border-left-color: var(--lapis); }
.branching-elenchus .be-you { border-left-color: var(--line-strong); }
.branching-elenchus .be-you p { font-size: 1rem; }
.branching-elenchus .be-your { margin: .9rem 0 .4rem; font-weight: 650; }
.branching-elenchus .game-opt { border-radius: var(--r); justify-content: start; }
.branching-elenchus .be-opts { grid-template-columns: 1fr; }
.branching-elenchus .be-opts .game-opt { font-weight: 500; line-height: 1.4; }
.branching-elenchus .game-verdict { margin-bottom: .2rem; }
.branching-elenchus .game-verdict.is-mid { color: var(--warn); }
.branching-elenchus .game-verdict.is-wrong { color: var(--bad); }
.branching-elenchus .be-why { margin-top: 0; }
.branching-elenchus .be-dlg { padding: .55rem .8rem; border-radius: var(--r-sm); background: var(--surface-2); }
.branching-elenchus .be-next { margin: 1rem 0 0; }
.branching-elenchus .be-end { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.branching-elenchus h4 { font-size: 1rem; margin: 1.1rem 0 .4rem; }
.branching-elenchus .be-defs, .branching-elenchus .be-moves { margin: 0; padding-left: 1.4rem; display: grid; gap: .3rem; }
.branching-elenchus .be-when { display: block; }
.branching-elenchus .be-dot { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-right: .45rem; vertical-align: -.05rem; background: var(--line-strong); }
.branching-elenchus .be-m-g .be-dot { background: var(--ok); }
.branching-elenchus .be-m-y .be-dot { background: var(--warn); }
.branching-elenchus .be-m-r .be-dot { background: var(--bad); }
@media (prefers-reduced-motion: no-preference) {
  .branching-elenchus .be-screen { animation: be-in .18s ease-out; }
  @keyframes be-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* Puzzle of the week (games/puzzle-of-the-week.js): every rule scoped to .puzzle-of-the-week */
.puzzle-of-the-week { display: grid; gap: .2rem; }
.puzzle-of-the-week .potw-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.puzzle-of-the-week .potw-head .game-step { margin: 0; }
.puzzle-of-the-week .potw-title { font-size: 1.3rem; margin: .5rem 0 .3rem; }
.puzzle-of-the-week .potw-prompt { font: 500 1.08rem/1.55 var(--serif); margin: 0 0 .6rem; max-width: 40rem; }
.puzzle-of-the-week .potw-story { margin: 0 0 .6rem; }
.puzzle-of-the-week .potw-figure { margin: .2rem 0 .8rem; }
.puzzle-of-the-week .potw-fig { display: block; width: 100%; height: auto; max-width: 20rem; }
.puzzle-of-the-week .potw-edge { fill: none; stroke: var(--accent, var(--ember)); stroke-width: 3; }
.puzzle-of-the-week .potw-node { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.puzzle-of-the-week .potw-label { fill: var(--ink); font: 600 15px var(--sans); }
.puzzle-of-the-week .potw-sq-light { fill: #f2e6cf; stroke: #8a7457; stroke-width: .5; }   /* fixed colours: the puzzle names them */
.puzzle-of-the-week .potw-sq-dark { fill: #7d6446; }
.puzzle-of-the-week .potw-sq-gone { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 3; }
.puzzle-of-the-week .potw-sq-cut { stroke: var(--bad, #a3221b); stroke-width: 2.5; stroke-linecap: round; }
.puzzle-of-the-week .potw-base, .puzzle-of-the-week .potw-peg { fill: var(--ink-3); }
.puzzle-of-the-week .potw-disc { fill: color-mix(in srgb, var(--accent, var(--ember)) 75%, var(--surface)); stroke: var(--ink); stroke-width: 1.2; }
.puzzle-of-the-week .potw-points { margin: .2rem 0 .6rem; font-weight: 600; }
.puzzle-of-the-week .potw-form { display: grid; gap: .45rem; max-width: 34rem; }
.puzzle-of-the-week .potw-conf .game-conf { margin: 0; }
.puzzle-of-the-week .potw-conf p { margin: 0 0 .4rem; }
.puzzle-of-the-week .potw-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.puzzle-of-the-week .potw-row .potw-input { flex: 1 1 8rem; width: auto; min-width: 0; }
.puzzle-of-the-week .potw-q { margin: 0; font-weight: 600; }
.puzzle-of-the-week .game-opt { justify-content: start; }
.puzzle-of-the-week .game-opt[disabled] { opacity: .75; cursor: not-allowed; text-decoration: line-through; }
.puzzle-of-the-week .game-opt[disabled] .small { text-decoration: none; }
.puzzle-of-the-week .potw-feedback { min-height: 1.5em; margin: 0; font-weight: 600; color: var(--warn); }
.puzzle-of-the-week .potw-ladder { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.puzzle-of-the-week .potw-ladder h4 { margin: 0 0 .3rem; font-size: 1.05rem; }
.puzzle-of-the-week .potw-ladder > p { margin: 0 0 .6rem; }
.puzzle-of-the-week .potw-rungs { margin: 0 0 .6rem; padding-left: 1.4rem; display: grid; gap: .6rem; }
.puzzle-of-the-week .potw-rungs:empty { display: none; }
.puzzle-of-the-week .potw-rung p { margin: .15rem 0 0; }
.puzzle-of-the-week .potw-rung-name { color: var(--ink); }
.puzzle-of-the-week .potw-next-row { margin: 0; }
.puzzle-of-the-week .potw-solution { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.puzzle-of-the-week .potw-solution h4 { margin: 0 0 .5rem; font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.puzzle-of-the-week .potw-steps { padding-left: 1.4rem; display: grid; gap: .25rem; }
.puzzle-of-the-week .potw-plan { padding-left: 1.1rem; margin: .3rem 0; display: grid; gap: .3rem; }
.puzzle-of-the-week .potw-plan-box { font-size: .95rem; margin: .4rem 0 .8rem; }
.puzzle-of-the-week .potw-plan-box summary { cursor: pointer; font-weight: 600; }
.puzzle-of-the-week .potw-sources summary { cursor: pointer; font-weight: 600; font-size: .95rem; }
.puzzle-of-the-week .potw-sources ul { padding-left: 1.1rem; display: grid; gap: .3rem; }
.puzzle-of-the-week .potw-sources a { overflow-wrap: anywhere; }
.puzzle-of-the-week .potw-more { margin-top: .6rem; }
.puzzle-of-the-week .potw-more p { margin: 0 0 .4rem; }
.puzzle-of-the-week .potw-more-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.puzzle-of-the-week .potw-more-list .btn { white-space: normal; text-align: left; }
@media (prefers-reduced-motion: no-preference) {
  .puzzle-of-the-week .potw-rung { animation: potw-in .25s ease-out; }
  @keyframes potw-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* Greek root of the day (js/play/games/greek-root.js) */
.greek-root-step { font: 600 .9rem/1.3 var(--sans); color: var(--ink-2); margin: 0 0 .4rem; }
.greek-root-step:focus { outline: none; }
.greek-root-card { margin: .4rem 0 .9rem; padding: .8rem 1rem; border-left: 4px solid var(--accent, var(--ember)); background: var(--surface-2); border-radius: var(--r-sm); }
.greek-root-word { font: 600 clamp(1.9rem, 8vw, 2.5rem)/1.15 var(--serif); margin: 0 0 .25rem; }
.greek-root-tr { margin: 0 0 .3rem; font-size: 1.05rem; }
.greek-root-forms { margin: 0; }
.greek-root-q { margin: .6rem 0; }
.greek-root-opts { grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
.greek-root-opt { display: flex; align-items: center; justify-content: center; gap: .4rem; text-align: center; font-weight: 600; overflow-wrap: anywhere; }
.greek-root-opt[aria-pressed="true"]::before { content: "✓ "; content: "✓ " / ""; }
.greek-root-status { margin: .6rem 0; min-height: 1.5em; }
.greek-root-h { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.greek-root-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.greek-root-item { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.greek-root-item.is-from { border-left: 4px solid var(--ok); }
.greek-root-item p { margin: 0 0 .2rem; }
.greek-root-line { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.greek-root-mark { font-size: .92rem; font-weight: 600; }
.greek-root-mark.is-good { color: var(--ok); }
.greek-root-mark.is-bad { color: var(--bad); }
.greek-root-src a { overflow-wrap: anywhere; }

/* Study or spin? (games/study-or-spin.js): an invented headline, the abstract behind it, and the catch */
.study-or-spin-kicker { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .3rem 0 0; font: 650 .8rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.study-or-spin-badge { padding: .1rem .55rem; border: 1px dashed var(--line-strong); border-radius: 999px; color: var(--ink-2); }
.study-or-spin-headline p { font: 700 1.25rem/1.3 var(--serif); margin: 0; }
.study-or-spin-abstract { margin: .6rem 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.study-or-spin-abstract h3 { margin: 0 0 .35rem; font: 650 .8rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.study-or-spin-abstract p { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.study-or-spin-ask { font-weight: 700; margin: 1rem 0 0; }
.game-verdict.study-or-spin-partly { color: var(--gold); }  /* partly right: gold; the spin: --bad, so the two never share a colour */
.study-or-spin-compare { margin: .8rem 0; padding: .7rem 1rem; border-left: 4px solid var(--accent, var(--ember)); background: var(--surface-2); border-radius: var(--r-sm); }
.study-or-spin-compare dt { font: 650 .8rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.study-or-spin-compare dd { margin: .15rem 0 .6rem; }
.study-or-spin-compare dd:last-child { margin-bottom: 0; }
.study-or-spin-show { font-weight: 650; }
.study-or-spin-list-h { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.study-or-spin-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .45rem; }
.study-or-spin-mark { display: inline-block; min-width: 4.2rem; font: 650 .8rem/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.study-or-spin-mark.is-g { color: var(--ok); }
.study-or-spin-mark.is-y { color: var(--gold); }
.study-or-spin-mark.is-r, .study-or-spin .game-verdict.is-wrong { color: var(--bad); }

/* Outage of the week (js/play/games/outage-of-the-week.js) */
/* while a round is on, the card takes the full row (the long case needs room), with a readable line length */
#outage-of-the-week:has(.game-body.outage) { grid-column: 1 / -1; }
#outage-of-the-week .game-stage > * { max-width: 52rem; }
.outage-bar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.outage-bar p { margin: 0; }
.outage .outage-title { font-size: 1.3rem; margin: .1rem 0 .3rem; }
.outage h4 { font: 650 .8rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 1.2rem 0 .5rem; }
.outage .game-opt { border-radius: var(--r-sm); justify-content: start; }
.outage .game-opt:disabled { cursor: default; background: var(--surface-2); border-style: dashed; transform: none; }
.outage-known, .outage-hyps, .outage-log, .outage-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.outage-obs { font: 650 .75rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: .2rem .45rem; border: 1px solid var(--line-strong); border-radius: 999px; }
.outage-hyps li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .15rem .5rem; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.outage-letter { grid-row: span 2; font: 700 1.05rem/1.5 var(--mono); color: var(--accent, var(--ember)); }
.outage-htext { overflow-wrap: anywhere; }
.outage-state { font-size: .88rem; font-weight: 650; }
.outage-hyps .is-open .outage-state { color: var(--ok); }
.outage-hyps .is-out { background: var(--surface-2); }
.outage-hyps .is-out .outage-htext { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--ink-2); }
.outage-hyps .is-out .outage-letter { color: var(--ink-3); }
.outage-hyps .is-out .outage-state { color: var(--warn); }
.outage-log li { padding: .6rem .8rem; border-left: 4px solid var(--line-strong); background: var(--surface-2); border-radius: var(--r-sm); }
.outage-log li.is-split { border-left-color: var(--ok); }
.outage-log li.is-lost { border-left-color: var(--warn); }
.outage-log p { margin: .2rem 0; }
.outage-n { font: 650 .8rem/1 var(--mono); color: var(--ink-3); }
.outage-test { font-weight: 650; }
.outage-tag { font-weight: 650; }
.outage-lost { color: var(--warn); }
.outage-why { color: var(--ink-2); }
.outage-tally { font-weight: 600; margin: .8rem 0 .4rem; }
.outage-tally.is-ready { color: var(--ok); }
.outage-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .8rem 0 0; }
.outage-how { color: var(--ink-2); }
.outage-debrief { margin: 0; display: grid; gap: .2rem; }
.outage-debrief dt { font-weight: 700; margin-top: .4rem; }
.outage-debrief dd { margin: 0; }
.outage-facts a { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .outage-log li:last-child { animation: outage-in .25s ease-out; }
  @keyframes outage-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}