/*
  The Desync boss — the master puzzle's fight screen (/master-puzzle, /preview/desync-boss).

  Ported from the "Desync Boss" design export, whose markup is all inline styles; every value here
  is the design's. Global rather than scoped because most of the scene is built by the component's
  JS module (cracks, beams, ash, shards), and neither those nodes nor Monaco's carry a scope
  attribute — the same reason the ritual's styles live in journey-map.css.

  Nothing in here is driven from C#. DesyncBossView.razor.js writes the fight's state onto
  .ds-boss as data attributes (data-mode, data-hit, data-breaking, data-hot, data-dawn, data-intro) and custom
  properties (--ds-*), which is the whole of renderVals() in the design; the rules below only read
  them. A layer that exists only in some modes is display:none until then, so its infinite
  animation costs nothing while it is not shown, and showing it restarts it — which is what
  mounting it did in the design.
*/

/* ── Keyframes — verbatim from the design ─────────────── */

@keyframes dsSaccade{0%,14%{transform:translate(0,0)}16%,38%{transform:translate(3.5px,-1px)}40%,58%{transform:translate(-3px,1.2px)}60%,84%{transform:translate(1px,2px)}86%,100%{transform:translate(0,0)}}
@keyframes dsFeralDilate{0%,58%,100%{transform:scaleX(1)}66%,80%{transform:scaleX(1.9)}88%{transform:scaleX(.9)}}
@keyframes dsSpin{to{transform:rotate(360deg)}}
@keyframes dsSpinRev{to{transform:rotate(-360deg)}}
@keyframes dsTwinkle{0%,100%{opacity:.15}50%{opacity:.6}}
@keyframes dsPull{0%{transform:translate(0,0) scale(1);opacity:0}15%{opacity:.8}100%{transform:translate(var(--dx),var(--dy)) scale(.1);opacity:0}}
@keyframes dsGlitch{0%,86%,100%{transform:translate(0,0)}88%{transform:translate(calc(var(--g) * -6px),0)}91%{transform:translate(calc(var(--g) * 5px),0)}94%{transform:translate(calc(var(--g) * -2px),0)}}
@keyframes dsGhostR{0%,86%,100%{opacity:0;transform:translate(0,0)}88%{opacity:.9;transform:translate(calc(var(--g) * 9px),0)}91%{opacity:.7;transform:translate(calc(var(--g) * -6px),0)}94%{opacity:0}}
@keyframes dsGhostK{0%,86%,100%{opacity:0;transform:translate(0,0)}88%{opacity:.8;transform:translate(calc(var(--g) * -9px),0)}91%{opacity:.6;transform:translate(calc(var(--g) * 7px),0)}94%{opacity:0}}
@keyframes dsSlice{0%,70%,100%{opacity:0;transform:translateX(0)}72%{opacity:1;transform:translateX(calc(var(--g) * 10px))}76%{opacity:1;transform:translateX(calc(var(--g) * -8px))}79%{opacity:0}}
@keyframes dsBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes dsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes dsShock{0%{transform:scale(.45);opacity:.6}100%{transform:scale(2.4);opacity:0}}
@keyframes dsPullShake{0%{transform:translate(0,0)}25%{transform:translate(1.5px,-1px)}50%{transform:translate(-1px,1.5px)}75%{transform:translate(-1.5px,-.5px)}100%{transform:translate(0,0)}}
@keyframes dsHitShake{0%{transform:translate(0,0) scale(1)}10%{transform:translate(-10px,4px) scale(.96)}25%{transform:translate(8px,-5px) scale(1.03)}40%{transform:translate(-5px,3px)}60%{transform:translate(3px,-2px)}100%{transform:translate(0,0) scale(1)}}
@keyframes dsBreakFree{0%{transform:scale(1) rotate(0deg)}30%{transform:scale(.955) rotate(-1.2deg)}52%{transform:scale(1.045) rotate(.8deg)}72%{transform:scale(.99) rotate(-.3deg)}100%{transform:scale(1) rotate(0deg)}}
@keyframes dsBreakRing{0%,40%{transform:scale(.7);opacity:0}52%{opacity:.8}100%{transform:scale(2.2);opacity:0}}
@keyframes dsBreakFlash{0%,38%{opacity:0}55%{opacity:.6}100%{opacity:0}}
@keyframes dsDieShake{0%{transform:translate(0,0)}25%{transform:translate(4px,-3px) rotate(.4deg)}50%{transform:translate(-3px,4px) rotate(-.4deg)}75%{transform:translate(-4px,-2px)}100%{transform:translate(0,0)}}
@keyframes dsFlash{0%{opacity:.9}100%{opacity:0}}
@keyframes dsBurst{0%{transform:scale(.05);opacity:1}100%{transform:scale(3.4);opacity:0}}
@keyframes dsDawn{0%{opacity:0}100%{opacity:1}}
@keyframes dsCorona{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.04);opacity:1}}
@keyframes dcdrawA{from{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes dcdrawB{from{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes dsDraw{to{stroke-dashoffset:0}}
@keyframes dsLeak{0%,100%{opacity:.35}50%{opacity:.95}}
@keyframes dsLeakRays{from{transform:rotate(0deg) scale(.6);opacity:0}20%{opacity:.9}to{transform:rotate(40deg) scale(1.25);opacity:1}}
@keyframes dsShard{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}70%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) rotate(var(--r)) scale(.35);opacity:0}}
@keyframes dsRayBurst{0%{transform:scale(.15) rotate(0deg);opacity:1}100%{transform:scale(2.6) rotate(25deg);opacity:0}}
@keyframes dsCore{0%{transform:scale(1);opacity:1}35%{transform:scale(1.8);opacity:1}100%{transform:scale(0);opacity:0}}
@keyframes dsTitleIn{0%{opacity:0;transform:translateY(14px) scale(.96);filter:blur(6px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes dsLineIn{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes dsEyeOpen{0%{transform:scaleY(.07);opacity:.4}18%{transform:scaleY(.22);opacity:.8}32%{transform:scaleY(.16);opacity:.8}55%{transform:scaleY(.45);opacity:1}100%{transform:scaleY(1);opacity:1}}
@keyframes dsPanelIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes dsSigilRing{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.32);opacity:0}}
@keyframes dsDots{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes dsFadeIn{to{opacity:1}}
@keyframes ivSuck{0%{transform:scale(2.8);opacity:0}30%{opacity:.55}100%{transform:scale(.45);opacity:0}}

/* ── Root ────────────────────────────────────────────── */

/*
  Fixed over the whole viewport, on the ritual's layer: above the top bar (--z-floating) and the
  Oracle (--z-modal), below the break overlay. The defaults are the dormant state, so the first
  paint before the module has run already looks right.
*/
.ds-boss {
    --ds-scale: 1;
    --g: 1;
    --ds-red: none;
    --ds-red-b: brightness(1);
    --ds-eye-t: scaleY(.07);
    --ds-eye-o: .4;
    --ds-eye-anim: none;
    --ds-motion: none;
    --ds-feral-dilate: 20s;
    --ds-pupil-w: 6.2px;
    --ds-pupil-in: 4px;
    --ds-leak-speed: .5s;
    --ds-crack-glow: drop-shadow(0 0 1px rgba(255,60,75,.9)) drop-shadow(0 0 3px rgba(193,18,31,.8));
    --ds-crack-color: #c1121f;
    --ds-boss-transition: transform 1.2s cubic-bezier(.7,-0.3,.9,.6), opacity .6s ease, filter 1.2s ease;
    --ds-breathe: dsBreathe 6s ease-in-out infinite;
    --ds-shake: none;
    --ds-boss-scale: 1;
    --ds-boss-opacity: 1;
    --ds-cleanse: none;
    --ds-cleanse-glow: 0;
    --ds-ray-speed: 400s;
    --ds-petal-speed: 400s;
    --ds-swirl-speed: 20s;
    --ds-glitch-speed: 11s;
    --ds-slice-speed: 14s;

    position: fixed;
    inset: 0;
    z-index: 210;
    overflow: hidden;
    padding: 22px 24px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    background: #e9e7e3;
    color: #1a1b1e;
    font-family: 'Barlow', sans-serif;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
}

.ds-boss *,
.ds-boss *::before,
.ds-boss *::after {
    box-sizing: border-box;
}

.ds-boss ::selection {
    background: rgba(193,18,31,.35);
}

/* Zero specificity, so every button's own class still sets its type. */
:where(.ds-boss) button {
    font: inherit;
    margin: 0;
}

/*
  The screen is rendered inside the player shell, whose <main> is a z-index 1 stacking context —
  which on its own would leave the sticky top bar (z 50) and the Oracle painted over the boss. While
  a boss is mounted the module puts this class on <html>: the shell's body is lifted to the ritual's
  layer, and the page underneath stops scrolling.

  The scrollbar gutter app.css reserves goes too, or it paints a strip of the page background down
  the right edge of the screen. Losing it resizes the backdrop behind by a scrollbar's width, which
  is inside the backdrop's resize tolerance, so nothing is rebuilt.
*/
html.ds-boss-active {
    overflow: hidden;
    scrollbar-gutter: auto;
}

html.ds-boss-active .ach-shell__body {
    z-index: 210;
}

/*
  The reactor floor is the layout backdrop's: FactionBackdrop plays it (js/achrona-desync-floor.js,
  in its worker) once the module asks for it, and writes data-world="desync" on it. From then on the
  boss's own ground is cleared so the floor shows through, and the backdrop is lifted to just under
  the shell's body — over the top bar (50) and the Oracle (200), which the boss covered itself until
  now. Without a backdrop playing the floor (no worker), the boss keeps its own ground and goes
  without one.
*/
html.ds-boss-active .ach-backdrop[data-world="desync"] {
    z-index: 209;
}

html.ds-boss-active:has(.ach-backdrop[data-world="desync"]) .ds-boss,
html.ds-boss-active:has(.ach-backdrop[data-world="desync"]) .ds-stage {
    background: transparent;
}

/* ── Header ──────────────────────────────────────────── */

.ds-head {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1400px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: 16px;
    pointer-events: none;
}

.ds-head__title {
    font-family: 'Pirata One', serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: #0b0b0c;
    margin: 0;
    pointer-events: auto;
}

.ds-head__clock {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: #0b0b0c;
    border: 1px solid rgba(11,11,12,.2);
    border-radius: 18px;
    padding: 5px 14px;
    background: rgba(255,255,255,.6);
    white-space: nowrap;
    pointer-events: auto;
    font-variant-numeric: tabular-nums;
}

/* The header's left column: the exit, and the intro's replay beside it. */
.ds-head__side {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Back to the map. Round, in the clock pill's glass, and it turns the boss's red on hover. */
.ds-head__exit {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(11,11,12,.2);
    background: rgba(255,255,255,.6);
    color: #0b0b0c;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    pointer-events: auto;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.ds-head__exit:hover {
    color: #c1121f;
    border-color: #c1121f;
    background: #ffffff;
    transform: scale(1.06);
}

.ds-head__exit:focus-visible {
    outline: 2px solid #c1121f;
    outline-offset: 3px;
}

.ds-head__replay {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: .18em;
    white-space: nowrap;
    color: #3a3c41;
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(11,11,12,.2);
    border-radius: 18px;
    padding: 6px 14px;
    cursor: pointer;
    pointer-events: auto;
    transition: color .2s ease, border-color .2s ease;
}

.ds-head__replay:hover {
    color: #c1121f;
    border-color: #c1121f;
}

.ds-head__replay:focus-visible {
    outline: 2px solid #c1121f;
    outline-offset: 3px;
}

/* The header's right column: the rules, the clock, and the rules' card hanging under both. */
.ds-head__side--end {
    justify-self: end;
    position: relative;
}

@keyframes dsRulesCall {
    0% { box-shadow: 0 0 0 0 rgba(193,18,31,.45); }
    70% { box-shadow: 0 0 0 12px rgba(193,18,31,0); }
    100% { box-shadow: 0 0 0 0 rgba(193,18,31,0); }
}

/* The replay pill's twin. Until the rules have been opened once it is red and pulsing. */
.ds-head__rules {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: .18em;
    white-space: nowrap;
    color: #3a3c41;
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(11,11,12,.2);
    border-radius: 18px;
    padding: 6px 14px;
    cursor: pointer;
    pointer-events: auto;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.ds-head__rules:hover,
.ds-head__rules[aria-expanded="true"] {
    color: #c1121f;
    border-color: #c1121f;
}

.ds-head__rules.is-new {
    color: #fff;
    background: #c1121f;
    border-color: #c1121f;
    animation: dsRulesCall 1.8s ease-out infinite;
}

.ds-head__rules:focus-visible {
    outline: 2px solid #c1121f;
    outline-offset: 3px;
}

.ds-rules-card {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(400px, calc(100vw - 32px));
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
    border: 1px solid rgba(11,11,12,.16);
    border-radius: 14px;
    background: #fbfaf8;
    box-shadow: 0 30px 70px rgba(11,11,12,.22), 0 0 0 6px rgba(255,255,255,.55);
    pointer-events: auto;
    animation: dsPanelIn .3s ease-out;
}

.ds-rules-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ds-rules-card__title {
    font-family: 'Pirata One', serif;
    font-size: 24px;
    line-height: 1;
    color: #0b0b0c;
}

.ds-rules-card__lead {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    line-height: 1.5;
    color: #c1121f;
    margin: 0;
}

.ds-rules-card__heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 11px;
    color: #55585e;
    margin: 4px 0 0;
}

/*
  The design's three-column header centres the title and pushes the clock right, which on a phone
  runs the clock into the title. Below that width the title moves left, next to the exit.
*/
@media (max-width: 560px) {
    .ds-head {
        grid-template-columns: auto minmax(0,1fr) auto;
        gap: 12px;
    }

    .ds-head__title {
        font-size: 32px;
        justify-self: start;
    }

    /* Only the arrow: the words would push the title off the row. */
    .ds-head__replay {
        padding: 6px 10px;
    }

    .ds-head__replay-label,
    .ds-head__rules-label {
        display: none;
    }

    .ds-head__rules {
        padding: 6px 10px;
    }
}

/* ── Stage & floor ───────────────────────────────────── */

.ds-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    contain: strict;
    background: radial-gradient(ellipse 75% 70% at 50% 50%, #ffffff 0%, #f5f4f1 38%, #e4e2dd 72%, #d3d1cb 100%);
}

.ds-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255,255,255,.95) 20%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}

.ds-blob {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(120,122,128,.2), transparent 70%);
    filter: blur(18px);
    pointer-events: none;
}

.ds-blob--tl { left: -80px; top: -60px; width: 360px; height: 260px; }
.ds-blob--br { right: -100px; bottom: -80px; width: 420px; height: 300px; }

.ds-scene {
    position: absolute;
    inset: 0;
    transform: translateY(22px) scale(var(--ds-scale));
    transform-origin: 50% 50%;
}

/* Centred square layers, all sized from their own width/height. */
.ds-c {
    position: absolute;
    left: 50%;
    top: 50%;
}

.ds-fill {
    position: absolute;
    inset: 0;
}

/* The slow outer tick ring. */
.ds-tick {
    width: 760px;
    height: 760px;
    margin: -380px 0 0 -380px;
    animation: dsSpin 240s linear infinite;
    pointer-events: none;
}

.ds-tick__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(11,11,12,.07);
}

.ds-tick__marks {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(11,11,12,.1) 0deg .4deg, transparent .4deg 5deg);
    -webkit-mask: radial-gradient(circle, transparent 46%, #000 46.5%, #000 48.5%, transparent 49%);
    mask: radial-gradient(circle, transparent 46%, #000 46.5%, #000 48.5%, transparent 49%);
}

/* ── Ash ─────────────────────────────────────────────── */

.ds-ash {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ds-ash > i {
    position: absolute;
    border-radius: 50%;
    background: #3a3c41;
    animation: dsPull calc(9s + var(--k) * 6s) linear calc(var(--k) * -14s) infinite;
}

.ds-boss[data-mode="pull"] .ds-ash > i {
    animation: dsPull calc(1.4s + var(--k) * 1s) linear calc(var(--k) * -2s) infinite;
}

.ds-boss[data-mode="dormant"] .ds-ash > i,
.ds-boss[data-mode="split"] .ds-ash > i {
    animation: dsTwinkle calc(3s + var(--k) * 3s) ease-in-out calc(var(--k) * -4s) infinite;
}

/* ── Beams ───────────────────────────────────────────── */

.ds-beams {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 1px;
    overflow: visible;
    pointer-events: none;
}

.ds-beam {
    filter: var(--ds-red);
}

.ds-boss[data-mode="split"] .ds-beams {
    display: none;
}

/* ── Cleanse glow, break-free rings ──────────────────── */

.ds-cleanse {
    width: 640px;
    height: 640px;
    margin: -320px 0 0 -320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,1) 12%, rgba(255,255,255,.6) 30%, transparent 58%);
    opacity: var(--ds-cleanse-glow);
    transition: opacity 1.2s ease;
    pointer-events: none;
}

.ds-break {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
}

.ds-boss[data-breaking] .ds-break {
    display: block;
}

.ds-break__ring {
    width: 240px;
    height: 240px;
    margin: -120px 0 0 -120px;
    border-radius: 50%;
    border: 2px solid #c1121f;
    animation: dsBreakRing 1.9s cubic-bezier(.16,.8,.3,1) both;
}

.ds-break__ring--late {
    border: 1px solid #0b0b0c;
    animation: dsBreakRing 2.2s cubic-bezier(.16,.8,.3,1) .15s both;
}

.ds-break__flash {
    width: 520px;
    height: 520px;
    margin: -260px 0 0 -260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(193,18,31,.35) 0%, rgba(193,18,31,.12) 35%, transparent 65%);
    animation: dsBreakFlash 1.9s ease-out both;
}

/* ── The boss ────────────────────────────────────────── */

.ds-shake {
    position: absolute;
    inset: 0;
    animation: var(--ds-shake);
    pointer-events: none;
}

.ds-body {
    position: absolute;
    inset: 0;
    will-change: transform;
    transform: scale(var(--ds-boss-scale));
    opacity: var(--ds-boss-opacity);
    filter: var(--ds-cleanse);
    transition: var(--ds-boss-transition);
}

.ds-shock {
    display: none;
    width: 260px;
    height: 260px;
    margin: -130px 0 0 -130px;
    border-radius: 50%;
    border: 1.5px solid rgba(11,11,12,.35);
    animation: dsShock 1.8s ease-out infinite;
}

.ds-shock--late {
    border: 1px solid rgba(193,18,31,.4);
    animation: dsShock 1.8s ease-out .9s infinite;
}

.ds-boss[data-mode="pull"] .ds-shock {
    display: block;
}

.ds-rays {
    width: 940px;
    height: 940px;
    margin: -470px 0 0 -470px;
    animation: dsSpin var(--ds-ray-speed) linear infinite;
}

.ds-rays__fan {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        repeating-conic-gradient(rgba(11,11,12,.13) 0deg .22deg, transparent .22deg 2.5deg),
        repeating-conic-gradient(from 1.2deg, rgba(193,18,31,.16) 0deg .2deg, transparent .2deg 15deg);
    -webkit-mask: radial-gradient(circle, transparent 13%, #000 15%, rgba(0,0,0,.5) 30%, transparent 50%);
    mask: radial-gradient(circle, transparent 13%, #000 15%, rgba(0,0,0,.5) 30%, transparent 50%);
    filter: var(--ds-red);
}

.ds-float {
    position: absolute;
    inset: 0;
    animation: dsFloat 7s ease-in-out infinite;
}

.ds-petals {
    width: 0;
    height: 0;
    animation: dsSpinRev var(--ds-petal-speed) linear infinite;
}

.ds-petal {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
}

.ds-petal > i {
    position: absolute;
    left: -38px;
    top: -212px;
    width: 76px;
    height: 212px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    border: 1px solid rgba(11,11,12,.2);
    background: linear-gradient(180deg, rgba(255,255,255,.7), transparent 70%);
}

.ds-halo {
    width: 330px;
    height: 330px;
    margin: -165px 0 0 -165px;
    border-radius: 50%;
    border: 1px solid rgba(11,11,12,.55);
    box-shadow: 0 0 0 6px rgba(255,255,255,.85), 0 0 0 7px rgba(11,11,12,.15);
}

.ds-orb {
    width: 210px;
    height: 210px;
    margin: -105px 0 0 -105px;
    animation: var(--ds-breathe);
}

.ds-leak-rays {
    display: none;
    position: absolute;
    inset: -190px;
    border-radius: 50%;
    background:
        repeating-conic-gradient(rgba(255,255,255,.95) 0deg 1.4deg, transparent 1.4deg 13deg),
        repeating-conic-gradient(from 5deg, rgba(193,18,31,.5) 0deg .8deg, transparent .8deg 29deg);
    -webkit-mask: radial-gradient(circle, transparent 18%, #000 24%, transparent 62%);
    mask: radial-gradient(circle, transparent 18%, #000 24%, transparent 62%);
    animation: dsLeakRays 3.6s cubic-bezier(.4,0,.8,.4) forwards;
}

.ds-orb__shadow {
    position: absolute;
    inset: -44px;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, rgba(11,11,12,.3) 62%, rgba(11,11,12,.1) 80%, transparent 100%);
    filter: blur(10px);
}

.ds-corona {
    position: absolute;
    inset: -26px;
    animation: dsSpin 26s linear infinite;
}

.ds-corona > i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 100deg, transparent 0deg, rgba(193,18,31,.55) 60deg, rgba(255,70,85,.8) 100deg, rgba(193,18,31,.55) 140deg, transparent 200deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 72%, #000 82%, transparent 100%);
    mask: radial-gradient(circle closest-side, transparent 72%, #000 82%, transparent 100%);
    filter: blur(8px) var(--ds-red-b);
    animation: dsCorona 5s ease-in-out infinite;
}

.ds-corona--rim {
    inset: -8px;
}

.ds-corona--rim > i {
    background: conic-gradient(from 100deg, transparent 0deg, rgba(193,18,31,.7) 55deg, #ff5a66 100deg, rgba(193,18,31,.7) 145deg, transparent 205deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 93%, #000 95.5%, #000 97%, transparent 99.5%);
    mask: radial-gradient(circle closest-side, transparent 93%, #000 95.5%, #000 97%, transparent 99.5%);
    filter: blur(.6px) var(--ds-red-b);
    animation: none;
}

.ds-ghost {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 3px solid #c1121f;
    animation: dsGhostR var(--ds-glitch-speed) steps(1) infinite;
    filter: var(--ds-red);
}

.ds-ghost--k {
    border-color: #0b0b0c;
    animation-name: dsGhostK;
    filter: none;
}

.ds-glitch {
    position: absolute;
    inset: 0;
    animation: dsGlitch var(--ds-glitch-speed) steps(1) infinite;
}

.ds-shell {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: #0b0b0c;
    box-shadow: 0 0 0 1.5px #ffffff, 0 0 14px 3px rgba(255,255,255,.9), 0 18px 40px rgba(11,11,12,.35);
}

.ds-sphere {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 32% 26%, #9aa0a8 0%, #3a3c41 14%, #141517 42%, #050506 80%);
}

.ds-sphere__grain {
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(circle at 50% 50%, rgba(11,11,12,.4) 0 1px, rgba(255,255,255,.3) 1px 2px, transparent 2px 8px);
}

.ds-sphere__swirl {
    position: absolute;
    inset: -20%;
    background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.18) 15%, transparent 30%, transparent 60%, rgba(255,255,255,.12) 72%, transparent 85%);
    animation: dsSpin var(--ds-swirl-speed) linear infinite;
}

.ds-sphere__gloss {
    position: absolute;
    left: -10%;
    top: -4%;
    width: 120%;
    height: 40%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,.55), transparent);
    transform: rotate(-14deg);
}

.ds-sphere__rim {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 -16px 30px rgba(193,18,31,.18), inset 0 0 0 1px rgba(255,255,255,.25);
}

.ds-socket {
    width: 132px;
    height: 88px;
    margin: -44px 0 0 -66px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(11,11,12,.55), transparent 70%);
}

.ds-cracks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: var(--ds-crack-glow);
}

.ds-cracks > g {
    stroke: var(--ds-crack-color);
}

.ds-leak {
    display: none;
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,220,224,.7) 35%, rgba(193,18,31,.25) 65%, transparent 80%);
    mix-blend-mode: screen;
    animation: dsLeak var(--ds-leak-speed) ease-in-out infinite;
}

.ds-boss[data-hot] .ds-leak,
.ds-boss[data-hot] .ds-leak-rays {
    display: block;
}

/* ── The eye ─────────────────────────────────────────── */

.ds-eye-wrap {
    width: 110px;
    height: 110px;
    margin: -55px 0 0 -55px;
    filter: var(--ds-red);
}

.ds-eye {
    position: absolute;
    inset: 0;
    will-change: transform;
    transition: transform .25s ease, opacity .25s ease;
    transform: var(--ds-eye-t);
    opacity: var(--ds-eye-o);
    animation: var(--ds-eye-anim);
}

.ds-eye > svg {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.ds-eye__glow {
    will-change: transform;
    filter: drop-shadow(0 0 5px rgba(255,255,255,.9)) drop-shadow(0 0 14px rgba(193,18,31,.55));
}

.ds-iris {
    transition: transform .14s ease-out;
}

.ds-saccade {
    transform-box: fill-box;
    transform-origin: center;
    animation: var(--ds-motion);
}

.ds-dilate {
    transform-box: fill-box;
    transform-origin: center;
    animation: dsFeralDilate var(--ds-feral-dilate) ease-in-out infinite;
}

.ds-pupil {
    rx: var(--ds-pupil-w);
    transition: rx .25s ease;
}

.ds-pupil--in {
    rx: var(--ds-pupil-in);
}

.ds-slice {
    position: absolute;
    inset: 0;
    clip-path: inset(28% 0 60% 0);
    animation: dsSlice var(--ds-slice-speed) steps(1) infinite;
}

.ds-slice > i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, #9aa0a8 0%, #3a3c41 14%, #141517 42%, #050506 80%);
    box-shadow: -4px 0 0 #c1121f, 4px 0 0 #0b0b0c;
}

.ds-hit-flash {
    display: none;
    position: absolute;
    inset: -80%;
    background: radial-gradient(circle, rgba(255,255,255,1) 10%, rgba(255,255,255,.5) 35%, rgba(193,18,31,.3) 100%);
    animation: dsFlash .6s ease-out 1 forwards;
}

.ds-boss[data-hit] .ds-hit-flash {
    display: block;
}

/* ── The split: the boss is gone, "Sync restored" ────── */

.ds-split {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ds-boss[data-mode="split"] .ds-split {
    display: block;
}

.ds-split__flash {
    position: absolute;
    inset: -80%;
    background: radial-gradient(circle, #ffffff 0%, rgba(255,255,255,.85) 30%, rgba(193,18,31,.35) 70%, transparent 100%);
    animation: dsFlash 1.4s ease-out 1 forwards;
}

.ds-split__rays {
    width: 700px;
    height: 700px;
    margin: -350px 0 0 -350px;
    border-radius: 50%;
    background:
        repeating-conic-gradient(rgba(255,255,255,1) 0deg 1.6deg, transparent 1.6deg 11deg),
        repeating-conic-gradient(from 4deg, rgba(193,18,31,.7) 0deg 1deg, transparent 1deg 23deg);
    -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%);
    mask: radial-gradient(circle, #000 10%, transparent 60%);
    animation: dsRayBurst 2.6s cubic-bezier(.1,.6,.3,1) forwards;
}

.ds-split__rays--fine {
    background: repeating-conic-gradient(from 6deg, rgba(255,255,255,.9) 0deg .8deg, transparent .8deg 7deg);
    -webkit-mask: radial-gradient(circle, #000 8%, transparent 55%);
    mask: radial-gradient(circle, #000 8%, transparent 55%);
    animation: dsRayBurst 3.2s cubic-bezier(.1,.6,.3,1) .7s both;
}

.ds-shards {
    position: absolute;
    inset: 0;
}

.ds-shards > i {
    position: absolute;
    filter: drop-shadow(0 0 3px rgba(193,18,31,.9));
}

.ds-split__core {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: radial-gradient(circle, #0b0b0c 30%, #c1121f 60%, rgba(193,18,31,0) 72%);
    animation: dsCore 1.8s cubic-bezier(.5,0,.2,1) forwards;
}

.ds-burst {
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    border-radius: 50%;
    border: 3px solid #0b0b0c;
    animation: dsBurst 2.4s ease-out .1s both;
}

.ds-burst--2 { border: 1.5px solid #c1121f; animation: dsBurst 3s ease-out .5s both; }
.ds-burst--3 { border: 1px solid #0b0b0c; animation: dsBurst 3.6s ease-out 1s both; }
.ds-burst--4 { border: 2px solid #c1121f; animation: dsBurst 4.2s ease-out 1.6s both; }

.ds-split__dawn {
    position: absolute;
    inset: -80%;
    background: #ffffff;
    animation: dsDawn 3.2s ease 2.8s both;
}

.ds-split__titles {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
}

.ds-split__kicker {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: .5em;
    white-space: nowrap;
    color: #c1121f;
    animation: dsTitleIn 2.4s ease 5.6s both;
}

.ds-split__title {
    font-family: 'Pirata One', serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    color: #0b0b0c;
    margin: 0;
    animation: dsTitleIn 3s cubic-bezier(.2,.7,.2,1) 6.2s both;
}

.ds-split__line {
    width: 120px;
    height: 1px;
    background: #0b0b0c;
    transform-origin: center;
    animation: dsLineIn 2s ease 7.2s both;
}

/*
  Once the dawn has whited everything out, what is underneath stops being drawn at all: its
  infinite animations would otherwise keep ticking behind an opaque layer for as long as the
  player stays on the page. The floor under it is held by the module (dawn()).
*/
.ds-boss[data-dawn] .ds-tick,
.ds-boss[data-dawn] .ds-ash,
.ds-boss[data-dawn] .ds-shake,
.ds-boss[data-dawn] .ds-cleanse,
.ds-boss[data-dawn] .ds-split__rays,
.ds-boss[data-dawn] .ds-shards,
.ds-boss[data-dawn] .ds-sigil {
    display: none;
}

/* ── The intro ───────────────────────────────────────── */

/*
  Ported from the "Desync Boss Intro" design export. Every value is the design's; what moves is
  moved by wwwroot/js/desync-intro.js, so these are only the resting states it animates away from.
  Everything starts invisible except the companions, which start off-screen.
*/

.ds-intro {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* A zero-size anchor at the centre of the scene; the timeline translates it about. */
.ds-iv-point {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    opacity: 0;
}

/* The pull: rings sucked inwards over and over while the companions spiral in. */
.ds-iv-lens > i {
    position: absolute;
    left: -130px;
    top: -130px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 1.5px solid rgba(11,11,12,.35);
    animation: ivSuck 1.5s cubic-bezier(.5,0,.9,.6) infinite;
}

.ds-iv-lens > i:nth-child(2) {
    border: 1px solid rgba(193,18,31,.4);
    animation-delay: .5s;
}

.ds-iv-lens > i:nth-child(3) {
    border: 1px solid rgba(11,11,12,.25);
    animation-delay: 1s;
}

/* After-images trailing each companion down the spiral. */
.ds-iv-ghost > i {
    position: absolute;
    left: -50px;
    top: -50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,79,226,.75), rgba(111,160,255,.3) 55%, transparent 72%);
    filter: blur(6px);
}

.ds-iv-ghost--g > i {
    background: radial-gradient(circle, rgba(20,53,42,.8), rgba(45,212,184,.4) 50%, transparent 72%);
}

.ds-iv-ghost--2 > i { filter: blur(9px); }
.ds-iv-ghost--3 > i { filter: blur(12px); }

.ds-iv-seed,
.ds-iv-shock,
.ds-iv-conv {
    border-radius: 50%;
    opacity: 0;
}

.ds-iv-seed {
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    border: 1.5px solid rgba(11,11,12,.5);
}

.ds-iv-shock,
.ds-iv-conv {
    width: 220px;
    height: 220px;
    margin: -110px 0 0 -110px;
}

.ds-iv-shock--a {
    border: 3px solid #1f5ff0;
    box-shadow: 0 0 18px rgba(0,79,226,.5), inset 0 0 18px rgba(0,79,226,.4);
}

.ds-iv-shock--g {
    border: 3px solid #2dd4b8;
    box-shadow: 0 0 18px rgba(45,212,184,.5), inset 0 0 18px rgba(45,212,184,.4);
}

.ds-iv-conv--1 { border: 2px solid #0b0b0c; }
.ds-iv-conv--2 { border: 1.5px solid #c1121f; }
.ds-iv-conv--3 { border: 1px solid #0b0b0c; }

/* The void sphere. Its shell, body, grain and gloss are the boss's own classes. */
.ds-iv-sphere {
    width: 210px;
    height: 210px;
    margin: -105px 0 0 -105px;
    opacity: 0;
    transform: scale(0);
}

.ds-iv-fade {
    opacity: 0;
}

.ds-iv-corona {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, transparent 66%, rgba(193,18,31,.6) 80%, rgba(255,70,85,.25) 90%, transparent 100%);
    filter: blur(8px);
}

/* What it has swallowed, swirling: the Augmented's blue, then the Purists' teal. */
.ds-iv-swirl {
    position: absolute;
    inset: 0;
}

.ds-iv-swirl > i {
    position: absolute;
    inset: -25%;
    background: conic-gradient(from 0deg, transparent, rgba(31,95,240,.95) 10%, transparent 26%, transparent 50%, rgba(111,160,255,.85) 64%, transparent 80%);
    filter: blur(7px);
    animation: dsSpin 1.2s linear infinite;
}

.ds-iv-swirl--teal > i {
    background: conic-gradient(from 90deg, transparent, rgba(45,212,184,.9) 10%, transparent 26%, transparent 50%, rgba(94,234,212,.8) 64%, transparent 80%);
}

.ds-iv-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, #050506 18%, transparent 55%);
}

/* And then it turns red: the Desync's colour, and the slit where its eye will open. */
.ds-iv-red {
    position: absolute;
    inset: 0;
}

.ds-iv-red__rays {
    position: absolute;
    inset: -20%;
    background: repeating-conic-gradient(from 3deg, rgba(255,70,85,.8) 0deg 1.2deg, transparent 1.2deg 19deg);
    -webkit-mask: radial-gradient(circle, transparent 20%, #000 40%, transparent 70%);
    mask: radial-gradient(circle, transparent 20%, #000 40%, transparent 70%);
    filter: blur(.6px);
    animation: dsSpinRev 5s linear infinite;
}

.ds-iv-red__glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 36px rgba(193,18,31,.8), inset 0 -16px 30px rgba(193,18,31,.4);
}

.ds-iv-red__slit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90px;
    height: 30px;
    margin: -15px 0 0 -45px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,255,255,.9), rgba(255,90,102,.5) 40%, transparent 72%);
    filter: blur(3px);
}

/* The two Oracle companions, at the design's .68 and off-screen bottom left and right. */
.ds-iv-bot {
    opacity: 1;
}

.ds-iv-bot--a { transform: translate(-820px, 480px); }
.ds-iv-bot--g { transform: translate(820px, 480px); }

.ds-iv-bot__shadow {
    position: absolute;
    left: -44px;
    top: 62px;
    width: 96px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(11,11,12,.2), transparent 70%);
    filter: blur(3px);
}

/* Centred on the anchor: the companion's box is 180px at the .68 it is rendered at. */
.ds-iv-bot__float {
    position: absolute;
    left: -61.2px;
    top: -61.2px;
    animation: dsFloat 3.2s ease-in-out infinite;
}

.ds-iv-bot--g .ds-iv-bot__float {
    animation: dsFloat 3.8s ease-in-out -1.2s infinite;
}

/*
  The white the intro opens on and closes with. Fixed over everything but the skip button and the
  panel; white from the first paint, before the module has run, so the boss never shows through.
*/
.ds-intro-flash {
    position: fixed;
    inset: 0;
    z-index: 45;
    pointer-events: none;
    background: radial-gradient(circle at 50% 52%, #ffffff 0%, #ffffff 55%, #fbfaf8 100%);
    opacity: 0;
}

.ds-boss[data-intro] .ds-intro-flash {
    opacity: 1;
}

.ds-intro-skip {
    position: fixed;
    z-index: 46;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: .18em;
    color: #3a3c41;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(11,11,12,.2);
    border-radius: 18px;
    padding: 6px 14px;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.ds-intro-skip:hover {
    color: #c1121f;
    border-color: #c1121f;
}

.ds-intro-skip:focus-visible {
    outline: 2px solid #c1121f;
    outline-offset: 3px;
}

/* The sigils are not there yet. Hidden, not just transparent, so they cannot be tabbed to either. */
.ds-boss[data-intro] .ds-sigil {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .5s ease .15s, visibility 0s linear .65s;
}

/* ── Sigils ──────────────────────────────────────────── */

.ds-sigil {
    position: absolute;
    z-index: 3;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform .25s ease, background .5s ease, box-shadow .5s ease, opacity .5s ease .15s, visibility 0s;
    border: 2px solid #0b0b0c;
    color: #0b0b0c;
    background: #ffffff;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 4px rgba(11,11,12,.35), 0 6px 16px rgba(11,11,12,.18);
    opacity: 1;
}

.ds-sigil:hover {
    transform: scale(1.1);
}

.ds-sigil:focus-visible {
    outline: 2px solid #c1121f;
    outline-offset: 6px;
}

.ds-sigil.is-active {
    border: 2.5px solid #c1121f;
    color: #c1121f;
    background: #ffffff;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 4.5px #c1121f, 0 8px 20px rgba(193,18,31,.25);
}

.ds-sigil.is-sealed {
    background: #0b0b0c;
    color: #fff;
    border: 1px solid #0b0b0c;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px #c1121f, 0 6px 18px rgba(193,18,31,.3);
}

.ds-boss[data-mode="split"] .ds-sigil {
    opacity: 0;
    pointer-events: none;
}

.ds-sigil__halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,244,241,.96) 0%, rgba(245,244,241,.85) 38%, rgba(245,244,241,0) 70%);
    z-index: -1;
    pointer-events: none;
}

.ds-sigil__ring {
    position: absolute;
    inset: -1px;
    /*
      A gradient, not a round border. Firefox draws a border-radius circle as four corner pieces
      meeting on the centre lines, and under the animated scale their seams flash as a crosshair.
    */
    background: radial-gradient(closest-side,
            transparent calc(100% - 2.75px),
            rgba(193,18,31,.4) calc(100% - 2px),
            rgba(193,18,31,.4) calc(100% - .5px),
            transparent 100%);
    animation: dsSigilRing 3s ease-out infinite;
    pointer-events: none;
}

.ds-sigil__name {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    white-space: nowrap;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #55585e;
    pointer-events: none;
    text-shadow: 0 0 3px #f5f4f1, 0 0 6px #f5f4f1, 0 0 10px #f5f4f1;
}

.ds-sigil.is-active .ds-sigil__name { color: #c1121f; }
.ds-sigil.is-sealed .ds-sigil__name { color: #0b0b0c; }

/* ── Panel ───────────────────────────────────────────── */

/*
  Full height, over the header. No containment: it would make the panel the containing block of the
  editor's fixed hovers and clip them, and they carry the basic-C# rules the player needs to read.
*/
.ds-panel {
    position: fixed;
    z-index: 50;
    top: 20px;
    bottom: 20px;
    width: min(440px, calc(100vw - 40px));
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(11,11,12,.16);
    border-radius: 14px;
    background: #fbfaf8;
    box-shadow: 0 30px 70px rgba(11,11,12,.22), 0 0 0 6px rgba(255,255,255,.55);
    overflow: hidden;
    animation: dsPanelIn .3s ease-out;
}

.ds-panel--left { left: 20px; right: auto; }
.ds-panel--right { left: auto; right: 20px; }

.ds-panel__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(11,11,12,.1);
}

.ds-badge {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 12px;
    border: 1.5px solid #c1121f;
    color: #c1121f;
    background: #fff;
}

.ds-badge.is-sealed {
    border: none;
    background: #0b0b0c;
    color: #fff;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px #c1121f;
}

.ds-panel__titles {
    flex: 1;
    min-width: 0;
}

.ds-panel__kicker {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: .2em;
    color: #c1121f;
}

.ds-panel__name {
    font-family: 'Pirata One', serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.05;
    color: #0b0b0c;
    margin: 0;
}

.ds-panel__close {
    font-size: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #55585e;
    padding: 6px;
    line-height: 1;
}

.ds-panel__close:hover { color: #c1121f; }

.ds-panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* Whatever ends up last — the editor, a verdict, the attempts — keeps clear of the foot. */
    padding-bottom: 16px;
    scrollbar-width: thin;
}

.ds-brief {
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ds-summary {
    font-size: 14px;
    line-height: 1.6;
    color: #3a3c41;
    text-wrap: pretty;
    margin: 0;
}

.ds-example {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-family: 'Space Mono', monospace;
    font-size: 11.5px;
    color: #55585e;
}

.ds-example__in { color: #0b0b0c; }
.ds-example__out { color: #c1121f; }

.ds-rules-toggle {
    align-self: flex-start;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 11px;
    color: #55585e;
}

.ds-rules-toggle:hover { color: #c1121f; }

.ds-rules {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ds-rules > li {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #3a3c41;
}

.ds-rules > li::before {
    content: '▸';
    color: #c1121f;
}

.ds-contract {
    font-family: 'Space Mono', monospace;
    font-size: 11.5px;
    line-height: 1.65;
    color: #3a3c41;
    white-space: pre;
    border: 1px dashed rgba(11,11,12,.25);
    border-radius: 6px;
    padding: 8px 11px;
    overflow-x: auto;
    margin: 0;
}

/*
  Monaco in the design's textarea: black, a 3px red rule down the left, and
  the text inset by the textarea's own 12px / 14px padding.
*/
.ds-editor {
    position: relative;
    flex: 1;
    min-height: 220px;
    margin: 0 16px;
    background: #0b0b0c;
    border: 1px solid #0b0b0c;
    border-left: 3px solid #c1121f;
    border-radius: 8px;
    overflow: hidden;
}

.ds-editor__host {
    position: absolute;
    inset: 12px 4px 12px 14px;
}

.ds-editor__wait {
    margin: 0;
    padding: 12px 14px;
    font-family: 'Space Mono', monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: #6a6f76;
}

.ds-editor .monaco-editor,
.ds-editor .monaco-editor .margin,
.ds-editor .monaco-editor-background {
    background-color: #0b0b0c;
}

.ds-judge {
    margin: 12px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid rgba(11,11,12,.14);
    border-radius: 8px;
    padding: 10px 12px;
    background: #ffffff;
}

.ds-judge__stage {
    display: flex;
    gap: 10px;
    font-family: 'Space Mono', monospace;
    font-size: 11.5px;
    color: #9aa0a8;
}

.ds-judge__stage.is-done { color: #0b0b0c; }
.ds-judge__stage.is-now { color: #c1121f; }

.ds-judge__mark {
    width: 14px;
    text-align: center;
}

.ds-judge__stage.is-now .ds-judge__mark {
    animation: dsDots 1.2s ease-in-out infinite;
}

.ds-reject {
    margin: 12px 16px 0;
    border: 1px solid rgba(193,18,31,.35);
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(193,18,31,.05);
}

.ds-reject__head {
    display: flex;
    justify-content: space-between;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: .12em;
    font-size: 12px;
    color: #c1121f;
}

.ds-reject__note {
    margin: 6px 0 0;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    line-height: 1.65;
    color: #3a3c41;
}

.ds-sealed {
    margin: 12px 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #0b0b0c;
    border-radius: 8px;
    padding: 10px 12px;
    background: #0b0b0c;
    color: #fff;
}

.ds-sealed__label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: .16em;
    font-size: 12px;
}

.ds-sealed__tests {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: #ff8a93;
}

.ds-panel__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(11,11,12,.1);
    background: #f4f2ee;
}

.ds-panel__foot-spacer { flex: 1; }

.ds-reset {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 11px;
    line-height: normal;
    border-radius: 6px;
    padding: 6px 11px;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(11,11,12,.22);
    color: #55585e;
}

.ds-reset:hover,
.ds-reset.is-active {
    color: #0b0b0c;
    border-color: #0b0b0c;
}

/* A sigil's past attempts, between the verdict and the foot that toggles them. */
.ds-attempts {
    flex-shrink: 0;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    margin: 12px 16px 0;
    padding: 0;
    list-style: none;
    border: 1px solid rgba(11,11,12,.16);
    border-radius: 8px;
}

.ds-attempt + .ds-attempt { border-top: 1px solid rgba(11,11,12,.1); }

.ds-attempt {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ds-attempt__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 12.5px;
    color: #3a3c41;
}

.ds-attempt__row:hover,
.ds-attempt__row[aria-expanded="true"] { background: rgba(11,11,12,.04); }

.ds-attempt__id {
    font-family: 'Space Mono', monospace;
    font-size: 11.5px;
    color: #0b0b0c;
}

.ds-attempt__who {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-attempt__score {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: .12em;
    font-size: 12px;
    color: #c1121f;
}

.ds-attempt__score.is-sealed { color: #0b0b0c; }

.ds-attempt > .ds-contract { margin: 0 12px; }

.ds-attempt__restore {
    align-self: flex-start;
    margin: 0 12px 10px;
}

.ds-submit {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 11px;
    line-height: normal;
    border-radius: 6px;
    padding: 6px 11px;
    cursor: pointer;
    border: 1px solid #0b0b0c;
    background: #0b0b0c;
    color: #fff;
}

.ds-submit:hover {
    background: #c1121f;
    border-color: #c1121f;
}

.ds-submit.is-sealed {
    background: #e9e7e3;
    color: #55585e;
    border-color: rgba(11,11,12,.2);
    pointer-events: none;
}

/* ── Reduced motion: the scene holds still, the story still plays ── */

@media (prefers-reduced-motion: reduce) {
    .ds-tick,
    .ds-ash > i,
    .ds-rays,
    .ds-float,
    .ds-petals,
    .ds-orb,
    .ds-corona,
    .ds-corona > i,
    .ds-ghost,
    .ds-glitch,
    .ds-sphere__swirl,
    .ds-saccade,
    .ds-dilate,
    .ds-slice,
    .ds-shock,
    .ds-sigil__ring,
    .ds-leak,
    .ds-iv-lens > i,
    .ds-iv-swirl > i,
    .ds-iv-red__rays,
    .ds-iv-bot__float,
    .ds-head__rules {
        animation: none !important;
    }

    .ds-ghost,
    .ds-slice {
        opacity: 0;
    }
}