:root{
    --ground:#080b13; --felt-2:#131b2b; --ink:#e9e4d6; --dim:#8891a6; --rule:#25304a;
    --gold:#dcb35c; --gold-dim:#8a6f36; --blood:#bf4340; --mana:#4a8fd4; --moon:#a9c4e8;
    --lex:#7fa8d4; --leg:#e0b356; --nys:#a855b8; --nur:#5cb8c9; --sang:#c0392b;
    --iron:#b0645a; --vir:#6fbf73; --sil:#c8d6e4; --neu:#9aa3b5; --frost:#7fd8e8;
    --khaz:#d08a4a; --mf:#8fe0c0; --vak:#eee9dc; --ael:#3f9b62; --wld:#ec6bb0; --desc:#8e6ac7;
    --jal:#f0c94a;
    /* Reserved faction foundations, still awaiting design. */
    --ash:#c35b42; --dwarf:#ad8256; --run:#b05ce0;
    --c-c:#9aa3b5; --c-r:#4a8fd4; --c-e:#a855b8; --c-l:#dcb35c;
    --serif:"Hoefler Text","Baskerville","Palatino Linotype",Palatino,"Iowan Old Style",Georgia,serif;
    --sans:"Avenir Next","Segoe UI",Inter,system-ui,-apple-system,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    /* Procedural grain for the Dominion fire treatment. Keeping it local means
       the entrance still works from a downloaded/offline copy of the game. */
    --glitter:repeating-radial-gradient(circle at 31% 27%,rgba(255,255,255,.9) 0 1px,transparent 1px 5px);
    /* Menu theme: the background/button picker only ever touches these three —
       never --gold itself, which still means "Legendary" and "your own hero's
       glow" during an actual match. Picking a faction just feeds its color in
       here; the dim/shadow tones are derived so nothing else has to be authored
       per faction. Defaults reproduce the original gold-and-blood-red look. */
    --menu-accent:var(--gold);
    --menu-accent-dim:color-mix(in srgb,var(--menu-accent) 55%,#000);
    --menu-accent2:color-mix(in srgb,var(--menu-accent) 30%,#0a0508);
    /* Set by updateUIScale() from the viewport's own size, so cards and board
       pieces read the same on a small laptop and a big monitor instead of
       staying pinned at one fixed pixel size; the "Larger cards & text"
       accessibility toggle folds an extra flat boost into this same number. */
    --ui-scale:1;
  }
  /* Colorblind-friendly faction colors — opt-in, off by default so nobody's
     look changes without asking. Nineteen mutually distinct hues is past
     what any categorical palette can guarantee for every kind of color
     vision at once, so this leans on the one thing that survives every
     form of CVD: real lightness/saturation spread, not just a hue swap —
     inside each faction's own name and hero portrait, color is always a
     supporting cue, never the only one. Reserved foundation factions (jal,
     ash, dwarf, run) aren't in normal play yet, so they're left as-is. */
  :root[data-colorblind="on"]{
    --lex:#6ca9e8; --leg:#f0d030; --nys:#a070e0; --nur:#1f9e8a; --sang:#e0433f;
    --iron:#f0902a; --vir:#3fb552; --frost:#5fcfe0; --khaz:#8a5a1f; --mf:#a8e6c8;
    --ael:#1f6b8a; --wld:#e85fa8; --desc:#4a3a8a;
  }
  *{box-sizing:border-box}
  body{margin:0;height:100vh;overflow:hidden;background:var(--ground);color:var(--ink);
       font-family:var(--sans);-webkit-font-smoothing:antialiased;user-select:none}

  #game{display:none;height:100vh;flex-direction:column;position:relative;
        background:radial-gradient(ellipse 120% 80% at 50% 50%, var(--felt-2), var(--ground) 75%)}
  #game.on{display:flex}
  #syncNotice{position:fixed;z-index:120;left:50%;top:18px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid #9b3b3b;border-radius:5px;background:rgba(35,10,14,.97);box-shadow:0 8px 28px rgba(0,0,0,.5);color:#ffd7d2;font:11px var(--sans)}
  #syncNotice .btn{padding:7px 11px}
  #reconnectPrompt{position:fixed;z-index:118;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(4,7,13,.82);backdrop-filter:blur(3px);color:var(--ink)}
  /* A hung reconnect attempt used to be a dead end — Reconnect was the only
     control in this overlay, and it sits above the Pause dialog in stacking
     order, so Escape couldn't reach a menu button that was there. This is
     the deliberate way out, always present, never buried behind a retry loop. */
  #reconnectGiveUp{display:block;margin:16px auto 0;background:transparent;border-color:var(--rule);color:var(--dim)}
  #reconnectGiveUp:hover{color:var(--ink);border-color:var(--gold-dim)}
  #reconnectPrompt .prebox{max-width:480px}
  #prematch{position:fixed;z-index:110;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,rgba(25,38,59,.98),rgba(4,7,13,.99) 75%);color:var(--ink)}
  #chatbox{position:fixed;z-index:125;right:16px;bottom:16px;width:260px;border:1px solid var(--rule);border-radius:5px;background:rgba(9,13,22,.96);box-shadow:0 8px 28px #0009;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .7s ease}#chatbox.open{opacity:1;pointer-events:auto}#chatbox .chathead{padding:7px 9px;border-bottom:1px solid var(--rule);color:var(--gold);font:8px var(--mono);letter-spacing:.16em;display:flex;align-items:center;justify-content:space-between}#chatlog{height:130px;overflow-y:auto;padding:7px 9px;font-size:11px}#chatlog div{margin:0 0 5px;overflow-wrap:anywhere}#chatlog b{color:var(--gold);font-weight:600}#chatinput{width:100%;padding:9px;background:#111827;border:0;border-top:1px solid var(--rule);outline:0;color:var(--ink);font:11px var(--sans)}
  #chatMute{background:none;border:0;color:var(--dim);cursor:pointer;font-size:11px;padding:0;line-height:1}
  #chatMute.muted{color:var(--blood)}
  .chat-emotes{display:flex;flex-wrap:wrap;gap:4px;padding:6px 9px;border-top:1px solid var(--rule)}
  .chat-emotes button{padding:4px 7px;border-radius:3px;border:1px solid var(--rule);background:rgba(255,255,255,.03);
    color:var(--dim);font:8px var(--mono);letter-spacing:.05em;cursor:pointer}
  .chat-emotes button:hover{color:var(--gold);border-color:var(--gold-dim)}
  .prebox{width:min(560px,calc(100vw - 32px));padding:30px;border:1px solid var(--gold-dim);border-radius:8px;background:linear-gradient(145deg,rgba(24,32,49,.98),rgba(9,13,23,.98));box-shadow:0 18px 70px #000b;text-align:center}
  .preeyebrow{color:var(--gold);font:9px var(--mono);letter-spacing:.2em;text-transform:uppercase}.prebox h1{margin:8px 0;font:30px var(--serif);font-weight:400}.precopy{color:var(--dim);font-size:13px}.preclock{margin:20px auto;width:74px;height:74px;display:grid;place-items:center;border:2px solid var(--gold);border-radius:50%;color:var(--gold);font:26px var(--mono)}
  .prerow{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}.prerow label{color:var(--dim);font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase}.prerow select{display:block;width:100%;margin-top:6px;padding:10px;background:var(--felt-2);border:1px solid var(--rule);border-radius:4px;color:var(--ink);font:13px var(--sans)}.prestatus{min-height:30px;margin:18px 0;color:var(--moon);font-size:12px}
  #teamgame{display:none;height:100vh;overflow:hidden;position:relative;background:
    radial-gradient(ellipse at 50% 50%,#172238 0,#090e18 58%,#04070c 100%);color:var(--ink)}
  #teamgame.on{display:flex;flex-direction:column}
  .teamping{position:fixed;z-index:96;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none;
      border:2px solid var(--pc,#d8b4fe);box-shadow:0 0 0 2px rgba(0,0,0,.72),0 0 24px var(--pc,#d8b4fe);
      animation:teamPing 1.75s cubic-bezier(.14,.78,.22,1) forwards}
  .teamping::before,.teamping::after{content:"";position:absolute;inset:50%;border:2px solid var(--pc,#d8b4fe);border-radius:50%;
      animation:teamPingRing 1.15s ease-out forwards}.teamping::after{animation-delay:.22s}
  .teamping b{position:absolute;left:50%;top:39px;transform:translateX(-50%);padding:3px 7px;border-radius:10px;
      color:#fff;background:rgba(4,5,10,.88);font:700 8px var(--mono);letter-spacing:.08em;white-space:nowrap;text-shadow:0 0 8px var(--pc,#d8b4fe)}
  .teamping.plan{animation:none;opacity:1;width:26px;height:26px;margin:-13px 0 0 -13px;border-style:dashed}
  .teamping.plan::before,.teamping.plan::after{animation:none;inset:5px;border-width:1px}.teamping.plan b{top:29px}
  @keyframes teamPing{0%{opacity:0;transform:scale(.35)}12%,72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.92)}}
  @keyframes teamPingRing{0%{inset:50%;opacity:1}100%{inset:-32px;opacity:0}}
  .tgbar{height:62px;flex:none;display:flex;align-items:center;gap:14px;padding:7px 14px;border-bottom:1px solid var(--rule);
    background:linear-gradient(90deg,rgba(29,63,45,.65),rgba(7,11,19,.92) 40% 60%,rgba(73,25,31,.62));z-index:5}
  .tgteam{min-width:0;flex:1}.tgteam.right{text-align:right}.tgteam small{display:block;font:7px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
  .tgteam b{font:18px var(--serif);font-weight:400;color:var(--tc,var(--gold));text-shadow:0 0 16px var(--tc,var(--gold))}
  .tgturn{--turn:var(--gold);text-align:center;min-width:250px;padding:7px 18px;border:1px solid color-mix(in srgb,var(--turn) 62%,var(--rule));border-radius:5px;
    background:linear-gradient(180deg,color-mix(in srgb,var(--turn) 18%,#111827),rgba(4,7,12,.9));box-shadow:0 0 22px color-mix(in srgb,var(--turn) 22%,transparent);transition:.25s ease}
  .tgturn b{display:block;font:15px var(--serif);font-weight:600;color:var(--turn);letter-spacing:.04em;text-shadow:0 0 13px color-mix(in srgb,var(--turn) 70%,transparent)}
  .tgturn span{display:block;margin-top:2px;font:7px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:#a8b1c5}
  .tgturn.mine{border-width:2px;background:linear-gradient(180deg,color-mix(in srgb,var(--turn) 29%,#171408),rgba(9,8,4,.95));animation:teamturnbar 1.6s ease-in-out infinite}
  @keyframes teamturnbar{50%{box-shadow:0 0 34px color-mix(in srgb,var(--turn) 54%,transparent)}}
  .tgsync{padding:5px 8px;border:1px solid #315e3f;border-radius:20px;color:#6fd08a;font:7px var(--mono);letter-spacing:.12em;text-transform:uppercase}
  .tgsync.bad{color:#ff7770;border-color:#7d3434}
  .tgend{padding:8px 12px;border-radius:3px;border:1px solid var(--gold-dim);background:#241c0e;color:var(--gold);font:8px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
  .tgend:disabled{opacity:.3;cursor:default}
  @keyframes endGlow{0%,100%{box-shadow:0 0 6px 1px rgba(220,179,92,.35)}50%{box-shadow:0 0 22px 7px rgba(220,179,92,.9),0 0 42px 14px rgba(220,179,92,.4)}}
  .end.glow,.tgend.glow{animation:endGlow 1.5s ease-in-out infinite;border-color:var(--gold)}
  .tggrid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:#273149}
  .tseat{min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;overflow:hidden;background:linear-gradient(160deg,#111929,#080d16);--seat:#7fa8d4;transition:filter .25s ease,box-shadow .25s ease,opacity .25s ease}
  .tseat.ally{background:linear-gradient(160deg,#102319,#080f0b)}.tseat.enemy{background:linear-gradient(160deg,#271318,#10090c)}
  .tseat.inactive{filter:saturate(.68) brightness(.72);opacity:.86}
  .tseat.local{box-shadow:inset 0 0 0 2px var(--gold);z-index:2}.tseat.active{z-index:4;filter:none;opacity:1;
    box-shadow:inset 0 0 0 4px var(--seat),inset 0 0 72px color-mix(in srgb,var(--seat) 36%,transparent),0 0 28px color-mix(in srgb,var(--seat) 48%,transparent);animation:activeseat 1.6s ease-in-out infinite}
  @keyframes activeseat{50%{box-shadow:inset 0 0 0 5px var(--seat),inset 0 0 92px color-mix(in srgb,var(--seat) 45%,transparent),0 0 38px color-mix(in srgb,var(--seat) 65%,transparent)}}
  .tturnflag{display:none;position:absolute;z-index:14;top:58px;left:50%;transform:translateX(-50%);pointer-events:none;white-space:nowrap;padding:5px 12px;border:1px solid var(--seat);border-radius:0 0 5px 5px;
    background:color-mix(in srgb,var(--seat) 28%,rgba(3,6,12,.95));box-shadow:0 5px 20px rgba(0,0,0,.48),0 0 18px color-mix(in srgb,var(--seat) 35%,transparent);color:#fff;font:8px var(--mono);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
  .tseat.active .tturnflag{display:block}
  .tseat.defeated{filter:grayscale(.75);opacity:.58}.tseat.defeated::after{content:"FALLEN";position:absolute;inset:0;display:grid;place-items:center;
    background:rgba(3,4,8,.6);font:24px var(--serif);letter-spacing:.18em;color:#c65d5d;z-index:20;pointer-events:none}
  .tshead{height:52px;display:flex;align-items:center;gap:8px;padding:5px 9px;border-bottom:1px solid var(--rule);background:rgba(3,6,12,.36);flex:none;overflow:hidden}
  .thero{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;position:relative;border:2px solid var(--seat);cursor:pointer;
    background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--seat) 30%,#182133),#05080e 68%);box-shadow:0 0 12px color-mix(in srgb,var(--seat) 45%,transparent)}
  .thero .hp{width:23px;height:23px;right:-7px;bottom:-5px;font-size:10px}.thero .arm{width:21px;height:21px;left:-7px;bottom:-5px;font-size:9px}
  .thero .spow{width:17px;height:17px;top:-5px;right:-6px;font-size:8px}.thero .ovch{width:17px;height:17px;top:-5px;left:-6px;font-size:8px}
  /* .tswho used to be the row's only flex-grow item, so it ballooned to fill
     almost the entire header (it'd claim ~380px on a normal-width seat) no
     matter how short the hero name actually was — everything after it (Mana,
     Spell Power, the deck pile) got shoved into a narrow strip on the right,
     with a wall of dead space sitting right after the name. Capping it here
     and moving the grow onto .tsres below gives that space to the resources
     that can actually use it. */
  .tswho{min-width:72px;flex:0 1 190px;max-width:190px;overflow:hidden}.tswho b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:13px var(--serif);font-weight:400}.tswho span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:7px var(--mono);color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
  .tsres{min-width:0;flex:1 1 auto;display:flex;gap:10px;align-items:center;font:8px var(--mono);color:var(--dim)}.tsres b{color:var(--ink);font-size:10px}
  /* A player splashing into several factions' resources at once (rare, but
     the dynamic chip list has no fixed cap) can outgrow the row — scroll
     instead of silently clipping chips off the edge. */
  .tsresource{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:5px;overflow-x:auto;overflow-y:hidden;cursor:help;
    scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--seat) 55%,#1b2437) transparent}
  /* One shared badge shape for every faction's resource readout, styled like
     a small stat chip rather than a single cramped color-coded string — a
     faction with more than one stat worth tracking (Spell Power *and*
     Overcharge, say) gets one chip each instead of them running together. */
  .tchip{display:inline-flex;align-items:baseline;gap:4px;padding:2px 7px;border-radius:3px;flex:none;
    border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);
    font:7.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--seat);white-space:nowrap}
  .tchip b{font-size:10.5px;letter-spacing:0;text-transform:none;color:var(--ink);font-family:var(--mono)}
  /* named tchip-sp/tchip-ovr, NOT spow/ovch — those bare class names already
     belong to the hero-portrait corner badges (display:none until .on), and
     reusing them here would make a chip invisible by default too. */
  .tchip.tchip-sp{border-color:rgba(154,58,220,.5);background:rgba(154,58,220,.14);color:#c9a0e8}
  .tchip.tchip-sp b{color:#ecdcfc}
  .tchip.tchip-ovr{border-color:rgba(224,120,40,.5);background:rgba(224,120,40,.14);color:#f0a860}
  .tchip.tchip-ovr b{color:#ffdcac}
  .tchip.tchip-asc{border-color:rgba(196,58,74,.5);background:rgba(196,58,74,.14);color:#e08a95}
  .tchip.tchip-asc b{color:#ffd6da}
  .tchip.tchip-ms{border-color:rgba(120,160,224,.5);background:rgba(120,160,224,.14);color:#a6c4ec}
  .tchip.tchip-ms b{color:#e2ecfc}
  .tchip.tchip-aether{border-color:rgba(64,196,180,.5);background:rgba(64,196,180,.14);color:#7fdcd0}
  .tchip.tchip-aether b{color:#d6fbf6}
  .tchip.tchip-gem{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
  .tchip.tchip-irid{border-color:rgba(220,190,110,.5);background:rgba(220,190,110,.14);color:#e6cf8e}
  .tchip.tchip-irid b{color:#fbeecb}
  .tsresource .dutyrow.team{white-space:nowrap;display:inline-flex;gap:1px;margin-left:3px;vertical-align:middle}
  .dutyrow{display:flex;gap:3px;margin:3px 0}
  .dutybadge{width:16px;height:16px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:10px;
    line-height:1;background:rgba(255,255,255,.05);border:1px solid var(--rule);opacity:.45;cursor:help;
    transition:opacity .2s,box-shadow .2s}
  .dutybadge.tiny{width:11px;height:11px;font-size:7px;border-width:1px}
  .dutybadge.done{opacity:1;border-color:var(--jal);background:rgba(240,201,74,.2);
    box-shadow:0 0 7px var(--jal),0 0 2px var(--jal)}
  .tsresource:empty{display:none}
  .tdeckpile{width:34px;height:42px;flex:none;display:grid;place-items:center;position:relative;border:1px solid var(--seat);border-radius:3px;background:repeating-linear-gradient(135deg,#111a2a 0 4px,#1b2639 4px 8px);box-shadow:3px 2px 0 #05080d,5px 3px 0 color-mix(in srgb,var(--seat) 35%,#05080d)}
  .tdeckpile::before{content:"DECK";position:absolute;top:4px;font:5px var(--mono);letter-spacing:.1em;color:var(--dim)}.tdeckpile b{margin-top:8px;font:11px var(--mono);color:var(--ink)}
  .tdeckpile.inspectable{cursor:help;box-shadow:3px 2px 0 #05080d,5px 3px 0 color-mix(in srgb,var(--seat) 35%,#05080d),0 0 10px color-mix(in srgb,var(--seat) 20%,transparent)}
  .tdeckpile.inspectable:hover{border-color:var(--gold);filter:brightness(1.2)}
  .tspower{min-width:62px;max-width:132px;flex:0 1 132px;padding:6px 8px;border:1px solid var(--rule);border-radius:3px;background:rgba(255,255,255,.03);color:var(--dim);font:7px var(--mono);cursor:help;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tspower.able{color:var(--gold);border-color:var(--gold-dim);cursor:pointer}
  .tspower.used{opacity:.58;border-style:dashed}
  .tsboard,.tsrear{display:flex;align-items:center;gap:7px;padding:5px 10px;overflow-x:auto;overflow-y:hidden;min-height:0;
    scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--seat) 55%,#1b2437) transparent}
  /* Flexible bookends centre short rows without clipping a full seven-card
     board: once the row is wider than its lane, both collapse and scrolling
     begins at the true first card. */
  .tsboard::before,.tsboard::after,.tsrear::before,.tsrear::after,.tshand::before,.tshand::after{content:"";flex:1 0 0;min-width:0}
  .tsboard{flex:1;background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--seat) 9%,transparent),transparent 68%)}
  .tsrear{height:46px;flex:none;border-top:1px solid rgba(39,49,73,.65);background:rgba(2,5,10,.2)}
  .tart{min-width:42px;max-width:92px;flex:0 1 92px;padding:3px 6px;border:1px solid var(--rule);border-radius:3px;color:var(--dim);font:7px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;cursor:help}
  .tart.on{color:var(--gold);border-color:var(--gold-dim)}.tart.tgt{cursor:pointer;box-shadow:0 0 10px var(--gold)}
  .tseat .m{transform:scale(.86);transform-origin:center;margin:-11px -7px;cursor:pointer}
  .tseat .en{transform:scale(.82);transform-origin:center;margin:-4px -8px}
  .tshandlabel{padding:4px 11px 2px;font:7px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--dim);flex:none;text-align:center}
  .tshand{height:126px;display:flex;align-items:flex-start;gap:6px;padding:4px 10px 7px;overflow-x:auto;overflow-y:hidden;flex:none;
    background:linear-gradient(180deg,rgba(3,6,12,.18),rgba(3,6,12,.55));scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--seat) 55%,#1b2437) transparent}
  .tcardwrap{width:88px;height:119px;flex:none;position:relative}.tcardwrap .card{transform:scale(.58);transform-origin:0 0}
  .tshand .back{width:78px;height:112px;flex:none;border-radius:7px}
  .tseat .tgt{box-shadow:0 0 0 2px var(--blood),0 0 20px rgba(191,67,64,.65)!important}
  /* Each 2v2 seat owns an independent legendary weather layer. Keeping it
     inside the seat prevents one player's aura from covering readable UI or
     leaking onto their ally's board. */
  .tseat>.amb{inset:0;height:auto!important;z-index:0;border-radius:inherit}
  .tseat>.tshead,.tseat>.tsboard,.tseat>.tsrear,.tseat>.tshandlabel,.tseat>.tshand,.tseat>.tturnflag{position:relative;z-index:1}
  .tseat>.tturnflag{position:absolute}
  @media(max-width:1100px){.tgturn{min-width:170px;padding:6px 9px}.tgteam b{font-size:14px}.tshead{gap:5px;padding-inline:6px}.tswho{min-width:58px;max-width:130px}.tart{max-width:58px}.tspower{max-width:96px;padding-inline:5px}.tseat .m{transform:scale(.8);margin:-16px -11px}.tcardwrap{width:82px}.tcardwrap .card{transform:scale(.54)}.tshand{height:120px}.tcardwrap{height:111px}.tshand .back{width:72px;height:104px}}
  @media(prefers-reduced-motion:reduce){.tgturn.mine,.tseat.active{animation:none}}

  /* ---------- board weather ----------
     A layer under each half of the field. It is pure atmosphere: it never
     intercepts a click, and everything it animates uses Math.random, NOT the
     seeded RNG — visual noise must never touch the stream the game state
     depends on, or two networked clients would drift apart. */
  .amb{position:absolute;left:0;right:0;pointer-events:none;z-index:0;
       opacity:0;transition:opacity 1.1s ease;overflow:hidden}
  .amb.on{opacity:1}

  /* Mei-Mei — a blood moon, and it is always falling */
  .amb.blood{background:
      radial-gradient(ellipse 90% 120% at 50% 100%, rgba(150,20,38,.30), transparent 70%),
      linear-gradient(180deg, rgba(96,12,26,.05), rgba(150,20,38,.20))}
  .amb .moon{position:absolute;top:8%;left:50%;width:120px;height:120px;border-radius:50%;
       transform:translateX(-50%);opacity:0;transition:opacity 1.4s ease}
  .amb.blood .moon{opacity:1;
       /* a crescent: a lit disc with an unlit one biting into it */
       background:radial-gradient(circle at 62% 42%, #ff5a5a, #c01f38 45%, #6d0d1e 70%, transparent 72%);
       box-shadow:0 0 70px 20px rgba(200,30,55,.42), inset -26px 6px 0 -2px rgba(11,15,24,.96);
       filter:blur(.4px);
       animation:bloodpulse 5.5s ease-in-out infinite}
  @keyframes bloodpulse{
    0%,100%{box-shadow:0 0 60px 14px rgba(200,30,55,.34), inset -26px 6px 0 -2px rgba(11,15,24,.96)}
    50%    {box-shadow:0 0 96px 30px rgba(220,40,70,.60), inset -26px 6px 0 -2px rgba(11,15,24,.96)}}

  /* Lichen — dead, and still working, under a sky full of stars.
     NOTE: the container class is 'starry' and the star dots are '.st'. They must
     never share a name — a container that also matched the dot rule would inherit
     width:3px and collapse the whole layer to a single blinking speck. */
  .amb.starry{background:
      radial-gradient(ellipse 90% 130% at 50% 10%, rgba(90,170,235,.22), transparent 72%),
      linear-gradient(180deg, rgba(30,90,165,.20), rgba(10,26,54,.12))}
  .amb.starry.farsoul{background:
      radial-gradient(circle at 50% 28%,rgba(210,245,255,.30),transparent 12%),
      radial-gradient(ellipse 95% 130% at 50% 5%,rgba(75,165,255,.38),transparent 68%),
      linear-gradient(180deg,rgba(16,31,92,.54),rgba(4,6,28,.36));
      box-shadow:inset 0 0 90px rgba(97,205,255,.18)}
  .amb.starry.farsoul .st{background:#eaffff;box-shadow:0 0 7px #fff,0 0 18px #5cc8ff}
  .amb.starry.farsoul .cons line{stroke:#98ddff;filter:drop-shadow(0 0 5px #55bfff)}

  .amb .drift{position:absolute;inset:0}

  /* Kyoshi turns his half of the table into an ink-wash bamboo court. The reeds
     are the same shapes used by his entrance and all fall on one sword stroke. */
  .amb.bamboo{background:
      radial-gradient(ellipse 65% 55% at 50% 80%,rgba(8,9,10,.30),transparent 72%),
      linear-gradient(180deg,rgba(225,220,205,.06),rgba(20,21,20,.28));filter:saturate(.35)}
  .amb.bamboo .ambreed{opacity:.52;width:7px;box-shadow:3px 0 rgba(0,0,0,.18)}
  .amb.bamboo .ikslash{z-index:3;background:#eee5d3;box-shadow:0 0 14px #fff}

  /* the petals of the blood moon */
  .pt{position:absolute;width:7px;height:11px;opacity:0;
     background:linear-gradient(155deg,#ff7588,#9e112d 72%);
     border-radius:70% 55% 72% 18%;box-shadow:0 0 8px rgba(230,34,67,.65);
     animation:fall linear infinite}
  @keyframes fall{
    0%  {opacity:0;   transform:translateY(-14px) rotate(0deg)}
    12% {opacity:.85}
    88% {opacity:.7}
    100%{opacity:0;   transform:translateY(var(--fh)) translateX(var(--fx)) rotate(680deg)}}

  /* ---------- Mahri: the Archive, at the hour the windows go orange ---------- */
  .amb.book{background:
      linear-gradient(180deg, rgba(255,138,76,.05), rgba(224,85,106,.22)),
      radial-gradient(ellipse 70% 90% at 78% 0%, rgba(255,170,90,.30), transparent 66%),
      radial-gradient(ellipse 90% 120% at 30% 100%, rgba(200,60,80,.16), transparent 72%)}
  /* the shaft of light from the window */
  .amb.book::before{content:"";position:absolute;top:0;right:6%;width:44%;height:100%;
      pointer-events:none;transform:skewX(-13deg);
      background:linear-gradient(180deg, rgba(255,190,120,.16), transparent 78%)}
  .pg{position:absolute;width:26px;height:34px;opacity:0;border-radius:1px 3px 3px 1px;
      background:linear-gradient(115deg,#ffe6c8,#ffb98a 60%,#f08a6a);
      box-shadow:0 3px 12px rgba(120,30,20,.45);
      border-left:2px solid rgba(150,60,40,.5);
      animation:pgturn ease-in-out infinite;transform-origin:0% 50%}
  @keyframes pgturn{
    0%  {opacity:0;   transform:rotateY(0deg)   rotate(var(--rot)) translateX(0)}
    12% {opacity:.9}
    50% {opacity:.9;  transform:rotateY(-165deg) rotate(var(--rot)) translateX(26px)}
    88% {opacity:.55}
    100%{opacity:0;   transform:rotateY(-360deg) rotate(var(--rot)) translateX(0)}}
  .dust{position:absolute;width:2.5px;height:2.5px;border-radius:50%;background:#ffd9a8;
      box-shadow:0 0 6px 2px rgba(255,190,120,.75);opacity:0;
      animation:dustfloat ease-in-out infinite}
  @keyframes dustfloat{
    0%,100%{opacity:0;   transform:translate(0,0)}
    30%    {opacity:.85}
    70%    {opacity:.5}
    100%   {transform:translate(14px,-26px)}}

  /* ---------- Suhan: the light goes out. Violet, and black. ---------- */
  .amb.dark{background:
      linear-gradient(180deg, rgba(10,4,18,.55), rgba(20,8,36,.82)),
      radial-gradient(ellipse 90% 120% at 50% 100%, var(--lc2s), transparent 70%)}
  /* ---------- Luthiel: haunted. No colour at all, just black and ghost-white. ---------- */
  .amb.haunted{background:
      linear-gradient(180deg, rgba(14,3,3,.55), rgba(8,1,1,.92)),
      radial-gradient(ellipse 90% 120% at 50% 100%, var(--lc2s), transparent 70%)}
  .mist{position:absolute;border-radius:50%;opacity:0;filter:blur(22px);
      background:radial-gradient(circle, var(--lc), transparent 70%);
      animation:mistdrift ease-in-out infinite}
  @keyframes mistdrift{
    0%,100%{opacity:0;   transform:translate(0,0) scale(.8)}
    35%    {opacity:.30}
    65%    {opacity:.22}
    100%   {transform:translate(30px,-40px) scale(1.25)}}
  .crv{position:absolute;opacity:0;color:var(--lc);line-height:1;
      text-shadow:0 0 14px var(--lc), 0 0 30px var(--lc);
      animation:gdrift linear infinite}

  /* ---------- embers ---------- */
  .amb.embers{background:
      radial-gradient(ellipse 90% 110% at 50% 100%, var(--lcs), transparent 70%),
      linear-gradient(0deg, var(--lcs), transparent 70%)}
  .em{position:absolute;bottom:-6px;border-radius:50%;background:var(--lc);opacity:0;
      box-shadow:0 0 8px 2px var(--lc);
      animation:emrise ease-out infinite}
  @keyframes emrise{
    0%  {opacity:0;   transform:translate(0,0) scale(.5)}
    14% {opacity:.95}
    75% {opacity:.6}
    100%{opacity:0;   transform:translate(var(--rx), var(--rh)) scale(.2)}}

  /* ---------- rain ---------- */
  .amb.rain{background:
      radial-gradient(ellipse 90% 120% at 50% 0%, var(--lcs), transparent 70%),
      linear-gradient(180deg, var(--lcs), var(--lcw))}
  .rn{position:absolute;top:-30px;width:1px;opacity:0;
      background:linear-gradient(180deg, transparent, var(--lc));
      box-shadow:0 0 6px var(--lc);
      animation:rnfall linear infinite}
  @keyframes rnfall{
    0%  {opacity:0;   transform:translateY(0)}
    10% {opacity:.75}
    90% {opacity:.55}
    100%{opacity:0;   transform:translateY(var(--fh))}}

  /* ---------- waterfall (Sevenfold Cascade) ---------- */
  .amb.waterfall{background:
      radial-gradient(ellipse 40% 70% at 50% 0%, var(--lcs), transparent 65%),
      radial-gradient(ellipse 60% 40% at 50% 100%, var(--lc2s), transparent 70%),
      linear-gradient(180deg, var(--lcw), transparent 60%)}
  .wf{position:absolute;top:-30px;width:3px;border-radius:2px;opacity:0;
      background:linear-gradient(180deg, transparent, #eaf7ff, var(--lc));
      box-shadow:0 0 8px var(--lc);
      animation:wffall linear infinite}
  @keyframes wffall{
    0%  {opacity:0;   transform:translateY(0)}
    8%  {opacity:.9}
    90% {opacity:.6}
    100%{opacity:0;   transform:translateY(var(--fh))}}
  .wfmist{position:absolute;border-radius:50%;opacity:0;filter:blur(9px);
      background:radial-gradient(ellipse at center, var(--lcs), transparent 72%);
      animation:wfmist ease-in-out infinite}
  @keyframes wfmist{
    0%,100%{opacity:.3; transform:translateY(0) scaleX(1)}
    50%    {opacity:.55;transform:translateY(-9px) scaleX(1.15)}}

  /* ---------- dettlaffshadow (Dettlaff Bromwell) ---------- */
  .amb.dettlaffshadow{background:
      radial-gradient(ellipse 70% 90% at 50% 70%, var(--lcs), transparent 70%),
      linear-gradient(0deg, var(--lcw), transparent 55%)}
  .dtlember{position:absolute;top:-10px;width:3px;height:3px;border-radius:50%;opacity:0;
      background:radial-gradient(circle,#fff,var(--lc) 55%,transparent);
      box-shadow:0 0 6px var(--lc);
      animation:dtlEmberFall linear infinite}
  @keyframes dtlEmberFall{
    0%  {opacity:0; transform:translate(0,0)}
    10% {opacity:.7}
    85% {opacity:.4}
    100%{opacity:0; transform:translate(var(--dx),var(--fh))}}
  .dtleyes{position:absolute;width:20px;height:5px;opacity:0;animation:dtlEyesBlink linear infinite}
  .dtleyes::before,.dtleyes::after{content:"";position:absolute;top:0;width:4px;height:4px;border-radius:50%;
      background:#ff2a2a;box-shadow:0 0 8px 2px rgba(255,42,42,.85)}
  .dtleyes::before{left:0}.dtleyes::after{right:0}
  @keyframes dtlEyesBlink{
    0%,78%{opacity:0} 80%{opacity:.9} 84%{opacity:.1} 87%{opacity:.9} 93%{opacity:0} 100%{opacity:0}}
  .dtlsmirk{position:absolute;width:90px;height:34px;opacity:0;
      border-bottom:2px solid var(--lc);border-radius:0 0 50% 50%/0 0 100% 100%;
      filter:drop-shadow(0 0 8px var(--lc));animation:dtlSmirkFlash linear infinite}
  @keyframes dtlSmirkFlash{
    0%,88%{opacity:0; transform:scaleX(.4)}
    90%{opacity:.85; transform:scaleX(1)}
    94%{opacity:.5;  transform:scaleX(1)}
    100%{opacity:0;  transform:scaleX(1)}}

  /* ---------- mirrorshard (Mirror Knight Azariah) ---------- */
  .amb.mirrorshard{background:
      radial-gradient(ellipse 70% 90% at 50% 30%, var(--lcs), transparent 70%),
      linear-gradient(180deg, var(--lcw), transparent 60%)}
  .mss{position:absolute;top:-16px;width:6px;height:9px;margin-left:-3px;opacity:0;
      background:linear-gradient(135deg,#fff,var(--lc) 60%,var(--lc2));
      clip-path:polygon(50% 0,100% 40%,72% 100%,28% 100%,0 40%);
      box-shadow:0 0 6px var(--lc);
      animation:mssFall linear infinite}
  @keyframes mssFall{
    0%  {opacity:0;  transform:translate(0,0) rotate(0)}
    8%  {opacity:.8}
    92% {opacity:.5}
    100%{opacity:0;  transform:translate(var(--dx),var(--fh)) rotate(var(--rot))}}
  .mscut{position:absolute;top:50%;left:50%;width:130%;height:3px;margin-left:-65%;
      background:linear-gradient(90deg,transparent,#fff,var(--lc),transparent);
      filter:drop-shadow(0 0 8px var(--lc));opacity:0;
      animation:mscutSweep linear infinite}
  @keyframes mscutSweep{
    0%,85%{opacity:0;  transform:rotate(var(--a,0deg)) scaleX(0)}
    87%   {opacity:1;  transform:rotate(var(--a,0deg)) scaleX(1)}
    90%   {opacity:.9; transform:rotate(var(--a,0deg)) scaleX(1)}
    94%   {opacity:0;  transform:rotate(var(--a,0deg)) scaleX(1)}
    100%  {opacity:0;  transform:rotate(var(--a,0deg)) scaleX(0)}}
  .mscrack{position:absolute;width:3px;height:3px;border-radius:50%;opacity:0;
      background:radial-gradient(circle,#fff,var(--lc) 60%,transparent);
      box-shadow:0 0 10px 3px var(--lc);
      animation:mscrackPop linear infinite}
  @keyframes mscrackPop{
    0%,85%{opacity:0;  transform:scale(.2)}
    87%   {opacity:1;  transform:scale(1.4)}
    92%   {opacity:.6; transform:scale(2)}
    100%  {opacity:0;  transform:scale(2.6)}}

  /* Frost legendaries bring snow rather than another heraldic seal. */
  .amb.snow{background:radial-gradient(ellipse 90% 120% at 50% 0%,var(--lcs),transparent 72%),linear-gradient(180deg,var(--lcw),rgba(8,21,31,.2))}
  .sn{position:absolute;top:-18px;width:5px;height:5px;border-radius:50%;background:#e8fbff;opacity:0;box-shadow:0 0 8px 2px var(--lc);animation:snfall linear infinite}
  @keyframes snfall{0%{opacity:0;transform:translate(0,0) scale(.55)}12%{opacity:.9}88%{opacity:.72}100%{opacity:0;transform:translate(var(--fx),var(--fh)) scale(1.1)}}

  /* Vaelmyra leaves the field beneath a living blue-green aether crown. */
  .amb.aethercrown{background:radial-gradient(ellipse 68% 80% at 50% 84%,rgba(65,255,188,.2),transparent 65%),radial-gradient(circle at 50% 50%,rgba(60,164,255,.14),transparent 50%),linear-gradient(180deg,rgba(2,20,28,.28),rgba(3,34,25,.46))}
  .amb.aethercrown .ar{position:absolute;left:50%;top:56%;width:var(--as);height:var(--as);border:1px solid rgba(129,255,224,.46);border-radius:50%;box-shadow:0 0 18px rgba(58,220,214,.3),inset 0 0 22px rgba(52,128,224,.16);animation:ambAetherRing 6s ease-in-out infinite;animation-delay:var(--ad)}
  @keyframes ambAetherRing{0%,100%{opacity:.12;transform:translate(-50%,-50%) scale(.72) rotate(0)}45%{opacity:.72}100%{transform:translate(-50%,-50%) scale(1.15) rotate(38deg)}}
  .amb.snowfire{background:radial-gradient(ellipse 75% 95% at 50% 100%,rgba(204,255,255,.2),transparent 68%),linear-gradient(180deg,rgba(7,24,42,.2),rgba(47,137,170,.16))}
  .amb.snowfire::after{content:"";position:absolute;left:8%;right:8%;bottom:-13%;height:42%;background:conic-gradient(from 15deg at 50% 100%,transparent,#eaffff44 5deg,transparent 15deg,#65ddff42 25deg,transparent 39deg,#fff5 48deg,transparent 59deg);filter:blur(8px);mix-blend-mode:screen;animation:ambSnowFire 1.1s ease-in-out infinite alternate}
  @keyframes ambSnowFire{to{transform:scaleY(1.16) scaleX(.96);filter:blur(11px) brightness(1.25)}}

  /* ---------- motes ---------- */
  .amb.motes{background:
      radial-gradient(ellipse 80% 110% at 50% 60%, var(--lcs), transparent 72%),
      linear-gradient(180deg, var(--lcw), var(--lcs))}
  .mo{position:absolute;border-radius:50%;background:var(--lc);opacity:0;
      box-shadow:0 0 8px 2px var(--lc);
      animation:mofloat ease-in-out infinite}
  @keyframes mofloat{
    0%,100%{opacity:0;   transform:translate(0,0)}
    28%    {opacity:.85}
    72%    {opacity:.45}
    100%   {transform:translate(var(--dx), var(--dy))}}

  /* ---------- pulse ---------- */
  .amb.pulse{background:
      radial-gradient(ellipse 80% 110% at 50% 50%, var(--lcs), transparent 74%)}
  .pu{position:absolute;left:50%;top:50%;width:70px;height:70px;border-radius:50%;
      border:1.5px solid var(--lc);opacity:0;
      box-shadow:0 0 24px var(--lc), inset 0 0 24px var(--lc);
      animation:puring 4.4s ease-out infinite}
  @keyframes puring{
    0%  {opacity:0;   transform:translate(-50%,-50%) scale(.3)}
    18% {opacity:.55}
    100%{opacity:0;   transform:translate(-50%,-50%) scale(5.5)}}

  /* ---------- vines ---------- */
  .amb.vines{background:
      radial-gradient(ellipse 90% 110% at 50% 100%, var(--lcs), transparent 72%),
      linear-gradient(0deg, var(--lcs), transparent 70%)}
  .amb .vin{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .amb .vin path{fill:none;stroke:var(--lc);stroke-width:1.6;opacity:.55;
      stroke-linecap:round;filter:drop-shadow(0 0 5px var(--lc));
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
      animation:grow ease-in-out infinite}
  @keyframes grow{
    0%  {stroke-dashoffset:var(--len); opacity:0}
    18% {opacity:.6}
    60% {stroke-dashoffset:0; opacity:.6}
    100%{stroke-dashoffset:0; opacity:0}}
  .lf{position:absolute;width:7px;height:12px;opacity:0;background:linear-gradient(145deg,var(--lc2),var(--lc));
      border-radius:85% 12% 78% 18%;box-shadow:0 0 9px var(--lc);animation:gdrift linear infinite}

  /* ---------- shards ---------- */
  .amb.shards{background:
      radial-gradient(ellipse 80% 110% at 50% 50%, var(--lcs), transparent 74%),
      linear-gradient(180deg, var(--lcw), var(--lcs))}
  .sh{position:absolute;opacity:0;
      background:linear-gradient(135deg, var(--lc), transparent 65%);
      border:1px solid var(--lc);
      clip-path:polygon(12% 0, 100% 22%, 78% 100%, 0 68%);
      box-shadow:0 0 14px var(--lc);
      animation:shturn ease-in-out infinite}
  @keyframes shturn{
    0%,100%{opacity:0;   transform:rotate(var(--rot)) scale(.85)}
    30%    {opacity:.5}
    70%    {opacity:.34}
    100%   {transform:rotate(calc(var(--rot) + var(--dr))) scale(1.05)}}

  /* every other legendary: its glyph, its colour, drifting on its owner's half */
  .amb.glyph{background:
      radial-gradient(ellipse 90% 120% at 50% 100%, var(--lcs), transparent 72%),
      linear-gradient(180deg, var(--lcw), var(--lcs))}
  /* Ackman Cleveland: the Unwriting as a marionette theatre. No symbols,
     only a black stage and red strings that never quite stop swinging. */
  .amb.strings{background:radial-gradient(ellipse at 50% 100%,rgba(72,0,12,.2),transparent 64%),linear-gradient(180deg,#010102f2,#090005e8);overflow:hidden}
  .amb.strings::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(101deg,transparent 0 54px,rgba(197,12,42,.055) 55px 56px,transparent 57px 111px);animation:ackmanCurtain 8s ease-in-out infinite alternate}
  .amb .pstring{position:absolute;top:-12%;left:var(--sx);width:1px;height:var(--sh);transform-origin:50% 0;background:linear-gradient(#ff365966,#b40625dd 72%,#37000aaa);box-shadow:0 0 5px #d41435;animation:ackmanStringSway var(--st) ease-in-out infinite alternate;animation-delay:var(--sd)}
  .amb .pstring::after{content:"";position:absolute;left:-4px;bottom:-5px;width:9px;height:9px;border-radius:50% 50% 42% 42%;background:#020103;border:1px solid #7e0b21;box-shadow:0 0 8px #be1732}
  @keyframes ackmanStringSway{from{transform:rotate(-4deg) translateX(-6px)}to{transform:rotate(5deg) translateX(7px)}}
  @keyframes ackmanCurtain{from{transform:translateX(-18px) skewX(-2deg)}to{transform:translateX(18px) skewX(2deg)}}
  .gm{position:absolute;opacity:0;color:var(--lc);line-height:1;
      text-shadow:0 0 12px var(--lc);
      animation:gdrift linear infinite}
  @keyframes gdrift{
    0%  {opacity:0;   transform:translateY(-18px) rotate(0deg)}
    14% {opacity:.55}
    86% {opacity:.42}
    100%{opacity:0;   transform:translateY(var(--fh)) translateX(var(--fx)) rotate(var(--rot))}}

  /* The puppets strike as visible marionettes before Cleveland moves. These
     layers are detached animation only; combat has already resolved in the
     deterministic core before either client schedules them. */
  .puppet-attack-string{position:fixed;z-index:1180;top:-4px;width:1px;pointer-events:none;background:linear-gradient(#ef244d,#8d061f 80%,transparent);box-shadow:0 0 7px #e21b43;transform-origin:50% 0;animation:puppetAttackString .62s ease-in-out both}
  .puppet-attack-ghost{position:fixed!important;z-index:1181!important;margin:0!important;pointer-events:none!important;filter:grayscale(.9) contrast(1.35) drop-shadow(0 0 8px #df173a);transition:transform .22s cubic-bezier(.3,0,.8,1),opacity .32s!important}
  @keyframes puppetAttackString{0%{opacity:0;transform:rotate(-8deg) scaleY(.2)}25%{opacity:1;transform:rotate(5deg) scaleY(1)}70%{opacity:.9;transform:rotate(-3deg) scaleY(1)}100%{opacity:0;transform:rotate(2deg) scaleY(.65)}}
  .cleveland-show{position:fixed;inset:0;z-index:1250;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 63%,#42000e66,transparent 34%),linear-gradient(#000 0 72%,#0b0003);animation:clevelandScene 3.35s both}
  .cleveland-show .string{position:absolute;left:var(--x);top:-8%;width:2px;height:72%;transform-origin:50% 0;background:linear-gradient(#ff3155,#a90324 82%,transparent);box-shadow:0 0 9px #d8193b;animation:clevelandString 1.2s var(--d) ease-in-out both}
  .cleveland-show .crossbar{position:absolute;left:50%;top:20%;width:390px;height:8px;transform:translateX(-50%) rotate(-4deg);background:linear-gradient(90deg,transparent,#7e071f 8%,#e22a49 50%,#7e071f 92%,transparent);box-shadow:0 0 16px #bd102f;animation:clevelandBar 2.7s both}
  .cleveland-show .puppet{position:absolute;left:50%;top:49%;width:145px;height:280px;transform:translate(-50%,-50%);background:#010102;clip-path:polygon(33% 0,67% 0,72% 10%,66% 19%,84% 29%,72% 58%,64% 100%,51% 65%,38% 100%,27% 58%,16% 29%,34% 19%,28% 10%);border:2px solid #8c071e;filter:drop-shadow(0 0 12px #e01839) drop-shadow(0 0 38px #630015);animation:clevelandPuppet 2.65s cubic-bezier(.2,.8,.2,1) both}
  .cleveland-show .puppet::before{content:"";position:absolute;left:34px;top:43px;width:76px;height:50px;border-bottom:7px solid #f0e7df;border-radius:0 0 70% 70%;filter:drop-shadow(0 0 8px #e51d43);transform:rotate(4deg)}
  .cleveland-show .cutline{position:absolute;left:-12%;top:51%;width:124%;height:2px;background:#ff244a;box-shadow:0 0 9px #ff244a,0 0 34px #c30026;transform:scaleX(0) rotate(-3deg);animation:clevelandCut .34s 1.55s ease-out forwards}
  .cleveland-show .name{position:absolute;left:5%;right:5%;bottom:10%;text-align:center;color:#f4e9e7;font:34px var(--serif);letter-spacing:.12em;text-shadow:0 0 15px #d7193b,0 0 40px #690014;animation:clevelandName 3s .2s both}
  @keyframes clevelandScene{0%{opacity:0}10%,82%{opacity:1}100%{opacity:0}}
  @keyframes clevelandString{0%{opacity:0;transform:translateY(-60%) rotate(-15deg)}38%{opacity:1;transform:translateY(0) rotate(7deg)}70%,100%{opacity:.85;transform:rotate(-5deg)}}
  @keyframes clevelandBar{0%{opacity:0;transform:translate(-50%,-120px) rotate(18deg)}45%,82%{opacity:1;transform:translateX(-50%) rotate(-4deg)}100%{opacity:0;transform:translate(-50%,25px) rotate(5deg)}}
  @keyframes clevelandPuppet{0%{opacity:0;transform:translate(-50%,-120%) scale(.65) rotate(11deg)}38%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(-4deg)}62%,86%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(2deg)}100%{opacity:0;transform:translate(-50%,-43%) scale(1.12) rotate(-2deg)}}
  @keyframes clevelandCut{to{transform:scaleX(1) rotate(-3deg)}}
  @keyframes clevelandName{0%,22%,100%{opacity:0;letter-spacing:.28em}38%,82%{opacity:1;letter-spacing:.12em}}

  /* Ghost Orchid: a quiet black grove overtaken by a river of cherry blossom.
     The entrance owns the whole screen; the swap stays tightly pinned to the
     actual card so the stat inversion remains readable in a crowded 2v2. */
  .amb.orchid{overflow:hidden;background:radial-gradient(ellipse at 50% 100%,rgba(235,132,184,.2),transparent 58%),linear-gradient(180deg,rgba(7,3,12,.95),rgba(24,7,22,.86))}
  .amb.orchid::before{content:"";position:absolute;inset:-10%;opacity:.7;background:linear-gradient(154deg,transparent 0 46%,#321126 47% 48%,transparent 49%),linear-gradient(26deg,transparent 0 61%,#271021 62% 63%,transparent 64%);animation:orchidBranchBreathe 7s ease-in-out infinite alternate}
  .amb .orchid-petal{position:absolute;left:var(--ox);top:-18px;width:9px;height:6px;border-radius:75% 20% 70% 25%;background:linear-gradient(135deg,#fff3fa,#efa2ca 58%,#a93e78);box-shadow:0 0 7px #ee85bc;animation:orchidPetalFall var(--ot) linear infinite;animation-delay:var(--od)}
  .legend-aura-mark[data-aura="orchid"]{inset:-8px;border-color:#f0a5cf;background:radial-gradient(ellipse at 50% 100%,#e870ac24,transparent 68%);box-shadow:0 0 18px #d667a477,inset 0 0 18px #8f356755}
  .legend-aura-mark[data-aura="orchid"] i{width:8px;height:5px;border-radius:75% 20% 70% 25%;background:linear-gradient(135deg,#fff6fb,#ed9bc6 65%,#9d376c);box-shadow:0 0 7px #f08bc0;animation-name:orchidAuraPetal}
  .orchid-show{position:fixed;inset:0;z-index:1250;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 58%,#a7356d33,transparent 28%),linear-gradient(#030107ed,#120713f2);animation:orchidScene 3.5s both}
  .orchid-show .branch{position:absolute;left:-8%;top:var(--y);width:72%;height:13px;border-radius:70%;transform-origin:0 50%;transform:rotate(var(--r));background:linear-gradient(90deg,#09050a,#42172e 48%,#1b0915);box-shadow:0 0 10px #7f2b55;animation:orchidBranch 2.8s var(--d) cubic-bezier(.2,.8,.2,1) both}
  .orchid-show .branch::after{content:"";position:absolute;right:4%;top:-12px;width:27px;height:27px;border-radius:50% 8% 50% 10%;background:radial-gradient(circle at 42% 45%,#fff 0 7%,#f5b6d5 12% 28%,#c55c94 54%,transparent 58%);filter:drop-shadow(0 0 8px #f29ac5)}
  .orchid-show .petal{position:absolute;left:var(--x);top:var(--y);width:13px;height:8px;border-radius:80% 15% 70% 25%;background:linear-gradient(135deg,#fff,#f3a6cd 58%,#b6467f);box-shadow:0 0 8px #ef87bb;animation:orchidEntrancePetal var(--t) var(--d) cubic-bezier(.2,.55,.4,1) both}
  .orchid-show .figure{position:absolute;left:50%;top:50%;width:128px;height:288px;transform:translate(-50%,-50%);background:linear-gradient(90deg,#040205,#2c1025 47%,#050206);clip-path:polygon(38% 0,62% 0,69% 12%,64% 24%,78% 33%,67% 100%,48% 71%,30% 100%,23% 34%,37% 24%,31% 12%);filter:drop-shadow(0 0 13px #d2619e) drop-shadow(0 0 38px #6b1d4a);animation:orchidFigure 2.8s both}
  .orchid-show .blade{position:absolute;left:calc(50% + 35px);top:50%;width:390px;height:36px;transform-origin:0 50%;background:linear-gradient(0deg,transparent 0 26%,#fff 31% 38%,#f18dbf 46%,#801e58 58%,transparent 65%);clip-path:polygon(0 44%,93% 10%,100% 50%,93% 72%,0 58%);filter:drop-shadow(0 0 12px #ff9ccb) drop-shadow(0 0 32px #b52e72);animation:orchidBlade 2.65s .42s both}
  .orchid-show .name{position:absolute;left:5%;right:5%;bottom:9%;text-align:center;color:#fff1f8;font:34px var(--serif);letter-spacing:.15em;text-shadow:0 0 16px #eb78b4,0 0 38px #85214f;animation:orchidName 3.1s .25s both}
  .orchid-swap{position:fixed;z-index:1235;pointer-events:none;overflow:visible;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:10px;animation:orchidSwapVeil .72s var(--delay) both}
  .orchid-swap::before{content:"";position:absolute;inset:-22px;background:conic-gradient(from 90deg,transparent,#f7b4d788 9deg,transparent 28deg,#a62f7088 43deg,transparent 70deg);filter:blur(3px) drop-shadow(0 0 12px #e777ae);animation:orchidSwapTurn .58s var(--delay) cubic-bezier(.12,.78,.25,1) both}
  .orchid-swap::after{content:attr(data-word);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff5fa;font:10px var(--mono);letter-spacing:.28em;text-shadow:0 0 10px #ed78b1;white-space:nowrap;animation:orchidSwapWord .68s var(--delay) both}
  .orchid-swap i{position:absolute;left:50%;top:50%;width:10px;height:6px;border-radius:80% 15% 70% 25%;background:#f4a8ce;box-shadow:0 0 7px #ef80b7;transform:rotate(var(--a));animation:orchidSwapPetal .62s var(--delay) ease-out both}
  @keyframes orchidBranchBreathe{to{transform:translate(3%,2%) scale(1.03)}}
  @keyframes orchidPetalFall{0%{opacity:0;transform:translate(-30px,-12px) rotate(0)}12%{opacity:.95}100%{opacity:0;transform:translate(var(--odrift),115vh) rotate(620deg)}}
  @keyframes orchidAuraPetal{0%{opacity:0;transform:translate(-8px,-8px) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--drift),118px) rotate(250deg)}}
  @keyframes orchidScene{0%{opacity:0}10%,84%{opacity:1}100%{opacity:0}}
  @keyframes orchidBranch{0%{opacity:0;transform:rotate(calc(var(--r) - 9deg)) scaleX(.05)}45%,85%{opacity:1;transform:rotate(var(--r)) scaleX(1)}100%{opacity:0;transform:rotate(calc(var(--r) + 3deg)) scaleX(1.08)}}
  @keyframes orchidEntrancePetal{0%{opacity:0;transform:translate(-30vw,-22vh) rotate(0) scale(.3)}18%{opacity:1}100%{opacity:0;transform:translate(42vw,62vh) rotate(760deg) scale(1.15)}}
  @keyframes orchidFigure{0%{opacity:0;transform:translate(-50%,-35%) scale(.7);filter:blur(14px)}42%,86%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 0 13px #d2619e) drop-shadow(0 0 38px #6b1d4a)}100%{opacity:0;transform:translate(-50%,-53%) scale(1.06)}}
  @keyframes orchidBlade{0%,27%{opacity:0;transform:rotate(-38deg) scaleX(.08)}45%,82%{opacity:1;transform:rotate(-11deg) scaleX(1)}100%{opacity:0;transform:rotate(8deg) scaleX(1.12)}}
  @keyframes orchidName{0%,25%,100%{opacity:0;letter-spacing:.34em}42%,84%{opacity:1;letter-spacing:.15em}}
  @keyframes orchidSwapVeil{0%,100%{opacity:0}18%,72%{opacity:1}}
  @keyframes orchidSwapTurn{0%{opacity:0;transform:rotate(-95deg) scale(.3)}45%{opacity:1;transform:rotate(18deg) scale(1.12)}100%{opacity:0;transform:rotate(95deg) scale(.8)}}
  @keyframes orchidSwapWord{0%,20%,100%{opacity:0;transform:translate(-50%,-50%) scaleX(.2)}38%,72%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}}
  @keyframes orchidSwapPetal{from{opacity:1;transform:rotate(var(--a)) translateX(8px) scale(.5)}to{opacity:0;transform:rotate(var(--a)) translateX(var(--fly)) scale(1.2)}}
  /* Legendary weather is made from physical ambience, never rotating crests. */
  .amb .sigil,.amb-legend-signature{display:none!important}

  /* the stars of the map */
  .st{position:absolute;border-radius:50%;background:#eaf6ff;
     box-shadow:0 0 8px 2px rgba(160,215,255,.95), 0 0 20px 6px rgba(90,170,235,.45);
     animation:twinkle ease-in-out infinite}
  @keyframes twinkle{
    0%,100%{opacity:.22; transform:scale(.7)}
    50%    {opacity:1;   transform:scale(1.35)}}
  /* the constellation lines — they draw themselves in, then hold, faint */
  .amb .cons{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .amb .cons line{stroke:rgba(150,210,255,.5);stroke-width:1;
     stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
     animation:draw 1.5s ease forwards;animation-delay:var(--d)}
  @keyframes draw{to{stroke-dashoffset:0}}

  /* Saint's Blood — the deeper you ascend, the more the whole room bleeds.
     Driven by --asc (0 → 1) set from the Exaltation total. */
  #game::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
     opacity:var(--asc,0);transition:opacity 1.4s ease;
     background:
       radial-gradient(ellipse 120% 90% at 50% 50%, rgba(150,16,40,.42), transparent 72%),
       linear-gradient(180deg, rgba(90,8,24,.30), rgba(150,16,40,.34));
     mix-blend-mode:screen}
  .side{display:flex;align-items:center;gap:12px;padding:6px 14px;flex:none;
        position:relative;z-index:1}

  /* the weather layers are positioned, so everything the game draws must sit
     explicitly above them — otherwise unpositioned rows fall behind the petals */
  .hand,.thinrule,.midrule{position:relative;z-index:1}

  /* two zones */
  .zone{display:flex;align-items:center;justify-content:center;gap:6px;position:relative;z-index:1}
  .field{flex:1;min-height:172px;padding:0 12px}
  .rear{min-height:54px;padding:2px 12px}
  .rear::before{content:attr(data-l);position:absolute;left:16px;top:50%;transform:translateY(-50%);
    font-family:var(--mono);font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;
    color:#2f3a52;pointer-events:none}
  .midrule{height:1px;background:linear-gradient(90deg,transparent,var(--rule) 20%,var(--rule) 80%,transparent);flex:none}
  .thinrule{height:1px;background:linear-gradient(90deg,transparent,#1b2437 30%,#1b2437 70%,transparent);flex:none}

  .hero{width:92px;height:92px;border-radius:50%;flex:none;position:relative;cursor:pointer;
        display:grid;place-items:center;border:2px solid var(--rule);text-align:center;padding:6px;
        background:radial-gradient(circle at 40% 35%, var(--felt-2), #05070c);transition:box-shadow .15s,border-color .15s}
  .hero.tgt{border-color:var(--blood);box-shadow:0 0 0 3px rgba(191,67,64,.3),0 0 24px rgba(191,67,64,.45)}
  /* Hovering a card that names an implicit opposing/enemy hero marks the
     exact player object its resolver would use. A real child overlay avoids
     stealing ::before/::after from Ward, Evermorrow, and faction auras. */
  .hero.hover-hero-target,.thero.hover-hero-target{z-index:35;filter:drop-shadow(0 0 9px #ff5252) brightness(1.16)}
  .hero-target-reticle{position:absolute;inset:-15px;z-index:45;border:2px solid #ff625f;border-radius:50%;pointer-events:none;
    box-shadow:0 0 0 1px #250506,0 0 18px #ff302f,0 0 34px rgba(255,48,47,.42),inset 0 0 14px rgba(255,48,47,.2);
    animation:heroTargetLock 1s ease-in-out infinite}
  .thero .hero-target-reticle{inset:-10px}
  .hero-target-reticle::before,.hero-target-reticle::after{content:"";position:absolute;left:50%;top:50%;background:#ff7772;
    box-shadow:0 0 7px #ff302f;transform:translate(-50%,-50%)}
  .hero-target-reticle::before{width:calc(100% + 16px);height:1px}
  .hero-target-reticle::after{width:1px;height:calc(100% + 16px)}
  .hero-target-reticle b{position:absolute;left:50%;top:-15px;transform:translateX(-50%);padding:2px 5px;border:1px solid #ff625f;
    border-radius:2px;background:#170607;color:#ffaaa6;font:700 6px/1 var(--mono);letter-spacing:.14em;white-space:nowrap}
  @keyframes heroTargetLock{0%,100%{transform:scale(.94) rotate(-2deg);opacity:.72}50%{transform:scale(1.04) rotate(2deg);opacity:1}}
  .hero.foundation-warden::after,.thero.foundation-warden::after{content:"WARDEN";position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);z-index:8;padding:3px 7px;border:1px solid #dfe8f2;border-radius:3px;background:#101827;color:#f3f7ff;font:700 7px/1 var(--mono);letter-spacing:.16em;box-shadow:0 0 14px #dfe8f288,0 2px 7px #000}
  .hero.foundation-warden,.thero.foundation-warden{box-shadow:0 0 0 2px #dfe8f2,0 0 25px #9fc9e988,inset 0 0 18px #dfe8f244}
  .hero.ward{border-color:#9cc9ff;background:radial-gradient(circle at 40% 35%,#2b4568,#07101d 70%);
    box-shadow:0 0 0 3px rgba(124,180,255,.28),0 0 30px rgba(124,180,255,.78),inset 0 0 24px rgba(124,180,255,.25)}
  .hero.ward::before,.hero.ward::after{content:"";position:absolute;inset:-10px;border-radius:50%;pointer-events:none;border:2px solid transparent;border-top-color:#c5e3ff;border-right-color:#75b7ff;filter:drop-shadow(0 0 6px #75b7ff);animation:heroWardSpin 1.8s linear infinite}
  .hero.ward::after{inset:-16px;border-width:1px;border-bottom-color:#d9efff;border-left-color:#5b9fe8;animation-direction:reverse;animation-duration:2.6s}
  .hero.ward .hp{background:radial-gradient(circle at 35% 30%,#d7f0ff,#397bc1 68%,#183c70);border-color:#214c83;box-shadow:0 0 0 2px rgba(151,210,255,.3),0 0 18px #69b5ff}
  @keyframes heroWardSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
  .hero.everguard{border-color:#78d27d;background:radial-gradient(circle at 38% 34%,#203c29,#07120b 68%);
    box-shadow:0 0 0 3px rgba(67,142,73,.28),0 0 26px rgba(91,196,100,.62),inset 0 0 23px rgba(80,171,86,.26)}
  .hero.everguard::before,.hero.everguard::after{content:"";position:absolute;inset:-9px;border-radius:48% 52% 46% 54%;
    pointer-events:none;border:0;background:repeating-conic-gradient(from 8deg,transparent 0 20deg,#377d43 21deg 23deg,transparent 24deg 42deg);
    -webkit-mask:radial-gradient(circle,transparent 0 57%,#000 59% 67%,transparent 69%);mask:radial-gradient(circle,transparent 0 57%,#000 59% 67%,transparent 69%);
    filter:drop-shadow(0 0 5px #62c96b);animation:everGuardRoots 3.2s ease-in-out infinite}
  .hero.everguard::after{inset:-17px;background:repeating-conic-gradient(from 19deg,transparent 0 27deg,#65b96c 28deg 30deg,transparent 31deg 55deg);animation-delay:-1.6s}
  .hero.everguard .hp{background:radial-gradient(circle at 35% 30%,#8ce496,#26713a 68%,#123f21);
    border-color:#173c20;box-shadow:0 0 0 2px rgba(116,221,125,.28),0 0 17px #61c96b;color:#f2fff0}
  .hero.everguard.ward{border-color:#a9d8ff;box-shadow:0 0 0 3px rgba(124,180,255,.3),0 0 30px rgba(124,180,255,.72),inset 0 0 24px rgba(124,180,255,.22)}
  .hero.everguard.ward::before,.hero.everguard.ward::after{background:none;-webkit-mask:none;mask:none;border:2px solid transparent;border-top-color:#c5e3ff;border-right-color:#75b7ff;border-left-color:transparent;border-bottom-color:transparent;animation-name:heroWardSpin;animation-duration:1.8s}
  .hero.everguard.ward::after{border-bottom-color:#d9efff;border-left-color:#5b9fe8;border-top-color:transparent;border-right-color:transparent;animation-duration:2.6s}
  @keyframes everGuardRoots{0%,100%{transform:scale(.96);opacity:.64;filter:drop-shadow(0 0 3px #4ca959)}50%{transform:scale(1.06);opacity:1;filter:drop-shadow(0 0 9px #7ae486)}}
  .hit{animation:shake .3s}
  @keyframes shake{0%,100%{filter:none}25%{transform:translateX(-5px);filter:brightness(2.1)}
                   75%{transform:translateX(5px);filter:brightness(2.1)}}
  .hp{position:absolute;bottom:-3px;right:-3px;width:31px;height:31px;border-radius:50%;
      background:var(--blood);color:#fff;display:grid;place-items:center;font-family:var(--mono);
      font-size:13px;font-weight:700;border:2px solid #1a0d0d;font-variant-numeric:tabular-nums}
  .arm{position:absolute;bottom:-3px;left:-3px;width:29px;height:29px;border-radius:50%;
      background:#c8d6e4;color:#1b2430;display:none;place-items:center;font-family:var(--mono);
      font-size:12.5px;font-weight:700;border:2px solid #566a80;font-variant-numeric:tabular-nums;
      box-shadow:0 0 14px rgba(200,214,228,.6)}
  .arm.on{display:grid}
  /* Spell Power and Overcharge: any player can pick up either from a splash
     card or an artifact, not only the Descended Cities, so this reads for
     everyone — it just stays hidden while both are zero. */
  .spow{position:absolute;top:-3px;right:-3px;width:25px;height:25px;border-radius:50%;
      background:#c9a0e8;color:#1b0f24;display:none;place-items:center;font-family:var(--mono);
      font-size:10.5px;font-weight:700;border:2px solid #6a3f96;font-variant-numeric:tabular-nums;
      box-shadow:0 0 12px rgba(154,58,220,.6);cursor:help}
  .spow.on{display:grid}
  .ovch{position:absolute;top:-3px;left:-3px;width:25px;height:25px;border-radius:50%;
      background:#f0a860;color:#2a1608;display:none;place-items:center;font-family:var(--mono);
      font-size:10.5px;font-weight:700;border:2px solid #a85e28;font-variant-numeric:tabular-nums;
      box-shadow:0 0 12px rgba(224,120,40,.6);cursor:help}
  .ovch.on{display:grid}
  .art{width:62px;height:62px;flex:none;border-radius:50%;display:none;place-items:center;
      text-align:center;padding:5px;cursor:help;position:relative;
      background:radial-gradient(circle at 40% 35%, #2a2416, #0d0b06);
      border:2px solid var(--gold);box-shadow:0 0 22px rgba(220,179,92,.35)}
  .art.on{display:grid}
  .art span{font-family:var(--serif);font-size:9px;line-height:1.1;color:var(--gold)}
  .art::after{content:"";position:absolute;inset:-5px;border-radius:50%;
      border:1px dashed rgba(220,179,92,.35);animation:spin 14s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .hname{font-family:var(--serif);font-size:13.5px;line-height:1.15}
  .hsub{font-family:var(--mono);font-size:7px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-top:3px}

  .power{width:70px;height:70px;border-radius:50%;flex:none;cursor:pointer;padding:5px;
         display:grid;place-items:center;text-align:center;border:2px dashed var(--gold-dim);
         background:rgba(220,179,92,.06);font-family:var(--mono);font-size:7.5px;
         letter-spacing:.07em;text-transform:uppercase;color:var(--gold);line-height:1.35;transition:all .12s}
  .power.able:hover{transform:scale(1.06);box-shadow:0 0 22px rgba(220,179,92,.32);border-style:solid}
  .power.spent{opacity:.28;cursor:default}

  .crystals{display:flex;gap:3px;flex-wrap:wrap;width:120px}
  .cry{width:10px;height:10px;transform:rotate(45deg);border:1px solid #2c5c8c;border-radius:2px}
  .cry.full{background:var(--mana);box-shadow:0 0 7px rgba(74,143,212,.75)}
  .manatxt{font-family:var(--mono);font-size:11px;color:var(--mana);font-variant-numeric:tabular-nums}
  .pile{width:72px;height:94px;flex:none;position:relative;display:flex;flex-direction:column;
        align-items:center;justify-content:center;font-family:var(--mono);font-size:8px;color:var(--dim);
        letter-spacing:.13em;text-transform:uppercase;text-align:center;line-height:1.25;cursor:default;
        border-radius:7px;background:linear-gradient(145deg,#33415f,#111827);border:1px solid var(--gold-dim);
        box-shadow:-3px 3px 0 #0c1220,-6px 6px 0 #080c15,0 9px 24px rgba(0,0,0,.55),inset 0 0 0 4px #172137;
        transition:transform .18s ease,box-shadow .18s ease;isolation:isolate}
  .pile::before{content:"";position:absolute;inset:7px;border:1px solid rgba(220,179,92,.42);border-radius:4px;
        background:repeating-radial-gradient(circle at center,transparent 0 7px,rgba(220,179,92,.12) 8px 9px);z-index:-1}
  .pile::after{content:"DECK";position:absolute;bottom:9px;font-size:6px;color:rgba(233,228,214,.55)}
  .pile b{display:block;font-size:22px;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
        text-shadow:0 0 12px rgba(220,179,92,.6)}
  #ppile{cursor:help;border-color:var(--gold);box-shadow:-3px 3px 0 #0c1220,-6px 6px 0 #080c15,
        0 9px 26px rgba(0,0,0,.6),0 0 18px rgba(220,179,92,.18),inset 0 0 0 4px #172137}
  #ppile:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:-3px 5px 0 #0c1220,-6px 8px 0 #080c15,
        0 13px 32px rgba(0,0,0,.7),0 0 24px rgba(220,179,92,.28),inset 0 0 0 4px #172137}

  .res{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;
       color:var(--dim);text-align:center;line-height:1.5;padding:5px 10px;border-radius:3px;
       border:1px solid var(--rule);background:rgba(255,255,255,.02);display:none;min-width:78px}
  .res.on{display:block}
  .res b{display:block;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)}
  .res.moon b{color:var(--moon)} .res.irid b{color:var(--leg)} .res.asc b{color:var(--sang)}
  .res .tier{font-size:8px;color:var(--gold);margin-top:2px;letter-spacing:.12em}
  .res.curve{border-color:rgba(113,224,160,.35);min-width:102px}.res.curve b{color:#71e0a0}
  .res.vakplan{width:min(245px,28vw);text-align:left;letter-spacing:.06em;text-transform:none;padding:8px 11px}
  .res.vakplan b{text-align:center;letter-spacing:.13em;text-transform:uppercase}.res.vakplan .tier{line-height:1.35;letter-spacing:.04em;text-transform:none;margin-top:4px}
  .res.curve.ready{border-color:#71e0a0;box-shadow:0 0 18px rgba(113,224,160,.34);animation:curveReady 1.35s ease-in-out infinite}
  .res.curve.ready .tier{color:#9affc1;text-shadow:0 0 8px #54d98a}
  @keyframes curveReady{50%{background:rgba(84,217,138,.09);box-shadow:0 0 28px rgba(113,224,160,.52)}}
  .tscurve{display:none;color:#71e0a0!important;font-size:7px!important;letter-spacing:.08em}.tscurve.on{display:inline}.tscurve.ready{text-shadow:0 0 8px #71e0a0}

  /* The Trial is a campaign, not a single counter. This HUD stays compact but
     keeps every oath, objective and exact amount visible without card-hovering. */
  #trialhud{position:fixed;z-index:36;right:12px;top:74px;width:min(350px,calc(100vw - 24px));display:none;color:#e9e5da;
    border:1px solid #8b765c;border-top:3px solid #ddecf2;border-radius:6px;background:linear-gradient(155deg,rgba(38,31,24,.96),rgba(8,12,16,.97));box-shadow:0 16px 48px #000b,0 0 28px #b8e9ff1a;overflow:hidden}
  #trialhud.on{display:block;animation:trialHudIn .32s ease-out}#trialhud.folded .trialhud-oath,#trialhud.folded .trialhud-list{display:none}#trialhud.folded{width:250px}.trialhud-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #5f5549;background:linear-gradient(90deg,#e9f7ff10,#74583a20);cursor:pointer}
  .trialhud-rune{width:32px;height:32px;display:grid;place-items:center;flex:none;border:1px solid #a8dff2;transform:rotate(45deg);color:#dff7ff;box-shadow:0 0 13px #72cfff55}.trialhud-rune span{transform:rotate(-45deg);font:13px var(--serif)}
  .trialhud-title{min-width:0;flex:1}.trialhud-title b{display:block;font:15px var(--serif);font-weight:400}.trialhud-title span{display:block;margin-top:2px;color:#9ba8b1;font:6.5px var(--mono);letter-spacing:.14em;text-transform:uppercase}
  .trialhud-oath{padding:7px 11px;border-bottom:1px solid #443d35;color:#c6b391;font:7px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase}.trialhud-oath.sworn{color:#dff6ff;background:#7acdeb14;text-shadow:0 0 8px #86dfff}
  .trialhud-list{max-height:min(52vh,420px);overflow-y:auto;padding:6px}.trialrow{--cc:#dcecf2;padding:7px 8px;margin:0 0 5px;border:1px solid #3d4650;border-left:3px solid var(--cc);border-radius:4px;background:#ffffff05;transition:.2s}
  .trialrow.complete{background:color-mix(in srgb,var(--cc) 9%,#0b1014);border-color:color-mix(in srgb,var(--cc) 50%,#3d4650)}.trialrow.joined{box-shadow:0 0 17px color-mix(in srgb,var(--cc) 28%,transparent);background:color-mix(in srgb,var(--cc) 15%,#0b1014)}.trialrow.declined{opacity:.48;filter:grayscale(.55)}
  .trialrow-top{display:flex;align-items:baseline;gap:7px}.trialrow-top b{font:11px var(--serif);font-weight:500;color:var(--cc)}.trialrow-top span{margin-left:auto;color:#bdc5cb;font:7px var(--mono)}
  .trialrow-clan{margin-top:1px;color:#8f9aa3;font:6px var(--mono);letter-spacing:.13em;text-transform:uppercase}.trialrow-obj{margin:5px 0;color:#c0c5c8;font:8px/1.3 var(--sans)}
  .trialbar{height:5px;border-radius:5px;background:#05080b;overflow:hidden;border:1px solid #303942}.trialbar i{display:block;height:100%;width:var(--pc);background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 55%,#4c3929),var(--cc));box-shadow:0 0 8px var(--cc);transition:width .3s ease}
  .trialrow-state{margin-top:4px;color:#74818b;font:6px var(--mono);letter-spacing:.1em;text-transform:uppercase}.trialrow.complete .trialrow-state{color:var(--cc)}
  @keyframes trialHudIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
  .fortune-wheel-vfx{position:fixed;inset:0;z-index:95;display:grid;place-items:center;pointer-events:none;
      background:radial-gradient(circle at center,#7b274455 0 12%,#09040edd 54%,#010207f5 100%);animation:fortuneVeil 4.45s ease both}
  .fortune-wheel-vfx::before{content:"LADY LAURENTINE'S WHEEL OF FORTUNE";position:absolute;z-index:4;left:0;right:0;top:5.5%;
      color:#fff0b4;text-align:center;font:500 clamp(18px,3vw,40px) var(--serif);letter-spacing:.13em;text-shadow:0 0 18px #e7a84e,0 4px 18px #000;
      animation:fortuneTitle .7s .15s both}
  .fortune-wheel-vfx .fw-stage{position:relative;width:min(76vmin,680px);aspect-ratio:1;filter:drop-shadow(0 0 42px #efb84faa);animation:fortuneStage .55s both}
  .fortune-wheel-vfx .fw-wheel{position:absolute;inset:7%;border:12px double #f1cf73;border-radius:50%;overflow:hidden;
      background:conic-gradient(from -22.5deg,#912b48 0 45deg,#d99c35 45deg 90deg,#286a71 90deg 135deg,#643b86 135deg 180deg,#b54b2f 180deg 225deg,#3f8753 225deg 270deg,#315da0 270deg 315deg,#7c315d 315deg 360deg);
      box-shadow:inset 0 0 0 10px #17101d,inset 0 0 45px #000,0 0 0 7px #301a23,0 0 70px #e8b04a88;
      animation:fortuneSpin 3.35s cubic-bezier(.08,.72,.12,1) both}
  .fortune-wheel-vfx .fw-wheel::before{content:"";position:absolute;z-index:1;inset:10%;border:3px dashed #fff3b6aa;border-radius:50%;box-shadow:0 0 15px #f7d77b inset}
  .fortune-wheel-vfx .fw-wheel::after{content:"✦";position:absolute;z-index:3;inset:39%;display:grid;place-items:center;border-radius:50%;
      color:#fff1a8;background:radial-gradient(circle,#6f283f,#121018 72%);border:7px double #f7dd8b;box-shadow:0 0 34px #fff1a8aa;font-size:clamp(32px,7vmin,70px)}
  .fortune-wheel-vfx .fw-label{position:absolute;z-index:2;left:50%;top:50%;width:31%;margin-left:-15.5%;text-align:center;
      color:#fff7dc;font:800 clamp(7px,1.15vmin,12px)/1.15 var(--mono);letter-spacing:.04em;text-transform:uppercase;text-shadow:0 2px 3px #000,0 0 7px #000;
      transform:translateY(-50%) rotate(calc(var(--i) * 45deg)) translateY(max(-27vmin,-240px)) rotate(calc(var(--i) * -45deg))}
  .fortune-wheel-vfx .fw-bulbs{position:absolute;inset:1.5%;border:5px dotted #fff0a5;border-radius:50%;filter:drop-shadow(0 0 8px #ffc14f);animation:fortuneBulbs .22s steps(2,end) infinite}
  .fortune-wheel-vfx .fw-pointer{position:absolute;z-index:5;left:50%;top:-1%;translate:-50% 0;width:0;height:0;border-left:25px solid transparent;border-right:25px solid transparent;border-top:65px solid #fff0a5;filter:drop-shadow(0 5px 5px #000) drop-shadow(0 0 12px #ffca55);animation:fortunePointer .16s steps(2,end) 20}
  .fortune-wheel-vfx .fw-result{position:absolute;z-index:6;left:50%;bottom:-3%;min-width:68%;translate:-50% 0;padding:13px 24px;border:2px solid #f1cf73;border-radius:4px;
      background:#120c17eF;white-space:nowrap;color:#fff2bc;text-align:center;text-transform:uppercase;letter-spacing:.15em;font:800 clamp(12px,2vmin,22px) var(--mono);
      box-shadow:0 0 35px #e8b04a77;text-shadow:0 2px 4px #000,0 0 16px #f7bd55;animation:fortuneResult .55s 3.12s both}
  @keyframes fortuneSpin{from{transform:rotate(0deg)}to{transform:rotate(var(--fortune-spin,2260deg))}}
  @keyframes fortuneStage{from{opacity:0;transform:scale(.45) rotate(-12deg)}to{opacity:1;transform:none}}
  @keyframes fortuneTitle{from{opacity:0;transform:translateY(-18px);letter-spacing:.35em}to{opacity:1;transform:none}}
  @keyframes fortunePointer{to{transform:rotate(8deg)}}@keyframes fortuneBulbs{to{opacity:.38;filter:drop-shadow(0 0 3px #ff5c98)}}
  @keyframes fortuneResult{from{opacity:0;transform:translateY(18px) scale(.72)}to{opacity:1;transform:none}}
  @keyframes fortuneVeil{0%,100%{opacity:0}5%,88%{opacity:1}}
  @media(max-width:820px){#trialhud{top:auto;bottom:8px;right:8px;width:min(330px,calc(100vw - 16px))}.trialhud-list{max-height:34vh}}

  #fx{position:fixed;inset:0;pointer-events:none;z-index:70}
  #flash{position:fixed;inset:0;pointer-events:none;z-index:74;opacity:0;mix-blend-mode:screen}
  /* The Nightfall Prophecy: six Blades equipped in one game ends it outright.
     Nothing dims piece by piece — the veil rises over everything at once and
     the world underneath simply stops mattering. */
  #nightfallVeil{position:fixed;inset:0;z-index:210;background:#000;opacity:0;pointer-events:none;
    transition:opacity 3.4s cubic-bezier(.4,0,.7,1)}
  #nightfallVeil.on{opacity:1;pointer-events:all}
  #nightfallVeil .np-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    text-align:center;padding:0 40px;font-family:var(--serif);font-size:30px;font-weight:400;
    color:#c9a8ec;letter-spacing:.04em;text-wrap:balance;opacity:0;transition:opacity 1.6s ease 2s}
  #nightfallVeil.on .np-text{opacity:.92}
  #game.sh1,#teamgame.sh1{animation:sh .26s}
  #game.sh2,#teamgame.sh2{animation:sh2 .42s}
  #game.sh3,#teamgame.sh3{animation:kyriaxQuake .92s cubic-bezier(.18,.8,.2,1)}
  @keyframes sh{0%,100%{transform:translate(0,0)}20%{transform:translate(-5px,3px)}
    45%{transform:translate(4px,-3px)}70%{transform:translate(-3px,-2px)}}
  @keyframes sh2{0%,100%{transform:translate(0,0) rotate(0)}
    12%{transform:translate(-11px,6px) rotate(-.35deg)}28%{transform:translate(9px,-7px) rotate(.3deg)}
    46%{transform:translate(-8px,-4px) rotate(-.25deg)}64%{transform:translate(6px,5px) rotate(.2deg)}
    82%{transform:translate(-4px,-2px) rotate(-.1deg)}}
  @keyframes kyriaxQuake{
    0%,100%{transform:translate(0,0) rotate(0) scale(1)}
    6%{transform:translate(-18px,10px) rotate(-.7deg) scale(1.012)}
    13%{transform:translate(16px,-13px) rotate(.62deg) scale(1.008)}
    21%{transform:translate(-14px,-8px) rotate(-.55deg) scale(1.014)}
    30%{transform:translate(13px,11px) rotate(.46deg) scale(1.006)}
    41%{transform:translate(-11px,7px) rotate(-.38deg)}
    53%{transform:translate(9px,-8px) rotate(.31deg)}
    66%{transform:translate(-7px,-5px) rotate(-.22deg)}
    79%{transform:translate(5px,4px) rotate(.14deg)}
    91%{transform:translate(-2px,1px) rotate(-.05deg)}}
  .match-opening{position:fixed;inset:0;z-index:96;pointer-events:none;overflow:hidden;color:#f2eadb;display:grid;place-items:center;animation:matchOpening 3.35s ease both}
  .match-opening::before{content:"";position:absolute;inset:0;background:#02040a;animation:matchCurtain 3.35s ease both}
  .match-opening::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--gold),transparent);box-shadow:0 0 28px var(--gold);animation:matchRoad 2.4s .45s ease both}
  .match-flare{position:absolute;top:50%;width:62vw;height:95vh;transform:translateY(-50%);filter:blur(3px);opacity:.44}
  .match-flare.a{right:50%;background:radial-gradient(ellipse at 100% 50%,var(--ma),transparent 68%);animation:matchFlareA 2.8s .25s ease both}
  .match-flare.b{left:50%;background:radial-gradient(ellipse at 0 50%,var(--mb),transparent 68%);animation:matchFlareB 2.8s .25s ease both}
  .match-opening-copy{position:relative;z-index:2;text-align:center;width:min(880px,88vw);text-shadow:0 3px 15px #000,0 0 34px rgba(220,179,92,.32)}
  .match-opening-copy small{display:block;color:var(--gold);font:8px var(--mono);letter-spacing:.55em;text-transform:uppercase;margin-bottom:16px;animation:matchCopy 2.7s .38s ease both}
  .match-opening-copy h2{font:clamp(30px,5vw,64px)/1.05 var(--serif);font-weight:400;margin:0;text-wrap:balance;animation:matchTitle 2.8s .3s cubic-bezier(.16,.86,.18,1) both}
  .match-opening-copy p{margin:18px 0 0;color:#aeb8ca;font:9px var(--mono);letter-spacing:.25em;text-transform:uppercase;animation:matchCopy 2.7s .65s ease both}
  .match-opening-copy b{color:#fff;font-weight:600}
  @keyframes matchOpening{0%,100%{opacity:0}3%,88%{opacity:1}}
  @keyframes matchCurtain{0%{opacity:0}14%,78%{opacity:1}100%{opacity:0}}
  @keyframes matchRoad{0%{opacity:0;transform:scaleY(0)}28%,72%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1.2)}}
  @keyframes matchFlareA{0%{opacity:0;transform:translate(-35%,-50%)}34%,75%{opacity:.48;transform:translate(0,-50%)}100%{opacity:0;transform:translate(10%,-50%)}}
  @keyframes matchFlareB{0%{opacity:0;transform:translate(35%,-50%)}34%,75%{opacity:.48;transform:translate(0,-50%)}100%{opacity:0;transform:translate(-10%,-50%)}}
  @keyframes matchTitle{0%{opacity:0;transform:scale(1.45);filter:blur(9px);letter-spacing:.18em}30%,78%{opacity:1;transform:none;filter:none;letter-spacing:0}100%{opacity:0;transform:scale(.96)}}
  @keyframes matchCopy{0%,12%{opacity:0;transform:translateY(12px)}30%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
  .pop{position:fixed;z-index:78;pointer-events:none;font-family:var(--mono);font-weight:700;
       font-size:21px;text-shadow:0 2px 10px #000,0 0 18px currentColor;
       animation:popup 1.05s cubic-bezier(.2,.8,.3,1) forwards;font-variant-numeric:tabular-nums}
  @keyframes popup{0%{transform:translate(-50%,0) scale(.5);opacity:0}
    18%{transform:translate(-50%,-16px) scale(1.35);opacity:1}
    100%{transform:translate(-50%,-54px) scale(.95);opacity:0}}
  /* a card in flight: it leaves the actual deck, turns face-up, and lands in its slot */
  .fly{position:fixed;width:144px;height:204px;border-radius:8px;z-index:79;pointer-events:none;
    transform-origin:50% 50%;overflow:hidden;
    background:linear-gradient(150deg,#3a4870,#141b2c);border:1px solid var(--gold-dim);
    box-shadow:0 10px 32px rgba(0,0,0,.72),0 0 24px color-mix(in srgb,var(--ff,var(--gold)) 58%,transparent);
    will-change:transform,opacity,filter;
    transition:transform .72s cubic-bezier(.18,.82,.2,1),opacity .18s ease,filter .18s ease}
  .fly .card{width:144px;height:204px;cursor:default;margin:0}
  .fly.foe::after{content:"";position:absolute;inset:6px;border:1px solid rgba(220,179,92,.42);border-radius:3px;
    background:repeating-radial-gradient(circle at 50% 50%,transparent 0 7px,rgba(220,179,92,.12) 8px 9px),
      linear-gradient(145deg,#344263,#111827)}
  .fly.land{filter:brightness(1.55);box-shadow:0 8px 34px rgba(0,0,0,.7),0 0 36px var(--ff,var(--gold))}
  .draw-arriving{opacity:0!important;transform:translateY(-5px) scale(.96)!important}
  .fly.burn{background:linear-gradient(150deg,#7a2418,#2a0d08);border-color:#e0602a;
    box-shadow:0 0 30px rgba(224,96,42,.75)}

  /* faction play signatures: one shared stage, eleven different visual languages */
  .fac-play{position:fixed;left:50%;top:var(--fy,50%);width:190px;height:190px;z-index:72;
    pointer-events:none;transform:translate(-50%,-50%);color:var(--fc,var(--gold));
    animation:facPlay 1.05s cubic-bezier(.16,.8,.25,1) forwards}
  .fac-play .fglyph{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;
    font-family:var(--serif);text-shadow:0 0 28px currentColor;animation:facGlyph 1s ease-out forwards}
  .fac-play .fring{position:absolute;inset:20px;border:2px solid currentColor;border-radius:50%;
    box-shadow:0 0 25px currentColor,inset 0 0 25px color-mix(in srgb,currentColor 32%,transparent)}
  .fac-play .fring.r2{inset:42px;border-style:dashed;animation:spin 2.2s linear infinite reverse}
  .fac-play i{position:absolute;left:50%;top:50%;width:7px;height:28px;border-radius:9px;
    background:currentColor;box-shadow:0 0 12px currentColor;
    transform:rotate(var(--a)) translateY(-78px) scaleY(var(--s));opacity:.85}
  @keyframes facPlay{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}18%{opacity:1}
    70%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-55%) scale(1.28)}}
  @keyframes facGlyph{0%{transform:scale(.2) rotate(-25deg);filter:blur(10px)}45%{transform:scale(1);filter:none}
    100%{transform:scale(1.12) rotate(8deg);filter:blur(2px)}}
  @keyframes prismPulse{0%,100%{filter:hue-rotate(0deg)}33%{filter:hue-rotate(105deg)}66%{filter:hue-rotate(225deg)}}
  .fac-play.lex .fring{border-style:dashed}.fac-play.lex .fglyph{font-size:52px}
  .fac-play.leg{filter:hue-rotate(var(--h,0deg));animation-name:facPlay,prismPulse;animation-duration:1.05s,.25s}
  .fac-play.nys .fglyph{animation:facGlyph .65s ease-out,uwfade .45s .55s steps(5) forwards}
  @keyframes uwfade{to{letter-spacing:24px;opacity:0;filter:blur(7px)}}
  .fac-play.nur i{border-radius:50%;height:9px;width:18px;background:#f0d67a}
  .fac-play.sang i{height:46px;background:linear-gradient(transparent,currentColor)}
  .fac-play.iron .fring{border-width:5px;border-style:dotted}.fac-play.iron .fglyph{animation-timing-function:steps(6)}
  .fac-play.vir{transform-origin:50% 100%}.fac-play.vir .fring{border-radius:48% 52% 45% 55%;animation:growRing .9s ease-out}
  .fac-play.vir i{width:5px;height:62px;border-radius:100% 0;background:linear-gradient(transparent,currentColor)}
  @keyframes growRing{0%{transform:scale(.05,.7)}65%{transform:scale(1.08,1)}100%{transform:scale(1)}}
  .fac-play.sil .fring{border-radius:35% 35% 48% 48%;border-width:4px}.fac-play.sil i{height:12px;width:38px}
  .fac-play.frost{filter:drop-shadow(0 0 18px #7fd8e8)}.fac-play.frost i{clip-path:polygon(50% 0,100% 100%,50% 76%,0 100%)}
  .roots-vfx{position:fixed;z-index:75;width:220px;height:220px;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 0 18px #416f49);animation:rootsSuffocate 1.8s ease-out forwards}
  .roots-vfx .roots-core{position:absolute;inset:62px;border-radius:48% 52% 42% 58%;background:radial-gradient(circle,#b3d58b 0 4%,#315b3b 18%,#10251b 72%);box-shadow:0 0 30px #6e9f58,inset 0 0 25px #07130c;animation:rootsPulse 1.5s ease-in-out}
  .roots-vfx .roots-mist{position:absolute;inset:25px;border-radius:50%;background:radial-gradient(circle,transparent 28%,rgba(74,119,67,.48) 52%,transparent 72%);filter:blur(8px);animation:rootsMist 1.7s ease-out}
  .roots-vfx i{position:absolute;left:50%;top:50%;width:7px;height:112px;border-radius:100% 0 100% 0;background:linear-gradient(#719b5c,#172c1b 70%,transparent);transform-origin:50% 0;transform:rotate(var(--a)) translateY(-10px) scaleY(.08);animation:rootsVine .95s var(--d) cubic-bezier(.1,.8,.2,1) forwards}
  @keyframes rootsSuffocate{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}22%{opacity:1}75%{opacity:.95;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
  @keyframes rootsPulse{0%{transform:scale(.25);filter:brightness(2)}55%{transform:scale(1.08)}100%{transform:scale(.8);opacity:0}}
  @keyframes rootsMist{0%{transform:scale(.2);opacity:0}35%{opacity:1}100%{transform:scale(1.3);opacity:0}}
  @keyframes rootsVine{0%{transform:rotate(var(--a)) translateY(-10px) scaleY(.08)}75%{transform:rotate(var(--a)) translateY(-10px) scaleY(1.08)}100%{transform:rotate(var(--a)) translateY(-10px) scaleY(.72);opacity:0}}
  .fac-play.khaz{animation-timing-function:cubic-bezier(.1,.9,.2,1)}.fac-play.khaz .fring{border-width:7px;transform:scaleY(.45)}
  .fac-play.mf .fring{border-width:0;border-right:7px solid currentColor}.fac-play.mf .r2{border:1px dashed currentColor}
  .summon-arrive{will-change:transform,opacity,filter;animation:summonBase .62s cubic-bezier(.16,.85,.22,1) both}
  .summon-arrive.summon-lex{animation-name:summonLex}.summon-arrive.summon-leg{animation-name:summonPrism}
  .summon-arrive.summon-nys{animation-name:summonErase}.summon-arrive.summon-nur{animation-name:summonCoin}
  .summon-arrive.summon-sang{animation-name:summonBlood}.summon-arrive.summon-iron{animation-name:summonIron}
  .summon-arrive.summon-vir{animation-name:summonGrow;transform-origin:50% 100%}
  .summon-arrive.summon-sil{animation-name:summonShield}.summon-arrive.summon-frost{animation-name:summonFrost}
  .summon-arrive.summon-khaz{animation-name:summonStampede}.summon-arrive.summon-mf{animation-name:summonMoon}
  .summon-arrive.summon-vitruvio{animation-name:summonVitruvio;animation-duration:1.25s}
  .summon-arrive.summon-yssvarn{animation-name:summonYssvarn;animation-duration:1.9s}
  .summon-arrive.summon-evermorrow{animation-name:summonEvermorrow;animation-duration:1.8s;transform-origin:50% 100%}
  .summon-arrive.summon-forgotten-roots{animation-name:summonForgottenRoots;animation-duration:1.65s;transform-origin:50% 100%}
  .summon-arrive.summon-kyriax{animation-name:summonKyriax;animation-duration:2.7s;transform-origin:50% 100%}
  .summon-arrive.summon-lady-mirror{animation-name:summonLadyMirror;animation-duration:2.35s;transform-origin:50% 50%}
  @keyframes summonBase{0%{opacity:0;transform:translateY(18px) scale(.72);filter:brightness(2)}100%{opacity:1;transform:none;filter:none}}
  @keyframes summonLex{0%{opacity:0;transform:scale(.78);filter:blur(9px) brightness(2.2)}55%{opacity:1;transform:scale(1.05);filter:blur(0) brightness(1.5)}100%{transform:none;filter:none}}
  @keyframes summonPrism{0%{opacity:0;transform:scale(.45) rotateY(80deg);filter:hue-rotate(0) brightness(2)}70%{opacity:1;transform:scale(1.06) rotateY(0);filter:hue-rotate(220deg) brightness(1.4)}100%{transform:none;filter:none}}
  @keyframes summonErase{0%{opacity:0;transform:scaleX(1.35);filter:blur(12px) grayscale(1)}55%{opacity:.7;transform:scaleX(.96);filter:blur(2px)}100%{opacity:1;transform:none;filter:none}}
  @keyframes summonLadyMirror{0%{opacity:0;transform:perspective(700px) rotateY(88deg) scale(.7);filter:blur(8px) brightness(3)}34%{opacity:.45;transform:perspective(700px) rotateY(-24deg) scale(1.18);filter:blur(2px) brightness(2.2)}62%{opacity:1;transform:perspective(700px) rotateY(9deg) scale(1.06);filter:brightness(1.6)}100%{transform:none;filter:none}}

  /* The Lady does not merely arrive through a mirror; the whole room becomes
     a hall of reflections and the glass closes around her board slot. */
  .ladyshow{position:fixed;inset:0;z-index:96;pointer-events:none;overflow:hidden;color:#dff9ff;background:radial-gradient(ellipse at 50% 48%,rgba(162,237,255,.14),rgba(4,9,18,.86) 45%,rgba(0,2,7,.96));animation:ladyShow 3.25s ease both;perspective:900px}
  .ladyshow::before{content:"";position:absolute;inset:-18%;background:repeating-conic-gradient(from 45deg at 50% 50%,transparent 0 10deg,rgba(174,234,255,.07) 11deg 12deg,transparent 13deg 24deg);animation:ladyLight 3s ease-out both}
  .ladyhall{position:absolute;left:50%;top:47%;width:216px;height:326px;transform:translate(-50%,-50%);border:5px double #d9f8ff;border-radius:48% 48% 10px 10px;background:linear-gradient(125deg,rgba(255,255,255,.45),rgba(74,139,176,.11) 36%,rgba(236,252,255,.5) 51%,rgba(14,35,60,.28) 54%,rgba(166,231,249,.25));box-shadow:0 0 22px #bfefff,0 0 90px rgba(78,180,225,.6),inset 0 0 48px rgba(214,249,255,.32);animation:ladyHall 3.1s cubic-bezier(.17,.8,.18,1) both}
  .ladyhall::before,.ladyhall::after{content:"";position:absolute;inset:12px;border:1px solid rgba(223,249,255,.78);border-radius:46% 46% 6px 6px;transform:translate(-15px,5px);opacity:.5}.ladyhall::after{transform:translate(15px,5px)}
  .ladyghost{position:absolute;left:50%;top:46%;width:126px;height:182px;border:1px solid rgba(203,245,255,.7);border-radius:8px;background:linear-gradient(150deg,rgba(209,246,255,.18),rgba(19,47,76,.34));box-shadow:0 0 30px rgba(146,230,255,.45);opacity:0;animation:ladyGhost 2.5s ease var(--ld) both;transform-origin:50% 130%}
  .ladycrack{position:absolute;left:50%;top:48%;width:2px;height:48vh;background:linear-gradient(transparent,#eefcff 20% 76%,transparent);box-shadow:0 0 8px #c9f5ff;transform-origin:50% 0;transform:rotate(var(--a));animation:ladyCrack 1.6s ease-out .75s both}
  .ladytitle{position:absolute;left:50%;top:74%;transform:translateX(-50%);width:100%;text-align:center;font:34px var(--serif);letter-spacing:.08em;text-shadow:0 2px 4px #000,0 0 24px #7dddf5;animation:ladyTitle 2.8s ease both}.ladysub{display:block;margin-top:7px;color:#8fb5c9;font:8px var(--mono);letter-spacing:.45em;text-transform:uppercase}
  .lady-arrival{position:fixed;z-index:84;pointer-events:none;width:0;height:0;color:#dffaff}
  .lady-portal{position:absolute;left:-96px;top:-122px;width:192px;height:244px;border:4px double currentColor;border-radius:48% 48% 8px 8px;background:linear-gradient(135deg,rgba(238,253,255,.5),rgba(53,111,151,.18) 44%,rgba(233,252,255,.55) 49%,rgba(7,25,46,.35) 53%);box-shadow:0 0 20px currentColor,0 0 70px rgba(94,203,235,.7);animation:ladyPortal 2.5s ease both}
  .lady-arrival i{position:absolute;left:0;top:0;width:2px;height:132px;background:linear-gradient(#fff,transparent);box-shadow:0 0 7px currentColor;transform-origin:0 0;transform:rotate(var(--a));animation:ladyShard 1.7s ease var(--d) both}
  @keyframes ladyShow{0%,100%{opacity:0}10%,78%{opacity:1}}
  @keyframes ladyLight{0%{opacity:0;transform:scale(.5) rotate(-18deg)}45%{opacity:1}100%{opacity:0;transform:scale(1.4) rotate(8deg)}}
  @keyframes ladyHall{0%{opacity:0;transform:translate(-50%,-50%) rotateY(88deg) scale(.4)}38%{opacity:1;transform:translate(-50%,-50%) rotateY(-8deg) scale(1.12)}72%{transform:translate(-50%,-50%) rotateY(3deg) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
  @keyframes ladyGhost{0%{opacity:0;transform:translate(-50%,-20%) rotate(var(--gr)) scale(.5)}42%,75%{opacity:.48;transform:translate(calc(-50% + var(--gx)),calc(-50% + var(--gy))) rotate(var(--gr)) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--gx)),calc(-50% + var(--gy) - 30px)) rotate(var(--gr)) scale(.9)}}
  @keyframes ladyCrack{0%{opacity:0;transform:rotate(var(--a)) scaleY(0)}35%,70%{opacity:1;transform:rotate(var(--a)) scaleY(1)}100%{opacity:0;transform:rotate(var(--a)) scaleY(1.35)}}
  @keyframes ladyTitle{0%,24%{opacity:0;transform:translate(-50%,16px);letter-spacing:.25em}45%,78%{opacity:1;transform:translate(-50%,0);letter-spacing:.08em}100%{opacity:0;transform:translate(-50%,-10px)}}
  @keyframes ladyPortal{0%{opacity:0;transform:rotateY(88deg) scale(.35);filter:blur(8px)}32%,72%{opacity:1;transform:rotateY(0) scale(1);filter:none}100%{opacity:0;transform:rotateY(-20deg) scale(1.35);filter:blur(4px)}}
  @keyframes ladyShard{0%{opacity:0;transform:rotate(var(--a)) scaleY(0)}35%,70%{opacity:.9;transform:rotate(var(--a)) scaleY(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-35px) scaleY(.4)}}
  @keyframes summonCoin{0%{opacity:0;transform:translateY(-42px) rotate(14deg) scale(.75)}72%{opacity:1;transform:translateY(4px) rotate(-2deg) scale(1.03)}100%{transform:none}}
  @keyframes summonBlood{0%{opacity:0;transform:translateY(34px) scale(.65);filter:saturate(2) brightness(.5)}65%{opacity:1;transform:translateY(-3px) scale(1.04);filter:saturate(1.4)}100%{transform:none;filter:none}}
  @keyframes summonIron{0%{opacity:0;transform:translateY(-30px) scale(1.12);filter:brightness(1.8)}62%{opacity:1;transform:translateY(5px) scale(.98)}78%{transform:translateY(-2px)}100%{transform:none;filter:none}}
  @keyframes summonGrow{0%{opacity:0;transform:scale(.18,.02);filter:brightness(1.8) saturate(1.6)}62%{opacity:1;transform:scale(.9,1.08)}82%{transform:scale(1.03,.97)}100%{transform:none;filter:none}}
  @keyframes summonShield{0%{opacity:0;transform:scaleX(.08) scaleY(1.15);filter:brightness(2)}68%{opacity:1;transform:scaleX(1.06) scaleY(.98)}100%{transform:none;filter:none}}
  @keyframes summonFrost{0%{opacity:0;transform:scale(.25) rotate(5deg);filter:blur(7px) brightness(3)}65%{opacity:1;transform:scale(1.08);filter:blur(0) brightness(1.5)}100%{transform:none;filter:none}}
  @keyframes summonForgottenRoots{0%{opacity:0;transform:translateY(24px) scale(.55,.12);filter:brightness(.35) saturate(.5) blur(8px)}35%{opacity:.85;transform:translateY(-5px) scale(.92,1.08);filter:brightness(.6) saturate(1.8) blur(1px)}72%{opacity:1;transform:scale(1.04,.98);filter:brightness(.85) saturate(1.35)}100%{transform:none;filter:none}}
  @keyframes summonKyriax{0%{opacity:0;transform:translateY(50px) scale(.28,.08);filter:brightness(3) saturate(2) blur(12px)}28%{opacity:1;transform:translateY(-12px) scale(.82,1.16);filter:brightness(2) saturate(2)}62%{transform:scale(1.08,.96);filter:brightness(1.45) saturate(1.6)}82%{transform:scale(.98,1.03)}100%{transform:none;filter:none}}

  /* Every Legendary carries a stable visual fingerprint derived from its name.
     Faction supplies the visual language; the fingerprint supplies the seal,
     movement, timing and orbit that no other Legendary shares. */
  .legend-signature-burst{position:fixed;inset:0;z-index:1260;pointer-events:none;display:grid;place-items:center;
    overflow:hidden;animation:legendSigVeil 2.75s ease both;mix-blend-mode:screen}
  .legend-signature-burst::before{content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse 48% 42% at 50% 50%,color-mix(in srgb,var(--ls-c) 18%,transparent),transparent 72%)}
  .ls-horizon{position:absolute;left:-15%;top:var(--ls-horizon);width:130%;height:2px;background:linear-gradient(90deg,transparent,var(--ls-c2),#fff,var(--ls-c),transparent);box-shadow:0 0 12px var(--ls-c),0 0 38px var(--ls-c2);transform:rotate(var(--ls-cut));animation:legendHorizon 2.25s .16s cubic-bezier(.1,.72,.16,1) both}
  .ls-mark{position:absolute;left:var(--mx);top:var(--my);width:var(--ml);height:2px;transform-origin:0 50%;transform:rotate(var(--ma));background:linear-gradient(90deg,transparent,var(--ls-c2),var(--ls-c),transparent);box-shadow:0 0 7px var(--ls-c);opacity:0;animation:legendMark var(--mt) var(--md) ease-out both}
  .legend-motif-0 .ls-mark{height:1px}.legend-motif-1 .ls-mark{clip-path:polygon(0 0,100% 45%,0 100%)}
  .legend-motif-2 .ls-mark{border-radius:50%;filter:blur(1px)}.legend-motif-3 .ls-mark{height:4px;clip-path:polygon(0 40%,85% 0,100% 50%,85% 100%,0 60%)}
  .legend-motif-4 .ls-mark{background:linear-gradient(90deg,transparent,var(--ls-c),#fff,transparent)}.legend-motif-5 .ls-mark{height:1px;border-top:1px dashed var(--ls-c2)}
  .legend-motif-6 .ls-mark{height:3px;border-radius:70% 10%}.legend-motif-7 .ls-mark{height:5px;clip-path:polygon(0 50%,45% 0,100% 50%,45% 100%)}
  .ls-seal{position:relative;width:220px;height:220px;display:grid;place-items:center;
    transform:translate(var(--ls-x),var(--ls-y)) rotate(var(--ls-rot));
    animation:legendSealLand var(--ls-time) cubic-bezier(.16,.88,.2,1) both}
  .ls-ring{position:absolute;inset:0;border:1px solid var(--ls-c);opacity:.72;
    border-radius:var(--ls-round);clip-path:var(--ls-clip);box-shadow:0 0 18px var(--ls-c),inset 0 0 15px color-mix(in srgb,var(--ls-c2) 45%,transparent);
    animation:legendRingTurn var(--ring-time) linear both;animation-direction:var(--ls-dir)}
  .ls-spoke{position:absolute;left:50%;top:50%;width:1px;height:155px;transform-origin:50% 0;
    transform:rotate(var(--a));background:linear-gradient(var(--ls-c2),transparent 68%);opacity:.58;
    animation:legendSpoke 1.35s calc(var(--i) * 24ms) ease-out both}
  .ls-core{position:relative;color:var(--ls-c);font:74px/1 var(--serif);letter-spacing:-.18em;padding-right:.18em;
    text-shadow:0 0 10px #fff,0 0 28px var(--ls-c),0 0 70px var(--ls-c2);
    animation:legendCoreBase var(--ls-time) cubic-bezier(.16,.9,.22,1) both}
  .ls-code{position:absolute;top:calc(50% + 80px);left:50%;transform:translateX(-50%);white-space:nowrap;
    color:var(--ls-c2);font:7px var(--mono);letter-spacing:.54em;text-shadow:0 0 10px var(--ls-c2);opacity:.8}
  .ls-true-name{position:absolute;left:8%;right:8%;bottom:8%;text-align:center;color:color-mix(in srgb,var(--ls-c) 42%,white);
    font:22px var(--serif);letter-spacing:.18em;text-transform:uppercase;text-shadow:0 0 15px var(--ls-c),0 0 36px var(--ls-c2);animation:legendTrueName 2.7s .12s both}
  .ls-house{position:absolute;left:8%;right:8%;bottom:5%;text-align:center;color:var(--ls-c2);font:7px var(--mono);letter-spacing:.4em;text-transform:uppercase;opacity:.72;animation:legendHouse 2.6s .25s both}
  .legend-motion-0 .ls-core{animation-name:legendCoreBase}.legend-motion-1 .ls-core{animation-name:legendCoreDrop}
  .legend-motion-2 .ls-core{animation-name:legendCoreRise}.legend-motion-3 .ls-core{animation-name:legendCoreTwist}
  .legend-motion-4 .ls-core{animation-name:legendCoreSplit}.legend-motion-5 .ls-core{animation-name:legendCoreSkew}
  .legend-motion-6 .ls-core{animation-name:legendCoreBlink}.legend-motion-7 .ls-core{animation-name:legendCoreWide}
  .legend-motion-8 .ls-core{animation-name:legendCoreDrop;animation-direction:reverse}.legend-motion-9 .ls-core{animation-name:legendCoreTwist;animation-direction:reverse}
  .legend-motion-10 .ls-core{animation-name:legendCoreSkew;animation-direction:reverse}.legend-motion-11 .ls-core{animation-name:legendCoreWide;animation-direction:reverse}
  @keyframes legendSigVeil{0%,100%{opacity:0}7%,79%{opacity:1}}
  @keyframes legendHorizon{0%{opacity:0;transform:rotate(var(--ls-cut)) scaleX(.02)}32%,72%{opacity:.9;transform:rotate(var(--ls-cut)) scaleX(1)}100%{opacity:0;transform:rotate(var(--ls-cut)) scaleX(1.2)}}
  @keyframes legendMark{0%{opacity:0;transform:rotate(var(--ma)) scaleX(.04) translateX(-35px)}28%,70%{opacity:.75;transform:rotate(var(--ma)) scaleX(1)}100%{opacity:0;transform:rotate(var(--ma)) scaleX(.45) translateX(50px)}}
  @keyframes legendTrueName{0%,24%,100%{opacity:0;transform:translateY(15px);letter-spacing:.4em}38%,80%{opacity:1;transform:none;letter-spacing:.18em}}
  @keyframes legendHouse{0%,31%,100%{opacity:0}43%,78%{opacity:.72}}
  @keyframes legendSealLand{0%{opacity:0;transform:translate(calc(var(--ls-x) * 2.8),calc(var(--ls-y) * 2.8)) rotate(calc(var(--ls-rot) - 50deg)) scale(.12);filter:blur(11px)}28%,72%{opacity:.92;filter:none}100%{opacity:0;transform:translate(0,0) rotate(calc(var(--ls-rot) + 22deg)) scale(1.65);filter:blur(4px)}}
  @keyframes legendRingTurn{0%{opacity:0;transform:scale(.16) rotate(0)}24%,72%{opacity:.72}100%{opacity:0;transform:scale(1.8) rotate(170deg)}}
  @keyframes legendSpoke{0%{opacity:0;transform:rotate(var(--a)) scaleY(0)}24%,70%{opacity:.58;transform:rotate(var(--a)) scaleY(1)}100%{opacity:0;transform:rotate(var(--a)) scaleY(1.5)}}
  @keyframes legendCoreBase{0%{opacity:0;transform:scale(2.2)}28%,72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.84)}}
  @keyframes legendCoreDrop{0%{opacity:0;transform:translateY(-120px) scale(.4)}32%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(22px) scale(1.2)}}
  @keyframes legendCoreRise{0%{opacity:0;transform:translateY(120px) scaleX(.2)}32%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-24px)}}
  @keyframes legendCoreTwist{0%{opacity:0;transform:rotate(-150deg) scale(.1)}35%,72%{opacity:1;transform:rotate(0) scale(1)}100%{opacity:0;transform:rotate(35deg) scale(1.25)}}
  @keyframes legendCoreSplit{0%{opacity:0;transform:scaleX(3.5) scaleY(.05)}34%,72%{opacity:1;transform:none}100%{opacity:0;transform:scaleX(.05) scaleY(2)}}
  @keyframes legendCoreSkew{0%{opacity:0;transform:translateX(-150px) skewX(-42deg)}34%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateX(65px) skewX(18deg)}}
  @keyframes legendCoreBlink{0%,17%,24%{opacity:0;transform:scale(3)}20%,28%,72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.4)}}
  @keyframes legendCoreWide{0%{opacity:0;transform:scaleX(.05) rotateY(80deg)}34%,72%{opacity:1;transform:none}100%{opacity:0;transform:scaleX(1.8)}}

  /* The persistent card aura uses the same fingerprint, so its Legendary can be
     recognised even after the entrance has gone. */
  .legend-signed{isolation:isolate;overflow:visible!important}
  .legend-aura-mark{position:absolute;inset:-5px;z-index:4;pointer-events:none;border:1px solid var(--ls-c);
    border-radius:8px;opacity:.38;mix-blend-mode:screen;overflow:hidden;
    box-shadow:0 0 11px color-mix(in srgb,var(--ls-c) 68%,transparent),inset 0 0 15px color-mix(in srgb,var(--ls-c2) 28%,transparent);
    animation:legendAuraBreath var(--ls-aura-time) ease-in-out infinite var(--ls-dir)}
  .legend-aura-mark::before,.legend-aura-mark::after{display:none}
  .legend-aura-mark i{position:absolute;left:var(--px);top:-12px;width:4px;height:7px;border-radius:70% 55% 72% 18%;background:var(--ls-c2);
    box-shadow:0 0 7px var(--ls-c2);animation:legendAuraFall var(--pt) linear infinite;animation-delay:var(--d)}
  .legend-aura-mark[data-aura="embers"] i{top:auto;bottom:-8px;border-radius:50%;animation-name:legendAuraRise}
  .legend-aura-mark[data-aura="snow"] i,.legend-aura-mark[data-aura="motes"] i{width:4px;height:4px;border-radius:50%}
  .legend-aura-mark[data-aura="roots"] i,.legend-aura-mark[data-aura="vines"] i{width:6px;height:10px;background:linear-gradient(145deg,var(--ls-c2),var(--ls-c))}
  .legend-aura-mark[data-aura="shards"] i{width:5px;height:9px;border-radius:0;clip-path:polygon(10% 0,100% 24%,72% 100%,0 70%)}
  .legend-aura-mark[data-aura="longgrass"]{inset:-8px;border-color:#527c58;background:linear-gradient(0deg,rgba(4,16,8,.78),transparent 48%);overflow:hidden}
  .legend-aura-mark[data-aura="longgrass"] i{top:auto;bottom:-4px;width:3px;height:42px;border-radius:90% 10% 0 0;transform-origin:50% 100%;background:linear-gradient(90deg,#18361f,#7ea26d,#253f28);animation:longGrassSway 2.8s ease-in-out infinite alternate;animation-delay:var(--d)}
  @keyframes longGrassSway{0%{transform:rotate(-8deg) translateX(-2px)}100%{transform:rotate(13deg) translateX(5px)}}
  .longshadow-show{position:fixed;z-index:1250;inset:0;overflow:hidden;pointer-events:none;background:linear-gradient(0deg,rgba(1,8,3,.97),rgba(5,15,8,.74) 42%,rgba(0,0,0,.9));animation:longShadowFade 3.1s both}
  .longshadow-show .blade{position:absolute;bottom:-6vh;left:var(--x);width:8px;height:var(--h);border-radius:100% 0 0 0;background:linear-gradient(90deg,#102919,#78916a 55%,#263a28);transform-origin:50% 100%;animation:longShadowBlade 1.6s ease-in-out infinite alternate;animation-delay:var(--d);filter:drop-shadow(0 0 4px #203f27)}
  .longshadow-show .eyes{position:absolute;left:50%;top:43%;width:190px;height:28px;transform:translate(-50%,-50%);background:radial-gradient(ellipse at 32% 50%,#b8ffbe 0 4px,transparent 8px),radial-gradient(ellipse at 68% 50%,#b8ffbe 0 4px,transparent 8px);filter:drop-shadow(0 0 13px #55c876);animation:longEyes 2.5s both}
  .longshadow-show .cut{position:absolute;left:-10%;top:49%;width:120%;height:3px;background:#e8fff0;box-shadow:0 0 10px #99ffb2,0 0 40px #4dd16e;transform:rotate(-7deg) scaleX(0);animation:longCut .42s 1.35s ease-out forwards}
  .longshadow-show .name{position:absolute;left:0;right:0;bottom:13%;text-align:center;color:#d9f5dd;font:32px var(--serif);letter-spacing:.1em;text-shadow:0 0 22px #4d9c5e;animation:longName 2.4s .65s both}
  @keyframes longShadowBlade{from{transform:rotate(-10deg)}to{transform:rotate(14deg)}}@keyframes longEyes{0%,25%{opacity:0}45%,84%{opacity:1}100%{opacity:0}}@keyframes longCut{to{transform:rotate(-7deg) scaleX(1)}}@keyframes longName{0%,18%{opacity:0;transform:translateY(16px)}38%,82%{opacity:1;transform:none}100%{opacity:0}}@keyframes longShadowFade{0%{opacity:0}15%,78%{opacity:1}100%{opacity:0}}
  .legend-aura-mark[data-aura="maw"]{inset:-9px;background:rgba(0,0,4,.82);border-color:#182b5e;box-shadow:0 0 18px #071b4e,inset 0 0 22px #000;opacity:.9}
  .legend-aura-mark[data-aura="maw"] i{top:var(--py);left:var(--px);width:9px;height:5px;border-radius:50%;background:#dff6ff;box-shadow:0 0 7px #6ea8ff,0 0 14px #fff;animation:mawEye 3.8s ease-in-out infinite;animation-delay:var(--d)}
  @keyframes mawEye{0%,38%,100%{opacity:.18;transform:scaleY(.16)}48%,72%{opacity:1;transform:scaleY(1)}80%{opacity:.35;transform:scaleY(.5)}}
  .legend-aura-mark[data-aura="aethercrown"]{inset:-8px;background:radial-gradient(circle at 50% 100%,#4affbd22,transparent 56%),linear-gradient(145deg,#37c9ff12,#183f7922);border-color:#79f4dc;box-shadow:0 0 20px #3ad8d888,inset 0 0 22px #2879ba55}
  .legend-aura-mark[data-aura="aethercrown"] i{width:5px;height:5px;border-radius:50%;background:#9affdf;box-shadow:0 0 8px #62e8ff,0 0 15px #42e39a;animation-name:legendAuraRise}
  .legend-aura-mark[data-aura="snowfire"]{inset:-8px;background:linear-gradient(0deg,#9df7ff24,transparent 62%);border-color:#c9fbff;box-shadow:0 0 19px #7defff88,inset 0 -14px 24px #dfffff33}
  .legend-aura-mark[data-aura="snowfire"] i{top:auto;bottom:-8px;width:5px;height:11px;border-radius:60% 60% 25% 25%;background:linear-gradient(#fff,#aaf6ff 45%,#438cff00);box-shadow:0 0 9px #c9fbff;animation-name:legendAuraRise}
  .vaelmyra-show,.snowfire-show{position:fixed;inset:0;z-index:1250;pointer-events:none;overflow:hidden;animation:legendCustomFade 3.2s both}
  .vaelmyra-show{background:radial-gradient(circle at 50% 48%,#4affba38,transparent 24%),radial-gradient(ellipse at 50% 72%,#238f7d55,transparent 46%),linear-gradient(#02101dcc,#03110dd9)}
  .vaelmyra-show .crown{position:absolute;left:50%;top:48%;width:270px;height:330px;transform:translate(-50%,-50%);border:3px solid #8dffe0;border-radius:50%;clip-path:polygon(50% 0,61% 27%,88% 10%,74% 43%,100% 56%,68% 64%,60% 100%,40% 100%,31% 64%,0 56%,26% 43%,12% 10%,39% 27%);background:radial-gradient(circle at 50% 40%,#dfffff,#5ddcff55 16%,#37c98a22 42%,transparent 64%);filter:drop-shadow(0 0 18px #54eddb) drop-shadow(0 0 45px #237dca);animation:vaelCrown 2.4s ease-out both}
  .vaelmyra-show .ring{position:absolute;left:50%;top:49%;width:var(--s);height:var(--s);transform:translate(-50%,-50%) rotate(var(--r));border:1px solid #80ffe0;border-radius:50%;box-shadow:0 0 18px #4adbd7;animation:vaelRing 2.2s ease-out both}
  .vaelmyra-show i,.snowfire-show i{position:absolute;left:var(--x);top:105%;width:4px;height:4px;border-radius:50%;background:#baffec;box-shadow:0 0 10px #55e9ff;animation:magicRise var(--t) linear infinite;animation-delay:var(--d)}
.vaelmyra-show .name,.snowfire-show .name{position:absolute;left:0;right:0;bottom:11%;text-align:center;color:#dffff7;font:32px var(--serif);letter-spacing:.09em;text-shadow:0 0 25px #4de8d4;animation:longName 2.6s .25s both}
.nakshatra-show{position:fixed;inset:0;z-index:1250;pointer-events:none;overflow:hidden;
  background:radial-gradient(circle at 50% 44%,rgba(222,249,255,.35),transparent 9%),radial-gradient(ellipse at 50% 48%,rgba(52,150,255,.35),transparent 42%),linear-gradient(#02051ae8,#07163de8);
  animation:legendCustomFade 3.4s both}
.nakshatra-show .star{position:absolute;left:50%;top:44%;width:190px;height:190px;transform:translate(-50%,-50%) rotate(45deg);
  background:radial-gradient(circle,#fff 0 5%,#9de7ff 12%,rgba(61,167,255,.38) 31%,transparent 63%);
  clip-path:polygon(50% 0,60% 39%,100% 50%,60% 61%,50% 100%,40% 61%,0 50%,40% 39%);
  filter:drop-shadow(0 0 18px #fff) drop-shadow(0 0 45px #4aaeff);animation:nakStar 2.5s ease-out both}
.nakshatra-show .orbit{position:absolute;left:50%;top:44%;width:var(--s);height:var(--s);transform:translate(-50%,-50%) rotate(var(--r));border:1px solid rgba(146,220,255,.75);border-radius:50%;
  box-shadow:0 0 16px rgba(76,177,255,.8),inset 0 0 12px rgba(147,225,255,.2);animation:vaelRing 2.5s ease-out both}
.nakshatra-show i{position:absolute;left:var(--x);top:var(--y);width:var(--z);height:var(--z);border-radius:50%;background:#efffff;box-shadow:0 0 8px #fff,0 0 18px #51baff;animation:seasonhubPulse var(--t) ease-in-out infinite;animation-delay:var(--d)}
.nakshatra-show .name{position:absolute;left:0;right:0;bottom:11%;text-align:center;color:#e9fbff;font:34px var(--serif);letter-spacing:.1em;text-shadow:0 0 15px #fff,0 0 35px #4db8ff;animation:longName 2.8s .2s both}
@keyframes nakStar{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.08)}35%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1.2)}100%{opacity:.9;transform:translate(-50%,-50%) rotate(90deg) scale(.92)}}
  .snowfire-show{background:radial-gradient(circle at 50% 56%,#dfffff38,transparent 20%),linear-gradient(#06111bd9,#071b2ddd)}
  .snowfire-show .blade{position:absolute;left:50%;top:49%;width:54px;height:390px;transform:translate(-50%,-50%) rotate(22deg);clip-path:polygon(44% 0,57% 0,70% 78%,58% 100%,42% 100%,30% 78%);background:linear-gradient(90deg,#4c91ad,#efffff 45%,#8df4ff 62%,#286f9b);filter:drop-shadow(0 0 15px #bffcff) drop-shadow(0 0 42px #5fdfff);animation:snowBlade 2.5s ease-out both}
  .snowfire-show .flame{position:absolute;left:50%;top:55%;width:350px;height:430px;transform:translate(-50%,-50%);background:conic-gradient(from 20deg at 50% 100%,transparent,#dfffff 4deg,transparent 13deg,#76eaff 21deg,transparent 34deg,#fff 43deg,transparent 56deg);filter:blur(7px) drop-shadow(0 0 15px #7aeaff);mix-blend-mode:screen;animation:snowFlame .5s ease-in-out infinite alternate}
  @keyframes legendCustomFade{0%{opacity:0}12%,82%{opacity:1}100%{opacity:0}}@keyframes vaelCrown{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-25deg);filter:blur(20px)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(1)}}@keyframes vaelRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(0)}55%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(180deg)}}@keyframes magicRise{to{transform:translate(var(--drift),-115vh) scale(.2);opacity:0}}@keyframes snowBlade{0%{opacity:0;transform:translate(-50%,-80%) rotate(22deg) scale(2);filter:blur(14px)}45%{opacity:1;transform:translate(-50%,-50%) rotate(22deg) scale(1)}100%{opacity:.9}}@keyframes snowFlame{from{transform:translate(-50%,-50%) scale(.92) skewX(-3deg)}to{transform:translate(-50%,-50%) scale(1.08) skewX(4deg)}}
  @keyframes legendAuraBreath{0%,100%{opacity:.24;filter:brightness(.8)}50%{opacity:.58;filter:brightness(1.45)}}
  @keyframes legendAuraFall{0%{opacity:0;transform:translate(0,-6px) rotate(0)}16%{opacity:.9}100%{opacity:0;transform:translate(var(--drift),118px) rotate(210deg)}}
  @keyframes legendAuraRise{0%{opacity:0;transform:translate(0,5px) scale(.5)}18%{opacity:.95}100%{opacity:0;transform:translate(var(--drift),-118px) scale(.15)}}

  /* Vakoiros legends. Emrys arrives through fire and one deafening practical
     answer; the Trial is the frost plateau, blue ghostfire and carved bone. */
  .emrys-show,.theiger-show{position:fixed;inset:0;z-index:91;pointer-events:none;overflow:hidden}
  .emrys-show{background:radial-gradient(circle at 50% 58%,rgba(129,51,17,.28),transparent 27%),rgba(2,3,4,.72);animation:vakSceneFade 2.45s ease both}
  .emrys-fire{position:absolute;left:50%;top:56%;width:330px;height:390px;transform:translate(-50%,-50%);filter:blur(2px) contrast(1.35);
    background:radial-gradient(ellipse at 50% 100%,#fff3 0 8%,#ffbd4a99 13%,#d74716aa 26%,transparent 62%);animation:emrysFire 1.8s ease-out both}
  .emrys-fire::before,.emrys-fire::after{content:"";position:absolute;inset:18% 7% 0;background:conic-gradient(from 18deg at 50% 100%,transparent,#ffcb5d 5deg,transparent 15deg,#92210d 22deg,transparent 35deg,#ff7b21 44deg,transparent 62deg);filter:blur(8px);animation:emrysFlame .42s ease-in-out infinite alternate}
  .emrys-fire::after{inset:30% 19% 0;animation-delay:-.2s;transform:scaleX(-1)}
  .emrys-figure{position:absolute;left:50%;top:55%;width:122px;height:286px;transform:translate(-50%,-50%);background:linear-gradient(90deg,#080706,#2b2018 48%,#090706);clip-path:polygon(37% 0,63% 0,70% 13%,83% 22%,77% 47%,68% 100%,31% 100%,23% 47%,18% 23%,31% 13%);filter:drop-shadow(0 0 18px #ff6a22);animation:emrysStand 1.25s cubic-bezier(.17,.84,.24,1) both}
  .emrys-gun{position:absolute;left:calc(50% - 8px);top:48%;width:370px;height:26px;transform-origin:0 50%;transform:rotate(-7deg);background:linear-gradient(#e7e0d0 0 18%,#3c2b20 22% 58%,#080706 62%);clip-path:polygon(0 16%,83% 16%,91% 0,100% 31%,96% 65%,82% 62%,77% 100%,62% 67%,0 78%);filter:drop-shadow(0 0 8px #ff9b45);animation:emrysGun 1.25s .25s cubic-bezier(.15,.86,.25,1) both}
  .emrys-muzzle{position:absolute;left:calc(50% + 332px);top:calc(48% - 48px);width:116px;height:116px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0 5%,#ffe47d 8% 19%,#ff6b19 27%,transparent 66%);filter:blur(1px) drop-shadow(0 0 30px #ff7c20);animation:emrysShot .72s 1.04s ease-out both}
  .emrys-tracer{position:absolute;left:calc(50% + 350px);top:47%;right:-12%;height:5px;opacity:0;background:linear-gradient(90deg,#fff,#ffc56b 20%,transparent);box-shadow:0 0 17px 5px #ff5b18;transform:rotate(-7deg);transform-origin:left;animation:emrysTracer .36s 1.08s ease-out both}
  .emrys-name,.theiger-name{position:absolute;left:8%;right:8%;bottom:8%;text-align:center;text-transform:uppercase;letter-spacing:.42em;font:10px var(--mono);color:#f5eee1;text-shadow:0 0 16px currentColor;animation:vakName 2.3s ease both}
  @keyframes emrysStand{0%{opacity:0;transform:translate(-50%,-42%) scale(.8);filter:blur(12px)}55%,100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 0 18px #ff6a22)}}
  @keyframes emrysGun{0%{opacity:0;transform:rotate(-25deg) translateX(-90px)}60%,100%{opacity:1;transform:rotate(-7deg)}}
  @keyframes emrysFire{0%{opacity:0;transform:translate(-50%,-38%) scale(.4)}35%,75%{opacity:1}100%{opacity:0;transform:translate(-50%,-58%) scale(1.28)}}
  @keyframes emrysFlame{to{transform:scale(.92,1.12) skewX(4deg)}}
  @keyframes emrysShot{0%,18%{opacity:0;transform:scale(.15)}20%{opacity:1;transform:scale(1.5)}45%{opacity:.85}100%{opacity:0;transform:scale(3.6)}}
  @keyframes emrysTracer{0%,12%{opacity:0;transform:rotate(-7deg) scaleX(.05)}18%{opacity:1}100%{opacity:0;transform:rotate(-7deg) scaleX(1.25)}}

  .theiger-show{background:linear-gradient(#77838c33,#080b0eee 77%),radial-gradient(circle at 50% 68%,#76cfff33,transparent 28%);animation:vakSceneFade 3.25s ease both}
  .theiger-wind{position:absolute;inset:-20%;opacity:.55;background:repeating-linear-gradient(172deg,transparent 0 32px,#dff5ff33 34px,#fff8 35px,transparent 38px 72px);filter:blur(2px);animation:theigerWind .72s linear infinite}
  .theiger-stone{position:absolute;bottom:18%;left:var(--x);width:38px;height:210px;background:linear-gradient(90deg,#232a2d,#879198 47%,#1b2022);clip-path:polygon(20% 0,77% 5%,100% 100%,0 100%);transform:rotate(var(--r));box-shadow:0 0 18px #b8e7ff22;animation:stoneRise 1.1s var(--d) ease-out both}
  .theiger-stone::after{content:"ᛉ\Aᛟ\Aᛏ";white-space:pre;position:absolute;inset:24px 0;text-align:center;color:#a9e8ff;font:17px/2 var(--serif);text-shadow:0 0 10px #6dd8ff}
  .theiger-fire{position:absolute;left:50%;bottom:14%;width:210px;height:160px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,#fff 0 5%,#7be2ff 11%,#2779c7 25%,transparent 64%);filter:blur(2px) drop-shadow(0 0 28px #46bfff);animation:blueFire .38s ease-in-out infinite alternate}
  .theiger-shaman{position:absolute;left:50%;bottom:18%;width:74px;height:250px;transform:translateX(-50%);background:#080a0b;clip-path:polygon(42% 0,58% 0,63% 19%,80% 30%,72% 100%,27% 100%,19% 30%,37% 19%);filter:drop-shadow(0 0 8px #73cfff)}
  .theiger-shaman::before{content:"";position:absolute;left:7px;top:-35px;width:60px;height:84px;border:5px solid #d6c5a5;border-bottom:0;border-radius:58% 58% 0 0;clip-path:polygon(0 0,35% 28%,50% 100%,65% 28%,100% 0,72% 50%,50% 100%,28% 50%);filter:drop-shadow(0 0 7px #dff5ff)}
  .theiger-knot{position:absolute;left:50%;top:20%;width:145px;height:145px;transform:translateX(-50%) rotate(45deg);border:3px solid #bfeeff;border-radius:47% 53% 43% 57%;box-shadow:0 0 30px #68cfff,inset 0 0 30px #68cfff;animation:theigerKnot 1.9s ease-in-out infinite alternate}
  .theiger-knot::before,.theiger-knot::after{content:"";position:absolute;inset:19%;border:3px solid #d6bd6a;border-radius:55% 45%;transform:rotate(67deg);box-shadow:0 0 22px #fff}
  .theiger-knot::after{border-color:#8e68d8;transform:rotate(127deg)}
  .theiger-show>i{position:absolute;top:-18px;left:var(--x);width:4px;height:12px;border-radius:60%;background:#f4fbff;box-shadow:0 0 7px #bceaff;animation:theigerSnow var(--t) linear infinite;animation-delay:var(--d)}
  @keyframes vakSceneFade{0%,100%{opacity:0}8%,78%{opacity:1}}
  @keyframes vakName{0%,28%,100%{opacity:0;letter-spacing:.8em}42%,79%{opacity:1;letter-spacing:.42em}}
  @keyframes theigerWind{to{transform:translateX(-100px)}}
  @keyframes stoneRise{from{opacity:0;transform:translateY(180px) rotate(var(--r))}to{opacity:1;transform:translateY(0) rotate(var(--r))}}
  @keyframes blueFire{to{transform:translateX(-50%) scale(.92,1.12);filter:blur(4px) drop-shadow(0 0 38px #46bfff)}}
  @keyframes theigerKnot{from{opacity:.45;filter:blur(4px);transform:translateX(-50%) rotate(20deg) scale(.65)}to{opacity:1;filter:none;transform:translateX(-50%) rotate(70deg) scale(1.04)}}
  @keyframes theigerSnow{to{transform:translate(120px,110vh) rotate(280deg);opacity:0}}

  /* Dominion is first perceived as an absence: black, two green eyes, then
     concentric red force rings tear the board back into view. */
  .kyriax-cataclysm{position:fixed;inset:0;z-index:94;pointer-events:none;overflow:hidden;color:#ff2c18;animation:kyriaxScene 4.45s ease both}
  .kyriax-dark{position:absolute;z-index:0;inset:-2px;background:#000;animation:kyriaxDark 4.35s cubic-bezier(.18,.74,.18,1) both}
  .kyriax-eyes{position:absolute;z-index:4;left:50%;top:43%;width:250px;height:62px;transform:translate(-50%,-50%);filter:drop-shadow(0 0 12px #42ff8a) drop-shadow(0 0 36px #0a8d42);animation:kyriaxEyes 2.65s ease both}
  .kyriax-eyes::before,.kyriax-eyes::after{content:"";position:absolute;top:11px;width:86px;height:30px;background:radial-gradient(ellipse at 50% 50%,#eaffd8 0 5%,#62ff9c 13%,#13b55b 32%,#052b16 62%,transparent 70%);clip-path:polygon(0 35%,46% 6%,100% 32%,72% 76%,38% 100%,8% 72%);box-shadow:0 0 30px #3cff85}
  .kyriax-eyes::before{left:0;transform:rotate(4deg)}.kyriax-eyes::after{right:0;transform:scaleX(-1) rotate(4deg)}
  .kyriax-rings{position:absolute;z-index:3;inset:0}.kyriax-rings i{position:absolute;left:50%;top:43%;width:90px;height:90px;border:4px solid #ff2f20;border-radius:50%;box-shadow:0 0 16px #ff301d,inset 0 0 16px #ff301d,0 0 65px rgba(183,8,0,.88);opacity:0;transform:translate(-50%,-50%) scale(.04);animation:kyriaxRing 1.22s var(--delay) cubic-bezier(.07,.75,.16,1) both}
  .kyriax-fire-aura{position:absolute;z-index:2;left:50%;top:47%;width:min(440px,54vw);height:min(480px,62vh);transform:translate(-50%,-50%);overflow:hidden;border-radius:48%;opacity:0;animation:kyriaxAuraReveal 2.05s 2.05s ease both}
  .kyriax-fire-aura::before,.kyriax-fire-aura::after{content:"";position:absolute;inset:0;background-image:var(--glitter),var(--glitter),linear-gradient(0deg,white 30px,#ff8951 70px,#d51e0f 40%,transparent 70%),radial-gradient(ellipse at bottom,transparent 30%,black 60%);background-size:500px 500px,650px 650px,100% 100%,100% 100%;background-blend-mode:hard-light,color-dodge,multiply;background-position:0 0,0 0,50% 100%,center center;background-repeat:repeat,repeat,no-repeat,no-repeat;mix-blend-mode:color-dodge;filter:brightness(2.3) blur(5px) contrast(8);animation:kyriaxGrainFire 3s linear infinite;box-shadow:inset 0 -40px 50px -60px #63bbc5}
  .kyriax-fire-aura::after{inset:8% 18% -8%;filter:brightness(2.8) blur(8px) contrast(10);transform:scaleX(.72);animation-duration:2.2s;opacity:.78}
  .kyriax-title{position:absolute;z-index:5;left:0;right:0;top:72%;text-align:center;color:#f3d4ce;font:43px var(--serif);letter-spacing:.12em;text-shadow:0 4px 9px #000,0 0 25px #e51e0a,0 0 60px #490000;animation:kyriaxTitle 4.25s ease both}
  .kyriax-title span{display:block;margin-top:8px;color:#e54c39;font:8px var(--mono);letter-spacing:.58em;text-transform:uppercase}
  @keyframes kyriaxScene{0%,91%{opacity:1}100%{opacity:0}}
  @keyframes kyriaxDark{0%,48%{opacity:1}72%{opacity:.18}100%{opacity:0}}
  @keyframes kyriaxEyes{0%,17%{opacity:0;transform:translate(-50%,-50%) scaleY(.02)}34%,66%{opacity:1;transform:translate(-50%,-50%) scaleY(1)}82%,100%{opacity:0;transform:translate(-50%,-50%) scaleY(.15)}}
  @keyframes kyriaxRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.04)}10%{opacity:1}72%{opacity:.92}100%{opacity:0;transform:translate(-50%,-50%) scale(17);border-width:1px}}
  @keyframes kyriaxAuraReveal{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}28%,78%{opacity:.92;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) scale(1.28)}}
  @keyframes kyriaxGrainFire{0%{background-position:center 0,center 0,50% 100%,center center}100%{background-position:center -500px,center -650px,50% 100%,center center}}
  @keyframes kyriaxTitle{0%,49%{opacity:0;transform:translateY(24px);letter-spacing:.26em}63%,82%{opacity:1;transform:none;letter-spacing:.08em}100%{opacity:0;transform:translateY(-16px)}}

  /* Luthiel — no fire, no crown. Just the field going pale and gray while
     smoke climbs off it, whether he is arriving or only just being freed. */
  .luthiel-shroud{position:fixed;inset:0;z-index:92;pointer-events:none;overflow:hidden;animation:luthielScene 3.2s ease both}
  .luthiel-dark{position:absolute;inset:-2px;background:radial-gradient(ellipse at 50% 55%,rgba(24,24,28,.55),rgba(0,0,0,.92) 75%);animation:luthielDark 3.1s cubic-bezier(.2,.7,.2,1) both}
  .luthiel-mist{position:absolute;inset:0;z-index:1}
  .luthiel-mist i{position:absolute;left:var(--x);bottom:-6%;width:60px;height:120px;border-radius:50%;
    background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.6),rgba(232,232,240,.22) 55%,transparent 78%);
    filter:blur(6px);opacity:0;animation:luthielWisp 2.6s var(--delay) ease-out both}
  .luthiel-title{position:absolute;z-index:5;left:0;right:0;top:70%;text-align:center;color:#f4f4fa;
    font:38px var(--serif);letter-spacing:.1em;text-shadow:0 4px 10px #000,0 0 30px rgba(255,255,255,.55);
    animation:luthielTitle 3.1s ease both}
  .luthiel-title span{display:block;margin-top:8px;color:#c7cad1;font:8px var(--mono);letter-spacing:.4em;text-transform:uppercase}
  @keyframes luthielScene{0%,88%{opacity:1}100%{opacity:0}}
  @keyframes luthielDark{0%{opacity:0}22%{opacity:1}78%{opacity:.7}100%{opacity:0}}
  @keyframes luthielWisp{0%{opacity:0;transform:translateY(0) scale(.7)}35%{opacity:.85}100%{opacity:0;transform:translateY(-64vh) scale(1.6)}}
  @keyframes luthielTitle{0%,18%{opacity:0;transform:translateY(20px)}38%,74%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}

  /* The Pale Sovereign is the Tree of Winter: ice roots claim the field while
     a blue crown burns at the top of its dead, branching silhouette. */
  .pale-sovereign-scene{position:fixed;inset:0;z-index:93;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,rgba(31,99,140,.2),rgba(2,8,16,.92) 72%);animation:paleScene 3.7s ease both}
  .pale-sovereign-tree{position:absolute;left:50%;top:48%;width:min(660px,84vw);height:min(670px,83vh);transform:translate(-50%,-50%);filter:drop-shadow(0 0 13px #62cfff) drop-shadow(0 0 48px rgba(49,159,218,.55))}
  .pale-sovereign-tree path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:paleGrow 1.45s var(--pd,0s) cubic-bezier(.13,.77,.16,1) forwards}
  .pale-sovereign-tree .trunk{stroke:url(#paleTrunk);stroke-width:25}.pale-sovereign-tree .branch{stroke:#9ee7ff;stroke-width:9}.pale-sovereign-tree .root{stroke:#73bedf;stroke-width:11}
  .pale-crown{position:absolute;left:50%;top:20%;width:142px;height:142px;border-radius:50%;transform:translate(-50%,-50%) scale(.05);background:radial-gradient(circle,#fff 0 4%,#bdf4ff 11%,#42caff 28%,rgba(21,104,198,.54) 48%,transparent 72%);box-shadow:0 0 26px #c8f8ff,0 0 72px 18px #3dbdff,0 0 180px 70px rgba(20,105,218,.52);animation:paleCrown 2.6s .62s ease both}
  .pale-crown::before,.pale-crown::after{content:"";position:absolute;inset:-35%;border:1px solid rgba(174,237,255,.62);border-radius:50%;animation:paleHalo 2.3s linear infinite}.pale-crown::after{inset:-70%;animation-direction:reverse;animation-duration:3.2s}
  .pale-snow i{position:absolute;left:var(--sx);top:-8%;width:3px;height:14px;border-radius:50%;background:#d9f8ff;box-shadow:0 0 8px #7edfff;opacity:.8;animation:paleSnow var(--sd) var(--sl) linear both}
  .pale-sovereign-name{position:absolute;left:0;right:0;bottom:7%;text-align:center;color:#daf7ff;font:42px var(--serif);letter-spacing:.1em;text-shadow:0 3px 12px #000,0 0 35px #47c7ff;animation:paleName 3.5s ease both}.pale-sovereign-name span{display:block;margin-top:7px;color:#78d8ff;font:8px var(--mono);letter-spacing:.48em;text-transform:uppercase}
  @keyframes paleScene{0%,100%{opacity:0}5%,88%{opacity:1}}
  @keyframes paleGrow{0%{stroke-dashoffset:1;opacity:0}12%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
  @keyframes paleCrown{0%,12%{opacity:0;transform:translate(-50%,-50%) scale(.05)}43%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
  @keyframes paleHalo{to{transform:rotate(360deg) scale(1.08)}}
  @keyframes paleSnow{0%{opacity:0;transform:translateY(0) rotate(12deg)}15%{opacity:.9}100%{opacity:0;transform:translateY(115vh) translateX(var(--drift)) rotate(310deg)}}
  @keyframes paleName{0%,42%{opacity:0;transform:translateY(18px)}58%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}
  .pale-maw-strike{position:fixed;z-index:82;width:110px;height:110px;pointer-events:none;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(235,253,255,.95) 0 4%,rgba(107,215,255,.7) 12%,rgba(26,100,184,.3) 38%,transparent 70%);box-shadow:0 0 18px #d8fbff,0 0 58px #3dbdff;animation:paleMawStrike .72s ease-out both}
  .pale-maw-strike::before,.pale-maw-strike::after{content:"";position:absolute;inset:-16px;border:2px solid #a8edff;border-radius:50%;transform:scale(.2);opacity:0;animation:paleMawRing .72s ease-out both}.pale-maw-strike::after{inset:18px;border-color:#fff;animation-delay:.08s}
  @keyframes paleMawStrike{0%{opacity:0;transform:translate(-50%,-50%) scale(.15);filter:brightness(3) blur(8px)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.1);filter:brightness(1.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8);filter:blur(2px)}}
  @keyframes paleMawRing{20%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(2.5) rotate(120deg)}}
  @keyframes summonStampede{0%{opacity:0;transform:translateX(-55px) skewX(-9deg);filter:blur(5px)}68%{opacity:1;transform:translateX(7px) skewX(2deg)}100%{transform:none;filter:none}}
  @keyframes summonMoon{0%{opacity:0;transform:translateY(22px) rotate(-8deg) scale(.55);filter:brightness(2)}68%{opacity:1;transform:translateY(-3px) rotate(1deg) scale(1.04)}100%{transform:none;filter:none}}
  @keyframes summonVitruvio{0%,52%{opacity:0;transform:translateY(-45px) scale(.75);filter:brightness(4) blur(7px)}
    62%{opacity:1;transform:translateY(5px) scale(1.08);filter:brightness(2)}100%{opacity:1;transform:none;filter:none}}
  @keyframes summonYssvarn{0%,38%{opacity:0;transform:scale(.55);filter:blur(7px) hue-rotate(80deg)}
    64%{opacity:1;transform:scale(1.08);filter:brightness(1.7)}100%{opacity:1;transform:none;filter:none}}
  @keyframes summonEvermorrow{0%,30%{opacity:0;transform:translateY(42px) scale(.28,.05);filter:brightness(2) blur(5px)}
    58%{opacity:1;transform:translateY(-7px) scale(.92,1.12);filter:brightness(1.8)}78%{transform:translateY(2px) scale(1.06,.97)}100%{transform:none;filter:none}}

  /* the spell, held up where you can read it */
  #cast{position:fixed;right:30px;top:50%;z-index:76;pointer-events:none;opacity:0}
  #cast.on{animation:castIn 3.45s cubic-bezier(.2,.9,.3,1) forwards;will-change:transform,opacity}
  @keyframes castIn{
    0%{opacity:0;transform:translate(70px,-50%) scale(.62) rotate(9deg)}
    14%{opacity:1;transform:translate(0,-50%) scale(1.16) rotate(0deg)}
    24%{transform:translate(0,-50%) scale(1.04)}
    84%{opacity:1;transform:translate(0,-50%) scale(1.04)}
    100%{opacity:0;transform:translate(0,-56%) scale(.92)}}
  #cast::before{content:"";position:absolute;inset:-26px;border-radius:22px;z-index:-1;
    background:radial-gradient(ellipse at center, var(--cg,rgba(220,179,92,.35)), transparent 68%)}
  #cast .card{cursor:default;box-shadow:0 20px 60px rgba(0,0,0,.8)}
  .spell-line{position:fixed;height:3px;z-index:73;pointer-events:none;transform-origin:0 50%;
    width:var(--len);left:var(--x);top:var(--y);color:var(--sc);border-radius:99px;
    background:linear-gradient(90deg,transparent,currentColor 16%,#fff 62%,currentColor 84%,transparent);
    box-shadow:0 0 9px currentColor,0 0 22px currentColor;animation:spellLine .46s ease-out forwards}
  .spell-line::after{content:"";position:absolute;right:-5px;top:50%;width:13px;height:13px;border-radius:50%;
    background:#fff;box-shadow:0 0 8px #fff,0 0 24px currentColor;transform:translateY(-50%)}
  @keyframes spellLine{0%{opacity:0;clip-path:inset(0 100% 0 0);filter:blur(4px)}22%{opacity:1}
    70%{clip-path:inset(0 0 0 0);filter:none}100%{opacity:0;clip-path:inset(0 0 0 82%)}}
  .spell-impact{position:fixed;z-index:73;width:72px;height:72px;border:2px solid currentColor;border-radius:50%;
    pointer-events:none;color:var(--sc);box-shadow:0 0 22px currentColor,inset 0 0 18px currentColor;
    animation:spellImpact .55s ease-out forwards}
  @keyframes spellImpact{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-35deg)}35%{opacity:1}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.7) rotate(24deg)}}
  /* Descended spellcraft is drawn, not thrown. Interlocking violet formulae
     lock onto every affected space before the power beneath Alter breaks
     through them. These sit in screen space so they line up in both duel and
     four-seat layouts without depending on either board's orientation. */
  .desc-arcane-thread{position:fixed;z-index:74;height:2px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;color:#bd7cff;
    background:linear-gradient(90deg,transparent,#5f239b 10%,#e6c5ff 46%,#8b36df 78%,transparent);
    box-shadow:0 0 5px #e4c1ff,0 0 17px #9e42ed,0 0 34px #471168;
    animation:descArcaneThread .72s cubic-bezier(.18,.7,.17,1) forwards}
  .desc-arcane-thread::before,.desc-arcane-thread::after{content:"◇  Ψ  ⟁  ∴  Λ";position:absolute;left:20%;top:-12px;
    color:#e9d2ff;font:700 10px var(--mono);letter-spacing:16px;white-space:nowrap;text-shadow:0 0 8px #c16aff}
  .desc-arcane-thread::after{left:46%;top:4px;color:#7d32bd;transform:scaleX(-1)}
  @keyframes descArcaneThread{0%{opacity:0;clip-path:inset(0 100% 0 0);filter:blur(7px)}25%{opacity:1}
    70%{clip-path:inset(0 0 0 0);filter:none}100%{opacity:0;clip-path:inset(0 0 0 88%);filter:blur(2px)}}
  .desc-arcane-runes{--rs:150px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 12px #8f35d9);
    animation:descRuneLife 1.14s ease-out forwards}
  .desc-arcane-runes .ring{position:absolute;border-radius:50%;inset:14%;border:2px solid #bc78f1;
    background:repeating-conic-gradient(from 12deg,transparent 0 17deg,#d9aeff 18deg 19deg,transparent 20deg 31deg);
    box-shadow:inset 0 0 18px #5c158c,0 0 10px #bb65ff;animation:descRuneSpin 1.1s ease-out both}
  .desc-arcane-runes .ring::before{content:"";position:absolute;inset:13%;border:1px solid #e8ceff;border-radius:9%;
    transform:rotate(45deg);box-shadow:0 0 9px #ae55ed,inset 0 0 13px #631c8f}
  .desc-arcane-runes .ring.r2{inset:29%;border-style:dashed;border-color:#f0d9ff;animation-direction:reverse;animation-duration:.82s}
  .desc-arcane-runes b{position:absolute;left:50%;top:50%;color:#f2ddff;font:800 13px var(--serif);
    text-shadow:0 0 5px #fff,0 0 11px #b452ff,0 0 22px #6d179d;
    transform:translate(-50%,-50%) rotate(var(--ra)) translateY(calc(var(--rs) * -.42)) rotate(calc(var(--ra) * -1));
    animation:descGlyphWake .68s calc(var(--rd)) ease-out both}
  .desc-arcane-runes::after{content:"";position:absolute;left:50%;top:50%;width:18%;height:18%;border-radius:50%;
    transform:translate(-50%,-50%);background:#f4ddff;box-shadow:0 0 12px #fff,0 0 34px #ad48ff,0 0 70px #641895;
    animation:descRuneCore .9s ease-in forwards}
  .desc-arcane-runes.hatred{filter:drop-shadow(0 0 16px #e23cff)}
  .desc-arcane-runes.suffering .ring,.desc-arcane-runes.hatred .ring{border-radius:18%;transform:rotate(45deg)}
  .desc-arcane-runes.veil{--rs:220px;opacity:.88;filter:drop-shadow(0 0 24px #7227ae)}
  .desc-arcane-runes.collapse{--rs:min(72vmin,650px);filter:drop-shadow(0 0 35px #a146eb);animation-duration:1.55s}
  .desc-arcane-runes.collapse .ring{border-width:4px;background:repeating-conic-gradient(transparent 0 8deg,#d39cff 9deg 10deg,transparent 11deg 19deg)}
  .desc-arcane-runes.flesh{filter:drop-shadow(0 0 15px #d342d9) drop-shadow(0 0 25px #3b071f)}
  @keyframes descRuneLife{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-22deg)}18%{opacity:1}
    57%{opacity:1;transform:translate(-50%,-50%) scale(1.06) rotate(3deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.42) rotate(11deg)}}
  @keyframes descRuneSpin{0%{transform:rotate(-70deg) scale(.5);opacity:0}35%{opacity:1}100%{transform:rotate(75deg) scale(1.05);opacity:0}}
  @keyframes descGlyphWake{0%{opacity:0;filter:blur(5px)}35%{opacity:1}100%{opacity:0;filter:blur(1px)}}
  @keyframes descRuneCore{0%,36%{opacity:0;transform:translate(-50%,-50%) scale(.1)}58%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(5)}}

  /* ---- Lexicon: a seal struck into the record, not a bolt thrown at it ---- */
  .lex-ink-thread{position:fixed;z-index:74;height:2px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;
    background:repeating-linear-gradient(90deg,transparent 0 3px,#7fa8d4 3px 15px,transparent 15px 18px);
    filter:drop-shadow(0 0 4px #cfe4ff) drop-shadow(0 0 12px #3f6a99);
    animation:lexInkThread .5s cubic-bezier(.2,.85,.24,1) forwards}
  @keyframes lexInkThread{0%{opacity:0;clip-path:inset(0 100% 0 0)}22%{opacity:1}
    72%{clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 90%)}}
  .lex-sigil-seal{--rs:130px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%) rotate(45deg);pointer-events:none;filter:drop-shadow(0 0 10px #3f6a99);
    animation:lexSealLife 1s ease-out forwards}
  .lex-sigil-seal .ring{position:absolute;inset:12%;border:2px solid #9fc0e8;
    background:repeating-conic-gradient(from 0deg,transparent 0 24deg,#cfe4ff 25deg 27deg,transparent 28deg 44deg);
    box-shadow:inset 0 0 14px #294a70,0 0 8px #7fa8d4;animation:lexSealSpin .9s ease-out both}
  .lex-sigil-seal .ring.r2{inset:30%;border-style:dashed;animation-direction:reverse;animation-duration:.7s}
  .lex-sigil-seal b{position:absolute;left:50%;top:50%;color:#eaf3ff;font:800 12px var(--serif);
    text-shadow:0 0 5px #fff,0 0 10px #7fa8d4;transform-origin:center;
    transform:translate(-50%,-50%) rotate(-45deg) rotate(var(--ra)) translateY(calc(var(--rs) * -.4)) rotate(calc(var(--ra) * -1));
    animation:lexGlyphWake .6s calc(var(--rd)) ease-out both}
  .lex-sigil-seal::after{content:"";position:absolute;left:50%;top:50%;width:14%;height:14%;
    transform:translate(-50%,-50%);background:#eaf3ff;box-shadow:0 0 10px #fff,0 0 26px #6f95c4;
    animation:lexSealCore .85s ease-in forwards}
  .lex-sigil-seal.redact::before{content:"";position:absolute;left:8%;top:50%;width:84%;height:3px;
    background:linear-gradient(90deg,transparent,#eaf3ff 20%,#eaf3ff 80%,transparent);transform:translateY(-50%) rotate(-45deg) scaleX(0);
    box-shadow:0 0 8px #cfe4ff;animation:lexStrike .4s .18s ease-out forwards}
  .lex-sigil-seal.archive{--rs:96px;opacity:.85;filter:drop-shadow(0 0 8px #7fa8d4)}
  .lex-sigil-seal.archive .ring{animation-duration:1.3s}
  .lex-sigil-seal.purge{--rs:min(60vmin,520px);filter:drop-shadow(0 0 28px #4d7bb0);animation-duration:1.3s}
  .lex-sigil-seal.seize{filter:drop-shadow(0 0 14px #dab35c)}
  .lex-sigil-seal.seize .ring{border-color:#e8cf8f}
  @keyframes lexSealLife{0%{opacity:0;transform:translate(-50%,-50%) rotate(20deg) scale(.3)}18%{opacity:1}
    58%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1.02)}100%{opacity:0;transform:translate(-50%,-50%) rotate(50deg) scale(1.3)}}
  @keyframes lexSealSpin{0%{transform:rotate(-40deg) scale(.6);opacity:0}30%{opacity:1}100%{transform:rotate(30deg) scale(1);opacity:0}}
  @keyframes lexGlyphWake{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
  @keyframes lexSealCore{0%,32%{opacity:0;transform:translate(-50%,-50%) scale(.1)}55%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.2)}}
  @keyframes lexStrike{0%{transform:translateY(-50%) rotate(-45deg) scaleX(0)}100%{transform:translateY(-50%) rotate(-45deg) scaleX(1)}}

  /* ---- Saint's Blood: a rite at the altar, drawn in and given back ---- */
  .sang-blood-thread{position:fixed;z-index:74;height:3px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;border-radius:99px;
    background:linear-gradient(90deg,transparent,#7a1f1e 12%,#e0605c 50%,#7a1f1e 88%,transparent);
    filter:drop-shadow(0 0 5px #bf4340) drop-shadow(0 0 14px #4a0d0c);
    animation:sangBloodThread .6s ease-out forwards}
  @keyframes sangBloodThread{0%,100%{opacity:0}10%{opacity:1}45%{opacity:.55}60%{opacity:1}90%{opacity:.4}}
  .sang-altar-sigil{--rs:130px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 12px #7a1f1e);
    animation:sangRiteLife 1.1s ease-out forwards}
  .sang-altar-sigil::before{content:"";position:absolute;left:50%;top:-6%;width:3px;height:16%;
    background:linear-gradient(180deg,#e0605c,#7a1f1e);border-radius:0 0 3px 3px;transform:translateX(-50%);
    box-shadow:0 0 6px #bf4340;animation:sangDrip .9s .15s ease-in forwards}
  .sang-altar-sigil .ring{position:absolute;border-radius:50%;inset:14%;border:2px solid #d0605c;
    background:repeating-conic-gradient(from 6deg,transparent 0 30deg,#8a2a26 31deg 33deg,transparent 34deg 60deg);
    box-shadow:inset 0 0 16px #3d0d0c,0 0 10px #bf4340;animation:sangRingSpin 1s ease-out both}
  .sang-altar-sigil .ring.r2{inset:31%;border-style:dotted;animation-direction:reverse;animation-duration:.75s}
  .sang-altar-sigil b{position:absolute;left:50%;top:50%;color:#ffd9d6;font:800 13px var(--serif);
    text-shadow:0 0 5px #fff,0 0 10px #bf4340;
    transform:translate(-50%,-50%) rotate(var(--ra)) translateY(calc(var(--rs) * -.4)) rotate(calc(var(--ra) * -1));
    animation:sangGlyphWake .65s calc(var(--rd)) ease-out both}
  .sang-altar-sigil::after{content:"";position:absolute;left:50%;top:50%;width:16%;height:16%;border-radius:50%;
    transform:translate(-50%,-50%);background:#ffd9d6;box-shadow:0 0 10px #fff,0 0 28px #bf4340;
    animation:sangRiteCore .9s ease-in forwards}
  .sang-altar-sigil.sacrifice{animation-name:sangRiteDrain}
  .sang-altar-sigil.sacrifice .ring{animation-direction:reverse}
  .sang-altar-sigil.flood{animation-name:sangRiteDrain;filter:drop-shadow(0 0 30px #8f2b28);animation-duration:1.3s}
  .sang-altar-sigil.flood .ring{animation-direction:reverse}
  .sang-altar-sigil.smite{filter:drop-shadow(0 0 18px #e0605c)}
  .sang-altar-sigil.smite .ring{border-width:3px}
  .sang-altar-sigil.anoint{filter:drop-shadow(0 0 10px #dcb35c)}
  .sang-altar-sigil.anoint::before{display:none}
  .sang-altar-sigil.anoint .ring{background:repeating-conic-gradient(from 6deg,transparent 0 30deg,#dcb35c 31deg 33deg,transparent 34deg 60deg)}
  @keyframes sangRiteLife{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}18%{opacity:1}
    58%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
  @keyframes sangRiteDrain{0%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}25%{opacity:1}
    100%{opacity:0;transform:translate(-50%,-50%) scale(.25)}}
  @keyframes sangRingSpin{0%{transform:rotate(-60deg) scale(.5);opacity:0}30%{opacity:1}100%{transform:rotate(50deg) scale(1.04);opacity:0}}
  @keyframes sangGlyphWake{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
  @keyframes sangRiteCore{0%,34%{opacity:0;transform:translate(-50%,-50%) scale(.1)}56%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.6)}}
  @keyframes sangDrip{0%{opacity:0;height:0}30%{opacity:1}100%{opacity:0;height:22%}}

  /* ---- Frost: ice takes a shape, then it breaks ---- */
  .frost-crack-thread{position:fixed;z-index:74;height:5px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;color:#7fd8e8;
    background:linear-gradient(90deg,transparent,#3f8fa8 8%,#d8f6ff 50%,#3f8fa8 92%,transparent);
    clip-path:polygon(0% 50%,8% 20%,18% 62%,29% 12%,41% 68%,54% 24%,66% 72%,78% 18%,89% 60%,100% 50%,89% 80%,78% 38%,66% 88%,54% 32%,41% 84%,29% 28%,18% 78%,8% 30%);
    filter:drop-shadow(0 0 6px #d8f6ff) drop-shadow(0 0 14px #3f8fa8);
    animation:frostCrackThread .5s ease-out forwards}
  @keyframes frostCrackThread{0%{opacity:0;clip-path:inset(0 100% 0 0)}20%{opacity:1}
    68%{clip-path:inset(0 0 0 0)}100%{opacity:0;filter:drop-shadow(0 0 6px #d8f6ff) drop-shadow(0 0 14px #3f8fa8) brightness(1.6)}}
  .frost-shard-ring{--rs:130px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 10px #3f8fa8);
    animation:frostRingLife 1s ease-out forwards}
  .frost-shard-ring .ring{position:absolute;inset:12%;border:2px solid #bdeeff;
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    background:repeating-conic-gradient(from 0deg,transparent 0 54deg,#eafcff 55deg 60deg,transparent 61deg 114deg);
    box-shadow:inset 0 0 14px #204a58,0 0 8px #7fd8e8;animation:frostRingSpin .95s ease-out both}
  .frost-shard-ring .ring.r2{inset:32%;animation-direction:reverse;animation-duration:.72s}
  .frost-shard-ring b{position:absolute;left:50%;top:50%;color:#eafcff;font:800 12px var(--serif);
    text-shadow:0 0 5px #fff,0 0 10px #7fd8e8;
    transform:translate(-50%,-50%) rotate(var(--ra)) translateY(calc(var(--rs) * -.4)) rotate(calc(var(--ra) * -1));
    animation:frostGlyphWake .6s calc(var(--rd)) ease-out both}
  .frost-shard-ring::after{content:"";position:absolute;left:50%;top:50%;width:14%;height:14%;
    transform:translate(-50%,-50%);background:#eafcff;box-shadow:0 0 10px #fff,0 0 26px #7fd8e8;
    animation:frostRingCore .85s ease-in forwards}
  .frost-shard-ring.shatter{animation-name:frostRingShatter}
  .frost-shard-ring.shatter .ring{border-width:3px}
  .frost-shard-ring.blizzard{--rs:min(64vmin,560px);filter:drop-shadow(0 0 30px #4a9bb5);animation-duration:1.35s}
  .frost-shard-ring.glaze{--rs:96px;opacity:.8;filter:drop-shadow(0 0 8px #7fd8e8)}
  .frost-shard-ring.glaze .ring{animation-duration:1.3s}
  .frost-shard-ring.mirror{filter:drop-shadow(0 0 14px #bdeeff)}
  .frost-shard-ring.mirror .ring.r2{clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    transform:scale(.82) rotate(30deg)}
  @keyframes frostRingLife{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}18%{opacity:1}
    58%{opacity:1;transform:translate(-50%,-50%) scale(1.03) rotate(2deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotate(6deg)}}
  @keyframes frostRingShatter{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.9) rotate(24deg)}}
  @keyframes frostRingSpin{0%{transform:rotate(-50deg) scale(.5);opacity:0}30%{opacity:1}100%{transform:rotate(40deg) scale(1.05);opacity:0}}
  @keyframes frostGlyphWake{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
  @keyframes frostRingCore{0%,34%{opacity:0;transform:translate(-50%,-50%) scale(.1)}56%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.4)}}

  /* ---- The Iridescent Legion: a banner planted, not a bolt thrown ---- */
  .leg-banner-thread{position:fixed;z-index:74;height:4px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;
    background:linear-gradient(90deg,transparent,#e0a94a 10%,#67c9e8 35%,#f0f0f0 50%,#a855b8 65%,#e0a94a 90%,transparent);
    filter:drop-shadow(0 0 5px #f0d9a0) drop-shadow(0 0 12px #b0863f);
    animation:legBannerThread .48s ease-out forwards}
  @keyframes legBannerThread{0%{opacity:0;clip-path:inset(0 100% 0 0)}20%{opacity:1}
    70%{clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 85%)}}
  .leg-banner-ring{--rs:130px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 10px #b0863f);
    animation:legBannerLife 1s ease-out forwards}
  .leg-banner-ring .ring{position:absolute;inset:12%;border:2px solid #f0d9a0;
    clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);
    background:repeating-conic-gradient(from 0deg,transparent 0 30deg,#e0a94a 31deg 34deg,transparent 35deg 60deg);
    box-shadow:inset 0 0 14px #4a3315,0 0 8px #e0a94a;animation:legRingSpin .9s ease-out both}
  .leg-banner-ring .ring.r2{inset:30%;animation-direction:reverse;animation-duration:.7s;border-color:#a855b8}
  .leg-banner-ring b{position:absolute;left:50%;top:50%;color:#fff3da;font:800 12px var(--serif);
    text-shadow:0 0 5px #fff,0 0 10px #e0a94a;
    transform:translate(-50%,-50%) rotate(var(--ra)) translateY(calc(var(--rs) * -.4)) rotate(calc(var(--ra) * -1));
    animation:legGlyphWake .6s calc(var(--rd)) ease-out both}
  .leg-banner-ring::after{content:"";position:absolute;left:50%;top:50%;width:14%;height:14%;
    transform:translate(-50%,-50%);background:#fff3da;box-shadow:0 0 10px #fff,0 0 26px #e0a94a;
    animation:legRingCore .85s ease-in forwards}
  .leg-banner-ring.charge{filter:drop-shadow(0 0 16px #c0392b)}
  .leg-banner-ring.charge .ring{border-color:#f0a494}
  .leg-banner-ring.muster{--rs:min(58vmin,500px);animation-duration:1.25s}
  .leg-banner-ring.rally{--rs:104px;opacity:.9}
  @keyframes legBannerLife{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-6deg)}18%{opacity:1}
    58%{opacity:1;transform:translate(-50%,-50%) scale(1.03) rotate(1deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.32) rotate(4deg)}}
  @keyframes legRingSpin{0%{transform:rotate(-45deg) scale(.5);opacity:0}30%{opacity:1}100%{transform:rotate(35deg) scale(1.04);opacity:0}}
  @keyframes legGlyphWake{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
  @keyframes legRingCore{0%,34%{opacity:0;transform:translate(-50%,-50%) scale(.1)}56%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.3)}}

  /* ---- The Unwriting: a record trying to erase its own margins ---- */
  .nys-glitch-thread{position:fixed;z-index:74;height:3px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;color:#a855b8;
    background:repeating-linear-gradient(90deg,transparent 0 4px,#a855b8 4px 7px,transparent 7px 13px);
    filter:drop-shadow(0 0 5px #d9a8e8) drop-shadow(0 0 12px #5c2a6b);
    animation:nysGlitchThread .4s steps(6,end) forwards}
  @keyframes nysGlitchThread{0%{opacity:0;clip-path:inset(0 100% 0 0)}30%{opacity:1}
    65%{clip-path:inset(0 0 0 0)}82%{opacity:.3}100%{opacity:0;clip-path:inset(0 0 0 92%)}}
  .nys-glitch-ring{--rs:130px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 10px #5c2a6b);
    animation:nysRingLife .9s steps(9,end) forwards}
  .nys-glitch-ring .ring{position:absolute;inset:14%;border:2px dashed #d9a8e8;
    background:repeating-linear-gradient(0deg,transparent 0 6%,rgba(217,168,232,.4) 6% 8%,transparent 8% 20%);
    box-shadow:inset 0 0 14px #2a1030,0 0 8px #a855b8;animation:nysRingSpin .85s steps(7,end) both}
  .nys-glitch-ring .ring.r2{inset:32%;animation-direction:reverse;animation-duration:.65s}
  .nys-glitch-ring b{position:absolute;left:50%;top:50%;color:#f1e0f7;font:800 12px var(--mono);
    text-shadow:0 0 5px #fff,0 0 10px #a855b8;
    transform:translate(-50%,-50%) rotate(var(--ra)) translateY(calc(var(--rs) * -.4)) rotate(calc(var(--ra) * -1));
    animation:nysGlyphWake .55s calc(var(--rd)) steps(4,end) both}
  .nys-glitch-ring::after{content:"";position:absolute;left:50%;top:50%;width:14%;height:14%;
    transform:translate(-50%,-50%);background:#f1e0f7;box-shadow:0 0 10px #fff,0 0 26px #a855b8;
    animation:nysRingCore .8s ease-in forwards}
  .nys-glitch-ring.wipe{--rs:min(60vmin,520px);filter:drop-shadow(0 0 30px #6b2f7d);animation-duration:1.3s}
  .nys-glitch-ring.corrupt{--rs:100px;opacity:.85}
  .nys-glitch-ring.delete .ring{border-style:solid;border-color:#f0a494}
  @keyframes nysRingLife{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-9deg)}18%{opacity:1}
    58%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotate(5deg)}}
  @keyframes nysRingSpin{0%{transform:rotate(-55deg) scale(.5);opacity:0}30%{opacity:1}100%{transform:rotate(38deg) scale(1.04);opacity:0}}
  @keyframes nysGlyphWake{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
  @keyframes nysRingCore{0%,34%{opacity:0;transform:translate(-50%,-50%) scale(.1)}56%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.2)}}

  /* ---- Nurama: a machine winding up before it lets go ---- */
  .nur-cog-thread{position:fixed;z-index:74;height:3px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;color:#a9c4e8;
    background:repeating-linear-gradient(90deg,transparent 0 6px,#a9c4e8 6px 11px,transparent 11px 15px);
    filter:drop-shadow(0 0 4px #e8f2ff) drop-shadow(0 0 12px #4a6a9a);
    animation:nurCogThread .5s steps(10,end) forwards}
  @keyframes nurCogThread{0%{opacity:0;clip-path:inset(0 100% 0 0)}20%{opacity:1}
    70%{clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 88%)}}
  .nur-cog-ring{--rs:130px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 10px #4a6a9a);
    animation:nurRingLife 1s ease-out forwards}
  .nur-cog-ring .ring{position:absolute;inset:12%;border:3px solid #cfe0f5;
    clip-path:polygon(50% 0%,61% 10%,73% 2%,80% 15%,93% 15%,93% 28%,106% 38%,96% 50%,106% 62%,93% 72%,93% 85%,80% 85%,73% 98%,61% 90%,50% 100%,39% 90%,27% 98%,20% 85%,7% 85%,7% 72%,-6% 62%,4% 50%,-6% 38%,7% 28%,7% 15%,20% 15%,27% 2%,39% 10%);
    background:radial-gradient(circle,transparent 40%,#e8c15a 41% 46%,transparent 47%);
    box-shadow:inset 0 0 14px #1a2c40,0 0 8px #a9c4e8;animation:nurRingSpin 1.1s linear both}
  .nur-cog-ring .ring.r2{inset:34%;animation-direction:reverse;animation-duration:.8s}
  .nur-cog-ring b{position:absolute;left:50%;top:50%;color:#eaf3ff;font:800 12px var(--serif);
    text-shadow:0 0 5px #fff,0 0 10px #a9c4e8;
    transform:translate(-50%,-50%) rotate(var(--ra)) translateY(calc(var(--rs) * -.4)) rotate(calc(var(--ra) * -1));
    animation:nurGlyphWake .6s calc(var(--rd)) ease-out both}
  .nur-cog-ring::after{content:"";position:absolute;left:50%;top:50%;width:14%;height:14%;
    transform:translate(-50%,-50%);background:#eaf3ff;box-shadow:0 0 10px #fff,0 0 26px #a9c4e8;
    animation:nurRingCore .85s ease-in forwards}
  .nur-cog-ring.windup{--rs:100px;opacity:.88}
  .nur-cog-ring.windup .ring{animation-duration:1.4s}
  .nur-cog-ring.grind{filter:drop-shadow(0 0 16px #e8c15a)}
  @keyframes nurRingLife{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-10deg)}18%{opacity:1}
    58%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotate(8deg)}}
  @keyframes nurRingSpin{0%{transform:rotate(0deg) scale(.6);opacity:0}30%{opacity:1}100%{transform:rotate(120deg) scale(1.02);opacity:0}}
  @keyframes nurGlyphWake{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
  @keyframes nurRingCore{0%,34%{opacity:0;transform:translate(-50%,-50%) scale(.1)}56%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.3)}}

  /* ---- The Iron Utopia: a schedule stamped, then struck ---- */
  .iron-forge-thread{position:fixed;z-index:74;height:5px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;color:#e07a3c;
    background:linear-gradient(90deg,transparent,#6b3a33 8%,#ffd9c9 50%,#6b3a33 92%,transparent);
    clip-path:polygon(0% 40%,10% 40%,14% 10%,22% 60%,30% 30%,40% 70%,50% 40%,60% 70%,70% 20%,78% 60%,86% 40%,100% 40%,100% 60%,86% 60%,78% 80%,70% 40%,60% 90%,50% 60%,40% 90%,30% 50%,22% 80%,14% 30%,10% 60%,0% 60%);
    filter:drop-shadow(0 0 5px #ffd9c9) drop-shadow(0 0 14px #b0645a);
    animation:ironForgeThread .48s ease-out forwards}
  @keyframes ironForgeThread{0%{opacity:0;clip-path:inset(0 100% 0 0)}20%{opacity:1}
    68%{clip-path:inset(0 0 0 0)}100%{opacity:0;filter:drop-shadow(0 0 5px #ffd9c9) drop-shadow(0 0 14px #b0645a) brightness(1.5)}}
  .iron-forge-ring{--rs:130px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 10px #b0645a);
    animation:ironRingLife 1s ease-out forwards}
  .iron-forge-ring .ring{position:absolute;inset:12%;border:3px solid #e0a89c;
    clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);
    background:repeating-conic-gradient(from 22deg,transparent 0 40deg,#ffd9c9 41deg 44deg,transparent 45deg 85deg);
    box-shadow:inset 0 0 14px #3a1a12,0 0 8px #e07a3c;animation:ironRingSpin .95s ease-out both}
  .iron-forge-ring .ring.r2{inset:30%;animation-direction:reverse;animation-duration:.72s;
    clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%)}
  .iron-forge-ring b{position:absolute;left:50%;top:50%;color:#ffece0;font:800 12px var(--serif);
    text-shadow:0 0 5px #fff,0 0 10px #e07a3c;
    transform:translate(-50%,-50%) rotate(var(--ra)) translateY(calc(var(--rs) * -.4)) rotate(calc(var(--ra) * -1));
    animation:ironGlyphWake .6s calc(var(--rd)) ease-out both}
  .iron-forge-ring::after{content:"";position:absolute;left:50%;top:50%;width:14%;height:14%;
    transform:translate(-50%,-50%);background:#ffece0;box-shadow:0 0 10px #fff,0 0 26px #e07a3c;
    animation:ironRingCore .85s ease-in forwards}
  .iron-forge-ring.temper{--rs:100px;opacity:.88}
  .iron-forge-ring.strike{filter:drop-shadow(0 0 18px #ff8a3d)}
  .iron-forge-ring.strike .ring{border-width:4px}
  @keyframes ironRingLife{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(10deg)}18%{opacity:1}
    58%{opacity:1;transform:translate(-50%,-50%) scale(1.03) rotate(-2deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.32) rotate(-6deg)}}
  @keyframes ironRingSpin{0%{transform:rotate(40deg) scale(.5);opacity:0}30%{opacity:1}100%{transform:rotate(-30deg) scale(1.04);opacity:0}}
  @keyframes ironGlyphWake{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
  @keyframes ironRingCore{0%,34%{opacity:0;transform:translate(-50%,-50%) scale(.1)}56%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.4)}}

  /* ---- Viridia: two things growing toward the same shape ---- */
  .vir-bloom-thread{position:fixed;z-index:74;height:4px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;
    background:linear-gradient(90deg,transparent,#3f8c48 10%,#a8e6a3 50%,#3f8c48 90%,transparent);
    border-radius:99px;filter:drop-shadow(0 0 5px #d9f5cf) drop-shadow(0 0 12px #2c6432);
    animation:virBloomThread .6s cubic-bezier(.22,.9,.2,1) forwards}
  @keyframes virBloomThread{0%{opacity:0;clip-path:inset(0 100% 0 0)}24%{opacity:1}
    74%{clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 80%)}}
  .vir-bloom-ring{--rs:130px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 10px #2c6432);
    animation:virRingLife 1.05s ease-out forwards}
  .vir-bloom-ring .ring{position:absolute;inset:12%;border:2px solid #a8e6a3;border-radius:62% 38% 55% 45%/45% 55% 42% 58%;
    background:repeating-conic-gradient(from 4deg,transparent 0 28deg,#6fbf73 29deg 32deg,transparent 33deg 58deg);
    box-shadow:inset 0 0 14px #163a1a,0 0 8px #6fbf73;animation:virRingSpin 1.05s ease-out both}
  .vir-bloom-ring .ring.r2{inset:31%;border-radius:45% 55% 42% 58%/62% 38% 55% 45%;animation-direction:reverse;animation-duration:.78s}
  .vir-bloom-ring b{position:absolute;left:50%;top:50%;color:#eafce6;font:800 12px var(--serif);
    text-shadow:0 0 5px #fff,0 0 10px #6fbf73;
    transform:translate(-50%,-50%) rotate(var(--ra)) translateY(calc(var(--rs) * -.4)) rotate(calc(var(--ra) * -1));
    animation:virGlyphWake .65s calc(var(--rd)) ease-out both}
  .vir-bloom-ring::after{content:"";position:absolute;left:50%;top:50%;width:15%;height:15%;border-radius:50%;
    transform:translate(-50%,-50%);background:#eafce6;box-shadow:0 0 10px #fff,0 0 26px #6fbf73;
    animation:virRingCore .9s ease-in forwards}
  .vir-bloom-ring.thorn{filter:drop-shadow(0 0 16px #4a8c3f)}
  .vir-bloom-ring.thorn .ring{border-color:#e0a494}
  .vir-bloom-ring.graft{--rs:100px;opacity:.88}
  @keyframes virRingLife{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-6deg)}18%{opacity:1}
    58%{opacity:1;transform:translate(-50%,-50%) scale(1.03) rotate(2deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.32) rotate(6deg)}}
  @keyframes virRingSpin{0%{transform:rotate(-40deg) scale(.55);opacity:0}30%{opacity:1}100%{transform:rotate(30deg) scale(1.03);opacity:0}}
  @keyframes virGlyphWake{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
  @keyframes virRingCore{0%,34%{opacity:0;transform:translate(-50%,-50%) scale(.1)}56%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.3)}}

  /* ---- The Silver Haven: a verdict under an artificial sun ---- */
  .sil-sun-thread{position:fixed;z-index:74;height:3px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;
    background:linear-gradient(90deg,transparent,#9fb4c8 8%,#ffffff 50%,#9fb4c8 92%,transparent);
    box-shadow:0 0 8px #fff,0 0 20px #dfe8f2;filter:drop-shadow(0 0 5px #fff);
    animation:silSunThread .46s ease-out forwards}
  @keyframes silSunThread{0%{opacity:0;clip-path:inset(0 100% 0 0)}18%{opacity:1}
    70%{clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 84%)}}
  .sil-sun-ring{--rs:130px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 14px #fff);
    animation:silRingLife 1s ease-out forwards}
  .sil-sun-ring .ring{position:absolute;inset:10%;border:2px solid #ffffff;border-radius:50%;
    background:repeating-conic-gradient(from 0deg,transparent 0 12deg,#ffffff 13deg 15deg,transparent 16deg 30deg);
    box-shadow:inset 0 0 18px #9fb4c8,0 0 12px #fff;animation:silRingSpin .95s ease-out both}
  .sil-sun-ring .ring.r2{inset:33%;border-style:dotted;animation-direction:reverse;animation-duration:.7s}
  .sil-sun-ring b{position:absolute;left:50%;top:50%;color:#fffef8;font:800 12px var(--serif);
    text-shadow:0 0 6px #fff,0 0 12px #dfe8f2;
    transform:translate(-50%,-50%) rotate(var(--ra)) translateY(calc(var(--rs) * -.4)) rotate(calc(var(--ra) * -1));
    animation:silGlyphWake .6s calc(var(--rd)) ease-out both}
  .sil-sun-ring::after{content:"";position:absolute;left:50%;top:50%;width:16%;height:16%;border-radius:50%;
    transform:translate(-50%,-50%);background:#ffffff;box-shadow:0 0 14px #fff,0 0 32px #dfe8f2;
    animation:silRingCore .85s ease-in forwards}
  .sil-sun-ring.consecrate{--rs:100px;opacity:.9}
  .sil-sun-ring.judge{filter:drop-shadow(0 0 18px #dcb35c)}
  .sil-sun-ring.communion{--rs:min(60vmin,520px);animation-duration:1.3s}
  @keyframes silRingLife{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}18%{opacity:1}
    58%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
  @keyframes silRingSpin{0%{transform:rotate(-30deg) scale(.6);opacity:0}30%{opacity:1}100%{transform:rotate(30deg) scale(1.03);opacity:0}}
  @keyframes silGlyphWake{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
  @keyframes silRingCore{0%,34%{opacity:0;transform:translate(-50%,-50%) scale(.1)}56%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.6)}}

  /* ---- The Kingdom of Khaz: a mark carved, not printed ---- */
  .khaz-totem-thread{position:fixed;z-index:74;height:5px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;
    background:linear-gradient(90deg,transparent,#8a5c2c 10%,#e0973f 50%,#8a5c2c 90%,transparent);
    clip-path:polygon(0% 30%,45% 30%,45% 0%,55% 30%,100% 30%,100% 70%,55% 70%,55% 100%,45% 70%,0% 70%);
    filter:drop-shadow(0 0 5px #e0973f) drop-shadow(0 0 12px #5c3d1e);
    animation:khazTotemThread .5s ease-out forwards}
  @keyframes khazTotemThread{0%{opacity:0;clip-path:inset(0 100% 0 0)}20%{opacity:1}
    70%{clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 86%)}}
  .khaz-totem-ring{--rs:130px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 10px #5c3d1e);
    animation:khazRingLife 1s ease-out forwards}
  .khaz-totem-ring .ring{position:absolute;inset:12%;border:3px solid #d4a054;
    clip-path:polygon(50% 2%,63% 18%,88% 12%,82% 36%,98% 50%,82% 64%,88% 88%,63% 82%,50% 98%,37% 82%,12% 88%,18% 64%,2% 50%,18% 36%,12% 12%,37% 18%);
    background:radial-gradient(circle,transparent 44%,#e0973f 45% 50%,transparent 51%);
    box-shadow:inset 0 0 14px #2a1c0d,0 0 8px #d4a054;animation:khazRingSpin .9s ease-out both}
  .khaz-totem-ring .ring.r2{inset:32%;animation-direction:reverse;animation-duration:.68s}
  .khaz-totem-ring b{position:absolute;left:50%;top:50%;color:#fdf0dc;font:800 12px var(--serif);
    text-shadow:0 0 5px #fff,0 0 10px #d4a054;
    transform:translate(-50%,-50%) rotate(var(--ra)) translateY(calc(var(--rs) * -.4)) rotate(calc(var(--ra) * -1));
    animation:khazGlyphWake .6s calc(var(--rd)) ease-out both}
  .khaz-totem-ring::after{content:"";position:absolute;left:50%;top:50%;width:14%;height:14%;
    transform:translate(-50%,-50%);background:#fdf0dc;box-shadow:0 0 10px #fff,0 0 26px #d4a054;
    animation:khazRingCore .85s ease-in forwards}
  .khaz-totem-ring.howl{--rs:min(56vmin,480px)}
  .khaz-totem-ring.claim{filter:drop-shadow(0 0 16px #e0973f)}
  @keyframes khazRingLife{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}18%{opacity:1}
    58%{opacity:1;transform:translate(-50%,-50%) scale(1.03) rotate(2deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.32) rotate(6deg)}}
  @keyframes khazRingSpin{0%{transform:rotate(-35deg) scale(.55);opacity:0}30%{opacity:1}100%{transform:rotate(28deg) scale(1.03);opacity:0}}
  @keyframes khazGlyphWake{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
  @keyframes khazRingCore{0%,34%{opacity:0;transform:translate(-50%,-50%) scale(.1)}56%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.2)}}

  /* ---- The Moonlit Fields: one clean stroke, held ---- */
  .mf-form-thread{position:fixed;z-index:74;height:2px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;
    background:linear-gradient(90deg,transparent,#a9d8c8 12%,#ffffff 50%,#a9d8c8 88%,transparent);
    filter:drop-shadow(0 0 4px #d8f0e8) drop-shadow(0 0 10px #5a8c78);
    animation:mfFormThread .38s cubic-bezier(.3,.9,.2,1) forwards}
  @keyframes mfFormThread{0%{opacity:0;clip-path:inset(0 100% 0 0)}16%{opacity:1}
    62%{clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 92%)}}
  .mf-form-ring{--rs:130px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 9px #5a8c78);
    animation:mfRingLife .85s ease-out forwards}
  .mf-form-ring .ring{position:absolute;inset:12%;border:3px solid #cdeee0;border-radius:50%;
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 55%,8% 55%,8% 92%,92% 92%,92% 8%,14% 8%,14% 55%,0 55%);
    box-shadow:inset 0 0 14px #17332a,0 0 8px #a9d8c8;animation:mfRingSpin .8s ease-out both}
  .mf-form-ring .ring.r2{inset:33%;animation-direction:reverse;animation-duration:.6s;clip-path:none;border-style:dashed}
  .mf-form-ring b{position:absolute;left:50%;top:50%;color:#eafcf5;font:800 12px var(--serif);
    text-shadow:0 0 5px #fff,0 0 10px #a9d8c8;
    transform:translate(-50%,-50%) rotate(var(--ra)) translateY(calc(var(--rs) * -.4)) rotate(calc(var(--ra) * -1));
    animation:mfGlyphWake .55s calc(var(--rd)) ease-out both}
  .mf-form-ring::after{content:"";position:absolute;left:50%;top:50%;width:13%;height:13%;border-radius:50%;
    transform:translate(-50%,-50%);background:#eafcf5;box-shadow:0 0 9px #fff,0 0 24px #a9d8c8;
    animation:mfRingCore .78s ease-in forwards}
  .mf-form-ring.form{--rs:98px;opacity:.88}
  .mf-form-ring.strike{filter:drop-shadow(0 0 14px #ffffff)}
  @keyframes mfRingLife{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-4deg)}16%{opacity:1}
    55%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25) rotate(3deg)}}
  @keyframes mfRingSpin{0%{transform:rotate(-20deg) scale(.6);opacity:0}28%{opacity:1}100%{transform:rotate(18deg) scale(1.02);opacity:0}}
  @keyframes mfGlyphWake{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
  @keyframes mfRingCore{0%,32%{opacity:0;transform:translate(-50%,-50%) scale(.1)}54%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.1)}}

  /* ---- Vakoiros: a rune-stone the council reads together ---- */
  .vak-rune-thread{position:fixed;z-index:74;height:6px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;
    background:linear-gradient(90deg,transparent,#6e5138 8%,#eee9dc 50%,#6e5138 92%,transparent);
    filter:drop-shadow(0 0 5px #eee9dc) drop-shadow(0 0 12px #4a3a28);
    animation:vakRuneThread .55s ease-out forwards}
  @keyframes vakRuneThread{0%{opacity:0;clip-path:inset(0 100% 0 0)}22%{opacity:1}
    72%{clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 80%)}}
  .vak-rune-ring{--rs:130px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 10px #4a3a28);
    animation:vakRingLife 1.05s ease-out forwards}
  .vak-rune-ring .ring{position:absolute;inset:12%;border:3px solid #eee9dc;
    clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
    background:repeating-conic-gradient(from 15deg,transparent 0 44deg,#c9beA6 45deg 49deg,transparent 50deg 74deg);
    box-shadow:inset 0 0 14px #2a2115,0 0 8px #6e5138;animation:vakRingSpin 1s ease-out both}
  .vak-rune-ring .ring.r2{inset:33%;animation-direction:reverse;animation-duration:.75s;
    clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}
  .vak-rune-ring b{position:absolute;left:50%;top:50%;color:#fbf6ea;font:800 13px var(--serif);
    text-shadow:0 0 5px #fff,0 0 10px #a68f6c;
    transform:translate(-50%,-50%) rotate(var(--ra)) translateY(calc(var(--rs) * -.4)) rotate(calc(var(--ra) * -1));
    animation:vakGlyphWake .65s calc(var(--rd)) ease-out both}
  .vak-rune-ring::after{content:"";position:absolute;left:50%;top:50%;width:14%;height:14%;
    transform:translate(-50%,-50%);background:#fbf6ea;box-shadow:0 0 10px #fff,0 0 26px #a68f6c;
    animation:vakRingCore .9s ease-in forwards}
  .vak-rune-ring.council{--rs:104px;opacity:.9}
  .vak-rune-ring.hunt{filter:drop-shadow(0 0 16px #d0605c)}
  @keyframes vakRingLife{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}18%{opacity:1}
    58%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
  @keyframes vakRingSpin{0%{transform:rotate(-25deg) scale(.55);opacity:0}30%{opacity:1}100%{transform:rotate(25deg) scale(1.03);opacity:0}}
  @keyframes vakGlyphWake{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
  @keyframes vakRingCore{0%,34%{opacity:0;transform:translate(-50%,-50%) scale(.1)}56%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.2)}}

  /* ---- Aelyrion: something patient, stored a long time ---- */
  .ael-root-thread{position:fixed;z-index:74;height:4px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;
    background:linear-gradient(90deg,transparent,#132f1d 10%,#49b96f 50%,#132f1d 90%,transparent);
    border-radius:99px;filter:drop-shadow(0 0 5px #49b96f) drop-shadow(0 0 14px #0a1f11);
    animation:aelRootThread .85s cubic-bezier(.3,.85,.25,1) forwards}
  @keyframes aelRootThread{0%{opacity:0;clip-path:inset(0 100% 0 0)}30%{opacity:1}
    78%{clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 78%)}}
  .ael-root-ring{--rs:130px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 10px #0a1f11);
    animation:aelRingLife 1.3s ease-out forwards}
  .ael-root-ring .ring{position:absolute;inset:12%;border:2px solid #49b96f;
    clip-path:polygon(50% 4%,58% 20%,74% 10%,72% 28%,90% 30%,78% 44%,92% 56%,74% 60%,78% 78%,60% 70%,54% 88%,46% 72%,28% 82%,32% 62%,12% 58%,26% 46%,10% 32%,30% 30%,26% 12%,44% 20%);
    background:radial-gradient(circle,transparent 42%,#132f1d 43% 50%,transparent 51%);
    box-shadow:inset 0 0 16px #060f09,0 0 8px #49b96f;animation:aelRingSpin 1.25s ease-out both}
  .ael-root-ring .ring.r2{inset:34%;animation-direction:reverse;animation-duration:.95s}
  .ael-root-ring b{position:absolute;left:50%;top:50%;color:#e6f9ec;font:800 12px var(--serif);
    text-shadow:0 0 5px #fff,0 0 10px #49b96f;
    transform:translate(-50%,-50%) rotate(var(--ra)) translateY(calc(var(--rs) * -.4)) rotate(calc(var(--ra) * -1));
    animation:aelGlyphWake .8s calc(var(--rd)) ease-out both}
  .ael-root-ring::after{content:"";position:absolute;left:50%;top:50%;width:14%;height:14%;border-radius:50%;
    transform:translate(-50%,-50%);background:#e6f9ec;box-shadow:0 0 10px #fff,0 0 30px #49b96f;
    animation:aelRingCore 1.1s ease-in forwards}
  .ael-root-ring.bind{--rs:104px;opacity:.88}
  .ael-root-ring.bind .ring{animation-duration:1.6s}
  .ael-root-ring.release{--rs:min(58vmin,500px);filter:drop-shadow(0 0 30px #6fe093);animation-duration:1s}
  @keyframes aelRingLife{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-4deg)}20%{opacity:1}
    62%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotate(3deg)}}
  @keyframes aelRingSpin{0%{transform:rotate(-20deg) scale(.5);opacity:0}35%{opacity:1}100%{transform:rotate(15deg) scale(1.02);opacity:0}}
  @keyframes aelGlyphWake{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
  @keyframes aelRingCore{0%,40%{opacity:0;transform:translate(-50%,-50%) scale(.1)}62%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.6)}}

  /* ---- The Wilds Beyond: the Wheel, and a borrowed face ---- */
  .wld-wheel-thread{position:fixed;z-index:74;height:3px;left:var(--x);top:var(--y);width:var(--len);
    pointer-events:none;transform-origin:0 50%;
    background:linear-gradient(90deg,transparent,#ec6bb0 12%,#ffe1a0 38%,#8fffc4 62%,#a0d8ff 88%,transparent);
    filter:drop-shadow(0 0 5px #f5d0e8) drop-shadow(0 0 12px #6e1f47);
    animation:wldWheelThread .55s ease-out forwards}
  @keyframes wldWheelThread{0%{opacity:0;clip-path:inset(0 100% 0 0);filter:hue-rotate(0deg)}22%{opacity:1}
    72%{clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 82%);filter:hue-rotate(40deg)}}
  .wld-wheel-ring{--rs:130px;position:fixed;z-index:75;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);
    transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 10px #6e1f47);
    animation:wldRingLife 1.05s ease-out forwards}
  .wld-wheel-ring .ring{position:absolute;inset:12%;border:2px solid #ffe1a0;
    clip-path:polygon(44% 0%,56% 0%,56% 44%,100% 44%,100% 56%,56% 56%,56% 100%,44% 100%,44% 56%,0% 56%,0% 44%,44% 44%);
    background:repeating-conic-gradient(from 0deg,transparent 0 40deg,#ec6bb0 41deg 45deg,transparent 46deg 85deg,#8fffc4 86deg 90deg);
    box-shadow:inset 0 0 14px #3e1330,0 0 8px #ec6bb0;animation:wldRingSpin 1s ease-out both}
  .wld-wheel-ring .ring.r2{inset:32%;animation-direction:reverse;animation-duration:.76s;
    clip-path:polygon(44% 0%,56% 0%,56% 44%,100% 44%,100% 56%,56% 56%,56% 100%,44% 100%,44% 56%,0% 56%,0% 44%,44% 44%)}
  .wld-wheel-ring b{position:absolute;left:50%;top:50%;color:#fff3fa;font:800 13px var(--serif);
    text-shadow:0 0 5px #fff,0 0 10px #ec6bb0;
    transform:translate(-50%,-50%) rotate(var(--ra)) translateY(calc(var(--rs) * -.4)) rotate(calc(var(--ra) * -1));
    animation:wldGlyphWake .65s calc(var(--rd)) ease-out both}
  .wld-wheel-ring::after{content:"";position:absolute;left:50%;top:50%;width:14%;height:14%;
    transform:translate(-50%,-50%);background:#fff3fa;box-shadow:0 0 10px #fff,0 0 28px #ec6bb0;
    animation:wldRingCore .9s ease-in forwards}
  .wld-wheel-ring.glamour{--rs:104px;opacity:.9}
  .wld-wheel-ring.reap{filter:drop-shadow(0 0 16px #ff9ecf)}
  .wld-wheel-ring.turn{--rs:min(56vmin,480px);animation-duration:1.4s}
  .wld-wheel-ring.turn .ring{animation-name:wldRingSpinFull;animation-duration:1.4s}
  @keyframes wldRingLife{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-45deg)}18%{opacity:1}
    58%{opacity:1;transform:translate(-50%,-50%) scale(1.03) rotate(6deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotate(24deg)}}
  @keyframes wldRingSpin{0%{transform:rotate(-30deg) scale(.55);opacity:0}30%{opacity:1}100%{transform:rotate(35deg) scale(1.03);opacity:0}}
  @keyframes wldRingSpinFull{0%{transform:rotate(0deg) scale(.5);opacity:0}30%{opacity:1}100%{transform:rotate(300deg) scale(1.03);opacity:0}}
  @keyframes wldGlyphWake{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
  @keyframes wldRingCore{0%,34%{opacity:0;transform:translate(-50%,-50%) scale(.1)}56%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.4)}}

  .symbiosis-vfx{position:fixed;inset:0;width:100vw;height:100vh;z-index:73;pointer-events:none;overflow:visible}
  .symbiosis-vfx path{fill:none;stroke:#72d47b;stroke-width:6;stroke-linecap:round;path-length:1;
    stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px #8ff29a);
    animation:vineReach 1s cubic-bezier(.18,.72,.2,1) forwards}
  .symbiosis-vfx path.core{stroke:#d9f7c9;stroke-width:2.2;animation-delay:.08s}
  .symbiosis-vfx circle{fill:#9bea93;filter:drop-shadow(0 0 7px #6fd878);opacity:0;
    transform-box:fill-box;transform-origin:center;animation:vineLeaf .6s .42s ease-out forwards}
  @keyframes vineReach{0%{stroke-dashoffset:1;opacity:0}12%{opacity:1}72%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
  @keyframes vineLeaf{0%{opacity:0;transform:scale(.1) rotate(-50deg)}55%{opacity:1;transform:scale(1.3) rotate(8deg)}100%{opacity:0;transform:scale(1) rotate(20deg)}}
  .hoarfrost-sheet{position:fixed;z-index:71;pointer-events:none;overflow:hidden;border-radius:10px;
    transform-origin:var(--origin,50%) 50%;animation:hoarSpread 1.35s cubic-bezier(.15,.72,.2,1) forwards;
    background:linear-gradient(105deg,rgba(220,248,255,.08),rgba(140,220,242,.52),rgba(232,252,255,.78));
    border:1px solid rgba(190,242,255,.75);box-shadow:inset 0 0 38px rgba(220,250,255,.8),0 0 26px rgba(100,210,240,.45);
    backdrop-filter:blur(1.5px) saturate(.65)}
  .hoarfrost-sheet::before{content:"";position:absolute;inset:-30%;opacity:.9;
    background:repeating-conic-gradient(from 12deg at 50% 50%,transparent 0 11deg,rgba(255,255,255,.7) 12deg 13deg,transparent 14deg 28deg);
    animation:iceTurn 2s linear infinite}
  .hoarfrost-sheet i{position:absolute;width:3px;height:var(--ih);left:var(--ix);top:var(--iy);
    transform:rotate(var(--ir));transform-origin:50% 100%;background:linear-gradient(transparent,#effcff);
    box-shadow:0 0 7px #bcefff;animation:iceNeedle .7s var(--id) ease-out both}
  @keyframes hoarSpread{0%{opacity:0;transform:scaleX(.02);filter:brightness(2.4)}35%{opacity:1}
    78%{transform:scaleX(1);filter:brightness(1.25)}100%{opacity:0;transform:scaleX(1.02);filter:none}}
  @keyframes iceTurn{to{transform:rotate(16deg)}}
  @keyframes iceNeedle{0%{opacity:0;transform:rotate(var(--ir)) scaleY(0)}100%{opacity:1;transform:rotate(var(--ir)) scaleY(1)}}

  .vit-storm{position:fixed;z-index:76;pointer-events:none;width:440px;height:300px;
    transform:translate(-50%,-72%);animation:stormFade 1.7s ease-out forwards}
  .vit-storm .cloud{position:absolute;width:180px;height:70px;border-radius:50%;left:var(--cx);top:var(--cy);
    background:radial-gradient(ellipse at 50% 75%,#39465c,#171d2a 58%,transparent 72%);
    filter:blur(5px);opacity:0;animation:cloudGather .72s var(--cd) ease-out forwards;
    box-shadow:0 18px 35px rgba(5,8,14,.8)}
  .vit-storm .lightning{position:absolute;left:50%;top:78px;width:34px;height:190px;
    transform:translateX(-50%);opacity:0;background:linear-gradient(180deg,#e8f7ff,#8ed7ff 55%,#fff);
    clip-path:polygon(48% 0,76% 0,57% 38%,88% 38%,31% 100%,43% 52%,12% 52%);
    filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 22px #75cfff);
    animation:vitBolt .72s .62s steps(2,end) forwards}
  .vit-storm .groundflash{position:absolute;left:50%;top:250px;width:150px;height:35px;border-radius:50%;
    transform:translate(-50%,-50%) scale(.1);opacity:0;background:#dff6ff;box-shadow:0 0 40px 18px #8ed7ff;
    animation:groundFlash .55s .8s ease-out forwards}
  @keyframes cloudGather{0%{opacity:0;transform:translate(var(--from),-30px) scale(.5)}100%{opacity:.94;transform:none}}
  @keyframes vitBolt{0%,16%,35%{opacity:0}8%,25%,45%,72%{opacity:1}100%{opacity:0}}
  @keyframes groundFlash{35%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}
  @keyframes stormFade{0%,72%{opacity:1}100%{opacity:0}}
  .euth-scene{position:fixed;inset:0;z-index:89;pointer-events:none;overflow:hidden;
    background:radial-gradient(circle at 50% 48%,rgba(255,253,220,.24),rgba(5,7,13,.92) 48%,#020308 78%);
    animation:euthScene 3.2s ease-out forwards}
  .euth-light{position:absolute;left:50%;top:48%;width:150px;height:150px;border-radius:50%;
    transform:translate(-50%,-50%);background:#fffde1;box-shadow:0 0 45px 18px #fff7b0,0 0 150px 65px rgba(255,243,170,.75);
    animation:euthLight 2.35s ease-in forwards}
  .euth-wing{position:absolute;top:18%;width:48%;height:66%;background:linear-gradient(135deg,#151523,#020308 68%);
    filter:drop-shadow(0 0 28px rgba(75,55,115,.8));animation:euthWing 2.2s cubic-bezier(.2,.75,.2,1) forwards}
  .euth-wing.left{left:-7%;transform-origin:100% 50%;clip-path:polygon(0 8%,100% 42%,72% 52%,100% 62%,0 96%,28% 53%)}
  .euth-wing.right{right:-7%;transform-origin:0 50%;clip-path:polygon(100% 8%,0 42%,28% 52%,0 62%,100% 96%,72% 53%)}
  .euth-shadow{position:absolute;left:50%;top:48%;width:8px;height:34px;border-radius:60% 0;
    background:#181125;box-shadow:0 0 10px #553b78;opacity:0;
    animation:euthShadow 1s var(--ed) cubic-bezier(.12,.75,.2,1) forwards}
  .euth-name{position:absolute;left:0;right:0;bottom:14%;text-align:center;font:34px var(--serif);letter-spacing:.08em;
    color:#e9e1ff;text-shadow:0 0 24px #7656a5;opacity:0;animation:euthName 1.25s 1.7s ease-out forwards}
  .erato-scene{background:radial-gradient(circle at 50% 48%,rgba(255,166,190,.2),rgba(18,5,13,.94) 48%,#050207 78%)}
  .erato-scene .euth-light{background:#ffd9e4;box-shadow:0 0 45px 18px #ff9fb9,0 0 150px 65px rgba(215,74,112,.72)}
  .erato-scene .euth-wing{background:linear-gradient(135deg,#341321,#08030a 68%);filter:drop-shadow(0 0 28px rgba(190,55,98,.85))}
  .erato-scene .euth-shadow{background:#3b1022;box-shadow:0 0 10px #b93d69}
  .erato-scene .euth-name{color:#ffd9e4;text-shadow:0 0 24px #c33e6a}
  @keyframes euthScene{0%,78%{opacity:1}100%{opacity:0}}
  @keyframes euthLight{0%,25%{transform:translate(-50%,-50%) scale(1);opacity:1}72%{transform:translate(-50%,-50%) scale(.16);opacity:.8}100%{transform:translate(-50%,-50%) scale(2.8);opacity:0;background:#2b163e}}
  @keyframes euthWing{0%{transform:scaleX(.25);opacity:0}22%{opacity:1}70%{transform:scaleX(1)}100%{transform:scaleX(1.18);opacity:0}}
  @keyframes euthShadow{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--er)) scale(.1)}30%{opacity:1}
    100%{opacity:0;transform:translate(calc(-50% + var(--ex)),calc(-50% + var(--ey))) rotate(calc(var(--er) + 160deg)) scale(1.8)}}
  @keyframes euthName{0%{opacity:0;transform:translateY(16px);letter-spacing:.22em}100%{opacity:1;transform:none;letter-spacing:.08em}}
  .thianna-jaw-scene{position:fixed;inset:0;z-index:91;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 50% 52%,rgba(20,35,72,.3),rgba(0,0,5,.96) 58%);animation:thiannaFade 2.4s ease-out forwards}
  .thianna-jaw{position:absolute;left:50%;width:78vw;height:47vh;transform:translateX(-50%);background:linear-gradient(180deg,#edf7ff,#5378bb 15%,#090d1b 62%,#02030a);filter:drop-shadow(0 0 28px #2d5fba);clip-path:polygon(0 0,100% 0,88% 40%,72% 30%,58% 52%,50% 25%,42% 52%,28% 30%,12% 40%)}
  .thianna-jaw.top{top:-46vh;animation:jawTop 1.35s cubic-bezier(.16,.8,.22,1) forwards}
  .thianna-jaw.bottom{bottom:-46vh;transform:translateX(-50%) rotate(180deg);animation:jawBottom 1.35s cubic-bezier(.16,.8,.22,1) forwards}
  .thianna-name{position:absolute;inset:auto 0 16%;text-align:center;color:#dff6ff;font:34px var(--serif);letter-spacing:.12em;text-shadow:0 0 22px #4f8dff;opacity:0;animation:thiannaName .6s 1.45s ease-out forwards}
  @keyframes jawTop{0%{transform:translate(-50%,-12vh) scaleY(.6);opacity:0}35%{opacity:1}100%{transform:translate(-50%,40vh) scaleY(1)}}
  @keyframes jawBottom{0%{transform:translate(-50%,12vh) rotate(180deg) scaleY(.6);opacity:0}35%{opacity:1}100%{transform:translate(-50%,-40vh) rotate(180deg) scaleY(1)}}
  @keyframes thiannaFade{0%,72%{opacity:1}100%{opacity:0}}
  @keyframes thiannaName{to{opacity:1;letter-spacing:.2em}}

  .yss-bond{position:fixed;width:520px;height:390px;z-index:77;pointer-events:none;transform:translate(-50%,-54%);
    animation:yssFade 2.75s ease-out forwards;filter:drop-shadow(0 0 18px rgba(133,224,152,.5))}
  .yss-bond::before{content:"";position:absolute;left:50%;top:51%;width:430px;height:250px;border-radius:50%;
    transform:translate(-50%,-50%) scale(.2);opacity:0;background:radial-gradient(ellipse,rgba(218,255,217,.22),rgba(72,34,112,.18) 45%,transparent 72%);
    box-shadow:0 0 80px rgba(111,211,128,.42);animation:yssHalo 2.2s .25s ease-out forwards}
  .yss-bond .soul{position:absolute;top:40px;width:195px;height:190px;opacity:0;
    filter:drop-shadow(0 0 16px var(--yc));animation:yssSoul 1.35s cubic-bezier(.15,.75,.18,1) forwards}
  .yss-bond .soul.left{left:54px;--from:-150px;clip-path:polygon(3% 48%,36% 8%,72% 30%,100% 47%,73% 48%,91% 78%,48% 60%,16% 94%,27% 56%);
    background:linear-gradient(120deg,transparent,#4d9b5a 34%,#b5ef9e 56%,#1f542e)}
  .yss-bond .soul.right{right:54px;--from:150px;animation-delay:.12s;clip-path:polygon(97% 48%,64% 8%,28% 30%,0 47%,27% 48%,9% 78%,52% 60%,84% 94%,73% 56%);
    background:linear-gradient(240deg,transparent,#7658a9 34%,#d8c8ff 56%,#2b1d52)}
  .yss-bond .bondcore{position:absolute;left:50%;top:51%;width:58px;height:58px;border-radius:50%;
    transform:translate(-50%,-50%) scale(.1);background:#efffe7;box-shadow:0 0 28px #9bea93,0 0 70px #7658a9;
    animation:yssCore .9s .65s ease-out forwards}
  .yss-bond .bondring{position:absolute;left:50%;top:51%;width:90px;height:90px;border:3px double #c9f8b9;border-radius:50%;
    transform:translate(-50%,-50%) scale(.2);opacity:0;animation:yssRing 1.2s .72s ease-out forwards}
  .yss-bond .dragon{position:absolute;left:50%;top:49%;width:330px;height:230px;transform:translate(-50%,-50%) scale(.25);opacity:0;
    background:linear-gradient(90deg,#3a7c49,#d9ffd0 46%,#e8dcff 54%,#5f438b);clip-path:polygon(50% 25%,42% 4%,48% 13%,52% 13%,58% 4%,55% 26%,94% 8%,73% 43%,98% 62%,65% 55%,74% 96%,51% 67%,50% 98%,49% 67%,26% 96%,35% 55%,2% 62%,27% 43%,6% 8%,45% 26%);
    filter:drop-shadow(0 0 15px #caffc1);animation:yssDragon 1.55s .52s cubic-bezier(.15,.8,.2,1) forwards}
  .yss-bond .spark{position:absolute;left:50%;top:51%;width:4px;height:115px;border-radius:50%;background:linear-gradient(transparent,#fff,transparent);
    box-shadow:0 0 9px var(--yc);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(var(--ya));opacity:0;animation:yssSpark .85s var(--yd) ease-out forwards}
  @keyframes yssSoul{0%{opacity:0;transform:translateX(var(--from)) scale(.35) rotate(var(--yr))}45%{opacity:1}75%{transform:translateX(0) scale(1.12)}100%{opacity:.95;transform:none}}
  @keyframes yssCore{45%{transform:translate(-50%,-50%) scale(1.1)}100%{transform:translate(-50%,-50%) scale(.7);opacity:0}}
  @keyframes yssRing{25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(2.7) rotate(120deg)}}
  @keyframes yssDragon{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg)}48%{opacity:1;transform:translate(-50%,-50%) scale(1.14) rotate(3deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
  @keyframes yssSpark{12%{opacity:1}100%{opacity:0;transform:translate(-50%,-100%) rotate(var(--ya)) scaleY(1.8)}}
  @keyframes yssHalo{25%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
  @keyframes yssFade{0%,78%{opacity:1}100%{opacity:0}}

  .ever-scene{position:fixed;z-index:78;pointer-events:none;width:430px;height:430px;transform:translate(-50%,-62%);animation:everScene 3s ease-out forwards}
  .ever-scene .trunk{position:absolute;left:50%;bottom:42px;width:74px;height:285px;transform:translateX(-50%) scaleY(.05);transform-origin:50% 100%;
    border-radius:60% 40% 24% 28%;background:linear-gradient(90deg,#183b20,#75b45d 48%,#254b26 72%,#102817);box-shadow:0 0 24px #6fc56e;
    clip-path:polygon(30% 100%,15% 82%,39% 58%,20% 38%,44% 45%,48% 0,58% 42%,86% 25%,66% 61%,89% 82%,69% 100%);animation:everRise 1.45s .18s cubic-bezier(.12,.75,.2,1) forwards}
  .ever-scene .crown{position:absolute;left:50%;top:48px;width:290px;height:210px;border-radius:50%;transform:translateX(-50%) scale(.05);opacity:0;
    background:radial-gradient(circle at 40% 35%,#d8f2a2,#5aa963 28%,#255932 62%,transparent 68%);filter:drop-shadow(0 0 22px #78d27d);animation:everCrown 1.35s .55s ease-out forwards}
  .ever-scene .root{position:absolute;left:50%;bottom:50px;width:210px;height:8px;border-radius:50%;transform-origin:0 50%;transform:rotate(var(--era)) scaleX(.03);background:linear-gradient(90deg,#bbef99,#397a3f,transparent);box-shadow:0 0 8px #68c66e;animation:everRoot 1.1s var(--erd) ease-out forwards}
  .ever-link{position:fixed;inset:0;width:100vw;height:100vh;z-index:77;pointer-events:none;overflow:visible}
  .ever-link path{fill:none;stroke:#72d47b;stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 7px #9bea93);animation:everLink 1.6s .65s ease-out forwards}
  .ever-link path.core{stroke:#e5ffd2;stroke-width:2.2;animation-delay:.74s}
  @keyframes everRise{65%{transform:translateX(-50%) scaleY(1.08)}100%{transform:translateX(-50%) scaleY(1)}}
  @keyframes everCrown{35%{opacity:1;transform:translateX(-50%) scale(1.13)}100%{opacity:.88;transform:translateX(-50%) scale(1)}}
  @keyframes everRoot{70%{transform:rotate(var(--era)) scaleX(1);opacity:1}100%{transform:rotate(var(--era)) scaleX(1.15);opacity:0}}
  @keyframes everLink{0%{stroke-dashoffset:1;opacity:0}20%{opacity:1}75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
  @keyframes everScene{0%,78%{opacity:1}100%{opacity:0}}

  /* ---------- the end of it ---------- */
  #overlay{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;
    background:radial-gradient(ellipse at 50% 45%, rgba(10,14,24,.86), rgba(4,6,11,.97));
    backdrop-filter:blur(5px)}
  #overlay.on{display:flex;animation:ovin .8s ease-out}
  @keyframes ovin{from{opacity:0}to{opacity:1}}
  .ovbox{text-align:center;padding:40px 44px;max-width:760px;max-height:94vh;overflow-y:auto}
  .ovbox h1{font-family:var(--serif);font-size:44px;font-weight:400;margin:0;color:var(--oc);
    text-wrap:balance;line-height:1.1;text-shadow:0 4px 40px rgba(0,0,0,.9)}
  .ovbox p{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--dim);margin:16px 0 34px}
  .ovhighlights{display:flex;flex-direction:column;gap:8px;margin:-14px 0 28px;text-align:left}
  #replaymodal{position:fixed;inset:0;z-index:101;display:none;place-items:center;padding:18px;background:rgba(2,4,8,.94);backdrop-filter:blur(6px)}
  #replaymodal.on{display:grid}.replaybox{width:min(1120px,97vw);height:min(840px,94vh);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--gold-dim);border-top:3px solid var(--gold);border-radius:6px;background:#0b1019;box-shadow:0 30px 100px #000}
  .replayhead,.replaytools{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--rule)}.replayhead h2{margin:0;flex:1;font:24px var(--serif);font-weight:400}
  .replaytools{flex-wrap:wrap}.replaytools select,.replaytools button{border:1px solid var(--rule);border-radius:3px;background:#080c14;color:var(--ink);padding:7px 9px;font:8px var(--mono);letter-spacing:.06em;text-transform:uppercase}
  .replaytools button{cursor:pointer}.replaytools button:hover{border-color:var(--gold-dim);color:var(--gold)}#replaystep{margin-left:auto;color:var(--gold);font:9px var(--mono)}
  .replayevent{padding:9px 15px;border-bottom:1px solid var(--rule);color:#aab4c7;font-size:11px}.replayevent b{color:var(--gold)}
  .replaystate{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}.replayseat{border:1px solid #273248;border-radius:4px;padding:10px;background:#080c14}.replayseat h3{margin:0 0 7px;font:17px var(--serif);font-weight:400}.replayseat h3 span{float:right;color:var(--gold);font:9px var(--mono)}
  .replayzone{margin-top:7px}.replayzone b{display:block;margin-bottom:3px;color:#69758b;font:7px var(--mono);letter-spacing:.1em;text-transform:uppercase}.replaycards{display:flex;flex-wrap:wrap;gap:3px}.replaycard{padding:3px 5px;border-left:2px solid var(--fac,#657089);border-radius:2px;background:#121a27;color:#b9c2d2;font-size:8.5px}.replaycard.hidden{border-color:#3d4658;color:#657089}
  @media(max-width:700px){.replaystate{grid-template-columns:1fr}.replaytools{align-items:stretch}#replaystep{width:100%;margin-left:0}}
  .ovh-row{display:flex;align-items:center;gap:12px;padding:10px 13px;border:1px solid var(--rule);
    border-radius:5px;background:rgba(255,255,255,.03)}
  .ovh-row i{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
    background:rgba(220,179,92,.12);color:var(--gold);font-size:13px;font-style:normal}
  .ovh-row div{flex:1;min-width:0}
  .ovh-row b{display:block;font:8px var(--mono);letter-spacing:.14em;text-transform:uppercase;
    color:#7d8aa0;margin-bottom:2px}
  .ovh-row span{font-family:var(--serif);font-size:13.5px;color:var(--ink);line-height:1.4}
  .ovrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .ovrow .go{padding:14px 26px;font-size:9.5px}

  /* lives inside the pause menu's Settings section now, not floating over the board */
  .volume-control{display:flex;align-items:center;gap:8px;width:100%;
        min-width:0;padding:7px 9px;border:1px solid var(--rule);border-radius:4px;
        background:rgba(8,11,19,.9);box-shadow:0 6px 22px rgba(0,0,0,.42)}
  #mute{width:28px;height:26px;display:grid;place-items:center;flex:none;cursor:pointer;color:var(--dim);
        border:1px solid var(--rule);border-radius:3px;background:rgba(255,255,255,.025);
        font:13px var(--mono);padding:0}
  #mute:hover,#mute.on{color:var(--gold);border-color:var(--gold-dim)}
  #volume{flex:1;min-width:0;height:18px;accent-color:var(--gold);cursor:pointer}
  #volume::-webkit-slider-runnable-track{height:3px;border-radius:99px;background:linear-gradient(90deg,var(--gold-dim),#263149)}
  #volume::-webkit-slider-thumb{margin-top:-5px}
  #volumeValue{min-width:34px;color:var(--dim);font:8px var(--mono);letter-spacing:.06em;text-align:right}

  /* ---------- cards ---------- */
  .card{width:144px;height:204px;border-radius:8px;flex:none;position:relative;cursor:pointer;
        padding:9px 8px 8px;display:flex;flex-direction:column;
        background:linear-gradient(170deg,#232d42,#111726);
        border:1px solid var(--rar,var(--rule));
        box-shadow:0 6px 18px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.4);
        transition:transform .13s ease, box-shadow .13s}
  .hand .card:hover{transform:translateY(-30px) scale(1.1);z-index:30;
        box-shadow:0 20px 42px rgba(0,0,0,.8), 0 0 0 1px var(--fac,var(--gold))}
  .card.illuminated,.tcardwrap .card.illuminated{border-color:#eef7ff!important;box-shadow:0 0 0 1px #fff9,0 0 19px #cceaffaa,inset 0 0 18px #e9f6ff1c!important;filter:brightness(1.08)}
  .card.illuminated::after{content:"ILLUMINATED";position:absolute;top:3px;right:5px;color:#f7fbff;font:600 5px var(--mono);letter-spacing:.12em;text-shadow:0 0 7px #c9eaff;pointer-events:none}
  .arcane-damage{display:inline-block;color:#bff8ff;font-weight:800;text-shadow:0 0 4px #65dfff,0 0 10px #745cff,0 0 18px #be4dff;animation:arcaneNumberPulse 1.35s ease-in-out infinite}
  .arcane-damage i{font:700 7px var(--mono);color:#e5c8ff;margin-left:3px}
  @keyframes arcaneNumberPulse{50%{filter:brightness(1.55);transform:scale(1.08)}}
  /* unplayable: dimmed, but still legible — you must be able to read your own hand */
  .card.dead{cursor:not-allowed;filter:grayscale(.5) brightness(.72)}
  /* playable, but its Awaken would be wasted — nothing on the board to point at */
  .card.nofx{border-color:#8a6f36}
  .card.nofx .cname::after{content:" ⚠";color:#e0a33c;font-size:11px}
  .card.nofx:hover{box-shadow:0 20px 42px rgba(0,0,0,.8), 0 0 0 1px #e0a33c}
  /* Apocrypha writes a temporary false rule into genuinely blank cards. */
  .card.apocrypha-marked{overflow:visible;border-color:#8b5cf6;
        box-shadow:0 6px 18px rgba(0,0,0,.76),0 0 20px rgba(139,92,246,.4),inset 0 0 30px rgba(48,12,92,.46)}
  .card.apocrypha-marked::before{border-top-color:#a855f7;filter:drop-shadow(0 0 6px #7c3aed)}
  .apocrypha-note{position:absolute;z-index:8;left:7px;right:7px;top:118px;min-height:48px;
        padding:5px 6px;border:1px solid rgba(168,85,247,.64);overflow:hidden;pointer-events:none;
        background:linear-gradient(100deg,rgba(4,0,8,.94),rgba(36,8,68,.9),rgba(2,0,5,.97));
        color:#e9d5ff;font:7.5px/1.35 var(--mono);letter-spacing:.025em;text-shadow:1px 0 #c084fc,-1px 0 #4c1d95;
        animation:apocryphaBox 2.1s steps(2,end) infinite}
  .apocrypha-note b{display:block;margin-bottom:3px;color:#c084fc;font-size:6.5px;letter-spacing:.14em;text-transform:uppercase}
  .apocrypha-note::before,.apocrypha-note::after{content:attr(data-corrupt);position:absolute;inset:5px 6px;
        opacity:.38;color:#a855f7;mix-blend-mode:screen;white-space:normal}
  .apocrypha-note::before{transform:translate(2px,-1px);clip-path:inset(0 0 62% 0);animation:apocryphaText 1.17s steps(2,end) infinite}
  .apocrypha-note::after{transform:translate(-2px,1px);clip-path:inset(58% 0 0 0);animation:apocryphaText .83s steps(2,end) infinite reverse}
  @keyframes apocryphaBox{0%,91%,100%{transform:none;filter:none}92%{transform:translateX(2px);filter:contrast(1.7)}94%{transform:translateX(-1px)}96%{transform:none}}
  @keyframes apocryphaText{0%,78%,100%{translate:0 0}80%{translate:3px -1px}84%{translate:-2px 1px}88%{translate:1px 0}}
  .card::before{content:"";position:absolute;inset:0;border-radius:7px;pointer-events:none;
        border-top:3px solid var(--fac,var(--gold))}
  .card.leg{box-shadow:0 6px 16px rgba(0,0,0,.5), inset 0 0 28px rgba(220,179,92,.15)}
  /* two factions: the top edge is split between them */
  .card.dual{border-top:0}
  .card.dual::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
        border-radius:5px 5px 0 0;
        background:linear-gradient(90deg, var(--fac) 0 50%, var(--fac2) 50% 100%)}
  /* a Blade belongs to nobody, so it is cold and it is metal */
  .card.bladecard{border-top-color:#cfd4e0;
        box-shadow:0 6px 16px rgba(0,0,0,.5), inset 0 0 28px rgba(190,205,230,.12)}
  .card.two::after{content:"⟡";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
        color:var(--vir);font-size:11px}
  /* the gem — a big, unmissable facet with its name on it */
  .gemtag{position:absolute;top:6px;right:8px;display:flex;align-items:center;gap:4px;
        font-family:var(--mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase}
  .gemtag i{width:13px;height:13px;transform:rotate(45deg);border-radius:2px;display:block;
        border:1px solid rgba(0,0,0,.55);box-shadow:0 0 10px 1px currentColor}
  .card.att{animation:attglow 1.5s ease-in-out infinite}
  @keyframes attglow{
    0%,100%{box-shadow:0 6px 16px rgba(0,0,0,.5), 0 0 0 1px var(--gemc), 0 0 14px var(--gemc)}
    50%{box-shadow:0 6px 16px rgba(0,0,0,.5), 0 0 0 2px var(--gemc), 0 0 34px var(--gemc)}}
  .card.att::after{content:"ATTUNED";position:absolute;bottom:4px;left:50%;
    transform:translateX(-50%);font-family:var(--mono);font-size:6.5px;letter-spacing:.16em;
    color:var(--gemc)}
  /* the Rank strip — what THIS card will do if you play it RIGHT NOW.
     The whole point of Rank is that the card changes under you, so the card has
     to say what it currently is, not make you count damage in your head. */
  .rkstrip{margin:4px -7px -3px;padding:4px 7px 5px;border-top:1px solid var(--rule);
        background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55));
        display:flex;gap:5px;align-items:flex-start;line-height:1.3}
  .rkstrip .sym{font-size:13px;line-height:1;color:var(--rkc);flex:none;
        text-shadow:0 0 8px var(--rkc);margin-top:1px}
  .rkstrip .now{flex:1;min-width:0}
  .rkstrip .rname{font-family:var(--mono);font-size:6.5px;letter-spacing:.14em;
        text-transform:uppercase;color:var(--rkc);display:block}
  .rkstrip .rtxt{font-size:8.5px;color:var(--ink);display:block;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rkstrip.dead .sym,.rkstrip.dead .rname{color:var(--dim);text-shadow:none}
  /* the rank pips — how far up the ladder this card is reading */
  .rkpips{display:flex;gap:2px;margin-top:2px}
  .rkpips i{width:4px;height:4px;border-radius:50%;background:var(--rule);display:block}
  .rkpips i.on{background:var(--rkc);box-shadow:0 0 5px var(--rkc)}

  .card .cost{position:absolute;top:-8px;left:-8px;width:30px;height:30px;transform:rotate(45deg);
        background:var(--mana);border:2px solid #16324e;border-radius:3px;display:grid;place-items:center}
  .card .cost span{transform:rotate(-45deg);font-family:var(--mono);font-weight:700;font-size:14px;color:#fff}
  .gem{position:absolute;top:-6px;right:-6px;width:14px;height:14px;transform:rotate(45deg);
       border-radius:2px;background:var(--rar);border:1px solid #0a0d14}
  /* card art — a clean framed window. No murky shadow bleeding into the text. */
  .cart{position:absolute;top:26px;left:6px;right:6px;height:88px;border-radius:4px;
        background-size:cover;background-position:center 18%;
        border:1px solid var(--fac,var(--gold));box-shadow:0 2px 6px rgba(0,0,0,.45)}
  .card.hasart .cname{margin-top:96px}
  .card.hasart .ctext{font-size:9px;line-height:1.3}

  .mart{position:absolute;top:20px;left:5px;right:5px;height:56px;border-radius:3px;
        background-size:cover;background-position:center 18%;
        border:1px solid var(--fac,var(--gold))}
  .m.hasart .mn{margin-top:62px}
  .m.hasart .mx{max-height:16px}

  .cname{font-family:var(--serif);font-size:13.5px;line-height:1.15;text-align:center;
         margin:11px 0 5px;min-height:32px;display:flex;align-items:center;justify-content:center;
         text-wrap:balance;padding:0 2px;position:relative}
  .ctype{font-family:var(--mono);font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;
         color:var(--fac,var(--gold));text-align:center;margin-bottom:6px}
  .ctext{font-size:10px;line-height:1.36;color:var(--dim);text-align:center;flex:1;overflow:hidden}
  .ctext b{color:var(--gold);font-weight:600}
  .ctext .emp{color:var(--moon);display:block;margin-top:4px}
  /* Bonded / Mirror: each face, clearly labelled, with its stats where you can see them */
  .sideln{text-align:left;padding:4px 0;border-top:1px solid var(--rule);line-height:1.25}
  .sideln:first-child{border-top:0;padding-top:0}
  .sideln .shead{display:flex;align-items:center;gap:3px}
  .sideln .sk{font-family:var(--mono);font-size:5.5px;letter-spacing:.1em;padding:1px 3px;
    border:1px solid;border-radius:2px;flex:none}
  .sideln .sc{display:grid;place-items:center;width:13px;height:13px;border-radius:2px;flex:none;
    background:var(--mana);color:#fff;font-family:var(--mono);font-size:8px;font-weight:700}
  .sideln b{color:var(--ink);font-size:9px;font-family:var(--serif);font-weight:400;
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* the thing that was missing: the body's actual numbers */
  .sideln .sstat{flex:none;font-family:var(--mono);font-size:10px;font-weight:700;
    color:#1a1305;background:var(--gold);border-radius:7px;padding:1px 6px;
    box-shadow:0 0 8px rgba(220,179,92,.4)}
  .sideln .sstat i{font-style:normal;opacity:.55;margin:0 1px}
  .sideln .skw{font-family:var(--mono);font-size:6px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--gold);margin-top:2px}
  .sideln .sd{color:var(--dim);font-size:7.5px;margin-top:2px}
  .stat{position:absolute;bottom:-7px;width:29px;height:29px;border-radius:50%;
        display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:14.5px;
        border:2px solid #0a0d14;font-variant-numeric:tabular-nums}
  .atk{left:-6px;background:var(--gold);color:#1a1305}
  .hlth{right:-6px;background:var(--blood);color:#fff}
  .stat.hlth{width:46px;border-radius:15px;font-size:11px;white-space:nowrap}
  .hlth.hurt{background:#e05a2a}
  .atk.up{background:#f0d089}

  /* ---------- board minions ---------- */
  .m{width:120px;height:158px;border-radius:7px;flex:none;position:relative;cursor:pointer;
     padding:6px 5px;display:flex;flex-direction:column;
     background:linear-gradient(170deg,#1e2739,#0f1524);border:1px solid var(--rar,var(--rule));
     box-shadow:0 5px 14px rgba(0,0,0,.5)}
  .m::before{content:"";position:absolute;inset:0;border-radius:7px;pointer-events:none;
     border-top:3px solid var(--fac,var(--gold))}
  .m .mn{font-family:var(--serif);font-size:11px;line-height:1.15;text-align:center;margin-top:6px;text-wrap:balance}
  .m .tr{font-family:var(--mono);font-size:6.5px;letter-spacing:.1em;text-transform:uppercase;
     color:var(--fac);text-align:center;margin-top:3px}
  .m .kw{font-family:var(--mono);font-size:6.5px;letter-spacing:.06em;text-transform:uppercase;
     color:var(--gold);text-align:center;margin-top:auto;padding-bottom:3px;line-height:1.5}
  /* READY — this can attack RIGHT NOW. A static outline was too easy to miss;
     it has to breathe, or you stop seeing it after the first turn. */
  .m.ready{animation:mready 1.7s ease-in-out infinite}
  @keyframes mready{
    0%,100%{box-shadow:0 0 0 1px var(--gold), 0 5px 18px rgba(220,179,92,.30)}
    50%    {box-shadow:0 0 0 2px var(--gold), 0 0 28px rgba(220,179,92,.65),
                        0 5px 22px rgba(220,179,92,.4)}}
  .m.ready:hover{transform:translateY(-5px)}
  /* Onslaught — it can swing the instant it lands, which is easy to miss when
     the only sign is one word buried in a line of keywords. This cannot be. */
  .m .rushglyph{position:absolute;top:50%;right:-10px;width:19px;height:19px;z-index:3;
     transform:translateY(-50%);
     display:grid;place-items:center;border-radius:50%;
     background:radial-gradient(circle at 40% 35%, #fff2b0, #d4a01e);
     border:1px solid #4a3406;color:#2a1c04;font-size:11px;font-weight:700;
     box-shadow:0 0 12px rgba(230,190,60,.85);
     animation:rushpulse 1.3s ease-in-out infinite}
  @keyframes rushpulse{
    0%,100%{transform:translateY(-50%) scale(1);    box-shadow:0 0 10px rgba(230,190,60,.65)}
    50%    {transform:translateY(-50%) scale(1.16); box-shadow:0 0 20px rgba(230,190,60,1)}}

  /* the Ashenwild's own — a body given back, wrapped in the vine that gave it */
  .m.ashvine{border-color:#d4a054;
     box-shadow:0 3px 14px rgba(0,0,0,.5), inset 0 0 22px rgba(212,160,84,.24)}
  .m.ashvine::after{content:"";position:absolute;inset:0;border-radius:7px;pointer-events:none;
     background:
       repeating-linear-gradient(115deg, transparent 0 10px, rgba(212,160,84,.18) 10px 12px),
       repeating-linear-gradient(25deg,  transparent 0 14px, rgba(212,160,84,.11) 14px 16px);
     animation:ashglow 2.6s ease-in-out infinite}
  @keyframes ashglow{0%,100%{opacity:.55} 50%{opacity:1}}
  .m .ashleaf{position:absolute;font-size:11px;line-height:1;color:#f0d67a;z-index:3;
     text-shadow:0 0 6px rgba(240,214,122,.9)}
  .m .ashleaf.tl{top:-6px;left:-6px}
  .m .ashleaf.br{bottom:-6px;right:-6px}
  .m.sel{box-shadow:0 0 0 2px var(--gold), 0 0 26px rgba(220,179,92,.55);transform:translateY(-5px)}
  .m.tgt{box-shadow:0 0 0 2px var(--blood), 0 0 22px rgba(191,67,64,.5)}
  .m.taunt{background:linear-gradient(170deg,#2b2a1e,#15140d)}
  /* Orland has stopped the world */
  .m.frozen{filter:grayscale(.55) brightness(.75)}
  .m.frozen::before{border-top-color:#9fb4c8}

  /* UNWRITTEN — it is still standing, but there is nothing left in it */
  .m.unwritten{filter:saturate(.25) brightness(.8)}
  .m.unwritten::before{border-top-color:#a855b8}
  .m.unwritten .mn{color:#9d8fb0;text-decoration:line-through;
     text-decoration-color:rgba(168,85,184,.75);text-decoration-thickness:1px}
  .m.unwritten .mart{filter:grayscale(1) contrast(.7);opacity:.3}
  .m .erased{position:absolute;inset:0;border-radius:7px;pointer-events:none;z-index:2;
     background:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(168,85,184,.16) 5px 6px);
     border:1px solid rgba(168,85,184,.55)}
  .m .erased span{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
     font-family:var(--mono);font-size:6px;letter-spacing:.18em;color:#c58fd8;
     text-shadow:0 0 6px rgba(168,85,184,.9)}

  /* the rules text, on the body itself */
  .m .mx{font-size:6.5px;line-height:1.3;color:#9fa9bd;text-align:center;padding:0 2px;
     margin-top:3px;max-height:26px;overflow:hidden}
  .m .mx b{color:var(--gold);font-weight:600}
  /* what has been done to it */
  .m .buff{position:absolute;top:-6px;left:50%;transform:translateX(-50%);
     font-family:var(--mono);font-size:8px;font-weight:700;padding:1px 5px;border-radius:8px;
     background:#2e6b3f;color:#c8f0d0;border:1px solid #1a3d24;white-space:nowrap;
     box-shadow:0 0 10px rgba(90,220,130,.4)}
  .m .buff.bad{background:#6b2e3f;color:#f0c8d0;border-color:#3d1a24;
     box-shadow:0 0 10px rgba(220,90,130,.4)}

  /* WARD — a shield, not just an outline */
  .m.ward{border-color:#8fd0ff}
  .m.ward::after{content:"";position:absolute;inset:-4px;border-radius:9px;pointer-events:none;
     border:2px solid rgba(143,208,255,.9);
     box-shadow:0 0 16px 2px rgba(143,208,255,.55), inset 0 0 18px rgba(143,208,255,.28);
     animation:wardpulse 1.9s ease-in-out infinite}
  @keyframes wardpulse{
    0%,100%{opacity:.55; transform:scale(1)}
    50%{opacity:1; transform:scale(1.035)}}
  .m .wardglyph{position:absolute;top:-9px;right:-8px;width:19px;height:19px;z-index:3;
     display:grid;place-items:center;border-radius:50%;
     background:radial-gradient(circle at 40% 35%, #d8f0ff, #4a90c0);
     border:1px solid #1b3a52;color:#0b1a26;font-size:11px;font-weight:700;
     box-shadow:0 0 12px rgba(143,208,255,.9)}

  /* ANTIMAGIC — the same shimmering shield as Ward, tuned violet instead of
     blue: spells cannot reach past it, though combat and AOE effects still can. */
  .m.antimagic{border-color:#b078e8}
  .m.antimagic::after{content:"";position:absolute;inset:-4px;border-radius:9px;pointer-events:none;
     border:2px solid rgba(176,120,232,.9);
     box-shadow:0 0 16px 2px rgba(176,120,232,.55), inset 0 0 18px rgba(176,120,232,.28);
     animation:antimagicpulse 1.9s ease-in-out infinite}
  @keyframes antimagicpulse{
    0%,100%{opacity:.55; transform:scale(1)}
    50%{opacity:1; transform:scale(1.035)}}
  .m .antimagicglyph{position:absolute;bottom:-9px;right:-8px;width:19px;height:19px;z-index:3;
     display:grid;place-items:center;border-radius:50%;
     background:radial-gradient(circle at 40% 35%, #e8d0ff, #7a3ab0);
     border:1px solid #2a1442;color:#f4e8ff;font-size:11px;font-weight:700;
     text-shadow:0 0 5px rgba(232,208,255,.9);
     box-shadow:0 0 12px rgba(176,120,232,.9)}

  /* WARDEN — it is the thing standing in the way, so it should LOOK like a wall.
     A brown tint was not enough: you could not tell at a glance what you were
     allowed to attack, which is the single question Warden exists to answer. */
  .m.taunt{background:linear-gradient(170deg,#3a3524,#1a1710);
     border-color:#b89a52;
     box-shadow:0 3px 14px rgba(0,0,0,.5), inset 0 0 20px rgba(184,154,82,.16)}
  .m.taunt::before{border-top-color:#b89a52}
  .m .wardenglyph{position:absolute;top:-9px;left:-8px;width:20px;height:20px;z-index:3;
     display:grid;place-items:center;color:#f0dda0;font-size:13px;line-height:1;
     text-shadow:0 0 6px rgba(0,0,0,.9)}
  /* the bar across the bottom: the literal wall */
  .m.taunt::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:3px;
     border-radius:2px;background:linear-gradient(90deg,transparent,#b89a52,transparent);
     opacity:.85;pointer-events:none}
  /* a Warden that is ALSO warded needs both, so the ward ring wins the ::after */
  .m.taunt.ward::after{content:"";position:absolute;inset:-4px;left:-4px;right:-4px;bottom:-4px;
     height:auto;border-radius:9px;background:none;
     border:2px solid rgba(143,208,255,.9);
     box-shadow:0 0 16px 2px rgba(143,208,255,.55), inset 0 0 18px rgba(143,208,255,.28);
     animation:wardpulse 1.9s ease-in-out infinite}

  /* VANGUARD — a shield planted beneath the body it protects. Bottom-centre
     keeps the role visible without competing with Ward or Warden. */
  .m.vanguard{border-color:#8db8e7;box-shadow:0 0 11px rgba(102,157,211,.28)}
  .m .vanguardglyph{position:absolute;top:auto;bottom:-15px;left:50%;transform:translateX(-50%);
     width:25px;height:29px;z-index:3;display:grid;place-items:center;
     background:linear-gradient(155deg,#e8f4ff 3%,#79a8d9 48%,#31547d 100%);
     border:1px solid #152d49;color:#081827;clip-path:polygon(50% 0,92% 17%,84% 72%,50% 100%,16% 72%,8% 17%);
     box-shadow:0 0 14px rgba(127,183,235,.9);filter:drop-shadow(0 2px 2px #050912)}
  .m .vanguardglyph::before{content:"";width:11px;height:12px;border-left:3px solid #102a46;border-top:3px solid #102a46;
     transform:rotate(45deg) translate(2px,2px);filter:drop-shadow(3px 3px 0 rgba(235,247,255,.52))}
  .m .kycounter{position:absolute;top:15px;right:-9px;z-index:4;
     min-width:28px;height:20px;padding:0 5px;border-radius:11px;display:grid;place-items:center;
     background:linear-gradient(180deg,#f2ead8,#b8ad96);border:1px solid #191814;
     color:#171714;font:700 9px var(--mono);box-shadow:0 0 13px rgba(235,226,205,.65)}
  .m .svark-counter{position:absolute;right:-14px;top:22px;z-index:9;min-width:36px;padding:5px 4px;border:1px solid #dcefff;border-radius:4px;background:linear-gradient(180deg,#28121a,#090d16);color:#fff;text-align:center;font:800 15px/1 var(--mono);box-shadow:0 0 0 2px #7b152b88,0 0 18px #dcefff77}
  .m .svark-counter::before{content:"WAKE";display:block;margin-bottom:3px;color:#e58a9f;font:700 6px/1 var(--mono);letter-spacing:.14em}
  .m .kunai-counter{position:absolute;right:-12px;bottom:22px;z-index:10;min-width:31px;padding:5px 4px;border:1px solid #a7ebff;border-radius:50%;background:radial-gradient(circle,#17364b,#070b15 72%);color:#dcf8ff;text-align:center;font:900 13px/1 var(--mono);box-shadow:0 0 0 2px #436e8588,0 0 16px #71d9ff99;transform:rotate(-8deg)}
  .m .kunai-counter::before{content:"KUNAI";display:block;margin-bottom:3px;color:#8bdcf4;font:700 5px/1 var(--mono);letter-spacing:.11em}
  .en .escape-counter{position:absolute;inset:31px 8px 8px;display:flex;align-items:center;justify-content:center;border:1px solid #dcb35c88;background:linear-gradient(90deg,#09101ddd,#13243ddd,#09101ddd);color:#f4d675;font:900 24px/1 var(--serif);text-shadow:0 0 14px #7fd8e8;box-shadow:inset 0 0 20px #69bce033}
  .en .escape-counter small{margin-left:7px;color:#b8c7d9;font:700 7px/1.2 var(--mono);letter-spacing:.13em;text-transform:uppercase}

  /* LUTHIEL — haunted, not funereal. Near-black with ghost-white smoke
     threading through it. Whatever he is shielding gets the same wisps. */
  .shadowbound{background:linear-gradient(170deg,#1a1a1e,#000000) !important;border-color:#e8e8f0 !important;
     box-shadow:0 3px 18px rgba(0,0,0,.7), inset 0 0 22px rgba(232,232,240,.14)}
  .shadowbound::before{content:"";position:absolute;inset:-6px;border-radius:10px;pointer-events:none;
     border:1px solid rgba(232,232,240,.45);opacity:.7;animation:shadowdrift 3.4s ease-in-out infinite}
  .m.deathless::after{content:"";position:absolute;inset:-5px;border-radius:9px;pointer-events:none;z-index:2;
     background:
       radial-gradient(circle at 22% 100%, rgba(255,255,255,.6), transparent 55%),
       radial-gradient(circle at 55% 100%, rgba(232,232,240,.5), transparent 60%),
       radial-gradient(circle at 80% 100%, rgba(0,0,0,.6), transparent 55%);
     filter:blur(3px);
     animation:shadowwisp 2.4s ease-in-out infinite}
  .m .shadowglyph{position:absolute;top:-9px;left:50%;transform:translateX(-50%);z-index:3;
     font-size:13px;color:#f4f4fa;text-shadow:0 0 9px rgba(255,255,255,.95),0 0 4px #000}
  @keyframes shadowdrift{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:.85;transform:translateY(-2px)}}
  @keyframes shadowwisp{0%{opacity:.5;transform:translateY(0) scaleY(1)}50%{opacity:.95;transform:translateY(-9px) scaleY(1.15)}100%{opacity:.5;transform:translateY(0) scaleY(1)}}

  /* BLOODSTEEL — the Red Artisan's remade cards. Just the border: a metallic,
     blood-red edge, so a Vampire-Construct reads as one metal without the
     card face itself getting harder to read. */
  .card.bloodsteel,.m.bloodsteel{
     border-width:2px !important;
     border-image:linear-gradient(155deg,#e8b8ac,#c96b5e 32%,#7a2620 55%,#c96b5e 78%,#e8b8ac) 1 !important;
     box-shadow:0 0 10px rgba(201,107,94,.45), inset 0 0 8px rgba(201,107,94,.18)}

  /* VAMPIRISM — it drinks. Make that obvious before it hits you, not after.
     The glyph lives on the LEFT EDGE, not the bottom-left corner: that corner is
     the Attack orb, and a badge there simply covered the number. Vampirism is a
     property of the swing, so the Attack orb itself goes crimson to say so. */
  .m.vamp{border-color:#c0455f}
  .m.vamp .mn{color:#ffc8d0}
  .m.vamp .atk{background:linear-gradient(160deg,#ff7d90,#c0455f);color:#2a0a12;
     box-shadow:0 0 14px rgba(224,69,95,.7)}
  .m .vampglyph{position:absolute;top:50%;left:-10px;width:20px;height:20px;z-index:3;
     transform:translateY(-50%);
     display:grid;place-items:center;border-radius:50%;
     background:radial-gradient(circle at 40% 35%, #ff7d90, #8c1f36);
     border:1px solid #3d0f1c;color:#2a0a12;font-size:11px;font-weight:700;
     box-shadow:0 0 12px rgba(224,69,95,.85);
     animation:vamppulse 1.6s ease-in-out infinite}
  @keyframes vamppulse{
    0%,100%{transform:translateY(-50%) scale(1);   box-shadow:0 0 10px rgba(224,69,95,.7)}
    50%    {transform:translateY(-50%) scale(1.16);box-shadow:0 0 20px rgba(224,69,95,1)}}

  /* ---------- a legendary arrives ----------
     One entrance, driven by --lc and a glyph. It has to feel heavy: rings expand,
     the glyph lands, the name is spoken, motes come off it. */
  .lgshow{position:fixed;inset:0;z-index:88;pointer-events:none;
      display:grid;place-items:center}
  .lgshow::before{content:"";position:absolute;inset:0;opacity:0;
      background:radial-gradient(ellipse 62% 56% at 50% 50%, var(--lc), rgba(6,9,15,.9) 74%);
      animation:lgveil 2.1s ease forwards}
  @keyframes lgveil{0%{opacity:0} 16%{opacity:.42} 70%{opacity:.42} 100%{opacity:0}}
  .lgring{position:absolute;width:120px;height:120px;border-radius:50%;
      border:2px solid var(--lc);opacity:0;
      box-shadow:0 0 40px var(--lc), inset 0 0 40px var(--lc);
      animation:lgring 1.3s cubic-bezier(.15,.8,.3,1) forwards}
  .lgring.two{animation-delay:.16s}
  @keyframes lgring{
    0%  {opacity:0;   transform:scale(.2)}
    22% {opacity:.95}
    100%{opacity:0;   transform:scale(4.6)}}
  .lgglyph{position:relative;font-size:110px;line-height:1;color:var(--lc);
      text-shadow:0 0 40px var(--lc), 0 0 90px var(--lc);
      animation:lgglyph 1.5s cubic-bezier(.2,1.3,.3,1) forwards}
  @keyframes lgglyph{
    0%  {opacity:0; transform:scale(2.6) rotate(-14deg)}
    26% {opacity:1; transform:scale(1) rotate(0deg)}
    78% {opacity:1}
    100%{opacity:0; transform:scale(1.1)}}
  .lgname{position:absolute;top:calc(50% + 78px);left:0;right:0;text-align:center;
      font-family:var(--serif);font-size:31px;color:#fff;opacity:0;
      text-shadow:0 2px 24px rgba(0,0,0,.9);
      animation:lgname 1.7s ease forwards;animation-delay:.24s;text-wrap:balance;padding:0 8vw}
  .lgsub{position:absolute;top:calc(50% + 122px);left:0;right:0;text-align:center;
      font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
      color:var(--lc);opacity:0;
      animation:lgname 1.7s ease forwards;animation-delay:.36s}
  @keyframes lgname{
    0%  {opacity:0; transform:translateY(12px)}
    20% {opacity:1; transform:none}
    76% {opacity:1}
    100%{opacity:0}}
  .lgshow i{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;
      background:var(--lc);opacity:0;box-shadow:0 0 12px 3px var(--lc);
      animation:lgmote 1.1s ease-out forwards}
  @keyframes lgmote{
    0%  {opacity:0; transform:translate(0,0) scale(.4)}
    20% {opacity:1}
    100%{opacity:0; transform:translate(var(--tx),var(--ty)) scale(1)}}
  .lgshow.gone{opacity:0;transition:opacity .55s ease}

  /* ---------- Mahri: the Archive opens ---------- */
  .bkshow{position:fixed;inset:0;z-index:88;pointer-events:none;
      display:grid;place-items:center;perspective:1400px}
  .bksky{position:absolute;inset:0;opacity:0;
      background:
        linear-gradient(180deg, rgba(255,150,80,.30), rgba(190,45,70,.55) 60%, rgba(30,10,16,.9)),
        radial-gradient(ellipse 60% 50% at 50% 42%, rgba(255,200,130,.55), transparent 70%);
      animation:bksky 2.6s ease forwards}
  @keyframes bksky{0%{opacity:0} 14%{opacity:1} 74%{opacity:1} 100%{opacity:0}}
  .bkbook{position:relative;width:340px;height:230px;transform-style:preserve-3d;
      animation:bkopen 2.6s cubic-bezier(.2,.8,.3,1) forwards}
  @keyframes bkopen{
    0%  {opacity:0; transform:rotateX(72deg) scale(.55)}
    22% {opacity:1; transform:rotateX(24deg) scale(1)}
    76% {opacity:1; transform:rotateX(20deg) scale(1)}
    100%{opacity:0; transform:rotateX(16deg) scale(1.06)}}
  .bkleaf{position:absolute;top:0;width:50%;height:100%;
      background:linear-gradient(160deg,#fff0d8,#ffcf9e 55%,#f6a97e);
      box-shadow:inset 0 0 40px rgba(180,80,50,.30), 0 20px 50px rgba(60,10,20,.6)}
  .bkleaf.l{left:0;  border-radius:5px 0 0 5px;transform:rotateY(9deg);transform-origin:100% 50%}
  .bkleaf.r{right:0; border-radius:0 5px 5px 0;transform:rotateY(-9deg);transform-origin:0% 50%}
  .bkspine{position:absolute;left:50%;top:-3px;bottom:-3px;width:8px;margin-left:-4px;
      background:linear-gradient(90deg,#8a3a26,#c9663f,#8a3a26);border-radius:2px;
      box-shadow:0 0 22px rgba(255,140,80,.7)}
  /* the pages that turn themselves */
  .bkpage{position:absolute;left:50%;top:0;width:50%;height:100%;
      transform-origin:0% 50%;z-index:var(--z);
      background:linear-gradient(160deg,#fff6e6,#ffdcb4 60%,#f8bd94);
      border-radius:0 5px 5px 0;
      box-shadow:0 8px 26px rgba(90,25,20,.45);
      animation:bkflip 1.15s cubic-bezier(.4,.05,.35,1) forwards;
      backface-visibility:hidden}
  @keyframes bkflip{
    0%  {transform:rotateY(0deg)}
    100%{transform:rotateY(-172deg)}}
  .bkpage span{position:absolute;left:12%;height:2px;border-radius:1px;
      background:rgba(150,70,45,.34)}
  .bkshow i{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe0b0;
      box-shadow:0 0 8px 3px rgba(255,190,120,.8);opacity:0;
      animation:dustfloat ease-in-out infinite}
  .lgname.bk{top:calc(50% + 150px);color:#fff1dc;
      text-shadow:0 0 30px rgba(255,150,80,.9), 0 2px 20px rgba(0,0,0,.9);
      animation:lgname 2.3s ease forwards;animation-delay:.7s}
  .lgsub.bk{top:calc(50% + 192px);color:#ffb98a;
      animation:lgname 2.3s ease forwards;animation-delay:.85s}
  .bkshow.gone{opacity:0;transition:opacity .6s ease}

  /* ================= the scenes =================
     Twelve pieces of theatre. They share a shell — a veil, a name, a teardown —
     and nothing else. --lc is the card's colour. */
  .scn{position:fixed;inset:0;z-index:88;pointer-events:none;overflow:hidden;
      animation:mnfade ease forwards}
  .scnveil{position:absolute;inset:0;
      background:radial-gradient(ellipse 70% 62% at 50% 50%,
        color-mix(in srgb, var(--lc) 22%, transparent), rgba(5,7,12,.92) 78%)}
  .lgname.scnname{top:auto;bottom:11%;color:#fff;
      text-shadow:0 0 30px var(--lc), 0 2px 22px rgba(0,0,0,.95);
      animation:lgname ease forwards;animation-delay:.55s}
  .lgsub.scnsub{top:auto;bottom:8%;color:var(--lc);
      animation:lgname ease forwards;animation-delay:.7s}
  .scn.gone{opacity:0;transition:opacity .7s ease}

  /* ---- forge ---- */
  .scn-forge .scnveil{background:radial-gradient(ellipse 80% 60% at 50% 82%,
      rgba(240,110,40,.30), rgba(10,5,3,.95) 74%)}
  .fgfloor{position:absolute;left:0;right:0;bottom:0;height:26%;
      background:linear-gradient(180deg, rgba(255,120,40,.30), rgba(120,30,5,.7));
      box-shadow:0 -30px 90px 20px rgba(240,110,40,.35)}
  .fgpit{position:absolute;bottom:14%;width:8%;height:38%;border-radius:50%;
      background:radial-gradient(circle,#ffd08a,#f0621e 55%,transparent 72%);
      filter:blur(5px);animation:fgpit 2.4s ease-in-out infinite}
  @keyframes fgpit{0%,100%{opacity:.45;transform:scaleY(.85)} 50%{opacity:1;transform:scaleY(1.15)}}
  .fganvil{position:absolute;left:50%;bottom:22%;width:190px;height:54px;margin-left:-95px;
      background:linear-gradient(180deg,#4a4d55,#22242a);border-radius:5px 5px 3px 3px;
      box-shadow:0 14px 40px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.14)}
  .fghammer{position:absolute;left:50%;bottom:32%;font-size:130px;line-height:1;color:#e8ecf2;
      margin-left:-65px;text-shadow:0 0 30px rgba(255,150,70,.7);
      transform-origin:50% 100%;
      animation:fghit 1.1s cubic-bezier(.4,0,.9,1) forwards;animation-delay:.15s}
  @keyframes fghit{
    0%  {opacity:0; transform:translateY(-220px) rotate(-58deg)}
    30% {opacity:1}
    62% {transform:translateY(0) rotate(0deg)}
    72% {transform:translateY(-14px) rotate(-4deg)}
    100%{opacity:1; transform:translateY(0) rotate(0deg)}}
  .fgspark{position:absolute;left:50%;bottom:30%;width:4px;height:4px;border-radius:50%;
      background:#ffd08a;opacity:0;box-shadow:0 0 12px 3px rgba(255,150,60,.95);
      animation:fgspark 1.0s ease-out forwards}
  @keyframes fgspark{
    0%  {opacity:0; transform:translate(0,0) scale(.4)}
    14% {opacity:1}
    100%{opacity:0; transform:translate(var(--tx),var(--ty)) scale(.2)}}

  /* ---- march ---- */
  .scn-march .scnveil{background:linear-gradient(180deg, rgba(60,40,12,.6), rgba(8,6,3,.95))}
  .mcsun{position:absolute;left:50%;top:26%;width:280px;height:280px;margin-left:-140px;
      border-radius:50%;background:radial-gradient(circle,#f0c060,#a06a1e 50%,transparent 70%);
      opacity:.5;filter:blur(6px);animation:mcsun 2.7s ease forwards}
  @keyframes mcsun{0%{opacity:0;transform:scale(.7)} 40%{opacity:.55;transform:scale(1)} 100%{opacity:.35}}
  .mcroad{position:absolute;left:0;right:0;bottom:0;height:38%;
      background:linear-gradient(180deg,transparent,rgba(180,130,50,.22))}
  .mcbanner{position:absolute;bottom:26%;font-size:64px;line-height:1;color:var(--lc);
      opacity:0;text-shadow:0 0 26px var(--lc);
      animation:mcban 2.4s cubic-bezier(.2,.8,.3,1) forwards}
  @keyframes mcban{
    0%  {opacity:0; transform:translateX(-140px) translateY(20px) scale(var(--sc))}
    22% {opacity:1}
    80% {opacity:1}
    100%{opacity:0; transform:translateX(120px) translateY(-8px) scale(var(--sc))}}
  .mcman{position:absolute;width:13px;height:34px;border-radius:6px 6px 2px 2px;
      background:#08060a;box-shadow:0 0 14px rgba(0,0,0,.9);
      transform:scale(var(--sc));animation:mcstep .55s ease-in-out infinite alternate}
  @keyframes mcstep{from{transform:scale(var(--sc)) translateY(0)}
                    to  {transform:scale(var(--sc)) translateY(-5px)}}

  /* ---- bloom ---- */
  .scn-bloom .scnveil{background:radial-gradient(ellipse 80% 70% at 50% 90%,
      rgba(60,140,70,.35), rgba(4,10,6,.94) 74%)}
  .blvine{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .blvine path{fill:none;stroke:var(--stem,var(--lc));stroke-width:4;stroke-linecap:round;
      filter:drop-shadow(0 0 8px var(--stemglow,var(--lc)));
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
      animation:blgrow 1.5s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes blgrow{to{stroke-dashoffset:0}}
  .blflower{position:absolute;color:var(--lc);line-height:1;opacity:0;
      text-shadow:0 0 20px var(--lc);
      animation:blpop .9s cubic-bezier(.2,1.5,.4,1) forwards}
  @keyframes blpop{
    0%  {opacity:0; transform:scale(0) rotate(-40deg)}
    100%{opacity:.95; transform:scale(1) rotate(0)}}
  /* Rani's valley grows out of violet desert dust. The petals are blue, but
     their centres hold the cold white-blue light of a crowded night sky. */
  .scn-bloom.bloom-starlight .scnveil{background:
      radial-gradient(ellipse 75% 62% at 50% 92%,rgba(94,69,126,.48),rgba(8,8,24,.96) 76%)}
  .blflower.starlight{width:var(--fs);height:var(--fs);font-size:0!important;
      color:#70b9ff;text-shadow:none;filter:drop-shadow(0 0 9px rgba(83,151,255,.8))}
  .blflower.starlight i{position:absolute;left:50%;top:50%;width:34%;height:52%;
      border-radius:75% 75% 55% 55%;transform-origin:50% 100%;
      transform:translate(-50%,-100%) rotate(var(--r));
      background:radial-gradient(ellipse at 50% 88%,#b9dcff 0 10%,#5b9ee8 42%,#244fba 100%);
      box-shadow:inset 0 0 5px rgba(220,242,255,.75),0 0 7px rgba(50,116,245,.55)}
  .blflower.starlight b{position:absolute;left:50%;top:50%;width:24%;height:24%;
      transform:translate(-50%,-50%);border-radius:50%;background:#e8fbff;
      box-shadow:0 0 4px #fff,0 0 11px #7fe5ff,0 0 22px #688cff}
  .bldust{position:absolute;width:3px;height:3px;border-radius:50%;opacity:0;
      background:#a58ab9;box-shadow:0 0 7px #8264a0;
      animation:bldrift 2.2s ease-out forwards}
  @keyframes bldrift{0%{opacity:0;transform:translateY(18px) scale(.5)}
      35%{opacity:.75}100%{opacity:0;transform:translateY(-90px) translateX(var(--dx)) scale(1.4)}}

  /* ---- The Viridian Paradise: the deck blossoms outward, then the empty
     space where it stood opens into a green portal ---- */
  .paradise-portal{position:fixed;left:0;top:0;width:0;height:0;z-index:1200;pointer-events:none;opacity:1}
  .paradise-portal.gone{transition:opacity .5s ease;opacity:0}
  .portal-ring{position:absolute;left:var(--x);top:var(--y);width:10px;height:10px;
      transform:translate(-50%,-50%);border-radius:50%;border:3px solid #6fbf73;
      box-shadow:0 0 24px 6px rgba(111,191,115,.65);opacity:0;
      animation:portalOpen 1.1s cubic-bezier(.2,.8,.3,1) forwards}
  .portal-ring.two{border-color:#bff0c8;animation-delay:.15s;animation-duration:1.3s}
  @keyframes portalOpen{0%{width:10px;height:10px;opacity:0}
      30%{opacity:.95}100%{width:260px;height:260px;opacity:.35}}
  .portal-core{position:absolute;left:var(--x);top:var(--y);width:6px;height:6px;
      transform:translate(-50%,-50%);border-radius:50%;background:#eafff0;
      box-shadow:0 0 20px 8px rgba(200,255,210,.9);opacity:0;
      animation:portalCore 1.5s ease forwards}
  @keyframes portalCore{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
      35%{opacity:1;transform:translate(-50%,-50%) scale(1)}
      100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
  .portal-petal{position:absolute;left:var(--x);top:var(--y);width:14px;height:20px;
      margin-left:-7px;margin-top:-10px;border-radius:70% 70% 40% 40%;
      background:linear-gradient(180deg,#bdf0c4,#5a9f5f);
      transform-origin:50% 100%;opacity:0;
      animation:portalPetal 1.4s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes portalPetal{
      0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.3)}
      20%{opacity:.95}
      100%{opacity:0;transform:rotate(var(--a)) translateY(-160px) scale(1.1)}}

  /* ---- ascend ---- */
  .scn-ascend .scnveil{background:linear-gradient(180deg, rgba(120,10,35,.5), rgba(10,2,6,.95))}
  .ascol{position:absolute;bottom:0;width:var(--w);height:100%;opacity:0;
      background:linear-gradient(0deg, var(--lc), transparent 78%);
      filter:blur(9px);animation:ascol ease-out forwards}
  @keyframes ascol{
    0%  {opacity:0; transform:translateY(40%) scaleY(.3)}
    35% {opacity:.55}
    100%{opacity:0; transform:translateY(-10%) scaleY(1.2)}}
  .ashalo{position:absolute;left:50%;top:40%;width:200px;height:200px;margin:-100px 0 0 -100px;
      border-radius:50%;border:2px solid var(--lc);opacity:0;
      box-shadow:0 0 50px var(--lc), inset 0 0 50px var(--lc);
      animation:ashalo 2.6s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:.7s}
  .ashalo.two{animation-delay:1.0s}
  @keyframes ashalo{
    0%  {opacity:0; transform:scale(.3) rotate(0)}
    30% {opacity:.9}
    100%{opacity:0; transform:scale(2.4) rotate(90deg)}}
  .asglyph{position:absolute;left:50%;top:40%;font-size:96px;line-height:1;color:var(--lc);
      transform:translate(-50%,-50%);opacity:0;text-shadow:0 0 44px var(--lc);
      animation:lgglyph 2.4s cubic-bezier(.2,1.3,.3,1) forwards;animation-delay:.8s}
  .asdrop{position:absolute;width:3px;height:11px;border-radius:2px;background:var(--lc);
      opacity:0;box-shadow:0 0 10px var(--lc);animation:asdrop ease-in-out infinite}
  @keyframes asdrop{
    0%  {opacity:0; transform:translateY(0)}
    20% {opacity:.9}
    100%{opacity:0; transform:translateY(-60vh)}}

  /* ---- unwrite ---- */
  .scn-unwrite .scnveil{background:linear-gradient(180deg, rgba(30,22,50,.75), rgba(6,5,12,.96))}
  .uwgrid{position:absolute;inset:6% 4%;display:flex;flex-direction:column;
      justify-content:space-around}
  .uwline{display:flex;justify-content:space-around;opacity:0;
      animation:uwin .5s ease forwards}
  @keyframes uwin{to{opacity:1}}
  .uwline span{font-family:var(--serif);font-size:26px;color:var(--lc);opacity:.85;
      text-shadow:0 0 14px var(--lc);
      animation:uwerase .7s ease forwards;animation-delay:var(--e)}
  @keyframes uwerase{
    0%  {opacity:.85; filter:blur(0)}
    60% {opacity:.5;  filter:blur(3px) }
    100%{opacity:0;   filter:blur(12px); transform:translateY(-10px) scale(1.4)}}
  .uwglyph{position:absolute;left:50%;top:50%;font-size:120px;line-height:1;color:#fff;
      transform:translate(-50%,-50%);opacity:0;text-shadow:0 0 50px var(--lc);
      animation:lgglyph 2.2s cubic-bezier(.2,1.3,.3,1) forwards;animation-delay:1.2s}

  /* ---- missing author / Blank Ledger corruption ---- */
  .scn-glitch .scnveil{background:#000;animation:crashBlack 3.8s steps(1,end) forwards}
  @keyframes crashBlack{0%,48%{background:#000}49%,100%{background:repeating-linear-gradient(179deg,rgba(2,0,5,.99) 0 13px,rgba(28,7,52,.97) 14px 16px)}}
  .crashpanel{position:absolute;z-index:4;left:50%;top:48%;width:min(620px,86vw);transform:translate(-50%,-50%);
      color:#d7d7dc;background:#17171b;border:1px solid #4b4b52;border-radius:7px;overflow:hidden;
      box-shadow:0 26px 90px #000,0 0 0 100vmax rgba(0,0,0,.7);font-family:Segoe UI,Arial,sans-serif;
      animation:crashPanel 3.45s steps(1,end) forwards}
  .crashbar{height:34px;display:flex;align-items:center;padding:0 12px;background:#24242a;border-bottom:1px solid #393941;font-size:12px}
  .crashbar::before{content:"";width:15px;height:15px;margin-right:8px;border-radius:3px;background:#7134a8;box-shadow:inset 0 0 0 2px #b990dc}
  .crashbar::after{content:"×";margin-left:auto;font-size:18px;color:#aaa}
  .crashbody{padding:26px 28px 22px}.crashtitle{font-size:21px;margin-bottom:10px;color:#f1f1f4}
  .crashcopy{font-size:13px;line-height:1.55;color:#b9b9c2}.crashcode{margin:18px 0 15px;padding:12px 14px;
      color:#d8b4fe;background:#09080b;border-left:3px solid #8b5cf6;font:11px/1.55 var(--mono);white-space:pre-line}
  .crashprogress{height:3px;background:#303038;overflow:hidden}.crashprogress::after{content:"";display:block;width:34%;height:100%;background:#9b67cf;
      animation:crashProgress 1.35s ease-in-out infinite}.crashactions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
  .crashbutton{padding:7px 14px;border:1px solid #555560;border-radius:3px;background:#292930;color:#ddd;font-size:11px}
  .crashbutton.primary{background:#69339a;border-color:#a770d0}.crashrecovery{margin-top:9px;color:#aaa;font:10px var(--mono)}
  @keyframes crashProgress{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}
  @keyframes crashPanel{0%,46%{opacity:1;filter:none}47%{transform:translate(-49%,-51%) skewX(8deg);filter:contrast(2)}
      49%{transform:translate(-51%,-48%) skewX(-13deg);filter:hue-rotate(35deg) contrast(2.5)}50%,100%{opacity:0}}
  .glitchrows{position:absolute;inset:4%;display:flex;flex-direction:column;justify-content:space-around;overflow:hidden;animation:glitchRowsIn 3.8s steps(1,end) forwards}
  @keyframes glitchRowsIn{0%,48%{visibility:hidden}49%,100%{visibility:visible}}
  .glitchrow{color:#c084fc;font:700 13px var(--mono);letter-spacing:.12em;white-space:nowrap;opacity:0;
      text-shadow:3px 0 #7c3aed,-2px 0 #241044;animation:glitchRow 1.2s steps(3,end) forwards}
  @keyframes glitchRow{0%{opacity:0;transform:translateX(-18%);clip-path:inset(0 100% 0 0)}35%{opacity:.8;clip-path:inset(0 0 0 0)}68%{transform:translateX(2%)}71%{transform:translateX(-3%) skewX(8deg)}76%,100%{opacity:.42;transform:none}}
  .glitchvoid{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font:900 clamp(80px,20vw,260px) var(--mono);
      color:#050108;-webkit-text-stroke:2px #a855f7;text-shadow:8px 0 #3b0764,-7px 0 #d8b4fe,0 0 70px #7c3aed;
      animation:glitchVoid 1.6s steps(2,end) infinite}
  @keyframes glitchVoid{0%,82%,100%{translate:0 0;clip-path:inset(0)}84%{translate:9px -3px;clip-path:inset(13% 0 61% 0)}88%{translate:-7px 4px;clip-path:inset(58% 0 12% 0)}92%{translate:2px 0;clip-path:inset(0)}}
  .glitchcursor{position:absolute;left:50%;top:63%;width:2px;height:58px;background:#e9d5ff;box-shadow:0 0 20px #a855f7;
      animation:glitchCursor .18s steps(1,end) infinite alternate}
  @keyframes glitchCursor{to{opacity:0}}
  .scn-glitch .scnname,.scn-glitch .scnsub{animation-delay:2.15s}
  .authorhaunt{position:fixed;inset:0;z-index:87;pointer-events:none;overflow:hidden;background:
      repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 4px,rgba(116,42,153,.13) 5px 6px),
      radial-gradient(circle at var(--hx,50%) var(--hy,50%),rgba(192,132,252,.24),rgba(0,0,0,.82) 36%,rgba(0,0,0,.97));
      animation:authorHauntVeil .82s steps(2,end) forwards}
  .authorhaunt::before,.authorhaunt::after{content:attr(data-whisper);position:absolute;left:50%;top:48%;width:100%;
      transform:translate(-50%,-50%);text-align:center;color:#eadcff;font:900 clamp(18px,4vw,54px) var(--mono);
      letter-spacing:.12em;text-shadow:5px 0 #7c3aed,-4px 0 #16051f;animation:authorWhisper .72s steps(2,end) forwards}
  .authorhaunt::after{color:#13031c;translate:3px -2px;clip-path:inset(42% 0 26% 0);animation-delay:.08s}
  @keyframes authorHauntVeil{0%{opacity:0}12%,68%{opacity:1}72%{transform:translateX(7px) skewX(2deg)}78%{transform:translateX(-9px) skewX(-3deg)}100%{opacity:0}}
  @keyframes authorWhisper{0%{opacity:0;filter:blur(8px)}18%{opacity:.9;filter:none}48%{transform:translate(-48%,-52%) scale(1.04)}
      53%{transform:translate(-52%,-47%) skewX(12deg)}70%{opacity:1}100%{opacity:0;filter:blur(13px);transform:translate(-50%,-50%) scale(1.18)}}

  /* ---- tear ---- */
  .scn-tear .scnveil{background:radial-gradient(ellipse 60% 70% at 50% 50%,
      rgba(30,34,48,.6), rgba(2,3,6,.97) 76%)}
  .trrift{position:absolute;left:50%;top:8%;bottom:8%;width:5px;margin-left:-2.5px;
      background:linear-gradient(180deg,transparent,#fff 20%,#fff 80%,transparent);
      box-shadow:0 0 40px 12px var(--lc), 0 0 100px 30px var(--lc);
      transform:scaleY(0);transform-origin:50% 50%;
      animation:trrift .8s cubic-bezier(.2,.9,.3,1) forwards}
  @keyframes trrift{0%{transform:scaleY(0) scaleX(3)} 100%{transform:scaleY(1) scaleX(1)}}
  .trlight{position:absolute;left:50%;top:50%;width:180px;height:76vh;margin-left:-90px;
      transform:translateY(-50%);opacity:0;filter:blur(30px);
      background:linear-gradient(90deg,transparent,var(--lc),transparent);
      animation:trlight 2.6s ease forwards;animation-delay:.7s}
  @keyframes trlight{0%{opacity:0} 30%{opacity:.75} 100%{opacity:.2}}
  .trspill{position:absolute;top:50%;width:4px;height:4px;border-radius:50%;
      background:#fff;opacity:0;box-shadow:0 0 14px 4px var(--lc);
      animation:trspill 1.4s ease-out forwards}
  @keyframes trspill{
    0%  {opacity:0; transform:translate(0,0) scale(.3)}
    18% {opacity:1}
    100%{opacity:0; transform:translate(var(--tx),var(--ty)) scale(1)}}
  .trglyph{position:absolute;left:50%;top:50%;font-size:104px;line-height:1;color:#fff;
      transform:translate(-50%,-50%);opacity:0;text-shadow:0 0 46px var(--lc);
      animation:lgglyph 2.2s cubic-bezier(.2,1.3,.3,1) forwards;animation-delay:.9s}

  /* ---- coins ---- */
  .scn-coins .scnveil{background:radial-gradient(ellipse 70% 60% at 50% 40%,
      rgba(190,150,40,.30), rgba(10,8,3,.94) 76%)}
  .cncoin{position:absolute;top:-60px;color:var(--lc);line-height:1;opacity:0;
      text-shadow:0 0 16px var(--lc);animation:cnfall cubic-bezier(.4,0,.7,1) forwards}
  @keyframes cnfall{
    0%  {opacity:0; transform:translateY(0) rotate(0)}
    12% {opacity:1}
    100%{opacity:1; transform:translateY(var(--fh)) rotate(var(--rot))}}
  .cnpile{position:absolute;left:0;right:0;bottom:0;height:0;
      background:linear-gradient(180deg, var(--lc), rgba(120,80,10,.9));
      box-shadow:0 -20px 60px 10px var(--lc);
      animation:cnpile 2.2s cubic-bezier(.3,.7,.3,1) forwards;animation-delay:.5s}
  @keyframes cnpile{to{height:16%}}

  /* ---- bulwark ---- */
  .scn-bulwark .scnveil{background:linear-gradient(180deg, rgba(40,52,70,.7), rgba(6,8,12,.95))}
  .bwrow{position:absolute;left:0;right:0;bottom:22%;display:flex;justify-content:center;gap:6px}
  .bwshield{font-size:74px;line-height:1;color:var(--lc);opacity:0;
      text-shadow:0 0 26px var(--lc);
      animation:bwup .55s cubic-bezier(.2,1.4,.35,1) forwards}
  @keyframes bwup{
    0%  {opacity:0; transform:translateY(120px) scale(.7)}
    100%{opacity:1; transform:translateY(0) scale(1)}}
  .bwline{position:absolute;left:6%;right:6%;bottom:20%;height:4px;border-radius:2px;
      background:linear-gradient(90deg,transparent,var(--lc),transparent);
      box-shadow:0 0 30px 6px var(--lc);transform:scaleX(0);
      animation:bwline .7s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:.6s}
  @keyframes bwline{to{transform:scaleX(1)}}

  /* ---- stampede ---- */
  .scn-stampede .scnveil{background:linear-gradient(180deg, rgba(70,50,22,.55), rgba(10,7,3,.95))}
  .stdust{position:absolute;left:0;right:0;bottom:0;height:60%;
      background:linear-gradient(0deg, rgba(200,160,90,.45), transparent 80%);
      filter:blur(14px);animation:stdust 2.6s ease forwards}
  @keyframes stdust{0%{opacity:0;transform:translateX(-16%)} 35%{opacity:1} 100%{opacity:.5;transform:translateX(8%)}}
  .stbeast{position:absolute;left:-14%;width:66px;height:34px;border-radius:22px 8px 12px 12px;
      background:#0a0705;box-shadow:0 0 22px rgba(0,0,0,.9);opacity:.9;
      transform:scale(var(--sc));animation:strun linear forwards}
  @keyframes strun{
    0%  {opacity:0; transform:scale(var(--sc)) translateX(0)}
    10% {opacity:.92}
    100%{opacity:0; transform:scale(var(--sc)) translateX(150vw)}}
  .stmote{position:absolute;width:4px;height:4px;border-radius:50%;
      background:rgba(215,180,120,.9);box-shadow:0 0 8px 2px rgba(200,160,90,.6);
      animation:mofloat 3s ease-in-out infinite;--dx:40px;--dy:-40px}

  /* ---- freeze ---- */
  .scn-freeze .scnveil{background:radial-gradient(ellipse 70% 65% at 50% 50%,
      rgba(90,180,210,.25), rgba(4,10,16,.95) 76%)}
  .frice{position:absolute;inset:0;opacity:0;
      background:
        radial-gradient(ellipse 40% 30% at 20% 25%, rgba(190,240,255,.35), transparent 70%),
        radial-gradient(ellipse 45% 35% at 78% 70%, rgba(160,225,250,.30), transparent 70%),
        linear-gradient(140deg, rgba(200,240,255,.18), rgba(60,120,160,.12));
      backdrop-filter:blur(2px);
      animation:frice 1.3s ease forwards}
  @keyframes frice{0%{opacity:0} 100%{opacity:1}}
  .frcrack{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .frcrack path{fill:none;stroke:#eafaff;stroke-width:2.4;stroke-linecap:round;
      filter:drop-shadow(0 0 8px rgba(160,225,250,1));
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
      animation:frcrk .5s cubic-bezier(.2,.9,.2,1) forwards}
  @keyframes frcrk{to{stroke-dashoffset:0}}
  .frflake{position:absolute;top:-40px;color:var(--lc);line-height:1;opacity:0;
      text-shadow:0 0 12px var(--lc);animation:gdrift linear infinite;--fx:20px}

  /* ---- stop ---- */
  .scn-stop .scnveil{background:radial-gradient(ellipse 65% 60% at 50% 50%,
      rgba(120,140,165,.20), rgba(6,8,12,.96) 76%)}
  .stpface{position:absolute;left:50%;top:44%;width:270px;height:270px;margin:-135px 0 0 -135px;
      border-radius:50%;border:3px solid var(--lc);opacity:0;
      box-shadow:0 0 50px var(--lc), inset 0 0 60px rgba(180,200,230,.22);
      animation:stpface 1.2s cubic-bezier(.2,.9,.3,1) forwards}
  @keyframes stpface{0%{opacity:0;transform:scale(.6) rotate(-30deg)}
                     100%{opacity:1;transform:scale(1) rotate(0)}}
  .stptick{position:absolute;left:50%;top:6px;width:2px;height:14px;margin-left:-1px;
      background:var(--lc);opacity:.7;transform-origin:50% 129px;
      transform:rotate(var(--a))}
  .stphand{position:absolute;left:50%;bottom:50%;background:#fff;border-radius:2px;
      transform-origin:50% 100%;box-shadow:0 0 14px var(--lc)}
  .stphand.h{width:6px;height:76px;margin-left:-3px;
      animation:stph 1.5s cubic-bezier(.25,.9,.2,1) forwards}
  .stphand.m{width:4px;height:112px;margin-left:-2px;
      animation:stpm 1.5s cubic-bezier(.25,.9,.2,1) forwards}
  @keyframes stph{0%{transform:rotate(-320deg)} 78%{transform:rotate(28deg)} 100%{transform:rotate(24deg)}}
  @keyframes stpm{0%{transform:rotate(-680deg)} 78%{transform:rotate(-6deg)} 100%{transform:rotate(-10deg)}}
  /* everything else in the world, caught where it was */
  .stpmote{position:absolute;width:5px;height:5px;border-radius:50%;background:#dfe8f2;
      opacity:0;box-shadow:0 0 10px 3px rgba(200,220,245,.7);
      animation:stpfrz 1.6s ease-out forwards}
  @keyframes stpfrz{
    0%  {opacity:0; transform:translateY(30px) scale(.4)}
    40% {opacity:.9; transform:translateY(0) scale(1)}
    100%{opacity:.9; transform:translateY(0) scale(1)}}   /* and it just… stays */
  .stpglyph{position:absolute;left:50%;top:44%;font-size:74px;line-height:1;color:#fff;
      transform:translate(-50%,-50%);opacity:0;text-shadow:0 0 40px var(--lc);
      animation:lgglyph 2.2s cubic-bezier(.2,1.3,.3,1) forwards;animation-delay:1.15s}

  /* ---- gate ---- */
  .scn-gate .scnveil{background:linear-gradient(180deg, rgba(50,40,14,.6), rgba(6,5,3,.95))}
  .gtglow{position:absolute;left:50%;top:50%;width:340px;height:340px;margin:-170px 0 0 -170px;
      border-radius:50%;opacity:0;filter:blur(40px);
      background:radial-gradient(circle, var(--lc), transparent 70%);
      animation:gtglow 2.8s ease forwards;animation-delay:1.2s}
  @keyframes gtglow{0%{opacity:0;transform:scale(.4)} 45%{opacity:1;transform:scale(1.5)} 100%{opacity:.4;transform:scale(2)}}
  .gtgate{position:absolute;left:50%;top:50%;width:360px;height:280px;
      transform:translate(-50%,-50%);opacity:0;
      animation:lgname 2.9s ease forwards}
  .gtpost{position:absolute;bottom:0;width:20px;height:100%;border-radius:3px;
      background:linear-gradient(180deg,#d84a3a,#8a2418);
      box-shadow:0 0 22px rgba(216,74,58,.7)}
  .gtpost.l{left:34px} .gtpost.r{right:34px}
  .gtbeam{position:absolute;left:-10px;right:-10px;height:16px;border-radius:3px;
      background:linear-gradient(180deg,#e2543f,#8a2418);
      box-shadow:0 0 22px rgba(216,74,58,.7)}
  .gtbeam.t{top:0}
  .gtbeam.b{top:52px;left:16px;right:16px;height:11px}
  /* the doors, which have not opened in nineteen hundred years */
  .gtdoor{position:absolute;top:calc(50% - 140px);height:280px;width:calc(50% - 24px);
      background:linear-gradient(180deg,#2a2118,#120e09);
      box-shadow:inset 0 0 50px rgba(0,0,0,.9);
      transition:transform 1.2s cubic-bezier(.3,.75,.25,1);
      animation:gtdoor 2.9s cubic-bezier(.3,.75,.25,1) forwards;animation-delay:1.2s}
  .gtdoor.l{left:0;  transform-origin:0% 50%}
  .gtdoor.r{right:0; transform-origin:100% 50%}
  @keyframes gtdoor{0%{transform:translateX(0)} 100%{transform:translateX(0)}}
  .scn-gate .gtdoor.l{animation-name:gtdoorL}
  .scn-gate .gtdoor.r{animation-name:gtdoorR}
  @keyframes gtdoorL{0%,38%{transform:translateX(0)} 100%{transform:translateX(-105%)}}
  @keyframes gtdoorR{0%,38%{transform:translateX(0)} 100%{transform:translateX(105%)}}
  .gtray{position:absolute;bottom:0;width:3px;background:var(--lc);opacity:0;
      height:var(--h);filter:blur(2px);box-shadow:0 0 16px 4px var(--lc);
      animation:gtray 1.6s ease-out forwards}
  @keyframes gtray{
    0%  {opacity:0; transform:translateY(40px) scaleY(.2)}
    30% {opacity:.85}
    100%{opacity:0; transform:translateY(-30px) scaleY(1.3)}}

  /* ---- canalrite (Jalayan) ---- */
  .scn-canalrite .scnveil{background:radial-gradient(ellipse 78% 66% at 50% 86%,
      color-mix(in srgb, var(--lc) 30%, transparent), rgba(6,9,7,.94) 76%)}
  .crterrace{position:absolute;left:0;right:0;bottom:0;height:52%}
  .crstep{position:absolute;left:0;right:0;bottom:calc(var(--i) * 9%);height:9%;
      background:linear-gradient(180deg,transparent,color-mix(in srgb, var(--lc) 16%, transparent));
      border-top:1px solid color-mix(in srgb, var(--lc) 55%, transparent);
      opacity:0;animation:crstep .7s ease forwards;animation-delay:calc(var(--i) * .12s)}
  @keyframes crstep{to{opacity:1}}
  .crhalo{position:absolute;left:50%;top:44%;width:220px;height:220px;margin:-110px 0 0 -110px;
      border-radius:50%;border:2px solid var(--lc);opacity:0;
      box-shadow:0 0 60px var(--lc), inset 0 0 50px var(--lc);
      animation:crhalo 2.4s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:.5s}
  @keyframes crhalo{0%{opacity:0;transform:scale(.4)} 45%{opacity:.85} 100%{opacity:0;transform:scale(1.5)}}
  .crmote{position:absolute;bottom:6%;width:5px;height:5px;border-radius:50%;
      background:radial-gradient(circle,#fff,var(--lc) 60%,transparent 75%);
      box-shadow:0 0 10px var(--lc);opacity:0;
      animation:crmote 2.4s ease-out forwards}
  @keyframes crmote{
    0%  {opacity:0; transform:translate(0,0) scale(.6)}
    30% {opacity:1}
    100%{opacity:0; transform:translate(var(--dx),-360px) scale(1.1)}}

  /* ---- Sevenfold Cascade: a waterfall between two ranges, sunset behind it ---- */
  .sfc-show{position:fixed;inset:0;z-index:91;pointer-events:none;overflow:hidden;
      background:linear-gradient(180deg,#3d1c0e 0%,#8a4a1e 38%,#e0a84a 58%,#f2c877 66%,#7a3c1a 100%);
      animation:sfcFade 3.6s ease both}
  .sfc-show.gone{animation:sfcFadeOut .8s ease forwards}
  @keyframes sfcFade{0%{opacity:0}10%{opacity:1}92%{opacity:1}100%{opacity:0}}
  @keyframes sfcFadeOut{to{opacity:0}}
  .sfc-sun{position:absolute;left:50%;top:34%;width:150px;height:150px;margin:-75px 0 0 -75px;
      border-radius:50%;background:radial-gradient(circle,#fff6dd 0%,#ffd27a 34%,#e0a84a 62%,transparent 74%);
      box-shadow:0 0 90px 30px rgba(224,168,74,.55);opacity:0;
      animation:sfcSun 2.6s ease-out forwards;animation-delay:.15s}
  @keyframes sfcSun{0%{opacity:0;transform:scale(.5)}55%{opacity:1}100%{opacity:.88;transform:scale(1)}}
  .sfc-mountain{position:absolute;bottom:0;background:#1c0f08}
  .sfc-m1{left:-8%;width:56%;height:38%;clip-path:polygon(0 100%,28% 22%,52% 58%,74% 8%,100% 55%,100% 100%);
      opacity:.55;filter:blur(1px);animation:sfcRise .9s ease-out both;animation-delay:.05s}
  .sfc-m2{right:-8%;width:58%;height:34%;clip-path:polygon(0 62%,22% 14%,46% 50%,70% 5%,100% 40%,100% 100%,0 100%);
      opacity:.7;animation:sfcRise .9s ease-out both;animation-delay:.16s}
  .sfc-m3{left:22%;width:56%;height:26%;clip-path:polygon(0 100%,18% 30%,40% 62%,64% 12%,86% 48%,100% 20%,100% 100%);
      opacity:.92;background:#120a05;animation:sfcRise .9s ease-out both;animation-delay:.28s}
  @keyframes sfcRise{0%{opacity:0;transform:translateY(26px)}100%{transform:translateY(0)}}
  .sfc-falls{position:absolute;left:50%;top:8%;bottom:22%;width:9%;margin-left:-4.5%;
      background:repeating-linear-gradient(180deg,rgba(255,255,255,.85) 0 3px,rgba(198,232,245,.35) 3px 7px,transparent 7px 13px),
      linear-gradient(180deg,rgba(255,255,255,.5),rgba(210,238,250,.65) 70%,rgba(210,238,250,.15));
      filter:blur(.5px);opacity:0;box-shadow:0 0 40px 10px rgba(210,238,250,.4);
      animation:sfcFallsIn 1s ease-out forwards,sfcFlow 1.1s linear infinite;animation-delay:.4s,.4s}
  @keyframes sfcFallsIn{0%{opacity:0}100%{opacity:1}}
  @keyframes sfcFlow{0%{background-position:0 0,0 0}100%{background-position:0 60px,0 0}}
  .sfc-drop{position:absolute;top:6%;width:2px;height:34px;border-radius:2px;opacity:0;
      background:linear-gradient(180deg,transparent,#eaf7ff);box-shadow:0 0 6px #cdeaf8;
      animation:sfcDrop linear infinite}
  @keyframes sfcDrop{0%{opacity:0;transform:translateY(0)}10%{opacity:.9}88%{opacity:.5}100%{opacity:0;transform:translateY(58vh)}}
  .sfc-mist{position:absolute;left:50%;bottom:16%;width:280px;height:100px;margin-left:-140px;
      border-radius:50%;background:radial-gradient(ellipse,rgba(238,248,255,.65),transparent 72%);
      filter:blur(10px);opacity:0;animation:sfcMist 3.4s ease-in-out .5s infinite}
  @keyframes sfcMist{0%,100%{opacity:.35;transform:translateY(0) scaleX(1)}50%{opacity:.6;transform:translateY(-8px) scaleX(1.12)}}
  .sfc-name{color:#fff6e6;text-shadow:0 2px 20px rgba(0,0,0,.85),0 0 30px rgba(224,168,74,.6)}

  /* ---- Tal'mant'zel: seven braziers light in sequence, one per Duty, before
     his own carved likeness and a halo shaped like his glyph ---- */
  .tmz-show{position:fixed;inset:0;z-index:91;pointer-events:none;overflow:hidden;
      background:linear-gradient(180deg,#0d0904 0%,#241407 45%,#3d2412 78%,#1a0f06 100%);
      animation:sfcFade 3.6s ease both}
  .tmz-show.gone{animation:sfcFadeOut .8s ease forwards}
  .tmz-statue{position:absolute;left:50%;bottom:20%;width:130px;height:230px;margin-left:-65px;
      background:linear-gradient(180deg,#2a1a0c,#0d0703);
      clip-path:polygon(50% 0,64% 10%,60% 30%,78% 38%,70% 100%,30% 100%,22% 38%,40% 30%,36% 10%);
      opacity:0;filter:drop-shadow(0 0 20px rgba(240,201,74,.35));
      animation:tmzStatue 1.1s ease-out forwards;animation-delay:.15s}
  @keyframes tmzStatue{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
  .tmz-halo{position:absolute;left:50%;bottom:34%;width:210px;height:210px;margin:0 0 0 -105px;
      border-radius:50%;opacity:0;
      background:conic-gradient(from 0deg,#f0c94a 0 50%,#241407 50% 100%);
      box-shadow:0 0 70px 18px rgba(240,201,74,.4);
      animation:tmzHalo 1.4s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:1.35s}
  @keyframes tmzHalo{0%{opacity:0;transform:translateY(30%) scale(.3) rotate(0)}55%{opacity:.92}100%{opacity:.78;transform:translateY(30%) scale(1) rotate(200deg)}}
  .tmz-brazier{position:absolute;bottom:8%;width:16px;height:26px;border-radius:3px 3px 6px 6px;
      background:linear-gradient(180deg,#4a3218,#1a0f06);opacity:0;
      box-shadow:inset 0 2px 4px rgba(0,0,0,.6);
      animation:tmzBrazierIn .5s ease-out forwards}
  @keyframes tmzBrazierIn{to{opacity:1}}
  .tmz-flame{position:absolute;left:50%;bottom:100%;width:12px;height:22px;margin-left:-6px;
      border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
      background:radial-gradient(ellipse at 50% 100%,#fff6d0 0%,#f0c94a 40%,#c9711e 72%,transparent 85%);
      opacity:0;filter:blur(.3px);
      animation:tmzFlameIn .3s ease-out forwards,tmzFlameFlicker 1.4s ease-in-out infinite .3s}
  @keyframes tmzFlameIn{to{opacity:1}}
  @keyframes tmzFlameFlicker{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(1.15) scaleX(.92)}}
  .tmz-ember{position:absolute;bottom:4%;width:2.5px;height:2.5px;border-radius:50%;
      background:#f8d98a;box-shadow:0 0 6px 1px #e0a84a;opacity:0;
      animation:tmzEmberRise linear infinite}
  @keyframes tmzEmberRise{0%{opacity:0;transform:translateY(0)}12%{opacity:.9}80%{opacity:.4}100%{opacity:0;transform:translateY(-58vh)}}
  .tmz-name{color:#fff3d6;text-shadow:0 2px 20px rgba(0,0,0,.85),0 0 30px rgba(240,201,74,.6)}

  /* ---- Mirror Knight Azariah: two mirrored slashes meet at the center line
     and the reflection between them shatters ---- */
  .mka-show{position:fixed;inset:0;z-index:91;pointer-events:none;overflow:hidden;
      background:radial-gradient(ellipse 70% 60% at 50% 50%,#1a1830,#04030a 80%);
      animation:sfcFade 3.6s ease both}
  .mka-show.gone{animation:sfcFadeOut .8s ease forwards}
  .mka-mirrorline{position:absolute;left:50%;top:10%;bottom:10%;width:2px;margin-left:-1px;
      background:linear-gradient(180deg,transparent,#cfd8ff,#fff,#cfd8ff,transparent);
      box-shadow:0 0 20px 4px rgba(207,216,255,.7);opacity:0;
      animation:mkaLineIn .5s ease-out forwards}
  @keyframes mkaLineIn{0%{opacity:0;transform:scaleY(.2)}100%{opacity:1;transform:scaleY(1)}}
  .mka-slash{position:absolute;top:50%;width:46%;height:6px;margin-top:-3px;
      background:linear-gradient(90deg,transparent,#fff,#cfd8ff,transparent);
      filter:blur(.3px) drop-shadow(0 0 10px #cfd8ff);opacity:0}
  .mka-slash.left{left:0;transform-origin:left center;
      animation:mkaSlashLeft .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.5s}
  .mka-slash.right{right:0;transform-origin:right center;
      animation:mkaSlashRight .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.5s}
  @keyframes mkaSlashLeft{0%{opacity:0;transform:rotate(-8deg) scaleX(0)}25%{opacity:1}100%{opacity:0;transform:rotate(-8deg) scaleX(1)}}
  @keyframes mkaSlashRight{0%{opacity:0;transform:rotate(8deg) scaleX(0)}25%{opacity:1}100%{opacity:0;transform:rotate(8deg) scaleX(1)}}
  .mka-crack{position:absolute;left:50%;top:50%;width:2px;height:0;
      background:linear-gradient(180deg,#fff,#cfd8ff,transparent);
      transform-origin:top center;transform:rotate(var(--rot,0deg));opacity:0;
      box-shadow:0 0 8px 2px rgba(207,216,255,.8);
      animation:mkaCrack .5s ease-out forwards}
  @keyframes mkaCrack{0%{opacity:0;height:0}20%{opacity:1}100%{opacity:0;height:var(--len,200px)}}
  .mka-shard{position:absolute;left:50%;top:50%;width:7px;height:11px;margin:-5px 0 0 -3px;
      background:linear-gradient(135deg,#fff,#cfd8ff 60%,#8f9fd8);
      clip-path:polygon(50% 0,100% 40%,72% 100%,28% 100%,0 40%);
      opacity:0;box-shadow:0 0 6px rgba(207,216,255,.6);
      animation:mkaShard 1.1s cubic-bezier(.15,.7,.3,1) forwards}
  @keyframes mkaShard{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(1)}}
  .mka-name{color:#eef1ff;text-shadow:0 2px 20px rgba(0,0,0,.85),0 0 30px rgba(207,216,255,.6)}

  /* ---- The Cloven Lord: a pink spirit tree grows out of the dark, branches
     spread, and it blossoms all at once ---- */
  .cvl-show{position:fixed;inset:0;z-index:91;pointer-events:none;overflow:hidden;
      background:radial-gradient(ellipse 80% 70% at 50% 82%,#241030,#050308 75%);
      animation:sfcFade 3.8s ease both}
  .cvl-show.gone{animation:sfcFadeOut .8s ease forwards}
  .cvl-ground{position:absolute;left:50%;bottom:16%;width:260px;height:60px;margin-left:-130px;
      border-radius:50%;opacity:0;filter:blur(14px);
      background:radial-gradient(ellipse,rgba(255,140,200,.55),transparent 72%);
      animation:cvlGroundIn 1s ease-out forwards}
  @keyframes cvlGroundIn{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
  .cvl-trunk{position:absolute;left:50%;bottom:16%;width:14px;height:34vh;margin-left:-7px;
      transform-origin:bottom center;transform:scaleY(0);border-radius:6px 6px 2px 2px;
      background:linear-gradient(180deg,#e88fc0,#7a3a5a 70%,#3a1a28);
      box-shadow:0 0 22px rgba(255,140,200,.35);
      animation:cvlTrunkGrow 1.3s cubic-bezier(.2,.75,.25,1) forwards;animation-delay:.2s}
  @keyframes cvlTrunkGrow{to{transform:scaleY(1)}}
  .cvl-branch{position:absolute;left:50%;bottom:44%;width:var(--len,120px);height:8px;
      margin-left:0;transform-origin:left center;
      transform:rotate(var(--rot,0deg)) scaleX(0);border-radius:4px;
      background:linear-gradient(90deg,#a8506e,#e88fc0 80%);opacity:0;
      animation:cvlBranchGrow .7s cubic-bezier(.2,.75,.25,1) forwards}
  @keyframes cvlBranchGrow{0%{opacity:0;transform:rotate(var(--rot,0deg)) scaleX(0)}
      12%{opacity:1}100%{opacity:1;transform:rotate(var(--rot,0deg)) scaleX(1)}}
  .cvl-bloom{position:absolute;left:50%;bottom:44%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
      border-radius:50%;opacity:0;
      background:radial-gradient(circle at 35% 30%,#fff,#ff9fd0 45%,#d0508c 85%);
      box-shadow:0 0 10px 2px rgba(255,159,208,.7);
      animation:cvlBloomIn .6s cubic-bezier(.2,.8,.3,1.15) forwards}
  @keyframes cvlBloomIn{0%{opacity:0;transform:translate(0,0) scale(.2)}
      100%{opacity:1;transform:translate(var(--bx),var(--by)) scale(1)}}
  .cvl-petal{position:absolute;top:-4%;width:7px;height:9px;border-radius:60% 60% 60% 0;
      background:linear-gradient(135deg,#ffd0e6,#e88fc0);opacity:0;
      animation:cvlPetalFall linear infinite}
  @keyframes cvlPetalFall{0%{opacity:0;transform:translateY(0) rotate(0)}
      8%{opacity:.9}92%{opacity:.6}100%{opacity:0;transform:translateY(112vh) rotate(280deg)}}
  .cvl-name{color:#ffe6f4;text-shadow:0 2px 20px rgba(0,0,0,.9),0 0 30px rgba(255,140,200,.55)}

  /* ---- Rynna Silverdew: vines creep in from every edge, and a swarm of
     bees converges with her at the center ---- */
  .ryn-show{position:fixed;inset:0;z-index:91;pointer-events:none;overflow:hidden;
      background:radial-gradient(ellipse 75% 65% at 50% 50%,#132414,#04050a 78%);
      animation:sfcFade 3.6s ease both}
  .ryn-show.gone{animation:sfcFadeOut .8s ease forwards}
  .ryn-vine{position:absolute;width:3px;height:var(--len,44vh);
      background:linear-gradient(var(--dir,180deg),#3fae6a,#1c5c37 60%,transparent);
      border-radius:3px;opacity:0;transform-origin:var(--org,top center);
      transform:scaleY(0) rotate(var(--rot,0deg));
      box-shadow:0 0 12px rgba(90,220,140,.35);
      animation:rynVineGrow .9s cubic-bezier(.2,.75,.25,1) forwards}
  @keyframes rynVineGrow{0%{opacity:0;transform:scaleY(0) rotate(var(--rot,0deg))}
      10%{opacity:1}100%{opacity:1;transform:scaleY(1) rotate(var(--rot,0deg))}}
  .ryn-bee{position:absolute;left:50%;top:50%;width:6px;height:5px;margin:-2.5px 0 0 -3px;
      border-radius:50%;background:radial-gradient(circle,#ffe27a,#c98a1c 70%);opacity:0;
      box-shadow:0 0 5px rgba(255,210,100,.7);
      animation:rynBeeFly 1.3s ease-in-out forwards}
  @keyframes rynBeeFly{
    0%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.6)}
    10%{opacity:1}
    70%{opacity:1;transform:translate(var(--mx),var(--my)) scale(1)}
    100%{opacity:.9;transform:translate(0,-40px) scale(1)}}
  .ryn-name{color:#eafff0;text-shadow:0 2px 20px rgba(0,0,0,.9),0 0 30px rgba(90,220,140,.5)}

  /* ---- Dettlaff Bromwell: a child's shadow, a name that isn't his flickering
     out, red eyes opening in the dark, and the shape of a grin left behind ---- */
  .dtl-show{position:fixed;inset:0;z-index:91;pointer-events:none;overflow:hidden;
      background:radial-gradient(ellipse 70% 60% at 50% 55%,#1a0508,#030102 80%);
      animation:sfcFade 3.6s ease both}
  .dtl-show.gone{animation:sfcFadeOut .8s ease forwards}
  .dtl-childshadow{position:absolute;left:50%;bottom:22%;width:60px;height:120px;margin-left:-30px;
      border-radius:50% 50% 40% 40%/60% 60% 30% 30%;background:#050203;opacity:0;
      box-shadow:0 0 40px 10px rgba(0,0,0,.85);
      animation:dtlChildIn 1s ease-out forwards,dtlStretch 1.6s ease-in forwards 1.4s}
  @keyframes dtlChildIn{0%{opacity:0;transform:scaleY(.7)}100%{opacity:1;transform:scaleY(1)}}
  @keyframes dtlStretch{0%{height:120px;bottom:22%}100%{height:280px;bottom:14%}}
  .dtl-oldname{position:absolute;left:50%;top:38%;transform:translateX(-50%);
      font-family:var(--mono);font-size:14px;letter-spacing:.3em;color:#e0605c;opacity:0;
      text-shadow:0 0 12px rgba(224,96,92,.7);
      animation:dtlOldNameFlicker 1.3s steps(4,end) forwards .3s}
  @keyframes dtlOldNameFlicker{0%{opacity:0}15%{opacity:.9}22%{opacity:.1}30%{opacity:.8}
      45%{opacity:0}60%{opacity:.6}100%{opacity:0;letter-spacing:.6em}}
  .dtl-eyes{position:absolute;left:50%;bottom:38%;width:26px;height:6px;margin-left:-13px;opacity:0;
      animation:dtlEyesIn .4s ease-out forwards 1.5s}
  .dtl-eyes::before,.dtl-eyes::after{content:"";position:absolute;top:0;width:6px;height:6px;border-radius:50%;
      background:#ff2a2a;box-shadow:0 0 10px 3px rgba(255,42,42,.9)}
  .dtl-eyes::before{left:0}.dtl-eyes::after{right:0}
  @keyframes dtlEyesIn{to{opacity:1}}
  .dtl-grin{position:absolute;left:50%;top:52%;width:180px;height:60px;margin:0 0 0 -90px;opacity:0;
      border-bottom:3px solid rgba(196,0,37,.7);border-radius:0 0 50% 50%/0 0 100% 100%;
      filter:drop-shadow(0 0 14px rgba(196,0,37,.6));
      animation:dtlGrinIn .8s ease-out forwards 2s}
  @keyframes dtlGrinIn{0%{opacity:0;transform:scaleX(.3)}100%{opacity:1;transform:scaleX(1)}}
  .dtl-name{color:#f5d9d6;text-shadow:0 2px 20px rgba(0,0,0,.9),0 0 30px rgba(196,0,37,.55)}

  /* ---- tunnels (Descended Cities) ---- */
  .scn-tunnels .scnveil{background:linear-gradient(180deg, rgba(60,20,80,.4), rgba(8,4,10,.95))}
  .tnmouth{position:absolute;width:60px;height:22px;border-radius:50%;
      background:radial-gradient(ellipse,#2a0f3f,#0a0410 70%);
      box-shadow:0 0 26px 6px rgba(153,58,220,.55), inset 0 0 10px #000;
      opacity:0;animation:tnmouth .8s ease forwards}
  @keyframes tnmouth{to{opacity:1}}
  .tnpaths{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .tnpaths path{fill:none;stroke:#9a3adc;stroke-width:3;stroke-linecap:round;
      filter:drop-shadow(0 0 8px #7c2bb8);
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
      animation:tnpath 1.1s cubic-bezier(.3,.6,.2,1) forwards}
  @keyframes tnpath{to{stroke-dashoffset:0}}
  .tnglow{position:absolute;left:50%;top:56%;width:260px;height:260px;margin:-130px 0 0 -130px;
      border-radius:50%;opacity:0;filter:blur(30px);
      background:radial-gradient(circle,#9a3adc,transparent 70%);
      animation:tnglow 2.4s ease forwards;animation-delay:1s}
  @keyframes tnglow{0%{opacity:0;transform:scale(.5)} 45%{opacity:.7;transform:scale(1.3)} 100%{opacity:.25;transform:scale(1.6)}}

  /* ---------- Kyoshi: sumi-e, and then the stroke ----------
     Wet ink on paper. The sun is the only colour in the entire painting, and the
     painting is cut in half. Both halves carry the SAME image so the cut divides
     one picture rather than separating two. */
  .ikshow{position:fixed;inset:0;z-index:88;pointer-events:none;overflow:hidden;
      background:#07080c;animation:mnfade 3.4s ease forwards}
  .ikpaper{position:absolute;left:50%;top:50%;width:min(760px,92vw);height:min(430px,58vh);
      transform:translate(-50%,-50%);
      animation:ikin 3.4s cubic-bezier(.2,.8,.3,1) forwards}
  @keyframes ikin{
    0%  {opacity:0; transform:translate(-50%,-50%) scale(.94)}
    14% {opacity:1; transform:translate(-50%,-50%) scale(1)}
    100%{opacity:1; transform:translate(-50%,-50%) scale(1.02)}}

  /* the two halves of one sheet of paper */
  .ikhalf{position:absolute;left:0;right:0;height:50%;overflow:hidden;
      background:linear-gradient(180deg,#f4efe2,#e6ddca);
      box-shadow:0 18px 50px rgba(0,0,0,.7);
      transition:transform 1.0s cubic-bezier(.2,.7,.3,1), opacity 1.0s ease}
  .ikhalf.t{top:0}
  .ikhalf.b{top:50%}
  /* the same painting in both, the lower one pulled up so the image is continuous */
  .ikhalf .ikart{position:absolute;left:0;width:100%;height:200%}
  .ikhalf.t .ikart{top:0}
  .ikhalf.b .ikart{top:-100%}

  /* the sun — the ONLY colour in the picture */
  .iksun{position:absolute;left:50%;top:34%;width:130px;height:130px;margin-left:-65px;
      border-radius:50%;background:#c8302a;opacity:0;
      box-shadow:0 0 60px 12px rgba(200,48,42,.35);
      animation:iksun 2.2s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:.75s}
  @keyframes iksun{
    0%  {opacity:0; transform:translateY(46px) scale(.8)}
    100%{opacity:.92; transform:translateY(0) scale(1)}}

  /* the mountains, painted in */
  .ikmt{position:absolute;left:0;bottom:0;width:100%;height:74%;overflow:visible}
  .ikmt path{fill:#1b1c20;opacity:0;
      animation:ikwash 1.5s ease forwards;animation-delay:var(--d)}
  .ikmt path.far{fill:#575a63;opacity:0}
  @keyframes ikwash{
    0%  {opacity:0;   transform:translateY(14px)}
    100%{opacity:.94; transform:translateY(0)}}
  .ikmt path.far{animation:ikwashf 1.5s ease forwards;animation-delay:var(--d)}
  @keyframes ikwashf{
    0%  {opacity:0;   transform:translateY(14px)}
    100%{opacity:.5;  transform:translateY(0)}}

  /* the birds: two brush flicks each */
  .ikbird{position:absolute;width:26px;height:9px;opacity:0;
      animation:ikbird .5s ease forwards}
  .ikbird::before,.ikbird::after{content:"";position:absolute;top:0;width:13px;height:9px;
      border-top:2px solid #1b1c20;border-radius:50%}
  .ikbird::before{left:0;  transform:rotate(-14deg)}
  .ikbird::after {right:0; transform:rotate(14deg)}
  @keyframes ikbird{0%{opacity:0;transform:translateY(6px)} 100%{opacity:.85}}

  /* the stroke that goes through the whole thing */
  .ikcut{position:absolute;left:-10%;top:50%;width:120%;height:3px;opacity:0;
      transform:translateY(-50%) rotate(-7deg);transform-origin:0 50%;
      background:linear-gradient(90deg,transparent,#0b0b0e 12%,#000 50%,#0b0b0e 88%,transparent);
      box-shadow:0 0 18px 4px rgba(0,0,0,.9)}
  .ikshow.cut .ikcut{animation:ikcut .34s cubic-bezier(.3,.05,.1,1) forwards}
  @keyframes ikcut{
    0%  {opacity:1; transform:translateY(-50%) rotate(-7deg) scaleX(0)}
    100%{opacity:1; transform:translateY(-50%) rotate(-7deg) scaleX(1)}}
  /* and the paper comes apart */
  .ikshow.fall .ikhalf.t{transform:translate(-16px,-26px) rotate(-1.6deg);opacity:0}
  .ikshow.fall .ikhalf.b{transform:translate(16px,34px)  rotate(1.2deg); opacity:0}
  .ikshow.fall .ikcut{opacity:0;transition:opacity .5s ease}
  .lgname.ik{top:auto;bottom:8%;color:#f2ece0;
      text-shadow:0 0 24px rgba(200,48,42,.8), 0 2px 20px rgba(0,0,0,.95);
      animation:lgname 3.4s ease forwards;animation-delay:1.9s}
  .ikshow.gone{opacity:0;transition:opacity .7s ease}

  /* Kyoshi now paints the battlefield itself instead of presenting a framed
     sheet. The older paper rules remain for recorded scenes, but this is the
     live bamboo grove used by inkEntrance. */
  .ikshow.grove{background:rgba(232,225,207,.9);animation:ikgrovein 3.45s ease forwards}
  @keyframes ikgrovein{0%{opacity:0}10%,80%{opacity:1}100%{opacity:0}}
  .ikwash{position:absolute;inset:-12%;filter:blur(3px);opacity:.9;background:
      radial-gradient(ellipse 27% 18% at 18% 34%,rgba(7,8,9,.92),transparent 72%),
      radial-gradient(ellipse 38% 22% at 72% 66%,rgba(12,13,14,.88),transparent 74%),
      radial-gradient(ellipse 22% 42% at 48% 48%,rgba(28,29,27,.55),transparent 74%),
      repeating-radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.12) 0 2px,transparent 4px 19px);
      animation:ikspread 2.2s cubic-bezier(.2,.8,.3,1) forwards}
  @keyframes ikspread{0%{opacity:0;transform:scale(.55)}100%{opacity:.92;transform:scale(1.12)}}
  .ikmoon{position:absolute;left:50%;top:17%;width:135px;height:135px;margin-left:-67px;border-radius:50%;
      background:#b62c28;box-shadow:0 0 55px rgba(182,44,40,.42);opacity:0;animation:ikmoon 3.8s ease .5s forwards}
  @keyframes ikmoon{0%{opacity:0;transform:translateY(55px) scale(.7)}45%,100%{opacity:.9;transform:none}}
  .ikgrove{position:absolute;inset:0;overflow:hidden}
  .ikbamboo{position:absolute;bottom:-8%;left:var(--x);width:11px;height:var(--h);transform-origin:50% 100%;
      background:repeating-linear-gradient(180deg,#111 0 42px,#5b5a50 43px 47px,#111 48px 82px);
      border-radius:8px;box-shadow:5px 0 rgba(0,0,0,.2);animation:iksway var(--s) ease-in-out infinite alternate;animation-delay:var(--d)}
  .ikbamboo::before,.ikbamboo::after{content:"";position:absolute;width:62px;height:15px;background:#171816;
      border-radius:100% 0 100% 0;transform-origin:0 50%;box-shadow:0 0 8px rgba(0,0,0,.28)}
  .ikbamboo::before{left:5px;top:24%;transform:rotate(-20deg)}
  .ikbamboo::after{right:5px;top:48%;transform-origin:100% 50%;transform:rotate(25deg) scaleX(-1)}
  @keyframes iksway{from{transform:rotate(-2.5deg)}to{transform:rotate(3deg)}}
  /* A cut reed becomes two full copies clipped at the blade line. The crown and
     rooted half fall in opposite directions, so the stroke visibly severs every
     stalk instead of merely leaning the intact grove. */
  .ikbamboo.cut-top{clip-path:inset(0 0 49% 0);animation:ikfalltop 1.05s cubic-bezier(.3,0,.8,.4) forwards}
  .ikbamboo.cut-bottom{clip-path:inset(49% 0 0 0);animation:ikfallbottom 1.05s cubic-bezier(.3,0,.8,.4) forwards}
  @keyframes ikfalltop{0%{transform:rotate(0)}100%{transform:rotate(38deg) translate(54px,28px);opacity:.08}}
  @keyframes ikfallbottom{0%{transform:rotate(0)}100%{transform:rotate(-19deg) translate(-22px,18px);opacity:.12}}
  .ikslash{position:absolute;left:-15%;top:var(--y);width:130%;height:3px;background:#f4ead7;opacity:0;
      transform:rotate(var(--r)) scaleX(0);transform-origin:0 50%;box-shadow:0 0 12px #fff}
  .ikslash.go{animation:ikslash .32s cubic-bezier(.2,0,.1,1) forwards}
  @keyframes ikslash{0%{opacity:1;transform:rotate(var(--r)) scaleX(0)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--r)) scaleX(1)}}
  .ikshow.grove .lgname.ik{animation:lgname 2.6s ease forwards;animation-delay:.7s}

  /* Seven Executions: Kyoshi writes seven cuts through the enemy's Health seal,
     then the copied seal breaks into nine independently falling fragments. */
  .kywin{position:fixed;inset:0;z-index:97;pointer-events:none;overflow:hidden;background:rgba(235,228,211,.72);animation:kywinfade 3.8s ease forwards}
  .kywin::before{content:"";position:absolute;inset:-12%;background:radial-gradient(ellipse at 50% 48%,transparent 0 12%,rgba(8,9,10,.35) 48%,rgba(3,4,5,.94) 82%),repeating-radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.09) 0 2px,transparent 4px 18px)}
  @keyframes kywinfade{0%{opacity:0}7%,82%{opacity:1}100%{opacity:0}}
  .kyseal{position:fixed;left:var(--x);top:var(--y);width:112px;height:112px;transform:translate(-50%,-50%);border-radius:50%;background:#a92828;border:5px solid #efe7d6;box-shadow:0 0 0 3px #171716,0 0 65px rgba(169,40,40,.7);display:grid;place-items:center;color:#fff;font:700 42px var(--serif)}
  .kyseal.split{background:transparent;border-color:transparent;box-shadow:none;color:transparent}
  .kyshard{position:absolute;inset:-5px;border-radius:50%;display:grid;place-items:center;background:#a92828;border:5px solid #efe7d6;color:#fff;font:700 42px var(--serif);opacity:0}
  .kyseal.split .kyshard{animation:kyshatter 1.25s cubic-bezier(.2,.5,.3,1) forwards;animation-delay:var(--d)}
  @keyframes kyshatter{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rr)) scale(.72)}}
  .kywinslash{position:fixed;left:calc(var(--x) - 115px);top:calc(var(--y) + var(--oy));width:230px;height:4px;background:#f8f3e8;box-shadow:0 0 5px #fff,0 0 18px #0b0b0b;opacity:0;transform:rotate(var(--r)) scaleX(0);transform-origin:0 50%}
  .kywinslash.go{animation:kywinslash .28s cubic-bezier(.15,0,.05,1) forwards}
  @keyframes kywinslash{0%{opacity:1;transform:rotate(var(--r)) scaleX(0)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--r)) scaleX(1)}}
  .kywintitle{position:absolute;left:0;right:0;bottom:12%;text-align:center;color:#f0eadc;font:700 clamp(22px,4vw,52px) var(--serif);letter-spacing:.18em;text-transform:uppercase;text-shadow:0 3px 22px #000;opacity:0;animation:kytitle 2.3s ease 1.1s forwards}
  @keyframes kytitle{0%{opacity:0;letter-spacing:.5em}35%,80%{opacity:1;letter-spacing:.18em}100%{opacity:0}}

  /* ---------- a moon on still water ----------
     Everything fades out. A moon comes up, and stands in its own reflection.
     Hikari's is red. The Mask's is a NEW moon — a hole, and no stars at all. */
  .mnshow{position:fixed;inset:0;z-index:88;pointer-events:none;overflow:hidden;
      animation:mnfade 3.3s ease forwards}
  @keyframes mnfade{0%{opacity:0} 9%{opacity:1} 76%{opacity:1} 100%{opacity:0}}
  .mnsky{position:absolute;inset:0;background:#03040a}
  .mnshow.blood .mnsky{background:
      radial-gradient(ellipse 50% 34% at 50% 30%, rgba(200,30,50,.36), transparent 70%),
      linear-gradient(180deg, #14040a 0%, #2a0710 45%, #050208 100%)}
  .mnshow.new .mnsky{background:
      linear-gradient(180deg, #05060c 0%, #080a12 55%, #020306 100%)}

  /* the moon itself, coming up */
  .mnmoon{position:absolute;left:50%;top:30%;width:150px;height:150px;border-radius:50%;
      margin-left:-75px;margin-top:-75px;opacity:0;
      animation:mnrise 3.3s cubic-bezier(.2,.8,.3,1) forwards}
  @keyframes mnrise{
    0%  {opacity:0; transform:translateY(72px) scale(.82)}
    26% {opacity:1; transform:translateY(0)    scale(1)}
    74% {opacity:1; transform:translateY(-8px) scale(1.02)}
    100%{opacity:0; transform:translateY(-14px) scale(1.05)}}
  .mnshow.blood .mnmoon{
      background:radial-gradient(circle at 40% 36%, #ff6a6a, #d02038 46%, #7a0d1e 78%);
      box-shadow:0 0 90px 30px rgba(200,30,55,.55), 0 0 200px 70px rgba(150,15,35,.35)}
  /* a NEW moon is not lit. It is the ABSENCE of one, ringed in cold light. */
  .mnshow.new .mnmoon{
      background:#010104;
      box-shadow:0 0 0 2px rgba(190,205,230,.5), 0 0 46px 8px rgba(150,175,215,.3),
                 inset 0 0 60px 12px #000}

  /* the water, and the moon standing in it */
  .mnwater{position:absolute;left:0;right:0;bottom:0;height:42%;overflow:hidden;
      opacity:0;animation:mnwat 3.3s ease forwards}
  @keyframes mnwat{0%{opacity:0} 30%{opacity:1} 76%{opacity:1} 100%{opacity:0}}
  .mnshow.blood .mnwater{background:linear-gradient(180deg,#1a050c,#070209)}
  .mnshow.new   .mnwater{background:linear-gradient(180deg,#05070e,#010204)}
  .mnrefl{position:absolute;left:50%;top:-26px;width:150px;height:150px;border-radius:50%;
      margin-left:-75px;filter:blur(7px);opacity:.55;
      animation:mnwobble 4.5s ease-in-out infinite}
  .mnshow.blood .mnrefl{
      background:radial-gradient(circle at 40% 36%, #ff6a6a, #c02038 48%, transparent 76%)}
  .mnshow.new .mnrefl{
      background:radial-gradient(circle at 50% 50%, transparent 52%, rgba(150,175,215,.28) 58%, transparent 72%)}
  @keyframes mnwobble{
    0%,100%{transform:scaleY(-1) translateY(0)    scaleX(1)}
    50%    {transform:scaleY(-1) translateY(-4px) scaleX(1.05)}}
  .mnripple{position:absolute;inset:0;opacity:.5;
      background:repeating-linear-gradient(180deg,
        transparent 0 7px, rgba(255,255,255,.08) 7px 8px);
      animation:mnrip 5s linear infinite}
  @keyframes mnrip{to{transform:translateY(8px)}}
  .mnshow.blood .mnripple{background:repeating-linear-gradient(180deg,
        transparent 0 7px, rgba(255,120,130,.12) 7px 8px)}

  /* stars: the blood moon has them, the new moon has NONE. That is the point. */
  .mnshow i{position:absolute;border-radius:50%;background:#ffd9d9;
      box-shadow:0 0 6px 2px rgba(255,140,150,.7);
      animation:twinkle ease-in-out infinite}

  .lgname.mn{top:auto;bottom:9%;color:#fff;
      text-shadow:0 0 30px var(--lc), 0 2px 22px rgba(0,0,0,.95);
      animation:lgname 3.3s ease forwards;animation-delay:.9s}
  .mnshow.gone{opacity:0;transition:opacity .8s ease}

  /* ---------- Luo Yiming: the whole screen drowns in black ink ----------
     A handful of oversized ink blots bloom from scattered points and swallow
     the entire frame within a heartbeat. His name surfaces in what's left of
     the light, then the ink drains away and gives the board back. */
  .lyshow{position:fixed;inset:0;z-index:88;pointer-events:none;overflow:hidden}
  .lyblot{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:0;
      background:radial-gradient(circle at 50% 50%, #000 0%, #000 58%, rgba(0,0,0,.88) 78%, rgba(0,0,0,0) 100%);
      animation:lyblot .95s cubic-bezier(.15,.8,.25,1) forwards;animation-delay:var(--d,0s)}
  @keyframes lyblot{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}
      35%{opacity:1}
      100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  .lyshow.gone .lyblot{animation:lyblotgone 1.2s ease forwards}
  @keyframes lyblotgone{0%{opacity:1}100%{opacity:0}}
  .lyshow .lgname{color:#f2eee4;text-shadow:0 0 34px rgba(0,0,0,.95),0 0 70px rgba(0,0,0,.8);
      animation:lgname 2.6s ease forwards;animation-delay:1.1s}
  .lysub{position:absolute;top:calc(50% + 122px);left:0;right:0;text-align:center;
      font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
      color:#9a9488;opacity:0;animation:lgname 2.6s ease forwards;animation-delay:1.22s}

  /* ---------- Gerdias: the world goes out, and only he remains ---------- */
  .gdshow{position:fixed;inset:0;z-index:88;pointer-events:none;overflow:hidden}
  .gddark{position:absolute;inset:0;background:#020103;opacity:0;
      transition:opacity .55s ease}
  .gdshow.dark .gddark{opacity:1}
  .gdfigure{position:absolute;left:50%;top:50%;font-size:96px;line-height:1;
      color:#fff;transform:translate(-50%,-50%) scale(.7);opacity:0;
      text-shadow:0 0 30px #fff, 0 0 70px var(--lc);
      transition:opacity .9s ease, transform .9s cubic-bezier(.2,1.3,.3,1)}
  .gdshow.figure .gdfigure{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .gdwave{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;
      border-radius:50%;
      background:radial-gradient(circle, var(--lc), rgba(20,7,15,.9) 60%, transparent 75%);
      opacity:0;transform:scale(0)}
  .gdshow.flood .gdwave{animation:gdflood 1.6s cubic-bezier(.2,.7,.25,1) forwards}
  @keyframes gdflood{
    0%  {opacity:0;   transform:scale(0)}
    12% {opacity:1}
    100%{opacity:.92; transform:scale(46)}}
  .gdveins{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .gdveins path.vmain{fill:none;stroke:var(--lc);stroke-width:5;stroke-linecap:round;
      opacity:0;filter:drop-shadow(0 0 10px var(--lc));
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
  .gdveins path.vbranch{fill:none;stroke:var(--lc);stroke-width:2.4;stroke-linecap:round;
      opacity:0;filter:drop-shadow(0 0 6px var(--lc));
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
  .gdshow.flood .gdveins path{animation:gdvein .9s ease forwards}
  @keyframes gdvein{
    0%  {opacity:0;  stroke-dashoffset:var(--len)}
    8%  {opacity:.95}
    100%{opacity:.8; stroke-dashoffset:0}}
  .lgname.gd{top:auto;bottom:10%;color:#e8d8ff;
      text-shadow:0 0 30px var(--lc), 0 2px 20px rgba(0,0,0,.95);
      animation:lgname 3.3s ease forwards;animation-delay:1.7s}
  .gdshow.gone{opacity:0;transition:opacity .7s ease}

  /* ---------- Lyra & Alecto: a red scarf, waving ---------- */
  .scfshow{position:fixed;inset:0;z-index:88;pointer-events:none;overflow:hidden;
      animation:mnfade 3.1s ease forwards}
  .scfveil{position:absolute;inset:0;
      background:radial-gradient(ellipse 65% 55% at 50% 42%, rgba(224,69,95,.22), rgba(6,4,8,.88) 74%)}
  .scfshow.corrupt .scfveil{
      background:radial-gradient(ellipse 65% 55% at 50% 42%, rgba(224,69,95,.18), rgba(4,2,6,.94) 74%)}
  .scfribbon{position:absolute;left:8%;right:8%;top:40%;height:60px;
      animation:scfdrift 3s ease-in-out infinite}
  @keyframes scfdrift{
    0%,100%{transform:translateX(0) rotate(-3deg)}
    50%    {transform:translateX(3%) rotate(2deg)}}
  .scfseg{position:absolute;top:0;width:9%;height:44px;border-radius:6px;
      background:linear-gradient(180deg,#ff5a72,#c0243f);
      box-shadow:0 0 14px rgba(224,69,95,.55);
      animation:scfwave 1.4s ease-in-out infinite;
      animation-delay:calc(var(--i) * 90ms)}
  @keyframes scfwave{
    0%,100%{transform:translateY(0)    rotate(0deg) scaleY(1)}
    50%    {transform:translateY(-16px) rotate(8deg) scaleY(1.08)}}
  /* the corruption climbs up the ribbon, segment by segment, and darkens each one */
  .scfshow.corrupt .scfseg{
      animation:scfwave 1.4s ease-in-out infinite, scfcorrupt 1s ease forwards;
      animation-delay:calc(var(--i)*90ms), calc(900ms + var(--i)*70ms)}
  @keyframes scfcorrupt{
    0%  {background:linear-gradient(180deg,#ff5a72,#c0243f);
         box-shadow:0 0 14px rgba(224,69,95,.55)}
    100%{background:linear-gradient(180deg,#3a1030,#0a0410);
         box-shadow:0 0 18px rgba(140,60,190,.5)}}
  .scftendril{position:absolute;bottom:0;width:3px;height:0;border-radius:2px;
      background:linear-gradient(0deg, transparent, #6b2f8a 40%, #14070f);
      box-shadow:0 0 12px rgba(140,60,190,.6);
      animation:scftendril 1.3s cubic-bezier(.2,.8,.3,1) forwards}
  @keyframes scftendril{
    0%  {height:0;    opacity:0}
    20% {opacity:.9}
    100%{height:62vh; opacity:.75}}
  .scfmote{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffd7c8;
      box-shadow:0 0 8px 2px rgba(255,180,150,.8);
      animation:mofloat 3s ease-in-out infinite;--dx:20px;--dy:-30px}
  .lgname.scf{top:auto;bottom:12%;color:#ffd7dd;
      text-shadow:0 0 26px var(--lc), 0 2px 20px rgba(0,0,0,.95);
      animation:lgname 3.1s ease forwards;animation-delay:1.0s}
  .scfshow.gone{opacity:0;transition:opacity .7s ease}

  /* ---------- The Painter of Lathren: a painting, and it gets corrupted ---------- */
  .ptshow{position:fixed;inset:0;z-index:88;pointer-events:none;
      display:grid;place-items:center;
      background:radial-gradient(ellipse 70% 60% at 50% 46%, rgba(90,70,30,.30), rgba(4,3,2,.88) 78%);
      animation:mnfade 3.35s ease forwards}
  /* an ornate gilt frame, properly beveled rather than a flat gradient card */
  .ptframe{position:relative;width:min(460px,82vw);height:min(340px,60vh);
      padding:20px;border-radius:3px;
      background:linear-gradient(155deg,#e6c07a,#8a6428 45%,#5c4118);
      box-shadow:0 28px 80px rgba(0,0,0,.75),
        inset 0 0 0 2px rgba(255,235,190,.35), inset 0 0 30px rgba(0,0,0,.5);
      animation:ptin 3.0s cubic-bezier(.2,.8,.3,1) forwards}
  @keyframes ptin{
    0%  {opacity:0; transform:scale(.85) rotate(-2deg)}
    16% {opacity:1; transform:scale(1)   rotate(0)}
    84% {opacity:1}
    100%{opacity:0}}
  .ptorn{position:absolute;font-size:22px;line-height:1;color:#f5deA0;opacity:.85;
      text-shadow:0 1px 2px rgba(0,0,0,.6)}
  .ptorn.tl{top:2px;left:4px} .ptorn.tr{top:2px;right:4px;transform:scaleX(-1)}
  .ptorn.bl{bottom:2px;left:4px;transform:scaleY(-1)}
  .ptorn.br{bottom:2px;right:4px;transform:scale(-1,-1)}
  .ptmat{position:relative;width:100%;height:100%;padding:10px;border-radius:2px;
      background:#1b140c;box-shadow:inset 0 0 18px rgba(0,0,0,.7)}
  .ptcanvas{position:relative;width:100%;height:100%;overflow:hidden;border-radius:1px;
      background:linear-gradient(180deg,#e9dcc4 0%,#d8c6a4 58%,#c2ac86 100%);
      box-shadow:inset 0 0 40px rgba(60,40,15,.25)}
  /* the composition: a sky, a ground, and a figure standing between them */
  .ptsky{position:absolute;inset:0;height:58%;
      background:linear-gradient(180deg, rgba(230,190,140,.5), transparent)}
  .ptglow{position:absolute;left:26%;top:10%;width:46%;height:46%;border-radius:50%;
      background:radial-gradient(circle, rgba(255,225,160,.55), transparent 70%);
      filter:blur(6px)}
  .ptground{position:absolute;left:0;right:0;bottom:0;height:34%;
      background:linear-gradient(180deg, rgba(90,68,40,.15), rgba(50,36,18,.55))}
  .ptfigure{position:absolute;left:50%;bottom:8%;width:15%;height:52%;
      transform:translateX(-50%);border-radius:50% 50% 18% 18% / 60% 60% 14% 14%;
      background:linear-gradient(180deg, rgba(30,22,14,.88), rgba(10,7,4,.94));
      box-shadow:0 0 30px rgba(0,0,0,.4);opacity:0;
      animation:ptfig 1.6s ease forwards;animation-delay:.5s}
  @keyframes ptfig{to{opacity:1}}
  /* soft impressionist blooms of colour, blurred, layered — brushwork, not confetti */
  .ptstroke{position:absolute;border-radius:50%;opacity:0;filter:blur(7px);
      mix-blend-mode:multiply;
      animation:ptstroke .6s ease forwards}
  @keyframes ptstroke{to{opacity:.5}}
  /* the fabric weave, so it reads as canvas and not glass */
  .ptweave{position:absolute;inset:0;opacity:.5;pointer-events:none;
      background:
        repeating-linear-gradient(90deg, rgba(60,42,20,.05) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(0deg,  rgba(60,42,20,.05) 0 2px, transparent 2px 4px)}
  .ptstain{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;
      background:radial-gradient(circle, #0a0410, #1c0f2a 55%, transparent 75%);
      transform:translate(-50%,-50%)}
  .ptshow.corrupt .ptstain{animation:ptstain 1.3s cubic-bezier(.2,.7,.25,1) forwards}
  @keyframes ptstain{
    0%  {width:0;    height:0;    opacity:0}
    10% {opacity:.95}
    100%{width:680px;height:680px;opacity:.97}}
  .ptshow.corrupt .ptstroke,
  .ptshow.corrupt .ptsky,
  .ptshow.corrupt .ptground,
  .ptshow.corrupt .ptglow{animation:ptdrain 1.2s ease forwards}
  .ptshow.corrupt .ptfigure{animation:ptfigfade 1.2s ease forwards}
  @keyframes ptdrain{to{filter:grayscale(1) brightness(.3) blur(8px); opacity:.25}}
  @keyframes ptfigfade{to{filter:grayscale(1) brightness(.15); opacity:.15}}
  .ptcrack{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0}
  .ptshow.corrupt .ptcrack{opacity:1}
  .ptcrack path{fill:none;stroke:#1c0f2a;stroke-width:2;stroke-linecap:round;
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
      animation:ptcrackgrow .4s ease forwards}
  @keyframes ptcrackgrow{to{stroke-dashoffset:0}}
  /* chips of paint flaking off as the meaning goes out of it */
  .ptchip{position:absolute;width:7px;height:7px;border-radius:1px;
      background:linear-gradient(160deg,#e6c07a,#8a6428);opacity:0;
      box-shadow:0 2px 4px rgba(0,0,0,.5);
      animation:ptchip 1.1s cubic-bezier(.3,.6,.3,1) forwards}
  @keyframes ptchip{
    0%  {opacity:0;   transform:translateY(0) rotate(0deg)}
    12% {opacity:.9}
    100%{opacity:0;   transform:translateY(60px) rotate(220deg)}}
  .lgname.pt{top:auto;bottom:8%;color:#f0e2c0;
      text-shadow:0 0 24px rgba(20,10,30,.9), 0 2px 20px rgba(0,0,0,.95);
      animation:lgname 3.35s ease forwards;animation-delay:1.2s}
  .ptshow.gone{opacity:0;transition:opacity .7s ease}

  /* ---------- The Ashenwild: it remembers ---------- */
  .awshow{position:fixed;inset:0;z-index:88;pointer-events:none;overflow:hidden;
      animation:mnfade 3.3s ease forwards}
  .awveil{position:absolute;inset:0;
      background:radial-gradient(ellipse 75% 65% at 50% 55%, rgba(212,160,84,.28), rgba(8,10,5,.9) 76%)}
  .awvines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .awvine{fill:none;stroke:var(--lc);stroke-width:4;stroke-linecap:round;
      opacity:0;filter:drop-shadow(0 0 9px var(--lc));
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
      animation:awgrow 1.3s cubic-bezier(.2,.7,.25,1) forwards;animation-delay:var(--d)}
  @keyframes awgrow{
    0%  {opacity:0;   stroke-dashoffset:var(--len)}
    10% {opacity:.85}
    100%{opacity:.65; stroke-dashoffset:0}}
  .awcore{position:absolute;left:50%;top:50%;font-size:88px;line-height:1;color:var(--lc);
      transform:translate(-50%,-50%) scale(.6);opacity:0;text-shadow:0 0 40px var(--lc);
      animation:awcore 2.2s cubic-bezier(.2,1.3,.3,1) forwards;animation-delay:.9s}
  @keyframes awcore{
    0%  {opacity:0; transform:translate(-50%,-50%) scale(.4)}
    30% {opacity:1; transform:translate(-50%,-50%) scale(1)}
    80% {opacity:1}
    100%{opacity:0}}
  .awspore{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;
      background:#f0d67a;box-shadow:0 0 8px 2px rgba(240,214,122,.85);opacity:0;
      animation:awspore ease-in infinite}
  @keyframes awspore{
    0%  {opacity:0;   transform:translateY(0)}
    12% {opacity:.9}
    90% {opacity:.5}
    100%{opacity:0;   transform:translateY(-92vh) translateX(14px)}}
  .lgname.aw{top:auto;bottom:9%;color:#f6ecc8;
      text-shadow:0 0 26px var(--lc), 0 2px 20px rgba(0,0,0,.95);
      animation:lgname 3.3s ease forwards;animation-delay:1.3s}
  .awshow.gone{opacity:0;transition:opacity .7s ease}

  /* ---------- Wither: a burst of red and shadows ---------- */
  .wthshow{position:fixed;inset:0;z-index:88;pointer-events:none;
      background:radial-gradient(ellipse 60% 55% at 50% 50%, rgba(190,20,40,.35),
        rgba(6,2,4,.55) 70%, transparent 85%);
      opacity:0;animation:wthveil .9s ease forwards}
  @keyframes wthveil{0%{opacity:0} 14%{opacity:1} 70%{opacity:.7} 100%{opacity:0}}
  .wthshard{position:absolute;left:50%;top:50%;width:6px;height:14px;border-radius:2px;
      background:linear-gradient(180deg,#ff3d54,#1c0508);opacity:0;
      box-shadow:0 0 10px rgba(255,60,80,.8);
      animation:wthfly .75s cubic-bezier(.15,.8,.25,1) forwards}
  @keyframes wthfly{
    0%  {opacity:0; transform:translate(-50%,-50%) scale(.3)}
    16% {opacity:1}
    100%{opacity:0; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1)}}
  .wthshow.gone{opacity:0;transition:opacity .5s ease}

  /* ---------- Suhan and The Harvest ----------
     The world goes out. The Blade cuts it. The world comes back, cut.
     The two halves are genuinely OPAQUE — the screen really does go black, so
     when they come apart the board underneath is a reveal, not a fade. */
  .scshow{position:fixed;inset:0;z-index:88;pointer-events:none;overflow:hidden;--lc:#b07ff0}

  .schalf{position:absolute;left:-6%;right:-6%;height:58%;
      background:#04020a;opacity:0;
      transition:opacity .34s ease, transform 1.0s cubic-bezier(.2,.75,.25,1)}
  .schalf.top{top:-4%; clip-path:polygon(0 0, 100% 0, 100% 86%, 0 100%)}
  .schalf.bot{top:46%; clip-path:polygon(0 14%, 100% 0, 100% 100%, 0 100%)}
  .scshow.dark .schalf{opacity:1}                       /* 1 — everything goes out */

  /* 2 — the blade, drawn down the seam */
  .scarc{position:absolute;left:-30%;top:50%;width:160%;height:5px;opacity:0;
      transform-origin:0 50%;
      background:linear-gradient(90deg,transparent,#fff 26%,var(--lc) 52%,transparent);
      box-shadow:0 0 40px 12px var(--lc)}
  .scshow.cut .scarc{animation:scarc .48s cubic-bezier(.3,.1,.1,1) forwards}
  @keyframes scarc{0%  {opacity:1; transform:translateY(-50%) rotate(-18deg) scaleX(0)}
                   80% {opacity:1}
                   100%{opacity:0; transform:translateY(-50%) rotate(-18deg) scaleX(1)}}
  /* the seam it leaves burning */
  .sccut{position:absolute;left:-30%;top:50%;width:160%;height:3px;opacity:0;
      transform:translateY(-50%) rotate(-18deg);
      background:linear-gradient(90deg,transparent,#e6d0ff 20%,var(--lc) 50%,#e6d0ff 80%,transparent);
      box-shadow:0 0 28px 6px var(--lc), 0 0 60px 16px var(--lc)}
  .scshow.cut .sccut{opacity:1;transition:opacity .3s ease .3s}
  .scshow.split .sccut{animation:scfade 1.1s ease .25s forwards}
  @keyframes scfade{to{opacity:0}}

  /* 3 — and it opens. The slide has to outlast the fade, or the halves simply
     blink out instead of coming apart. */
  .scshow.split .schalf{opacity:0;
      transition:opacity .85s ease .22s, transform 1.0s cubic-bezier(.2,.75,.25,1)}
  .scshow.split .schalf.top{transform:translate(-30px,-38px) rotate(-1.6deg)}
  .scshow.split .schalf.bot{transform:translate(30px,38px)  rotate(-1.6deg)}

  .lgname.sc{top:calc(50% + 96px);color:#e8d8ff;
      text-shadow:0 0 30px var(--lc), 0 2px 20px rgba(0,0,0,.95);
      animation:lgname 2.2s ease forwards;animation-delay:.72s}
  .scshow.gone{opacity:0;transition:opacity .65s ease}

  /* ---------- Mei-Mei's entrance ----------
     Each rank glyph is drawn TWICE, clipped to its top and bottom half. When the
     cut lands, the halves separate and fall. That is the whole trick. */
  .mmshow{position:fixed;inset:0;z-index:88;pointer-events:none;
      display:grid;place-items:center}
  .mmveil{position:absolute;inset:0;opacity:0;
      background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(150,16,40,.55), rgba(6,9,15,.9) 75%);
      animation:mmveil 2.4s ease forwards}
  @keyframes mmveil{0%{opacity:0} 18%{opacity:1} 74%{opacity:1} 100%{opacity:0}}
  .mmrow{position:relative;display:flex;gap:34px;align-items:center}
  .mmr{position:relative;width:76px;height:96px;opacity:0;
      animation:mmin .5s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:var(--d)}
  @keyframes mmin{0%{opacity:0;transform:translateY(-24px) scale(.7)}
                  100%{opacity:1;transform:none}}
  .mmr span{position:absolute;left:0;right:0;text-align:center;font-size:58px;line-height:76px;
      color:var(--rkc);text-shadow:0 0 26px var(--rkc)}
  .mmtop{top:0;height:38px;clip-path:inset(0 0 50% 0)}
  .mmbot{top:0;height:76px;clip-path:inset(50% 0 0 0)}
  .mmname{top:74px;font-family:var(--mono);font-size:9px;line-height:1;letter-spacing:.18em;
      text-transform:uppercase;text-shadow:none;opacity:.8}
  /* the cut */
  .mmshow.cut .mmtop{animation:mmtop .9s cubic-bezier(.3,.7,.4,1) forwards}
  .mmshow.cut .mmbot{animation:mmbot 1.0s cubic-bezier(.3,.7,.4,1) forwards}
  .mmshow.cut .mmname{animation:mmfade .5s ease forwards}
  @keyframes mmtop{0%{transform:none;opacity:1}
                   100%{transform:translate(-26px,-40px) rotate(-24deg);opacity:0}}
  @keyframes mmbot{0%{transform:none;opacity:1}
                   100%{transform:translate(22px,66px) rotate(19deg);opacity:0}}
  @keyframes mmfade{to{opacity:0;transform:translateY(10px)}}
  .mmshow.gone{opacity:0;transition:opacity .6s ease}

  /* ---------- Lichen's entrance: the sky opens ---------- */
  .lcshow{position:fixed;inset:0;z-index:88;pointer-events:none}
  .lcveil{position:absolute;inset:0;opacity:0;
      background:radial-gradient(ellipse 65% 60% at 50% 50%, rgba(70,150,235,.42), rgba(6,14,30,.86) 78%);
      animation:lcveil 2.3s ease forwards}
  @keyframes lcveil{0%{opacity:0} 16%{opacity:1} 70%{opacity:1} 100%{opacity:0}}
  .lcburst{position:absolute;left:50%;top:50%;width:0;height:0}
  .lcburst i{position:absolute;left:0;top:0;width:var(--sz);height:var(--sz);border-radius:50%;
      background:#eaf6ff;opacity:0;
      box-shadow:0 0 10px 3px rgba(160,215,255,.95), 0 0 26px 8px rgba(90,170,235,.5);
      animation:lcfly ease-out forwards}
  @keyframes lcfly{
    0%  {opacity:0; transform:translate(0,0) scale(.2)}
    18% {opacity:1}
    100%{opacity:0; transform:translate(var(--tx),var(--ty)) scale(1)}}
  .lcshow.gone{opacity:0;transition:opacity .7s ease}

  /* the Mask answers a wound — a cut across whoever did it */
  .slash{position:fixed;z-index:78;pointer-events:none;width:150px;height:5px;
     background:linear-gradient(90deg,transparent,#fff 18%,#ffd8dc 50%,#e0455f 82%,transparent);
     border-radius:3px;filter:drop-shadow(0 0 8px rgba(255,255,255,.9));
     transform-origin:50% 50%;animation:slashcut .42s cubic-bezier(.2,.7,.3,1) forwards}
  .slash.violet{background:linear-gradient(90deg,transparent,#fff 16%,#d4b0ff 48%,#7b3fd0 82%,transparent);
     filter:drop-shadow(0 0 10px rgba(176,127,240,.95))}
  .slash.shadow{background:linear-gradient(90deg,transparent,#fff 16%,#c7cad1 45%,#000 88%,transparent);
     filter:drop-shadow(0 0 10px rgba(255,255,255,.85))}
  .slash.custom{background:linear-gradient(90deg,transparent,#fff 14%,var(--sc) 50%,var(--sc) 84%,transparent);
     filter:drop-shadow(0 0 10px var(--sc))}

  /* the Blade crossing the entire field, once per pass */
  .fslash{position:fixed;z-index:79;pointer-events:none;left:-10vw;width:120vw;height:6px;
     background:linear-gradient(90deg,transparent,#fff 14%,#d4b0ff 42%,#8b4ae0 74%,transparent);
     border-radius:4px;transform-origin:50% 50%;
     filter:drop-shadow(0 0 14px rgba(176,127,240,1));
     animation:fcut .5s cubic-bezier(.15,.85,.25,1) forwards}
  @keyframes fcut{
    0%  {opacity:0; transform:rotate(var(--fa)) scaleX(0)   translateX(-40%)}
    18% {opacity:1}
    55% {opacity:1; transform:rotate(var(--fa)) scaleX(1)   translateX(0)}
    100%{opacity:0; transform:rotate(var(--fa)) scaleX(1.1) translateX(6%)}}
  @keyframes slashcut{
    0%  {opacity:0; transform:rotate(var(--sa)) scaleX(.1)}
    22% {opacity:1; transform:rotate(var(--sa)) scaleX(1.12)}
    100%{opacity:0; transform:rotate(var(--sa)) scaleX(1.3)}}

  /* ---------- backrow ---------- */
  .en{width:126px;height:46px;border-radius:4px;flex:none;position:relative;cursor:help;
      padding:6px 8px;display:flex;flex-direction:column;justify-content:center;
      background:linear-gradient(100deg,rgba(30,39,57,.9),rgba(15,21,36,.9));
      border:1px solid var(--rar,var(--rule));border-left:3px solid var(--fac);
      box-shadow:0 3px 12px rgba(0,0,0,.45)}
  .en .en-n{font-family:var(--serif);font-size:10.5px;line-height:1.1;text-wrap:balance}
  .en .en-t{font-family:var(--mono);font-size:6px;letter-spacing:.13em;text-transform:uppercase;
      color:var(--fac);margin-top:3px}
  .en.apocrypha-work{isolation:isolate;overflow:visible;border-color:#a855f7;border-left-color:#a855f7;
      background:repeating-linear-gradient(176deg,rgba(3,0,7,.98) 0 5px,rgba(38,10,68,.94) 6px 7px);
      box-shadow:0 3px 16px #000,0 0 24px rgba(139,92,246,.55),inset 0 0 19px rgba(66,18,116,.78);
      animation:apocryphaWork 2.8s steps(2,end) infinite}
  .en.apocrypha-work::before,.en.apocrypha-work::after{position:absolute;z-index:-1;color:#c084fc;
      font:700 7px var(--mono);letter-spacing:.18em;white-space:nowrap;pointer-events:none;text-shadow:0 0 7px #7c3aed}
  .en.apocrypha-work::before{content:"[TEXT NOT FOUND] // 10 FALSE CLAUSES";left:-10px;top:-12px;animation:apocryphaRail 3.4s linear infinite}
  .en.apocrypha-work::after{content:"NULL / AMEND / REPEAT / ERASE";right:-8px;bottom:-12px;animation:apocryphaRail 2.6s linear infinite reverse}
  @keyframes apocryphaWork{0%,93%,100%{transform:none}94%{transform:skewX(2deg) translateX(1px)}96%{transform:skewX(-1deg) translateX(-1px)}}
  @keyframes apocryphaRail{0%{opacity:.18;clip-path:inset(0 100% 0 0)}35%,70%{opacity:.72;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 100%)}}
  /* Never animate filter on the card itself: .card.dead owns that property and
     must keep unaffordable cards visibly dim. Corruption lives in the text. */
  .card.glitch-card,.m.glitch-card,.en.glitch-card{box-shadow:0 0 0 1px rgba(168,85,247,.24),0 4px 16px rgba(0,0,0,.62)}
  /* Arassyn glitches harder than any other Blank Ledger card: the whole card
     periodically jitters, channel-splits and scanlines, layered on top of
     the shared glitch-card treatment every corrupted card already gets. */
  .card.glitch-card-arassyn,.m.glitch-card-arassyn,.en.glitch-card-arassyn{
    animation:arassynJitter 2.6s steps(1,end) infinite;
    box-shadow:0 0 0 2px rgba(168,85,247,.55),0 0 26px rgba(88,28,135,.6),0 4px 16px rgba(0,0,0,.7);
  }
  .card.glitch-card-arassyn::before,.m.glitch-card-arassyn::before,.en.glitch-card-arassyn::before{
    content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;z-index:3;border-radius:inherit;
    background:repeating-linear-gradient(0deg,rgba(168,85,247,.1) 0 2px,transparent 2px 4px);
    animation:arassynScan 1.9s linear infinite;
  }
  @keyframes arassynJitter{
    0%,79%,100%{transform:none;filter:none}
    80%{transform:translate(3px,-2px) skewX(-3deg);filter:hue-rotate(30deg) saturate(1.7)}
    82%{transform:translate(-4px,1px) skewX(2deg);filter:hue-rotate(-25deg)}
    84%{transform:translate(2px,2px);filter:none}
    86%{transform:translate(-3px,-1px) scaleY(1.02);filter:invert(.1)}
    88%{transform:none;filter:none}
    90%{transform:translate(4px,0) skewX(4deg);filter:hue-rotate(45deg) saturate(1.5)}
    92%,100%{transform:none;filter:none}
  }
  @keyframes arassynScan{0%{background-position-y:0}100%{background-position-y:40px}}
  @media(prefers-reduced-motion:reduce){.glitch-card-arassyn,.glitch-card-arassyn::before{animation:none}}
  /* Erase's one-shot glitch: the target card itself bugs out for a beat
     instead of a projectile flying in to hit it. Single pass, not looping. */
  .card.erase-glitch,.m.erase-glitch{animation:eraseGlitchJitter .7s steps(2,end) 1}
  .card.erase-glitch::after,.m.erase-glitch::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:4;border-radius:inherit;mix-blend-mode:screen;
    background:repeating-linear-gradient(0deg,rgba(168,85,247,.28) 0 2px,transparent 2px 4px);
    animation:eraseGlitchScan .7s steps(2,end) 1;
  }
  @keyframes eraseGlitchJitter{
    0%{transform:none;filter:none}
    14%{transform:translate(4px,-2px) skewX(-4deg);filter:hue-rotate(40deg) saturate(1.8) contrast(1.3)}
    29%{transform:translate(-5px,2px) skewX(3deg);filter:hue-rotate(-30deg) invert(.12)}
    43%{transform:translate(3px,1px);filter:none}
    57%{transform:translate(-3px,-1px) scaleY(1.03);filter:hue-rotate(50deg)}
    71%{transform:translate(2px,0) skewX(2deg);filter:invert(.08)}
    100%{transform:none;filter:none}
  }
  @keyframes eraseGlitchScan{0%{opacity:.9;background-position-y:0}100%{opacity:0;background-position-y:30px}}
  @media(prefers-reduced-motion:reduce){.erase-glitch,.erase-glitch::after{animation:none}}
  .glitch-clean{position:relative}.glitch-corrupt{position:absolute;inset:0;color:#d8b4fe;opacity:0;white-space:nowrap;
      text-shadow:2px 0 #a855f7,-2px 0 #3b0764;pointer-events:none;animation:zalgoFlicker 3.7s steps(1,end) infinite}
  @keyframes zalgoFlicker{0%,84%,91%,100%{opacity:0;transform:none}85%{opacity:.9;transform:translate(2px,-1px)}
      87%{opacity:.65;transform:translate(-2px,1px) skewX(-5deg)}89%{opacity:1;transform:translate(1px,0)}}
  .en.tgt{cursor:pointer;box-shadow:0 0 0 2px var(--blood), 0 0 22px rgba(191,67,64,.5)}
  .en .bloodcounter{position:absolute;top:-9px;right:-9px;z-index:4;
     min-width:34px;height:18px;padding:0 6px;border-radius:10px;display:grid;place-items:center;
     background:linear-gradient(180deg,#bf4340,#5c1614);border:1px solid #2a0908;
     color:#ffe3e0;font:700 8px var(--mono);box-shadow:0 0 12px rgba(191,67,64,.65)}
  .en .bloodcounter i{font-style:normal;opacity:.75;margin-left:2px}

  .hand{display:flex;justify-content:center;gap:6px;padding:0 16px 10px;min-height:224px;
        align-items:flex-end;flex:none}
  .hand .card{margin:0}
  .hand .card.lady-reflected{isolation:isolate;overflow:visible;box-shadow:0 6px 18px rgba(0,0,0,.65),0 0 18px rgba(138,226,248,.3)}
  .aura-reflection{position:absolute;inset:-1px;border:1px solid rgba(190,242,255,.5);border-radius:inherit;pointer-events:none;z-index:-1;transform:translate(7px,5px);filter:blur(.3px);opacity:.52;box-shadow:0 0 13px rgba(126,219,245,.35);animation:mirrorAuraBreath 2.7s ease-in-out infinite}
  .mirror-hover-echoes{position:absolute;inset:0;pointer-events:none;z-index:-2;opacity:0;transition:opacity .22s ease}
  .mirror-copy{position:absolute;inset:3px;border:1px solid rgba(203,246,255,.72);border-radius:7px;background:linear-gradient(155deg,rgba(208,248,255,.3),rgba(18,48,76,.78));box-shadow:0 6px 22px rgba(0,0,0,.7),0 0 20px rgba(127,222,248,.55);transition:transform .38s cubic-bezier(.15,.9,.2,1),opacity .25s ease;opacity:0;display:flex;align-items:center;justify-content:center;padding:10px;text-align:center;color:#e7fbff;font:12px var(--serif);text-shadow:0 1px 3px #001}
  .hand .card.lady-affected:hover{z-index:42;transform:translateY(-13px) scale(1.03)}
  .hand .card.lady-affected:hover .mirror-hover-echoes{opacity:1}
  .hand .card.lady-affected:hover .mirror-copy:nth-child(1){opacity:.62;transform:translate(-112px,7px) rotate(-13deg) scale(.88)}
  .hand .card.lady-affected:hover .mirror-copy:nth-child(2){opacity:.74;transform:translate(112px,7px) rotate(13deg) scale(.88)}
  .hand .card.lady-affected:hover .mirror-copy:nth-child(3){opacity:.42;transform:translate(0,-34px) scale(.92)}
  .m.lady-reflected,.en.lady-reflected{isolation:isolate;overflow:visible;box-shadow:0 5px 14px rgba(0,0,0,.5),0 0 18px rgba(130,224,249,.32)}
  @keyframes mirrorAuraBreath{0%,100%{opacity:.25;transform:translate(6px,4px)}50%{opacity:.7;transform:translate(10px,7px)}}
  /* The Mirror Realm duplicates a row of cards in cold glass, then one cut
     divides every original and reflection. Each visible half is separately
     clipped, so the cards genuinely come apart instead of merely fading. */
  .mirror-realm-scene{position:fixed;inset:0;z-index:91;pointer-events:none;overflow:hidden;display:grid;place-items:center}
  .mr-veil{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 48%,rgba(117,218,238,.25),rgba(2,8,16,.92) 72%);animation:mrVeil 2.35s ease forwards}
  .mr-glass{position:absolute;left:50%;top:6%;bottom:6%;width:2px;opacity:0;background:linear-gradient(transparent,#dffaff 18% 82%,transparent);box-shadow:0 0 20px #8cecff,0 0 55px rgba(104,213,242,.72);transform:scaleY(.1);transition:.42s ease}
  .mirror-realm-scene.mirrored .mr-glass{opacity:.9;transform:scaleY(1)}
  .mr-cards{position:relative;width:min(840px,94vw);display:flex;justify-content:center;gap:clamp(8px,2vw,26px);perspective:900px}
  .mr-pair{position:relative;width:210px;height:174px;opacity:0;transform:translateY(22px) scale(.9);animation:mrCardIn .42s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:var(--d)}
  .mr-copy{position:absolute;top:0;width:92px;height:142px;transition:transform .5s cubic-bezier(.18,.88,.2,1),opacity .42s ease;filter:drop-shadow(0 12px 18px rgba(0,0,0,.65))}
  .mr-copy.original{left:6px}.mr-copy.reflection{right:6px;opacity:0;transform:rotateY(86deg) scaleX(-1)}
  .mirror-realm-scene.mirrored .mr-copy.original{transform:translateX(-4px)}
  .mirror-realm-scene.mirrored .mr-copy.reflection{opacity:.78;transform:rotateY(0) scaleX(-1) translateX(-4px)}
  .mr-half{position:absolute;inset:0;border:1px solid #9ce9f5;border-radius:6px;background:linear-gradient(155deg,rgba(184,240,249,.28),rgba(31,67,95,.94) 46%,rgba(6,20,35,.98));box-shadow:inset 0 0 25px rgba(161,237,250,.2);display:grid;place-items:center;padding:9px;color:#edfdff;font:11px/1.15 var(--serif);text-align:center;text-shadow:0 1px 4px #001623;transition:transform .7s cubic-bezier(.18,.72,.2,1),opacity .65s ease}
  .mr-half.with-source{padding:0;overflow:hidden;background:#101a2a}
  .mr-half .mr-source{position:absolute!important;left:0!important;top:0!important;margin:0!important;pointer-events:none!important;transform-origin:0 0!important}
  .mr-half .mr-source.card{transform:scale(.64)!important}.mr-half .mr-source.m{transform:scale(.77)!important}
  .mr-upper{clip-path:polygon(0 0,100% 0,100% 42%,0 67%)}.mr-lower{clip-path:polygon(0 67%,100% 42%,100% 100%,0 100%)}
  .mr-pair::after{content:"";position:absolute;z-index:4;left:-3px;right:-3px;top:54%;height:3px;opacity:0;transform:rotate(-14deg) scaleX(0);background:linear-gradient(90deg,transparent,#fff 16%,#91ebfa 52%,transparent);box-shadow:0 0 13px #baf7ff,0 0 28px #70dcec}
  .mirror-realm-scene.cut .mr-pair::after{animation:mrSlash .42s cubic-bezier(.15,.8,.2,1) forwards}
  .mirror-realm-scene.cut .mr-upper{transform:translate(-18px,-34px) rotate(-12deg);opacity:0}
  .mirror-realm-scene.cut .mr-lower{transform:translate(20px,42px) rotate(10deg);opacity:0}
  @keyframes mrVeil{0%,100%{opacity:0}15%,78%{opacity:1}}
  @keyframes mrCardIn{to{opacity:1;transform:none}}
  @keyframes mrSlash{0%{opacity:0;transform:rotate(-14deg) scaleX(0)}24%{opacity:1}70%{opacity:1;transform:rotate(-14deg) scaleX(1.1)}100%{opacity:0;transform:rotate(-14deg) scaleX(1.25)}}
  @media(prefers-reduced-motion:reduce){.mr-pair{animation:none;opacity:1;transform:none}.mr-copy.reflection{opacity:.75;transform:scaleX(-1)}.mirror-realm-scene.cut .mr-upper,.mirror-realm-scene.cut .mr-lower{opacity:0}}
  /* only crowd them together when the hand is genuinely full */
  .hand.tight{gap:0}
  .hand.tight .card{margin:0 -10px}
  .hand.packed{gap:0}
  .hand.packed .card{margin:0 -24px}
  .hand.enemy{min-height:40px;padding-bottom:0;gap:4px}
  .back{width:30px;height:44px;border-radius:4px;flex:none;margin:0 -8px;
        background:linear-gradient(150deg,#2a3450,#121826);border:1px solid var(--rule)}

  .end{padding:11px 18px;border-radius:4px;border:1px solid var(--gold-dim);cursor:pointer;
       background:linear-gradient(180deg,#2c2313,#1a1409);color:var(--gold);font-family:var(--mono);
       font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
  .end:hover{box-shadow:0 0 20px rgba(220,179,92,.28)}
  .end:disabled{opacity:.3;cursor:default;box-shadow:none}
  .end.wait{border-color:var(--rule);color:var(--dim)}

  /* Resolution-based scale-up, and the accessibility toggle's extra boost on
     top of it — both fold into the one --ui-scale number from updateUIScale().
     Zoom (not transform) so it changes layout size as well as paint size,
     matching the shrink-only breakpoints right below, which simply override
     this at small viewports exactly like they always have. */
  #game .hero,#game .art,#game .power{zoom:calc(var(--ui-scale,1) * var(--scale-hero,1))}
  #game .field .m{zoom:calc(var(--ui-scale,1) * var(--scale-board,1))}
  #game .rear .en{zoom:calc(var(--ui-scale,1) * var(--scale-board,1))}
  #game .hand .card{zoom:calc(var(--ui-scale,1) * var(--scale-hand,1))}

  /* Responsive arena density. Zoom changes layout size as well as paint size,
     so it does not fight card-hover, attack-lunge, or screen-shake transforms. */
  @media(max-height:850px){
    #game .side{padding:3px 10px;gap:8px}#game .hero,#game .art,#game .power{zoom:.84}
    #game .field{min-height:126px}#game .field .m{zoom:.84}#game .rear{min-height:42px}#game .rear .en{zoom:.82}
    #game .hand{min-height:174px;padding-bottom:5px}#game .hand .card{zoom:.82}
    .tgbar{height:52px}.tshead{height:46px}.tshand{height:120px}.tcardwrap{height:111px;width:82px}.tcardwrap .card{transform:scale(.54)}
    .tseat .m{transform:scale(.79);margin:-16px -11px}.tseat .en{transform:scale(.76);margin:-6px -13px}.tsrear{height:41px}
  }
  .amb.longgrass{background:linear-gradient(0deg,rgba(2,12,5,.88),rgba(14,39,19,.16) 62%,transparent),radial-gradient(ellipse at 50% 100%,rgba(75,128,73,.22),transparent 68%);overflow:hidden}
  .amb.longgrass .grassblade{position:absolute;bottom:-12px;width:5px;height:var(--gh);border-radius:100% 0 0 0;background:linear-gradient(90deg,#102619,#68815c 58%,#1e3723);transform-origin:50% 100%;filter:drop-shadow(0 0 3px rgba(45,91,52,.7));animation:ambGrassSway var(--gt) ease-in-out infinite alternate;animation-delay:var(--gd)}
  @keyframes ambGrassSway{from{transform:rotate(-7deg) translateX(-3px)}to{transform:rotate(12deg) translateX(7px)}}
  .hero.obscured-hero,.thero.obscured-hero{filter:brightness(.45) saturate(.65);box-shadow:0 0 30px #183b27,inset 0 0 32px #000!important;border-color:#80b890!important}
  .m.obscured-hidden,.en.obscured-hidden{overflow:hidden;border-color:#5b8069!important;background:linear-gradient(145deg,#07100c,#17251b 62%,#050807)!important;box-shadow:0 0 22px #183b27,inset 0 0 28px #000!important;color:#b8d4c0}
  .m.obscured-hidden::after,.en.obscured-hidden::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 38% 42%,#b8ffbc 0 2px,transparent 4px),radial-gradient(ellipse at 62% 42%,#b8ffbc 0 2px,transparent 4px),repeating-linear-gradient(115deg,transparent 0 13px,#9dd9a20a 14px 15px);filter:drop-shadow(0 0 5px #71d38c)}
  @media(max-height:690px){
    #game .hero,#game .art,#game .power{zoom:.7}#game .field{min-height:102px}#game .field .m{zoom:.68}
    #game .rear{min-height:34px}#game .rear .en{zoom:.68}#game .hand{min-height:143px}#game .hand .card{zoom:.66}
    .tgbar{height:46px}.tgturn{padding:4px 8px}.tshead{height:40px}.tshand{height:104px}.tcardwrap{height:95px;width:76px}.tcardwrap .card{transform:scale(.5)}
    .tseat .m{transform:scale(.7);margin:-23px -17px}.tseat .en{transform:scale(.68);margin:-9px -19px}.tsrear{height:34px}
  }
  @media(max-width:980px){
    #game .side{gap:7px;padding-inline:8px}#game .hero,#game .art{zoom:.8}#game .power{max-width:160px}
    #game .field{overflow-x:auto;justify-content:flex-start}#game .hand{overflow-x:auto;justify-content:flex-start;scrollbar-width:thin}
  }
  @media(pointer:coarse){
    #game .hand,#teamgame .tshand,#teamgame .tsboard{scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
    #game .hand .card,#teamgame .tcardwrap,#teamgame .m{scroll-snap-align:center}
    #game .hand{justify-content:flex-start;overflow-x:auto;gap:10px;padding-inline:calc(50vw - 74px)}
    #game .hand.tight .card,#game .hand.packed .card{margin:0}
    #game .field .m,#teamgame .m{min-width:96px}
    .end,#tgend{min-height:44px;min-width:96px}
    #hint{top:6px;max-width:calc(100vw - 12px);white-space:normal;text-align:center}
  }

  /* ---------- turn counter ---------- */
  .turnbox{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
       color:var(--dim);text-align:center;margin-bottom:8px;line-height:1.4}
  .turnbox b{display:block;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums;
       letter-spacing:0}
  .turnbox.mine b{color:var(--gold)}

  /* ---------- pause / surrender ---------- */
  #pause{position:fixed;inset:0;z-index:96;display:none;place-items:center;
       background:rgba(6,9,15,.86);backdrop-filter:blur(4px)}
  #pause.on{display:grid}
  .pbox{width:min(440px,92vw);padding:34px 32px;border-radius:8px;text-align:center;
       background:linear-gradient(175deg,#161d2c,#0a0e17);border:1px solid var(--rule);
       border-top:3px solid var(--gold);box-shadow:0 30px 90px rgba(0,0,0,.8)}
  .pbox h1{font-family:var(--serif);font-weight:400;font-size:30px;margin:0 0 6px}
  .psub{color:var(--dim);font-size:12px;line-height:1.6;margin:0 0 22px}
  .prow{display:flex;gap:10px;justify-content:center;margin-bottom:10px}
  .prow .go{flex:1}
  .psettings{margin-top:16px;padding-top:16px;border-top:1px solid var(--rule);text-align:left}
  .psettings h2{margin:0 0 10px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
       text-transform:uppercase;color:var(--dim);text-align:center}
  .settings-check{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--dim);
       font-family:var(--mono);font-size:10px;letter-spacing:.04em;cursor:pointer}
  .settings-check input{accent-color:var(--gold);width:14px;height:14px;cursor:pointer}
  /* Per-element size — the automatic resolution scale and the accessibility
     toggle both still apply underneath these; each slider is a further
     multiplier on just its own piece of the HUD (duel mode only — team
     mode's board/hand are pre-shrunk on purpose to fit four seats). */
  .scale-sliders{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
  .scale-row{display:flex;align-items:center;gap:8px;margin-top:8px;
       font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--dim)}
  .scale-row span{width:84px;flex:none}
  .scale-row input[type="range"]{flex:1;accent-color:var(--gold)}
  .scale-row input:not([type="range"]){flex:1;min-width:0;padding:6px 8px;border:1px solid var(--rule);border-radius:3px;background:#080c14;color:var(--ink);font:9px var(--mono)}
  .scale-row output{min-width:34px;text-align:right;color:var(--ink)}
  .scale-reset{margin-top:10px;width:100%;padding:6px;border:1px solid var(--rule);border-radius:3px;
       background:rgba(255,255,255,.025);color:var(--dim);font-family:var(--mono);font-size:9px;
       letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
  .scale-reset:hover{border-color:var(--gold-dim);color:var(--gold)}
  .pdanger{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);
       display:flex;gap:10px;justify-content:center}
  .quit{flex:1;padding:10px 14px;border-radius:4px;cursor:pointer;font-size:12px;
       background:transparent;color:var(--dim);border:1px solid var(--rule);
       font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-size:9px}
  .quit:hover{color:#ff8b7d;border-color:#6b2c2c;background:rgba(191,67,64,.08)}
  .quit.armed{color:#ff8b7d;border-color:#ff8b7d;background:rgba(191,67,64,.16)}
  .pconfirm{color:#ff8b7d;font-size:11.5px;line-height:1.5;margin:14px 0 0;min-height:1em}

  /* ---------- debug ---------- */
  #dbg{position:fixed;inset:0;z-index:97;display:none;place-items:start center;padding-top:9vh;
       background:rgba(6,9,15,.7);backdrop-filter:blur(3px)}
  #dbg.on{display:grid}
  .dbox{width:min(560px,94vw);border-radius:8px;overflow:hidden;
       background:linear-gradient(175deg,#161d2c,#0a0e17);border:1px solid var(--rule);
       border-top:3px solid #6fd08a;box-shadow:0 30px 90px rgba(0,0,0,.8)}
  .dhead{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;
       border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:8.5px;
       letter-spacing:.14em;text-transform:uppercase;color:#6fd08a}
  .dhead .dkey{color:var(--dim)}
  #dq{width:100%;padding:14px;border:0;border-bottom:1px solid var(--rule);
       background:#0a0e17;color:var(--ink);font-family:var(--sans);font-size:15px;outline:none}
  #dq::placeholder{color:#3a4358}
  .dmana{display:flex;align-items:center;gap:8px;padding:8px 14px;
       border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:8.5px;
       letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .dmana b{flex:1;color:#6fd08a;font-size:13px;letter-spacing:0;text-transform:none;
       font-family:var(--sans);text-align:center}
  .dmana button{border:1px solid var(--rule);background:rgba(255,255,255,.04);color:var(--ink);
       border-radius:4px;width:26px;height:22px;cursor:pointer;font-family:var(--mono);
       font-size:12px;line-height:1;flex:none}
  .dmana button:hover{background:rgba(111,208,138,.15);border-color:#2c6b41;color:#6fd08a}
  .dmana button.wide{width:auto;padding:0 9px}
  .dtabs{display:flex;border-bottom:1px solid var(--rule)}
  .dtab{flex:1;padding:10px;background:transparent;border:0;cursor:pointer;
       font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
       color:var(--dim);border-bottom:2px solid transparent}
  .dtab:hover{color:var(--ink)}
  .dtab.on{color:#6fd08a;border-bottom-color:#6fd08a}
  .dlist{max-height:52vh;overflow-y:auto}
  .drow .dplay{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
       border:1px solid #2c6b41;color:#6fd08a;font-size:10px;background:rgba(111,208,138,.08)}
  .drow .dsub{font-size:10.5px;color:var(--dim);margin-top:2px;line-height:1.4}
  .dsec{padding:11px 14px 7px;font-family:var(--mono);font-size:8px;letter-spacing:.16em;
       text-transform:uppercase;color:var(--gold);border-top:1px solid var(--rule);
       margin-top:4px}
  .drow{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;
       border-bottom:1px solid rgba(255,255,255,.03)}
  .drow:hover,.drow.sel{background:rgba(111,208,138,.10)}
  .drow .dc{width:22px;height:22px;flex:none;border-radius:3px;transform:rotate(45deg);
       background:var(--mana);display:grid;place-items:center}
  .drow .dc span{transform:rotate(-45deg);font-family:var(--mono);font-size:11px;
       font-weight:700;color:#fff}
  .drow .dn{flex:1;font-size:13.5px;color:var(--ink)}
  .drow .dm{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;
       color:var(--dim);text-align:right;line-height:1.5}
  .drow .dm b{color:var(--rar);display:block}
  .dnote{padding:10px 14px;font-size:11px;color:var(--dim);line-height:1.5;
       border-top:1px solid var(--rule);min-height:1em}
  .dnote b{color:#6fd08a}
  .dnote.warn b{color:#ff8b7d}

  /* ---------- tooltip ---------- */
  #tip{position:fixed;width:min(460px,calc(100vw - 28px));max-height:88vh;overflow-y:auto;z-index:200;pointer-events:none;display:none;
       background:linear-gradient(175deg,#161d2c,#0a0e17);border:1px solid var(--rar,var(--rule));
       border-radius:6px;box-shadow:0 22px 60px rgba(0,0,0,.85);padding:16px;
       border-top:3px solid var(--fac,var(--gold));
       zoom:calc(var(--ui-scale,1) * var(--scale-preview,1))}
  #tip.on{display:block}
  #tip .th{display:flex;align-items:baseline;gap:8px}
  #tip h3{font-family:var(--serif);font-size:18.5px;font-weight:400;margin:0;line-height:1.15;flex:1;text-wrap:balance}
  #tip .rar{font-family:var(--mono);font-size:7.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--rar)}
  #tip .meta{font-family:var(--mono);font-size:8px;letter-spacing:.11em;text-transform:uppercase;
       color:var(--dim);margin-top:7px;padding-bottom:9px;border-bottom:1px solid var(--rule)}
  #tip .stats{display:flex;gap:15px;margin:10px 0;font-family:var(--mono);font-size:10.5px;color:var(--dim);
       font-variant-numeric:tabular-nums}
  #tip .stats span{display:flex;flex-direction:column;gap:1px}
  #tip .stats b{color:var(--ink);font-size:13.5px}
  #tip .stats i{font-style:normal;font-size:8.5px;letter-spacing:.04em}
  #tip .stats i.up{color:#6fd08a} #tip .stats i.dn{color:#e0605c}
  #tip .stats i.was{color:var(--dim)}
  #tip .kwdiff{display:flex;flex-wrap:wrap;gap:5px;margin:-2px 0 8px}
  #tip .kwdiff span{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;
       padding:2px 6px;border-radius:8px;border:1px solid currentColor}
  #tip .kwdiff .up{color:#6fd08a} #tip .kwdiff .dn{color:#e0605c}
  #tip .body{font-size:12px;line-height:1.5;color:var(--ink);margin:8px 0}
  #tip .body b{color:var(--gold)} #tip .body .emp{color:var(--moon)}
  #tip .sideblk{margin:8px 0;padding:8px 10px;border-radius:3px;background:rgba(111,191,115,.07);
       border-left:2px solid var(--vir);font-size:11.5px;line-height:1.45}
  #tip .sideblk b{color:var(--vir);font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
       text-transform:uppercase;display:block;margin-bottom:2px}
  #tip .face-stats{display:flex;gap:8px;margin:5px 0 7px;font-family:var(--mono);font-variant-numeric:tabular-nums}
  #tip .face-stats span{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:4px;padding:3px 7px;border:1px solid rgba(111,191,115,.28);border-radius:3px;background:rgba(3,10,8,.42);color:#8d9a91;font-size:7px;letter-spacing:.08em;text-transform:uppercase}
  #tip .face-stats strong{color:#eaf7ec;font-size:14px;line-height:1;font-weight:700;text-shadow:0 0 8px rgba(111,191,115,.5)}
  #tip .sideblk-active{background:rgba(220,179,92,.1);box-shadow:inset 0 0 0 1px rgba(220,179,92,.35)}
  #tip .kws{display:flex;flex-direction:column;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid var(--rule)}
  #tip .kwr{font-size:10.5px;line-height:1.45;color:var(--dim)}
  #tip .kwr b{color:var(--gold);font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
       text-transform:uppercase;display:block;margin-bottom:1px}
  /* the rank ladder, in the tooltip */
  #tip .ladder{margin:10px 0 4px;padding:9px 10px;border-radius:4px;
       background:rgba(143,224,192,.05);border:1px solid var(--rule)}
  #tip .lhead{font-family:var(--mono);font-size:8px;letter-spacing:.13em;text-transform:uppercase;
       color:var(--moon);margin-bottom:7px}
  #tip .lrow{display:flex;gap:7px;align-items:baseline;font-size:11px;line-height:1.45;
       padding:2px 4px;border-radius:3px;color:var(--dim)}
  #tip .lrow i{font-style:normal;font-size:12px;color:var(--rkc);width:14px;flex:none;text-align:center}
  #tip .lrow b{color:var(--rkc);font-family:var(--mono);font-size:8px;letter-spacing:.1em;
       text-transform:uppercase;width:42px;flex:none}
  #tip .lrow span{flex:1}
  #tip .lrow.on{background:rgba(255,255,255,.06);color:var(--ink)}
  #tip .lrow.on b,#tip .lrow.on i{text-shadow:0 0 8px var(--rkc)}
  #tip .lrow.off{opacity:.42}

  #tip .lore{margin-top:11px;padding-top:10px;border-top:1px solid var(--rule);
       font-family:var(--serif);font-style:italic;font-size:11.5px;line-height:1.5;color:var(--dim)}
  /* everything currently touching this card */
  #tip .aff{margin-top:11px;padding-top:10px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:6px}
  #tip .lbl2{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
       color:var(--gold);margin-bottom:2px}
  #tip .affsec{font:7.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#78849e;margin-top:5px;padding-top:6px;border-top:1px solid rgba(255,255,255,.06)}
  #tip .afr{display:grid;grid-template-columns:minmax(72px,.8fr) 12px minmax(78px,.8fr);gap:5px;align-items:start;font-size:10.5px;line-height:1.35;padding:6px 7px;border-left:3px solid #2e6b3f;background:rgba(46,107,63,.07);border-radius:2px}
  #tip .afr.bad{border-left-color:#6b2e3f}
  #tip .afr.out{border-left-color:#547bad;background:rgba(84,123,173,.07)}
  #tip .afr b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
  #tip .afr i{color:var(--gold);font-style:normal;text-align:center}
  #tip .afr span{grid-column:1/-1;color:var(--dim);padding-top:3px;border-top:1px solid rgba(255,255,255,.05)}
  #tip .afr span strong{color:var(--ink);font-weight:600}.afr .amt{color:#f0d67a}.afr .state{display:block;color:#7f8aa3;margin-top:2px}.afr .when{display:block;color:#555f75;font:7px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
  #tip .recaphint{margin-top:10px;padding:8px 9px;border:1px solid color-mix(in srgb,var(--fac) 45%,var(--rule));border-radius:3px;
    background:color-mix(in srgb,var(--fac) 7%,transparent);color:var(--dim);font:8px var(--mono);letter-spacing:.08em;line-height:1.45;text-transform:uppercase}
  #tip .recaphint kbd{display:inline-block;margin-right:5px;padding:2px 5px;border:1px solid var(--gold-dim);border-bottom-width:2px;border-radius:3px;background:#17130b;color:var(--gold);font:8px var(--mono)}

  /* ---------- modal prompt ---------- */
  #modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
         background:rgba(4,6,11,.82);backdrop-filter:blur(3px)}
  #modal.on{display:flex}
  .mbox{background:linear-gradient(175deg,#161d2c,#0a0e17);border:1px solid var(--rule);
        border-radius:7px;padding:28px 30px;box-shadow:0 30px 80px rgba(0,0,0,.8);
        max-width:720px;text-align:center}
  .mbox h2{font-family:var(--serif);font-size:24px;font-weight:400;margin:0 0 6px;text-wrap:balance}
  .mbox .msub{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
        color:var(--dim);margin-bottom:20px}
  .opts{display:flex;gap:14px;justify-content:center}
  .opt{width:168px;padding:14px 12px;border-radius:5px;cursor:pointer;text-align:center;
       background:linear-gradient(175deg,#1c2537,#101725);border:1px solid var(--rule);
       border-top:3px solid var(--oc,var(--gold));transition:all .14s;display:flex;flex-direction:column;gap:7px}
  .opt:hover{transform:translateY(-3px);border-color:var(--oc);box-shadow:0 12px 28px rgba(0,0,0,.55)}
  /* ===================== tutorial: cinematic + dialogue ===================== */
  #heronScene{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
    flex-direction:column;background:radial-gradient(circle at 50% 40%,#1b1712 0%,#07060a 70%);
    text-align:center;overflow:hidden}
  #heronScene.on{display:flex;animation:heronFade .9s ease both}
  #heronScene.nightfall{background:
    linear-gradient(90deg,transparent 0 12%,rgba(220,179,92,.08) 12.2% 12.35%,transparent 12.6% 87.4%,rgba(220,179,92,.08) 87.65% 87.8%,transparent 88%),
    repeating-linear-gradient(115deg,rgba(101,161,190,.035) 0 1px,transparent 1px 92px),
    radial-gradient(ellipse at 50% 110%,#523817 0%,#111624 38%,#05070c 74%)}
  #heronScene.nightfall::before,#heronScene.nightfall::after{content:"";position:absolute;left:6%;right:6%;height:3px;background:#dcb35c;
    box-shadow:0 0 15px #dcb35c88,0 17px 0 #151b27,0 20px 0 #dcb35c55;opacity:.62}
  #heronScene.nightfall::before{top:17%}#heronScene.nightfall::after{bottom:14%;transform:perspective(180px) rotateX(58deg);height:13px}
  #heronScene.nightfall .heron-title{text-shadow:0 0 42px rgba(105,188,224,.42),0 2px 0 #05070c}
  @keyframes heronFade{from{opacity:0}to{opacity:1}}
  .heron-ash{position:absolute;bottom:-10%;width:3px;height:3px;border-radius:50%;
    background:#c9b98a;opacity:.55;animation:heronDrift linear infinite}
  @keyframes heronDrift{from{transform:translateY(0) translateX(0);opacity:.6}
    to{transform:translateY(-115vh) translateX(var(--hx,20px));opacity:0}}
  .heron-kicker{font-family:var(--mono);font-size:9px;letter-spacing:.32em;text-transform:uppercase;
    color:var(--gold-dim);margin-bottom:14px}
  .heron-title{font-family:var(--serif);font-size:42px;font-weight:400;color:var(--ink);
    text-shadow:0 0 40px rgba(220,179,92,.35);margin:0}
  .heron-sub{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--dim);margin-top:10px}
  /* Blocks every click on the board underneath while dialogue is open — the
     mission is meant to be read, not clicked through. */
  #dialogueBackdrop{position:fixed;inset:0;z-index:118;display:none;background:rgba(4,6,11,.55)}
  #dialogueBackdrop.on{display:block}
  #dialogueBox{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:121;
    width:min(720px,88vw);display:none;background:linear-gradient(175deg,#181f30,#0a0e17);
    border:1px solid var(--rule);border-left:4px solid var(--dlg-c,var(--gold-dim));
    border-radius:8px;padding:18px 22px 16px 20px;box-shadow:0 30px 70px rgba(0,0,0,.75),
    0 0 46px -18px var(--dlg-c,transparent);cursor:pointer;transition:border-color .2s,box-shadow .2s}
  #dialogueBox.on{display:block;animation:dlgUp .25s ease both}
  @keyframes dlgUp{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
  .dlg-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
  .dlg-avatar{width:10px;height:10px;border-radius:50%;background:var(--dlg-c,var(--gold-dim));
    box-shadow:0 0 10px var(--dlg-c,transparent);flex:none}
  .dlg-who{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--dlg-c,var(--gold-dim))}
  .dlg-text{font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--ink);min-height:48px}
  .dlg-next{margin-top:10px;font-family:var(--mono);font-size:8px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--dim);text-align:right}
  .dlg-next::after{content:"click to continue ▸"}
  #dialogueBox.dlg-end .dlg-next::after{content:"click to close ▸"}
  #dialogueBox.ecame{--dlg-c:#8fd0e8}#dialogueBox.si{--dlg-c:#dcb35c}
  #dialogueBox.caldrin{--dlg-c:#e08a6a}#dialogueBox.ashhag{--dlg-c:#b35b8f}
  #dialogueBox.alecto{--dlg-c:#b889e8}#dialogueBox.rani{--dlg-c:#70b8df}#dialogueBox.emrys{--dlg-c:#e8914e}
  #dialogueBox.hikari{--dlg-c:#e05c72}#dialogueBox.lichen{--dlg-c:#8fd0e8}#dialogueBox.station{--dlg-c:#dcb35c}
  #dialogueBox.cult{--dlg-c:#81dff1}
  .opt.no{opacity:.34;cursor:not-allowed;transform:none;box-shadow:none}
  .opt.mulled{opacity:.5;border-color:#ff5a4d;box-shadow:none}
  .opt.mulled .oh{color:#ff5a4d}
  .opt .oh{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--oc)}
  .opt .on2{font-family:var(--serif);font-size:16px;line-height:1.15}
  .opt .os{font-family:var(--mono);font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums}
  .opt .ox{font-size:11.5px;line-height:1.45;color:var(--ink)}
  .opt .ox b{color:var(--gold)}
  .mcancel{margin-top:20px;padding:10px 22px;border-radius:4px;cursor:pointer;
    border:1px solid var(--rule);background:transparent;color:var(--dim);
    font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase}
  .mcancel:hover{color:var(--ink);border-color:var(--gold-dim)}
  /* Deliberately quieter than Keep All/Confirm — a way out, not a third
     equally-weighted choice for the actual decision this modal exists for. */
  .mquit{display:block;margin:16px auto 0;padding:4px;border:none;background:transparent;cursor:pointer;
    color:#576178;font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline}
  .mquit:hover{color:var(--dim)}

  #seasonModal{position:fixed;inset:0;z-index:97;display:none;place-items:center;padding:24px;background:rgba(3,5,9,.88);backdrop-filter:blur(4px)}
  #seasonModal.on{display:grid}
  .seasonbox{background:linear-gradient(175deg,#241521,#0f0710);border:1px solid var(--rule);border-top:3px solid var(--wld,#ec6bb0);
    border-radius:7px;padding:30px 34px 26px;box-shadow:0 30px 80px rgba(0,0,0,.8),0 0 70px rgba(236,107,176,.16);
    max-width:420px;text-align:center;animation:seasonboxIn .32s cubic-bezier(.2,.8,.3,1.2)}
  @keyframes seasonboxIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
  .seasonbox h2{font-family:var(--serif);font-size:24px;font-weight:400;margin:0 0 6px;color:var(--ink)}
  .seasonbox p{margin:0 0 22px;color:var(--dim);font:9px var(--mono);letter-spacing:.13em;text-transform:uppercase}
  .seasonwheel{position:relative;width:230px;height:230px;margin:0 auto;border-radius:50%;overflow:hidden;
    border:2px solid var(--gold-dim);box-shadow:0 0 0 6px rgba(6,10,17,.6),0 20px 50px rgba(0,0,0,.55),0 0 50px rgba(236,107,176,.2);
    animation:seasonwheelIdle 16s linear infinite}
  @keyframes seasonwheelIdle{to{filter:hue-rotate(6deg)}}
  .seasonseg{position:absolute;width:50%;height:50%;border:1px solid rgba(6,10,17,.55);cursor:pointer;
    font:8px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.65);
    display:flex;align-items:center;justify-content:center;transition:filter .15s,transform .18s ease}
  .seasonseg span{display:inline-block;transition:transform .18s ease}
  .seasonseg:hover{filter:brightness(1.4) saturate(1.15);z-index:2}
  .seasonseg:hover span{transform:translateY(-3px)}
  .seasonseg.chosen{filter:brightness(1.9) saturate(1.3);animation:seasonPick .5s ease-out}
  @keyframes seasonPick{0%{filter:brightness(1)}40%{filter:brightness(2.4)}100%{filter:brightness(1.9)}}
  .seasonseg.spring{top:0;left:0;background:radial-gradient(circle at 100% 100%,#8fe0a0,#2c6b3f 85%);border-radius:100% 0 0 0}
  .seasonseg.summer{top:0;right:0;background:radial-gradient(circle at 0% 100%,#ffd35c,#a86a1c 85%);border-radius:0 100% 0 0}
  .seasonseg.autumn{bottom:0;right:0;background:radial-gradient(circle at 0% 0%,#ff9d54,#8a3d18 85%);border-radius:0 0 100% 0}
  .seasonseg.winter{bottom:0;left:0;background:radial-gradient(circle at 100% 0%,#9fd8ff,#2d5f82 85%);border-radius:0 0 0 100%}
  .seasonhub{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;
    background:radial-gradient(circle,#f491c4,#6e1f47);box-shadow:0 0 16px rgba(236,107,176,.9),inset 0 0 8px rgba(255,255,255,.3);
    pointer-events:none;z-index:1;border:1px solid rgba(255,255,255,.25);animation:seasonhubPulse 2.2s ease-in-out infinite}
  @keyframes seasonhubPulse{50%{box-shadow:0 0 26px rgba(236,107,176,1),inset 0 0 10px rgba(255,255,255,.4)}}
  .seasoncancel{margin-top:20px;padding:9px 20px;border-radius:4px;cursor:pointer;
    border:1px solid var(--rule);background:transparent;color:var(--dim);
    font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase}
  .seasoncancel:hover{color:var(--ink);border-color:var(--gold-dim)}

  /* ==== The Ashen Isles: choosing a Bloodline lives on the hero power itself
     — its own themed picker, not the plain mulligan modal, and not a wheel
     either: crest cards for the five colours, then bigger cards for the two
     rival Lineages once a colour is chosen. ==== */
  #bloodlineModal{position:fixed;inset:0;z-index:97;display:none;place-items:center;padding:24px;background:rgba(3,5,9,.9);backdrop-filter:blur(4px)}
  #bloodlineModal.on{display:grid}
  .bloodlineBox{background:linear-gradient(175deg,#241713,#0d0908);border:1px solid var(--rule);border-top:3px solid var(--ash,#c35b42);
    border-radius:7px;padding:30px 34px 26px;box-shadow:0 30px 80px rgba(0,0,0,.8),0 0 70px rgba(195,91,66,.18);
    max-width:640px;text-align:center;animation:seasonboxIn .32s cubic-bezier(.2,.8,.3,1.2)}
  .bloodlineBox h2{font-family:var(--serif);font-size:24px;font-weight:400;margin:0 0 6px;color:var(--ink)}
  .bloodlineBox p{margin:0 auto 22px;color:var(--dim);font:9px var(--mono);letter-spacing:.13em;text-transform:uppercase;max-width:480px}
  .bloodlineCrests{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:560px;margin:0 auto}
  .bloodlineCrest{position:relative;width:150px;height:96px;border-radius:8px;border:1px solid rgba(255,255,255,.12);cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;overflow:hidden;
    transition:transform .16s ease,filter .16s ease;box-shadow:0 10px 26px rgba(0,0,0,.45)}
  .bloodlineCrest:hover{transform:translateY(-3px);filter:brightness(1.25) saturate(1.15)}
  .bloodlineCrest.chosen{animation:bloodlinePick .5s ease-out}
  @keyframes bloodlinePick{0%{filter:brightness(1)}45%{filter:brightness(2.2) saturate(1.4);transform:scale(1.06)}100%{filter:brightness(1.6)}}
  .bc-name{font-family:var(--serif);font-size:16px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
  .bc-vibe{font:8px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
  .bloodlineCrest.black{background:radial-gradient(circle at 30% 20%,#463a68,#0c0a16 85%)}
  .bloodlineCrest.red{background:radial-gradient(circle at 30% 20%,#ff8a5c,#5c1710 85%)}
  .bloodlineCrest.blue{background:radial-gradient(circle at 30% 20%,#7fc4ff,#0d2e52 85%)}
  .bloodlineCrest.white{background:radial-gradient(circle at 30% 20%,#faf3d6,#7c6a3c 85%)}
  .bloodlineCrest.green{background:radial-gradient(circle at 30% 20%,#8fe0ac,#164a2c 85%)}
  .bloodlineCrest.farsoul{background:radial-gradient(circle at 30% 20%,#dce9ff,#1a2540 85%);border-color:rgba(220,233,255,.4)}
  .bloodlineCrest.white .bc-name,.bloodlineCrest.white .bc-vibe{color:#241c0c;text-shadow:none}
  .bloodlineSide{width:230px;min-height:130px;border-radius:8px;border:1px solid rgba(255,255,255,.14);cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:14px;text-align:center;
    transition:transform .16s ease,filter .16s ease;box-shadow:0 10px 26px rgba(0,0,0,.45)}
  .bloodlineSide:hover{transform:translateY(-3px);filter:brightness(1.2)}
  .bloodlineSide.chosen{animation:bloodlinePick .5s ease-out}
  .bs-name{font-family:var(--serif);font-size:19px;color:#fff}
  .bs-title{font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
  .bs-power{font:9px var(--mono);letter-spacing:.03em;color:rgba(255,255,255,.85);margin-top:4px;line-height:1.5}
  .bloodlineSide.black{background:linear-gradient(160deg,#3c3252,#0c0a16 80%)}
  .bloodlineSide.red{background:linear-gradient(160deg,#8a3a26,#2a0d08 80%)}
  .bloodlineSide.blue{background:linear-gradient(160deg,#2c608a,#0a1a2c 80%)}
  .bloodlineSide.white{background:linear-gradient(160deg,#e8dcae,#6b5a34 80%)}
  .bloodlineSide.white .bs-name,.bloodlineSide.white .bs-title,.bloodlineSide.white .bs-power{color:#241c0c}
  .bloodlineSide.green{background:linear-gradient(160deg,#3a7a52,#0e2c1a 80%)}
  .bloodlineBack{margin:6px auto 0;padding:9px 20px;border-radius:4px;cursor:pointer;display:block;
    border:1px solid var(--rule);background:transparent;color:var(--dim);
    font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase}
  .bloodlineBack:hover{color:var(--ink);border-color:var(--gold-dim)}
  .bloodlineCancel{margin-top:20px;padding:9px 20px;border-radius:4px;cursor:pointer;display:block;margin-left:auto;margin-right:auto;
    border:1px solid var(--rule);background:transparent;color:var(--dim);
    font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase}
  .bloodlineCancel:hover{color:var(--ink);border-color:var(--gold-dim)}
  .bloodlineDeclare{position:fixed;inset:0;z-index:98;display:flex;flex-direction:column;align-items:center;justify-content:center;
    pointer-events:none;animation:bloodlineDeclareIn 1.5s ease-out forwards}
  .bd-name{font-family:var(--serif);font-size:56px;color:var(--bdc,#c35b42);text-shadow:0 0 30px var(--bdc,#c35b42),0 4px 20px rgba(0,0,0,.8);letter-spacing:.02em}
  .bd-title{font:11px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-top:8px}
  @keyframes bloodlineDeclareIn{
    0%{opacity:0;transform:scale(.85)}
    14%{opacity:1;transform:scale(1.03)}
    22%{transform:scale(1)}
    78%{opacity:1}
    100%{opacity:0}
  }

  /* the season sweep — a full-screen mood shift the instant the Wheel resolves */
  #seasonFlash{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;mix-blend-mode:screen}
  #seasonFlash.go.spring{background:radial-gradient(circle at 50% 38%,rgba(111,191,115,.55),transparent 70%);animation:seasonFlashAnim 1.4s ease-out}
  #seasonFlash.go.summer{background:radial-gradient(circle at 50% 38%,rgba(255,211,92,.55),transparent 70%);animation:seasonFlashAnim 1.4s ease-out}
  #seasonFlash.go.autumn{background:radial-gradient(circle at 50% 38%,rgba(255,138,61,.55),transparent 70%);animation:seasonFlashAnim 1.4s ease-out}
  #seasonFlash.go.winter{background:radial-gradient(circle at 50% 38%,rgba(127,216,232,.55),transparent 70%);animation:seasonFlashAnim 1.4s ease-out}
  @keyframes seasonFlashAnim{0%{opacity:0}14%{opacity:1}100%{opacity:0}}

  #versionBanner{position:fixed;top:0;left:0;right:0;z-index:200;display:none;align-items:center;
    justify-content:center;gap:14px;padding:10px 16px;background:linear-gradient(180deg,#241c0e,#1a1409);
    border-bottom:1px solid var(--gold-dim);box-shadow:0 8px 24px rgba(0,0,0,.5);
    font:10px var(--mono);letter-spacing:.06em;color:var(--gold)}
  #versionBanner.on{display:flex}
  #versionBannerDL{padding:6px 14px;border-radius:3px;border:1px solid var(--gold-dim);cursor:pointer;
    background:linear-gradient(180deg,#3a2f18,#241c0e);color:var(--gold);font:9px var(--mono);
    letter-spacing:.1em;text-transform:uppercase;font-weight:600}
  #versionBannerDL:hover{box-shadow:0 0 14px rgba(220,179,92,.35)}
  #versionBannerX{background:transparent;border:none;color:var(--dim);cursor:pointer;font-size:12px;padding:2px 6px}
  #versionBannerX:hover{color:var(--ink)}

  #versionTag{position:fixed;left:10px;top:8px;z-index:190;display:flex;align-items:center;gap:8px;
    font:9px var(--mono);letter-spacing:.05em;color:#576178;pointer-events:none}
  #versionTag *{pointer-events:auto}
  #versionTag span{opacity:.75}
  #changelogBtn{background:transparent;border:1px solid #2b3549;border-radius:3px;padding:2px 7px;
    color:#7f899e;font:9px var(--mono);letter-spacing:.05em;cursor:pointer;transition:.15s}
  #changelogBtn:hover{color:var(--gold);border-color:var(--gold-dim)}
  /* Static hosting has no way to push to an already-open tab — this only
     ever appears once polling (see checkForUpdate) finds a version.json
     that disagrees with the copy already running, so it stays subtle
     until then and impossible to miss once it does. */
  #updateBanner{display:none;background:rgba(220,179,92,.14);border:1px solid var(--gold-dim);border-radius:3px;
    padding:2px 8px;color:var(--gold);font:9px var(--mono);letter-spacing:.05em;cursor:pointer;
    animation:updatePulse 2.2s ease-in-out infinite}
  #updateBanner.on{display:inline-block}
  #updateBanner:hover{border-color:var(--gold);filter:brightness(1.15)}
  @keyframes updatePulse{0%,100%{box-shadow:0 0 0 rgba(220,179,92,0)}50%{box-shadow:0 0 9px rgba(220,179,92,.55)}}

  #changelogModal{position:fixed;inset:0;z-index:205;display:none;align-items:center;justify-content:center;
    background:rgba(4,6,10,.78);backdrop-filter:blur(3px)}
  #changelogModal.on{display:flex;animation:ovin .5s ease-out}
  .clbox{width:min(560px,90vw);max-height:80vh;display:flex;flex-direction:column;border:1px solid var(--gold-dim);
    border-radius:6px;background:linear-gradient(165deg,#191f2e,#0c0f17);box-shadow:0 30px 90px rgba(0,0,0,.6)}
  .clbox.fresh{border-color:var(--gold);box-shadow:0 0 0 1px rgba(220,179,92,.3),0 30px 90px rgba(0,0,0,.6)}
  .clhead{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #293348}
  .clhead h2{margin:0;font:400 19px var(--serif);color:var(--gold)}
  .clhead small{display:block;color:var(--dim);font:9px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
  #clClose{background:transparent;border:1px solid #2b3549;border-radius:3px;color:var(--dim);cursor:pointer;
    width:26px;height:26px;font-size:13px}
  #clClose:hover{color:var(--ink);border-color:var(--gold-dim)}
  .clbody{overflow-y:auto;padding:14px 20px 20px;scrollbar-width:thin}
  .clentry{margin-bottom:20px}
  .clentry:last-child{margin-bottom:0}
  .clentry h3{margin:0 0 3px;font:400 14px var(--serif);color:var(--ink)}
  .clentry .cldate{font:8.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;display:block}
  .clentry ul{margin:0;padding-left:18px;color:var(--dim);font-size:12px;line-height:1.65}
  .clentry ul li{margin-bottom:3px}
  .clentry ul li b{color:var(--ink);font-weight:600}

  /* Hidden for now — picker code stays intact underneath in case this comes back. */
  #themeBtn{display:none;position:fixed;right:10px;top:8px;z-index:190;align-items:center;gap:7px;
    background:transparent;border:1px solid #2b3549;border-radius:3px;padding:4px 10px 4px 8px;
    color:#7f899e;font:9px var(--mono);letter-spacing:.05em;cursor:pointer;transition:.15s}
  #themeBtn:hover{color:var(--gold);border-color:var(--gold-dim)}
  #themeSwatch{width:9px;height:9px;border-radius:50%;background:var(--menu-accent);box-shadow:0 0 6px var(--menu-accent);display:inline-block}
  #themePanel{position:fixed;right:10px;top:32px;z-index:191;display:none;width:280px;max-height:min(70vh,520px);overflow-y:auto;
    border:1px solid var(--gold-dim);border-radius:6px;background:linear-gradient(165deg,#191f2e,#0c0f17);
    box-shadow:0 24px 60px rgba(0,0,0,.55);padding:10px;scrollbar-width:thin}
  #themePanel.on{display:block;animation:ovin .3s ease-out}
  .themehead{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 10px;border-bottom:1px solid #293348;margin-bottom:8px}
  .themehead h3{margin:0;font:400 12px var(--serif);color:var(--gold)}
  #themeClose{background:transparent;border:none;color:var(--dim);cursor:pointer;font-size:12px;padding:2px 6px}
  #themeClose:hover{color:var(--ink)}
  .themegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
  .themeswatch{display:flex;align-items:center;gap:7px;padding:7px 8px;border:1px solid #2b3549;border-radius:4px;
    background:rgba(255,255,255,.02);color:#aab4c5;cursor:pointer;font:9px var(--mono);letter-spacing:.03em;text-align:left;transition:.15s}
  .themeswatch:hover{border-color:var(--sw);color:var(--ink);background:color-mix(in srgb,var(--sw) 10%,transparent)}
  .themeswatch.active{border-color:var(--sw);background:color-mix(in srgb,var(--sw) 14%,transparent);color:var(--ink)}
  .themeswatch i{width:12px;height:12px;border-radius:50%;flex:none;background:var(--sw);box-shadow:0 0 8px var(--sw)}

  /* ===== per-faction menu decoration =====
     One shared skeleton (#themeDecor's children, plus a JS-driven particle
     layer) reused by every faction — only #menu[data-theme="x"] decides which
     pieces show and how. Nothing here runs during a match; #themeDecor is a
     child of #menu, so it disappears the same way the rest of the menu does.
     Deliberately heavy-handed: this is a costume change, not a tint. */
  #themeDecor{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
  #themeDecor>div{display:none}
  .td-sun,.td-moon,.td-gate,.td-fire,.td-vines,.td-silhouette,.td-frame,.td-rays,.td-stars,.td-scan{position:absolute}
  .td-silhouette,.td-frame,.td-rays,.td-stars,.td-scan{inset:0}
  #tdParticles{position:absolute;inset:0;overflow:hidden}
  #tdGlitch{position:fixed;inset:0;z-index:150;pointer-events:none}

  /* -- star field: one cheap layered radial-gradient, no JS needed -- */
  .td-stars{background-image:
      radial-gradient(1.6px 1.6px at 8% 18%,#fff,transparent),radial-gradient(1px 1px at 22% 62%,#fff,transparent),
      radial-gradient(2px 2px at 38% 12%,#fff,transparent),radial-gradient(1px 1px at 52% 78%,#fff,transparent),
      radial-gradient(1.6px 1.6px at 68% 32%,#fff,transparent),radial-gradient(1px 1px at 81% 58%,#fff,transparent),
      radial-gradient(2px 2px at 91% 14%,#fff,transparent),radial-gradient(1px 1px at 13% 88%,#fff,transparent),
      radial-gradient(1.6px 1.6px at 58% 46%,#fff,transparent),radial-gradient(1px 1px at 31% 38%,#fff,transparent),
      radial-gradient(1px 1px at 74% 82%,#fff,transparent),radial-gradient(1.4px 1.4px at 46% 24%,#fff,transparent),
      radial-gradient(1px 1px at 4% 46%,#fff,transparent),radial-gradient(1.4px 1.4px at 96% 40%,#fff,transparent);
    background-repeat:no-repeat;opacity:.65;animation:tdStarTwinkle 4s ease-in-out infinite alternate}
  @keyframes tdStarTwinkle{from{opacity:.35}to{opacity:.9}}

  /* -- particle base classes, one per weather/motif type -- */
  .tp-mote{position:absolute;bottom:-10px;left:var(--x);width:4px;height:4px;border-radius:50%;
    background:radial-gradient(circle,#fff,var(--pc,#ffd35c));box-shadow:0 0 14px 3px var(--pc,#ffd35c);
    opacity:0;animation:tpMoteRise var(--d,10s) ease-in infinite;animation-delay:var(--delay,0s)}
  @keyframes tpMoteRise{0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:1}70%{opacity:.95}100%{opacity:0;transform:translate(var(--drift,20px),-72vh) scale(1.5)}}

  .tp-snow{position:absolute;top:-10px;left:var(--x);width:4px;height:4px;border-radius:50%;background:#fff;
    box-shadow:0 0 6px rgba(255,255,255,.8);opacity:0;animation:tpSnowFall var(--d,9s) linear infinite;animation-delay:var(--delay,0s)}
  @keyframes tpSnowFall{0%{opacity:0;transform:translate(0,-10px)}8%{opacity:.9}92%{opacity:.7}100%{opacity:0;transform:translate(var(--drift,20px),100vh)}}

  .tp-mystic{position:absolute;top:60%;left:var(--x);width:5px;height:5px;border-radius:50%;
    background:radial-gradient(circle,#eafff0,#3f9b62 70%);box-shadow:0 0 12px 3px rgba(63,155,98,.6);
    opacity:0;animation:tpMysticFloat var(--d,12s) ease-in-out infinite;animation-delay:var(--delay,0s)}
  @keyframes tpMysticFloat{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.9}50%{transform:translate(var(--drift,25px),-25vh) scale(1.15)}80%{opacity:.7}100%{opacity:0;transform:translate(calc(var(--drift,25px)*-1),-55vh) scale(.6)}}

  .tp-firefly{position:absolute;top:var(--y,50%);left:var(--x);width:4px;height:4px;border-radius:50%;
    background:#eaffb0;box-shadow:0 0 12px 5px rgba(210,255,140,.85);opacity:0;
    animation:tpFireflyDrift var(--d,7s) ease-in-out infinite;animation-delay:var(--delay,0s)}
  @keyframes tpFireflyDrift{0%,100%{opacity:0}10%,90%{opacity:1}25%{transform:translate(26px,-20px)}50%{transform:translate(-18px,14px)}75%{transform:translate(22px,22px)}}

  .tp-rune{position:absolute;left:var(--x);top:var(--y,40%);color:rgba(127,168,212,.28);font:26px var(--serif);
    text-shadow:0 0 16px rgba(127,168,212,.65);animation:tpRunePulse 6s ease-in-out infinite;animation-delay:var(--delay,0s)}
  @keyframes tpRunePulse{0%,100%{opacity:.1;transform:scale(.85)}50%{opacity:.6;transform:scale(1.12)}}

  .tp-blood{position:absolute;top:-24px;left:var(--x);width:2px;height:var(--h,46px);border-radius:2px;
    background:linear-gradient(180deg,transparent,#e0403d 45%,#7a1f16);opacity:0;
    animation:tpBloodFall var(--d,1.4s) linear infinite;animation-delay:var(--delay,0s)}
  @keyframes tpBloodFall{0%{opacity:0;transform:translateY(-24px)}5%{opacity:.9}95%{opacity:.65}100%{opacity:0;transform:translateY(100vh)}}

  .tp-grass{position:absolute;bottom:-6px;left:var(--x);width:4px;height:var(--h,40px);border-radius:2px 2px 0 0;
    background:linear-gradient(180deg,#e0973f,#8a5c2c);transform-origin:bottom center;
    animation:tpGrassSway var(--d,3s) ease-in-out infinite;animation-delay:var(--delay,0s)}
  @keyframes tpGrassSway{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(13deg)}}

  .tp-dust{position:absolute;top:var(--y,70%);left:-4%;width:6px;height:2px;border-radius:2px;
    background:rgba(224,151,63,.65);opacity:0;animation:tpDustBlow var(--d,6s) linear infinite;animation-delay:var(--delay,0s)}
  @keyframes tpDustBlow{0%{opacity:0;transform:translateX(0)}10%{opacity:.7}90%{opacity:.5}100%{opacity:0;transform:translateX(112vw)}}

  .tp-blizzard{position:absolute;top:-10px;left:var(--x);width:3px;height:3px;border-radius:50%;background:#fff;
    box-shadow:0 0 5px rgba(255,255,255,.95);opacity:0;
    animation:tpBlizzardFall var(--d,3s) linear infinite;animation-delay:var(--delay,0s)}
  @keyframes tpBlizzardFall{0%{opacity:0;transform:translate(0,-10px)}6%{opacity:1}94%{opacity:.9}100%{opacity:0;transform:translate(var(--drift,160px),100vh)}}

  .tp-ember{position:absolute;bottom:-8px;left:var(--x);width:3px;height:3px;border-radius:50%;
    background:radial-gradient(circle,#fff2c8,#ff8a3d 60%,transparent);box-shadow:0 0 8px 2px rgba(255,138,61,.65);
    opacity:0;animation:tpEmberRise var(--d,6s) ease-out infinite;animation-delay:var(--delay,0s)}
  @keyframes tpEmberRise{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--drift,14px),-40vh)}}

  .tp-spark{position:absolute;bottom:-6px;left:var(--x);width:2px;height:11px;border-radius:2px;
    background:linear-gradient(180deg,#fff8dc,#ffbf3d);box-shadow:0 0 10px 3px rgba(255,180,60,.85);
    opacity:0;animation:tpSparkRise var(--d,2.4s) ease-out infinite;animation-delay:var(--delay,0s)}
  @keyframes tpSparkRise{0%{opacity:0;transform:translate(0,0) rotate(0deg)}10%{opacity:1}100%{opacity:0;transform:translate(var(--drift,70px),-72vh) rotate(90deg)}}

  .tp-petal{position:absolute;top:-14px;left:var(--x);width:10px;height:8px;border-radius:60% 40% 60% 40%/70% 60% 40% 30%;
    background:linear-gradient(135deg,#ffe0ec,#ff9ecf);opacity:0;
    animation:tpPetalFall var(--d,9s) ease-in-out infinite;animation-delay:var(--delay,0s)}
  @keyframes tpPetalFall{0%{opacity:0;transform:translate(0,-14px) rotate(0deg)}10%{opacity:.95}100%{opacity:0;transform:translate(var(--drift,100px),100vh) rotate(360deg)}}

  .tp-leaf{position:absolute;top:-14px;left:var(--x);width:11px;height:9px;border-radius:0% 60% 0% 60%;
    background:linear-gradient(135deg,#ffa64d,#c0392b);opacity:0;
    animation:tpLeafFall var(--d,7s) ease-in-out infinite;animation-delay:var(--delay,0s)}
  @keyframes tpLeafFall{0%{opacity:0;transform:translate(0,-14px) rotate(0deg)}10%{opacity:.92}50%{transform:translate(var(--drift,70px),50vh) rotate(190deg)}100%{opacity:0;transform:translate(0,100vh) rotate(380deg)}}

  /* ================= leg — The Iridescent Legion ==================
     Everything shimmers. A hue-cycling wash floors the whole screen, a
     rotating prism of light radiates from center, and every primary button
     wears a spinning rainbow border like foil on a pulled card. */
  #menu[data-theme="leg"] #themeDecor::before{content:"";position:absolute;inset:-25%;
    background:conic-gradient(from 0deg at 50% 50%,#ff6ec7,#ffd35c,#8fffc4,#6ec7ff,#c76eff,#ff6ec7);
    opacity:.16;filter:blur(70px) saturate(1.4);animation:legHueSpin 16s linear infinite}
  @keyframes legHueSpin{to{transform:rotate(360deg)}}
  #menu[data-theme="leg"] #themeDecor::after{content:"";position:absolute;inset:0;
    background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.1) 50%,transparent 65%);
    background-size:260% 260%;animation:legSheen 4.5s ease-in-out infinite}
  @keyframes legSheen{0%{background-position:130% 0}100%{background-position:-30% 100%}}
  #menu[data-theme="leg"] .td-rays{display:block;
    background:repeating-conic-gradient(from 0deg at 50% 30%,rgba(255,110,199,.06) 0 8deg,rgba(255,211,92,.06) 8deg 16deg,
      rgba(143,255,196,.06) 16deg 24deg,rgba(110,199,255,.06) 24deg 32deg,rgba(199,110,255,.06) 32deg 40deg,transparent 40deg 48deg);
    animation:legRaySpin 44s linear infinite;mix-blend-mode:screen}
  @keyframes legRaySpin{to{transform:rotate(360deg)}}
  #menu[data-theme="leg"] .home-title,#menu[data-theme="leg"] .section-head h2{
    background:linear-gradient(100deg,#ff6ec7,#ffd35c,#8fffc4,#6ec7ff,#c76eff,#ff6ec7);
    background-size:400% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:legTitleShift 6s linear infinite;text-shadow:none}
  @keyframes legTitleShift{to{background-position:400% 0}}
  #menu[data-theme="leg"] .go,#menu[data-theme="leg"] .btn.pri{position:relative;overflow:hidden;border-color:transparent;z-index:0}
  #menu[data-theme="leg"] .go::before,#menu[data-theme="leg"] .btn.pri::before{content:"";position:absolute;inset:-3px;z-index:-2;border-radius:6px;
    background:conic-gradient(from 0deg,#ff6ec7,#ffd35c,#8fffc4,#6ec7ff,#c76eff,#ff6ec7);
    animation:legIridSpin 2.4s linear infinite;filter:saturate(1.4)}
  #menu[data-theme="leg"] .go::after,#menu[data-theme="leg"] .btn.pri::after{content:"";position:absolute;inset:1px;z-index:-1;border-radius:4px;
    background:linear-gradient(180deg,#241c10,#140f08)}
  @keyframes legIridSpin{to{transform:rotate(360deg)}}
  #menu[data-theme="leg"] .home-choice,#menu[data-theme="leg"] .modeplate{
    border-width:2px;border-style:solid;border-image:linear-gradient(120deg,#ff6ec7,#ffd35c,#8fffc4,#6ec7ff,#c76eff) 1;
    box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 34px rgba(255,110,199,.2)}
  #menu[data-theme="leg"] .road-seal{border:2px solid transparent;
    border-image:conic-gradient(from 0deg,#ff6ec7,#ffd35c,#8fffc4,#6ec7ff,#c76eff,#ff6ec7) 1;
    animation:legIridSpin 6s linear infinite}

  /* ================= nur — Nurama ==================
     A full night sky: star field, a huge cratered moon high in the corner,
     moonlight washing down over everything beneath it. */
  #menu[data-theme="nur"] .td-stars{display:block}
  #menu[data-theme="nur"] #themeDecor::after{content:"";position:absolute;inset:0;
    background:linear-gradient(200deg,rgba(6,16,28,.6),transparent 50%),
      radial-gradient(circle at 84% 8%,rgba(92,184,201,.28),transparent 50%);
    animation:nurGlow 5s ease-in-out infinite alternate}
  @keyframes nurGlow{from{opacity:.6}to{opacity:1}}
  #menu[data-theme="nur"] .td-rays{display:block;background:radial-gradient(ellipse 70% 60% at 100% 0%,rgba(92,184,201,.24),transparent 62%)}
  #menu[data-theme="nur"] .td-moon{display:block;top:18px;right:30px;width:190px;height:190px;border-radius:50%;
    background:radial-gradient(circle at 32% 32%,#f5fbfc,#cfeaf0 45%,#5cb8c9 78%,#2f7480 100%);
    box-shadow:0 0 100px 30px rgba(92,184,201,.55),0 0 220px 80px rgba(92,184,201,.24),inset -22px -16px 44px rgba(15,40,48,.45);
    animation:nurMoonPulse 6s ease-in-out infinite alternate}
  @keyframes nurMoonPulse{from{filter:brightness(1)}to{filter:brightness(1.12)}}
  #menu[data-theme="nur"] .td-moon::before{content:"";position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(circle at 68% 38%,transparent 0 20px,rgba(47,116,128,.4) 21px 26px,transparent 27px),
      radial-gradient(circle at 40% 62%,transparent 0 14px,rgba(47,116,128,.35) 15px 19px,transparent 20px),
      radial-gradient(circle at 62% 72%,transparent 0 9px,rgba(47,116,128,.3) 10px 13px,transparent 14px),
      radial-gradient(circle at 25% 30%,transparent 0 7px,rgba(47,116,128,.25) 8px 10px,transparent 11px)}
  #menu[data-theme="nur"] .home-title,#menu[data-theme="nur"] .section-head h2{
    text-shadow:0 0 34px rgba(92,184,201,.6),0 13px 42px rgba(0,0,0,.92)}
  #menu[data-theme="nur"] .road-seal{box-shadow:inset 0 0 32px rgba(92,184,201,.18),0 0 60px rgba(92,184,201,.28)}

  /* ================= iron — The Iron Utopia ==================
     Riveted metal bars top and bottom, angular cut-corner panels, blocky
     industrial type, and a real furnace glow with rising sparks. */
  #menu[data-theme="iron"] #themeDecor::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(20,14,8,.35),transparent 30%,transparent 70%,rgba(255,90,20,.12))}
  #menu[data-theme="iron"] .home-title,#menu[data-theme="iron"] .section-head h2{
    font-family:var(--mono);font-weight:800;letter-spacing:0;text-transform:uppercase;
    background:linear-gradient(180deg,#f4e9d8,#c9b28d 45%,#8a7654);-webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:none;filter:drop-shadow(0 3px 0 #2a1c10) drop-shadow(0 0 26px rgba(255,120,40,.3))}
  #menu[data-theme="iron"] .section-kicker,#menu[data-theme="iron"] .home-kicker{font-weight:700;letter-spacing:.5em}
  #menu[data-theme="iron"] .home-choice,#menu[data-theme="iron"] .modeplate{
    border-radius:0;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
    border-color:#5a4636;background:linear-gradient(160deg,#332920,#141009)}
  #menu[data-theme="iron"] .go,#menu[data-theme="iron"] .btn.pri{
    border-radius:0;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
    background:linear-gradient(180deg,#a08a68,#4a3f30 45%,#241c12)!important;border-color:#c9b28d;color:#f4e9d8;
    box-shadow:inset 0 1px rgba(255,255,255,.35),inset 0 -2px rgba(0,0,0,.45);font-weight:800;letter-spacing:.28em}
  #menu[data-theme="iron"] .menu-back{border-radius:0;
    clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
  #menu[data-theme="iron"] .td-fire{display:block;left:0;right:0;bottom:0;height:240px;
    background:radial-gradient(ellipse 45% 100% at 8% 100%,rgba(255,120,40,.45),transparent 70%),
      radial-gradient(ellipse 40% 100% at 32% 100%,rgba(255,80,10,.4),transparent 70%),
      radial-gradient(ellipse 45% 100% at 58% 100%,rgba(255,140,50,.4),transparent 70%),
      radial-gradient(ellipse 42% 100% at 82% 100%,rgba(255,90,20,.4),transparent 70%),
      radial-gradient(ellipse 40% 100% at 100% 100%,rgba(255,120,40,.35),transparent 70%);
    animation:ironFlicker 2.1s ease-in-out infinite}
  @keyframes ironFlicker{0%,100%{opacity:.78;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.12)}}
  #menu[data-theme="iron"] .td-frame{display:block}
  #menu[data-theme="iron"] .td-frame::before,#menu[data-theme="iron"] .td-frame::after{
    content:"";position:absolute;left:0;right:0;height:15px;
    background:repeating-radial-gradient(circle at 22px 7px,#c9b28d 0 3px,rgba(90,70,54,.4) 4px 5px,transparent 6px 44px),
      linear-gradient(180deg,#3a2f22,#20180f);box-shadow:0 0 16px rgba(0,0,0,.55)}
  #menu[data-theme="iron"] .td-frame::before{top:0}
  #menu[data-theme="iron"] .td-frame::after{bottom:0}

  /* ================= frost — The World Mired in Frost ==================
     Real snowfall, icicles hanging from the top edge, a frost-glass wash,
     and a genuine mirrored reflection under every button and tile you hover. */
  #menu[data-theme="frost"] #themeDecor::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(140,210,230,.1),transparent 20%),
      radial-gradient(ellipse 70% 40% at 50% 100%,rgba(127,216,232,.14),transparent 70%)}
  #menu[data-theme="frost"] .td-frame{display:block;top:0;left:0;right:0;bottom:auto;height:56px}
  #menu[data-theme="frost"] .td-frame::before{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(226,246,251,.55),rgba(180,222,235,.12));
    clip-path:polygon(0 0,100% 0,100% 42%,96% 100%,92% 46%,88% 100%,84% 42%,80% 100%,76% 46%,72% 100%,68% 42%,
      64% 100%,60% 46%,56% 100%,52% 42%,48% 100%,44% 46%,40% 100%,36% 42%,32% 100%,28% 46%,24% 100%,20% 42%,
      16% 100%,12% 46%,8% 100%,4% 42%,0 100%);
    box-shadow:0 0 20px rgba(215,240,248,.3)}
  #menu[data-theme="frost"] .home-title,#menu[data-theme="frost"] .section-head h2{
    text-shadow:0 0 26px rgba(127,216,232,.55),0 13px 42px rgba(0,0,0,.92)}
  #menu[data-theme="frost"] .home-choice,#menu[data-theme="frost"] .modeplate,#menu[data-theme="frost"] .go,#menu[data-theme="frost"] .btn{
    backdrop-filter:blur(1px)}
  #menu[data-theme="frost"] .go:hover,#menu[data-theme="frost"] .btn:hover,
  #menu[data-theme="frost"] .home-choice:hover,#menu[data-theme="frost"] .modeplate:hover{
    -webkit-box-reflect:below 3px linear-gradient(transparent, transparent 45%, rgba(127,216,232,.32));
    box-shadow:0 0 30px rgba(127,216,232,.25)}

  /* ================= mf — The Moonlit Fields ==================
     A full vermillion torii with a curved lintel, sun and moon burning at
     opposite corners, cherry blossoms drifting, and a mountain range on
     the horizon. */
  #menu[data-theme="mf"] .td-silhouette{display:block;left:0;right:0;bottom:0;top:auto;height:170px;
    background:linear-gradient(180deg,transparent,rgba(8,12,18,.88) 72%);
    clip-path:polygon(0 100%,0 62%,18% 42%,33% 56%,48% 22%,63% 52%,78% 36%,100% 58%,100% 100%)}
  #menu[data-theme="mf"] .td-sun{display:block;top:16px;left:28px;width:96px;height:96px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#fff6df,#ffcf6b 55%,#e0973f 100%);
    box-shadow:0 0 76px 22px rgba(255,190,90,.48)}
  #menu[data-theme="mf"] .td-moon{display:block;top:16px;right:28px;width:80px;height:80px;border-radius:50%;
    background:radial-gradient(circle at 65% 35%,#f2f8ff,#c9dce8 55%,#8fe0c0 100%);
    box-shadow:0 0 60px 18px rgba(143,224,192,.42)}
  #menu[data-theme="mf"] .td-gate{display:block;left:50%;top:30px;transform:translateX(-50%);
    width:320px;height:16px;border-radius:4px 4px 60% 60%/4px 4px 100% 100%;
    background:linear-gradient(180deg,#d4503f,#8f3126);box-shadow:0 62px 0 -5px #a53d30,0 0 44px rgba(201,72,58,.32)}
  #menu[data-theme="mf"] .td-gate::before,#menu[data-theme="mf"] .td-gate::after{content:"";position:absolute;top:-4px;width:20px;height:196px;
    background:linear-gradient(180deg,#d4503f,#6e2119);box-shadow:0 0 22px rgba(201,72,58,.28)}
  #menu[data-theme="mf"] .td-gate::before{left:36px}
  #menu[data-theme="mf"] .td-gate::after{right:36px}
  #menu[data-theme="mf"] .home-title,#menu[data-theme="mf"] .section-head h2{
    text-shadow:0 0 22px rgba(201,72,58,.4),0 13px 42px rgba(0,0,0,.92)}

  /* ================= ael — Aelyrion ==================
     A living, breathing forest of magic: a jagged tree-line silhouette,
     aurora-like ribbons of arcane light, drifting motes and fireflies. */
  #menu[data-theme="ael"] .td-silhouette{display:block;left:0;right:0;bottom:0;top:auto;height:130px;background:#0d1810;
    clip-path:polygon(0 100%,0 55%,4% 30%,8% 55%,12% 20%,16% 55%,20% 35%,24% 55%,28% 15%,32% 55%,36% 30%,40% 55%,
      44% 10%,48% 55%,52% 35%,56% 55%,60% 20%,64% 55%,68% 30%,72% 55%,76% 15%,80% 55%,84% 35%,88% 55%,92% 25%,
      96% 55%,100% 55%,100% 100%)}
  #menu[data-theme="ael"] .td-rays{display:block;
    background:linear-gradient(100deg,transparent,rgba(63,155,98,.14) 30%,transparent 55%,rgba(143,224,192,.12) 75%,transparent);
    background-size:220% 220%;animation:aelAurora 12s ease-in-out infinite;mix-blend-mode:screen}
  @keyframes aelAurora{0%{background-position:0% 20%}50%{background-position:100% 65%}100%{background-position:0% 20%}}
  #menu[data-theme="ael"] #themeDecor::before{content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse 60% 40% at 50% 15%,rgba(63,155,98,.18),transparent 60%);
    animation:aelPulse 5s ease-in-out infinite alternate}
  @keyframes aelPulse{from{opacity:.5}to{opacity:1}}
  #menu[data-theme="ael"] .home-title,#menu[data-theme="ael"] .section-head h2{
    text-shadow:0 0 28px rgba(63,155,98,.55),0 2px 0 #1c2e20}
  #menu[data-theme="ael"] .road-seal{box-shadow:inset 0 0 32px rgba(63,155,98,.2),0 0 60px rgba(63,155,98,.3)}

  /* ================= vir — Viridia ==================
     Vines climb both edges of the screen, leaves fall, a Victorian double
     frame and a printer's leaf-ornament crown the seal. */
  #menu[data-theme="vir"] .td-frame{display:block;top:0;bottom:0;left:0;right:auto;width:24px;
    background:repeating-radial-gradient(circle at 12px 22px,rgba(111,191,115,.55) 0 4px,transparent 5px 44px),
      linear-gradient(180deg,rgba(63,107,69,.32),rgba(63,107,69,.12))}
  #menu[data-theme="vir"] .td-vines{display:block;top:0;bottom:0;right:0;left:auto;width:24px;
    background:repeating-radial-gradient(circle at 12px 44px,rgba(111,191,115,.55) 0 4px,transparent 5px 44px),
      linear-gradient(180deg,rgba(63,107,69,.32),rgba(63,107,69,.12))}
  #menu[data-theme="vir"] .home-choice::before{background:linear-gradient(90deg,#6fbf73,#c8a87a)}
  #menu[data-theme="vir"] .section-kicker,#menu[data-theme="vir"] .home-kicker{font-family:var(--serif);font-style:italic;letter-spacing:.34em}
  #menu[data-theme="vir"] .road-seal{border-radius:0;border:3px double rgba(111,191,115,.6);
    box-shadow:0 0 40px rgba(111,191,115,.2)}
  #menu[data-theme="vir"] .home-choice,#menu[data-theme="vir"] .modeplate{border-radius:0;
    border-width:2px;border-style:double;border-color:rgba(111,191,115,.5)}
  #menu[data-theme="vir"] .section-head{position:relative}
  #menu[data-theme="vir"] .section-head::before{content:"❧ ❧ ❧";position:absolute;left:50%;top:-16px;transform:translateX(-50%);
    color:rgba(111,191,115,.5);font-size:13px;letter-spacing:.6em}
  #menu[data-theme="vir"] .home-title,#menu[data-theme="vir"] .section-head h2{font-family:var(--serif);font-style:italic}

  /* ================= lex — The Lexicon ==================
     A huge slowly-turning magic circle behind everything, runes scattered
     and pulsing, a sigil-ring seal. */
  #menu[data-theme="lex"] .td-rays{display:block;top:50%;left:50%;right:auto;bottom:auto;
    width:760px;height:760px;transform:translate(-50%,-50%);border-radius:50%;
    background:
      repeating-conic-gradient(from 0deg,rgba(127,168,212,.07) 0 1deg,transparent 1deg 30deg),
      radial-gradient(circle,transparent 54%,rgba(127,168,212,.14) 55% 56%,transparent 57%),
      radial-gradient(circle,transparent 69%,rgba(127,168,212,.1) 70% 71%,transparent 72%),
      radial-gradient(circle,transparent 82%,rgba(127,168,212,.06) 83% 84%,transparent 85%);
    animation:lexCircleSpin 100s linear infinite;mix-blend-mode:screen}
  @keyframes lexCircleSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
  #menu[data-theme="lex"] .home-title,#menu[data-theme="lex"] .section-head h2{
    text-shadow:0 0 24px rgba(127,168,212,.5),0 13px 42px rgba(0,0,0,.92)}
  #menu[data-theme="lex"] .road-seal{border-style:double;
    background:radial-gradient(circle,rgba(127,168,212,.16),rgba(5,7,11,.7) 61%,transparent 62%),
      repeating-conic-gradient(from 0deg,rgba(127,168,212,.2) 0 4deg,transparent 4deg 18deg);
    box-shadow:0 0 40px rgba(127,168,212,.25)}
  #menu[data-theme="lex"] .modeplate .modeglyph,#menu[data-theme="lex"] .home-choice{border-color:color-mix(in srgb,var(--lex) 34%,#2b3549)}

  /* ================= nys — The Unwriting ==================
     Near-black, scanlines, a closing vignette, and text that periodically
     forgets what it was going to say. */
  #menu[data-theme="nys"]::before{filter:brightness(.6) saturate(.68)}
  #menu[data-theme="nys"] .td-scan{display:block;
    background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
    mix-blend-mode:multiply;animation:nysFlicker 6s steps(30) infinite}
  @keyframes nysFlicker{0%,97%,100%{opacity:.5}98%{opacity:.1}99%{opacity:.75}}
  #menu[data-theme="nys"] #themeDecor::after{content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse 82% 82% at 50% 50%,transparent 50%,rgba(0,0,0,.6) 100%)}
  #menu[data-theme="nys"] .home-title,#menu[data-theme="nys"] .section-head h2{color:#d8cbe0;
    text-shadow:2px 0 rgba(255,59,107,.35),-2px 0 rgba(59,212,255,.3)}
  .td-glitch-line{position:absolute;color:#e0c8ea;font:15px var(--mono);letter-spacing:.08em;
    text-shadow:2px 0 #ff3b6b,-2px 0 #3bd4ff;opacity:0;animation:glitchFlash .6s steps(2,end)}
  @keyframes glitchFlash{0%{opacity:0;transform:translateX(0)}10%{opacity:1;transform:translateX(-4px)}20%{transform:translateX(4px)}30%{transform:translateX(-3px)}45%{opacity:1}60%{opacity:.3}100%{opacity:0}}
  .td-glitch-big{position:fixed;inset:0;background:repeating-linear-gradient(180deg,rgba(255,59,107,.06) 0 2px,rgba(59,212,255,.06) 2px 4px,transparent 4px 6px);
    opacity:0;animation:glitchBig .35s steps(3,end)}
  @keyframes glitchBig{0%{opacity:0}20%{opacity:1;transform:translateX(-6px)}40%{transform:translateX(5px)}60%{opacity:.7;transform:translateX(-3px)}100%{opacity:0}}

  /* The main menu's own unmarked Easter egg: one line of text, briefly wrong. */
  .menu-text-glitch{color:#e0c8ea!important;text-shadow:2px 0 #ff3b6b,-2px 0 #3bd4ff;
    animation:menuTextGlitch 1.3s steps(2,end)}
  @keyframes menuTextGlitch{
    0%{transform:translateX(0)}6%{transform:translateX(-3px)}12%{transform:translateX(3px)}
    18%{transform:translateX(-2px)}24%{transform:translateX(0)}
    88%{transform:translateX(0)}92%{transform:translateX(2px)}96%{transform:translateX(-2px)}100%{transform:translateX(0)}}

  /* The second, bigger secret: the whole menu briefly re-writes itself as
     The Unwriting. Text colour/shadow only — never a filter across the real
     decorative art underneath, which would just make it look broken instead
     of deliberate. */
  #menu.unwriting-corrupted .wrap{animation:unwritingMenuJitter 2.6s steps(1,end) infinite}
  @keyframes unwritingMenuJitter{0%,88%,100%{transform:translate(0,0)}
    89%{transform:translate(-3px,1px)}90%{transform:translate(2px,-2px)}
    91%{transform:translate(-2px,0)}92%{transform:translate(0,0)}}
  /* The violent burst that precedes it settling into the corrupted state above —
     three rounds of hard, uneven shake before the text ever actually changes. */
  #menu.unwriting-violent-shake .wrap{animation:unwritingViolentShake .6s cubic-bezier(.36,.07,.19,.97) 3}
  @keyframes unwritingViolentShake{
    0%,100%{transform:translate(0,0) rotate(0)}
    10%{transform:translate(-9px,5px) rotate(-.6deg)}20%{transform:translate(8px,-6px) rotate(.5deg)}
    30%{transform:translate(-7px,7px) rotate(-.4deg)}40%{transform:translate(9px,-4px) rotate(.6deg)}
    50%{transform:translate(-6px,-7px) rotate(-.3deg)}60%{transform:translate(7px,6px) rotate(.4deg)}
    70%{transform:translate(-8px,-5px) rotate(-.5deg)}80%{transform:translate(6px,7px) rotate(.3deg)}
    90%{transform:translate(-5px,-6px) rotate(-.2deg)}}
  #menu.unwriting-corrupted .home-title,#menu.unwriting-corrupted .home-kicker,
  #menu.unwriting-corrupted .home-copy,#menu.unwriting-corrupted .home-choice strong,
  #menu.unwriting-corrupted .home-continue{
    color:#d8b4fe!important;text-shadow:2px 0 rgba(255,59,107,.55),-2px 0 rgba(59,212,255,.55)!important}
  #menu.unwriting-corrupted .home-choice{border-color:rgba(168,85,247,.45)!important}
  .unwriting-scan-overlay{position:fixed;inset:0;pointer-events:none;z-index:151;opacity:.5;
    background:repeating-linear-gradient(180deg,rgba(168,85,247,.06) 0 2px,rgba(59,212,255,.05) 2px 4px,transparent 4px 6px);
    animation:unwritingScan 5s linear infinite}
  @keyframes unwritingScan{0%{background-position:0 0}100%{background-position:0 240px}}

  /* ================= sang — Saint's Blood ==================
     Heavy blood rain, corner splatter, and a slow heartbeat pulse in the
     vignette underneath it all. */
  #menu[data-theme="sang"] #themeDecor::before{content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse 90% 70% at 50% 100%,rgba(191,67,64,.24),transparent 65%);
    animation:sangHeartbeat 2.1s ease-in-out infinite}
  @keyframes sangHeartbeat{0%,100%{opacity:.65}44%{opacity:.65}50%{opacity:1}56%{opacity:.65}}
  #menu[data-theme="sang"] .td-frame{display:block;
    background-image:radial-gradient(circle at 6% 10%,rgba(140,20,20,.55) 0 20px,transparent 22px),
      radial-gradient(circle at 94% 88%,rgba(140,20,20,.55) 0 28px,transparent 30px),
      radial-gradient(circle at 88% 12%,rgba(140,20,20,.4) 0 12px,transparent 14px),
      radial-gradient(circle at 10% 92%,rgba(140,20,20,.4) 0 14px,transparent 16px);
    opacity:.7}
  #menu[data-theme="sang"] .home-title,#menu[data-theme="sang"] .section-head h2{
    text-shadow:0 0 30px rgba(191,67,64,.55),0 13px 42px rgba(0,0,0,.92)}

  /* ================= sil — The Silver Haven ==================
     A vast artificial sun with real sunburst rays overhead, light cascading
     down the whole screen, drifting clouds, chrome-plated buttons. */
  #menu[data-theme="sil"] .td-rays{display:block;top:-260px;left:50%;right:auto;bottom:auto;
    width:900px;height:900px;transform:translateX(-50%);border-radius:50%;
    background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.1) 0 3deg,transparent 3deg 12deg);
    animation:silRaySpin 70s linear infinite;mix-blend-mode:screen}
  @keyframes silRaySpin{to{transform:translateX(-50%) rotate(360deg)}}
  #menu[data-theme="sil"] .td-sun{display:block;top:-46px;left:50%;transform:translateX(-50%);width:240px;height:240px;border-radius:50%;
    background:radial-gradient(circle at 50% 40%,#ffffff,#dfe8f0 45%,#a9b9c8 75%,transparent 100%);
    box-shadow:0 0 100px 34px rgba(200,214,228,.5),0 0 220px 90px rgba(200,214,228,.22)}
  #menu[data-theme="sil"] .td-silhouette{display:block;top:70px;left:0;right:0;bottom:auto;height:70px;
    background:radial-gradient(ellipse 130px 26px at 15% 50%,rgba(255,255,255,.16),transparent 70%),
      radial-gradient(ellipse 170px 32px at 55% 40%,rgba(255,255,255,.13),transparent 70%),
      radial-gradient(ellipse 110px 22px at 85% 55%,rgba(255,255,255,.15),transparent 70%);
    animation:silClouds 44s linear infinite}
  @keyframes silClouds{0%{background-position:0 0,0 0,0 0}100%{background-position:220px 0,-180px 0,200px 0}}
  #menu[data-theme="sil"] #themeDecor::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
    width:380px;height:100%;background:linear-gradient(180deg,rgba(220,230,240,.26),transparent 55%);filter:blur(2px)}
  #menu[data-theme="sil"] .home-title,#menu[data-theme="sil"] .section-head h2{
    background:linear-gradient(180deg,#ffffff,#c8d6e4 60%,#8b99a8);-webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 0 24px rgba(200,214,228,.5))}
  #menu[data-theme="sil"] .go,#menu[data-theme="sil"] .btn.pri{
    background:linear-gradient(180deg,#f4f8fb,#c8d6e4 40%,#8b99a8 55%,#dfe8f0)!important;
    color:#1a222c!important;border-color:#dfe8f0;text-shadow:0 1px 0 rgba(255,255,255,.7);
    box-shadow:inset 0 1px rgba(255,255,255,.85),0 0 24px rgba(200,214,228,.4)}
  #menu[data-theme="sil"] .home-choice,#menu[data-theme="sil"] .modeplate{border-color:#8b99a8;
    box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 30px rgba(200,214,228,.16)}

  /* ================= khaz — The Kingdom of Khaz ==================
     A savanna sunset horizon, an acacia silhouette, tall wind-blown grass,
     drifting dust, and a bold woven geometric band along the bottom. */
  #menu[data-theme="khaz"] #themeDecor::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 38%,rgba(224,151,63,.2) 74%,rgba(139,58,20,.32) 100%)}
  #menu[data-theme="khaz"] .td-silhouette{display:block;left:6%;right:auto;bottom:0;top:auto;width:230px;height:210px;background:#170e07;
    clip-path:polygon(46% 100%,46% 40%,20% 28%,22% 22%,42% 30%,44% 8%,50% 8%,52% 30%,72% 20%,74% 26%,54% 40%,54% 100%)}
  #menu[data-theme="khaz"] .td-rays{display:block;
    background:repeating-linear-gradient(100deg,transparent 0 60px,rgba(224,151,63,.06) 61px 63px,transparent 64px 140px);
    animation:khazWind 7s linear infinite}
  @keyframes khazWind{0%{background-position-x:0}100%{background-position-x:400px}}
  #menu[data-theme="khaz"] .td-frame{display:block;left:0;right:0;bottom:0;top:auto;height:11px;
    background:repeating-linear-gradient(90deg,#e0973f 0 26px,#8a5c2c 26px 52px,#f0b35c 52px 65px,#2b1a0a 65px 78px)}
  #menu[data-theme="khaz"] .home-kicker,#menu[data-theme="khaz"] .section-kicker{letter-spacing:.65em;font-weight:700}
  #menu[data-theme="khaz"] .home-title,#menu[data-theme="khaz"] .section-head h2{
    text-shadow:0 0 26px rgba(224,151,63,.5),0 13px 42px rgba(0,0,0,.92)}
  #menu[data-theme="khaz"] .road-seal{border-width:3px;border-style:double;
    background:radial-gradient(circle,rgba(224,151,63,.16),rgba(5,7,11,.7) 61%,transparent 62%),
      repeating-conic-gradient(from 0deg,rgba(224,151,63,.18) 0 10deg,transparent 10deg 20deg);
    box-shadow:0 0 44px rgba(224,151,63,.24)}

  /* ================= vak — Vakoiros ==================
     A true whiteout blizzard, an aurora ribbon overhead, and gusts that
     sweep visibly across the whole screen. */
  #menu[data-theme="vak"] .td-frame{display:block;
    background:linear-gradient(180deg,rgba(120,200,255,.1),transparent 30%),
      repeating-linear-gradient(70deg,rgba(150,220,255,.06) 0 2px,transparent 2px 60px);
    animation:vakAurora 9s ease-in-out infinite alternate;mix-blend-mode:screen}
  @keyframes vakAurora{0%{opacity:.35;transform:translateX(-24px)}100%{opacity:.9;transform:translateX(24px)}}
  #menu[data-theme="vak"] #themeDecor::before{content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(255,255,255,.06),transparent 40%,rgba(255,255,255,.06) 70%,transparent);
    animation:vakGust 2.6s ease-in-out infinite alternate}
  @keyframes vakGust{from{opacity:.3}to{opacity:.85}}
  #menu[data-theme="vak"] #themeDecor::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;
    animation:vakWhiteout 13s ease-in-out infinite}
  @keyframes vakWhiteout{0%,91%,100%{opacity:0}94%{opacity:.14}}
  #menu[data-theme="vak"] .home-title,#menu[data-theme="vak"] .section-head h2{
    text-shadow:0 0 26px rgba(238,233,220,.5),0 13px 42px rgba(0,0,0,.92)}

  /* the Wheel turning — a band of the new season's light sweeps left to right
     across the whole screen, like a page turning past, and leaves the new
     season's weather behind it. */
  #seasonSweep{position:fixed;inset:0;z-index:41;pointer-events:none;overflow:hidden}
  #seasonSweep .band{position:absolute;top:-15%;bottom:-15%;left:-38%;width:32%;
    background:linear-gradient(100deg,transparent,var(--sweepcol,#fff) 45%,var(--sweepcol,#fff) 55%,transparent);
    opacity:.6;filter:blur(3px) saturate(1.3);animation:seasonSweepMove 1.15s cubic-bezier(.32,0,.24,1) forwards}
  @keyframes seasonSweepMove{from{transform:translateX(0)}to{transform:translateX(220vw)}}

  .wld-weather{position:fixed;inset:0;z-index:39;pointer-events:none;overflow:hidden}
  .wld-weather i{position:absolute;display:block;opacity:0;font-style:normal;text-align:center;line-height:var(--size)}
  .wld-weather-snow i{top:-8vh;width:var(--size);height:var(--size);border-radius:50%;
    background:radial-gradient(circle,#fff,#bfe3ff 70%,transparent);box-shadow:0 0 6px rgba(255,255,255,.8);
    animation:wldFallSway var(--dur) linear var(--delay) 1 forwards}
  .wld-weather-rain i{top:-10vh;width:2px;height:calc(var(--size)*3);
    background:linear-gradient(180deg,transparent,#9fd8ff,#eaf7ff);opacity:.8;
    animation:wldFall calc(var(--dur)*.5) cubic-bezier(.4,0,1,1) var(--delay) 1 forwards}
  .wld-weather-ember i{bottom:-8vh;width:var(--size);height:var(--size);border-radius:50%;
    background:radial-gradient(circle,#fff6c8,#ff8a3d 55%,transparent);box-shadow:0 0 10px rgba(255,138,61,.85);
    animation:wldRise var(--dur) ease-out var(--delay) 1 forwards}
  .wld-weather-leaf i{top:-8vh;width:var(--size);height:var(--size);background:var(--col);
    clip-path:polygon(50% 0%,90% 35%,75% 100%,25% 100%,10% 35%);box-shadow:0 0 4px rgba(0,0,0,.3);
    animation:wldFallSway var(--dur) linear var(--delay) 1 forwards}
  @keyframes wldFall{0%{transform:translateY(-10vh) translateX(0);opacity:0}10%{opacity:.9}100%{transform:translateY(112vh) translateX(var(--sway));opacity:.1}}
  @keyframes wldFallSway{0%{transform:translateY(-8vh) translateX(0) rotate(0deg);opacity:0}10%{opacity:1}50%{transform:translateY(50vh) translateX(calc(var(--sway)*.6)) rotate(160deg)}100%{transform:translateY(112vh) translateX(var(--sway)) rotate(320deg);opacity:.15}}
  @keyframes wldRise{0%{transform:translateY(0) translateX(0);opacity:0}12%{opacity:1}100%{transform:translateY(-105vh) translateX(var(--sway));opacity:0}}

  /* a Wilds Beyond player's own chrome answers to whichever season is active —
     :not() guards so this never papers over a gameplay-state color (attack
     target, waiting-for-turn, no-legal-action glow) that matters more. */
  .hero.wld-season:not(.tgt),.thero.wld-season:not(.tgt){border-color:var(--season,var(--wld));
    box-shadow:0 0 18px color-mix(in srgb,var(--season,var(--wld)) 45%,transparent)}
  .power.wld-season,.tspower.wld-season{border-color:var(--season,var(--wld));
    box-shadow:0 0 14px color-mix(in srgb,var(--season,var(--wld)) 35%,transparent)}
  .end.wld-season:not(.wait):not(.glow),.tgend.wld-season:not(.wait):not(.glow){border-color:var(--season,var(--wld))}
  .end.wld-season:not(.wait):hover{box-shadow:0 0 20px color-mix(in srgb,var(--season,var(--wld)) 40%,transparent)}
  /* Moonlit Fields — Usagi Rank is otherwise easy to lose track of once four seats are on screen */
  .thero.mf-rank:not(.tgt){border-color:var(--rankcol);box-shadow:0 0 14px color-mix(in srgb,var(--rankcol) 40%,transparent)}

  #log{position:fixed;left:12px;bottom:auto;width:240px;
       font-family:var(--mono);font-size:8.5px;line-height:1.75;color:var(--dim);
       pointer-events:auto;z-index:30;display:flex;flex-direction:column;padding:0;border:1px solid #28354a;border-radius:4px;
       background:rgba(6,10,17,.92);box-shadow:0 8px 22px #0009;
       opacity:.25;transition:opacity .18s ease}
  #log:hover,#log:focus-within,#log.dragging{opacity:1}
  #log.closed{display:none}
  #logbar{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;cursor:grab;
          border-bottom:1px solid #1c2635;font:7px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#657089;
          user-select:none;touch-action:none}
  #logbar:active{cursor:grabbing}
  #logclose{cursor:pointer;padding:0 4px;color:#657089}
  #logclose:hover{color:var(--gold)}
  #logbody{max-height:26vh;overflow-y:auto;overscroll-behavior:contain;padding:7px 9px;cursor:pointer;scrollbar-width:thin}
  #game.on #phand{padding-left:262px}
  #log em{color:var(--gold);font-style:normal} #log s{color:var(--blood);text-decoration:none}
  #log i{color:var(--moon);font-style:normal} #log u{color:var(--sang);text-decoration:none}
  #log .cn{pointer-events:auto;cursor:help;border-bottom:1px dotted currentColor}
  #log .cn:hover{color:var(--gold)}
  @media(max-width:720px){#log{width:190px}#logbody{font-size:7.5px;max-height:21vh}#game.on #phand{padding-left:205px}}
  /* Anchored to the enemy's own back row instead of floating over the hand
     or the log — that row is full width and, in practice, stays empty on
     its right edge even with several Works in play (they fill from the
     left), so this corner never has anything else parked on it. */
  #recapopen,#zonesopen{display:none;position:fixed;top:120px;right:12px;left:auto;bottom:auto;z-index:34;padding:7px 10px;border:1px solid var(--gold-dim);border-radius:3px;background:rgba(7,11,19,.92);color:var(--gold);font:8px var(--mono);letter-spacing:.13em;text-transform:uppercase;cursor:pointer}
  #zonesopen{top:154px}
  #game.on~#recapopen,#teamgame.on~#recapopen,#game.on~#zonesopen,#teamgame.on~#zonesopen{display:block}
  #recapopen:hover,#zonesopen:hover{background:rgba(220,179,92,.13);border-color:var(--gold)}
  #recapmodal,#zonesmodal{position:fixed;inset:0;z-index:98;display:none;place-items:center;padding:24px;background:rgba(3,5,9,.9);backdrop-filter:blur(5px)}
  #recapmodal.on,#zonesmodal.on{display:grid}
  .recapbox{width:min(1080px,96vw);height:min(820px,90vh);display:flex;flex-direction:column;background:linear-gradient(170deg,#151d2b,#080c14);border:1px solid var(--gold-dim);border-top:3px solid var(--gold);border-radius:7px;box-shadow:0 28px 90px #000;overflow:hidden}
  .recaphead{display:flex;align-items:flex-start;gap:18px;padding:18px 20px 13px;border-bottom:1px solid var(--rule)}
  .recaphead>div{flex:1}.recaphead h2{margin:0;font:26px var(--serif);font-weight:400}.recaphead p{margin:5px 0 0;color:var(--dim);font-size:11px;line-height:1.45}
  #recapclose{border:1px solid var(--rule);background:transparent;color:var(--ink);border-radius:3px;padding:8px 12px;cursor:pointer;font:9px var(--mono);text-transform:uppercase;letter-spacing:.12em}
  .recaptools{display:flex;gap:12px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--rule)}
  #recapsearch{flex:1;padding:9px 11px;border:1px solid var(--rule);border-radius:3px;background:#080c14;color:var(--ink);font:10px var(--mono)}
  #recapsum{color:var(--dim);font:8px var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
  .recaptable{flex:1;overflow:auto;padding:0 12px 14px}
  .recaprow{display:grid;grid-template-columns:62px minmax(110px,.8fr) 18px minmax(110px,.8fr) minmax(125px,.9fr) minmax(170px,1.25fr);gap:7px;align-items:start;padding:8px;border-bottom:1px solid rgba(255,255,255,.06);font-size:10.5px;line-height:1.35}
  .recaprow.head{position:sticky;top:0;z-index:1;background:#101724;color:var(--gold);font:7.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
  .recaprow .ev{color:#657089;font:7.5px var(--mono)}.recaprow .src,.recaprow .tgt{color:var(--ink);font-weight:600;overflow-wrap:anywhere}.recaprow .arrow{color:var(--gold);text-align:center}.recaprow .etype{color:#c7d1e4}.recaprow .edetail{color:var(--dim)}
  .recaprow .edetail b{color:#f0d67a}.recaprow .edetail small{display:block;color:#657089;margin-top:2px}
  .recapempty{padding:34px;text-align:center;color:var(--dim);font:11px var(--mono)}
  @media(max-width:720px){.recaprow{grid-template-columns:48px 1fr 14px 1fr}.recaprow .etype,.recaprow .edetail{grid-column:2/-1}.recaprow.head{display:none}.recaptools{align-items:stretch;flex-direction:column}#recapsum{white-space:normal}}

  #toast{position:fixed;top:42%;left:50%;transform:translate(-50%,-50%);z-index:60;
         font-family:var(--serif);font-size:36px;color:var(--gold);text-align:center;
         pointer-events:none;opacity:0;text-shadow:0 4px 30px rgba(0,0,0,.9);text-wrap:balance}
  #toast.show{animation:flash 1.5s ease-out}
  @keyframes flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.85)}
                   18%{opacity:1;transform:translate(-50%,-50%) scale(1)}72%{opacity:1}100%{opacity:0}}
  #hint{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:40;
        font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
        color:var(--gold);background:rgba(8,11,19,.92);padding:7px 10px 7px 14px;border-radius:3px;
        border:1px solid var(--gold-dim);display:none;align-items:center;gap:10px}
  #hint.on{display:flex;animation:hintPulse 1.6s ease-in-out infinite}
  @keyframes hintPulse{0%,100%{box-shadow:0 0 0 rgba(220,179,92,0)}50%{box-shadow:0 0 20px rgba(220,179,92,.4)}}
  #hint .hintx{cursor:pointer;opacity:.55;font-size:11px;padding:1px 3px;border-radius:2px;transition:opacity .12s,background .12s}
  #hint .hintx:hover{opacity:1;background:rgba(220,179,92,.18)}
  #actionPreview{position:fixed;z-index:43;left:50%;bottom:18px;transform:translateX(-50%) translateY(10px);
    width:min(560px,calc(100vw - 24px));padding:10px 13px;border:1px solid var(--gold-dim);
    border-left:3px solid var(--gold);border-radius:4px;background:rgba(8,11,19,.96);
    box-shadow:0 12px 34px rgba(0,0,0,.52);color:var(--ink);pointer-events:none;
    opacity:0;visibility:hidden;transition:opacity .12s ease,transform .12s ease}
  #actionPreview.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  #actionPreview.danger{border-color:#9f3f43;border-left-color:#ff6b5e}
  #actionPreview .ap-title{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
  #actionPreview.danger .ap-title{color:#ff8b82}
  #actionPreview .ap-grid{display:flex;flex-wrap:wrap;gap:5px 13px;margin-top:6px;font-size:11px;line-height:1.35}
  #actionPreview .ap-grid span{color:var(--dim)}#actionPreview .ap-grid b{color:var(--ink)}
  #actionPreview .ap-warn{margin-top:7px;color:#ff8b82;font:9px var(--mono);letter-spacing:.05em}
  .playability{margin-top:9px;padding:8px 9px;border-left:2px solid #9f3f43;background:rgba(145,40,47,.12);
    color:#ffaaa3;font-size:10px;line-height:1.45}
  .playability.ready{border-left-color:#65b77a;background:rgba(50,120,72,.1);color:#a9ddb4}
  .cbmark{display:none}
  :root[data-colorblind="on"] .cbmark{display:block;position:absolute;z-index:12;top:3px;right:4px;padding:2px 4px;border:1px solid currentColor;border-radius:2px;background:#080c14;color:#fff;font:6px var(--mono);letter-spacing:.06em;text-transform:uppercase}
  :root[data-colorblind="on"] .card,:root[data-colorblind="on"] .m,:root[data-colorblind="on"] .en{background-image:repeating-linear-gradient(135deg,transparent 0 9px,rgba(255,255,255,.035) 9px 10px)}
  :root[data-colorblind="on"] .gemtag{outline:1px solid currentColor}.gemtag::before{content:"◆ ";font-size:8px}
  @media(max-width:700px){#actionPreview{bottom:7px}.action-preview-wide{display:none}}

  /* targeting mode: whatever ISN'T clickable fades back so the choice reads instantly */
  #game.targeting .field .m:not(.tgt),#game.targeting .rear .en:not(.tgt),#game.targeting .hero:not(.tgt),
  #teamgame.targeting .m:not(.tgt),#teamgame.targeting .thero:not(.tgt){
    opacity:.4;filter:grayscale(.6) brightness(.75);transition:opacity .15s ease,filter .15s ease}
  #game.targeting .m.tgt,#game.targeting .hero.tgt,#game.targeting .en.tgt,
  #teamgame.targeting .m.tgt,#teamgame.targeting .thero.tgt{animation:tgtBeckon 1.1s ease-in-out infinite}
  @keyframes tgtBeckon{50%{transform:scale(1.05)}}

  #menu{position:relative;height:100vh;overflow-x:hidden;overflow-y:auto;padding:0 24px 60px;
    background:#05070b;color:var(--ink);isolation:isolate}
  #menu::before{content:"";position:fixed;z-index:-3;inset:0;pointer-events:none;
    background:
      radial-gradient(circle at 50% 29%,color-mix(in srgb,var(--menu-accent) 13%,transparent),transparent 20%),
      radial-gradient(ellipse 68% 44% at 50% 100%,color-mix(in srgb,var(--menu-accent2) 62%,transparent),transparent 68%),
      linear-gradient(180deg,#111722 0%,#070a10 46%,#030406 100%)}
  #menu::after{content:"";position:fixed;z-index:-2;left:50%;bottom:-30vh;width:min(62vw,760px);height:112vh;
    transform:translateX(-50%) perspective(540px) rotateX(61deg);transform-origin:bottom;
    clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);
    background:linear-gradient(90deg,transparent 0 4%,color-mix(in srgb,var(--menu-accent) 20%,transparent) 4.2%,transparent 4.5% 95.5%,color-mix(in srgb,var(--menu-accent) 20%,transparent) 95.8%,transparent 96%),
      repeating-linear-gradient(176deg,rgba(255,255,255,.025) 0 2px,transparent 2px 76px),
      linear-gradient(180deg,rgba(41,45,50,.22),rgba(4,5,7,.94));
    filter:drop-shadow(0 0 50px color-mix(in srgb,var(--menu-accent2) 65%,transparent));pointer-events:none}
  .road-atmos{position:fixed;z-index:-1;inset:0;overflow:hidden;pointer-events:none;
    background:repeating-linear-gradient(111deg,transparent 0 74px,rgba(255,255,255,.012) 75px,transparent 76px 149px)}
  .road-atmos::before,.road-atmos::after{content:"";position:absolute;left:50%;top:9vh;width:1px;height:78vh;
    background:linear-gradient(transparent,color-mix(in srgb,var(--menu-accent) 38%,transparent),transparent);box-shadow:0 0 30px color-mix(in srgb,var(--menu-accent) 32%,transparent)}
  .road-atmos::before{transform:translateX(-31vw) rotate(13deg)}.road-atmos::after{transform:translateX(31vw) rotate(-13deg)}
  .road-motes{position:absolute;inset:0}
  .road-motes i{position:absolute;left:var(--x);bottom:-14px;width:2px;height:2px;border-radius:50%;
    background:var(--menu-accent);box-shadow:0 0 8px var(--menu-accent);opacity:0;animation:roadMote var(--d) linear infinite;animation-delay:var(--delay)}
  @keyframes roadMote{0%{opacity:0;transform:translate(0,0)}15%{opacity:.8}75%{opacity:.2}100%{opacity:0;transform:translate(var(--drift),-82vh)}}
  .wrap{position:relative;max-width:1240px;margin:0 auto}
  .menuview{display:none;min-height:100vh;animation:menuRise .46s cubic-bezier(.2,.7,.2,1)}
  .menuview.on{display:flex}
  @keyframes menuRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .homeview{position:relative;flex-direction:column;align-items:center;justify-content:center;padding:68px 0 48px;text-align:center}
  .road-seal{position:relative;width:112px;height:112px;margin-bottom:25px;border:1px solid color-mix(in srgb,var(--menu-accent) 50%,transparent);border-radius:50%;
    display:grid;place-items:center;color:var(--menu-accent);font:30px var(--serif);letter-spacing:.06em;
    background:radial-gradient(circle,color-mix(in srgb,var(--menu-accent) 10%,transparent),rgba(5,7,11,.7) 61%,transparent 62%);
    box-shadow:inset 0 0 32px color-mix(in srgb,var(--menu-accent) 8%,transparent),0 0 52px color-mix(in srgb,var(--menu-accent) 8%,transparent)}
  .road-seal::before,.road-seal::after{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--menu-accent) 23%,transparent);transform:rotate(45deg)}
  .road-seal::after{inset:29px;border-color:color-mix(in srgb,var(--menu-accent2) 80%,transparent);transform:rotate(45deg);background:color-mix(in srgb,var(--menu-accent2) 45%,transparent)}
  .road-seal span{position:relative;z-index:1;text-shadow:0 0 18px color-mix(in srgb,var(--menu-accent) 60%,transparent)}
  .home-kicker,.section-kicker{font:8px var(--mono);letter-spacing:.48em;text-transform:uppercase;color:var(--menu-accent);margin:0 0 15px}
  .home-title{font:400 clamp(56px,8.7vw,116px)/.83 var(--serif);letter-spacing:.055em;text-transform:uppercase;margin:0;
    color:#eee7d9;text-shadow:0 2px 0 #615234,0 13px 42px rgba(0,0,0,.92)}
  .home-title span{display:block;margin-top:13px;font:8px var(--mono);letter-spacing:.62em;color:#8c7850;text-shadow:none}
  .home-copy{max-width:610px;margin:25px auto 33px;color:#a2acbf;font-size:12.5px;line-height:1.75;text-wrap:balance}
  .home-copy b{color:#d8c89f;font-weight:500}
  .home-actions{width:min(940px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .home-choice{position:relative;min-height:150px;padding:23px 22px 21px;overflow:hidden;text-align:left;cursor:pointer;color:var(--ink);
    border:1px solid #38445b;border-radius:4px;background:linear-gradient(145deg,rgba(29,37,52,.96),rgba(9,13,21,.98));
    box-shadow:0 18px 42px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.025);transition:transform .2s,border-color .2s,box-shadow .2s}
  .home-choice::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;transform:scaleX(.32);transform-origin:left;
    background:linear-gradient(90deg,var(--menu-accent),var(--menu-accent2));transition:transform .25s}
  .home-choice::after{content:attr(data-mark);position:absolute;right:10px;bottom:-26px;font:88px var(--serif);color:rgba(255,255,255,.026);transition:color .2s,transform .2s}
  .home-choice:hover,.home-choice:focus-visible{outline:none;transform:translateY(-5px);border-color:var(--menu-accent-dim);
    box-shadow:0 24px 55px rgba(0,0,0,.56),0 0 25px color-mix(in srgb,var(--menu-accent) 8%,transparent)}
  .home-choice:hover::before,.home-choice:focus-visible::before{transform:scaleX(1)}
  .home-choice:hover::after{color:color-mix(in srgb,var(--menu-accent) 7%,transparent);transform:translateY(-6px)}
  .choice-no{display:block;margin-bottom:22px;font:7px var(--mono);letter-spacing:.28em;text-transform:uppercase;color:#8e98ad}
  .home-choice strong{position:relative;display:block;font:400 24px var(--serif);color:#eee8dc;margin-bottom:7px}
  .home-choice small{position:relative;display:block;color:#a0aabd;font-size:10.5px;line-height:1.5}
  .home-continue{margin-top:20px;padding:10px 16px;border:0;background:none;color:#8b96ac;cursor:pointer;
    font:8px var(--mono);letter-spacing:.2em;text-transform:uppercase;transition:color .18s}
  .home-continue:hover{color:var(--menu-accent)}
  .home-version{position:absolute;right:0;bottom:21px;color:#3e4657;font:7px var(--mono);letter-spacing:.15em;text-transform:uppercase}
  .home-record{margin-top:10px;color:#5c667c;font:8px var(--mono);letter-spacing:.14em;text-transform:uppercase}
  .home-record:empty{display:none}
  .submenu{flex-direction:column;padding:48px 0 70px}
  .menu-back{align-self:flex-start;margin-bottom:48px;padding:12px 22px 12px 17px;border:1px solid #3a465d;border-radius:5px;
    background:linear-gradient(145deg,rgba(29,37,52,.92),rgba(9,13,21,.94));color:#b3bccd;cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 26px rgba(0,0,0,.32);
    font:12px var(--mono);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
    transition:color .18s,border-color .18s,transform .18s,box-shadow .18s}
  .menu-back:hover{color:var(--menu-accent);border-color:var(--menu-accent-dim);transform:translateX(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.42),0 0 20px color-mix(in srgb,var(--menu-accent) 14%,transparent)}
  .section-head{text-align:center;max-width:670px;margin:0 auto 38px}
  .section-head h2{margin:0;font:400 clamp(36px,5vw,59px)/1 var(--serif);color:#eee8dc}
  .section-head p{margin:15px auto 0;color:#7f899e;font-size:12px;line-height:1.7;text-wrap:balance}
  .modeplates{display:grid;grid-template-columns:repeat(2,minmax(260px,440px));gap:15px;justify-content:center;margin:auto 0}
  .modeplate{position:relative;min-height:285px;padding:30px;text-align:left;overflow:hidden;cursor:pointer;color:var(--ink);
    border:1px solid #2b3549;border-radius:5px;background:linear-gradient(155deg,rgba(22,29,42,.96),rgba(6,9,15,.97));transition:.22s}
  .modeplate:hover{transform:translateY(-6px);border-color:var(--menu-accent);box-shadow:0 24px 55px rgba(0,0,0,.52),0 0 35px color-mix(in srgb,var(--menu-accent) 8%,transparent)}
  .modeplate .modeglyph{width:62px;height:62px;display:grid;place-items:center;margin-bottom:46px;border:1px solid #3a465d;
    color:var(--menu-accent);font:25px var(--serif);transform:rotate(45deg);background:#0b101a}
  .modeplate .modeglyph span{transform:rotate(-45deg)}
  .modeplate strong{display:block;font:400 28px var(--serif);margin-bottom:9px}.modeplate small{color:#7f899e;font-size:11px;line-height:1.6}
  .modeplate em{position:absolute;right:22px;top:22px;font:7px var(--mono);font-style:normal;letter-spacing:.15em;text-transform:uppercase;color:#576178}
  .modeplate.soon{cursor:default;opacity:.55}
  .modeplate.soon:hover{transform:none;border-color:#2b3549;box-shadow:none}
  .factionview{flex-direction:column;padding:36px 0 70px}
  .factionview .menu-back{margin-bottom:23px}.factionview .section-head{margin-bottom:28px}
  .lede{text-align:center;color:var(--dim);font-size:13px;line-height:1.65;max-width:620px;margin:18px auto 30px;text-wrap:balance}
  .factioncodex{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:690px;border:1px solid #293348;
    border-radius:7px;overflow:hidden;background:rgba(5,8,13,.8);box-shadow:0 28px 80px rgba(0,0,0,.55)}
  .factionrail{position:relative;z-index:2;padding:18px 12px;background:linear-gradient(180deg,rgba(19,25,37,.98),rgba(7,10,16,.98));
    border-right:1px solid #293348;overflow:hidden;display:flex;flex-direction:column}
  .rail-title{padding:4px 9px 15px;border-bottom:1px solid #293348;margin-bottom:8px;flex:none}
  .rail-title span{display:block;color:var(--gold);font:7px var(--mono);letter-spacing:.24em;text-transform:uppercase;margin-bottom:5px}
  .rail-title strong{font:400 18px var(--serif);color:#eee8dc}
  /* Fill the rail's actual height instead of a fixed max-height — otherwise a
     tall .factionstage stretches the rail past the list, leaving dead space
     below the last faction even while the list itself still has to scroll. */
  .decks{display:flex;flex-direction:column;gap:3px;flex:1;min-height:0;overflow-y:auto;padding:3px 4px 10px 0;scrollbar-width:thin}
  .dk{position:relative;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:9px 10px;border:1px solid transparent;
    border-radius:4px;cursor:pointer;text-align:left;background:transparent;color:var(--dim);transition:background .16s,border-color .16s,transform .16s}
  .dk::after{content:"";position:absolute;right:-1px;top:22%;height:56%;width:2px;background:var(--fac);transform:scaleY(0);transition:transform .18s;box-shadow:0 0 12px var(--fac)}
  .dk:hover{background:rgba(255,255,255,.035);color:var(--ink);transform:translateX(2px)}
  .dk.pick{background:linear-gradient(90deg,color-mix(in srgb,var(--fac) 14%,transparent),rgba(255,255,255,.025));border-color:color-mix(in srgb,var(--fac) 36%,#263147);color:var(--ink)}
  .dk.pick::after{transform:scaleY(1)}
  .dk-sigil{width:31px;height:31px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--fac) 55%,#263147);
    transform:rotate(45deg);color:var(--fac);font:8px var(--mono);background:rgba(4,7,12,.82)}
  .dk-sigil span{transform:rotate(-45deg)}
  .dk-copy{min-width:0}.dk h3{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 13px/1.2 var(--serif);color:inherit}
  .arch{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:6px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fac)}
  .factionstage{--fac2:#c79e55;position:relative;min-width:0;overflow:hidden;padding:42px 46px 30px;isolation:isolate;
    background:linear-gradient(145deg,color-mix(in srgb,var(--fac) 8%,#111725),#080b12 66%);transition:background .35s}
  .factionstage::before{content:"";position:absolute;z-index:-3;inset:0;opacity:.72;transition:background .35s;
    background:radial-gradient(circle at 84% 18%,color-mix(in srgb,var(--fac) 28%,transparent),transparent 28%),
      linear-gradient(125deg,transparent 30%,color-mix(in srgb,var(--fac2) 8%,transparent),transparent 75%)}
  .factionstage::after{content:attr(data-mark);position:absolute;z-index:-2;right:-18px;top:-62px;color:color-mix(in srgb,var(--fac) 7%,transparent);
    font:260px/.9 var(--serif);letter-spacing:-.08em;pointer-events:none;text-shadow:0 0 70px color-mix(in srgb,var(--fac) 12%,transparent)}
  .stage-vfx{position:absolute;z-index:-1;right:-100px;top:-90px;width:520px;height:520px;border-radius:50%;opacity:.38;pointer-events:none;
    border:1px solid color-mix(in srgb,var(--fac) 42%,transparent);animation:stageTurn 36s linear infinite}
  .stage-vfx::before,.stage-vfx::after{content:"";position:absolute;inset:14%;border:1px solid color-mix(in srgb,var(--fac2) 36%,transparent);transform:rotate(45deg)}
  .stage-vfx::after{inset:28%;border-style:dashed;transform:rotate(20deg)}
  @keyframes stageTurn{to{transform:rotate(360deg)}}
  .factionstage[data-faction="lex"] .stage-vfx{background:repeating-conic-gradient(from 20deg,transparent 0 12deg,color-mix(in srgb,var(--fac) 25%,transparent) 13deg,transparent 14deg 30deg)}
  .factionstage[data-faction="leg"] .stage-vfx{background:conic-gradient(from 30deg,#ff647522,#f6cf6622,#71e39a22,#6cc9ff22,#b98bff22,#ff647522);filter:saturate(1.5)}
  .factionstage[data-faction="nys"] .stage-vfx{border-radius:3%;background:repeating-linear-gradient(117deg,transparent 0 24px,rgba(220,224,235,.12) 25px,transparent 27px 48px);filter:blur(.2px)}
  .factionstage[data-faction="nur"] .stage-vfx{background:radial-gradient(circle at 50% 50%,transparent 0 24%,color-mix(in srgb,var(--fac) 20%,transparent) 25% 26%,transparent 27% 42%,color-mix(in srgb,var(--fac2) 20%,transparent) 43% 44%,transparent 45%)}
  .factionstage[data-faction="sang"] .stage-vfx{border-radius:50% 50% 7% 7%;background:linear-gradient(90deg,transparent 47%,color-mix(in srgb,var(--fac) 32%,transparent) 48% 52%,transparent 53%),linear-gradient(transparent 47%,color-mix(in srgb,var(--fac) 32%,transparent) 48% 52%,transparent 53%)}
  .factionstage[data-faction="iron"] .stage-vfx{background:repeating-conic-gradient(color-mix(in srgb,var(--fac) 18%,transparent) 0 8deg,transparent 8deg 23deg);box-shadow:inset 0 0 0 48px #090d14,inset 0 0 0 50px color-mix(in srgb,var(--fac) 35%,transparent)}
  .factionstage[data-faction="sil"] .stage-vfx{background:radial-gradient(circle,#fff7bd33 0 5%,transparent 6% 15%,#f5f0cf1d 16%,transparent 34%),repeating-conic-gradient(#fff3 0 1deg,transparent 2deg 18deg)}
  .factionstage[data-faction="frost"] .stage-vfx{border-radius:0;transform:rotate(45deg);background:linear-gradient(135deg,transparent 48%,#d9f8ff22 49% 51%,transparent 52%),linear-gradient(45deg,transparent 48%,#83dff322 49% 51%,transparent 52%)}
  .factionstage[data-faction="khaz"] .stage-vfx{border-radius:48% 52% 42% 58%;background:repeating-radial-gradient(ellipse at 30% 70%,transparent 0 23px,color-mix(in srgb,var(--fac) 18%,transparent) 24px 25px,transparent 26px 45px)}
  .factionstage[data-faction="mf"] .stage-vfx{background:radial-gradient(circle at 42% 38%,#edf3d633 0 18%,transparent 19%),repeating-linear-gradient(90deg,transparent 0 42px,color-mix(in srgb,var(--fac) 20%,transparent) 43px 46px,transparent 47px 68px)}
  .factionstage[data-faction="vir"] .stage-vfx{border-radius:46% 54% 61% 39%;background:repeating-radial-gradient(ellipse at 65% 72%,transparent 0 18px,color-mix(in srgb,var(--fac) 21%,transparent) 19px 21px,transparent 22px 40px)}
  .factionstage[data-faction="vak"] .stage-vfx{border-radius:50%;background:repeating-conic-gradient(from 8deg,transparent 0 18deg,rgba(238,233,220,.16) 19deg 21deg,transparent 22deg 44deg);box-shadow:inset 0 0 0 38px #130f0b,inset 0 0 0 40px #7a6752,0 0 65px rgba(229,239,242,.16)}
  .match-loadout{display:none;margin-top:18px;padding:15px;border:1px solid color-mix(in srgb,var(--fac) 38%,#293348);border-radius:6px;
    background:linear-gradient(135deg,color-mix(in srgb,var(--fac) 9%,rgba(8,12,20,.94)),rgba(5,8,14,.94));box-shadow:0 12px 34px rgba(0,0,0,.28)}
  .match-loadout.on{display:block}.match-loadout.locked .dk,.match-loadout.locked select{pointer-events:none;opacity:.58}
  .factioncodex.lobby-locked .factionrail{pointer-events:none;opacity:.62}.factioncodex.lobby-locked .factionstage{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fac) 35%,transparent)}
  .match-loadout-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:11px}
  .match-loadout-head span,.match-deck-field span{display:block;margin-bottom:5px;color:var(--fac);font:7px var(--mono);letter-spacing:.18em;text-transform:uppercase}
  .match-loadout-head strong{font:400 19px var(--serif)}.match-loadout-head small{color:var(--dim);font-size:9px}
  .match-deck-row{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;gap:9px;align-items:end}
  .match-deck-field select{width:100%;padding:10px 11px;border:1px solid #31405a;border-radius:4px;background:#101827;color:var(--ink);font:11px var(--sans)}
  .solo-deck-row{display:none;margin-top:14px;max-width:520px}
  .solo-deck-row.on{display:flex;gap:14px;flex-wrap:wrap}
  .solo-deck-row .match-deck-field{flex:1;min-width:150px}
  .match-room{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;gap:10px;align-items:center;margin-top:10px;padding:8px 10px;border:1px solid #34425a;border-radius:4px;background:#080d16}
  .match-room span{color:var(--dim);font:7px var(--mono);letter-spacing:.16em;text-transform:uppercase}.match-room b{overflow:hidden;color:var(--gold);font:12px var(--mono);letter-spacing:.13em;text-overflow:ellipsis;white-space:nowrap}
  .match-connection{display:none;margin:10px 0;padding:9px 10px;border:1px solid #2d3b52;border-radius:4px;background:rgba(5,10,18,.72)}.match-connection.on{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center}.match-connection-steps{display:flex;gap:5px;min-width:0}.match-connection-steps span{flex:1;padding:5px 6px;border:1px solid #303a4c;border-radius:3px;color:#667187;font:7px var(--mono);letter-spacing:.07em;text-align:center;text-transform:uppercase}.match-connection-steps span.done{border-color:#397b5d;background:rgba(43,111,78,.16);color:#91ddb7}.match-connection-steps span.active{border-color:var(--gold-dim);color:var(--gold);animation:pulse 1.4s ease-in-out infinite}.match-connection-steps span.bad{border-color:#8c3d48;color:#ff98a6}.match-connection-actions{display:flex;gap:5px}.match-connection-actions button{padding:5px 7px;border:1px solid #4a5870;border-radius:3px;background:#0c1320;color:#bbc6d8;font:7px var(--mono);letter-spacing:.07em;text-transform:uppercase;cursor:pointer}.match-connection-actions button:hover{border-color:var(--gold);color:var(--gold)}
  .match-team-preview{display:none;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0 4px}.match-team-preview.on{display:grid}
  .match-team-preview.ffa{grid-template-columns:1fr}
  .match-alliance{position:relative;overflow:hidden;min-width:0;padding:12px 13px;border:1px solid color-mix(in srgb,var(--ta) 48%,#34425a);border-radius:5px;background:linear-gradient(120deg,color-mix(in srgb,var(--ta) 13%,#080d16),color-mix(in srgb,var(--tb) 9%,#080d16));box-shadow:inset 3px 0 0 color-mix(in srgb,var(--ta) 70%,transparent)}
  .match-alliance::after{content:"";position:absolute;inset:auto -35px -55px auto;width:115px;height:115px;border:1px solid color-mix(in srgb,var(--tb) 30%,transparent);transform:rotate(45deg);pointer-events:none}
  .match-alliance.mine{box-shadow:inset 3px 0 0 var(--ta),0 0 18px color-mix(in srgb,var(--ta) 13%,transparent)}
  .match-alliance-top{display:flex;justify-content:space-between;gap:10px;color:var(--dim);font:7px var(--mono);letter-spacing:.15em;text-transform:uppercase}.match-alliance-top b{color:var(--ink);font:inherit}
  .match-alliance-name{position:relative;z-index:1;margin:7px 0 3px;color:#f2eadc;font:400 20px var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.match-alliance-forming .match-alliance-name{color:#8792a6;font-style:italic}
  .match-alliance-factions{position:relative;z-index:1;color:#aeb9cb;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .match-roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:12px 0}
  .match-seat{min-width:0;padding:9px 10px;border:1px solid #293348;border-radius:4px;background:rgba(255,255,255,.025);color:var(--dim)}
  .match-seat b{display:block;color:var(--ink);font:9px var(--mono);letter-spacing:.1em;text-transform:uppercase}.match-seat span{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
  .match-seat.connected{border-color:#49617d}.match-seat.ready{border-color:#3f8a61;background:rgba(54,137,87,.1)}.match-seat.ready b{color:#82e4aa}.match-seat.me{box-shadow:inset 0 0 0 1px var(--fac)}
  .match-seat.ai{border-color:#9a7a3b;background:rgba(179,137,61,.08)}.match-seat .seat-ai,.match-seat .seat-claim,.match-seat .seat-leave{float:right;margin:-19px 0 0 7px;padding:4px 7px;border:1px solid #59647a;border-radius:3px;background:#111827;color:#cbd4e4;font:7px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.match-seat .seat-ai:hover,.match-seat .seat-claim:hover{border-color:var(--gold);color:var(--gold)}.match-seat .seat-claim,.match-seat .seat-leave{float:none;width:100%;margin:7px 0 0;color:var(--gold);border-color:var(--gold-dim)}.match-seat .seat-leave{color:#e8a2a2;border-color:#7b4148}.match-seat .seat-leave:hover{color:#ffb8b8;border-color:#c65a68}.match-seat .ai-faction{float:right;max-width:125px;margin:-20px 58px 0 6px;padding:3px;background:#0c111c;color:#dce4ef;border:1px solid #465169;font:8px var(--mono)}
  .match-ready-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.match-status{color:#aab5c8;font-size:10px;line-height:1.45}
  .match-countdown{display:none;min-width:115px;padding:8px 12px;border:1px solid var(--gold);border-radius:4px;text-align:center;color:var(--gold);font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 20px rgba(220,179,92,.18)}
  .match-countdown.on{display:block}.match-countdown b{font-size:19px;margin-left:6px}.match-countdown.cancelled{border-color:#566078;color:#9aa3b5;box-shadow:none}
  .stage-top{display:flex;gap:23px;align-items:flex-start;max-width:760px}
  .stage-sigil{flex:none;width:72px;height:72px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--fac) 65%,#334058);
    color:var(--fac);font:16px var(--mono);transform:rotate(45deg);background:rgba(4,7,12,.7);box-shadow:0 0 35px color-mix(in srgb,var(--fac) 17%,transparent)}
  .stage-sigil span{transform:rotate(-45deg)}
  .stage-heading{min-width:0}.stage-eyebrow{font:7px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--fac);margin-bottom:8px}
  .stage-heading h3{margin:0 0 7px;font:400 clamp(34px,4vw,54px)/.98 var(--serif);color:#f0eadf;text-wrap:balance}
  .stage-heading .stage-arch{font:8px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#929db2}
  .stage-blurb{max-width:800px;margin:27px 0 25px;font:italic 16px/1.65 var(--serif);color:#b6bfd0;text-wrap:balance}
  .stage-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr);gap:12px}
  .stage-card{padding:17px 18px;border:1px solid color-mix(in srgb,var(--fac) 24%,#283246);border-radius:5px;background:rgba(5,8,14,.62);backdrop-filter:blur(8px)}
  .stage-label{font:7px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fac);margin-bottom:8px}
  .stage-card h4{margin:0 0 7px;font:400 20px var(--serif);color:#eee8dc}.stage-card p{margin:0;color:#9ba6ba;font-size:11px;line-height:1.65}
  .stage-card p b{color:#e2d6b5}.power-cost{float:right;color:var(--gold);font:8px var(--mono);padding:3px 6px;border:1px solid var(--gold-dim);border-radius:20px}
  .stage-plan{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .stage-plan ul{margin:0;padding:0;list-style:none;display:flex;gap:6px;flex-wrap:wrap}
  .stage-plan li{padding:6px 8px;border:1px solid color-mix(in srgb,var(--fac) 28%,#2a3447);border-radius:3px;color:#aab4c5;font:7px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--fac) 6%,transparent)}
  .stage-actions{margin-top:20px;padding-top:17px;border-top:1px solid color-mix(in srgb,var(--fac) 22%,#283246)}
  .gorow{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
  .go{padding:15px 40px;border-radius:4px;cursor:pointer;
      border:1px solid var(--gold);background:linear-gradient(180deg,#332812,#1d160a);color:var(--gold);
      font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600}
  .go:hover{box-shadow:0 0 32px rgba(220,179,92,.35)}
  .go:disabled{opacity:.3;cursor:default;box-shadow:none}
  .go.alt{border-color:var(--rule);color:var(--dim);background:rgba(255,255,255,.03)}
  .go.alt:hover{color:var(--ink);border-color:var(--gold-dim);box-shadow:none}
  /* Menu theme reaches the pre-game screens only — #pause, #syncNotice and the
     rest of the live-match chrome share these same classes but keep --gold,
     since that still means something specific during an actual game. */
  #menu .go,#builder .go{border-color:var(--menu-accent);color:var(--menu-accent);
    background:linear-gradient(180deg,color-mix(in srgb,var(--menu-accent) 22%,#1a1408),color-mix(in srgb,var(--menu-accent) 10%,#0d0a04))}
  #menu .go:hover,#builder .go:hover{box-shadow:0 0 32px color-mix(in srgb,var(--menu-accent) 35%,transparent)}
  #menu .go.alt:hover,#builder .go.alt:hover{border-color:var(--menu-accent-dim)}
  .mydecks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px;min-height:0}
  .mydecks .md{padding:9px 14px;border-radius:3px;cursor:pointer;font-family:var(--mono);font-size:9.5px;
    letter-spacing:.1em;border:1px solid var(--rule);color:var(--dim);background:rgba(255,255,255,.03);
    display:flex;align-items:center;gap:8px}
  .mydecks .md:hover{color:var(--gold);border-color:var(--gold-dim)}
  .mydecks .md em{font-style:normal;color:var(--fac);font-size:8px;letter-spacing:.14em;text-transform:uppercase}
  .note{text-align:center;color:var(--dim);font-size:10px;margin-top:14px;font-family:var(--mono);letter-spacing:.1em}
  @media(max-width:900px){.factioncodex{grid-template-columns:190px minmax(0,1fr)}.factionstage{padding:34px 27px}.stage-grid{grid-template-columns:1fr}.stage-plan{grid-column:auto;grid-template-columns:1fr}.dk{grid-template-columns:26px 1fr}.dk-sigil{width:24px;height:24px}}
  @media(max-width:650px){.factioncodex{display:block}.factionrail{border-right:0;border-bottom:1px solid #293348}.decks{flex-direction:row;max-height:none;overflow-x:auto}.dk{flex:0 0 155px}.factionstage{padding:28px 19px}.stage-vfx{width:360px;height:360px}.stage-top{display:block}.stage-sigil{width:52px;height:52px;margin:0 0 25px}.stage-heading h3{font-size:38px}.match-deck-row{grid-template-columns:1fr}.match-room{grid-template-columns:1fr auto}.match-room span{grid-column:1/-1}.match-team-preview{grid-template-columns:1fr}.match-roster{grid-template-columns:1fr 1fr}.match-ready-row{grid-template-columns:1fr}}
  @media(max-width:760px){
    #menu{padding-inline:15px}.homeview{justify-content:flex-start;padding-top:45px}.road-seal{width:82px;height:82px;margin-bottom:18px}
    .home-actions{grid-template-columns:1fr;max-width:520px}.home-choice{min-height:112px;padding:17px 19px}.choice-no{margin-bottom:12px}
    .home-version{position:static;margin-top:20px}.modeplates{grid-template-columns:1fr}.modeplate{min-height:210px}.modeplate .modeglyph{margin-bottom:30px}
  }
  @media(prefers-reduced-motion:reduce){.road-motes i{animation:none}.menuview{animation:none}.home-choice,.modeplate{transition:none}}

  /* ---------- the lobby ---------- */
  #netui{display:none;max-width:840px;margin:34px auto 0;padding:28px 30px;
    background:linear-gradient(175deg,#141b2a,#0b101a);border:1px solid var(--rule);
    border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
  #netui.on{display:block}
  #netui h2{font-family:var(--serif);font-size:24px;font-weight:400;margin:0 0 10px}
  .nlede{color:var(--dim);font-size:12.5px;line-height:1.6;margin:0 0 22px}
  .nlede b{color:var(--ink)}
  .nrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .nrow .go{margin:0;padding:12px 22px;font-size:9.5px}
  .nstat{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--dim);padding:6px 10px;border:1px solid var(--rule);border-radius:3px}
  .nstat.ok{color:#6fd08a;border-color:#2e6b3f}
  .nlabel{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--gold);margin:20px 0 7px}
  #netui textarea{width:100%;height:74px;resize:vertical;padding:9px 11px;border-radius:3px;
    background:#0a0e17;color:var(--dim);border:1px solid var(--rule);
    font-family:var(--mono);font-size:9px;line-height:1.4;word-break:break-all}
  #netui textarea:focus{outline:2px solid var(--gold);outline-offset:1px;color:var(--ink)}
  #netui .btn{margin-top:8px;margin-right:6px}
  .nsel{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--dim);display:flex;align-items:center;gap:8px}
  .nsel select{padding:8px 10px;background:var(--felt-2);color:var(--ink);
    border:1px solid var(--rule);border-radius:3px;font:inherit;font-size:11px}
  .nhint{color:var(--dim);font-size:11.5px;line-height:1.6;margin:18px 0 0}
  .nhint b{color:var(--ink)}
  .nlen{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--dim);margin-top:6px}
  .nlen.bad{color:var(--blood)}
  .nlen b.good{color:#6fd08a} .nlen b.bad{color:var(--blood)}
  .nopt{display:flex;gap:9px;align-items:flex-start;margin-top:16px;cursor:pointer;
    font-size:11.5px;line-height:1.5;color:var(--dim)}
  .nopt input{margin-top:2px;accent-color:var(--gold)}
  .nopt b{color:var(--ink)}
  .ndet{margin-top:16px;font-size:11.5px;color:var(--dim)}
  .ndet summary{cursor:pointer;color:var(--gold);font-family:var(--mono);font-size:9px;
    letter-spacing:.14em;text-transform:uppercase}
  .ndet p{line-height:1.5;margin:10px 0}
  .ndet pre{background:#0a0e17;border:1px solid var(--rule);border-radius:3px;padding:10px;
    font-family:var(--mono);font-size:9.5px;color:var(--ink);overflow-x:auto;line-height:1.5}
  .ndet textarea{width:100%;padding:8px 10px;border-radius:3px;background:#0a0e17;color:var(--ink);
    border:1px solid var(--rule);font-family:var(--mono);font-size:10px;margin-bottom:6px;
    resize:vertical;line-height:1.6}
  .ndet textarea::placeholder{color:#3a4358}
  .nfine{font-size:10.5px;color:#5c6784}
  .nwarn{margin:0 0 18px;padding:10px 12px;border-radius:4px;font-size:11.5px;line-height:1.5;
    background:rgba(191,67,64,.12);border:1px solid rgba(191,67,64,.45);color:#e8b0ae}
  .nwarn b{color:#fff}
  .nhead{display:flex;align-items:flex-start;gap:18px;margin-bottom:22px}
  .nhead>div:first-child{flex:1}.nhead .btn{flex:none;margin-top:1px}
  .neyebrow{font:8px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
  .nmodes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 20px}
  .nmode{position:relative;display:block;text-align:left;padding:16px 18px;border:1px solid var(--rule);border-radius:6px;
    cursor:pointer;background:rgba(255,255,255,.025);color:var(--dim);transition:border-color .15s,background .15s,transform .15s}
  .nmode:hover{border-color:var(--gold-dim);transform:translateY(-1px)}
  .nmode.on{border-color:var(--gold);background:linear-gradient(145deg,rgba(220,179,92,.13),rgba(255,255,255,.025));color:var(--ink)}
  .nmode strong{display:block;font:18px var(--serif);font-weight:400;color:var(--ink);margin-bottom:4px}
  .nmode span{display:block;font-size:10.5px;line-height:1.45}
  .nmode b{position:absolute;right:12px;top:12px;font:7px var(--mono);letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold);padding:4px 6px;border:1px solid var(--gold-dim);border-radius:20px}
  .nstatusbar{display:flex;align-items:center;gap:10px;padding:11px 13px;margin-bottom:14px;border:1px solid var(--rule);
    border-radius:5px;background:rgba(3,6,12,.42)}
  .nstatusbar::before{content:"";width:8px;height:8px;border-radius:50%;background:#59647d;box-shadow:0 0 0 3px rgba(89,100,125,.12)}
  .nstatusbar.ok::before{background:#6fd08a;box-shadow:0 0 12px #55bd75}
  .nstatuscopy{flex:1;font-size:11px;color:var(--dim)}
  .nstatusbar .nstat{padding:0;border:0;background:none}
  .nrolecards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
  .nrole{display:grid;grid-template-columns:34px 1fr;gap:11px;text-align:left;padding:14px;border:1px solid var(--rule);
    border-radius:5px;background:linear-gradient(145deg,rgba(31,42,62,.8),rgba(12,17,28,.8));color:var(--ink);cursor:pointer}
  .nrole:hover{border-color:var(--gold);box-shadow:0 0 20px rgba(220,179,92,.12)}
  .nrole:disabled{opacity:.34;cursor:not-allowed;box-shadow:none}
  .nrole .num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gold-dim);
    color:var(--gold);font:11px var(--mono)}
  .nrole strong{display:block;font:15px var(--serif);font-weight:400;margin-bottom:3px}.nrole small{color:var(--dim);font-size:10px;line-height:1.35}
  .nexchange{margin-top:15px;padding:16px;border:1px solid var(--rule);border-radius:6px;background:rgba(3,6,12,.32)}
  .nexchange .nlabel{margin-top:0}
  #ncode,#t2code{width:100%;padding:9px 11px;border-radius:3px;background:#0a0e17;color:var(--ink);
    border:1px solid var(--rule);font-family:var(--mono);font-size:13px;letter-spacing:.12em;
    text-transform:uppercase;text-align:center}
  #ncode:focus,#t2code:focus{outline:2px solid var(--gold);outline-offset:1px}
  .nroomcode{font-family:var(--mono);font-size:22px;letter-spacing:.22em;text-align:center;
    color:var(--gold);background:#0a0e17;border:1px solid var(--rule);border-radius:3px;
    padding:14px;margin-bottom:4px;user-select:all}
  .nhelp{display:flex;gap:8px;align-items:flex-start;margin:12px 0 2px;color:var(--dim);font-size:10.5px;line-height:1.5}
  .nhelp::before{content:"?";flex:none;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--rule);font:8px var(--mono);color:var(--gold)}
  .nstartrow{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
  .nstartrow .go{margin:0}.nstartrow .nsel{flex:1}
  .nteams{padding:18px;border:1px solid #3b4f70;border-radius:6px;background:linear-gradient(145deg,rgba(64,84,119,.13),rgba(12,17,28,.65))}
  .nteams h3{font:21px var(--serif);font-weight:400;margin:0 0 8px}.nteams p{color:var(--dim);font-size:11.5px;line-height:1.6;margin:7px 0}
  .teamcatalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:6px;margin-top:12px;max-height:340px;overflow-y:auto;padding-right:4px}
  .teamcombo{display:flex;align-items:center;gap:7px;padding:8px 9px;border:1px solid var(--rule);border-radius:4px;background:rgba(255,255,255,.02)}
  .teamcombo i{width:7px;height:28px;border-radius:4px;background:linear-gradient(var(--a),var(--b));box-shadow:0 0 7px var(--a);flex:none}
  .teamcombo span{min-width:0;font:7px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);line-height:1.35}
  .teamcombo b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px var(--serif);font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
  .nphase{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.nphase span{padding:6px 8px;border:1px solid var(--rule);border-radius:3px;
    font:7.5px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
  .nphase span.done{color:#6fd08a;border-color:#315e3f}.nphase span.current{color:var(--gold);border-color:var(--gold-dim)}
  .t2roles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
  .t2connect{margin-top:14px;padding:14px;border:1px solid var(--rule);border-radius:5px;background:rgba(3,6,12,.38)}
  /* An honest "still working on it" indicator — there's no real percentage
     to report (Trystero's peer discovery gives no progress events at all),
     so this sweeps rather than fakes a number, and the elapsed-time text
     from startConnectingTicker carries the actual concrete feedback. */
  .connect-spinner{width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:12px}
  .connect-spinner-bar{width:30%;height:100%;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:connectSweep 1.4s ease-in-out infinite}
  @keyframes connectSweep{0%{transform:translateX(-120%)}100%{transform:translateX(430%)}}
  .t2line{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:12px}
  .t2status{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .t2seatstat{padding:8px 6px;text-align:center;border:1px solid var(--rule);border-radius:4px;color:var(--dim);font:7px var(--mono);letter-spacing:.1em;text-transform:uppercase}
  .t2seatstat b{display:block;color:var(--ink);font:12px var(--serif);font-weight:400;letter-spacing:0;text-transform:none;margin-bottom:3px}
  .t2seatstat.ok{border-color:#315e3f;color:#6fd08a;background:rgba(75,160,100,.08)}
  .t2seatstat.me{border-color:var(--gold-dim);color:var(--gold)}
  #t2start{display:block;margin:14px auto 0}
  @media(max-width:680px){#netui{padding:22px 16px}.nmodes,.nrolecards,.t2roles{grid-template-columns:1fr}.nstartrow{align-items:stretch;flex-direction:column}}

  /* A network room is a persistent social session, not a page. This dock stays
     available while the player browses menus or works in the deck builder. */
  .session-dock{position:fixed;left:50%;bottom:16px;z-index:120;transform:translateX(-50%);display:none;
    width:min(680px,calc(100vw - 28px));grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;
    padding:10px 12px;border:1px solid #40506a;border-radius:7px;background:rgba(8,13,22,.96);box-shadow:0 14px 48px rgba(0,0,0,.7),0 0 24px rgba(83,187,118,.09);backdrop-filter:blur(12px)}
  .session-dock.on{display:grid}.session-dot{width:9px;height:9px;border-radius:50%;background:#6fd08a;box-shadow:0 0 12px #55bd75}
  .session-copy{min-width:0}.session-copy b{display:block;color:var(--ink);font:13px var(--serif);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .session-copy span{display:block;color:#7d899e;font:7.5px var(--mono);letter-spacing:.11em;text-transform:uppercase;margin-top:2px}
  .session-dock .btn{margin:0;padding:8px 10px}.session-dock .danger{border-color:#653a40;color:#d99a9a}
  .lobby-settings{position:fixed;inset:0;z-index:160;display:none;place-items:center;padding:18px;background:rgba(1,4,9,.8);backdrop-filter:blur(8px)}
  .lobby-settings.on{display:grid}.lobby-panel{width:min(620px,100%);max-height:min(720px,calc(100vh - 36px));overflow:auto;padding:22px;border:1px solid #42516b;border-radius:8px;
    background:linear-gradient(160deg,#151d2c,#090e17 72%);box-shadow:0 28px 90px #000}
  .lobby-panel-head{display:flex;align-items:flex-start;gap:15px;margin-bottom:18px}.lobby-panel-head>div{flex:1}.lobby-panel-head span{color:var(--gold);font:7.5px var(--mono);letter-spacing:.17em;text-transform:uppercase}
  .lobby-panel h3{font:25px var(--serif);font-weight:400;margin:4px 0}.lobby-panel p{color:var(--dim);font-size:11px;line-height:1.5;margin:0}
  .lobby-roster{display:grid;gap:7px}.lobby-member{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--rule);border-radius:5px;background:rgba(255,255,255,.025)}
  .lobby-member b{display:block;color:var(--ink);font:14px var(--serif);font-weight:400}.lobby-member span{display:block;color:#78849a;font:7.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-top:3px}
  .lobby-member .btn{margin:0}.lobby-actions{display:flex;justify-content:space-between;gap:8px;margin-top:18px;padding-top:15px;border-top:1px solid var(--rule)}
  @media(max-width:600px){.session-dock{grid-template-columns:auto minmax(0,1fr) auto}.session-dock #sessionReturn{display:none}.session-copy b{font-size:11px}.lobby-actions{flex-direction:column-reverse}.lobby-actions .btn{width:100%}}

  /* ---------- deck builder ---------- */
  #builder{display:none;height:100vh;overflow:hidden;
    background:radial-gradient(ellipse 80% 55% at 32% 0%,color-mix(in srgb,var(--fac) 12%,#111827),#080b12 64%,#040609);color:var(--ink)}
  #builder.on{display:flex;flex-direction:column}
  .bhead{display:flex;align-items:center;gap:18px;padding:15px 22px;border-bottom:1px solid #2a3448;flex:none;
    background:linear-gradient(90deg,color-mix(in srgb,var(--fac) 8%,#121825),#090d15);box-shadow:0 8px 30px rgba(0,0,0,.25)}
  .bbrand{display:flex;align-items:center;gap:13px;min-width:270px}.bmark{width:38px;height:38px;display:grid;place-items:center;transform:rotate(45deg);
    border:1px solid color-mix(in srgb,var(--fac) 60%,#344158);color:var(--fac);font:8px var(--mono);background:#080c13}.bmark span{transform:rotate(-45deg)}
  .bhead h2{font-family:var(--serif);font-size:25px;font-weight:400;margin:0;line-height:1.1;color:#eee8dc}
  .bhead .bar{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--fac)}
  .bname-row{display:flex;align-items:center;gap:10px}
  #bfacSwitch{background:rgba(255,255,255,.04);color:var(--dim);border:1px solid var(--rule);border-radius:4px;
    padding:3px 6px;font:8px var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
  #bfacSwitch:hover{color:var(--fac);border-color:var(--fac)}
  .bhead-actions{margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
  .btn.ai{border-color:color-mix(in srgb,var(--fac) 62%,var(--gold));color:#f0e5c9;
    background:linear-gradient(135deg,color-mix(in srgb,var(--fac) 16%,#192033),#17130b);box-shadow:0 0 22px color-mix(in srgb,var(--fac) 10%,transparent)}
  .btn.ai:hover{border-color:var(--fac);box-shadow:0 0 28px color-mix(in srgb,var(--fac) 20%,transparent)}
  .btn{padding:9px 15px;border-radius:3px;cursor:pointer;font-family:var(--mono);font-size:9px;
    letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--rule);
    background:rgba(255,255,255,.03);color:var(--dim);transition:all .14s}
  .btn:hover{color:var(--ink);border-color:var(--gold-dim)}
  .btn.pri{border-color:var(--gold);color:var(--gold);background:linear-gradient(180deg,#332812,#1d160a)}
  .btn.pri:hover{box-shadow:0 0 24px rgba(220,179,92,.3)}
  .btn:disabled{opacity:.3;cursor:default;box-shadow:none}
  #menu .btn:hover,#builder .btn:hover{border-color:var(--menu-accent-dim)}
  #menu .btn.pri,#builder .btn.pri{border-color:var(--menu-accent);color:var(--menu-accent);
    background:linear-gradient(180deg,color-mix(in srgb,var(--menu-accent) 22%,#1a1408),color-mix(in srgb,var(--menu-accent) 10%,#0d0a04))}
  #menu .btn.pri:hover,#builder .btn.pri:hover{box-shadow:0 0 24px color-mix(in srgb,var(--menu-accent) 30%,transparent)}
  .bbody{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:0;overflow:hidden}
  .browse{min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .builder-brief{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:17px 20px 14px;border-bottom:1px solid #273146;background:rgba(5,8,14,.38)}
  .builder-brief span{display:block;margin-bottom:4px;color:var(--fac);font:7px var(--mono);letter-spacing:.2em;text-transform:uppercase}
  .builder-brief strong{font:400 19px var(--serif);color:#eee8dc}.builder-brief p{margin:4px 0 0;color:#8e99ae;font-size:10.5px;line-height:1.5}
  .builder-brief .brief-tip{max-width:270px;padding:9px 11px;border-left:2px solid var(--fac);background:color-mix(in srgb,var(--fac) 6%,transparent);color:#aab4c5;font-size:10px;line-height:1.45}
  .filters{display:grid;grid-template-columns:minmax(250px,1.4fr) repeat(4,minmax(110px,.55fr)) auto;gap:8px;
    padding:11px 18px 13px;border-bottom:1px solid var(--rule);background:rgba(4,6,11,.5);flex:none;align-items:end}
  .filters label{display:flex;flex-direction:column;gap:5px;color:#69748a;font:6.5px var(--mono);letter-spacing:.14em;text-transform:uppercase}
  .filters input,.filters select{min-width:0;padding:9px 10px;border-radius:4px;background:#0c111d;color:var(--ink);
    border:1px solid #303b50;font-family:var(--mono);font-size:9px;letter-spacing:.04em;height:36px}
  .filters input:focus,.filters select:focus{outline:1px solid var(--fac);border-color:var(--fac)}
  .filters input::placeholder{color:#59647d}.filters option{background:#111827}
  .poolmeta{padding:10px 20px 0;color:#78849a;font:7px var(--mono);letter-spacing:.13em;text-transform:uppercase}
  .pool{overflow-y:auto;padding:12px 18px 20px;display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;align-content:start}
  .pool-empty{grid-column:1/-1;padding:70px 20px;text-align:center;color:var(--dim);font-family:var(--serif);font-size:18px}
  .prow{position:relative;display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:4px;cursor:pointer;
    background:linear-gradient(100deg,rgba(31,40,58,.88),rgba(12,17,28,.88));
    border:1px solid var(--rule);border-left:3px solid var(--rar);transition:all .12s}
  .prow:hover{border-color:var(--fac);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.28)}
  .prow.max{opacity:.35;cursor:not-allowed;transform:none}
  .prow.indeck{background:linear-gradient(100deg,color-mix(in srgb,var(--gold) 16%,rgba(31,40,58,.88)),rgba(12,17,28,.88));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent)}
  .prow.indeck .pq{color:var(--gold);font-weight:700}
  .prow.linked-glow,.dr.linked-glow{outline:2px solid var(--gold);box-shadow:0 0 22px 2px color-mix(in srgb,var(--gold) 50%,transparent)}
  .pcond{margin-top:3px;font:7px var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:2px 5px;border-radius:8px;display:inline-block;white-space:normal}
  .pcond.ok{color:#8fe0a8;background:rgba(111,208,138,.12);border:1px solid rgba(111,208,138,.3)}
  .pcond.warn{color:#e0b35c;background:rgba(224,179,92,.1);border:1px solid rgba(224,179,92,.3)}
  .pc{width:22px;height:22px;flex:none;transform:rotate(45deg);background:var(--mana);
    border:1px solid #16324e;border-radius:2px;display:grid;place-items:center}
  .pc span{transform:rotate(-45deg);font-family:var(--mono);font-size:11px;font-weight:700;color:#fff}
  .pn{flex:1;min-width:0;font-family:var(--serif);font-size:13px;line-height:1.15;color:#e6dfd2}
  .ps{font-family:var(--mono);font-size:8px;color:#8590a5;font-variant-numeric:tabular-nums}
  .bonded-face-summary{display:flex;flex-wrap:wrap;gap:3px 5px;margin-top:5px;font:7px var(--mono);letter-spacing:.04em;color:#8e9aae}
  .bonded-face-summary span{display:inline-flex;align-items:center;gap:4px;min-width:0;padding:2px 5px;border:1px solid color-mix(in srgb,var(--face) 32%,#273247);border-radius:8px;background:color-mix(in srgb,var(--face) 7%,transparent);white-space:nowrap}
  .bonded-face-summary i{font-style:normal;color:var(--face);overflow:hidden;text-overflow:ellipsis;max-width:105px}
  .bonded-face-summary b{color:#e8eee9;font-size:8px;font-variant-numeric:tabular-nums}
  .bonded-face-summary.compact{margin-top:3px;gap:2px 4px}.bonded-face-summary.compact span{padding:1px 4px}.bonded-face-summary.compact i{max-width:76px}
  .pq{font-family:var(--mono);font-size:10px;color:var(--gold);font-variant-numeric:tabular-nums;min-width:22px;text-align:right}
  .list{border-left:1px solid #2c374c;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,rgba(14,19,29,.96),rgba(5,8,13,.98))}
  .deck-title{display:flex;align-items:end;justify-content:space-between;padding:15px 16px 11px;border-bottom:1px solid #293348}
  .deck-title span{display:block;color:var(--fac);font:7px var(--mono);letter-spacing:.18em;text-transform:uppercase;margin-bottom:4px}
  .deck-title strong{font:400 21px var(--serif);color:#eee8dc}.deck-title b{color:var(--gold);font:11px var(--mono);font-weight:400}
  .deck-legal{margin:0 16px;padding:6px 10px;border-radius:3px;font:9px var(--mono);letter-spacing:.06em;
    text-transform:uppercase;display:flex;align-items:center;gap:6px}
  .deck-legal.ready{color:#8fe0a8;background:rgba(111,208,138,.09);border:1px solid rgba(111,208,138,.3)}
  .deck-legal.notready{color:#e0b35c;background:rgba(224,179,92,.08);border:1px solid rgba(224,179,92,.28)}
  .deck-legal.broken{color:var(--blood);background:rgba(191,67,64,.1);border:1px solid rgba(191,67,64,.32)}
  .caps{padding:14px 16px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:7px}
  .cap{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-variant-numeric:tabular-nums}
  .cap .bar2{flex:1;height:3px;background:#1b2437;border-radius:2px;overflow:hidden}
  .cap .fill{height:100%;background:var(--cc);transition:width .2s}
  .cap b{color:var(--ink);min-width:38px;text-align:right}
  .cap.full b{color:var(--blood)}
  .deck-coach{margin:10px 12px 2px;padding:12px;border:1px solid color-mix(in srgb,var(--fac) 28%,#2b3549);border-radius:5px;background:color-mix(in srgb,var(--fac) 5%,rgba(5,8,13,.7))}
  .coach-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}.coach-orb{width:9px;height:9px;border-radius:50%;background:var(--fac);box-shadow:0 0 13px var(--fac)}
  .coach-head strong{font:8px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#e4d8b9}.coach-head span{margin-left:auto;color:#6f7a90;font:7px var(--mono);text-transform:uppercase}
  .deck-coach p{margin:0;color:#9aa5b9;font-size:10px;line-height:1.5}.coach-recs{display:flex;flex-direction:column;gap:4px;margin-top:8px}
  .coach-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 0 8px}
  .coach-stat{padding:6px;border:1px solid #273248;border-radius:3px;background:rgba(1,4,9,.36);text-align:center}
  .coach-stat b{display:block;color:var(--fac);font:12px var(--mono)}.coach-stat span{color:#6f7a90;font:6.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}
  .coach-warnings{display:flex;flex-direction:column;gap:3px;margin:6px 0}
  .coach-warning{padding:6px 7px;border-left:2px solid #d28a4a;background:rgba(160,91,39,.1);color:#d9b18a;font-size:8.5px;line-height:1.35}
  .coach-explain{margin-top:7px;padding-top:7px;border-top:1px solid #273248;color:#718097;font-size:8.5px;line-height:1.4}
  .purity{margin:0 0 10px;padding:8px 9px;border:1px solid color-mix(in srgb,var(--fac) 22%,#273248);border-radius:3px;background:rgba(1,4,9,.42)}
  .purity>div:first-child{display:flex;align-items:center;justify-content:space-between;color:#929eb2;font:7px var(--mono);letter-spacing:.13em;text-transform:uppercase}
  .purity b{color:var(--fac);font-size:12px;text-shadow:0 0 12px color-mix(in srgb,var(--fac) 60%,transparent)}
  .purity-track{height:4px;margin:6px 0;background:#151d2b;border-radius:9px;overflow:hidden}.purity-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--fac) 55%,#79879e),var(--fac));box-shadow:0 0 10px var(--fac);transition:width .25s ease}
  .purity small{display:block;color:#66738a;font-size:8px;line-height:1.35}
  .mana-curve{display:flex;align-items:flex-end;gap:4px;height:58px;margin:0 0 10px;padding:6px 6px 0;
    border:1px solid color-mix(in srgb,var(--fac) 22%,#273248);border-radius:3px;background:rgba(1,4,9,.42)}
  .mcbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;cursor:pointer}
  .mcbar i{display:block;width:100%;min-height:2px;border-radius:2px 2px 0 0;
    background:linear-gradient(180deg,var(--fac),color-mix(in srgb,var(--fac) 55%,#79879e));
    box-shadow:0 0 8px color-mix(in srgb,var(--fac) 50%,transparent);transition:height .25s ease}
  .mcbar b{font:7px var(--mono);color:#9aa5b9;margin-top:3px;height:8px}
  .mcbar span{font:6.5px var(--mono);color:#5c667c;letter-spacing:.06em;text-transform:uppercase}
  .mcbar:hover span{color:var(--gold)}
  .mcbar.active span{color:var(--gold);font-weight:600}
  .mcbar.active i{box-shadow:0 0 12px var(--gold),0 0 8px color-mix(in srgb,var(--fac) 50%,transparent)}
  .coach-rec{display:grid;grid-template-columns:1fr auto;gap:8px;padding:7px 8px;text-align:left;cursor:pointer;border:1px solid #2b3549;border-radius:3px;background:#0b1019;color:#aeb8c9}
  .coach-rec:hover{border-color:var(--fac)}.coach-rec strong{font:11px var(--serif);color:#e8e1d5}.coach-rec small{grid-column:1/-1;color:#707c92;font-size:8.5px;line-height:1.35}.coach-rec b{color:var(--fac);font:9px var(--mono)}
  .dl{flex:1;min-height:120px;overflow-y:auto;padding:9px 12px;display:flex;flex-direction:column;gap:3px}
  .dr{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:3px;cursor:pointer;
    border-left:2px solid var(--rar);background:rgba(255,255,255,.02)}
  .dr:hover{background:rgba(191,67,64,.14)}
  .dr.swapping{background:rgba(224,179,92,.14);outline:1px solid rgba(224,179,92,.4)}
  .dr .dn{flex:1;min-width:0;font-family:var(--serif);font-size:12px}
  .dr .dq{font-family:var(--mono);font-size:10px;color:var(--gold)}
  .dr .dswap{border:1px solid var(--rule);background:rgba(255,255,255,.03);color:var(--dim);
    border-radius:3px;font:11px var(--mono);width:19px;height:19px;line-height:1;cursor:pointer;flex:0 0 auto}
  .dr .dswap:hover{color:var(--gold);border-color:var(--gold-dim)}
  .dr .dswap.active{color:#0b0f16;background:var(--gold);border-color:var(--gold)}
  .dfoot{padding:12px 14px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
  .dfoot input{width:100%;padding:8px 10px;background:var(--felt-2);color:var(--ink);
    border:1px solid var(--rule);border-radius:3px;font:inherit;font-size:12px}
  .dfoot input:focus{outline:2px solid var(--gold);outline-offset:1px}
  .frow{display:flex;gap:6px}
  .frow .btn{flex:1;text-align:center}
  .short-code{display:grid;grid-template-columns:1fr auto auto;gap:5px}
  .short-code input{min-width:0;font:8px var(--mono);letter-spacing:.03em}
  .short-code .btn{padding:7px 9px}
  .saved-head{padding:8px 14px 6px;border-top:1px solid #293348;color:#69758b;font:6.5px var(--mono);letter-spacing:.16em;text-transform:uppercase}
  .saved{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 9px;max-height:66px;overflow-y:auto}
  .sv{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:3px;cursor:pointer;font-family:var(--mono);font-size:9px;
    border:1px solid var(--rule);color:var(--dim);background:rgba(255,255,255,.03)}
  .sv:hover{color:var(--gold);border-color:var(--gold-dim)}
  .sv .svname{white-space:nowrap}
  .sv .svfac{color:var(--fac2, var(--fac));border:1px solid color-mix(in srgb,var(--fac) 40%,#2b3549);
    border-radius:2px;padding:1px 4px;font-size:7.5px;text-transform:uppercase;letter-spacing:.05em;margin:0}
  .sv .svcount{color:#69758b;font-size:8px;margin:0}
  .sv b{color:var(--blood);margin-left:2px}
  .sv b.dup{color:var(--dim)}
  .sv b.dup:hover{color:var(--gold)}
  .sv b.del:hover{color:var(--blood)}
  .pfav,.sv .svfav,.dk .dkfav{border:0;background:transparent;color:#566177;cursor:pointer;font-size:14px;line-height:1}
  .pfav.on,.sv .svfav.on,.dk .dkfav.on{color:var(--gold);text-shadow:0 0 10px var(--gold)}
  .pfav{margin-left:4px}.dk .dkfav{margin-left:auto;padding:8px}.favfilter.on{color:var(--gold)!important;border-color:var(--gold-dim)!important}
  @media(max-width:1050px){.bbody{grid-template-columns:1fr 340px}.filters{grid-template-columns:1fr 1fr 1fr}.filters label:first-child{grid-column:1/-1}.builder-brief .brief-tip{display:none}.bhead{align-items:flex-start}.bhead-actions{max-width:520px}}
  @media(max-width:760px){#builder{height:auto;min-height:100vh;overflow:auto}.bhead{position:sticky;top:0;z-index:5;flex-wrap:wrap}.bbrand{min-width:0}.bhead-actions{width:100%;justify-content:flex-start}.bbody{display:flex;flex-direction:column;overflow:visible}.browse{overflow:visible}.pool{max-height:520px}.list{border-left:0;border-top:1px solid #2c374c;min-height:650px}.filters{grid-template-columns:1fr 1fr}.filters label:first-child{grid-column:1/-1}}
  .amb.bloodsnow{background:radial-gradient(ellipse 85% 95% at 50% 10%,rgba(225,247,255,.18),transparent 68%),linear-gradient(180deg,rgba(6,19,31,.34),rgba(91,8,25,.34));box-shadow:inset 0 -70px 90px rgba(128,9,35,.18)}
  .legend-aura-mark[data-aura="bloodsnow"] i:nth-child(odd){width:5px;height:5px;border-radius:50%;background:#effcff;box-shadow:0 0 8px #aeeaff;animation-name:legendAuraFall}
  .legend-aura-mark[data-aura="bloodsnow"] i:nth-child(even){width:5px;height:10px;border-radius:60% 60% 75% 75%;background:#9d1831;box-shadow:0 0 8px #e14665;animation-name:legendAuraFall}
  .hvitva-show{position:fixed;inset:0;z-index:94;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,rgba(240,251,255,.18),transparent 28%),linear-gradient(180deg,rgba(5,15,26,.96),rgba(70,5,20,.84));animation:hvitvaVeil 3.2s ease forwards}
  .hvitva-show .storm{position:absolute;inset:-20%;background:repeating-linear-gradient(112deg,transparent 0 19px,rgba(238,250,255,.22) 20px,transparent 22px 42px);filter:blur(2px);animation:hvitvaStorm .65s linear infinite}
  .hvitva-show .wings{position:absolute;left:50%;top:44%;width:420px;height:280px;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,#05070d 0 20%,transparent 22%),conic-gradient(from 222deg at 50% 70%,transparent,#140713 12%,#79152d 23%,transparent 35%,transparent 65%,#79152d 77%,#140713 88%,transparent);filter:drop-shadow(0 0 30px #a51d3d);animation:hvitvaWings 2.3s cubic-bezier(.2,.8,.2,1) forwards}
  .hvitva-show .bloodline{position:absolute;left:0;right:0;top:57%;height:3px;background:#e43c5c;box-shadow:0 0 16px #ff5474,0 0 60px #9d1831;animation:hvitvaCut 1.6s .55s ease both}
  .hvitva-show .name{position:absolute;left:0;right:0;top:70%;text-align:center;color:#fff;font:32px var(--serif);text-shadow:0 0 24px #c92144;animation:lgname 2.2s .4s ease both}
  .hvitva-show i{position:absolute;top:-20px;width:5px;height:5px;border-radius:50%;background:#effcff;box-shadow:0 0 8px #b9edff;animation:snfall linear infinite}
  .hvitva-show i.blood{width:5px;height:11px;border-radius:60%;background:#a71331;box-shadow:0 0 8px #ee365c}
  @keyframes hvitvaVeil{0%{opacity:0}12%,78%{opacity:1}100%{opacity:0}}
  @keyframes hvitvaStorm{to{transform:translate(-70px,90px)}}
  @keyframes hvitvaWings{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}100%{opacity:.65;transform:translate(-50%,-50%) scale(1)}}
  @keyframes hvitvaCut{from{opacity:0;transform:scaleX(0)}25%{opacity:1}to{opacity:0;transform:scaleX(1)}}

  /* ---- Kripa: every soul he ever stood beside, woven back in ---- */
  .kripa-show{position:fixed;inset:0;z-index:1250;overflow:hidden;pointer-events:none;
      background:radial-gradient(ellipse at 50% 48%,rgba(13,58,102,.2),transparent 32%),linear-gradient(#020409ed,#081b2ef2);
      animation:kripaScene 3.5s both}
  .kripa-show.gone{opacity:0;transition:opacity .6s ease}
  .kripa-threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .kripa-threads path{fill:none;stroke:#6fb8ff;stroke-width:2.5;stroke-linecap:round;
      filter:drop-shadow(0 0 8px #4a96e8);
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
      animation:kripaThread 1.6s cubic-bezier(.2,.7,.3,1) forwards}
  .kripa-soul{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
      background:radial-gradient(circle,#eaf6ff,#5ea6e8 55%,transparent 75%);
      box-shadow:0 0 10px #6fb8ff;opacity:0;
      animation:kripaSoul ease-in forwards}
  .kripa-core{position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px 0 0 -45px;
      border-radius:50%;opacity:0;
      background:radial-gradient(circle,#fff,#6fb8ff 40%,#1b4a80 68%,transparent 78%);
      box-shadow:0 0 40px #4a96e8,0 0 90px #1c5aa0;
      animation:kripaCore 2.2s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:1.1s}
  .kripa-show .name{position:absolute;left:5%;right:5%;bottom:9%;text-align:center;
      color:#eaf6ff;font:34px var(--serif);letter-spacing:.15em;
      text-shadow:0 0 16px #6fb8ff,0 0 38px #14345c;
      opacity:0;animation:kripaName 1s ease forwards;animation-delay:1.5s}
  @keyframes kripaScene{0%{opacity:0}8%{opacity:1}88%{opacity:1}100%{opacity:0}}
  @keyframes kripaThread{to{stroke-dashoffset:0}}
  @keyframes kripaSoul{
    0%  {opacity:0; transform:translate(var(--sx),var(--sy)) scale(1)}
    20% {opacity:1}
    100%{opacity:0; transform:translate(0,0) scale(.2)}}
  @keyframes kripaCore{0%{opacity:0;transform:scale(.2)} 45%{opacity:1;transform:scale(1.15)} 100%{opacity:.9;transform:scale(1)}}
  @keyframes kripaName{to{opacity:1}}

  /* ---- Amaranth: a flower and its mirror, opening together ---- */
  .amaranth-show{position:fixed;inset:0;z-index:1250;overflow:hidden;pointer-events:none;
      background:radial-gradient(ellipse at 50% 85%,rgba(229,159,214,.32),transparent 42%),linear-gradient(#0a0410ed,#1c0d18f2);
      animation:kripaScene 3.6s both}
  .amaranth-show.gone{opacity:0;transition:opacity .6s ease}
  .amaranth-seam{position:absolute;left:50%;top:6%;bottom:6%;width:2px;transform:translateX(-50%) scaleY(0);
      transform-origin:50% 50%;
      background:linear-gradient(180deg,transparent,#e59fd6 25%,#fff 50%,#e59fd6 75%,transparent);
      box-shadow:0 0 20px 3px rgba(229,159,214,.75);opacity:0;
      animation:amarSeam 1.6s ease forwards;animation-delay:.2s}
  .amaranth-vines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .amaranth-vines path{fill:none;stroke:#e59fd6;stroke-width:4;stroke-linecap:round;
      filter:drop-shadow(0 0 8px #a85f95);
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
      animation:blgrow 1.5s cubic-bezier(.2,.7,.3,1) forwards}
  .amaranth-bloom{position:absolute;top:38%;width:130px;height:130px;margin-top:-65px;
      border-radius:50%;opacity:0;
      background:radial-gradient(circle,#fff,#f0b8e2 40%,#a3468a 72%,transparent 82%);
      box-shadow:0 0 40px #d874c0,0 0 90px #6e2a5c;
      animation:amarBloom 1.3s cubic-bezier(.2,1.4,.35,1) forwards;animation-delay:1s}
  .amaranth-bloom.l{left:calc(50% - 150px)}
  .amaranth-bloom.r{left:calc(50% + 20px)}
  .amaranth-show .name{position:absolute;left:5%;right:5%;bottom:9%;text-align:center;
      color:#fbe4f5;font:34px var(--serif);letter-spacing:.15em;
      text-shadow:0 0 16px #d874c0,0 0 38px #6e2a5c;
      opacity:0;animation:kripaName 1s ease forwards;animation-delay:1.6s}
  @keyframes amarSeam{0%{opacity:0;transform:translateX(-50%) scaleY(0)}
      100%{opacity:.9;transform:translateX(-50%) scaleY(1)}}
  @keyframes amarBloom{0%{opacity:0;transform:scale(0) rotate(-30deg)}
      100%{opacity:.95;transform:scale(1) rotate(0)}}

  /* ---- The First Hantise: a fallen court gathering, or the paradise beyond ---- */
  .hantise-show{position:fixed;inset:0;z-index:1250;overflow:hidden;pointer-events:none;
      background:radial-gradient(ellipse at 50% 82%,rgba(111,191,115,.3),transparent 42%),linear-gradient(#04100aed,#0a1c12f2);
      animation:kripaScene 3.6s both}
  .hantise-show.gone{opacity:0;transition:opacity .6s ease}
  .hantise-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .hantise-ring path{fill:none;stroke:#7fe0a0;stroke-width:4;stroke-linecap:round;
      filter:drop-shadow(0 0 8px #3d8f5a);
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
      animation:blgrow 1.6s cubic-bezier(.2,.7,.3,1) forwards}
  .hantise-ghost{position:absolute;left:50%;top:56%;color:#bff0cf;font-size:26px;line-height:1;
      text-shadow:0 0 14px #4fbf78;opacity:0;
      transform:translate(calc(-50% + var(--gx)),calc(-50% + var(--gy))) scale(.4);
      animation:hantiseGhost 1.3s cubic-bezier(.2,1.2,.35,1) forwards}
  .hantise-table{position:absolute;left:50%;top:56%;width:280px;height:170px;margin:-85px 0 0 -140px;
      border-radius:50%;border:2px solid rgba(127,224,160,.5);opacity:0;
      box-shadow:inset 0 0 40px rgba(127,224,160,.25),0 0 30px rgba(127,224,160,.3);
      animation:hantiseTable 1.4s ease forwards;animation-delay:.3s}
  .hantise-portal-ring{position:absolute;left:50%;top:50%;width:20px;height:20px;
      transform:translate(-50%,-50%);border-radius:50%;border:3px solid #6fbf73;
      box-shadow:0 0 30px 8px rgba(111,191,115,.65);opacity:0;
      animation:hantisePortal 1.6s cubic-bezier(.2,.8,.3,1) forwards}
  .hantise-portal-ring.two{border-color:#bff0c8;animation-delay:.2s;animation-duration:1.9s}
  .hantise-portal-core{position:absolute;left:50%;top:50%;width:14px;height:14px;
      transform:translate(-50%,-50%);border-radius:50%;background:#eafff0;
      box-shadow:0 0 30px 10px rgba(200,255,210,.9);opacity:0;
      animation:portalCore 2.1s ease forwards;animation-delay:.4s}
  .hantise-portal-petal{position:absolute;left:50%;top:50%;width:16px;height:24px;
      margin-left:-8px;margin-top:-12px;border-radius:70% 70% 40% 40%;
      background:linear-gradient(180deg,#bdf0c4,#5a9f5f);
      transform-origin:50% 100%;opacity:0;
      animation:hantisePetal 2s cubic-bezier(.2,.7,.3,1) forwards}
  .hantise-show .name{position:absolute;left:5%;right:5%;bottom:9%;text-align:center;
      color:#e2fbe8;font:34px var(--serif);letter-spacing:.15em;
      text-shadow:0 0 16px #4fbf78,0 0 38px #1c5a38;
      opacity:0;animation:kripaName 1s ease forwards;animation-delay:1.6s}
  @keyframes hantiseGhost{0%{opacity:0;transform:translate(calc(-50% + var(--gx)),calc(-50% + var(--gy))) scale(.2)}
      100%{opacity:.85;transform:translate(calc(-50% + var(--gx)),calc(-50% + var(--gy))) scale(1)}}
  @keyframes hantiseTable{0%{opacity:0;transform:scale(.6)} 100%{opacity:1;transform:scale(1)}}
  @keyframes hantisePortal{0%{width:20px;height:20px;opacity:0} 30%{opacity:.95} 100%{width:420px;height:420px;opacity:.4}}
  @keyframes hantisePetal{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.3)}
      20%{opacity:.95}
      100%{opacity:0;transform:rotate(var(--a)) translateY(-260px) scale(1.2)}}

  /* ---- Y'akol: the ground splits, and something climbs out of the cracks ---- */
  .yakol-show{position:fixed;inset:0;z-index:1250;overflow:hidden;pointer-events:none;
      background:radial-gradient(ellipse at 50% 30%,rgba(90,44,13,.33),transparent 45%),linear-gradient(180deg,#180d05f0,#0a0603f5);
      animation:kripaScene 3.6s both}
  .yakol-show.gone{opacity:0;transition:opacity .65s ease}
  .yakol-sun{position:absolute;left:50%;top:16%;width:220px;height:220px;margin-left:-110px;
      border-radius:50%;background:radial-gradient(circle,#fff2c8,#e0782a 45%,#9c3b12 72%,transparent 80%);
      box-shadow:0 0 90px 20px rgba(224,120,40,.55);
      opacity:0;animation:yakolSun 2s ease forwards}
  .yakol-cracks{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .yakol-cracks path{fill:none;stroke:#ffb35c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
      filter:drop-shadow(0 0 10px #e0782a);
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
      animation:yakolCrack .9s cubic-bezier(.3,.6,.2,1) forwards}
  .yakol-dust{position:absolute;left:-6%;width:5px;height:2px;border-radius:2px;
      background:linear-gradient(90deg,transparent,#e0b878,transparent);
      opacity:0;animation:yakolDust var(--dur) linear forwards}
  .yakol-figure{position:absolute;left:50%;bottom:8%;width:150px;height:260px;transform:translateX(-50%);
      background:linear-gradient(180deg,#050302,#241206 55%,#050302);
      clip-path:polygon(46% 0,58% 4%,66% 14%,60% 22%,72% 20%,80% 34%,68% 40%,74% 100%,50% 68%,26% 100%,32% 40%,20% 34%,28% 20%,40% 22%,34% 14%,42% 4%);
      filter:drop-shadow(0 0 16px #e0782a) drop-shadow(0 0 44px #6b2a0d);
      opacity:0;animation:yakolFigure 1.5s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:.5s}
  .yakol-show .name{position:absolute;left:5%;right:5%;bottom:9%;text-align:center;
      color:#ffe8c8;font:34px var(--serif);letter-spacing:.15em;
      text-shadow:0 0 16px #e0782a,0 0 38px #6b2a0d;
      opacity:0;animation:kripaName 1s ease forwards;animation-delay:1.4s}
  @keyframes yakolSun{0%{opacity:0;transform:scale(.6)} 55%{opacity:1;transform:scale(1.05)} 100%{opacity:.9;transform:scale(1)}}
  @keyframes yakolCrack{to{stroke-dashoffset:0}}
  @keyframes yakolDust{
    0%  {opacity:0; transform:translateX(0)}
    12% {opacity:.85}
    100%{opacity:0; transform:translateX(112vw)}}
  @keyframes yakolFigure{0%{opacity:0;transform:translateX(-50%) translateY(40px)} 100%{opacity:1;transform:translateX(-50%) translateY(0)}}

  /* ---- Vaesra: the curriculum, refined ---- */
  .vaesra-show{position:fixed;inset:0;z-index:1250;overflow:hidden;pointer-events:none;
      background:radial-gradient(ellipse at 50% 50%,rgba(60,20,90,.28),transparent 34%),linear-gradient(#050308ed,#12081af2);
      animation:kripaScene 3.5s both}
  .vaesra-show.gone{opacity:0;transition:opacity .6s ease}
  .vaesra-circle{position:absolute;left:50%;top:50%;width:640px;height:640px;transform:translate(-50%,-50%);overflow:visible}
  .vaesra-circle path{fill:none;stroke:#b878e8;stroke-width:3;
      filter:drop-shadow(0 0 8px #9a3adc);
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
      animation:vaesraDraw 1.3s cubic-bezier(.2,.7,.3,1) forwards}
  .vaesra-core{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px 0 0 -35px;
      border-radius:50%;opacity:0;
      background:radial-gradient(circle,#fff,#c896f0 40%,#5a1f8a 70%,transparent 80%);
      box-shadow:0 0 40px #9a3adc,0 0 90px #5a1f8a;
      animation:vaesraCore 1.6s ease forwards;animation-delay:.9s}
  .vaesra-shock{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;
      border-radius:50%;border:3px solid #c896f0;opacity:0;
      box-shadow:0 0 40px #9a3adc;
      animation:vaesraShock 1.1s cubic-bezier(.1,.7,.3,1) forwards;animation-delay:1.45s}
  .vaesra-show .name{position:absolute;left:5%;right:5%;bottom:9%;text-align:center;
      color:#f3e6ff;font:34px var(--serif);letter-spacing:.15em;
      text-shadow:0 0 16px #9a3adc,0 0 38px #37124f;
      opacity:0;animation:kripaName 1s ease forwards;animation-delay:1.1s}
  @keyframes vaesraDraw{to{stroke-dashoffset:0}}
  @keyframes vaesraCore{0%{opacity:0;transform:scale(.2)} 60%{opacity:1;transform:scale(1.2)} 100%{opacity:.9;transform:scale(1)}}
  @keyframes vaesraShock{0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(18)}}

  /* ---- Ne'var: the place every source discovers it was pointing toward ---- */
  .nevar-show{position:fixed;inset:0;z-index:1250;overflow:hidden;pointer-events:none;
      background:radial-gradient(ellipse at 50% 48%,rgba(90,31,138,.24),transparent 32%),linear-gradient(#04030aed,#140a1ef2);
      animation:kripaScene 3.5s both}
  .nevar-show.gone{opacity:0;transition:opacity .6s ease}
  .nevar-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .nevar-lines path{fill:none;stroke:#b878e8;stroke-width:2;stroke-linecap:round;
      filter:drop-shadow(0 0 7px #9a3adc);
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
      animation:kripaThread 1.7s cubic-bezier(.2,.7,.3,1) forwards}
  .nevar-eye{position:absolute;left:50%;top:50%;width:150px;height:80px;margin:-40px 0 0 -75px;
      border-radius:50%;opacity:0;
      background:radial-gradient(ellipse,#f3e6ff,#9a3adc 55%,#2c0f42 78%,transparent 85%);
      box-shadow:0 0 40px #9a3adc,0 0 90px #5a1f8a;
      animation:kripaCore 2.2s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:1.05s}
  .nevar-iris{position:absolute;left:50%;top:50%;width:22px;height:66px;margin:-33px 0 0 -11px;
      border-radius:50%;background:#0a0410;opacity:0;
      animation:nevarIris 1.4s ease forwards;animation-delay:1.3s}
  .nevar-show .name{position:absolute;left:5%;right:5%;bottom:9%;text-align:center;
      color:#f3e6ff;font:34px var(--serif);letter-spacing:.15em;
      text-shadow:0 0 16px #9a3adc,0 0 38px #2c0f42;
      opacity:0;animation:kripaName 1s ease forwards;animation-delay:1.5s}
  @keyframes nevarIris{0%{opacity:0;transform:scaleY(0)} 100%{opacity:.9;transform:scaleY(1)}}

  /* ---- Nhalyra: the corrupted roots kneel ---- */
  .nhalyra-show{position:fixed;inset:0;z-index:1250;overflow:hidden;pointer-events:none;
      background:radial-gradient(ellipse at 50% 82%,rgba(90,10,40,.32),transparent 40%),linear-gradient(#050208ed,#12060cf2);
      animation:kripaScene 3.6s both}
  .nhalyra-show.gone{opacity:0;transition:opacity .65s ease}
  .nhalyra-roots{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .nhalyra-roots path{fill:none;stroke:#5a1030;stroke-width:5;stroke-linecap:round;
      filter:drop-shadow(0 0 9px #8a1c46);
      stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
      animation:nhalyraGrow 1.5s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes nhalyraGrow{to{stroke-dashoffset:0}}
  .nhalyra-throne{position:absolute;left:50%;bottom:8%;width:170px;height:190px;transform:translateX(-50%);
      background:linear-gradient(180deg,#1a0510,#3a0d20 55%,#0a0308);
      clip-path:polygon(20% 100%,20% 40%,10% 30%,10% 10%,30% 10%,30% 22%,70% 22%,70% 10%,90% 10%,90% 30%,80% 40%,80% 100%);
      filter:drop-shadow(0 0 20px #8a1c46) drop-shadow(0 0 48px #3a0d20);
      opacity:0;animation:nhalyraThrone 1.6s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:.6s}
  @keyframes nhalyraThrone{0%{opacity:0;transform:translateX(-50%) translateY(50px)} 100%{opacity:1;transform:translateX(-50%) translateY(0)}}
  .nhalyra-crown{position:absolute;left:50%;bottom:34%;width:140px;height:140px;margin-left:-70px;
      border-radius:50%;opacity:0;filter:blur(20px);
      background:radial-gradient(circle,#d0407a,transparent 70%);
      animation:nhalyraCrown 2s ease forwards;animation-delay:1.7s}
  @keyframes nhalyraCrown{0%{opacity:0;transform:scale(.5)} 50%{opacity:.85;transform:scale(1.2)} 100%{opacity:.4;transform:scale(1.4)}}
  .nhalyra-show .name{position:absolute;left:5%;right:5%;bottom:9%;text-align:center;
      color:#f3d6e4;font:34px var(--serif);letter-spacing:.15em;
      text-shadow:0 0 16px #8a1c46,0 0 38px #2a0714;
      opacity:0;animation:kripaName 1s ease forwards;animation-delay:1.3s}

  /* ---- Karii: the archive, in blue ---- */
  .karii-show{position:fixed;inset:0;z-index:1250;overflow:hidden;pointer-events:none;
      display:grid;place-items:center;
      background:radial-gradient(ellipse 60% 50% at 50% 42%,rgba(80,150,240,.35),transparent 70%),linear-gradient(180deg,rgba(10,20,40,.9),rgba(4,8,18,.96));
      animation:kripaScene 3.5s both}
  .karii-show.gone{opacity:0;transition:opacity .6s ease}
  .krbook{position:relative;width:340px;height:230px;transform-style:preserve-3d;
      animation:krOpen 2.6s cubic-bezier(.2,.8,.3,1) forwards}
  @keyframes krOpen{
    0%  {opacity:0; transform:rotateX(72deg) scale(.55)}
    22% {opacity:1; transform:rotateX(24deg) scale(1)}
    76% {opacity:1; transform:rotateX(20deg) scale(1)}
    100%{opacity:0; transform:rotateX(16deg) scale(1.06)}}
  .krleaf{position:absolute;top:0;width:50%;height:100%;
      background:linear-gradient(160deg,#dceeff,#9cc4f0 55%,#5a90d0);
      box-shadow:inset 0 0 40px rgba(40,90,180,.35), 0 20px 50px rgba(5,10,30,.7)}
  .krleaf.l{left:0;  border-radius:5px 0 0 5px;transform:rotateY(9deg);transform-origin:100% 50%}
  .krleaf.r{right:0; border-radius:0 5px 5px 0;transform:rotateY(-9deg);transform-origin:0% 50%}
  .krspine{position:absolute;left:50%;top:-3px;bottom:-3px;width:8px;margin-left:-4px;
      background:linear-gradient(90deg,#1c3a6a,#4a86cf,#1c3a6a);border-radius:2px;
      box-shadow:0 0 22px rgba(90,160,240,.8)}
  .krpage{position:absolute;left:50%;top:0;width:50%;height:100%;
      transform-origin:0% 50%;z-index:var(--z);
      background:linear-gradient(160deg,#eaf4ff,#bcdcff 60%,#8fc0ec);
      border-radius:0 5px 5px 0;
      box-shadow:0 8px 26px rgba(10,30,70,.5);
      animation:krFlip 1.15s cubic-bezier(.4,.05,.35,1) forwards;
      backface-visibility:hidden}
  @keyframes krFlip{0%{transform:rotateY(0deg)} 100%{transform:rotateY(-172deg)}}
  .krpage span{position:absolute;left:12%;height:2px;border-radius:1px;background:rgba(30,70,140,.4)}
  .krrune{position:absolute;top:100%;color:#9cd0ff;font-size:16px;line-height:1;opacity:0;
      text-shadow:0 0 10px #5aa8f0;
      animation:krRuneUp 2s ease-out forwards}
  @keyframes krRuneUp{0%{opacity:0;transform:translateY(0)} 20%{opacity:1} 100%{opacity:0;transform:translateY(-260px)}}
  .karii-show .name{position:absolute;left:5%;right:5%;bottom:9%;text-align:center;
      color:#eaf4ff;font:34px var(--serif);letter-spacing:.15em;
      text-shadow:0 0 16px #5aa8f0,0 0 38px #142c52;
      opacity:0;animation:kripaName 1s ease forwards;animation-delay:1.5s}

  /* ---- Kalliopus: the Golden Wing ---- */
  .kalliopus-show{position:fixed;inset:0;z-index:1250;overflow:hidden;pointer-events:none;
      background:radial-gradient(ellipse at 50% 46%,rgba(240,201,74,.3),transparent 40%),linear-gradient(180deg,rgba(20,14,4,.92),rgba(6,4,2,.97));
      animation:kripaScene 3.5s both}
  .kalliopus-show.gone{opacity:0;transition:opacity .6s ease}
  .kalwing{position:absolute;left:50%;top:48%;width:280px;height:340px;
      background:linear-gradient(135deg,#fff6d0,#f0c94a 45%,#a8720f 82%);
      clip-path:polygon(0% 100%,10% 70%,6% 45%,20% 40%,18% 20%,34% 24%,34% 6%,50% 16%,58% 4%,64% 20%,80% 12%,78% 32%,94% 30%,86% 52%,100% 58%,74% 78%,60% 100%);
      filter:drop-shadow(0 0 20px #f0c94a) drop-shadow(0 0 46px #a8720f);
      opacity:0}
  .kalwing.l{margin:-306px 0 0 -280px;transform-origin:100% 90%;animation:kalWingL 1.6s cubic-bezier(.2,.8,.2,1) forwards}
  .kalwing.r{margin:-306px 0 0 0;transform-origin:0% 90%;animation:kalWingR 1.6s cubic-bezier(.2,.8,.2,1) forwards}
  @keyframes kalWingL{0%{opacity:0;transform:rotate(50deg) scale(.3)} 100%{opacity:1;transform:rotate(0deg) scale(1)}}
  @keyframes kalWingR{0%{opacity:0;transform:scaleX(-1) rotate(50deg) scale(.3)} 100%{opacity:1;transform:scaleX(-1) rotate(0deg) scale(1)}}
  .kalcore{position:absolute;left:50%;top:48%;width:70px;height:70px;margin:-35px 0 0 -35px;
      border-radius:50%;opacity:0;
      background:radial-gradient(circle,#fff,#f0c94a 45%,#a8720f 75%,transparent 85%);
      box-shadow:0 0 40px #f0c94a,0 0 90px #a8720f;
      animation:kripaCore 2s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:.7s}
  .kalfeather{position:absolute;left:50%;top:48%;width:8px;height:16px;border-radius:60% 10% 60% 10%;
      background:linear-gradient(180deg,#fff6d0,#f0c94a);opacity:0;
      box-shadow:0 0 8px #f0c94a;
      animation:kalFeather 1.6s ease-out forwards}
  @keyframes kalFeather{
    0%  {opacity:0; transform:translate(0,0) scale(.5) rotate(0deg)}
    25% {opacity:1}
    100%{opacity:0; transform:translate(var(--fx),var(--fy)) scale(1) rotate(90deg)}}
  .kalliopus-show .name{position:absolute;left:5%;right:5%;bottom:9%;text-align:center;
      color:#fff3d6;font:34px var(--serif);letter-spacing:.15em;
      text-shadow:0 0 16px #f0c94a,0 0 38px #5a3d0a;
      opacity:0;animation:kripaName 1s ease forwards;animation-delay:1.1s}

  /* ---- Sin of Sigils: the golden runes bind ---- */
  .sinsigils-show{position:fixed;inset:0;z-index:1250;overflow:hidden;pointer-events:none;
      background:radial-gradient(ellipse at 50% 50%,rgba(255,210,80,.28),transparent 38%),linear-gradient(180deg,rgba(20,14,4,.92),rgba(6,4,2,.97));
      animation:kripaScene 3.4s both}
  .sinsigils-show.gone{opacity:0;transition:opacity .6s ease}
  .ssring{position:absolute;left:50%;top:50%;width:440px;height:440px;margin:-220px 0 0 -220px;
      border-radius:50%;border:2px solid #f0c94a;opacity:0;
      box-shadow:0 0 30px #f0c94a, inset 0 0 30px #f0c94a;
      animation:ssRing 2.2s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:.2s}
  @keyframes ssRing{0%{opacity:0;transform:scale(.4) rotate(0deg)} 50%{opacity:.9} 100%{opacity:.5;transform:scale(1) rotate(90deg)}}
  .ssrune{position:absolute;left:50%;top:50%;font-size:30px;line-height:1;color:#ffe6a0;
      text-shadow:0 0 12px #f0c94a,0 0 26px #a8720f;
      transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(0);opacity:0;
      animation:ssRuneIn .7s cubic-bezier(.2,1.4,.4,1) forwards}
  @keyframes ssRuneIn{to{opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1)}}
  .sscore{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
      border-radius:50%;opacity:0;
      background:radial-gradient(circle,#fff,#f0c94a 45%,#8a5a0a 75%,transparent 85%);
      box-shadow:0 0 40px #f0c94a,0 0 90px #8a5a0a;
      animation:kripaCore 1.8s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:.9s}
  .sinsigils-show .name{position:absolute;left:5%;right:5%;bottom:9%;text-align:center;
      color:#fff3d6;font:34px var(--serif);letter-spacing:.15em;
      text-shadow:0 0 16px #f0c94a,0 0 38px #5a3d0a;
      opacity:0;animation:kripaName 1s ease forwards;animation-delay:1.1s}

  /* ---- The Perch: the mountaintop fortress ---- */
  .perch-show{position:fixed;inset:0;z-index:1250;overflow:hidden;pointer-events:none;
      background:linear-gradient(180deg,#0c1520,#1c2c40 55%,#0a1018);
      animation:kripaScene 3.5s both}
  .perch-show.gone{opacity:0;transition:opacity .6s ease}
  .prmountain{position:absolute;left:50%;bottom:0;width:640px;height:320px;margin-left:-320px;
      background:linear-gradient(180deg,#2a3a50,#0e161f);
      clip-path:polygon(50% 0,72% 34%,64% 32%,86% 62%,74% 60%,100% 100%,0% 100%,26% 60%,14% 62%,36% 32%,28% 34%);
      filter:drop-shadow(0 0 30px rgba(120,170,220,.3));
      opacity:0;animation:prRise 1.8s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes prRise{0%{opacity:0;transform:translateY(60px)} 100%{opacity:1;transform:translateY(0)}}
  .prtower{position:absolute;left:50%;bottom:52%;width:46px;height:120px;margin-left:-23px;
      background:linear-gradient(180deg,#3a4d68,#141d28);
      clip-path:polygon(20% 100%,20% 30%,0% 30%,50% 0%,100% 30%,80% 30%,80% 100%);
      filter:drop-shadow(0 0 16px rgba(140,190,230,.45));
      opacity:0;animation:prRise 1.8s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:.3s}
  .prbird{position:absolute;left:50%;top:30%;width:26px;height:12px;margin-left:-13px;
      opacity:0;color:#dfe8f2;font-size:20px;line-height:1;
      animation:prBird 2.6s ease-in-out forwards;animation-delay:.6s}
  .prbird::before{content:"⌃"}
  .prcloud{position:absolute;left:-10%;width:120px;height:3px;border-radius:2px;
      background:linear-gradient(90deg,transparent,rgba(200,220,240,.55),transparent);
      opacity:0;animation:prCloud var(--dur) linear forwards}
  @keyframes prCloud{0%{opacity:0;transform:translateX(0)} 15%{opacity:.7} 100%{opacity:0;transform:translateX(130vw)}}
  @keyframes prBird{
    0%  {opacity:0; transform:translate(-160px,20px)}
    20% {opacity:1}
    100%{opacity:0; transform:translate(160px,-30px)}}
  .perch-show .name{position:absolute;left:5%;right:5%;bottom:9%;text-align:center;
      color:#dfe8f2;font:34px var(--serif);letter-spacing:.15em;
      text-shadow:0 0 16px #5a90c0,0 0 38px #0a141f;
      opacity:0;animation:kripaName 1s ease forwards;animation-delay:1.2s}

  /* ---- Ecame: white runes, then the void answers ---- */
  .ecame-show{position:fixed;inset:0;z-index:1250;overflow:hidden;pointer-events:none;
      background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.08),transparent 34%),linear-gradient(#000000f0,#050308f5);
      animation:kripaScene 3.6s both}
  .ecame-show.gone{opacity:0;transition:opacity .65s ease}
  .ecrune{position:absolute;left:50%;top:50%;font-size:34px;line-height:1;
      color:#f2f2ff;text-shadow:0 0 14px #fff,0 0 30px #cfd6ff;
      transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(0);
      opacity:0;animation:ecRuneIn .7s cubic-bezier(.2,1.4,.4,1) forwards;
      transition:color .8s ease, text-shadow .8s ease}
  @keyframes ecRuneIn{
    0%  {opacity:0; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(0)}
    100%{opacity:1; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1)}}
  .ecame-show.corrupt .ecrune{color:#c896f0;text-shadow:0 0 16px #9a3adc,0 0 34px #4a1568}
  .eccore{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;
      border-radius:50%;opacity:0;
      background:radial-gradient(circle,#fff,#dfe8ff 55%,transparent 75%);
      box-shadow:0 0 30px #fff,0 0 60px #cfd6ff;
      animation:ecCoreIn .8s ease forwards;animation-delay:.2s;
      transition:background 1s ease, box-shadow 1s ease}
  @keyframes ecCoreIn{0%{opacity:0;transform:scale(.2)} 100%{opacity:1;transform:scale(1)}}
  .ecame-show.corrupt .eccore{
      background:radial-gradient(circle,#fff,#9a3adc 45%,#2c0f42 72%,transparent 80%);
      box-shadow:0 0 40px #9a3adc,0 0 90px #4a1568}
  .ecblast{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px 0 0 -40px;
      border-radius:50%;border:4px solid #c896f0;opacity:0;
      box-shadow:0 0 60px #9a3adc;
      animation:ecBlast 1.3s cubic-bezier(.1,.6,.3,1) forwards;animation-delay:1.75s}
  @keyframes ecBlast{0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(22)}}
  .ecame-show .name{position:absolute;left:5%;right:5%;bottom:9%;text-align:center;
      color:#e8e0ff;font:34px var(--serif);letter-spacing:.15em;
      text-shadow:0 0 16px #9a3adc,0 0 38px #2c0f42;
      opacity:0;animation:kripaName 1s ease forwards;animation-delay:.5s}

#drafthub{overflow:auto}
.draft-shell{--draft-gold:#dcb35c;--draft-ink:#f1ead9;max-width:1380px;margin:18px auto 52px;padding:0 18px;color:var(--draft-ink)}
.draft-frame{position:relative;overflow:hidden;min-height:610px;border:1px solid #6d592f;background:
  radial-gradient(circle at 12% 0,#dcb35c20,transparent 27%),
  radial-gradient(circle at 88% 12%,#6d85ba12,transparent 30%),
  linear-gradient(145deg,#0d0d0d,#050608 72%);
  box-shadow:inset 0 0 80px #000,0 24px 65px #000a}
.draft-frame::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background:
  repeating-linear-gradient(118deg,transparent 0 34px,#dcb35c0c 35px,#dcb35c0c 36px,transparent 37px 76px)}
.draft-frame::after{content:"";position:absolute;inset:12px;pointer-events:none;border:1px solid #dcb35c18}
.draft-head{position:relative;z-index:1;display:flex;justify-content:space-between;gap:20px;align-items:start;padding:25px 28px 20px;border-bottom:1px solid #3a3120;background:linear-gradient(90deg,#17130b,#08090c 60%,#111018)}
.draft-kicker{color:#c9a958;font:850 7px var(--mono);letter-spacing:.25em;text-transform:uppercase}
.draft-head h3{margin:7px 0 0;color:#fff8e6;font:700 31px var(--serif);letter-spacing:.02em}
.draft-head p{max-width:680px;margin:7px 0 0;color:#9e9789;font:11px/1.55 var(--serif)}
.draft-run-score{display:grid;grid-template-columns:repeat(3,minmax(74px,1fr));gap:6px;min-width:280px}
.draft-run-score div{padding:10px;border:1px solid #3d3627;background:#070708;text-align:center}
.draft-run-score b,.draft-run-score span{display:block}.draft-run-score b{color:#f1cc72;font:700 25px var(--serif)}
.draft-run-score span{margin-top:2px;color:#777162;font:800 6px var(--mono);letter-spacing:.13em;text-transform:uppercase}
.draft-content{position:relative;z-index:1;padding:26px 28px 32px}
.draft-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:18px}
.draft-manifesto,.draft-history{padding:24px;border:1px solid #403724;background:#090909}
.draft-manifesto h4,.draft-history h4,.draft-panel-title{margin:0;color:#f4e8c8;font:700 22px var(--serif)}
.draft-manifesto p,.draft-history p{color:#9d9688;font:11px/1.65 var(--serif)}
.draft-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.draft-rules div{padding:13px;border:1px solid #353126;background:#0e0d0a}
.draft-rules b,.draft-rules span{display:block}.draft-rules b{color:#d9ba69;font:800 8px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.draft-rules span{margin-top:5px;color:#898477;font:9px/1.45 var(--serif)}
.draft-primary,.draft-secondary,.draft-danger{min-height:40px;padding:10px 15px;border:1px solid #a5843f;background:linear-gradient(110deg,#332509,#151006);color:#f6d982;font:850 8px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.draft-primary:hover,.draft-primary:focus-visible{outline:none;border-color:#f0cb6e;box-shadow:0 0 20px #dcb35c35}
.draft-secondary{border-color:#4a4f5d;background:#0b0d12;color:#b8bfcb}.draft-secondary:hover{border-color:#a5afc2;color:#eef2f8}
.draft-danger{border-color:#713b36;background:#180a09;color:#d79b90}.draft-danger:hover{border-color:#d26959;color:#ffd1c8}
.draft-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.draft-faction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.draft-faction{position:relative;min-height:260px;padding:20px;border:1px solid color-mix(in srgb,var(--fac) 58%,#393326);background:
  radial-gradient(circle at 100% 0,color-mix(in srgb,var(--fac) 24%,transparent),transparent 44%),#090a0d;color:#dfe4ec;text-align:left;cursor:pointer;overflow:hidden}
.draft-faction::after{content:attr(data-sigil);position:absolute;right:10px;bottom:-19px;color:color-mix(in srgb,var(--fac) 30%,transparent);font:700 92px var(--serif);line-height:1}
.draft-faction:hover,.draft-faction:focus-visible{outline:none;transform:translateY(-3px);border-color:color-mix(in srgb,var(--fac) 72%,#fff);box-shadow:0 12px 34px #000,0 0 24px color-mix(in srgb,var(--fac) 25%,transparent)}
.draft-faction em,.draft-faction strong,.draft-faction small,.draft-faction span{position:relative;z-index:1;display:block}
.draft-faction em{color:color-mix(in srgb,var(--fac) 70%,#fff);font:850 7px var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase}
.draft-faction strong{margin-top:13px;color:#fff;font:700 22px var(--serif)}
.draft-faction span{margin-top:5px;color:#aeb8c8;font:800 7px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.draft-faction small{max-width:90%;margin-top:19px;color:#8f97a4;font:10px/1.55 var(--serif)}
.draft-board{display:grid;grid-template-columns:minmax(0,1fr) 305px;gap:16px}
.draft-pick-stage{min-width:0;padding:18px;border:1px solid #3a3428;background:#08090b}
.draft-pick-meta{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:14px}
.draft-pick-meta b{display:block;color:#f1d585;font:700 19px var(--serif)}
.draft-pick-meta span{display:block;margin-top:4px;color:#79766e;font:800 7px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.draft-pick-progress{width:180px;height:5px;border:1px solid #51452b;background:#080604}.draft-pick-progress i{display:block;height:100%;background:linear-gradient(90deg,#81651f,#f1ce72);box-shadow:0 0 12px #dcb35c;transition:width .25s ease}
.draft-pack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.draft-card{--rar:#78808f;position:relative;min-height:390px;padding:0;border:1px solid var(--rar);border-top:3px solid var(--rar);background:
  linear-gradient(135deg,color-mix(in srgb,var(--fac) 20%,#08090c),#070708 48%,#0b0905);
  color:#ebe7dd;text-align:left;cursor:pointer;overflow:hidden;box-shadow:inset 0 0 35px #000}
.draft-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 28%,#fff0 45%,#fff0 49%,#fff1 50%,transparent 53%);transform:translateX(-100%);transition:transform .55s ease}
.draft-card:hover,.draft-card:focus-visible{outline:none;transform:translateY(-5px);box-shadow:0 14px 34px #000,0 0 24px color-mix(in srgb,var(--rar) 28%,transparent)}
.draft-card:hover::before,.draft-card:focus-visible::before{transform:translateX(100%)}
.draft-card-top{display:flex;justify-content:space-between;align-items:start;padding:13px;border-bottom:1px solid #ffffff14}
.draft-card-cost{display:grid;place-items:center;width:39px;height:39px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:#2c83c5;color:#fff;font:800 16px var(--serif);text-shadow:0 2px 3px #000}
.draft-card-rarity{padding:4px 6px;border:1px solid var(--rar);color:var(--rar);font:850 6px var(--mono);letter-spacing:.13em;text-transform:uppercase}
.draft-card-art{position:relative;height:170px;overflow:hidden;border-bottom:1px solid #ffffff14;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--fac) 35%,#111),#060606)}
.draft-card-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 28%;transition:transform .4s ease}
.draft-card-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 62%,#08090bd9);box-shadow:inset 0 0 0 1px #ffffff10}
.draft-card:hover .draft-card-art img,.draft-card:focus-visible .draft-card-art img{transform:scale(1.05)}
.draft-card-art-pending{display:grid;place-items:center}.draft-card-art-pending span{color:#ffffff55;font:800 7px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.draft-card-copy{padding:14px 15px 64px}.draft-card-copy h5{min-height:0;margin:0;color:#fff8ea;font:700 18px/1.1 var(--serif)}
.draft-card-type{margin-top:7px;color:color-mix(in srgb,var(--fac) 60%,#d6d6d6);font:850 6px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.draft-card-rules{margin-top:18px;padding-top:15px;border-top:1px solid #ffffff12;color:#aaa79f;font:10px/1.55 var(--serif)}
.draft-card-rules b{color:#e7cc83}.draft-card-stats{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:12px 15px;border-top:1px solid #ffffff12;background:#050505cc}
.draft-card-stats b{display:grid;place-items:center;min-width:34px;height:27px;padding:0 8px;border-radius:16px;font:800 13px var(--serif)}
.draft-card-stats .atk{background:#c9a34d;color:#151005}.draft-card-stats .hp{background:#9e3735;color:#fff}
.draft-deck{min-width:0;padding:15px;border:1px solid #453b27;background:#080806}
.draft-deck-head{display:flex;justify-content:space-between;align-items:end;padding-bottom:10px;border-bottom:1px solid #342e21}
.draft-deck-head b{color:#f0dfb5;font:700 17px var(--serif)}.draft-deck-head span{color:#c9a958;font:800 8px var(--mono)}
.draft-curve{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;height:74px;margin:12px 0;align-items:end}
.draft-curve div{position:relative;min-height:4px;background:linear-gradient(#e0bd63,#5f4816);box-shadow:0 0 8px #dcb35c22}
.draft-curve div span{position:absolute;left:0;right:0;bottom:-13px;color:#696458;font:700 6px var(--mono);text-align:center}
.draft-list{max-height:390px;overflow:auto;padding-right:4px}
.draft-list-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:7px;align-items:center;padding:5px 6px;border-bottom:1px solid #ffffff0a;color:#aaa69c;font:8px var(--mono)}
.draft-list-row i{display:grid;place-items:center;width:20px;height:20px;background:#195f91;color:#fff;font-style:normal}.draft-list-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ded8cb;font-weight:700}
.draft-list-row span{color:var(--rar)}
.draft-ready{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px}
.draft-ready-main,.draft-next-opponent{padding:24px;border:1px solid #423927;background:#090909}
.draft-ready-main h4{margin:0;color:#f7ebce;font:700 28px var(--serif)}.draft-ready-main p{color:#999183;font:11px/1.6 var(--serif)}
.draft-record-pips{display:flex;gap:7px;margin:20px 0}.draft-record-pips i{width:30px;height:8px;border:1px solid #4a4437;background:#0b0a08}.draft-record-pips i.win{border-color:#d9b65d;background:#a98224;box-shadow:0 0 10px #dcb35c55}.draft-record-pips i.loss{border-color:#8b4039;background:#5d1714}
.draft-next-opponent{background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--foe) 24%,transparent),transparent 47%),#08090b}
.draft-next-opponent span,.draft-next-opponent b,.draft-next-opponent small{display:block}.draft-next-opponent span{color:color-mix(in srgb,var(--foe) 70%,#fff);font:850 7px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.draft-next-opponent b{margin-top:9px;color:#fff;font:700 22px var(--serif)}.draft-next-opponent small{margin-top:8px;color:#9098a5;font:10px/1.5 var(--serif)}
.draft-finished{text-align:center;padding:55px 24px}.draft-finished .road-seal{position:relative;margin:0 auto 24px}.draft-finished h4{margin:0;color:#f7e8bd;font:700 37px var(--serif)}
.draft-finished p{max-width:620px;margin:13px auto;color:#a59d8d;font:12px/1.6 var(--serif)}
.draft-finished .draft-actions{justify-content:center}
@media(max-width:1050px){.draft-board,.draft-ready{grid-template-columns:1fr}.draft-deck{order:-1}.draft-list{max-height:210px}.draft-card{min-height:340px}.draft-card-art{height:150px}}
@media(max-width:790px){.draft-head,.draft-pick-meta{display:block}.draft-run-score{margin-top:16px;min-width:0}.draft-intro,.draft-faction-grid,.draft-pack,.draft-rules{grid-template-columns:1fr}.draft-card{min-height:300px}.draft-card-art{height:180px}.draft-content,.draft-head{padding:18px}.draft-shell{padding:0 8px}}
@media(prefers-reduced-motion:reduce){.draft-card,.draft-faction,.draft-card::before,.draft-card-art img{transition:none!important}}

:root:not([data-card-art="off"]) .card.fullart{
  overflow:hidden;isolation:isolate;padding:0;background:#07100b;
  box-shadow:0 7px 22px rgba(0,0,0,.78),0 0 0 1px rgba(132,187,102,.26),inset 0 0 34px rgba(9,25,13,.34)}
:root:not([data-card-art="off"]) .card.fullart .cart{
  z-index:0;inset:0;height:auto;border:0;border-radius:7px;
  background-size:cover;background-position:center top;box-shadow:none;
  filter:saturate(1.08) contrast(1.05)}
.black-road-card-art-media{
  position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
:root:not([data-card-art="off"]) .card.fullart .cart::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,7,4,.01) 0 43%,rgba(3,9,5,.18) 49%,rgba(3,8,5,.82) 58%,#030705 100%),
    linear-gradient(90deg,rgba(2,6,3,.38),transparent 28% 72%,rgba(2,6,3,.38))}
.name-art-overlay{
  position:absolute;z-index:1;inset:0;border-radius:inherit;pointer-events:none;
  background-size:cover;background-position:center top;opacity:.16;
  mix-blend-mode:screen;filter:saturate(.82) contrast(1.08);
  -webkit-mask-image:linear-gradient(112deg,transparent 0 5%,#000 19% 77%,transparent 96%);
  mask-image:linear-gradient(112deg,transparent 0 5%,#000 19% 77%,transparent 96%);
  animation:black-road-name-art-turn 3.2s ease-in-out infinite alternate}
.m .name-art-overlay{border-radius:6px}
.en .name-art-overlay{background-position:center 35%}
@keyframes black-road-name-art-turn{
  from{opacity:.1;transform:translateX(-1.5%) scale(1.015)}
  to{opacity:.21;transform:translateX(1.5%) scale(1.035)}}
:root:not([data-card-art="off"]) .card.fullart .cost,
:root:not([data-card-art="off"]) .card.fullart .gem,
:root:not([data-card-art="off"]) .card.fullart .cbmark,
:root:not([data-card-art="off"]) .card.fullart .cname,
:root:not([data-card-art="off"]) .card.fullart .ctype,
:root:not([data-card-art="off"]) .card.fullart .ctext,
:root:not([data-card-art="off"]) .card.fullart .stat{z-index:2}
:root:not([data-card-art="off"]) .card.hasart.fullart .cname{
  position:absolute;left:6px;right:6px;top:100px;margin:0;min-height:25px;padding:3px 4px;
  color:#f3f0df;font-size:11.2px;line-height:1.08;
  background:linear-gradient(90deg,transparent,rgba(2,7,4,.82) 12% 88%,transparent);
  text-shadow:0 2px 3px #000,0 0 10px rgba(180,224,139,.34)}
:root:not([data-card-art="off"]) .card.fullart .ctype{
  position:absolute;z-index:3;left:7px;right:7px;top:126px;margin:0;padding:2px 3px;
  color:#b8df9f;text-shadow:0 1px 3px #000}
:root:not([data-card-art="off"]) .card.hasart.fullart .ctext{
  position:absolute;z-index:3;left:6px;right:6px;top:140px;bottom:6px;margin:0;padding:5px 5px 4px;
  border:1px solid color-mix(in srgb,var(--fac,var(--gold)) 24%,transparent);border-radius:4px;
  background:linear-gradient(180deg,rgba(2,7,4,.76),rgba(2,6,4,.96));
  color:#e0e4dc;font-size:7.3px;line-height:1.17;text-shadow:0 1px 2px #000}
:root:not([data-card-art="off"]) .card.hasart.fullart:has(.stat) .ctext{padding-bottom:15px}
:root:not([data-card-art="off"]) .card.fullart .ctext b{color:#d9bd72}

:root:not([data-card-art="off"]) .m.fullart{
  overflow:hidden;isolation:isolate;background:#07100b}
:root:not([data-card-art="off"]) .m.fullart .mart{
  z-index:0;inset:0;height:auto;border:0;border-radius:6px;
  background-size:cover;background-position:center top;filter:saturate(1.04) contrast(1.04)}
:root:not([data-card-art="off"]) .m.fullart .mart::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,transparent 0 27%,rgba(3,8,5,.42) 50%,rgba(3,8,5,.96) 82%,#030705)}
:root:not([data-card-art="off"]) .m.fullart .mn,
:root:not([data-card-art="off"]) .m.fullart .tr,
:root:not([data-card-art="off"]) .m.fullart .mx,
:root:not([data-card-art="off"]) .m.fullart .kw,
:root:not([data-card-art="off"]) .m.fullart .stat,
:root:not([data-card-art="off"]) .m.fullart .cbmark{z-index:2}
:root:not([data-card-art="off"]) .m.hasart.fullart .mn{
  margin-top:54px;padding:2px 3px;color:#f3f0df;
  background:linear-gradient(90deg,transparent,rgba(2,7,4,.72) 16% 84%,transparent);
  text-shadow:0 1px 3px #000}
:root:not([data-card-art="off"]) .m.fullart .tr{color:#b8df9f;text-shadow:0 1px 3px #000}
:root:not([data-card-art="off"]) .m.hasart.fullart .mx{
  max-height:27px;color:#d4d9ce;text-shadow:0 1px 2px #000}

:root:not([data-card-art="off"]) .en.hasart.fullart{overflow:hidden;isolation:isolate;background:#07100b}
:root:not([data-card-art="off"]) .en.hasart.fullart .wart{
  position:absolute;z-index:0;inset:0;border-radius:inherit;background-size:cover;background-position:center 35%;
  filter:saturate(1.07) contrast(1.06)}
:root:not([data-card-art="off"]) .en.hasart.fullart .wart::after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,5,4,.93),rgba(2,5,4,.58) 55%,rgba(2,5,4,.22))}
:root:not([data-card-art="off"]) .en.hasart.fullart .en-n,
:root:not([data-card-art="off"]) .en.hasart.fullart .en-t,
:root:not([data-card-art="off"]) .en.hasart.fullart .cbmark{position:relative;z-index:2;text-shadow:0 1px 3px #000}

:root[data-card-art="off"] .cart,
:root[data-card-art="off"] .mart,
:root[data-card-art="off"] .wart,
:root[data-card-art="off"] .name-art-overlay{display:none!important}
:root[data-card-art="off"] .card.hasart .cname{margin-top:11px}
:root[data-card-art="off"] .card.hasart .ctext{font-size:10px;line-height:1.36}
:root[data-card-art="off"] .m.hasart .mn{margin-top:6px}
:root[data-card-art="off"] .m.hasart .mx{max-height:26px}
.card-art-setting{padding:8px 9px;border:1px solid rgba(220,179,92,.14);border-radius:4px;
  background:rgba(255,255,255,.018)}

.builder-art-preview{
  position:relative;overflow:hidden;isolation:isolate;flex:0 0 34px;width:34px;height:42px;margin:0 3px;border:1px solid rgba(189,222,171,.34);
  border-radius:3px;background-color:#07100b;background-position:center;background-size:cover;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.48),0 2px 8px rgba(0,0,0,.44);cursor:zoom-in}
.builder-art-preview::after{content:"ART";padding:2px 3px;border-radius:2px;background:rgba(1,5,3,.82);
  color:#d8efd0;font:6px var(--mono,monospace);letter-spacing:.12em}
.builder-art-preview .black-road-card-art-media{z-index:0;border-radius:inherit;pointer-events:none}
.builder-art-preview::after{position:relative;z-index:1}
.builder-art-preview:hover,.builder-art-preview:focus-visible{border-color:#d9f0ca;
  box-shadow:0 0 15px rgba(154,213,126,.24);outline:none}
#dl .builder-art-preview{flex-basis:27px;width:27px;height:32px;margin-left:auto}


.black-road-card-art-viewer{
  position:fixed;inset:0;z-index:2147483600;display:none;place-items:center;padding:28px;
  background:
    radial-gradient(circle at 50% 43%,rgba(198,158,71,.13),transparent 40%),
    rgba(1,3,4,.94);backdrop-filter:blur(12px);cursor:zoom-out}
.black-road-card-art-viewer.on{display:grid;animation:black-road-art-viewer-in .18s ease-out both}
.black-road-card-art-stage{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
  width:min(72vw,720px);height:min(90vh,1040px);cursor:default}
.black-road-card-art-image{
  display:block;min-height:0;max-width:100%;height:calc(100% - 38px);object-fit:contain;
  border-radius:5px;box-shadow:0 24px 80px #000,0 0 0 1px rgba(224,191,110,.38),
    0 0 44px rgba(201,157,61,.12)}
.black-road-card-art-caption{
  color:#eee8d7;font-family:var(--serif,Georgia,serif);font-size:clamp(16px,1.5vw,23px);
  letter-spacing:.035em;text-align:center;text-shadow:0 2px 8px #000}
.black-road-card-art-close{
  position:absolute;right:-44px;top:0;width:34px;height:34px;border:1px solid rgba(224,191,110,.45);
  border-radius:50%;background:rgba(5,8,9,.82);color:#e5cc8a;font:20px/1 serif;cursor:pointer}
.black-road-card-art-close:hover,.black-road-card-art-close:focus-visible{
  color:#fff3cd;border-color:#efc963;box-shadow:0 0 16px rgba(231,187,78,.24);outline:none}
.black-road-card-art-viewer-hint{
  position:absolute;left:50%;bottom:7px;transform:translateX(-50%);color:#8d8778;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
body.black-road-card-art-viewer-open{overflow:hidden}
@keyframes black-road-art-viewer-in{from{opacity:0}to{opacity:1}}
@media(max-width:720px){
  .black-road-card-art-viewer{padding:16px}
  .black-road-card-art-stage{width:94vw;height:92vh}
  .black-road-card-art-close{right:4px;top:4px;background:rgba(2,4,5,.9)}
}
@media(prefers-reduced-motion:reduce){.name-art-overlay{animation:none;opacity:.15;transform:none}}

#tip .related-card-previews{margin-top:11px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--fac) 34%,var(--rule))}
#tip .related-card-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;color:var(--dim);font:7.5px var(--mono);letter-spacing:.15em;text-transform:uppercase}
#tip .related-card-title b{color:var(--gold);font-size:8px}
#tip .related-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
#tip .related-card-mini{position:relative;min-height:116px;overflow:hidden;padding:9px 9px 23px;border:1px solid color-mix(in srgb,var(--related-fac) 58%,#667085);border-radius:5px;background:radial-gradient(circle at 84% 12%,color-mix(in srgb,var(--related-fac) 22%,transparent),transparent 42%),linear-gradient(155deg,#111827,#080b11 68%);box-shadow:inset 0 0 0 1px #ffffff08,0 4px 12px #0008}
#tip .related-card-mini::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 42%,#ffffff08 48%,transparent 54%)}
#tip .related-card-mini .rc-cost{position:absolute;left:6px;top:6px;display:grid;place-items:center;width:22px;height:22px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:#2578b6;color:white;font:700 10px var(--mono);text-shadow:0 1px 2px #000}
#tip .related-card-mini h4{position:relative;margin:0 0 3px;padding-left:24px;color:#f4efe3;font:400 11px/1.15 var(--serif);text-wrap:balance}
#tip .related-card-mini .rc-type{position:relative;color:color-mix(in srgb,var(--related-fac) 72%,#efe5c8);font:6.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
#tip .related-card-mini .rc-text{position:relative;margin-top:7px;color:#bdc5d2;font:8.3px/1.3 var(--serif);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
#tip .related-card-mini .keyword-dock{position:absolute;left:7px;right:42px;bottom:5px;z-index:2;transform:scale(.74);transform-origin:left bottom}
#tip .related-card-mini .rc-stats{position:absolute;right:6px;bottom:5px;z-index:2;color:#f4d77e;font:700 9px var(--mono)}
#tip .related-card-more{grid-column:1/-1;color:#7f8999;text-align:center;font:7px var(--mono);letter-spacing:.12em;text-transform:uppercase}
@media(max-width:620px){#tip .related-card-grid{grid-template-columns:1fr}}

.tchip-season{background:linear-gradient(115deg,#0b1520,#102534);box-shadow:inset 0 0 12px color-mix(in srgb,currentColor 16%,transparent)}
.res.season-table{background:radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--table-season) 20%,transparent),transparent 52%),rgba(6,10,17,.72);box-shadow:inset 0 0 18px color-mix(in srgb,var(--table-season) 12%,transparent)}

.keyword-dock{position:absolute;left:27px;right:43px;bottom:-7px;min-height:27px;z-index:8;display:flex;align-items:center;justify-content:center;gap:2px;padding:2px 4px;border-radius:8px;background:linear-gradient(180deg,rgba(18,23,35,.96),rgba(5,8,14,.98));border:1px solid #3a4252;box-shadow:0 3px 10px #000b,inset 0 1px rgba(255,255,255,.05);pointer-events:auto}
.card>.stat,.m>.stat,.keyword-demo-card>.stat{z-index:12!important}
.keyword-dock:empty{display:none}.keyword-chip{--keyword-color:#dcb35c;width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;border-radius:5px;color:var(--keyword-color);background:#0b1019;border:1px solid color-mix(in srgb,var(--keyword-color) 58%,#202837);box-shadow:inset 0 0 8px #0009,0 0 5px color-mix(in srgb,var(--keyword-color) 24%,transparent)}
.keyword-chip svg{width:15px;height:15px;overflow:visible}.keyword-chip svg g{fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.keyword-chip:hover,.keyword-chip:focus-visible{transform:translateY(-2px) scale(1.12);z-index:2;filter:brightness(1.25)}
.keyword-more{height:20px;min-width:20px;padding:0 3px;display:grid;place-items:center;border-radius:5px;color:#d8c996;background:#171a20;border:1px solid #5d5439;font:700 7px var(--mono)}
.keyword-waking{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-3px);padding:1px 5px;border-radius:5px;background:#101622;border:1px solid #43516b;color:#9baac1;font:600 6px var(--mono);letter-spacing:.13em}
.k-count-6 .keyword-chip,.k-count-7 .keyword-chip,.k-count-8 .keyword-chip,.k-count-9 .keyword-chip{width:17px;height:17px;flex-basis:17px}.k-count-6 .keyword-chip svg,.k-count-7 .keyword-chip svg,.k-count-8 .keyword-chip svg,.k-count-9 .keyword-chip svg{width:13px;height:13px}
.m>.kw{display:none}.card>.keyword-dock{bottom:-7px}.m>.keyword-dock{bottom:-7px}.m.obscured-hidden>.keyword-dock{display:none}

.card.kw-state-ward{border-color:#8fd0ff;box-shadow:0 0 0 2px rgba(143,208,255,.7),0 0 18px rgba(143,208,255,.48),inset 0 0 22px rgba(143,208,255,.18)}
.card.kw-state-antimagic{border-color:#b078e8;box-shadow:0 0 0 2px rgba(176,120,232,.72),0 0 18px rgba(176,120,232,.48),inset 0 0 22px rgba(176,120,232,.18)}
.card.kw-state-ward.kw-state-antimagic{border-color:#a5a5f4;box-shadow:-4px 0 15px rgba(143,208,255,.5),4px 0 15px rgba(176,120,232,.55),inset 0 0 24px rgba(155,148,244,.2)}
.card.fullart.kw-state-ward .cart::after,.m.fullart.kw-state-ward .mart::after,.m.fullart.ward .mart::after{box-shadow:inset 0 0 0 2px rgba(184,226,255,.92),inset 0 0 28px 7px rgba(82,177,246,.55);animation:keywordArtAuraPulse 1.9s ease-in-out infinite}
.card.fullart.kw-state-antimagic .cart::after,.m.fullart.kw-state-antimagic .mart::after{box-shadow:inset 0 0 0 2px rgba(215,177,255,.94),inset 0 0 30px 8px rgba(157,79,230,.58);animation:keywordArtAuraPulse 1.9s ease-in-out infinite}
.card.fullart.kw-state-ward.kw-state-antimagic .cart::after,.m.fullart.kw-state-ward.kw-state-antimagic .mart::after{box-shadow:inset 9px 0 22px rgba(82,177,246,.62),inset -9px 0 22px rgba(157,79,230,.66),inset 0 0 0 2px rgba(205,202,255,.95)}
.card.kw-state-warden,.m.kw-state-warden,.m.taunt{border:2px solid #090a0c;box-shadow:0 0 0 2px #fff0b0,0 0 0 4px #17130a,0 5px 20px rgba(0,0,0,.72),inset 0 0 0 2px rgba(255,240,176,.2),inset 0 0 25px rgba(184,154,82,.2)}
.card.kw-state-warden{background-image:linear-gradient(90deg,transparent 0 8px,rgba(229,201,122,.07) 8px 10px,transparent 10px calc(100% - 10px),rgba(229,201,122,.07) calc(100% - 10px) calc(100% - 8px),transparent calc(100% - 8px)),linear-gradient(170deg,#302b1e,#12100b 76%)}
.card.kw-state-warden .stat.hlth,.m.kw-state-warden .stat.hlth{height:35px;bottom:-11px;border:2px solid #fff3bd;border-radius:0;padding:0 5px 4px;clip-path:polygon(50% 0,92% 14%,86% 66%,50% 100%,14% 66%,8% 14%);background:linear-gradient(180deg,#f3d77a 0%,#c6962f 48%,#79500d 100%);color:#211605;box-shadow:none;text-shadow:0 1px 0 #fff4ba99;font-weight:900}
#game.attack-targeting .field .m:not(.tgt):not(.sel),#game.attack-targeting .hero:not(.tgt),#teamgame.attack-targeting .m:not(.tgt):not(.sel),#teamgame.attack-targeting .thero:not(.tgt){opacity:.24;filter:grayscale(1) brightness(.42);transition:opacity .15s ease,filter .15s ease}
#game.attack-targeting .m.tgt,#game.attack-targeting .hero.tgt,#teamgame.attack-targeting .m.tgt,#teamgame.attack-targeting .thero.tgt{opacity:1;filter:none;animation:tgtBeckon 1.05s ease-in-out infinite}
#game.attack-targeting .m.kw-state-warden.tgt,#teamgame.attack-targeting .m.kw-state-warden.tgt,.cat-arena .m.kw-state-warden.tgt{animation:keywordWardenTargetPulse 1.05s ease-in-out infinite!important}
@keyframes keywordWardenTargetPulse{0%,100%{filter:brightness(1.06);box-shadow:0 0 0 2px #fff5ce,0 0 0 5px #201907,0 0 18px 5px rgba(255,214,91,.58),inset 0 0 18px rgba(255,237,163,.18)}50%{filter:brightness(1.25);box-shadow:0 0 0 3px #fffbea,0 0 0 7px #9a7218,0 0 34px 11px rgba(255,218,96,.9),inset 0 0 28px rgba(255,243,190,.34)}}
.card.kw-state-vanguard{border-bottom:3px solid #8db8e7;box-shadow:0 7px 16px rgba(102,157,211,.3),inset 0 -10px 17px rgba(87,141,197,.12)}
.card.kw-state-bloodsteel{border-color:#d66562;box-shadow:0 0 14px rgba(206,73,70,.38),inset 0 0 20px rgba(125,31,34,.18)}
.card.kw-state-vampirism .atk,.m.kw-state-vampirism .atk,.keyword-demo-card.kw-state-vampirism .atk{background:linear-gradient(160deg,#ff8ba0,#bd3856);color:#29070e;box-shadow:0 0 15px rgba(224,69,95,.78)}
.card.kw-state-onslaught .atk,.m.kw-state-onslaught .atk,.keyword-demo-card.kw-state-onslaught .atk{border-color:#f29b52;box-shadow:0 0 14px rgba(242,120,57,.72)}
.card.kw-state-first-strike .atk,.m.kw-state-first-strike .atk,.keyword-demo-card.kw-state-first-strike .atk{border-color:#ffe69b;box-shadow:0 0 14px rgba(255,213,92,.72)}
.keyword-demo-card{box-sizing:border-box;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.keyword-demo-card.kw-state-warden{border:4px double #d9bd71;border-radius:10px;background:linear-gradient(90deg,rgba(220,190,104,.13) 0 7px,transparent 7px calc(100% - 7px),rgba(220,190,104,.13) calc(100% - 7px)),linear-gradient(165deg,#393322,#12100b 72%);box-shadow:0 0 0 2px #4c3a15,0 0 0 5px rgba(190,157,76,.2),0 22px 55px #000d,inset 0 0 0 2px rgba(255,230,158,.13),inset 0 0 30px rgba(184,154,82,.24)}
.keyword-demo-card.kw-state-warden::before{border-top-width:8px;border-top-color:#d9bd71;box-shadow:inset 0 4px rgba(64,47,15,.72)}
.keyword-demo-card.kw-state-ward::after,.keyword-demo-card.kw-state-antimagic::after{content:"";position:absolute;inset:-5px;border-radius:16px;pointer-events:none;z-index:11;animation:keywordShieldPulse 1.9s ease-in-out infinite}
.keyword-demo-card.kw-state-ward::after{border:2px solid rgba(143,208,255,.95);box-shadow:0 0 18px 3px rgba(143,208,255,.58),inset 0 0 24px rgba(143,208,255,.25)}
.keyword-demo-card.kw-state-antimagic::after{border:2px solid rgba(176,120,232,.95);box-shadow:0 0 18px 3px rgba(176,120,232,.6),inset 0 0 24px rgba(176,120,232,.27)}
.keyword-demo-card.kw-state-ward.kw-state-antimagic::after{border-color:#9fc5ff;box-shadow:-8px 0 20px rgba(143,208,255,.65),8px 0 20px rgba(176,120,232,.7),inset -12px 0 24px rgba(143,208,255,.2),inset 12px 0 24px rgba(176,120,232,.22)}
.keyword-demo-card.kw-state-vanguard{border-bottom:5px solid #8db8e7;box-shadow:0 15px 25px rgba(102,157,211,.34),inset 0 -16px 24px rgba(87,141,197,.14)}
.keyword-demo-card.kw-state-bloodsteel{border-color:#d66562;background:linear-gradient(165deg,#382026,#110b10 70%);box-shadow:0 0 21px rgba(205,71,72,.42),inset 0 0 28px rgba(112,25,30,.25)}
.keyword-demo-card.kw-state-obscured .keyword-demo-art{filter:brightness(.28) saturate(.35);box-shadow:inset 0 0 34px #000}
.keyword-demo-card.kw-state-vehemence{background:radial-gradient(circle at 50% 30%,rgba(196,158,62,.15),transparent 30%),linear-gradient(160deg,#15130d,#030303 72%);border-color:#8d7130;box-shadow:0 0 22px rgba(177,139,44,.26),inset 0 0 34px #000}
.keyword-demo-card.kw-state-vehemence{isolation:isolate}
.keyword-demo-card.kw-state-vehemence>.keyword-demo-name,.keyword-demo-card.kw-state-vehemence>.keyword-demo-type,.keyword-demo-card.kw-state-vehemence>.keyword-demo-copy{position:relative;z-index:3}
@keyframes keywordShieldPulse{0%,100%{opacity:.58;transform:scale(1)}50%{opacity:1;transform:scale(1.025)}}
@keyframes keywordArtAuraPulse{0%,100%{filter:brightness(.94)}50%{filter:brightness(1.2)}}
@media(prefers-reduced-motion:reduce){.keyword-demo-card.kw-state-ward::after,.keyword-demo-card.kw-state-antimagic::after{animation:none;opacity:.88}.card.fullart.kw-state-ward .cart::after,.card.fullart.kw-state-antimagic .cart::after,.m.fullart.kw-state-ward .mart::after,.m.fullart.kw-state-antimagic .mart::after,.m.fullart.ward .mart::after{animation:none}#game.attack-targeting .m.tgt,#game.attack-targeting .hero.tgt,#teamgame.attack-targeting .m.tgt,#teamgame.attack-targeting .thero.tgt{animation:none}#game.attack-targeting .m.kw-state-warden.tgt,#teamgame.attack-targeting .m.kw-state-warden.tgt,.cat-arena .m.kw-state-warden.tgt{animation:none!important;filter:brightness(1.18);box-shadow:0 0 0 3px #fffbea,0 0 0 6px #9a7218,0 0 28px 8px rgba(255,218,96,.78)}}
.keyword-lab{--lab-gold:#dcb35c;position:fixed;inset:0;z-index:24000;display:none;color:#e8e4d9;background:radial-gradient(circle at 18% 0,#1f2637 0,transparent 34%),linear-gradient(140deg,#090d15,#030509 72%);overflow:auto;font-family:var(--serif)}.keyword-lab.on{display:block}
.keyword-lab-shell{width:min(1440px,calc(100% - 38px));margin:0 auto;padding:26px 0 48px}.keyword-lab-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;border-bottom:1px solid #2b3342;padding-bottom:20px}
.keyword-lab-kicker{color:var(--lab-gold);font:600 9px var(--mono);letter-spacing:.24em;text-transform:uppercase}.keyword-lab h2{font:400 clamp(30px,4vw,58px) var(--serif);margin:5px 0 7px}.keyword-lab-head p{color:#9ca7b9;max-width:720px;margin:0;line-height:1.55}
.keyword-lab-close{border:1px solid #596274;background:#101622;color:#dce4f0;padding:11px 16px;font:600 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.keyword-lab-layout{display:grid;grid-template-columns:minmax(310px,430px) 1fr;gap:26px;margin-top:26px}.keyword-lab-preview{position:sticky;top:20px;align-self:start;border:1px solid #30394a;background:#090d14;padding:22px;box-shadow:0 24px 60px #0007}
.keyword-lab-preview h3{margin:0 0 4px;font:400 23px var(--serif)}.keyword-lab-preview>p{margin:0 0 19px;color:#8995a8;font-size:13px}.keyword-demo-stage{min-height:360px;display:grid;place-items:center;border:1px solid #222a38;background:radial-gradient(circle at 50% 40%,#21304b 0,transparent 44%),linear-gradient(#0d121d,#06080d)}
.keyword-demo-card{width:224px;height:314px;position:relative;display:flex;flex-direction:column;padding:18px 14px 17px;border-radius:13px;background:linear-gradient(160deg,#222c40,#0e1421 70%);border:2px solid #a78749;box-shadow:0 20px 50px #000b,inset 0 0 35px #0008}
.keyword-demo-card::before{content:"";position:absolute;inset:0;border-radius:11px;border-top:5px solid #7fb6d6;pointer-events:none}.keyword-demo-art{height:138px;border-radius:8px;background:radial-gradient(circle at 50% 28%,#bce5dd 0 7%,#4b8991 8% 18%,transparent 19%),linear-gradient(155deg,#253c4b,#111723 66%);border:1px solid #445065}
.keyword-demo-name{text-align:center;margin-top:13px;font-size:18px}.keyword-demo-type{text-align:center;color:#7fb6d6;margin-top:4px;font:600 8px var(--mono);letter-spacing:.15em;text-transform:uppercase}.keyword-demo-copy{text-align:center;color:#9ca7b9;font-size:11px;line-height:1.45;margin-top:11px}.keyword-demo-card .stat{z-index:10}.keyword-demo-card .keyword-dock{left:31px;right:48px;bottom:-7px}
.keyword-demo-summary{min-height:34px;margin-top:16px;color:#b8c1d1;font-size:12px;line-height:1.5}.keyword-demo-summary b{color:#ead79c}.keyword-lab-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.keyword-lab-actions button,.keyword-search{border:1px solid #394356;background:#111722;color:#cdd5e1;padding:9px 11px;font:600 8px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.keyword-lab-actions button{cursor:pointer}.keyword-lab-actions button:hover{border-color:var(--lab-gold);color:#fff}.keyword-catalogue-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px}.keyword-catalogue-head strong{font:400 20px var(--serif)}.keyword-search{width:min(320px,50%);text-transform:none;letter-spacing:.04em}
.keyword-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px}.keyword-option{--keyword-color:#dcb35c;display:grid;grid-template-columns:44px 1fr;gap:11px;min-height:92px;text-align:left;padding:12px;border:1px solid #293244;background:linear-gradient(150deg,#111722,#090d14);color:#dce3ed;cursor:pointer;transition:.16s ease}
.keyword-option:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--keyword-color) 70%,#4b5565)}.keyword-option.on{border-color:var(--keyword-color);box-shadow:inset 3px 0 var(--keyword-color),0 0 18px color-mix(in srgb,var(--keyword-color) 15%,transparent)}
.keyword-option .keyword-chip{width:38px;height:38px;border-radius:9px}.keyword-option .keyword-chip svg{width:27px;height:27px}.keyword-option b{display:block;color:#f3efe5;font:400 15px var(--serif);margin-bottom:4px}.keyword-option small{display:block;color:#8995a8;font-size:10px;line-height:1.4}
.keyword-option .keyword-state{display:block;margin-top:7px;color:var(--keyword-color);font:600 7px var(--mono);letter-spacing:.12em;text-transform:uppercase}.keyword-lab-empty{grid-column:1/-1;padding:30px;border:1px dashed #364052;text-align:center;color:#8c98aa}
@media(max-width:850px){.keyword-lab-layout{grid-template-columns:1fr}.keyword-lab-preview{position:relative;top:auto}.keyword-catalogue-head{align-items:stretch;flex-direction:column}.keyword-search{width:100%}}

.card-rules-term{color:var(--gold)!important;font-weight:650}.card .ctype .card-rules-term,.card .skw .card-rules-term{color:#e2bf61!important}
.card.cost-discounted .cost{box-shadow:0 0 0 1px rgba(119,222,153,.34),0 0 14px rgba(82,205,123,.26)}
.card-cost-history{position:absolute;z-index:13;top:23px;left:-8px;display:flex;align-items:center;gap:3px;min-width:30px;padding:2px 4px;border:1px solid rgba(218,183,92,.3);border-radius:3px;background:rgba(5,8,15,.94);font:700 7px/1 var(--mono);white-space:nowrap;pointer-events:none}
.card-cost-history s{color:#9aa3b5;text-decoration-color:#d2a84d}.card-cost-history b{color:#78d99a;font-size:8px}.card-cost-history.surcharge b{color:#e8837e}
.side-cost-history{display:inline-flex;align-items:center;gap:2px;padding:1px 3px;border:1px solid rgba(218,183,92,.28);border-radius:3px;background:rgba(4,7,12,.84);font:700 6px/1 var(--mono);white-space:nowrap}.side-cost-history s{color:#99a3b4;text-decoration-color:#d2a84d}.side-cost-history b{color:#78d99a}.side-cost-history.surcharge b{color:#e8837e}
#tip .stats i.cost-delta{display:flex;gap:4px;align-items:center;color:#78d99a}#tip .stats i.cost-delta.surcharge{color:#e8837e}#tip .stats i.cost-delta s{color:var(--dim);text-decoration-color:#d2a84d}
#tip .body .card-rules-term,#tip .sideblk .card-rules-term,.related-card-mini .card-rules-term{color:var(--gold)!important}

.art::after{pointer-events:none}
.artifact-use-name{position:relative;z-index:5;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.artifact-use-name.artifact-use-ready{cursor:pointer}
.artifact-use-name.artifact-use-ready:focus-visible{outline:1px dotted currentColor;outline-offset:2px}
.artifact-use-cost{position:absolute;z-index:8;left:-9px;top:-9px;width:23px;height:23px;display:grid;place-items:center;border:2px solid #a97b28;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ffe082,#d5a63e 62%,#805716);box-shadow:0 2px 7px #000b,0 0 8px #dcb35c66;color:#171007;font:800 11px/1 var(--mono);font-style:normal;font-variant-numeric:tabular-nums;pointer-events:none}
.art.artifact-use-disabled,.tart.artifact-use-disabled{filter:grayscale(.92);opacity:.52}
.art.artifact-use-press,.tart.artifact-use-press{animation:artifactUsePress .2s ease-out}
.art.artifact-use-denied,.tart.artifact-use-denied{animation:artifactUseDenied .32s ease-out}
.artifact-use-press>.artifact-use-cost{animation:artifactCostPress .2s ease-out}
@keyframes artifactUsePress{45%{transform:scale(.9);box-shadow:inset 0 0 18px #000c,0 0 8px #dcb35c88}100%{transform:scale(1)}}
@keyframes artifactCostPress{45%{transform:scale(.78);filter:brightness(1.45)}100%{transform:scale(1)}}
@keyframes artifactUseDenied{25%,70%{transform:translateX(-3px)}48%,88%{transform:translateX(3px)}100%{transform:translateX(0)}}

/* ===================== the ordinary sword ===================== */
/* Positioned at the point of impact and rotated to the line of approach, so
   the blade always arrives from the attacker's side of the board. Everything
   animates on transform/opacity only — one swing per attack, gone in 620ms. */
.swordhit{position:fixed;z-index:79;pointer-events:none;left:0;top:0;width:0;height:0;
  transform:translate(var(--sx),var(--sy)) rotate(var(--sang));
  --steel:#dfe6ef;--edge:#ffffff;--glint:var(--sc,#cfd8e6)}

/* The blade itself: a long tapered wedge with a short guard and grip behind it.
   Drawn with gradients rather than an image so it tints to --glint for free. */
.swordhit .blade{position:absolute;left:calc(var(--slen) * -1);top:-5px;
  width:var(--slen);height:10px;transform-origin:100% 50%;opacity:0;
  background:
    linear-gradient(180deg,#7d8ba1 0 34%,var(--edge) 44% 54%,#6f7d92 64%,#4d586b 100%),
    linear-gradient(90deg,transparent 0 4%,var(--steel) 10%,var(--edge) 46%,var(--steel) 78%,transparent 99%);
  background-blend-mode:multiply;
  clip-path:polygon(0 42%,6% 12%,88% 0,100% 50%,88% 100%,6% 88%);
  filter:drop-shadow(0 0 3px rgba(255,255,255,.5)) drop-shadow(0 0 9px var(--glint));
  animation:swordswing .30s cubic-bezier(.22,.9,.3,1) forwards}
.swordhit .grip{position:absolute;left:calc(var(--slen) * -1 - 26px);top:-3px;
  width:26px;height:6px;transform-origin:100% 50%;opacity:0;border-radius:3px;
  background:linear-gradient(90deg,#2a2118,#5a4632 60%,#8a6a44);
  animation:swordswing .30s cubic-bezier(.22,.9,.3,1) forwards}
.swordhit .guard{position:absolute;left:calc(var(--slen) * -1 - 6px);top:-13px;
  width:7px;height:26px;transform-origin:100% 50%;opacity:0;border-radius:3px;
  background:linear-gradient(180deg,#c9a55a,#7d5f24 55%,#c9a55a);
  animation:swordswing .30s cubic-bezier(.22,.9,.3,1) forwards}

/* The arc the edge travels through, fading behind the blade. */
.swordhit .arc{position:absolute;left:calc(var(--slen) * -1);top:calc(var(--slen) * -0.5);
  width:var(--slen);height:var(--slen);opacity:0;border-radius:50%;
  border:3px solid transparent;border-top-color:var(--glint);border-right-color:var(--edge);
  filter:drop-shadow(0 0 9px var(--glint));
  animation:swordarc .34s cubic-bezier(.2,.85,.3,1) forwards}

/* Contact: a tight bite of light where the edge lands. Deliberately small —
   a large soft flare reads as a magic bolt and swallows the blade tip. */
.swordhit .flare{position:absolute;left:-17px;top:-17px;width:34px;height:34px;opacity:0;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0 6%,var(--glint) 26%,transparent 62%);
  animation:swordflare .30s ease-out .17s forwards}

/* Sparks leave along the edge, not radially — a struck blade throws forward.
   They start outside the flare so both stay legible. */
.swordhit .spark{position:absolute;left:0;top:0;width:var(--sl,13px);height:1.5px;opacity:0;
  border-radius:2px;transform-origin:0 50%;
  background:linear-gradient(90deg,#fff,var(--glint) 45%,transparent);
  animation:swordspark .40s ease-out .17s forwards}

@keyframes swordswing{
  0%  {opacity:0;transform:rotate(-62deg) scale(.86)}
  22% {opacity:1}
  62% {opacity:1;transform:rotate(6deg) scale(1.03)}
  100%{opacity:0;transform:rotate(15deg) scale(1)}
}
@keyframes swordarc{
  0%  {opacity:0;transform:rotate(-60deg) scale(.7)}
  30% {opacity:.85}
  100%{opacity:0;transform:rotate(16deg) scale(1.04)}
}
@keyframes swordflare{
  0%  {opacity:0;transform:scale(.3)}
  30% {opacity:.9;transform:scale(1)}
  100%{opacity:0;transform:scale(1.35)}
}
@keyframes swordspark{
  0%  {opacity:0;transform:rotate(var(--sa)) translateX(14px) scaleX(.5)}
  25% {opacity:1}
  100%{opacity:0;transform:rotate(var(--sa)) translateX(var(--sd,46px)) scaleX(1)}
}

/* A heavy hitter swings a bigger blade and lands harder. */
.swordhit.heavy .blade{height:13px;filter:drop-shadow(0 0 4px rgba(255,255,255,.6)) drop-shadow(0 0 13px var(--glint))}
.swordhit.heavy .flare{left:-23px;top:-23px;width:46px;height:46px}

/* Reduced motion keeps the information — something struck here, in this colour
   — and drops the travel. */
@media (prefers-reduced-motion: reduce){
  .swordhit .blade,.swordhit .grip,.swordhit .guard,.swordhit .arc,.swordhit .spark{display:none}
  .swordhit .flare{animation-duration:.2s;animation-delay:0s}
}

/* ===================== Relic-Eater Korr's appetite ===================== */
.korr-maw{position:relative}
/* Sits INSIDE the top edge rather than above it: a marker hanging over the top
   of a card gets clipped by whichever ancestor happens to hide its overflow,
   which is exactly how this ended up as a sliver in the corner. The dark halo
   under the glow keeps it readable over busy card art. */
.korr-maw::after{
  content:"";position:absolute;left:50%;top:5px;
  width:36px;height:35px;transform:translateX(-50%);
  pointer-events:none;z-index:60;
  background:#c47bff;
  -webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABeCAYAAADc6BHlAAANt0lEQVR42u1de7BVZRX/ffuce+Fyr4lBYD5QHgoiPoB8hFpa+SoLi0F7aOlYAQ4hI5mjjs5IpQMlMmOaAck4vvIxQ6Wm4BjSmJjEjIGoQaFCiJqTGIjcc8/Zv/44a8nia+/z3Ofee865e+bMPnfu3t/+9lrfev++dRwSPEhOAHA2gNMBHAtgqPzLyTkD4GUAzwJ4BsBy59wuuTflnMuh7yiL4I5kQPI8kk+S7GR5x0aSc0l+QsZL91G1dOKn5Pw1j6hZkjmSYQzRc+YaPbaSnCLjBc1Ex2peVtXKIAAhgE75OyXjugLP1GtCAFkAhwB4hOR851xIMkXS9S3zwhIQyPlkWcUhKz9UKkjydithfRJQ/NiT0DxSALoAXE5yunMu1wxMSIIBSRrONIAcgIUkRwEIG90mJPFynUK0JA4HgAD6AbjOOccCtqTpGUA57wDwoSFeElJAAN8gOVxUUdDHgHgvaH8AbUK0pFZrTqRgcoKS2rAqqL8Y0MQdLQBnyPewjwHxR6ZG83IAxpFsk9jAlRCVp417nGoWFXSwZxOSMsYa5LWVEpU75+icyzrnQgCol7xSEgw4tIZqIleMsZrEI7k/yctIPkryZZI3aa6qUSPhtJznSQTbxeQOjar/TfIAVTFRiUD5PpXkpohxRvX2/FI1E9MVP7ZGBpjiYbkofZ/XMi4k+XMADwEYJXmlnJGcQcXsRr1LQRvJ100+J4kja77fag1rRCb2Ni8Da48PSB4aIz0pI8FBPaeijyuSei73UDX2Dsnz44gn52lybcZ7vs7nJT+r6tuEupUAs3rmJKj/dYw/kRwR5UoKAR3JISR3CLFzMeP8xJurJfwpJH9FcgPJe0i21pUkSBXMkXwuQm1UYnD1/jtJ9ourjhliTot5ro61i+QhhmkqNYNIPhgxh8/2VOwQVEJ88bVHApgoxi5VhSHX+69yzk13znXKM7IF7hsi9/qub1bG+oVz7l9CUCdu6nAAzwO4AHsLQRkx2BM919pfbOleE9iZVXhDlerH6u1pOnYhvWzczhPMvRmZQ0b+/gvJdiGcrvwRJDdHzFcl6Ju+1EXFED1uM4wObjMvlKuwApYjuZPkueUU5A0TLhVVY49nTdwQyKeN5LqYxRLKPCZ4Bt7ai7EkZ5L8Uo8zwUxwehW6PzRMO6MSNIRhwjiSC8SgXmqk0+r9K4yk+PMISW4n2RExdjvJRR7TTuuxPJOBoLSSfM0jZCXezvdl3JZqFkNccCXzbSX5SsxcdR53mthAiX+EqDJl1Idy/9KoBaNOSXet/h9Wsfr1pa+qhvgRBjJt7Yc5DyL5vlntdvV3CY5ptLE/AckOkn/3pEbf9VGf+Z66StXEnTX69BDjf4cVRrj3KvFrtWqMrWon+bY8t1PmkDWEvdoQThfY7yJUls59mbcYldHDSH4siilJez6/qXD1K8M2Gg/FdRNsZrJhgj3uikhLfCfGWOv7/jZCXV1Dcg/JbSQfIDkpUWNtJndxFaon2xMBj1mhB5O8UeCTD5Oc6kmKFnP+UcRezJX7WuV8TMz7LkxEEgyXhyegeu7pCQ8ijgiGOapOJhUAmOk7TJRr+5lUfGjyUV2GeZ/21ZV6Z3ZOQZHVo+7c/ZIaLrfwTnnGbgDXyZjsTgZIyvqjaFY/Anmx0e9IiZC7vDlmJLr+vXNurdAjI+ez5P6UnBXXFAI4zY4vFTs653IKvyxV9dyegNezuLfWac0KnRBht/TYJoY2MHQZJu6pLzX6zndYT4/kgZI7W0RyTEEVZW6aVWW6QSPeE2xw1AuZ4EyAuUGMqnpOT5A80niDyrBTYzIBSqvr5br+cv62uWYPyTnFiD8lJt9eDvFJ8sVuCVSSY0IguaMzlPCePfQ9pmyMvZjiMWC+/G+3ufbLfkSXds51Sci9VHRZukLAVSj6/2nReWnJQPbKwzlHs0tns3z2KX96t4yKQYMoyPhFr3SrWd8WsRMOwE1pj/hZIf4fAHTIzZWuXL1vTb3UOSRt7WTuDgCF8FGOw+GIRnEEAF4AsFmkJgotoqp4XLoI8avxY/Xe12uAG6qpJBSZq/6vI6KGoF7iMpWoiPv2GSsg2SLE/0yCxLcFkt31xIBSpES+HuExQFXMLuRRGj5WKirv5QLR+acmTHxdCTsBbGskBhRwH1WvL3bObRV7YhnwZgSk558ByfMAPAqgPcGVrwHXQADDGwXhbDy5IcYGOBNw7gJwS0zA+Zp3PQCsDABcI4TKJEwklYIOoOGBzWp8lzjntgEIIrymwMsOAMDSAMA5AJYAaBWdnZSq0AkcZzyLujcBch6O/P4FGoK+A+Cn8q5hBB1e9cZ5GsDqwDm30zn3PQDXGp8/THCyk0rwLOqNAW1CdBq1fa1z7l1Z/SywIJ1IzJXOOfr100tMfqMarI/Nj2zVmmu9YzEjNqd3GjBAEJVqMRH0UJLvyfU/+L/cmElBnGkurJYJev/5mnNHYyDCf2TSNP8lOSYOCm9SHGlBe98Sm5g0DxhtQLddCTDgsUbYfG3oM9dI+GWlIDtI9iP5qaKFGvOQkST/lgATtIhzUjE0g5YHiwG0eoEKulfe7e5yYTUlVcnMgzpI/rFKJqgUPFXBZFO9tD3DcyS3kBxQTqa3rBKlYcIAkk8lxIRL4yCAcr5Y9gRMI/nxXsqENMn1JMfXfH+B3XFI8o4qmKCFmbcNajnwzou8e7aYPQJBL6oXDDXIh6DboOjyvRomqBQ8Q7K/V977gge0teN/vTftZPHBX90JS0x5TMhUUSOe7KELHjGoAp9hO0gOVlRBL8sJod6YoJib8WbMdgHIRkFCtKx5SqP2EEqXWbILJc16OUkAmIF8+a2ljFDeAfjAjBnEbPDQStR2AOs0xyJnvZ5N1+gvRhLKtQljzHj7kXzXA9DmzJjTjCPgqnLtGpwJmTKQEucYgG6K5PNmDAvzuNWCg7F3a+wMkj8z6LM+JpTIBF3VV2JfyMZkT/+vt96PiROGklzjjXlzM/WYq1Yd6ep+ycAE1a07VtzRk82YKROopUkuN1nILuMpzeuThPz3X5bABCXad02SKmo/cNrLTZ0XIWXWdf18nyTsy4RMkX3BezQesLC/Am0J7vaMs1VrOZI3NHX3XY8Jy0pggv5/LsmjvLFG6o4Ts9drYwwWU58xMyrP1JRMkCzqyiLqyO/vsEHS3xuEqMebcQdIHiln3NWcIf5bsgnDYvBd3H7fZumo205yVQlMiPvfV4R4LaKeVsVIwEaSJ/ruqvw9sNrUdl1KkVFFQ0i+UUJ5MzQZ0075+zovX3SibCHKyAbtV0lerUT2koanklwhXVeeJHlyuUyoB0R3qUw4QlLLpe6q12s2ie63jfj6kzxS1E3a38Up3482+H49PjReUlBK8z9fiupVEtSFPEmIUuoeM5WWWaYI0hJBqBaj99WLWmNihdDYif9YO1GsAiebSlZEGfd6ZcI5Xo24lKxpRnfUlyhtZ8aoO7Uzt8XsdLf95wZLJy4dY3rdu7eGCbMrTN6tkHLlCJKHykoeT3KYB6n5dYxh1w3aKyJWuv1+kewHs1W80xsiwDNEWlgmE3Kez7/HdEmZ4Rnq5TESoDbhx96CUMn5pNfISdXWeyQHN0qDP5teeKhMJmQ9oipTLvEY8ISJsru8fbt/ltR34M3lLM9Tsx28VtU6xxR0884T7YR+GYCXsHdfbbEjJR/FmOo9oz3g7zK5rp+MrXr7LgDnOud2yv0p2ZQyE8ByAMOwt9uWhY8/1nDNw42xGy1+eiVtb3SF/tUv1oitWCqfOSSPiZHCqz1d7zsBmXpo/FqtUT7bJNjCCrfBflXGai3gXgaepzPDUzlRHtN9DZ1dTaD1pbqz29QbMunt/vLp57chI3m8+dGguL4QOZJjG77GYJhwT4VobCXgm9KyrH8JscJ9BXJQ6v3M767V73oBviZAHlWxBsA4lL9PzTYQ2QxgFYBNYqjHi2F+GECLcy5D8nEAX0T+t29azRg5mcdqAJ9DHu0R+pstVM3FbMKo65zRUZIuqKQlTlhAeh60NkJaEGyPuXalrUNEIbcbXRVdlEBzkC7TR7RLagUHeFDIg8RL2i6Jus0kr49oRRZEpC3aSe7XyExYkmA/apWKB/z2ZJrpJDlKAzlvtVsJaBXJWSBB29SGK3+ajGabwFKS2CJl3dUbbVpE244VKtiQnCipk43emBc2ZP3ZuIpjpatuNqHW+MrIR7RNZYFeoynBKa2OsDOdHrAs1ciqaGbCP42iTNhN8n6SF0o0PsIr6BwWUTK1teidJAc1dNHfMOHxBFVR1Dg5yawe5Bnpeaaok/O2pC5tePyRSR0cKMDdXII/kRKa7KoyZLaxDSoJCyLsyFvSK67xkRbGJfxWDX6lyd869b5ppGeZMFui7JDkC5rYaxqYi1EJyxJWRVFe0jqzMdAyYSDJcU0Jhzeq6HDmfxUpyR8MirINa40kpCKAAE0J/vW9olpIgR33HZIXREFe0Ic5/WgjR62YYA39WpKn19rgBnXSRE+PWaaTY9LZSL874tsA3qjRs+raK1qcYDudXETBf7PuS2tKhHWJBnmXyXpmjTsZFsGdZmN+9lAJf4XpbRT0ET9eCq5PQN93ChT+LkFid/REkxBXh10LHfIdHqcjX0EbAOBo07fzMOR/Zl0rXVuQ710aAliPfNXsZQDrALxifzBOPK5cd1a7/gfYOEDx4mpHsQAAAABJRU5ErkJggg==);
  mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABeCAYAAADc6BHlAAANt0lEQVR42u1de7BVZRX/ffuce+Fyr4lBYD5QHgoiPoB8hFpa+SoLi0F7aOlYAQ4hI5mjjs5IpQMlMmOaAck4vvIxQ6Wm4BjSmJjEjIGoQaFCiJqTGIjcc8/Zv/44a8nia+/z3Ofee865e+bMPnfu3t/+9lrfev++dRwSPEhOAHA2gNMBHAtgqPzLyTkD4GUAzwJ4BsBy59wuuTflnMuh7yiL4I5kQPI8kk+S7GR5x0aSc0l+QsZL91G1dOKn5Pw1j6hZkjmSYQzRc+YaPbaSnCLjBc1Ex2peVtXKIAAhgE75OyXjugLP1GtCAFkAhwB4hOR851xIMkXS9S3zwhIQyPlkWcUhKz9UKkjydithfRJQ/NiT0DxSALoAXE5yunMu1wxMSIIBSRrONIAcgIUkRwEIG90mJPFynUK0JA4HgAD6AbjOOccCtqTpGUA57wDwoSFeElJAAN8gOVxUUdDHgHgvaH8AbUK0pFZrTqRgcoKS2rAqqL8Y0MQdLQBnyPewjwHxR6ZG83IAxpFsk9jAlRCVp417nGoWFXSwZxOSMsYa5LWVEpU75+icyzrnQgCol7xSEgw4tIZqIleMsZrEI7k/yctIPkryZZI3aa6qUSPhtJznSQTbxeQOjar/TfIAVTFRiUD5PpXkpohxRvX2/FI1E9MVP7ZGBpjiYbkofZ/XMi4k+XMADwEYJXmlnJGcQcXsRr1LQRvJ100+J4kja77fag1rRCb2Ni8Da48PSB4aIz0pI8FBPaeijyuSei73UDX2Dsnz44gn52lybcZ7vs7nJT+r6tuEupUAs3rmJKj/dYw/kRwR5UoKAR3JISR3CLFzMeP8xJurJfwpJH9FcgPJe0i21pUkSBXMkXwuQm1UYnD1/jtJ9ourjhliTot5ro61i+QhhmkqNYNIPhgxh8/2VOwQVEJ88bVHApgoxi5VhSHX+69yzk13znXKM7IF7hsi9/qub1bG+oVz7l9CUCdu6nAAzwO4AHsLQRkx2BM919pfbOleE9iZVXhDlerH6u1pOnYhvWzczhPMvRmZQ0b+/gvJdiGcrvwRJDdHzFcl6Ju+1EXFED1uM4wObjMvlKuwApYjuZPkueUU5A0TLhVVY49nTdwQyKeN5LqYxRLKPCZ4Bt7ai7EkZ5L8Uo8zwUxwehW6PzRMO6MSNIRhwjiSC8SgXmqk0+r9K4yk+PMISW4n2RExdjvJRR7TTuuxPJOBoLSSfM0jZCXezvdl3JZqFkNccCXzbSX5SsxcdR53mthAiX+EqDJl1Idy/9KoBaNOSXet/h9Wsfr1pa+qhvgRBjJt7Yc5DyL5vlntdvV3CY5ptLE/AckOkn/3pEbf9VGf+Z66StXEnTX69BDjf4cVRrj3KvFrtWqMrWon+bY8t1PmkDWEvdoQThfY7yJUls59mbcYldHDSH4siilJez6/qXD1K8M2Gg/FdRNsZrJhgj3uikhLfCfGWOv7/jZCXV1Dcg/JbSQfIDkpUWNtJndxFaon2xMBj1mhB5O8UeCTD5Oc6kmKFnP+UcRezJX7WuV8TMz7LkxEEgyXhyegeu7pCQ8ijgiGOapOJhUAmOk7TJRr+5lUfGjyUV2GeZ/21ZV6Z3ZOQZHVo+7c/ZIaLrfwTnnGbgDXyZjsTgZIyvqjaFY/Anmx0e9IiZC7vDlmJLr+vXNurdAjI+ez5P6UnBXXFAI4zY4vFTs653IKvyxV9dyegNezuLfWac0KnRBht/TYJoY2MHQZJu6pLzX6zndYT4/kgZI7W0RyTEEVZW6aVWW6QSPeE2xw1AuZ4EyAuUGMqnpOT5A80niDyrBTYzIBSqvr5br+cv62uWYPyTnFiD8lJt9eDvFJ8sVuCVSSY0IguaMzlPCePfQ9pmyMvZjiMWC+/G+3ufbLfkSXds51Sci9VHRZukLAVSj6/2nReWnJQPbKwzlHs0tns3z2KX96t4yKQYMoyPhFr3SrWd8WsRMOwE1pj/hZIf4fAHTIzZWuXL1vTb3UOSRt7WTuDgCF8FGOw+GIRnEEAF4AsFmkJgotoqp4XLoI8avxY/Xe12uAG6qpJBSZq/6vI6KGoF7iMpWoiPv2GSsg2SLE/0yCxLcFkt31xIBSpES+HuExQFXMLuRRGj5WKirv5QLR+acmTHxdCTsBbGskBhRwH1WvL3bObRV7YhnwZgSk558ByfMAPAqgPcGVrwHXQADDGwXhbDy5IcYGOBNw7gJwS0zA+Zp3PQCsDABcI4TKJEwklYIOoOGBzWp8lzjntgEIIrymwMsOAMDSAMA5AJYAaBWdnZSq0AkcZzyLujcBch6O/P4FGoK+A+Cn8q5hBB1e9cZ5GsDqwDm30zn3PQDXGp8/THCyk0rwLOqNAW1CdBq1fa1z7l1Z/SywIJ1IzJXOOfr100tMfqMarI/Nj2zVmmu9YzEjNqd3GjBAEJVqMRH0UJLvyfU/+L/cmElBnGkurJYJev/5mnNHYyDCf2TSNP8lOSYOCm9SHGlBe98Sm5g0DxhtQLddCTDgsUbYfG3oM9dI+GWlIDtI9iP5qaKFGvOQkST/lgATtIhzUjE0g5YHiwG0eoEKulfe7e5yYTUlVcnMgzpI/rFKJqgUPFXBZFO9tD3DcyS3kBxQTqa3rBKlYcIAkk8lxIRL4yCAcr5Y9gRMI/nxXsqENMn1JMfXfH+B3XFI8o4qmKCFmbcNajnwzou8e7aYPQJBL6oXDDXIh6DboOjyvRomqBQ8Q7K/V977gge0teN/vTftZPHBX90JS0x5TMhUUSOe7KELHjGoAp9hO0gOVlRBL8sJod6YoJib8WbMdgHIRkFCtKx5SqP2EEqXWbILJc16OUkAmIF8+a2ljFDeAfjAjBnEbPDQStR2AOs0xyJnvZ5N1+gvRhLKtQljzHj7kXzXA9DmzJjTjCPgqnLtGpwJmTKQEucYgG6K5PNmDAvzuNWCg7F3a+wMkj8z6LM+JpTIBF3VV2JfyMZkT/+vt96PiROGklzjjXlzM/WYq1Yd6ep+ycAE1a07VtzRk82YKROopUkuN1nILuMpzeuThPz3X5bABCXad02SKmo/cNrLTZ0XIWXWdf18nyTsy4RMkX3BezQesLC/Am0J7vaMs1VrOZI3NHX3XY8Jy0pggv5/LsmjvLFG6o4Ts9drYwwWU58xMyrP1JRMkCzqyiLqyO/vsEHS3xuEqMebcQdIHiln3NWcIf5bsgnDYvBd3H7fZumo205yVQlMiPvfV4R4LaKeVsVIwEaSJ/ruqvw9sNrUdl1KkVFFQ0i+UUJ5MzQZ0075+zovX3SibCHKyAbtV0lerUT2koanklwhXVeeJHlyuUyoB0R3qUw4QlLLpe6q12s2ie63jfj6kzxS1E3a38Up3482+H49PjReUlBK8z9fiupVEtSFPEmIUuoeM5WWWaYI0hJBqBaj99WLWmNihdDYif9YO1GsAiebSlZEGfd6ZcI5Xo24lKxpRnfUlyhtZ8aoO7Uzt8XsdLf95wZLJy4dY3rdu7eGCbMrTN6tkHLlCJKHykoeT3KYB6n5dYxh1w3aKyJWuv1+kewHs1W80xsiwDNEWlgmE3Kez7/HdEmZ4Rnq5TESoDbhx96CUMn5pNfISdXWeyQHN0qDP5teeKhMJmQ9oipTLvEY8ISJsru8fbt/ltR34M3lLM9Tsx28VtU6xxR0884T7YR+GYCXsHdfbbEjJR/FmOo9oz3g7zK5rp+MrXr7LgDnOud2yv0p2ZQyE8ByAMOwt9uWhY8/1nDNw42xGy1+eiVtb3SF/tUv1oitWCqfOSSPiZHCqz1d7zsBmXpo/FqtUT7bJNjCCrfBflXGai3gXgaepzPDUzlRHtN9DZ1dTaD1pbqz29QbMunt/vLp57chI3m8+dGguL4QOZJjG77GYJhwT4VobCXgm9KyrH8JscJ9BXJQ6v3M767V73oBviZAHlWxBsA4lL9PzTYQ2QxgFYBNYqjHi2F+GECLcy5D8nEAX0T+t29azRg5mcdqAJ9DHu0R+pstVM3FbMKo65zRUZIuqKQlTlhAeh60NkJaEGyPuXalrUNEIbcbXRVdlEBzkC7TR7RLagUHeFDIg8RL2i6Jus0kr49oRRZEpC3aSe7XyExYkmA/apWKB/z2ZJrpJDlKAzlvtVsJaBXJWSBB29SGK3+ajGabwFKS2CJl3dUbbVpE244VKtiQnCipk43emBc2ZP3ZuIpjpatuNqHW+MrIR7RNZYFeoynBKa2OsDOdHrAs1ciqaGbCP42iTNhN8n6SF0o0PsIr6BwWUTK1teidJAc1dNHfMOHxBFVR1Dg5yawe5Bnpeaaok/O2pC5tePyRSR0cKMDdXII/kRKa7KoyZLaxDSoJCyLsyFvSK67xkRbGJfxWDX6lyd869b5ppGeZMFui7JDkC5rYaxqYi1EJyxJWRVFe0jqzMdAyYSDJcU0Jhzeq6HDmfxUpyR8MirINa40kpCKAAE0J/vW9olpIgR33HZIXREFe0Ic5/WgjR62YYA39WpKn19rgBnXSRE+PWaaTY9LZSL874tsA3qjRs+raK1qcYDudXETBf7PuS2tKhHWJBnmXyXpmjTsZFsGdZmN+9lAJf4XpbRT0ET9eCq5PQN93ChT+LkFid/REkxBXh10LHfIdHqcjX0EbAOBo07fzMOR/Zl0rXVuQ710aAliPfNXsZQDrALxifzBOPK5cd1a7/gfYOEDx4mpHsQAAAABJRU5ErkJggg==);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  filter:drop-shadow(0 0 3px rgba(20,4,36,.95)) drop-shadow(0 0 10px rgba(168,85,247,1));
  animation:korrmaw 1.9s ease-in-out infinite}

/* The permanent actually chosen gets the larger, hungrier one. */
.korr-maw.korr-maw-next::after{width:48px;height:47px;top:3px;background:#e0b3ff;
  filter:drop-shadow(0 0 3px rgba(20,4,36,1)) drop-shadow(0 0 14px rgba(192,132,252,1))}

@keyframes korrmaw{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  50%    {transform:translateX(-50%) translateY(-3px) scale(1.07)}
}

/* Artifacts are not cards on a board: they live in a fixed slot per seat — a
   62px disc in duels and Catastrophe, a small label pill in 2v2. The disc
   already spends ::after on its ring, so the maw uses ::before, centred ON the
   slot. The pill hides its overflow to ellipsise its label, so that is opened
   up only while the maw is on it. */
.art.korr-maw-art,.tart.korr-maw-art{position:relative;overflow:visible}
.art.korr-maw-art::before,.tart.korr-maw-art::before{
  content:"";position:absolute;left:50%;top:50%;
  width:42px;height:41px;transform:translate(-50%,-50%);
  pointer-events:none;z-index:60;
  background:#e0b3ff;
  -webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABeCAYAAADc6BHlAAANt0lEQVR42u1de7BVZRX/ffuce+Fyr4lBYD5QHgoiPoB8hFpa+SoLi0F7aOlYAQ4hI5mjjs5IpQMlMmOaAck4vvIxQ6Wm4BjSmJjEjIGoQaFCiJqTGIjcc8/Zv/44a8nia+/z3Ofee865e+bMPnfu3t/+9lrfev++dRwSPEhOAHA2gNMBHAtgqPzLyTkD4GUAzwJ4BsBy59wuuTflnMuh7yiL4I5kQPI8kk+S7GR5x0aSc0l+QsZL91G1dOKn5Pw1j6hZkjmSYQzRc+YaPbaSnCLjBc1Ex2peVtXKIAAhgE75OyXjugLP1GtCAFkAhwB4hOR851xIMkXS9S3zwhIQyPlkWcUhKz9UKkjydithfRJQ/NiT0DxSALoAXE5yunMu1wxMSIIBSRrONIAcgIUkRwEIG90mJPFynUK0JA4HgAD6AbjOOccCtqTpGUA57wDwoSFeElJAAN8gOVxUUdDHgHgvaH8AbUK0pFZrTqRgcoKS2rAqqL8Y0MQdLQBnyPewjwHxR6ZG83IAxpFsk9jAlRCVp417nGoWFXSwZxOSMsYa5LWVEpU75+icyzrnQgCol7xSEgw4tIZqIleMsZrEI7k/yctIPkryZZI3aa6qUSPhtJznSQTbxeQOjar/TfIAVTFRiUD5PpXkpohxRvX2/FI1E9MVP7ZGBpjiYbkofZ/XMi4k+XMADwEYJXmlnJGcQcXsRr1LQRvJ100+J4kja77fag1rRCb2Ni8Da48PSB4aIz0pI8FBPaeijyuSei73UDX2Dsnz44gn52lybcZ7vs7nJT+r6tuEupUAs3rmJKj/dYw/kRwR5UoKAR3JISR3CLFzMeP8xJurJfwpJH9FcgPJe0i21pUkSBXMkXwuQm1UYnD1/jtJ9ourjhliTot5ro61i+QhhmkqNYNIPhgxh8/2VOwQVEJ88bVHApgoxi5VhSHX+69yzk13znXKM7IF7hsi9/qub1bG+oVz7l9CUCdu6nAAzwO4AHsLQRkx2BM919pfbOleE9iZVXhDlerH6u1pOnYhvWzczhPMvRmZQ0b+/gvJdiGcrvwRJDdHzFcl6Ju+1EXFED1uM4wObjMvlKuwApYjuZPkueUU5A0TLhVVY49nTdwQyKeN5LqYxRLKPCZ4Bt7ai7EkZ5L8Uo8zwUxwehW6PzRMO6MSNIRhwjiSC8SgXmqk0+r9K4yk+PMISW4n2RExdjvJRR7TTuuxPJOBoLSSfM0jZCXezvdl3JZqFkNccCXzbSX5SsxcdR53mthAiX+EqDJl1Idy/9KoBaNOSXet/h9Wsfr1pa+qhvgRBjJt7Yc5DyL5vlntdvV3CY5ptLE/AckOkn/3pEbf9VGf+Z66StXEnTX69BDjf4cVRrj3KvFrtWqMrWon+bY8t1PmkDWEvdoQThfY7yJUls59mbcYldHDSH4siilJez6/qXD1K8M2Gg/FdRNsZrJhgj3uikhLfCfGWOv7/jZCXV1Dcg/JbSQfIDkpUWNtJndxFaon2xMBj1mhB5O8UeCTD5Oc6kmKFnP+UcRezJX7WuV8TMz7LkxEEgyXhyegeu7pCQ8ijgiGOapOJhUAmOk7TJRr+5lUfGjyUV2GeZ/21ZV6Z3ZOQZHVo+7c/ZIaLrfwTnnGbgDXyZjsTgZIyvqjaFY/Anmx0e9IiZC7vDlmJLr+vXNurdAjI+ez5P6UnBXXFAI4zY4vFTs653IKvyxV9dyegNezuLfWac0KnRBht/TYJoY2MHQZJu6pLzX6zndYT4/kgZI7W0RyTEEVZW6aVWW6QSPeE2xw1AuZ4EyAuUGMqnpOT5A80niDyrBTYzIBSqvr5br+cv62uWYPyTnFiD8lJt9eDvFJ8sVuCVSSY0IguaMzlPCePfQ9pmyMvZjiMWC+/G+3ufbLfkSXds51Sci9VHRZukLAVSj6/2nReWnJQPbKwzlHs0tns3z2KX96t4yKQYMoyPhFr3SrWd8WsRMOwE1pj/hZIf4fAHTIzZWuXL1vTb3UOSRt7WTuDgCF8FGOw+GIRnEEAF4AsFmkJgotoqp4XLoI8avxY/Xe12uAG6qpJBSZq/6vI6KGoF7iMpWoiPv2GSsg2SLE/0yCxLcFkt31xIBSpES+HuExQFXMLuRRGj5WKirv5QLR+acmTHxdCTsBbGskBhRwH1WvL3bObRV7YhnwZgSk558ByfMAPAqgPcGVrwHXQADDGwXhbDy5IcYGOBNw7gJwS0zA+Zp3PQCsDABcI4TKJEwklYIOoOGBzWp8lzjntgEIIrymwMsOAMDSAMA5AJYAaBWdnZSq0AkcZzyLujcBch6O/P4FGoK+A+Cn8q5hBB1e9cZ5GsDqwDm30zn3PQDXGp8/THCyk0rwLOqNAW1CdBq1fa1z7l1Z/SywIJ1IzJXOOfr100tMfqMarI/Nj2zVmmu9YzEjNqd3GjBAEJVqMRH0UJLvyfU/+L/cmElBnGkurJYJev/5mnNHYyDCf2TSNP8lOSYOCm9SHGlBe98Sm5g0DxhtQLddCTDgsUbYfG3oM9dI+GWlIDtI9iP5qaKFGvOQkST/lgATtIhzUjE0g5YHiwG0eoEKulfe7e5yYTUlVcnMgzpI/rFKJqgUPFXBZFO9tD3DcyS3kBxQTqa3rBKlYcIAkk8lxIRL4yCAcr5Y9gRMI/nxXsqENMn1JMfXfH+B3XFI8o4qmKCFmbcNajnwzou8e7aYPQJBL6oXDDXIh6DboOjyvRomqBQ8Q7K/V977gge0teN/vTftZPHBX90JS0x5TMhUUSOe7KELHjGoAp9hO0gOVlRBL8sJod6YoJib8WbMdgHIRkFCtKx5SqP2EEqXWbILJc16OUkAmIF8+a2ljFDeAfjAjBnEbPDQStR2AOs0xyJnvZ5N1+gvRhLKtQljzHj7kXzXA9DmzJjTjCPgqnLtGpwJmTKQEucYgG6K5PNmDAvzuNWCg7F3a+wMkj8z6LM+JpTIBF3VV2JfyMZkT/+vt96PiROGklzjjXlzM/WYq1Yd6ep+ycAE1a07VtzRk82YKROopUkuN1nILuMpzeuThPz3X5bABCXad02SKmo/cNrLTZ0XIWXWdf18nyTsy4RMkX3BezQesLC/Am0J7vaMs1VrOZI3NHX3XY8Jy0pggv5/LsmjvLFG6o4Ts9drYwwWU58xMyrP1JRMkCzqyiLqyO/vsEHS3xuEqMebcQdIHiln3NWcIf5bsgnDYvBd3H7fZumo205yVQlMiPvfV4R4LaKeVsVIwEaSJ/ruqvw9sNrUdl1KkVFFQ0i+UUJ5MzQZ0075+zovX3SibCHKyAbtV0lerUT2koanklwhXVeeJHlyuUyoB0R3qUw4QlLLpe6q12s2ie63jfj6kzxS1E3a38Up3482+H49PjReUlBK8z9fiupVEtSFPEmIUuoeM5WWWaYI0hJBqBaj99WLWmNihdDYif9YO1GsAiebSlZEGfd6ZcI5Xo24lKxpRnfUlyhtZ8aoO7Uzt8XsdLf95wZLJy4dY3rdu7eGCbMrTN6tkHLlCJKHykoeT3KYB6n5dYxh1w3aKyJWuv1+kewHs1W80xsiwDNEWlgmE3Kez7/HdEmZ4Rnq5TESoDbhx96CUMn5pNfISdXWeyQHN0qDP5teeKhMJmQ9oipTLvEY8ISJsru8fbt/ltR34M3lLM9Tsx28VtU6xxR0884T7YR+GYCXsHdfbbEjJR/FmOo9oz3g7zK5rp+MrXr7LgDnOud2yv0p2ZQyE8ByAMOwt9uWhY8/1nDNw42xGy1+eiVtb3SF/tUv1oitWCqfOSSPiZHCqz1d7zsBmXpo/FqtUT7bJNjCCrfBflXGai3gXgaepzPDUzlRHtN9DZ1dTaD1pbqz29QbMunt/vLp57chI3m8+dGguL4QOZJjG77GYJhwT4VobCXgm9KyrH8JscJ9BXJQ6v3M767V73oBviZAHlWxBsA4lL9PzTYQ2QxgFYBNYqjHi2F+GECLcy5D8nEAX0T+t29azRg5mcdqAJ9DHu0R+pstVM3FbMKo65zRUZIuqKQlTlhAeh60NkJaEGyPuXalrUNEIbcbXRVdlEBzkC7TR7RLagUHeFDIg8RL2i6Jus0kr49oRRZEpC3aSe7XyExYkmA/apWKB/z2ZJrpJDlKAzlvtVsJaBXJWSBB29SGK3+ajGabwFKS2CJl3dUbbVpE244VKtiQnCipk43emBc2ZP3ZuIpjpatuNqHW+MrIR7RNZYFeoynBKa2OsDOdHrAs1ciqaGbCP42iTNhN8n6SF0o0PsIr6BwWUTK1teidJAc1dNHfMOHxBFVR1Dg5yawe5Bnpeaaok/O2pC5tePyRSR0cKMDdXII/kRKa7KoyZLaxDSoJCyLsyFvSK67xkRbGJfxWDX6lyd869b5ppGeZMFui7JDkC5rYaxqYi1EJyxJWRVFe0jqzMdAyYSDJcU0Jhzeq6HDmfxUpyR8MirINa40kpCKAAE0J/vW9olpIgR33HZIXREFe0Ic5/WgjR62YYA39WpKn19rgBnXSRE+PWaaTY9LZSL874tsA3qjRs+raK1qcYDudXETBf7PuS2tKhHWJBnmXyXpmjTsZFsGdZmN+9lAJf4XpbRT0ET9eCq5PQN93ChT+LkFid/REkxBXh10LHfIdHqcjX0EbAOBo07fzMOR/Zl0rXVuQ710aAliPfNXsZQDrALxifzBOPK5cd1a7/gfYOEDx4mpHsQAAAABJRU5ErkJggg==);
  mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABeCAYAAADc6BHlAAANt0lEQVR42u1de7BVZRX/ffuce+Fyr4lBYD5QHgoiPoB8hFpa+SoLi0F7aOlYAQ4hI5mjjs5IpQMlMmOaAck4vvIxQ6Wm4BjSmJjEjIGoQaFCiJqTGIjcc8/Zv/44a8nia+/z3Ofee865e+bMPnfu3t/+9lrfev++dRwSPEhOAHA2gNMBHAtgqPzLyTkD4GUAzwJ4BsBy59wuuTflnMuh7yiL4I5kQPI8kk+S7GR5x0aSc0l+QsZL91G1dOKn5Pw1j6hZkjmSYQzRc+YaPbaSnCLjBc1Ex2peVtXKIAAhgE75OyXjugLP1GtCAFkAhwB4hOR851xIMkXS9S3zwhIQyPlkWcUhKz9UKkjydithfRJQ/NiT0DxSALoAXE5yunMu1wxMSIIBSRrONIAcgIUkRwEIG90mJPFynUK0JA4HgAD6AbjOOccCtqTpGUA57wDwoSFeElJAAN8gOVxUUdDHgHgvaH8AbUK0pFZrTqRgcoKS2rAqqL8Y0MQdLQBnyPewjwHxR6ZG83IAxpFsk9jAlRCVp417nGoWFXSwZxOSMsYa5LWVEpU75+icyzrnQgCol7xSEgw4tIZqIleMsZrEI7k/yctIPkryZZI3aa6qUSPhtJznSQTbxeQOjar/TfIAVTFRiUD5PpXkpohxRvX2/FI1E9MVP7ZGBpjiYbkofZ/XMi4k+XMADwEYJXmlnJGcQcXsRr1LQRvJ100+J4kja77fag1rRCb2Ni8Da48PSB4aIz0pI8FBPaeijyuSei73UDX2Dsnz44gn52lybcZ7vs7nJT+r6tuEupUAs3rmJKj/dYw/kRwR5UoKAR3JISR3CLFzMeP8xJurJfwpJH9FcgPJe0i21pUkSBXMkXwuQm1UYnD1/jtJ9ourjhliTot5ro61i+QhhmkqNYNIPhgxh8/2VOwQVEJ88bVHApgoxi5VhSHX+69yzk13znXKM7IF7hsi9/qub1bG+oVz7l9CUCdu6nAAzwO4AHsLQRkx2BM919pfbOleE9iZVXhDlerH6u1pOnYhvWzczhPMvRmZQ0b+/gvJdiGcrvwRJDdHzFcl6Ju+1EXFED1uM4wObjMvlKuwApYjuZPkueUU5A0TLhVVY49nTdwQyKeN5LqYxRLKPCZ4Bt7ai7EkZ5L8Uo8zwUxwehW6PzRMO6MSNIRhwjiSC8SgXmqk0+r9K4yk+PMISW4n2RExdjvJRR7TTuuxPJOBoLSSfM0jZCXezvdl3JZqFkNccCXzbSX5SsxcdR53mthAiX+EqDJl1Idy/9KoBaNOSXet/h9Wsfr1pa+qhvgRBjJt7Yc5DyL5vlntdvV3CY5ptLE/AckOkn/3pEbf9VGf+Z66StXEnTX69BDjf4cVRrj3KvFrtWqMrWon+bY8t1PmkDWEvdoQThfY7yJUls59mbcYldHDSH4siilJez6/qXD1K8M2Gg/FdRNsZrJhgj3uikhLfCfGWOv7/jZCXV1Dcg/JbSQfIDkpUWNtJndxFaon2xMBj1mhB5O8UeCTD5Oc6kmKFnP+UcRezJX7WuV8TMz7LkxEEgyXhyegeu7pCQ8ijgiGOapOJhUAmOk7TJRr+5lUfGjyUV2GeZ/21ZV6Z3ZOQZHVo+7c/ZIaLrfwTnnGbgDXyZjsTgZIyvqjaFY/Anmx0e9IiZC7vDlmJLr+vXNurdAjI+ez5P6UnBXXFAI4zY4vFTs653IKvyxV9dyegNezuLfWac0KnRBht/TYJoY2MHQZJu6pLzX6zndYT4/kgZI7W0RyTEEVZW6aVWW6QSPeE2xw1AuZ4EyAuUGMqnpOT5A80niDyrBTYzIBSqvr5br+cv62uWYPyTnFiD8lJt9eDvFJ8sVuCVSSY0IguaMzlPCePfQ9pmyMvZjiMWC+/G+3ufbLfkSXds51Sci9VHRZukLAVSj6/2nReWnJQPbKwzlHs0tns3z2KX96t4yKQYMoyPhFr3SrWd8WsRMOwE1pj/hZIf4fAHTIzZWuXL1vTb3UOSRt7WTuDgCF8FGOw+GIRnEEAF4AsFmkJgotoqp4XLoI8avxY/Xe12uAG6qpJBSZq/6vI6KGoF7iMpWoiPv2GSsg2SLE/0yCxLcFkt31xIBSpES+HuExQFXMLuRRGj5WKirv5QLR+acmTHxdCTsBbGskBhRwH1WvL3bObRV7YhnwZgSk558ByfMAPAqgPcGVrwHXQADDGwXhbDy5IcYGOBNw7gJwS0zA+Zp3PQCsDABcI4TKJEwklYIOoOGBzWp8lzjntgEIIrymwMsOAMDSAMA5AJYAaBWdnZSq0AkcZzyLujcBch6O/P4FGoK+A+Cn8q5hBB1e9cZ5GsDqwDm30zn3PQDXGp8/THCyk0rwLOqNAW1CdBq1fa1z7l1Z/SywIJ1IzJXOOfr100tMfqMarI/Nj2zVmmu9YzEjNqd3GjBAEJVqMRH0UJLvyfU/+L/cmElBnGkurJYJev/5mnNHYyDCf2TSNP8lOSYOCm9SHGlBe98Sm5g0DxhtQLddCTDgsUbYfG3oM9dI+GWlIDtI9iP5qaKFGvOQkST/lgATtIhzUjE0g5YHiwG0eoEKulfe7e5yYTUlVcnMgzpI/rFKJqgUPFXBZFO9tD3DcyS3kBxQTqa3rBKlYcIAkk8lxIRL4yCAcr5Y9gRMI/nxXsqENMn1JMfXfH+B3XFI8o4qmKCFmbcNajnwzou8e7aYPQJBL6oXDDXIh6DboOjyvRomqBQ8Q7K/V977gge0teN/vTftZPHBX90JS0x5TMhUUSOe7KELHjGoAp9hO0gOVlRBL8sJod6YoJib8WbMdgHIRkFCtKx5SqP2EEqXWbILJc16OUkAmIF8+a2ljFDeAfjAjBnEbPDQStR2AOs0xyJnvZ5N1+gvRhLKtQljzHj7kXzXA9DmzJjTjCPgqnLtGpwJmTKQEucYgG6K5PNmDAvzuNWCg7F3a+wMkj8z6LM+JpTIBF3VV2JfyMZkT/+vt96PiROGklzjjXlzM/WYq1Yd6ep+ycAE1a07VtzRk82YKROopUkuN1nILuMpzeuThPz3X5bABCXad02SKmo/cNrLTZ0XIWXWdf18nyTsy4RMkX3BezQesLC/Am0J7vaMs1VrOZI3NHX3XY8Jy0pggv5/LsmjvLFG6o4Ts9drYwwWU58xMyrP1JRMkCzqyiLqyO/vsEHS3xuEqMebcQdIHiln3NWcIf5bsgnDYvBd3H7fZumo205yVQlMiPvfV4R4LaKeVsVIwEaSJ/ruqvw9sNrUdl1KkVFFQ0i+UUJ5MzQZ0075+zovX3SibCHKyAbtV0lerUT2koanklwhXVeeJHlyuUyoB0R3qUw4QlLLpe6q12s2ie63jfj6kzxS1E3a38Up3482+H49PjReUlBK8z9fiupVEtSFPEmIUuoeM5WWWaYI0hJBqBaj99WLWmNihdDYif9YO1GsAiebSlZEGfd6ZcI5Xo24lKxpRnfUlyhtZ8aoO7Uzt8XsdLf95wZLJy4dY3rdu7eGCbMrTN6tkHLlCJKHykoeT3KYB6n5dYxh1w3aKyJWuv1+kewHs1W80xsiwDNEWlgmE3Kez7/HdEmZ4Rnq5TESoDbhx96CUMn5pNfISdXWeyQHN0qDP5teeKhMJmQ9oipTLvEY8ISJsru8fbt/ltR34M3lLM9Tsx28VtU6xxR0884T7YR+GYCXsHdfbbEjJR/FmOo9oz3g7zK5rp+MrXr7LgDnOud2yv0p2ZQyE8ByAMOwt9uWhY8/1nDNw42xGy1+eiVtb3SF/tUv1oitWCqfOSSPiZHCqz1d7zsBmXpo/FqtUT7bJNjCCrfBflXGai3gXgaepzPDUzlRHtN9DZ1dTaD1pbqz29QbMunt/vLp57chI3m8+dGguL4QOZJjG77GYJhwT4VobCXgm9KyrH8JscJ9BXJQ6v3M767V73oBviZAHlWxBsA4lL9PzTYQ2QxgFYBNYqjHi2F+GECLcy5D8nEAX0T+t29azRg5mcdqAJ9DHu0R+pstVM3FbMKo65zRUZIuqKQlTlhAeh60NkJaEGyPuXalrUNEIbcbXRVdlEBzkC7TR7RLagUHeFDIg8RL2i6Jus0kr49oRRZEpC3aSe7XyExYkmA/apWKB/z2ZJrpJDlKAzlvtVsJaBXJWSBB29SGK3+ajGabwFKS2CJl3dUbbVpE244VKtiQnCipk43emBc2ZP3ZuIpjpatuNqHW+MrIR7RNZYFeoynBKa2OsDOdHrAs1ciqaGbCP42iTNhN8n6SF0o0PsIr6BwWUTK1teidJAc1dNHfMOHxBFVR1Dg5yawe5Bnpeaaok/O2pC5tePyRSR0cKMDdXII/kRKa7KoyZLaxDSoJCyLsyFvSK67xkRbGJfxWDX6lyd869b5ppGeZMFui7JDkC5rYaxqYi1EJyxJWRVFe0jqzMdAyYSDJcU0Jhzeq6HDmfxUpyR8MirINa40kpCKAAE0J/vW9olpIgR33HZIXREFe0Ic5/WgjR62YYA39WpKn19rgBnXSRE+PWaaTY9LZSL874tsA3qjRs+raK1qcYDudXETBf7PuS2tKhHWJBnmXyXpmjTsZFsGdZmN+9lAJf4XpbRT0ET9eCq5PQN93ChT+LkFid/REkxBXh10LHfIdHqcjX0EbAOBo07fzMOR/Zl0rXVuQ710aAliPfNXsZQDrALxifzBOPK5cd1a7/gfYOEDx4mpHsQAAAABJRU5ErkJggg==);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  filter:drop-shadow(0 0 3px rgba(20,4,36,1)) drop-shadow(0 0 14px rgba(192,132,252,1));
  animation:korrmawart 1.9s ease-in-out infinite}
.tart.korr-maw-art::before{width:30px;height:29px}

@keyframes korrmawart{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%    {transform:translate(-50%,-58%) scale(1.08)}
}

@media (prefers-reduced-motion: reduce){
  .korr-maw::after,.art.korr-maw-art::before,.tart.korr-maw-art::before{animation:none}
}

/* Bleached Bonepile's bones, bottom-right of its tile */
.bp-counter{position:absolute;right:3px;bottom:3px;z-index:9;height:17px;padding:0 6px 0 5px;display:flex;align-items:center;gap:3px;border-radius:9px;
  background:linear-gradient(180deg,#5a5246,#2a2620);border:1px solid #e9dcc0;box-shadow:0 0 0 1px #15120e,0 0 8px #e9dcc055;pointer-events:auto;white-space:nowrap}
.bp-counter i{width:9px;height:5px;border-radius:3px;background:#5f574b;box-shadow:inset 0 0 0 1px #8a8070}
.bp-counter i.on{background:linear-gradient(180deg,#fffaf0,#d9ccb0);box-shadow:0 0 5px #fff3d6aa}
.bp-counter b{font:700 10px/1 var(--mono,monospace);color:#f4ead6;margin-left:2px}
.bp-counter.off{opacity:.45}

/* ===================== Bounty Marker ===================== */
/* A bounty is worth seeing from across the table, so the marked card carries a
   ring and a crosshair rather than only a line in the log. Sits inside the card
   bounds so no ancestor's overflow can clip it. */
.bounty-mark{position:relative;
  outline:2px solid rgba(255,183,71,.95);outline-offset:-2px;border-radius:8px;
  box-shadow:0 0 12px rgba(255,159,28,.75), inset 0 0 18px rgba(255,159,28,.3)}
.bounty-mark::before{
  content:"";position:absolute;right:5px;top:5px;width:20px;height:20px;
  pointer-events:none;z-index:60;border-radius:50%;
  border:2px solid #ffb347;
  background:
    linear-gradient(#ffb347,#ffb347) center/2px 12px no-repeat,
    linear-gradient(#ffb347,#ffb347) center/12px 2px no-repeat;
  filter:drop-shadow(0 0 3px rgba(26,12,0,.95)) drop-shadow(0 0 7px rgba(255,159,28,.95));
  animation:bountypulse 2.1s ease-in-out infinite}

@keyframes bountypulse{
  0%,100%{opacity:.85;transform:scale(1)}
  50%    {opacity:1;transform:scale(1.14)}
}

@media (prefers-reduced-motion: reduce){
  .bounty-mark::before{animation:none}
}

/* Open Season volley */
.os-volley{position:fixed;inset:0;pointer-events:none;z-index:100008}
.os-dusk{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(255,190,90,.14),rgba(60,30,6,.38) 70%,rgba(20,10,2,.55) 100%)}
.os-arrow{position:absolute;left:0;top:0;width:80px;height:12px;will-change:transform}
.os-arrow svg{width:80px;height:12px;overflow:visible}
.os-shadow{stroke:rgba(0,0,0,.45);stroke-width:3;fill:rgba(0,0,0,.35)}
.os-shaft{stroke:#c89a5c;stroke-width:2.2;stroke-linecap:round}
.os-head{fill:#e8eef5;stroke:#7d8794;stroke-width:.6}
.os-fletch{fill:#b8352c;stroke:#5a120e;stroke-width:.5}
.os-splinter{position:absolute;width:3px;height:9px;border-radius:1px;background:#d9b07a}
.os-leaf{position:absolute;width:11px;height:8px;border-radius:70% 0 70% 0;background:#d9792a;box-shadow:0 0 4px #b8551a}
@media(prefers-reduced-motion:reduce){.os-dusk{opacity:.6}}

/* ===================== Nemeas: Health as Attack ===================== */
.m .stat.atk.hp-attack{
  background:linear-gradient(160deg,#f4f7fb 0%,#c3ccd8 45%,#8d98a8 100%);
  color:#17202c;border-color:#e9eef5;
  box-shadow:0 0 0 1px #5d6878,0 0 12px rgba(214,224,238,.75)}
.m .stat.atk.hp-attack::before{
  content:"";position:absolute;left:50%;top:-15px;width:15px;height:17px;transform:translateX(-50%);
  pointer-events:none;z-index:3;
  background:linear-gradient(160deg,#ffffff 0%,#cfd7e2 50%,#8792a3 100%);
  clip-path:polygon(50% 100%,8% 72%,0 12%,50% 0,100% 12%,92% 72%);
  filter:drop-shadow(0 0 2px rgba(10,16,26,.95)) drop-shadow(0 0 5px rgba(220,230,244,.8))}

/* ===================== The Hunter's Ledger card back ===================== */
.cardback-prototype-preview[data-back="back-hunters-ledger"],.reward-cardback-visual[data-back="back-hunters-ledger"],.back[data-card-back="back-hunters-ledger"],.pile[data-card-back="back-hunters-ledger"],.tdeckpile[data-card-back="back-hunters-ledger"],.card-back-preview-face.back[data-card-back="back-hunters-ledger"],:root[data-road-cardback="back-hunters-ledger"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back]){background:#050302 url("/assets/card-backs/hunters-ledger.svg?v=eb9a9be8b3") center/cover no-repeat!important;border-color:#e2b25a!important;color:#f3d99a!important;box-shadow:inset 0 0 0 2px #120a04,inset 0 0 0 3px #e2b25a88,0 0 18px #e2b25a44!important}
.cardback-prototype-preview[data-back="back-hunters-ledger"]::before,.reward-cardback-visual[data-back="back-hunters-ledger"]::before,.back[data-card-back="back-hunters-ledger"]::before,.pile[data-card-back="back-hunters-ledger"]::before,.tdeckpile[data-card-back="back-hunters-ledger"]::before,.card-back-preview-face.back[data-card-back="back-hunters-ledger"]::before,.cardback-prototype-preview[data-back="back-hunters-ledger"]::after,.reward-cardback-visual[data-back="back-hunters-ledger"]::after,.back[data-card-back="back-hunters-ledger"]::after,.pile[data-card-back="back-hunters-ledger"]::after,.tdeckpile[data-card-back="back-hunters-ledger"]::after,.card-back-preview-face.back[data-card-back="back-hunters-ledger"]::after{display:none!important}
.cardback-prototype-preview[data-back="back-hunters-ledger"]>span{visibility:hidden}

/* ===================== The Bounty Board ===================== */
.bounty-list{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.bounty-plate{position:relative;overflow:hidden;cursor:default;text-align:left;display:flex;flex-direction:column;gap:6px;border-color:color-mix(in srgb,var(--fac,#e2b25a) 55%,#3a2a14)}
.bounty-plate.claimed{opacity:.72}
.bounty-plate em{color:var(--fac,#e2b25a)}
.bounty-plate.claimed em{color:#9fd7a4}
.bounty-plate .bounty-meta{color:#b4bfca;font:9px/1.5 var(--mono)}
.bounty-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.bounty-actions button{flex:1;min-width:100px;padding:7px 8px;border:1px solid var(--rule);border-radius:3px;background:rgba(0,0,0,.25);color:var(--ink);font:700 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.bounty-actions button:hover{border-color:var(--fac,#e2b25a);color:var(--fac,#e2b25a)}
.bounty-actions button:disabled{opacity:.45;cursor:default}
.bounty-empty{padding:18px;border:1px dashed var(--rule);border-radius:6px;color:#b4bfca;font:11px/1.6 var(--mono)}
.bounty-ledger{margin:14px 0 4px;color:#e8c77e;font:10px var(--mono);letter-spacing:.12em}
.bounty-ledger b{color:#fff2c4}
.bounty-rates-head{margin:26px 0 8px;font-family:var(--serif);font-weight:400;font-size:18px}
.bounty-rates{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 18px}
.bounty-rate{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;font:10px var(--mono);color:#cfd6df}
.bounty-rate i{grid-column:1/-1;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.bounty-rate i b{display:block;height:100%;background:var(--fac,#e2b25a)}
.bounty-rate small{color:#8d97a6}
.bounty-rates-note{margin-top:8px;color:#8d97a6;font:9px var(--mono)}
.bounty-reset{margin:-4px 0 14px;color:#e8c77e;font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:center}
.bounty-reset b{color:#fff2c4;font-variant-numeric:tabular-nums}

/* The wanted poster under the Black Road Pass, top right of the menu. */
.bounty-poster-open{position:fixed;right:18px;top:74px;z-index:198;display:flex;align-items:center;gap:10px;padding:7px 11px 7px 8px;border:1px solid #80652f;border-radius:4px;background:linear-gradient(145deg,#181308e8,#080b12ee);box-shadow:0 8px 28px #0008,0 0 18px #c3922d22;color:#f0d47e;cursor:pointer;backdrop-filter:blur(8px)}
.bounty-poster-open:hover{border-color:#e0b75a;box-shadow:0 10px 34px #000b,0 0 25px #c3922d44}
.bounty-poster-open:hover .bounty-poster-art{transform:rotate(0deg) scale(1.06)}
.bounty-poster-art{flex:none;width:30px;height:38px;transform:rotate(-5deg);transition:transform .2s ease;filter:drop-shadow(0 2px 3px #000a)}
.bounty-poster-open b,.bounty-poster-open small{display:block;text-align:left}
.bounty-poster-open b{font:800 9px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.bounty-poster-open small{margin-top:2px;color:#a89a7c;font:7px var(--mono);font-variant-numeric:tabular-nums}
.bounty-poster-open small i{font-style:normal;color:#f0d47e}
@media (max-width:700px){.bounty-poster-open{right:8px;top:62px}}

#finchChallenge{position:fixed;inset:0;z-index:26000;border:0;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:radial-gradient(ellipse at 50% 35%,#203332ee,#050910f7 65%);color:#f4ead5;overflow:auto}
#finchChallenge::backdrop{background:#04070df0}
.finch-scene{min-height:100%;display:grid;place-items:center;position:relative;padding:28px;box-sizing:border-box;overflow:hidden}
.finch-ring{position:absolute;width:min(78vw,640px);aspect-ratio:1;border:1px solid #d0b16a44;border-radius:50%;box-shadow:0 0 90px #a7cebd14,inset 0 0 90px #a7cebd14;top:50%;left:50%;transform:translate(-50%,-50%)}
.finch-ring:before,.finch-ring:after{content:"";position:absolute;inset:18px;border:1px dashed #d0b16a44;border-radius:50%;animation:finch-orbit 45s linear infinite}
.finch-ring:after{inset:-24px;border-style:solid;border-color:transparent #d0b16a55;animation-direction:reverse}
.finch-invitation{position:relative;text-align:center;max-width:510px;animation:finch-reveal 1.8s both .7s}
.finch-invitation .finch-kicker{color:#d7b36c;letter-spacing:.3em;font:700 10px var(--mono,monospace);text-transform:uppercase}
.finch-invitation h2{font:500 clamp(52px,8vw,82px)/1 var(--serif,Georgia);letter-spacing:-.05em;margin:16px 0;color:#fff3da;text-shadow:0 0 42px #e0ba7644}
.finch-invitation p{font:13px/1.6 var(--ui-font,system-ui);color:#b6bdbd;margin:14px auto;max-width:430px}
.finch-prey{padding:12px 20px;border-block:1px solid #d7b36c44;color:#ead5a8!important}
.finch-rules{font-size:12px!important;color:#c8b48c!important}
.finch-actions{display:flex;justify-content:center;gap:12px;margin-top:24px;flex-wrap:wrap}
.finch-actions button{padding:13px 22px;border:1px solid #dfba71;background:#d9b66b;color:#121921;font:700 12px var(--ui-font,system-ui);cursor:pointer;border-radius:2px}
.finch-actions button.secondary{background:#0c131b;color:#d0c7b4;border-color:#656255}
.finch-actions button:focus-visible{outline:3px solid #fff;outline-offset:5px}
.finch-actions button:disabled{opacity:.55;cursor:wait}
.finch-bird{width:200px;margin:0 auto -18px;filter:drop-shadow(0 0 16px #eac87666);animation:finch-flight 2.4s cubic-bezier(.12,.6,.2,1) both}
.finch-wing{transform-box:fill-box;transform-origin:90% 90%;animation:finch-flap .28s ease-in-out 7 alternate}
.finch-wing.far{transform-origin:10% 90%;animation-direction:alternate-reverse}
.finch-feather{position:absolute;top:-10%;left:var(--x);width:7px;height:30px;border-radius:90% 0 90% 0;background:linear-gradient(140deg,#e5c582,#111b25 75%);opacity:0;animation:finch-feather 7s ease-in infinite;animation-delay:var(--delay);pointer-events:none}
body.finch-hunted #game{box-shadow:inset 0 0 90px #ccb16b26}
body.finch-hunted #ehero{outline:1px solid #d9b66b;box-shadow:0 0 25px #d9b66b55}
#finchAura{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:195;pointer-events:none;border:1px solid #bd9c57;background:#0a1119ed;color:#e9d09a;padding:7px 14px;text-align:center;border-radius:3px;max-width:65vw;font:11px/1.5 var(--ui-font,system-ui)}
#finchAura b{letter-spacing:.18em;text-transform:uppercase;display:block;font-size:10px}
#finchAura span{color:#b7c8c1}
body.finch-hunted #rematch{display:none!important}
@keyframes finch-flight{0%{transform:translate(-85vw,-35vh) rotate(-20deg) scale(.35);opacity:0}25%{opacity:1}55%{transform:translate(18vw,-8vh) rotate(15deg) scale(1.1)}100%{transform:translate(0,0) rotate(0) scale(1)}}
@keyframes finch-flap{from{transform:rotate(-16deg) scaleY(.45)}to{transform:rotate(12deg) scaleY(1)}}
@keyframes finch-reveal{from{opacity:0}to{opacity:1}}
@keyframes finch-orbit{to{transform:rotate(360deg)}}
@keyframes finch-feather{10%{opacity:.7}90%{opacity:.3}to{transform:translate(90px,110vh) rotate(170deg);opacity:0}}
@media(max-width:600px){.finch-scene{padding:20px}.finch-bird{width:145px}.finch-invitation h2{font-size:58px}.finch-invitation blockquote{font-size:17px}#finchAura{max-width:80vw;font-size:9px}}
@media(prefers-reduced-motion:reduce){#finchChallenge *,#finchChallenge *:before,#finchChallenge *:after{animation:none!important}.finch-feather{display:none}}

.nr-line{position:relative}
.nr-ammo{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);z-index:15;display:flex;gap:3px;padding:3px 4px;border-radius:8px;background:#071726e8;border:1px solid #416780;pointer-events:none}
.nr-ammo i{display:block;width:6px;height:6px;border-radius:50%;background:#132b3a;border:1px solid #608399;box-sizing:border-box}
.nr-ammo i.loaded{background:#c9f3ff;border-color:#edfcff;box-shadow:0 0 4px #79d6ff}
.nr-credit-counter{position:absolute;right:4px;bottom:4px;z-index:14;min-width:23px;padding:3px 5px;border:1px solid #bdeaff;border-radius:6px;background:#0c233a;color:#def5ff;font:800 11px var(--mono);box-shadow:0 0 9px #55bdff66;pointer-events:none}
#game .rear.nr-line{padding-bottom:38px;min-height:90px}
.tsrear.nr-line{height:82px;padding-bottom:34px}
.cat-shared-works.nr-line,.cat-boss-works.nr-line{padding-bottom:38px;min-height:104px}
.nr-route{position:absolute;left:0;bottom:0;height:38px;overflow:visible;pointer-events:none;z-index:4}
.nr-track-bed{fill:none;stroke:#388fbd;stroke-width:15;opacity:.10}
.nr-sleepers{fill:none;stroke:#6596ad;stroke-width:15;stroke-dasharray:2 10;opacity:.6}
.nr-rail-halo{fill:none;stroke:#63ccff;stroke-width:5;opacity:.18}
.nr-rail{fill:none;stroke:#a2e5ff;stroke-width:1.3;filter:drop-shadow(0 0 3px #3aa9eb)}
.nr-platform{fill:#112c41;stroke:#7ed4ff;stroke-width:1.1}
.nr-platform-link{stroke:#80d2fa;stroke-width:1;opacity:.5}
.nr-engine{filter:drop-shadow(0 0 3px #62caff)}
.nr-engine-body{fill:#16364d;stroke:#b1e8ff;stroke-width:1}
.nr-engine-window{fill:#c5f3ff}
.nr-engine-wheel{fill:#091925;stroke:#94dfff;stroke-width:1}
.nr-headlight{fill:#ccf7ff;filter:drop-shadow(0 0 3px #a9edff)}
.nr-beam{fill:#89dfff;opacity:.12}
.nr-stop-light{box-shadow:inset 0 -2px #85d9ff88,0 3px 10px #3eb9ff25}
.nr-service-label{fill:#bceaff;font:600 7px var(--mono);letter-spacing:.7px}
.nr-service-count{fill:#dbf6ff;font:700 8px var(--mono);paint-order:stroke;stroke:#10283b;stroke-width:3px}
@media(max-width:600px){#game .rear.nr-line{min-height:76px}#game:has(.nr-line) .field{min-height:156px}}
@media(prefers-reduced-motion:reduce){.nr-engine,.nr-rail{filter:none}}

.aug-pattern-hud{position:fixed;right:14px;bottom:74px;z-index:85;pointer-events:none;display:grid;gap:5px;max-width:430px}
.aug-pattern-hud[hidden]{display:none}
/* Arcturia, Remade in Loathing: her Work flickers behind cracked glass */
.loathing-work{animation:loathingFlicker 3.2s steps(1,end) infinite}
.loathing-work::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.45;background:linear-gradient(115deg,transparent 46%,#e8e2ff55 47%,transparent 48%),linear-gradient(62deg,transparent 30%,#e8e2ff44 31%,transparent 32%),linear-gradient(160deg,transparent 64%,#e8e2ff33 65%,transparent 66%)}
@keyframes loathingFlicker{0%,100%{filter:none}7%{filter:brightness(1.6) contrast(1.2)}8%{filter:none}41%{filter:grayscale(1) brightness(.75)}43%{filter:none}77%{filter:brightness(1.4)}78%{filter:none}}
@media(prefers-reduced-motion:reduce){.loathing-work{animation:none}}
.loathing-count{position:absolute;right:3px;bottom:3px;z-index:9;padding:1px 6px;border-radius:8px;font:700 10px/1.4 var(--mono,monospace);color:#e8e2ff;background:linear-gradient(180deg,#3a2f5a,#1a1430);border:1px solid #a99cff;box-shadow:0 0 8px #a99cff66;pointer-events:auto}
.loathing-count.near{color:#ffd6d6;border-color:#e05a5a;box-shadow:0 0 12px #e05a5aaa;animation:loathingNear 1.1s ease-in-out infinite}
@keyframes loathingNear{50%{box-shadow:0 0 20px #ff6a6a}}.aug-pattern-row{background:#101822ed;border:1px solid #b8a36866;border-radius:9px;padding:7px 11px;color:#dfd6b4;box-shadow:0 3px 18px #0008;font-size:10px}
.aug-pattern-row b,.aug-pattern-row small{display:block}.aug-pattern-row span{display:flex;gap:5px;margin:4px 0}.aug-pattern-row i{font-style:normal;border:1px solid #8e967e66;padding:3px 5px;border-radius:4px;color:#939f99}.aug-pattern-row i.done{color:#e9fbff;background:#36758880;border-color:#a8e6fc;box-shadow:inset 0 0 9px #83d9ff44}

/* ===================== Deck inspector ===================== */
/* Compact: one slim line for a known top card, then each cost as a small gem
   beside its cards. Counts only show from x2; added cards carry a violet dot. */
#tip:has(.deck-inspect){width:min(290px,calc(100vw - 28px))}
#tip:has(.deck-inspect) h3{font-size:15px}
.deck-inspect{max-height:min(44vh,300px);overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#ffffff26 transparent}
.deck-top{display:flex;align-items:baseline;gap:6px;margin:0 0 6px;padding:3px 7px;border-left:2px solid #e4b45c;border-radius:0 3px 3px 0;background:#e4b45c14;font-size:10.5px;line-height:1.35}
.deck-top b{flex:none;color:#e4b45c;font:800 7px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.deck-top span{color:#fff2c4}
.deck-top span i{color:#8d7a58;font-style:normal;margin:0 3px}
.deck-group{display:grid;grid-template-columns:15px 1fr;gap:0 7px;padding:3px 0;border-top:1px solid #ffffff0d}
.deck-group:first-of-type{border-top:0}
.deck-group>i{align-self:start;display:grid;place-items:center;width:15px;height:15px;margin-top:1px;border-radius:50%;background:#2a6bd1;color:#fff;font:800 8px var(--mono);font-style:normal}
.deck-row{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;line-height:1.5;white-space:nowrap}
.deck-row span{overflow:hidden;text-overflow:ellipsis}
.deck-row b{flex:none;color:#7f8897;font:600 9px var(--mono)}
.deck-row.added span{color:#c9a7ff}
.deck-row.added span::before{content:"";display:inline-block;width:5px;height:5px;margin:0 5px 1px 0;border-radius:50%;background:#a57cf0;box-shadow:0 0 4px #a57cf0}
.deck-row.known span{color:#fff2c4}
.deck-legend{margin-top:5px;padding-top:4px;border-top:1px solid #ffffff12;color:#7f8897;font:8px var(--mono)}
.deck-legend::before{content:"";display:inline-block;width:5px;height:5px;margin:0 5px 1px 0;border-radius:50%;background:#a57cf0}

.hold-charge{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .18s}
.hold-charge.on{opacity:1}
.hold-charge svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 6px #e0605c99)}
.hold-charge .track{fill:none;stroke:#0008;stroke-width:5}
.hold-charge .fill{fill:none;stroke:#e0605c;stroke-width:5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.hold-charge.on .fill{animation:holdChargeFill var(--dur) linear forwards}
.hold-charge .label{position:absolute;left:50%;top:100%;transform:translate(-50%,6px);white-space:nowrap;color:#f3c7c0;font:900 8px var(--mono,monospace);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 3px #000}
.hold-charge.done .fill{stroke:#ffd35c;animation:none;stroke-dashoffset:0}
@keyframes holdChargeFill{to{stroke-dashoffset:0}}
/* Card previews fall away while a charge builds, and stay away until it ends.
   The individual translate/rotate properties leave each preview's own
   positioning transform untouched. */
:root.hold-charging #tip,:root.hold-charging #actionPreview{opacity:0!important;translate:0 28px;rotate:3deg;pointer-events:none!important;transition:opacity .22s ease-in,translate .32s cubic-bezier(.5,0,.9,.6),rotate .32s ease-in!important}
@media (prefers-reduced-motion:reduce){:root.hold-charging #tip,:root.hold-charging #actionPreview{translate:none;rotate:none}}
@media (prefers-reduced-motion:reduce){.hold-charge.on .fill{animation-timing-function:steps(6,end)}}

.night-role-badge{position:absolute;z-index:16;top:-12px;left:10px;width:30px;height:21px;pointer-events:none;filter:drop-shadow(0 2px 2px #000) drop-shadow(0 0 5px #8fc8ff55);transform:rotate(-4deg)}
.night-role-badge svg{display:block;width:100%;height:100%;overflow:visible}
.night-role-badge .r-gold{fill:#e8c35c;stroke:#6b4a12;stroke-width:1;stroke-linejoin:round}.night-role-badge .r-gem{fill:#5fa8ff;stroke:#10325f;stroke-width:.8}.night-role-badge .r-pearl{fill:#fff8e8}
.night-role-badge .r-horn{fill:#7a1e1e;stroke:#e3a07a;stroke-width:1;stroke-linejoin:round}
.night-role-badge .r-steel{fill:#9aa6b4;stroke:#2c3440;stroke-width:1.1}.night-role-badge .r-slit{stroke:#10151c;stroke-width:1.6}.night-role-badge .r-plume{fill:#c8323c;stroke:#5e0e14;stroke-width:.8}
.night-role-badge .r-mask{fill:#141018;stroke:#7a5bb0;stroke-width:1}.night-role-badge .r-hole{fill:#f1e6ff}
.night-role-badge .r-bow{fill:#16161c;stroke:#d9d9e3;stroke-width:.9;stroke-linejoin:round}.night-role-badge .r-knot{fill:#2a2a33;stroke:#d9d9e3;stroke-width:.8}
.night-role-badge .r-fool-a{fill:#b8323f;stroke:#3a0d12;stroke-width:.8}.night-role-badge .r-fool-b{fill:#2f5fb8;stroke:#0d1c3a;stroke-width:.8}.night-role-badge .r-fool-band{fill:#e8c35c}.night-role-badge .r-bell{fill:#f3d36b;stroke:#6b4a12;stroke-width:.6}
.night-role-badge.pop{animation:nightRolePop .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes nightRolePop{0%{transform:rotate(-4deg) scale(0) translateY(-8px);opacity:0}100%{transform:rotate(-4deg) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.night-role-badge.pop{animation:none}}

/* While Castle Neverdawn stands, the table keeps its night. */
:root.nv-night #game{filter:saturate(.88) brightness(.92)}
:root.nv-night #game::after{content:"";position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at 50% 24%,#2a2c3066,#15161a55 46%,#07080ab0);mix-blend-mode:multiply}
/* The Cinnabar Shadow: red as a shut eyelid with a lamp behind it. The deck
   burns away as cards, the lid comes down over the light, and what is left
   open is a slit. */
.cs-stage{position:fixed;inset:0;z-index:100010;overflow:hidden;pointer-events:none;background:#0b0201;animation:csVeil 4s ease forwards}
.cs-stage *{position:absolute}
.cs-lamp{left:50%;top:50%;width:64vmin;height:64vmin;margin:-32vmin 0 0 -32vmin;border-radius:50%;z-index:1;
  background:radial-gradient(circle,#fff1d0 0 6%,#ff9c4a 22%,#d8321e 48%,#5c0b08 72%,transparent 78%);
  filter:blur(.4vmin);animation:csLamp 4s ease forwards}
.cs-veins{inset:0;z-index:2;opacity:0;mix-blend-mode:screen;animation:csVeins 4s ease forwards .3s;
  background:
    repeating-conic-gradient(from 12deg at 50% 50%,transparent 0 5deg,#ff5a2c22 5deg 6deg,transparent 6deg 13deg),
    radial-gradient(ellipse at 50% 50%,transparent 38%,#7d1a0f66 62%,transparent 74%)}
.cs-card{left:var(--x);top:var(--y);width:5.2vmin;height:7.3vmin;z-index:4;border-radius:.5vmin;
  background:linear-gradient(150deg,#e8dcc4,#8d7a5c);box-shadow:0 0 1.4vmin #000a;
  transform:rotate(var(--r));animation:csBurn 1.5s cubic-bezier(.5,0,.7,1) forwards var(--d)}
.cs-ember{left:var(--x);bottom:-4%;width:.7vmin;height:.7vmin;border-radius:50%;z-index:5;background:#ffb257;
  box-shadow:0 0 1.6vmin #ff6a24;animation:csEmber var(--d) linear infinite var(--l)}
/* the eyelid: two shutters of red that close over the lamp and leave a slit */
.cs-lid{left:-6%;right:-6%;height:56%;z-index:7;background:linear-gradient(#2b0503,#7c1409 62%,#b8311a);
  box-shadow:0 0 6vmin #00000099}
.cs-lid.t{top:-56%;border-bottom:.35vmin solid #ffb98a;animation:csLidTop 4s cubic-bezier(.5,0,.2,1) forwards .9s}
.cs-lid.b{bottom:-56%;border-top:.35vmin solid #ffb98a;animation:csLidBottom 4s cubic-bezier(.5,0,.2,1) forwards .9s}
.cs-slit{left:16%;right:16%;top:50%;height:.4vmin;margin-top:-.2vmin;z-index:8;opacity:0;border-radius:50%;
  background:linear-gradient(90deg,transparent,#fff0cf,#ff8a3d 60%,transparent);
  box-shadow:0 0 3vmin #ff6a24;animation:csSlit 4s ease forwards 2.1s}
.cs-title{z-index:20;left:4%;right:4%;bottom:8%;text-align:center;color:#ffe6cf;font:800 clamp(22px,4vw,62px) Georgia,serif;letter-spacing:.13em;text-shadow:0 0 22px #ff5a2c,0 3px 4px #000}
.cs-sub{z-index:20;left:4%;right:4%;bottom:4.5%;text-align:center;color:#ff9a63;font:900 clamp(7px,1vw,12px) var(--mono);letter-spacing:.2em;text-transform:uppercase}
@keyframes csVeil{0%{opacity:0}7%,86%{opacity:1}100%{opacity:0}}
@keyframes csLamp{0%{transform:scale(.2);opacity:0}22%{opacity:1}55%{transform:scale(1.06)}100%{transform:scale(1);opacity:.9}}
@keyframes csVeins{0%{opacity:0;transform:rotate(0)}40%{opacity:.85}100%{opacity:.5;transform:rotate(14deg)}}
@keyframes csBurn{0%{opacity:0;transform:rotate(var(--r)) scale(1) translateY(0)}
  18%{opacity:1}
  100%{opacity:0;transform:rotate(var(--r)) scale(.1) translate(var(--tx),var(--ty));filter:brightness(2.4) saturate(2)}}
@keyframes csEmber{0%{transform:translateY(0);opacity:.9}100%{transform:translateY(-108vh);opacity:0}}
@keyframes csLidTop{0%{top:-56%}55%,100%{top:-6%}}
@keyframes csLidBottom{0%{bottom:-56%}55%,100%{bottom:-6%}}
@keyframes csSlit{0%{opacity:0;transform:scaleX(.2)}40%{opacity:1;transform:scaleX(1)}100%{opacity:.85;transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.cs-stage *{animation-duration:.01s!important;animation-iteration-count:1!important}}
/* Raising the walls. */
.nv-stage{position:fixed;inset:0;z-index:100010;overflow:hidden;pointer-events:none;background:#08090b;animation:nvVeil 4.2s ease forwards}
.nv-stage *{position:absolute}
.nv-stage .nv-sky{inset:0;background:radial-gradient(ellipse at 50% 76%,#3a3d44 0%,#15161a 48%,#07080a 78%)}
.nv-stage .nv-moon{left:50%;top:6%;width:20vmin;height:20vmin;margin-left:-10vmin;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#ffffff,#dfe3e9 55%,#8e949d);box-shadow:0 0 70px #eef1f5aa;
  animation:nvMoonStalls 4.2s cubic-bezier(.2,.8,.3,1) forwards}
.nv-stage .nv-keep{left:0;right:0;bottom:0;height:62%;z-index:2}
.nv-stage .nv-tower{bottom:0;background:linear-gradient(180deg,#191b21,#050506);transform-origin:50% 100%;
  animation:nvRise 1.5s cubic-bezier(.16,1,.3,1) forwards}
/* Spires on the slender towers, battlements on the broad ones. */
.nv-stage .nv-tower::after{content:"";position:absolute;left:-7%;right:-7%;bottom:100%;height:8vmin;
  background:#15171c;clip-path:polygon(50% 0,100% 100%,0 100%)}
.nv-stage .nv-tower.batt::after{left:-4%;right:-4%;height:2.6vmin;clip-path:none;
  background:repeating-linear-gradient(90deg,#15171c 0 17%,transparent 17% 31%)}
.nv-stage .t0{left:4%;width:12%;height:52%;animation-delay:.05s}
.nv-stage .t1{left:17%;width:10%;height:70%;animation-delay:.16s}
.nv-stage .t2{left:28%;width:14%;height:58%;animation-delay:.1s}
.nv-stage .t3{left:43%;width:16%;height:88%;animation-delay:0s}
.nv-stage .t4{left:60%;width:13%;height:62%;animation-delay:.13s}
.nv-stage .t5{left:74%;width:10%;height:74%;animation-delay:.2s}
.nv-stage .t6{left:85%;width:12%;height:50%;animation-delay:.26s}
.nv-stage .nv-win{left:var(--x);top:var(--y);width:.9vmin;height:1.6vmin;z-index:3;border-radius:1px;background:#ffdf9b;
  box-shadow:0 0 10px #ffcf6e,0 0 22px #ff9f3f66;opacity:0;animation:nvWindow 2.6s ease forwards var(--d)}
.nv-stage .nv-ash{left:var(--x);top:-4%;width:3px;height:3px;border-radius:50%;background:#f0f2f5;opacity:.55;z-index:4;
  animation:nvAsh var(--d) linear infinite var(--l)}
.nv-stage .nv-title{z-index:9;left:4%;right:4%;bottom:9%;text-align:center;color:#fbfcfd;font:800 clamp(24px,5vw,64px) Georgia,serif;letter-spacing:.14em;text-shadow:0 0 26px #cdd4dd,0 3px 6px #000}
.nv-stage .nv-sub{z-index:9;left:4%;right:4%;bottom:5.5%;text-align:center;color:#d5dae1;font:900 clamp(7px,1vw,12px) var(--mono);letter-spacing:.24em;text-transform:uppercase}
@keyframes nvVeil{0%{opacity:0}7%,84%{opacity:1}100%{opacity:0}}
@keyframes nvRise{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@keyframes nvWindow{0%{opacity:0}30%{opacity:1}70%{opacity:.85}100%{opacity:1}}
@keyframes nvAsh{0%{transform:translateY(0)}100%{transform:translateY(108vh)}}
@keyframes nvMoonStalls{0%{transform:translateY(46vh) scale(.7);opacity:.2}55%{transform:translateY(2vh) scale(1);opacity:1}72%{transform:translateY(-1vh)}100%{transform:translateY(5vh) scale(.98);opacity:.85}}
@media (prefers-reduced-motion:reduce){.nv-stage *{animation:none!important}.nv-stage .nv-win{opacity:1}}
/* Rules text: every keyword keeps the house gold except these two, which carry
   the colours of their own icons — Nightmare purple, Sleep the cloud's blue. */
.card-rules-term.term-nightmare,.card .ctype .card-rules-term.term-nightmare,.card .skw .card-rules-term.term-nightmare,#tip .body .card-rules-term.term-nightmare,#tip .sideblk .card-rules-term.term-nightmare,.related-card-mini .card-rules-term.term-nightmare{color:#a678ff!important}
.card-rules-term.term-sleep,.card .ctype .card-rules-term.term-sleep,.card .skw .card-rules-term.term-sleep,#tip .body .card-rules-term.term-sleep,#tip .sideblk .card-rules-term.term-sleep,.related-card-mini .card-rules-term.term-sleep{color:#6fa8f5!important}

/* ===================== Profile backup ===================== */
.profile-backup{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.profile-backup p{margin:0 0 8px;font-size:11px;line-height:1.45;color:var(--ink-dim,#9aa3b5)}
.profile-backup-row{display:flex;gap:8px}
.profile-backup-row .scale-reset{margin-top:0;flex:1}

/* ===================== Cloud sync ===================== */
.cloud-sync{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.cloud-sync .profile-backup-row{flex-wrap:wrap}
.cloud-sync .profile-backup-row .scale-reset{min-width:110px}
.cloud-sync-google{min-height:40px;margin:2px 0 4px}
.cloud-sync-google[hidden]{display:none}

.team-gift-button{margin-left:8px;padding:2px 7px;border:1px solid var(--gold-dim);border-radius:3px;
  background:rgba(14,18,28,.82);color:var(--gold);font:700 7px var(--mono);letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;vertical-align:middle}
.team-gift-button:hover:not(:disabled),.team-gift-button.active{border-color:var(--gold);box-shadow:0 0 9px rgba(220,179,92,.35)}
.team-gift-button:disabled{opacity:.45;cursor:default}
.tshand.gifting .tcardwrap .card{cursor:pointer;box-shadow:0 0 0 2px var(--gold),0 0 16px rgba(220,179,92,.48)}

.m.name-identity-hovered,.m.name-identity-linked{z-index:80!important;isolation:isolate}
.m.name-identity-hovered{box-shadow:0 0 0 3px #f7e7a4,0 0 18px 7px rgba(229,190,79,.85),0 0 48px 15px rgba(157,62,222,.68)!important}
.m.name-identity-source{box-shadow:0 0 0 4px #ffd75b,0 0 22px 9px rgba(255,199,52,.92),0 0 55px 19px rgba(127,45,210,.75)!important;animation:nameIdentitySourcePulse .78s ease-in-out infinite alternate}
.m.name-identity-bearer{box-shadow:0 0 0 4px #d990ff,0 0 22px 9px rgba(194,84,255,.94),0 0 55px 19px rgba(255,196,55,.7)!important;animation:nameIdentityBearerPulse .78s ease-in-out infinite alternate}
.name-identity-badge{position:absolute;left:50%;top:-27px;z-index:120;transform:translateX(-50%);min-width:max-content;padding:5px 9px 4px;border:1px solid currentColor;border-radius:3px;background:rgba(5,3,12,.96);color:#ffe58a;font:900 8px/1.15 var(--mono);letter-spacing:.14em;text-align:center;text-transform:uppercase;text-shadow:0 0 8px currentColor;box-shadow:0 0 16px rgba(147,70,229,.78);pointer-events:none}
.name-identity-bearer .name-identity-badge{color:#e5adff}
.name-identity-thread{position:fixed;z-index:99990;height:4px;transform-origin:0 50%;pointer-events:none;background:linear-gradient(90deg,#fff1a3,#bf63ff 52%,#fff1a3);box-shadow:0 0 5px #fff,0 0 13px #d174ff,0 0 25px #f4cc4f;animation:nameIdentityThreadPulse .68s ease-in-out infinite alternate}
.name-identity-thread::after{content:"STOLEN NAME";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px 8px;border:1px solid #e5b5ff;border-radius:3px;background:rgba(8,3,16,.94);color:#fff2af;font:900 7px/1 var(--mono);letter-spacing:.16em;white-space:nowrap;text-shadow:0 0 7px #d174ff}
.name-identity-tip{margin-top:8px;padding:8px 9px;border:1px solid #c77aff;border-left:4px solid #ffd75b;background:linear-gradient(90deg,rgba(104,33,143,.3),rgba(43,20,66,.18));color:#f3dcff;font:600 10px/1.45 var(--mono);box-shadow:inset 0 0 18px rgba(169,76,226,.12)}
.name-identity-tip b{color:#ffe47c;letter-spacing:.1em}
.name-identity-tip strong{color:#fff;font-weight:900}
@keyframes nameIdentitySourcePulse{to{filter:brightness(1.18);box-shadow:0 0 0 5px #fff0aa,0 0 30px 12px rgba(255,199,52,.98),0 0 68px 24px rgba(127,45,210,.88)}}
@keyframes nameIdentityBearerPulse{to{filter:brightness(1.18);box-shadow:0 0 0 5px #f0c8ff,0 0 30px 12px rgba(194,84,255,.98),0 0 68px 24px rgba(255,196,55,.82)}}
@keyframes nameIdentityThreadPulse{to{filter:brightness(1.35);opacity:.72}}
@media (prefers-reduced-motion:reduce){.m.name-identity-source,.m.name-identity-bearer,.name-identity-thread{animation:none}}

.enchantress-retune{position:fixed;inset:0;z-index:100000;pointer-events:none;overflow:hidden}
.enchantress-retune .er-blue,.enchantress-retune .er-red{position:absolute;inset:-18%;border-radius:50%;mix-blend-mode:screen}
.enchantress-retune .er-blue{background:radial-gradient(circle at 50% 50%,rgba(145,213,255,.98) 0 8%,rgba(48,118,255,.82) 24%,rgba(16,42,116,.38) 48%,transparent 70%);animation:erBlueFold 1.05s cubic-bezier(.7,0,.9,.3) forwards}
.enchantress-retune .er-red{background:radial-gradient(circle at 50% 50%,rgba(255,232,176,.98) 0 3%,rgba(255,70,43,.9) 16%,rgba(137,12,22,.48) 43%,transparent 70%);opacity:0;transform:scale(.08);animation:erRedRule 1.05s .58s cubic-bezier(.12,.76,.26,1) forwards}
.enchantress-retune .er-tuning{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:11px 24px 11px 30px;border-block:1px solid rgba(194,226,255,.42);background:linear-gradient(90deg,transparent,rgba(2,5,14,.82) 18% 82%,transparent);font:800 clamp(11px,1.35vw,18px) var(--mono);letter-spacing:.42em;text-transform:uppercase;white-space:nowrap;color:#eaf7ff;text-shadow:0 0 12px #3d8cff,0 1px 2px #000,0 0 35px #1636ac;animation:erWords 1.65s ease forwards}
.enchantress-retune .er-tuning b{display:inline-block;color:#ffb29d;text-shadow:0 0 14px #ff382a,0 0 38px #a00;animation:erRedWord 1.65s ease forwards}
@keyframes erBlueFold{0%{opacity:0;transform:scale(1.25)}18%{opacity:1}72%{opacity:.95;transform:scale(.22,1.25)}100%{opacity:0;transform:scale(.015,1.7)}}
@keyframes erRedRule{0%{opacity:0;transform:scale(.04)}18%{opacity:1}70%{opacity:.9;transform:scale(1.35)}100%{opacity:0;transform:scale(1.8)}}
@keyframes erWords{0%,12%{opacity:0;filter:blur(9px)}28%,68%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(5px)}}
@keyframes erRedWord{0%,38%{transform:scale(.7);opacity:.25}62%,82%{transform:scale(1.25);opacity:1}100%{transform:scale(1.55);opacity:0}}

.m .khalistra-counter{position:absolute;right:-13px;top:52px;z-index:10;min-width:38px;padding:5px 5px 4px;border:1px solid #b9e8ff;border-radius:50% 50% 44% 44%;background:radial-gradient(circle at 50% 28%,#e9fbff 0 8%,#296c91 30%,#071522 72%);color:#f7fdff;text-align:center;font:900 15px/1 var(--mono);text-shadow:0 0 7px #91e4ff;box-shadow:0 0 0 2px #0b2536cc,0 0 18px #77d8ff99}
.m .khalistra-counter::before{content:"STORED";display:block;margin-bottom:3px;color:#b9e8ff;font:700 5px/1 var(--mono);letter-spacing:.12em}

.pravishan-rescue{position:fixed;inset:0;z-index:100002;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(116,51,171,.18) 0 22%,rgba(24,5,45,.72) 58%,rgba(2,0,9,.96) 100%);animation:pvVeil 2.45s ease forwards}
.pravishan-rescue .pv-stars{position:absolute;inset:-12%;background-image:radial-gradient(circle at 8% 18%,#fff 0 1px,transparent 1.7px),radial-gradient(circle at 22% 72%,#d9b9ff 0 1.2px,transparent 2px),radial-gradient(circle at 38% 31%,#fff 0 1px,transparent 1.8px),radial-gradient(circle at 54% 83%,#ad7bff 0 1.4px,transparent 2.2px),radial-gradient(circle at 69% 16%,#fff 0 1px,transparent 1.8px),radial-gradient(circle at 82% 61%,#e5ccff 0 1.2px,transparent 2px),radial-gradient(circle at 94% 37%,#fff 0 1px,transparent 1.7px);background-size:173px 149px,211px 187px,257px 193px,283px 241px,197px 263px,239px 217px,307px 179px;filter:drop-shadow(0 0 5px #bd77ff);opacity:0;animation:pvStars 2.35s ease forwards}
.pravishan-rescue .pv-wound{position:absolute;left:-12%;top:49%;width:124%;height:5px;background:#ff153a;box-shadow:0 0 8px #fff,0 0 24px #ff153a,0 0 70px #a4001f;transform:rotate(-8deg) scaleX(0);transform-origin:left;animation:pvWound 2.1s cubic-bezier(.3,.8,.2,1) forwards}
.pravishan-rescue .pv-eclipse{position:absolute;left:50%;top:50%;width:min(66vw,620px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.02);border:2px solid #e3c4ff;border-radius:50%;background:radial-gradient(circle,rgba(255,248,255,.99) 0 2%,#bd75ff 3% 7%,#13051f 8% 36%,#452064 37% 39%,rgba(201,123,255,.9) 40% 41%,transparent 42%);filter:drop-shadow(0 0 22px #ca8aff) drop-shadow(0 0 78px #6c1fa2) drop-shadow(0 0 125px #30104d);animation:pvEclipse 2.1s .22s cubic-bezier(.16,.85,.24,1) forwards}
.pravishan-rescue .pv-card{position:absolute;left:50%;top:112%;width:clamp(150px,18vw,238px);height:clamp(216px,26vw,342px);transform:translate(-50%,-50%) rotate(-9deg) scale(.6);border:2px solid #d9f4ff;border-radius:11px;background:linear-gradient(145deg,#0c2435 0 28%,#4b0a20 56%,#08050b 100%);box-shadow:inset 0 0 0 4px #09101a,inset 0 0 35px #9b153f,0 0 26px #91e2ff,0 0 80px #d11244;animation:pvCardRise 2.05s .18s cubic-bezier(.12,.84,.18,1) forwards}
.pravishan-rescue .pv-card::before{content:"";position:absolute;inset:13px;border:1px solid #b8e9ff55;background:radial-gradient(circle at 50% 36%,#c9f3ff 0 2%,transparent 3%),conic-gradient(from 20deg at 50% 42%,transparent,#5ab8df44,transparent,#a9153f55,transparent);clip-path:polygon(50% 0,61% 29%,96% 18%,71% 50%,98% 78%,61% 70%,50% 100%,39% 70%,2% 78%,29% 50%,4% 18%,39% 29%)}
.pravishan-rescue .pv-name{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);width:125%;text-align:center;color:#f5fbff;font:800 clamp(19px,3vw,38px) Georgia,serif;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 2px 2px #000,0 0 13px #6ed4ff,0 0 30px #d31345}
.pravishan-rescue .pv-oath{position:absolute;left:50%;top:15%;transform:translateX(-50%);white-space:nowrap;color:#d7f4ff;font:800 clamp(9px,1.2vw,15px) var(--mono);letter-spacing:.38em;text-transform:uppercase;text-shadow:0 0 12px #58c6ff;animation:pvOath 2.3s ease forwards}
.pravishan-rescue .pv-denied{position:absolute;left:50%;top:76%;transform:translate(-50%,-50%);white-space:nowrap;color:#ffcad5;font:900 clamp(15px,2vw,27px) var(--mono);letter-spacing:.45em;text-transform:uppercase;text-shadow:0 0 12px #f20b43,0 0 35px #a00024;animation:pvDenied 2.3s ease forwards}
.pravishan-rescue .pv-shards{position:absolute;inset:0;background:repeating-conic-gradient(from 8deg at 50% 50%,transparent 0 12deg,#bcecff44 13deg 13.5deg,transparent 14deg 29deg);opacity:0;animation:pvShards 1.1s 1.18s ease-out forwards}
@keyframes pvVeil{0%{opacity:0}9%,82%{opacity:1}100%{opacity:0}}
@keyframes pvStars{0%,8%{opacity:0;transform:scale(1.15) rotate(-2deg)}24%,82%{opacity:.92}100%{opacity:0;transform:scale(1) rotate(3deg)}}
@keyframes pvWound{0%{transform:rotate(-8deg) scaleX(0)}28%,53%{transform:rotate(-8deg) scaleX(1)}72%{transform:rotate(-8deg) scaleX(1);filter:brightness(1)}100%{transform:rotate(-8deg) scaleX(0);transform-origin:right;filter:brightness(3)}}
@keyframes pvEclipse{0%{opacity:0;transform:translate(-50%,-50%) scale(.02)}25%{opacity:1;transform:translate(-50%,-50%) scale(.82)}62%{transform:translate(-50%,-50%) scale(1) rotate(18deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(32deg)}}
@keyframes pvCardRise{0%{top:112%;opacity:0}26%{top:54%;opacity:1;transform:translate(-50%,-50%) rotate(-4deg) scale(.82)}58%,78%{top:50%;opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}100%{top:34%;opacity:0;transform:translate(-50%,-50%) rotate(3deg) scale(1.18)}}
@keyframes pvOath{0%,20%{opacity:0;letter-spacing:.8em}36%,76%{opacity:1}100%{opacity:0;letter-spacing:.55em}}
@keyframes pvDenied{0%,44%{opacity:0;transform:translate(-50%,-50%) scale(.6)}58%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
@keyframes pvShards{0%{opacity:0;transform:scale(.2) rotate(0)}35%{opacity:.9}100%{opacity:0;transform:scale(1.5) rotate(18deg)}}

.nur-legend-show{position:fixed;inset:0;z-index:100004;overflow:hidden;pointer-events:none;isolation:isolate;background:radial-gradient(circle at 50% 48%,rgba(44,32,67,.25),rgba(2,3,8,.96) 76%);animation:nurVeil 3.65s ease forwards}
.nur-legend-name{position:absolute;z-index:30;left:4%;right:4%;bottom:8%;text-align:center;color:#fff6ca;font:800 clamp(23px,4.1vw,64px) Georgia,serif;letter-spacing:.12em;text-shadow:0 3px 3px #000,0 0 18px var(--nur-accent,#dcb35c),0 0 52px var(--nur-accent,#dcb35c);animation:nurName 3.35s ease forwards}
@keyframes nurVeil{0%{opacity:0}8%,78%{opacity:1}100%{opacity:0}}
@keyframes nurName{0%,22%{opacity:0;transform:translateY(20px);letter-spacing:.32em}36%,79%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px);letter-spacing:.2em}}
.nur-harmony-show{--nur-accent:#b47aff;background:radial-gradient(circle at 50% 55%,rgba(139,69,208,.28),transparent 39%),linear-gradient(180deg,#03020a,#140523 60%,#020107)}
.nur-harmony-show .nh-ghost{position:absolute;left:50%;top:48%;width:min(42vw,460px);height:min(52vh,470px);transform:translate(-50%,-50%);border-radius:48% 52% 35% 35%;background:radial-gradient(ellipse at 50% 34%,rgba(229,211,255,.7),rgba(130,75,190,.22) 32%,transparent 70%);filter:blur(6px) drop-shadow(0 0 38px #7b35c8);animation:nhGhost 3.2s ease forwards}
.nur-harmony-show .nh-book{position:absolute;left:50%;top:59%;width:min(45vw,520px);height:min(25vw,280px);transform:translate(-50%,-50%) perspective(700px) rotateX(56deg);filter:drop-shadow(0 0 28px #923cdf)}
.nur-harmony-show .nh-cover{position:absolute;top:0;width:50%;height:100%;border:2px solid #d8b9ff;background:linear-gradient(145deg,#10051c,#32104e 55%,#08020e);box-shadow:inset 0 0 30px #7c38ad}
.nur-harmony-show .nh-cover.left{right:50%;transform-origin:100% 50%;animation:nhOpenL 2.1s cubic-bezier(.2,.8,.25,1) forwards}
.nur-harmony-show .nh-cover.right{left:50%;transform-origin:0 50%;animation:nhOpenR 2.1s cubic-bezier(.2,.8,.25,1) forwards}
.nur-harmony-show .nh-spine{position:absolute;left:49%;top:-4%;width:2%;height:108%;background:#e4c7ff;box-shadow:0 0 14px #ae69ff,0 0 34px #6c1aad}
.nur-harmony-show .nh-page{position:absolute;left:50%;top:58%;width:clamp(34px,5vw,72px);height:clamp(46px,7vw,96px);border:1px solid #e9ddff;background:linear-gradient(135deg,#f2eaff,#9870bb);box-shadow:0 0 11px #c48bff;animation:nhPageFly 2.7s var(--d) cubic-bezier(.2,.7,.2,1) forwards}
@keyframes nhGhost{0%{opacity:0;transform:translate(-50%,-40%) scale(.5)}30%,72%{opacity:.9}100%{opacity:0;transform:translate(-50%,-60%) scale(1.2)}}
@keyframes nhOpenL{0%,12%{transform:rotateY(0)}70%,100%{transform:rotateY(58deg)}}
@keyframes nhOpenR{0%,12%{transform:rotateY(0)}70%,100%{transform:rotateY(-58deg)}}
@keyframes nhPageFly{0%,18%{opacity:0;transform:translate(-50%,0) rotate(0) scale(.2)}45%,78%{opacity:1;transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r)) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--x2)),calc(var(--y) - 160px)) rotate(calc(var(--r) + 120deg)) scale(.7)}}
.nur-chad-show{--nur-accent:#dff3ff;background:linear-gradient(180deg,#020712,#0c1930 58%,#08090c)}
.nur-chad-show .nc-moon{position:absolute;left:50%;top:8%;width:min(42vw,460px);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 37% 32%,#fff 0 3%,#eef7ff 18%,#b7d7ee 72%,#718da4);box-shadow:0 0 35px #eaf8ff,0 0 110px #8bd4ff88;animation:ncMoon 3.2s ease forwards}
.nur-chad-show .nc-moon::after{content:"";position:absolute;inset:13% 18% 42% 43%;border-radius:50%;box-shadow:33px 27px 0 8px #9fb9ca55,-26px 58px 0 12px #91aabd44,50px 86px 0 17px #91aabd33}
.nur-chad-show .nc-track{position:absolute;left:-5%;right:-5%;bottom:27%;height:9px;background:#08090b;box-shadow:0 -5px #b87b33,0 8px #3a2512}
.nur-chad-show .nc-track::after{content:"";position:absolute;inset:-15px 0 -20px;background:repeating-linear-gradient(90deg,transparent 0 34px,#6b431e 35px 43px,transparent 44px 76px)}
.nur-chad-show .nc-train{position:absolute;z-index:5;left:-55%;bottom:29%;width:min(62vw,720px);height:clamp(72px,13vw,150px);background:linear-gradient(#101923 0 28%,#1b2b39 29% 72%,#070a0d 73%);border:3px solid #d29a4b;border-radius:8px 22px 4px 4px;box-shadow:0 0 24px #f6b94d88;animation:ncTrain 3.3s cubic-bezier(.15,.75,.35,1) forwards}
.nur-chad-show .nc-engine{position:absolute;right:-16%;bottom:-3px;width:27%;height:72%;border:3px solid #d29a4b;border-radius:40% 32% 5px 5px;background:linear-gradient(145deg,#1d3345,#080d12)}
.nur-chad-show .nc-window{position:relative;display:inline-block;margin:16% 2% 0 4%;width:10%;height:30%;background:#fff1a3;box-shadow:0 0 14px #ffd45a;border:2px solid #3c2a17}
.nur-chad-show .nc-smoke{position:absolute;right:-13%;bottom:72%;width:42px;height:42px;border-radius:50%;background:#d6e6ef99;box-shadow:-34px -20px 0 12px #c9d9e888,-70px -32px 0 18px #b8c9d577;filter:blur(3px)}
@keyframes ncMoon{0%{opacity:0;transform:translateX(-50%) scale(.3)}28%,78%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.1)}}
@keyframes ncTrain{0%{left:-65%;filter:blur(8px)}22%{filter:blur(0)}82%{left:54%}100%{left:120%;filter:blur(5px)}}
.nur-odu-show{--nur-accent:#ff9b42;background:radial-gradient(circle at 50% 72%,#85200e88,transparent 36%),linear-gradient(#050506,#1a0904)}
.nur-odu-show .no-furnace{position:absolute;left:50%;bottom:-8%;width:min(62vw,680px);height:45%;transform:translateX(-50%);border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 100%,#fff4a2,#ff7a1a 23%,#731500 47%,transparent 70%);filter:blur(2px);animation:noForge 3.1s ease forwards}
.nur-odu-show .no-anvil{position:absolute;left:50%;top:55%;width:min(38vw,410px);height:min(16vw,150px);transform:translate(-50%,-50%);background:linear-gradient(#eff5f6,#596570 35%,#14171a 36%);clip-path:polygon(0 0,100% 0,84% 34%,65% 43%,64% 65%,77% 100%,24% 100%,37% 65%,36% 43%,17% 34%);filter:drop-shadow(0 15px 12px #000)}
.nur-odu-show .no-hammer{position:absolute;left:58%;top:9%;width:clamp(28px,4vw,55px);height:min(48vh,420px);background:linear-gradient(90deg,#3e2313,#b47436 50%,#3e2313);transform-origin:50% 92%;animation:noHammer 1.7s cubic-bezier(.8,.05,.7,.2) forwards}
.nur-odu-show .no-hammer::before{content:"";position:absolute;left:50%;top:-22px;width:clamp(110px,16vw,210px);height:70px;transform:translateX(-50%);border-radius:9px;background:linear-gradient(#dce2e4,#56616a 46%,#181b1e);box-shadow:inset 0 0 12px #fff8}
.nur-odu-show .no-spark{position:absolute;left:50%;top:55%;width:5px;height:5px;border-radius:50%;background:#fff7a5;box-shadow:0 0 8px #ff8a17;animation:noSpark 1.35s var(--d) ease-out forwards}
@keyframes noForge{0%{opacity:0}30%,80%{opacity:1;filter:brightness(1.5)}100%{opacity:0}}
@keyframes noHammer{0%,25%{transform:rotate(-48deg)}58%,73%{transform:rotate(0)}100%{transform:rotate(13deg)}}
@keyframes noSpark{0%,48%{opacity:0;transform:none}55%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.2)}}
.nur-rowan-show{--nur-accent:#9acbff;background:linear-gradient(180deg,#030812,#0a1321 64%,#010204)}
.nur-rowan-show .nr-manor,.nur-manor-show .nm-manor{position:absolute;left:50%;bottom:16%;width:min(66vw,760px);height:min(48vh,440px);transform:translateX(-50%);background:linear-gradient(90deg,#08101a,#111d2b 48%,#07101a);clip-path:polygon(4% 100%,4% 38%,17% 38%,17% 23%,27% 23%,27% 35%,38% 35%,50% 2%,62% 35%,75% 35%,75% 20%,86% 20%,86% 38%,96% 38%,96% 100%);border-bottom:5px solid #020306;filter:drop-shadow(0 0 20px #5082ae88);animation:nrManor 3.2s ease forwards}
.nur-rowan-show .nr-window,.nur-manor-show .nm-window{position:absolute;z-index:3;width:24px;height:34px;border:2px solid #111827;background:#d6eaff;box-shadow:0 0 13px #91caff;animation:nrWindow 1.8s var(--d) ease-in-out infinite}
.nur-rowan-show .nr-figure{position:absolute;z-index:6;left:50%;bottom:12%;width:44px;height:190px;transform:translateX(-50%);border-radius:48% 48% 9% 9%;background:linear-gradient(#c2ddf5,#152232 24%);box-shadow:0 0 18px #8fc9ff}
.nur-rowan-show .nr-thread,.nur-manor-show .nm-thread{position:absolute;z-index:7;left:50%;top:33%;width:2px;height:48%;background:#b9e5ff;box-shadow:0 0 10px #6fbfff;transform-origin:50% 0;animation:nrThread 1.2s ease-in-out infinite alternate}
@keyframes nrManor{0%{opacity:0;transform:translateX(-50%) translateY(120px) scale(.8)}30%,80%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}100%{opacity:0}}
@keyframes nrWindow{50%{filter:brightness(2.2);box-shadow:0 0 25px #d5f2ff}}
@keyframes nrThread{from{opacity:.35;transform:scaleY(.83)}to{opacity:1;transform:scaleY(1)}}
.nur-lunaspire-show{--nur-accent:#b5ecff;background:linear-gradient(#020816,#07152b)}
.nur-lunaspire-show .nl-moon{position:absolute;left:50%;top:3%;width:min(76vw,820px);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle,#fff 0 7%,#d7f4ff 32%,#7ac7ec 72%,#326486);box-shadow:0 0 50px #e9fbff,0 0 180px #4bbdff99;animation:nlMoon 3.3s ease forwards}
.nur-lunaspire-show .nl-tower{position:absolute;z-index:4;left:50%;bottom:-8%;width:min(20vw,210px);height:88%;transform:translateX(-50%);background:linear-gradient(90deg,#010205,#0c1722 44%,#010308);box-shadow:inset 0 0 0 2px #9adfff88;clip-path:polygon(36% 100%,36% 24%,19% 24%,50% 0,81% 24%,64% 24%,64% 100%);filter:drop-shadow(0 0 20px #84d9ff);animation:nlTower 2.7s cubic-bezier(.1,.8,.2,1) forwards}
.nur-lunaspire-show .nl-ring{position:absolute;z-index:3;left:50%;top:49%;width:var(--s);height:var(--s);transform:translate(-50%,-50%) rotateX(67deg);border:2px solid #c2efff;border-radius:50%;box-shadow:0 0 17px #63c7f4;animation:nlRing 2.1s var(--d) ease-out forwards}
@keyframes nlMoon{0%{opacity:0;transform:translateX(-50%) scale(.4)}28%,80%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.07)}}
@keyframes nlTower{0%{transform:translateX(-50%) translateY(110%)}40%,82%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0}}
@keyframes nlRing{0%{opacity:0;transform:translate(-50%,-50%) rotateX(67deg) scale(.15)}38%,74%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotateX(67deg) scale(1.45)}}
.nur-tishra-show{--nur-accent:#ffd35e;background:radial-gradient(circle at 50% 61%,#7d300e66,transparent 36%),linear-gradient(#080808,#1c0b03)}
.nur-tishra-show .nt-pour{position:absolute;left:50%;top:-12%;width:24px;height:58%;transform:translateX(-50%);background:linear-gradient(90deg,#ff781a,#fff7a1,#ff8c22);box-shadow:0 0 22px #ff9d26;animation:ntPour 2.05s ease forwards}
.nur-tishra-show .nt-shield{position:absolute;left:50%;top:55%;width:min(32vw,350px);height:min(43vw,470px);transform:translate(-50%,-50%) scale(.25);clip-path:polygon(50% 0,93% 16%,86% 70%,50% 100%,14% 70%,7% 16%);background:radial-gradient(circle at 50% 34%,#fff3a8,#f2b42c 35%,#8e3a0d 78%);box-shadow:0 0 0 5px #fff1a8,0 0 45px #ffaf26,0 0 110px #b3440d;animation:ntShield 2.8s cubic-bezier(.15,.8,.2,1) forwards}
.nur-tishra-show .nt-shield::after{content:"";position:absolute;inset:16%;clip-path:inherit;border:5px solid #fff3b0;background:linear-gradient(135deg,transparent 46%,#fff2ad 47% 53%,transparent 54%)}
.nur-tishra-show .nt-drop{position:absolute;left:var(--x);top:62%;width:8px;height:26px;border-radius:50% 50% 60% 60%;background:#ffc13b;box-shadow:0 0 10px #ff7716;animation:ntDrop 1.6s var(--d) ease-in infinite}
@keyframes ntPour{0%{transform:translateX(-50%) scaleY(0)}35%,65%{transform:translateX(-50%) scaleY(1)}100%{opacity:0;transform:translateX(-50%) scaleY(.1)}}
@keyframes ntShield{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-20deg);filter:brightness(4)}42%,78%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:brightness(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes ntDrop{0%{opacity:0;transform:translateY(-30px)}35%{opacity:1}100%{opacity:0;transform:translateY(160px)}}
.nur-manor-show{--nur-accent:#77bfff;background:radial-gradient(circle at 50% 75%,#1c365466,transparent 48%),linear-gradient(#01040a,#07111d)}
.nur-manor-show .nm-manor{bottom:8%;width:min(78vw,900px);height:min(62vh,570px);filter:drop-shadow(0 0 34px #4e91c8)}
.nur-manor-show .nm-foundation{position:absolute;left:8%;right:8%;bottom:6%;height:8px;background:#93d7ff;box-shadow:0 0 16px #6bbfff,0 0 60px #2d70a5;animation:nmFoundation .75s ease-in-out infinite alternate}
.nur-manor-show .nm-heart{position:absolute;z-index:8;left:50%;top:55%;width:34px;height:34px;transform:translate(-50%,-50%) rotate(45deg);background:#bce8ff;box-shadow:0 0 20px #74c6ff,0 0 65px #3775aa;animation:nmHeart .85s ease-in-out infinite alternate}
@keyframes nmFoundation{to{filter:brightness(2);transform:scaleX(.92)}}
@keyframes nmHeart{to{transform:translate(-50%,-50%) rotate(45deg) scale(1.35);filter:brightness(1.8)}}
.nur-thoughts-show{--nur-accent:#fff0a6;background:linear-gradient(90deg,#160f03 0 49.7%,#04070f 50.3% 100%)}
.nur-thoughts-show .np-half{position:absolute;inset:0 50% 0 0;background:radial-gradient(circle at 45% 48%,#ffc94c33,transparent 45%)}
.nur-thoughts-show .np-half.prayers{left:50%;right:0;background:radial-gradient(circle at 55% 48%,#a9d9ff33,transparent 45%)}
.nur-thoughts-show .np-wheel{position:absolute;left:25%;top:48%;width:min(30vw,330px);height:min(30vw,330px);transform:translate(-50%,-50%);border:2px solid #ffe581;border-radius:50%;box-shadow:0 0 24px #e5b739;animation:npWheel 2.4s linear infinite}
.nur-thoughts-show .np-wheel::before,.nur-thoughts-show .np-wheel::after{content:"";position:absolute;inset:14%;border:1px solid #fff2a4;transform:rotate(45deg)}
.nur-thoughts-show .np-hands{position:absolute;left:75%;top:50%;width:min(30vw,320px);height:min(24vw,250px);transform:translate(-50%,-50%);border:4px solid #cde9ff;border-width:0 5px 5px;border-radius:0 0 55% 55%;box-shadow:0 15px 25px #75bfff88;animation:npHands 1.5s ease-in-out infinite alternate}
.nur-thoughts-show .np-core{position:absolute;z-index:4;left:50%;top:50%;width:min(16vw,170px);height:min(20vw,220px);transform:translate(-50%,-50%) scale(.2);clip-path:polygon(50% 0,88% 18%,82% 72%,50% 100%,18% 72%,12% 18%);background:linear-gradient(90deg,#f8c74f,#fff4ad 49%,#d9efff 51%,#79bce9);box-shadow:0 0 38px #fff;animation:npCore 2.8s ease forwards}
@keyframes npWheel{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes npHands{to{filter:brightness(1.8);transform:translate(-50%,-53%) scale(1.04)}}
@keyframes npCore{0%,28%{opacity:0;transform:translate(-50%,-50%) scale(.2)}48%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}
.amb.nur-harmony{background:radial-gradient(ellipse at 50% 100%,#6f2aa840,transparent 64%),linear-gradient(#05020cdd,#170522cc)}
.amb .nbg-book{position:absolute;left:50%;bottom:-6%;width:45%;height:32%;transform:translateX(-50%) perspective(500px) rotateX(62deg);border:2px solid #b57aff;background:linear-gradient(90deg,#210b35 0 48%,#e4c6ff 49% 51%,#210b35 52%);box-shadow:0 0 25px #7d35b6}
.amb .nbg-page{position:absolute;left:var(--x);top:110%;width:24px;height:34px;background:#d8c0efbb;border:1px solid #f0e4ff;animation:nbgPage var(--t) linear infinite;animation-delay:var(--d)}
.amb .nbg-wisp{position:absolute;left:var(--x);bottom:-20%;width:60px;height:90px;border-radius:50%;background:radial-gradient(ellipse,#c39aff55,transparent 68%);filter:blur(5px);animation:nbgWisp var(--t) ease-in-out infinite;animation-delay:var(--d)}
@keyframes nbgPage{to{transform:translate(var(--dx),-150%) rotate(300deg);opacity:0}}
@keyframes nbgWisp{50%{transform:translate(var(--dx),-80%);opacity:.9}to{transform:translate(calc(var(--dx) * -1),-150%);opacity:0}}
.amb.nur-chad{background:radial-gradient(circle at 50% 18%,#e8f7ff44 0 12%,transparent 34%),linear-gradient(#030913dd,#0a1728cc)}
.amb .nbg-train{position:absolute;left:-46%;bottom:13%;width:42%;height:38px;background:#111d27;border:1px solid #d1a151;box-shadow:0 0 10px #f4c56a;animation:nbgTrain 9s linear infinite}
.amb .nbg-train::after{content:"";position:absolute;left:12%;right:10%;top:9px;height:12px;background:repeating-linear-gradient(90deg,#ffe59d 0 12px,transparent 13px 26px)}
@keyframes nbgTrain{to{left:110%}}
.amb.nur-odu{background:radial-gradient(ellipse at 50% 110%,#ff6a253d,transparent 62%),linear-gradient(#060607dd,#170803cc)}
.amb .nbg-spark{position:absolute;left:var(--x);bottom:-10px;width:4px;height:4px;border-radius:50%;background:#fff2a0;box-shadow:0 0 7px #ff7c1e;animation:nbgSpark var(--t) ease-out infinite;animation-delay:var(--d)}
@keyframes nbgSpark{to{transform:translate(var(--dx),-190px);opacity:0}}
.amb.nur-rowan,.amb.nur-manor{background:linear-gradient(#020711d9,#0b1725d6)}
.amb .nbg-manor{position:absolute;left:12%;right:12%;bottom:-8%;height:70%;background:#08111b;clip-path:polygon(0 100%,0 43%,17% 43%,17% 29%,33% 29%,50% 0,67% 29%,83% 29%,83% 43%,100% 43%,100% 100%);filter:drop-shadow(0 0 12px #4a87b4)}
.amb .nbg-manor::after{content:"";position:absolute;inset:24% 18%;background:repeating-linear-gradient(90deg,transparent 0 13%,#aad9ff99 14% 18%,transparent 19% 31%);animation:nrWindow 2.1s ease-in-out infinite}
.amb.nur-manor .nbg-manor{left:5%;right:5%;height:88%;filter:drop-shadow(0 0 24px #67baff)}
.amb .nbg-life{position:absolute;left:50%;top:15%;bottom:4%;width:2px;background:#a9deff;box-shadow:0 0 9px #61b7f0;animation:nrThread 1s ease-in-out infinite alternate}
.amb.nur-lunaspire{background:radial-gradient(circle at 50% 24%,#dff6ff55 0 17%,transparent 43%),linear-gradient(#020917dd,#08172bcc)}
.amb .nbg-tower{position:absolute;left:50%;bottom:-5%;width:18%;height:88%;transform:translateX(-50%);background:#06101b;clip-path:polygon(35% 100%,35% 23%,16% 23%,50% 0,84% 23%,65% 23%,65% 100%);filter:drop-shadow(0 0 11px #79cff7)}
.amb .nbg-ring{position:absolute;left:50%;top:54%;width:var(--s);height:var(--s);transform:translate(-50%,-50%) rotateX(69deg);border:1px solid #b8ebff;border-radius:50%;animation:nlRing 4s var(--d) ease-out infinite}
.amb.nur-tishra{background:radial-gradient(ellipse at 50% 105%,#ef6a2436,transparent 62%),linear-gradient(#080706dd,#1a0903cc)}
.amb .nbg-shield{position:absolute;left:50%;top:54%;width:150px;height:190px;transform:translate(-50%,-50%);clip-path:polygon(50% 0,91% 17%,83% 72%,50% 100%,17% 72%,9% 17%);background:#d99a2999;box-shadow:0 0 25px #f5b43a}
.amb .nbg-molten{position:absolute;left:var(--x);top:-20%;width:5px;height:40%;background:#ffc03c;box-shadow:0 0 7px #ff6f17;animation:nbgMolten var(--t) ease-in infinite;animation-delay:var(--d)}
@keyframes nbgMolten{to{transform:translateY(350%);opacity:0}}
.amb.nur-thoughts-prayers{background:linear-gradient(90deg,#1d1206bb,transparent 49%,#07111dbb 51%),linear-gradient(#050608dd,#0c0d14cc)}
.amb .nbg-plan{position:absolute;left:25%;top:50%;width:120px;height:120px;border:1px solid #ffe487;border-radius:50%;box-shadow:0 0 18px #d5a42e;animation:npWheel 9s linear infinite}
.amb .nbg-prayer{position:absolute;left:75%;top:50%;width:95px;height:120px;border:2px solid #cae9ff;border-width:0 3px 3px;border-radius:0 0 50% 50%;box-shadow:0 12px 20px #6ab8ee88;animation:npHands 2.3s ease-in-out infinite alternate}
@media (max-width:700px){.nur-legend-name{bottom:12%;font-size:clamp(18px,6vw,32px)}.nur-chad-show .nc-moon{top:16%;width:66vw}.nur-chad-show .nc-train{width:78vw}.nur-rowan-show .nr-manor,.nur-manor-show .nm-manor{width:92vw}.nur-lunaspire-show .nl-moon{width:105vw;top:12%}.nur-tishra-show .nt-shield{width:48vw;height:64vw}}

.ash-legend-show{position:fixed;inset:0;z-index:100004;overflow:hidden;pointer-events:none;isolation:isolate;background:#030307f2;animation:ashLegVeil 3.7s ease forwards}
.ash-legend-name{position:absolute;z-index:40;left:3%;right:3%;bottom:7%;text-align:center;color:#fff3d0;font:800 clamp(22px,4vw,62px) Georgia,serif;letter-spacing:.11em;text-shadow:0 3px 3px #000,0 0 18px var(--ash-accent,#f07b42),0 0 50px var(--ash-accent,#f07b42);animation:ashLegName 3.35s ease forwards}
.ash-legend-sub{position:absolute;z-index:40;left:4%;right:4%;bottom:4%;text-align:center;color:var(--ash-accent,#f07b42);font:800 clamp(7px,.9vw,12px) var(--mono);letter-spacing:.42em;text-transform:uppercase;text-shadow:0 0 10px currentColor;animation:ashLegName 3.45s ease forwards}
@keyframes ashLegVeil{0%{opacity:0}8%,79%{opacity:1}100%{opacity:0}}
@keyframes ashLegName{0%,24%{opacity:0;transform:translateY(18px);letter-spacing:.3em}38%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px);letter-spacing:.18em}}
.ash-pyrrhion-show{--ash-accent:#ff583d;background:radial-gradient(circle at 50% 50%,#8c1a1338,transparent 38%),linear-gradient(#050204,#1b0504 70%,#030101)}
.ash-pyrrhion-show .ap-eye{position:absolute;left:50%;top:13%;width:min(56vw,620px);height:min(25vw,260px);transform:translateX(-50%) scale(.25);border-radius:50% 5% 50% 5%;background:radial-gradient(ellipse,#fff2a2 0 3%,#ff6b22 4% 12%,#78130c 13% 34%,#050101 36% 58%,transparent 60%);filter:drop-shadow(0 0 30px #f33);animation:apEye 2.7s ease forwards}
.ash-pyrrhion-show .ap-relic{position:absolute;z-index:8;left:50%;top:51%;width:min(19vw,205px);height:min(27vw,285px);transform:translate(-50%,-50%);clip-path:polygon(50% 0,88% 19%,82% 77%,50% 100%,18% 77%,12% 19%);background:linear-gradient(145deg,#f5ead1,#847b67 35%,#201b18 72%);box-shadow:0 0 0 4px #ffe7aa,0 0 38px #ff8f35;animation:apRelic 3.1s ease forwards}
.ash-pyrrhion-show .ap-relic::after{content:"";position:absolute;inset:12%;clip-path:inherit;background:repeating-linear-gradient(45deg,transparent 0 19px,#260704 20px 24px,transparent 25px 40px);animation:apCrack 1.25s .85s ease forwards}
.ash-pyrrhion-show .ap-flame{position:absolute;z-index:11;left:var(--x);top:59%;width:clamp(10px,1.4vw,22px);height:clamp(45px,8vw,100px);border-radius:50% 50% 42% 42%;background:linear-gradient(transparent,#ff2b16 40%,#ff9a2e 68%,#fff2a1);filter:drop-shadow(0 0 10px #ff3c17);transform-origin:50% 100%;animation:apFlame var(--t) var(--d) ease-in-out infinite alternate}
.ash-pyrrhion-show .ap-claw{position:absolute;z-index:14;left:50%;top:44%;width:min(62vw,700px);height:min(34vw,360px);transform:translate(-50%,-50%) scale(1.7);opacity:0;background:repeating-linear-gradient(90deg,transparent 0 13%,#250403 14% 18%,#ff5b2b 19% 20%,#250403 21% 31%);clip-path:polygon(0 17%,16% 35%,33% 12%,49% 39%,67% 9%,82% 34%,100% 15%,91% 60%,70% 70%,50% 92%,29% 70%,8% 59%);filter:drop-shadow(0 0 14px #f43);animation:apClaw 1.45s .65s cubic-bezier(.3,.8,.2,1) forwards}
.ash-pyrrhion-show .ap-chain{display:none;position:absolute;z-index:20;left:-8%;top:49%;width:116%;height:15px;background:repeating-linear-gradient(90deg,#ffd180 0 13px,#5e1a0b 14px 24px);box-shadow:0 0 13px #ff3f1f;transform:rotate(-9deg) scaleX(0);transform-origin:right;animation:apChain 2.1s .75s cubic-bezier(.2,.8,.2,1) forwards}
.ash-pyrrhion-show.ap-claim .ap-chain{display:block}.ash-pyrrhion-show.ap-claim .ap-relic{animation:apClaim 3.1s ease forwards}
@keyframes apEye{0%{opacity:0;transform:translateX(-50%) scale(.2)}25%,78%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.2)}}
@keyframes apRelic{0%,15%{opacity:0;transform:translate(-50%,-50%) scale(.35)}35%,65%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-35%) scale(.4);filter:brightness(4)}}
@keyframes apClaim{0%,15%{opacity:0;transform:translate(-50%,-50%) scale(.35)}35%,65%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(145%,-85%) rotate(38deg) scale(.65)}}
@keyframes apCrack{to{filter:brightness(3);transform:scale(1.15)}}
@keyframes apClaw{0%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}35%,72%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
@keyframes apChain{0%{opacity:0;transform:rotate(-9deg) scaleX(0)}30%,76%{opacity:1;transform:rotate(-9deg) scaleX(1)}100%{opacity:0;transform:rotate(-9deg) translateX(35%) scaleX(.6)}}
@keyframes apFlame{to{transform:scaleY(1.6) translateY(-24px);filter:brightness(1.7) drop-shadow(0 0 15px #ff3c17)}}
.ash-khalistra-show{--ash-accent:#c9a0ff;background:radial-gradient(circle at 50% 47%,#59248055,transparent 42%),linear-gradient(#03010a,#11051f 65%,#020107)}
.ash-khalistra-show .ak-stars{position:absolute;inset:-10%;background-image:radial-gradient(circle at 9% 18%,#fff 0 1px,transparent 2px),radial-gradient(circle at 31% 71%,#c995ff 0 1.2px,transparent 2px),radial-gradient(circle at 57% 24%,#fff 0 1px,transparent 2px),radial-gradient(circle at 82% 62%,#9adfff 0 1.2px,transparent 2px);background-size:179px 151px,241px 203px,283px 217px,211px 263px;filter:drop-shadow(0 0 5px #bd7aff);animation:akStars 8s linear infinite}
.ash-khalistra-show .ak-crown{position:absolute;z-index:12;left:50%;top:16%;width:min(35vw,390px);height:min(22vw,230px);transform:translateX(-50%) scale(.3);clip-path:polygon(0 82%,4% 20%,30% 57%,50% 0,70% 57%,96% 20%,100% 82%,86% 100%,14% 100%);background:linear-gradient(145deg,#f8eaff,#9f62d6 45%,#321046);box-shadow:0 0 0 4px #ead7ff,0 0 35px #b66aff;animation:akCrown 3s ease forwards}
.ash-khalistra-show .ak-patient{position:absolute;z-index:5;left:var(--x);bottom:21%;width:clamp(42px,7vw,92px);height:clamp(110px,20vw,230px);border-radius:48% 48% 8% 8%;background:linear-gradient(#bde8ff 0 12%,#13263c 13% 100%);box-shadow:0 0 16px #6bc9ff55;opacity:.75}
.ash-khalistra-show .ak-wound{position:absolute;z-index:7;left:var(--x);top:var(--y);width:13px;height:13px;border-radius:50%;background:#ff3459;box-shadow:0 0 13px #ff1744;animation:akWound 2.45s var(--d) ease forwards}
.ash-khalistra-show .ak-thread{position:absolute;z-index:8;left:var(--x);top:var(--y);width:2px;height:var(--len);background:linear-gradient(#f44364,#e2c3ff);box-shadow:0 0 8px #d07aff;transform-origin:50% 0;transform:rotate(var(--r)) scaleY(0);animation:akThread 2.1s var(--d) ease forwards}
.ash-khalistra-show .ak-orb{position:absolute;z-index:14;left:50%;top:45%;width:min(17vw,180px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.2);background:radial-gradient(circle,#fff 0 6%,#bfeaff 7% 20%,#9d58d6 21% 53%,#21072f 70%);box-shadow:0 0 28px #d7b2ff,0 0 90px #762ea7;animation:akOrb 2.9s ease forwards}
@keyframes akStars{to{transform:rotate(5deg) scale(1.05)}}
@keyframes akCrown{0%{opacity:0;transform:translateX(-50%) scale(.3) translateY(-60px)}32%,80%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.12)}}
@keyframes akWound{0%,25%{opacity:1}62%{background:#fff;box-shadow:0 0 24px #d7b8ff}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
@keyframes akThread{0%,18%{opacity:0;transform:rotate(var(--r)) scaleY(0)}38%,72%{opacity:1;transform:rotate(var(--r)) scaleY(1)}100%{opacity:0;transform:rotate(var(--r)) scaleY(.1)}}
@keyframes akOrb{0%,20%{opacity:0;transform:translate(-50%,-50%) scale(.2)}48%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
.ash-sydraza-show{--ash-accent:#ff7fb7;background:radial-gradient(circle at 50% 50%,#3a165666,transparent 46%),linear-gradient(#030207,#0b0718)}
.ash-sydraza-show .as-crest{position:absolute;z-index:5;left:50%;top:48%;width:clamp(44px,7vw,90px);height:clamp(58px,9vw,120px);transform:translate(-50%,-50%) rotate(var(--r)) translateY(-220px) rotate(calc(var(--r) * -1));clip-path:polygon(50% 0,92% 18%,84% 74%,50% 100%,16% 74%,8% 18%);background:linear-gradient(145deg,var(--c),#12081d 68%);box-shadow:0 0 18px var(--c);animation:asCrest 2.7s var(--d) ease forwards}
.ash-sydraza-show .as-break{position:absolute;z-index:10;left:50%;top:48%;width:min(58vw,620px);height:min(58vw,620px);transform:translate(-50%,-50%) scale(.1);background:repeating-conic-gradient(from 4deg,transparent 0 8deg,#f5deff 9deg 9.6deg,transparent 10deg 19deg);opacity:0;animation:asBreak 1.25s 1.05s ease-out forwards}
.ash-sydraza-show .as-prism{position:absolute;z-index:12;left:50%;top:49%;width:min(26vw,280px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.1) rotate(45deg);background:conic-gradient(#ff446b,#ffba3b,#eef76b,#55dc9d,#51b8ff,#9670ff,#ff62d0,#ff446b);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 36px #fff,0 0 110px #a353ff;animation:asPrism 2.6s .8s ease forwards}
.ash-sydraza-show .as-banner{position:absolute;z-index:16;left:50%;top:46%;width:5px;height:min(38vh,330px);background:linear-gradient(var(--c),transparent);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(var(--r)) scaleY(0);box-shadow:0 0 9px var(--c);animation:asBanner 1.8s var(--d) ease forwards}
.ash-sydraza-show .as-type{position:absolute;z-index:18;left:50%;top:47%;transform:translate(-50%,-50%) rotate(var(--r)) translateY(-150px) rotate(calc(var(--r) * -1)) scale(.2);color:var(--c);font:900 clamp(18px,3vw,42px) var(--mono);text-shadow:0 0 12px currentColor;animation:asType 1.9s var(--d) ease forwards}
@keyframes asCrest{0%{opacity:0;filter:grayscale(1);transform:translate(-50%,-50%) rotate(var(--r)) translateY(-300px) rotate(calc(var(--r) * -1)) scale(.5)}28%,48%{opacity:1;filter:grayscale(.7)}72%{opacity:.8;filter:grayscale(0);transform:translate(-50%,-50%) rotate(var(--r)) translateY(-220px) rotate(calc(var(--r) * -1)) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) translateY(-430px) rotate(calc(var(--r) * -1)) scale(.2)}}
@keyframes asBreak{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.7) rotate(21deg)}}
@keyframes asPrism{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(0)}35%,74%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(95deg)}}
@keyframes asBanner{0%,20%{opacity:0;transform:translate(-50%,-100%) rotate(var(--r)) scaleY(0)}45%,80%{opacity:1;transform:translate(-50%,-100%) rotate(var(--r)) scaleY(1)}100%{opacity:0;transform:translate(-50%,-100%) rotate(var(--r)) scaleY(1.3)}}
@keyframes asType{0%,20%{opacity:0}50%,80%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) translateY(-150px) rotate(calc(var(--r) * -1)) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) translateY(-245px) rotate(calc(var(--r) * -1)) scale(.5)}}
.ash-horizon-show{--ash-accent:#f5bd74;background:linear-gradient(#030714 0 36%,#302039 58%,#b35e38 78%,#160a09)}
.ash-horizon-show .ah-sun{position:absolute;left:50%;top:47%;width:min(52vw,570px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.25);background:radial-gradient(circle,#fff9d1 0 12%,#ffc06d 36%,#d55232 72%);box-shadow:0 0 45px #ffd08a,0 0 150px #d94f39;animation:ahSun 3.2s ease forwards}
.ash-horizon-show .ah-cloud{position:absolute;z-index:4;left:var(--x);top:var(--y);width:var(--w);height:clamp(30px,6vw,75px);border-radius:50%;background:#b8c6d488;box-shadow:45px 7px 0 7px #9fb1c188,-40px 13px 0 2px #899dac88;filter:blur(5px);animation:ahCloud var(--t) linear forwards}
.ash-horizon-show .ah-ship{position:absolute;z-index:10;left:-78%;top:40%;width:min(78vw,900px);height:min(30vw,320px);background:linear-gradient(#111b2a 0 42%,#263246 43% 72%,#080b11 73%);clip-path:polygon(0 48%,11% 28%,65% 13%,93% 30%,100% 53%,87% 73%,19% 83%);filter:drop-shadow(0 18px 10px #000b) drop-shadow(0 0 15px #f6b66c55);animation:ahShip 3.35s cubic-bezier(.18,.75,.25,1) forwards}
.ash-horizon-show .ah-ship::before{content:"";position:absolute;left:22%;top:2%;width:48%;height:33%;background:#18243a;clip-path:polygon(0 100%,9% 31%,41% 0,80% 22%,100% 100%)}
.ash-horizon-show .ah-engine{position:absolute;z-index:12;left:var(--x);top:58%;width:clamp(28px,5vw,62px);height:clamp(18px,3vw,38px);border-radius:50%;background:#ffd59a;box-shadow:-15px 0 22px #ff7a35,0 0 45px #ffb15b;animation:ahEngine .45s ease-in-out infinite alternate}
.ash-horizon-show .ah-banner{position:absolute;z-index:9;left:var(--x);top:62%;width:3px;height:min(19vw,170px);background:#e8b878;box-shadow:0 0 7px #ffc16f;transform-origin:50% 0;animation:ahFlag 1s ease-in-out infinite alternate}
.ash-horizon-show .ah-banner::after{content:"";position:absolute;left:3px;top:10%;width:clamp(38px,7vw,80px);height:48%;background:linear-gradient(90deg,#8a1830,#e6a95b);clip-path:polygon(0 0,100% 18%,72% 50%,100% 82%,0 100%)}
@keyframes ahSun{0%{opacity:0;transform:translate(-50%,-30%) scale(.25)}30%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-55%) scale(1.1)}}
@keyframes ahCloud{from{transform:translateX(-30vw)}to{transform:translateX(65vw)}}
@keyframes ahShip{0%{left:-82%;transform:scale(.72);filter:blur(7px)}22%{filter:blur(0)}72%{left:18%;transform:scale(1)}100%{left:115%;transform:scale(1.12);filter:blur(4px)}}
@keyframes ahEngine{to{filter:brightness(2);transform:scaleX(1.25)}}
@keyframes ahFlag{to{transform:skewX(-10deg) rotate(4deg)}}
.amb.ash-pyrrhion{background:radial-gradient(ellipse at 50% 110%,#ff3a2038,transparent 62%),linear-gradient(#080203dd,#210504cc)}
.amb .abg-relic{position:absolute;left:50%;top:55%;width:110px;height:145px;transform:translate(-50%,-50%);clip-path:polygon(50% 0,88% 19%,82% 77%,50% 100%,18% 77%,12% 19%);background:#7c2a1f88;box-shadow:0 0 22px #ff4b2e;animation:abgRelic 2.4s ease-in-out infinite alternate}
.amb .abg-flame{position:absolute;left:var(--x);bottom:-18%;width:12px;height:55%;border-radius:50% 50% 30% 30%;background:linear-gradient(transparent,#ff351f,#ffc35b);filter:blur(1px) drop-shadow(0 0 7px #f31);transform-origin:50% 100%;animation:abgFlame var(--t) var(--d) ease-in-out infinite alternate}
@keyframes abgRelic{to{filter:brightness(2);transform:translate(-50%,-53%) scale(1.04)}}
@keyframes abgFlame{to{transform:scaleY(1.6) translateY(-28px);opacity:.35}}
.amb.ash-khalistra{background:radial-gradient(circle at 50% 108%,#7c3eb53c,transparent 62%),linear-gradient(#05020ddd,#19082acc)}
.amb .abg-crown{position:absolute;left:50%;top:14%;width:170px;height:92px;transform:translateX(-50%);clip-path:polygon(0 82%,4% 20%,30% 57%,50% 0,70% 57%,96% 20%,100% 82%,86% 100%,14% 100%);background:#bd8ae899;box-shadow:0 0 24px #c58dff;animation:abgCrown 2.3s ease-in-out infinite alternate}
.amb .abg-heal{position:absolute;left:var(--x);bottom:-12%;width:3px;height:var(--h);background:linear-gradient(transparent,#f44b72,#d7b7ff);box-shadow:0 0 8px #d782ff;transform-origin:50% 100%;animation:abgHeal var(--t) var(--d) ease-in infinite}
.amb .abg-star{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px #c184ff;animation:abgStar var(--t) ease-in-out infinite alternate}
@keyframes abgCrown{to{filter:brightness(1.8);transform:translateX(-50%) scale(1.07)}}
@keyframes abgHeal{to{transform:translateY(-250%) scaleY(.2);opacity:0}}
@keyframes abgStar{to{opacity:.2;transform:scale(.4)}}
.amb.ash-sydraza{background:radial-gradient(circle at 50% 107%,#673aa03b,transparent 61%),linear-gradient(#040307dd,#120a20cc)}
.amb .abg-prism{position:absolute;left:50%;top:56%;width:150px;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);background:conic-gradient(#ff5274,#ffc14b,#eef76b,#57df9d,#55bfff,#9874ff,#ff6fd4,#ff5274);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 28px #fff8;animation:abgPrism 8s linear infinite}
.amb .abg-ribbon{position:absolute;left:50%;top:58%;width:4px;height:48%;background:linear-gradient(var(--c),transparent);box-shadow:0 0 7px var(--c);transform-origin:50% 0;transform:rotate(var(--r));animation:abgRibbon var(--t) ease-in-out infinite alternate}
@keyframes abgPrism{to{transform:translate(-50%,-50%) rotate(405deg)}}
@keyframes abgRibbon{to{filter:brightness(2);height:66%;opacity:.35}}
.amb.ash-horizon{background:linear-gradient(#040915df 0 39%,#35213acc 64%,#ba60374f 100%)}
.amb .abg-sun{position:absolute;left:50%;top:46%;width:220px;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff4c0,#e98047 60%,transparent 64%);box-shadow:0 0 40px #ed945b;opacity:.6}
.amb .abg-ship{position:absolute;left:-48%;top:45%;width:43%;height:80px;background:#101a29;clip-path:polygon(0 50%,12% 27%,67% 12%,94% 33%,100% 57%,83% 78%,19% 88%);filter:drop-shadow(0 11px 6px #000) drop-shadow(0 0 9px #e8965c);animation:abgShip 12s linear infinite}
.amb .abg-cloud{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:24px;border-radius:50%;background:#adb9c34f;filter:blur(5px);animation:abgCloud var(--t) linear infinite}
@keyframes abgShip{to{left:112%}}
@keyframes abgCloud{to{transform:translateX(75vw);opacity:.15}}
@media (max-width:700px){.ash-legend-name{bottom:11%;font-size:clamp(18px,6vw,31px)}.ash-legend-sub{bottom:7%;letter-spacing:.22em}.ash-pyrrhion-show .ap-eye{top:19%;width:78vw}.ash-khalistra-show .ak-crown{top:19%;width:52vw}.ash-horizon-show .ah-ship{width:96vw}.ash-horizon-show .ah-sun{width:78vw}}

.rep-show{position:fixed;inset:0;z-index:100006;overflow:hidden;pointer-events:none;isolation:isolate;background:#030307f4;animation:repVeil 3.8s ease forwards}
.rep-name{position:absolute;z-index:40;left:3%;right:3%;bottom:8%;text-align:center;color:#fff6df;font:800 clamp(21px,4vw,58px) Georgia,serif;letter-spacing:.08em;text-shadow:0 3px 4px #000,0 0 22px var(--rep,#e98b51);animation:repName 3.4s ease forwards}
.rep-sub{position:absolute;z-index:40;left:5%;right:5%;bottom:4.5%;text-align:center;color:var(--rep,#e98b51);font:800 clamp(7px,.9vw,12px) var(--mono);letter-spacing:.34em;text-transform:uppercase;text-shadow:0 0 12px currentColor;animation:repName 3.55s ease forwards}
.rep-core{position:absolute;left:50%;top:47%;width:min(30vw,310px);aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(0 0 28px var(--rep));animation:repCore 3.2s ease forwards}
.rep-ring{position:absolute;left:50%;top:47%;width:var(--s);aspect-ratio:1;border:clamp(2px,.35vw,5px) solid var(--rep);border-radius:50%;transform:translate(-50%,-50%) rotate(var(--r));box-shadow:0 0 18px var(--rep),inset 0 0 14px var(--rep);animation:repRing var(--t) linear infinite}
.rep-shard{position:absolute;left:var(--x);top:var(--y);width:3px;height:var(--h);background:linear-gradient(transparent,var(--rep),transparent);box-shadow:0 0 10px var(--rep);transform:rotate(var(--r));animation:repShard var(--t) ease-in-out infinite alternate}
@keyframes repVeil{0%{opacity:0}8%,80%{opacity:1}100%{opacity:0}}
@keyframes repName{0%,24%{opacity:0;transform:translateY(18px);letter-spacing:.25em}40%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
@keyframes repCore{0%,15%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-40deg)}42%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(22deg)}}
@keyframes repRing{to{transform:translate(-50%,-50%) rotate(calc(var(--r) + 360deg))}}
@keyframes repShard{to{opacity:.18;transform:translateY(-45px) rotate(var(--r)) scaleY(.45)}}
.rep-haldazee{--rep:#e7ad5d;background:radial-gradient(circle at 50% 47%,#79501b66,transparent 43%),linear-gradient(#040506,#171109)}
.rep-haldazee .rep-core{border-radius:50%;background:radial-gradient(circle,#fff6bd 0 5%,#b77726 6% 17%,#17120b 18% 31%,#d7a24a 32% 38%,#08090b 39% 60%,#7f5d27 61%);clip-path:polygon(50% 0,61% 25%,86% 14%,75% 39%,100% 50%,75% 61%,86% 86%,61% 75%,50% 100%,39% 75%,14% 86%,25% 61%,0 50%,25% 39%,14% 14%,39% 25%)}
.rep-niko{--rep:#e64236;background:linear-gradient(120deg,#07080b 0 49%,#5d100e 50% 52%,#130506 53%)}
.rep-niko .rep-core{background:linear-gradient(135deg,#c7d8e9 0 12%,#24364d 13% 48%,#a41c1b 49% 74%,#180507 75%);clip-path:polygon(50% 0,90% 22%,78% 100%,22% 100%,10% 22%)}
.rep-boralis{--rep:#fff2bd;background:radial-gradient(circle at 50% 42%,#fff7ce44,transparent 38%),linear-gradient(#121212,#ded8c4 50%,#201d18)}
.rep-boralis .rep-core{background:linear-gradient(145deg,#fffbe9,#bbb49e 45%,#36332d);clip-path:polygon(50% 0,86% 20%,100% 68%,67% 100%,33% 100%,0 68%,14% 20%);box-shadow:0 0 0 8px #fff6d5}
.rep-anideccio{--rep:#92e7ff;background:radial-gradient(ellipse at 50% 47%,#5bc9ee55,transparent 42%),linear-gradient(#030914,#0b2440)}
.rep-anideccio .rep-core{background:linear-gradient(135deg,#effcffaa,#6fdcff44,#071526aa);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);backdrop-filter:blur(4px)}
.rep-kalcifor{--rep:#529cff;background:radial-gradient(circle at 50% 48%,#1854a16b,transparent 43%),linear-gradient(#020713,#091d39)}
.rep-kalcifor .rep-core{background:conic-gradient(from 20deg,#67baff,#102e68,#d7edff,#154897,#67baff);clip-path:polygon(50% 0,64% 35%,100% 50%,64% 65%,50% 100%,36% 65%,0 50%,36% 35%)}
.rep-lovisa{--rep:#8fa8ff;background:linear-gradient(110deg,#04040a,#101735 50%,#020207)}
.rep-lovisa .rep-core{width:min(48vw,520px);aspect-ratio:1.7;background:repeating-linear-gradient(0deg,#e7ecff 0 13px,#11172d 14px 20px,#05050a 21px 31px);clip-path:polygon(0 8%,100% 0,93% 92%,7% 100%);filter:drop-shadow(0 0 24px #6f82ff)}
.rep-lovisa .rep-core::after{content:"REDACTED  REDACTED  REDACTED";position:absolute;inset:36% 5%;color:#050509;background:#050509;font:900 clamp(10px,2vw,24px) var(--mono);letter-spacing:.25em;white-space:nowrap}
.amb.rep-haldazee{background:radial-gradient(circle at 50% 70%,#ad792f3b,transparent 58%),linear-gradient(#050506dd,#1a1208cc)}
.amb.rep-niko{background:linear-gradient(120deg,#05070bdd 0 49%,#65100c55 50%,#140407cc)}
.amb.rep-boralis{background:radial-gradient(circle at 50% 62%,#fff2bb35,transparent 55%),linear-gradient(#171612dd,#77726455)}
.amb.rep-anideccio{background:radial-gradient(circle at 50% 68%,#75ddff3a,transparent 56%),linear-gradient(#030a14dd,#102743cc)}
.amb.rep-kalcifor{background:radial-gradient(circle at 50% 68%,#347dff42,transparent 58%),linear-gradient(#020814dd,#0b2448cc)}
.amb.rep-lovisa{background:repeating-linear-gradient(0deg,#070812dd 0 21px,#10152acc 22px 25px)}
.amb .rep-bg-core{position:absolute;left:50%;top:57%;width:180px;aspect-ratio:1;transform:translate(-50%,-50%);border:4px solid var(--c);border-radius:50%;box-shadow:0 0 28px var(--c),inset 0 0 22px var(--c);animation:repBg 8s linear infinite}
.amb .rep-bg-line{position:absolute;left:var(--x);top:var(--y);width:2px;height:var(--h);background:linear-gradient(transparent,var(--c),transparent);box-shadow:0 0 8px var(--c);animation:repBgLine var(--t) ease-in-out infinite alternate}
@keyframes repBg{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes repBgLine{to{opacity:.15;transform:translateY(-30px) scaleY(.5)}}
@media(max-width:700px){.rep-name{bottom:12%;font-size:clamp(18px,6vw,30px)}.rep-sub{bottom:8%;letter-spacing:.18em}.rep-core{width:56vw}.rep-lovisa .rep-core{width:80vw}}

.akihiro-show{position:fixed;inset:0;z-index:100006;overflow:hidden;pointer-events:none;isolation:isolate;
  background:radial-gradient(ellipse at 50% 72%,#7793b12b,transparent 42%),linear-gradient(#01030a 0 48%,#07111d 72%,#020308);
  animation:akiVeil 4.25s ease forwards}
.akihiro-show .aki-moon{position:absolute;left:50%;top:9%;width:min(46vw,520px);aspect-ratio:1;border-radius:50%;
  transform:translateX(-50%) scale(.35);background:radial-gradient(circle,#f7fbff 0 45%,#9eb5d6 68%,#31445f 72%);
  box-shadow:0 0 38px #dceaff,0 0 130px #7698ca88;animation:akiMoon 3.8s ease forwards}
.akihiro-show .aki-gate{position:absolute;z-index:4;left:50%;bottom:17%;width:min(78vw,860px);height:min(47vw,470px);
  transform:translateX(-50%);border:clamp(12px,2vw,28px) solid #171d29;border-bottom:0;
  box-shadow:inset 0 0 0 3px #8995a755,0 0 45px #02040a;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  animation:akiGate 3.7s ease forwards}
.akihiro-show .aki-gate::before{content:"";position:absolute;left:-7%;right:-7%;top:-14%;height:14%;
  background:linear-gradient(#313a48,#0b0e15);clip-path:polygon(0 100%,8% 0,92% 0,100% 100%)}
.akihiro-show .aki-floor{position:absolute;z-index:3;left:-18%;right:-18%;bottom:-24%;height:62%;
  transform:perspective(520px) rotateX(62deg);transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg,transparent 0 9%,#9eb1cc22 9.2% 9.7%,transparent 10% 19%),
    repeating-linear-gradient(0deg,#111722 0 34px,#7f91aa24 35px 37px,#090d15 38px 72px);
  box-shadow:inset 0 35px 85px #000;animation:akiFloor 3.8s ease forwards}
.akihiro-show .aki-sentinel{position:absolute;z-index:13;left:50%;bottom:13%;width:min(25vw,270px);height:min(54vw,560px);
  transform:translateX(-50%) scale(.72);clip-path:polygon(43% 0,58% 0,64% 9%,61% 19%,77% 28%,84% 54%,74% 60%,70% 100%,53% 100%,50% 68%,47% 100%,30% 100%,26% 60%,16% 54%,23% 28%,39% 19%,36% 9%);
  background:linear-gradient(90deg,#1b222e,#d7e0e8 22%,#596777 43%,#f4f6f4 51%,#566373 64%,#111722 91%);
  filter:drop-shadow(0 15px 12px #000) drop-shadow(0 0 19px #aebed1);animation:akiSentinel 3.55s ease forwards}
.akihiro-show .aki-sentinel::before{content:"";position:absolute;left:38%;top:6%;width:24%;height:9%;border-radius:50%;
  background:#05070b;box-shadow:inset 0 0 0 2px #aeb9c6,0 0 10px #dce9ff}
.akihiro-show .aki-blade{position:absolute;z-index:16;left:56%;bottom:10%;width:clamp(9px,1.4vw,18px);height:min(53vw,550px);
  transform:rotate(14deg) scaleY(0);transform-origin:50% 100%;background:linear-gradient(90deg,#526173,#f9fcff 48%,#6f7f91);
  clip-path:polygon(50% 0,100% 88%,63% 100%,37% 100%,0 88%);box-shadow:0 0 14px #d7e7ff;animation:akiBlade 2.8s .45s ease forwards}
.akihiro-show .aki-gem{position:absolute;z-index:22;left:50%;top:53%;width:clamp(26px,4vw,58px);aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(var(--r)) translateY(-190px) rotate(calc(var(--r) * -1)) scale(.12);
  clip-path:polygon(50% 0,92% 27%,80% 82%,50% 100%,20% 82%,8% 27%);background:var(--c);
  box-shadow:0 0 22px var(--c),0 0 55px var(--c);animation:akiGem 2.65s var(--d) cubic-bezier(.2,.8,.2,1) forwards}
.akihiro-show .aki-dragon{position:absolute;z-index:18;left:-76%;top:16%;width:min(72vw,880px);height:min(31vw,350px);
  background:#000d;clip-path:polygon(0 47%,18% 31%,34% 37%,45% 5%,51% 36%,60% 0,67% 41%,82% 25%,100% 47%,80% 59%,67% 54%,56% 75%,50% 100%,43% 73%,32% 55%,17% 61%);
  filter:drop-shadow(0 0 18px #02040a);animation:akiDragon 1.55s 1.42s ease-in-out forwards}
.akihiro-show .aki-name{position:absolute;z-index:35;left:3%;right:3%;bottom:7%;text-align:center;color:#edf3f8;
  font:800 clamp(22px,4vw,62px) Georgia,serif;letter-spacing:.12em;text-shadow:0 3px 3px #000,0 0 20px #9eb7d4,0 0 48px #273c5a;
  animation:akiWords 3.75s ease forwards}
.akihiro-show .aki-quote{position:absolute;z-index:35;left:5%;right:5%;bottom:3.2%;text-align:center;color:#bbc9db;
  font:800 clamp(8px,1vw,13px) var(--mono);letter-spacing:.31em;text-transform:uppercase;text-shadow:0 0 11px #91acd0;
  animation:akiWords 3.95s ease forwards}
@keyframes akiVeil{0%{opacity:0}7%,84%{opacity:1}100%{opacity:0}}
@keyframes akiMoon{0%{opacity:0;transform:translateX(-50%) scale(.35)}28%,80%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.08)}}
@keyframes akiGate{0%{opacity:0;transform:translateX(-50%) scale(1.22)}28%,84%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0}}
@keyframes akiFloor{0%{opacity:0}30%,86%{opacity:1}100%{opacity:0}}
@keyframes akiSentinel{0%,16%{opacity:0;transform:translateX(-50%) scale(.72) translateY(80px)}42%,84%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;filter:brightness(2)}}
@keyframes akiBlade{0%{opacity:0;transform:rotate(14deg) scaleY(0)}45%,86%{opacity:1;transform:rotate(14deg) scaleY(1)}100%{opacity:0;transform:rotate(14deg) scaleY(1.08)}}
@keyframes akiGem{0%,14%{opacity:0}44%,79%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) translateY(-190px) rotate(calc(var(--r) * -1)) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) translateY(-85px) rotate(calc(var(--r) * -1)) scale(.25)}}
@keyframes akiDragon{0%{left:-76%;opacity:0}18%,76%{opacity:.92}100%{left:115%;opacity:0}}
@keyframes akiWords{0%,37%{opacity:0;transform:translateY(18px);letter-spacing:.28em}51%,84%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-9px)}}
.amb.mf-akihiro{background:radial-gradient(ellipse at 50% 112%,#6f88ad3d,transparent 62%),linear-gradient(#02050bdd,#0b1421cc)}
.amb .akbg-gate{position:absolute;left:50%;bottom:-5%;width:58%;height:78%;transform:translateX(-50%);border:12px solid #8a99ad44;border-bottom:0;box-shadow:0 0 28px #8fa9ca33}
.amb .akbg-sentinel{position:absolute;left:50%;bottom:-8%;width:94px;height:72%;transform:translateX(-50%);clip-path:polygon(42% 0,58% 0,64% 21%,80% 31%,72% 100%,52% 100%,50% 62%,47% 100%,27% 100%,20% 31%,36% 21%);background:linear-gradient(90deg,#1a2432,#afbdca,#39485a,#dce6ef,#192330);filter:drop-shadow(0 0 9px #b9cce2)}
.amb .akbg-gem{position:absolute;left:var(--x);top:var(--y);width:13px;height:16px;clip-path:polygon(50% 0,100% 35%,76% 100%,24% 100%,0 35%);background:var(--c);box-shadow:0 0 11px var(--c);animation:akbgGem var(--t) ease-in-out infinite alternate}
@keyframes akbgGem{to{transform:translateY(-14px) scale(1.24);filter:brightness(1.8)}}
@media (max-width:700px){.akihiro-show .aki-moon{width:84vw;top:15%}.akihiro-show .aki-gate{width:96vw;height:64vw;bottom:23%}.akihiro-show .aki-sentinel{width:42vw;height:88vw;bottom:17%}.akihiro-show .aki-name{bottom:11%;font-size:clamp(20px,7vw,34px)}.akihiro-show .aki-quote{bottom:7%;letter-spacing:.16em}}

/* ================= Hollow Chorus: the play in five Acts ================= */
.hcl-show{position:fixed;inset:0;z-index:100006;overflow:hidden;pointer-events:none;isolation:isolate;color:#efe2cf;
  background:radial-gradient(ellipse at 50% 38%,#3a141522,transparent 55%),repeating-linear-gradient(33deg,#0000 0 3px,#ffffff05 4px 5px),linear-gradient(#0d0708,#170c0b 55%,#070404);
  box-shadow:inset 0 0 12vmin #3c1466,inset 0 0 3vmin #6b2aa0;animation:hclVeil 5.4s ease forwards}
.hcl-show::before{content:"";position:absolute;inset:0;z-index:40;background:repeating-linear-gradient(0deg,#09030d00 0 7px,#a855b82a 8px 9px,#02010300 10px 15px),repeating-linear-gradient(0deg,transparent 0 8px,#e77cff26 9px 10px);mix-blend-mode:screen;animation:facGlitchBlocks 1.35s steps(1,end) infinite}
.hcl-show::after{content:"";position:absolute;inset:-2%;z-index:41;background:radial-gradient(ellipse at 50% 50%,transparent 58%,#26093cc0 82%,#07020c 100%);animation:hclBurn 5.4s ease forwards}
.hcl-face{position:absolute;z-index:3;left:50%;top:-6%;width:min(40vw,420px);aspect-ratio:1;transform:translateX(-50%) translateY(-18%);background-size:cover;background-position:50% 18%;
  filter:grayscale(.55) sepia(.35) contrast(1.25) brightness(.8);-webkit-mask:radial-gradient(ellipse 48% 50% at 50% 42%,#000 40%,transparent 72%);mask:radial-gradient(ellipse 48% 50% at 50% 42%,#000 40%,transparent 72%);animation:hclFace 5.2s ease forwards}
.hcl-strings{position:absolute;z-index:6;left:8%;right:8%;top:17%;height:24%;display:flex;justify-content:space-around}
.hcl-strings i{width:1px;height:100%;background:linear-gradient(#c21d2a00,#c21d2a 30%,#e0343f);box-shadow:0 0 6px #ff2d3d99;transform-origin:50% 0;transform:scaleY(0);animation:hclString 5.2s calc(.35s + var(--i) * .12s) ease forwards}
.hcl-title{position:absolute;z-index:8;left:0;right:0;top:13%;text-align:center;font:700 clamp(28px,5.6vw,84px)/1 Georgia,"Times New Roman",serif;font-variant:small-caps;letter-spacing:.1em;color:#eadcc6;text-shadow:0 0 2px #000,3px 0 #ff315d88,-3px 0 #35f4e866,0 0 26px #a45cff;animation:hclTitle 5.2s ease forwards}
.hcl-title small{display:block;margin-top:.45em;font:800 clamp(9px,1.1vw,14px) var(--mono);letter-spacing:.5em;color:#d7b98a;text-shadow:0 0 10px #000}
.hcl-panels{position:absolute;z-index:10;left:6%;right:6%;top:37%;bottom:17%;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(4px,.8vw,12px)}
.hcl-panel{position:relative;overflow:hidden;border:1px solid #b88d4f;background:#120a09;box-shadow:inset 0 0 0 3px #0b0606,inset 0 0 0 4px #7a5530,0 12px 30px #000c;opacity:0;transform:translateY(40px);animation:hclPanel 5s calc(.7s + var(--i) * .22s) cubic-bezier(.2,.8,.2,1) forwards}
.hcl-panel b{position:absolute;z-index:4;left:10%;right:10%;top:4%;padding:4px 0;background:linear-gradient(#efe4d0,#d2c1a2);color:#2a0d10;text-align:center;font:800 clamp(9px,1.05vw,14px) Georgia,serif;letter-spacing:.28em;text-transform:uppercase;clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%)}
.hcl-panel span{position:absolute;z-index:4;left:7%;right:7%;top:15%;text-align:center;font:italic 700 clamp(12px,1.55vw,23px)/1.15 Georgia,"Times New Roman",serif;letter-spacing:.04em;color:#efe2cf;text-shadow:0 0 8px #000,0 0 18px #000}
.hcl-panel em{position:absolute;z-index:4;left:0;right:0;bottom:3%;text-align:center;font:800 clamp(6px,.7vw,9px) var(--mono);letter-spacing:.2em;color:#d7b98a;font-style:normal;text-transform:uppercase}
.hcl-panel::before,.hcl-panel::after{content:"";position:absolute;z-index:2}
.hcl-panel[data-act="1"]::before{inset:45% 0 0;background:repeating-radial-gradient(ellipse at 50% 140%,#0000 0 10px,#2a1714 11px 16px,#0000 17px 22px),linear-gradient(#0000,#1d0e0c)}
.hcl-panel[data-act="1"]::after{left:24%;right:24%;bottom:12%;height:22%;background:linear-gradient(#a8232b,#5d0f15);clip-path:polygon(10% 0,90% 0,90% 45%,100% 45%,100% 100%,82% 100%,82% 70%,18% 70%,18% 100%,0 100%,0 45%,10% 45%);box-shadow:0 0 18px #b3262c66}
.hcl-panel[data-act="2"]::before{inset:0;background:linear-gradient(#0000,#0000);background-image:conic-gradient(from 168deg at 50% 18%,#0000 0 12deg,#f5e6c555 12deg 24deg,#0000 24deg),conic-gradient(from 172deg at 22% 30%,#0000 0 8deg,#f5e6c52e 8deg 16deg,#0000 16deg),conic-gradient(from 172deg at 78% 30%,#0000 0 8deg,#f5e6c52e 8deg 16deg,#0000 16deg);animation:hclSpot 2.4s ease-in-out infinite alternate}
.hcl-panel[data-act="2"]::after{left:38%;right:38%;bottom:9%;height:34%;background:#050303;clip-path:polygon(40% 0,60% 0,63% 12%,58% 18%,74% 32%,86% 100%,14% 100%,26% 32%,42% 18%,37% 12%);box-shadow:0 0 0 #0000}
.hcl-panel[data-act="3"]::before{left:14%;right:14%;top:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#d6453a,#9c1f22 70%,#5e0e12);box-shadow:0 0 30px #c2333088}
.hcl-panel[data-act="3"]::after{left:10%;right:10%;bottom:8%;height:44%;background:#070404;clip-path:polygon(6% 100%,13% 30%,20% 20%,22% 16%,20% 13%,20% 5%,23% 0,27% 0,30% 5%,30% 13%,28% 16%,31% 20%,38% 28%,50% 40%,62% 28%,69% 20%,72% 16%,70% 13%,70% 5%,73% 0,77% 0,80% 5%,80% 13%,78% 16%,80% 20%,87% 30%,94% 100%,60% 100%,50% 56%,40% 100%)}
.hcl-panel[data-act="4"]::before{inset:0;background:repeating-linear-gradient(90deg,#5a0c13 0 7px,#8e1a22 8px 12px,#3a060b 13px 18px);-webkit-mask:linear-gradient(90deg,#000 0 26%,transparent 34% 66%,#000 74%);mask:linear-gradient(90deg,#000 0 26%,transparent 34% 66%,#000 74%);opacity:.85}
.hcl-panel[data-act="4"]::after{left:16%;right:16%;bottom:10%;height:15%;background:#070404;clip-path:polygon(0 100%,2% 70%,10% 52%,16% 42%,21% 38%,23% 28%,28% 22%,33% 26%,35% 38%,34% 46%,45% 40%,62% 34%,80% 45%,92% 62%,100% 100%);filter:drop-shadow(0 0 6px #c21d2a88)}
.hcl-panel[data-act="5"]::before{left:20%;right:20%;top:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#d6453a,#9c1f22 70%,#5e0e12);box-shadow:0 0 30px #c2333088}
.hcl-panel[data-act="5"]::after{left:4%;right:4%;bottom:9%;height:26%;background:#070404;clip-path:polygon(6% 100%,7% 42%,9% 24%,11% 17%,13% 9%,16% 12%,17% 20%,15% 27%,17% 42%,18% 100%,25% 100%,26% 42%,28% 24%,30% 17%,32% 9%,35% 12%,36% 20%,34% 27%,36% 42%,37% 100%,44% 100%,45% 42%,47% 24%,49% 17%,51% 9%,54% 12%,55% 20%,53% 27%,55% 42%,56% 100%,63% 100%,64% 42%,66% 24%,68% 17%,70% 9%,73% 12%,74% 20%,72% 27%,74% 42%,75% 100%,82% 100%,83% 42%,85% 24%,87% 17%,89% 9%,92% 12%,93% 20%,91% 27%,93% 42%,94% 100%)}
.hcl-petal{position:absolute;z-index:30;top:-6%;left:calc(var(--x) * 1%);width:calc(14px * var(--s));aspect-ratio:1.35;border-radius:0 70% 0 70%;background:linear-gradient(135deg,#ffd3e4,#ef7aa8);animation:hclFall 4.4s calc(var(--d) * 1s) linear infinite}
.hcl-petal.glitch{background:linear-gradient(135deg,#d9a6ff,#3a1060);filter:drop-shadow(-3px 0 #35f4e8) drop-shadow(3px 0 #ff315d);animation:hclFall 4.4s calc(var(--d) * 1s) linear infinite,hclJitter .38s steps(2,end) infinite}
.hcl-name{position:absolute;z-index:45;left:3%;right:3%;bottom:7%;text-align:center;font:800 clamp(22px,4vw,60px) Georgia,serif;letter-spacing:.14em;color:#f3e6d2;text-shadow:0 3px 3px #000,-3px 0 #35f4e866,3px 0 #ff315d77,0 0 28px #a45cff;animation:hclWords 5.2s ease forwards}
.hcl-quote{position:absolute;z-index:45;left:5%;right:5%;bottom:3.2%;text-align:center;color:#d4c0e8;font:800 clamp(8px,1vw,13px) var(--mono);letter-spacing:.28em;text-transform:uppercase;text-shadow:0 0 11px #a45cff;animation:hclWords 5.4s ease forwards}
.hcl-tear{position:absolute;z-index:42;left:0;right:0;height:3px;background:#e77cff;box-shadow:0 0 12px #e77cff;opacity:0;animation:hclTear 5.2s steps(1,end) forwards}
@keyframes hclVeil{0%{opacity:0}6%,86%{opacity:1}100%{opacity:0}}
@keyframes hclBurn{0%,78%{opacity:.9;transform:none}100%{opacity:1;transform:scale(.8)}}
@keyframes hclFace{0%{opacity:0;transform:translateX(-50%) translateY(-30%)}22%,84%{opacity:.92;transform:translateX(-50%) translateY(-12%)}100%{opacity:0}}
@keyframes hclString{0%{transform:scaleY(0)}30%,88%{transform:scaleY(1) rotate(0)}40%{transform:scaleY(1) rotate(1.2deg)}52%{transform:scaleY(1) rotate(-1deg)}100%{transform:scaleY(1);opacity:0}}
@keyframes hclTitle{0%,8%{opacity:0;letter-spacing:.5em}24%,84%{opacity:1;letter-spacing:.14em}100%{opacity:0}}
@keyframes hclPanel{0%{opacity:0;transform:translateY(40px)}18%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
@keyframes hclSpot{to{opacity:.55}}
@keyframes hclFall{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(-9vw,112vh,0) rotate(540deg)}}
@keyframes hclJitter{0%{translate:0 0;clip-path:inset(0)}50%{translate:9px -3px;clip-path:inset(35% 0 20% 0)}100%{translate:-7px 2px;clip-path:inset(0 0 55% 0)}}
@keyframes hclWords{0%,40%{opacity:0;transform:translateY(16px)}54%,86%{opacity:1;transform:none}100%{opacity:0}}
@keyframes hclTear{0%{opacity:0;top:20%}30%{opacity:.9;top:41%}31%{opacity:0}62%{opacity:.8;top:71%}63%{opacity:0}78%{opacity:.9;top:28%}79%,100%{opacity:0}}
@media (max-width:700px){.hcl-panels{left:2%;right:2%;top:34%;bottom:20%;gap:3px}.hcl-panel em{display:none}.hcl-face{width:78vw;top:0}.hcl-name{bottom:10%;font-size:clamp(20px,7vw,32px)}}
/* an Act begins */
.hcl-act{position:fixed;z-index:100004;left:50%;top:14%;width:min(210px,40vw);padding:14px 10px 12px;transform:translateX(-50%);pointer-events:none;text-align:center;
  background:linear-gradient(#efe4d0,#d2c1a2);color:#2a0d10;box-shadow:0 14px 40px #000c,0 0 0 1px #7a5530,inset 0 0 0 3px #efe4d0,inset 0 0 0 4px #9c6b35;animation:hclActIn 2.6s ease forwards}
.hcl-act::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 6px,#6b2aa01f 7px 8px);mix-blend-mode:multiply;animation:facGlitchBlocks 1.1s steps(1,end) infinite}
.hcl-act b{display:block;font:800 clamp(12px,1.4vw,16px) Georgia,serif;letter-spacing:.34em;text-transform:uppercase}
.hcl-act span{display:block;margin-top:4px;font:italic 700 clamp(15px,1.9vw,22px)/1.15 Georgia,serif;letter-spacing:.03em;color:#6b1219}
.hcl-act em{display:block;margin-top:6px;font:800 9px var(--mono);letter-spacing:.22em;text-transform:uppercase;font-style:normal;color:#4a2a3a}
@keyframes hclActIn{0%{opacity:0;transform:translateX(-50%) translateY(-18px) scale(.94)}12%,78%{opacity:1;transform:translateX(-50%)}82%{transform:translateX(calc(-50% + 5px));filter:drop-shadow(-3px 0 #35f4e8) drop-shadow(3px 0 #ff315d)}86%{transform:translateX(calc(-50% - 4px));filter:none}100%{opacity:0;transform:translateX(-50%) translateY(-8px)}}
/* the Act she is on, worn on the minion */
.hcl-badge{position:absolute;z-index:7;left:50%;top:-9px;transform:translateX(-50%);padding:1px 6px;border:1px solid #9c6b35;border-radius:3px;background:linear-gradient(#efe4d0,#d2c1a2);color:#6b1219;font:800 9px Georgia,serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;pointer-events:none;box-shadow:0 2px 6px #000a,0 0 8px #a45cff66}
/* the battlefield while she performs */
.amb.mf-hollow{background:radial-gradient(ellipse at 50% 18%,#9c1f2233,transparent 40%),radial-gradient(ellipse at 50% 112%,#3c146655,transparent 60%),linear-gradient(#0d0708dd,#150a12cc)}
.amb .hcbg-sun{position:absolute;left:50%;top:9%;width:26vmin;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle,#c2333066,#6e0e1433 70%,transparent 72%)}
.amb .hcbg-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 8px,#e77cff14 9px 10px);mix-blend-mode:screen;animation:facGlitchBlocks 2.2s steps(1,end) infinite}
.amb .hcbg-string{position:absolute;top:0;left:var(--x);width:1px;height:var(--h);background:linear-gradient(#c21d2a00,#c21d2a88);transform-origin:50% 0;animation:hcbgSway var(--t) ease-in-out infinite alternate}
.amb .hcbg-petal{position:absolute;top:-4%;left:var(--x);width:10px;aspect-ratio:1.35;border-radius:0 70% 0 70%;background:linear-gradient(135deg,#ffd3e4aa,#ef7aa888);animation:hcbgFall var(--t) linear infinite;animation-delay:var(--d)}
.amb .hcbg-petal.glitch{background:linear-gradient(135deg,#d9a6ffaa,#3a1060aa);filter:drop-shadow(-2px 0 #35f4e8) drop-shadow(2px 0 #ff315d);animation:hcbgFall var(--t) linear infinite,hclJitter .42s steps(2,end) infinite;animation-delay:var(--d),0s}
@keyframes hcbgSway{to{transform:rotate(2deg)}}
@keyframes hcbgFall{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(-6vw,110vh,0) rotate(420deg)}}
@media(prefers-reduced-motion:reduce){.hcl-show *,.hcl-show::before,.hcl-act,.hcl-act::after,.amb .hcbg-petal,.amb .hcbg-scan,.amb .hcbg-string{animation-duration:.01s!important;animation-iteration-count:1!important}}

.aoi-legend-show,.event-horizon-cast{position:fixed;inset:0;overflow:hidden;pointer-events:none;isolation:isolate}
.aoi-legend-show{z-index:100007;background:radial-gradient(circle at 50% 48%,#343c9160 0 12%,#090b2be8 46%,#01020afa 100%);animation:aoiVeil 4.65s ease forwards}
.aoi-legend-show .aoi-sky{position:absolute;z-index:4;inset:-12%;background-image:radial-gradient(circle at 8% 18%,#fff 0 1px,transparent 1.8px),radial-gradient(circle at 24% 71%,#8dbbff 0 1.2px,transparent 2px),radial-gradient(circle at 43% 27%,#fff 0 1px,transparent 1.8px),radial-gradient(circle at 61% 79%,#9c83ff 0 1.3px,transparent 2px),radial-gradient(circle at 79% 16%,#f3d996 0 1.2px,transparent 2px),radial-gradient(circle at 94% 57%,#fff 0 1px,transparent 1.8px);background-size:173px 149px,223px 191px,257px 217px,283px 239px,197px 263px,239px 181px;filter:drop-shadow(0 0 5px #778cff);opacity:0;animation:aoiSky 4.5s ease forwards}
.aoi-legend-show .aoi-shade{position:absolute;z-index:5;inset:0;background:radial-gradient(circle at 50% 45%,transparent 0 16%,#07092266 42%,#01020bdc 83%),linear-gradient(transparent 48%,#02020bea 91%)}
.aoi-legend-show .aoi-clock{position:absolute;z-index:9;left:50%;top:45%;width:min(72vw,760px);aspect-ratio:1;border:2px solid #b7caffaa;border-radius:50%;transform:translate(-50%,-50%) rotate(var(--r)) scale(.16);box-shadow:inset 0 0 28px #546cff44,0 0 30px #8d8dff44;animation:aoiClock 3.7s var(--d) cubic-bezier(.18,.82,.18,1) forwards}
.aoi-legend-show .aoi-clock::before,.aoi-legend-show .aoi-clock::after{content:"";position:absolute;border-radius:50%;inset:8%;border:1px dashed #d6bb76bb}.aoi-legend-show .aoi-clock::after{inset:21%;border-style:solid;border-color:#777dff88}
.aoi-legend-show .aoi-hand{position:absolute;z-index:11;left:50%;top:45%;width:3px;height:min(26vw,270px);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(var(--r));background:linear-gradient(transparent,#f6e4a5 18%,#fff 100%);box-shadow:0 0 12px #9ca9ff;animation:aoiHand 3.55s var(--d) cubic-bezier(.7,0,.2,1) forwards}
.aoi-legend-show .aoi-starstone{position:absolute;z-index:18;left:50%;top:45%;width:min(18vw,190px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.05) rotate(-45deg);clip-path:polygon(50% 0,62% 35%,100% 50%,62% 65%,50% 100%,38% 65%,0 50%,38% 35%);background:radial-gradient(circle,#fff 0 4%,#85c9ff 13%,#6c55ff 39%,#11062c 72%);box-shadow:0 0 18px #fff,0 0 55px #707cff,0 0 130px #361faf;animation:aoiStarstone 3.9s .18s ease forwards}
.aoi-legend-show .aoi-mote{position:absolute;z-index:13;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c);opacity:0;animation:aoiMote 3.4s var(--d) ease forwards}
.aoi-legend-show .aoi-name{position:absolute;z-index:30;left:3%;right:3%;bottom:7%;text-align:center;color:#f5f1ff;font:800 clamp(24px,4.4vw,66px) Georgia,serif;letter-spacing:.14em;text-shadow:0 3px 3px #000,0 0 19px #778cff,0 0 52px #302082;animation:aoiWords 4.25s ease forwards}
.aoi-legend-show .aoi-quote{position:absolute;z-index:30;left:5%;right:5%;bottom:3.4%;text-align:center;color:#d9c98d;font:800 clamp(8px,1vw,13px) var(--mono);letter-spacing:.35em;text-transform:uppercase;text-shadow:0 0 11px #606fff;animation:aoiWords 4.4s ease forwards}
@keyframes aoiVeil{0%{opacity:0}7%,86%{opacity:1}100%{opacity:0}}
@keyframes aoiSky{0%,10%{opacity:0;transform:scale(1.12) rotate(-2deg)}28%,82%{opacity:.92;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(.94) rotate(3deg);filter:brightness(1.8)}}
@keyframes aoiClock{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scale(.16)}24%{opacity:1}57%,72%{opacity:.95;transform:translate(-50%,-50%) rotate(calc(var(--r) + 145deg)) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--r) + 145deg)) scale(.06)}}
@keyframes aoiHand{0%,12%{opacity:0;transform:translate(-50%,-100%) rotate(var(--r))}25%{opacity:1}59%,76%{transform:translate(-50%,-100%) rotate(calc(var(--r) + 190deg));opacity:1}100%{opacity:0;transform:translate(-50%,-100%) rotate(calc(var(--r) + 190deg)) scaleY(.08)}}
@keyframes aoiStarstone{0%,13%{opacity:0;transform:translate(-50%,-50%) scale(.05) rotate(-45deg)}35%,72%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}86%{filter:brightness(2.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.25) rotate(45deg)}}
@keyframes aoiMote{0%,12%{opacity:0;transform:translate(0,0) scale(.2)}31%,69%{opacity:1}76%{transform:translate(var(--dx),var(--dy)) scale(1)}100%{opacity:0;transform:translate(var(--cx),var(--cy)) scale(.05)}}
@keyframes aoiWords{0%,39%{opacity:0;transform:translateY(18px);letter-spacing:.3em}53%,84%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px);letter-spacing:.2em}}

.event-horizon-cast{z-index:100008;background:radial-gradient(circle at 50% 45%,#33247a55 0 8%,#03051bea 42%,#000108f8 100%);animation:ehVeil 3.15s ease forwards}
.event-horizon-cast .eh-field{position:absolute;inset:-25%;background:repeating-conic-gradient(from 0deg at 50% 45%,transparent 0 10deg,#778cff16 10.4deg 10.9deg,transparent 11.2deg 23deg);animation:ehField 2.9s cubic-bezier(.7,0,.2,1) forwards}
.event-horizon-cast .eh-ring{position:absolute;z-index:4;left:50%;top:45%;width:var(--size);aspect-ratio:1;border:clamp(1px,.18vw,3px) solid var(--c);border-radius:50%;transform:translate(-50%,-50%) rotate(var(--r)) scale(.1);box-shadow:0 0 18px color-mix(in srgb,var(--c),transparent 35%);animation:ehRing 2.65s var(--d) cubic-bezier(.16,.84,.2,1) forwards}
.event-horizon-cast .eh-ring::after{content:"";position:absolute;inset:-4%;border-radius:50%;background:repeating-conic-gradient(transparent 0 8deg,var(--c) 8.5deg 9deg,transparent 9.5deg 18deg);mask:radial-gradient(transparent 0 86%,#000 87%)}
.event-horizon-cast .eh-core{position:absolute;z-index:12;left:50%;top:45%;width:min(31vw,330px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.04) rotate(-40deg);clip-path:polygon(50% 0,61% 35%,85% 15%,65% 39%,100% 50%,65% 61%,85% 85%,61% 65%,50% 100%,39% 65%,15% 85%,35% 61%,0 50%,35% 39%,15% 15%,39% 35%);background:#000;box-shadow:0 0 0 4px #fff3c5,0 0 24px #e8c879,0 0 70px #6f72ff,0 0 145px #3825aa;animation:ehCore 2.65s .12s cubic-bezier(.18,.86,.22,1) forwards}
.event-horizon-cast .eh-fragment{position:absolute;z-index:8;left:50%;top:45%;width:clamp(8px,1.3vw,18px);height:clamp(32px,6vw,76px);border-radius:50%;transform:translate(-50%,-50%) rotate(var(--r)) translateY(var(--orbit));transform-origin:50% 50%;background:linear-gradient(transparent,var(--c));box-shadow:0 0 14px var(--c);animation:ehFragment 2.35s var(--d) cubic-bezier(.4,0,.7,.3) forwards}
.event-horizon-cast .eh-burst{position:absolute;z-index:14;left:50%;top:45%;width:min(14vw,150px);aspect-ratio:1;border:3px solid #fff;border-radius:50%;transform:translate(-50%,-50%) scale(.01);box-shadow:0 0 25px #fff,0 0 70px #747aff;opacity:0;animation:ehBurst 1.15s 1.82s ease-out forwards}
.event-horizon-cast .eh-title{position:absolute;z-index:20;left:4%;right:4%;bottom:11%;text-align:center;color:#eeeaff;font:900 clamp(22px,4vw,58px) Georgia,serif;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 2px 3px #000,0 0 20px #656cff;animation:ehWords 2.95s ease forwards}
.event-horizon-cast .eh-total{position:absolute;z-index:21;left:50%;top:45%;transform:translate(-50%,-50%);color:#fff9db;text-align:center;font:900 clamp(46px,9vw,132px)/.85 Georgia,serif;text-shadow:0 0 13px #fff,0 0 32px #d4b45c,0 0 75px #6e63ff;animation:ehTotal 2.75s ease forwards}.event-horizon-cast .eh-total small{display:block;margin-top:12px;font:800 clamp(8px,1vw,13px) var(--mono);letter-spacing:.42em;color:#c9d2ff;text-transform:uppercase}
@keyframes ehVeil{0%{opacity:0}8%,82%{opacity:1}100%{opacity:0}}
@keyframes ehField{0%{opacity:0;transform:rotate(-10deg) scale(1.2)}25%,62%{opacity:1}82%{transform:rotate(38deg) scale(.7)}100%{opacity:0;transform:rotate(48deg) scale(.05)}}
@keyframes ehRing{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scale(.08)}27%,66%{opacity:1;transform:translate(-50%,-50%) rotate(calc(var(--r) + 130deg)) scale(1)}88%,100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--r) + 210deg)) scale(.04)}}
@keyframes ehCore{0%{opacity:0;transform:translate(-50%,-50%) scale(.04) rotate(-40deg)}28%,72%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}84%{filter:brightness(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.7) rotate(45deg);filter:brightness(4)}}
@keyframes ehFragment{0%,12%{opacity:0}30%{opacity:1}72%{transform:translate(-50%,-50%) rotate(calc(var(--r) + 160deg)) translateY(var(--orbit)) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--r) + 360deg)) translateY(0) scale(.05)}}
@keyframes ehBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.01)}24%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(12)}}
@keyframes ehWords{0%,24%{opacity:0;letter-spacing:.6em}42%,76%{opacity:1}100%{opacity:0;letter-spacing:.34em}}
@keyframes ehTotal{0%,31%{opacity:0;transform:translate(-50%,-50%) scale(.35)}46%,73%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.65)}}
.amb.mf-aoi{background:radial-gradient(circle at 50% 40%,#5360be28,transparent 42%),linear-gradient(#010313ee,#08092bd9)}.amb .aoi-bg-ring{position:absolute;left:50%;top:48%;width:min(72%,520px);aspect-ratio:1;border:1px solid #929cff55;border-radius:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 25px #4d55b733;animation:aoiBgRing 18s linear infinite}.amb .aoi-bg-star{position:absolute;left:50%;top:48%;width:74px;aspect-ratio:1;transform:translate(-50%,-50%);clip-path:polygon(50% 0,62% 35%,100% 50%,62% 65%,50% 100%,38% 65%,0 50%,38% 35%);background:#16113a;box-shadow:0 0 0 2px #e4d28e,0 0 34px #6975ff;animation:aoiBgStar 3.2s ease-in-out infinite alternate}
@keyframes aoiBgRing{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes aoiBgStar{to{transform:translate(-50%,-50%) rotate(45deg) scale(1.14);filter:brightness(1.7)}}
@media (prefers-reduced-motion:reduce){.aoi-legend-show *,.event-horizon-cast *,.amb .aoi-bg-ring,.amb .aoi-bg-star{animation-duration:.01ms!important;animation-iteration-count:1!important}}

.engraved-gems{position:absolute;z-index:16;display:flex;align-items:center;justify-content:center;gap:3px;pointer-events:none;filter:drop-shadow(0 1px 2px #000)}
.engraved-gem{--eg:#ded8ea;position:relative;width:12px;height:12px;flex:0 0 12px;display:grid;place-items:center;transform:rotate(45deg);border:1px solid color-mix(in srgb,var(--eg) 78%,#fff);border-radius:3px;background:conic-gradient(from 45deg,color-mix(in srgb,var(--eg) 82%,#fff),var(--eg),color-mix(in srgb,var(--eg) 42%,#05070d),var(--eg),color-mix(in srgb,var(--eg) 82%,#fff));box-shadow:0 0 0 1px rgba(4,7,13,.88),0 0 8px color-mix(in srgb,var(--eg) 70%,transparent),inset 0 0 4px rgba(255,255,255,.55);animation:engravedGemBreathe 2.8s ease-in-out infinite}
.engraved-gem::before{content:"";position:absolute;inset:2px;border:1px solid rgba(255,255,255,.38);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.engraved-gem i{position:relative;z-index:2;transform:rotate(-45deg);color:#fff;font:700 5px/1 var(--mono);font-style:normal;text-shadow:0 1px 2px #000}
.engraved-gem b{position:absolute;z-index:3;right:-5px;bottom:-5px;width:9px;height:9px;display:grid;place-items:center;transform:rotate(-45deg);border-radius:50%;border:1px solid var(--eg);background:#080b13;color:#fff;font:700 5px/1 var(--mono);box-shadow:0 0 5px var(--eg)}
.attune-ready-glow{position:absolute;z-index:15;inset:1px;border:1px solid color-mix(in srgb,var(--attune-glow) 84%,#fff);border-radius:inherit;pointer-events:none;box-shadow:0 0 10px var(--attune-glow),0 0 24px color-mix(in srgb,var(--attune-glow) 72%,transparent),inset 0 0 10px color-mix(in srgb,var(--attune-glow) 38%,transparent);animation:engravedAttuneReady 1.35s ease-in-out infinite alternate}
.engraved-gem.attune-ready{filter:brightness(1.35) drop-shadow(0 0 5px var(--eg));animation-duration:.8s}
.card>.engraved-gems{top:4px;left:30px;right:23px}.m>.engraved-gems{top:4px;left:17px;right:17px}.m.has-engravings:not(.hasart) .mn{margin-top:20px}
.en>.engraved-gems{top:5px;right:4px;bottom:5px;width:11px;flex-direction:column;flex-wrap:wrap;align-content:flex-end;gap:1px}.en>.engraved-gems .engraved-gem{width:8px;height:8px;flex-basis:8px;border-radius:2px}.en>.engraved-gems .engraved-gem i,.en>.engraved-gems .engraved-gem b{display:none}.en.has-engravings .en-n,.en.has-engravings .en-t{padding-right:13px}
.art>.engraved-gems,.tart>.engraved-gems{top:auto;left:4px;right:4px;bottom:3px;gap:1px}.art>.engraved-gems .engraved-gem,.tart>.engraved-gems .engraved-gem{width:7px;height:7px;flex-basis:7px;border-radius:2px}.art>.engraved-gems .engraved-gem i,.art>.engraved-gems .engraved-gem b,.tart>.engraved-gems .engraved-gem i,.tart>.engraved-gems .engraved-gem b{display:none}
@keyframes engravedGemBreathe{0%,100%{filter:brightness(.9);opacity:.88}50%{filter:brightness(1.22);opacity:1}}@keyframes engravedAttuneReady{from{opacity:.62}to{opacity:1}}@media(prefers-reduced-motion:reduce){.engraved-gem,.attune-ready-glow{animation:none}}

.road-legend-show{position:fixed;inset:0;z-index:100004;overflow:hidden;pointer-events:none;isolation:isolate;background:#020307f4;animation:roadLegendVeil 3.75s ease forwards}
.road-legend-name{position:absolute;z-index:30;left:3%;right:3%;bottom:7%;text-align:center;color:#fff1c8;font:800 clamp(22px,4vw,62px) Georgia,serif;letter-spacing:.11em;text-shadow:0 3px 3px #000,0 0 18px var(--road-accent,#dcb35c),0 0 52px var(--road-accent,#dcb35c);animation:roadLegendName 3.45s ease forwards}
.road-legend-sub{position:absolute;z-index:30;left:4%;right:4%;bottom:4%;text-align:center;color:var(--road-accent,#dcb35c);font:800 clamp(7px,.9vw,12px) var(--mono);letter-spacing:.4em;text-transform:uppercase;text-shadow:0 0 10px currentColor;animation:roadLegendName 3.5s ease forwards}
@keyframes roadLegendVeil{0%{opacity:0}8%,80%{opacity:1}100%{opacity:0}}
@keyframes roadLegendName{0%,23%{opacity:0;transform:translateY(18px);letter-spacing:.3em}38%,81%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
.road-korr-show{--road-accent:#ffb04c;background:radial-gradient(circle at 50% 53%,#7a3a123f,transparent 42%),linear-gradient(#050403,#1b0d05)}
.road-korr-show .rk-maw{position:absolute;z-index:8;left:50%;top:48%;width:min(68vw,760px);height:min(46vw,500px);transform:translate(-50%,-50%) scale(.25);border-radius:50%;background:radial-gradient(ellipse,#030101 0 32%,#7b1d0b 34% 47%,#d89a52 49% 55%,#1b1008 57%);box-shadow:0 0 45px #ff8a2b;animation:rkMaw 2.9s ease forwards}
.road-korr-show .rk-teeth{position:absolute;z-index:12;left:50%;top:48%;width:min(62vw,690px);height:min(38vw,410px);transform:translate(-50%,-50%);background:repeating-conic-gradient(from 2deg,transparent 0 10deg,#fff0c2 11deg 14deg,transparent 15deg 29deg);clip-path:ellipse(50% 50% at 50% 50%);animation:rkTeeth 2.5s ease forwards}
.road-korr-show .rk-relic{position:absolute;z-index:15;left:50%;top:47%;width:min(16vw,170px);height:min(23vw,245px);transform:translate(-50%,-50%) scale(1.2);clip-path:polygon(50% 0,88% 19%,82% 76%,50% 100%,18% 76%,12% 19%);background:linear-gradient(145deg,#fff1bd,#bd7e31 45%,#251309);box-shadow:0 0 30px #ffc15b;animation:rkRelic 2.8s ease forwards}
.road-korr-show .rk-shard{position:absolute;z-index:18;left:50%;top:48%;width:8px;height:34px;background:#ffd07c;box-shadow:0 0 8px #ff8b24;transform:rotate(var(--r)) translateY(-30px);animation:rkShard 1.4s var(--d) ease-out forwards}
@keyframes rkMaw{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}28%,74%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
@keyframes rkTeeth{0%,25%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}54%,79%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.55)}}
@keyframes rkRelic{0%,18%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}45%,64%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.05) rotate(70deg);filter:brightness(4)}}
@keyframes rkShard{0%,47%{opacity:0}58%{opacity:1}100%{opacity:0;transform:rotate(var(--r)) translateY(var(--y)) scale(.2)}}
.road-ferryman-show{--road-accent:#8ed7ff;background:linear-gradient(#02040a 0 43%,#08121c 44% 61%,#010205 62%)}
.road-ferryman-show .rf-moon{position:absolute;left:50%;top:8%;width:min(38vw,420px);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle,#e8f8ff,#7faac1 68%,#2c4655);box-shadow:0 0 40px #a4e5ff;animation:rfMoon 3.2s ease forwards}
.road-ferryman-show .rf-road{position:absolute;z-index:4;left:50%;bottom:-8%;width:82%;height:62%;transform:translateX(-50%);clip-path:polygon(45% 0,55% 0,92% 100%,8% 100%);background:linear-gradient(#142632,#020305);box-shadow:0 0 24px #6ac6f255;animation:rfRoad 3.2s ease forwards}
.road-ferryman-show .rf-boat{position:absolute;z-index:9;left:-35%;top:52%;width:min(40vw,430px);height:min(13vw,130px);background:#071018;clip-path:polygon(0 20%,100% 0,83% 78%,18% 100%);filter:drop-shadow(0 11px 8px #000) drop-shadow(0 0 11px #83d7ff);animation:rfBoat 3.25s ease forwards}
.road-ferryman-show .rf-ferryman{position:absolute;left:49%;bottom:47%;width:13%;height:145%;border-radius:45% 45% 10% 10%;background:linear-gradient(#c8f0ff,#0b1822 22%);box-shadow:0 0 16px #81d8ff}
.road-ferryman-show .rf-lantern{position:absolute;left:67%;bottom:76%;width:26px;height:36px;border:2px solid #d8f5ff;background:#fff6b2;box-shadow:0 0 18px #ffe173,0 0 50px #8ddcff;animation:rfLantern .8s ease-in-out infinite alternate}
.road-ferryman-show .rf-passenger{position:absolute;left:27%;bottom:46%;width:12%;height:105%;border-radius:48% 48% 8% 8%;background:linear-gradient(#b8dced,#172735);opacity:.72}
.road-ferryman-show .rf-fog{position:absolute;z-index:7;left:var(--x);top:var(--y);width:var(--w);height:55px;border-radius:50%;background:#badbea55;filter:blur(8px);animation:rfFog var(--t) linear forwards}
@keyframes rfMoon{0%{opacity:0;transform:translateX(-50%) scale(.3)}30%,81%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.08)}}
@keyframes rfRoad{0%{opacity:0;transform:translateX(-50%) scaleY(.1)}30%,82%{opacity:1;transform:translateX(-50%) scaleY(1)}100%{opacity:0}}
@keyframes rfBoat{0%{left:-42%;opacity:0}22%{opacity:1}75%{left:48%}100%{left:112%;opacity:0}}
@keyframes rfLantern{to{filter:brightness(1.7);transform:translateY(-4px)}}
@keyframes rfFog{to{transform:translateX(70vw);opacity:.15}}
.amb.neutral-korr{background:radial-gradient(ellipse at 50% 110%,#b35c2435,transparent 62%),linear-gradient(#080503dd,#211006cc)}
.amb .rbg-maw{position:absolute;left:50%;top:59%;width:210px;height:130px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,#030101 0 36%,#7b1e0d 38% 54%,#c5823d 57%);box-shadow:0 0 24px #ff8b2d;animation:rbgMaw 2s ease-in-out infinite alternate}
.amb .rbg-shard{position:absolute;left:var(--x);bottom:-10%;width:5px;height:22px;background:#ffd083;box-shadow:0 0 7px #ff8a29;animation:rbgShard var(--t) var(--d) ease-out infinite}
@keyframes rbgMaw{to{transform:translate(-50%,-50%) scale(.88);filter:brightness(1.5)}}
@keyframes rbgShard{to{transform:translate(var(--dx),-230px) rotate(160deg);opacity:0}}
.amb.neutral-ferryman{background:linear-gradient(#03060bdd 0 46%,#0a1721cc 47% 66%,#020306dd 67%)}
.amb .rbg-moon{position:absolute;left:50%;top:13%;width:180px;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle,#ddf6ff,#65899c 70%);box-shadow:0 0 30px #8ad8ff;opacity:.58}
.amb .rbg-boat{position:absolute;left:-35%;top:59%;width:34%;height:58px;background:#071019;clip-path:polygon(0 22%,100% 0,82% 78%,18% 100%);filter:drop-shadow(0 0 9px #7ed7ff);animation:rbgBoat 13s linear infinite}
.amb .rbg-fog{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:25px;border-radius:50%;background:#b6d9e74d;filter:blur(6px);animation:rbgFog var(--t) linear infinite}
@keyframes rbgBoat{to{left:112%}}
@keyframes rbgFog{to{transform:translateX(75vw);opacity:.12}}
.vulkar-hoard-count{position:absolute;z-index:14;right:7px;top:7px;min-width:34px;height:34px;padding:8px 5px 0;border:2px solid #ffe39a;border-radius:50%;background:radial-gradient(circle at 38% 30%,#fff6ba 0 8%,#e7a72e 24%,#8a4b0d 68%,#2e1605 100%);color:#fff8d7;text-align:center;font:900 13px/1 var(--mono);text-shadow:0 1px 2px #351500,0 0 7px #fff3a1;box-shadow:0 0 0 2px #261203,0 0 15px #f3aa33}
.vulkar-hoard-count::after{content:"COINS";position:absolute;left:50%;top:35px;transform:translateX(-50%);color:#f2c96e;font:700 5px/1 var(--mono);letter-spacing:.12em;text-shadow:0 1px 2px #000}
.road-vulkar-show{--road-accent:#f4b640;background:radial-gradient(ellipse at 50% 88%,#8b4b123f,transparent 55%),linear-gradient(#020203,#100904 72%,#251207)}
.road-vulkar-show .rv-coin{position:absolute;z-index:22;left:50%;top:-12%;width:clamp(38px,5vw,70px);aspect-ratio:1;border:3px solid #fff0a8;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff4aa,#e8a62e 38%,#8c4b0c 76%);box-shadow:inset 0 0 0 6px #5b2e08,0 0 24px #ffcc54;animation:rvCoinFall 2.35s cubic-bezier(.52,.01,.7,.48) forwards}
.road-vulkar-show .rv-coin::after{content:"H";position:absolute;inset:16%;display:grid;place-items:center;border:1px solid #ffd76e;border-radius:50%;color:#572b08;font:900 clamp(15px,2vw,28px) Georgia,serif;text-shadow:0 1px #ffe487}
.road-vulkar-show .rv-hoard{position:absolute;z-index:8;left:50%;bottom:12%;width:min(88vw,960px);height:min(34vw,365px);transform:translateX(-50%);clip-path:polygon(0 100%,7% 75%,18% 66%,24% 40%,35% 49%,43% 18%,51% 36%,60% 7%,68% 45%,78% 31%,86% 66%,95% 72%,100% 100%);background:radial-gradient(circle at 23% 70%,#fff0a4 0 1%,#d58f20 2% 4%,transparent 4.5%),radial-gradient(circle at 56% 35%,#ffe784 0 1.2%,#b66d13 2% 4%,transparent 4.5%),radial-gradient(circle at 73% 66%,#fff1a3 0 1%,#d1871b 2% 4%,transparent 4.5%),linear-gradient(165deg,#ffd469,#9b5710 42%,#3a1b05 82%);background-size:61px 53px,79px 67px,47px 43px,100% 100%;filter:drop-shadow(0 0 25px #e89a25);animation:rvHoardRise 3.1s ease forwards}
.road-vulkar-show .rv-dragon{position:absolute;z-index:13;left:50%;bottom:17%;width:min(72vw,760px);height:min(29vw,300px);transform:translateX(-50%);clip-path:polygon(0 90%,12% 54%,29% 37%,40% 5%,50% 36%,60% 5%,72% 37%,88% 54%,100% 90%,69% 74%,60% 100%,40% 100%,31% 74%);background:linear-gradient(#030304,#100b08);filter:drop-shadow(0 -7px 18px #000);animation:rvDragonWake 3.35s ease forwards}
.road-vulkar-show .rv-eye{position:absolute;z-index:17;top:50%;width:clamp(26px,4vw,58px);height:clamp(7px,1vw,15px);border-radius:50%;background:#ffd96a;box-shadow:0 0 8px #fff,0 0 23px #ffb11f,0 0 55px #d45d00;opacity:0;animation:rvEyes 1.8s 1.42s ease forwards}
.road-vulkar-show .rv-eye.left{left:39%;transform:rotate(8deg)}.road-vulkar-show .rv-eye.right{right:39%;transform:rotate(-8deg)}
.road-vulkar-show .rv-scatter{position:absolute;z-index:20;left:50%;top:67%;width:14px;aspect-ratio:1;border-radius:50%;background:#ffd563;box-shadow:0 0 8px #ffb32d;animation:rvScatter var(--t) var(--d) ease-out forwards}
@keyframes rvCoinFall{0%{top:-14%;transform:translateX(-50%) rotateY(0) scale(.8)}68%{top:53%;transform:translateX(-50%) rotateY(900deg) scale(1.05)}76%{top:49%;transform:translateX(-50%) rotateY(990deg) scale(1.16)}100%{top:62%;opacity:0;transform:translateX(-50%) rotateY(1260deg) scale(.45)}}
@keyframes rvHoardRise{0%,25%{opacity:0;transform:translateX(-50%) translateY(120px) scale(.82)}54%,84%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.05)}}
@keyframes rvDragonWake{0%,39%{opacity:0;transform:translateX(-50%) translateY(65px)}63%,87%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-18px) scale(1.04)}}
@keyframes rvEyes{0%,12%{opacity:0;transform:scaleX(.1)}30%,84%{opacity:1}100%{opacity:0;filter:brightness(2)}}
@keyframes rvScatter{0%,52%{opacity:0;transform:translate(0,0) scale(.3)}64%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(450deg)}}
.amb.neutral-vulkar{background:radial-gradient(ellipse at 50% 112%,#c6792438,transparent 64%),linear-gradient(#030304dd,#160b05d9)}
.amb .rbg-vulkar-heap{position:absolute;left:50%;bottom:-3%;width:86%;height:41%;transform:translateX(-50%);clip-path:polygon(0 100%,10% 67%,22% 72%,31% 39%,43% 61%,54% 25%,63% 54%,73% 34%,86% 70%,100% 100%);background:radial-gradient(circle,#efb63f 0 2px,#7a3e0b 3px 5px,transparent 6px);background-size:31px 27px;filter:drop-shadow(0 0 14px #d8841c);opacity:.45}
.amb .rbg-vulkar-eye{position:absolute;top:58%;width:35px;height:8px;border-radius:50%;background:#ffd85b;box-shadow:0 0 10px #fff2a2,0 0 28px #e67e00;animation:rbgVulkarBlink 4.8s ease-in-out infinite}.amb .rbg-vulkar-eye.left{left:42%;transform:rotate(7deg)}.amb .rbg-vulkar-eye.right{right:42%;transform:rotate(-7deg)}
.amb .rbg-vulkar-coin{position:absolute;left:var(--x);top:-8%;width:7px;aspect-ratio:1;border-radius:50%;background:#f1ba43;box-shadow:0 0 5px #ffdf7c;animation:rbgVulkarCoin var(--t) var(--d) linear infinite}
@keyframes rbgVulkarBlink{0%,44%,52%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)}}
@keyframes rbgVulkarCoin{to{transform:translateY(108vh) rotateY(720deg);opacity:.18}}
.road-eve-show{--road-accent:#e5ca68;background:radial-gradient(ellipse at 50% 37%,#6b571638,transparent 27%),repeating-linear-gradient(90deg,#080808 0 9%,#0c0b0b 9.5% 10%,#050505 10.5% 20%);animation:roadLegendVeil 4.25s ease forwards,reFlicker .17s steps(2,end) infinite}
.road-eve-show::before{content:"";position:absolute;inset:0;z-index:3;background:repeating-linear-gradient(0deg,transparent 0 5px,#fff 6px 7px,transparent 8px 12px);mix-blend-mode:overlay;opacity:.055;animation:reStatic .13s steps(2,end) infinite}
.road-eve-show .re-hall{position:absolute;z-index:5;left:50%;top:51%;width:min(77vw,870px);height:min(71vh,620px);transform:translate(-50%,-50%);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);background:linear-gradient(90deg,#151313,#030303 29% 71%,#151313);box-shadow:inset 0 0 90px #000,0 0 70px #000}
.road-eve-show .re-door{position:absolute;z-index:8;left:50%;top:49%;width:min(29vw,290px);height:min(57vh,470px);transform:translate(-50%,-50%) scaleY(.05);transform-origin:bottom;background:linear-gradient(90deg,#040404,#191313 47%,#030303 52%);border:clamp(3px,.5vw,7px) solid #272323;box-shadow:0 0 0 8px #050505,0 0 45px #9d8129;animation:reDoor 3.8s cubic-bezier(.17,.82,.18,1) forwards}
.road-eve-show .re-figure{position:absolute;z-index:12;left:50%;top:53%;width:min(17vw,165px);height:min(49vh,390px);transform:translate(-50%,-50%) scale(.2);transform-origin:50% 100%;border-radius:47% 47% 15% 15%;background:linear-gradient(90deg,#020202,#181414 48%,#020202);filter:drop-shadow(0 0 13px #000);animation:reFigure 3.85s ease forwards}
.road-eve-show .re-figure::before{content:"";position:absolute;left:50%;top:-16%;width:69%;aspect-ratio:.84;transform:translateX(-50%);border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 35% 46%,#f5eadc 0 2%,#161205 3% 5%,transparent 6%),radial-gradient(circle at 65% 46%,#f5eadc 0 2%,#161205 3% 5%,transparent 6%),radial-gradient(ellipse at 50% 72%,#020202 0 6%,#80681f 7% 9%,transparent 10%),linear-gradient(90deg,#191515,#d7c9b7 48%,#1b1515);box-shadow:inset 0 -14px 18px #2d2509,0 0 12px #e5ce79}
.road-eve-show .re-figure::after{content:"";position:absolute;left:50%;top:20%;width:240%;height:8%;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#090909 18% 82%,transparent);clip-path:polygon(0 45%,37% 0,50% 47%,64% 11%,100% 52%,64% 90%,50% 55%,35% 100%);animation:reArms 1.3s ease-in-out infinite alternate}
.road-eve-show .re-hand{position:absolute;z-index:16;left:var(--x);top:var(--y);width:clamp(24px,4vw,54px);height:clamp(58px,9vw,125px);transform:rotate(var(--r)) translateY(90px);background:#0a0909;clip-path:polygon(34% 100%,28% 41%,0 17%,9% 10%,33% 31%,24% 2%,36% 0,47% 29%,50% 0,62% 2%,62% 31%,75% 8%,85% 13%,69% 42%,70% 100%);filter:drop-shadow(0 0 5px #b99b38);animation:reHand var(--t) var(--d) ease-in-out infinite alternate}
.road-eve-show .re-scratch{position:absolute;z-index:19;left:50%;top:45%;width:120%;height:2px;background:#d7cbc2;box-shadow:0 0 9px #fff,0 0 25px #c5a33a;transform:translate(-50%,-50%) rotate(var(--r)) scaleX(0);animation:reScratch 1.1s var(--d) ease-out forwards}
@keyframes reFlicker{0%,82%,100%{filter:brightness(1)}84%{filter:brightness(.18)}88%{filter:brightness(1.8)}92%{filter:brightness(.06)}}
@keyframes reStatic{to{transform:translate(2px,-3px)}}
@keyframes reDoor{0%,13%{opacity:0;transform:translate(-50%,-50%) scaleY(.04)}38%,79%{opacity:1;transform:translate(-50%,-50%) scaleY(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.16)}}
@keyframes reFigure{0%,26%{opacity:0;transform:translate(-50%,-50%) scale(.16)}48%{opacity:1;transform:translate(-50%,-50%) scale(.72)}72%,86%{opacity:1;transform:translate(-50%,-50%) scale(1)}88%{transform:translate(-48%,-50%) scale(1.06)}90%{transform:translate(-52%,-50%) scale(.96)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}
@keyframes reArms{to{transform:translateX(-50%) scaleX(1.18) rotate(3deg)}}
@keyframes reHand{to{transform:rotate(var(--r)) translateY(-85px);opacity:.15}}
@keyframes reScratch{0%,38%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scaleX(0)}55%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scaleX(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scaleX(.2);transform-origin:right}}
.amb.vehemence-eve{background:radial-gradient(ellipse at 50% 42%,#6f591730,transparent 38%),repeating-linear-gradient(90deg,#050505e8 0 12%,#0c0b08dc 13% 24%)}
.amb .rbg-eve-door{position:absolute;left:50%;top:52%;width:190px;height:330px;transform:translate(-50%,-50%);background:linear-gradient(90deg,#060606,#17150d 48%,#040404);border:5px solid #282311;box-shadow:0 0 35px #9b7b2855;opacity:.52}
.amb .rbg-eve-figure{position:absolute;left:50%;top:57%;width:72px;height:245px;transform:translate(-50%,-50%);border-radius:48% 48% 12% 12%;background:#020202;filter:drop-shadow(0 0 9px #a98c32);animation:rbgEveWatch 6.2s steps(2,end) infinite}
.amb .rbg-eve-figure::before{content:"";position:absolute;left:50%;top:-12%;width:58px;height:66px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 34% 46%,#eee4d8 0 2px,transparent 3px),radial-gradient(circle at 66% 46%,#eee4d8 0 2px,transparent 3px),#171212}
.amb .rbg-eve-eye{position:absolute;left:var(--x);top:var(--y);width:4px;height:4px;border-radius:50%;background:#f7eee5;box-shadow:0 0 7px #fff,0 0 14px #b79830;animation:rbgEveEye var(--t) ease-in-out infinite}
@keyframes rbgEveWatch{0%,89%,100%{transform:translate(-50%,-50%)}91%{transform:translate(-61%,-50%) scaleY(1.03)}94%{transform:translate(-41%,-50%) scaleY(.96)}}
@keyframes rbgEveEye{0%,43%,49%,100%{opacity:.9}46%{opacity:0}}
@media (max-width:700px){.road-legend-name{bottom:11%;font-size:clamp(18px,6vw,31px)}.road-legend-sub{bottom:7%;letter-spacing:.2em}.road-korr-show .rk-maw{width:92vw}.road-ferryman-show .rf-moon{width:62vw}.road-ferryman-show .rf-boat{width:65vw}.road-eve-show .re-door{width:48vw}.road-eve-show .re-figure{width:29vw}}

.black-king-show{position:fixed;inset:0;z-index:100006;pointer-events:none;overflow:hidden;isolation:isolate;background:#020104;animation:blackKingVeil 3.2s ease forwards}.black-king-show::before,.black-king-show::after{content:"";position:absolute;inset:-8%;background:linear-gradient(135deg,#17051f 0 42%,#020104 48% 52%,#17051f 58% 100%);box-shadow:inset 0 0 18vw #000;animation:blackKingSplit 2.2s cubic-bezier(.2,.75,.2,1) forwards}.black-king-show::before{clip-path:polygon(0 0,100% 0,47% 100%,0 100%)}.black-king-show::after{clip-path:polygon(100% 0,100% 100%,53% 100%,0 0);animation-direction:reverse}.black-king-snapshot{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;filter:brightness(1);animation:blackKingSnapshot 3.2s cubic-bezier(.2,.75,.2,1) forwards}.black-king-snapshot.left{clip-path:polygon(0 0,100% 0,47% 100%,0 100%)}.black-king-snapshot.right{clip-path:polygon(100% 0,100% 100%,53% 100%,0 0);animation-name:blackKingSnapshotRight}.black-king-snapshot-copy{width:100%;height:100%;transform-origin:50% 50%;pointer-events:none}.black-king-snapshot-copy *{pointer-events:none!important}@keyframes blackKingSnapshot{0%,28%{transform:translateX(0);filter:brightness(1)}53%,76%{transform:translateX(-38vw);filter:brightness(0)}100%{transform:translateX(-55vw);filter:brightness(0)}}@keyframes blackKingSnapshotRight{0%,28%{transform:translateX(0);filter:brightness(1)}53%,76%{transform:translateX(38vw);filter:brightness(0)}100%{transform:translateX(55vw);filter:brightness(0)}}.black-king-rift{position:absolute;z-index:4;left:50%;top:-12%;width:2px;height:124%;background:#e8c4ff;box-shadow:0 0 12px #b055ff,0 0 60px #4b0a76;transform:rotate(19deg);animation:blackKingRift 3.2s ease forwards}.black-king-crown{position:absolute;z-index:6;left:50%;top:44%;width:min(20vw,210px);height:min(11vw,120px);transform:translate(-50%,-50%);clip-path:polygon(0 82%,10% 28%,25% 61%,42% 0,58% 61%,75% 28%,90% 82%,100% 100%,0 100%);background:linear-gradient(110deg,#12041b,#c180ed 47%,#16031f);box-shadow:0 0 24px #d38cff;animation:blackKingCrown 3.2s ease forwards}.black-king-title{position:absolute;z-index:8;left:5%;right:5%;bottom:10%;text-align:center;color:#e9caff;font:900 clamp(25px,5vw,72px) Georgia,serif;letter-spacing:.16em;text-shadow:0 0 15px #a24fe8,0 3px 3px #000;animation:blackKingTitle 3.2s ease forwards}@keyframes blackKingVeil{0%,10%{opacity:0}20%,76%{opacity:1}100%{opacity:0}}@keyframes blackKingSplit{0%,28%{transform:translateX(0);filter:brightness(1)}53%,76%{transform:translateX(-38vw);filter:brightness(0)}100%{transform:translateX(-55vw);filter:brightness(0)}}@keyframes blackKingRift{0%,25%{opacity:0;transform:rotate(19deg) scaleY(.05)}48%,70%{opacity:1;transform:rotate(19deg) scaleY(1)}100%{opacity:0;filter:brightness(0)}}@keyframes blackKingCrown{0%,37%{opacity:0;transform:translate(-50%,-50%) scale(.2)}55%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.65)}}@keyframes blackKingTitle{0%,57%{opacity:0;letter-spacing:.45em}70%{opacity:1;letter-spacing:.16em}100%{opacity:0;transform:translateY(-12px)}}@media (prefers-reduced-motion:reduce){.black-king-show,.black-king-show::before,.black-king-show::after,.black-king-snapshot,.black-king-rift,.black-king-crown,.black-king-title{animation-duration:.01ms!important;animation-iteration-count:1!important}}

.morgan-show{position:fixed;inset:0;z-index:100009;overflow:hidden;pointer-events:none;isolation:isolate;background:radial-gradient(circle at 50% 45%,#174b36 0,#08281e 32%,#020b08 72%,#000 100%);animation:morganVeil 4.35s ease forwards}
.morgan-show::before{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,transparent 0 6px,#e9fff70b 7px 8px);mix-blend-mode:screen;animation:morganStatic .11s steps(2,end) 2.05s 5}
.morgan-ring{position:absolute;z-index:8;left:50%;top:45%;width:var(--s);aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--r));border:clamp(1px,.18vw,3px) solid #f4fffbd9;border-radius:50%;background:repeating-conic-gradient(from 3deg,#f7fffb 0 1deg,transparent 1.8deg 12deg,#cffff022 13deg 14deg,transparent 15deg 27deg);box-shadow:0 0 16px #dfffff88,inset 0 0 18px #dfffff44;mask:radial-gradient(circle,transparent 0 54%,#000 55% 58%,transparent 59% 67%,#000 68% 70%,transparent 71%);animation:morganRing var(--t) linear forwards}
.morgan-runes{position:absolute;z-index:12;left:50%;top:45%;width:min(74vmin,760px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;animation:morganRunes 3.8s ease forwards}
.morgan-rune{position:absolute;left:50%;top:50%;color:#f2fff9;font:900 clamp(12px,2vw,25px) Georgia,serif;text-shadow:0 0 9px #fff,0 0 22px #7fffc7;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--rad) * -1)) rotate(calc(var(--a) * -1));animation:morganGlyph 2.9s var(--d) ease forwards}
.morgan-axis{position:absolute;z-index:16;left:50%;top:45%;width:2px;height:min(74vmin,760px);transform:translate(-50%,-50%) rotate(var(--a)) scaleY(0);background:linear-gradient(transparent,#f4fffbe6 18% 82%,transparent);box-shadow:0 0 13px #dfffff;animation:morganAxis 1.7s var(--d) ease forwards}
.morgan-core{position:absolute;z-index:20;left:50%;top:45%;width:min(19vmin,190px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.08) rotate(45deg);border:3px solid #fff;background:radial-gradient(circle,#fff 0 4%,#a9ffda 5% 13%,#0c3b2a 14% 52%,#020b08 53%);box-shadow:0 0 28px #fff,0 0 90px #56dca3;animation:morganCore 3.35s ease forwards}
.morgan-command{position:absolute;z-index:34;left:4%;right:4%;top:43%;text-align:center;color:#f8fffb;font:900 clamp(28px,7vw,100px) Georgia,serif;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;text-shadow:0 3px 4px #000,0 0 18px #fff,0 0 58px #7effc1;opacity:0;animation:morganCommand 4s ease forwards}
.morgan-name{position:absolute;z-index:36;left:4%;right:4%;bottom:7%;text-align:center;color:#f5fff9;font:800 clamp(22px,4vw,62px) Georgia,serif;letter-spacing:.16em;text-shadow:0 3px 4px #000,0 0 20px #b9ffe0,0 0 58px #3dbb82;animation:morganName 4.15s ease forwards}
.morgan-sub{position:absolute;z-index:36;left:5%;right:5%;bottom:4%;text-align:center;color:#bdffe0;font:900 clamp(7px,.9vw,12px) var(--mono);letter-spacing:.38em;text-transform:uppercase;text-shadow:0 0 11px #9effd2;animation:morganName 4.2s ease forwards}
.morgan-glitch{position:absolute;z-index:42;inset:0;background:linear-gradient(90deg,transparent 0 14%,#ecfff833 14.2% 17%,transparent 17.2% 59%,#04100d 59.2% 76%,transparent 76.2%),repeating-linear-gradient(0deg,transparent 0 18px,#fff2 19px 21px);opacity:0;mix-blend-mode:screen;animation:morganFault .68s 2.02s steps(1,end) forwards}
@keyframes morganVeil{0%{opacity:0}8%,84%{opacity:1}100%{opacity:0}}
@keyframes morganRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(var(--r))}28%,84%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(calc(var(--r) + var(--spin)))}100%{opacity:0;transform:translate(-50%,-50%) scale(1.24) rotate(calc(var(--r) + var(--spin) + 45deg))}}
@keyframes morganRunes{0%,16%{opacity:0;transform:translate(-50%,-50%) scale(.4)}38%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}}
@keyframes morganGlyph{0%,22%{opacity:0}42%,82%{opacity:1}100%{opacity:0;filter:blur(5px)}}
@keyframes morganAxis{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) scaleY(0)}45%,78%{opacity:.8;transform:translate(-50%,-50%) rotate(var(--a)) scaleY(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) scaleY(.2)}}
@keyframes morganCore{0%{opacity:0;transform:translate(-50%,-50%) scale(.08) rotate(-130deg)}46%,81%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.7) rotate(90deg)}}
@keyframes morganCommand{0%,56%{opacity:0;transform:scale(.7);filter:blur(9px)}66%,82%{opacity:1;transform:none;filter:none}100%{opacity:0;transform:scale(1.16);letter-spacing:.58em}}
@keyframes morganName{0%,28%{opacity:0;transform:translateY(18px)}43%,84%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
@keyframes morganStatic{0%{transform:none}50%{transform:translate(5px,-3px)}100%{transform:translate(-4px,2px)}}
@keyframes morganFault{0%,100%{opacity:0;transform:none;clip-path:inset(0)}12%{opacity:.88;transform:translateX(13px);clip-path:inset(12% 0 62%)}28%{opacity:.28;transform:translateX(-19px) skewX(8deg);clip-path:inset(51% 0 28%)}43%{opacity:1;transform:scaleX(1.08);clip-path:inset(73% 0 9%)}61%{opacity:.18;transform:translate(-7px,4px);clip-path:inset(27% 0 45%)}79%{opacity:.74;transform:translateX(4px);clip-path:inset(4% 0 83%)}}
.amb.neutral-morgan{background:radial-gradient(circle at 50% 45%,#174b363d,transparent 42%),repeating-conic-gradient(from 4deg at 50% 45%,#eafff50d 0 1deg,transparent 2deg 21deg),#020b08e8}
.amb .morgan-bg-ring{position:absolute;left:50%;top:47%;width:var(--s);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #eafff577;border-radius:50%;background:repeating-conic-gradient(#effff866 0 1deg,transparent 2deg 17deg);mask:radial-gradient(circle,transparent 0 68%,#000 69% 71%,transparent 72%);animation:morganBgSpin var(--t) linear infinite}
@keyframes morganBgSpin{to{transform:translate(-50%,-50%) rotate(var(--spin))}}
@media(max-width:700px){.morgan-name{bottom:11%;font-size:clamp(18px,6vw,31px)}.morgan-sub{bottom:7%;letter-spacing:.18em}.morgan-command{font-size:clamp(24px,10vw,56px)}}
@media(prefers-reduced-motion:reduce){.morgan-show *{animation-duration:.01ms!important;animation-iteration-count:1!important}}

.rw-stage{position:fixed;inset:0;z-index:100010;overflow:hidden;pointer-events:none;isolation:isolate;background:#05020cf5;animation:rwVeil 3.7s ease forwards}.rw-stage *{position:absolute}.rw-title{z-index:20;left:4%;right:4%;bottom:8%;text-align:center;color:#fff;font:800 clamp(22px,4vw,62px) Georgia,serif;letter-spacing:.13em;text-shadow:0 0 20px var(--rw),0 3px 4px #000}.rw-sub{z-index:20;left:4%;right:4%;bottom:4.5%;text-align:center;color:var(--rw);font:900 clamp(7px,1vw,12px) var(--mono);letter-spacing:.18em}@keyframes rwVeil{0%{opacity:0}8%,82%{opacity:1}100%{opacity:0}}
.rw-ecame{--rw:#b483ff;background:radial-gradient(circle,#24064a,#020006 70%)}.rw-ecame-index{left:50%;top:46%;width:3px;height:46vh;transform:translate(-50%,-50%) rotate(var(--r));background:#f0dcff;box-shadow:0 0 14px var(--rw);animation:rwSpin 2.8s ease forwards}.rw-nev{--rw:#91e5a1;background:radial-gradient(circle,#1b552b,#020805)}.rw-nev-specimen{left:var(--x);bottom:16%;width:8%;height:32%;border:2px solid var(--rw);border-radius:48%;box-shadow:0 0 20px var(--rw);animation:rwRise 2.8s ease forwards}.rw-nev-needle{left:50%;top:48%;width:2px;height:42vh;transform:rotate(var(--r));background:#d8ffdc;animation:rwSpin 2.5s ease forwards}.rw-lyra{--rw:#ff8293;background:linear-gradient(#070208,#2c0611)}.rw-lyra-forest{inset:22% 0 0;background:repeating-linear-gradient(78deg,transparent 0 7%,#17040a 8% 12%)}.rw-lyra-scarf{left:8%;top:35%;width:86%;height:22%;background:#c52b47;clip-path:polygon(0 48%,45% 0,62% 42%,100% 66%,56% 100%);animation:rwRise 3s ease forwards}.rw-lyra-leaf{left:var(--x);top:14%;width:10px;height:24px;background:#b54c5d;transform:rotate(35deg);animation:rwFall 2s ease forwards}.rw-azaryne{--rw:#ffd47a;background:radial-gradient(circle,#8f263c,#170108)}.rw-azaryne-basin{left:50%;top:52%;width:min(64vw,620px);height:min(25vw,250px);transform:translate(-50%,-50%);border:4px solid var(--rw);border-radius:50%;background:radial-gradient(ellipse,#fff1b5,#b93650 60%,transparent 62%);animation:rwRise 3s ease forwards}.rw-azaryne-drop{left:var(--x);top:5%;width:8px;height:34%;background:var(--rw);border-radius:50%;animation:rwFall 1.8s ease-in infinite}.rw-morvayne{--rw:#ff9d65;background:radial-gradient(ellipse at 50% 100%,#8f2814,#130303)}.rw-morvayne-matrix{left:50%;top:48%;width:min(55vmin,560px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);border:3px solid var(--rw);box-shadow:0 0 35px #ff5c32;animation:rwSpin 3s ease forwards}.rw-morvayne-aurekazel{left:50%;top:44%;width:44px;height:55vh;transform:translateX(-50%);clip-path:polygon(50% 0,100% 72%,66% 100%,34% 100%,0 72%);background:linear-gradient(#fff3bf,#be3519);animation:rwBlade 3s ease forwards}.rw-morvayne-spark{left:var(--x);top:58%;width:5px;height:5px;border-radius:50%;background:#fff2a2;box-shadow:0 0 12px #ff7a24;animation:rwFall 1.2s ease-out infinite}.rw-minh{--rw:#65efe9;background:radial-gradient(ellipse at 50% 100%,#14636b,#021015)}.rw-minh-chart{inset:9%;border:1px solid var(--rw);background:repeating-radial-gradient(circle,transparent 0 28px,#4ee3dc33 29px 30px);transform:perspective(700px) rotateX(55deg);animation:rwChart 7s linear infinite}.rw-minh-anchor{left:50%;top:45%;width:20%;height:50%;transform:translate(-50%,-50%);clip-path:polygon(45% 0,55% 0,55% 65%,100% 82%,82% 100%,50% 78%,18% 100%,0 82%,45% 65%);background:var(--rw);box-shadow:0 0 26px #38dcd5;animation:rwRise 3s ease forwards}.rw-minh-wave{left:0;right:0;bottom:var(--y);height:2px;background:var(--rw);animation:rwWave 1.8s ease-in-out infinite}@keyframes rwSpin{0%{opacity:0;transform:translate(-50%,-50%) rotate(-120deg) scale(.15)}60%,82%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(220deg) scale(1.3)}}@keyframes rwRise{0%{opacity:0;transform:translate(-50%,40%) scale(.2)}45%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0}}@keyframes rwFall{0%{opacity:0;transform:translateY(-30px)}35%{opacity:1}100%{opacity:0;transform:translateY(180px)}}@keyframes rwBlade{0%{opacity:0;transform:translate(-50%,-120%) rotate(-50deg)}50%,80%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(90%,-50%) rotate(25deg)}}@keyframes rwChart{to{background-position:120px 80px}}@keyframes rwWave{50%{transform:translateY(-15px);filter:brightness(1.8)}}
.amb.run-ecame{background:repeating-linear-gradient(130deg,#16052cdd 0 2px,#050108dd 3px 36px)}.amb.run-nev{background:radial-gradient(circle at 20% 80%,#68ca7933,transparent 30%),#04100add}.amb.run-lyra{background:repeating-linear-gradient(#4a0b1733 0 1px,#100208dd 2px 22px)}.amb.run-azaryne{background:radial-gradient(circle at 50% 30%,#ffcf7333,transparent 38%),#21030bdd}.amb.run-morvayne{background:linear-gradient(180deg,#110303dd,#3a0b06cc)}.amb.run-minh{background:repeating-radial-gradient(ellipse at 50% 100%,#43deda22 0 32px,transparent 34px 68px),#02151bdd}@media(max-width:700px){.rw-title{bottom:12%;font-size:clamp(18px,6vw,32px)}.rw-lyra-scarf{width:96%;left:2%}}@media(prefers-reduced-motion:reduce){.rw-stage,.rw-stage *{animation-duration:.01ms!important;animation-iteration-count:1!important}}
.rw-marziphane{--rw:#ffbd72;background:radial-gradient(ellipse at 50% 78%,#8a351f,#17050d 58%,#030104)}.rw-marziphane-table{left:8%;right:8%;bottom:17%;height:26%;border:3px solid var(--rw);border-radius:50%;background:radial-gradient(ellipse,#fff1c7 0 8%,#7a2235 34%,#23050e 68%);box-shadow:0 0 38px #ff8a3a88;animation:rwRise 3s ease forwards}.rw-marziphane-lantern{left:50%;top:16%;width:16vmin;height:34vmin;transform:translateX(-50%);clip-path:polygon(24% 0,76% 0,100% 20%,88% 90%,65% 100%,35% 100%,12% 90%,0 20%);background:radial-gradient(circle at 50% 55%,#fff9c4,#ff9c38 30%,#401020 72%);box-shadow:0 0 50px #ffbd72;animation:rwRise 3s ease forwards}.rw-marziphane-crumb{left:var(--x);top:var(--y);width:7px;height:7px;border-radius:50%;background:#ffe7a2;box-shadow:0 0 12px var(--rw);animation:rwFall 1.8s ease-out infinite}.rw-nightingale{--rw:#8fc8ff;background:radial-gradient(ellipse at 50% 38%,#1c3a66,#060b1c 58%,#010208)}.rw-nightingale-curtain{top:0;bottom:0;width:22%;background:repeating-linear-gradient(90deg,#f4f1ea 0 6px,#d9dce6 7px 18px);box-shadow:0 0 30px #8fc8ff66;animation:rwNightCurtain 3.2s ease forwards}.rw-nightingale-curtain.l{left:0;transform-origin:left}.rw-nightingale-curtain.r{right:0;transform-origin:right}.rw-nightingale-quill{left:50%;top:18%;width:1.2vmin;height:34vmin;transform:translateX(-50%) rotate(28deg);background:linear-gradient(#ffffff,#e8eef7 70%,#3a7bd5);border-radius:50% 50% 30% 30%;box-shadow:0 0 26px #fff;animation:rwRise 3s ease forwards}.rw-nightingale-ink{left:var(--x);top:var(--y);width:8px;height:12px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#3a7bd5;box-shadow:0 0 12px #8fc8ff;animation:rwFall 2.2s ease-in infinite}@keyframes rwNightCurtain{0%{transform:scaleX(1)}55%{transform:scaleX(.18)}100%{transform:scaleX(.12)}}.amb.run-nightingale{background:radial-gradient(circle at 50% 30%,#8fc8ff33,transparent 36%),repeating-linear-gradient(90deg,#f4f1ea12 0 4px,#050a18dd 5px 40px)}.amb.run-marziphane{background:radial-gradient(circle at 50% 35%,#ffbd7240,transparent 34%),repeating-linear-gradient(90deg,#5a142522 0 3px,#14030bdd 4px 44px)}

.sv-stage{position:fixed;inset:0;z-index:100010;overflow:hidden;pointer-events:none;isolation:isolate;background:#080809f5;animation:svVeil 3.7s ease forwards}
.sv-stage *{position:absolute}
.sv-title{z-index:20;left:4%;right:4%;bottom:8%;text-align:center;color:#fff;font:800 clamp(22px,4vw,62px) Georgia,serif;letter-spacing:.13em;text-shadow:0 0 20px var(--sv),0 3px 4px #000}
.sv-sub{z-index:20;left:4%;right:4%;bottom:4.5%;text-align:center;color:var(--sv);font:900 clamp(7px,1vw,12px) var(--mono);letter-spacing:.18em}
@keyframes svVeil{0%{opacity:0}8%,82%{opacity:1}100%{opacity:0}}
@keyframes svRise{0%{opacity:0;transform:translateY(7vh) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes svRiseC{0%{opacity:0;transform:translate(-50%,-44%) scale(.94)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes svFall{0%{transform:translateY(0) rotate(18deg)}100%{transform:translateY(112vh) rotate(200deg)}}
@keyframes svSpin{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes svLamp{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
@keyframes svEdge{0%{opacity:0;transform:scaleX(.08)}40%{opacity:1}100%{opacity:0;transform:scaleX(1)}}

/* Maerial. An elf, or so the record says — and the record is hers. */
.sv-maerial{--sv:#dfe8f5;background:radial-gradient(ellipse at 50% 42%,#2a2823,#080705 72%)}
.sv-maerial-page{left:50%;top:48%;width:min(78vw,940px);height:min(62vh,560px);transform:translate(-50%,-50%);z-index:2;background:linear-gradient(#f6efdd,#d6cab0);box-shadow:0 0 70px #000c;animation:svRiseC 2.4s ease forwards}
.sv-maerial-line{left:8%;width:84%;height:2px;top:var(--y);background:#6d6047;opacity:.5;transform-origin:0 50%;animation:svInk 1.2s ease forwards var(--d)}
.sv-maerial-strike{left:9%;top:calc(50% - 1px);width:0;height:3px;background:#8e1f1f;box-shadow:0 0 9px #8e1f1f;z-index:4;animation:svStrike 1s ease forwards 1.25s}
.sv-maerial-truth{left:9%;top:56%;width:82%;height:3px;background:#2b2b2e;transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 14px #cfd4da;z-index:4;animation:svInk 1s ease forwards 1.9s}
.sv-maerial-nib{left:9%;top:39%;width:1.8vmin;height:13vmin;z-index:6;transform-origin:50% 100%;clip-path:polygon(50% 100%,0 74%,16% 6%,50% 0,84% 6%,100% 74%);background:linear-gradient(#f4f8ff 0 58%,#b3bdcc 58% 76%,#79839a 76%);filter:drop-shadow(0 4px 9px #0009);animation:svNib 2.6s ease forwards .7s}
.sv-maerial-leaf{left:var(--x);top:-8%;width:7px;height:16px;background:#f2f4f7;opacity:.68;z-index:9;animation:svFall var(--d) linear infinite var(--l)}
@keyframes svInk{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes svStrike{0%{width:0}100%{width:80%}}
@keyframes svNib{0%{opacity:0;transform:translate(0,0) rotate(-16deg)}12%{opacity:1}46%{transform:translate(64vw,0) rotate(-16deg)}52%{transform:translate(2vw,7vh) rotate(-16deg)}100%{opacity:.9;transform:translate(66vw,7vh) rotate(-16deg)}}

/* Maerialstra. A silver dragon who eats her own armour to grow. */
.sv-maerialstra{--sv:#eaf1f7;background:radial-gradient(circle at 50% 46%,#33373d,#06070a 74%)}
.sv-maerialstra-wing{top:18%;width:44vw;height:44vh;z-index:2;opacity:0;transform-origin:50% 100%;background:repeating-linear-gradient(74deg,#dfe6ed 0 2px,#6d737b 2px 6px,transparent 6px 11px);clip-path:polygon(0 100%,5% 5%,34% 42%,58% 20%,84% 56%,100% 38%,95% 100%);-webkit-mask-image:linear-gradient(#000,#0000 92%);mask-image:linear-gradient(#000,#0000 92%)}
.sv-maerialstra-wing.l{left:2%;animation:svWingL 2.6s cubic-bezier(.2,.8,.3,1) forwards}
.sv-maerialstra-wing.r{right:2%;animation:svWingR 2.6s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes svWingL{0%{opacity:0;transform:rotate(26deg) scale(.45)}100%{opacity:.85;transform:rotate(0) scale(1)}}
@keyframes svWingR{0%{opacity:0;transform:scaleX(-1) rotate(26deg) scale(.45)}100%{opacity:.85;transform:scaleX(-1)}}
.sv-maerialstra-plate{left:50%;top:48%;width:2.6vmin;height:3.4vmin;margin:-1.7vmin 0 0 -1.3vmin;z-index:5;background:linear-gradient(#fbfcfe,#949aa3);clip-path:polygon(50% 0,100% 28%,100% 100%,0 100%,0 28%);animation:svPlateIn 2s cubic-bezier(.5,0,.2,1) forwards var(--d)}
@keyframes svPlateIn{0%{opacity:0;transform:rotate(var(--r)) translateY(-56vh)}22%{opacity:1}100%{opacity:0;transform:rotate(var(--r)) translateY(-2vh) scale(.25)}}
.sv-maerialstra-eye{left:36%;right:36%;top:41%;height:9vmin;z-index:7;border-radius:50%;background:radial-gradient(ellipse,#ffffff,#d8e0e8 40%,#1b1e24 72%);box-shadow:0 0 70px #dfe6eeaa;transform:scaleY(.03);animation:svEye 2.4s cubic-bezier(.2,.9,.3,1) forwards 1.1s}
.sv-maerialstra-eye::after{content:"";position:absolute;left:48.4%;top:3%;width:3.2%;height:94%;border-radius:50%;background:#121418}
@keyframes svEye{0%{transform:scaleY(.03)}70%{transform:scaleY(1.06)}100%{transform:scaleY(1)}}

/* Aethen. Armour folds itself into one falling edge. */
.sv-aethen{--sv:#f0f3f7;background:radial-gradient(ellipse at 50% 62%,#24262b,#07080a 74%)}
.sv-aethen-plate{left:50%;top:52%;width:5vmin;height:7vmin;margin:-3.5vmin 0 0 -2.5vmin;z-index:3;background:linear-gradient(#fafbfd,#868c95);clip-path:polygon(50% 0,100% 30%,86% 100%,14% 100%,0 30%);animation:svPlateFold 1.9s cubic-bezier(.4,0,.2,1) forwards var(--d)}
@keyframes svPlateFold{0%{opacity:0;transform:rotate(var(--r)) translateY(-62vh)}24%{opacity:1}100%{opacity:0;transform:rotate(var(--r)) translateY(-5vh) scale(.18)}}
.sv-aethen-sword{left:50%;top:-80vh;width:5.4vmin;height:80vh;margin-left:-2.7vmin;z-index:5;filter:drop-shadow(0 0 26px #eef2f7);animation:svBladeDrop 1s cubic-bezier(.6,0,.28,1) forwards 1.5s}
.sv-aethen-sword .b{left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,#fdfdfe,#e2e6eb 42%,#9aa0a8);clip-path:polygon(0 0,100% 0,100% 86%,50% 100%,0 86%)}
.sv-aethen-sword .g{left:-250%;right:-250%;bottom:62%;height:1.5vmin;border-radius:.4vmin;background:linear-gradient(#fbfcfd,#939aa2)}
.sv-aethen-sword .h{left:26%;right:26%;bottom:calc(62% + 1.5vmin);height:21%;border-radius:.4vmin;background:linear-gradient(#5d4a39,#2e241b)}
.sv-aethen-sword .p{left:2%;right:2%;bottom:calc(83% + 1.5vmin);height:4%;border-radius:50%;background:radial-gradient(circle at 38% 34%,#fff3c9,#b3903d)}
@keyframes svBladeDrop{0%{transform:translateY(0)}100%{transform:translateY(76vh)}}
.sv-aethen-edge{left:0;right:0;top:75%;height:2px;z-index:6;opacity:0;background:linear-gradient(90deg,transparent,#fff,transparent);animation:svEdge .7s ease forwards 2.4s}
.sv-aethen-lie{left:50%;top:38%;width:min(52vw,560px);margin-left:min(-26vw,-280px);text-align:center;z-index:4;color:#b4bac2;font:900 clamp(8px,1.3vw,15px) var(--mono);letter-spacing:.3em;opacity:0;animation:svLie 2.6s ease forwards .6s}
@keyframes svLie{0%{opacity:0}30%{opacity:.85}62%{opacity:.85;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 100%)}}

/* The Ring of the Silver Haven. It remembers every bargain. */
.sv-ring{--sv:#ffe9a8;background:radial-gradient(circle at 50% 46%,#33322e,#07070a 72%)}
.sv-ring-band{left:50%;top:46%;width:46vmin;height:46vmin;z-index:4;border:3.4vmin solid #d8bc69;border-radius:50%;box-shadow:0 0 56px #ffe9a888,inset 0 0 30px #000a;animation:svRingIn 2.2s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes svRingIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(-140deg)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(10deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
.sv-ring-script{left:50%;top:46%;width:var(--w);height:var(--w);z-index:3;border-radius:50%;border:1px dashed #ffe9a855;animation:svSpin var(--d) linear infinite}
.sv-ring-script.rev{animation-direction:reverse;border-style:dotted}
.sv-ring-glint{left:50%;top:46%;width:46vmin;height:46vmin;z-index:6;animation:svSpin 2.4s linear infinite}
.sv-ring-glint::after{content:"";position:absolute;left:50%;top:-1.7vmin;width:3.4vmin;height:3.4vmin;margin-left:-1.7vmin;border-radius:50%;background:#fffbe8;box-shadow:0 0 30px 6px #ffe9a8}
.sv-ring-arm{left:50%;top:46%;width:0;height:0;z-index:7;transform:rotate(var(--r))}
.sv-ring-bargain{left:0;top:-27.5vmin;color:#ffe9a8;font:700 clamp(10px,1.6vw,19px) var(--mono);opacity:0;text-shadow:0 0 14px #ffbe4e;animation:svBargain 2.4s ease forwards var(--d)}
@keyframes svBargain{0%{opacity:0;transform:translateX(-50%) rotate(calc(var(--r) * -1)) scale(.4)}45%{opacity:.95;transform:translateX(-50%) rotate(calc(var(--r) * -1)) scale(1)}100%{opacity:0;transform:translateX(-50%) rotate(calc(var(--r) * -1)) scale(1.6)}}

/* The Tower of Truth. It has no windows. It does not need them. */
.sv-tower{--sv:#f6f9fb;background:linear-gradient(#07080a,#191b1f)}
.sv-tower-keep{left:50%;bottom:0;width:18vmin;height:0;margin-left:-9vmin;z-index:2;background:linear-gradient(180deg,#191c21,#000);animation:svTowerUp 1.4s cubic-bezier(.16,1,.3,1) forwards}
.sv-tower-keep::after{content:"";position:absolute;left:-16%;right:-16%;bottom:100%;height:11vmin;background:#1c2026;clip-path:polygon(50% 0,100% 100%,0 100%)}
.sv-tower-keep::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14%;background:linear-gradient(90deg,#343941,transparent)}
@keyframes svTowerUp{0%{height:0}100%{height:76%}}
.sv-tower-lamp{left:50%;bottom:73%;width:4vmin;height:4vmin;margin-left:-2vmin;border-radius:50%;background:#fff;box-shadow:0 0 60px 16px #f2f5f8;z-index:6;opacity:0;animation:svLamp .5s ease forwards 1.25s}
.sv-tower-beam{left:50%;bottom:73%;width:180vw;height:24vmin;margin-bottom:-12vmin;z-index:5;transform-origin:0 50%;opacity:0;background:linear-gradient(90deg,#ffffffcc,#ffffff22 58%,transparent);clip-path:polygon(0 46%,100% 0,100% 100%,0 54%);animation:svBeam 2.3s ease-in-out forwards 1.45s}
@keyframes svBeam{0%{opacity:0;transform:rotate(-48deg)}16%{opacity:.95}100%{opacity:0;transform:rotate(44deg)}}
.sv-tower-flash{inset:0;z-index:8;background:#fff;opacity:0;animation:svFlash 2.4s ease forwards 1.5s}
@keyframes svFlash{0%,28%{opacity:0}30%{opacity:.45}37%,100%{opacity:0}}

/* Saint Avarra. A halo for every prisoner, so nobody has to aim twice. */
.sv-avarra{--sv:#ffd98a;background:radial-gradient(ellipse at 50% 24%,#483814,#090602 72%)}
.sv-avarra-sun{left:50%;top:6%;width:26vmin;height:26vmin;margin-left:-13vmin;z-index:1;border-radius:50%;background:radial-gradient(circle,#fff7d4,#ffd98a 48%,transparent 72%);opacity:0;animation:svLamp 1.5s ease forwards .2s}
.sv-avarra-figure{left:var(--x);bottom:20%;width:9vmin;height:24vmin;margin-left:-4.5vmin;z-index:3;background:#08080a;clip-path:polygon(38% 0,62% 0,72% 22%,86% 100%,14% 100%,28% 22%);opacity:0;animation:svKneel 1.2s ease forwards var(--d)}
.sv-avarra-head{left:var(--x);bottom:calc(20% + 22.6vmin);width:4.4vmin;height:4.4vmin;margin-left:-2.2vmin;z-index:4;border-radius:50%;background:#08080a;opacity:0;animation:svKneel 1.2s ease forwards var(--d)}
@keyframes svKneel{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
.sv-avarra-halo{left:var(--x);bottom:calc(20% + 28vmin);width:9vmin;height:2.6vmin;margin-left:-4.5vmin;z-index:5;border-radius:50%;border:.5vmin solid #ffe8ab;box-shadow:0 0 26px #ffd98a,inset 0 0 14px #fff4d0;opacity:0;animation:svHaloDrop 1.4s cubic-bezier(.3,1.4,.4,1) forwards var(--d)}
@keyframes svHaloDrop{0%{opacity:0;transform:translateY(-44vh) scale(1.7)}38%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
.sv-avarra-aim{left:var(--x);bottom:calc(20% + 20.4vmin);width:9vmin;height:9vmin;margin-left:-4.5vmin;z-index:7;border-radius:50%;border:1px solid #ff6a6a;opacity:0;animation:svAim 1.3s steps(1,end) forwards 2.1s}
.sv-avarra-aim::before,.sv-avarra-aim::after{content:"";position:absolute;background:#ff6a6a}
.sv-avarra-aim::before{left:50%;top:-22%;width:1px;height:144%}
.sv-avarra-aim::after{top:50%;left:-22%;height:1px;width:144%}
@keyframes svAim{0%,18%{opacity:0}28%{opacity:.9}48%{opacity:.15}64%{opacity:.9}100%{opacity:0}}

/* The Last Pardon. One ruled line, and the page is empty again. */
.sv-pardon{--sv:#f3ece0;background:radial-gradient(ellipse at 50% 46%,#25211b,#060503 74%)}
.sv-pardon-page{inset:9% 9% 16%;z-index:2;background:linear-gradient(#f7f1e4,#dbd1ba);box-shadow:0 0 70px #000b;animation:svRise 2.2s ease forwards}
.sv-pardon-line{left:7%;width:86%;height:2px;top:var(--y);background:#4f432f;opacity:.62;transform-origin:0 50%;animation:svUnwrite 1s ease forwards var(--d)}
@keyframes svUnwrite{0%{transform:scaleX(1);opacity:.62}100%{transform:scaleX(0);opacity:0}}
.sv-pardon-rule{left:11%;top:62%;width:0;height:3px;z-index:5;background:#1b1610;animation:svRule 2.1s ease forwards .35s}
@keyframes svRule{0%{width:0}100%{width:78%}}
.sv-pardon-quill{left:11%;top:62%;width:1.8vmin;height:14vmin;z-index:6;margin-top:-14vmin;transform-origin:50% 100%;clip-path:polygon(50% 100%,0 74%,16% 6%,50% 0,84% 6%,100% 74%);background:linear-gradient(#fbf7ed 0 58%,#c6b795 58% 76%,#8e7f66 76%);filter:drop-shadow(0 5px 9px #0009);animation:svQuill 2.1s ease forwards .35s}
@keyframes svQuill{0%{transform:translateX(0) rotate(-17deg)}100%{transform:translateX(76vw) rotate(-17deg)}}
.sv-pardon-seal{left:50%;top:68%;width:14vmin;height:14vmin;margin-left:-7vmin;z-index:7;border-radius:48% 52% 51% 49%/50% 47% 53% 50%;background:radial-gradient(circle at 36% 32%,#e15c4b,#7c1913);box-shadow:0 7px 22px #000a;opacity:0;animation:svSeal .6s cubic-bezier(.3,1.7,.4,1) forwards 2.35s}
.sv-pardon-seal::before{content:"";position:absolute;inset:17%;border-radius:50%;border:.45vmin solid #00000030;box-shadow:inset 0 0 1.4vmin #00000055}
.sv-pardon-seal::after{content:"";position:absolute;inset:31%;background:linear-gradient(#00000038,#00000038) center/100% 15% no-repeat,linear-gradient(#00000038,#00000038) center/15% 100% no-repeat;transform:rotate(45deg)}
@keyframes svSeal{0%{opacity:0;transform:scale(2.6)}70%{opacity:1;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}

/* Sarah. She takes the halo off, and does not regret the dark. */
.sv-sarah{--sv:#f0c674;background:radial-gradient(ellipse at 50% 34%,#382a0f,#050403 70%)}
.sv-sarah-glow{inset:0;z-index:1;background:radial-gradient(ellipse at 50% 34%,#ffe3a055,transparent 58%);animation:svDrain 2.8s ease forwards .8s}
@keyframes svDrain{0%{opacity:1}100%{opacity:0}}
.sv-sarah-figure{left:50%;bottom:17%;width:13vmin;height:38vmin;margin-left:-6.5vmin;z-index:4;background:#08080a;clip-path:polygon(40% 0,60% 0,72% 18%,88% 100%,12% 100%,28% 18%);filter:drop-shadow(0 0 22px #000);animation:svStep 2.5s ease forwards .7s}
.sv-sarah-head{left:50%;bottom:calc(17% + 36vmin);width:6vmin;height:6vmin;margin-left:-3vmin;z-index:5;border-radius:50%;background:#08080a;filter:drop-shadow(0 0 20px #000);animation:svStep 2.5s ease forwards .7s}
@keyframes svStep{0%{opacity:.15;transform:translateY(9vmin) scale(.86)}100%{opacity:1;transform:translateY(0) scale(1)}}
.sv-sarah-halo{left:50%;bottom:calc(17% + 42vmin);width:15vmin;height:4.2vmin;margin-left:-7.5vmin;z-index:6;border-radius:50%;border:.55vmin solid #ffe3a0;box-shadow:0 0 28px #f0c674;transform-origin:50% 140%;animation:svHaloFall 2.3s cubic-bezier(.4,0,.8,1) forwards 1.05s}
@keyframes svHaloFall{0%{opacity:1;transform:rotate(0) translateY(0)}20%{transform:rotate(-8deg)}100%{opacity:0;transform:rotate(108deg) translateY(44vmin)}}
.sv-sarah-shard{left:50%;bottom:8%;width:.7vmin;height:2.4vmin;z-index:7;background:#ffe3a0;opacity:0;animation:svShard 1.1s ease-out forwards 2.9s}
@keyframes svShard{0%{opacity:1;transform:rotate(var(--r)) translateY(0)}100%{opacity:0;transform:rotate(var(--r)) translateY(-22vmin) scale(.35)}}
.sv-sarah-dark{inset:0;z-index:8;background:radial-gradient(ellipse at 50% 52%,transparent,#000 70%);opacity:0;animation:svDarkIn 2.2s ease forwards 1.7s}
@keyframes svDarkIn{0%{opacity:0}100%{opacity:.88}}

/* Saint Maros. He does not arrive. He has been walking the whole time. */
.sv-maros{--sv:#dfe4ea;background:linear-gradient(#050506,#15171b 58%,#060708)}
.sv-maros-hall{left:-20%;right:-20%;bottom:0;height:62%;z-index:1;background:repeating-linear-gradient(90deg,#191c22 0 5%,#0b0d10 5% 10%);transform:perspective(70vmin) rotateX(62deg);transform-origin:50% 100%}
.sv-maros-step{left:var(--x);bottom:var(--b);width:3.2vmin;height:1.5vmin;margin-left:-1.6vmin;z-index:2;border-radius:50%;background:#1a1d23;box-shadow:0 0 20px #3b414a;opacity:0;animation:svStepPrint 2.4s ease forwards var(--d)}
@keyframes svStepPrint{0%{opacity:0}16%{opacity:.95}100%{opacity:.22}}
.sv-maros-lamp{left:74%;bottom:46%;width:1.8vmin;height:1.8vmin;z-index:3;border-radius:50%;background:#ffd79a;box-shadow:0 0 30px 8px #ffb45799;animation:svLampSway 3.2s ease-in-out infinite}
@keyframes svLampSway{0%,100%{transform:translateX(0)}50%{transform:translateX(-2.4vmin)}}
.sv-maros-figure{left:50%;bottom:9%;width:13vmin;height:34vmin;margin-left:-6.5vmin;z-index:5;transform-origin:50% 100%;filter:drop-shadow(0 0 3vmin #000);animation:svApproach 3s cubic-bezier(.55,0,.4,1) forwards .25s}
.sv-maros-figure .body{left:0;right:0;bottom:0;height:84%;background:#050507;clip-path:polygon(38% 0,62% 0,78% 15%,96% 100%,4% 100%,22% 15%)}
.sv-maros-figure .head{left:50%;bottom:80%;width:5.2vmin;height:5.6vmin;margin-left:-2.6vmin;border-radius:50% 50% 44% 44%;background:#050507}
.sv-maros-figure .blade{left:90%;bottom:6%;width:.8vmin;height:44%;transform:rotate(8deg);opacity:.8;background:linear-gradient(#f7f9fb,#7c828b);clip-path:polygon(0 0,100% 0,100% 94%,50% 100%,0 94%)}
@keyframes svApproach{0%{opacity:0;transform:scale(.14)}16%{opacity:1}100%{opacity:1;transform:scale(2.3)}}
.sv-maros-glint{left:26%;right:26%;bottom:26%;height:2px;z-index:7;opacity:0;background:linear-gradient(90deg,transparent,#ffffff,transparent);animation:svEdge .8s ease forwards 2.55s}
@media (prefers-reduced-motion:reduce){.sv-stage *{animation-duration:.01s!important;animation-iteration-count:1!important}}

.sv-amb-maerial,.sv-amb-maerialstra,.sv-amb-aethen,.sv-amb-ring,.sv-amb-tower,.sv-amb-avarra,.sv-amb-pardon,.sv-amb-sarah,.sv-amb-maros,.sv-amb-castle{position:absolute;inset:0;pointer-events:none}
.sv-amb-maerial{background:repeating-linear-gradient(0deg,transparent 0 5.4%,#c9bfa41f 5.4% 5.7%)}
.sv-amb-maerialstra{background:repeating-linear-gradient(74deg,#eaf1f716 0 2px,transparent 2px 9px)}
.sv-amb-aethen{background:repeating-linear-gradient(90deg,#f0f3f714 0 1px,transparent 1px 6vmin)}
.sv-amb-ring{background:radial-gradient(circle at 50% 46%,transparent 0 20vmin,#ffe9a81c 20vmin 23vmin,transparent 23vmin)}
.sv-amb-tower{background:linear-gradient(90deg,transparent,#f6f9fb16 48%,transparent 52%)}
.sv-amb-avarra{background:radial-gradient(ellipse at 50% 12%,#ffd98a22,transparent 60%)}
.sv-amb-pardon{background:repeating-linear-gradient(0deg,transparent 0 6.4%,#f3ece01a 6.4% 6.7%)}
.sv-amb-sarah{background:radial-gradient(ellipse at 50% 40%,#f0c6741a,transparent 46%),radial-gradient(ellipse at 50% 60%,transparent,#000000aa 74%)}
.sv-amb-maros{background:repeating-linear-gradient(90deg,#dfe4ea12 0 4%,transparent 4% 9%)}
.sv-amb-castle{background:linear-gradient(180deg,transparent 40%,#0a0b0d88),repeating-linear-gradient(90deg,transparent 0 7%,#1a1c2155 7% 12%)}

.munch-crag-show{position:fixed;inset:0;z-index:100006;overflow:hidden;pointer-events:none;
  isolation:isolate;background:#020202;animation:munchCragVeil 4.15s ease forwards}
.munch-crag-show .mc-gif{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  image-rendering:auto;filter:contrast(1.13) saturate(1.08) brightness(.78);
  transform:scale(1.025);animation:munchCragGif 4.05s cubic-bezier(.18,.8,.2,1) forwards}
.munch-crag-show::before{content:"";position:absolute;z-index:4;inset:0;
  background:radial-gradient(ellipse at 50% 46%,transparent 0 36%,rgba(0,0,0,.28) 67%,rgba(0,0,0,.94) 100%),
    linear-gradient(180deg,rgba(0,0,0,.45),transparent 28% 65%,rgba(0,0,0,.82));
  box-shadow:inset 0 0 12vw #000;animation:munchCragVignette 1.1s ease-in-out infinite alternate}
.munch-crag-show::after{content:"";position:absolute;z-index:5;inset:-12%;
  background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,244,213,.035) 6px 7px);
  mix-blend-mode:screen;animation:munchCragScrape .16s steps(2) infinite}
.munch-crag-show .mc-jaw{position:absolute;z-index:7;left:50%;top:52%;width:min(76vw,980px);height:min(62vh,610px);
  transform:translate(-50%,-50%) scale(1.7);opacity:0;border:clamp(16px,3vw,40px) solid #090502;
  border-radius:48% 52% 44% 46%;box-shadow:0 0 0 5px #c8a16b33,0 0 70px #000 inset;
  animation:munchCragBite 1.1s 1.25s cubic-bezier(.6,0,.3,1) forwards}
.munch-crag-show .mc-name{position:absolute;z-index:12;left:3%;right:3%;bottom:8%;text-align:center;
  color:#f6e4bf;font:900 clamp(22px,4vw,62px) Georgia,serif;letter-spacing:.09em;text-transform:uppercase;
  text-shadow:0 4px 3px #000,0 0 16px #cf9a56,0 0 48px #000;animation:munchCragName 3.85s ease forwards}
.munch-crag-show .mc-sub{position:absolute;z-index:12;left:3%;right:3%;bottom:4.7%;text-align:center;
  color:#d8b275;font:900 clamp(8px,1vw,13px) var(--mono);letter-spacing:.42em;text-transform:uppercase;
  text-shadow:0 0 10px #000,0 0 16px #b67b38;animation:munchCragName 4s ease forwards}
@keyframes munchCragVeil{0%{opacity:0}7%,86%{opacity:1}100%{opacity:0}}
@keyframes munchCragGif{0%{opacity:0;transform:scale(1.1)}12%,82%{opacity:1}100%{opacity:0;transform:scale(1.01)}}
@keyframes munchCragVignette{to{filter:brightness(.72);transform:scale(1.025)}}
@keyframes munchCragScrape{to{transform:translate(1.5%,-1%)}}
@keyframes munchCragBite{0%,16%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}
  42%,62%{opacity:.86;transform:translate(-50%,-50%) scale(.94,.25)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.08,.02)}}
@keyframes munchCragName{0%,20%{opacity:0;transform:translateY(24px);letter-spacing:.24em}
  36%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px);letter-spacing:.15em}}
@media(max-width:700px){.munch-crag-show .mc-gif{object-position:center}.munch-crag-show .mc-name{bottom:12%}.munch-crag-show .mc-sub{bottom:8%;letter-spacing:.2em}}
@media(prefers-reduced-motion:reduce){.munch-crag-show::after,.munch-crag-show::before{animation:none}}

.friends-open{position:relative}
#friendsMenu.friends-open{position:fixed;right:18px;bottom:18px;z-index:100110;display:inline-flex;align-items:center;gap:8px;max-width:calc(100vw - 36px);padding:11px 13px;border-color:#806b43;background:#111827;box-shadow:0 14px 36px #0008;color:#f0dfb0;outline-offset:2px}
#friendsMenu.friends-open[data-online-count]::after{content:attr(data-online-count);display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#b58b3e;color:#11131a;font:900 8px var(--mono)}
.match-invite-friends{display:none}.match-invite-friends.on{display:inline-flex;align-items:center;gap:7px}.match-invite-friends.on::before{content:"";width:7px;height:7px;border-radius:50%;background:#65db98;box-shadow:0 0 9px #65db98}
.friends-overlay{position:fixed;inset:0;z-index:100120;display:none;place-items:stretch end;padding:0;background:rgba(2,4,9,.72);backdrop-filter:blur(8px)}
.friends-overlay.on{display:grid}
.friends-panel{width:min(620px,100vw);height:100%;max-height:100vh;overflow:auto;border:1px solid #806b43;border-radius:0;background:linear-gradient(145deg,#111827,#080c14 58%,#130d19);box-shadow:-30px 0 100px #000,0 0 50px #6d4b8622;color:#e8e2d5}
.friends-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 24px;border-bottom:1px solid #5d503777}
.friends-head span,.friends-label{display:block;color:#bda66d;font:800 8px var(--mono);letter-spacing:.2em;text-transform:uppercase}
.friends-head h2{margin:5px 0 4px;font:32px Georgia,serif}.friends-head p{margin:0;color:#929baa;font:11px/1.5 var(--mono)}
.friends-profile{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(180px,1fr) auto auto;gap:10px;align-items:end;padding:16px 24px;border-bottom:1px solid #34303a}
.friends-profile label{display:grid;gap:6px}.friends-profile input{min-width:0;padding:10px;border:1px solid #454c5e;border-radius:4px;background:#080c13;color:#fff;font:12px var(--mono)}
.friends-profile select{min-width:0;padding:10px;border:1px solid #454c5e;border-radius:4px;background:#080c13;color:#fff;font:11px var(--mono)}
.friends-relay-status{padding:7px 24px;border-bottom:1px solid #34303a;background:#080d15;color:#9ba5b4;font:8px var(--mono);letter-spacing:.09em;text-transform:uppercase}.friends-relay-status.online{color:#6fda9b}.friends-relay-status.error{color:#e1887c}
.friends-code{padding:10px 13px;border:1px solid #745f35;border-radius:4px;background:#171207;color:#efd27e;font:900 12px var(--mono);letter-spacing:.12em}
.friends-add{display:grid;grid-template-columns:1fr auto;gap:10px;padding:16px 24px;background:#0a0f18}
.friends-add input{padding:11px;border:1px solid #454c5e;border-radius:4px;background:#060a10;color:#fff;font:12px var(--mono);text-transform:uppercase}
.friends-columns{display:grid;grid-template-columns:1.1fr .9fr;gap:0}
.road-chat-panel{display:none;padding:18px 24px 22px;border-top:1px solid #34303a}.road-chat-panel.on{display:block}.road-chat-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}.road-chat-head div{min-width:0}.road-chat-head b,.road-chat-head small{display:block}.road-chat-head b{font:20px Georgia,serif}.road-chat-head small{margin-top:3px;color:#7f8999;font:8px var(--mono);letter-spacing:.08em}
.road-chat-thread{height:min(330px,42vh);overflow:auto;display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid #303747;border-radius:5px;background:#070b12}
.road-chat-message{max-width:min(76%,560px);padding:9px 11px;border:1px solid #343e50;border-radius:8px;background:#111927;color:#e5ebf3;font:11px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}.road-chat-message.mine{align-self:flex-end;border-color:#806832;background:#211b0f}.road-chat-message small{display:block;margin-top:5px;color:#707b8c;font:7px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.road-chat-compose{display:grid;grid-template-columns:1fr auto;gap:9px;margin-top:10px}.road-chat-compose textarea{min-height:58px;max-height:130px;resize:vertical;padding:10px;border:1px solid #454c5e;border-radius:4px;background:#080c13;color:#fff;font:11px/1.45 var(--mono)}
.friend-unread{display:inline-grid;place-items:center;min-width:17px;height:17px;margin-left:4px;padding:0 4px;border-radius:9px;background:#b58b3e;color:#080a0f;font:900 8px var(--mono)}
.friends-section{padding:18px 24px;min-height:220px}.friends-section+section{border-left:1px solid #34303a}
.friends-list{display:grid;gap:8px;margin-top:10px}
.friend-row{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center;overflow:hidden;padding:10px;border:1px solid #303747;border-radius:5px;background:#0c111b}
.friend-row::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(4,7,12,.62),rgba(7,11,18,.9) 36%,rgba(7,11,18,.97));pointer-events:none}.friend-row>:not(.friend-cardback-skin){position:relative;z-index:2}.friend-cardback-skin.back{position:absolute!important;z-index:0!important;inset:-42% -5% -52% -9%!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;opacity:.5;transform:rotate(-3deg) scale(1.08);filter:saturate(1.15) contrast(1.08);pointer-events:none}.friend-cardback-skin.back::before,.friend-cardback-skin.back::after{pointer-events:none}
.friend-dot{grid-row:1/3;width:9px;height:9px;border-radius:50%;background:#59606c}.friend-dot.online{background:#65db98;box-shadow:0 0 10px #65db98}
.friend-copy{min-width:0}.friend-copy b,.friend-copy small{display:block}.friend-copy b{overflow:visible;color:#f1ede4;font:700 12px/1.35 var(--mono);white-space:normal;overflow-wrap:anywhere}.friend-copy small{margin-top:3px;overflow:hidden;color:#7f8999;font:8px var(--mono);letter-spacing:.08em;text-overflow:ellipsis;white-space:nowrap}
.road-profile-sigil{display:inline-grid!important;place-items:center;min-width:18px;height:18px;margin-right:6px;padding:0 3px;border:1px solid #b28b3f;border-radius:50%;background:radial-gradient(circle,#2a2110,#080b11 70%);box-shadow:inset 0 0 8px #d8b55b33,0 0 8px #d8b55b22;color:#f0cf75;font:900 9px/1 var(--serif);vertical-align:-2px;white-space:nowrap}.friend-copy .road-profile-sigil{display:inline-grid!important}.cat-seat-name .road-profile-sigil,.teamhero .road-profile-sigil{min-width:15px;height:15px;margin-right:4px;font-size:7px}
.friend-copy .friend-title{display:block;margin-top:3px;color:#d5ae58;font:italic 10px/1.2 Georgia,serif;letter-spacing:.025em;white-space:normal;overflow-wrap:anywhere}.friend-copy .friend-title::before{content:"◆ ";color:#8b713e;font-style:normal;font-size:7px}
.friend-actions{grid-column:2;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:5px}
.ai-faction-menu{position:relative;float:right;max-width:148px;margin:-20px 58px 0 6px;font:8px var(--mono);z-index:12}.ai-faction-menu summary{overflow:hidden;padding:4px 20px 4px 7px;border:1px solid #59647a;border-radius:3px;background:#0c111c;color:#dce4ef;cursor:pointer;list-style:none;text-overflow:ellipsis;white-space:nowrap}.ai-faction-menu summary::-webkit-details-marker{display:none}.ai-faction-menu summary::after{content:"⌄";position:absolute;right:7px;color:#d4b45d}.ai-faction-menu[open] summary{border-color:#c29a47;color:#f3d784}.ai-faction-options{position:absolute;right:0;top:calc(100% + 3px);display:grid;width:190px;max-height:260px;overflow:auto;padding:4px;border:1px solid #82682f;border-radius:4px;background:#070b12;box-shadow:0 14px 34px #000;z-index:30}.ai-faction-options button{padding:7px;border:0;border-bottom:1px solid #232b38;background:transparent;color:#cfd8e6;font:8px var(--mono);text-align:left;cursor:pointer}.ai-faction-options button:hover,.ai-faction-options button.selected{background:#2a2110;color:#f0cf75}.solo-ai-seat .ai-faction-menu{float:none;width:100%;max-width:none;margin:0}.solo-ai-seat .ai-faction-options{left:0;right:0;width:auto}.friend-actions button{padding:6px 7px;border:1px solid #4c5669;border-radius:3px;background:#151c28;color:#dce5f2;font:800 7px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.friend-actions button.primary{border-color:#a8853e;color:#f2d17b}.friend-actions button:disabled{opacity:.35;cursor:default}
.friends-empty{padding:20px 8px;color:#717c8b;font:10px/1.6 var(--mono);text-align:center}
.road-invite{position:fixed;right:18px;bottom:72px;z-index:100140;display:none;width:min(390px,calc(100vw - 36px));padding:16px;border:1px solid #b99448;border-radius:6px;background:#0b1019;box-shadow:0 18px 55px #000,0 0 28px #a9793d44;color:#eef2f7}.road-invite.on{display:block}.road-invite span{color:#c8ad6e;font:800 8px var(--mono);letter-spacing:.16em;text-transform:uppercase}.road-invite b{display:block;margin:7px 0;font:20px Georgia,serif}.road-invite p{color:#9da7b5;font:10px/1.5 var(--mono)}.road-invite-actions{display:flex;gap:8px}
@media(max-width:720px){.friends-profile{grid-template-columns:1fr auto}.friends-profile label{grid-column:1/-1}.friends-columns{grid-template-columns:1fr}.friends-section+section{border-left:0;border-top:1px solid #34303a}.friend-row{grid-template-columns:auto minmax(0,1fr)}.friend-actions{grid-column:2;justify-content:flex-start}}
.match-people{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 12px}
.match-people-label{color:var(--dim);font:8px var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-right:2px}
.match-person{display:inline-flex;align-items:baseline;gap:6px;max-width:100%;padding:4px 8px;border:1px solid #33405a;border-radius:999px;background:rgba(255,255,255,.03)}
.match-person b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font:600 10px var(--ui-font,system-ui,sans-serif)}
.match-person i{font:normal 7px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.match-person.me{border-color:var(--fac,#6c84a8)}
.match-person.unseated{border-style:dashed}

.fd-scrim{position:fixed;inset:0;z-index:100130;display:none;background:rgba(2,4,9,.78);backdrop-filter:blur(10px)}
.fd-scrim.on{display:block}
.fd-scrim.on .fd-sheet{animation:fdRise .34s cubic-bezier(.2,.9,.3,1) both}
.fd-sheet{position:absolute;inset:0;margin:auto;width:min(760px,calc(100vw - 24px));height:fit-content;max-height:min(88vh,860px);overflow:auto;overscroll-behavior:contain;
  border:1px solid #3a4256;border-radius:10px;background:linear-gradient(#111725,#0a0e17);box-shadow:0 30px 90px #000c}
@keyframes fdRise{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}

/* the head: who they are */
.fd-head{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px 18px 18px;padding-right:56px;border-bottom:1px solid #2a3040;overflow:hidden}
.fd-head::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background:radial-gradient(ellipse at 12% 0%,var(--fd-tint,#5b6b8a)44,transparent 62%)}
/* the sigil sits inside a ring that fills with their Black Road Pass rank */
.fd-mark{position:relative;width:74px;height:74px;display:grid;place-items:center}
.fd-mark::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--fd-tint,#dcb35c) calc(var(--fd-rank,0)*1turn),#1b2231 0);
  -webkit-mask:radial-gradient(circle,transparent 0 30px,#000 31px);mask:radial-gradient(circle,transparent 0 30px,#000 31px);
  animation:fdRing 1.1s cubic-bezier(.2,.9,.3,1) both}
.fd-mark::after{content:attr(data-rank);position:absolute;right:-2px;bottom:-2px;padding:2px 6px;border-radius:99px;
  border:1px solid var(--fd-tint,#6a5a2c);background:#0b1018;font:800 9px var(--mono);letter-spacing:.06em;color:var(--fd-tint,#e6c377)}
.fd-mark[data-rank=""]::after{display:none}
@keyframes fdRing{from{opacity:0;transform:rotate(-40deg) scale(.86)}to{opacity:1;transform:none}}
.fd-sigil{position:relative;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;border:1px solid #47506a;background:#0c1220;
  font:400 29px Georgia,serif;color:var(--fd-tint,#dcb35c);text-shadow:0 0 16px var(--fd-tint,#dcb35c)}
/* a slow pass of light across the head, so the panel is never quite still */
.fd-head::before{content:"";position:absolute;inset:-40% -60%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 44%,var(--fd-tint,#ffffff)22 50%,transparent 56%);
  animation:fdSheen 7s linear infinite}
@keyframes fdSheen{from{transform:translateX(-46%)}to{transform:translateX(46%)}}
@media (prefers-reduced-motion:reduce){.fd-head::before,.fd-mark::before{animation:none}}
.fd-who b{display:block;font:800 clamp(19px,2.6vw,27px) Georgia,serif;color:#f2f5fa;letter-spacing:.02em}
.fd-who em{display:block;margin-top:2px;font:600 12px var(--mono);font-style:normal;color:var(--fd-tint,#c8a55a);letter-spacing:.09em;text-transform:uppercase}
.fd-who small{display:block;margin-top:5px;font:600 10px var(--mono);color:#78839a;letter-spacing:.14em}
/* the little badges under a name: pass rank, games, what they are doing */
.fd-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.fd-chip{padding:3px 8px;border-radius:99px;border:1px solid #2f3646;background:#101724;
  font:800 9px var(--mono);letter-spacing:.12em;color:#8d99b0}
.fd-chip.pass{border-color:var(--fd-tint,#6a5a2c);background:#1a1710;color:var(--fd-tint,#e6c377);
  box-shadow:inset 0 0 12px #0006}
.fd-chip.lobby{border-color:#4a6a43;background:#111c13;color:#93d492}
.fd-chip.match{border-color:#6a5a2c;background:#1c1810;color:#e0c072}
.fd-chip.deck{border-color:#3d4a6b;background:#111726;color:#9db4e8}
/* their own favourite factions, as chips with the faction's card back */
.fd-favs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:7px}
.fd-fav{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border-radius:99px;
  border:1px solid #2c3343;background:#0d131f;font:700 11px var(--mono);color:#c3ccdb}
.fd-fav[data-first]{border-color:var(--fd-tint,#6a5a2c);color:#eef2f8}
.fd-fav i{flex:none;width:17px;height:24px;border-radius:3px;border:1px solid #3a4256;display:block;overflow:hidden;background-size:cover!important;background-position:center!important}
.fd-live{display:flex;align-items:center;gap:6px;font:800 10px var(--mono);letter-spacing:.16em;color:#6f7b92}
.fd-live i{width:8px;height:8px;border-radius:50%;background:#49536b}
.fd-live.on{color:#79e2a4}
.fd-live.on i{background:#57d98b;box-shadow:0 0 0 0 #57d98b99;animation:fdPulse 2.4s ease-out infinite}
@keyframes fdPulse{70%{box-shadow:0 0 0 9px #57d98b00}100%{box-shadow:0 0 0 0 #57d98b00}}
.fd-back{width:44px;height:62px;border-radius:5px;border:1px solid #47506a;box-shadow:0 6px 18px #0009}

.fd-body{padding:16px 18px 18px;display:grid;gap:16px}
.fd-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px}
.fd-stat{padding:10px 11px;border:1px solid #2c3343;border-radius:7px;background:#0d131f}
.fd-stat b{display:block;font:800 21px Georgia,serif;color:#eef2f8}
.fd-stat span{display:block;margin-top:2px;font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#778399}

/* the two arcs: with them, and against them */
.fd-arcs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fd-arc{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:12px;border:1px solid #2c3343;border-radius:7px;background:#0d131f}
.fd-arc svg{width:74px;height:74px;transform:rotate(-90deg)}
.fd-arc circle{fill:none;stroke-width:8;stroke-linecap:round}
.fd-arc .fd-track{stroke:#212838}
.fd-arc .fd-fill{stroke:var(--fd-arc,#7fb2ff);stroke-dasharray:var(--fd-len,0) 999;transition:stroke-dasharray 1.1s cubic-bezier(.2,.9,.3,1)}
.fd-arc figcaption{font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#778399}
.fd-arc .fd-pct{font:800 25px Georgia,serif;color:#eef2f8}
.fd-arc .fd-sub{font:600 11px var(--mono);color:#8d97ab}
.fd-arc.win{--fd-arc:#68d89a}
.fd-arc.loss{--fd-arc:#e0796f}

/* what they bring */
.fd-sec>h4{margin:0 0 7px;font:800 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#77839a}
.fd-bar{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) auto;gap:9px;align-items:center;margin-bottom:5px;font:600 11px var(--mono);color:#aab4c6}
.fd-bar u{text-decoration:none;color:#dde3ec}
.fd-bar i{display:block;height:7px;border-radius:4px;background:#1b2231;overflow:hidden}
.fd-bar i::after{content:"";display:block;height:100%;width:var(--fd-w,0%);border-radius:4px;background:linear-gradient(90deg,var(--fd-tint,#7fb2ff),#f0f4fb);transition:width .9s cubic-bezier(.2,.9,.3,1) var(--fd-d,0s)}
.fd-note{font:600 11px var(--mono);color:#6f7b92;line-height:1.55}
.fd-crown{color:#ffd77a}

.fd-acts{display:flex;flex-wrap:wrap;gap:7px;padding-top:2px}
.fd-acts button{padding:8px 12px;border:1px solid #3a4256;border-radius:6px;background:#141b2a;color:#dde3ec;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.fd-acts button:hover:not(:disabled){border-color:#5d6a86;background:#1b2334;color:#fff}
.fd-acts button:disabled{opacity:.42;cursor:default}
.fd-acts button.primary{border-color:#6a5a2c;background:#241f10;color:#f0d79a}
.fd-acts button.danger:hover{border-color:#7d4046;background:#2a1418;color:#f3b9b9}
.fd-close{position:absolute;top:10px;right:12px;z-index:2;width:30px;height:30px;border:1px solid #3a4256;border-radius:6px;background:#141b2a;color:#aeb8c8;font:700 15px var(--mono);cursor:pointer}
.fd-close:hover{color:#fff;border-color:#5d6a86}
.friend-row{cursor:pointer}
.friend-row .friend-actions button{cursor:pointer}
.friend-row:hover{border-color:#4a5568}
/* the list already pins every child with .friend-row>:not(.friend-cardback-skin),
   so this has to match that weight to sit in the corner */
.friend-row>.friend-open{position:absolute;right:10px;top:10px;z-index:3;font:700 9px var(--mono);letter-spacing:.14em;color:#5e6980;pointer-events:none}
.friend-row:hover>.friend-open{color:#9aa6bd}
.friend-row>.friend-open.best{color:#ffd77a}
@media(max-width:620px){.fd-arcs{grid-template-columns:1fr}.fd-head{grid-template-columns:auto minmax(0,1fr)}.fd-back{display:none}}
@media (prefers-reduced-motion:reduce){.fd-scrim.on .fd-sheet{animation:none}.fd-arc .fd-fill,.fd-bar i::after{transition:none}}

/* what somebody is doing, on their row */
.friend-doing{display:inline-flex;align-items:center;gap:5px;margin-top:3px;padding:2px 7px;border-radius:99px;
  border:1px solid #2f3646;background:#101724;font:700 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8d99b0}
.friend-doing.lobby{border-color:#4a6a43;background:#111c13;color:#93d492}
.friend-doing.match{border-color:#6a5a2c;background:#1c1810;color:#e0c072}
.friend-doing.deck{border-color:#3d4a6b;background:#111726;color:#9db4e8}
.friend-doing.best{border-color:#7a6320;background:#1d1809;color:#ffd77a}
.friend-doing+.friend-doing{margin-left:5px}
.friend-doing i{width:5px;height:5px;border-radius:50%;background:currentColor}
.friend-doing.lobby i{animation:spPulse 1.9s ease-in-out infinite}
@keyframes spPulse{0%,100%{opacity:1}50%{opacity:.25}}

/* the mark beside Friends that holds invitations you put away */
.sp-tray{position:fixed;z-index:100125;display:none;align-items:center;gap:8px;padding:9px 13px;border-radius:99px;
  border:1px solid #6a5a2c;background:linear-gradient(#241f10,#171308);color:#f0d79a;
  font:800 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 30px #000a}
.sp-tray.on{display:inline-flex;animation:spTrayIn .3s cubic-bezier(.2,.9,.3,1) both}
.sp-tray::before{content:"";width:9px;height:9px;border-radius:50%;background:#ffd77a;box-shadow:0 0 0 0 #ffd77a99;animation:spGlow 1.8s ease-out infinite}
.sp-tray:hover{border-color:#a08a48;color:#fff2cf}
.sp-tray b{font:800 10px var(--mono)}
@keyframes spGlow{70%{box-shadow:0 0 0 12px #ffd77a00}100%{box-shadow:0 0 0 0 #ffd77a00}}
@keyframes spTrayIn{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}

/* the shortlist: who is online, from inside the lobby */
.sp-pick{position:fixed;inset:0;z-index:100135;display:none;background:rgba(2,4,9,.78);backdrop-filter:blur(8px)}
.sp-pick.on{display:block}
.sp-pick-sheet{position:absolute;inset:0;margin:auto;width:min(460px,calc(100vw - 24px));height:fit-content;max-height:80vh;overflow:auto;
  border:1px solid #3a4256;border-radius:10px;background:linear-gradient(#111725,#0a0e17);box-shadow:0 26px 70px #000c;animation:spTrayIn .28s ease both}
.sp-pick-sheet header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid #2a3040}
.sp-pick-sheet h3{margin:0;font:800 16px Georgia,serif;color:#eef2f8}
.sp-pick-sheet header p{margin:2px 0 0;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#77839a}
.sp-pick-list{display:grid;gap:7px;padding:14px 16px 16px}
.sp-pick-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 11px;text-align:left;
  border:1px solid #2c3343;border-radius:7px;background:#0d131f;cursor:pointer}
.sp-pick-row>div{min-width:0}
.sp-pick-row:hover{border-color:#5d6a86;background:#141c2b}
.sp-pick-row b{display:block;font:700 13px Georgia,serif;color:#e9eef6}
.sp-pick-row small{display:block;font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7d899f}
.sp-pick-row i{width:8px;height:8px;border-radius:50%;background:#57d98b;box-shadow:0 0 8px #57d98b88}
.sp-pick-row span{font:700 9px var(--mono);letter-spacing:.12em;color:#8b96ab}
.sp-pick-empty{padding:18px 4px;text-align:center;font:600 11px var(--mono);color:#6f7b92}
.sp-x{width:28px;height:28px;border:1px solid #3a4256;border-radius:6px;background:#141b2a;color:#aeb8c8;font:700 14px var(--mono);cursor:pointer}
.sp-x:hover{color:#fff;border-color:#5d6a86}
/* Add AI and Invite float together as one row; floated separately they
   stacked on the same spot (see the transform that builds them) */
.match-seat .seat-actions{float:right;display:flex;gap:6px;margin:-19px 0 0 7px}
.match-seat .seat-actions .seat-ai{float:none;margin:0}
.road-invite-actions .sp-later{opacity:.85}

/* the sheet borrows the dossier's chrome; only what is new to a self view
   is styled here */
.spf-sheet .fd-head{--fd-tint:#c8a55a}
/* the run of your last games, newest on the right */
.spf-pips{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-end;min-height:26px}
.spf-pip{width:9px;border-radius:3px;background:#222a3a;transform-origin:bottom;
  animation:spfPip .42s cubic-bezier(.2,.9,.3,1) both;animation-delay:var(--spf-d,0s)}
.spf-pip.w{height:24px;background:linear-gradient(#8ff0b8,#3fa46c)}
.spf-pip.l{height:13px;background:linear-gradient(#5b6478,#39404f)}
.spf-pip[data-now]{box-shadow:0 0 0 1px #0b0f18,0 0 10px #8ff0b877}
@keyframes spfPip{from{opacity:0;transform:scaleY(.1)}to{opacity:1;transform:none}}
/* the decks you have built, grouped by faction */
.spf-decks{display:flex;flex-wrap:wrap;gap:7px}
.spf-deck{display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;border-radius:99px;
  border:1px solid #2c3343;background:#0d131f;font:700 11px var(--mono);color:#c3ccdb}
.spf-deck i{flex:none;width:17px;height:24px;border-radius:3px;border:1px solid #3a4256;display:block;overflow:hidden;
  background-size:cover!important;background-position:center!important}
.spf-deck b{color:#eef2f8}
/* your people: a small grid of counts with one named highlight */
.spf-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px}
.spf-person{padding:10px 11px;border:1px solid #2c3343;border-radius:7px;background:#0d131f;text-align:left}
.spf-person b{display:block;font:800 19px Georgia,serif;color:#eef2f8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spf-person span{display:block;margin-top:2px;font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#778399}
.spf-person.best{border-color:#6a5a2c;background:#171410}
.spf-person.best b{color:#ffd77a}
button.spf-person{cursor:pointer;font:inherit}
button.spf-person:hover{border-color:#5d6a86}
/* the streak line reads as a sentence rather than a statistic */
.spf-streak{font:700 11px var(--mono);color:#8d97ab}
.spf-streak b{color:#ffd77a}
/* the two ways in */
.home-record.spf-link{cursor:pointer;border:1px solid transparent;border-radius:99px;padding:5px 12px;
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.home-record.spf-link:hover,.home-record.spf-link:focus-visible{border-color:#4a5568;background:#0e1420;color:#eef2f8;outline:none}
.home-record.spf-link::after{content:"  ›";opacity:.6}
.friends-me{cursor:pointer}
@media(max-width:620px){.spf-decks{gap:5px}}
@media (prefers-reduced-motion:reduce){.spf-pip{animation:none}}

.av-section{margin-bottom:24px}
.av-current{display:flex;align-items:center;gap:20px;margin:12px 0 16px;padding:18px;border:1px solid #625033;border-radius:12px;background:radial-gradient(ellipse at 5% 0,#b8924226,transparent 65%),linear-gradient(120deg,#171811,#0b111d);box-shadow:inset 0 1px #ead8a115}
.av-portrait{flex:none;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;border:2px solid #c8a55a;background:#111725 center 28%/cover;color:#c8a55a;font:700 25px Georgia,serif;box-shadow:0 0 0 4px #080c13,0 0 0 5px #a98a3c44,0 5px 18px #0007}
.av-kicker{display:block;margin-bottom:6px;color:#c4a763;font:700 8px var(--mono);letter-spacing:.15em;text-transform:uppercase}
.av-current b{display:block;color:#f0eadc;font:700 22px Georgia,serif}
.av-copy{min-width:0}
.av-current p,.av-rule{color:#9ca8bc;font-size:11px;line-height:1.55;margin:7px 0 10px}
.av-reset,.av-more{border:1px solid #48516a;border-radius:6px;padding:8px 12px;background:#111827;color:#c6d1e2;cursor:pointer;font:700 9px var(--mono)}
.av-reset:hover,.av-more:hover{border-color:#c2a266;color:#f0dbb1}
.av-controls{display:flex;gap:8px;margin:16px 0 12px}
.av-controls input,.av-controls select{min-width:0;background:#090f1b;color:#e1e7ef;border:1px solid #3a4256;border-radius:7px;padding:12px;font:600 11px var(--mono)}
.av-controls input{flex:1}
.av-controls :focus-visible,.av-card button:focus-visible,.av-reset:focus-visible,.av-more:focus-visible{outline:2px solid #e4c67f;outline-offset:2px}
.av-results{color:#acb9cd;font:700 10px var(--mono);margin:16px 0 12px}
.av-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.av-grid.av-favourites{grid-template-columns:repeat(5,minmax(0,1fr))}
.av-card{position:relative;min-width:0;padding:18px 9px 10px;border:1px solid #30394d;border-radius:9px;background:linear-gradient(155deg,#182131,#0a101a);display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;box-shadow:0 4px 10px #0003}
.av-card.equipped{border-color:#d8ba72;background:linear-gradient(155deg,#302818,#141610);box-shadow:inset 0 0 22px #c9a35b0d,0 3px 10px #0004}
.av-card .av-portrait{width:70px;height:70px;border-width:1px;margin:3px 0 4px;box-shadow:0 0 0 3px #0c111c,0 0 0 4px #96a5bd22}
.av-card.locked .av-portrait{filter:saturate(.35)}
.av-card b{color:#e4eaf3;font:700 12px Georgia,serif;line-height:1.3;min-height:32px;display:grid;place-items:center;overflow-wrap:anywhere}
.av-card small{color:#94a3ba;font:600 8px var(--mono);line-height:1.5}
.av-card .av-usage{color:#d2bc86}
.av-rank{position:absolute;left:7px;top:6px;color:#8796ab;font:700 8px var(--mono)}
.av-card progress{appearance:none;width:100%;height:4px;accent-color:#d5b46e;border:0;border-radius:2px;overflow:hidden;background:#323b4b}
.av-card progress::-webkit-progress-bar{background:#323b4b}
.av-card progress::-webkit-progress-value{background:linear-gradient(90deg,#a88745,#e2c985)}
.av-card progress::-moz-progress-bar{background:linear-gradient(90deg,#a88745,#e2c985)}
.av-card button{width:100%;margin-top:auto;padding:8px 4px;border:1px solid #817040;border-radius:5px;background:#2b2516;color:#efdb9f;cursor:pointer;font:700 9px var(--mono)}
.av-card button:hover:not(:disabled){background:#43371c;border-color:#e4c67f}
.av-card button:disabled{border-color:#32394a;background:#141923;color:#8490a5;cursor:default}
.av-card.equipped button:disabled{border-color:#a68c4c;background:#2c2516;color:#eed596}
.av-empty{grid-column:1/-1;margin:0;padding:22px;border:1px dashed #3b4559;border-radius:8px;text-align:center;color:#94a3ba;font:11px/1.6 var(--mono)}
.av-more{display:block;margin:14px auto 0}
.av-more[hidden]{display:none}
.road-avatar-hero:not(.renkai-hero){background:radial-gradient(circle at 50% 30%,rgba(4,8,16,.08),rgba(4,8,16,.75) 90%),var(--road-avatar-art) center 28%/cover!important}
.road-avatar-hero :is(.hname,.hsub){text-shadow:0 1px 4px #000,0 0 8px #000}
/* Header resources may shrink, but a hero target must remain a circle. */
.thero{flex-shrink:0;aspect-ratio:1}
@media(max-width:700px){.av-grid,.av-grid.av-favourites{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.av-grid,.av-grid.av-favourites{grid-template-columns:repeat(2,minmax(0,1fr))}.av-current{padding:14px;gap:14px}.av-current>.av-portrait{width:76px;height:76px}.av-current b{font-size:18px}.av-controls{flex-wrap:wrap}.av-controls input{flex-basis:100%}.av-controls select{width:100%}}

.m.wi-hidden-owl{--fac:#c9e6f0;--rar:#c9e6f0;background:radial-gradient(ellipse at 50% 35%,#4a6474,#172633 55%,#080f18);border-color:#a9c6d6;box-shadow:inset 0 0 20px #badbf322}
.wi-owl-mask{position:absolute;inset:12% 8% 35%;display:grid;place-items:center;color:#e6f7ff;font:900 28px Georgia,serif;letter-spacing:9px;clip-path:polygon(0 0,50% 19%,100% 0,89% 69%,50% 100%,11% 69%);background:linear-gradient(125deg,#94aab7aa,#d8e5eb55,#647f91aa)}
.wi-hidden-owl .mx{color:#bed2df}.wi-hidden-owl .mn{color:#e8f2f8}
:root:not([data-card-art="off"]) .m.fullart.wi-red-ice .mart{filter:grayscale(1) sepia(1) saturate(4) hue-rotate(305deg) contrast(1.15)}
:root:not([data-card-art="off"]) .m.fullart.wi-red-ice .mart::after{background:linear-gradient(128deg,transparent 0 25%,#ffffff44 25.5%,transparent 26% 62%,#ffffff33 62.5%,transparent 63%),linear-gradient(180deg,transparent 0 27%,#23040b55 50%,#080205ee 82%,#030205)}
.m.wi-red-ice{box-shadow:inset 0 0 0 2px #c84b6277,0 0 12px #b81b3733}
.wi-ice-label{position:absolute;top:4px;left:6px;right:6px;text-align:center;color:#ffe4e8;text-shadow:0 1px 3px #300;background:#630e26cc;border-radius:3px;font:700 6px var(--mono);letter-spacing:.04em;pointer-events:none}

.af-ribbon{stroke-width:11;opacity:.55;stroke-linecap:round;animation:afRibbon 3s calc(var(--i)*-.19s) ease-in-out infinite alternate}
.af-feather{fill:#beddec15;animation:afWing 2.7s calc(var(--i)*-.07s) ease-in-out infinite alternate;transform-origin:100px 125px}
.af-eyes{stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 5px white)}
.af-blade{fill:#e445662b}.af-crystal{fill:#be1b4944;animation:afCrystal 2s calc(var(--i)*-.13s) ease-in-out infinite alternate;transform-origin:100px 200px}
.af-veil{fill:#f6e6bf13;stroke-dasharray:2 3}.af-bee{fill:#f5d082;stroke-width:1;animation:afGlint 1.8s calc(var(--i)*-.16s) ease-in-out infinite alternate}
.af-seed{animation:afGlint 2.6s calc(var(--i)*-.09s) ease-in-out infinite alternate}.af-clock{transform-origin:100px 100px;animation:afTurn 30s linear infinite reverse}.af-hand{transform-origin:100px 100px;animation:afTurn 12s linear infinite}
.m.af-host>.stat,.m.af-host>.mn,.m.af-host>.mx,.m.af-host>.tr{z-index:35}
.af-aura{position:absolute;inset:-5px;border:1px solid var(--af);border-radius:9px;box-shadow:0 0 12px color-mix(in srgb,var(--af) 35%,transparent);pointer-events:none;z-index:30;overflow:hidden;animation:afBorder 4s ease-in-out infinite alternate}
.af-aura svg{position:absolute;inset:-15%;width:130%;height:130%;color:var(--af);opacity:.85;mask-image:linear-gradient(90deg,#000 0 9%,transparent 18% 82%,#000 91%);filter:drop-shadow(0 0 3px var(--af))}
.af-aura.af-aurora{border-color:#bcbbf7;box-shadow:-5px 0 16px #80f5d54d,5px 0 16px #c6a0ff4d}.af-aura.af-red{border-style:double;border-width:3px;box-shadow:0 0 17px #d51b474d,inset 0 0 9px #bd17302e}
.af-aura.af-child{border-style:dashed}.af-aura.af-knight{border-radius:35% 35% 9px 9px}.af-aura.af-bride{border-color:#e4c986}
@keyframes afRibbon{from{transform:translate(-7px,8px) skewY(-4deg);opacity:.25}to{transform:translate(7px,-8px) skewY(4deg);opacity:.75}}
@keyframes afWing{from{transform:scaleX(.92) rotate(-2deg)}to{transform:scaleX(1.04) rotate(2deg)}}
@keyframes afCrystal{from{transform:scaleY(.75);opacity:.4}to{transform:scaleY(1.05);opacity:1}}
@keyframes afGlint{from{opacity:.35}to{opacity:1}}@keyframes afTurn{to{transform:rotate(360deg)}}
@keyframes afBorder{from{opacity:.55}to{opacity:1}}
/* entrances: bloom and rays behind the card */
.af-entrance .lbe-plate{--c:var(--af)!important}.af-entrance .lbe-band{opacity:.35!important}
.af-bloom,.af-rays,.af-waltz,.af-swarm,.af-dial,.af-spike,.af-seed2,.af-veil-sweep{position:absolute;pointer-events:none}
.af-bloom{width:520px;height:420px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--af) 70%,#fff) 0%,color-mix(in srgb,var(--af) 45%,transparent) 32%,color-mix(in srgb,var(--af) 12%,transparent) 62%,transparent 100%);mix-blend-mode:screen;filter:blur(6px)}
.af-rays{width:640px;height:640px;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--af) 34%,transparent) 0deg 4deg,transparent 4deg 17deg);-webkit-mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.5) 40%,transparent 72%);mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.5) 40%,transparent 72%);mix-blend-mode:screen}
.af-bloom.af-red{background:radial-gradient(closest-side,#ffd0da 0%,rgba(225,30,70,.55) 30%,rgba(120,0,25,.25) 60%,transparent 100%)}
.af-vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 30%,rgba(70,0,14,.55) 70%,rgba(30,0,6,.85) 100%)}
/* the Aurora Dancer */
.af-curtain{position:absolute;pointer-events:none;background:linear-gradient(90deg,transparent 0%,var(--c1) 22%,var(--c2) 52%,var(--c1) 78%,transparent 100%);filter:blur(6px) saturate(1.3);mix-blend-mode:screen;-webkit-mask-image:linear-gradient(180deg,transparent,#000 28%,rgba(0,0,0,.55) 72%,transparent),repeating-linear-gradient(90deg,#000 0 4px,rgba(0,0,0,.3) 4px 10px,#000 10px 13px,rgba(0,0,0,.12) 13px 23px);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent,#000 28%,rgba(0,0,0,.55) 72%,transparent),repeating-linear-gradient(90deg,#000 0 4px,rgba(0,0,0,.3) 4px 10px,#000 10px 13px,rgba(0,0,0,.12) 13px 23px);mask-composite:intersect;transform-origin:50% 0}
.af-waltz{width:190px;height:190px}.af-waltz i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:#fff;box-shadow:0 0 8px 3px var(--c),0 0 26px 10px var(--c),0 0 60px 18px color-mix(in srgb,var(--c) 40%,transparent)}
.af-waltz i:first-child{transform:translateX(95px)}.af-waltz i:last-child{transform:translateX(-95px)}
/* the Snowblind */
.af-owl{position:absolute;left:0;top:0;pointer-events:none;filter:drop-shadow(0 0 10px #e4f6ff) drop-shadow(0 6px 10px #0008)}
.af-owl svg{width:100%;height:100%;overflow:visible;fill:url(#afOwlG)}.af-owl-eyes{stroke:#ffcf6a;stroke-width:2;stroke-linecap:round;fill:none}
.af-owl-wings{transform-origin:60px 32px;animation:afFlap .32s ease-in-out infinite alternate}
@keyframes afFlap{from{transform:scaleY(1)}to{transform:scaleY(-.55)}}
/* the Red Snow */
.af-spike{transform-origin:50% 100%;clip-path:polygon(50% 0,100% 74%,74% 100%,26% 100%,0 74%);background:linear-gradient(90deg,rgba(255,255,255,.0) 0%,rgba(255,235,240,.75) 46%,rgba(255,255,255,0) 54%),linear-gradient(180deg,#fff0f3 0%,#ff6d8b 16%,#c0143f 52%,#4c0218 100%);filter:drop-shadow(0 0 9px #ff2d55)}
/* the Bride of Bees */
.af-honeycomb{position:absolute;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='72' viewBox='0 0 42 72'%3E%3Cg fill='none' stroke='%23ffd56b' stroke-width='1.4' stroke-opacity='.75'%3E%3Cpath d='M21 0l21 12v24L21 48 0 36V12z'/%3E%3Cpath d='M21 48v24M0 36l-21 12M42 36l21 12'/%3E%3C/g%3E%3C/svg%3E");background-size:42px 72px;-webkit-mask-image:radial-gradient(circle 260px at var(--mx) var(--my),#000 0%,rgba(0,0,0,.45) 55%,transparent 100%);mask-image:radial-gradient(circle 260px at var(--mx) var(--my),#000 0%,rgba(0,0,0,.45) 55%,transparent 100%);filter:drop-shadow(0 0 6px #ffb92e)}
.af-veil-sweep{width:260px;height:380px;background:linear-gradient(180deg,transparent,rgba(255,250,235,.38) 40%,rgba(255,250,235,.12) 70%,transparent);filter:blur(5px);border-radius:46% 46% 30% 30%}
.af-swarm{width:0;height:0}
.af-orbit{position:absolute;left:0;top:0;width:0;height:0;animation:afOrbit var(--t) var(--d) linear infinite;animation-direction:var(--dir)}
.af-bee2{position:absolute;left:var(--r);top:0;width:9px;height:6px;margin:-3px -4px;border-radius:50%;background:repeating-linear-gradient(90deg,#ffcf3d 0 2px,#3a2205 2px 3.5px);box-shadow:0 0 6px #ffcf3d}
.af-bee2::before,.af-bee2::after{content:"";position:absolute;top:-4px;width:6px;height:5px;border-radius:50%;background:rgba(255,255,255,.75);animation:afBuzz .05s linear infinite alternate}
.af-bee2::before{left:-1px}.af-bee2::after{right:-1px}
@keyframes afOrbit{to{transform:rotate(360deg)}}@keyframes afBuzz{to{opacity:.25;transform:scaleY(.4)}}
/* the Dandelion Knight */
.af-seed2{width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#fffbe8 0 14%,transparent 16%),repeating-conic-gradient(rgba(255,255,255,.95) 0 3deg,transparent 3deg 18deg);-webkit-mask-image:radial-gradient(circle,#000 55%,transparent 72%);mask-image:radial-gradient(circle,#000 55%,transparent 72%);filter:drop-shadow(0 0 4px #fff6c8)}
.af-seed2::after{content:"";position:absolute;left:50%;top:50%;width:1px;height:calc(var(--s) * 1.1);background:linear-gradient(#fffbe8,transparent);transform-origin:top}
/* the Tomorrow Child */
.af-dial{width:300px;height:300px;border-radius:50%;border:2px solid rgba(214,222,255,.7);box-shadow:0 0 22px rgba(180,195,255,.55),inset 0 0 30px rgba(180,195,255,.35)}
.af-dial::before{content:"";position:absolute;inset:16px;border-radius:50%;border:1px solid rgba(236,220,160,.6)}
.af-dial-ticks{position:absolute;inset:4px;border-radius:50%;background:repeating-conic-gradient(rgba(236,240,255,.95) 0 1.2deg,transparent 1.2deg 30deg);-webkit-mask-image:radial-gradient(circle,transparent 80%,#000 81%);mask-image:radial-gradient(circle,transparent 80%,#000 81%)}
.af-dhand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:3px;background:linear-gradient(#fff6d6,#c9bbff);box-shadow:0 0 10px #c9bbff}
.af-dhand-long{width:3px;height:118px}.af-dhand-short{width:5px;height:74px}
/* The Red Snow feeds */
.af-consume{position:fixed;inset:0;z-index:100030;pointer-events:none;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse 420px 460px at 50% 45%,rgba(40,0,10,.92),rgba(20,0,6,.78) 62%,transparent);color:#fff0e9;animation:afDim .18s ease-out}
.af-consume-title{position:absolute;top:11%;left:5%;right:5%;text-align:center;font:800 clamp(12px,1.1vw,17px) var(--mono);letter-spacing:.3em;color:#ff7d96;text-shadow:0 0 10px #ff1f4f,0 2px 6px #000}
.af-meal{position:absolute;left:50%;top:44%;width:270px;height:380px;transform:translate(-50%,-50%)}
.af-half{position:absolute;inset:0;display:grid;place-items:center;transform-origin:50% 44%;filter:drop-shadow(0 14px 20px #000b)}
.af-half>.card{position:absolute!important;left:50%!important;top:50%!important;margin:0!important;transform:translate(-50%,-50%) scale(var(--meal-scale,1.4))!important;pointer-events:none!important;transition:none!important;animation:none!important}
.af-frost{position:absolute;inset:0;border-radius:12px;opacity:.85;background:repeating-conic-gradient(from 18deg at 50% 44%,rgba(255,177,193,.18) 0 12deg,rgba(115,14,54,.4) 13deg 28deg,transparent 29deg 47deg),linear-gradient(145deg,rgba(139,22,48,.25),transparent 33%,rgba(230,73,115,.55) 74%,rgba(101,13,48,.8));box-shadow:inset 0 0 40px #bc174d}
.af-cut{position:absolute;left:50%;top:44%;width:150%;height:6px;margin-left:-75%;transform:rotate(var(--a)) scaleX(0);background:linear-gradient(90deg,transparent,#fff 18%,#fff4f3 82%,transparent);box-shadow:0 0 14px #fff,0 0 34px #ff2d5a,0 0 70px #c4002f;opacity:0}
.af-consume-name{position:absolute;top:73%;left:5%;right:5%;text-align:center;font:600 clamp(21px,2.3vw,34px) var(--serif);text-shadow:0 2px 8px #000,0 0 18px #c4002f}
.af-consume-gain{position:absolute;top:80%;left:10%;right:10%;text-align:center;font:900 clamp(13px,1.3vw,19px) var(--mono);letter-spacing:.12em;color:#ffd0da;text-shadow:0 0 12px #ff1f4f;line-height:1.7;opacity:0}
.af-consume:not([data-phase="reveal"]) .af-cut{animation:afCut .2s var(--d) cubic-bezier(.2,.9,.3,1) forwards}
.af-consume[data-phase="shatter"] .af-whole,.af-consume[data-phase="transfer"] .af-whole{visibility:hidden}
.af-consume[data-phase="shatter"] .af-consume-gain,.af-consume[data-phase="transfer"] .af-consume-gain{animation:afGain .25s cubic-bezier(.2,1.4,.4,1) forwards}
.af-consume[data-phase="transfer"]{animation:afExit .4s .1s ease-in forwards}
@keyframes afDim{from{opacity:0}to{opacity:1}}
@keyframes afCut{0%{transform:rotate(var(--a)) scaleX(0);opacity:1}60%{transform:rotate(var(--a)) scaleX(1);opacity:1}100%{transform:rotate(var(--a)) scaleX(1.05);opacity:0}}
@keyframes afGain{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:scale(1)}}
@keyframes afExit{to{opacity:0}}
.af-reduced .af-half,.af-reduced .af-frost,.af-reduced .af-cut,.af-reduced .af-meal{animation:none!important;transition:none!important}.af-reduced .af-cut{display:none}
@media(prefers-reduced-motion:reduce){.af-aura,.af-aura *,.af-orbit,.af-bee2::before,.af-bee2::after,.af-owl-wings{animation:none!important}.af-aura{opacity:.7}.af-consume{animation:none!important}}
@media(max-height:700px){.af-meal{width:210px;height:290px}.af-consume-title{top:6%}.af-consume-name{top:76%}.af-consume-gain{top:84%}}

.sf-entrance .lbe-plate{--c:var(--sf)!important}.sf-entrance .lbe-band{opacity:.35!important}
.sf-bloom,.sf-rays,.sf-breath,.sf-oracle-ring,.sf-eye,.sf-lantern,.sf-scales,.sf-wing,.sf-lock,.sf-heartbeat,.sf-roar,.sf-plate,.sf-dust,.sf-streak,.sf-blindfold{position:absolute;pointer-events:none}
.sf-bloom{width:520px;height:420px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--sf) 72%,#fff) 0%,color-mix(in srgb,var(--sf) 42%,transparent) 32%,color-mix(in srgb,var(--sf) 10%,transparent) 62%,transparent 100%);mix-blend-mode:screen;filter:blur(6px)}
.sf-rays{width:640px;height:640px;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--sf) 32%,transparent) 0deg 4deg,transparent 4deg 17deg);-webkit-mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.5) 40%,transparent 72%);mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.5) 40%,transparent 72%);mix-blend-mode:screen}
.sf-breath{width:260px;height:260px;border-radius:50%;border:2px solid color-mix(in srgb,var(--sf) 85%,#fff);box-shadow:0 0 18px var(--sf),inset 0 0 18px color-mix(in srgb,var(--sf) 50%,transparent)}
.sf-vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 30%,rgba(10,8,4,.55) 70%,rgba(4,3,2,.85) 100%)}
.sf-vignette.sf-black{background:radial-gradient(ellipse at 50% 55%,transparent 28%,rgba(2,3,8,.6) 68%,rgba(0,0,2,.9) 100%)}
.sf-vignette.sf-bronze{background:radial-gradient(ellipse at 50% 55%,transparent 30%,rgba(40,20,4,.55) 70%,rgba(18,8,0,.88) 100%)}
/* Ephemones */
.sf-oracle-ring{border-radius:50%;border:2px solid #e9fff9;box-shadow:0 0 16px #8fe8d8,inset 0 0 16px #8fe8d8;background:repeating-conic-gradient(rgba(240,255,250,.9) 0 .8deg,transparent .8deg 10deg);-webkit-mask-image:radial-gradient(closest-side,transparent 88%,#000 89%);mask-image:radial-gradient(closest-side,transparent 88%,#000 89%)}
.sf-eye{width:120px;height:46px;border-radius:50%;background:radial-gradient(circle,#ffffff 0 10%,#bff5ea 14%,rgba(110,220,200,.5) 34%,transparent 62%);box-shadow:0 0 30px #cff7ef;mix-blend-mode:screen;margin-top:-150px}
/* Navari */
.sf-lantern{width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(230,255,250,.75) 0%,rgba(140,230,212,.4) 35%,transparent 70%);mix-blend-mode:screen}
/* Ephraim */
.sf-blindfold{left:0;top:0;background:linear-gradient(180deg,transparent,rgba(12,8,4,.9) 25%,rgba(30,20,8,.95) 50%,rgba(12,8,4,.9) 75%,transparent);box-shadow:0 0 40px rgba(0,0,0,.8)}
.sf-scales{width:320px;height:267px;filter:drop-shadow(0 0 14px #e9c77a) drop-shadow(0 8px 14px #000a)}.sf-scales svg{width:100%;height:100%}
.sf-scales .sf-beam{transform-origin:120px 44px;animation:sfTilt 1.4s ease-in-out infinite alternate}
@keyframes sfTilt{from{transform:rotate(-6deg)}to{transform:rotate(5deg)}}
/* Ophanel */
.sf-wing{width:330px;height:242px;transform-origin:22px 220px;mix-blend-mode:normal;z-index:2;filter:drop-shadow(0 0 10px #8794b0) drop-shadow(0 10px 18px #000)}.sf-wing svg{width:100%;height:100%;overflow:visible}
/* the Runner */
.sf-streak{height:2px;background:linear-gradient(90deg,transparent,#fff4dc 70%,#ffffff);box-shadow:0 0 8px #f2dcae;border-radius:2px}
/* Ma'hiki */
.sf-dust{width:4px;height:4px;border-radius:50%;background:#f3c88e;box-shadow:0 0 6px #d39a5a}
.sf-lock{width:250px;height:250px;border-radius:50%;background:repeating-conic-gradient(#e6b26d 0 22deg,#5b3410 22deg 30deg);-webkit-mask-image:radial-gradient(closest-side,transparent 70%,#000 71% 92%,transparent 93%);mask-image:radial-gradient(closest-side,transparent 70%,#000 71% 92%,transparent 93%);filter:drop-shadow(0 0 10px #d39a5a)}
.sf-heartbeat{width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,transparent 40%,rgba(200,40,30,.55) 60%,transparent 72%)}
/* Howl Within Bronze */
.sf-roar{width:90px;height:3px;transform-origin:0 50%;background:linear-gradient(90deg,transparent,#ffd28a,#fff1d0);box-shadow:0 0 8px #e0a050;border-radius:2px}
/* Pareyne */
.sf-plate{width:20px;height:24px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(135deg,#ffffff,#c9d2ea 45%,#7f8aa8);filter:drop-shadow(0 0 6px #eef3ff)}
@media(prefers-reduced-motion:reduce){.sf-scales .sf-beam{animation:none}}

.rb-entrance .lbe-plate{--c:var(--rb)!important}.rb-entrance .lbe-band{opacity:.35!important}
.rb-bloom,.rb-rays,.rb-scarf,.rb-ghost,.rb-rune,.rb-anchor,.rb-claw,.rb-wisp,.rb-spawn,.rb-blade,.rb-basin,.rb-sunrise,.rb-curtain,.rb-spot,.rb-sweet,.rb-steam,.rb-sun,.rb-longray{position:absolute;pointer-events:none}
.rb-bloom{width:520px;height:420px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--rb) 72%,#fff) 0%,color-mix(in srgb,var(--rb) 42%,transparent) 32%,color-mix(in srgb,var(--rb) 10%,transparent) 62%,transparent 100%);mix-blend-mode:screen;filter:blur(6px)}
.rb-rays{width:640px;height:640px;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rb) 32%,transparent) 0deg 4deg,transparent 4deg 17deg);-webkit-mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.5) 40%,transparent 72%);mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.5) 40%,transparent 72%);mix-blend-mode:screen}
.rb-vignette{position:fixed;inset:0;pointer-events:none}
.rb-hush{background:radial-gradient(ellipse at 50% 55%,transparent 30%,rgba(20,18,22,.5) 70%,rgba(6,5,8,.85) 100%);backdrop-filter:saturate(.55)}
.rb-forge{background:radial-gradient(ellipse at 50% 60%,transparent 30%,rgba(50,14,2,.5) 70%,rgba(18,4,0,.85) 100%)}
.rb-golden{background:radial-gradient(ellipse at 50% 45%,rgba(255,200,90,.12) 0%,transparent 45%,rgba(60,30,0,.45) 85%)}
/* Lyra */
.rb-scarf{overflow:visible}.rb-scarf svg{overflow:visible}
.rb-scarf-path{fill:none;stroke:url(#rbScarf);stroke-width:11;stroke-linecap:round;filter:drop-shadow(0 6px 6px #000b);stroke-dasharray:1;stroke-dashoffset:1;animation:rbDraw 1.1s ease-out forwards,rbFlutter 1.3s ease-in-out infinite alternate}
.rb-scarf-hi{fill:none;stroke:rgba(255,220,226,.75);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:rbDraw 1.1s ease-out forwards,rbFlutter 1.3s ease-in-out infinite alternate}
@keyframes rbDraw{to{stroke-dashoffset:0}}@keyframes rbFlutter{from{transform:translateY(-6px) skewX(-3deg)}to{transform:translateY(6px) skewX(3deg)}}
.rb-ghost{width:70px;height:96px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(235,232,228,.55) 60%,rgba(235,232,228,0));box-shadow:0 0 22px rgba(255,255,255,.55);filter:blur(1.5px)}
/* Minh */
.rb-rune{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#fff 0 20%,var(--c) 45%,transparent 72%);box-shadow:0 0 14px 4px var(--c)}
.rb-anchor{filter:drop-shadow(0 0 12px #65efe9) drop-shadow(0 10px 16px #000a)}
/* Nev */
.rb-claw{width:10px;height:190px;border-radius:50%;background:linear-gradient(180deg,transparent,#e9ffe9 30%,#7dff9a 60%,transparent);box-shadow:0 0 14px #5fe07c,0 0 32px #2fa04a}
.rb-wisp{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#effff0,#7dff9a 45%,transparent 70%);box-shadow:0 0 12px #5fe07c}
.rb-spawn{width:120px;height:160px;border-radius:12px;background:radial-gradient(ellipse,rgba(200,255,210,.9),rgba(95,224,124,.5) 45%,transparent 72%);mix-blend-mode:screen}
/* Morvayne */
.rb-blade{transform-origin:50% 100%;filter:drop-shadow(0 0 10px var(--c)) drop-shadow(0 6px 10px #000a)}
/* Azaryne */
.rb-basin{width:260px;height:70px;border-radius:0 0 50% 50%/0 0 100% 100%;background:linear-gradient(180deg,#ffd47a 0 6%,#b3122e 7%,#5a0614 60%,#2a0208);box-shadow:0 0 30px rgba(255,90,90,.6),inset 0 6px 14px rgba(255,210,120,.5)}
.rb-sunrise{width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#fff6d6 0%,#ffd47a 35%,rgba(255,110,80,.6) 60%,transparent 72%);box-shadow:0 0 60px 20px rgba(255,170,90,.45);mix-blend-mode:screen}
/* Nightingale */
.rb-curtain{transform-origin:0 0;background:repeating-linear-gradient(90deg,#0c1840 0 14px,#1d2f6b 22px,#0c1840 34px),linear-gradient(180deg,#1d2f6b,#081030);box-shadow:inset 0 -30px 40px rgba(0,0,0,.6);border-bottom:6px solid #c9a35a}
.rb-spot{width:340px;height:640px;transform:translate(-50%,-78%);background:linear-gradient(180deg,rgba(220,235,255,0),rgba(220,235,255,.35) 60%,rgba(220,235,255,.55));clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);mix-blend-mode:screen;filter:blur(4px)}
/* Marziphane */
.rb-sweet{width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--c) 32%,color-mix(in srgb,var(--c) 60%,#5a2a1a) 100%);box-shadow:0 3px 6px #0007,0 0 10px color-mix(in srgb,var(--c) 70%,transparent)}
.rb-steam{width:22px;height:60px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,250,240,.5),transparent 70%);filter:blur(4px)}
/* the Keeper */
.rb-sun{width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,#fffbe8 0%,#ffe27a 30%,#ffb020 52%,rgba(255,140,30,.35) 66%,transparent 74%);box-shadow:0 0 90px 30px rgba(255,190,60,.45);mix-blend-mode:screen}
.rb-longray{height:3px;transform-origin:0 50%;background:linear-gradient(90deg,transparent,rgba(255,226,140,.9) 30%,rgba(255,246,210,.9) 60%,transparent);box-shadow:0 0 12px #ffd35c;filter:blur(.5px)}
/* Aurekazel */
.rb-abyss{background:radial-gradient(ellipse at 50% 50%,rgba(20,6,2,.35) 0%,rgba(8,2,0,.82) 60%,rgba(0,0,0,.94) 100%)}
.rb-storm,.rb-dragon,.rb-blessing{position:absolute;pointer-events:none}
.rb-storm{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#fff 0 25%,var(--c) 50%,transparent 72%);box-shadow:0 0 14px 4px var(--c),0 0 30px 8px color-mix(in srgb,var(--c) 40%,transparent)}
.rb-dragon{width:min(1000px,92vw);aspect-ratio:900/520;filter:drop-shadow(0 0 10px #ff8a3c) drop-shadow(0 0 30px rgba(255,120,40,.45))}
.rb-dragon svg{width:100%;height:100%;overflow:visible}
.rb-dragon-bone path{fill:none;stroke:#fff1dc;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.rb-dragon-bone path:last-child{fill:rgba(40,16,8,.65)}
.rb-dragon-membrane path{fill:url(#rbMembrane);stroke:none;opacity:0;animation:rbMembrane 1.2s .5s ease-out forwards}
.rb-dragon-eye{fill:#ffefc2;opacity:0;filter:drop-shadow(0 0 8px #ff6a2a) drop-shadow(0 0 16px #ff3a00);animation:rbEye .3s 1.3s ease-out forwards}
@keyframes rbMembrane{to{opacity:1}}@keyframes rbEye{to{opacity:1}}
.rb-thrown{transform-origin:50% 50%}
.rb-blessing{padding:3px 10px;border-radius:9px;border:1px solid var(--c);background:rgba(16,8,4,.92);color:#fff6e6;font:900 13px var(--mono,monospace);letter-spacing:.12em;white-space:nowrap;text-shadow:0 0 8px var(--c);box-shadow:0 0 14px color-mix(in srgb,var(--c) 70%,transparent)}
@media(prefers-reduced-motion:reduce){.rb-scarf-path{animation:none;stroke-dashoffset:0}.rb-dragon-bone path{stroke-dasharray:none}.rb-dragon-membrane path,.rb-dragon-eye{animation:none;opacity:1}}

.bf-fx{position:fixed;inset:0;pointer-events:none;z-index:100008}
.bf-ice,.bf-spike,.bf-shard,.bf-burstflash,.bf-drip,.bf-hail,.bf-hush-sigil{position:absolute;pointer-events:none}
.bf-ice{border-radius:9px;background:linear-gradient(0deg,rgba(110,0,24,.9) 0%,rgba(214,32,66,.7) 38%,rgba(255,170,190,.55) 72%,rgba(255,240,244,.75) 100%),repeating-linear-gradient(115deg,rgba(255,255,255,.18) 0 2px,transparent 2px 14px);box-shadow:0 0 22px #ff2d55,inset 0 0 26px rgba(255,220,230,.65);mix-blend-mode:screen}
.bf-spike{transform-origin:50% 100%;clip-path:polygon(50% 0,100% 74%,74% 100%,26% 100%,0 74%);background:linear-gradient(90deg,transparent 0%,rgba(255,235,240,.8) 46%,transparent 54%),linear-gradient(180deg,#fff0f3 0%,#ff6d8b 16%,#c0143f 52%,#4c0218 100%);filter:drop-shadow(0 0 8px #ff2d55)}
.bf-shard{clip-path:polygon(50% 0,100% 58%,62% 100%,0 72%);background:linear-gradient(135deg,#fff3f5,#ff6d8b 34%,#b0123a 70%,#3c0214);filter:drop-shadow(0 0 7px #ff2d55)}
.bf-burstflash{width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(255,160,180,.85) 22%,rgba(220,20,60,.45) 48%,transparent 70%);mix-blend-mode:screen}
.bf-drip{width:5px;height:14px;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;background:linear-gradient(180deg,#fff4e6,#ffb36b);box-shadow:0 0 6px #ffb36b}
.bf-hail{width:3px;height:22px;border-radius:2px;background:linear-gradient(180deg,transparent,#ffd0da 40%,#ff3b5c);box-shadow:0 0 6px #ff2d55}
.bf-hush-veil{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(40,0,10,.2) 0%,rgba(30,0,8,.62) 62%,rgba(10,0,2,.88) 100%);backdrop-filter:saturate(.3) brightness(.85)}
.bf-hush-sigil{width:640px;height:640px;border-radius:50%;border:3px solid rgba(255,90,120,.85);box-shadow:0 0 30px #ff2d55,inset 0 0 40px rgba(255,60,90,.5);background:repeating-conic-gradient(rgba(255,200,210,.75) 0 1deg,transparent 1deg 15deg);-webkit-mask-image:radial-gradient(closest-side,transparent 82%,#000 83% 90%,transparent 91%,transparent 94%,#000 95%);mask-image:radial-gradient(closest-side,transparent 82%,#000 83% 90%,transparent 91%,transparent 94%,#000 95%)}
.bf-hush-mark{position:absolute;right:-6px;top:22%;z-index:34;width:22px;height:26px;display:grid;place-items:center;padding-top:5px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;clip-path:polygon(50% 0,92% 48%,100% 70%,82% 94%,50% 100%,18% 94%,0 70%,8% 48%);background:radial-gradient(circle at 40% 60%,#ff6d8b,#b0123a 55%,#4c0218);color:#fff0f3;font:900 10px var(--mono,monospace);text-shadow:0 1px 2px #000;filter:drop-shadow(0 0 5px #ff2d55);animation:bfPulse 1.4s ease-in-out infinite;pointer-events:auto}
.bf-field-count{position:absolute;right:4px;top:4px;z-index:6;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:9px;background:radial-gradient(circle at 40% 35%,#ff6d8b,#8d0b2b);color:#fff0f3;font:900 11px var(--mono,monospace);box-shadow:0 0 8px #ff2d55;pointer-events:none}
@keyframes bfPulse{0%,100%{filter:drop-shadow(0 0 3px #ff2d55)}50%{filter:drop-shadow(0 0 10px #ff2d55) brightness(1.25)}}
@media(prefers-reduced-motion:reduce){.bf-hush-mark{animation:none}}

.am-fx{position:fixed;pointer-events:none;z-index:100009}
.am-soil{width:7px;height:7px;border-radius:50%;background:#5a3a1c;box-shadow:0 0 4px #000}
.am-sprout{width:16px;height:46px;transform-origin:50% 100%;background:linear-gradient(0deg,#4a7a2a,#9fd06a);clip-path:polygon(45% 100%,55% 100%,55% 40%,100% 10%,60% 35%,55% 0,45% 0,40% 35%,0 10%,45% 40%);filter:drop-shadow(0 0 6px #b8f07a)}
.am-bloomring{width:140px;height:140px;border-radius:50%;border:3px solid var(--c);box-shadow:0 0 16px var(--c)}
.am-petal{width:10px;height:7px;border-radius:70% 0 70% 0;background:var(--c);box-shadow:0 0 6px var(--c)}
.am-moonring{width:170px;height:170px;border-radius:50%;border:2px solid #f2e2b0;box-shadow:0 0 18px #f2e2b0,inset 0 0 14px #c9a35a}
.am-lantern{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,230,160,.85) 0%,rgba(255,170,70,.45) 35%,transparent 70%);mix-blend-mode:screen}
.am-night{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 35%,rgba(40,30,20,.2),rgba(10,8,6,.7) 70%,rgba(4,3,2,.9) 100%)}
.am-crescent{width:300px;height:300px;border-radius:50%;box-shadow:inset -38px 18px 0 0 #f4ead0,0 0 40px rgba(242,226,176,.35);filter:drop-shadow(0 0 18px #f2e2b0)}
.am-charm{width:2px;height:120px;transform-origin:50% 0;background:linear-gradient(180deg,#c9a35a,#f2e2b0 70%,transparent);box-shadow:0 0 6px #c9a35a}
.am-charm::after{content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:14px;transform:translateX(-50%);border-radius:50%;box-shadow:inset -4px 2px 0 0 #f2e2b0}
.am-harvestmoon{width:340px;height:340px;border-radius:50%;background:radial-gradient(circle at 42% 40%,#fff3cf 0%,#f2c879 35%,#c4581c 70%,rgba(122,46,16,0) 72%);box-shadow:0 0 80px 20px rgba(232,160,64,.4);mix-blend-mode:screen}
.am-seed-count{position:absolute;right:4px;top:4px;z-index:34;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:9px;background:radial-gradient(circle at 40% 35%,#b8e07a,#4a6a1c);color:#fbffef;font:900 10px var(--mono,monospace);box-shadow:0 0 8px #9fd06a;pointer-events:none}

.sa-fx{position:fixed;pointer-events:none;z-index:100009}
.sa-dirt{width:6px;height:6px;border-radius:50%;background:#6a4a24}
.sa-wave{width:160px;height:160px;border-radius:50%;border:3px solid rgba(242,201,76,.85);box-shadow:0 0 14px rgba(242,201,76,.6)}
.sa-wave.sa-hit{width:120px;height:120px;border-color:rgba(255,235,170,.9)}
.sa-sun{width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,#fff8dc 0%,#f2c94c 40%,rgba(242,160,40,.4) 62%,transparent 72%);mix-blend-mode:screen}
.sa-bug{width:12px;height:8px;border-radius:50% 50% 40% 40%;background:linear-gradient(90deg,#2a2010,#6a5428);box-shadow:-6px -3px 0 -2px rgba(255,240,200,.6),6px -3px 0 -2px rgba(255,240,200,.6)}
.sa-prism{width:120px;height:120px;background:conic-gradient(from 0deg,#a8e6ff,#d8b4ff,#ffd8f0,#b8ffd8,#a8e6ff);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);mix-blend-mode:screen;opacity:.8}
.sa-shard{width:12px;height:20px;clip-path:polygon(50% 0,100% 60%,50% 100%,0 60%);background:linear-gradient(135deg,#ffffff,#a8e6ff 50%,#d8b4ff)}
.sa-wing{width:150px;height:34px;border-radius:50%;transform-origin:0 50%;background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(168,230,255,.45) 40%,rgba(216,180,255,.3) 75%,transparent);box-shadow:0 0 12px rgba(168,230,255,.6);mix-blend-mode:screen}
.sa-wing.sa-big{width:300px;height:60px}

.spx-canvas{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:100006}

.summon-arrive{will-change:transform,opacity;animation:smDrop .62s cubic-bezier(.2,.9,.25,1) both}
.summon-arrive.summon-lex{animation:smInk .86s cubic-bezier(.45,.1,.35,1) both}
.summon-arrive.summon-leg{animation:smMarch .7s cubic-bezier(.3,.8,.3,1) both}
.summon-arrive.summon-nys{animation:smGlitch .62s linear both}
.summon-arrive.summon-nur{animation:smCoin .74s cubic-bezier(.25,.8,.3,1) both}
.summon-arrive.summon-veh{animation:smRise .78s cubic-bezier(.2,.8,.3,1) both}
.summon-arrive.summon-adm{animation:smTide .8s cubic-bezier(.3,.7,.3,1) both}
.summon-arrive.summon-sen{animation:smSwoop .7s cubic-bezier(.2,.8,.25,1) both}
.summon-arrive.summon-sang{animation:smWell .8s cubic-bezier(.35,.6,.3,1) both}
.summon-arrive.summon-iron{animation:smForge .74s cubic-bezier(.2,.9,.3,1) both}
.summon-arrive.summon-vir{animation:smSprout .76s cubic-bezier(.25,.9,.3,1.1) both;transform-origin:50% 100%}
.summon-arrive.summon-sil{animation:smFloat .9s cubic-bezier(.2,.7,.3,1) both}
.summon-arrive.summon-frost{animation:smFreeze .66s cubic-bezier(.3,.7,.3,1) both}
.summon-arrive.summon-khaz{animation:smCharge .62s cubic-bezier(.2,.9,.3,1) both}
.summon-arrive.summon-mf{animation:smMoon .86s cubic-bezier(.3,.7,.3,1) both}
.summon-arrive.summon-vak{animation:smSlam .6s cubic-bezier(.2,.9,.3,1) both}
.summon-arrive.summon-ael{animation:smSwing .86s cubic-bezier(.3,.7,.3,1) both;transform-origin:50% -40%}
.summon-arrive.summon-ash{animation:smEmber .8s cubic-bezier(.3,.7,.3,1) both}
.summon-arrive.summon-desc{animation:smRift .7s cubic-bezier(.3,.8,.3,1) both}
.summon-arrive.summon-jal{animation:smSand .74s cubic-bezier(.3,.7,.3,1) both}
.summon-arrive.summon-run{animation:smRune .78s cubic-bezier(.25,.8,.3,1) both}
.summon-arrive.summon-dwarf{animation:smStone .66s cubic-bezier(.2,.9,.3,1) both}
.summon-arrive.summon-blade{animation:smSlash .56s cubic-bezier(.3,.8,.3,1) both}
.summon-arrive.summon-neu{animation:smDrop .62s cubic-bezier(.2,.9,.25,1) both}
.summon-arrive.summon-wld{animation:smSprout .76s cubic-bezier(.25,.9,.3,1.1) both;transform-origin:50% 100%}
.summon-arrive.summon-wld-spring{animation:smSprout .76s cubic-bezier(.25,.9,.3,1.1) both;transform-origin:50% 100%}
.summon-arrive.summon-wld-summer{animation:smRise .78s cubic-bezier(.2,.8,.3,1) both}
.summon-arrive.summon-wld-autumn{animation:smSwing .86s cubic-bezier(.3,.7,.3,1) both;transform-origin:50% -40%}
.summon-arrive.summon-wld-winter{animation:smFreeze .66s cubic-bezier(.3,.7,.3,1) both}
.summon-arrive.summon-bloodfrost{animation:smBloodIce .86s cubic-bezier(.3,.7,.3,1) both}
@keyframes smDrop{0%{opacity:0;transform:translateY(-46px) scale(1.14)}38%{opacity:1;transform:translateY(5px) scale(.96)}56%{transform:translateY(-3px) scale(1.02)}74%{transform:translateY(1px) scale(.995)}100%{opacity:1;transform:none}}
@keyframes smInk{0%{opacity:.3;clip-path:inset(-40% -40% 100% -40%);transform:translateY(-4px)}70%{opacity:1;clip-path:inset(-40% -40% -40% -40%);transform:none}100%{opacity:1;clip-path:inset(-40% -40% -40% -40%);transform:none}}
@keyframes smMarch{0%{opacity:0;transform:translateY(36px) scale(.94)}28%{opacity:1;transform:translateY(18px) scale(.97)}38%{transform:translateY(20px) scale(.98,.96)}56%{transform:translateY(-5px) scale(1.01)}68%{transform:translateY(-3px) scale(1.02,.97)}84%{transform:translateY(1px)}100%{opacity:1;transform:none}}
@keyframes smGlitch{0%{opacity:0;transform:translateX(-10px) skewX(14deg);clip-path:inset(-40% -40% 60% -40%)}12%{opacity:1;transform:translateX(7px) skewX(-8deg);clip-path:inset(30% -40% -40% -40%)}22%{opacity:.5;transform:translateX(-5px);clip-path:inset(-40% -40% 35% -40%)}32%{opacity:1;transform:translateX(4px) skewX(5deg);clip-path:inset(-40% -40% -40% -40%)}44%{opacity:.35;transform:translateX(-2px)}52%{opacity:1;transform:translateX(2px) skewX(-2deg)}66%{transform:translateX(-1px)}100%{opacity:1;transform:none;clip-path:inset(-40% -40% -40% -40%)}}
@keyframes smCoin{0%{opacity:0;transform:perspective(700px) rotateY(90deg) scale(.9)}45%{opacity:1;transform:perspective(700px) rotateY(-24deg) scale(1.02)}70%{transform:perspective(700px) rotateY(9deg)}86%{transform:perspective(700px) rotateY(-3deg)}100%{opacity:1;transform:none}}
@keyframes smRise{0%{opacity:0;transform:translateY(24px) scale(.82)}55%{opacity:1;transform:translateY(-7px) scale(1.04)}78%{transform:translateY(1px) scale(.995)}100%{opacity:1;transform:none}}
@keyframes smTide{0%{opacity:0;transform:translateY(30px) rotate(-4deg);clip-path:inset(100% -40% -40% -40%)}45%{opacity:1;transform:translateY(-6px) rotate(3deg);clip-path:inset(-40% -40% -40% -40%)}66%{transform:translateY(2px) rotate(-1.6deg)}84%{transform:rotate(.6deg)}100%{opacity:1;transform:none;clip-path:inset(-40% -40% -40% -40%)}}
@keyframes smSwoop{0%{opacity:0;transform:translate(-72px,-62px) rotate(-16deg) scale(.85)}50%{opacity:1;transform:translate(8px,4px) rotate(4deg) scale(1.02)}74%{transform:translate(-2px,-1px) rotate(-1deg)}100%{opacity:1;transform:none}}
@keyframes smWell{0%{opacity:0;transform:translateY(20px);clip-path:inset(100% -40% -40% -40%)}62%{opacity:1;transform:translateY(-3px);clip-path:inset(-40% -40% -40% -40%)}100%{opacity:1;transform:none;clip-path:inset(-40% -40% -40% -40%)}}
@keyframes smForge{0%{opacity:0;transform:translateY(-64px) scale(1.1)}20%{opacity:1;transform:translateY(4px) scale(1.05,.93)}32%{transform:translateY(0) scale(.99,1.01)}44%{transform:scale(1.03,.97)}54%{transform:scale(1)}66%{transform:scale(1.025,.98)}78%{transform:scale(1)}100%{opacity:1;transform:none}}
@keyframes smSprout{0%{opacity:0;transform:scale(.25,0)}50%{opacity:1;transform:scale(.95,1.1)}70%{transform:scale(1.03,.96)}86%{transform:scale(.995,1.01)}100%{opacity:1;transform:none}}
@keyframes smFloat{0%{opacity:0;transform:translateY(-58px) scale(.96)}62%{opacity:1;transform:translateY(4px)}82%{transform:translateY(-2px) rotate(.6deg)}100%{opacity:1;transform:none}}
@keyframes smFreeze{0%{opacity:0;transform:scale(1.12);clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}60%{opacity:1;transform:scale(.98);clip-path:polygon(50% -70%,170% 50%,50% 170%,-70% 50%)}78%{transform:scale(1.01)}100%{opacity:1;transform:none;clip-path:polygon(50% -70%,170% 50%,50% 170%,-70% 50%)}}
@keyframes smCharge{0%{opacity:0;transform:translateX(-92px) skewX(14deg)}45%{opacity:1;transform:translateX(9px) skewX(-4deg)}66%{transform:translateX(-3px) skewX(1deg)}100%{opacity:1;transform:none}}
@keyframes smMoon{0%{opacity:0;transform:translateY(-18px) rotate(-5deg) scale(.95)}62%{opacity:1;transform:translateY(2px) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes smSlam{0%{opacity:0;transform:scale(1.32)}34%{opacity:1;transform:scale(.93)}50%{transform:scale(1.03)}66%{transform:scale(.99)}100%{opacity:1;transform:none}}
@keyframes smSwing{0%{opacity:0;transform:rotate(18deg) translateY(-30px)}40%{opacity:1;transform:rotate(-8deg)}60%{transform:rotate(4deg)}78%{transform:rotate(-1.5deg)}100%{opacity:1;transform:none}}
@keyframes smEmber{0%{opacity:0;transform:translateY(16px) scale(.94);filter:brightness(.15) saturate(.3)}55%{opacity:1;transform:translateY(-3px);filter:brightness(1.3) saturate(1.2)}100%{opacity:1;transform:none;filter:none}}
@keyframes smRift{0%{opacity:0;transform:scaleX(0)}45%{opacity:1;transform:scaleX(1.08) scaleY(.98)}66%{transform:scaleX(.97)}100%{opacity:1;transform:none}}
@keyframes smSand{0%{opacity:.2;transform:rotate(-6deg) scale(.96);clip-path:circle(0% at 50% 60%)}70%{opacity:1;transform:none;clip-path:circle(120% at 50% 50%)}100%{opacity:1;transform:none;clip-path:circle(120% at 50% 50%)}}
@keyframes smRune{0%{opacity:0;transform:perspective(700px) rotateY(160deg) scale(.85)}55%{opacity:1;transform:perspective(700px) rotateY(-12deg)}78%{transform:perspective(700px) rotateY(4deg)}100%{opacity:1;transform:none}}
@keyframes smStone{0%{opacity:0;transform:translateY(-84px)}28%{opacity:1;transform:translateY(6px) scale(1.06,.92)}44%{transform:translateY(-6px) scale(.98,1.02)}60%{transform:translateY(0) scale(1)}100%{opacity:1;transform:none}}
@keyframes smBloodIce{0%{opacity:0;transform:translateY(16px) scale(1.05);clip-path:inset(100% -40% -40% -40%);filter:sepia(1) saturate(4) hue-rotate(-40deg) brightness(1.5)}55%{opacity:1;transform:translateY(-3px) scale(1);clip-path:inset(-40% -40% -40% -40%);filter:sepia(.6) saturate(2.5) hue-rotate(-40deg) brightness(1.25)}100%{opacity:1;transform:none;clip-path:inset(-40% -40% -40% -40%);filter:none}}
@keyframes smSlash{0%{opacity:0;transform:translateX(-10px);clip-path:polygon(-40% -40%,-40% -40%,-40% -40%,-40% -40%)}30%{opacity:1;clip-path:polygon(-40% -40%,140% -40%,-40% 140%,-40% 140%)}58%{transform:none;clip-path:polygon(-40% -40%,140% -40%,140% 140%,-40% 140%)}100%{opacity:1;transform:none;clip-path:polygon(-40% -40%,140% -40%,140% 140%,-40% 140%)}}
@media(prefers-reduced-motion:reduce){.summon-arrive,.summon-arrive[class*="summon-"]{animation:smFade .3s ease-out both!important}@keyframes smFade{from{opacity:0}to{opacity:1}}}

.summon-arrive.summon-greycloak{animation:smCloak .82s cubic-bezier(.25,.8,.3,1) both}
@keyframes smCloak{0%{opacity:0;transform:perspective(700px) rotateY(-78deg) translateX(-18px) scale(.92)}55%{opacity:1;transform:perspective(700px) rotateY(12deg)}80%{transform:perspective(700px) rotateY(-4deg)}100%{opacity:1;transform:none}}
.m.gc-silenced>*:not(.gc-chip){filter:saturate(.3) brightness(.92)}
.m>.gc-chip{position:absolute;left:50%;top:-9px;transform:translateX(-50%);z-index:34;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 12px Georgia,serif;color:#f4ecff;background:radial-gradient(circle at 40% 35%,#6c4a9a,#2a1d3c);border:1px solid #a35cff;box-shadow:0 0 6px rgba(163,92,255,.7);pointer-events:auto}

/* Emrys's guns: the rounds left, as brass cartridges on the Artifact slot */
.emrys-ammo{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:3px;padding:3px 7px 3px 6px;
  border-radius:10px;background:linear-gradient(180deg,#3b3f45,#1a1c20);border:1px solid #c9a35a;box-shadow:0 0 0 1px #0c0d0f,0 2px 6px #000a,inset 0 1px 0 #ffffff1a;pointer-events:auto;white-space:nowrap}
.emrys-ammo .round{position:relative;width:5px;height:13px;border-radius:2.5px 2.5px 1px 1px;background:linear-gradient(90deg,#8a6420,#f3d58a 45%,#b8862e 70%,#6e4d17);box-shadow:0 0 4px #f0c56a66}
.emrys-ammo .round::before{content:"";position:absolute;left:0;right:0;top:-3px;height:5px;border-radius:2.5px 2.5px 0 0;background:linear-gradient(90deg,#7a7f86,#d9dee4 45%,#8d939a)}
.emrys-ammo .round.spent{background:linear-gradient(90deg,#2a2c30,#4a4d52);box-shadow:none;opacity:.55}
.emrys-ammo .round.spent::before{display:none}
.emrys-ammo b{margin-left:4px;font:700 9px/1 var(--mono,monospace);letter-spacing:.06em;color:#f1dca6}
.emrys-ammo.empty{border-color:#7b4b40}.emrys-ammo.empty b{color:#d9877a}
.emrys-ammo.fired{animation:emrysKick .32s ease-out}
@keyframes emrysKick{0%{transform:translateX(-50%) translateY(0)}35%{transform:translateX(-50%) translateY(-3px) rotate(-3deg)}100%{transform:translateX(-50%) translateY(0)}}
/* 2v2 (2026-10-11): the seat's artifact slot is a thin strip, so the counter hangs just below it, compact, instead of over the gun's name */
.emrys-ammo.emrys-ammo-team{bottom:auto;gap:2px;padding:1px 5px 1px 4px}
.emrys-ammo-team .round{width:4px;height:9px}
.emrys-ammo-team .round::before{top:-2px;height:4px}
.emrys-ammo-team b{margin-left:3px;font-size:8px}
@media(prefers-reduced-motion:reduce){.emrys-ammo.fired{animation:none}}

/* Reflections: the original's art, mirrored, behind frosted glass */
.m.mr-reflected .mart img,.m.mr-reflected .mart .black-road-card-art-media{transform:scaleX(-1);filter:saturate(.45) brightness(1.08) contrast(.96) hue-rotate(-8deg)}
.m.mr-reflected .mart{background-color:#9fc4dc}
.m.mr-reflected .mr-frost{position:absolute;inset:0;pointer-events:none;border-radius:inherit;overflow:hidden;z-index:1;
 background:
  linear-gradient(118deg,rgba(255,255,255,0) 0 22%,rgba(235,248,255,.42) 27%,rgba(255,255,255,0) 33%,rgba(255,255,255,0) 58%,rgba(220,242,255,.28) 62%,rgba(255,255,255,0) 66%),
  radial-gradient(120% 90% at 50% 50%,rgba(170,215,240,0) 52%,rgba(205,234,252,.55) 82%,rgba(240,250,255,.85) 100%),
  linear-gradient(180deg,rgba(150,205,240,.22),rgba(110,170,215,.30));
 box-shadow:inset 0 0 0 1px rgba(214,240,255,.85),inset 0 0 14px rgba(190,228,255,.55)}
.m.mr-reflected .mr-frost::before{content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:screen;
 background:
  radial-gradient(2px 2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 78% 12%,#eaf7ff 50%,transparent 51%),
  radial-gradient(2px 2px at 88% 70%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 22% 82%,#eaf7ff 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 50% 8%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 6% 52%,#fff 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 95% 40%,#eaf7ff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 62% 92%,#fff 50%,transparent 51%)}
.m.mr-reflected .mr-frost::after{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:-60%;transform:skewX(-18deg);
 background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));animation:mrGlint 5.5s ease-in-out infinite}
@keyframes mrGlint{0%,62%{left:-60%}82%,100%{left:130%}}
.m.mr-reflected .mn{text-shadow:0 0 6px rgba(170,220,255,.65)}
@media(prefers-reduced-motion:reduce){.m.mr-reflected .mr-frost::after{animation:none;display:none}}

.summon-arrive.summon-lxturnkey{animation:smSlam .6s cubic-bezier(.2,.9,.3,1) both}
.summon-arrive.summon-lxcensor{animation:smGlitch .62s linear both}
.summon-arrive.summon-lxinkwell{animation:smInk .86s cubic-bezier(.45,.1,.35,1) both}
.summon-arrive.summon-lxsigilwright{animation:smRune .78s cubic-bezier(.25,.8,.3,1) both}
.summon-arrive.summon-lxsentinel{animation:smStone .66s cubic-bezier(.2,.9,.3,1) both}
.m.lx-chained{box-shadow:0 0 0 2px rgba(61,255,143,.55),0 0 14px rgba(61,255,143,.45)}
.m>.lx-chain-ov{position:absolute;inset:0;z-index:32;pointer-events:none;border-radius:inherit;overflow:hidden}
.m>.lx-chain-ov svg{width:100%;height:100%}
.m>.lx-chain-ov .lx-links path{fill:none;stroke:#c8ffe0;stroke-width:4;stroke-dasharray:9 5;stroke-linecap:round;opacity:.85}
.m>.lx-chain-ov .lx-links{animation:lxChainGlow 1.8s ease-in-out infinite}
@keyframes lxChainGlow{0%,100%{opacity:.65}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.m>.lx-chain-ov .lx-links{animation:none}}

.kh-water-resource{color:#91e0e7;font:700 10px/1.35 var(--mono,monospace);padding:2px 5px;border-left:2px solid #78d9e2;margin-top:3px;background:linear-gradient(90deg,#21464c77,transparent)}
.kh-guarded{outline:2px solid #dfbb79!important;outline-offset:3px}
.kh-guard-source{box-shadow:0 0 0 1px #c6dce7,0 0 16px #9dc3d73b!important}
.kh-guard-badge{position:absolute;right:4px;top:4px;width:19px;height:24px;display:grid;place-items:center;z-index:8;pointer-events:none;border:1px solid #edc57b;border-radius:4px;background:#17202beb;color:#fff1d1;filter:drop-shadow(0 2px 3px #0009)}
.kh-guard-badge svg{width:16px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5}
.kh-water-protected{border-color:#78d9e2!important;box-shadow:0 0 0 1px #78d9e288,0 5px 14px #78d9e225}
.m.kh-pack-magic{outline:1px solid #b8a2ff;outline-offset:1px}
.summon-arrive.summon-kh-supply{animation:smRise .8s ease-out both}
.kh-counter{position:absolute;right:3px;bottom:3px;z-index:9;height:17px;padding:0 6px 0 4px;display:flex;align-items:center;gap:3px;border-radius:9px;font:700 11px/1 var(--mono,monospace);color:#eafff4;background:linear-gradient(180deg,#2f7a45,#123220);border:1px solid #9fe6c8;box-shadow:0 0 0 1px #0a1a10,0 0 10px #6fdc9a66;pointer-events:auto;white-space:nowrap}
.kh-counter i{font-style:normal;font-size:11px;color:#b8f2c6}
.kh-counter b{font-weight:700;min-width:8px;text-align:center}
.kh-counter.empty{opacity:.7;background:linear-gradient(180deg,#25402e,#101c15);box-shadow:none}
.summon-arrive.summon-kh-wagon{animation:smMarch .8s ease-out both}
.summon-arrive.summon-kh-crew,.summon-arrive.summon-kh-gate{animation:smStone .8s ease-out both}
@media(prefers-reduced-motion:reduce){.kh-guarded,.kh-guard-source,.kh-water-protected,.kh-pack-magic{animation:none!important}}

/* the tree badge sits just above the Health gem, at every board scale */
.m .vr-og{position:absolute;right:3%;bottom:19%;left:auto;top:auto;width:auto;z-index:9;height:16px;padding:0 5px 0 2px;display:inline-flex;align-items:center;gap:2px;border-radius:8px;font:800 10px/1 var(--mono,monospace);color:#effff0;background:linear-gradient(180deg,#3f8f4c,#173a20);border:1px solid #b9f0a4;box-shadow:0 0 0 1px #0a1a10,0 0 8px #6fdc8a66;pointer-events:auto}
.vr-og.vr-pop{animation:vrOgIn .45s cubic-bezier(.2,1.6,.4,1)}
.vr-og svg{width:12px;height:12px;flex:none;filter:drop-shadow(0 1px 1px #000a)}
.vr-og b{min-width:7px;text-align:center}
.vr-og.vr-vigil{position:absolute;right:3px;bottom:3px;z-index:9;height:17px;padding:0 6px 0 4px;display:inline-flex;align-items:center;gap:3px;border-radius:9px;font:800 10px/1 var(--mono,monospace);color:#fff0ec;background:linear-gradient(180deg,#8a2a2e,#3a0f12);border:1px solid #ff9a8a;box-shadow:0 0 0 1px #1a0507,0 0 8px #ff6a5a55}
.vr-og.vr-vigil i{font-style:normal;color:#ffc8b8}
.vr-og.vr-reeds{color:#e9fbff;background:linear-gradient(180deg,#2d7f8c,#0f3138);border-color:#9fe8f0;box-shadow:0 0 0 1px #071a1e,0 0 8px #7fd6e055}
.vr-og.vr-reeds i{color:#bff4ff}
.vr-og.vr-reeds.empty{opacity:.7;box-shadow:none}
/* heroes: a small chip on the portrait's top-left corner and a green ring */
.vr-og.hero{position:absolute!important;left:-5px!important;top:-5px!important;right:auto!important;bottom:auto!important;width:auto!important;max-width:none;height:17px;padding:0 5px 0 2px;display:inline-flex!important;align-items:center;gap:2px;z-index:12;border-radius:9px;font:800 10px/1 var(--mono,monospace);color:#effff0;background:linear-gradient(180deg,#3f8f4c,#173a20);border:1px solid #b9f0a4;box-shadow:0 0 0 1px #0a1a10,0 0 8px #6fdc8a66;pointer-events:auto;white-space:nowrap}
.vr-overgrown:not(.m){box-shadow:0 0 0 2px #6fcf7a,0 0 14px #5fbf6a77!important}
/* Overgrown minions: a soft living frame, two leaves in the top corners, nothing over the text */
.m .vr-frame{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;box-shadow:inset 0 0 0 2px #6fcf7acc,inset 0 0 14px #5fbf6a66;animation:vrBreathe 3.2s ease-in-out var(--vr-phase,0ms) infinite}
.m.vr-new .vr-frame{animation:vrFrameIn .5s ease-out,vrBreathe 3.2s ease-in-out var(--vr-phase,0ms) infinite}
/* the art itself is overgrown: greened, mossy at the edges, vines swaying, a glint passing (like the Reflections' frost) */
.m.vr-overgrown .mart img,.m.vr-overgrown .mart .black-road-card-art-media{filter:saturate(1.15) hue-rotate(10deg) brightness(.96)}
.m.vr-overgrown .vr-moss{position:absolute;inset:0;pointer-events:none;border-radius:inherit;overflow:hidden;z-index:1;
 background:radial-gradient(120% 95% at 50% 45%,rgba(40,90,40,0) 50%,rgba(52,120,58,.45) 78%,rgba(30,74,36,.85) 100%),linear-gradient(180deg,rgba(80,170,90,.10),rgba(30,90,40,.28));
 box-shadow:inset 0 0 0 1px rgba(160,230,150,.55),inset 0 -10px 18px rgba(40,110,50,.55)}
.m.vr-new .vr-moss{animation:vrMossIn .7s ease-out}
.m.vr-overgrown .vr-moss-vines{position:absolute;inset:0;width:100%;height:100%;fill:#7ad07e;stroke:#3f8f4c;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 2px #10301a)}
.m.vr-overgrown .vr-moss-vines path{fill:none;stroke-dasharray:160;stroke-dashoffset:0}
.m.vr-new .vr-moss-vines path{animation:vrVineGrow .9s ease-out}
.m.vr-overgrown .vr-moss-vines ellipse{stroke:#2f7a3c;stroke-width:.8;fill:#86dc84}
.m.vr-overgrown .vr-moss-vines .vr-bud{fill:#f6f0ff;stroke:#c8a8e8;stroke-width:.8}
.m.vr-overgrown .vr-sway-l{transform-origin:0% 100%;animation:vrSway 4s ease-in-out var(--vr-phase,0ms) infinite}
.m.vr-overgrown .vr-sway-r{transform-origin:100% 100%;animation:vrSway 4.6s ease-in-out var(--vr-phase,0ms) infinite reverse}
/* the veins breathe, and pulses of growth run along them */
.m.vr-overgrown .vr-veins{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round;pointer-events:none}
.m.vr-overgrown .vr-vein-base{stroke:#8fe39a;stroke-width:.9;opacity:.5;filter:drop-shadow(0 0 1.5px #3fbf5a);animation:vrVeinBreathe 2.6s ease-in-out var(--vr-phase,0ms) infinite}
.m.vr-overgrown .vr-vein-flow{stroke:#e8ffe0;stroke-width:1.4;stroke-dasharray:4 46;opacity:.95;filter:drop-shadow(0 0 2.5px #9fffb0);animation:vrVeinFlow 2.2s linear var(--vr-phase,0ms) infinite}
.m.vr-new .vr-vein-base{animation:vrVineGrow 1.1s ease-out,vrVeinBreathe 2.6s ease-in-out var(--vr-phase,0ms) infinite;stroke-dasharray:160}
.vr-overgrown>.hp,.vr-overgrown>.arm{z-index:13!important}
.vr-wreath{position:absolute;inset:-6px;z-index:11;pointer-events:none;border-radius:50%}
.vr-wreath svg{width:100%;height:100%;fill:#6fcf7a;stroke:#2f7a3c;stroke-width:1;filter:drop-shadow(0 0 3px #1d4a2a);animation:vrSpinSlow 40s linear var(--vr-phase,0ms) infinite}
@keyframes vrBreathe{0%,100%{box-shadow:inset 0 0 0 2px #6fcf7acc,inset 0 0 12px #5fbf6a55}50%{box-shadow:inset 0 0 0 2px #9fe6a0,inset 0 0 22px #6fdc8a88}}
@keyframes vrMossIn{from{opacity:0}to{opacity:1}}
@keyframes vrVineGrow{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
@keyframes vrSway{0%,100%{transform:rotate(0)}50%{transform:rotate(2.2deg)}}
@keyframes vrVeinBreathe{0%,100%{opacity:.35;stroke-width:.8}50%{opacity:.85;stroke-width:1.15}}
@keyframes vrVeinFlow{from{stroke-dashoffset:50}to{stroke-dashoffset:0}}
@keyframes vrSpinSlow{to{transform:rotate(360deg)}}
.m .vr-frame i{position:absolute;top:1px;font-style:normal;font-size:11px;line-height:1;color:#8fdc8a;text-shadow:0 0 4px #1d4a2a}
.m .vr-frame i.tl{left:3px;transform:rotate(-30deg)}
.m .vr-frame i.tr{right:3px;transform:scaleX(-1) rotate(-30deg)}
.vr-res-rule{border:0;border-top:1px solid #5fbf6a44;margin:4px 0}
.vr-res-og{display:flex;align-items:center;gap:4px;color:#8fdc8a}
.vr-res-og svg{width:11px;height:11px}
@keyframes vrOgIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes vrFrameIn{from{opacity:0}to{opacity:1}}
.summon-arrive.summon-vr-grove{animation:smRise .8s ease-out both}
@media(prefers-reduced-motion:reduce){.m .vr-og,.m .vr-frame,.m.vr-overgrown .vr-moss,.m.vr-overgrown .vr-moss-vines path,.m.vr-overgrown .vr-sway-l,.m.vr-overgrown .vr-sway-r,.vr-wreath svg,.m.vr-overgrown .vr-vein-base{animation:none!important}.m.vr-overgrown .vr-vein-flow{display:none}}

/* Gilded Memories: the art washed white, glowing golden veins breathing through it, pulses of gold running along them */
.m.vg-gilded .mart img,.m.vg-gilded .mart .black-road-card-art-media{filter:grayscale(1) sepia(.12) brightness(1.4) contrast(.85)}
.m.vg-gilded:not(.ready){box-shadow:0 0 0 1px #f3d77a,0 0 16px #ffe9a866,0 0 4px #ffffff55!important}
/* ready to attack: the base gold pulse would vanish into the gilding, so a Memory pulses white-hot instead */
.m.vg-gilded.ready{animation:vgReady 1.7s ease-in-out infinite}
@keyframes vgReady{0%,100%{box-shadow:0 0 0 2px #ffe08a,0 0 14px rgba(255,236,170,.55),0 5px 18px rgba(220,179,92,.35)}50%{box-shadow:0 0 0 3px #fffbe8,0 0 30px rgba(255,248,220,.95),0 0 12px #ffd770,0 5px 24px rgba(220,179,92,.55)}}
.m.vg-gilded .vg-wash{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
 background:radial-gradient(110% 90% at 50% 40%,rgba(255,255,255,.34),rgba(255,250,235,.16) 55%,rgba(255,236,190,.38) 100%);mix-blend-mode:screen;animation:vgWash 3.6s ease-in-out var(--vr-phase,0ms) infinite}
.m.vg-gilded.vg-artless .vg-wash{border-radius:inherit}
.m.vg-gilded.vg-artless .vg-veins{opacity:.8}
.m.vg-gilded .vg-veins{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;fill:none;stroke-linecap:round}
.m.vg-gilded .vg-vein-base{stroke:#f0c75a;stroke-width:1.1;opacity:.6;filter:drop-shadow(0 0 1.8px #ffd770);animation:vgVeinBreathe 2.8s ease-in-out var(--vr-phase,0ms) infinite}
.m.vg-gilded .vg-vein-flow{stroke:#fffbe8;stroke-width:1.6;stroke-dasharray:4 46;opacity:.95;filter:drop-shadow(0 0 3px #ffe08a);animation:vgVeinFlow 2.4s linear var(--vr-phase,0ms) infinite}
.m.vg-gilded .vg-tag{position:absolute;left:50%;top:2px;transform:translateX(-50%);z-index:9;padding:1px 6px;border-radius:7px;font:800 7px/1.5 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:#2a2214;background:linear-gradient(180deg,#ffffff,#f0c75a);box-shadow:0 0 8px #ffe08aaa;pointer-events:auto}
.res.vg-remembrance .vg-rem-n{color:#ffe08a}.vg-rem-rule{border:0;border-top:1px solid #d9bd5b44;margin:4px 0}
.tchip.tchip-vgmem{border-color:#d9bd5b!important;color:#f3dc7e}.tchip.tchip-vgmem b{color:#ffe08a}
.vg-gilded-hand{box-shadow:0 0 0 2px #f0c75a,0 0 14px #ffe08a88!important}
@keyframes vgVeinBreathe{0%,100%{opacity:.45;stroke-width:.95}50%{opacity:.95;stroke-width:1.3}}
@keyframes vgVeinFlow{from{stroke-dashoffset:50}to{stroke-dashoffset:0}}
@keyframes vgWash{0%,100%{opacity:.85}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.m.vg-gilded .vg-vein-base,.m.vg-gilded .vg-wash{animation:none!important}.m.vg-gilded .vg-vein-flow{display:none}}

.tchip.tchip-water{border-color:#5fb8c8!important;color:#bfeaf2;background:linear-gradient(180deg,#123a44,#0b2228)}
.tchip.tchip-water b{color:#8fe4f2}
.tchip.tchip-water::before{content:"💧";margin-right:3px;font-size:.9em}
.tchip.tchip-og{border-color:#5fbf6a!important;color:#d6f5d9;background:linear-gradient(180deg,#1c4424,#0f2814)}
.tchip.tchip-og b{color:#9fe6a8}
.tchip.tchip-og::before{content:"🌿";margin-right:3px;font-size:.9em}
.tchip.tchip-rank b{color:inherit}

.fe-builder-prim{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;margin:4px 16px 8px;padding:9px 11px;border-radius:8px;border:1px solid #e9b94f55;background:linear-gradient(100deg,#1a1206,#0d0a05)}
.fe-builder-prim span{font:700 10px/1 Georgia,serif;letter-spacing:.22em;text-transform:uppercase;color:#e9b94f}
.fe-builder-prim b{font:600 14px/1.2 Georgia,serif;color:#fff1cc;text-align:right}
.fe-builder-prim small{grid-column:1/-1;font-size:11px;color:#bba98a}
.fe-builder-prim small em{color:#f2cf7a;font-style:normal;font-weight:600}
.fe-builder-prim[data-state="none"]{border-color:#ffffff1a;background:none}
.fe-builder-prim[data-state="none"] b{color:#8d8678}
.fe-builder-prim[data-state="many"]{border-color:#c8604f;background:linear-gradient(100deg,#2a0c08,#120605)}
.fe-builder-prim[data-state="many"] small{color:#f0a296}
.fe-eyes{position:absolute;left:50%;top:4px;transform:translateX(-50%);display:flex;gap:3px;z-index:6;pointer-events:none;padding:2px 4px;border-radius:8px;background:#0009}
.fe-eyes i{width:7px;height:7px;border-radius:50%;background:#3b3324;box-shadow:inset 0 0 0 1px #8a7440}
.fe-eyes i.open{background:radial-gradient(circle at 50% 50%,#fff6d0 0 25%,#e9b94f 26% 60%,#6b4a12 61%);box-shadow:0 0 6px #f2c45a}

.fe-peek{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#2a1e0acc,#050402ee);padding:16px}
.fe-peek-card{max-width:min(1100px,100%);display:flex;flex-direction:column;gap:14px;align-items:center;padding:20px 22px;border-radius:14px;border:1px solid #e9b94f88;background:linear-gradient(180deg,#1a1308,#0b0904);box-shadow:0 0 40px #e9b94f33}
.fe-peek-head{text-align:center;display:grid;gap:3px}
.fe-peek-head span{font:700 11px Georgia,serif;letter-spacing:.32em;text-transform:uppercase;color:#e9b94f}
.fe-peek-head b{font:600 22px Georgia,serif;color:#fff1cc}
.fe-peek-head small{color:#bba98a;font-size:12px}
.fe-peek-hand{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-height:70vh;overflow:auto}
.fe-peek-hand .fe-peek-c{pointer-events:none;transform:none!important}
.fe-peek-hand .fe-taxed{position:relative;box-shadow:0 0 0 2px #e9b94f,0 0 22px #e9b94f!important}
.fe-peek-tag{position:absolute;left:50%;top:34px;transform:translateX(-50%);z-index:5;font:700 10px Georgia,serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:#1a1206;background:#e9b94f;border-radius:5px;padding:3px 7px}
.fe-peek-empty{color:#bba98a}
.fe-peek-close{font:700 12px Georgia,serif;letter-spacing:.2em;text-transform:uppercase;color:#1a1206;background:#e9b94f;border:0;border-radius:6px;padding:8px 18px;cursor:pointer}
/* the Primordial frame: obsidian and living light, one hue per dragon */
.fe-prim{--fe-a:#e9b94f;--fe-b:#fff6d0;--fe-d:#140f06;position:relative;isolation:isolate}
.fe-prim-king{--fe-a:#f1cf7a;--fe-b:#fffaf0;--fe-d:#1a1206}
.fe-prim-tide{--fe-a:#d2463d;--fe-b:#ffd9d2;--fe-d:#1a0505}
.fe-prim-carrion{--fe-a:#a88cff;--fe-b:#f1ecff;--fe-d:#07051a}
.fe-aura{position:absolute;inset:-5px;border-radius:12px;pointer-events:none;z-index:4}
.fe-aura::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:3px;
 background:conic-gradient(from var(--fe-spin,0deg),var(--fe-d),var(--fe-a),var(--fe-b),var(--fe-a),var(--fe-d),var(--fe-a),var(--fe-b),var(--fe-d));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
 animation:fe-spin 4.5s linear infinite;filter:drop-shadow(0 0 6px var(--fe-a))}
.fe-aura::after{content:"";position:absolute;inset:-10px;border-radius:16px;box-shadow:0 0 22px 2px color-mix(in srgb,var(--fe-a) 55%,transparent),inset 0 0 18px color-mix(in srgb,var(--fe-a) 35%,transparent);animation:fe-breathe 3.2s ease-in-out infinite}
.fe-aura i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--fe-b);box-shadow:0 0 8px 2px var(--fe-a);opacity:0;animation:fe-mote 3.6s ease-in-out infinite}
.fe-aura i:nth-child(1){left:12%;bottom:8%}.fe-aura i:nth-child(2){left:52%;bottom:2%;animation-delay:1.2s}.fe-aura i:nth-child(3){left:84%;bottom:12%;animation-delay:2.3s}
@property --fe-spin{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fe-spin{to{--fe-spin:360deg}}
@keyframes fe-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes fe-mote{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-46px)}}
/* each dragon's own idle */
.fe-aura-omen::after{animation:fe-breathe 2.6s ease-in-out infinite,fe-omen-flicker 7s steps(1) infinite}
@keyframes fe-omen-flicker{0%,92%,100%{filter:none}93%,95%{filter:brightness(1.8)}}
.fe-aura-king::after{box-shadow:0 -14px 26px 0 color-mix(in srgb,var(--fe-a) 60%,transparent),0 0 20px 2px color-mix(in srgb,var(--fe-a) 45%,transparent)}
.fe-aura-tide::after{animation:fe-pulse 1.4s ease-in-out infinite}
@keyframes fe-pulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.025)}}
.fe-aura-carrion::after{box-shadow:0 0 26px 6px color-mix(in srgb,var(--fe-d) 80%,transparent),0 0 14px 2px color-mix(in srgb,var(--fe-a) 60%,transparent)}
.fe-veiled .fe-aura{opacity:.55;filter:blur(.4px)}
@media (prefers-reduced-motion:reduce){.fe-aura::before,.fe-aura::after,.fe-aura i{animation:none}}

#fkLayer{position:fixed;inset:0;pointer-events:none;z-index:100005}
.fk-piece{position:fixed;pointer-events:none}
.fk-whole{position:absolute;inset:0;will-change:transform,filter}
.fk-veins{position:absolute;inset:0;opacity:0;mix-blend-mode:multiply}
.fk-veins svg,.fk-rip svg{width:100%;height:100%;display:block;overflow:visible}
.fk-v1{fill:none;stroke:#3a0404;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:fkVein .32s ease-in forwards}
.fk-v2{fill:none;stroke:#d8392c;stroke-width:1.1;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:fkVein .32s .04s ease-in forwards;mix-blend-mode:screen}
@keyframes fkVein{to{stroke-dashoffset:0}}
.fk-shard{position:absolute;inset:0;will-change:transform,opacity;filter:saturate(1.6) sepia(.4) hue-rotate(-22deg) brightness(.8) drop-shadow(0 0 6px #8c0d0899)}
.fk-gore{position:absolute;inset:-2px;background:radial-gradient(circle at 50% 50%,transparent 52%,#5a0606cc 74%,#1d0101 100%);mix-blend-mode:multiply}
.fk-rip{position:absolute;inset:0;opacity:0}
.fk-wound{position:absolute;inset:6%;border-radius:10px;opacity:0;background:radial-gradient(ellipse at 50% 45%,#ff8f7f 0,#b3201a 18%,#5c0807 46%,#1d0101 78%),repeating-linear-gradient(115deg,#0000 0 7px,#2a020255 7px 9px);filter:blur(.6px)}
.fk-wound.on{animation:fkWound .95s ease-out forwards}
@keyframes fkWound{0%{opacity:0;transform:scale(.7)}12%{opacity:1;transform:scale(1.05)}55%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(.2)}}
.fk-rip.on{animation:fkRip .5s ease-out forwards}
.fk-rip path{fill:none;stroke:#ff6b55;stroke-width:3;filter:drop-shadow(0 0 4px #ff2a14)}
@keyframes fkRip{0%{opacity:1}100%{opacity:0}}
.m.fk-forming{opacity:0!important}
.m.fk-gorge{animation:fkGorge 1.05s cubic-bezier(.3,.7,.2,1) both}
.m.fk-born{animation:fkBorn 1.15s cubic-bezier(.25,.8,.2,1) both}
@keyframes fkGorge{0%{scale:1;filter:none}12%{scale:1.16 .86;filter:saturate(1.8) brightness(1.15) drop-shadow(0 0 14px #c3261c)}26%{scale:.9 1.12}40%{scale:1.09 .94}55%{scale:.96 1.05}72%{scale:1.03 .98;filter:saturate(1.3) drop-shadow(0 0 8px #8c0d08)}100%{scale:1;filter:none}}
@keyframes fkBorn{0%{scale:.45;opacity:.2;filter:blur(3px) saturate(2) brightness(.6) drop-shadow(0 0 18px #c3261c)}18%{scale:1.2 .82;opacity:1;filter:blur(0) saturate(1.9) brightness(1.1) drop-shadow(0 0 16px #c3261c)}32%{scale:.88 1.14}46%{scale:1.1 .93}60%{scale:.96 1.05}76%{scale:1.03 .98;filter:saturate(1.3) drop-shadow(0 0 8px #8c0d08)}100%{scale:1;opacity:1;filter:none}}
.m > .fk-flesh{position:absolute;inset:0;pointer-events:none;z-index:6;border-radius:inherit;overflow:hidden;animation:fkFlesh 1.3s var(--fk-d,0ms) ease-out both}
@keyframes fkFlesh{0%{opacity:0}10%{opacity:1}75%{opacity:1}100%{opacity:0}}
.fk-flesh svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fk-seam{fill:none;stroke:#2a0303;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200;animation:fkSew .45s calc(.18s + var(--i)*.09s) ease-out forwards;filter:drop-shadow(0 0 3px #e0301f)}
.fk-x{fill:none;stroke:#e8d2bd;stroke-width:1.6;stroke-linecap:round;opacity:0;animation:fkStitch .12s calc(.26s + var(--i)*.022s) forwards}
@keyframes fkSew{to{stroke-dashoffset:0}}
@keyframes fkStitch{to{opacity:.95}}
.fk-bulge{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 38%,#ff9a8a99,#c3261c66 40%,#5a060600 70%);mix-blend-mode:screen;opacity:0;animation:fkBulge .9s ease-in-out both}
.fk-bulge.b1{left:12%;top:18%;animation-delay:.05s}
.fk-bulge.b2{left:52%;top:40%;animation-delay:.22s}
.fk-bulge.b3{left:24%;top:62%;animation-delay:.38s}
@keyframes fkBulge{0%{opacity:0;transform:scale(.3) translate(0,0)}35%{opacity:1;transform:scale(1.1) translate(6%,-4%)}70%{opacity:.7;transform:scale(.8) translate(-5%,6%)}100%{opacity:0;transform:scale(.4) translate(0,0)}}
@media (prefers-reduced-motion:reduce){.m.fk-gorge,.m.fk-born{animation:none}.m.fk-forming{opacity:1!important}}

@keyframes sdSwapSun{0%{scale:1}35%{scale:0 1;filter:brightness(1.8) saturate(1.4)}36%{scale:0 1}70%{scale:1.08;filter:brightness(1.4) drop-shadow(0 0 16px #f2c14e)}100%{scale:1;filter:none}}
@keyframes sdSwapShade{0%{scale:1}35%{scale:0 1;filter:brightness(.7) hue-rotate(40deg)}36%{scale:0 1}70%{scale:1.04;filter:drop-shadow(0 0 12px #6fbf8f)}100%{scale:1;filter:none}}
@keyframes sdPhoenix{0%{scale:1;filter:none}20%{scale:.9;filter:brightness(2.2) sepia(1) saturate(4) hue-rotate(-20deg)}55%{scale:1.22;filter:brightness(1.6) drop-shadow(0 0 30px #ff7a2e)}100%{scale:1;filter:drop-shadow(0 0 10px #ff7a2e)}}
@keyframes sdRebirth{0%{filter:grayscale(1) brightness(.4);scale:.8}55%{filter:grayscale(1) brightness(.5);scale:.85}80%{filter:brightness(1.8) drop-shadow(0 0 22px #ff7a2e);scale:1.08}100%{filter:none;scale:1}}
.sd-swap-sun{animation:sdSwapSun .9s ease-in-out both}
#tip .sd-other-form{margin-top:10px}
#tip .sd-other-mini{min-height:0}
#tip .sd-other-mini .rc-text{-webkit-line-clamp:unset;display:block;font-size:9px}
#tip .sd-other-mini.sd-tone-sun{border-color:#f6c454aa;background:radial-gradient(circle at 84% 12%,#f6c45433,transparent 46%),linear-gradient(155deg,#1d1608,#0b0905 68%)}
#tip .sd-other-mini.sd-tone-shade{border-color:#6fae7f88;background:radial-gradient(circle at 84% 12%,#3d6b4a33,transparent 46%),linear-gradient(155deg,#0d1710,#060a07 68%)}
.ix-sun{position:absolute;right:-6px;top:-8px;z-index:12;min-width:30px;height:30px;padding:0 4px;border-radius:15px;display:grid;place-items:center;font:700 10px/1 var(--mono,monospace);color:#fff3c4;
  background:radial-gradient(circle at 50% 50%,#120d16 0 52%,transparent 56%),conic-gradient(#f6c454 calc(var(--ix,0)*360deg),#3b2f45 0);box-shadow:0 0 calc(4px + var(--ix,0)*14px) #f6c454aa;pointer-events:none}
.ix-sun.full{animation:ixFull 1.2s ease-in-out infinite}@keyframes ixFull{50%{box-shadow:0 0 22px #ffdf8a;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.ix-sun.full{animation:none}}
.sd-swap-shade{animation:sdSwapShade .9s ease-in-out both}
.sd-phoenix{animation:sdPhoenix 1.8s ease-out both}
.sd-rebirth{animation:sdRebirth 1.6s ease-in-out both}
@media(prefers-reduced-motion:reduce){.sd-swap-sun,.sd-swap-shade,.sd-phoenix,.sd-rebirth{animation:none}}

#tip .wd-shape-mini{min-height:0}
#tip .wd-shape-mini .rc-text{-webkit-line-clamp:6}

.mf-blade-ghost{position:fixed;z-index:92;margin:0;pointer-events:none;transition:transform .24s cubic-bezier(.45,0,.85,.4),opacity .22s;
  filter:brightness(1.55) saturate(.35) drop-shadow(0 0 16px #9fd7ff) drop-shadow(0 0 4px #ffffff);mix-blend-mode:screen}
.mf-asph{box-shadow:0 0 0 1px #e8f6ff66,0 0 16px #9fd7ff88,inset 0 0 14px #9fd7ff44}
@keyframes mfBladeWake{0%{transform:perspective(600px) rotateY(0)}40%{transform:perspective(600px) rotateY(90deg);filter:brightness(2.2) saturate(0)}41%{transform:perspective(600px) rotateY(-90deg)}
  75%{transform:perspective(600px) rotateY(8deg);filter:brightness(1.5) drop-shadow(0 0 18px #9fd7ff)}100%{transform:none;filter:none}}
.mf-blade-wake{animation:mfBladeWake .9s ease-in-out both}
@keyframes mfAsphReady{0%,100%{filter:none}40%{filter:brightness(1.6) drop-shadow(0 0 14px #9fd7ff)}}
.mf-asph-ready{animation:mfAsphReady .8s ease-in-out both}

/* her half of the table: frozen night, falling snow, drifting shards, a crown of thorns turning, mirrors, asphodel */
.amb.mf-asph-sheath,.amb.mf-asph-drawn{container-type:size;background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(159,215,255,.10),transparent 70%),linear-gradient(180deg,rgba(4,10,22,.42),rgba(10,26,48,.30))}
.amb.mf-asph-drawn{background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(159,215,255,.16),transparent 70%),linear-gradient(160deg,rgba(2,6,14,.55),rgba(14,36,64,.34))}
.amb .mfa{position:absolute;pointer-events:none}
.amb .mfa-frost{inset:0;box-shadow:inset 0 0 60px rgba(159,215,255,.28),inset 0 0 14px rgba(232,246,255,.35)}
.amb .mfa-crown{left:50%;top:50%;width:360px;height:360px;margin:-180px 0 0 -180px;opacity:.13;animation:mfaSpin 60s linear infinite}
.amb.mf-asph-drawn .mfa-crown{opacity:.22;animation-duration:34s}
.amb .mfa-crown svg,.amb .mfa-flower svg{width:100%;height:100%;display:block;overflow:visible}
@keyframes mfaSpin{to{transform:rotate(360deg)}}
.amb .mfa-mirror{left:var(--x);top:12%;width:9%;height:72%;border:1px solid rgba(232,246,255,.22);border-radius:40px 40px 4px 4px;overflow:hidden;transform:rotate(var(--r));
  background:linear-gradient(160deg,rgba(159,215,255,.07),rgba(232,246,255,.03) 60%,rgba(79,158,232,.06))}
.amb .mfa-mirror i{position:absolute;top:-10%;left:0;width:40%;height:120%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-160%) skewX(-18deg);animation:mfaSheen 6.5s ease-in-out var(--d) infinite}
@keyframes mfaSheen{0%,55%{transform:translateX(-160%) skewX(-18deg)}80%,100%{transform:translateX(320%) skewX(-18deg)}}
.amb .mfa-shard{left:var(--x);top:var(--y);width:12px;height:30px;clip-path:polygon(50% 0,100% 45%,55% 100%,0 55%);background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(159,215,255,.35) 55%,rgba(79,158,232,.12));
  opacity:.45;scale:var(--s);animation:mfaFloat var(--t) ease-in-out var(--d) infinite}
@keyframes mfaFloat{0%,100%{transform:translate(0,0) rotate(-18deg)}50%{transform:translate(14px,-18px) rotate(24deg)}}
.amb .mfa-shard.jolt{animation:mfaJolt .5s ease-out,mfaFloat var(--t) ease-in-out var(--d) infinite}
@keyframes mfaJolt{0%{translate:0 0;opacity:.9}40%{translate:10px -14px;opacity:1}100%{translate:0 0;opacity:.45}}
.amb .mfa-flake{left:var(--x);top:-12px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#fff 0 32%,rgba(159,215,255,.55) 48%,transparent 72%);opacity:0;scale:var(--s);animation:mfaFall var(--t) linear var(--d) infinite}
.amb .mfa-flake:nth-child(3n)::before,.amb .mfa-flake:nth-child(3n)::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.4px;margin:-.7px 0 0 -6.5px;background:#e8f6ff;transform:rotate(60deg)}
.amb .mfa-flake:nth-child(3n)::after{transform:rotate(-60deg)}
@keyframes mfaFall{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:.9}90%{opacity:.75}100%{opacity:0;transform:translate(var(--dx),calc(100cqh + 24px)) rotate(400deg)}}
.amb .mfa-flower{left:var(--x);bottom:6px;width:26px;height:26px;scale:var(--s);opacity:.7;transform-origin:50% 100%;animation:mfaSway 5s ease-in-out var(--d) infinite}
@keyframes mfaSway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.amb .mfa-streak{left:var(--x);top:-20%;width:2px;height:140%;transform:rotate(38deg);background:linear-gradient(180deg,transparent,rgba(159,215,255,.28) 30%,rgba(255,255,255,.45) 50%,rgba(159,215,255,.28) 70%,transparent);opacity:.35;animation:mfaGlint 4.2s ease-in-out var(--d) infinite}
@keyframes mfaGlint{0%,70%,100%{opacity:.18}80%{opacity:.7}}
.amb .mfa-cut{position:absolute;left:calc(-10% + var(--x));top:var(--y);width:120%;height:3px;z-index:3;transform-origin:0 50%;transform:rotate(var(--r)) scaleX(0);
  background:linear-gradient(90deg,transparent,#9fd7ff 15%,#fff 50%,#9fd7ff 85%,transparent);box-shadow:0 0 14px #9fd7ff,0 0 3px #fff;animation:mfaCut .6s cubic-bezier(.2,.8,.2,1) var(--d) both}
@keyframes mfaCut{0%{transform:rotate(var(--r)) scaleX(0);opacity:1}45%{transform:rotate(var(--r)) scaleX(1);opacity:1}100%{transform:rotate(var(--r)) scaleX(1) translateY(6px);opacity:0}}
@media(prefers-reduced-motion:reduce){.amb .mfa-crown,.amb .mfa-mirror i,.amb .mfa-shard,.amb .mfa-flake,.amb .mfa-flower,.amb .mfa-streak,.amb .mfa-cut{animation:none}.amb .mfa-flake{opacity:.5}}

/* her card preview */
#tip.asx-tip{width:min(532px,calc(100vw - 28px));max-width:calc(100vw - 28px);max-height:calc(100vh - 28px);padding:0;border-color:#679ac0;background:#070e18;border-radius:12px;box-shadow:0 18px 70px #000c,0 0 32px #80caff20}
#tip.asx-tip .asx{margin:0;padding:18px;border:0;border-radius:0}
#tip .asx-title{display:flex;align-items:center;gap:12px;margin-bottom:12px}
#tip .asx-title .asx-flake{font-size:30px}
#tip .asx-eyebrow{font:600 8px/1.4 var(--mono,monospace);letter-spacing:.16em;color:#9fb9d0}
#tip .asx-title h2{margin:2px 0 0;font:500 27px/1.1 var(--serif,Georgia);color:#f4f9ff}
#tip .asx-legend{margin-left:auto;text-align:right;font:600 9px/1.6 var(--mono,monospace);letter-spacing:.08em;color:#d5c695}
#tip .asx-swap-rule{display:flex;align-items:center;gap:14px;padding:12px 15px;margin-bottom:15px;border:1px solid #acd9ff38;border-radius:7px;background:linear-gradient(110deg,#26425f60,#1b263a35)}
#tip .asx-swap-symbol{font-size:30px;color:#bde4ff}
#tip .asx-swap-rule b{font:600 15px/1.3 var(--serif,Georgia);color:#ecf7ff}
#tip .asx-swap-rule p{margin:3px 0;color:#c7d9e9;font-size:12px}
#tip .asx-swap-rule strong{color:#fff}
#tip .asx-swap-rule small{font-size:10px;line-height:1.4;color:#91a9bf}
#tip .asx-versions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
#tip .asx-version{min-width:0;padding:9px;border:1px solid #99c9ff28;border-radius:8px;background:#060c1480}
#tip .asx-version.asx-current{border-color:#a2d5ff80;background:linear-gradient(170deg,#20416135,#0b162680);box-shadow:inset 0 0 20px #74c4ff0c}
#tip .asx-version-head{display:flex;align-items:center;gap:9px;min-height:52px;margin-bottom:8px}
#tip .asx-version-cost{flex:0 0 34px;height:38px;display:grid;place-items:center;color:#eef9ff;font:600 23px/1 var(--serif,Georgia);background:linear-gradient(145deg,#426583,#172e45);border:1px solid #aacde377;border-radius:50% 50% 45% 45%;box-shadow:inset 0 0 12px #d6f3ff1c}
#tip .asx-version-head h3{font:600 15px/1.1 var(--serif,Georgia);color:#e7f3ff;margin:0}
#tip .asx-version-head p{font-size:9px;color:#a0b8ce;margin:5px 0 0}
#tip .asx-current-label{margin-left:auto;font:600 8px/1.4 var(--mono,monospace);color:#879cb0;text-transform:uppercase;max-width:48px;text-align:right}
#tip .asx-current .asx-current-label{color:#cfeaff}
#tip .asx-version .asx-faces{gap:7px}
#tip .asx-version .asx-face{display:grid;grid-template-columns:58px minmax(0,1fr);padding:0;overflow:hidden;border:1px solid #a3bcd126;border-left:2px solid var(--k);border-radius:5px;min-height:105px;background:#ffffff04}
#tip .asx-face-art{position:relative;background-size:cover;background-position:center 20%;min-height:100%;box-shadow:inset -14px 0 15px -14px #000}
#tip .asx-face-cost{position:absolute;top:6px;left:5px;width:23px;height:25px;display:grid;place-items:center;border-radius:50%;border:1px solid #b1d8f2b0;background:#0b2038df;color:#fff;font:600 14px/1 var(--serif,Georgia)}
#tip .asx-face-copy{padding:9px 8px;min-width:0}
#tip .asx-face-meta{display:flex;align-items:center;gap:6px;margin-bottom:4px}
#tip .asx-face h4{font:600 12px/1.2 var(--serif,Georgia);color:#eff7ff;margin:0 0 5px}
#tip .asx-version .asx-face p{font-size:10.5px;line-height:1.45;margin:0;color:#bdcddd;overflow-wrap:break-word}
#tip .asx-face-meta .asx-st{margin-left:auto;color:#eee4bf;font-size:11px}
#tip .asx-selected{font-size:8px;color:#bce2ff}
#tip .asx-version .asx-chosen{border-color:#bce2ff80}
#tip .asx-attack{display:grid;grid-template-columns:1fr;gap:10px;align-items:center;border-top:1px solid #9fcfff28;margin-top:14px;padding-top:7px}
#tip .asx-attack p{font-size:11px;line-height:1.5;color:#b6cbdd;margin:0}
#tip .asx-attack b{color:#e3f3ff}
#tip .asx-attack .asx-sub{margin-top:3px;text-align:center}
#tip.asx-tip .asx-lady{font-size:10px;line-height:1.4;padding-top:9px;margin-top:9px}
@media(max-width:600px){#tip.asx-tip .asx{padding:12px}#tip .asx-versions{grid-template-columns:1fr}#tip .asx-attack{grid-template-columns:1fr;gap:6px}#tip .asx-version .asx-face{min-height:95px}#tip .asx-title h2{font-size:24px}#tip .asx-eyebrow{font-size:7px}}
#tip .asx{position:relative;margin:8px 0 6px;padding:9px 10px 10px;border:1px solid rgba(159,215,255,.38);border-radius:8px;overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(159,215,255,.14),transparent 70%),linear-gradient(170deg,#0b1626,#060a12 70%);box-shadow:inset 0 0 22px rgba(159,215,255,.12)}
#tip .asx::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);transform:translateX(-100%);animation:asxSweep 4.5s ease-in-out infinite;pointer-events:none}
@keyframes asxSweep{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
#tip .asx-head{display:flex;align-items:baseline;gap:7px;margin-bottom:8px}
#tip .asx-head b{font:600 13px/1.1 var(--serif,Georgia);color:#e8f6ff;letter-spacing:.02em}
#tip .asx-head em{margin-left:auto;font:600 8.5px/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:#9fd7ff;font-style:normal}
#tip .asx-flake{color:#9fd7ff;display:inline-block;animation:asxSpin 6s linear infinite}
@keyframes asxSpin{to{transform:rotate(360deg)}}
#tip .asx-forms{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;gap:4px}
#tip .asx-form{position:relative;height:96px;border-radius:6px;overflow:hidden;border:1px solid rgba(159,215,255,.25);padding:5px 6px;display:flex;flex-direction:column;justify-content:flex-end;opacity:.62;filter:saturate(.55)}
#tip .asx-form.asx-now{opacity:1;filter:none;border-color:#e8f6ff;box-shadow:0 0 14px rgba(159,215,255,.55);animation:asxNow 2.4s ease-in-out infinite}
@keyframes asxNow{50%{box-shadow:0 0 22px rgba(159,215,255,.85),inset 0 0 12px rgba(159,215,255,.3)}}
#tip .asx-art{position:absolute;inset:0;background-size:cover;background-position:center 18%}
#tip .asx-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(3,7,14,.92))}
#tip .asx-form>b,#tip .asx-form>small,#tip .asx-cost,#tip .asx-here{position:relative;z-index:1}
#tip .asx-form>b{font:600 10.5px/1.1 var(--serif,Georgia);color:#fff;text-shadow:0 1px 3px #000}
#tip .asx-form>small{font:600 7.5px/1.2 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:#9fd7ff}
#tip .asx-cost{position:absolute;top:5px;left:5px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--mono,monospace);color:#06101c;background:radial-gradient(circle at 35% 30%,#fff,#9fd7ff 60%,#4f9ee8);box-shadow:0 0 8px #9fd7ff}
#tip .asx-here{position:absolute;top:6px;right:6px;font:700 7px/1 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:#06101c;background:#e8f6ff;padding:2px 4px;border-radius:3px}
#tip .asx-swap{position:relative;height:34px;display:grid;place-items:center;color:#e8f6ff;font-size:16px}
#tip .asx-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(159,215,255,.7);animation:asxSpin 5s linear infinite}
#tip .asx-swap span{animation:asxFlip 2.4s ease-in-out infinite}
@keyframes asxFlip{0%,40%{transform:scaleX(1)}50%,90%{transform:scaleX(-1)}}
#tip .asx-trig{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:8px}
#tip .asx-trig i{font-size:9px;color:#8aa3b8}
#tip .asx-chip{font:600 9px/1 var(--mono,monospace);color:#e8f6ff;padding:4px 7px;border-radius:12px;border:1px solid rgba(159,215,255,.45);background:rgba(159,215,255,.1);animation:asxChip 2.4s ease-in-out infinite}
#tip .asx-chip.asx-bind{animation-delay:1.2s;border-color:rgba(159,232,200,.5);background:rgba(159,232,200,.1)}
@keyframes asxChip{0%,100%{box-shadow:none}15%{box-shadow:0 0 12px rgba(159,215,255,.7)}}
#tip .asx-note{margin-top:5px;font-size:9px;line-height:1.3;color:#a9bccd}
#tip .asx-sub{margin:9px 0 4px;font:600 8.5px/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:#9fd7ff}
#tip .asx-faces{display:grid;gap:4px}
#tip .asx-face{padding:4px 6px;border-left:2px solid var(--k);background:rgba(255,255,255,.03);border-radius:0 4px 4px 0}
#tip .asx-face b{font-size:10px;color:#fff}
#tip .asx-k{font:700 7px/1 var(--mono,monospace);letter-spacing:.12em;color:var(--k);margin-right:5px}
#tip .asx-st{font:700 9px/1 var(--mono,monospace);color:#f3e7b0}
#tip .asx-face p{margin:2px 0 0;font-size:9px;line-height:1.3;color:#c6d3de}
#tip .asx-lane{position:relative;height:44px;width:250px;margin:4px auto 0}
#tip .asx-c{position:absolute;top:6px;width:24px;height:32px;border-radius:4px;border:1px solid rgba(159,215,255,.55);background:rgba(159,215,255,.12) center 15%/cover;display:grid;place-items:center;color:#9fd7ff;font-size:11px}
#tip .asx-she{left:0;width:30px;height:38px;top:3px;background-image:var(--her);border-color:#e8f6ff;box-shadow:0 0 10px rgba(159,215,255,.7);animation:asxNow 1.6s ease-in-out infinite}
#tip .asx-r{left:calc(42px + var(--i)*30px);animation:asxGo 4.8s ease-in-out calc(var(--i)*1.2s) infinite}
@keyframes asxGo{0%,4%{transform:none;opacity:1}9%{transform:scale(1.18);background-image:var(--her);border-color:#fff;box-shadow:0 0 12px #9fd7ff;color:transparent}
  17%{transform:translateX(var(--dx)) rotate(12deg) scale(1.1);opacity:1;background-image:var(--her);color:transparent}21%{transform:translateX(var(--dx)) scale(1.3);opacity:0}96%{opacity:0;transform:none}100%{opacity:1;transform:none}}
#tip .asx-foe{position:absolute;right:0;top:4px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,140,140,.5);background:radial-gradient(circle,#2a1018,#0d0609);display:grid;place-items:center;color:#ff9c9c;font-size:15px}
#tip .asx-cuts{position:absolute;inset:-8px;opacity:0;animation:asxCuts 4.8s linear calc(.75s + var(--i)*1.2s) infinite}
#tip .asx-cuts i{position:absolute;left:-6px;right:-6px;top:50%;height:2px;background:linear-gradient(90deg,transparent,#fff,#9fd7ff,transparent);box-shadow:0 0 6px #9fd7ff}
#tip .asx-cuts i:nth-child(1){transform:rotate(-38deg)}#tip .asx-cuts i:nth-child(2){transform:rotate(36deg) translateY(-5px)}#tip .asx-cuts i:nth-child(3){transform:rotate(-52deg) translateY(6px)}
@keyframes asxCuts{0%{opacity:0;transform:scale(.4)}2%{opacity:1;transform:scale(1)}9%{opacity:0;transform:scale(1.15)}100%{opacity:0}}
#tip .asx-chain{position:absolute;left:30px;top:22px;width:118px;height:0;border-top:2px dotted rgba(159,215,255,.55)}
#tip .asx-cap{margin-top:4px;font-size:9px;line-height:1.35;color:#c6d3de}
#tip .asx-lady{margin-top:7px;padding-top:6px;border-top:1px solid rgba(159,215,255,.18);font-size:9px;color:#e6dcff}
@media(prefers-reduced-motion:reduce){#tip .asx::before,#tip .asx-flake,#tip .asx-form.asx-now,#tip .asx-ring,#tip .asx-swap span,#tip .asx-chip,#tip .asx-she,#tip .asx-r,#tip .asx-cuts{animation:none}}
@media(prefers-reduced-motion:reduce){.mf-blade-wake,.mf-asph-ready{animation:none}.mf-blade-ghost{transition:none}}

.tseat.active{animation:none}
.tseat.active::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 5px var(--seat),inset 0 0 92px color-mix(in srgb,var(--seat) 45%,transparent);opacity:0;will-change:opacity;animation:perfSeatPulse 1.6s ease-in-out infinite}
@keyframes perfSeatPulse{50%{opacity:1}}
.tgturn.mine{animation:none;position:relative}
.tgturn.mine::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 34px color-mix(in srgb,var(--turn) 54%,transparent);opacity:0;will-change:opacity;animation:perfSeatPulse 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.tseat.active::before,.tgturn.mine::after{animation:none}}

body.rh-on #reconnectPrompt,body.rh-on #syncNotice{display:none!important}
#rhHall{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(3,6,12,.84)}
#rhHall .rh-box{width:min(620px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:24px 24px 20px;border:1px solid var(--gold-dim,#8a6d32);border-radius:10px;
  background:linear-gradient(170deg,#141b2a,#070a12 70%);box-shadow:0 24px 80px #000c,0 0 0 1px #0008 inset}
#rhHall .rh-eyebrow{font:600 8px/1.4 var(--mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:#ff9a8f}
#rhHall h1{margin:4px 0 6px;font:500 28px/1.1 var(--serif,Georgia);color:#f3ead2}
#rhHall .rh-copy{margin:0 0 14px;color:#b9c3d6;font-size:13px;line-height:1.45}
#rhHall .rh-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:12px;font:9px var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:#8e9ab2}
#rhHall .rh-meta b{color:#f3ead2;font-weight:600}
#rhHall .rh-rows{display:grid;gap:7px}
#rhHall .rh-row{display:grid;grid-template-columns:38px minmax(0,1fr) minmax(0,auto);align-items:center;gap:12px;padding:9px 12px;border:1px solid #ffffff14;border-left:3px solid var(--rh-seat);border-radius:6px;background:#0b111c}
#rhHall .rh-row.rh-you{background:linear-gradient(90deg,#1a1709,#0b111c 60%);border-color:#dcb35c44;border-left-color:var(--rh-seat)}
#rhHall .rh-chip{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--rh-seat);color:#f3ead2;font:600 9px var(--mono,monospace);font-style:normal;letter-spacing:.06em;background:#05080e}
#rhHall .rh-who{min-width:0}
#rhHall .rh-who b{display:block;font:500 15px/1.2 var(--serif,Georgia);color:#f3ead2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rhHall .rh-who b em{font:600 7px var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:#dcb35c;font-style:normal;vertical-align:middle}
#rhHall .rh-who small{display:block;margin-top:2px;font:8px var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:#7f8aa1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rhHall .rh-state{text-align:right;min-width:0}
#rhHall .rh-pill{display:inline-block;padding:3px 9px;border-radius:20px;border:1px solid currentColor;font:600 8px var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
#rhHall .rh-state small{display:block;margin-top:4px;font-size:10.5px;color:#9aa5bb;line-height:1.3}
#rhHall .rh-ok .rh-pill,#rhHall .rh-ready .rh-pill{color:#6fd08a}
#rhHall .rh-host .rh-pill{color:#dcb35c}
#rhHall .rh-ai .rh-pill,#rhHall .rh-unknown .rh-pill{color:#8e9ab2}
#rhHall .rh-restoring .rh-pill{color:#e8c36a}
#rhHall .rh-lost .rh-pill{color:#ff7770;animation:rhBlink 1.4s ease-in-out infinite}
@keyframes rhBlink{50%{opacity:.45}}
#rhHall .rh-ai{display:inline-block;margin-top:6px;padding:4px 10px;border-radius:4px;border:1px solid #8e9ab2;background:#111a2b;color:#dfe6f3;font:600 8px var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
#rhHall .rh-ai:hover{border-color:#dcb35c;color:#f3ead2}
#rhHall .rh-self{margin:14px 0 0;padding:10px 12px;border-radius:6px;background:#0e1626;border:1px solid #2c3b57;color:#c7d2e4;font-size:12px;line-height:1.45}
#rhHall .rh-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#rhHall .rh-btns .go{flex:1 1 160px}
#rhPill{position:fixed;z-index:1300;left:50%;top:70px;transform:translateX(-50%);padding:8px 16px;border-radius:20px;border:1px solid #ff7770;background:#1a0b0e;color:#ffd6d2;
  font:600 9px var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 24px #000a}
@media(max-width:560px){#rhHall .rh-row{grid-template-columns:30px minmax(0,1fr);}#rhHall .rh-state{grid-column:1/-1;text-align:left}#rhHall .rh-chip{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){#rhHall .rh-lost .rh-pill{animation:none}}

.ctr-wrap{position:fixed;z-index:9001;pointer-events:none;contain:layout style}
.ctr-half{position:absolute;inset:0;will-change:transform,opacity;animation:ctrFall var(--dur,1150ms) cubic-bezier(.25,.6,.3,1) var(--delay,0ms) forwards}
.ctr-half.ctr-mend{animation:ctrMend 520ms cubic-bezier(.3,.7,.3,1) forwards}
.ctr-half>*{animation:none!important;transition:none!important}
@keyframes ctrFall{
  0%{transform:translate(0,0) rotate(0);opacity:1;filter:brightness(1)}
  12%{transform:translate(calc(var(--tx)*.12),calc(var(--ty)*.12)) rotate(calc(var(--rot)*.1));opacity:1;filter:brightness(1.35)}
  60%{opacity:.9;filter:brightness(.55)}
  100%{transform:translate(var(--tx),calc(var(--ty) + var(--drop))) rotate(var(--rot));opacity:0;filter:brightness(.15)}}
@keyframes ctrMend{0%{transform:translate(0,0)}35%{transform:translate(var(--mx),var(--my))}100%{transform:translate(0,0)}}
.ctr-seam{position:absolute;inset:-30%;pointer-events:none;opacity:0;animation:ctrSeam 900ms ease-out forwards}
.ctr-seam svg{width:100%;height:100%;overflow:visible}
.ctr-seam line{stroke:var(--ctr-c,#dff1ff);stroke-width:2.2;filter:drop-shadow(0 0 5px var(--ctr-c,#dff1ff)) drop-shadow(0 0 2px #fff)}
.ctr-scar{position:fixed;z-index:9001;pointer-events:none;opacity:0;animation:ctrScar 1500ms ease-out forwards}
.ctr-scar svg{width:100%;height:100%;overflow:visible}
.ctr-scar line{stroke:var(--ctr-c,#dff1ff);stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--ctr-c,#dff1ff))}
.m.ctr-hidden{visibility:hidden!important}
@keyframes ctrSeam{0%{opacity:0}10%{opacity:1}100%{opacity:0}}
@keyframes ctrScar{0%{opacity:0}12%{opacity:1}70%{opacity:.6}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.ctr-half{animation:ctrFade 400ms ease-out forwards}.ctr-half.ctr-mend{animation:none}.ctr-seam,.ctr-scar{display:none}@keyframes ctrFade{to{opacity:0}}}

#modal.mg-choice .mbox{width:min(960px,calc(100vw - 24px));max-width:960px;max-height:90dvh;box-sizing:border-box;padding:22px;background:radial-gradient(ellipse at top,#20283b,#10131f 70%);border:1px solid #7b91ae66}
#modal.mg-choice #mo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:65dvh;overflow:auto;align-items:stretch;padding:4px;min-width:0}
#modal.mg-choice .opt{position:relative;min-width:0;width:auto;box-sizing:border-box;padding:12px 12px 12px 72px;text-align:left;min-height:120px;overflow:hidden;border:1px solid #7587a344;border-top:2px solid var(--oc);border-radius:8px;background:linear-gradient(120deg,#20283c,#10141e);transition:border-color .15s,background .15s}
#modal.mg-choice .opt:hover,#modal.mg-choice .opt:focus-visible{outline:2px solid var(--oc);outline-offset:0;background:#263149}
#modal.mg-choice .oh{font-size:10px;letter-spacing:.08em;line-height:1.4;margin-bottom:6px;color:var(--oc)}#modal.mg-choice .on2{font-size:13px;margin:3px 0;color:#f3edda}#modal.mg-choice .ox{font:12px/1.5 Georgia,serif;color:#d4dbea}
#modal.mg-choice .mg-choice-art{position:absolute;left:8px;top:12px;width:53px;height:78px;object-fit:cover;border-radius:5px;opacity:.9;border:1px solid #ffffff25}
#modal.mg-choice .opt:last-child{grid-column:1/-1;padding:11px 16px;min-height:0;text-align:center}#modal.mg-choice .opt:last-child .on2{display:none}#modal.mg-choice .msub{line-height:1.6;letter-spacing:.07em}
@media(max-width:720px){#modal.mg-choice #mo{grid-template-columns:repeat(2,minmax(0,1fr))}#modal.mg-choice .mbox{padding:14px}}@media(max-width:480px){#modal.mg-choice #mo{grid-template-columns:1fr;max-height:62dvh}#modal.mg-choice .opt{min-height:108px}#modal.mg-choice #mt{font-size:22px}}
.mg-guide{margin:12px 0 3px;padding:12px;border:1px solid #8782aa66;border-radius:8px;background:linear-gradient(135deg,#15182b,#10101c);color:#dce3f2;font:12px/1.5 Georgia,serif}
.mg-guide>b{color:#e7eaff;font-size:14px}.mg-guide p{margin:6px 0}.mg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}.mg-grid>div{display:grid;grid-template-columns:18px 1fr;gap:1px 5px;padding:7px;border-left:2px solid var(--mg);background:#ffffff06}.mg-grid i,.mg-grid b{color:var(--mg)}.mg-grid span{grid-column:2}.mg-corrupt{border-color:var(--mg);background:radial-gradient(ellipse at 0 0,#342344,#0e101b 70%)}.mg-corrupt>b{color:var(--mg)}
.mg-pulse{position:absolute;inset:0;pointer-events:none;z-index:40;display:grid;place-content:center;text-align:center;animation:mgBloom 1s ease-out both}.mg-pulse i{display:block;width:28px;height:28px;margin:0 auto 12px;transform:rotate(45deg);background:linear-gradient(135deg,#fff,var(--mg) 35%,#141020 60%);border:1px solid var(--mg);box-shadow:0 0 18px var(--mg),inset 0 0 8px #fff8}.mg-pulse b{color:#fff;text-shadow:0 1px 4px #000;font:600 11px Georgia,serif;letter-spacing:.06em}@keyframes mgBloom{0%{opacity:0;transform:scale(.65)}20%,65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-12px)}}
@media(max-width:480px){.mg-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.mg-pulse{animation:none}.mg-pulse i{box-shadow:none}}

.ry-preview{display:flex;gap:12px;margin-top:12px;padding:10px 12px;border:1px solid #b9974b;border-radius:6px;background:linear-gradient(135deg,#201d16,#11131c);color:#f7e6bc}
.ry-preview img{width:82px;height:123px;object-fit:cover;flex-shrink:0;border-radius:4px;border:1px solid #b9974b}
.ry-preview p{margin:6px 0 0;font-size:12px;line-height:1.45}
.ry-dawn-badge{position:absolute;left:0;bottom:-9px;padding:3px 5px;border:1px solid #d6b063;border-radius:4px;background:#15151d;color:#ffe0a1;font:700 9px var(--mono);white-space:nowrap;pointer-events:none;z-index:7}
.ry-royal-card{outline:1px solid #d5b771;outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.ry-royal-card{outline-color:#f4dca3}}

#tip.mfp-tip{width:min(700px,calc(100vw - 28px));max-width:calc(100vw - 28px);max-height:calc(100vh - 28px);padding:0;border:1px solid #748690;border-radius:14px;background:#10161d;box-shadow:0 24px 90px #000b;overflow-y:auto;overflow-x:hidden;color:#e5eaf0}
.mfp{--mfp-color:#a2bccb;background:radial-gradient(ellipse at 15% 0%,color-mix(in srgb,var(--mfp-color) 14%,transparent),transparent 70%),#10161d;font-family:inherit}
.mfp-head{padding:20px 22px 14px;border-top:3px solid var(--mfp-color)}
.mfp-eyebrow{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mfp-color);margin-bottom:7px}
.mfp-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.mfp-heading h2{font:24px/1.1 Georgia,serif;margin:0;color:#f6f2e9}.mfp-heading>span{flex-shrink:0;font-size:9px;text-align:right;line-height:1.7;text-transform:uppercase;letter-spacing:1px;color:#a4adb7}
.mfp-rule{display:flex;align-items:center;gap:13px;margin:0 18px 16px;padding:11px 13px;background:#ffffff07;border:1px solid #ffffff15;border-radius:7px}.mfp-rule>span{font-size:26px;color:var(--mfp-color)}.mfp-rule p{font-size:12px;line-height:1.55;margin:0;color:#dae4ee}
.mfp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 18px 16px}.mfp-face{position:relative;min-width:0;border:1px solid #ffffff1c;border-radius:9px;overflow:hidden;background:#0b1119}.mfp-current{border-color:var(--mfp-color);box-shadow:0 0 0 1px color-mix(in srgb,var(--mfp-color) 12%,transparent)}
.mfp-art{height:150px;position:relative;overflow:hidden;background:#1b2530}.mfp-art img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}.mfp-art:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#0b1119)}
.mfp-cost{position:absolute;z-index:1;top:10px;left:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:21px Georgia,serif;color:#edf8ff;background:#162e45ed;border:1px solid #acdafa;box-shadow:0 3px 13px #0009}
.mfp-art-type{position:absolute;z-index:1;bottom:9px;left:14px;letter-spacing:2px;text-transform:uppercase;color:#d4e1ef;font-size:9px}.mfp-copy{padding:8px 14px 15px}.mfp-meta{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#9cabb9}.mfp-stats{font-weight:bold;color:#e6dec5}.mfp-copy h3{font:19px/1.2 Georgia,serif;color:#f1eee6;margin:7px 0}.mfp-rules{font-size:11px;line-height:1.6;color:#c2cdd9}.mfp-rules b{color:#e9edf3}.mfp-current-label{display:inline-block;color:var(--mfp-color);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:7px}.mfp-foot{border-top:1px solid #ffffff10;padding:10px 18px 14px;font-size:9px;color:#8294a7;letter-spacing:.4px}
.mfp-legendary .mfp-head{padding-top:25px;border-top:4px double #e7cd93}.mfp-legendary .mfp-heading h2{font-size:29px}.mfp-legendary .mfp-art{height:220px}.mfp-legendary .mfp-face{border-radius:12px;border-color:#b5a17360}.mfp-legendary .mfp-current{border-color:#e7cd93}.mfp-legendary .mfp-cost{border-color:#efdaad;background:#242839ee;box-shadow:0 0 18px #cfc29744}.mfp-legendary .mfp-head:before{content:'✧ ─── ◇ ─── ✧';display:block;color:#d5c38f;font-size:13px;letter-spacing:5px;text-align:center;margin-bottom:15px}.mfp-legendary .mfp-face:after{content:'';pointer-events:none;position:absolute;inset:0;border:1px solid #fff1c940;border-radius:inherit;animation:mfp-breathe 5s ease-in-out infinite}.mfp-epic .mfp-art{height:180px}.mfp-epic .mfp-head{border-top-color:#c3b3e7}
@keyframes mfp-breathe{0%,100%{opacity:.2}50%{opacity:.8}}
@media(max-width:600px){.mfp-grid{grid-template-columns:1fr;padding:0 12px 12px}.mfp-head{padding:15px}.mfp-heading h2,.mfp-legendary .mfp-heading h2{font-size:23px}.mfp-rule{margin:0 12px 12px}.mfp-art{height:160px}.mfp-legendary .mfp-art{height:210px}.mfp-copy h3{font-size:20px}.mfp-rules{font-size:12px}}
@media(prefers-reduced-motion:reduce){.mfp-legendary .mfp-face:after{animation:none}}
.mfp-art{height:130px}.mfp-epic .mfp-art{height:155px}.mfp-legendary .mfp-art{height:185px}
#tip.mfp-choice-tip{width:min(490px,calc(100vw - 28px))}
.mfp-choice-tip .mfp-head{padding:14px 15px 10px}.mfp-choice-tip .mfp-heading h2{font-size:21px}
.mfp-choice-tip .mfp-rule{margin:0 12px 11px;padding:8px 9px}.mfp-choice-tip .mfp-grid{gap:8px;padding:0 12px 11px}
.mfp-choice-tip .mfp-art{height:91px}.mfp-choice-tip .mfp-epic .mfp-art{height:109px}.mfp-choice-tip .mfp-legendary .mfp-art{height:130px}
.mfp-choice-tip .mfp-copy{padding:6px 10px 10px}.mfp-choice-tip .mfp-copy h3{font-size:16px}

.fcb-hit{position:absolute;inset:0;pointer-events:none;z-index:7;overflow:hidden;border-radius:inherit}
.fcb-mini{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:2/3;transform:translate(-50%,-50%) scale(.2);border-radius:5px;overflow:hidden;border:1px solid #e9c97a;box-shadow:0 0 10px #000,0 0 8px #e9b94f88;opacity:0;animation:fcb-in 1.6s ease forwards}
.fcb-mini img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) contrast(1.05)}
@keyframes fcb-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}20%{transform:translate(-50%,-50%) scale(1)}54%{opacity:1;transform:translate(-50%,-50%) scale(1)}58%{transform:translate(-46%,-52%) scale(.97) rotate(-4deg);filter:brightness(2)}70%{opacity:.9;transform:translate(-50%,-50%) scale(.94) rotate(-6deg);filter:grayscale(1) brightness(.6)}100%{opacity:0;transform:translate(-50%,-30%) scale(.8) rotate(-12deg);filter:grayscale(1) brightness(.3)}}
.fcb-ret{position:absolute;left:50%;top:50%;width:70%;transform:translate(-50%,-50%) scale(1.8) rotate(-60deg);fill:none;stroke:#f2cf7a;stroke-width:2;opacity:0;filter:drop-shadow(0 0 3px #e9b94f);animation:fcb-ret 1.6s ease forwards}
@keyframes fcb-ret{0%,14%{opacity:0;transform:translate(-50%,-50%) scale(1.8) rotate(-60deg)}24%{opacity:1}44%{opacity:1;transform:translate(-50%,-50%) scale(.8) rotate(0deg);stroke:#ffe9a8}52%{transform:translate(-50%,-50%) scale(.72) rotate(0deg);stroke:#ff6a4d}62%{opacity:0;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0}}
.fcb-bolt{position:absolute;left:50%;top:50%;width:120%;height:3px;transform-origin:left center;transform:translate(60%,-40%) rotate(150deg) scaleX(0);background:linear-gradient(90deg,#fff6d0,#d9b25a 30%,#6b4b2a);box-shadow:0 0 6px #f2cf7a;opacity:0;animation:fcb-bolt 1.6s linear forwards}
@keyframes fcb-bolt{0%,48%{opacity:0;transform:translate(60%,-40%) rotate(150deg) scaleX(0)}50%{opacity:1;transform:translate(60%,-40%) rotate(150deg) scaleX(.2)}55%{opacity:1;transform:translate(0,-50%) rotate(150deg) scaleX(.55)}64%{opacity:0}100%{opacity:0}}
.fcb-flash{position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.2);border-radius:50%;background:radial-gradient(circle,#fff6d0 0,#f2cf7a55 40%,transparent 70%);opacity:0;animation:fcb-flash 1.6s ease forwards}
@keyframes fcb-flash{0%,54%{opacity:0;transform:translate(-50%,-50%) scale(.2)}57%{opacity:1;transform:translate(-50%,-50%) scale(1)}72%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}100%{opacity:0}}
.fcb-shard{position:absolute;left:50%;top:50%;width:9px;height:12px;background:#e9c97a;clip-path:polygon(50% 0,100% 100%,0 80%);opacity:0;animation:fcb-shard 1.6s ease-out forwards}
.fcb-shard.s1{--dx:-28px;--dy:-22px}.fcb-shard.s2{--dx:26px;--dy:-16px}.fcb-shard.s3{--dx:4px;--dy:30px}
@keyframes fcb-shard{0%,56%{opacity:0;transform:translate(-50%,-50%)}60%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(140deg)}}
@media (prefers-reduced-motion:reduce){.fcb-hit{display:none}}

/* the hunting page: a bounty scene */
#finchChallenge.fp-scene{background:radial-gradient(ellipse at 70% 20%,#3a3523 0,transparent 40%),radial-gradient(ellipse at 50% 60%,#0f1d22 0,#04070b 75%)!important}
#finchChallenge.fp-scene .finch-scene>.finch-ring,#finchChallenge.fp-scene .finch-invitation{display:none}
.fp-wrap{position:relative;width:min(1000px,96vw);min-height:min(620px,92dvh);display:grid;grid-template-columns:1fr minmax(260px,420px) 1fr;align-items:center;gap:12px}
.fp-moon{position:absolute;right:6%;top:4%;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#f6ecd0,#c9b37a 60%,#8a7448);box-shadow:0 0 70px #e9d39a55;opacity:.8}
.fp-rain{position:absolute;inset:-10% 0 0;pointer-events:none;background-image:repeating-linear-gradient(105deg,transparent 0 14px,#b9d4e01a 14px 15px);animation:fp-rain .55s linear infinite;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.fp-posterbox{grid-column:2;position:relative}
.fp-poster{position:relative;transform:rotate(-2.4deg);background:radial-gradient(ellipse at 30% 20%,#efe0bb,#d8c391 60%,#b89e68);color:#2a1d10;padding:26px 26px 22px;box-shadow:0 18px 40px #000c,inset 0 0 40px #8a6a3a55;clip-path:polygon(0 2%,6% 0,14% 1.5%,23% 0,35% 1%,48% 0,60% 1.6%,72% 0,85% 1.2%,100% 0,99% 12%,100% 30%,98.6% 52%,100% 74%,99% 100%,84% 98.6%,66% 100%,48% 98.8%,30% 100%,12% 98.6%,0 100%,1.2% 76%,0 52%,1.4% 28%);animation:fp-poster-in .9s cubic-bezier(.2,.9,.25,1.2) both .2s}
.fp-poster.fp-hit{animation:fp-poster-in .9s cubic-bezier(.2,.9,.25,1.2) both .2s,fp-shudder .45s ease-out 1.25s}
.fp-wanted{font:900 clamp(44px,7vw,68px)/.9 var(--serif,Georgia);letter-spacing:.06em;text-align:center;color:#3a1c0c;text-shadow:1px 1px 0 #f6e8c4}
.fp-sub{font:700 10px var(--mono,monospace);letter-spacing:.32em;text-align:center;text-transform:uppercase;color:#6b4a24;margin:6px 0 14px}
.fp-name{position:relative;font:700 clamp(20px,3vw,27px)/1.15 var(--serif,Georgia);text-align:center;padding:12px 6px;border-block:2px solid #6b4a24;margin:0 6px}
.fp-reward{display:flex;justify-content:space-between;font:700 11px var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:#5a3c1c;margin-top:14px}
.fp-mute{font:italic 13px/1.5 var(--serif,Georgia);text-align:center;color:#4a3320;margin:14px 0 2px}
.fp-mark{position:absolute;right:10px;bottom:8px;width:74px;opacity:.85;transform:rotate(-12deg);filter:grayscale(1) contrast(1.4) brightness(.35);mix-blend-mode:multiply}
.fp-mark svg{width:100%;height:auto}
.fp-bolt{position:absolute;top:4px;right:-112px;width:150px;height:14px;transform:rotate(-16deg);transform-origin:12% 50%;animation:fp-bolt 1.25s cubic-bezier(.6,0,.2,1) both;z-index:3;pointer-events:none}
.fp-bolt:before{content:"";position:absolute;left:22px;right:0;top:6px;height:3px;background:linear-gradient(90deg,#8a6a3a,#3b2a18)}
.fp-bolt:after{content:"";position:absolute;left:0;top:0;border-right:24px solid #d9b86d;border-top:7px solid transparent;border-bottom:7px solid transparent;filter:drop-shadow(0 0 4px #ffe0a0)}
.fp-bolt i{position:absolute;right:4px;top:1px;width:22px;height:12px;background:linear-gradient(200deg,#111822 50%,#d9b86d);clip-path:polygon(100% 0,0 40%,0 60%,100% 100%,78% 50%)}
.fp-reticle{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px;border:2px solid #e05a3a;border-radius:50%;box-shadow:0 0 18px #e05a3a66;pointer-events:none;animation:fp-reticle 2.6s ease-in-out both .4s}
.fp-reticle:before,.fp-reticle:after{content:"";position:absolute;background:#e05a3a}
.fp-reticle:before{left:50%;top:-14px;bottom:-14px;width:2px;margin-left:-1px}
.fp-reticle:after{top:50%;left:-14px;right:-14px;height:2px;margin-top:-1px}
.fp-hunter{grid-column:3;justify-self:start;width:min(200px,24vw);color:#d9b86d;filter:drop-shadow(0 0 24px #d9b86d33);animation:fp-hunter 1.6s ease-out both .5s}
.fp-hunter svg{width:100%;height:auto}
.fp-coin{grid-column:1;justify-self:end;width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1c0,#e1b54f 45%,#8a6420);box-shadow:0 0 0 3px #6a4a18 inset,0 10px 30px #000a,0 0 30px #e1b54f55;display:grid;place-items:center;color:#3a2410;animation:fp-coin 2.2s cubic-bezier(.3,.7,.3,1) both .3s}
.fp-coin svg{width:62%;filter:brightness(.25)}
.fp-coin{position:relative}
.fp-coin small{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;font:700 9px var(--mono,monospace);letter-spacing:.2em;color:#c9a65e;text-transform:uppercase;text-align:center;width:120px}
.fp-actions{grid-column:1/-1;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.fp-actions button#finchAccept{padding:14px 26px;border:1px solid #f0cf86;background:linear-gradient(180deg,#e7c477,#b98d3e);color:#1a1208;font:800 12px var(--ui-font,system-ui);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 22px #e7c47755}
.fp-actions button#finchDecline{padding:14px 22px;border:1px solid #5a5a4e;background:#0b1117;color:#cfc6b2;font:700 12px var(--ui-font,system-ui);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.fp-actions #finchStatus{flex-basis:100%;text-align:center;color:#c8b48c;font:12px var(--ui-font,system-ui);margin:0}
.fp-feather{position:absolute;top:-8%;left:var(--x);width:8px;height:32px;border-radius:90% 0 90% 0;background:linear-gradient(140deg,#e5c582,#111b25 75%);opacity:0;animation:finch-feather 7s ease-in infinite;animation-delay:var(--d);pointer-events:none}
@keyframes fp-rain{to{background-position:-30px 60px}}
@keyframes fp-poster-in{from{opacity:0;transform:rotate(-9deg) translateY(30px) scale(.92)}to{opacity:1;transform:rotate(-2.4deg)}}
@keyframes fp-shudder{0%{transform:rotate(-2.4deg)}25%{transform:rotate(-1deg) translateX(4px)}55%{transform:rotate(-3.3deg) translateX(-2px)}100%{transform:rotate(-2.4deg)}}
@keyframes fp-bolt{0%{transform:translateX(70vw) rotate(-16deg);opacity:0}55%{opacity:1}80%{transform:translateX(-8px) rotate(-16deg)}100%{transform:translateX(0) rotate(-16deg)}}
@keyframes fp-reticle{0%{transform:translate(-160px,120px) scale(1.6);opacity:0}20%{opacity:.9}55%{transform:translate(90px,-60px) scale(1.2)}85%{transform:translate(0,-30px) scale(.82)}100%{transform:translate(0,-30px) scale(.7);opacity:.85}}
@keyframes fp-hunter{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes fp-coin{0%{transform:translateY(-60px) rotateY(0);opacity:0}15%{opacity:1}70%{transform:translateY(8px) rotateY(1440deg)}85%{transform:translateY(-6px) rotateY(1440deg)}100%{transform:translateY(0) rotateY(1440deg)}}
@media(max-width:760px){.fp-wrap{grid-template-columns:1fr;justify-items:center}.fp-posterbox{grid-column:1}.fp-hunter,.fp-coin{display:none}.fp-moon{width:70px;height:70px}}
@media(prefers-reduced-motion:reduce){.fp-wrap *,.fp-rain{animation:none!important}.fp-feather{display:none}.fp-bolt{transform:rotate(-16deg)}}
/* in the match: the WANTED tag on the hunted hero, her crossbow mark, the ledger strip */
body.finch-hunted #phero{position:relative}
body.finch-hunted #phero::after{content:"WANTED";position:absolute;left:50%;top:-12px;transform:translateX(-50%) rotate(-4deg);z-index:6;padding:2px 8px;background:linear-gradient(180deg,#efe0bb,#c9b37a);color:#3a1c0c;font:900 10px/1.4 var(--serif,Georgia);letter-spacing:.16em;box-shadow:0 2px 6px #000a;border:1px solid #6b4a24;pointer-events:none;animation:fp-tag .6s cubic-bezier(.2,.9,.3,1.3) both}
body.finch-hunted #ehero{position:relative}
body.finch-hunted #ehero::after{content:"";position:absolute;left:-6px;top:-6px;width:30px;height:30px;z-index:6;border-radius:50%;background:#0b1117 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20aria-hidden%3D%22true%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23e9c96f%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2026%20Q32%206%2054%2026%22%2F%3E%3Cpath%20d%3D%22M10%2026%20L32%2034%20L54%2026%22%2F%3E%3Cpath%20d%3D%22M32%2012%20L32%2058%22%2F%3E%3Cpath%20d%3D%22M27%2052%20L32%2058%20L37%2052%22%2F%3E%3Cpath%20d%3D%22M26%2040%20h12%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M32%204%20l4%209%20h-8z%22%20fill%3D%22%23e9c96f%22%2F%3E%3C%2Fsvg%3E") center/72% no-repeat;border:1px solid #d9b86d;box-shadow:0 0 12px #d9b86d66;pointer-events:none}
#finchAura[hidden],#finchAura.fp-ledger[hidden]{display:none!important}
#finchAura.fp-ledger{display:flex;align-items:center;gap:10px;text-align:left;padding:7px 14px 7px 10px;border:1px solid #c9a65e;background:linear-gradient(90deg,#1a140b,#0a1119 40%);box-shadow:0 6px 18px #000a}
#finchAura.fp-ledger .fp-ledger-icon{width:26px;height:26px;color:#e9c96f;flex:none}
#finchAura.fp-ledger .fp-ledger-icon svg{width:100%;height:100%}
#finchAura.fp-ledger b{color:#f1d58e}
.fp-stamp{position:fixed;left:50%;top:38%;z-index:30000;transform:translate(-50%,-50%) rotate(-8deg);padding:12px 30px;border:5px double #a8321e;color:#a8321e;font:900 clamp(40px,7vw,76px)/1 var(--serif,Georgia);letter-spacing:.12em;background:#efe0bbe6;pointer-events:none;animation:fp-stamp .5s cubic-bezier(.2,1.4,.3,1) both,fp-fade 1s ease-in 2.6s forwards;box-shadow:0 10px 30px #000a}
@keyframes fp-tag{from{transform:translateX(-50%) rotate(-30deg) scale(2);opacity:0}to{transform:translateX(-50%) rotate(-4deg) scale(1);opacity:1}}
@keyframes fp-stamp{from{transform:translate(-50%,-50%) rotate(-8deg) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) rotate(-8deg) scale(1);opacity:1}}
@keyframes fp-fade{to{opacity:0}}

.arcane-heal{display:inline-block;color:#dcffe6;font-weight:800;text-shadow:0 0 4px #5fe3a1,0 0 10px #2fb77a}
.arcane-heal i{font:700 7px var(--mono);color:#b9f5d2;margin-left:3px}
#tip .arcane-damage i,#tip .arcane-heal i{font-size:9px}
/* the one-line breakdown under a spell's text in the preview */
.arcane-sum{margin:6px 0 2px;padding:6px 8px;border:1px solid #5a4a8a;border-radius:6px;background:linear-gradient(90deg,#1a1430,#111726);
  font:600 11px/1.45 var(--mono);color:#d9ccff}
.arcane-sum b{color:#bff8ff;text-shadow:0 0 6px #745cff}
.arcane-sum .heal{color:#b9f5d2;text-shadow:none}
.arcane-sum small{display:block;margin-top:2px;color:#9a8fbf;font-size:10px}

#tip .made-by{margin-top:8px;padding:6px 9px;border-top:1px dashed #3a4256;font:600 10px/1.4 var(--mono);letter-spacing:.06em;color:#9aa6bd}
#tip .made-by b{color:#e6c377;letter-spacing:.02em}
#tip .made-by.plundered b{color:#7fd8e8}
#tip .made-by.unknown{color:#7b859a;font-style:italic}

/* the mask on a minion's face: a mark, drawn over the art */
.m .sv-mask-plate{position:absolute;left:50%;top:13%;width:44%;aspect-ratio:5/6;transform:translateX(-50%);z-index:6;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20120%22%3E%3Cpath%20d%3D%22M50%204C24%204%209%2026%2010%2054c1%2030%2020%2060%2040%2062%2020-2%2039-32%2040-62C91%2026%2076%204%2050%204z%22%20fill%3D%22%23c9bda9%22%20stroke%3D%22%238a7a62%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M50%208C27%208%2014%2028%2015%2054c1%2027%2018%2054%2035%2057%2017-3%2034-30%2035-57C86%2028%2073%208%2050%208z%22%20fill%3D%22%23e6ddcf%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2238%22%20rx%3D%2224%22%20ry%3D%2228%22%20fill%3D%22%23f7f2e8%22%2F%3E%3Cellipse%20cx%3D%2241%22%20cy%3D%2231%22%20rx%3D%2212%22%20ry%3D%2213%22%20fill%3D%22%23fffdf8%22%2F%3E%3Cpath%20d%3D%22M27%2052c6-6%2015-6%2021%200-6%205-15%205-21%200zM52%2052c6-6%2015-6%2021%200-6%205-15%205-21%200z%22%20fill%3D%22%231a1510%22%2F%3E%3Cpath%20d%3D%22M50%206l-3%2018%206%2010-5%2016M66%2020l-8%2012%203%2012M34%2088l8-10%2010%204%206-9M76%2070l-9%206%202%2012%22%20fill%3D%22none%22%20stroke%3D%22%23d8a43a%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M44%2078c4%203%208%203%2012%200%22%20fill%3D%22none%22%20stroke%3D%22%239c8c74%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;filter:drop-shadow(0 2px 3px #000c) drop-shadow(0 0 5px #fff4dc66);
  animation:svMaskSet .6s cubic-bezier(.2,.9,.3,1) both}
.m .sv-mask-plate::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,#fff9ea99 50%,transparent 60%);background-size:260% 100%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20120%22%3E%3Cpath%20d%3D%22M50%204C24%204%209%2026%2010%2054c1%2030%2020%2060%2040%2062%2020-2%2039-32%2040-62C91%2026%2076%204%2050%204z%22%20fill%3D%22%23c9bda9%22%20stroke%3D%22%238a7a62%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M50%208C27%208%2014%2028%2015%2054c1%2027%2018%2054%2035%2057%2017-3%2034-30%2035-57C86%2028%2073%208%2050%208z%22%20fill%3D%22%23e6ddcf%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2238%22%20rx%3D%2224%22%20ry%3D%2228%22%20fill%3D%22%23f7f2e8%22%2F%3E%3Cellipse%20cx%3D%2241%22%20cy%3D%2231%22%20rx%3D%2212%22%20ry%3D%2213%22%20fill%3D%22%23fffdf8%22%2F%3E%3Cpath%20d%3D%22M27%2052c6-6%2015-6%2021%200-6%205-15%205-21%200zM52%2052c6-6%2015-6%2021%200-6%205-15%205-21%200z%22%20fill%3D%22%231a1510%22%2F%3E%3Cpath%20d%3D%22M50%206l-3%2018%206%2010-5%2016M66%2020l-8%2012%203%2012M34%2088l8-10%2010%204%206-9M76%2070l-9%206%202%2012%22%20fill%3D%22none%22%20stroke%3D%22%23d8a43a%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M44%2078c4%203%208%203%2012%200%22%20fill%3D%22none%22%20stroke%3D%22%239c8c74%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20120%22%3E%3Cpath%20d%3D%22M50%204C24%204%209%2026%2010%2054c1%2030%2020%2060%2040%2062%2020-2%2039-32%2040-62C91%2026%2076%204%2050%204z%22%20fill%3D%22%23c9bda9%22%20stroke%3D%22%238a7a62%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M50%208C27%208%2014%2028%2015%2054c1%2027%2018%2054%2035%2057%2017-3%2034-30%2035-57C86%2028%2073%208%2050%208z%22%20fill%3D%22%23e6ddcf%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2238%22%20rx%3D%2224%22%20ry%3D%2228%22%20fill%3D%22%23f7f2e8%22%2F%3E%3Cellipse%20cx%3D%2241%22%20cy%3D%2231%22%20rx%3D%2212%22%20ry%3D%2213%22%20fill%3D%22%23fffdf8%22%2F%3E%3Cpath%20d%3D%22M27%2052c6-6%2015-6%2021%200-6%205-15%205-21%200zM52%2052c6-6%2015-6%2021%200-6%205-15%205-21%200z%22%20fill%3D%22%231a1510%22%2F%3E%3Cpath%20d%3D%22M50%206l-3%2018%206%2010-5%2016M66%2020l-8%2012%203%2012M34%2088l8-10%2010%204%206-9M76%2070l-9%206%202%2012%22%20fill%3D%22none%22%20stroke%3D%22%23d8a43a%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M44%2078c4%203%208%203%2012%200%22%20fill%3D%22none%22%20stroke%3D%22%239c8c74%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;animation:svMaskGleam 4.2s ease-in-out infinite}
/* a minion Sveltana took: the gold seams burn, and it stands in front of your hero */
.m.sv-bound .sv-mask-plate{filter:drop-shadow(0 2px 3px #000c) drop-shadow(0 0 8px #e8b04acc)}
.m .sv-bound-tag{position:absolute;left:50%;top:5px;transform:translateX(-50%);z-index:7;padding:1px 6px;border-radius:99px;
  border:1px solid #c79a3c;background:#1b150ce6;font:800 7px var(--mono);font-style:normal;letter-spacing:.14em;color:#f3d38a;pointer-events:none;white-space:nowrap}
@keyframes svMaskSet{from{opacity:0;transform:translateX(-50%) scale(1.5) rotate(-8deg)}to{opacity:1;transform:translateX(-50%)}}
@keyframes svMaskGleam{0%,70%{background-position:130% 0}100%{background-position:-30% 0}}

/* the hero while a bound minion stands in front of it: a pale porcelain ring with gold seams */
.hero.porcelain-guard{border-color:#efe6d6;box-shadow:0 0 0 3px #e9dfcc55,0 0 26px #fff1d266,inset 0 0 20px #e9dfcc33}
.hero.porcelain-guard::after{content:"";position:absolute;inset:-9px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 12deg,transparent 0 26deg,#d8a43a 27deg 29deg,transparent 30deg 58deg);
  -webkit-mask:radial-gradient(circle,transparent 0 60%,#000 62% 68%,transparent 70%);mask:radial-gradient(circle,transparent 0 60%,#000 62% 68%,transparent 70%);
  animation:svSeamTurn 14s linear infinite}
.thero.porcelain-guard{border-color:#efe6d6;box-shadow:0 0 0 2px #e9dfcc55,0 0 14px #fff1d266,inset 0 0 10px #e9dfcc33}
.thero.porcelain-guard::after{content:"";position:absolute;inset:-5px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 12deg,transparent 0 26deg,#d8a43a 27deg 29deg,transparent 30deg 58deg);
  -webkit-mask:radial-gradient(circle,transparent 0 60%,#000 62% 68%,transparent 70%);mask:radial-gradient(circle,transparent 0 60%,#000 62% 68%,transparent 70%);
  animation:svSeamTurn 14s linear infinite}
@keyframes svSeamTurn{to{transform:rotate(360deg)}}

/* The Hundred Faces: a little porcelain mask holding the count */
.sv-faces{position:absolute;z-index:8;display:grid;place-items:center;pointer-events:auto;cursor:help;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20120%22%3E%3Cpath%20d%3D%22M50%204C24%204%209%2026%2010%2054c1%2030%2020%2060%2040%2062%2020-2%2039-32%2040-62C91%2026%2076%204%2050%204z%22%20fill%3D%22%23c9bda9%22%20stroke%3D%22%238a7a62%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M50%208C27%208%2014%2028%2015%2054c1%2027%2018%2054%2035%2057%2017-3%2034-30%2035-57C86%2028%2073%208%2050%208z%22%20fill%3D%22%23e6ddcf%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2238%22%20rx%3D%2224%22%20ry%3D%2228%22%20fill%3D%22%23f7f2e8%22%2F%3E%3Cellipse%20cx%3D%2241%22%20cy%3D%2231%22%20rx%3D%2212%22%20ry%3D%2213%22%20fill%3D%22%23fffdf8%22%2F%3E%3Cpath%20d%3D%22M27%2052c6-6%2015-6%2021%200-6%205-15%205-21%200zM52%2052c6-6%2015-6%2021%200-6%205-15%205-21%200z%22%20fill%3D%22%231a1510%22%2F%3E%3Cpath%20d%3D%22M50%206l-3%2018%206%2010-5%2016M66%2020l-8%2012%203%2012M34%2088l8-10%2010%204%206-9M76%2070l-9%206%202%2012%22%20fill%3D%22none%22%20stroke%3D%22%23d8a43a%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M44%2078c4%203%208%203%2012%200%22%20fill%3D%22none%22%20stroke%3D%22%239c8c74%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;color:#2a2016;font:900 13px Georgia,serif;text-shadow:0 1px 0 #fff8}
.hero>.sv-faces{left:-14px;top:-12px;width:30px;height:36px;padding-top:9px}
.thero>.sv-faces{left:-11px;top:-10px;width:20px;height:24px;padding-top:6px;font-size:10px}
.sv-faces.gain{animation:svFaceGain .5s ease}
@keyframes svFaceGain{40%{transform:scale(1.35) rotate(-6deg);filter:drop-shadow(0 0 8px #f3d38a)}}

/* Her entrance: the mask forms out of the dark, gold seams crack outward
   through it, and the faces she has worn turn slowly around her. */
.rw-sveltana{--rw:#f3e6cf;background:radial-gradient(ellipse at 50% 42%,#3b3226,#0c0907 58%,#020101)}
.rw-sveltana-mask{left:50%;top:44%;width:min(38vmin,380px);aspect-ratio:5/6;transform:translate(-50%,-50%);z-index:5;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20120%22%3E%3Cpath%20d%3D%22M50%204C24%204%209%2026%2010%2054c1%2030%2020%2060%2040%2062%2020-2%2039-32%2040-62C91%2026%2076%204%2050%204z%22%20fill%3D%22%23c9bda9%22%20stroke%3D%22%238a7a62%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M50%208C27%208%2014%2028%2015%2054c1%2027%2018%2054%2035%2057%2017-3%2034-30%2035-57C86%2028%2073%208%2050%208z%22%20fill%3D%22%23e6ddcf%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2238%22%20rx%3D%2224%22%20ry%3D%2228%22%20fill%3D%22%23f7f2e8%22%2F%3E%3Cellipse%20cx%3D%2241%22%20cy%3D%2231%22%20rx%3D%2212%22%20ry%3D%2213%22%20fill%3D%22%23fffdf8%22%2F%3E%3Cpath%20d%3D%22M27%2052c6-6%2015-6%2021%200-6%205-15%205-21%200zM52%2052c6-6%2015-6%2021%200-6%205-15%205-21%200z%22%20fill%3D%22%231a1510%22%2F%3E%3Cpath%20d%3D%22M50%206l-3%2018%206%2010-5%2016M66%2020l-8%2012%203%2012M34%2088l8-10%2010%204%206-9M76%2070l-9%206%202%2012%22%20fill%3D%22none%22%20stroke%3D%22%23d8a43a%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M44%2078c4%203%208%203%2012%200%22%20fill%3D%22none%22%20stroke%3D%22%239c8c74%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;filter:drop-shadow(0 0 44px #fff1d24d) drop-shadow(0 18px 30px #000c);
  animation:rwSvMask 3.5s cubic-bezier(.2,.8,.3,1) forwards}
.rw-sveltana-glint{left:50%;top:44%;width:min(38vmin,380px);aspect-ratio:5/6;transform:translate(-50%,-50%);z-index:6;
  background:linear-gradient(115deg,transparent 42%,#fffbee 50%,transparent 58%);background-size:260% 100%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20120%22%3E%3Cpath%20d%3D%22M50%204C24%204%209%2026%2010%2054c1%2030%2020%2060%2040%2062%2020-2%2039-32%2040-62C91%2026%2076%204%2050%204z%22%20fill%3D%22%23c9bda9%22%20stroke%3D%22%238a7a62%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M50%208C27%208%2014%2028%2015%2054c1%2027%2018%2054%2035%2057%2017-3%2034-30%2035-57C86%2028%2073%208%2050%208z%22%20fill%3D%22%23e6ddcf%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2238%22%20rx%3D%2224%22%20ry%3D%2228%22%20fill%3D%22%23f7f2e8%22%2F%3E%3Cellipse%20cx%3D%2241%22%20cy%3D%2231%22%20rx%3D%2212%22%20ry%3D%2213%22%20fill%3D%22%23fffdf8%22%2F%3E%3Cpath%20d%3D%22M27%2052c6-6%2015-6%2021%200-6%205-15%205-21%200zM52%2052c6-6%2015-6%2021%200-6%205-15%205-21%200z%22%20fill%3D%22%231a1510%22%2F%3E%3Cpath%20d%3D%22M50%206l-3%2018%206%2010-5%2016M66%2020l-8%2012%203%2012M34%2088l8-10%2010%204%206-9M76%2070l-9%206%202%2012%22%20fill%3D%22none%22%20stroke%3D%22%23d8a43a%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M44%2078c4%203%208%203%2012%200%22%20fill%3D%22none%22%20stroke%3D%22%239c8c74%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20120%22%3E%3Cpath%20d%3D%22M50%204C24%204%209%2026%2010%2054c1%2030%2020%2060%2040%2062%2020-2%2039-32%2040-62C91%2026%2076%204%2050%204z%22%20fill%3D%22%23c9bda9%22%20stroke%3D%22%238a7a62%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M50%208C27%208%2014%2028%2015%2054c1%2027%2018%2054%2035%2057%2017-3%2034-30%2035-57C86%2028%2073%208%2050%208z%22%20fill%3D%22%23e6ddcf%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2238%22%20rx%3D%2224%22%20ry%3D%2228%22%20fill%3D%22%23f7f2e8%22%2F%3E%3Cellipse%20cx%3D%2241%22%20cy%3D%2231%22%20rx%3D%2212%22%20ry%3D%2213%22%20fill%3D%22%23fffdf8%22%2F%3E%3Cpath%20d%3D%22M27%2052c6-6%2015-6%2021%200-6%205-15%205-21%200zM52%2052c6-6%2015-6%2021%200-6%205-15%205-21%200z%22%20fill%3D%22%231a1510%22%2F%3E%3Cpath%20d%3D%22M50%206l-3%2018%206%2010-5%2016M66%2020l-8%2012%203%2012M34%2088l8-10%2010%204%206-9M76%2070l-9%206%202%2012%22%20fill%3D%22none%22%20stroke%3D%22%23d8a43a%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M44%2078c4%203%208%203%2012%200%22%20fill%3D%22none%22%20stroke%3D%22%239c8c74%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  opacity:0;animation:rwSvGlint 3.5s ease forwards}
.rw-sveltana-seam{left:50%;top:44%;width:3px;height:0;z-index:4;transform-origin:50% 0;transform:translateX(-50%) rotate(var(--r));
  background:linear-gradient(#fff3c4,#e1ae44 35%,#a36f18 75%,transparent);box-shadow:0 0 12px #e8b04a;border-radius:2px;
  animation:rwSvSeam 3.5s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:var(--d)}
.rw-sveltana-ring{left:50%;top:44%;width:0;height:0;z-index:3;animation:rwSvRing 3.8s linear forwards}
.rw-sveltana-face{left:0;top:0;width:min(8vmin,78px);aspect-ratio:5/6;opacity:0;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20120%22%3E%3Cpath%20d%3D%22M50%204C24%204%209%2026%2010%2054c1%2030%2020%2060%2040%2062%2020-2%2039-32%2040-62C91%2026%2076%204%2050%204z%22%20fill%3D%22%23c9bda9%22%20stroke%3D%22%238a7a62%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M50%208C27%208%2014%2028%2015%2054c1%2027%2018%2054%2035%2057%2017-3%2034-30%2035-57C86%2028%2073%208%2050%208z%22%20fill%3D%22%23e6ddcf%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2238%22%20rx%3D%2224%22%20ry%3D%2228%22%20fill%3D%22%23f7f2e8%22%2F%3E%3Cellipse%20cx%3D%2241%22%20cy%3D%2231%22%20rx%3D%2212%22%20ry%3D%2213%22%20fill%3D%22%23fffdf8%22%2F%3E%3Cpath%20d%3D%22M27%2052c6-6%2015-6%2021%200-6%205-15%205-21%200zM52%2052c6-6%2015-6%2021%200-6%205-15%205-21%200z%22%20fill%3D%22%231a1510%22%2F%3E%3Cpath%20d%3D%22M50%206l-3%2018%206%2010-5%2016M66%2020l-8%2012%203%2012M34%2088l8-10%2010%204%206-9M76%2070l-9%206%202%2012%22%20fill%3D%22none%22%20stroke%3D%22%23d8a43a%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M44%2078c4%203%208%203%2012%200%22%20fill%3D%22none%22%20stroke%3D%22%239c8c74%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;filter:grayscale(.35) brightness(.8) drop-shadow(0 0 10px #fff1d233);
  transform:translate(-50%,-50%) rotate(var(--r)) translateY(calc(-1 * min(31vmin,310px))) rotate(calc(-1 * var(--r)));
  animation:rwSvFace 3.5s ease forwards;animation-delay:var(--d)}
@keyframes rwSvMask{0%{opacity:0;transform:translate(-50%,-50%) scale(1.7);filter:blur(14px)}32%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 0 44px #fff1d24d) drop-shadow(0 18px 30px #000c)}84%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.95)}}
@keyframes rwSvGlint{0%,34%{opacity:0;background-position:130% 0}46%{opacity:1}62%,100%{opacity:0;background-position:-30% 0}}
@keyframes rwSvSeam{0%{opacity:0;height:0}18%{opacity:1}40%{height:min(24vmin,240px)}78%{opacity:1}100%{opacity:0;height:min(26vmin,260px)}}
@keyframes rwSvFace{0%{opacity:0}22%,78%{opacity:.9}100%{opacity:0}}
@keyframes rwSvRing{to{transform:rotate(36deg)}}
/* while she stands, a few pale masks drift in the dark behind the board */
.amb.run-sveltana{background:radial-gradient(circle at 50% 30%,#f3e6cf14,transparent 45%),#0b0806cc}
.rw-sveltana-drift{left:var(--x);top:var(--y);width:26px;aspect-ratio:5/6;opacity:.22;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20120%22%3E%3Cpath%20d%3D%22M50%204C24%204%209%2026%2010%2054c1%2030%2020%2060%2040%2062%2020-2%2039-32%2040-62C91%2026%2076%204%2050%204z%22%20fill%3D%22%23c9bda9%22%20stroke%3D%22%238a7a62%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M50%208C27%208%2014%2028%2015%2054c1%2027%2018%2054%2035%2057%2017-3%2034-30%2035-57C86%2028%2073%208%2050%208z%22%20fill%3D%22%23e6ddcf%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2238%22%20rx%3D%2224%22%20ry%3D%2228%22%20fill%3D%22%23f7f2e8%22%2F%3E%3Cellipse%20cx%3D%2241%22%20cy%3D%2231%22%20rx%3D%2212%22%20ry%3D%2213%22%20fill%3D%22%23fffdf8%22%2F%3E%3Cpath%20d%3D%22M27%2052c6-6%2015-6%2021%200-6%205-15%205-21%200zM52%2052c6-6%2015-6%2021%200-6%205-15%205-21%200z%22%20fill%3D%22%231a1510%22%2F%3E%3Cpath%20d%3D%22M50%206l-3%2018%206%2010-5%2016M66%2020l-8%2012%203%2012M34%2088l8-10%2010%204%206-9M76%2070l-9%206%202%2012%22%20fill%3D%22none%22%20stroke%3D%22%23d8a43a%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M44%2078c4%203%208%203%2012%200%22%20fill%3D%22none%22%20stroke%3D%22%239c8c74%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;animation:rwSvDrift 9s ease-in-out infinite}
@keyframes rwSvDrift{50%{transform:translateY(-18px);opacity:.4}}
@media (prefers-reduced-motion:reduce){.rw-sveltana-mask,.rw-sveltana-glint,.rw-sveltana-seam,.rw-sveltana-face,.rw-sveltana-ring,.rw-sveltana-drift{animation:none}}

/* The guide: what she does and what to do next, for the player who holds her. */
.sv-guide{position:fixed;right:14px;top:196px;z-index:60;width:min(250px,calc(100vw - 28px));display:none;
  border:1px solid #6d5a37;border-radius:10px;background:linear-gradient(170deg,#1d1811f2,#0d0b08f2);box-shadow:0 14px 36px #000b,inset 0 0 0 1px #f3e6cf14;
  color:#e2d6bf;font:600 11px/1.45 var(--mono)}
.sv-guide.on{display:block;animation:svGuideIn .35s ease both}
/* four-seat placement is computed against your own seat (see svGuide) */
@keyframes svGuideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.sv-guide-head{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;cursor:pointer;border-bottom:1px solid #6d5a3766}
.sv-guide-head:focus-visible{outline:2px solid #d8a43a;outline-offset:-2px;border-radius:10px}
.sv-guide-mask{width:22px;height:26px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20120%22%3E%3Cpath%20d%3D%22M50%204C24%204%209%2026%2010%2054c1%2030%2020%2060%2040%2062%2020-2%2039-32%2040-62C91%2026%2076%204%2050%204z%22%20fill%3D%22%23c9bda9%22%20stroke%3D%22%238a7a62%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M50%208C27%208%2014%2028%2015%2054c1%2027%2018%2054%2035%2057%2017-3%2034-30%2035-57C86%2028%2073%208%2050%208z%22%20fill%3D%22%23e6ddcf%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2238%22%20rx%3D%2224%22%20ry%3D%2228%22%20fill%3D%22%23f7f2e8%22%2F%3E%3Cellipse%20cx%3D%2241%22%20cy%3D%2231%22%20rx%3D%2212%22%20ry%3D%2213%22%20fill%3D%22%23fffdf8%22%2F%3E%3Cpath%20d%3D%22M27%2052c6-6%2015-6%2021%200-6%205-15%205-21%200zM52%2052c6-6%2015-6%2021%200-6%205-15%205-21%200z%22%20fill%3D%22%231a1510%22%2F%3E%3Cpath%20d%3D%22M50%206l-3%2018%206%2010-5%2016M66%2020l-8%2012%203%2012M34%2088l8-10%2010%204%206-9M76%2070l-9%206%202%2012%22%20fill%3D%22none%22%20stroke%3D%22%23d8a43a%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M44%2078c4%203%208%203%2012%200%22%20fill%3D%22none%22%20stroke%3D%22%239c8c74%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;filter:drop-shadow(0 0 6px #fff1d255)}
.sv-guide-head b{display:block;font:700 13px Georgia,serif;color:#f6ecd8;letter-spacing:.02em}
.sv-guide-head small{display:block;font:700 8px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#c9a45c}
.sv-guide-count{font:900 18px Georgia,serif;font-style:normal;color:#f3d38a;text-shadow:0 0 10px #d8a43a66}
.sv-guide-body{padding:8px 10px 10px;display:grid;gap:7px}
.sv-guide-row{display:flex;flex-wrap:wrap;gap:6px}
.sv-guide-row span{padding:2px 7px;border:1px solid #4d4130;border-radius:99px;background:#15110b;color:#cdbf9f;font-size:10px}
.sv-guide-row b{color:#f6ecd8}
.sv-guide p{margin:0}
.sv-guide-where{color:#bfb296}
.sv-guide-where b,.sv-guide-next b{color:#f6ecd8}
.sv-guide-next{padding:7px 8px;border-left:2px solid #d8a43a;border-radius:4px;background:#2a2112;color:#efe3c8}
.sv-guide-next>span{display:block;margin-bottom:2px;font:800 8px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#d8a43a}
.sv-guide-how summary{cursor:pointer;font:800 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#c9a45c}
.sv-guide-how ul{margin:6px 0 0;padding-left:15px;display:grid;gap:4px;color:#bfb296;font-size:10px}
.sv-guide-how b{color:#efe3c8}
/* collapsed: only the mask and the count remain */
.sv-guide.collapsed{width:auto}
.sv-guide.collapsed .sv-guide-body,.sv-guide.collapsed .sv-guide-head span{display:none}
.sv-guide.collapsed .sv-guide-head{grid-template-columns:auto auto;border-bottom:0}
@media (max-width:700px){.sv-guide{top:auto;bottom:150px;right:8px}}
@media (prefers-reduced-motion:reduce){.sv-guide.on{animation:none}}

/* the persona line in the preview: she is one card with two lives */
#tip .sv-persona{margin-top:7px;padding:6px 9px;border-left:2px solid #d8a43a;background:linear-gradient(90deg,#1c1710,transparent);
  font:600 11px/1.45 var(--mono);color:#d9ccb2}
#tip .sv-persona b{color:#f3e2bd}
@media (prefers-reduced-motion:reduce){.m .sv-mask-plate,.m .sv-mask-plate::after,.hero.porcelain-guard::after,.thero.porcelain-guard::after,.sv-faces.gain{animation:none}}

/* ===================== The Answer: what it is waiting for ===================== */
/* A small pill that stays out of the way, even over a four-seat table; click it for the details. */
.answer-watch{position:fixed;left:50%;top:6px;transform:translateX(-50%);z-index:60;display:none;
  max-width:min(460px,calc(100vw - 32px));pointer-events:none;text-align:center;
  color:#e8e2ff;font:12px/1.45 var(--ui-font,system-ui,sans-serif)}
.answer-watch.on{display:block}
.answer-watch b{color:#fff}
.answer-watch .aw-pill{pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:2px 10px;border-radius:999px;border:1px solid rgba(186,160,255,.45);background:rgba(12,10,22,.86);
  color:#d9ccff;font:600 10px/1.5 var(--ui-font,system-ui,sans-serif);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 3px 12px rgba(0,0,0,.4)}
.answer-watch .aw-pill:hover,.answer-watch .aw-pill:focus-visible{border-color:#bda8ff;color:#fff;outline:none}
.answer-watch .aw-pill i{font-style:normal;opacity:.7;transition:transform .15s}
.answer-watch.open .aw-pill i{transform:rotate(180deg)}
.answer-watch .aw-body{display:none;pointer-events:auto;margin-top:5px;padding:8px 14px 9px;border-radius:8px;
  background:rgba(12,10,22,.94);border:1px solid rgba(186,160,255,.45);box-shadow:0 6px 24px rgba(0,0,0,.45)}
.answer-watch.open .aw-body{display:block}
.answer-watch .aw-lead{display:block;margin-top:2px;color:#cfc4f5}
.answer-watch .aw-inf{color:#d9a2ff;font-weight:700}
@media (max-width:640px){.answer-watch{top:4px}.answer-watch .aw-body{font-size:11px;padding:6px 10px}}

/* ===================== The Opaline Ark: crew ===================== */
.m .ark-crew-tag{position:absolute;left:5px;top:5px;z-index:4;pointer-events:none;
  padding:1px 6px;border-radius:3px;font:700 8px/1.5 var(--ui-font,system-ui,sans-serif);letter-spacing:.14em;
  color:#fff7e6;background:linear-gradient(90deg,#8fd3ff,#e3b6ff,#ffd59a);box-shadow:0 0 8px rgba(227,182,255,.55);text-shadow:0 1px 1px rgba(0,0,0,.5)}
.m.ark-shielded{box-shadow:0 0 0 2px rgba(227,182,255,.65),0 0 18px rgba(143,211,255,.45)}

/* ---- Eyes of the Forest: enemy spells seen ---- */
.eyes-count{position:absolute;right:5px;top:5px;z-index:4;pointer-events:auto;padding:1px 6px;border-radius:999px;
  font:700 9px/1.5 var(--ui-font,system-ui,sans-serif);color:#eafbe0;background:rgba(40,70,40,.85);border:1px solid rgba(160,230,150,.6);box-shadow:0 0 8px rgba(120,220,110,.35)}

/* ---- ballista bolts ---- */
.ark-bolt{position:fixed;left:0;top:0;z-index:9600;width:40px;height:4px;margin:-2px 0 0 -40px;transform-origin:100% 50%;pointer-events:none;
  border-radius:3px;background:linear-gradient(90deg,transparent,rgba(227,182,255,.55) 35%,#fff 92%);box-shadow:0 0 10px rgba(143,211,255,.9)}
.ark-bolt::after{content:"";position:absolute;right:-8px;top:-4px;border-left:11px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;filter:drop-shadow(0 0 6px #e3b6ff)}
.ark-bolt.heavy{width:74px;height:7px;margin:-3.5px 0 0 -74px;background:linear-gradient(90deg,transparent,rgba(255,213,154,.6) 30%,#fff 94%);box-shadow:0 0 18px rgba(255,213,154,.95)}
.ark-bolt.heavy::after{right:-13px;top:-7px;border-left-width:17px;border-top-width:10px;border-bottom-width:10px;filter:drop-shadow(0 0 10px #ffd59a)}

/* ---- the entrance ---- */
.ark-stage{position:fixed;inset:0;z-index:9500;pointer-events:none;overflow:hidden;animation:arkIn .5s ease-out both}
.ark-stage.out{animation:arkOut .65s ease-in forwards}
@keyframes arkIn{from{opacity:0}to{opacity:1}}
@keyframes arkOut{to{opacity:0}}
.ark-sky{position:absolute;inset:0;background:radial-gradient(120% 85% at 50% 0%,rgba(46,26,80,.97),rgba(9,10,26,.98) 60%,rgba(4,5,12,.99))}
.ark-aurora{position:absolute;inset:-25%;background:conic-gradient(from 0deg at 50% 30%,rgba(143,211,255,0),rgba(143,211,255,.24),rgba(227,182,255,.28),rgba(255,213,154,.2),rgba(159,240,200,.22),rgba(143,211,255,0));filter:blur(46px);mix-blend-mode:screen;animation:arkAurora 7s linear infinite}
@keyframes arkAurora{to{transform:rotate(360deg)}}
.ark-cloud{position:absolute;left:0;width:48vw;height:13vh;border-radius:50%;background:radial-gradient(closest-side,rgba(214,222,255,.2),transparent);filter:blur(7px);animation:arkCloud 4.4s linear both}
@keyframes arkCloud{from{transform:translateX(80vw)}to{transform:translateX(-50vw)}}
.ark-ship{position:absolute;left:50%;top:14%;width:min(600px,86vw);height:min(320px,46vw);margin-left:calc(min(600px,86vw) / -2);
  animation:arkArrive 1.35s cubic-bezier(.18,.82,.24,1) both,arkBob 3.2s ease-in-out 1.35s infinite}
@keyframes arkArrive{from{transform:translate(-75vw,-55vh) rotate(-10deg) scale(.5);filter:blur(4px)}to{transform:none;filter:none}}
@keyframes arkBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(.9deg)}}
.ark-envelope{position:absolute;left:3%;right:3%;top:0;height:58%;border-radius:50%;overflow:hidden;
  background:linear-gradient(115deg,#8fd3ff,#e3b6ff 22%,#ffd59a 42%,#9ff0c8 60%,#ff9fb8 78%,#8fd3ff);background-size:300% 100%;
  box-shadow:0 0 70px rgba(227,182,255,.55),inset 0 -22px 34px rgba(24,10,44,.5),inset 0 16px 24px rgba(255,255,255,.45);animation:arkShimmer 3.2s linear infinite}
@keyframes arkShimmer{to{background-position:300% 0}}
.ark-ribs{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 36px,rgba(40,20,72,.3) 36px 39px),linear-gradient(transparent 46%,rgba(40,20,72,.35) 47% 50%,transparent 51%)}
.ark-glint{position:absolute;top:-20%;bottom:-20%;width:18%;left:-30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);animation:arkGlint 2.4s ease-in-out .9s infinite}
@keyframes arkGlint{0%{left:-30%}55%,100%{left:120%}}
.ark-banner{position:absolute;top:55%;width:15px;height:48px;background:var(--c);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);transform-origin:top center;opacity:.92;box-shadow:0 0 12px var(--c);animation:arkFlag .85s ease-in-out infinite alternate}
@keyframes arkFlag{from{transform:skewY(-9deg) rotate(5deg)}to{transform:skewY(9deg) rotate(-5deg)}}
.ark-hull{position:absolute;left:19%;right:19%;top:59%;height:27%;display:flex;justify-content:space-around;align-items:center;padding:0 15%;
  background:linear-gradient(#302846,#120e1f);clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);box-shadow:0 0 34px rgba(143,211,255,.4)}
.ark-hull i{width:10px;height:10px;border-radius:50%;background:#ffd59a;box-shadow:0 0 10px #ffd59a;opacity:.35}
.ark-stage.firing .ark-hull i{animation:arkPort .55s ease-out both;animation-delay:calc(var(--i) * 90ms)}
@keyframes arkPort{0%{opacity:.35;transform:scale(1)}30%{opacity:1;transform:scale(2.4);box-shadow:0 0 24px #fff}100%{opacity:.6;transform:scale(1)}}
.ark-beam{position:absolute;top:80%;width:130px;height:62vh;background:linear-gradient(rgba(255,240,210,.34),transparent);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);transform-origin:top center;filter:blur(2px);animation:arkBeam 2.6s ease-in-out infinite alternate}
.ark-beam.l{left:26%}.ark-beam.r{right:26%;animation-delay:-1.3s}
@keyframes arkBeam{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
.ark-title{position:absolute;left:0;right:0;top:64%;text-align:center;font:600 clamp(34px,6vw,78px)/1.05 Georgia,"Times New Roman",serif;letter-spacing:.06em;
  background:linear-gradient(90deg,#8fd3ff,#e3b6ff,#ffd59a,#9ff0c8,#ff9fb8,#8fd3ff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(227,182,255,.6));animation:arkTitle 1s ease-out 1s both,arkShimmer 3s linear infinite}
@keyframes arkTitle{from{opacity:0;transform:translateY(20px);letter-spacing:.34em}to{opacity:1;transform:none;letter-spacing:.06em}}
.ark-sub{position:absolute;left:0;right:0;top:calc(64% + clamp(46px,7.5vw,96px));text-align:center;color:#ece2ff;font:600 12px/1.4 system-ui,sans-serif;letter-spacing:.34em;text-transform:uppercase;animation:arkTitle 1s ease-out 1.4s both}
/* the painted ship: the card art itself, dissolving into the opal sky */
.ark-ship.ark-painted{top:4vh;width:min(86vw,54vh);height:calc(min(86vw,54vh) * 1.5);margin-left:calc(min(86vw,54vh) / -2);
  animation:arkSwoop 1.45s cubic-bezier(.16,.84,.22,1) both,arkBob 3.2s ease-in-out 1.45s infinite}
@keyframes arkSwoop{from{transform:translate(55vw,-65vh) rotate(16deg) scale(.3);filter:blur(7px);opacity:0}45%{opacity:1}to{transform:none;filter:none;opacity:1}}
.ark-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:radial-gradient(ellipse 49% 50% at 50% 46%,#000 42%,rgba(0,0,0,.55) 70%,transparent 100%);mask-image:radial-gradient(ellipse 49% 50% at 50% 46%,#000 42%,rgba(0,0,0,.55) 70%,transparent 100%);
  filter:saturate(1.12) drop-shadow(0 0 40px rgba(227,182,255,.35))}
.ark-sheen{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(143,211,255,.38) 42%,rgba(227,182,255,.45) 50%,rgba(255,213,154,.38) 58%,transparent 68%);background-size:260% 100%;
  -webkit-mask-image:radial-gradient(ellipse 49% 50% at 50% 46%,#000 38%,transparent 95%);mask-image:radial-gradient(ellipse 49% 50% at 50% 46%,#000 38%,transparent 95%);
  animation:arkSheen 2.3s ease-in-out .9s infinite}
@keyframes arkSheen{from{background-position:130% 0}to{background-position:-130% 0}}
.ark-ship.ark-painted .ark-beam{top:68%}
.ark-stage.out .ark-ship.ark-painted{animation:arkPass .7s ease-in forwards}
@keyframes arkPass{to{transform:translate(-28vw,16vh) scale(1.55);opacity:0;filter:blur(5px)}}
.ark-stage.has-art .ark-title{top:auto;bottom:13%;text-shadow:none;filter:drop-shadow(0 0 16px rgba(10,6,24,.9)) drop-shadow(0 0 18px rgba(227,182,255,.55))}
.ark-stage.has-art .ark-sub{top:auto;bottom:calc(13% - 26px)}
.ark-muzzle{position:fixed;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;pointer-events:none;z-index:9550;opacity:0;
  background:radial-gradient(circle,#fff 0 22%,rgba(255,213,154,.9) 40%,rgba(227,182,255,0) 70%);animation:arkMuzzle .45s ease-out both}
@keyframes arkMuzzle{0%{opacity:0;transform:scale(.3)}25%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(.8)}}.ark-stage.reduced *{animation:none!important}
.ark-stage.reduced .ark-ship{top:10%}
@media (max-width:640px){.ark-sub{letter-spacing:.18em;font-size:10px}.ark-banner{width:10px;height:32px}}

/* ===================== hand counter and discard skull ===================== */
.hand-count{display:inline-flex;align-items:center;gap:3px;margin-left:8px;padding:1px 7px;border-radius:999px;vertical-align:middle;
  font:700 10px/1.5 var(--ui-font,system-ui,sans-serif);letter-spacing:.06em;color:#e9e4d4;background:rgba(255,255,255,.08);border:1px solid rgba(233,228,212,.28)}
.hand-count.near{color:#ffd08a;border-color:rgba(255,196,110,.55)}
.hand-count.full{color:#ffb4a8;border-color:rgba(255,120,100,.7);background:rgba(160,40,30,.28)}
.hand-count-float{position:fixed;z-index:40;pointer-events:none;margin:0;transform:translateY(-100%)}
.discard-skull{position:relative;display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:3px 8px 3px 6px;border-radius:8px;cursor:help;
  color:#d9d2c3;background:rgba(10,10,16,.55);border:1px solid rgba(217,210,195,.3);font:700 11px/1 var(--ui-font,system-ui,sans-serif)}
.discard-skull:hover,.discard-skull:focus-visible,.discard-skull.open{border-color:#e3b6ff;color:#fff;outline:none;box-shadow:0 0 10px rgba(227,182,255,.35)}
.discard-skull svg{width:15px;height:15px;display:block}
.tdeckpile + .discard-skull{margin-left:6px}
.discard-pop{position:fixed;z-index:9000;display:none;min-width:190px;max-width:260px;max-height:min(60vh,420px);overflow:auto;padding:9px 10px;border-radius:8px;
  background:rgba(12,11,20,.97);border:1px solid rgba(227,182,255,.4);box-shadow:0 10px 30px rgba(0,0,0,.55);color:#ece6d6;font:12px/1.45 var(--ui-font,system-ui,sans-serif)}
.discard-pop.on{display:block}
.discard-pop h4{margin:0 0 6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#bda8ff}
.discard-pop ol{margin:0;padding:0;list-style:none}
.discard-pop li{display:flex;justify-content:space-between;gap:10px;padding:2px 0;border-top:1px solid rgba(255,255,255,.06)}
.discard-pop li:first-child{border-top:0}
.discard-pop li small{color:#9f96b8}
.discard-pop .empty{color:#9f96b8;font-style:italic}

.lbe{position:fixed;inset:0;pointer-events:none;z-index:69;overflow:hidden}
.lbe>*{position:absolute;left:0;top:0;pointer-events:none;will-change:transform,opacity}
.lbe-ring{border-radius:50%;border:3px solid var(--c);box-shadow:0 0 18px var(--c),inset 0 0 14px var(--c)}
.lbe-sigil{border-radius:50%;border:2px dashed var(--c);box-shadow:0 0 22px var(--c),inset 0 0 22px var(--c)}
.lbe-sigil::before{content:"";position:absolute;inset:14%;border-radius:50%;border:1.5px solid var(--c);opacity:.8}
.lbe-sigil b,.lbe-orbit b{position:absolute;transform:translate(-50%,-50%);color:var(--c);font:700 18px/1 var(--serif);text-shadow:0 0 10px var(--c),0 0 2px #000}
.lbe-orbit{border-radius:50%}
.lbe-beam{height:5px;border-radius:5px;background:linear-gradient(90deg,transparent,var(--c) 12%,#fff 50%,var(--c) 88%,transparent);box-shadow:0 0 14px var(--c);mix-blend-mode:screen}
.lbe-beam.dashed{background:repeating-linear-gradient(90deg,var(--c) 0 10px,transparent 10px 18px);mix-blend-mode:normal}
.lbe-box{overflow:hidden;border-radius:14px}
.lbe-band{position:absolute;top:-10%;height:120%;width:30%;background:linear-gradient(90deg,transparent,var(--c),transparent);filter:blur(5px);transform:skewX(-18deg);mix-blend-mode:screen}
.lbe-tint{border-radius:16px;background:radial-gradient(ellipse at 50% 50%,var(--c),transparent 72%);mix-blend-mode:screen}
.lbe-tint.dark{background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.85),rgba(0,0,0,.35) 80%);mix-blend-mode:normal}
.lbe-mote{border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.lbe-glyph{color:var(--c);text-shadow:0 0 8px var(--c),0 0 2px #000;font-family:var(--serif);line-height:1;white-space:nowrap}
.lbe-feather{width:5px;height:18px;border-radius:50%/80% 80% 20% 20%;background:linear-gradient(var(--c),transparent)}
.lbe-petal,.lbe-leaf{width:10px;height:7px;border-radius:70% 0 70% 0;background:var(--c);box-shadow:0 0 5px var(--c)}
.lbe-coin{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6d6,#dcb35c 55%,#8a6f36);box-shadow:0 0 6px #dcb35c}
.lbe-drop{width:6px;height:10px;border-radius:50%/60% 60% 40% 40%;background:var(--c);box-shadow:0 0 6px var(--c)}
.lbe-confetti{width:7px;height:11px;background:var(--c)}
.lbe-cardback{width:30px;height:42px;border-radius:3px;border:1px solid var(--c);background:linear-gradient(135deg,#1c1a24,#2e2838);box-shadow:0 0 10px var(--c)}
.lbe-gem{width:16px;height:16px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(135deg,#fff,var(--c) 45%,#000 130%)}
.lbe-mask{width:44px;height:30px;border-radius:48% 48% 42% 42%/40% 40% 60% 60%;background:radial-gradient(ellipse 17% 22% at 31% 44%,#0a0a10 88%,transparent 100%),radial-gradient(ellipse 17% 22% at 69% 44%,#0a0a10 88%,transparent 100%),linear-gradient(160deg,#fff,var(--c));box-shadow:0 0 12px var(--c)}
.lbe-crack,.lbe-svg{overflow:visible}
.lbe-crack path,.lbe-svg path{fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 4px var(--c))}
.lbe-svg circle{fill:var(--c);transform-box:fill-box;transform-origin:center;animation:lbeBud .5s ease-out both}
@keyframes lbeBud{from{transform:scale(0)}to{transform:scale(1)}}
.lbe-pillar{border-radius:40% 40% 0 0;background:linear-gradient(0deg,var(--c),rgba(255,255,255,.45) 40%,transparent);filter:blur(1px);mix-blend-mode:screen;transform-origin:50% 100%}
.lbe-stamp{color:var(--c);font:700 34px/1 var(--serif);text-shadow:0 0 18px var(--c),0 2px 6px #000;white-space:nowrap;letter-spacing:.04em}
.lbe-dome{border-radius:50%;border:2px solid var(--c);box-shadow:inset 0 0 26px var(--c),0 0 18px var(--c)}
.lbe-fog{border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);filter:blur(6px)}
.lbe-saw{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,#2a2a2a 0 18%,#d7d7d7 19% 58%,transparent 60%),repeating-conic-gradient(#f2f2f2 0 10deg,transparent 10deg 20deg);box-shadow:0 0 16px var(--c)}
.lbe-reticle{border-radius:50%;border:2px solid var(--c);box-shadow:0 0 10px var(--c),inset 0 0 8px var(--c)}
.lbe-reticle::before,.lbe-reticle::after{content:"";position:absolute;left:50%;top:50%;background:var(--c);box-shadow:0 0 6px var(--c)}
.lbe-reticle::before{width:130%;height:2px;transform:translate(-50%,-50%);-webkit-mask:linear-gradient(90deg,#000 0 30%,transparent 30% 70%,#000 70%);mask:linear-gradient(90deg,#000 0 30%,transparent 30% 70%,#000 70%)}
.lbe-reticle::after{width:2px;height:130%;transform:translate(-50%,-50%);-webkit-mask:linear-gradient(#000 0 30%,transparent 30% 70%,#000 70%);mask:linear-gradient(#000 0 30%,transparent 30% 70%,#000 70%)}
.lbe-wheel{border-radius:50%;border:4px solid #dcb35c;box-shadow:0 0 24px #dcb35c,inset 0 0 18px rgba(0,0,0,.6)}
.lbe-pin{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:16px solid var(--c);filter:drop-shadow(0 0 6px var(--c))}
.lbe-plate{min-width:150px;max-width:340px;padding:6px 16px 7px;text-align:center;border:1px solid var(--c);border-radius:4px;
  background:linear-gradient(180deg,rgba(12,14,20,.94),rgba(12,14,20,.8));box-shadow:0 0 18px var(--c),0 6px 18px rgba(0,0,0,.6)}
.lbe-plate .n{font:600 19px/1.15 var(--serif);color:#fff;text-shadow:0 0 12px var(--c)}
.lbe-plate .s{margin-top:3px;font:600 10px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
#danim .drow.lbe-new .dn{color:#ffe7a8}

.buff-pop{position:fixed;z-index:78;pointer-events:none;color:#ffe2b8;font:700 22px/1 var(--serif);white-space:nowrap;
  text-shadow:0 0 18px #ffb46a,0 0 6px #ffb46a,0 2px 6px #000;letter-spacing:.04em;
  animation:buffPop 1.45s ease-out forwards}
.buff-pop.down{color:#d9c8ff;text-shadow:0 0 16px #8c6bd1,0 2px 6px #000}
@keyframes buffPop{0%{transform:translate(-50%,-50%) scale(2.2);opacity:0}
  16%{transform:translate(-50%,-50%) scale(1);opacity:1}
  70%{transform:translate(-50%,-60%) scale(1.02);opacity:1}
  100%{transform:translate(-50%,-150%) scale(1.06);opacity:0}}
@media (prefers-reduced-motion: reduce){.buff-pop{animation-duration:.9s}}

.vamp-ring{position:fixed;z-index:77;pointer-events:none;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,transparent 52%,rgba(140,0,18,.0) 54%,rgba(176,0,26,.85) 62%,rgba(60,0,8,.6) 70%,transparent 74%);
  filter:blur(1.5px) drop-shadow(0 0 10px #8a0010);animation:vampRing .9s cubic-bezier(.5,0,.8,.6) forwards}
@keyframes vampRing{0%{transform:translate(-50%,-50%) scale(1.25) rotate(0deg);opacity:0}
  25%{opacity:1}100%{transform:translate(-50%,-50%) scale(.25) rotate(-120deg);opacity:0}}
.vamp-pop{position:fixed;z-index:78;pointer-events:none;font:700 24px/1 var(--serif);color:#ff2a3d;white-space:nowrap;
  text-shadow:0 0 14px #8a0010,0 0 4px #3a0006,0 2px 4px #000;animation:vampPop 1.5s ease-out forwards}
.vamp-pop::after{content:"";position:absolute;left:46%;top:88%;width:5px;height:8px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:#c0102a;box-shadow:0 0 6px #8a0010;animation:vampDrip 1.2s .25s ease-in forwards;opacity:0}
@keyframes vampPop{0%{transform:translate(-50%,-30%) scale(.6);opacity:0}
  15%{transform:translate(-50%,-50%) scale(1.15);opacity:1}
  30%{transform:translate(-52%,-55%) scale(1)}45%{transform:translate(-48%,-60%)}
  75%{transform:translate(-50%,-85%);opacity:1}100%{transform:translate(-50%,-120%);opacity:0}}
@keyframes vampDrip{0%{opacity:1;transform:translateY(0) scaleY(.6)}60%{opacity:1}100%{opacity:0;transform:translateY(34px) scaleY(1.3)}}
@media (prefers-reduced-motion: reduce){.vamp-ring{display:none}.vamp-pop,.vamp-pop::after{animation-duration:.9s}}

.lbe-dart{width:46px;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--c) 35%,#fff);box-shadow:0 0 8px var(--c)}
.lbe-dart::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);border-left:10px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;filter:drop-shadow(0 0 4px var(--c))}
.lbe-fireball{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff6c9,#ffb347 35%,#ff4b14 65%,rgba(120,10,0,0) 72%);box-shadow:0 0 22px #ff6a1f,0 0 44px rgba(255,80,20,.6)}
.lbe-blast{border-radius:50%;background:radial-gradient(circle,#fff7d6 0 12%,#ffc04a 22%,#ff5a14 42%,rgba(140,20,0,.55) 60%,transparent 70%);mix-blend-mode:screen;filter:blur(1px)}
.lbe-smoke{border-radius:50%;background:radial-gradient(closest-side,rgba(40,34,30,.75),transparent);filter:blur(4px)}
.lbe-glob{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#eaffc9,var(--c) 45%,#1e3a08);box-shadow:0 0 12px var(--c)}
.lbe-glitch{height:12px;background:linear-gradient(90deg,rgba(0,255,240,.85),rgba(255,255,255,.9) 45%,rgba(255,40,220,.85));mix-blend-mode:screen;box-shadow:-4px 0 0 rgba(0,255,240,.6),4px 0 0 rgba(255,40,220,.6)}
.lbe-redact{width:120px;height:26px;background:#050507;border:1px solid #2a2a33;box-shadow:0 0 0 2px rgba(255,61,242,.35);transform-origin:0 50%}
.cfx-ghost{pointer-events:none!important}
.sleep-moon{position:fixed;z-index:77;pointer-events:none;width:44px;height:44px;border-radius:50%;
  box-shadow:inset -12px 5px 0 0 #cfe6ff,0 0 18px rgba(120,170,255,.55);filter:drop-shadow(0 0 10px #6fa8ff);
  animation:sleepMoon 2.1s ease-out forwards}
.sleep-moon i{position:absolute;color:#dcecff;font:700 10px/1 var(--serif);text-shadow:0 0 6px #6fa8ff;animation:sleepStar 1.2s ease-in-out infinite alternate}
.sleep-moon b{position:absolute;left:38px;top:-6px;color:#cfe6ff;font:700 13px/1 var(--serif);text-shadow:0 0 8px #6fa8ff;animation:sleepZ 1.6s .3s ease-out forwards;opacity:0}
@keyframes sleepMoon{0%{transform:translate(-50%,-160%) scale(.5) rotate(-40deg);opacity:0}
  28%{transform:translate(-50%,-50%) scale(1.08) rotate(6deg);opacity:1}
  40%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  78%{transform:translate(-50%,-56%) scale(1);opacity:1}100%{transform:translate(-50%,-70%) scale(.9);opacity:0}}
@keyframes sleepStar{from{opacity:.25;transform:scale(.7)}to{opacity:1;transform:scale(1.15)}}
@keyframes sleepZ{0%{opacity:0;transform:translate(0,4px)}30%{opacity:1}100%{opacity:0;transform:translate(10px,-22px)}}
@media (prefers-reduced-motion: reduce){.sleep-moon{animation-duration:1.2s}}

#endt.locked,#tgend.locked{filter:saturate(.7) brightness(.9)}
#endt.queued,#tgend.queued{animation:endQueued .9s ease-in-out infinite}
@keyframes endQueued{0%,100%{box-shadow:0 0 0 0 rgba(220,179,92,0)}50%{box-shadow:0 0 16px 3px rgba(220,179,92,.55)}}
.art.artifact-slot-click,.tart.artifact-slot-click{cursor:pointer}
.art.artifact-queued,.tart.artifact-queued{animation:endQueued .9s ease-in-out infinite}

#watchRoadHud{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:9500;display:flex;align-items:center;gap:14px;
  padding:8px 14px;border-radius:10px;border:1px solid rgba(220,179,92,.45);background:rgba(10,12,18,.92);box-shadow:0 10px 30px rgba(0,0,0,.55);
  font:600 13px/1.2 var(--ui-font,system-ui,sans-serif);color:#ece6d6;max-width:calc(100vw - 32px)}
#watchRoadHud .wr-side{display:flex;flex-direction:column;align-items:center;min-width:120px}
#watchRoadHud .wr-name{font:600 17px/1.1 var(--serif);color:#fff}
#watchRoadHud .wr-sub{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#bfb49a}
#watchRoadHud .wr-vs{font:italic 600 15px var(--serif);color:#dcb35c}
#watchRoadHud .wr-controls{display:flex;gap:4px;align-items:center;margin-left:6px}
#watchRoadHud button{font:700 11px/1 var(--ui-font,system-ui,sans-serif);padding:6px 8px;border-radius:6px;border:1px solid rgba(236,230,214,.25);background:rgba(255,255,255,.06);color:#ece6d6;cursor:pointer}
#watchRoadHud button.on{border-color:#dcb35c;color:#ffe7a8;background:rgba(220,179,92,.16)}
#watchRoadHud .wr-result{font:600 14px var(--serif);color:#ffe7a8;min-width:160px;text-align:center}
#watchRoadHud .wr-tally{font-size:11px;color:#bfb49a}
#watchRoadPanel{position:fixed;inset:0;z-index:9400;display:grid;place-items:center;background:rgba(4,5,9,.72)}
#watchRoadPanel .wr-card{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;padding:22px;border-radius:12px;border:1px solid rgba(220,179,92,.4);background:#0f1118;color:#ece6d6;font:14px/1.45 var(--ui-font,system-ui,sans-serif)}
#watchRoadPanel h2{margin:0 0 4px;font:600 26px var(--serif);color:#fff}
#watchRoadPanel .wr-lede{margin:0 0 16px;color:#bfb49a}
#watchRoadPanel .wr-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}
#watchRoadPanel select,#watchRoadPanel button{font:600 13px var(--ui-font,system-ui,sans-serif);padding:8px 10px;border-radius:7px;border:1px solid rgba(236,230,214,.25);background:#171a24;color:#ece6d6}
#watchRoadPanel button.primary{border-color:#dcb35c;color:#ffe7a8;background:rgba(220,179,92,.14);cursor:pointer}
#watchRoadPanel table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px}
#watchRoadPanel th,#watchRoadPanel td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left}
#watchRoadPanel th{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#bfb49a}
#watchRoadPanel td.num{text-align:right;font-variant-numeric:tabular-nums}
.bounty-league-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;font:700 9px/1.5 var(--ui-font,system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:#bfe3ff;border:1px solid rgba(159,212,255,.45)}
#watchRoadPanel h3{margin:18px 0 0;font:600 18px var(--serif);color:#fff}
#watchRoadPanel .wr-me{margin:6px 0 0;color:#ffe7a8}
#watchRoadPanel tr.wr-you td{background:rgba(220,179,92,.12);color:#ffe7a8}
#watchRoadPanel .wr-person{margin-left:6px;padding:0 5px;border-radius:999px;font:700 9px/1.6 var(--ui-font,system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:#cfe8c9;border:1px solid rgba(160,214,150,.45)}
.league-poster-open{position:fixed;right:18px;top:136px;z-index:198;display:flex;align-items:center;gap:10px;padding:7px 11px 7px 8px;border:1px solid #80652f;border-radius:4px;background:linear-gradient(145deg,#181308e8,#080b12ee);box-shadow:0 8px 28px #0008,0 0 18px #c3922d22;color:#f0d47e;cursor:pointer;backdrop-filter:blur(8px)}
.league-poster-open:hover{border-color:#e0b75a;box-shadow:0 10px 34px #000b,0 0 25px #c3922d44}
.league-poster-open:hover .league-poster-art{transform:scale(1.08)}
.league-poster-art{flex:none;width:30px;height:32px;transition:transform .2s ease;filter:drop-shadow(0 2px 3px #000a)}
.league-poster-open b,.league-poster-open small{display:block;text-align:left}
.league-poster-open b{font:800 9px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.league-poster-open small{margin-top:2px;color:#a89a7c;font:7px var(--mono);font-variant-numeric:tabular-nums}
.league-poster-open small i{font-style:normal;color:#f0d47e}
@media (max-width:700px){.league-poster-open{right:8px;top:122px}}
#leaguePanel{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;background:rgba(4,5,9,.72)}
#leaguePanel .lb-card{width:min(820px,calc(100vw - 32px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;padding:22px;border-radius:12px;border:1px solid rgba(220,179,92,.4);background:#0f1118;color:#ece6d6;font:14px/1.45 var(--ui-font,system-ui,sans-serif);box-sizing:border-box}
#leaguePanel h2{margin:0;font:600 28px var(--serif);color:#fff}
#leaguePanel .lb-kicker{font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#dcb35c}
#leaguePanel .lb-me{margin:10px 0 0;color:#ffe7a8}
#leaguePanel .lb-lede{margin:4px 0 0;color:#bfb49a;font-size:13px}
#leaguePanel .lb-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0 6px}
#leaguePanel button{font:600 12px var(--ui-font,system-ui,sans-serif);padding:7px 11px;border-radius:7px;border:1px solid rgba(236,230,214,.25);background:#171a24;color:#ece6d6;cursor:pointer}
#leaguePanel button.on{border-color:#dcb35c;color:#ffe7a8;background:rgba(220,179,92,.14)}
#leaguePanel .lb-scroll{overflow:auto;min-height:0;flex:1 1 auto}
#leaguePanel table{width:100%;border-collapse:collapse;font-size:13px}
#leaguePanel th,#leaguePanel td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left}
#leaguePanel th{position:sticky;top:0;background:#0f1118;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#bfb49a}
#leaguePanel td.num,#leaguePanel th.num{text-align:right;font-variant-numeric:tabular-nums}
#leaguePanel tr.wr-you td{background:rgba(220,179,92,.12);color:#ffe7a8}
#leaguePanel tr.lb-top td:first-child{color:#f0d47e;font-weight:700}
#leaguePanel .wr-person{margin-left:6px;padding:0 5px;border-radius:999px;font:700 9px/1.6 var(--ui-font,system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:#cfe8c9;border:1px solid rgba(160,214,150,.45)}
#leaguePanel .lb-empty{padding:18px 8px;color:#bfb49a}
@media (max-width:600px){#leaguePanel .lb-hide-narrow{display:none}}
.rc{display:block;width:100%;height:100%;overflow:visible}
.rc .rc-c1{fill:none;stroke:var(--rc);stroke-opacity:.6;stroke-width:.8}
.rc .rc-c2{fill:none;stroke:var(--rc);stroke-opacity:.35;stroke-width:.6}
.rc .rc-c3{fill:none;stroke:var(--fc);stroke-opacity:.35;stroke-width:.6;stroke-dasharray:2 3}
.rc .rc-tick{stroke:var(--rc);stroke-opacity:.5;stroke-width:.6}
.rc .rc-tick.long{stroke-opacity:.9;stroke-width:1}
.rc .rc-runes{fill:var(--rc);fill-opacity:.85;font-family:var(--serif,Georgia,serif);letter-spacing:1px}
.rc .rc-fig{fill:none;stroke:var(--fc);stroke-opacity:.6;stroke-width:.8}
.rc .rc-fig-fill{fill:var(--fc);fill-opacity:.55;stroke:none}
.rc .rc-mark{fill:var(--fc);font:700 22px var(--serif,Georgia,serif);letter-spacing:1px;paint-order:stroke;stroke:#07080c;stroke-width:3px;filter:drop-shadow(0 0 6px var(--fc))}
.rc .rc-mark.small{font-size:15px}
.rc .rc-seat{stroke:var(--rc);stroke-width:1.2;fill:#0b0d12}
.rc .rc-seat.taken{fill:var(--rc)}
.rc .rc-a,.rc .rc-b,.rc .rc-c,.rc .rc-orbit,.rc .rc-orbit-r,.rc .rc-slow{transform-origin:100px 100px}
.rc .rc-a{animation:rc-spin 90s linear infinite}
.rc .rc-b{animation:rc-spin 60s linear infinite reverse}
.rc .rc-c{animation:rc-spin 40s linear infinite}
.rc .rc-orbit{animation:rc-spin 16s linear infinite}
.rc .rc-orbit-r{animation:rc-spin 26s linear infinite reverse}
.rc .rc-slow{animation:rc-spin 120s linear infinite}
@keyframes rc-spin{to{transform:rotate(360deg)}}
/* colours that move */
.rc .rc-hue-prism{animation:rc-hue 9s linear infinite}
.rc .rc-hue-aurora{animation:rc-aurora 7s ease-in-out infinite alternate}
.rc .rc-hue-sunfire{animation:rc-sunfire 4s ease-in-out infinite alternate}
@keyframes rc-hue{to{filter:hue-rotate(360deg)}}
@keyframes rc-aurora{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(110deg)}}
@keyframes rc-sunfire{from{filter:hue-rotate(-25deg) saturate(1.2)}to{filter:hue-rotate(12deg) saturate(1.5)}}
/* effects */
.rc .rc-mote{fill:var(--fc);filter:drop-shadow(0 0 3px var(--fc))}
.rc .rc-ember{fill:var(--rc);animation:rc-rise 4.8s linear infinite;opacity:0}
@keyframes rc-rise{0%{transform:translateY(0);opacity:0}15%{opacity:.95}100%{transform:translateY(-120px);opacity:0}}
.rc .rc-shard{fill:var(--fc);fill-opacity:.8;animation:rc-twinkle 2.6s ease-in-out infinite}
@keyframes rc-twinkle{0%,100%{opacity:.15}50%{opacity:1}}
.rc .rc-tide{fill:none;stroke:var(--fc);stroke-opacity:.7;stroke-width:.9;stroke-dasharray:14 10;animation:rc-dash 6s linear infinite}
@keyframes rc-dash{to{stroke-dashoffset:-240}}
.rc .rc-spark{stroke:var(--fc);stroke-width:1.2;stroke-linecap:round;opacity:0;animation:rc-blink 1.8s ease-out infinite}
@keyframes rc-blink{0%{opacity:0}8%{opacity:1}30%{opacity:0}100%{opacity:0}}
.rc .rc-tendril{fill:none;stroke:var(--fc);stroke-opacity:.7;stroke-width:1.1;stroke-dasharray:160;animation:rc-grow 5s ease-in-out infinite alternate}
@keyframes rc-grow{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
.rc .rc-eclipse{fill:#05060a;stroke:var(--fc);stroke-width:1.2;filter:drop-shadow(0 0 8px var(--fc));animation:rc-cross 9s ease-in-out infinite alternate}
@keyframes rc-cross{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
.rc .rc-halo{fill:none;stroke:var(--fc);stroke-opacity:.6;stroke-width:1}
.rc .rc-halo.d1{stroke-dasharray:2 6}
.rc .rc-halo.d2{stroke-dasharray:12 14;stroke-opacity:.4}
.rc .rc-spike{fill:var(--rc);fill-opacity:.7}
.rc.rc-pulse .rc-a{animation:rc-spin 90s linear infinite,rc-breathe 2.4s ease-in-out infinite}
.rc.rc-pulse{animation:rc-glow 2.4s ease-in-out infinite}
@keyframes rc-breathe{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes rc-glow{0%,100%{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--rc) 40%,transparent))}50%{filter:drop-shadow(0 0 16px var(--rc))}}
.rc.rc-static{animation:rc-jitter 3.2s steps(1) infinite}
.rc .rc-scan{fill:var(--fc);opacity:0;animation:rc-blink 3.2s steps(2) infinite}
@keyframes rc-jitter{0%,86%,100%{transform:none}88%{transform:translate(2px,-1px)}90%{transform:translate(-3px,1px)}92%{transform:translate(1px,2px)}}
.rc.rc-still *,.rc.rc-still{animation:none!important}
/* a still circle shows its effect frozen, not missing */
.rc.rc-still .rc-rain,.rc.rc-still .rc-snow,.rc.rc-still .rc-petal,.rc.rc-still .rc-firefly,.rc.rc-still .rc-blood,.rc.rc-still .rc-float,.rc.rc-still .rc-bolt,.rc.rc-still .rc-ember,.rc.rc-still .rc-spark,.rc.rc-still .rc-scan{opacity:.85}
.rc.rc-still .rc-ripple{opacity:.5;transform:scale(.6)}
@media (prefers-reduced-motion:reduce){.rc *,.rc{animation:none!important}}
/* new colours that move */
.rc .rc-hue-current{animation:rc-current 5s ease-in-out infinite alternate}
.rc .rc-hue-gild{animation:rc-gild 3s ease-in-out infinite alternate}
.rc .rc-hue-candle{animation:rc-candle 1.6s steps(6) infinite}
.rc .rc-hue-matrix{animation:rc-matrix 8s steps(4) infinite}
.rc .rc-hue-velvet{animation:rc-velvet 6s ease-in-out infinite alternate}
.rc .rc-hue-ink{animation:rc-ink 4s ease-in-out infinite alternate}
@keyframes rc-current{from{filter:hue-rotate(-22deg)}to{filter:hue-rotate(26deg)}}
@keyframes rc-gild{from{filter:brightness(.9) saturate(1)}to{filter:brightness(1.45) saturate(1.4) drop-shadow(0 0 3px var(--rc))}}
@keyframes rc-candle{0%{filter:brightness(1)}20%{filter:brightness(.82)}40%{filter:brightness(1.12)}60%{filter:brightness(.9)}80%{filter:brightness(1.18)}100%{filter:brightness(.95)}}
@keyframes rc-matrix{to{filter:hue-rotate(360deg)}}
@keyframes rc-velvet{from{filter:brightness(.8) hue-rotate(-10deg)}to{filter:brightness(1.2) hue-rotate(10deg)}}
@keyframes rc-ink{from{filter:brightness(.6)}to{filter:brightness(1.25)}}
.rc .rc-thin{stroke-width:.4;stroke-opacity:.35}
/* new effects */
.rc .rc-wing{fill:var(--fc);fill-opacity:.35;stroke:var(--fc);stroke-width:.8;transform-box:fill-box;animation:rc-flap 2.6s ease-in-out infinite}
.rc .rc-wing.left{transform-origin:right center}.rc .rc-wing.right{transform-origin:left center}
@keyframes rc-flap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.55)}}
.rc .rc-bolt{fill:none;stroke:var(--fc);stroke-width:1.6;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 0 4px var(--fc));animation:rc-blink 3.9s linear infinite}
.rc .rc-rain{stroke:var(--fc);stroke-opacity:.6;stroke-width:.8;animation:rc-fall 1.2s linear infinite}
@keyframes rc-fall{from{transform:translateY(-20px);opacity:0}20%{opacity:1}to{transform:translateY(70px);opacity:0}}
.rc .rc-snow{fill:#fff;animation:rc-snowfall 6s linear infinite;opacity:0}
@keyframes rc-snowfall{0%{transform:translate(0,-10px);opacity:0}15%{opacity:.9}50%{transform:translate(5px,50px)}100%{transform:translate(-4px,110px);opacity:0}}
.rc .rc-petal{fill:#ff9cc0;animation:rc-drift 7s linear infinite;opacity:0}
@keyframes rc-drift{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.9}100%{transform:translate(90px,70px) rotate(300deg);opacity:0}}
.rc .rc-firefly{fill:#fff6a8;filter:drop-shadow(0 0 3px #fff176);animation:rc-glowfly 4s ease-in-out infinite;opacity:0}
@keyframes rc-glowfly{0%,100%{opacity:0;transform:translate(0,0)}50%{opacity:1;transform:translate(4px,-6px)}}
.rc .rc-blood{fill:#d8203a;animation:rc-fall 2.4s ease-in infinite}
.rc .rc-aurora{fill:none;stroke:var(--fc);stroke-width:2.4;stroke-opacity:.35;stroke-linecap:round;filter:blur(.6px);animation:rc-auroraband 5s ease-in-out infinite alternate}
@keyframes rc-auroraband{from{transform:translateY(-3px);filter:blur(.6px) hue-rotate(0)}to{transform:translateY(4px);filter:blur(1px) hue-rotate(70deg)}}
.rc .rc-ripple{fill:none;stroke:var(--fc);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:rc-ripple 3.6s ease-out infinite;opacity:0}
@keyframes rc-ripple{0%{transform:scale(.1);opacity:.9}100%{transform:scale(1.1);opacity:0}}
.rc .rc-link{fill:none;stroke:var(--rc);stroke-width:1}
.rc .rc-gear{fill:none;stroke:var(--rc);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:rc-spin 8s linear infinite}
.rc .rc-gear.rev{animation-direction:reverse}
.rc .rc-star{fill:#fff;animation:rc-twinkle 3s ease-in-out infinite}
.rc .rc-portal{transform-origin:100px 100px;animation:rc-spin 5s linear infinite}
.rc .rc-arm{fill:none;stroke:var(--fc);stroke-width:1.6;stroke-opacity:.6;stroke-linecap:round}
.rc .rc-comet{transform-origin:100px 100px;animation:rc-spin 7s linear infinite}
.rc .rc-tail{fill:none;stroke:var(--fc);stroke-width:2;stroke-linecap:round;stroke-opacity:.55;stroke-dasharray:60 400}
.rc .rc-head{fill:#fff;filter:drop-shadow(0 0 5px var(--fc))}
.rc .rc-float{fill:var(--fc);font:10px var(--serif,Georgia,serif);animation:rc-riseglyph 4.8s ease-out infinite;opacity:0}
@keyframes rc-riseglyph{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-70px);opacity:0}}
/* the workshop: rarities, and how close you are */
.rc-opt.rare{border-color:rgba(110,170,255,.3)}
.rc-opt.legendary{border-color:rgba(240,200,110,.5);box-shadow:0 0 18px rgba(240,190,90,.14) inset}
.rc-opt .rc-rarity{position:absolute;top:6px;left:8px;font:700 7px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8e8a7d}
.rc-opt.rare .rc-rarity{color:#8fc4ff}.rc-opt.legendary .rc-rarity{color:#f5cf6e}
.rc-opt .rc-prog{width:84%;height:3px;border-radius:2px;background:#1b1d25;overflow:hidden}
.rc-opt .rc-prog i{display:block;height:100%;background:linear-gradient(90deg,#8a6a2c,#f0cf7a)}
.rc-filter{display:flex;gap:6px;margin:0 0 10px}
.rc-filter button{font:700 8px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid rgba(239,231,214,.16);background:none;color:#8e8a7d;cursor:pointer}
.rc-filter button.on{border-color:#dcb35c;color:#fff0c4}
.rc-stage .rc-need{margin-top:6px;font-size:12px;color:#d9c08a}
/* friends: their circle around their sigil, and on their row */
.fd-mark.rc-avatar{width:104px;height:104px}
.fd-mark.rc-avatar::before{display:none}
.fd-mark.rc-avatar .rc-avatar-ring{position:absolute;inset:0;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--fd-tint,#c8a55a) 45%,transparent))}
.fd-mark.rc-avatar .rc .rc-c1,.fd-mark.rc-avatar .rc .rc-runes{stroke-opacity:.9;fill-opacity:1}
.fd-mark.rc-avatar .fd-sigil{width:40px;height:40px;font-size:18px;background:rgba(8,10,16,.88);z-index:1}
.fd-mark.rc-avatar .rc-mark{display:none}
.fd-mark.rc-avatar.rc-own-mark .rc-mark{display:block}
.fd-mark.rc-avatar.rc-own-mark .fd-sigil{display:none}
.fd-mark.rc-avatar::after{z-index:2}
.fd-mark.rc-editable{cursor:pointer}
.fd-mark.rc-editable:hover .rc-avatar-ring{filter:drop-shadow(0 0 10px var(--fd-tint,#c8a55a))}
.friend-circle{position:relative;display:block;width:40px;height:40px;flex:none}
.friend-circle .rc{position:absolute;inset:0}
.friend-circle .rc-mark{font-size:30px}
.friend-circle .friend-dot{position:absolute;right:-1px;bottom:-1px;z-index:1;box-shadow:0 0 0 2px #0c111b}
/* the workshop */
.rc-workshop{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:22px;align-items:start}
.rc-stage{position:sticky;top:0;text-align:center;padding:18px;border:1px solid rgba(220,179,92,.25);border-radius:12px;background:radial-gradient(circle at 50% 38%,#1b1a14,#07080b 70%)}
.rc-stage .rc-preview{width:min(300px,100%);aspect-ratio:1;margin:0 auto}
.rc-stage h3{margin:10px 0 2px;font:400 22px var(--serif);color:#f3ead8}
.rc-stage p{margin:0;font-size:12px;color:#9a9486}
.rc-stage .rc-trying{margin-top:8px;font:700 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#f0b35a}
.rc-stage .rc-stage-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.rc-stage button,.rc-slot-tabs button,.rc-seal button{font:700 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;border-radius:999px;border:1px solid rgba(239,231,214,.2);background:rgba(10,11,16,.7);color:#e8dfcb;cursor:pointer}
.rc-slot-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.rc-slot-tabs button.on{border-color:#dcb35c;color:#fff0c4;background:rgba(220,179,92,.12)}
.rc-slot-tabs button small{display:block;margin-top:2px;font:400 10px var(--ui-font,system-ui,sans-serif);letter-spacing:0;text-transform:none;color:#8e8a7d}
.rc-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.rc-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;border-radius:10px;border:1px solid rgba(239,231,214,.12);background:rgba(8,9,13,.6);color:#efe7d6;cursor:pointer;text-align:center}
.rc-opt:hover{border-color:rgba(220,179,92,.45)}
.rc-opt.on{border-color:#dcb35c;background:rgba(220,179,92,.1)}
.rc-opt .rc-mini{width:78px;height:78px}
.rc-opt .rc-swatch-anim{box-shadow:0 0 12px var(--sw),0 0 0 1px rgba(255,255,255,.4) inset;animation:rc-swatch 2.4s ease-in-out infinite alternate}
@keyframes rc-swatch{from{filter:brightness(.9)}to{filter:brightness(1.25) saturate(1.2)}}
.rc-opt .rc-swatch{width:44px;height:44px;margin:17px 0;border-radius:50%;border:2px solid rgba(255,255,255,.25)}
.rc-opt b{font:400 13px/1.2 var(--serif)}
.rc-opt small{font:8px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8e8a7d}
.rc-opt.locked{opacity:.55}
.rc-opt.locked small{color:#c9a36a}
.rc-opt.locked::after{content:"LOCKED";position:absolute;top:6px;right:6px;font:700 7px var(--mono);letter-spacing:.14em;color:#c9a36a}
.rc-seals{margin-top:26px}
.rc-seals-head span{font:700 9px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#dcb35c}
.rc-seals-head p{margin:4px 0 12px;color:#9a9486;font-size:13px}
.rc-seal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.rc-seal{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border-radius:12px;border:1px solid rgba(239,231,214,.12);background:radial-gradient(circle at 50% 30%,#15151a,#08090d 75%);text-align:center}
.rc-seal.on{border-color:#dcb35c}
.rc-seal .rc-mini{width:120px;height:120px;cursor:pointer}
.rc-seal b{font:400 15px/1.2 var(--serif);color:#f3ead8}
.rc-seal small{font:8px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8e8a7d}
.rc-seal .rc-bar{width:100%;height:4px;border-radius:2px;background:#1b1d25;overflow:hidden}
.rc-seal .rc-bar i{display:block;height:100%;background:linear-gradient(90deg,#8a6a2c,#f0cf7a)}
.rc-seal.locked .rc-mini{filter:grayscale(.6) brightness(.8)}
.road-node-bonus{display:block;margin-top:6px;font:700 8px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#d6bd7c}
@media (max-width:760px){.rc-workshop{grid-template-columns:1fr}.rc-stage{position:static}}
.rc-seal .rc-sig{font:italic 400 12px/1.35 var(--serif,Georgia,serif);color:#cfc5ad;max-width:190px}
.rc-stage .rc-sig{font-style:italic;color:#cfc5ad}

/* ---- mastery seal signatures ---- */
.rc .rc-core{transform-origin:100px 100px}
/* the Living Archive */
.rc .rcs-lex-ink{fill:none;stroke:var(--fc);stroke-width:.9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:rcs-lex-ink 12s linear infinite}
@keyframes rcs-lex-ink{0%{stroke-dashoffset:100;opacity:1}85%{stroke-dashoffset:0;opacity:1}97%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:100;opacity:0}}
.rc .rcs-lex-quill{transform-origin:100px 100px;animation:rcs-lex-quill 12s linear infinite}
@keyframes rcs-lex-quill{0%{transform:rotate(0);opacity:1}85%{transform:rotate(360deg);opacity:1}90%,97%{transform:rotate(360deg);opacity:0}100%{transform:rotate(360deg);opacity:1}}
.rc .rcs-lex-feather{fill:var(--fc);fill-opacity:.85;stroke:#07080c;stroke-width:.4}
.rc .rcs-lex-nib{fill:#fff;filter:drop-shadow(0 0 3px var(--fc))}
.rc .rcs-lex-letter{fill:var(--rc);font:700 8px var(--serif,Georgia,serif);opacity:0;animation:rcs-lex-letter 6s ease-in infinite}
@keyframes rcs-lex-letter{0%{transform:none;opacity:0}15%{opacity:.95}80%{opacity:.6}100%{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
/* the Iridescent Muster */
.rc .rcs-leg-march{transform-origin:100px 100px;animation:rcs-spin-steps 24s steps(120) infinite}
@keyframes rcs-spin-steps{to{transform:rotate(360deg)}}
.rc .rcs-leg-man{animation:rcs-leg-step .4s steps(1) infinite}
.rc .rcs-leg-man.alt{animation-delay:-.2s}
@keyframes rcs-leg-step{0%{transform:translateY(0)}50%{transform:translateY(-1.3px)}}
.rc .rcs-leg-body{stroke:#07080c;stroke-width:.35}
.rc .rcs-leg-spear{stroke:#f4f4ff;stroke-width:.6}
.rc .rcs-leg-flag{fill:#fff;animation:rcs-hue 3s linear infinite}
.rc .rcs-leg-col{animation:rcs-leg-present 24s linear infinite}
@keyframes rcs-leg-present{0%,88%,100%{filter:none}90%,93%{filter:brightness(2.2) drop-shadow(0 0 3px #fff)}}
@keyframes rcs-hue{to{filter:hue-rotate(360deg)}}
/* the Redaction: one 23s cycle, five small glitches and a meltdown */
.rc .rcs-nys-rgb,.rc .rcs-nys-tear,.rc .rcs-nys-bar,.rc .rcs-nys-err{opacity:0}
.rc .rcs-nys-rgb{mix-blend-mode:screen}
.rc .rcs-nys-bar{fill:#050507;stroke:#ff3b3b;stroke-width:.5;transform-box:fill-box;transform-origin:0 50%}
.rc .rcs-nys-err{fill:#ff3b3b;font:700 13px var(--mono,monospace);letter-spacing:1px}
@keyframes rcs-nys-r{0%,100%{opacity:0;transform:none}9%{opacity:.9;transform:translate(-4px,0)}9.5%{opacity:.9;transform:translate(3px,1px)}10%{opacity:.7;transform:translate(-7px,-1px)}10.5%{opacity:0;transform:none}27%{opacity:.9;transform:translate(-4px,0)}27.5%{opacity:.9;transform:translate(3px,1px)}28%{opacity:.7;transform:translate(-7px,-1px)}28.5%{opacity:0;transform:none}63%{opacity:.9;transform:translate(-4px,0)}63.5%{opacity:.9;transform:translate(3px,1px)}64%{opacity:.7;transform:translate(-7px,-1px)}64.5%{opacity:0;transform:none}81%{opacity:.9;transform:translate(-4px,0)}81.5%{opacity:.9;transform:translate(3px,1px)}82%{opacity:.7;transform:translate(-7px,-1px)}82.5%{opacity:0;transform:none}93%{opacity:.9;transform:translate(-4px,0)}93.5%{opacity:.9;transform:translate(3px,1px)}94%{opacity:.7;transform:translate(-7px,-1px)}94.5%{opacity:0;transform:none}47%{opacity:1;transform:translate(-9px,2px) scale(1.04)}48%{opacity:1;transform:translate(6px,-3px) skewX(-8deg)}49%{opacity:1;transform:translate(-14px,0) scale(.95,1.08)}50%{opacity:.9;transform:translate(10px,4px)}51%{opacity:1;transform:translate(-4px,-6px) rotate(-3deg)}52.5%{opacity:0;transform:none}}
@keyframes rcs-nys-c{0%,100%{opacity:0;transform:none}9%{opacity:.9;transform:translate(4px,0)}9.5%{opacity:.9;transform:translate(-3px,1px)}10%{opacity:.7;transform:translate(7px,-1px)}10.5%{opacity:0;transform:none}27%{opacity:.9;transform:translate(4px,0)}27.5%{opacity:.9;transform:translate(-3px,1px)}28%{opacity:.7;transform:translate(7px,-1px)}28.5%{opacity:0;transform:none}63%{opacity:.9;transform:translate(4px,0)}63.5%{opacity:.9;transform:translate(-3px,1px)}64%{opacity:.7;transform:translate(7px,-1px)}64.5%{opacity:0;transform:none}81%{opacity:.9;transform:translate(4px,0)}81.5%{opacity:.9;transform:translate(-3px,1px)}82%{opacity:.7;transform:translate(7px,-1px)}82.5%{opacity:0;transform:none}93%{opacity:.9;transform:translate(4px,0)}93.5%{opacity:.9;transform:translate(-3px,1px)}94%{opacity:.7;transform:translate(7px,-1px)}94.5%{opacity:0;transform:none}47%{opacity:1;transform:translate(9px,2px) scale(1.04)}48%{opacity:1;transform:translate(-6px,-3px) skewX(8deg)}49%{opacity:1;transform:translate(14px,0) scale(.95,1.08)}50%{opacity:.9;transform:translate(-10px,4px)}51%{opacity:1;transform:translate(4px,-6px) rotate(3deg)}52.5%{opacity:0;transform:none}}
@keyframes rcs-nys-t0{0%,100%{opacity:0;transform:none}9.2%{opacity:1;transform:translateX(11px)}9.8%{opacity:1;transform:translateX(-6.050000000000001px)}10.4%{opacity:0;transform:none}63.2%{opacity:1;transform:translateX(11px)}63.8%{opacity:1;transform:translateX(-6.050000000000001px)}64.4%{opacity:0;transform:none}93.2%{opacity:1;transform:translateX(11px)}93.8%{opacity:1;transform:translateX(-6.050000000000001px)}94.4%{opacity:0;transform:none}47.5%{opacity:1;transform:translateX(-17.6px)}49%{opacity:1;transform:translateX(14.3px)}50.5%{opacity:1;transform:translateX(-7.699999999999999px)}52%{opacity:0;transform:none}}
@keyframes rcs-nys-t1{0%,100%{opacity:0;transform:none}27.2%{opacity:1;transform:translateX(-14px)}27.8%{opacity:1;transform:translateX(7.700000000000001px)}28.4%{opacity:0;transform:none}81.2%{opacity:1;transform:translateX(-14px)}81.8%{opacity:1;transform:translateX(7.700000000000001px)}82.4%{opacity:0;transform:none}47.5%{opacity:1;transform:translateX(22.400000000000002px)}49%{opacity:1;transform:translateX(-18.2px)}50.5%{opacity:1;transform:translateX(9.799999999999999px)}52%{opacity:0;transform:none}}
@keyframes rcs-nys-t2{0%,100%{opacity:0;transform:none}9.2%{opacity:1;transform:translateX(17px)}9.8%{opacity:1;transform:translateX(-9.350000000000001px)}10.4%{opacity:0;transform:none}63.2%{opacity:1;transform:translateX(17px)}63.8%{opacity:1;transform:translateX(-9.350000000000001px)}64.4%{opacity:0;transform:none}93.2%{opacity:1;transform:translateX(17px)}93.8%{opacity:1;transform:translateX(-9.350000000000001px)}94.4%{opacity:0;transform:none}47.5%{opacity:1;transform:translateX(-27.200000000000003px)}49%{opacity:1;transform:translateX(22.1px)}50.5%{opacity:1;transform:translateX(-11.899999999999999px)}52%{opacity:0;transform:none}}
@keyframes rcs-nys-bar{0%,100%{opacity:0;transform:none}27.3%{opacity:1;transform:scaleX(.5)}27.6%{opacity:1;transform:scaleX(1)}30%{opacity:0;transform:scaleX(0)}47.2%{opacity:1;transform:scaleX(1)}58%{opacity:0;transform:scaleX(0)}81.3%{opacity:1;transform:scaleX(1)}84%{opacity:0;transform:scaleX(0)}}
@keyframes rcs-nys-mark{0%,100%{opacity:1}9%{opacity:0}9.5%{opacity:1}10%{opacity:0}10.5%{opacity:1}27%{opacity:0}27.5%{opacity:1}28%{opacity:0}28.5%{opacity:1}63%{opacity:0}63.5%{opacity:1}64%{opacity:0}64.5%{opacity:1}81%{opacity:0}81.5%{opacity:1}82%{opacity:0}82.5%{opacity:1}93%{opacity:0}93.5%{opacity:1}94%{opacity:0}94.5%{opacity:1}47%{opacity:0}52.6%{opacity:1}}
@keyframes rcs-nys-err{0%,100%{opacity:0}47%{opacity:1}48%{opacity:0}49%{opacity:1}52%{opacity:0}}
@keyframes rcs-nys-melt{0%,100%{transform:none;filter:none}47%{transform:scale(1.05,.94) translateX(3px);filter:invert(1)}48%{transform:skewX(10deg);filter:none}49%{transform:scale(.94,1.07) translateY(-4px);filter:contrast(3) brightness(1.6)}50%{transform:rotate(4deg) translateX(-5px);filter:invert(1) hue-rotate(90deg)}51%{transform:scaleX(-1);filter:none}52%{transform:none;filter:brightness(2.5)}52.6%{transform:none;filter:none}}
.rc .rcs-nys-rgb.r{animation:rcs-nys-r 23s steps(1) infinite}.rc .rcs-nys-rgb.c{animation:rcs-nys-c 23s steps(1) infinite}.rc .rcs-nys-tear.t0{animation:rcs-nys-t0 23s steps(1) infinite}.rc .rcs-nys-tear.t1{animation:rcs-nys-t1 23s steps(1) infinite}.rc .rcs-nys-tear.t2{animation:rcs-nys-t2 23s steps(1) infinite}.rc .rcs-nys-bar{animation:rcs-nys-bar 23s steps(1) infinite}.rc .rcs-nys-err{animation:rcs-nys-err 23s steps(1) infinite}.rc.rc-seal-nys>.rc-mark{animation:rcs-nys-mark 23s steps(1) infinite}.rc.rc-seal-nys>.rc-core{animation:rcs-nys-melt 23s steps(1) infinite}

/* the Last Train to Lunaspire */
.rc .rcs-nur-rail{fill:none;stroke:var(--rc);stroke-opacity:.45;stroke-width:.6}
.rc .rcs-nur-sleepers{fill:none;stroke:var(--rc);stroke-opacity:.35;stroke-width:4;stroke-dasharray:.8 3.2}
.rc .rcs-nur-train{transform-origin:100px 100px;animation:rc-spin 16s linear infinite}
.rc .rcs-nur-car{fill:#141a2e;stroke:var(--rc);stroke-width:.6}
.rc .rcs-nur-win{fill:#ffe9a8;animation:rcs-nur-flick 2.4s steps(3) infinite}
@keyframes rcs-nur-flick{0%,100%{opacity:1}40%{opacity:.6}70%{opacity:.9}}
.rc .rcs-nur-beam{fill:#fff3c4;opacity:.35}
.rc .rcs-nur-puff{fill:#d7def0;opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:rcs-nur-puff 1.8s ease-out infinite}
@keyframes rcs-nur-puff{0%{transform:translate(0,0) scale(.5);opacity:.75}100%{transform:translate(-9px,-7px) scale(2.1);opacity:0}}
.rc .rcs-nur-moon{fill:#fff3c4;fill-opacity:.55;filter:drop-shadow(0 0 6px #fff3c4)}
.rc .rcs-nur-shadow{fill:#07080c;animation:rcs-nur-phase 14s ease-in-out infinite alternate}
@keyframes rcs-nur-phase{from{transform:translateX(-38px)}to{transform:translateX(38px)}}
/* the Crimson Cathedral */
.rc.rc-seal-sang .rc-core{animation:rcs-sang-beat 1.25s ease-out infinite}
@keyframes rcs-sang-beat{0%,45%,100%{transform:scale(1)}10%{transform:scale(1.045)}20%{transform:scale(.995)}30%{transform:scale(1.03)}}
.rc .rcs-sang-blood{animation:rcs-sang-fill 10s ease-in-out infinite alternate}
@keyframes rcs-sang-fill{from{transform:translateY(64px)}to{transform:translateY(-62px)}}
.rc .rcs-sang-wave{fill:#8f0c1f;fill-opacity:.85;animation:rcs-wave 2.2s linear infinite}
.rc .rcs-sang-wave.b{fill:#d8344a;fill-opacity:.45;animation-duration:3.1s}
@keyframes rcs-wave{from{transform:translateX(-40px)}to{transform:translateX(0)}}
.rc .rcs-sang-drop{fill:#d8344a;opacity:0;animation:rcs-sang-drop 2.5s ease-in infinite}
@keyframes rcs-sang-drop{0%{transform:translateY(0) scaleY(.6);opacity:0}10%{opacity:1}100%{transform:translateY(22px) scaleY(1.3);opacity:0}}
/* the Dominion Forge */
.rc .rcs-iron-hammer{transform-origin:132px -32px;animation:rcs-iron-swing 3.2s cubic-bezier(.55,0,.9,.5) infinite}
@keyframes rcs-iron-swing{0%,62%{transform:rotate(-58deg)}80%{transform:rotate(0)}84%{transform:rotate(-9deg)}88%{transform:rotate(-2deg)}100%{transform:rotate(-58deg)}}
.rc .rcs-iron-head{fill:#4b4f58;stroke:#c8ccd4;stroke-width:.7}
.rc .rcs-iron-handle{stroke:#8a5a2c;stroke-width:2.6;stroke-linecap:round}
.rc .rcs-iron-spark{stroke:#ffd27a;stroke-width:1.1;stroke-linecap:round;opacity:0;animation:rcs-iron-spark 3.2s ease-out infinite}
@keyframes rcs-iron-spark{0%,79.5%{opacity:0;transform:none}80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.rc .rcs-iron-heat{fill:none;stroke:#fff6e0;stroke-width:2;opacity:0;animation:rcs-iron-heat 3.2s ease-out infinite}
@keyframes rcs-iron-heat{0%,79.5%{opacity:0}80%{opacity:.95;stroke:#fff}88%{opacity:.5;stroke:#ff9a3c}100%{opacity:0;stroke:#ff6b3d}}
.rc.rc-seal-iron .rc-core{animation:rcs-iron-jolt 3.2s linear infinite}
@keyframes rcs-iron-jolt{0%,79.5%,86%,100%{transform:none}80%{transform:translateY(2px) scale(.99)}82%{transform:translateY(-.8px)}}
/* the Divided Paradise */
.rc .rcs-vir-other{filter:hue-rotate(150deg) saturate(1.3)}
.rc .rcs-vir-border{animation:rcs-vir-push 13s ease-in-out infinite}
@keyframes rcs-vir-push{0%,100%{transform:translateX(0)}22%{transform:translateX(-28px)}48%{transform:translateX(6px)}70%{transform:translateX(30px)}86%{transform:translateX(-8px)}}
.rc .rcs-vir-vine{fill:none;stroke:#9be86f;stroke-width:1.4;stroke-linecap:round;filter:drop-shadow(0 0 2px #6fe38b)}
.rc .rcs-vir-sway{transform-origin:100px 100px;animation:rcs-vir-sway 4s ease-in-out infinite alternate}
@keyframes rcs-vir-sway{from{transform:skewX(-4deg)}to{transform:skewX(4deg)}}
.rc .rcs-vir-bloom{fill:#ff9ccf;transform-box:fill-box;transform-origin:50% 50%;animation:rcs-vir-bloom 4.5s ease-in-out infinite}
@keyframes rcs-vir-bloom{0%,100%{transform:scale(0)}35%,70%{transform:scale(1)}}
/* the Argent Ascendance */
.rc .rcs-sil-rays{transform-origin:100px 100px;mix-blend-mode:screen;animation:rc-spin 14s linear infinite}
.rc .rcs-sil-ray{opacity:.42}
.rc .rcs-sil-sun{animation:rcs-sil-rise 18s ease-in-out infinite}
@keyframes rcs-sil-rise{0%,100%{transform:translateY(62px)}45%,55%{transform:translateY(-28px)}}
.rc .rcs-sil-dawn{animation:rcs-sil-dawn 18s ease-in-out infinite}
@keyframes rcs-sil-dawn{0%,100%{opacity:.1}45%,55%{opacity:.55}}
/* the Mirror at World's End */
.rc .rcs-frost-pool{fill:#05070c;fill-opacity:.82}
.rc .rcs-frost-ice{fill:#bfefff;fill-opacity:.06}
.rc .rcs-frost-refl{transform-origin:100px 100px;filter:blur(.3px) brightness(1.7) saturate(1.3);animation:rcs-frost-drift 15s ease-in-out infinite alternate}
@keyframes rcs-frost-drift{0%{transform:rotate(-14deg)}50%{transform:rotate(6deg)}100%{transform:rotate(17deg)}}
.rc .rcs-frost-line{stroke:#e8fbff;stroke-width:.8;stroke-opacity:.7}
.rc .rcs-frost-glint{stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:14 400;animation:rcs-frost-glint 5s ease-in-out infinite}
@keyframes rcs-frost-glint{from{stroke-dashoffset:20}to{stroke-dashoffset:-210}}
.rc .rcs-frost-crack{fill:none;stroke:#f2fdff;stroke-width:.7;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 2px #bfefff);animation:rcs-frost-crack 11s ease-out infinite}
@keyframes rcs-frost-crack{0%,58%{stroke-dashoffset:100;opacity:1}62%{stroke-dashoffset:0;opacity:1}82%{stroke-dashoffset:0;opacity:.9}90%,100%{stroke-dashoffset:0;opacity:0}}
.rc .rcs-frost-shard{fill:#dff8ff;opacity:0;animation:rcs-frost-fall 11s ease-in infinite}
@keyframes rcs-frost-fall{0%,82%{opacity:0;transform:none}84%{opacity:.9}100%{opacity:0;transform:translateY(26px) rotate(40deg)}}
/* the Long Khazi Sunset */
.rc .rcs-khaz-sky{animation:rcs-khaz-sky 16s linear infinite}
@keyframes rcs-khaz-sky{0%{opacity:.18}55%{opacity:.5}75%{opacity:.62}92%{opacity:.25}100%{opacity:.18}}
.rc .rcs-khaz-sun{animation:rcs-khaz-set 16s cubic-bezier(.4,0,.7,1) infinite}
@keyframes rcs-khaz-set{0%{transform:translateY(0);opacity:0}6%{opacity:1}68%{transform:translateY(74px);opacity:1}72%,100%{transform:translateY(80px);opacity:0}}
.rc .rcs-khaz-dune{fill:#1d0f08;fill-opacity:.92}
.rc .rcs-khaz-dune.far{fill:#3a1a0c;fill-opacity:.8}
.rc .rcs-khaz-star{fill:#fff3d8;opacity:0;animation:rcs-khaz-star 16s linear infinite}
@keyframes rcs-khaz-star{0%,66%,100%{opacity:0}76%,90%{opacity:.95}}
/* the Turquoise Moon Gate */
.rc .rcs-mf-door{fill:#0c2a27;stroke:#3fe0c5;stroke-width:.7}
.rc .rcs-mf-door.l{animation:rcs-mf-l 15s ease-in-out infinite}
.rc .rcs-mf-door.r{animation:rcs-mf-r 15s ease-in-out infinite}
@keyframes rcs-mf-l{0%,30%,90%,100%{transform:none}42%,78%{transform:translateX(-58px)}}
@keyframes rcs-mf-r{0%,30%,90%,100%{transform:none}42%,78%{transform:translateX(58px)}}
.rc .rcs-mf-glyph{fill:#3fe0c5;fill-opacity:.7;font:700 15px var(--serif,Georgia,serif)}
.rc .rcs-mf-moon{fill:#e9fff9;filter:drop-shadow(0 0 7px #9ffff0)}
.rc .rcs-mf-petal{fill:#ff8fae;animation:rcs-mf-petal 5s linear infinite}
@keyframes rcs-mf-petal{from{transform:translate(0,0) rotate(0)}to{transform:translate(-30px,46px) rotate(260deg)}}
/* the White Trial */
.rc .rcs-vak-rune{font:700 9px var(--serif,Georgia,serif);fill:var(--fc);opacity:.14}
@keyframes rcs-vak-k0{0%,3.9%{opacity:.14;fill:var(--fc)}4%{opacity:1;fill:#fff;filter:drop-shadow(0 0 4px #fff)}7%,84%{opacity:.95;fill:#e9f6ff;filter:drop-shadow(0 0 2px var(--fc))}92%,100%{opacity:.14;fill:var(--fc);filter:none}}
@keyframes rcs-vak-k1{0%,10.3%{opacity:.14;fill:var(--fc)}10.4%{opacity:1;fill:#fff;filter:drop-shadow(0 0 4px #fff)}13.4%,84%{opacity:.95;fill:#e9f6ff;filter:drop-shadow(0 0 2px var(--fc))}92%,100%{opacity:.14;fill:var(--fc);filter:none}}
@keyframes rcs-vak-k2{0%,16.7%{opacity:.14;fill:var(--fc)}16.8%{opacity:1;fill:#fff;filter:drop-shadow(0 0 4px #fff)}19.8%,84%{opacity:.95;fill:#e9f6ff;filter:drop-shadow(0 0 2px var(--fc))}92%,100%{opacity:.14;fill:var(--fc);filter:none}}
@keyframes rcs-vak-k3{0%,23.1%{opacity:.14;fill:var(--fc)}23.2%{opacity:1;fill:#fff;filter:drop-shadow(0 0 4px #fff)}26.2%,84%{opacity:.95;fill:#e9f6ff;filter:drop-shadow(0 0 2px var(--fc))}92%,100%{opacity:.14;fill:var(--fc);filter:none}}
@keyframes rcs-vak-k4{0%,29.5%{opacity:.14;fill:var(--fc)}29.6%{opacity:1;fill:#fff;filter:drop-shadow(0 0 4px #fff)}32.6%,84%{opacity:.95;fill:#e9f6ff;filter:drop-shadow(0 0 2px var(--fc))}92%,100%{opacity:.14;fill:var(--fc);filter:none}}
@keyframes rcs-vak-k5{0%,35.9%{opacity:.14;fill:var(--fc)}36%{opacity:1;fill:#fff;filter:drop-shadow(0 0 4px #fff)}39%,84%{opacity:.95;fill:#e9f6ff;filter:drop-shadow(0 0 2px var(--fc))}92%,100%{opacity:.14;fill:var(--fc);filter:none}}
@keyframes rcs-vak-k6{0%,42.3%{opacity:.14;fill:var(--fc)}42.4%{opacity:1;fill:#fff;filter:drop-shadow(0 0 4px #fff)}45.4%,84%{opacity:.95;fill:#e9f6ff;filter:drop-shadow(0 0 2px var(--fc))}92%,100%{opacity:.14;fill:var(--fc);filter:none}}
@keyframes rcs-vak-k7{0%,48.7%{opacity:.14;fill:var(--fc)}48.8%{opacity:1;fill:#fff;filter:drop-shadow(0 0 4px #fff)}51.8%,84%{opacity:.95;fill:#e9f6ff;filter:drop-shadow(0 0 2px var(--fc))}92%,100%{opacity:.14;fill:var(--fc);filter:none}}
@keyframes rcs-vak-k8{0%,55.1%{opacity:.14;fill:var(--fc)}55.2%{opacity:1;fill:#fff;filter:drop-shadow(0 0 4px #fff)}58.2%,84%{opacity:.95;fill:#e9f6ff;filter:drop-shadow(0 0 2px var(--fc))}92%,100%{opacity:.14;fill:var(--fc);filter:none}}
@keyframes rcs-vak-k9{0%,61.5%{opacity:.14;fill:var(--fc)}61.6%{opacity:1;fill:#fff;filter:drop-shadow(0 0 4px #fff)}64.6%,84%{opacity:.95;fill:#e9f6ff;filter:drop-shadow(0 0 2px var(--fc))}92%,100%{opacity:.14;fill:var(--fc);filter:none}}
@keyframes rcs-vak-k10{0%,67.9%{opacity:.14;fill:var(--fc)}68%{opacity:1;fill:#fff;filter:drop-shadow(0 0 4px #fff)}71%,84%{opacity:.95;fill:#e9f6ff;filter:drop-shadow(0 0 2px var(--fc))}92%,100%{opacity:.14;fill:var(--fc);filter:none}}
@keyframes rcs-vak-k11{0%,74.3%{opacity:.14;fill:var(--fc)}74.4%{opacity:1;fill:#fff;filter:drop-shadow(0 0 4px #fff)}77.4%,84%{opacity:.95;fill:#e9f6ff;filter:drop-shadow(0 0 2px var(--fc))}92%,100%{opacity:.14;fill:var(--fc);filter:none}}

.rc .rcs-vak-fog{animation:rcs-vak-fog 12.5s ease-in-out infinite;opacity:0}
@keyframes rcs-vak-fog{0%,82%,100%{opacity:0}89%{opacity:.88}94%{opacity:.6}}
.rc .rcs-vak-gust{stroke:#fff;stroke-width:1;stroke-linecap:round;opacity:0;animation:rcs-vak-gust 12.5s linear infinite}
@keyframes rcs-vak-gust{0%,82%{opacity:0;transform:translateX(-90px)}84%{opacity:.9}96%{opacity:.6;transform:translateX(240px)}97%,100%{opacity:0;transform:translateX(240px)}}
/* the Obscured Meadow */
.rc .rcs-ael-white{fill:#0d1a0f;stroke:none}
.rc .rcs-ael-ir{fill:#2d6b25;stroke:#9dff8a;stroke-width:.7}
.rc .rcs-ael-fibre{stroke:#c9ff9a;stroke-width:.5;stroke-opacity:.55}
.rc .rcs-ael-pupil{fill:#030503;transform-origin:100px 100px;animation:rcs-ael-dilate 9s ease-in-out infinite}
@keyframes rcs-ael-dilate{0%,100%{transform:scale(1)}40%{transform:scale(.6)}70%{transform:scale(1.35)}}
.rc .rcs-ael-glint{fill:#fff;fill-opacity:.85}
.rc .rcs-ael-iris{animation:rcs-ael-look 9s ease-in-out infinite}
@keyframes rcs-ael-look{0%,18%,100%{transform:none}24%,38%{transform:translate(-13px,-3px)}44%,54%{transform:translate(12px,2px)}60%,74%{transform:translate(0,-6px)}80%,90%{transform:translate(-4px,4px)}}
.rc .rcs-ael-lid{fill:#14261a}
.rc .rcs-ael-lid.up{transform:translateY(-58px);animation:rcs-ael-up 6.4s ease-in-out infinite}
.rc .rcs-ael-lid.dn{transform:translateY(58px);animation:rcs-ael-dn 6.4s ease-in-out infinite}
@keyframes rcs-ael-up{0%,47%,53%,94%,100%{transform:translateY(-58px)}49.5%,96.5%{transform:translateY(0)}}
@keyframes rcs-ael-dn{0%,47%,53%,94%,100%{transform:translateY(58px)}49.5%,96.5%{transform:translateY(0)}}
.rc .rcs-ael-lash{stroke:#9dff8a;stroke-width:1}
.rc .rcs-ael-rim{fill:none;stroke:#9dff8a;stroke-width:1.1;filter:drop-shadow(0 0 3px #9dff8a)}
.rc.rc-seal-ael .rc-core{animation:rcs-ael-hide 17s ease-in-out infinite}
@keyframes rcs-ael-hide{0%,36%,64%,100%{opacity:1;filter:none}44%,56%{opacity:.1;filter:blur(1.5px)}}
.rc.rc-seal-ael .rc-mark{animation:rcs-ael-mark 6.4s ease-in-out infinite}
@keyframes rcs-ael-mark{0%,47%,53%,94%,100%{opacity:1}49.5%,96.5%{opacity:0}}
/* the Turning Wild */
.rc .rcs-wld-tint{mix-blend-mode:color;opacity:.5;animation:rcs-wld-tint 24s linear infinite}
@keyframes rcs-wld-tint{0%,100%{fill:#ff9ccf}22%{fill:#ff9ccf}28%,47%{fill:#ffd24a}53%,72%{fill:#ff7a2a}78%,97%{fill:#e3f6ff}}
.rc .rcs-wld-season{opacity:0;animation:rcs-wld-q 24s linear infinite}
@keyframes rcs-wld-q{0%{opacity:0}3%,22%{opacity:1}25%,100%{opacity:0}}
.rc .rcs-wld-fall{animation:rcs-wld-fall 4.5s linear infinite}
@keyframes rcs-wld-fall{from{transform:translate(0,0) rotate(0)}to{transform:translate(14px,92px) rotate(300deg)}}
.rc .rcs-wld-rise{animation:rcs-wld-rise 4.5s ease-out infinite}
@keyframes rcs-wld-rise{from{transform:translateY(0);opacity:1}to{transform:translateY(-60px);opacity:0}}
/* the Violet Undercity */
.rc .rcs-desc-ring{fill:none;stroke:var(--fc);stroke-width:1.2;transform-origin:100px 100px;animation:rcs-desc-down 6s linear infinite;opacity:0}
@keyframes rcs-desc-down{0%{transform:scale(1);opacity:0}15%{opacity:.8}100%{transform:scale(.04);opacity:0}}
.rc .rcs-desc-lamp{fill:#ffd27a;filter:drop-shadow(0 0 3px #ffb347);transform-origin:100px 100px;animation:rcs-desc-lamp 7.5s linear infinite}
@keyframes rcs-desc-lamp{0%{transform:rotate(0) scale(1);opacity:0}10%{opacity:1}100%{transform:rotate(300deg) scale(.05);opacity:0}}
.rc .rcs-desc-pit{fill:#020104}
/* the Sunlit Ascendancy */
@keyframes rcs-jal-level{0%{transform:translateY(74px)}11.5%{transform:translateY(74px)}14.5%{transform:translateY(57px)}22%{transform:translateY(57px)}25%{transform:translateY(40px)}32.5%{transform:translateY(40px)}35.5%{transform:translateY(23px)}43%{transform:translateY(23px)}46%{transform:translateY(6px)}53.5%{transform:translateY(6px)}56.5%{transform:translateY(-11px)}64%{transform:translateY(-11px)}67%{transform:translateY(-28px)}74.5%{transform:translateY(-28px)}77.5%{transform:translateY(-45px)}90%{transform:translateY(-45px)}98%,100%{transform:translateY(74px)}}

.rc .rcs-jal-water{animation:rcs-jal-level 15s ease-in-out infinite}
.rc .rcs-jal-wave{fill:#1f8fd6;fill-opacity:.55;animation:rcs-wave 2.6s linear infinite}
.rc .rcs-jal-wave.b{fill:#4ac3ff;fill-opacity:.35;animation-duration:3.7s;animation-direction:reverse}
.rc .rcs-jal-glint{fill:#fff6c8;opacity:.8;animation:rcs-jal-glint 1.6s ease-in-out infinite alternate}
@keyframes rcs-jal-glint{from{opacity:.35;transform:scaleX(.7)}to{opacity:.95;transform:scaleX(1.15)}}
.rc .rcs-jal-step{stroke:#ffd24a;stroke-width:.7;stroke-opacity:.55}
/* the Court of Cinders */
.rc .rcs-ash-dragon{transform-origin:100px 100px;animation:rc-spin 20s linear infinite}
.rc .rcs-ash-body{fill:none;stroke:#3a120a;stroke-linecap:round}
.rc .rcs-ash-scales{fill:#ff5a2a;fill-opacity:.75}
.rc .rcs-ash-ridge{fill:#ffc34a;fill-opacity:.85}
.rc .rcs-ash-head{fill:#3a120a;stroke:#ff5a2a;stroke-width:.8}
.rc .rcs-ash-eye{fill:#ffe14a;filter:drop-shadow(0 0 2px #ffc34a)}
.rc .rcs-ash-fire{transform-origin:118px -6px;transform:scaleX(0);animation:rcs-ash-breath 5s ease-out infinite}
@keyframes rcs-ash-breath{0%,64%,100%{transform:scaleX(0);opacity:0}70%{transform:scaleX(1.1);opacity:1}82%{transform:scaleX(.9);opacity:.9}88%{transform:scaleX(0);opacity:0}}
/* the Black Remembrance */
.rc.rc-seal-veh .rc-core{animation:rcs-veh-die 16s ease-in-out infinite}
@keyframes rcs-veh-die{0%,52%,94%,100%{opacity:1;filter:none}60%{opacity:.6;filter:grayscale(1) brightness(.55)}66%,80%{opacity:0;filter:grayscale(1)}88%{opacity:1;filter:sepia(1) brightness(2.2)}}
.rc .rcs-veh-ash{fill:#bdb6a6;opacity:0;animation:rcs-veh-ash 16s ease-in-out infinite}
@keyframes rcs-veh-ash{0%,56%{transform:none;opacity:0}60%{transform:none;opacity:.9}70%,76%{transform:translate(var(--dx),var(--dy));opacity:.35}86%{transform:none;opacity:.9;fill:#f5e2a8}90%,100%{transform:none;opacity:0}}
.rc .rcs-veh-ghost{fill:none;stroke:#f5e2a8;stroke-dasharray:2 5;opacity:0;animation:rcs-veh-ghost 16s ease-in-out infinite}
@keyframes rcs-veh-ghost{0%,64%,84%,100%{opacity:0}70%,78%{opacity:.6}}
.rc.rc-seal-veh .rc-mark{animation:rcs-veh-mark 16s ease-in-out infinite}
@keyframes rcs-veh-mark{0%,60%,90%,100%{filter:drop-shadow(0 0 6px var(--fc))}68%,80%{filter:drop-shadow(0 0 14px #fff) brightness(1.6)}}
/* the Drowned Grand Fleet */
.rc .rcs-adm-needle{transform-origin:100px 100px;animation:rcs-adm-swing 11s ease-in-out infinite}
@keyframes rcs-adm-swing{0%,46%,100%{transform:rotate(0)}52%{transform:rotate(78deg)}58%{transform:rotate(-46deg)}64%{transform:rotate(27deg)}70%{transform:rotate(-15deg)}76%{transform:rotate(8deg)}82%{transform:rotate(-3deg)}88%{transform:rotate(1deg)}}
.rc .rcs-adm-n{fill:#d9443a}
.rc .rcs-adm-s{fill:#e8e2d0;fill-opacity:.85}
.rc .rcs-adm-fleet{transform-origin:100px 100px;animation:rc-spin 30s linear infinite}
.rc .rcs-adm-ship{transform-origin:100px -6px;animation:rcs-adm-rock 2.2s ease-in-out infinite alternate}
@keyframes rcs-adm-rock{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.rc .rcs-adm-hull{fill:#3b2414;stroke:#c8924a;stroke-width:.6}
.rc .rcs-adm-sail{fill:#efe4c8;fill-opacity:.9}
.rc .rcs-adm-tail{fill:#123c46;stroke:#3fc4d6;stroke-width:.7;transform:translateY(18px);animation:rcs-adm-breach 13s ease-in-out infinite}
@keyframes rcs-adm-breach{0%,58%,82%,100%{transform:translateY(18px);opacity:0}62%{opacity:1}66%,74%{transform:translateY(0);opacity:1}}
.rc .rcs-adm-splash{fill:#bfefff;opacity:0;animation:rcs-adm-splash 13s ease-out infinite}
@keyframes rcs-adm-splash{0%,63%,78%,100%{opacity:0;transform:none}65%{opacity:1}75%{opacity:0;transform:translateY(-10px)}}
/* the Seven Broken Rings */
@keyframes rcs-sen-a0{0%,3%,12%,100%{transform:none;opacity:1}7%,10%{transform:translate(-3px,-4px) rotate(-16deg);opacity:.75}}
@keyframes rcs-sen-b0{0%,3%,12%,100%{transform:none;opacity:1}7%,10%{transform:translate(3px,4px) rotate(14deg);opacity:.75}}
@keyframes rcs-sen-p0{0%,11.9%{transform:scale(1);opacity:0}12%{transform:scale(1);opacity:.9}17%,100%{transform:scale(2.6);opacity:0}}
@keyframes rcs-sen-a1{0%,16.5%,25.5%,100%{transform:none;opacity:1}20.5%,23.5%{transform:translate(-3px,-4px) rotate(-16deg);opacity:.75}}
@keyframes rcs-sen-b1{0%,16.5%,25.5%,100%{transform:none;opacity:1}20.5%,23.5%{transform:translate(3px,4px) rotate(14deg);opacity:.75}}
@keyframes rcs-sen-p1{0%,25.4%{transform:scale(1);opacity:0}25.5%{transform:scale(1);opacity:.9}30.5%,100%{transform:scale(2.6);opacity:0}}
@keyframes rcs-sen-a2{0%,30%,39%,100%{transform:none;opacity:1}34%,37%{transform:translate(-3px,-4px) rotate(-16deg);opacity:.75}}
@keyframes rcs-sen-b2{0%,30%,39%,100%{transform:none;opacity:1}34%,37%{transform:translate(3px,4px) rotate(14deg);opacity:.75}}
@keyframes rcs-sen-p2{0%,38.9%{transform:scale(1);opacity:0}39%{transform:scale(1);opacity:.9}44%,100%{transform:scale(2.6);opacity:0}}
@keyframes rcs-sen-a3{0%,43.5%,52.5%,100%{transform:none;opacity:1}47.5%,50.5%{transform:translate(-3px,-4px) rotate(-16deg);opacity:.75}}
@keyframes rcs-sen-b3{0%,43.5%,52.5%,100%{transform:none;opacity:1}47.5%,50.5%{transform:translate(3px,4px) rotate(14deg);opacity:.75}}
@keyframes rcs-sen-p3{0%,52.4%{transform:scale(1);opacity:0}52.5%{transform:scale(1);opacity:.9}57.5%,100%{transform:scale(2.6);opacity:0}}
@keyframes rcs-sen-a4{0%,57%,66%,100%{transform:none;opacity:1}61%,64%{transform:translate(-3px,-4px) rotate(-16deg);opacity:.75}}
@keyframes rcs-sen-b4{0%,57%,66%,100%{transform:none;opacity:1}61%,64%{transform:translate(3px,4px) rotate(14deg);opacity:.75}}
@keyframes rcs-sen-p4{0%,65.9%{transform:scale(1);opacity:0}66%{transform:scale(1);opacity:.9}71%,100%{transform:scale(2.6);opacity:0}}
@keyframes rcs-sen-a5{0%,70.5%,79.5%,100%{transform:none;opacity:1}74.5%,77.5%{transform:translate(-3px,-4px) rotate(-16deg);opacity:.75}}
@keyframes rcs-sen-b5{0%,70.5%,79.5%,100%{transform:none;opacity:1}74.5%,77.5%{transform:translate(3px,4px) rotate(14deg);opacity:.75}}
@keyframes rcs-sen-p5{0%,79.4%{transform:scale(1);opacity:0}79.5%{transform:scale(1);opacity:.9}84.5%,100%{transform:scale(2.6);opacity:0}}
@keyframes rcs-sen-a6{0%,84%,93%,100%{transform:none;opacity:1}88%,91%{transform:translate(-3px,-4px) rotate(-16deg);opacity:.75}}
@keyframes rcs-sen-b6{0%,84%,93%,100%{transform:none;opacity:1}88%,91%{transform:translate(3px,4px) rotate(14deg);opacity:.75}}
@keyframes rcs-sen-p6{0%,92.9%{transform:scale(1);opacity:0}93%{transform:scale(1);opacity:.9}98%,100%{transform:scale(2.6);opacity:0}}

.rc .rcs-sen-half{fill:none;stroke:#eafffb;stroke-width:1.3;filter:drop-shadow(0 0 2px #5fe0cf)}
.rc .rcs-sen-pulse{fill:none;stroke:#5fe0cf;stroke-width:1}
/* the Living Matrix */
.rc .rcs-run-tint{mix-blend-mode:color;opacity:.45;animation:rcs-run-tint 8s steps(1) infinite}
@keyframes rcs-run-tint{0%{fill:#ff6a3d}25%{fill:#bfe8ff}50%{fill:#3fa9ff}75%{fill:#8bd16a}}
.rc .rcs-run-node{fill:none;stroke-width:1.3;transform-box:fill-box;transform-origin:50% 50%;animation:rcs-run-node 8s ease-out infinite}
@keyframes rcs-run-node{0%{transform:scale(1.5);filter:drop-shadow(0 0 5px currentColor)}20%,100%{transform:scale(1);filter:none}}
.rc .rcs-run-bolt{fill:none;stroke:#fff;stroke-width:1.1;stroke-linejoin:round;opacity:0;animation:rcs-run-bolt 8s steps(1) infinite}
@keyframes rcs-run-bolt{0%{opacity:0}19%{opacity:1}20%{opacity:.3}21%{opacity:1}23%,100%{opacity:0}}

#netui.xr-on>*:not(#crossroads):not(#catastrophePanel):not(#xrCatBack){display:none!important}
#netui.xr-on.xr-cat>#crossroads{display:none}
#netui.xr-on{max-width:1180px;padding:0 0 70px;background:none;border:0;box-shadow:none;border-radius:0}
#crossroads{--xr-c:#dcb35c;--xr-ink:#efe7d6;--xr-mute:#8e8a7d;padding:30px 12px 0;color:var(--xr-ink);font:14px/1.5 var(--ui-font,system-ui,sans-serif)}
#crossroads button{font-family:inherit}
/* the circles themselves are Road Circles (road-circles.mjs) */
/* the head */
#crossroads .xr-bar{display:flex;justify-content:space-between;align-items:center;gap:10px}
#crossroads .xr-back{font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;padding:9px 14px;border-radius:4px;border:1px solid rgba(239,231,214,.18);background:rgba(10,12,18,.6);color:#cfc6b2;cursor:pointer}
#crossroads .xr-back:hover{border-color:var(--xr-c);color:#fff}
#crossroads .xr-head{text-align:center;margin:6px 0 0}
#crossroads .xr-kicker{font:700 10px var(--mono);letter-spacing:.5em;text-transform:uppercase;color:var(--xr-c)}
#crossroads .xr-title{margin:8px 0 0;font:400 clamp(40px,6vw,64px)/1 var(--serif);color:#f4ecdc;text-shadow:0 3px 18px #000}
#crossroads .xr-me{margin:12px 0 0;font:11px var(--mono);letter-spacing:.06em;color:var(--xr-mute)}
#crossroads .xr-me b{color:#f2d98f}
#crossroads .xr-link{background:none;border:0;padding:0;font:inherit;color:#d6bd7c;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#crossroads .xr-link:hover{color:#fff}
/* the great circle */
#crossroads .xr-hero{position:relative;width:min(470px,92vw);aspect-ratio:1;margin:18px auto 0}
#crossroads .xr-hero-ring{position:absolute;inset:0;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--xr-c) 30%,transparent))}
#crossroads .xr-hero::before{content:"";position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--xr-c) 14%,#0c0e14) 0,#07080c 70%);box-shadow:0 0 60px #000 inset}
#crossroads .xr-hero.busy .rc-a{animation-duration:9s}
#crossroads .xr-hero.busy .rc-b{animation-duration:6s}
#crossroads .xr-core{position:absolute;inset:20%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center}
#crossroads .xr-core em{font:700 9px var(--mono);font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:var(--xr-mute)}
#crossroads .xr-core h3{margin:0;font:400 24px/1.15 var(--serif);color:#f4ecdc}
#crossroads .xr-core p{margin:0;font-size:12px;color:#b8b1a1;max-width:240px}
#crossroads .xr-quick{width:min(250px,100%);padding:12px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--xr-c) 70%,#000);background:linear-gradient(180deg,color-mix(in srgb,var(--xr-c) 26%,#16120a),#0d0b07);color:#fff3cf;cursor:pointer;box-shadow:0 0 18px color-mix(in srgb,var(--xr-c) 25%,transparent);transition:transform .15s,box-shadow .15s}
#crossroads .xr-quick:hover{transform:translateY(-1px);box-shadow:0 0 28px color-mix(in srgb,var(--xr-c) 45%,transparent)}
#crossroads .xr-quick b{display:block;font:400 19px var(--serif)}
#crossroads .xr-quick small{display:block;font:700 8px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--xr-c) 70%,#fff)}
#crossroads .xr-code{display:inline-block;padding:4px 12px;border:1px dashed color-mix(in srgb,var(--xr-c) 60%,#000);border-radius:4px;font:700 17px var(--mono);letter-spacing:.3em;color:#f5e3ae}
#crossroads .xr-small{font:700 9px var(--mono);letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;border-radius:999px;border:1px solid rgba(239,231,214,.22);background:rgba(8,9,13,.7);color:#e8dfcb;cursor:pointer}
#crossroads .xr-small.pri{border-color:color-mix(in srgb,var(--xr-c) 70%,#000);color:#fff0c4}
#crossroads .xr-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
#crossroads .xr-dots::after{content:"";animation:xr-dots 1.4s steps(4) infinite}
@keyframes xr-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
#crossroads .xr-bring{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin:6px 0 0;font:700 9px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--xr-mute)}
#crossroads .xr-bring select,#crossroads .xr-join select,#crossroads .xr-join input,#xrSetPanel input,#xrSetPanel select{font:600 12px var(--ui-font,system-ui,sans-serif);letter-spacing:0;text-transform:none;padding:8px 10px;border-radius:6px;border:1px solid rgba(239,231,214,.2);background:#0d1017;color:var(--xr-ink)}
/* the tables */
#crossroads .xr-sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:40px 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(220,179,92,.18)}
#crossroads .xr-sec h3{margin:0;font:400 28px var(--serif);color:#f4ecdc}
#crossroads .xr-sec small{font:700 9px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--xr-mute)}
#crossroads .xr-chips{display:flex;gap:6px;flex-wrap:wrap}
#crossroads .xr-chip{font:700 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;border-radius:999px;border:1px solid rgba(239,231,214,.16);background:none;color:var(--xr-mute);cursor:pointer}
#crossroads .xr-chip.on{border-color:#dcb35c;color:#f5e3ae;background:rgba(220,179,92,.1)}
#crossroads .xr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px 16px}
#crossroads .xr-rt{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:none;color:inherit;cursor:pointer;text-align:center}
#crossroads .xr-disc{position:relative;width:min(190px,100%);aspect-ratio:1;transition:transform .2s}
#crossroads .xr-disc::before{content:"";position:absolute;inset:17%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--xr-c) 12%,#10121a),#08090d 72%);box-shadow:inset 0 0 24px #000}
#crossroads .xr-disc>.rc{position:absolute;inset:0}
#crossroads .xr-disc .rc-mark,#crossroads .xr-hero .rc-mark{display:none}
#crossroads .xr-rt-mark{font:700 13px/1 var(--serif);font-style:normal;color:var(--xr-c);text-shadow:0 0 8px var(--xr-c)}
#crossroads .xr-rt:hover .xr-disc,#crossroads .xr-rt:focus-visible .xr-disc{transform:scale(1.04)}
#crossroads .xr-rt:hover .rc-a{animation-duration:20s}
#crossroads .xr-rt-core{position:absolute;inset:22%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
#crossroads .xr-rt-core em{font:700 8px var(--mono);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--xr-c)}
#crossroads .xr-rt-core b{font:400 16px/1.15 var(--serif);color:#f4ecdc}
#crossroads .xr-rt-core small{font:10px var(--mono);color:var(--xr-mute)}
#crossroads .xr-rt-core .xr-sit{margin-top:4px;font:700 8px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#f5e3ae;opacity:0;transition:opacity .15s}
#crossroads .xr-rt:hover .xr-sit,#crossroads .xr-rt:focus-visible .xr-sit{opacity:1}
#crossroads .xr-rt-foot{font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--xr-mute)}
#crossroads .xr-rt-foot i{font-style:normal;color:color-mix(in srgb,var(--xr-c) 80%,#fff)}
#crossroads .xr-rt.fun .xr-rt-foot i{color:#a9cdf0}
#crossroads .xr-rt.mine .xr-disc{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--xr-c) 50%,transparent))}
#crossroads .xr-rt.set .xr-rt-core b{font-size:40px;line-height:1;color:var(--xr-c)}

#crossroads .xr-join{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin:34px 0 0;font:700 9px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--xr-mute)}
#crossroads .xr-join input{width:96px;text-transform:uppercase;letter-spacing:.2em}
#crossroads .xr-note{margin:14px 0 0;text-align:center;font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#6d6a61}
#crossroads .xr-warn{margin:12px auto 0;max-width:600px;padding:9px 14px;border:1px solid rgba(255,140,110,.35);border-radius:6px;color:#ffc9b8;background:#2a120c55;font-size:12px}
/* setting a table */
#xrSetPanel{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;background:rgba(3,4,7,.78);backdrop-filter:blur(3px)}
#xrSetPanel .xr-set-card{--xr-c:#dcb35c;position:relative;width:min(560px,calc(100vw - 28px));max-height:calc(100vh - 36px);overflow:auto;padding:26px 26px 22px;border-radius:14px;border:1px solid rgba(220,179,92,.4);background:radial-gradient(circle at 50% -20%,#2a2213,#0c0d12 60%);color:#efe7d6;box-shadow:0 30px 80px #000c;font:14px/1.5 var(--ui-font,system-ui,sans-serif)}
#xrSetPanel .xr-set-ring{position:absolute;right:-60px;top:-60px;width:220px;height:220px;opacity:.5;pointer-events:none}
#xrSetPanel h3{margin:0;font:400 32px var(--serif);color:#f6eedd}
#xrSetPanel .xr-set-sub{margin:4px 0 18px;color:#9a9486;font-size:13px}
#xrSetPanel label.xr-f{display:block;margin:14px 0 6px;font:700 9px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#a79f8b}
#xrSetPanel input.xr-name{width:100%;box-sizing:border-box;font:400 18px var(--serif);padding:10px 12px}
#xrSetPanel .xr-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
#xrSetPanel .xr-mode{position:relative;text-align:left;padding:12px 14px 12px 52px;border-radius:10px;border:1px solid rgba(239,231,214,.14);background:rgba(10,11,16,.7);color:#efe7d6;cursor:pointer}
#xrSetPanel .xr-mode i{position:absolute;left:12px;top:50%;width:28px;height:28px;margin-top:-14px;display:grid;place-items:center;border:1px solid rgba(220,179,92,.5);transform:rotate(45deg);font:italic 12px var(--serif);color:#dcb35c}
#xrSetPanel .xr-mode i span{transform:rotate(-45deg)}
#xrSetPanel .xr-mode b{display:block;font:400 17px var(--serif)}
#xrSetPanel .xr-mode small{font:700 8px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#8e8a7d}
#xrSetPanel .xr-mode.on{border-color:#dcb35c;background:rgba(220,179,92,.1)}
#xrSetPanel .xr-mode.on small{color:#f0d68e}
#xrSetPanel .xr-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#xrSetPanel .xr-seg button{padding:10px;border-radius:10px;border:1px solid rgba(239,231,214,.14);background:rgba(10,11,16,.7);color:#cfc6b2;cursor:pointer;font:600 12px var(--ui-font,system-ui,sans-serif)}
#xrSetPanel .xr-seg button small{display:block;margin-top:2px;font:400 11px var(--ui-font,system-ui,sans-serif);color:#8e8a7d}
#xrSetPanel .xr-seg button.on{border-color:#dcb35c;color:#fff0c4;background:rgba(220,179,92,.1)}
#xrSetPanel .xr-bringing{margin:16px 0 0;font-size:12px;color:#9a9486}
#xrSetPanel .xr-bringing b{color:#efe7d6}
#xrSetPanel .xr-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
#xrSetPanel .xr-actions button{font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;padding:11px 16px;border-radius:999px;border:1px solid rgba(239,231,214,.2);background:none;color:#e8dfcb;cursor:pointer}
#xrSetPanel .xr-actions .go{border-color:#dcb35c;background:linear-gradient(180deg,#3a2d12,#1a140a);color:#fff0c4}
#xrCatBack{display:none;margin:0 0 10px}
#netui.xr-on.xr-cat #xrCatBack{display:inline-block}
#xrQueue{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:9300;display:none;align-items:center;gap:12px;padding:8px 10px 8px 16px;border:1px solid rgba(220,179,92,.45);border-radius:999px;background:rgba(12,11,9,.94);box-shadow:0 10px 30px #000a;color:#ffe7a8;font:600 12px var(--ui-font,system-ui,sans-serif)}
#xrQueue.on{display:flex}
#xrQueue button{font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid rgba(236,230,214,.25);background:none;color:#ece6d6;cursor:pointer}
@media (max-width:600px){#crossroads{padding-top:130px}#crossroads .xr-grid{grid-template-columns:repeat(2,1fr);gap:18px 10px}#crossroads .xr-rt-core b{font-size:13px}#crossroads .xr-core h3{font-size:19px}#crossroads .xr-quick{padding:9px 12px}#crossroads .xr-quick b{font-size:16px}#xrSetPanel .xr-modes{grid-template-columns:1fr}}

.thero.ward{border-color:#9cc9ff;background:radial-gradient(circle at 40% 35%,#2b4568,#07101d 70%);
  box-shadow:0 0 0 2px rgba(124,180,255,.3),0 0 16px rgba(124,180,255,.8),inset 0 0 12px rgba(124,180,255,.28)}
.thero.ward::before,.thero.ward::after{content:"";position:absolute;inset:-5px;border-radius:50%;pointer-events:none;border:2px solid transparent;
  border-top-color:#c5e3ff;border-right-color:#75b7ff;filter:drop-shadow(0 0 4px #75b7ff);animation:heroWardSpin 1.8s linear infinite}
.thero.ward::after{inset:-9px;border-width:1px;border-top-color:transparent;border-right-color:transparent;
  border-bottom-color:#d9efff;border-left-color:#5b9fe8;animation-direction:reverse;animation-duration:2.6s}
.thero.ward .hp{background:radial-gradient(circle at 35% 30%,#d7f0ff,#397bc1 68%,#183c70);border-color:#214c83;box-shadow:0 0 0 1px rgba(151,210,255,.3),0 0 10px #69b5ff}
.thero.everguard{border-color:#78d27d;background:radial-gradient(circle at 38% 34%,#203c29,#07120b 68%);
  box-shadow:0 0 0 2px rgba(67,142,73,.3),0 0 14px rgba(91,196,100,.65),inset 0 0 12px rgba(80,171,86,.28)}
.thero.everguard::before{content:"";position:absolute;inset:-5px;border-radius:48% 52% 46% 54%;pointer-events:none;
  background:repeating-conic-gradient(from 8deg,transparent 0 20deg,#377d43 21deg 23deg,transparent 24deg 42deg);
  -webkit-mask:radial-gradient(circle,transparent 0 57%,#000 59% 67%,transparent 69%);mask:radial-gradient(circle,transparent 0 57%,#000 59% 67%,transparent 69%)}
.thero.everguard .hp{background:radial-gradient(circle at 35% 30%,#8ce496,#26713a 68%,#123f21);border-color:#173c20;color:#f2fff0}
/* Ward wins the rings when both are up, as it does on the duel hero */
.thero.everguard.ward::before{background:none;-webkit-mask:none;mask:none;border:2px solid transparent;border-top-color:#c5e3ff;border-right-color:#75b7ff}
.thero.run-hero-asleep>.run-sleep-cloud{top:-11px;left:4%;right:4%;height:15px}
.thero.run-hero-asleep>.run-sleep-cloud i{height:9px}
.thero.run-hero-asleep>.run-sleep-cloud i:nth-child(2){height:11px}
/* Aiming at a Work: the duel fades every Work you cannot pick and pulses the
   ones you can. Four-seat Works are the same .en element and already get .tgt,
   but only minions and heroes were covered, so the back row gave no cue. */
#teamgame.targeting .en:not(.tgt){opacity:.4;filter:grayscale(.6) brightness(.75);transition:opacity .15s ease,filter .15s ease}
#teamgame.targeting .en.tgt{animation:tgtBeckon 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.thero.ward::before,.thero.ward::after,#teamgame.targeting .en.tgt{animation:none}}

.knowledge-open{position:relative}
.knowledge-shell{position:fixed;inset:0;z-index:100080;display:none;align-items:stretch;justify-content:flex-end;background:rgba(1,3,8,.76);backdrop-filter:blur(9px)}
.knowledge-shell.on{display:flex}.knowledge-panel{width:min(1040px,96vw);height:100%;display:grid;grid-template-rows:auto auto 1fr;border-left:1px solid #3a465e;background:radial-gradient(circle at 88% 4%,rgba(220,179,92,.1),transparent 30%),#070a11;color:var(--ink);box-shadow:-30px 0 90px #000c}
.knowledge-head{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid #252d3e;background:#0a0e18}.knowledge-head i{width:34px;height:34px;display:grid;place-items:center;border:1px solid #dcb35c66;transform:rotate(45deg);color:#dcb35c;font:900 9px var(--mono)}.knowledge-head i::before{content:"BR";transform:rotate(-45deg)}.knowledge-title{min-width:0;flex:1}.knowledge-title span{display:block;color:#dcb35c;font:700 7px var(--mono);letter-spacing:.24em;text-transform:uppercase}.knowledge-title h2{margin:3px 0 0;font:700 clamp(22px,3vw,34px) var(--serif)}.knowledge-search{width:min(360px,38vw);padding:10px 12px;border:1px solid #3b465d;background:#03060c;color:#fff;font:600 11px var(--mono)}.knowledge-close{min-width:72px;padding:10px;border:1px solid #555f73;background:#111725;color:#fff;font:700 9px var(--mono);cursor:pointer}
.knowledge-tabs{display:flex;gap:1px;padding:0 22px;border-bottom:1px solid #252d3e;background:#090d16;overflow:auto}.knowledge-tabs button{padding:13px 14px;border:0;border-bottom:2px solid transparent;background:none;color:#7e899e;font:700 8px var(--mono);letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;cursor:pointer}.knowledge-tabs button.on{border-color:#dcb35c;color:#f4dfad}
.knowledge-body{min-height:0;overflow:auto;padding:22px}.knowledge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}.knowledge-card{padding:15px;border:1px solid #283247;background:linear-gradient(145deg,#0d121e,#080b12);box-shadow:inset 3px 0 var(--entry,#59677f)}.knowledge-card h3{margin:0 0 7px;color:#f4e9d4;font:700 17px var(--serif)}.knowledge-card .knowledge-meta{margin-bottom:9px;color:var(--entry,#dcb35c);font:700 7px var(--mono);letter-spacing:.12em;text-transform:uppercase}.knowledge-card p{margin:0;color:#b7c0d0;font:500 10px/1.55 var(--mono)}.knowledge-card button,.knowledge-action{margin-top:12px;padding:8px 10px;border:1px solid #6e5932;background:#171306;color:#f1d58e;font:700 8px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.knowledge-card button:hover,.knowledge-action:hover{border-color:#dcb35c;background:#241c09}
.knowledge-empty{padding:50px 20px;text-align:center;color:#738096;font:700 10px var(--mono)}
.faction-lesson-objectives{display:grid;gap:7px;margin-top:10px}.faction-lesson-objectives span{padding:7px 8px;border-left:2px solid #48536a;background:#080b12;color:#aeb8ca;font:600 8px/1.35 var(--mono)}.upgrade-stage{margin-top:10px;padding-top:10px;border-top:1px solid #283247}.upgrade-stage b{display:block;color:#dcb35c;font:700 8px var(--mono);letter-spacing:.11em;text-transform:uppercase}.upgrade-stage small{display:block;margin-top:5px;color:#aeb8ca;font:500 9px/1.45 var(--mono)}
.resolution-list{display:grid;gap:8px}.resolution-row{display:grid;grid-template-columns:minmax(110px,1fr) 28px minmax(110px,1fr) minmax(150px,1.3fr);align-items:center;gap:7px;padding:10px;border:1px solid #273148;background:#090d16}.resolution-node{padding:8px;border:1px solid #39455e;background:#050810;color:#e1e7f1;font:700 9px/1.35 var(--mono)}.resolution-arrow{text-align:center;color:#dcb35c;font-size:18px}.resolution-result{color:#b7c3d7;font:600 8px/1.45 var(--mono)}.resolution-result b{display:block;color:#dcb35c}.resolution-round{grid-column:1/-1;color:#758198;font:700 7px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.action-denial{position:fixed;left:16px;bottom:16px;z-index:100070;width:min(390px,calc(100vw - 32px));display:none;padding:13px 14px;border:1px solid #8a454b;border-left:4px solid #df6770;background:#11080bee;color:#f3d6d9;box-shadow:0 18px 55px #000b;backdrop-filter:blur(8px)}.action-denial.on{display:block;animation:denialIn .18s ease}.action-denial b{display:block;margin-bottom:5px;color:#ff8d96;font:800 8px var(--mono);letter-spacing:.16em}.action-denial p{margin:0;font:600 10px/1.5 var(--mono)}.action-denial button{margin-top:9px;padding:6px 8px;border:1px solid #87565b;background:#1d0e12;color:#ffd4d8;font:700 7px var(--mono);cursor:pointer}
@keyframes denialIn{from{opacity:0;transform:translateY(8px)}}
.lesson-hud{position:fixed;left:50%;top:12px;z-index:9997;transform:translateX(-50%);display:none;width:min(620px,90vw);padding:9px 12px;border:1px solid #dcb35c88;background:#080b12e8;color:#e9ddc2;box-shadow:0 8px 30px #000b;backdrop-filter:blur(8px)}.lesson-hud.on{display:block}.lesson-hud-head{display:flex;justify-content:space-between;color:#dcb35c;font:800 7px var(--mono);letter-spacing:.13em}.lesson-hud-items{display:flex;gap:10px;margin-top:7px}.lesson-hud-items span{flex:1;color:#8995a9;font:600 8px/1.35 var(--mono)}.lesson-hud-items span.done{color:#87d5a9}.lesson-hud-items span.done::before{content:"✓ "}
@media(max-width:720px){.knowledge-head{flex-wrap:wrap}.knowledge-search{order:3;width:100%}.knowledge-body{padding:13px}.resolution-row{grid-template-columns:1fr 22px 1fr}.resolution-result{grid-column:1/-1}.lesson-hud-items{display:grid}.knowledge-panel{width:100vw}}

.road-pass-open{position:fixed;right:18px;top:16px;z-index:198;display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid #80652f;border-radius:4px;background:linear-gradient(145deg,#181308e8,#080b12ee);box-shadow:0 8px 28px #0008,0 0 18px #c3922d22;color:#f0d47e;cursor:pointer;backdrop-filter:blur(8px)}
.road-pass-open:hover{border-color:#e0b75a;box-shadow:0 10px 34px #000b,0 0 25px #c3922d44}.road-pass-open b,.road-pass-open small{display:block;text-align:left}.road-pass-open b{font:800 9px var(--mono);letter-spacing:.12em;text-transform:uppercase}.road-pass-open small{margin-top:2px;color:#a89a7c;font:7px var(--mono)}.road-pass-rank{display:grid;place-items:center;width:30px;height:30px;border:1px solid #c59d4d;transform:rotate(45deg);background:#080a0e;color:#f8dc86;font:900 10px var(--mono)}.road-pass-rank span{transform:rotate(-45deg)}
.road-pass-overlay{position:fixed;inset:0;z-index:100180;display:none;padding:22px;background:#020307ed;backdrop-filter:blur(13px);color:#eee8db}.road-pass-overlay.on{display:block}.road-pass-shell{width:min(1280px,100%);height:min(900px,calc(100vh - 44px));margin:auto;overflow:hidden;border:1px solid #725b30;border-radius:8px;background:radial-gradient(circle at 80% 0,#8a66251c,transparent 36%),linear-gradient(150deg,#101621,#06080d 62%,#0c0905);box-shadow:0 32px 110px #000;display:grid;grid-template-rows:auto auto minmax(0,1fr)}
.road-pass-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 24px;border-bottom:1px solid #504329}.road-pass-head span{color:#c6a65d;font:800 7px var(--mono);letter-spacing:.22em;text-transform:uppercase}.road-pass-head h2{margin:5px 0 3px;font:34px var(--serif);font-weight:400}.road-pass-head p{margin:0;color:#8f98a8;font:10px/1.5 var(--mono)}.road-pass-head-actions{display:flex;align-items:center;gap:10px}.road-pass-profile{padding:8px 11px;border:1px solid #3b4657;background:#080c13;color:#b8c2d0;font:8px var(--mono);letter-spacing:.08em}.road-pass-points{min-width:105px;padding:8px 11px;border:1px solid #98773a;background:#181205;text-align:center}.road-pass-points b,.road-pass-points small{display:block}.road-pass-points b{color:#f0cc70;font:700 22px var(--serif)}.road-pass-points small{color:#9f8955;font:800 6px var(--mono);letter-spacing:.13em;text-transform:uppercase}
.road-pass-tabs{display:flex;gap:2px;padding:10px 24px;border-bottom:1px solid #303541;background:#080b11}.road-pass-tabs button{padding:9px 13px;border:1px solid transparent;background:transparent;color:#778294;font:800 8px var(--mono);letter-spacing:.13em;text-transform:uppercase;cursor:pointer}.road-pass-tabs button.on{border-color:#765e31;background:#171207;color:#ebca72}.road-pass-body{min-height:0;overflow:auto;padding:22px 24px 30px;scrollbar-width:thin}
.road-track-summary{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:18px}.road-track-summary h3{margin:0;font:26px var(--serif);font-weight:400}.road-track-summary p{margin:5px 0 0;color:#8f99a7;font:10px/1.5 var(--mono)}.road-track-next{min-width:240px}.road-track-next div{height:5px;margin-top:7px;background:#252a32;overflow:hidden}.road-track-next i{display:block;height:100%;background:linear-gradient(90deg,#8f6b2d,#efd171);box-shadow:0 0 10px #d4a84a}.road-track{display:flex;gap:12px;overflow-x:auto;padding:10px 4px 25px;scrollbar-width:thin}.road-node{position:relative;flex:0 0 174px;min-height:230px;padding:14px;border:1px solid #343b47;background:linear-gradient(155deg,#0d121b,#06080c);color:#c7ced8}.road-node::after{content:"";position:absolute;right:-13px;top:35px;width:13px;height:1px;background:#4b4f54}.road-node:last-child::after{display:none}.road-node.unlocked{border-color:#8e7138;background:radial-gradient(circle at 90% 0,#d3a44822,transparent 40%),linear-gradient(150deg,#171207,#090c12);box-shadow:inset 0 0 20px #d2a0380b}.road-node.equipped{outline:2px solid #efd279;outline-offset:2px}.road-node-level{color:#7d8794;font:800 7px var(--mono);letter-spacing:.14em}.road-node.unlocked .road-node-level{color:#d1ad5a}.road-node-icon{display:grid;place-items:center;width:54px;height:54px;margin:18px auto;border:1px solid #4b5360;transform:rotate(45deg);background:#080b10;color:#68727f;font:700 20px var(--serif)}.road-node-icon span{transform:rotate(-45deg)}.road-node.unlocked .road-node-icon{border-color:#c59d4c;color:#f0cf76;box-shadow:0 0 22px #bc8b2b2a}.road-node b,.road-node small{display:block}.road-node b{font:700 15px var(--serif);color:#e9e3d7}.road-node small{margin-top:6px;color:#828c9a;font:9px/1.45 var(--mono)}.road-node-lock{position:absolute;left:14px;bottom:12px;color:#707987;font:800 7px var(--mono);letter-spacing:.1em}.road-node.unlocked .road-node-lock{color:#d0af61}
.achievement-tools{display:flex;gap:10px;margin-bottom:15px}.achievement-tools input,.achievement-tools select{padding:10px;border:1px solid #384252;background:#070b12;color:#dce3ec;font:9px var(--mono)}.achievement-tools input{flex:1}.achievement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.achievement-card{padding:13px;border:1px solid #323a47;background:#090d14}.achievement-card.complete{border-color:#796232;background:linear-gradient(130deg,#161207,#080c13)}.achievement-card-head{display:flex;justify-content:space-between;gap:12px}.achievement-card em{color:#718096;font:800 6px var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase}.achievement-card strong{display:block;margin-top:4px;color:#e6e1d7;font:700 14px var(--serif)}.achievement-card .achievement-points{color:#d5ad50;font:800 8px var(--mono)}.achievement-card p{min-height:30px;margin:8px 0;color:#8d96a4;font:9px/1.45 var(--mono)}.achievement-bar{height:4px;background:#262c35;overflow:hidden}.achievement-bar i{display:block;height:100%;background:#6e7d91}.achievement-card.complete .achievement-bar i{background:linear-gradient(90deg,#8d6928,#f0d078)}.achievement-count{display:block;margin-top:5px;color:#697485;font:7px var(--mono)}
.customization-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:-5px 0 16px;padding:7px;border:1px solid #303845;background:#070a0f}.customization-tabs button{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border:1px solid transparent;background:#0b0f15;color:#8d98a7;font:800 8px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.customization-tabs button b{display:grid;place-items:center;min-width:23px;height:20px;border:1px solid #3b4553;color:#7f8b9b;font-size:7px}.customization-tabs button.on{border-color:#b28b40;background:#1b1407;color:#f0ce74;box-shadow:inset 0 0 18px #c99a3013}.customization-tabs button.on b{border-color:#9d7937;color:#f4d47a}.customization-collection-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px;padding:15px 17px;border:1px solid #4b4029;background:linear-gradient(120deg,#10141b,#0a0b0c)}.customization-collection-head span{color:#cba454;font:900 7px var(--mono);letter-spacing:.18em;text-transform:uppercase}.customization-collection-head h3{margin:4px 0 3px;color:#eee4d1;font:400 23px var(--serif)}.customization-collection-head p{margin:0;color:#8994a1;font:9px/1.45 var(--mono)}.customization-collection-head button{padding:9px 12px;border:1px solid #545e6b;background:#090d12;color:#aab4c1;font:800 7px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.reward-slot{appearance:none;text-align:left;color:inherit;cursor:pointer}.reward-slot small{display:block;margin-top:5px;color:#687382;font:700 6px var(--mono);letter-spacing:.1em;text-transform:uppercase}.reward-slot.active{border-color:#c49b49;background:#171207;box-shadow:inset 0 0 20px #d1a43f12}.reward-cardback-visual{position:relative;height:102px!important;overflow:hidden;border-radius:5px;color:#f2d17a!important;font:700 16px var(--serif)!important;text-shadow:0 0 8px #000;box-shadow:inset 0 0 0 3px #05070a,inset 0 0 0 4px #8c774d55}.reward-cardback-visual::before{content:"";position:absolute;inset:8px;border:1px solid currentColor;border-radius:3px;opacity:.45}.reward-cardback-visual[data-back="back-gilded"]{background:radial-gradient(circle at 50% 50%,#c49b43 0 2%,transparent 3% 18%),linear-gradient(145deg,transparent 46%,#d3aa5255 47% 49%,transparent 50%),#07090d!important}.reward-cardback-visual[data-back="back-vehemence"]{background:repeating-radial-gradient(ellipse at 18% 75%,transparent 0 8px,#b58a2e44 9px 10px,transparent 11px 17px),radial-gradient(circle,#654810,#020201 64%)!important}.reward-cardback-visual[data-back="back-moonstone"]{background:radial-gradient(circle at 50% 32%,#edf7ff 0 8%,#83a9c9 9% 11%,transparent 12%),repeating-linear-gradient(45deg,transparent 0 16px,#96b7d428 17px 18px),linear-gradient(#1d3551,#05080d)!important}.reward-cardback-visual[data-back="back-ashen"]{background:radial-gradient(circle,#e98b4e 0 2%,transparent 3% 16%),repeating-conic-gradient(from 45deg,#4d160e 0 15deg,#1e0a08 16deg 30deg,#7a2a17 31deg 45deg)!important}.reward-cardback-visual[data-back="back-void"]{background:radial-gradient(circle at 50% 22%,#e8edf5 0 1%,transparent 2% 5%),linear-gradient(160deg,transparent 47%,#76809333 48% 49%,transparent 50%),linear-gradient(#090a0d,#010102)!important}
.faction-mastery{margin:22px 0}.faction-mastery-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.faction-mastery-card{min-height:260px}.faction-back-preview.back{display:block;width:100%;height:102px;margin:0 0 12px;border-radius:5px}.faction-mastery-progress{height:4px;margin-top:9px;background:#252b33;overflow:hidden}.faction-mastery-progress i{display:block;height:100%;background:linear-gradient(90deg,#846529,#e3bb5b);box-shadow:0 0 8px #c69a3e}.faction-mastery-card>em{display:block;margin-top:5px;color:#87919f;font:800 6px var(--mono);letter-spacing:.1em}.faction-mastery-card.locked .faction-back-preview{filter:grayscale(.8) brightness(.55)}@media(max-width:1000px){.faction-mastery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:700px){.customization-tabs{grid-template-columns:repeat(2,1fr)}.faction-mastery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.customization-collection-head{display:block}.customization-collection-head button{margin-top:10px;width:100%}}
.reward-loadout{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:20px}.reward-slot{padding:13px;border:1px solid #4a3f2d;background:#0c0d0e}.reward-slot span,.reward-slot b{display:block}.reward-slot span{color:#8e7c58;font:800 6px var(--mono);letter-spacing:.14em;text-transform:uppercase}.reward-slot b{margin-top:5px;color:#f1dfb2;font:700 14px var(--serif)}.reward-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.reward-card{min-height:180px;padding:14px;border:1px solid #333b47;background:#090d13;color:#d6dce4}.reward-card.locked{opacity:.45;filter:grayscale(.7)}.reward-card.equipped{border-color:#d3ad55;box-shadow:inset 0 0 22px #d5a43a16}.reward-preview{display:grid;place-items:center;height:58px;margin-bottom:12px;border:1px solid #3d4654;background:radial-gradient(circle,#302611,#080b10 70%);color:#efd174;font:700 14px var(--serif);letter-spacing:.08em}.reward-card b,.reward-card small{display:block}.reward-card b{font:700 15px var(--serif)}.reward-card small{min-height:36px;margin-top:6px;color:#818b99;font:9px/1.45 var(--mono)}.reward-card button{margin-top:10px;padding:7px 9px;border:1px solid #725a2d;background:#171207;color:#e7c66e;font:800 7px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.reward-card button:disabled{opacity:.55;cursor:default}
.card-back-preview-stage{position:relative;display:inline-block}
.card-back-preview-variants{position:absolute;top:10px;right:10px;z-index:9;width:34px;height:34px;padding:6px;border-radius:50%;border:1px solid #f0cd7299;background:#120c08d9;color:#f0cd72;cursor:pointer;box-shadow:0 0 12px #000a;transition:transform .15s,box-shadow .15s}
.card-back-preview-variants:hover,.card-back-preview-variants[aria-expanded="true"]{transform:scale(1.08);box-shadow:0 0 14px #f0a04a88}
.card-back-preview-variants svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8}.card-back-preview-variants circle{fill:currentColor}
.card-back-preview-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px;max-height:min(64vh,580px);overflow:auto;margin-top:14px;padding:4px;width:100%}
.card-back-preview-gallery[hidden]{display:none}
.card-back-version{appearance:none;display:flex;flex-direction:column;align-items:center;gap:5px;padding:5px;border-radius:10px;border:1px solid transparent;background:#ffffff08;color:#e9dcc4;font:600 10px/1.2 var(--ui-font,system-ui,sans-serif);text-align:center;cursor:pointer}
.card-back-version.on,.card-back-version:hover{border-color:#f0cd72aa;background:#f0cd7214}
.card-back-version .back{position:relative;display:block;width:64px;height:90px;border-radius:7px;background-size:cover!important}
.card-back-preview-trigger{appearance:none;position:relative;cursor:zoom-in!important}.card-back-preview-trigger:focus-visible{outline:2px solid #f0cd72;outline-offset:3px}.card-back-preview-trigger:hover{filter:brightness(1.2)!important;box-shadow:inset 0 0 0 2px #05070a,inset 0 0 0 3px #f0c96999,0 0 20px #d5a23f55!important}.card-back-preview-hint{position:absolute;z-index:8;left:50%;bottom:7px;transform:translateX(-50%);padding:4px 7px;border:1px solid #d4ad5b88;background:#030507db;color:#f1d17a;font:900 6px var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .15s}.card-back-preview-trigger:hover .card-back-preview-hint,.card-back-preview-trigger:focus-visible .card-back-preview-hint{opacity:1}.faction-back-preview.card-back-preview-trigger{padding:0}.cardback-prototype-preview.card-back-preview-trigger{width:100%;padding:0;margin:0}.reward-cardback-visual.card-back-preview-trigger{width:100%;padding:0;margin:0 0 12px}.reward-card.locked .card-back-preview-trigger{pointer-events:auto}.card-back-preview-overlay{position:fixed;inset:0;z-index:100420;display:none;place-items:center;padding:20px;background:#010205ed;backdrop-filter:blur(15px)}.card-back-preview-overlay.on{display:grid}.card-back-preview-shell{position:relative;display:grid;grid-template-columns:minmax(220px,340px) minmax(260px,390px);gap:30px;align-items:center;width:min(820px,94vw);min-height:520px;padding:34px;border:1px solid #b38b3e;background:radial-gradient(circle at 24% 30%,#c4962c1c,transparent 34%),linear-gradient(145deg,#111722,#05070b 68%,#171005);box-shadow:0 30px 110px #000,0 0 48px #c2943030}.card-back-preview-face.back{display:block!important;position:relative!important;width:min(320px,72vw)!important;height:auto!important;aspect-ratio:5/7!important;margin:auto!important;overflow:hidden!important;border:2px solid #9f8657!important;border-radius:10px!important;background:radial-gradient(circle,#354052 0 2%,#101722 3% 31%,#06090e 70%)!important;box-shadow:inset 0 0 0 5px #05070a,inset 0 0 0 6px #9f865766,0 25px 50px #000!important}.card-back-preview-face.back[data-faction]{background:var(--faction-back)!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 0 5px #030508,inset 0 0 0 6px color-mix(in srgb,var(--faccent) 65%,transparent),0 0 36px color-mix(in srgb,var(--faccent) 38%,transparent),0 25px 50px #000!important}.card-back-preview-face.back[data-faction]::before{inset:10px;border-width:2px}.card-back-preview-face.back[data-faction]::after{width:44%;font-size:28px}.card-back-preview-copy span{color:#cba652;font:900 7px var(--mono);letter-spacing:.2em;text-transform:uppercase}.card-back-preview-copy h2{margin:8px 0 8px;color:#f1e7d4;font:400 34px var(--serif)}.card-back-preview-copy p{margin:0;color:#9da7b5;font:10px/1.65 var(--mono)}.card-back-preview-status{display:block;margin-top:20px;padding:11px;border:1px solid #51452d;background:#0b0c0d;color:#d5b764;font:800 8px/1.45 var(--mono);letter-spacing:.09em;text-transform:uppercase}.card-back-preview-close{position:absolute;right:14px;top:14px;padding:8px 11px;border:1px solid #596473;background:#080c12;color:#b9c3cf;font:800 7px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}@media(max-width:700px){.card-back-preview-shell{grid-template-columns:1fr;gap:18px;min-height:0;max-height:94vh;overflow:auto;padding:48px 22px 24px}.card-back-preview-face.back{width:min(230px,70vw)!important}.card-back-preview-copy{text-align:center}}
.friend-copy .friend-title{display:block;margin-top:3px;color:#d5ae58;font:italic 10px/1.2 var(--serif);letter-spacing:.025em;white-space:normal;overflow-wrap:anywhere}.friend-copy .friend-title::before{content:"◆ ";color:#8b713e;font-style:normal;font-size:7px}
.achievement-debug-overlay{position:fixed;inset:0;z-index:100320;display:none;place-items:center;padding:22px;background:#010205e8;backdrop-filter:blur(12px);color:#eee8db}.achievement-debug-overlay.on{display:grid}.achievement-debug-shell{width:min(720px,100%);padding:22px;border:1px solid #9b7734;border-radius:7px;background:radial-gradient(circle at 84% 0,#d7a63d20,transparent 34%),linear-gradient(150deg,#111722,#07090d 66%,#150f05);box-shadow:0 30px 100px #000,0 0 40px #c9962925}.achievement-debug-shell header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:16px;border-bottom:1px solid #4c412c}.achievement-debug-shell header span{color:#d1a94f;font:900 7px var(--mono);letter-spacing:.2em;text-transform:uppercase}.achievement-debug-shell h2{margin:5px 0 3px;color:#f0e7d6;font:400 31px var(--serif)}.achievement-debug-shell header p{margin:0;color:#8994a2;font:9px/1.5 var(--mono)}.achievement-debug-readout{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.achievement-debug-readout div{padding:12px;border:1px solid #354050;background:#080c12}.achievement-debug-readout span,.achievement-debug-range>span,.achievement-debug-exact>span{display:block;color:#8d98a7;font:800 6px var(--mono);letter-spacing:.14em;text-transform:uppercase}.achievement-debug-readout b{display:block;margin-top:5px;color:#f0cc70;font:400 25px var(--serif)}.achievement-debug-range{display:block;padding:14px;border:1px solid #4b402a;background:#0a0c10}.achievement-debug-range input{width:100%;margin-top:13px;accent-color:#d4a544;cursor:pointer}.achievement-debug-exact{display:grid;grid-template-columns:1fr 180px;align-items:center;gap:14px;margin-top:9px;padding:10px 14px;border:1px solid #303946;background:#080b10}.achievement-debug-exact input{width:100%;padding:10px;border:1px solid #725a2f;background:#030507;color:#f4d477;font:700 18px var(--serif);text-align:right}.achievement-debug-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:9px}.achievement-debug-presets button,.achievement-debug-shell footer button{padding:9px;border:1px solid #4a5463;background:#0a0e14;color:#aab5c3;font:800 7px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.achievement-debug-presets button:hover{border-color:#c49b46;color:#f0d27f}.achievement-debug-shell footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:15px;border-top:1px solid #333944}.achievement-debug-shell footer .achievement-debug-actual{border-color:#4d5969}.achievement-debug-shell footer .achievement-debug-apply{border-color:#c09740;background:#241a08;color:#ffe095}.achievement-debug-shell footer .achievement-debug-apply:hover{box-shadow:0 0 22px #ca993d36}@media(max-width:600px){.achievement-debug-readout{grid-template-columns:1fr}.achievement-debug-exact{grid-template-columns:1fr}.achievement-debug-presets{grid-template-columns:repeat(5,minmax(0,1fr))}.achievement-debug-shell footer{flex-direction:column}}
.achievement-toast{position:fixed;right:18px;top:76px;z-index:100250;width:min(350px,calc(100vw - 36px));padding:13px 15px;border:1px solid #d1a54d;background:linear-gradient(130deg,#181207,#080b11);box-shadow:0 16px 45px #000,0 0 26px #c7942d44;animation:roadAchievementIn .35s ease-out;color:#f0e5cc}.achievement-toast span{color:#cba552;font:800 6px var(--mono);letter-spacing:.18em}.achievement-toast b{display:block;margin-top:4px;font:18px var(--serif);font-weight:400}.achievement-toast small{display:block;margin-top:4px;color:#a79b85;font:8px var(--mono)}
@keyframes roadAchievementIn{from{opacity:0;transform:translateX(25px)}}
/* Road Pass environments: profile-progression scenes, deliberately separate from faction identity. */
#menu[data-road-skin]{isolation:isolate;--road-pass-gold:#d8b35e;--road-pass-ink:#05070b}
#menu[data-road-skin] #themeDecor{filter:none;transform:none;overflow:hidden}
#menu[data-road-skin] #themeDecor::before,#menu[data-road-skin] #themeDecor::after{content:"";position:absolute;pointer-events:none}
#menu[data-road-skin="skin-nightfall"]{--menu-accent:#dfbd6b;--menu-accent2:#263e5a}
#menu[data-road-skin="skin-nightfall"]::before{background:radial-gradient(circle at 50% 47%,#d9b45c18 0 2%,transparent 17%),radial-gradient(ellipse at 50% 110%,#17334a 0,#081018 38%,transparent 66%),linear-gradient(#030507,#010203)}
#menu[data-road-skin="skin-nightfall"] #themeDecor::before{inset:7% 25%;border:1px solid #d8b35e4d;border-radius:50%;background:repeating-conic-gradient(from 0deg,transparent 0 12deg,#d8b35e2e 12.3deg 12.7deg,transparent 13deg 45deg);box-shadow:0 0 70px #d8b35e18,inset 0 0 55px #5a89aa13;animation:passCrossroadsOrrery 24s linear infinite}
#menu[data-road-skin="skin-nightfall"] .td-gate{display:block;left:50%;top:28%;width:112px;height:112px;transform:translateX(-50%) rotate(45deg);border:2px solid #d9b65f;background:#070a0ee8;box-shadow:0 0 45px #d8b35e55,inset 0 0 30px #d8b35e1a;animation:passMilestoneBreathe 5s ease-in-out infinite alternate}
#menu[data-road-skin="skin-nightfall"] .td-rays{display:block;background:conic-gradient(from 45deg at 50% 47%,transparent 0 10%,#cba34b1e 10.3% 10.7%,transparent 11% 24%,#5e91b71a 24.3% 24.7%,transparent 25% 49%,#cba34b1e 49.3% 49.7%,transparent 50% 74%,#5e91b71a 74.3% 74.7%,transparent 75%);animation:passCrossroadsCounter 31s linear infinite reverse}
#menu[data-road-skin="skin-moonlit"]{--menu-accent:#f0d998;--menu-accent2:#3b4b59}
#menu[data-road-skin="skin-moonlit"]::before{background:radial-gradient(circle at 50% 45%,#efe3bd1e 0 12%,transparent 33%),linear-gradient(115deg,#080a0d,#15130f 48%,#050608)}
#menu[data-road-skin="skin-moonlit"] #themeDecor::before{left:50%;top:47%;width:min(72vw,760px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(from 0deg,#e6c9789c 0 .35deg,transparent .5deg 14.7deg,#e6c97855 14.8deg 15.2deg,transparent 15.3deg 30deg);mask:radial-gradient(circle,transparent 0 35%,#000 35.4% 36%,transparent 36.5% 43%,#000 43.4% 44.2%,transparent 44.7% 48%,#000 48.4%);filter:drop-shadow(0 0 22px #e4c57555);animation:passClockTurn 60s steps(24,end) infinite}
#menu[data-road-skin="skin-moonlit"] .td-moon{display:block;left:50%;top:47%;width:min(39vw,410px);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #f0dd9d80;border-radius:50%;background:radial-gradient(circle,#050608 0 6%,#d7bd6a18 6.5% 7%,transparent 7.5% 68%,#f0dfaa24 68.5% 69%,transparent 69.5%);box-shadow:0 0 90px #e7cb7340,inset 0 0 70px #000;animation:passClockPulse 7s ease-in-out infinite alternate}
#menu[data-road-skin="skin-moonlit"] .td-rays{display:block;background:linear-gradient(90deg,transparent 49.85%,#f5dfa977 50%,transparent 50.15%),linear-gradient(0deg,transparent 49.88%,#d5b96638 50%,transparent 50.12%);animation:passClockShiver 8s ease-in-out infinite alternate}
#menu[data-road-skin="skin-vehemence"]{--menu-accent:#efcf77;--menu-accent2:#3b3020}
#menu[data-road-skin="skin-vehemence"]::before{background:radial-gradient(ellipse at 50% 75%,#8b68221c,transparent 47%),linear-gradient(110deg,#020304,#11100c 51%,#020304)}
#menu[data-road-skin="skin-vehemence"] #themeDecor::before{inset:8% 5%;background:repeating-linear-gradient(90deg,#b18b4328 0 1px,transparent 1px 16.5%),repeating-linear-gradient(0deg,#b18b431f 0 1px,transparent 1px 33%);mask:linear-gradient(90deg,#0008,transparent 15% 85%,#0008);animation:passReliquaryDrift 12s ease-in-out infinite alternate}
#menu[data-road-skin="skin-vehemence"] .td-gate{display:block;left:50%;top:16%;bottom:14%;width:min(24vw,270px);transform:translateX(-50%);border:1px solid #e2c06a73;background:linear-gradient(125deg,#ffe9a70b,transparent 46%,#cda84d12);box-shadow:inset 0 0 55px #d3ac4c13,0 0 45px #d0a74422;animation:passReliquaryGlass 6s ease-in-out infinite alternate}
#menu[data-road-skin="skin-vehemence"] .td-stars{display:block;background-image:radial-gradient(circle,#ffe29d 0 1px,transparent 1.5px),radial-gradient(circle,#bc9150 0 1px,transparent 1.5px);background-size:73px 91px,127px 109px;background-position:0 0,30px 20px;filter:drop-shadow(0 0 7px #f0c66c);animation:passCuriosFloat 16s linear infinite}
#menu[data-road-skin="skin-farsoul"]{--menu-accent:#d9b968;--menu-accent2:#365c62}
#menu[data-road-skin="skin-farsoul"]::before{background:radial-gradient(ellipse at 50% 70%,#49767a21,transparent 47%),repeating-radial-gradient(ellipse at 50% 60%,transparent 0 58px,#c4a65b15 59px 60px,transparent 61px 91px),linear-gradient(#07090a,#0d1212 60%,#030405)}
#menu[data-road-skin="skin-farsoul"] #themeDecor::before{inset:-20%;background:repeating-radial-gradient(ellipse at 30% 48%,transparent 0 26px,#d0b5682d 27px 28px,transparent 29px 52px),repeating-radial-gradient(ellipse at 72% 59%,transparent 0 38px,#6b9aa02b 39px 40px,transparent 41px 73px);transform:rotate(-8deg);animation:passAtlasContours 19s ease-in-out infinite alternate}
#menu[data-road-skin="skin-farsoul"] .td-rays{display:block;background:linear-gradient(118deg,transparent 0 31%,#efd7836b 31.2% 31.4%,transparent 31.6% 62%,#75aeb052 62.2% 62.4%,transparent 62.6%),linear-gradient(24deg,transparent 0 43%,#c8a95842 43.2% 43.4%,transparent 43.6%);animation:passAtlasFold 9s cubic-bezier(.45,0,.2,1) infinite alternate}
#menu[data-road-skin="skin-farsoul"] .td-frame{display:block;inset:7%;border:1px solid #c9a95838;clip-path:polygon(0 0,47% 0,50% 4%,53% 0,100% 0,100% 100%,53% 100%,50% 96%,47% 100%,0 100%);box-shadow:inset 0 0 80px #000}
#menu[data-road-skin="skin-catastrophe"]{--menu-accent:#e0b75e;--menu-accent2:#672e31}
#menu[data-road-skin="skin-catastrophe"]::before{background:radial-gradient(ellipse at 50% 15%,#f0d4871c,transparent 26%),linear-gradient(90deg,#260709 0 17%,#080405 30% 70%,#260709 83% 100%)}
#menu[data-road-skin="skin-catastrophe"] #themeDecor::before,#menu[data-road-skin="skin-catastrophe"] #themeDecor::after{top:-5%;bottom:-5%;width:43%;background:repeating-linear-gradient(88deg,#3d0b0f 0 8%,#6a1720 8.5% 13%,#220609 13.5% 19%);filter:drop-shadow(0 0 22px #000);animation:passCurtainBreathe 7s ease-in-out infinite alternate}
#menu[data-road-skin="skin-catastrophe"] #themeDecor::before{left:-7%;clip-path:polygon(0 0,100% 0,83% 48%,100% 100%,0 100%)}
#menu[data-road-skin="skin-catastrophe"] #themeDecor::after{right:-7%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,17% 48%);animation-direction:alternate-reverse}
#menu[data-road-skin="skin-catastrophe"] .td-rays{display:block;left:31%;right:31%;top:-20%;bottom:-10%;background:conic-gradient(from 171deg at 50% 0,transparent 0 13%,#ffe7a128 14% 27%,transparent 28%);filter:blur(4px);transform-origin:50% 0;animation:passSpotlightSearch 10s ease-in-out infinite alternate}
#menu[data-road-skin="skin-catastrophe"] .td-frame{display:block;inset:4% 6%;border:1px solid #d7af5c45;border-radius:48% 48% 0 0;box-shadow:inset 0 0 75px #000,0 0 35px #8a4f2922}
#menu[data-road-skin="skin-lexicon"]{--menu-accent:#e3c36d;--menu-accent2:#495563}
#menu[data-road-skin="skin-lexicon"]::before{background:radial-gradient(ellipse at 50% 0,#bea35a1a,transparent 31%),repeating-linear-gradient(90deg,transparent 0 11%,#b99e5520 11.1% 11.3%,transparent 11.4% 22%),linear-gradient(#080a0c,#11100d 65%,#030405)}
#menu[data-road-skin="skin-lexicon"] #themeDecor::before{content:"ROADWALKER   LIVING ARCHIVIST   CATASTROPHE-BREAKER   MASTER OF EVERY ROAD   REMEMBERED FOREVER";inset:4% 7%;color:#d9bb6866;font:700 clamp(10px,1.2vw,16px)/5 var(--serif);letter-spacing:.42em;text-align:center;word-spacing:4em;writing-mode:vertical-rl;text-orientation:mixed;text-shadow:0 0 18px #d8b45d44;animation:passNamesAscend 24s linear infinite}
#menu[data-road-skin="skin-lexicon"] .td-frame{display:block;inset:0;background:repeating-linear-gradient(90deg,#070809 0 7%,transparent 7.3% 13%,#18150f 13.3% 14%,transparent 14.3% 20%);clip-path:polygon(0 0,16% 0,13% 100%,0 100%,0 0,100% 0,84% 0,87% 100%,100% 100%);filter:drop-shadow(0 0 18px #000)}
#menu[data-road-skin="skin-lexicon"] .td-rays{display:block;background:linear-gradient(100deg,transparent 35%,#ffeaa536 50%,transparent 65%);animation:passHallLight 8s ease-in-out infinite alternate}
#menu[data-road-skin="skin-iron-forge"]{--menu-accent:#e6c36f;--menu-accent2:#5b5650}
#menu[data-road-skin="skin-iron-forge"]::before{background:radial-gradient(circle at 50% 48%,#dabb651c,transparent 25%),linear-gradient(135deg,#050608,#121212 55%,#030405)}
#menu[data-road-skin="skin-iron-forge"] #themeDecor::before{inset:-20%;background:repeating-linear-gradient(135deg,transparent 0 54px,#d2ad5742 55px 58px,transparent 59px 112px),repeating-linear-gradient(45deg,transparent 0 74px,#66717b30 75px 78px,transparent 79px 152px);transform:perspective(800px) rotateX(22deg) rotateZ(-4deg);animation:passStairFold 14s ease-in-out infinite alternate}
#menu[data-road-skin="skin-iron-forge"] .td-silhouette{display:block;inset:7% 10%;background:repeating-linear-gradient(90deg,#090a0b 0 7%,transparent 7.5% 12%),repeating-linear-gradient(0deg,#171717 0 7%,transparent 7.5% 13%);clip-path:polygon(0 82%,14% 82%,14% 69%,28% 69%,28% 56%,42% 56%,42% 43%,58% 43%,58% 30%,72% 30%,72% 17%,86% 17%,86% 4%,100% 4%,100% 21%,87% 21%,87% 34%,74% 34%,74% 47%,61% 47%,61% 60%,48% 60%,48% 73%,35% 73%,35% 86%,22% 86%,22% 100%,0 100%);filter:drop-shadow(0 0 18px #d6b35d55);animation:passStairClimb 9s ease-in-out infinite alternate}
#menu[data-road-skin="skin-iron-forge"] .td-rays{display:block;background:radial-gradient(circle at 50% 46%,#ffe8a779 0 1%,transparent 2% 9%,#d6b15a2c 9.4% 9.8%,transparent 10.2%);animation:passStairBeacon 5s ease-in-out infinite alternate}
#menu[data-road-skin="skin-snowglass"]{--menu-accent:#e2c66f;--menu-accent2:#52717d}
#menu[data-road-skin="skin-snowglass"]::before{background:radial-gradient(ellipse at 50% 7%,#8fd7c72c,transparent 35%),linear-gradient(#071016,#101315 59%,#050607)}
#menu[data-road-skin="skin-snowglass"] #themeDecor::before{inset:-15%;background:conic-gradient(from 205deg at 50% 0,transparent 0 13%,#75d3c329 14% 21%,transparent 22% 35%,#dabb652e 36% 43%,transparent 44% 61%,#79b9cc24 62% 68%,transparent 69%);filter:blur(18px);animation:passLastAurora 12s ease-in-out infinite alternate}
#menu[data-road-skin="skin-snowglass"] .td-silhouette{display:block;left:31%;right:31%;top:38%;bottom:-8%;background:linear-gradient(90deg,#211b10,#d1ae592e 48%,#f2da8d6b 50%,#d1ae592e 52%,#211b10);clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);filter:drop-shadow(0 0 18px #d5b55a33);animation:passRoadApproach 9s linear infinite}
#menu[data-road-skin="skin-snowglass"] .td-gate{display:block;left:66%;top:43%;width:34px;height:92px;border:1px solid #d9ba67;background:linear-gradient(#17140e,#070809);box-shadow:0 0 26px #dabb6550;clip-path:polygon(18% 0,82% 0,100% 18%,100% 100%,0 100%,0 18%);animation:passMilestonePass 9s linear infinite}
#menu[data-road-skin="skin-snowglass"] .td-stars{display:block;background-image:radial-gradient(circle,#e7d494 0 1px,transparent 1.4px),radial-gradient(circle,#9fd8d0 0 1px,transparent 1.4px);background-size:107px 97px,151px 137px;animation:passRoadStars 22s linear infinite}
.road-pass-menu-skin-card{min-height:265px}.road-pass-menu-skin-card.locked{opacity:1;filter:none}.road-pass-menu-skin-card.locked>b,.road-pass-menu-skin-card.locked>small,.road-pass-menu-skin-card.locked>button{opacity:.46}.road-pass-skin-preview{position:relative;height:112px;overflow:hidden;isolation:isolate;padding:0;background:#030507;color:#f2d37b}.road-pass-skin-preview::before,.road-pass-skin-preview::after,.road-pass-skin-preview i{content:"";position:absolute;pointer-events:none}.road-pass-skin-preview::before{inset:0}.road-pass-skin-preview::after{inset:8%}.road-pass-skin-preview i{inset:0}.road-pass-skin-preview span{position:absolute;left:9px;bottom:8px;z-index:5;padding:4px 6px;border:1px solid #e7c66c47;background:#020305d9;color:#f0d98d;font:800 6px var(--mono);letter-spacing:.13em;text-transform:uppercase}.road-pass-menu-skin-card.locked .road-pass-skin-preview{opacity:.74;filter:saturate(.7) brightness(.8)}
.road-pass-skin-preview[data-pass-skin="skin-nightfall"]::before{background:radial-gradient(circle at 50% 48%,#dbbb6370 0 2%,transparent 16%),repeating-conic-gradient(from 0deg at 50% 48%,transparent 0 13deg,#d8b35e55 14deg 15deg,transparent 16deg 45deg),linear-gradient(#071019,#020304)}.road-pass-skin-preview[data-pass-skin="skin-nightfall"]::after{border:1px solid #d8b35e66;border-radius:50%;animation:passPreviewTurn 13s linear infinite}.road-pass-skin-preview[data-pass-skin="skin-nightfall"] i{inset:32% 43%;transform:rotate(45deg);border:1px solid #e1c06b;background:#080a0d}
.road-pass-skin-preview[data-pass-skin="skin-moonlit"]::before{background:repeating-conic-gradient(from 0deg at 50% 50%,#e8cf7b88 0 1deg,transparent 1.5deg 15deg),radial-gradient(circle,#0a0b0c 0 24%,#d9bc6130 25%,#060708 53%)}.road-pass-skin-preview[data-pass-skin="skin-moonlit"]::after{inset:18%;border:1px solid #f0d991;border-radius:50%;animation:passPreviewTick 12s steps(12,end) infinite}
.road-pass-skin-preview[data-pass-skin="skin-vehemence"]::before{background:repeating-linear-gradient(90deg,#c49d4c22 0 1px,transparent 1px 24%),repeating-linear-gradient(0deg,#c49d4c22 0 1px,transparent 1px 50%),linear-gradient(120deg,#030405,#18130a,#030405)}.road-pass-skin-preview[data-pass-skin="skin-vehemence"]::after{inset:12% 35%;border:1px solid #e0bd6677;background:#ffe7a70b;animation:passPreviewGlass 4s ease-in-out infinite alternate}.road-pass-skin-preview[data-pass-skin="skin-vehemence"] i{background:radial-gradient(circle at 20% 30%,#ffe198 0 1px,transparent 2px),radial-gradient(circle at 78% 65%,#d5aa4e 0 1px,transparent 2px);animation:passPreviewFloat 7s ease-in-out infinite alternate}
.road-pass-skin-preview[data-pass-skin="skin-farsoul"]::before{background:repeating-radial-gradient(ellipse at 38% 54%,transparent 0 12px,#d0b56842 13px 14px,transparent 15px 25px),repeating-radial-gradient(ellipse at 70% 45%,transparent 0 17px,#6f9fa34a 18px 19px,transparent 20px 33px),#070a0a}.road-pass-skin-preview[data-pass-skin="skin-farsoul"]::after{background:linear-gradient(115deg,transparent 46%,#f0d17a88 47% 48%,transparent 49%);animation:passPreviewFold 6s ease-in-out infinite alternate}
.road-pass-skin-preview[data-pass-skin="skin-catastrophe"]::before{background:linear-gradient(90deg,#4a0d14 0 25%,#090405 39% 61%,#4a0d14 75% 100%)}.road-pass-skin-preview[data-pass-skin="skin-catastrophe"]::after{inset:-10% 29%;background:conic-gradient(from 171deg at 50% 0,transparent 0 13%,#ffe7a14f 14% 27%,transparent 28%);animation:passPreviewSpot 6s ease-in-out infinite alternate}.road-pass-skin-preview[data-pass-skin="skin-catastrophe"] i{border:1px solid #d5aa584d;border-radius:50% 50% 0 0}
.road-pass-skin-preview[data-pass-skin="skin-lexicon"]::before{content:"ROADWALKER  ARCHIVIST  REMEMBERED";padding:8px;color:#d8b86573;background:repeating-linear-gradient(90deg,#16130d 0 9%,transparent 10% 18%),#050607;font:700 7px/3 var(--serif);letter-spacing:.15em;writing-mode:vertical-rl;animation:passPreviewNames 9s linear infinite}.road-pass-skin-preview[data-pass-skin="skin-lexicon"]::after{background:linear-gradient(100deg,transparent,#ffe7a62b,transparent);animation:passPreviewHall 4s ease-in-out infinite alternate}
.road-pass-skin-preview[data-pass-skin="skin-iron-forge"]::before{background:repeating-linear-gradient(135deg,transparent 0 17px,#d0ad594d 18px 20px,transparent 21px 35px),repeating-linear-gradient(45deg,transparent 0 25px,#68747d3b 26px 28px,transparent 29px 50px),#060708;animation:passPreviewStair 7s ease-in-out infinite alternate}.road-pass-skin-preview[data-pass-skin="skin-iron-forge"]::after{background:radial-gradient(circle,#ffe6a05c 0 2%,transparent 3%);filter:drop-shadow(0 0 9px #d9b45e)}
.road-pass-skin-preview[data-pass-skin="skin-snowglass"]::before{background:conic-gradient(from 205deg at 50% 0,transparent 0 13%,#75d3c350 14% 21%,transparent 22% 40%,#dabb6555 41% 48%,transparent 49%),linear-gradient(#071018,#0a0b0c)}.road-pass-skin-preview[data-pass-skin="skin-snowglass"]::after{inset:34% 34% -20%;background:linear-gradient(90deg,#15130e,#e0bd6259 48%,#ffe29a 50%,#e0bd6259 52%,#15130e);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);animation:passPreviewRoad 5s linear infinite}
@keyframes passCrossroadsOrrery{to{transform:rotate(360deg)}}@keyframes passCrossroadsCounter{to{transform:rotate(-360deg)}}@keyframes passMilestoneBreathe{to{filter:brightness(1.35);box-shadow:0 0 72px #d8b35e88,inset 0 0 30px #d8b35e2e}}@keyframes passClockTurn{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes passClockPulse{to{filter:brightness(1.35);box-shadow:0 0 130px #e7cb7366,inset 0 0 70px #000}}@keyframes passClockShiver{to{transform:rotate(.8deg);opacity:.65}}@keyframes passReliquaryDrift{to{transform:translate3d(2%,1%,0);filter:brightness(1.25)}}@keyframes passReliquaryGlass{to{transform:translateX(-50%) translateY(-8px);filter:brightness(1.3)}}@keyframes passCuriosFloat{to{background-position:73px -91px,-97px -89px}}@keyframes passAtlasContours{to{transform:rotate(-5deg) scale(1.06);filter:brightness(1.25)}}@keyframes passAtlasFold{to{transform:perspective(900px) rotateY(4deg) skewY(-1deg)}}@keyframes passCurtainBreathe{to{transform:translateX(3%);filter:brightness(1.18)}}@keyframes passSpotlightSearch{to{transform:rotate(17deg);filter:blur(7px) brightness(1.3)}}@keyframes passNamesAscend{to{transform:translateY(-18%)}}@keyframes passHallLight{to{transform:translateX(12%);opacity:.7}}@keyframes passStairFold{to{transform:perspective(800px) rotateX(17deg) rotateZ(2deg) scale(1.05)}}@keyframes passStairClimb{to{transform:translate3d(3%,-4%,0);filter:drop-shadow(0 0 28px #d6b35d88)}}@keyframes passStairBeacon{to{filter:brightness(1.5);transform:scale(1.05)}}@keyframes passLastAurora{to{transform:translateX(5%) skewX(-4deg);filter:blur(24px) hue-rotate(15deg)}}@keyframes passRoadApproach{to{background-position:0 180px}}@keyframes passMilestonePass{0%{transform:translateY(38vh) scale(.45);opacity:0}20%{opacity:1}100%{transform:translate(-26vw,-34vh) scale(1.7);opacity:0}}@keyframes passRoadStars{to{background-position:107px 97px,-151px 137px}}@keyframes passPreviewTurn{to{transform:rotate(360deg)}}@keyframes passPreviewTick{to{transform:rotate(360deg)}}@keyframes passPreviewGlass{to{transform:translateY(-4px);filter:brightness(1.4)}}@keyframes passPreviewFloat{to{transform:translateY(-8px)}}@keyframes passPreviewFold{to{transform:skewY(-4deg) scale(1.04)}}@keyframes passPreviewSpot{to{transform:rotate(13deg)}}@keyframes passPreviewNames{to{transform:translateY(-28px)}}@keyframes passPreviewHall{to{transform:translateX(10%)}}@keyframes passPreviewStair{to{background-position:28px -20px,-20px 28px}}@keyframes passPreviewRoad{to{transform:scale(1.13) translateY(-3px)}}
@media(prefers-reduced-motion:reduce){#menu[data-road-skin] #themeDecor::before,#menu[data-road-skin] #themeDecor::after,#menu[data-road-skin] #themeDecor>div,.road-pass-skin-preview::before,.road-pass-skin-preview::after,.road-pass-skin-preview i{animation:none!important}}
/* Faction menu environments: the original theme skeleton is deliberately reused so these
   remain light enough for the menu, but every faction owns a different moving landmark. */
.faction-menu-skins{margin:24px 0 4px}.faction-menu-skin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.faction-menu-skin-card{min-height:280px}.faction-menu-skin-card .reward-preview{height:126px;padding:0;overflow:hidden}.faction-menu-skin-card .reward-preview span{position:absolute;left:10px;bottom:9px;z-index:5;padding:4px 6px;border:1px solid #ffffff24;background:#030509c7;color:#f3ead7;font:800 6px var(--mono);letter-spacing:.13em;text-transform:uppercase}.faction-menu-preview{position:relative;width:100%;height:100%;isolation:isolate;background:linear-gradient(#101722,#04070b)}.faction-menu-preview::before,.faction-menu-preview::after{content:"";position:absolute;pointer-events:none}.faction-menu-preview::before{inset:0;background:var(--scene-bg)}.faction-menu-preview::after{left:7%;right:7%;bottom:0;height:64%;background:var(--scene-mark);filter:drop-shadow(0 0 10px var(--scene-glow,#ffffff33));transform-origin:50% 100%;animation:menuPreviewBreathe 5s ease-in-out infinite alternate}.faction-menu-skin-card.equipped .faction-menu-preview{box-shadow:inset 0 0 0 1px #e6c86d,0 0 24px var(--scene-glow,#d5ad5040)}
@keyframes menuPreviewBreathe{from{transform:translateY(1px) scale(1)}to{transform:translateY(-2px) scale(1.025)}}
.faction-menu-preview[data-faction="lex"]{--scene-bg:repeating-conic-gradient(from 0deg at 50% 50%,#739fd322 0 2deg,transparent 3deg 20deg),radial-gradient(circle,#31507755,transparent 55%),#03070d;--scene-mark:radial-gradient(circle,transparent 0 28%,#88b8efaa 29% 31%,transparent 32% 42%,#88b8ef66 43% 45%,transparent 46%);--scene-glow:#7fa8d4}
.faction-menu-preview[data-faction="leg"]{--scene-bg:linear-gradient(115deg,transparent 30%,#ffffff33 48%,transparent 65%),conic-gradient(from 20deg,#ff6ec744,#ffd35c44,#8fffc444,#6ec7ff44,#c76eff44,#ff6ec744),#08070b;--scene-mark:linear-gradient(90deg,transparent,#fff7b777,transparent);--scene-glow:#ffb9e5}
.faction-menu-preview[data-faction="nys"]{--scene-bg:repeating-linear-gradient(#120c18 0 3px,#020204 4px 7px);--scene-mark:repeating-linear-gradient(0deg,transparent 0 9px,#e77cff66 10px 11px,transparent 12px 19px);--scene-glow:#a855b8}
#menu[data-road-faction-skin="nys"]{isolation:isolate;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
#menu[data-road-faction-skin="nys"] .wrap{transform:none!important;filter:none!important;clip-path:none!important;will-change:auto}
#menu[data-road-faction-skin="nys"] #themeDecor{pointer-events:none;transform-origin:50% 46%;will-change:transform,filter,clip-path;animation:nysMenuRealityFailure 11.7s steps(1,end) infinite}
#menu[data-road-faction-skin="nys"] #themeDecor::before{content:"";position:absolute;inset:-6%;z-index:8;pointer-events:none;background:linear-gradient(90deg,#35f4e81c,transparent 28% 67%,#ff315d22),repeating-linear-gradient(0deg,transparent 0 7px,#e77cff20 8px 9px,transparent 10px 17px);mix-blend-mode:screen;opacity:.18;animation:nysMenuChromaticTear 7.9s steps(1,end) infinite}
#menu[data-road-faction-skin="nys"] #themeDecor::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 2px,#0008 3px 4px),radial-gradient(ellipse at center,transparent 33%,#0200039c 100%);background-size:100% 5px,100% 100%;mix-blend-mode:multiply;animation:nysMenuSignalRoll 4.3s linear infinite}
#menu[data-road-faction-skin="nys"] .home-title{position:relative}
#menu[data-road-faction-skin="nys"] .home-title::after{content:"YOU WERE NOT SUPPOSED TO REMEMBER";position:fixed;left:8vw;right:8vw;top:13vh;z-index:180;padding:8px;color:#f4c5ff;background:#020003d9;border-block:1px solid #bd65d866;font:900 clamp(8px,1vw,13px)/1.4 var(--mono);letter-spacing:.28em;text-align:center;text-shadow:-4px 0 #35f4e8,4px 0 #ff315d,0 0 18px #d45dea;opacity:0;pointer-events:none;clip-path:inset(0 100% 0 0);animation:nysMenuForbiddenText 17.3s steps(1,end) infinite}
#menu[data-road-faction-skin="nys"] .home-choice{position:relative;overflow:hidden;animation:nysMenuChoiceFailure 9.1s steps(1,end) infinite}
#menu[data-road-faction-skin="nys"] .home-choice:nth-child(2){animation-delay:-2.8s}#menu[data-road-faction-skin="nys"] .home-choice:nth-child(3){animation-delay:-5.6s}
#menu[data-road-faction-skin="nys"] .home-choice::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 17px,#e77cff24 18px 19px,transparent 20px 31px);mix-blend-mode:screen;opacity:.12;animation:nysMenuCardScan 3.6s linear infinite}
@keyframes nysMenuRealityFailure{0%,9%,12%,25%,28%,43%,47%,61%,65%,78%,82%,94%,100%{transform:none;filter:none;clip-path:inset(0)}10%{transform:translate(-10px,2px) scaleX(1.025) skewX(-1.2deg);filter:contrast(1.55) hue-rotate(34deg);clip-path:polygon(0 0,100% 0,97% 19%,100% 23%,95% 51%,100% 55%,98% 79%,100% 83%,100% 100%,0 100%,3% 72%,0 68%)}11%{transform:translate(8px,-3px) scaleX(.985) scaleY(1.018);filter:brightness(1.2) saturate(1.5)}26%{transform:translate(5px,0) scaleX(1.018) scaleY(.985);filter:contrast(1.8);clip-path:inset(13% -2% 7% -2%)}27%{transform:translate(-7px,3px) skewY(.7deg);filter:hue-rotate(-51deg)}44%{transform:translate(-13px,-2px) scaleX(1.04) scaleY(.97) skewX(1.5deg);filter:invert(.12) contrast(2.1);clip-path:polygon(0 0,96% 0,100% 18%,94% 24%,100% 44%,96% 49%,100% 73%,95% 79%,100% 100%,0 100%,4% 65%,0 60%)}45%{transform:translate(11px,4px) scaleX(.97) scaleY(1.025);filter:brightness(1.35)}46%{transform:translate(-3px,-1px);filter:saturate(2)}62%{transform:translate(0,-7px) scaleX(1.045) scaleY(.955);filter:contrast(2.2) saturate(.45);clip-path:inset(9% -3% 11% -3%)}63%{transform:translate(9px,6px) scaleX(.98) skewX(-1deg);filter:invert(.16) hue-rotate(100deg)}64%{transform:translate(-6px,-2px);filter:brightness(1.45)}79%{transform:translate(-8px,2px) scaleX(.975) scaleY(1.03) skewY(-1deg);filter:hue-rotate(145deg) contrast(1.8)}80%{transform:translate(12px,-4px) scaleX(1.03) scaleY(.97);filter:brightness(1.4)}81%{transform:translate(-2px,1px);filter:none}95%{transform:translate(7px,-2px) scaleX(1.02);filter:contrast(1.7)}96%{transform:translate(-8px,3px) scaleX(.985);filter:hue-rotate(-70deg)}}
@keyframes nysMenuChromaticTear{0%,8%,13%,26%,31%,46%,51%,67%,72%,88%,93%,100%{opacity:.12;transform:none;clip-path:inset(0)}9%{opacity:.9;transform:translateX(18px);clip-path:inset(12% 0 68% 0)}10%{opacity:.45;transform:translateX(-24px);clip-path:inset(42% 0 32% 0)}11%{opacity:.8;transform:translateX(8px);clip-path:inset(76% 0 7% 0)}27%{opacity:.75;transform:translate(-20px,4px);clip-path:inset(31% 0 48% 0)}28%{opacity:.34;transform:translate(27px,-3px);clip-path:inset(58% 0 21% 0)}47%{opacity:.82;transform:translateX(26px) scaleX(1.04);clip-path:inset(7% 0 74% 0)}48%{opacity:.38;transform:translateX(-31px);clip-path:inset(65% 0 12% 0)}68%{opacity:.8;transform:translate(-22px,3px);clip-path:inset(38% 0 37% 0)}69%{opacity:.3;transform:translate(30px,-5px);clip-path:inset(16% 0 61% 0)}89%{opacity:.88;transform:translateX(24px);clip-path:inset(72% 0 9% 0)}90%{opacity:.32;transform:translateX(-18px);clip-path:inset(25% 0 52% 0)}}
@keyframes nysMenuSignalRoll{from{background-position:0 0,0 0}to{background-position:0 160px,0 0}}
@keyframes nysMenuForbiddenText{0%,16%,20%,38%,42%,62%,66%,84%,88%,100%{opacity:0;clip-path:inset(0 100% 0 0);content:"YOU WERE NOT SUPPOSED TO REMEMBER"}17%{opacity:.92;clip-path:inset(0);content:"YOU WERE NOT SUPPOSED TO REMEMBER"}18%{opacity:.18;clip-path:inset(31% 0 39% 0);content:"THE MENU KNOWS YOUR NAME"}19%{opacity:.82;clip-path:inset(0);content:"THE MENU KNOWS YOUR NAME"}39%{opacity:.88;clip-path:inset(0);content:"THERE IS SOMETHING BEHIND THE ARCHIVE"}40%{opacity:.16;clip-path:inset(57% 0 14% 0);content:"THERE IS SOMETHING BEHIND THE ARCHIVE"}41%{opacity:.9;clip-path:inset(0);content:"DO NOT TURN AROUND"}63%{opacity:.86;clip-path:inset(0);content:"THIS CHOICE WAS ALREADY ERASED"}64%{opacity:.15;clip-path:inset(9% 0 63% 0);content:"THIS CHOICE WAS ALREADY ERASED"}65%{opacity:.9;clip-path:inset(0);content:"SOMETHING IS READING BACK"}85%{opacity:.88;clip-path:inset(0);content:"THE ROAD ENDS BEHIND YOU"}86%{opacity:.18;clip-path:inset(69% 0 5% 0);content:"THE ROAD ENDS BEHIND YOU"}87%{opacity:.9;clip-path:inset(0);content:"YOU HAVE BEEN HERE BEFORE"}}
@keyframes nysMenuChoiceFailure{0%,21%,24%,48%,51%,73%,76%,100%{transform:none;filter:none}22%{transform:translateX(-5px) skewX(-.7deg);filter:contrast(1.4);box-shadow:5px 0 #ff315d55,-5px 0 #35f4e855}23%{transform:translateX(4px) scaleX(.99)}49%{transform:translateY(-3px) scaleY(1.02);filter:hue-rotate(70deg)}50%{transform:translateY(2px)}74%{transform:translateX(6px) skewX(1deg);filter:contrast(1.7)}75%{transform:translateX(-3px)}}
@keyframes nysMenuCardScan{to{background-position:0 128px}}
@media(prefers-reduced-motion:reduce){#menu[data-road-faction-skin="nys"] #themeDecor,#menu[data-road-faction-skin="nys"] #themeDecor::before,#menu[data-road-faction-skin="nys"] #themeDecor::after,#menu[data-road-faction-skin="nys"] .home-title::after,#menu[data-road-faction-skin="nys"] .home-choice,#menu[data-road-faction-skin="nys"] .home-choice::after{animation:none!important;transform:none!important;filter:none!important}#menu[data-road-faction-skin="nys"] .home-title::after{display:none}}
.faction-menu-preview[data-faction="nur"]{--scene-bg:radial-gradient(circle at 78% 24%,#e9fbff 0 9%,#5cb8c966 10% 18%,transparent 19%),radial-gradient(circle at 18% 20%,#fff 0 1px,transparent 2%),linear-gradient(#071526,#02050a);--scene-mark:linear-gradient(90deg,transparent 0 30%,#0a1725 31% 38%,#5cb8c9 39% 42%,#0a1725 43% 69%,transparent 70%),linear-gradient(90deg,transparent 46%,#183446 47% 53%,transparent 54%);--scene-glow:#5cb8c9}
.faction-menu-preview[data-faction="sang"]{--scene-bg:repeating-linear-gradient(90deg,transparent 0 18px,#b72f2622 19px 20px),radial-gradient(ellipse at 50% 100%,#7e201e77,transparent 62%),#090203;--scene-mark:linear-gradient(90deg,transparent 42%,#5c1110 43% 57%,transparent 58%),radial-gradient(ellipse,#d1413855,transparent 65%);--scene-glow:#bf4340}
.faction-menu-preview[data-faction="iron"]{--scene-bg:linear-gradient(#1c1610,#080503 70%,#a53e1766),repeating-linear-gradient(90deg,#6e5a3922 0 2px,transparent 3px 30px);--scene-mark:radial-gradient(ellipse at 20% 100%,#ffc15f 0 7%,#d34f20 8% 22%,transparent 23%),radial-gradient(ellipse at 55% 100%,#fff0a3 0 8%,#9a3019 9% 28%,transparent 29%),radial-gradient(ellipse at 85% 100%,#ff9d45 0 7%,#6d1e12 8% 24%,transparent 25%);--scene-glow:#ff8a3d}
.faction-menu-preview[data-faction="vir"]{--scene-bg:linear-gradient(100deg,#020302 0 49%,#17351e 50% 100%);--scene-mark:radial-gradient(ellipse at 25% 55%,#080b08 0 22%,transparent 23%),radial-gradient(ellipse at 76% 52%,#93e88b 0 7%,#315e35 8% 25%,transparent 26%);--scene-glow:#6fbf73}
.faction-menu-preview[data-faction="sil"]{--scene-bg:radial-gradient(circle at 50% 5%,#fff 0 10%,#cad8e877 11% 24%,transparent 25%),linear-gradient(#26323f,#080b10);--scene-mark:repeating-conic-gradient(from 0deg at 50% 0,#fff5 0 3deg,transparent 4deg 15deg);--scene-glow:#d8e4ef}
.faction-menu-preview[data-faction="frost"]{--scene-bg:linear-gradient(115deg,transparent 35%,#ffffff88 48%,transparent 58%),linear-gradient(#18364a,#d8f5ff22 70%,#071018);--scene-mark:linear-gradient(165deg,transparent 0 44%,#c9f5ff99 45% 47%,transparent 48%),linear-gradient(195deg,transparent 0 44%,#dffaff77 45% 47%,transparent 48%);--scene-glow:#7fd8e8}
.faction-menu-preview[data-faction="khaz"]{--scene-bg:radial-gradient(circle at 76% 28%,#ffe093 0 9%,#e3723655 10% 25%,transparent 26%),linear-gradient(#45213c,#d06031 58%,#4b2617);--scene-mark:linear-gradient(165deg,transparent 0 42%,#2a170d 43% 65%,transparent 66%),linear-gradient(15deg,transparent 0 42%,#160d08 43% 70%,transparent 71%);--scene-glow:#e0973f}
.faction-menu-preview[data-faction="mf"]{--scene-bg:radial-gradient(circle at 72% 21%,#eaffea 0 9%,#63cab677 10% 22%,transparent 23%),linear-gradient(#0d3140,#061018);--scene-mark:linear-gradient(90deg,transparent 8%,#ba493d 9% 15%,transparent 16% 84%,#ba493d 85% 91%,transparent 92%),linear-gradient(#ba493d 0 8%,transparent 9% 34%,#8c332d 35% 41%,transparent 42%);--scene-glow:#62d4bd}
.faction-menu-preview[data-faction="vak"]{--scene-bg:radial-gradient(circle at 18% 12%,#fff 0 1px,transparent 2px),radial-gradient(circle at 73% 26%,#fff 0 1px,transparent 2px),linear-gradient(#07131f,#31576a 58%,#d8e9ed);--scene-mark:linear-gradient(154deg,transparent 0 43%,#eef8fa 44% 48%,#375465 49% 69%,transparent 70%),linear-gradient(205deg,transparent 0 44%,#c6dde3 45% 49%,#213f50 50% 72%,transparent 73%);--scene-glow:#eefcff}
.faction-menu-preview[data-faction="ael"]{--scene-bg:radial-gradient(circle at 22% 30%,#b8ffd3 0 1%,transparent 2%),radial-gradient(circle at 76% 56%,#d8ffb7 0 1%,transparent 2%),linear-gradient(#0b2617,#040b07);--scene-mark:repeating-linear-gradient(84deg,transparent 0 10px,#4c8e4e 11px 14px,transparent 15px 24px);--scene-glow:#6fbf73}
.faction-menu-preview[data-faction="wld"]{--scene-bg:conic-gradient(from 90deg at 50% 100%,#7fd8e855,#ff9f5055,#ffd35c55,#6fbf7355),linear-gradient(#13273a,#07100c);--scene-mark:radial-gradient(ellipse at 25% 72%,#6fbf7377 0 12%,transparent 13%),radial-gradient(ellipse at 50% 45%,#ffd35c66 0 12%,transparent 13%),radial-gradient(ellipse at 75% 67%,#ff8a3d66 0 12%,transparent 13%);--scene-glow:#ffd35c}
.faction-menu-preview[data-faction="desc"]{--scene-bg:repeating-radial-gradient(circle at 70% 20%,transparent 0 12px,#8e6ac733 13px 14px,transparent 15px 27px),linear-gradient(#180924,#020103);--scene-mark:repeating-linear-gradient(90deg,#08030e 0 12%,#2f1140 13% 18%,#050208 19% 26%);--scene-glow:#8e6ac7}
.faction-menu-preview[data-faction="jal"]{--scene-bg:radial-gradient(circle at 50% 4%,#fff9b7 0 11%,#e6bb4e66 12% 26%,transparent 27%),linear-gradient(#625017,#0c3440 60%,#031116);--scene-mark:repeating-linear-gradient(0deg,#d7a64d 0 7%,transparent 8% 18%);--scene-glow:#f0c94a}
.faction-menu-preview[data-faction="ash"]{--scene-bg:radial-gradient(ellipse at 50% 110%,#d65a36 0 18%,transparent 48%),linear-gradient(#250b0b,#060202);--scene-mark:conic-gradient(from 215deg at 50% 72%,transparent 0 17%,#9e2b2288 18% 25%,transparent 26% 74%,#6f171788 75% 82%,transparent 83%);--scene-glow:#d0583f}
.faction-menu-preview[data-faction="veh"]{--scene-bg:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 10px,#d4ad3633 11px 12px,#010101 13px 23px),radial-gradient(circle,#6d5415 0 3%,#090803 25%,#000 70%);--scene-mark:repeating-conic-gradient(from 0deg at 50% 100%,#d8b84a66 0 2deg,transparent 3deg 16deg);--scene-glow:#d4ad36}
.faction-menu-preview[data-faction="adm"]{--scene-bg:repeating-linear-gradient(170deg,transparent 0 25px,#72fff01c 26px 28px,transparent 29px 52px),radial-gradient(ellipse at 50% 100%,#0c5961,#031a26 48%,#01070c 78%);--scene-mark:linear-gradient(90deg,transparent 0 8%,#b5844555 9% 13%,transparent 14% 29%,#50d9cf44 30% 34%,transparent 35% 64%,#50d9cf44 65% 69%,transparent 70% 86%,#b5844555 87% 91%,transparent 92%),linear-gradient(#173e42 0 8%,transparent 9% 31%,#8f693d55 32% 36%,transparent 37%);--scene-glow:#42d8d2}

.faction-menu-preview[data-faction="run"]{--scene-bg:conic-gradient(from 30deg at 50% 50%,#ff704d44,#b7925544,#7fd8e844,#69a9ff44,#ff704d44),radial-gradient(circle at 50% 50%,#d7b7ff55 0 9%,transparent 10% 30%,#9b65d533 31% 34%,transparent 35%),#06040c;--scene-mark:repeating-conic-gradient(from 0deg at 50% 50%,#e5d2ff88 0 2deg,transparent 3deg 22deg);--scene-glow:#b37cff}
#menu[data-theme="nur"] .td-gate{display:block;left:auto;right:12%;top:auto;bottom:0;width:118px;height:360px;transform:none;background:linear-gradient(90deg,#07101a,#18384a 45%,#08131f);clip-path:polygon(30% 100%,30% 25%,40% 25%,40% 13%,47% 13%,47% 0,53% 0,53% 13%,60% 13%,60% 25%,70% 25%,70% 100%);box-shadow:0 0 35px #5cb8c955;animation:nurSpireBreathe 5.5s ease-in-out infinite alternate}
#menu[data-theme="nur"] .td-silhouette{display:block;left:-420px;right:auto;top:auto;bottom:38px;width:390px;height:72px;background:linear-gradient(180deg,#162b3b,#050a10 70%);border-bottom:6px solid #020407;border-radius:12px 22px 6px 6px;box-shadow:40px 12px 0 -3px #07121d,78px 12px 0 -3px #07121d,0 0 26px #5cb8c94a;animation:nurChadTrain 13s linear infinite}
#menu[data-theme="nur"] .td-silhouette::before{content:"";position:absolute;left:26px;right:30px;top:14px;height:16px;background:repeating-linear-gradient(90deg,#b9eef5 0 14px,#173746 15px 28px);box-shadow:0 0 12px #8edbe6}
#menu[data-theme="nur"] .td-silhouette::after{content:"";position:absolute;left:38px;right:12px;bottom:-18px;height:30px;background:repeating-radial-gradient(circle at 15px 15px,#020304 0 9px,#5cb8c9 10px 12px,transparent 13px 38px)}
@keyframes nurChadTrain{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 620px))}}@keyframes nurSpireBreathe{from{filter:brightness(.78)}to{filter:brightness(1.18)}}
#menu[data-theme="khaz"] #themeDecor::before{content:"";position:absolute;inset:0;background:linear-gradient(168deg,transparent 0 56%,#492413aa 57% 66%,transparent 67%),linear-gradient(188deg,transparent 0 59%,#28160daa 60% 72%,transparent 73%),linear-gradient(#4b2440 0,#c05a31 58%,#31170e 100%);animation:khazSunsetPulse 8s ease-in-out infinite alternate}
#menu[data-theme="khaz"] .td-sun{display:block;right:17%;top:17%;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#fff0b3,#df7b35 66%,transparent 68%);box-shadow:0 0 80px #db703b88;animation:khazSunsetPulse 8s ease-in-out infinite alternate}
@keyframes khazSunsetPulse{from{filter:saturate(.95) brightness(.92)}to{filter:saturate(1.18) brightness(1.08)}}
#menu[data-theme="wld"] #themeDecor::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,color-mix(in srgb,var(--menu-accent) 26%,#07110c),#030707 72%);transition:background 2s ease}#menu[data-theme="wld"] .td-sun{display:block;width:170px;height:170px;right:8%;top:9%;border-radius:50%;background:radial-gradient(circle,#fff7c0,var(--menu-accent) 48%,transparent 70%);box-shadow:0 0 100px color-mix(in srgb,var(--menu-accent) 70%,transparent);animation:wldWheelTurn 18s linear infinite}@keyframes wldWheelTurn{to{transform:rotate(360deg);filter:hue-rotate(360deg)}}
#menu[data-theme="wld"] .td-silhouette{display:block;inset:auto 0 0;height:190px;background:linear-gradient(168deg,transparent 0 53%,color-mix(in srgb,var(--menu-accent) 35%,#071008) 54% 70%,#030604 71%);transition:background 2s ease}
#menu[data-theme="desc"] #themeDecor::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 78% 24%,transparent 0 44px,#8e6ac71c 45px 47px,transparent 48px 80px),linear-gradient(#160822,#020103)}#menu[data-theme="desc"] .td-silhouette{display:block;inset:auto 0 0;height:64%;background:repeating-linear-gradient(90deg,#07020b 0 5%,#2f0e45 5.3% 8%,#09030e 8.3% 13%);clip-path:polygon(0 100%,0 47%,6% 47%,6% 19%,11% 19%,11% 57%,18% 57%,18% 31%,26% 31%,26% 7%,31% 7%,31% 50%,39% 50%,39% 25%,46% 25%,46% 61%,55% 61%,55% 13%,61% 13%,61% 43%,70% 43%,70% 22%,77% 22%,77% 54%,84% 54%,84% 35%,91% 35%,91% 12%,96% 12%,96% 51%,100% 51%,100% 100%);animation:descCityPulse 6s steps(6,end) infinite}@keyframes descCityPulse{50%{filter:brightness(1.45) drop-shadow(0 0 18px #8e6ac7)}}#menu[data-theme="desc"] .td-rays{display:block;background:repeating-linear-gradient(115deg,transparent 0 90px,#a77be71b 91px 93px,transparent 94px 180px);animation:descRuneFlow 9s linear infinite}@keyframes descRuneFlow{to{background-position:360px 0}}
#menu[data-theme="jal"] #themeDecor::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,#fff6b5 0 4%,#e6bd4b44 5% 22%,transparent 23%),linear-gradient(#504412,#164a58 52%,#04151b)}#menu[data-theme="jal"] .td-sun{display:block;left:50%;top:-65px;transform:translateX(-50%);width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,#fffdf0,#f4d35f 52%,#bd812e 70%,transparent 71%);box-shadow:0 0 120px #f4d35f88;animation:jalSunCrown 6s ease-in-out infinite alternate}@keyframes jalSunCrown{to{filter:brightness(1.18);box-shadow:0 0 180px #f4d35faa}}#menu[data-theme="jal"] .td-gate{display:block;left:50%;top:auto;bottom:0;transform:translateX(-50%);width:380px;height:260px;background:repeating-linear-gradient(0deg,#ae7d35 0 8%,transparent 8.5% 19%);clip-path:polygon(0 100%,12% 82%,12% 72%,23% 72%,23% 58%,35% 58%,35% 41%,48% 41%,48% 12%,52% 12%,52% 41%,65% 41%,65% 58%,77% 58%,77% 72%,88% 72%,88% 82%,100% 100%);filter:drop-shadow(0 0 28px #e2b45066)}#menu[data-theme="jal"] .td-silhouette{display:block;inset:auto 0 0;height:34%;background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 14px,#74c9bd33 15px 17px,transparent 18px 33px);animation:jalWater 6s linear infinite}@keyframes jalWater{to{background-position:120px 0}}
#menu[data-theme="ash"] #themeDecor::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 110%,#b73e24 0,#55120e 31%,transparent 61%),linear-gradient(#180607,#030202);animation:ashCourtColour 18s ease-in-out infinite}@keyframes ashCourtColour{0%,100%{filter:hue-rotate(0deg)}33%{filter:hue-rotate(48deg)}66%{filter:hue-rotate(-35deg)}}#menu[data-theme="ash"] .td-frame{display:block;inset:0;background:linear-gradient(90deg,#7e231b55 0 4%,transparent 4.5% 95.5%,#7e231b55 96% 100%);clip-path:polygon(0 0,18% 0,11% 36%,21% 74%,7% 100%,0 100%,0 0,100% 0,82% 0,89% 36%,79% 74%,93% 100%,100% 100%,100% 0)}#menu[data-theme="ash"] .td-silhouette{display:block;inset:5% 7% 22%;background:conic-gradient(from 215deg at 50% 68%,transparent 0 17%,#120303 18% 28%,transparent 29% 71%,#120303 72% 82%,transparent 83%),radial-gradient(ellipse at 50% 68%,#180403 0 8%,transparent 9%);filter:drop-shadow(0 0 24px #d45a3f66);animation:ashDragonPass 11s ease-in-out infinite}@keyframes ashDragonPass{0%,100%{transform:translateX(-8%) scale(.9);opacity:.45}50%{transform:translateX(8%) scale(1.05);opacity:.9}}
#menu[data-theme="veh"] #themeDecor::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 50% 56%,transparent 0 28px,#d3ad3a12 29px 31px,#000 32px 57px),radial-gradient(ellipse at center,#3a2c0b 0 3%,#070603 28%,#000 74%);animation:vehMemoryBreathe 6s ease-in-out infinite alternate}@keyframes vehMemoryBreathe{to{filter:brightness(1.28);transform:scale(1.025)}}#menu[data-theme="veh"] .td-moon{display:block;left:50%;top:17%;transform:translateX(-50%);width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 43% 39%,#fff1a8 0 3%,#d8b64d 4% 10%,#4c390d 11% 32%,#060501 68%);box-shadow:0 0 65px #d8b64d55,inset 0 0 35px #000;animation:vehMemoryOrb 4.7s ease-in-out infinite alternate}@keyframes vehMemoryOrb{to{transform:translateX(-50%) scale(1.08);box-shadow:0 0 105px #d8b64d77,inset 0 0 35px #000}}#menu[data-theme="veh"] .td-vines{display:block;inset:-10%;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0 10deg,#080702 11deg 13deg,transparent 14deg 25deg);filter:drop-shadow(0 0 4px #b9902b);animation:vehTendrilCoil 22s linear infinite}@keyframes vehTendrilCoil{to{transform:rotate(360deg)}}

.tp-rain{position:absolute;top:-14vh;left:var(--x);width:2px;height:16vh;background:linear-gradient(180deg,transparent,#bce8ff88 35%,#e6f7ff);filter:drop-shadow(0 0 3px #8ad8ff);opacity:0;transform:rotate(8deg);animation:wldRainFall var(--d,1.8s) linear infinite;animation-delay:var(--delay,0s)}
@keyframes wldRainFall{0%{opacity:0;translate:-4vw -10vh}8%{opacity:.85}92%{opacity:.6}100%{opacity:0;translate:7vw 125vh}}

#menu[data-theme="vir"] .td-vines{display:block;inset:0;width:auto;background:radial-gradient(ellipse at 8% 86%,#8ee68f 0 7px,transparent 8px),radial-gradient(ellipse at 16% 68%,#5fbd70 0 8px,transparent 9px),radial-gradient(ellipse at 28% 79%,#9be39a 0 7px,transparent 8px),radial-gradient(ellipse at 45% 62%,#4b9b5d 0 9px,transparent 10px),radial-gradient(ellipse at 63% 81%,#8fd991 0 7px,transparent 8px),radial-gradient(ellipse at 77% 59%,#5eb86d 0 8px,transparent 9px),radial-gradient(ellipse at 91% 75%,#a6e6a1 0 7px,transparent 8px),repeating-linear-gradient(76deg,transparent 0 9%,#285e3777 9.4% 10%,transparent 10.4% 18%);background-size:120px 180px,150px 210px,130px 195px,170px 250px,140px 220px,160px 245px,125px 190px,190px 280px;background-position:0 100%,12% 100%,26% 100%,41% 100%,59% 100%,74% 100%,90% 100%,0 100%;background-repeat:repeat-y;transform-origin:50% 100%;animation:viridiaVinesGrow 10s cubic-bezier(.25,.7,.3,1) infinite;filter:drop-shadow(0 0 7px #63c87866)}
#menu[data-theme="vir"] .td-vines::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(103deg,transparent 0 13%,#173e2777 13.4% 14%,transparent 14.5% 26%);background-size:230px 320px;transform-origin:50% 100%;animation:viridiaVinesGrow 13s cubic-bezier(.3,.72,.28,1) -5s infinite}
@keyframes viridiaVinesGrow{0%{clip-path:inset(100% 0 0);opacity:0}10%{opacity:.65}70%{clip-path:inset(0 0 0);opacity:1}88%{clip-path:inset(0 0 0);opacity:.9}100%{clip-path:inset(0 0 0);opacity:0;transform:translateY(-18px)}}

#menu[data-theme="sang"] .td-moon{display:block;right:9%;top:8%;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#ffb0a6,#b33134 45%,#3c070b 76%);box-shadow:0 0 95px #a9232a88,0 0 190px #5d0b1444;animation:sangBloodMoon 5s ease-in-out infinite alternate}
#menu[data-theme="sang"] .td-silhouette{display:block;inset:auto 8% 0;height:67%;background:linear-gradient(90deg,#090204,#1a0509 52%,#080204);clip-path:polygon(0 100%,0 82%,7% 82%,7% 58%,11% 58%,11% 38%,14% 38%,14% 61%,22% 61%,22% 42%,27% 42%,27% 22%,31% 22%,31% 47%,38% 47%,38% 30%,43% 30%,43% 8%,47% 8%,47% 30%,53% 30%,53% 8%,57% 8%,57% 30%,62% 30%,62% 47%,69% 47%,69% 22%,73% 22%,73% 42%,78% 42%,78% 61%,86% 61%,86% 38%,89% 38%,89% 58%,93% 58%,93% 82%,100% 82%,100% 100%);filter:drop-shadow(0 -8px 25px #a01e2c55);animation:sangCastleLoom 8s ease-in-out infinite alternate}
#menu[data-theme="sang"] .td-silhouette::before{content:"";position:absolute;inset:22% 13% 3%;background:repeating-radial-gradient(ellipse at 50% 50%,#ff6a6255 0 3px,transparent 4px 38px);animation:sangWindows 2.2s ease-in-out infinite alternate}
#menu[data-theme="sang"] .td-silhouette::after{content:"";position:absolute;left:45%;bottom:0;width:10%;height:38%;border-radius:50% 50% 0 0;background:#020102;box-shadow:0 0 28px #b82e3666}
@keyframes sangBloodMoon{to{filter:brightness(1.24);transform:scale(1.025)}}@keyframes sangCastleLoom{to{transform:translateY(-6px);filter:drop-shadow(0 -12px 38px #a01e2c77)}}@keyframes sangWindows{to{filter:brightness(1.8)}}

#menu[data-theme="frost"] .wrap{-webkit-box-reflect:none;animation:none;transform:none;filter:none}
#menu[data-theme="frost"] #themeDecor::before{content:"";position:absolute;inset:48% -10% -10%;background:linear-gradient(180deg,#e8fbff22,#7fd8e81f 8%,#07151e99 58%),repeating-linear-gradient(96deg,transparent 0 92px,#d8f8ff16 93px 95px,transparent 96px 184px);transform:perspective(700px) rotateX(62deg);transform-origin:50% 0;animation:frostMirrorSurface 7s ease-in-out infinite alternate}
#menu[data-theme="frost"] #themeDecor::after{content:"";position:absolute;left:7%;right:7%;top:54%;height:41%;opacity:.38;background:linear-gradient(180deg,#eaffff4a,transparent 5%),repeating-linear-gradient(90deg,transparent 0 11%,#c9f6ff16 11.4% 11.8%,transparent 12.2% 24%),repeating-linear-gradient(180deg,#bdefff13 0 9%,transparent 9.5% 19%);clip-path:polygon(4% 0,96% 0,88% 100%,12% 100%);transform:perspective(900px) rotateX(58deg) translateY(-3%);transform-origin:50% 0;animation:frostWholeMenuReflection 8s ease-in-out infinite alternate;pointer-events:none}
#menu[data-theme="frost"] .td-scan{display:block;background:linear-gradient(112deg,transparent 34%,#ffffff44 48%,#bdefff22 52%,transparent 66%);background-size:230% 100%;mix-blend-mode:screen;animation:frostMirrorSheen 6s ease-in-out infinite}
@keyframes frostWholeMenuReflection{0%{background-position:0 0,0 0,0 0;opacity:.31}100%{background-position:0 0,160px 0,0 70px;opacity:.44}}@keyframes frostMirrorSurface{to{background-position:180px 0;filter:brightness(1.25)}}@keyframes frostMirrorSheen{0%{background-position:160% 0}100%{background-position:-80% 0}}

#menu[data-theme="khaz"] #themeDecor::after{content:"";position:absolute;inset:auto 0 0;height:58%;background:radial-gradient(ellipse at 7% 50%,#160c07 0 7%,transparent 7.5%),radial-gradient(ellipse at 18% 38%,#1c0f08 0 9%,transparent 9.5%),radial-gradient(ellipse at 34% 58%,#140b06 0 8%,transparent 8.5%),radial-gradient(ellipse at 49% 33%,#1a0e07 0 10%,transparent 10.5%),radial-gradient(ellipse at 65% 52%,#130a06 0 8%,transparent 8.5%),radial-gradient(ellipse at 79% 31%,#1b0f08 0 9%,transparent 9.5%),radial-gradient(ellipse at 94% 54%,#140b06 0 8%,transparent 8.5%),linear-gradient(89deg,transparent 6%,#160c07 6.3% 6.8%,transparent 7.1% 17%,#1c0f08 17.3% 18%,transparent 18.3% 33%,#140b06 33.3% 33.9%,transparent 34.2% 48%,#1a0e07 48.4% 49.2%,transparent 49.5% 64%,#130a06 64.3% 64.9%,transparent 65.2% 78%,#1b0f08 78.3% 79%,transparent 79.3% 93%,#140b06 93.3% 94%,transparent 94.3%);animation:khazGroveSway 6.5s ease-in-out infinite alternate;transform-origin:50% 100%}
#menu[data-theme="khaz"] .td-silhouette{left:3%;filter:drop-shadow(250px 18px 0 #170e07) drop-shadow(520px 42px 0 #130a06) drop-shadow(820px 10px 0 #170e07)}
@keyframes khazGroveSway{to{transform:skewX(1.1deg) translateX(4px);filter:brightness(1.08)}}

#menu[data-theme="vak"] #themeDecor::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 52% 18%,#dff7ff3d 0 8%,transparent 35%),linear-gradient(180deg,#07131f 0,#19384a 34%,#496b78 61%,#d9edf1 100%);animation:vakSkyBreathe 10s ease-in-out infinite alternate;will-change:opacity}
#menu[data-theme="vak"] #themeDecor::after{content:"";position:absolute;inset:18% -4% 23%;background:linear-gradient(154deg,transparent 0 45%,#7695a2 45.4% 59%,transparent 59.4%),linear-gradient(205deg,transparent 0 47%,#587785 47.4% 62%,transparent 62.4%),linear-gradient(168deg,transparent 0 53%,#91acb5 53.4% 67%,transparent 67.4%),linear-gradient(194deg,transparent 0 55%,#6f8e99 55.4% 70%,transparent 70.4%);filter:blur(.55px) drop-shadow(0 -10px 24px #ccefff22);opacity:.84;animation:vakFarMountains 13s ease-in-out infinite alternate;will-change:transform}
#menu[data-theme="vak"] .td-silhouette{display:block;inset:auto -3% -2%;height:68%;background:linear-gradient(151deg,transparent 0 42%,#c7dce2 42.4% 45%,#385363 45.4% 68%,transparent 68.4%),linear-gradient(207deg,transparent 0 43%,#edf7f8 43.4% 46.5%,#274353 46.9% 70%,transparent 70.4%),linear-gradient(166deg,transparent 0 54%,#a9c3cb 54.4% 57%,#193442 57.4% 77%,transparent 77.4%),linear-gradient(195deg,transparent 0 55%,#e5f2f4 55.4% 58%,#203c4a 58.4% 80%,transparent 80.4%);filter:drop-shadow(0 -18px 30px #c9efff45);transform-origin:50% 100%;animation:vakMountainParallax 12s ease-in-out infinite alternate;will-change:transform}
#menu[data-theme="vak"] .td-silhouette::before{content:"";position:absolute;inset:26% 0 0;background:linear-gradient(158deg,transparent 0 46%,#f5fbfb 46.4% 49%,#496674 49.4% 71%,transparent 71.4%),linear-gradient(201deg,transparent 0 47%,#d7e9ed 47.4% 50%,#304e5d 50.4% 73%,transparent 73.4%);opacity:.9;filter:drop-shadow(0 -6px 14px #e9fbff33)}
#menu[data-theme="vak"] .td-silhouette::after{content:"";position:absolute;inset:auto -8% -3%;height:34%;background:radial-gradient(ellipse at 12% 100%,#f8fcfc 0 31%,transparent 32%),radial-gradient(ellipse at 38% 112%,#d9e9ec 0 39%,transparent 40%),radial-gradient(ellipse at 68% 104%,#f4fafa 0 35%,transparent 36%),radial-gradient(ellipse at 94% 115%,#cbdfe4 0 42%,transparent 43%),linear-gradient(#e8f3f5,#afcbd3);filter:drop-shadow(0 -9px 22px #e4f8ff55)}
#menu[data-theme="vak"] .td-frame{display:block;inset:auto -5% 0;height:24%;background:repeating-linear-gradient(174deg,transparent 0 68px,#f5fbfc24 69px 73px,transparent 74px 142px),linear-gradient(180deg,transparent,#d7e9ed45 58%,#9fbac455);clip-path:polygon(0 62%,14% 47%,28% 69%,45% 42%,61% 66%,78% 45%,100% 61%,100% 100%,0 100%);filter:blur(.7px);animation:vakDriftedSnow 8s ease-in-out infinite alternate;will-change:transform}
#menu[data-theme="vak"] .td-rays{display:block;inset:0 -35%;background:linear-gradient(103deg,transparent 12%,#dff7ff12 34%,transparent 48%),linear-gradient(76deg,transparent 54%,#eefcff0d 72%,transparent 88%);background-size:100% 100%;mix-blend-mode:screen;animation:vakHighMist 11s ease-in-out infinite alternate;will-change:transform,opacity}
#menu[data-theme="vak"] .td-scan{display:block;background:radial-gradient(circle,#fff 0 1.5px,transparent 2px),radial-gradient(circle,#dff7ff 0 1px,transparent 1.7px),radial-gradient(circle,#fff 0 2px,transparent 2.7px);background-size:73px 91px,119px 137px,181px 211px;background-position:11px -91px,47px -137px,83px -211px;opacity:.38;top:-109vh;height:calc(100% + 109vh);animation:vakSnowSheets 6.4s linear infinite;mix-blend-mode:screen;will-change:transform}
#menu[data-theme="vak"] #tdParticles .tp-blizzard{top:-8vh;border-radius:58% 42% 60% 40%;background:#f8ffff;box-shadow:0 0 7px #dff8ff;animation-name:vakSnowFromSky;will-change:transform,opacity}
#menu[data-theme="vak"] #tdParticles .tp-blizzard:nth-child(3n){width:5px;height:5px;opacity:.92}
#menu[data-theme="vak"] #tdParticles .tp-blizzard:nth-child(4n){width:2px;height:7px;border-radius:60%;opacity:.8}
#menu[data-theme="vak"] #tdParticles .tp-blizzard:nth-child(7n){width:8px;height:8px;opacity:.7;box-shadow:0 0 11px #fff}
@keyframes vakSkyBreathe{from{opacity:.9}to{opacity:1}}
@keyframes vakFarMountains{to{transform:translate3d(-1.2%,1%,0)}}
@keyframes vakMountainParallax{to{transform:translate3d(1.1%,.5%,0) scale(1.012)}}
@keyframes vakDriftedSnow{to{transform:translateX(1.5%)}}
@keyframes vakHighMist{from{transform:translate3d(14%,0,0);opacity:.28}to{transform:translate3d(-14%,0,0);opacity:.58}}
@keyframes vakSnowSheets{to{transform:translate3d(0,109vh,0)}}
@keyframes vakSnowFromSky{0%{opacity:0;transform:translate3d(0,-10vh,0) rotate(0)}8%{opacity:.92}74%{opacity:.78}100%{opacity:0;transform:translate3d(var(--drift,20px),112vh,0) rotate(250deg)}}

#menu[data-theme="ael"] #tdParticles .tp-grass{bottom:-8px;background:linear-gradient(180deg,#a6ffc2,#3b9657 55%,#153d27);box-shadow:0 0 6px #6ad98933}
#menu[data-theme="ael"] .td-frame{display:block;inset:auto 0 0;height:17%;background:repeating-linear-gradient(84deg,transparent 0 18px,#4baf6955 19px 22px,transparent 23px 43px),repeating-linear-gradient(96deg,transparent 0 27px,#74d88c44 28px 31px,transparent 32px 57px);background-size:170px 100%,230px 100%;opacity:.64;filter:blur(.35px);transform-origin:50% 100%;animation:aelGrassSea 4.2s ease-in-out infinite alternate;mask:linear-gradient(transparent,#000 38%)}
@keyframes aelGrassSea{to{transform:skewX(2.5deg) translateX(5px);filter:brightness(1.25)}}

#menu[data-theme="wld"] #themeDecor::before{transition:background 2.8s ease,filter 2.8s ease}
#menu[data-theme="wld"][data-wld-season="rain"] #themeDecor::before{background:linear-gradient(#243b4d,#142a31 58%,#07110d);filter:saturate(.78)}
#menu[data-theme="wld"][data-wld-season="sun"] #themeDecor::before{background:radial-gradient(circle at 80% 16%,#fff6b0 0 5%,#ffd35c66 6% 18%,transparent 19%),linear-gradient(#4f8cb4,#4e8a55 65%,#102312);filter:saturate(1.2) brightness(1.08)}
#menu[data-theme="wld"][data-wld-season="wind"] #themeDecor::before{background:linear-gradient(#7b654c,#bd7b3c 60%,#37230f);filter:saturate(1.15)}
#menu[data-theme="wld"][data-wld-season="snow"] #themeDecor::before{background:linear-gradient(#a9cada,#637f8b 60%,#e7f3f4);filter:saturate(.55) brightness(1.04)}
#menu[data-theme="wld"] .td-sun{transition:background 2.8s ease,box-shadow 2.8s ease,opacity 2.8s ease}
#menu[data-theme="wld"][data-wld-season="rain"] .td-sun{opacity:.13;background:#bdd9e3;box-shadow:0 0 70px #8ab8c6}
#menu[data-theme="wld"][data-wld-season="sun"] .td-sun{opacity:1;background:radial-gradient(circle,#fffbd5,#ffd35c 54%,transparent 71%);box-shadow:0 0 130px #ffd35caa}
#menu[data-theme="wld"][data-wld-season="wind"] .td-sun{opacity:.45;background:#f0a45a;box-shadow:0 0 80px #d8753f77}
#menu[data-theme="wld"][data-wld-season="snow"] .td-sun{opacity:.2;background:#e4f6ff;box-shadow:0 0 70px #c6efff}
#menu[data-theme="wld"][data-wld-season="wind"] .td-rays{display:block;background:repeating-linear-gradient(100deg,transparent 0 80px,#ffe0aa22 81px 84px,transparent 85px 160px);animation:wldWindBands 1.8s linear infinite}@keyframes wldWindBands{to{background-position:420px 0}}

#menu[data-theme="desc"] .td-moon{display:block;right:6%;top:8%;width:310px;height:310px;border-radius:50%;border:2px solid #a77be766;background:repeating-conic-gradient(from 0deg,#c7a1ff66 0 2deg,transparent 3deg 14deg),radial-gradient(circle,transparent 0 35%,#8e6ac744 36% 38%,transparent 39% 58%,#8e6ac733 59% 61%,transparent 62%);box-shadow:0 0 55px #8e6ac755,inset 0 0 35px #8e6ac733;animation:descRunicOrbit 16s linear infinite}
#menu[data-theme="desc"] .td-moon::before,#menu[data-theme="desc"] .td-moon::after{content:"";position:absolute;border-radius:50%;border:1px solid #d2b5ff66;background:repeating-conic-gradient(from 0deg,#b78cf666 0 3deg,transparent 4deg 22deg)}
#menu[data-theme="desc"] .td-moon::before{inset:17%;animation:descRunicOrbit 9s linear infinite reverse}#menu[data-theme="desc"] .td-moon::after{inset:34%;animation:descRunicOrbit 5s linear infinite}
#menu[data-theme="desc"] .td-gate{display:block;left:7%;top:auto;bottom:0;width:360px;height:390px;background:linear-gradient(135deg,transparent 0 38%,#b787ff 39% 55%,#3b1659 56% 68%,transparent 69%),linear-gradient(45deg,transparent 0 44%,#7d4db5 45% 62%,#251034 63% 72%,transparent 73%),linear-gradient(105deg,transparent 0 42%,#e2c7ff 43% 52%,#5a287f 53% 66%,transparent 67%);clip-path:polygon(0 100%,12% 62%,24% 100%,35% 35%,48% 100%,61% 50%,73% 100%,86% 19%,100% 100%);filter:drop-shadow(0 0 24px #a77be788);animation:descCrystalsSing 4s ease-in-out infinite alternate}
@keyframes descRunicOrbit{to{transform:rotate(360deg)}}@keyframes descCrystalsSing{to{filter:drop-shadow(0 0 42px #c9a0ffaa) brightness(1.32);transform:translateY(-5px)}}

#menu[data-theme="ash"] .td-gate{display:block;left:50%;top:auto;bottom:-3%;transform:translateX(-50%);width:74%;height:48%;background:radial-gradient(ellipse at 50% 105%,#080202 0 44%,transparent 45%),linear-gradient(155deg,transparent 0 43%,#170706 44% 66%,transparent 67%),linear-gradient(205deg,transparent 0 43%,#210908 44% 66%,transparent 67%);clip-path:polygon(0 100%,8% 84%,19% 79%,29% 61%,39% 54%,47% 20%,54% 20%,62% 55%,75% 65%,87% 82%,100% 100%);filter:drop-shadow(0 -12px 28px #c44a3055)}
#menu[data-theme="ash"] .td-gate::before{content:"";position:absolute;left:43%;top:17%;width:15%;height:58%;background:linear-gradient(180deg,#fff0a3,#ff6b2c 22%,#9d1e10 66%,transparent);clip-path:polygon(38% 0,64% 0,79% 21%,62% 34%,79% 48%,55% 100%,29% 100%,44% 54%,23% 39%,42% 22%);filter:drop-shadow(0 0 12px #ff6b2c);animation:ashLavaRun 2.4s ease-in-out infinite alternate}
#menu[data-theme="ash"] .td-fire{display:block;inset:auto 0 0;height:38%;background:radial-gradient(ellipse at 50% 100%,#ff9b4a66 0 5%,#b6271666 18%,transparent 58%);animation:ashVolcanoPulse 2.8s ease-in-out infinite alternate}
#menu[data-theme="ash"] .td-fire::before{content:"";position:absolute;left:44%;top:0;width:12%;height:12%;border-radius:50%;background:#fff0aa;box-shadow:-45px -20px 18px #ff6b2c,32px -35px 15px #d94720,75px -8px 19px #ff9847;animation:ashVolcanoSparks 1.8s ease-out infinite}
@keyframes ashLavaRun{to{filter:drop-shadow(0 0 24px #ff8d42) brightness(1.4)}}@keyframes ashVolcanoPulse{to{opacity:1;transform:scaleY(1.12)}}@keyframes ashVolcanoSparks{to{transform:translateY(-70px) scale(.4);opacity:0}}

#menu[data-theme="veh"] .td-rays{display:block;inset:auto;left:50%;top:45%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;border:2px solid #d8b84a77;transform-style:preserve-3d;perspective:900px;box-shadow:0 0 45px #d8b84a33,inset 0 0 35px #d8b84a22;animation:vehOrbitOne 8s linear infinite}
#menu[data-theme="veh"] .td-rays::before,#menu[data-theme="veh"] .td-rays::after{content:"";position:absolute;inset:7%;border-radius:50%;border:2px solid #e7ca665f;box-shadow:0 0 36px #d8b84a33;transform-style:preserve-3d}
#menu[data-theme="veh"] .td-rays::before{animation:vehOrbitTwo 11s linear infinite reverse}#menu[data-theme="veh"] .td-rays::after{inset:18%;border-color:#aa842a88;animation:vehOrbitThree 6.5s linear infinite}
#menu[data-theme="veh"] .td-moon{z-index:2;left:50%;top:45%;width:116px;height:116px;margin:-58px 0 0 -58px;transform:none;background:radial-gradient(circle,#fffbd0 0 3%,#f1d56a 4% 15%,#8f6f1e 16% 32%,#090702 64%);box-shadow:0 0 55px #ffe477aa,0 0 130px #c69d3555,inset 0 0 24px #000;animation:vehCentralMemory 3s ease-in-out infinite alternate}
@keyframes vehOrbitOne{to{transform:rotateZ(360deg) rotateX(64deg)}}@keyframes vehOrbitTwo{0%{transform:rotateX(74deg) rotateY(0deg)}100%{transform:rotateX(74deg) rotateY(360deg)}}@keyframes vehOrbitThree{0%{transform:rotateY(68deg) rotateZ(0deg)}100%{transform:rotateY(68deg) rotateZ(360deg)}}@keyframes vehCentralMemory{to{filter:brightness(1.45);transform:scale(1.13);box-shadow:0 0 90px #fff0a0cc,0 0 180px #c69d3577,inset 0 0 20px #000}}

@media(max-width:850px){.faction-menu-skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#menu[data-theme="nur"] .td-gate{right:2%;opacity:.65}#menu[data-theme="khaz"] .td-silhouette{opacity:.7}}@media(max-width:560px){.faction-menu-skin-grid{grid-template-columns:1fr}.faction-menu-skin-card{min-height:250px}}
@media(prefers-reduced-motion:reduce){#menu[data-theme] #themeDecor *,#menu[data-theme] #themeDecor::before,#menu[data-theme] #themeDecor::after,.faction-menu-preview::after{animation:none!important}}

.reward-cardback-visual[data-back="back-gilded"],.back[data-card-back="back-gilded"],.pile[data-card-back="back-gilded"],:root[data-road-cardback="back-gilded"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-gilded"] .back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-gilded"] .card.back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-gilded"] .m.back:not([data-faction]):not([data-card-back]){border-color:#d8ac50!important;box-shadow:inset 0 0 0 2px #6e501b,0 0 12px #d8ac5033!important}.reward-cardback-visual[data-back="back-vehemence"],.back[data-card-back="back-vehemence"],.pile[data-card-back="back-vehemence"],:root[data-road-cardback="back-vehemence"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-vehemence"] .back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-vehemence"] .card.back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-vehemence"] .m.back:not([data-faction]):not([data-card-back]){background:radial-gradient(circle,#6a4c0f,#030301 60%)!important}.reward-cardback-visual[data-back="back-moonstone"],.back[data-card-back="back-moonstone"],.pile[data-card-back="back-moonstone"],:root[data-road-cardback="back-moonstone"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-moonstone"] .back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-moonstone"] .card.back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-moonstone"] .m.back:not([data-faction]):not([data-card-back]){background:radial-gradient(circle,#a9c8e3,#17263b 28%,#05080d 68%)!important}.reward-cardback-visual[data-back="back-ashen"],.back[data-card-back="back-ashen"],.pile[data-card-back="back-ashen"],:root[data-road-cardback="back-ashen"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-ashen"] .back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-ashen"] .card.back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-ashen"] .m.back:not([data-faction]):not([data-card-back]){background:repeating-linear-gradient(135deg,#40110c 0 12px,#140807 13px 25px)!important}.reward-cardback-visual[data-back="back-void"],.back[data-card-back="back-void"],.pile[data-card-back="back-void"],:root[data-road-cardback="back-void"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-void"] .back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-void"] .card.back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-void"] .m.back:not([data-faction]):not([data-card-back]){background:linear-gradient(135deg,#050508,#000)!important}


/* Card-back atelier: free Test prototypes, separate from permanent Road Pass unlocks. */
.cardback-workshop{margin:0 0 24px;padding:18px;border:1px solid #564726;background:radial-gradient(circle at 50% 0,#c39a2a12,transparent 35%),linear-gradient(145deg,#0d0f14,#06080b)}.cardback-workshop-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}.cardback-workshop-head span,.reward-collection-head span{color:#d0aa51;font:900 7px var(--mono);letter-spacing:.2em;text-transform:uppercase}.cardback-workshop-head h3{margin:3px 0 0;color:#eee3ce;font:400 24px var(--serif)}.cardback-workshop-head p,.reward-collection-head p{max-width:420px;margin:0;color:#8d97a5;font:9px/1.5 var(--mono)}.cardback-workshop-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px}.cardback-prototype{min-width:0;padding:9px;border:1px solid #303844;background:#080b0f}.cardback-prototype.equipped{border-color:#d0a94b;box-shadow:inset 0 0 24px #d0a94b13,0 0 14px #000}.cardback-prototype-preview{position:relative;display:grid;place-items:center;aspect-ratio:5/7;overflow:hidden;border:1px solid #59616c;border-radius:5px;background:#0a0e14;color:#d8b85f;box-shadow:inset 0 0 0 3px #07090c,inset 0 0 0 4px #77705b66}.cardback-prototype-preview::before{content:"";position:absolute;inset:9%;border:1px solid currentColor;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:.65}.cardback-prototype-preview span{position:relative;z-index:1;display:grid;place-items:center;width:45%;aspect-ratio:1;border:1px solid currentColor;border-radius:50%;background:#05070bbd;box-shadow:0 0 18px currentColor;color:inherit;font:400 clamp(16px,2vw,27px) var(--serif)}.cardback-prototype-preview.default{background:radial-gradient(circle,#354052 0 2%,#101722 3% 31%,#06090e 70%);color:#9eb0c7}.cardback-prototype b,.cardback-prototype small{display:block}.cardback-prototype b{margin-top:8px;color:#eee4d1;font:700 12px/1.1 var(--serif)}.cardback-prototype small{min-height:48px;margin-top:5px;color:#788391;font:8px/1.4 var(--mono)}.cardback-prototype button{width:100%;padding:7px 5px;border:1px solid #66532d;background:#151107;color:#d9ba6b;font:800 7px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.cardback-prototype.equipped button{background:#332407;color:#ffe09a}.reward-collection-head{display:flex;justify-content:space-between;gap:14px;align-items:end;margin:0 0 10px;padding-top:2px}.achievement-cardbacks{border-color:#8d7138;background:radial-gradient(circle at 20% 0,#d5aa5220,transparent 36%),linear-gradient(145deg,#100d08,#06080b)}.achievement-cardbacks .cardback-workshop-head span{color:#efd184}.achievement-cardbacks .cardback-prototype{border-color:#4c4029;background:linear-gradient(155deg,#12100b,#08090c)}.achievement-cardbacks .cardback-prototype.locked{border-style:dashed;opacity:.45;filter:grayscale(.82)}.achievement-cardbacks .cardback-prototype.locked .cardback-prototype-preview{filter:brightness(.48) contrast(.86)}.achievement-cardbacks .cardback-prototype.locked .cardback-prototype-preview:hover,.achievement-cardbacks .cardback-prototype.locked .cardback-prototype-preview:focus-visible{filter:grayscale(.15) brightness(.82)!important}.achievement-cardbacks .cardback-prototype button[disabled]{cursor:not-allowed;border-color:#37332a;background:#0c0c0b;color:#777268}.achievement-back-progress{margin:7px 0;color:#d6b867;font:900 7px var(--mono);letter-spacing:.09em;text-transform:uppercase}.achievement-back-progress.unlocked{color:#8dd8b1}
.cardback-prototype-preview[data-back="prototype-eclipse"],.back[data-card-back="prototype-eclipse"],.pile[data-card-back="prototype-eclipse"],:root[data-road-cardback="prototype-eclipse"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-eclipse"] .back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-eclipse"] .card.back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-eclipse"] .m.back:not([data-faction]):not([data-card-back]){background:radial-gradient(circle at 50% 42%,#050505 0 13%,#d5a943 14% 16%,#241a08 17% 23%,transparent 24%),linear-gradient(156deg,transparent 0 48%,#d1a03a 49% 50%,transparent 51%),repeating-linear-gradient(90deg,#030405 0 7px,#11100b 8px 9px)!important;border-color:#b88d38!important;color:#e5bd5e!important;box-shadow:inset 0 0 24px #000,0 0 11px #b88d3838!important}
.cardback-prototype-preview[data-back="prototype-oracle"],.back[data-card-back="prototype-oracle"],.pile[data-card-back="prototype-oracle"],:root[data-road-cardback="prototype-oracle"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-oracle"] .back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-oracle"] .card.back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-oracle"] .m.back:not([data-faction]):not([data-card-back]){background:radial-gradient(ellipse at 50% 46%,#d4b8ff 0 2%,#7b3fb5 3% 6%,#080611 7% 18%,transparent 19%),conic-gradient(from 22deg,#0a0610,#5c268855,#0a0610 16%,#a45de844 17%,#08050d 30%,#4b1d7455 45%,#08050d 62%,#a45de833 80%,#08050d)!important;border-color:#9d68c9!important;color:#d6b1f4!important;box-shadow:inset 0 0 28px #09020f,0 0 12px #7b36aa44!important}
.cardback-prototype-preview[data-back="prototype-moon-gate"],.back[data-card-back="prototype-moon-gate"],.pile[data-card-back="prototype-moon-gate"],:root[data-road-cardback="prototype-moon-gate"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-moon-gate"] .back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-moon-gate"] .card.back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-moon-gate"] .m.back:not([data-faction]):not([data-card-back]){background:radial-gradient(circle at 50% 25%,#f0f5ff 0 8%,#7794b8 9% 11%,transparent 12%),linear-gradient(90deg,transparent 16%,#9db3ca55 17% 19%,transparent 20% 80%,#9db3ca55 81% 83%,transparent 84%),linear-gradient(0deg,#101b2c 0 18%,#050912 19% 68%,#14243a)!important;border-color:#829ab5!important;color:#d8e5f2!important;box-shadow:inset 0 0 26px #02050a,0 0 11px #87a9cf3d!important}
.cardback-prototype-preview[data-back="prototype-living-archive"],.back[data-card-back="prototype-living-archive"],.pile[data-card-back="prototype-living-archive"],:root[data-road-cardback="prototype-living-archive"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-living-archive"] .back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-living-archive"] .card.back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-living-archive"] .m.back:not([data-faction]):not([data-card-back]){background:radial-gradient(circle at 45% 38%,#d6a843 0 1%,transparent 2%),repeating-radial-gradient(ellipse at 20% 70%,transparent 0 8px,#b1842d33 9px 10px,transparent 11px 17px),linear-gradient(127deg,#020202 0 42%,#211906 43% 44%,#030303 45% 63%,#8d692333 64%,#020202 66%)!important;border-color:#8d6c2c!important;color:#d4a94b!important;box-shadow:inset 0 0 34px #000,0 0 11px #9d762b33!important}
.cardback-prototype-preview[data-back="prototype-dragon-court"],.back[data-card-back="prototype-dragon-court"],.pile[data-card-back="prototype-dragon-court"],:root[data-road-cardback="prototype-dragon-court"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-dragon-court"] .back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-dragon-court"] .card.back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-dragon-court"] .m.back:not([data-faction]):not([data-card-back]){background:radial-gradient(circle at 50% 50%,#e06a3d 0 2%,#37110c 3% 17%,transparent 18%),repeating-conic-gradient(from 45deg at 50% 50%,#190807 0 11deg,#6e1e13 12deg 22deg,#120605 23deg 34deg)!important;border-color:#b64d31!important;color:#ef8b63!important;box-shadow:inset 0 0 32px #090202,0 0 11px #bd482f44!important}
.cardback-prototype-preview[data-back="prototype-iridescent-oath"],.back[data-card-back="prototype-iridescent-oath"],.pile[data-card-back="prototype-iridescent-oath"],:root[data-road-cardback="prototype-iridescent-oath"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-iridescent-oath"] .back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-iridescent-oath"] .card.back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="prototype-iridescent-oath"] .m.back:not([data-faction]):not([data-card-back]){background:radial-gradient(circle at 50% 48%,#f4f1ff 0 1%,#241936 2% 12%,transparent 13%),conic-gradient(from 210deg,#080a12,#44215b 12%,#17455a 25%,#2a5c46 38%,#6d4d1d 50%,#61212c 63%,#35255c 76%,#15576b 88%,#080a12)!important;border-color:#9097b0!important;color:#f0eaff!important;box-shadow:inset 0 0 35px #03040a,0 0 12px #9074c044!important}
@media(max-width:900px){.cardback-workshop-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:620px){.cardback-workshop-head,.reward-collection-head{display:block}.cardback-workshop-head p,.reward-collection-head p{margin-top:7px}.cardback-workshop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cardback-prototype small{min-height:0;margin-bottom:7px}}



.tdeckpile[data-card-back="back-gilded"],:root[data-road-cardback="back-gilded"] .tdeckpile:not([data-faction]):not([data-card-back]){border-color:#d8ac50!important;box-shadow:inset 0 0 0 2px #6e501b,0 0 12px #d8ac5033!important}
.tdeckpile[data-card-back="back-vehemence"],:root[data-road-cardback="back-vehemence"] .tdeckpile:not([data-faction]):not([data-card-back]){background:radial-gradient(circle,#6a4c0f,#030301 60%)!important}
.tdeckpile[data-card-back="back-moonstone"],:root[data-road-cardback="back-moonstone"] .tdeckpile:not([data-faction]):not([data-card-back]){background:radial-gradient(circle,#a9c8e3,#17263b 28%,#05080d 68%)!important}
.tdeckpile[data-card-back="back-ashen"],:root[data-road-cardback="back-ashen"] .tdeckpile:not([data-faction]):not([data-card-back]){background:repeating-linear-gradient(135deg,#40110c 0 12px,#140807 13px 25px)!important}
.tdeckpile[data-card-back="back-void"],:root[data-road-cardback="back-void"] .tdeckpile:not([data-faction]):not([data-card-back]){background:linear-gradient(135deg,#050508,#000)!important}
.tdeckpile[data-card-back="prototype-eclipse"],:root[data-road-cardback="prototype-eclipse"] .tdeckpile:not([data-faction]):not([data-card-back]){background:radial-gradient(circle at 50% 42%,#050505 0 13%,#d5a943 14% 16%,#241a08 17% 23%,transparent 24%),linear-gradient(156deg,transparent 0 48%,#d1a03a 49% 50%,transparent 51%),repeating-linear-gradient(90deg,#030405 0 7px,#11100b 8px 9px)!important;border-color:#b88d38!important;box-shadow:inset 0 0 24px #000,0 0 11px #b88d3838!important}
.tdeckpile[data-card-back="prototype-oracle"],:root[data-road-cardback="prototype-oracle"] .tdeckpile:not([data-faction]):not([data-card-back]){background:radial-gradient(ellipse at 50% 46%,#d4b8ff 0 2%,#7b3fb5 3% 6%,#080611 7% 18%,transparent 19%),conic-gradient(from 22deg,#0a0610,#5c268855,#0a0610 16%,#a45de844 17%,#08050d 30%,#4b1d7455 45%,#08050d 62%,#a45de833 80%,#08050d)!important;border-color:#9d68c9!important}
.tdeckpile[data-card-back="prototype-moon-gate"],:root[data-road-cardback="prototype-moon-gate"] .tdeckpile:not([data-faction]):not([data-card-back]){background:radial-gradient(circle at 50% 25%,#f0f5ff 0 8%,#7794b8 9% 11%,transparent 12%),linear-gradient(0deg,#101b2c 0 18%,#050912 19% 68%,#14243a)!important;border-color:#829ab5!important}
.tdeckpile[data-card-back="prototype-living-archive"],:root[data-road-cardback="prototype-living-archive"] .tdeckpile:not([data-faction]):not([data-card-back]){background:repeating-radial-gradient(ellipse at 20% 70%,transparent 0 8px,#b1842d33 9px 10px,transparent 11px 17px),linear-gradient(127deg,#020202 0 42%,#211906 43% 44%,#030303 45% 63%,#8d692233 64%,#020202 66%)!important;border-color:#8d6c2c!important}
.tdeckpile[data-card-back="prototype-dragon-court"],:root[data-road-cardback="prototype-dragon-court"] .tdeckpile:not([data-faction]):not([data-card-back]){background:radial-gradient(circle at 50% 50%,#e06a3d 0 2%,#37110c 3% 17%,transparent 18%),repeating-conic-gradient(from 45deg,#190807 0 11deg,#6e1e13 12deg 22deg,#120605 23deg 34deg)!important;border-color:#b64d31!important}
.tdeckpile[data-card-back="prototype-iridescent-oath"],:root[data-road-cardback="prototype-iridescent-oath"] .tdeckpile:not([data-faction]):not([data-card-back]){background:radial-gradient(circle at 50% 48%,#f4f1ff 0 1%,#241936 2% 12%,transparent 13%),conic-gradient(from 210deg,#080a12,#44215b 12%,#17455a 25%,#2a5c46 38%,#6d4d1d 50%,#61212c 63%,#35255c 76%,#15576b 88%,#080a12)!important;border-color:#9097b0!important}

/* Every hidden remote hand advertises the faction piloting it. Local deck piles
   deliberately have no data-faction attribute, so a player's equipped back wins. */
.back[data-faction],.pile[data-faction]{--faccent:#9aa4b4;--fmark:"?";--faction-back:linear-gradient(145deg,#293244,#0b0f16);background:var(--faction-back)!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important}.back[data-faction]{position:relative;overflow:hidden}.back[data-faction]::before{content:"";position:absolute;inset:3px;border:1px solid color-mix(in srgb,var(--faccent) 55%,transparent);border-radius:2px;clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%);opacity:.8}.back[data-faction]::after{content:var(--fmark);position:absolute;left:50%;top:50%;display:grid;place-items:center;width:48%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);border:1px solid var(--faccent);background:#03050ac9;box-shadow:0 0 10px color-mix(in srgb,var(--faccent) 75%,transparent);color:var(--faccent);font:900 clamp(6px,1vw,12px)/1 var(--mono);letter-spacing:-.04em;text-shadow:0 0 6px currentColor}.back[data-faction]::after{line-height:1}.pile[data-faction]::before{border-color:color-mix(in srgb,var(--faccent) 65%,transparent);background:repeating-radial-gradient(circle at center,transparent 0 7px,color-mix(in srgb,var(--faccent) 20%,transparent) 8px 9px)}
.back[data-faction="lex"],.pile[data-faction="lex"],:root[data-road-faction-back="lex"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="lex"] .pile:not([data-faction]):not([data-card-back]){--faccent:#c68af1;--fmark:"LX";--faction-back:radial-gradient(circle at 50% 46%,#d6a5ff 0 2%,#3b1759 3% 14%,transparent 15%),repeating-linear-gradient(165deg,transparent 0 7px,#b972e31f 8px 9px),linear-gradient(145deg,#21102f,#07050d)}
.back[data-faction="leg"],.pile[data-faction="leg"],:root[data-road-faction-back="leg"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="leg"] .pile:not([data-faction]):not([data-card-back]){--faccent:#ffcf78;--fmark:"IL";--faction-back:radial-gradient(circle,#fff1b8 0 2%,transparent 3% 17%),conic-gradient(from 15deg,#5b173f,#de7544,#d9c866,#4eaa9a,#4869a3,#703e91,#5b173f)}
.back[data-faction="nys"],.pile[data-faction="nys"],:root[data-road-faction-back="nys"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="nys"] .pile:not([data-faction]):not([data-card-back]){--faccent:#b9c0cb;--fmark:"Ø";--faction-back:linear-gradient(43deg,transparent 0 46%,#d8dde544 47% 49%,transparent 50%),linear-gradient(137deg,transparent 0 47%,#6a728044 48% 50%,transparent 51%),radial-gradient(circle,#161923,#010205 72%)}
.back[data-faction="nur"],.pile[data-faction="nur"],:root[data-road-faction-back="nur"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="nur"] .pile:not([data-faction]):not([data-card-back]){--faccent:#68c7ff;--fmark:"NU";--faction-back:radial-gradient(circle at 50% 36%,#d9f3ff 0 7%,#4a8db8 8% 10%,transparent 11%),repeating-radial-gradient(circle at 50% 38%,transparent 0 11px,#56bce51f 12px 13px),linear-gradient(#112f4b,#040812)}
.back[data-faction="sang"],.pile[data-faction="sang"],:root[data-road-faction-back="sang"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="sang"] .pile:not([data-faction]):not([data-card-back]){--faccent:#ff6f71;--fmark:"SB";--faction-back:radial-gradient(ellipse at 50% 66%,#e34b4d 0 5%,#581316 6% 17%,transparent 18%),linear-gradient(90deg,transparent 43%,#d34b4b2f 44% 56%,transparent 57%),linear-gradient(145deg,#390b10,#090306)}
.back[data-faction="iron"],.pile[data-faction="iron"],:root[data-road-faction-back="iron"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="iron"] .pile:not([data-faction]):not([data-card-back]){--faccent:#e4b355;--fmark:"IU";--faction-back:linear-gradient(90deg,transparent 47%,#e4b35555 48% 52%,transparent 53%),linear-gradient(0deg,transparent 47%,#e4b35533 48% 52%,transparent 53%),repeating-linear-gradient(90deg,#20170a 0 9px,#59401b 10px,#0a0b0d 11px 19px)}
.back[data-faction="vir"],.pile[data-faction="vir"],:root[data-road-faction-back="vir"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="vir"] .pile:not([data-faction]):not([data-card-back]){--faccent:#83d794;--fmark:"VI";--faction-back:radial-gradient(circle at 42% 50%,transparent 0 13%,#6ac68188 14% 16%,transparent 17%),radial-gradient(circle at 58% 50%,transparent 0 13%,#b4e8a788 14% 16%,transparent 17%),linear-gradient(145deg,#173c24,#06100a)}
.back[data-faction="sil"],.pile[data-faction="sil"],:root[data-road-faction-back="sil"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="sil"] .pile:not([data-faction]):not([data-card-back]){--faccent:#f3edcf;--fmark:"SH";--faction-back:radial-gradient(ellipse at 50% 102%,#f7f1c8 0 8%,#b9d2d4 9% 15%,transparent 16%),linear-gradient(0deg,#243c47 0 25%,#b7cfd0 26% 28%,#18252c 29% 60%,#080b0d)}
.back[data-faction="frost"],.pile[data-faction="frost"],:root[data-road-faction-back="frost"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="frost"] .pile:not([data-faction]):not([data-card-back]){--faccent:#a7e9ff;--fmark:"WM";--faction-back:linear-gradient(35deg,transparent 43%,#d8f6ff66 44% 46%,transparent 47%),linear-gradient(145deg,transparent 47%,#7edbf65c 48% 50%,transparent 51%),radial-gradient(circle at 50% 50%,#245a71,#07121d 65%)}
.back[data-faction="khaz"],.pile[data-faction="khaz"],:root[data-road-faction-back="khaz"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="khaz"] .pile:not([data-faction]):not([data-card-back]){--faccent:#ef9d52;--fmark:"KH";--faction-back:linear-gradient(72deg,transparent 31%,#f0a75b55 32% 35%,transparent 36% 48%,#f0a75b44 49% 52%,transparent 53%),repeating-linear-gradient(130deg,#33170a 0 9px,#6c3211 10px 12px,#160a05 13px 22px)}
.back[data-faction="mf"],.pile[data-faction="mf"],:root[data-road-faction-back="mf"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="mf"] .pile:not([data-faction]):not([data-card-back]){--faccent:#f4dc87;--fmark:"MF";--faction-back:radial-gradient(circle at 50% 26%,#fff3b4 0 8%,#8ca6d1 9% 10%,transparent 11%),linear-gradient(90deg,transparent 21%,#d9ca7a3b 22% 24%,transparent 25% 75%,#d9ca7a3b 76% 78%,transparent 79%),linear-gradient(#182b50,#060913)}
.back[data-faction="vak"],.pile[data-faction="vak"],:root[data-road-faction-back="vak"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="vak"] .pile:not([data-faction]):not([data-card-back]){--faccent:#d0b36b;--fmark:"ᛉ";--faction-back:radial-gradient(circle at 50% 48%,#9f7c34 0 3%,transparent 4% 17%,#c5a35c44 18% 20%,transparent 21%),repeating-linear-gradient(45deg,#211b0f 0 8px,#3b2f18 9px 11px,#0e0e0b 12px 19px)}
.back[data-faction="ael"],.pile[data-faction="ael"],:root[data-road-faction-back="ael"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ael"] .pile:not([data-faction]):not([data-card-back]){--faccent:#74e2c8;--fmark:"AE";--faction-back:radial-gradient(circle at 50% 50%,#b3fff0 0 2%,#1c856f 3% 7%,transparent 8% 20%),conic-gradient(from 45deg,#071c1b,#1f655c44,#071616 15%,#55c4aa44 16%,#061313 32%,#28786a55 48%,#061313 65%,#55c4aa44 82%,#071c1b)}
.back[data-faction="wld"],.pile[data-faction="wld"],:root[data-road-faction-back="wld"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="wld"] .pile:not([data-faction]):not([data-card-back]){--faccent:#c1dd72;--fmark:"WB";--faction-back:radial-gradient(circle,#f0e6a3 0 2%,transparent 3% 15%),conic-gradient(from 0deg,#1f5636,#789e45,#bd843b,#722c32,#3c306a,#1e5470,#1f5636)}
.back[data-faction="desc"],.pile[data-faction="desc"],:root[data-road-faction-back="desc"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="desc"] .pile:not([data-faction]):not([data-card-back]){--faccent:#70d8ff;--fmark:"DC";--faction-back:linear-gradient(65deg,transparent 43%,#61d8ff66 44% 46%,transparent 47%),linear-gradient(115deg,transparent 43%,#8f6cff55 44% 46%,transparent 47%),radial-gradient(circle at 50% 55%,#173f68,#070917 68%)}
.back[data-faction="jal"],.pile[data-faction="jal"],:root[data-road-faction-back="jal"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="jal"] .pile:not([data-faction]):not([data-card-back]){--faccent:#6ee8de;--fmark:"JA";--faction-back:repeating-radial-gradient(ellipse at 50% 120%,transparent 0 8px,#64d7ce38 9px 11px,transparent 12px 18px),linear-gradient(145deg,#164f54,#061219 66%)}
.back[data-faction="ash"],.pile[data-faction="ash"],:root[data-road-faction-back="ash"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"] .pile:not([data-faction]):not([data-card-back]){--faccent:#ef8a58;--fmark:"AI";--faction-back:radial-gradient(circle at 50% 50%,#f5c17d 0 2%,transparent 3% 15%),repeating-conic-gradient(from 45deg,#571a10 0 14deg,#173e63 15deg 29deg,#120a0a 30deg 44deg)}
.back[data-faction="veh"],.pile[data-faction="veh"],:root[data-road-faction-back="veh"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="veh"] .pile:not([data-faction]):not([data-card-back]){--faccent:#d5aa3e;--fmark:"VR";--faction-back:repeating-radial-gradient(ellipse at 20% 70%,transparent 0 8px,#d0a22f44 9px 10px,transparent 11px 17px),linear-gradient(127deg,#010101 0 42%,#3c2b08 43% 44%,#020202 45% 68%,#9a722a44 69%,#010101 71%)}
.back[data-faction],.pile[data-faction]{background-size:155% 155%!important;animation:var(--fsurface,facSurfaceDrift) var(--fdur,7s) ease-in-out infinite}.back[data-faction]::before{animation:var(--fframe,facFrameBreathe) var(--fdur,7s) ease-in-out infinite}.back[data-faction]::after{animation:var(--fmarkanim,facMarkPulse) calc(var(--fdur,7s)*.72) ease-in-out infinite}.back[data-faction="lex"],.pile[data-faction="lex"]{--fsurface:facSurfaceDrift;--fframe:facArchiveTurn;--fmarkanim:facSigilPulse;--fdur:7.2s}.back[data-faction="leg"],.pile[data-faction="leg"]{--fsurface:facPrismDrift;--fframe:facPrismFrame;--fmarkanim:facPrismMark;--fdur:8.4s}.back[data-faction="nys"],.pile[data-faction="nys"]{--fsurface:facVoidDrift;--fframe:facUnwriteFrame;--fmarkanim:facGlitchMark;--fdur:5.1s}.back[data-faction="nur"],.pile[data-faction="nur"]{--fsurface:facMoonDrift;--fframe:facMoonFloat;--fmarkanim:facMoonMark;--fdur:8.8s}.back[data-faction="sang"],.pile[data-faction="sang"]{--fsurface:facBloodDrift;--fframe:facBloodFrame;--fmarkanim:facBloodPulse;--fdur:5.8s}.back[data-faction="iron"],.pile[data-faction="iron"]{--fsurface:facMachineDrift;--fframe:facForgeFrame;--fmarkanim:facMechanicalMark;--fdur:6.4s}.back[data-faction="vir"],.pile[data-faction="vir"]{--fsurface:facGreenDrift;--fframe:facGrowFrame;--fmarkanim:facLifeMark;--fdur:7.6s}.back[data-faction="sil"],.pile[data-faction="sil"]{--fsurface:facSilverDrift;--fframe:facShineFrame;--fmarkanim:facSilverMark;--fdur:9s}.back[data-faction="frost"],.pile[data-faction="frost"]{--fsurface:facFrostDrift;--fframe:facCrystalFrame;--fmarkanim:facFrostMark;--fdur:8.2s}.back[data-faction="khaz"],.pile[data-faction="khaz"]{--fsurface:facEmberDrift;--fframe:facForgeFrame;--fmarkanim:facHammerMark;--fdur:5.4s}.back[data-faction="mf"],.pile[data-faction="mf"]{--fsurface:facMoonDrift;--fframe:facMoonFloat;--fmarkanim:facMoonMark;--fdur:10s}.back[data-faction="vak"],.pile[data-faction="vak"]{--fsurface:facRuneDrift;--fframe:facRuneFrame;--fmarkanim:facRuneMark;--fdur:7s}.back[data-faction="ael"],.pile[data-faction="ael"]{--fsurface:facAetherDrift;--fframe:facAetherFrame;--fmarkanim:facAetherMark;--fdur:7.8s}.back[data-faction="wld"],.pile[data-faction="wld"]{--fsurface:facSeasonDrift;--fframe:facSeasonFrame;--fmarkanim:facSeasonMark;--fdur:11s}.back[data-faction="desc"],.pile[data-faction="desc"]{--fsurface:facNeonDrift;--fframe:facCircuitFrame;--fmarkanim:facGlitchMark;--fdur:5.6s}.back[data-faction="jal"],.pile[data-faction="jal"]{--fsurface:facWaterDrift;--fframe:facWaterFrame;--fmarkanim:facWaterMark;--fdur:7.4s}.back[data-faction="ash"],.pile[data-faction="ash"]{--fsurface:facEmberDrift;--fframe:facEmberFrame;--fmarkanim:facDragonMark;--fdur:5.9s}.back[data-faction="veh"],.pile[data-faction="veh"]{--fsurface:facVehemenceDrift;--fframe:facTendrilFrame;--fmarkanim:facMemoryMark;--fdur:6.6s}
@keyframes facSurfaceDrift{0%,100%{background-position:20% 20%}50%{background-position:80% 74%}}@keyframes facPrismDrift{0%,100%{background-position:0 30%}33%{background-position:65% 80%}66%{background-position:100% 18%}}@keyframes facVoidDrift{0%,92%,100%{background-position:30% 30%}94%{background-position:74% 61%}96%{background-position:12% 80%}}@keyframes facMoonDrift{0%,100%{background-position:50% 0}50%{background-position:50% 35%}}@keyframes facBloodDrift{0%,100%{background-position:50% 35%}50%{background-position:50% 70%}}@keyframes facMachineDrift{0%,100%{background-position:0 0}50%{background-position:36px 0}}@keyframes facGreenDrift{0%,100%{background-position:15% 90%}50%{background-position:85% 10%}}@keyframes facSilverDrift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes facFrostDrift{0%,100%{background-position:15% 10%}50%{background-position:85% 90%}}@keyframes facEmberDrift{0%,100%{background-position:50% 100%}50%{background-position:50% 15%}}@keyframes facRuneDrift{0%,100%{background-position:10% 20%}50%{background-position:90% 80%}}@keyframes facAetherDrift{0%,100%{background-position:0 100%}50%{background-position:100% 0}}@keyframes facSeasonDrift{0%{background-position:0 0}25%{background-position:100% 0}50%{background-position:100% 100%}75%{background-position:0 100%}100%{background-position:0 0}}@keyframes facNeonDrift{0%,100%{background-position:0 0}48%{background-position:100% 100%}50%{background-position:12% 78%}52%{background-position:90% 20%}}@keyframes facWaterDrift{0%,100%{background-position:50% 0}50%{background-position:42% 100%}}@keyframes facVehemenceDrift{0%,100%{background-position:0 50%}35%{background-position:80% 15%}70%{background-position:30% 95%}}
@keyframes facFrameBreathe{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1)}}@keyframes facArchiveTurn{0%,100%{opacity:.55;transform:rotate(-2deg) scale(.95)}50%{opacity:1;transform:rotate(2deg) scale(1)}}@keyframes facPrismFrame{0%,100%{opacity:.55;transform:rotate(0)}50%{opacity:1;transform:rotate(180deg)}}@keyframes facUnwriteFrame{0%,88%,100%{opacity:.7;transform:translateX(0)}90%{opacity:.18;transform:translateX(-3px)}93%{opacity:1;transform:translateX(3px)}}@keyframes facMoonFloat{0%,100%{opacity:.62;transform:translateY(3px) scale(.96)}50%{opacity:1;transform:translateY(-3px) scale(1)}}@keyframes facBloodFrame{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:1;transform:scale(1.02)}}@keyframes facForgeFrame{0%,100%{opacity:.62;transform:translateY(0)}48%{opacity:.88;transform:translateY(-1px)}50%{opacity:1;transform:translateY(2px)}}@keyframes facGrowFrame{0%,100%{opacity:.55;transform:scale(.93)}50%{opacity:1;transform:scale(1.02)}}@keyframes facShineFrame{0%,100%{opacity:.45;transform:skewX(-2deg)}50%{opacity:1;transform:skewX(2deg)}}@keyframes facCrystalFrame{0%,100%{opacity:.5;clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%)}50%{opacity:1;clip-path:polygon(50% 0,94% 18%,100% 76%,50% 100%,0 76%,6% 18%)}}@keyframes facEmberFrame{0%,100%{opacity:.55;transform:translateY(2px)}50%{opacity:1;transform:translateY(-3px)}}@keyframes facRuneFrame{0%,100%{opacity:.55;transform:rotate(0) scale(.95)}50%{opacity:1;transform:rotate(90deg) scale(1)}}@keyframes facAetherFrame{0%,100%{opacity:.5;transform:rotate(-3deg)}50%{opacity:1;transform:rotate(3deg)}}@keyframes facSeasonFrame{0%,100%{opacity:.55;transform:scale(.95) rotate(0)}50%{opacity:1;transform:scale(1) rotate(180deg)}}@keyframes facCircuitFrame{0%,92%,100%{opacity:.62;transform:translate(0)}94%{opacity:1;transform:translate(2px,-2px)}96%{opacity:.25;transform:translate(-2px,2px)}}@keyframes facWaterFrame{0%,100%{opacity:.5;transform:skewY(-2deg) translateY(2px)}50%{opacity:1;transform:skewY(2deg) translateY(-2px)}}@keyframes facTendrilFrame{0%,100%{opacity:.5;transform:scale(.94) rotate(-2deg);border-radius:35%}50%{opacity:1;transform:scale(1.02) rotate(2deg);border-radius:8%}}
@keyframes facMarkPulse{0%,100%{transform:translate(-50%,-50%) rotate(45deg) scale(.94);opacity:.72}50%{transform:translate(-50%,-50%) rotate(45deg) scale(1.04);opacity:1}}@keyframes facSigilPulse{0%,100%{transform:translate(-50%,-50%) rotate(43deg) scale(.92);opacity:.68}50%{transform:translate(-50%,-50%) rotate(47deg) scale(1.06);opacity:1}}@keyframes facPrismMark{0%,100%{transform:translate(-50%,-50%) rotate(45deg);filter:hue-rotate(0)}50%{transform:translate(-50%,-50%) rotate(225deg);filter:hue-rotate(80deg)}}@keyframes facGlitchMark{0%,88%,100%{transform:translate(-50%,-50%) rotate(45deg);opacity:.8}90%{transform:translate(-53%,-48%) rotate(43deg);opacity:.2}93%{transform:translate(-47%,-52%) rotate(47deg);opacity:1}}@keyframes facMoonMark{0%,100%{transform:translate(-50%,-48%) rotate(45deg) scale(.94);opacity:.7}50%{transform:translate(-50%,-54%) rotate(45deg) scale(1.04);opacity:1}}@keyframes facBloodPulse{0%,100%{transform:translate(-50%,-50%) rotate(45deg) scale(.9);opacity:.68}40%{transform:translate(-50%,-50%) rotate(45deg) scale(1.08);opacity:1}55%{transform:translate(-50%,-50%) rotate(45deg) scale(.98)}}@keyframes facMechanicalMark{0%,100%{transform:translate(-50%,-50%) rotate(45deg)}25%{transform:translate(-50%,-50%) rotate(90deg)}50%{transform:translate(-50%,-50%) rotate(135deg)}75%{transform:translate(-50%,-50%) rotate(180deg)}}@keyframes facLifeMark{0%,100%{transform:translate(-50%,-50%) rotate(45deg) scale(.92)}50%{transform:translate(-50%,-50%) rotate(45deg) scale(1.06)}}@keyframes facSilverMark{0%,100%{transform:translate(-50%,-50%) rotate(45deg);filter:brightness(.8)}50%{transform:translate(-50%,-50%) rotate(45deg);filter:brightness(1.5)}}@keyframes facFrostMark{0%,100%{transform:translate(-50%,-50%) rotate(45deg);filter:drop-shadow(0 0 2px currentColor)}50%{transform:translate(-50%,-50%) rotate(45deg) scale(1.04);filter:drop-shadow(0 0 8px currentColor)}}@keyframes facHammerMark{0%,100%{transform:translate(-50%,-50%) rotate(45deg) translateY(0)}48%{transform:translate(-50%,-50%) rotate(45deg) translateY(-2px)}50%{transform:translate(-50%,-50%) rotate(45deg) translateY(3px)}}@keyframes facRuneMark{0%,100%{transform:translate(-50%,-50%) rotate(45deg);opacity:.65}50%{transform:translate(-50%,-50%) rotate(405deg);opacity:1}}@keyframes facAetherMark{0%,100%{transform:translate(-50%,-50%) rotate(42deg) scale(.94)}50%{transform:translate(-50%,-50%) rotate(48deg) scale(1.05)}}@keyframes facSeasonMark{0%{transform:translate(-50%,-50%) rotate(45deg);filter:hue-rotate(0)}50%{transform:translate(-50%,-50%) rotate(225deg);filter:hue-rotate(90deg)}100%{transform:translate(-50%,-50%) rotate(405deg);filter:hue-rotate(0)}}@keyframes facWaterMark{0%,100%{transform:translate(-50%,-50%) rotate(43deg) skewY(-3deg)}50%{transform:translate(-50%,-50%) rotate(47deg) skewY(3deg)}}@keyframes facDragonMark{0%,100%{transform:translate(-50%,-50%) rotate(45deg) scale(.93);filter:brightness(.8)}50%{transform:translate(-50%,-50%) rotate(45deg) scale(1.08);filter:brightness(1.35)}}@keyframes facMemoryMark{0%,100%{transform:translate(-50%,-50%) rotate(42deg) scale(.92);border-radius:4%}50%{transform:translate(-50%,-50%) rotate(48deg) scale(1.06);border-radius:38%}}
@media(prefers-reduced-motion:reduce){.back[data-faction],.pile[data-faction],.back[data-faction]::before,.back[data-faction]::after{animation:none!important}}
.back[data-faction="catastrophe"],.pile[data-faction="catastrophe"]{--faccent:#ff754d;--fmark:"☄";--faction-back:radial-gradient(ellipse at 50% 108%,#ff6c32 0 8%,#6c170d 9% 20%,transparent 21%),repeating-linear-gradient(112deg,transparent 0 8px,#d445242f 9px 11px),linear-gradient(#2c0a07,#080303)}
:is(.back[data-faction]:not([data-faction="catastrophe"]),:root[data-road-faction-back] .back:not([data-faction]):not([data-card-back])){position:relative;overflow:hidden}
:is(.back[data-faction]:not([data-faction="catastrophe"]),:root[data-road-faction-back] .back:not([data-faction]):not([data-card-back]))::before{content:"";position:absolute;z-index:1;inset:5px;border:1px solid color-mix(in srgb,var(--faccent) 58%,transparent);border-radius:3px;clip-path:none;opacity:.72;pointer-events:none;animation:facInnerBreathe 5.8s ease-in-out infinite}
:is(.back[data-faction]:not([data-faction="catastrophe"]),:root[data-road-faction-back] .back:not([data-faction]):not([data-card-back]))::after{content:"";position:absolute;z-index:2;left:auto;right:auto;top:auto;bottom:auto;display:block;width:auto!important;height:auto;aspect-ratio:auto;transform:none;border:0;border-radius:0;background:none;box-shadow:none;color:var(--faccent);font:700 9px/1 var(--mono);letter-spacing:.08em;text-shadow:none;pointer-events:none}
/* Faction Mastery backs use the established faction palette and scene-specific motion. There is deliberately no shared middle seal. */
:is(.back[data-faction="lex"],.pile[data-faction="lex"],.tdeckpile[data-faction="lex"],:root[data-road-faction-back="lex"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="lex"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="lex"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--lex);--faction-back:radial-gradient(circle at 50% 50%,#295885 0 3%,transparent 4% 23%),repeating-linear-gradient(0deg,transparent 0 12px,#7fa8d416 13px 14px),linear-gradient(145deg,#173553,#050b14);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facLexSurface 7s ease-in-out infinite}
:is(.back[data-faction="leg"],.pile[data-faction="leg"],.tdeckpile[data-faction="leg"],:root[data-road-faction-back="leg"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="leg"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="leg"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--leg);--faction-back:linear-gradient(125deg,#341a37,#9f4e58 18%,#c68f3f 36%,#648354 52%,#315d72 68%,#55396f 84%,#171025);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facLegionShimmer 7.5s ease-in-out infinite}
:is(.back[data-faction="nys"],.pile[data-faction="nys"],.tdeckpile[data-faction="nys"],:root[data-road-faction-back="nys"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="nys"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="nys"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--nys);--faction-back:repeating-linear-gradient(0deg,#09030d 0 7px,#a855b81f 8px 9px,#020103 10px 15px),linear-gradient(135deg,#1b0921,#010102);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facUnwritingSurface 2.7s steps(1,end) infinite}
:is(.back[data-faction="nur"],.pile[data-faction="nur"],.tdeckpile[data-faction="nur"],:root[data-road-faction-back="nur"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="nur"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="nur"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--nur);--faction-back:radial-gradient(circle at 50% 17%,#e5fbff 0 9%,#5cb8c9 10% 12%,transparent 13%),linear-gradient(0deg,#0b3040 0 22%,#071b28 23% 66%,#102f42);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facNuramaNight 8s ease-in-out infinite}
:is(.back[data-faction="sang"],.pile[data-faction="sang"],.tdeckpile[data-faction="sang"],:root[data-road-faction-back="sang"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="sang"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="sang"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--sang);--faction-back:radial-gradient(ellipse at 50% 108%,#7a1714 0 18%,transparent 19%),linear-gradient(145deg,#4a0d0b,#130304 64%,#050102);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facBloodWell 6s ease-in-out infinite}
:is(.back[data-faction="iron"],.pile[data-faction="iron"],.tdeckpile[data-faction="iron"],:root[data-road-faction-back="iron"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="iron"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="iron"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--iron);--faction-back:linear-gradient(115deg,transparent 0 27%,#e8d5c828 28% 31%,transparent 32% 66%,#f5e3d52b 67% 70%,transparent 71%),repeating-linear-gradient(90deg,#17191b 0 10px,#613a36 11px 13px,#26292c 14px 25px);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facMetalSheen 5.5s ease-in-out infinite}
:is(.back[data-faction="vir"],.pile[data-faction="vir"],.tdeckpile[data-faction="vir"],:root[data-road-faction-back="vir"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="vir"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="vir"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--vir);--faction-back:linear-gradient(90deg,#020403 0 49.5%,#6fbf73 50% 50.5%,#173d22 51% 100%);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facViridaPulse 6.4s ease-in-out infinite}
:is(.back[data-faction="sil"],.pile[data-faction="sil"],.tdeckpile[data-faction="sil"],:root[data-road-faction-back="sil"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="sil"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="sil"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--sil);--faction-back:linear-gradient(112deg,#182027 0 22%,#8395a5 39%,#edf5fb 49%,#718696 58%,#10171d 78%);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facSilverGlow 6.2s ease-in-out infinite}
:is(.back[data-faction="frost"],.pile[data-faction="frost"],.tdeckpile[data-faction="frost"],:root[data-road-faction-back="frost"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="frost"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="frost"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--frost);--faction-back:linear-gradient(112deg,#10242c 0 16%,#b9f3ff 31%,#335d69 45%,#ecfdff 51%,#244f5d 67%,#09151a 83%);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facMirrorSweep 7s ease-in-out infinite}
:is(.back[data-faction="khaz"],.pile[data-faction="khaz"],.tdeckpile[data-faction="khaz"],:root[data-road-faction-back="khaz"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="khaz"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="khaz"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--khaz);--faction-back:radial-gradient(ellipse at 50% 108%,#5c2a11 0 20%,transparent 21%),linear-gradient(#2b160d,#080503 70%);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facKhazDusk 8s ease-in-out infinite}
:is(.back[data-faction="mf"],.pile[data-faction="mf"],.tdeckpile[data-faction="mf"],:root[data-road-faction-back="mf"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="mf"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="mf"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--mf);--faction-back:radial-gradient(circle at 50% 22%,#eeffdf 0 9%,#8fe0c0 10% 12%,transparent 13%),linear-gradient(0deg,#17493f 0 20%,#12364a 21% 62%,#07131c);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facMoonlitTide 9s ease-in-out infinite}
:is(.back[data-faction="vak"],.pile[data-faction="vak"],.tdeckpile[data-faction="vak"],:root[data-road-faction-back="vak"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="vak"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="vak"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--vak);--faction-back:linear-gradient(#354254,#111925 62%,#080d14);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facVakoirosCold 8s ease-in-out infinite}
:is(.back[data-faction="ael"],.pile[data-faction="ael"],.tdeckpile[data-faction="ael"],:root[data-road-faction-back="ael"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ael"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ael"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--ael);--faction-back:repeating-linear-gradient(82deg,#07180d 0 3px,#3f9b6235 4px 7px,#0c2c17 8px 12px),linear-gradient(#173f24,#050b07);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facGrassSway 5s ease-in-out infinite}
:is(.back[data-faction="wld"],.pile[data-faction="wld"],.tdeckpile[data-faction="wld"],:root[data-road-faction-back="wld"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="wld"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="wld"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--wld);--faction-back:linear-gradient(145deg,#28683c,#88a44d 28%,#d19a48 53%,#9a3e54 74%,#425a8b);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facSeasons 14s ease-in-out infinite}
:is(.back[data-faction="desc"],.pile[data-faction="desc"],.tdeckpile[data-faction="desc"],:root[data-road-faction-back="desc"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="desc"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="desc"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--desc);--faction-back:radial-gradient(circle at 30% 24%,#8e6ac733 0 2%,transparent 3%),repeating-linear-gradient(135deg,#020104 0 13px,#411b5d 14px 16px,#09030f 17px 29px);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facDescendedPulse 5s steps(6,end) infinite}
:is(.back[data-faction="jal"],.pile[data-faction="jal"],.tdeckpile[data-faction="jal"],:root[data-road-faction-back="jal"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="jal"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="jal"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--jal);--faction-back:radial-gradient(circle at 50% 12%,#fff7b8 0 8%,#f0c94a 9% 13%,transparent 14%),linear-gradient(#775e14 0,#1d4c57 31%,#092630 74%,#041116);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facJalayanDawn 7s ease-in-out infinite}
:is(.back[data-faction="ash"],.pile[data-faction="ash"],.tdeckpile[data-faction="ash"],:root[data-road-faction-back="ash"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--ash);--faction-back:radial-gradient(ellipse at 50% 110%,var(--ash1,#c35b42) 0 17%,transparent 18%),repeating-conic-gradient(from 45deg,var(--ash2,#210806) 0 13deg,var(--ash1,#c35b42) 14deg 17deg,var(--ash2,#210806) 18deg 31deg);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facAshenBreath 5.8s ease-in-out infinite}
:is(.back[data-faction="veh"],.pile[data-faction="veh"],.tdeckpile[data-faction="veh"],:root[data-road-faction-back="veh"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="veh"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="veh"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:#efd36a;--faction-back:repeating-radial-gradient(ellipse at 50% 50%,#efd36a00 0 9px,#d4ad3635 10px 11px,#020201 12px 19px),radial-gradient(ellipse at center,#725812 0 5%,#111005 29%,#010101 70%);background:var(--faction-back)!important;background-size:170% 170%!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 9px color-mix(in srgb,var(--faccent) 30%,transparent)!important;animation:facVehemenceCenter 6s ease-in-out infinite}
:is(.back[data-faction="lex"],:root[data-road-faction-back="lex"] .back:not([data-faction]):not([data-card-back]))::after{inset:19%;border:1px solid var(--lex);border-radius:50%;background:repeating-conic-gradient(from 0deg,#7fa8d4 0 2deg,transparent 3deg 15deg);box-shadow:0 0 11px #7fa8d48c,inset 0 0 10px #7fa8d455;mask:radial-gradient(circle,transparent 0 31%,#000 32% 42%,transparent 43% 57%,#000 58% 63%,transparent 64%);animation:facRunesSpin 8s linear infinite}
:is(.back[data-faction="leg"],:root[data-road-faction-back="leg"] .back:not([data-faction]):not([data-card-back]))::after{inset:-15% -55%;background:linear-gradient(105deg,transparent 42%,#fff7c766 49%,transparent 56%);animation:facLegionBand 5.5s ease-in-out infinite}
:is(.back[data-faction="nys"],:root[data-road-faction-back="nys"] .back:not([data-faction]):not([data-card-back]))::before{inset:4px;border-color:#a855b8;animation:facUnwriteFrameHard 1.8s steps(1,end) infinite}:is(.back[data-faction="nys"],:root[data-road-faction-back="nys"] .back:not([data-faction]):not([data-card-back]))::after{inset:8%;background:repeating-linear-gradient(0deg,transparent 0 8px,#e77cff35 9px 10px);mix-blend-mode:screen;animation:facGlitchBlocks 1.35s steps(1,end) infinite}
:is(.back[data-faction="nur"],:root[data-road-faction-back="nur"] .back:not([data-faction]):not([data-card-back]))::after{left:-58%;bottom:7%;width:48%!important;height:15%;border-radius:45% 20% 12% 12%;background:radial-gradient(circle at 18% 92%,#02050a 0 9%,#5cb8c9 10% 15%,transparent 16%),radial-gradient(circle at 78% 92%,#02050a 0 9%,#5cb8c9 10% 15%,transparent 16%),linear-gradient(90deg,#0c1724 0 21%,#5cb8c9 22% 25%,#0a111b 26% 100%);box-shadow:16px -8px 0 -7px #d8fbff,27px -8px 0 -7px #d8fbff;animation:facTrainAcross 6.2s linear infinite;animation-delay:calc(var(--card-seq,0)*.32s)}
:is(.back[data-faction="sang"],:root[data-road-faction-back="sang"] .back:not([data-faction]):not([data-card-back]))::after{inset:-35% 5% 0;background:radial-gradient(ellipse at 14% 0,#f35a4f 0 4%,transparent 5%),radial-gradient(ellipse at 49% 0,#c0392b 0 5%,transparent 6%),radial-gradient(ellipse at 82% 0,#ff8174 0 3%,transparent 4%);background-size:29px 54px,37px 67px,23px 47px;animation:facBloodDrops 3.8s linear infinite}
:is(.back[data-faction="iron"],:root[data-road-faction-back="iron"] .back:not([data-faction]):not([data-card-back]))::after{left:3%;right:3%;bottom:-8%;height:43%;background:radial-gradient(ellipse at 18% 100%,#ffdf84 0 8%,#d96335 9% 19%,transparent 20%),radial-gradient(ellipse at 50% 100%,#fff0a3 0 8%,#a83324 9% 22%,transparent 23%),radial-gradient(ellipse at 82% 100%,#ffcf70 0 7%,#c64c2f 8% 20%,transparent 21%);filter:blur(.2px);animation:facForgeFlame 1.7s ease-in-out infinite alternate}
:is(.back[data-faction="vir"],:root[data-road-faction-back="vir"] .back:not([data-faction]):not([data-card-back]))::after{inset:5%;background:radial-gradient(circle at 25% 50%,#020402 0 9%,#18251a 10% 24%,transparent 25%),radial-gradient(circle at 75% 50%,#d7ffd2 0 4%,#6fbf73 5% 21%,transparent 22%);filter:drop-shadow(0 0 8px #6fbf73);animation:facTwinGlow 4.8s ease-in-out infinite}
:is(.back[data-faction="sil"],:root[data-road-faction-back="sil"] .back:not([data-faction]):not([data-card-back]))::after{inset:-25% -70%;background:linear-gradient(110deg,transparent 41%,#fff 49%,#c8d6e4 52%,transparent 60%);mix-blend-mode:screen;animation:facSilverPass 5.5s ease-in-out infinite}
:is(.back[data-faction="frost"],:root[data-road-faction-back="frost"] .back:not([data-faction]):not([data-card-back]))::after{inset:-18% -65%;background:linear-gradient(112deg,transparent 39%,#fff 48%,#a9f0ff99 51%,transparent 60%);mix-blend-mode:screen;animation:facMirrorPass 4.8s ease-in-out infinite}
:is(.back[data-faction="khaz"],:root[data-road-faction-back="khaz"] .back:not([data-faction]):not([data-card-back]))::after{left:11%;right:11%;bottom:6%;height:76%;transform-origin:50% 100%;background:linear-gradient(90deg,transparent 46%,#4d2714 47% 54%,transparent 55%),linear-gradient(34deg,transparent 46%,#4d2714 47% 52%,transparent 53%),linear-gradient(-34deg,transparent 46%,#4d2714 47% 52%,transparent 53%),radial-gradient(ellipse at 23% 31%,#d08a4a88 0 13%,transparent 14%),radial-gradient(ellipse at 76% 29%,#b96e3988 0 14%,transparent 15%),radial-gradient(ellipse at 50% 18%,#e0a65f8c 0 18%,transparent 19%);filter:drop-shadow(0 0 7px #d08a4a77);animation:facTreeSway 4.5s ease-in-out infinite alternate}
:is(.back[data-faction="mf"],:root[data-road-faction-back="mf"] .back:not([data-faction]):not([data-card-back]))::after{left:22%;right:22%;top:8%;height:31%;border-radius:50%;box-shadow:0 0 23px #8fe0c0,0 0 42px #45cdb077;background:radial-gradient(circle,#efffe5 0 34%,#8fe0c0 35% 44%,transparent 45%);animation:facMoonGlow 6s ease-in-out infinite}
:is(.back[data-faction="vak"],:root[data-road-faction-back="vak"] .back:not([data-faction]):not([data-card-back]))::after{inset:-30% 0 0;background:radial-gradient(circle,#fff 0 2%,transparent 3%),radial-gradient(circle,#dbe8f3 0 2%,transparent 3%),radial-gradient(circle,#fff 0 1.5%,transparent 2.5%);background-size:21px 31px,33px 44px,15px 23px;background-position:0 0,8px 11px,4px 19px;animation:facSnowfall 3.8s linear infinite}
:is(.back[data-faction="ael"],:root[data-road-faction-back="ael"] .back:not([data-faction]):not([data-card-back]))::after{inset:16% 9%;background:radial-gradient(ellipse at 28% 46%,#d9fff0 0 3%,#07120b 4% 9%,transparent 10%),radial-gradient(ellipse at 72% 46%,#d9fff0 0 3%,#07120b 4% 9%,transparent 10%);filter:drop-shadow(0 0 7px #9cffc4);animation:facObscuredEyes 5s ease-in-out infinite}
:is(.back[data-faction="wld"],:root[data-road-faction-back="wld"] .back:not([data-faction]):not([data-card-back]))::after{inset:0;background:radial-gradient(circle at 18% 24%,#fff3a7 0 2%,transparent 3%),radial-gradient(circle at 77% 68%,#ffe5ed 0 2%,transparent 3%);opacity:.55;animation:facSeasonMotes 8s ease-in-out infinite}
:is(.back[data-faction="desc"],:root[data-road-faction-back="desc"] .back:not([data-faction]):not([data-card-back]))::after{content:"ᚱ  ᚾ  ᛉ  ᚲ  ᛞ  ᚱ  ᚾ  ᛉ";inset:9% 11%;display:flex;align-content:space-around;justify-content:space-around;flex-wrap:wrap;color:#b78af0;font:700 10px/1.8 var(--serif);text-shadow:0 0 7px #8e6ac7;opacity:.76;animation:facRunicGlitch 2.6s steps(1,end) infinite}
:is(.back[data-faction="jal"],:root[data-road-faction-back="jal"] .back:not([data-faction]):not([data-card-back]))::after{inset:16% 4% -20%;background:radial-gradient(ellipse at 16% 0,#fff19b 0 3%,transparent 4%),radial-gradient(ellipse at 48% 0,#f0c94a 0 4%,transparent 5%),radial-gradient(ellipse at 82% 0,#fff6bc 0 3%,transparent 4%);background-size:31px 58px,43px 74px,27px 49px;filter:drop-shadow(0 0 5px #f0c94a);animation:facSunDrops 5s linear infinite}
:is(.back[data-faction="ash"],:root[data-road-faction-back="ash"] .back:not([data-faction]):not([data-card-back]))::after{left:8%;right:8%;bottom:-11%;height:45%;background:radial-gradient(ellipse at 18% 100%,var(--ash1,#c35b42) 0 8%,transparent 20%),radial-gradient(ellipse at 51% 100%,#fff1c4 0 5%,var(--ash1,#c35b42) 9% 19%,transparent 26%),radial-gradient(ellipse at 82% 100%,var(--ash1,#c35b42) 0 7%,transparent 21%);filter:drop-shadow(0 0 7px var(--ash1,#c35b42));animation:facAshFlame 2s ease-in-out infinite alternate}
:is(.back[data-faction="veh"],:root[data-road-faction-back="veh"] .back:not([data-faction]):not([data-card-back]))::after{inset:13%;border-radius:46%;background:repeating-radial-gradient(ellipse at center,transparent 0 7px,#efd36a55 8px 9px,#020201 10px 15px);box-shadow:inset 0 0 22px #000,0 0 16px #d6ac3f55;animation:facCenteredMemory 4.6s ease-in-out infinite}
:is(.back[data-faction="ash"][data-ash-tone="black"],.pile[data-faction="ash"][data-ash-tone="black"],.tdeckpile[data-faction="ash"][data-ash-tone="black"],:root[data-road-faction-back="ash"][data-road-ash-tone="black"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="black"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="black"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#8a6bd6;--ash2:#09070e;--faccent:#8a6bd6}
:is(.back[data-faction="ash"][data-ash-tone="red"],.pile[data-faction="ash"][data-ash-tone="red"],.tdeckpile[data-faction="ash"][data-ash-tone="red"],:root[data-road-faction-back="ash"][data-road-ash-tone="red"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="red"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="red"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#ff5f42;--ash2:#35100a;--faccent:#ff5f42}
:is(.back[data-faction="ash"][data-ash-tone="blue"],.pile[data-faction="ash"][data-ash-tone="blue"],.tdeckpile[data-faction="ash"][data-ash-tone="blue"],:root[data-road-faction-back="ash"][data-road-ash-tone="blue"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="blue"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="blue"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#4fa8ff;--ash2:#071a31;--faccent:#4fa8ff}
:is(.back[data-faction="ash"][data-ash-tone="white"],.pile[data-faction="ash"][data-ash-tone="white"],.tdeckpile[data-faction="ash"][data-ash-tone="white"],:root[data-road-faction-back="ash"][data-road-ash-tone="white"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="white"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="white"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#f4e4a8;--ash2:#554a2e;--faccent:#f4e4a8}
:is(.back[data-faction="ash"][data-ash-tone="green"],.pile[data-faction="ash"][data-ash-tone="green"],.tdeckpile[data-faction="ash"][data-ash-tone="green"],:root[data-road-faction-back="ash"][data-road-ash-tone="green"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="green"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="green"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#5fd88a;--ash2:#092a18;--faccent:#5fd88a}
:is(.back[data-faction="ash"][data-ash-tone="farsoul"],.pile[data-faction="ash"][data-ash-tone="farsoul"],.tdeckpile[data-faction="ash"][data-ash-tone="farsoul"],:root[data-road-faction-back="ash"][data-road-ash-tone="farsoul"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="farsoul"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="farsoul"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#80ccff;--ash2:#12052d;--faccent:#80ccff}
:is(.back[data-faction="ash"][data-ash-tone="vesperia"],.pile[data-faction="ash"][data-ash-tone="vesperia"],.tdeckpile[data-faction="ash"][data-ash-tone="vesperia"],:root[data-road-faction-back="ash"][data-road-ash-tone="vesperia"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="vesperia"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="vesperia"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#a579d0;--ash2:#050309;--faccent:#a579d0}
:is(.back[data-faction="ash"][data-ash-tone="kyriax"],.pile[data-faction="ash"][data-ash-tone="kyriax"],.tdeckpile[data-faction="ash"][data-ash-tone="kyriax"],:root[data-road-faction-back="ash"][data-road-ash-tone="kyriax"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="kyriax"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="kyriax"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#7f9398;--ash2:#090b0c;--faccent:#7f9398}
:is(.back[data-faction="ash"][data-ash-tone="ignarath"],.pile[data-faction="ash"][data-ash-tone="ignarath"],.tdeckpile[data-faction="ash"][data-ash-tone="ignarath"],:root[data-road-faction-back="ash"][data-road-ash-tone="ignarath"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="ignarath"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="ignarath"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#ff3d24;--ash2:#400500;--faccent:#ff3d24}
:is(.back[data-faction="ash"][data-ash-tone="voshul"],.pile[data-faction="ash"][data-ash-tone="voshul"],.tdeckpile[data-faction="ash"][data-ash-tone="voshul"],:root[data-road-faction-back="ash"][data-road-ash-tone="voshul"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="voshul"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="voshul"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#c66b42;--ash2:#28100a;--faccent:#c66b42}
:is(.back[data-faction="ash"][data-ash-tone="isoval"],.pile[data-faction="ash"][data-ash-tone="isoval"],.tdeckpile[data-faction="ash"][data-ash-tone="isoval"],:root[data-road-faction-back="ash"][data-road-ash-tone="isoval"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="isoval"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="isoval"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#55b9ff;--ash2:#07152c;--faccent:#55b9ff}
:is(.back[data-faction="ash"][data-ash-tone="rubbicante"],.pile[data-faction="ash"][data-ash-tone="rubbicante"],.tdeckpile[data-faction="ash"][data-ash-tone="rubbicante"],:root[data-road-faction-back="ash"][data-road-ash-tone="rubbicante"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="rubbicante"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="rubbicante"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#9d6de0;--ash2:#120922;--faccent:#9d6de0}
:is(.back[data-faction="ash"][data-ash-tone="saithor"],.pile[data-faction="ash"][data-ash-tone="saithor"],.tdeckpile[data-faction="ash"][data-ash-tone="saithor"],:root[data-road-faction-back="ash"][data-road-ash-tone="saithor"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="saithor"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="saithor"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#7fe28e;--ash2:#33100e;--faccent:#7fe28e}
:is(.back[data-faction="ash"][data-ash-tone="suythr"],.pile[data-faction="ash"][data-ash-tone="suythr"],.tdeckpile[data-faction="ash"][data-ash-tone="suythr"],:root[data-road-faction-back="ash"][data-road-ash-tone="suythr"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="suythr"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="suythr"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#7bd59a;--ash2:#092418;--faccent:#7bd59a}
:is(.back[data-faction="ash"][data-ash-tone="veradis"],.pile[data-faction="ash"][data-ash-tone="veradis"],.tdeckpile[data-faction="ash"][data-ash-tone="veradis"],:root[data-road-faction-back="ash"][data-road-ash-tone="veradis"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="veradis"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="veradis"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#fff0ae;--ash2:#473b20;--faccent:#fff0ae}
:is(.back[data-faction="ash"][data-ash-tone="frostkeeper"],.pile[data-faction="ash"][data-ash-tone="frostkeeper"],.tdeckpile[data-faction="ash"][data-ash-tone="frostkeeper"],:root[data-road-faction-back="ash"][data-road-ash-tone="frostkeeper"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="frostkeeper"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="frostkeeper"] .tdeckpile:not([data-faction]):not([data-card-back])){--ash1:#c4ecff;--ash2:#0a2032;--faccent:#c4ecff}
@keyframes facInnerBreathe{0%,100%{opacity:.48}50%{opacity:.92}}@keyframes facLexSurface{0%,100%{background-position:20% 20%}50%{background-position:78% 72%}}@keyframes facRunesSpin{to{transform:rotate(360deg)}}@keyframes facLegionShimmer{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes facLegionBand{0%,100%{transform:translateX(-38%);opacity:.12}50%{transform:translateX(38%);opacity:.55}}@keyframes facUnwritingSurface{0%,84%,100%{background-position:0 0}86%{background-position:7px -4px}89%{background-position:-5px 8px}92%{background-position:3px 2px}}@keyframes facUnwriteFrameHard{0%,80%,100%{transform:none;opacity:.7}82%{transform:translate(4px,-2px);opacity:.16}85%{transform:translate(-5px,2px);opacity:1}88%{transform:skewX(8deg)}}@keyframes facGlitchBlocks{0%,78%,100%{clip-path:inset(0)}80%{clip-path:polygon(0 8%,100% 8%,100% 25%,0 25%,0 61%,100% 61%,100% 79%,0 79%);transform:translateX(5px)}84%{clip-path:polygon(0 31%,100% 31%,100% 46%,0 46%,0 82%,100% 82%,100% 91%,0 91%);transform:translateX(-6px)}}@keyframes facNuramaNight{0%,100%{background-position:50% 0}50%{background-position:50% 16%}}@keyframes facTrainAcross{0%{left:-58%;opacity:0}5%{opacity:1}92%{opacity:1}100%{left:112%;opacity:0}}@keyframes facBloodWell{0%,100%{background-position:50% 0}50%{background-position:50% 25%}}@keyframes facBloodDrops{from{background-position:0 -80px,7px -65px,3px -54px}to{background-position:0 120px,7px 135px,3px 126px}}@keyframes facMetalSheen{0%,100%{background-position:0 0}50%{background-position:80px 0}}@keyframes facForgeFlame{from{transform:scaleY(.78) skewX(-3deg);opacity:.66}to{transform:scaleY(1.1) skewX(4deg);opacity:1}}@keyframes facViridaPulse{0%,100%{filter:brightness(.72)}50%{filter:brightness(1.24)}}@keyframes facTwinGlow{0%,100%{opacity:.58;transform:scale(.95)}50%{opacity:1;transform:scale(1.04)}}@keyframes facSilverGlow{0%,100%{background-position:0 50%;filter:brightness(.75)}50%{background-position:100% 50%;filter:brightness(1.35)}}@keyframes facSilverPass{0%,100%{transform:translateX(-42%);opacity:.08}50%{transform:translateX(42%);opacity:.78}}@keyframes facMirrorSweep{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes facMirrorPass{0%{transform:translateX(-48%);opacity:.12}55%{opacity:.9}100%{transform:translateX(48%);opacity:.12}}@keyframes facKhazDusk{0%,100%{filter:brightness(.8)}50%{filter:brightness(1.18)}}@keyframes facTreeSway{from{transform:rotate(-2.6deg)}to{transform:rotate(2.6deg)}}@keyframes facMoonlitTide{0%,100%{background-position:50% 0}50%{background-position:50% 24%}}@keyframes facMoonGlow{0%,100%{opacity:.58;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}@keyframes facVakoirosCold{0%,100%{filter:brightness(.82)}50%{filter:brightness(1.08)}}@keyframes facSnowfall{from{background-position:0 -80px,8px -120px,4px -56px}to{background-position:0 120px,8px 100px,4px 144px}}@keyframes facGrassSway{0%,100%{background-position:0 0}50%{background-position:18px 0}}@keyframes facObscuredEyes{0%,45%,100%{opacity:.84;transform:scaleY(1)}48%,52%{opacity:.15;transform:scaleY(.12)}}@keyframes facSeasons{0%{filter:hue-rotate(-15deg) saturate(.9)}25%{filter:hue-rotate(5deg) saturate(1.18)}50%{filter:hue-rotate(42deg) saturate(1.05)}75%{filter:hue-rotate(105deg) saturate(.78)}100%{filter:hue-rotate(345deg) saturate(.9)}}@keyframes facSeasonMotes{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(9%);opacity:.8}}@keyframes facDescendedPulse{0%,100%{background-position:0 0}48%{background-position:20px -9px}52%{background-position:-13px 11px}}@keyframes facRunicGlitch{0%,84%,100%{transform:none;opacity:.68}86%{transform:translateX(4px);opacity:1}89%{transform:translateX(-3px);opacity:.22}}@keyframes facJalayanDawn{0%,100%{background-position:50% 0}50%{background-position:50% 18%}}@keyframes facSunDrops{from{background-position:0 -80px,8px -110px,4px -62px}to{background-position:0 120px,8px 110px,4px 138px}}@keyframes facAshenBreath{0%,100%{background-position:50% 100%}50%{background-position:50% 20%}}@keyframes facAshFlame{from{transform:scaleY(.74);opacity:.55}to{transform:scaleY(1.1);opacity:1}}@keyframes facVehemenceCenter{0%,100%{background-position:50% 50%;filter:brightness(.8)}50%{background-position:52% 48%;filter:brightness(1.18)}}@keyframes facCenteredMemory{0%,100%{transform:scale(.88) rotate(-2deg);border-radius:46%}50%{transform:scale(1.05) rotate(2deg);border-radius:29%}}
@media(prefers-reduced-motion:reduce){:is(.back[data-faction]:not([data-faction="catastrophe"]),:root[data-road-faction-back] .back:not([data-faction]):not([data-card-back])),:is(.back[data-faction]:not([data-faction="catastrophe"]),:root[data-road-faction-back] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction]:not([data-faction="catastrophe"]),:root[data-road-faction-back] .back:not([data-faction]):not([data-card-back]))::after{animation:none!important}}


.road-draw-esoteric{position:relative;display:block;width:42%;aspect-ratio:1;border:1px solid currentColor;transform:rotate(45deg);box-shadow:inset 0 0 16px currentColor,0 0 17px currentColor}.road-draw-esoteric::before{content:"";position:absolute;inset:19%;border:1px solid currentColor;border-radius:50%;box-shadow:0 0 12px currentColor}.road-draw-esoteric::after{content:"";position:absolute;left:50%;top:-31%;width:1px;height:162%;background:currentColor;box-shadow:-6px 0 0 -0.4px currentColor,6px 0 0 -0.4px currentColor}.road-draw-esoteric i{position:absolute;inset:43%;border-radius:50%;background:currentColor;box-shadow:0 0 15px 4px currentColor}.road-draw-esoteric i::before,.road-draw-esoteric i::after{content:"";position:absolute;left:50%;top:50%;width:360%;height:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}.road-draw-esoteric i::after{transform:translate(-50%,-50%) rotate(-45deg)}

.road-draw-kiosk{display:grid;grid-template-columns:minmax(300px,390px) minmax(0,1fr);gap:18px;align-items:start}.road-draw-machine{position:sticky;top:0;overflow:hidden;min-height:470px;padding:24px;border:1px solid #6f592e;background:radial-gradient(circle at 50% 18%,#b68b2a25,transparent 28%),linear-gradient(155deg,#151006,#080b11 58%,#030407);box-shadow:inset 0 0 60px #000,0 20px 55px #0008;text-align:center}.road-draw-machine::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(118deg,transparent 0 48px,#d3aa4a09 49px,transparent 50px 98px)}.road-draw-kicker{position:relative;color:#c8a555;font:900 7px var(--mono);letter-spacing:.22em;text-transform:uppercase}.road-draw-machine h3{position:relative;margin:7px 0 6px;color:#f0e5ce;font:400 31px var(--serif)}.road-draw-machine>p{position:relative;margin:0 auto;max-width:310px;color:#8f98a6;font:10px/1.55 var(--mono)}.road-draw-mini-seal{position:relative;display:grid;place-items:center;width:112px;height:112px;margin:25px auto;border:1px solid #af893d;border-radius:50%;background:radial-gradient(circle,#33250c,#080a0e 62%);box-shadow:inset 0 0 30px #d4a4381f,0 0 42px #c18d2b25;color:#f0cc6d;font:700 25px var(--serif);animation:roadDrawIdle 5s linear infinite}.road-draw-mini-seal::before,.road-draw-mini-seal::after{content:"";position:absolute;inset:12px;border:1px solid #7e6736;transform:rotate(45deg)}.road-draw-mini-seal::after{inset:29px;animation:roadDrawIdle 3.5s linear infinite reverse}.road-draw-button{position:relative;width:100%;padding:15px 18px;border:1px solid #c79d49;background:linear-gradient(110deg,#2a1e08,#0d0f14 48%,#2a1e08);box-shadow:inset 0 0 20px #e1b64d12,0 0 22px #bd8b2922;color:#ffe09a;font:900 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}.road-draw-button:hover{border-color:#f4cf77;box-shadow:inset 0 0 24px #e5bd5730,0 0 35px #d39e3544;transform:translateY(-1px)}.road-draw-button small{display:block;margin-top:5px;color:#a69879;font:700 7px var(--mono);letter-spacing:.08em}.road-draw-odds{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:13px}.road-draw-odds span{padding:7px 3px;border:1px solid #303746;background:#080b11;color:#84909e;font:800 6px var(--mono);letter-spacing:.08em;text-transform:uppercase}.road-draw-odds .rare{color:#70c8e8}.road-draw-odds .epic{color:#c083f2}.road-draw-odds .legendary{color:#f1c35c}.road-draw-mercy{position:relative;margin-top:13px!important;color:#81765f!important;font-size:8px!important}.road-draw-cabinet{min-width:0}.road-draw-cabinet-head{display:flex;justify-content:space-between;gap:14px;align-items:end;margin-bottom:12px;padding:4px 2px 12px;border-bottom:1px solid #323947}.road-draw-cabinet-head h3{margin:0;color:#ebe3d4;font:400 25px var(--serif)}.road-draw-cabinet-head p{margin:5px 0 0;color:#818b99;font:9px var(--mono)}.road-draw-totals{display:flex;gap:7px}.road-draw-totals span{padding:7px 9px;border:1px solid #4a402b;background:#0d0d0c;color:#c6a966;font:800 7px var(--mono);letter-spacing:.09em;text-transform:uppercase}.road-draw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.curio-card{min-height:142px;padding:11px;border:1px solid #303844;background:#080c12;color:#c9d0da}.curio-card[data-rarity="rare"]{border-color:#31596d}.curio-card[data-rarity="epic"]{border-color:#5b3b76}.curio-card[data-rarity="legendary"]{border-color:#8d6b2d;background:radial-gradient(circle at 100% 0,#d9a94216,transparent 42%),#0c0b08}.curio-card.locked{opacity:.36;filter:grayscale(1)}.curio-glyph{display:grid;place-items:center;width:38px;height:38px;margin-bottom:10px;border:1px solid currentColor;transform:rotate(45deg);color:#778391}.curio-glyph i{transform:rotate(-45deg);font:700 13px var(--serif);font-style:normal}.curio-card[data-rarity="rare"] .curio-glyph{color:#68c4e4}.curio-card[data-rarity="epic"] .curio-glyph{color:#bb79e9}.curio-card[data-rarity="legendary"] .curio-glyph{color:#edc25d;box-shadow:0 0 17px #d69b2f35}.curio-card em,.curio-card b,.curio-card small{display:block}.curio-card em{color:#697584;font:800 6px var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase}.curio-card b{margin-top:4px;color:#e8e1d5;font:700 12px var(--serif)}.curio-card small{margin-top:5px;color:#7f8997;font:8px/1.4 var(--mono)}.curio-copies{margin-top:8px;color:#bca15e;font:800 7px var(--mono);letter-spacing:.08em}.road-draw-history{margin-top:15px;padding:12px;border:1px solid #333b47;background:#070a0f}.road-draw-history>span{color:#8f7949;font:800 6px var(--mono);letter-spacing:.16em;text-transform:uppercase}.road-draw-history-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.road-draw-history-row i{padding:5px 7px;border:1px solid #343c49;color:#9ca6b3;font:7px var(--mono);font-style:normal}.road-draw-history-row i[data-rarity="legendary"]{border-color:#967335;color:#e7c261}
.road-draw-cinematic{--draw-color:#8c98a6;--draw-core:#dce2e9;position:fixed;inset:0;z-index:100300;display:none;place-items:center;overflow:hidden;background:#020306;color:#fff}.road-draw-cinematic.on{display:grid}.road-draw-cinematic[data-rarity="rare"]{--draw-color:#49bfe9;--draw-core:#dff8ff}.road-draw-cinematic[data-rarity="epic"]{--draw-color:#aa5ce3;--draw-core:#f2d9ff}.road-draw-cinematic[data-rarity="legendary"]{--draw-color:#e4aa35;--draw-core:#fff2b0}.road-draw-cinematic::before{content:"";position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg,transparent 0 7deg,color-mix(in srgb,var(--draw-color) 10%,transparent) 8deg,transparent 9deg 18deg);animation:roadDrawSky 18s linear infinite}.road-draw-stars{position:absolute;inset:0;background:radial-gradient(circle at 12% 19%,var(--draw-core) 0 1px,transparent 2px),radial-gradient(circle at 78% 27%,var(--draw-core) 0 1px,transparent 2px),radial-gradient(circle at 63% 8%,var(--draw-color) 0 1px,transparent 2px),radial-gradient(circle at 33% 68%,var(--draw-color) 0 1px,transparent 2px);background-size:230px 190px,310px 260px,190px 280px,370px 330px;opacity:.42;animation:roadDrawStars 8s linear infinite}.road-draw-road{position:absolute;left:50%;bottom:-44vh;width:min(76vw,1050px);height:125vh;transform:translateX(-50%) perspective(620px) rotateX(63deg);transform-origin:bottom;clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);background:linear-gradient(90deg,transparent 0 3%,var(--draw-color) 3.2%,transparent 3.5% 96.5%,var(--draw-color) 96.8%,transparent 97%),repeating-linear-gradient(177deg,color-mix(in srgb,var(--draw-color) 16%,transparent) 0 2px,transparent 2px 64px),linear-gradient(#11151d44,#020306);filter:drop-shadow(0 0 55px color-mix(in srgb,var(--draw-color) 50%,transparent));animation:roadDrawRush 1.1s linear infinite}.road-draw-seal{position:relative;z-index:2;display:grid;place-items:center;width:min(32vw,280px);height:min(32vw,280px);border:2px solid var(--draw-color);border-radius:50%;background:radial-gradient(circle,var(--draw-core) 0 2%,color-mix(in srgb,var(--draw-color) 35%,#050609) 3% 24%,#050609 58%,transparent 59%);box-shadow:inset 0 0 65px var(--draw-color),0 0 42px var(--draw-color),0 0 130px color-mix(in srgb,var(--draw-color) 70%,transparent);color:var(--draw-core);font:700 48px var(--serif);letter-spacing:.12em;animation:roadDrawSeal 1.6s cubic-bezier(.2,.75,.25,1) both}.road-draw-seal::before,.road-draw-seal::after{content:"";position:absolute;inset:12%;border:1px solid var(--draw-color);transform:rotate(45deg);animation:roadDrawSigil 2.1s linear infinite}.road-draw-seal::after{inset:28%;animation-direction:reverse;animation-duration:1.3s}.road-draw-invocation{position:absolute;z-index:3;left:10%;right:10%;bottom:9%;margin:0;text-align:center;color:#aeb8c6;font:800 8px var(--mono);letter-spacing:.25em;text-transform:uppercase;animation:roadDrawInvocation 1s ease-in-out infinite alternate}.road-draw-result{position:absolute;z-index:5;left:50%;top:50%;width:min(520px,88vw);padding:28px;transform:translate(-50%,-44%) scale(.6);border:1px solid var(--draw-color);background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--draw-color) 20%,transparent),transparent 42%),#07090eea;box-shadow:0 0 0 1px #000,0 0 55px var(--draw-color),0 28px 90px #000;opacity:0;text-align:center}.road-draw-result::before{content:"";position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--draw-color) 40%,transparent);pointer-events:none}.road-draw-result-glyph{display:grid;place-items:center;width:88px;height:88px;margin:0 auto 22px;border:2px solid var(--draw-color);transform:rotate(45deg);background:#07090e;color:var(--draw-core);font:700 30px var(--serif);box-shadow:0 0 30px color-mix(in srgb,var(--draw-color) 60%,transparent)}.road-draw-result-glyph span{transform:rotate(-45deg)}.road-draw-result em{color:var(--draw-color);font:900 8px var(--mono);font-style:normal;letter-spacing:.24em;text-transform:uppercase}.road-draw-result h2{margin:8px 0 6px;color:var(--draw-core);font:400 34px var(--serif);text-shadow:0 0 20px var(--draw-color)}.road-draw-result p{margin:0 auto;max-width:390px;color:#a8b1bf;font:11px/1.55 var(--mono)}.road-draw-result small{display:block;margin-top:11px;color:#857c69;font:8px var(--mono)}.road-draw-result button{margin-top:20px;padding:11px 14px;border:1px solid var(--draw-color);background:#0a0d13;color:var(--draw-core);font:900 8px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.road-draw-cinematic.reveal .road-draw-seal{animation:roadDrawSealBreak .65s ease-in forwards}.road-draw-cinematic.reveal .road-draw-result{animation:roadDrawPrize .7s .28s cubic-bezier(.15,.8,.2,1) forwards}.road-draw-cinematic[data-rarity="legendary"].reveal{animation:roadDrawLegendary 1.5s ease-out}.road-draw-cinematic:not(.reveal) .road-draw-result button{pointer-events:none}.road-draw-skip{position:absolute;right:18px;top:16px;z-index:8;padding:7px 9px;border:1px solid #3c4654;background:#05070a99;color:#8f99a8;font:700 7px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.road-draw-balance{position:relative;display:flex;align-items:baseline;justify-content:center;gap:8px;margin:16px 0 10px}.road-draw-balance b{color:#f5d172;font:400 38px var(--serif);text-shadow:0 0 18px #d7a93955}.road-draw-balance span{color:#998765;font:800 7px var(--mono);letter-spacing:.15em;text-transform:uppercase}.road-draw-controls{position:relative;display:grid;grid-template-columns:86px 1fr;gap:7px}.road-draw-controls select{padding:0 9px;border:1px solid #695936;background:#080b10;color:#d9c486;font:800 8px var(--mono);letter-spacing:.08em;text-transform:uppercase}.road-draw-button:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(1)}.road-draw-earn{position:relative;margin-top:8px!important;color:#9d906f!important}.road-draw-result{width:min(1020px,92vw)}.road-draw-result-grid{--batch-cols:1;display:grid;grid-template-columns:repeat(var(--batch-cols),minmax(0,1fr));gap:9px;max-height:62vh;overflow:auto;padding:2px}.road-draw-result-grid.single{max-width:500px;margin:auto}.road-draw-batch-card{--item-color:#aeb8c6;--item-core:#eef3f8;min-width:0;padding:13px 9px;border:1px solid color-mix(in srgb,var(--item-color) 55%,#303743);background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--item-color) 17%,transparent),transparent 48%),#080b10cc;text-align:center}.road-draw-batch-card[data-rarity="rare"]{--item-color:#49bfe9;--item-core:#dff8ff}.road-draw-batch-card[data-rarity="epic"]{--item-color:#aa5ce3;--item-core:#f2d9ff}.road-draw-batch-card[data-rarity="legendary"]{--item-color:#e4aa35;--item-core:#fff2b0}.road-draw-batch-card .road-draw-result-glyph{width:54px;height:54px;margin:0 auto 13px;border-color:var(--item-color);color:var(--item-core);font-size:20px;box-shadow:0 0 24px color-mix(in srgb,var(--item-color) 55%,transparent)}.road-draw-batch-card em{color:var(--item-color)}.road-draw-batch-card h2{margin:6px 0 4px;color:var(--item-core);font-size:18px}.road-draw-batch-card p{font-size:8px;line-height:1.4}.road-draw-batch-card small{margin-top:7px}.road-draw-result-grid.single .road-draw-batch-card{padding:8px 18px 12px;border:0;background:transparent}.road-draw-result-grid.single .road-draw-result-glyph{width:88px;height:88px;margin-bottom:22px;font-size:30px}.road-draw-result-grid.single h2{font-size:34px}.road-draw-result-grid.single p{font-size:11px}.road-draw-haul-summary{margin-top:12px!important}.road-draw-result[data-batch="10"]{padding-left:18px;padding-right:18px}@media(max-width:760px){.road-draw-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.road-draw-result-grid.single{grid-template-columns:1fr}.road-draw-controls{grid-template-columns:76px 1fr}}
.road-draw-cinematic::after{content:"";position:absolute;z-index:4;left:50%;top:50%;width:18vmin;height:18vmin;border:2px solid var(--draw-color);border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;box-shadow:0 0 55px var(--draw-color),inset 0 0 55px var(--draw-color)}.road-draw-cinematic.charging .road-draw-seal{animation:roadDrawSeal 1.15s cubic-bezier(.2,.75,.25,1) both,roadDrawCharge 3s .2s ease-in both}.road-draw-cinematic.charging .road-draw-road{animation-duration:.72s}.road-draw-cinematic.charging .road-draw-invocation{animation-duration:.55s}.road-draw-cinematic.reveal::after{animation:roadDrawRarityBurst .95s ease-out}.road-draw-cinematic.reveal .road-draw-stars{opacity:.82;animation-duration:2.4s}
@keyframes roadDrawIdle{to{transform:rotate(360deg)}}@keyframes roadDrawSky{to{transform:rotate(360deg)}}@keyframes roadDrawStars{to{background-position:0 190px,0 260px,0 280px,0 330px}}@keyframes roadDrawRush{to{background-position:0 0,0 64px,0 0}}@keyframes roadDrawSeal{0%{opacity:0;transform:scale(.15) rotate(-180deg)}68%{opacity:1;transform:scale(1.08) rotate(8deg)}100%{transform:scale(1) rotate(0)}}@keyframes roadDrawSigil{to{transform:rotate(405deg)}}@keyframes roadDrawInvocation{to{color:var(--draw-core);text-shadow:0 0 12px var(--draw-color)}}@keyframes roadDrawSealBreak{45%{transform:scale(.82);filter:brightness(3)}100%{opacity:0;transform:scale(4.8);filter:brightness(5)}}@keyframes roadDrawPrize{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes roadDrawLegendary{0%,100%{box-shadow:inset 0 0 0 transparent}35%{box-shadow:inset 0 0 180px #f3b73588}}@keyframes roadDrawCharge{0%{filter:brightness(.7);box-shadow:inset 0 0 35px var(--draw-color),0 0 26px var(--draw-color)}55%{filter:brightness(1.15);box-shadow:inset 0 0 90px var(--draw-color),0 0 75px var(--draw-color)}82%{filter:brightness(1.65);transform:scale(1.06);box-shadow:inset 0 0 120px var(--draw-color),0 0 125px var(--draw-color)}100%{filter:brightness(2.3);transform:scale(.9);box-shadow:inset 0 0 160px var(--draw-color),0 0 185px var(--draw-color)}}@keyframes roadDrawRarityBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.15)}55%{opacity:.95;transform:translate(-50%,-50%) scale(5)}100%{opacity:0;transform:translate(-50%,-50%) scale(10)}}

/* Authored vector scenes replace the procedural surfaces. Frost is intentionally untouched. */
:is(.back[data-faction="lex"],.pile[data-faction="lex"],.tdeckpile[data-faction="lex"],:root[data-road-faction-back="lex"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="lex"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="lex"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/lex.svg?v=b333dfe2f2"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="leg"],.pile[data-faction="leg"],.tdeckpile[data-faction="leg"],:root[data-road-faction-back="leg"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="leg"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="leg"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/leg.svg?v=e3ca932941"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="nys"],.pile[data-faction="nys"],.tdeckpile[data-faction="nys"],:root[data-road-faction-back="nys"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="nys"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="nys"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/nys.svg?v=e5a9cfc95f"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="nur"],.pile[data-faction="nur"],.tdeckpile[data-faction="nur"],:root[data-road-faction-back="nur"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="nur"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="nur"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/nur.svg?v=8d2507057a"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="sang"],.pile[data-faction="sang"],.tdeckpile[data-faction="sang"],:root[data-road-faction-back="sang"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="sang"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="sang"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/sang.svg?v=8136a9bc48"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="iron"],.pile[data-faction="iron"],.tdeckpile[data-faction="iron"],:root[data-road-faction-back="iron"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="iron"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="iron"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/iron.svg?v=722e313b52"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="vir"],.pile[data-faction="vir"],.tdeckpile[data-faction="vir"],:root[data-road-faction-back="vir"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="vir"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="vir"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/vir.svg?v=106b7a6b88"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="sil"],.pile[data-faction="sil"],.tdeckpile[data-faction="sil"],:root[data-road-faction-back="sil"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="sil"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="sil"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/sil.svg?v=4a03863ed1"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="khaz"],.pile[data-faction="khaz"],.tdeckpile[data-faction="khaz"],:root[data-road-faction-back="khaz"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="khaz"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="khaz"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/khaz.svg?v=07d4952e22"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="mf"],.pile[data-faction="mf"],.tdeckpile[data-faction="mf"],:root[data-road-faction-back="mf"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="mf"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="mf"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/mf.svg?v=f6cde6c940"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="vak"],.pile[data-faction="vak"],.tdeckpile[data-faction="vak"],:root[data-road-faction-back="vak"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="vak"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="vak"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/vak.svg?v=f1d8357661"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="ael"],.pile[data-faction="ael"],.tdeckpile[data-faction="ael"],:root[data-road-faction-back="ael"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ael"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ael"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ael.svg?v=716f4e0988"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="wld"],.pile[data-faction="wld"],.tdeckpile[data-faction="wld"],:root[data-road-faction-back="wld"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="wld"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="wld"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/wld.svg?v=aea69a65dd"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="desc"],.pile[data-faction="desc"],.tdeckpile[data-faction="desc"],:root[data-road-faction-back="desc"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="desc"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="desc"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/desc.svg?v=56a38cb0f7"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="jal"],.pile[data-faction="jal"],.tdeckpile[data-faction="jal"],:root[data-road-faction-back="jal"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="jal"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="jal"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/jal.svg?v=2c648a3ec9"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="ash"],.pile[data-faction="ash"],.tdeckpile[data-faction="ash"],:root[data-road-faction-back="ash"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash.svg?v=bdb030c911"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
/* 2026-10-12 (Olive): the Ashen back follows your Greatwyrm: its colour sets the primary, the Greatwyrm sets the emblem (scripts/make-ash-card-backs.mjs) */
:is(.back[data-faction="ash"][data-ash-tone="black"],.pile[data-faction="ash"][data-ash-tone="black"],.tdeckpile[data-faction="ash"][data-ash-tone="black"],:root[data-road-faction-back="ash"][data-road-ash-tone="black"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="black"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="black"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-black.svg?v=38d0386331"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="red"],.pile[data-faction="ash"][data-ash-tone="red"],.tdeckpile[data-faction="ash"][data-ash-tone="red"],:root[data-road-faction-back="ash"][data-road-ash-tone="red"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="red"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="red"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-red.svg?v=997db5b846"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="blue"],.pile[data-faction="ash"][data-ash-tone="blue"],.tdeckpile[data-faction="ash"][data-ash-tone="blue"],:root[data-road-faction-back="ash"][data-road-ash-tone="blue"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="blue"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="blue"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-blue.svg?v=259de6bd96"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="white"],.pile[data-faction="ash"][data-ash-tone="white"],.tdeckpile[data-faction="ash"][data-ash-tone="white"],:root[data-road-faction-back="ash"][data-road-ash-tone="white"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="white"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="white"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-white.svg?v=5cb03d74d7"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="green"],.pile[data-faction="ash"][data-ash-tone="green"],.tdeckpile[data-faction="ash"][data-ash-tone="green"],:root[data-road-faction-back="ash"][data-road-ash-tone="green"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="green"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="green"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-green.svg?v=90abbc5a38"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="farsoul"],.pile[data-faction="ash"][data-ash-tone="farsoul"],.tdeckpile[data-faction="ash"][data-ash-tone="farsoul"],:root[data-road-faction-back="ash"][data-road-ash-tone="farsoul"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="farsoul"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="farsoul"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-farsoul.svg?v=0bedd1919c"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="vesperia"],.pile[data-faction="ash"][data-ash-tone="vesperia"],.tdeckpile[data-faction="ash"][data-ash-tone="vesperia"],:root[data-road-faction-back="ash"][data-road-ash-tone="vesperia"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="vesperia"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="vesperia"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-vesperia.svg?v=6a1af6e764"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="kyriax"],.pile[data-faction="ash"][data-ash-tone="kyriax"],.tdeckpile[data-faction="ash"][data-ash-tone="kyriax"],:root[data-road-faction-back="ash"][data-road-ash-tone="kyriax"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="kyriax"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="kyriax"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-kyriax.svg?v=d2ae36fa76"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="ignarath"],.pile[data-faction="ash"][data-ash-tone="ignarath"],.tdeckpile[data-faction="ash"][data-ash-tone="ignarath"],:root[data-road-faction-back="ash"][data-road-ash-tone="ignarath"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="ignarath"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="ignarath"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-ignarath.svg?v=c22c581db0"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="voshul"],.pile[data-faction="ash"][data-ash-tone="voshul"],.tdeckpile[data-faction="ash"][data-ash-tone="voshul"],:root[data-road-faction-back="ash"][data-road-ash-tone="voshul"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="voshul"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="voshul"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-voshul.svg?v=d383193f39"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="isoval"],.pile[data-faction="ash"][data-ash-tone="isoval"],.tdeckpile[data-faction="ash"][data-ash-tone="isoval"],:root[data-road-faction-back="ash"][data-road-ash-tone="isoval"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="isoval"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="isoval"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-isoval.svg?v=6331ec04fb"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="rubbicante"],.pile[data-faction="ash"][data-ash-tone="rubbicante"],.tdeckpile[data-faction="ash"][data-ash-tone="rubbicante"],:root[data-road-faction-back="ash"][data-road-ash-tone="rubbicante"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="rubbicante"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="rubbicante"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-rubbicante.svg?v=72f6897b09"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="saithor"],.pile[data-faction="ash"][data-ash-tone="saithor"],.tdeckpile[data-faction="ash"][data-ash-tone="saithor"],:root[data-road-faction-back="ash"][data-road-ash-tone="saithor"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="saithor"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="saithor"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-saithor.svg?v=7668f6f73f"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="suythr"],.pile[data-faction="ash"][data-ash-tone="suythr"],.tdeckpile[data-faction="ash"][data-ash-tone="suythr"],:root[data-road-faction-back="ash"][data-road-ash-tone="suythr"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="suythr"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="suythr"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-suythr.svg?v=7fba8e622b"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="veradis"],.pile[data-faction="ash"][data-ash-tone="veradis"],.tdeckpile[data-faction="ash"][data-ash-tone="veradis"],:root[data-road-faction-back="ash"][data-road-ash-tone="veradis"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="veradis"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="veradis"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-veradis.svg?v=802a2da05f"),var(--faction-back)!important}
:is(.back[data-faction="ash"][data-ash-tone="frostkeeper"],.pile[data-faction="ash"][data-ash-tone="frostkeeper"],.tdeckpile[data-faction="ash"][data-ash-tone="frostkeeper"],:root[data-road-faction-back="ash"][data-road-ash-tone="frostkeeper"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="frostkeeper"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="ash"][data-road-ash-tone="frostkeeper"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/ash-frostkeeper.svg?v=b808e6b534"),var(--faction-back)!important}
html :is(.back[data-faction="ash"],:root[data-road-faction-back="ash"] .back:not([data-faction]):not([data-card-back]))::after{display:none!important}
:is(.back[data-faction="veh"],.pile[data-faction="veh"],.tdeckpile[data-faction="veh"],:root[data-road-faction-back="veh"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="veh"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="veh"] .tdeckpile:not([data-faction]):not([data-card-back])){background-image:url("/assets/card-backs/veh.svg?v=cf6d652444"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;animation:none!important}
:is(.back[data-faction="lex"],:root[data-road-faction-back="lex"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="leg"],:root[data-road-faction-back="leg"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="nys"],:root[data-road-faction-back="nys"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="nur"],:root[data-road-faction-back="nur"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="sang"],:root[data-road-faction-back="sang"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="iron"],:root[data-road-faction-back="iron"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="vir"],:root[data-road-faction-back="vir"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="sil"],:root[data-road-faction-back="sil"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="khaz"],:root[data-road-faction-back="khaz"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="mf"],:root[data-road-faction-back="mf"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="vak"],:root[data-road-faction-back="vak"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="ael"],:root[data-road-faction-back="ael"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="wld"],:root[data-road-faction-back="wld"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="desc"],:root[data-road-faction-back="desc"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="jal"],:root[data-road-faction-back="jal"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="ash"],:root[data-road-faction-back="ash"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="veh"],:root[data-road-faction-back="veh"] .back:not([data-faction]):not([data-card-back]))::before{display:none!important}
:is(.back[data-faction="lex"],:root[data-road-faction-back="lex"] .back:not([data-faction]):not([data-card-back]))::after,:is(.back[data-faction="leg"],:root[data-road-faction-back="leg"] .back:not([data-faction]):not([data-card-back]))::after,:is(.back[data-faction="nys"],:root[data-road-faction-back="nys"] .back:not([data-faction]):not([data-card-back]))::after,:is(.back[data-faction="sang"],:root[data-road-faction-back="sang"] .back:not([data-faction]):not([data-card-back]))::after,:is(.back[data-faction="iron"],:root[data-road-faction-back="iron"] .back:not([data-faction]):not([data-card-back]))::after,:is(.back[data-faction="vir"],:root[data-road-faction-back="vir"] .back:not([data-faction]):not([data-card-back]))::after,:is(.back[data-faction="sil"],:root[data-road-faction-back="sil"] .back:not([data-faction]):not([data-card-back]))::after,:is(.back[data-faction="khaz"],:root[data-road-faction-back="khaz"] .back:not([data-faction]):not([data-card-back]))::after,:is(.back[data-faction="mf"],:root[data-road-faction-back="mf"] .back:not([data-faction]):not([data-card-back]))::after,:is(.back[data-faction="vak"],:root[data-road-faction-back="vak"] .back:not([data-faction]):not([data-card-back]))::after,:is(.back[data-faction="ael"],:root[data-road-faction-back="ael"] .back:not([data-faction]):not([data-card-back]))::after,:is(.back[data-faction="wld"],:root[data-road-faction-back="wld"] .back:not([data-faction]):not([data-card-back]))::after,:is(.back[data-faction="desc"],:root[data-road-faction-back="desc"] .back:not([data-faction]):not([data-card-back]))::after,:is(.back[data-faction="jal"],:root[data-road-faction-back="jal"] .back:not([data-faction]):not([data-card-back]))::after,:is(.back[data-faction="veh"],:root[data-road-faction-back="veh"] .back:not([data-faction]):not([data-card-back]))::after{display:none!important}
:is(.back[data-faction="nur"],:root[data-road-faction-back="nur"] .back:not([data-faction]):not([data-card-back]))::after{display:block!important}:is(.back[data-faction="ash"],:root[data-road-faction-back="ash"] .back:not([data-faction]):not([data-card-back]))::after{display:block!important}
@media(prefers-reduced-motion:reduce){.road-draw-mini-seal,.road-draw-cinematic::before,.road-draw-stars,.road-draw-road,.road-draw-seal,.road-draw-seal::before,.road-draw-seal::after,.road-draw-invocation{animation:none}.road-draw-cinematic.reveal .road-draw-result{animation:none;opacity:1;transform:translate(-50%,-50%) scale(1)}.road-draw-cinematic.reveal .road-draw-seal{display:none}.road-draw-cinematic.reveal::after{animation:none}}

.faction-menu-preview[data-faction="adm"]::after{clip-path:polygon(0 100%,0 62%,7% 62%,7% 28%,14% 28%,14% 70%,23% 70%,23% 46%,31% 46%,31% 12%,38% 12%,38% 58%,46% 58%,50% 35%,54% 58%,62% 58%,62% 12%,69% 12%,69% 46%,77% 46%,77% 70%,86% 70%,86% 28%,93% 28%,93% 62%,100% 62%,100% 100%);animation:admPreviewRise 6s ease-in-out infinite alternate}
@keyframes admPreviewRise{to{transform:translateY(-7px);filter:drop-shadow(0 0 18px #42d8d2)}}
#menu[data-theme="adm"] #themeDecor::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(171deg,transparent 0 58px,#98fff119 59px 62px,transparent 63px 118px),radial-gradient(ellipse at 50% 108%,#12616b 0,#062531 34%,#01070c 72%);animation:admAbyssCaustics 7s ease-in-out infinite alternate}
#menu[data-theme="adm"] .td-silhouette{display:block;inset:auto 5% 0;height:61%;background:linear-gradient(90deg,#031018,#0c3438 48%,#020a0f);clip-path:polygon(0 100%,0 78%,6% 78%,6% 53%,11% 53%,11% 30%,15% 30%,15% 60%,22% 60%,22% 44%,28% 44%,28% 16%,34% 16%,34% 54%,42% 54%,42% 29%,48% 29%,50% 5%,52% 29%,58% 29%,58% 54%,66% 54%,66% 16%,72% 16%,72% 44%,78% 44%,78% 60%,85% 60%,85% 30%,89% 30%,89% 53%,94% 53%,94% 78%,100% 78%,100% 100%);filter:drop-shadow(0 -8px 24px #42d8d255);animation:admCityWake 8s ease-in-out infinite alternate}
#menu[data-theme="adm"] .td-silhouette::after{content:"";position:absolute;inset:20% 8% 3%;background:repeating-radial-gradient(ellipse at 50% 50%,#7cfff066 0 2px,transparent 3px 31px);animation:admWindows 2.5s ease-in-out infinite alternate}
#menu[data-theme="adm"] .td-rays{display:block;inset:0;background:linear-gradient(108deg,transparent 15%,#bafff12b 31%,transparent 47% 62%,#a2fff020 75%,transparent 88%);background-size:220% 100%;mix-blend-mode:screen;animation:admLightSweep 8s ease-in-out infinite}
#menu[data-theme="adm"] .td-moon{display:block;left:10%;top:15%;width:390px;height:170px;border-radius:50%;background:radial-gradient(ellipse at 44% 53%,#4df0df 0 2%,#09252c 3% 22%,#010507 23% 68%,transparent 69%);box-shadow:0 0 45px #42d8d244;transform:rotate(-12deg);animation:admLeviathanCircle 16s ease-in-out infinite}
#menu[data-theme="adm"] .td-moon::after{content:"";position:absolute;right:-45%;top:48%;width:62%;height:18%;background:#010507;clip-path:polygon(0 30%,76% 0,100% 50%,76% 100%,0 70%);filter:drop-shadow(0 0 8px #42d8d244)}
#menu[data-theme="adm"] .td-vines{display:block;inset:0;background:radial-gradient(circle at 8% 104%,#d3aa6244 0 3px,transparent 4px),radial-gradient(circle at 82% 108%,#42d8d244 0 3px,transparent 4px);background-size:93px 117px,137px 151px;animation:admBubbles 9s linear infinite}
@keyframes admAbyssCaustics{to{background-position:0 88px;filter:brightness(1.24)}}@keyframes admCityWake{to{transform:translateY(-8px);filter:drop-shadow(0 -14px 38px #42d8d277)}}@keyframes admWindows{to{filter:brightness(1.9)}}@keyframes admLightSweep{0%{background-position:160% 0}100%{background-position:-80% 0}}@keyframes admLeviathanCircle{0%,100%{transform:translate(-25vw,5vh) rotate(-12deg);opacity:.25}50%{transform:translate(75vw,16vh) rotate(8deg);opacity:.72}}@keyframes admBubbles{to{background-position:20px -310px,-35px -420px}}

:is(.back[data-faction="adm"],.pile[data-faction="adm"],.tdeckpile[data-faction="adm"],:root[data-road-faction-back="adm"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="adm"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="adm"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--adm);--faction-back:linear-gradient(145deg,#07313a,#02080d 68%,#5b3d19);background-image:url("/assets/card-backs/adm.svg?v=30816679b1"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 11px #42d8d255!important;animation:none!important}
:is(.back[data-faction="adm"],:root[data-road-faction-back="adm"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="adm"],:root[data-road-faction-back="adm"] .back:not([data-faction]):not([data-card-back]))::after{display:none!important}

#menu[data-theme="run"] #themeDecor::before{content:"";position:absolute;inset:-18%;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0 19deg,#b37cff22 20deg 21deg,transparent 22deg 44deg),radial-gradient(circle at 50% 50%,#9c6bca33 0 8%,transparent 9% 23%,#ff704d22 24% 26%,transparent 27% 40%,#69a9ff22 41% 43%,transparent 44%);animation:runMatrixTurn 18s linear infinite}
#menu[data-theme="run"] .td-rays{display:block;inset:0;background:linear-gradient(110deg,transparent 12%,#ff704d24 28%,transparent 42% 56%,#69a9ff24 72%,transparent 88%);background-size:220% 100%;animation:runMatrixSweep 8s ease-in-out infinite}
@keyframes runMatrixTurn{to{transform:rotate(360deg)}}@keyframes runMatrixSweep{0%{background-position:160% 0}100%{background-position:-80% 0}}
:is(.back[data-faction="run"],.pile[data-faction="run"],.tdeckpile[data-faction="run"],:root[data-road-faction-back="run"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="run"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="run"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:#b37cff;--faction-back:radial-gradient(circle,#211330,#05030a);background-image:url("/assets/card-backs/run.svg?v=18d1f67252"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;border-color:var(--faccent)!important;box-shadow:inset 0 0 18px #000b,0 0 11px #b37cff55!important;animation:none!important}
:is(.back[data-faction="run"],:root[data-road-faction-back="run"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="run"],:root[data-road-faction-back="run"] .back:not([data-faction]):not([data-card-back]))::after{display:none!important}

.faction-menu-preview[data-faction="sen"]{--scene-bg:repeating-radial-gradient(circle at 50% 50%,transparent 0 7%,#a88b5555 7.5% 8%,transparent 8.5% 12%),radial-gradient(circle,#a5eee744,transparent 28%),linear-gradient(145deg,#202627,#080b0c);--scene-accent:#77cfc8}.faction-menu-preview[data-faction="sen"]::after{clip-path:polygon(49% 3%,53% 38%,81% 14%,59% 45%,96% 50%,58% 55%,78% 88%,52% 62%,48% 97%,45% 61%,18% 87%,41% 54%,4% 49%,42% 45%,19% 14%,46% 39%);animation:senPreviewBreath 5.4s ease-in-out infinite}
@keyframes senPreviewBreath{0%,100%{transform:scale(.82) rotate(-4deg);opacity:.35}48%{transform:scale(1.04) rotate(4deg);opacity:.85}64%{transform:scale(.93);opacity:.58}}
#menu[data-theme="sen"] #themeDecor::before{content:"";position:absolute;inset:-18%;background:repeating-radial-gradient(circle at 50% 48%,transparent 0 5.8%,#a98b5538 6% 6.35%,transparent 6.7% 9.5%),radial-gradient(circle at 50% 48%,#eafff98c 0 1%,#6dd7ce38 3% 15%,transparent 32%),linear-gradient(132deg,#d9d5ca12 0 1px,transparent 1px 68px),linear-gradient(155deg,#202526,#090d0e 70%);animation:senSevenRings 21s linear infinite}
#menu[data-theme="sen"] .td-rays{display:block;inset:-20%;background:repeating-conic-gradient(from 3deg at 50% 48%,transparent 0 20deg,#c9fff521 21deg 21.8deg,transparent 23deg 49deg);animation:senCurrentSweep 7s ease-in-out infinite}
#menu[data-theme="sen"] .td-vines{display:block;inset:0;background:radial-gradient(ellipse at 14% 78%,#edf9f3aa 0 2px,transparent 3px),radial-gradient(ellipse at 77% 22%,#d7e6df88 0 2px,transparent 3px),radial-gradient(ellipse at 88% 70%,#fff8 0 1px,transparent 3px);background-size:137px 173px,181px 227px,103px 149px;animation:senFeatherDrift 12s linear infinite}
#menu[data-theme="sen"] .td-moon{display:block;left:calc(50% - 90px);top:calc(48% - 90px);width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,#f3fffb 0 2%,#86ded4 3% 8%,#142426 18%,#030506 53%,transparent 55%);box-shadow:0 0 34px #8ce4da55;animation:senWoundBreathe 5.4s ease-in-out infinite}
@keyframes senSevenRings{to{transform:rotate(360deg)}}@keyframes senCurrentSweep{0%,100%{transform:rotate(-4deg) scale(.93);opacity:.42}50%{transform:rotate(9deg) scale(1.05);opacity:.9}}@keyframes senFeatherDrift{to{background-position:72px -310px,-84px -440px,43px -270px}}@keyframes senWoundBreathe{0%,100%{transform:scale(.88);opacity:.45}48%{transform:scale(1.08);opacity:1}68%{transform:scale(.94);opacity:.66}}
:is(.back[data-faction="sen"],.pile[data-faction="sen"],.tdeckpile[data-faction="sen"],:root[data-road-faction-back="sen"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="sen"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="sen"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:#77cfc8;--faction-back:radial-gradient(circle,#24302f,#070a0b);background-image:url("/assets/card-backs/sen.svg?v=00d6ef7a83"),var(--faction-back)!important;background-position:center,center!important;background-size:cover,170% 170%!important;background-repeat:no-repeat!important;border-color:#aa8b54!important;box-shadow:inset 0 0 18px #000b,0 0 11px #77cfc855!important;animation:none!important}
:is(.back[data-faction="sen"],:root[data-road-faction-back="sen"] .back:not([data-faction]):not([data-card-back]))::before,:is(.back[data-faction="sen"],:root[data-road-faction-back="sen"] .back:not([data-faction]):not([data-card-back]))::after{display:none!important}
@media(prefers-reduced-motion:reduce){#menu[data-theme="sen"] #themeDecor::before,#menu[data-theme="sen"] .td-rays,#menu[data-theme="sen"] .td-vines,#menu[data-theme="sen"] .td-moon,.faction-menu-preview[data-faction="sen"]::after{animation:none!important}}

/* Unwriting mastery back — deterministic pseudo-random corruption with guaranteed recovery. */
:is(.back[data-faction="nys"],.pile[data-faction="nys"],.tdeckpile[data-faction="nys"],:root[data-road-faction-back="nys"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="nys"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="nys"] .tdeckpile:not([data-faction]):not([data-card-back])){position:relative;transform-origin:50% 50%;will-change:transform,filter,clip-path;animation:nysCardRealityFailure 17.3s steps(1,end) calc(var(--card-seq,0)*-.83s) infinite!important}
:is(.back[data-faction="nys"],:root[data-road-faction-back="nys"] .back:not([data-faction]):not([data-card-back]))::before{content:"YOU WERE NOT SUPPOSED TO REMEMBER"!important;display:grid!important;place-items:center;position:absolute!important;z-index:8!important;inset:7% 5%!important;border:0!important;border-radius:0!important;background:repeating-linear-gradient(0deg,transparent 0 5px,#e471ff24 6px 7px,transparent 8px 13px)!important;color:#f5c2ff!important;font:900 clamp(5px,1.1vw,10px)/1.5 var(--mono)!important;letter-spacing:.16em!important;text-align:center!important;text-shadow:-3px 0 #45f8ef,3px 0 #ff315d,0 0 10px #d96aef!important;opacity:0;clip-path:inset(0 100% 0 0);pointer-events:none;animation:nysSecretMessage 23.7s steps(1,end) calc(var(--card-seq,0)*-1.27s) infinite!important}
:is(.back[data-faction="nys"],:root[data-road-faction-back="nys"] .back:not([data-faction]):not([data-card-back]))::after{content:""!important;display:block!important;position:absolute!important;z-index:7!important;inset:-3% -7%!important;width:auto!important;height:auto!important;border:0!important;border-radius:0!important;background:linear-gradient(90deg,#31f6e744,transparent 28% 66%,#ff315d44),repeating-linear-gradient(0deg,transparent 0 9px,#df72f23d 10px 12px,transparent 13px 20px)!important;mix-blend-mode:screen;opacity:0;pointer-events:none;animation:nysChromaticTear 11.9s steps(1,end) calc(var(--card-seq,0)*-.59s) infinite!important}
@keyframes nysCardRealityFailure{0%,7%,18%,32%,47%,63%,79%,91%,100%{transform:none;filter:none;clip-path:inset(0 round 5px)}8%{transform:translate(3px,-2px) scaleX(1.12) scaleY(.91) skewX(-3deg);filter:hue-rotate(74deg) contrast(1.8);clip-path:polygon(0 0,100% 0,96% 19%,100% 22%,94% 49%,100% 53%,97% 80%,100% 84%,100% 100%,0 100%,4% 79%,0 74%,5% 43%,0 39%)}9%{transform:translate(-4px,2px) scaleX(.86) scaleY(1.08) skewY(2deg);filter:contrast(2.2) brightness(1.3);clip-path:inset(3% 0 1% 0)}10%{transform:translate(1px,-1px) scaleX(1.04) scaleY(.97);filter:saturate(2)}33%{transform:translate(-5px,0) scaleX(1.18) scaleY(.84) skewX(5deg);filter:invert(.22) contrast(2.4);clip-path:polygon(0 0,97% 0,100% 14%,95% 18%,100% 39%,93% 45%,100% 72%,96% 79%,100% 100%,0 100%,5% 73%,0 68%)}34%{transform:translate(6px,1px) scaleX(.92) scaleY(1.13);filter:hue-rotate(-48deg) brightness(1.5)}48%{transform:translate(0,-4px) scaleX(1.25) scaleY(.79);filter:contrast(2.5) saturate(.4);clip-path:inset(11% -5% 7% -5%)}49%{transform:translate(-3px,5px) scaleX(.8) scaleY(1.18) skewX(-6deg);filter:invert(.3) hue-rotate(120deg)}64%{transform:translate(5px,-3px) scaleX(1.11) scaleY(.9);filter:contrast(3) brightness(.8);clip-path:polygon(0 4%,100% 0,94% 31%,100% 35%,96% 69%,100% 73%,100% 96%,0 100%,4% 67%,0 61%)}80%{transform:translate(-6px,2px) scaleX(.88) scaleY(1.16) skewY(-4deg);filter:hue-rotate(160deg) contrast(2);clip-path:inset(0 -4% 0 -4%)}81%{transform:translate(3px,-1px) scaleX(1.08) scaleY(.93);filter:brightness(1.6)}}
@keyframes nysSecretMessage{0%,12%,16%,35%,39%,58%,62%,82%,86%,100%{opacity:0;clip-path:inset(0 100% 0 0);content:"YOU WERE NOT SUPPOSED TO REMEMBER"}13%{opacity:.9;clip-path:inset(0);content:"YOU WERE NOT SUPPOSED TO REMEMBER"}14%{opacity:.22;clip-path:inset(24% 0 47% 0);content:"YOU WERE NOT SUPPOSED TO REMEMBER"}15%{opacity:.82;clip-path:inset(0);content:"THE CARD KNOWS YOUR NAME"}36%{opacity:.78;clip-path:inset(0);content:"THERE IS NO PLAYER TWO"}37%{opacity:.15;clip-path:inset(55% 0 13% 0);content:"THERE IS NO PLAYER TWO"}38%{opacity:.9;clip-path:inset(0);content:"IT WAS ERASED FOR A REASON"}59%{opacity:.82;clip-path:inset(0);content:"DO NOT READ THE NEXT LINE"}60%{opacity:.18;clip-path:inset(8% 0 62% 0);content:"DO NOT READ THE NEXT LINE"}61%{opacity:.9;clip-path:inset(0);content:"SOMETHING IS READING BACK"}83%{opacity:.84;clip-path:inset(0);content:"THE ROAD ENDS BEHIND YOU"}84%{opacity:.15;clip-path:inset(68% 0 4% 0);content:"THE ROAD ENDS BEHIND YOU"}85%{opacity:.92;clip-path:inset(0);content:"THIS CARD WAS NEVER PRINTED"}}
@keyframes nysChromaticTear{0%,9%,13%,27%,31%,52%,56%,74%,78%,94%,100%{opacity:0;transform:none}10%{opacity:.75;transform:translateX(8px) skewX(-4deg);clip-path:inset(9% 0 66% 0)}11%{opacity:.34;transform:translateX(-11px);clip-path:inset(43% 0 29% 0)}12%{opacity:.88;transform:translateX(4px);clip-path:inset(72% 0 8% 0)}28%{opacity:.7;transform:translate(-9px,3px) scaleX(1.1);clip-path:inset(28% 0 51% 0)}29%{opacity:.28;transform:translate(12px,-4px);clip-path:inset(58% 0 18% 0)}30%{opacity:.84;transform:translateX(-4px);clip-path:inset(5% 0 77% 0)}53%{opacity:.8;transform:translateX(14px) scaleY(.9);clip-path:inset(37% 0 38% 0)}54%{opacity:.32;transform:translateX(-15px);clip-path:inset(64% 0 13% 0)}55%{opacity:.74;transform:translateX(5px);clip-path:inset(12% 0 69% 0)}75%{opacity:.77;transform:translate(-12px,2px) skewX(5deg);clip-path:inset(46% 0 31% 0)}76%{opacity:.3;transform:translate(16px,-2px);clip-path:inset(18% 0 57% 0)}77%{opacity:.85;transform:translateX(-6px);clip-path:inset(76% 0 5% 0)}95%{opacity:.8;transform:translateX(13px);clip-path:inset(33% 0 43% 0)}96%{opacity:.25;transform:translateX(-9px);clip-path:inset(7% 0 74% 0)}}
@media(prefers-reduced-motion:reduce){:is(.back[data-faction="nys"],.pile[data-faction="nys"],.tdeckpile[data-faction="nys"]){animation:none!important}:is(.back[data-faction="nys"]::before,.back[data-faction="nys"]::after){animation:none!important;display:none!important}}

@media(max-width:900px){.achievement-grid,.reward-grid,.road-draw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reward-loadout{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1050px){.road-draw-kiosk{grid-template-columns:1fr}.road-draw-machine{position:relative;min-height:0}.road-draw-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.road-pass-open{right:8px;top:8px}.road-pass-overlay{padding:7px}.road-pass-shell{height:calc(100vh - 14px)}.road-pass-head{padding:14px;display:block}.road-pass-head-actions{margin-top:10px}.road-pass-tabs,.road-pass-body{padding-left:12px;padding-right:12px}.achievement-grid,.reward-grid,.road-draw-grid{grid-template-columns:1fr}.road-track-summary{display:block}.road-track-next{margin-top:12px}.road-pass-profile{display:none}}
.reward-cardback-visual[data-back="back-rune-matrix"],.back[data-card-back="back-rune-matrix"],.pile[data-card-back="back-rune-matrix"],.tdeckpile[data-card-back="back-rune-matrix"],:root[data-road-cardback="back-rune-matrix"] .back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-rune-matrix"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-rune-matrix"] .tdeckpile:not([data-faction]):not([data-card-back]){background:radial-gradient(circle at 50% 50%,#d6b2ff 0 2%,transparent 3% 16%),conic-gradient(from 0deg,#12051e,#693ca0,#142f59,#12051e)!important;border-color:#b37cff!important;color:#e2caff!important}
.reward-cardback-visual[data-back="back-snowglass"],.back[data-card-back="back-snowglass"],.pile[data-card-back="back-snowglass"],.tdeckpile[data-card-back="back-snowglass"],:root[data-road-cardback="back-snowglass"] .back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-snowglass"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-snowglass"] .tdeckpile:not([data-faction]):not([data-card-back]){background:radial-gradient(circle at 50% 25%,#fff 0 5%,#8ed7ef 6% 9%,transparent 10%),linear-gradient(145deg,#162b45,#050a13)!important;border-color:#8ed7ef!important;color:#dff8ff!important}
.reward-cardback-visual[data-back="back-emberline"],.back[data-card-back="back-emberline"],.pile[data-card-back="back-emberline"],.tdeckpile[data-card-back="back-emberline"],:root[data-road-cardback="back-emberline"] .back:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-emberline"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-cardback="back-emberline"] .tdeckpile:not([data-faction]):not([data-card-back]){background:linear-gradient(145deg,#260d08,#0a0302 55%,#7b2917)!important;border-color:#e66b42!important;color:#ffb28b!important}

.achievement-menu-skins{margin:24px 0 8px}.achievement-menu-skin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.achievement-menu-card{min-height:286px}.achievement-menu-card.locked{opacity:.38;filter:grayscale(.82) brightness(.72)}.achievement-menu-progress{display:block;margin-top:9px;color:#8c96a4;font:800 7px var(--mono);letter-spacing:.1em;text-transform:uppercase}.achievement-menu-card.unlocked .achievement-menu-progress{color:#e0bd67}.achievement-menu-preview{position:relative;height:112px!important;overflow:hidden!important;background:#030407!important}.achievement-menu-preview span{z-index:3;padding:5px 8px;background:#030509c9;color:#d7d5ce;font:800 6px var(--mono);letter-spacing:.14em}.achievement-menu-preview::before,.achievement-menu-preview::after{content:"";position:absolute;inset:8px}.achievement-menu-preview[data-achievement-menu="achievement-menu-last-match"]::before{background:linear-gradient(90deg,transparent 0 8%,#c6f2ef38 9% 17%,transparent 18% 29%,#d8eff048 30% 40%,transparent 41% 62%,#c6f2ef3b 63% 74%,transparent 75% 85%,#d8eff033 86% 94%,transparent 95%),linear-gradient(transparent 63%,#b7dedc35 64% 66%,transparent 67%);filter:drop-shadow(0 0 8px #bcefed77);animation:memoryDrift 4s ease-in-out infinite alternate}.achievement-menu-preview[data-achievement-menu="achievement-menu-divided-court"]::before{inset:0;background:radial-gradient(ellipse at 50% 88%,#211910 0 8%,transparent 9%),linear-gradient(119deg,transparent 42%,#80643d33 43% 44%,transparent 45%),linear-gradient(#010102,#0b0907);clip-path:polygon(0 0,49.4% 0,48.6% 100%,0 100%);animation:previewSever 5.5s ease infinite}.achievement-menu-preview[data-achievement-menu="achievement-menu-divided-court"]::after{inset:0;background:linear-gradient(#010102,#0b0907);clip-path:polygon(50.6% 0,100% 0,100% 100%,51.4% 100%);animation:previewSever 5.5s ease infinite reverse}@keyframes memoryDrift{to{transform:translateY(-5px);opacity:.6}}@keyframes previewSever{0%,68%,100%{transform:none}74%,88%{transform:translateX(-13px)}92%{transform:translateX(4px)}}
.achievement-menu-environment{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.achievement-menu-environment[hidden]{display:none}.ame-layer{position:absolute;inset:0}.achievement-menu-environment[data-scene="memory"]{background:radial-gradient(ellipse at 50% 42%,#b9e7e70f,transparent 43%),linear-gradient(#030609,#070b0e 67%,#020303)}.achievement-menu-environment[data-scene="memory"] .ame-layer{background:repeating-linear-gradient(90deg,transparent 0 11%,#d2f4f407 11.1%,transparent 11.3% 22%),repeating-linear-gradient(0deg,transparent 0 5px,#d9ffff07 6px,transparent 7px);animation:memoryFog 9s ease-in-out infinite alternate}.ame-memory-figure{position:absolute;width:clamp(42px,5.4vw,82px);height:clamp(74px,12vh,130px);padding:0;border:0;background:transparent;pointer-events:auto;cursor:pointer;opacity:.3;filter:drop-shadow(0 0 11px #bcebeaa0);transition:.2s}.ame-memory-figure:hover,.ame-memory-figure:focus-visible{opacity:.95;filter:drop-shadow(0 0 19px #d8ffff);outline:none;transform:translateY(-5px) scale(1.05)}.ame-memory-figure::before{content:"";position:absolute;left:31%;top:4%;width:38%;aspect-ratio:1;border:1px solid #ccebea;border-radius:50%;background:#b9dddc18}.ame-memory-figure::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:72%;border:1px solid #ccebea66;border-radius:52% 52% 10% 10%;background:linear-gradient(#c8eeee19,#809b9a0c);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}.ame-memory-figure i{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);white-space:nowrap;color:#bcd3d1;font:700 6px var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase}.ame-memory-card{position:absolute;width:clamp(34px,4vw,62px);aspect-ratio:5/7;border:1px solid #d3eeee77;border-radius:4px;background:linear-gradient(150deg,#c4e9e717,#05090b 68%);box-shadow:0 0 12px #b9eeee45;animation:memoryCardHover var(--d) ease-in-out infinite alternate;pointer-events:auto;cursor:pointer}.ame-memory-card::after{content:attr(data-mark);position:absolute;inset:0;display:grid;place-items:center;color:#d9eeee80;font:12px var(--serif)}.ame-memory-grave{position:absolute;left:7%;right:7%;bottom:4%;height:1px;background:linear-gradient(90deg,transparent,#badbd866 18% 82%,transparent);box-shadow:0 0 20px #b8e9e944}.ame-memory-grave::before{content:"DESTROYED WORKS REMEMBERED";position:absolute;left:50%;top:9px;transform:translateX(-50%);color:#9fb8b6;font:600 6px var(--mono);letter-spacing:.22em}.ame-memory-empty{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);color:#9eb2b1;font:italic 11px var(--serif);opacity:.58}@keyframes memoryFog{to{opacity:.56;transform:translateX(1.3%)}}@keyframes memoryCardHover{to{transform:translateY(-8px) rotate(3deg);opacity:.64}}
.achievement-menu-environment[data-scene="court"]{background:#000}.achievement-menu-environment[data-scene="court"] .ame-layer{background:radial-gradient(ellipse at 50% 112%,#322516 0 8%,#0b0907 24%,transparent 48%),repeating-linear-gradient(90deg,transparent 0 8%,#96734a09 8.1%,transparent 8.3% 16%),linear-gradient(#000 0 54%,#050403);box-shadow:inset 0 0 150px #000}.ame-throne::before,.ame-throne::after{content:"";position:absolute;left:50%;bottom:5%;width:min(34vw,440px);height:69vh;border:1px solid #71573627;background:linear-gradient(90deg,#050403,#13100c 52%,#020202);clip-path:polygon(50% 0,61% 18%,76% 23%,72% 38%,85% 100%,15% 100%,28% 38%,24% 23%,39% 18%);transform:translateX(-100%)}.ame-throne::after{transform:scaleX(-1);transform-origin:0 50%}.ame-seam{position:absolute;left:50%;top:-8%;bottom:-8%;width:2px;transform:rotate(.7deg);background:linear-gradient(transparent,#9f80505c 18%,#ede0bd91 50%,#745a344f 82%,transparent);box-shadow:0 0 12px #9b754e55,0 0 60px #000}.ame-crown{position:absolute;left:50%;bottom:18%;width:min(21vw,270px);height:min(20vh,170px);transform:translateX(-50%);clip-path:polygon(5% 100%,0 31%,21% 50%,33% 0,50% 46%,67% 0,79% 50%,100% 31%,95% 100%);background:linear-gradient(90deg,#080605,#21190f 49.2%,#000 49.4% 50.6%,#21190f 50.8%,#080605);opacity:.68}
.divided-court-rupture{position:fixed;inset:0;z-index:100260;pointer-events:none;background:#000}.divided-court-half{position:absolute;inset:0;overflow:hidden;background:#000;will-change:transform}.divided-court-copy{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}.divided-court-half.left{clip-path:polygon(0 0,50% 0,49% 100%,0 100%);animation:severLeft 1.72s cubic-bezier(.78,0,.18,1)}.divided-court-half.right{clip-path:polygon(50% 0,100% 0,100% 100%,51% 100%);animation:severRight 1.72s cubic-bezier(.78,0,.18,1)}.divided-court-rupture::after{content:"";position:absolute;left:50%;top:-8%;width:3px;height:116%;background:#f1ddaf;box-shadow:0 0 14px #fff,0 0 70px #9b7148;animation:seamStrike 1.72s ease}.divided-court-rupture.impact{animation:courtImpact .16s steps(2) 3}@keyframes severLeft{0%,9%{transform:none}15%,67%{transform:translate(-7vw,1.4vh) rotate(-.65deg)}75%{transform:translate(-9vw,-.7vh)}83%{transform:translate(2vw)}91%{transform:translate(-.7vw)}100%{transform:none}}@keyframes severRight{0%,9%{transform:none}15%,67%{transform:translate(7vw,-1.4vh) rotate(.65deg)}75%{transform:translate(9vw,.7vh)}83%{transform:translate(-2vw)}91%{transform:translate(.7vw)}100%{transform:none}}@keyframes seamStrike{0%,8%{transform:scaleY(0);opacity:0}12%{transform:scaleY(1);opacity:1}70%{opacity:.4}80%{opacity:1}100%{opacity:0}}@keyframes courtImpact{50%{transform:translateX(7px)}}
.last-match-recap{position:fixed;inset:0;z-index:100380;display:none;place-items:center;padding:22px;background:#010305ed;backdrop-filter:blur(15px);color:#dce9e7}.last-match-recap.on{display:grid}.last-match-recap-shell{width:min(1120px,96vw);max-height:92vh;overflow:auto;padding:28px;border:1px solid #9fc8c660;background:radial-gradient(circle at 50% 0,#b9e9e915,transparent 30%),linear-gradient(150deg,#0c1418,#030608 70%);box-shadow:0 30px 120px #000,0 0 48px #9ed6d324}.last-match-recap header{display:flex;justify-content:space-between;gap:18px;padding-bottom:17px;border-bottom:1px solid #90b8b638}.last-match-recap h2{margin:5px 0;color:#edf6f4;font:400 32px var(--serif)}.last-match-recap p{margin:0;color:#819b9a;font:9px var(--mono)}.last-match-recap-close{align-self:start;padding:8px 11px;border:1px solid #77918f;background:#071012;color:#cce0de;font:800 7px var(--mono);cursor:pointer}.last-match-heroes,.last-match-boards{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:10px;margin-top:16px}.last-match-hero,.last-match-board,.last-match-relic{padding:13px;border:1px solid #46626070;background:#071012b5}.last-match-hero.dead{opacity:.47}.last-match-hero b,.last-match-board h3{display:block;margin:0;color:#e0eeec;font:400 17px var(--serif)}.last-match-hero span,.last-match-board>span,.last-match-relic span{display:block;margin-top:5px;color:#8ba3a1;font:7px var(--mono);letter-spacing:.1em;text-transform:uppercase}.last-match-cards{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.last-match-card{min-width:82px;max-width:145px;padding:8px;border:1px solid #62817e60;background:#0d171a}.last-match-card small,.last-match-relic small{display:block;margin-top:5px;color:#8ea4a2;font:7px/1.4 var(--mono)}.last-match-footer{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.last-match-relic b{display:block;margin-top:6px;color:#e0ece9;font:18px var(--serif);font-weight:400}@media(max-width:760px){.achievement-menu-skin-grid,.last-match-footer{grid-template-columns:1fr}.last-match-heroes,.last-match-boards{grid-template-columns:1fr!important}}
/* Achievement environment cinematic polish: composited transforms and opacity keep both scenes fluid. */
.achievement-menu-preview[data-achievement-menu="achievement-menu-last-match"]::before{animation:memoryPreviewFloat 3.6s cubic-bezier(.45,.05,.22,1) infinite alternate}.achievement-menu-preview[data-achievement-menu="achievement-menu-last-match"]::after{inset:-30% -15%;background:linear-gradient(112deg,transparent 34%,#e9ffff10 42%,#c7ffff88 49%,#ffffff22 53%,transparent 62%);filter:blur(2px);animation:memoryPreviewSweep 3.8s cubic-bezier(.35,0,.18,1) infinite}.achievement-menu-preview[data-achievement-menu="achievement-menu-divided-court"]::before{animation:previewCourtLeft 5.2s cubic-bezier(.42,0,.16,1) infinite}.achievement-menu-preview[data-achievement-menu="achievement-menu-divided-court"]::after{background:radial-gradient(circle at 51% 54%,#ffeec93b,transparent 11%),linear-gradient(#010102,#0b0907);animation:previewCourtRight 5.2s cubic-bezier(.42,0,.16,1) infinite}@keyframes memoryPreviewFloat{0%{transform:translate3d(-1%,2px,0);opacity:.42}100%{transform:translate3d(2%,-7px,0);opacity:.94}}@keyframes memoryPreviewSweep{0%,18%{transform:translate3d(-72%,0,0);opacity:0}35%{opacity:.9}57%,100%{transform:translate3d(72%,0,0);opacity:0}}@keyframes previewCourtLeft{0%,58%,100%{transform:translate3d(0,0,0);filter:brightness(1)}68%,80%{transform:translate3d(-15px,1px,0) rotate(-.45deg);filter:brightness(1.65)}90%{transform:translate3d(3px,0,0);filter:brightness(2)}}@keyframes previewCourtRight{0%,58%,100%{transform:translate3d(0,0,0);filter:brightness(1)}68%,80%{transform:translate3d(15px,-1px,0) rotate(.45deg);filter:brightness(1.65)}90%{transform:translate3d(-3px,0,0);filter:brightness(2)}}
.achievement-menu-environment[data-scene="memory"]{background:radial-gradient(ellipse at 50% 40%,#b9ffff20,transparent 39%),radial-gradient(ellipse at 50% 104%,#9fdedb1f,transparent 38%),linear-gradient(155deg,#020609,#0a1115 54%,#010303)}.achievement-menu-environment[data-scene="memory"] .ame-layer{opacity:.82;animation:memoryFogPolished 13s cubic-bezier(.45,.05,.22,1) infinite alternate;will-change:transform,opacity}.achievement-menu-environment[data-scene="memory"] .ame-layer::before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 205deg at 50% 92%,transparent 0 7%,#c5ffff15 10%,transparent 14% 22%,#fff9 25%,transparent 29% 100%);filter:blur(16px);animation:memoryLightTurn 18s ease-in-out infinite alternate}.achievement-menu-environment[data-scene="memory"] .ame-layer::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 16%,#e9ffff10 29%,transparent 43% 67%,#9ffcff0d 78%,transparent 91%);animation:memoryLightSweep 8s cubic-bezier(.45,0,.2,1) infinite}.ame-memory-aurora{position:absolute;left:-15%;right:-15%;top:2%;height:58%;opacity:.5;background:radial-gradient(ellipse at 28% 40%,#9fffff30,transparent 28%),radial-gradient(ellipse at 72% 29%,#d6ffff25,transparent 26%),linear-gradient(165deg,transparent 15%,#89dddc12 44%,#eefeff25 51%,transparent 72%);filter:blur(28px);animation:memoryAurora 10s ease-in-out infinite alternate}.ame-memory-rings{position:absolute;left:50%;top:47%;width:min(74vw,920px);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #d9ffff15;border-radius:50%;box-shadow:0 0 80px #a9ffff12,inset 0 0 70px #c8ffff0c;animation:memoryRingBreathe 7s ease-in-out infinite}.ame-memory-rings::before,.ame-memory-rings::after{content:"";position:absolute;border:1px solid #d7ffff12;border-radius:50%}.ame-memory-rings::before{inset:15%}.ame-memory-rings::after{inset:31%;box-shadow:0 0 45px #c8ffff18}.ame-memory-motes{position:absolute;inset:0}.ame-memory-motes i{position:absolute;left:calc(4% + var(--i)*4.7%);top:calc(12% + (var(--i)*17%));width:2px;height:2px;border-radius:50%;background:#eaffff;box-shadow:0 0 8px #c8ffff,0 0 20px #9affff;opacity:.18;animation:memoryMote calc(5.5s + var(--i)*.19s) ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.41s)}.ame-memory-figure{opacity:.38;filter:drop-shadow(0 0 13px #bcebeaa0);transition:opacity .42s ease,filter .42s ease,transform .42s cubic-bezier(.2,.8,.2,1);animation:memoryFigurePulse calc(4.8s + var(--i)*.37s) ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.73s);will-change:opacity,filter}.ame-memory-figure:hover,.ame-memory-figure:focus-visible{animation-play-state:paused;opacity:1;filter:drop-shadow(0 0 14px #fff) drop-shadow(0 0 36px #aaffff);transform:translate3d(0,-8px,0) scale(1.07)}.ame-memory-card{box-shadow:0 0 12px #b9eeee45,inset 0 0 16px #e8ffff0b;animation:memoryCardGlide var(--d) cubic-bezier(.45,.05,.22,1) infinite alternate;animation-delay:calc(var(--i)*-.38s);will-change:transform,opacity,box-shadow}.ame-memory-card:hover,.ame-memory-card:focus-visible{animation-play-state:paused;outline:none;transform:translate3d(0,-10px,0) scale(1.09);box-shadow:0 0 15px #fff,0 0 42px #a8ffff88}.ame-memory-grave{height:2px;background:linear-gradient(90deg,transparent,#c9ffff50 12%,#fff 50%,#c9ffff50 88%,transparent);box-shadow:0 0 18px #d9ffff66,0 0 55px #9affff2f;animation:memoryGraveGlow 4s ease-in-out infinite alternate}@keyframes memoryFogPolished{0%{transform:translate3d(-.8%,0,0) scale(1.01);opacity:.46}100%{transform:translate3d(1.4%,-.7%,0) scale(1.025);opacity:.9}}@keyframes memoryLightTurn{to{transform:rotate(5deg) scale(1.06);opacity:.72}}@keyframes memoryLightSweep{0%,15%{transform:translate3d(-38%,0,0);opacity:0}44%{opacity:.72}75%,100%{transform:translate3d(38%,0,0);opacity:0}}@keyframes memoryAurora{to{transform:translate3d(2.5%,-2%,0) skewX(-3deg);opacity:.82}}@keyframes memoryRingBreathe{0%,100%{transform:translate(-50%,-50%) scale(.97);opacity:.28}50%{transform:translate(-50%,-50%) scale(1.035);opacity:.7}}@keyframes memoryMote{0%{transform:translate3d(-5px,22px,0) scale(.6);opacity:.08}55%{opacity:.75}100%{transform:translate3d(11px,-42px,0) scale(1.6);opacity:.15}}@keyframes memoryFigurePulse{0%{opacity:.25;filter:drop-shadow(0 0 8px #bcebeA55)}100%{opacity:.58;filter:drop-shadow(0 0 19px #d9ffffc0)}}@keyframes memoryCardGlide{0%{transform:translate3d(-2px,5px,0) rotate(-1.2deg);opacity:.34;box-shadow:0 0 8px #b9eeee30}100%{transform:translate3d(3px,-10px,0) rotate(2.2deg);opacity:.82;box-shadow:0 0 18px #d9ffff88}}@keyframes memoryGraveGlow{to{filter:brightness(1.7);transform:scaleX(1.025)}}
.achievement-menu-environment[data-scene="court"]{background:radial-gradient(ellipse at 50% 95%,#332414 0 6%,#090604 23%,#000 64%)}.achievement-menu-environment[data-scene="court"] .ame-layer{background:radial-gradient(ellipse at 50% 112%,#62442233 0 8%,#15100a 25%,transparent 51%),repeating-linear-gradient(90deg,transparent 0 8%,#d2a8660e 8.1%,transparent 8.3% 16%),linear-gradient(#000 0 54%,#080604);animation:courtRoomBreathe 8s ease-in-out infinite alternate}.achievement-menu-environment[data-scene="court"] .ame-layer::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 8%,#b78c4c0d 8.1% 8.35%,transparent 8.55% 16%),linear-gradient(90deg,transparent 47.5%,#f0c98718 50%,transparent 52.5%);filter:drop-shadow(0 0 22px #d0a66722)}.ame-court-haze{position:absolute;left:-10%;right:-10%;bottom:-8%;height:48%;background:radial-gradient(ellipse at 50% 100%,#c5924930,transparent 58%),linear-gradient(176deg,transparent,#aa7a3912);filter:blur(18px);animation:courtHaze 7s ease-in-out infinite alternate}.ame-court-sparks{position:absolute;inset:0}.ame-court-sparks i{position:absolute;left:calc(7% + var(--i)*6.25%);bottom:calc(5% + (var(--i)*3%));width:2px;height:2px;border-radius:50%;background:#ffe9bb;box-shadow:0 0 7px #fff0cc,0 0 19px #c78d43;opacity:.1;animation:courtSpark calc(4.8s + var(--i)*.16s) ease-out infinite;animation-delay:calc(var(--i)*-.46s)}.ame-throne::before,.ame-throne::after{border-color:#b58a4b38;filter:drop-shadow(0 0 21px #d5a14b13);animation:courtThroneBreathe 6.5s ease-in-out infinite alternate}.ame-crown{opacity:.78;filter:drop-shadow(0 0 18px #c89a5544);animation:courtCrown 5s ease-in-out infinite alternate}.ame-seam{width:2px;background:linear-gradient(transparent,#c99e616b 18%,#fff5d7c9 50%,#ad7b3f63 82%,transparent);box-shadow:0 0 12px #fff4d788,0 0 70px #ba824f44;animation:courtSeamBreathe 3.8s ease-in-out infinite alternate}@keyframes courtRoomBreathe{to{filter:brightness(1.17);transform:scale(1.012)}}@keyframes courtHaze{to{transform:translate3d(2%,-2.5%,0) scale(1.06);opacity:.68}}@keyframes courtSpark{0%{transform:translate3d(0,20px,0) scale(.5);opacity:0}18%{opacity:.72}100%{transform:translate3d(calc((var(--i) - 7)*2px),-48vh,0) scale(1.25);opacity:0}}@keyframes courtThroneBreathe{to{filter:drop-shadow(0 0 33px #e7b7652b);opacity:.94}}@keyframes courtCrown{to{filter:drop-shadow(0 0 30px #ffe0a071);opacity:1;transform:translateX(-50%) translateY(-5px) scale(1.025)}}@keyframes courtSeamBreathe{to{opacity:.45;filter:brightness(1.6)}}
.divided-court-rupture{background:radial-gradient(ellipse at 50% 50%,#4c351b24,transparent 31%),#000;overflow:hidden;animation:ruptureVeil 2.4s ease both}.divided-court-rupture::before{content:"";position:absolute;z-index:5;inset:-22%;background:radial-gradient(ellipse at 50% 50%,#fff 0 1%,#ffe5adbd 2%,#d69e5855 5%,transparent 18%),linear-gradient(90deg,transparent 44%,#fff8ddc7 49.6%,#fff 50%,#fff8ddc7 50.4%,transparent 56%);mix-blend-mode:screen;opacity:0;animation:courtRejoinFlash 2.4s cubic-bezier(.22,.7,.15,1) both}.divided-court-half{backface-visibility:hidden;contain:paint;transform:translateZ(0);filter:brightness(.92);will-change:transform,filter}.divided-court-half.left{animation:severLeftPolished 2.4s cubic-bezier(.22,.72,.16,1) both}.divided-court-half.right{animation:severRightPolished 2.4s cubic-bezier(.22,.72,.16,1) both}.divided-court-rupture::after{z-index:6;width:3px;background:linear-gradient(transparent,#d8a96b8c 12%,#fff 48% 52%,#d8a96b8c 88%,transparent);box-shadow:0 0 14px #fff,0 0 40px #ffe2ab,0 0 110px #b5763d;animation:seamStrikePolished 2.4s cubic-bezier(.22,.72,.16,1) both}.divided-court-rupture.impact{animation:ruptureVeil 2.4s ease both,courtImpactPolished .42s cubic-bezier(.2,.9,.25,1) both}.divided-court-rupture.impact .divided-court-half{filter:brightness(1.55) saturate(1.12)}@keyframes ruptureVeil{0%{opacity:0}5%,91%{opacity:1}100%{opacity:0}}@keyframes severLeftPolished{0%,7%{transform:translate3d(0,0,0);filter:brightness(1)}18%{transform:translate3d(-5.5vw,1.2vh,0) rotate(-.42deg);filter:brightness(1.12)}34%,62%{transform:translate3d(-8.5vw,.4vh,0) rotate(-.7deg);filter:brightness(.78)}76%{transform:translate3d(-6vw,-.4vh,0) rotate(-.35deg);filter:brightness(1.2)}86%{transform:translate3d(1.2vw,0,0);filter:brightness(1.8)}93%{transform:translate3d(-.35vw,0,0);filter:brightness(1.15)}100%{transform:translate3d(0,0,0);filter:brightness(1)}}@keyframes severRightPolished{0%,7%{transform:translate3d(0,0,0);filter:brightness(1)}18%{transform:translate3d(5.5vw,-1.2vh,0) rotate(.42deg);filter:brightness(1.12)}34%,62%{transform:translate3d(8.5vw,-.4vh,0) rotate(.7deg);filter:brightness(.78)}76%{transform:translate3d(6vw,.4vh,0) rotate(.35deg);filter:brightness(1.2)}86%{transform:translate3d(-1.2vw,0,0);filter:brightness(1.8)}93%{transform:translate3d(.35vw,0,0);filter:brightness(1.15)}100%{transform:translate3d(0,0,0);filter:brightness(1)}}@keyframes seamStrikePolished{0%,5%{transform:scaleY(0);opacity:0}12%{transform:scaleY(1);opacity:1}38%,62%{opacity:.48;filter:brightness(.8)}79%{opacity:.8;filter:brightness(1.3)}86%{transform:scaleX(4);opacity:1;filter:brightness(2)}100%{transform:scaleX(.5);opacity:0}}@keyframes courtRejoinFlash{0%,72%{opacity:0;transform:scale(.82)}84%{opacity:.32;transform:scale(1)}87%{opacity:1;transform:scale(1.04)}92%{opacity:.24}100%{opacity:0;transform:scale(1.12)}}@keyframes courtImpactPolished{0%{transform:translate3d(0,0,0)}24%{transform:translate3d(5px,-2px,0)}48%{transform:translate3d(-4px,1px,0)}72%{transform:translate3d(2px,0,0)}100%{transform:translate3d(0,0,0)}}
/* Viewport centering: the scene cannot inherit an offset from the scrollable menu wrapper. */
.achievement-menu-environment{inset:auto;left:var(--road-achievement-center-x,50%);top:50vh;width:100vw;height:100vh;margin:0;transform:translate3d(-50%,-50%,0);transform-origin:50% 50%}#menu[data-road-achievement-skin="achievement-menu-divided-court"] .home-title,.divided-court-copy[data-road-achievement-skin="achievement-menu-divided-court"] .home-title{transform:translateX(-20px)}.ame-throne::after{transform:none;transform-origin:50% 50%;background:linear-gradient(270deg,#050403,#13100c 52%,#020202)}.ame-memory-card:hover,.ame-memory-card:focus-visible{transform:translate3d(-50%,-10px,0) scale(1.09)}.ame-court-sparks i{left:calc(6.25% + var(--i)*6.25%)}.divided-court-half.left{clip-path:polygon(0 0,var(--road-achievement-center-x,50%) 0,calc(var(--road-achievement-center-x,50%) - 1vw) 100%,0 100%)}.divided-court-half.right{clip-path:polygon(var(--road-achievement-center-x,50%) 0,100% 0,100% 100%,calc(var(--road-achievement-center-x,50%) + 1vw) 100%)}.divided-court-rupture::after{left:var(--road-achievement-center-x,50%)}@keyframes memoryCardGlide{0%{transform:translate3d(calc(-50% - 2px),5px,0) rotate(-1.2deg);opacity:.34;box-shadow:0 0 8px #b9eeee30}100%{transform:translate3d(calc(-50% + 3px),-10px,0) rotate(2.2deg);opacity:.82;box-shadow:0 0 18px #d9ffff88}}@keyframes memoryAurora{0%{transform:translate3d(-1.5%,1%,0) skewX(2deg);opacity:.5}100%{transform:translate3d(1.5%,-2%,0) skewX(-2deg);opacity:.82}}@keyframes courtHaze{0%{transform:translate3d(-1%,-.5%,0) scale(1.02);opacity:.44}100%{transform:translate3d(1%,-2.5%,0) scale(1.06);opacity:.68}}
@media(prefers-reduced-motion:reduce){.achievement-menu-environment *{animation:none!important}.divided-court-rupture{display:none!important}}

/* ================= The Hollow Chorus ================= */
.achievement-menu-environment[data-scene="hollow"]{background:#07050c;--hc-violet:#a45cff;--hc-ink:#0b0610;--hc-red:#b3262c;--hc-gold:#d9a948}
.hc-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 62% 20%,#3a2a5c55,transparent 42%),radial-gradient(ellipse at 50% 120%,#2a0f3a80,transparent 55%),linear-gradient(#08060f 0%,#140d22 38%,#1b1027 56%,#07050b 100%)}
.hc-stars{position:absolute;inset:0 0 45% 0;background-image:radial-gradient(1px 1px at 12% 18%,#fff9 50%,transparent),radial-gradient(1px 1px at 27% 8%,#fff6 50%,transparent),radial-gradient(1.5px 1.5px at 41% 22%,#e8d8ff99 50%,transparent),radial-gradient(1px 1px at 78% 12%,#fff8 50%,transparent),radial-gradient(1px 1px at 88% 30%,#fff5 50%,transparent),radial-gradient(1px 1px at 56% 6%,#fff7 50%,transparent),radial-gradient(1px 1px at 8% 38%,#fff4 50%,transparent),radial-gradient(1.5px 1.5px at 70% 40%,#d9c2ff77 50%,transparent);animation:hcTwinkle 7s ease-in-out infinite alternate}
.hc-moon{position:absolute;left:64%;top:9vh;width:clamp(120px,17vw,250px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fffaf2,#ece2f2 45%,#b9a7cf 78%,#8a73aa 100%);box-shadow:0 0 70px 18px #c9b3ff55,0 0 180px 60px #7e46d52e;animation:hcMoonBreath 9s ease-in-out infinite alternate}
.hc-moon::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 64% 60%,#6d4a8f40 0 9%,transparent 10%),radial-gradient(circle at 30% 64%,#6d4a8f33 0 6%,transparent 7%),radial-gradient(circle at 52% 30%,#6d4a8f26 0 5%,transparent 6%)}
.hc-moon::after{content:"";position:absolute;left:12%;right:12%;top:60%;bottom:0;border-radius:0 0 50% 50%/0 0 100% 100%;background:radial-gradient(ellipse at 50% 100%,#3b165c66,transparent 72%)}
.hc-tear{position:absolute;top:90%;width:2px;height:0;border-radius:0 0 3px 3px;background:linear-gradient(#1a0b24,#5b2a86 70%,#b27cff);box-shadow:0 0 8px #a45cff88;animation:hcTear 7.5s cubic-bezier(.55,.05,.7,.4) infinite;animation-delay:calc(var(--i)*-2.6s)}
.hc-tear:nth-child(1){left:31%;top:88%}.hc-tear:nth-child(2){left:62%;top:91%}.hc-tear:nth-child(3){left:47%;top:97%}
.hc-mountains{position:absolute;left:-5%;right:-5%;bottom:30vh;height:26vh;background:linear-gradient(#241832,#110b19);clip-path:polygon(0 100%,0 62%,8% 44%,15% 58%,24% 30%,33% 52%,41% 38%,50% 60%,58% 26%,66% 48%,74% 36%,83% 55%,91% 40%,100% 58%,100% 100%);opacity:.9}
.hc-mountains::after{content:"";position:absolute;inset:0;background:linear-gradient(#2f2142 0,#171021);clip-path:polygon(0 100%,0 78%,12% 64%,22% 76%,35% 58%,47% 74%,60% 60%,72% 77%,84% 62%,100% 80%,100% 100%)}
.hc-field{position:absolute;left:0;right:0;bottom:0;height:31vh;background:linear-gradient(#1c1030 0,#0d0718 40%,#05030a),repeating-linear-gradient(180deg,transparent 0 9px,#b28cff0c 10px 11px);overflow:hidden}
.hc-field::before{content:"";position:absolute;left:52%;top:0;width:clamp(90px,13vw,190px);height:100%;transform:translateX(-50%);background:linear-gradient(#e9dcff55,#b58cff22 40%,transparent 80%);filter:blur(6px);-webkit-mask:repeating-linear-gradient(180deg,#000 0 3px,transparent 4px 9px);mask:repeating-linear-gradient(180deg,#000 0 3px,transparent 4px 9px);animation:hcShimmer 5s ease-in-out infinite alternate}
.hc-torii{position:absolute;left:calc(clamp(46px,7vw,120px) + 3vw);bottom:10.5vh;width:clamp(110px,14vw,210px);height:clamp(100px,15vh,170px);transform:rotate(-3deg);transform-origin:50% 100%}
.hc-torii i{position:absolute;display:block}
.hc-torii .kasagi{left:-10%;right:-10%;top:0;height:13%;border-radius:4px 4px 50% 50%/4px 4px 100% 100%;background:linear-gradient(#1b0d11,#0c0508);box-shadow:0 2px 0 #7a1c22}
.hc-torii .nuki{left:4%;right:4%;top:28%;height:8%;background:linear-gradient(#8e1f26,#4a0e14)}
.hc-torii .pillar{top:6%;bottom:0;width:11%;background:linear-gradient(90deg,#5d1319,#a3262d 45%,#4c0f14)}
.hc-torii .pillar.l{left:14%}.hc-torii .pillar.r{right:14%;clip-path:polygon(0 0,100% 0,100% 58%,70% 62%,100% 70%,100% 100%,0 100%)}
.hc-torii::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-6px;height:10px;border-radius:50%;background:radial-gradient(ellipse,#b58cff55,transparent 70%);filter:blur(2px)}
.hc-reflect{position:absolute;left:calc(clamp(46px,7vw,120px) + 3vw);bottom:calc(10.5vh - clamp(100px,15vh,170px));width:clamp(110px,14vw,210px);height:clamp(100px,15vh,170px);transform:rotate(3deg) scaleY(-1);transform-origin:50% 0;opacity:.28;filter:blur(1.5px);-webkit-mask:linear-gradient(#000,transparent 85%);mask:linear-gradient(#000,transparent 85%);animation:hcRipple 6s ease-in-out infinite alternate}
.hc-gem{position:absolute;bottom:calc(var(--y)*1vh);left:calc(var(--x)*1%);width:calc(var(--s)*1px);aspect-ratio:.72;clip-path:polygon(50% 0,100% 38%,76% 100%,24% 100%,0 38%);background:linear-gradient(160deg,#f0dcff,#a45cff 40%,#3b1266);filter:drop-shadow(0 0 7px #a45cffcc);animation:hcGem 4.2s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.7s)}
.hc-gem::after{content:"";position:absolute;left:46%;top:100%;width:8%;height:260%;background:linear-gradient(#a45cffaa,transparent)}
.hc-petals{position:absolute;inset:0;width:100%;height:100%}
.hc-chorus{position:absolute;left:10vw;right:10vw;bottom:9vh;display:flex;justify-content:space-around;align-items:flex-end;opacity:0;transition:opacity 2.4s ease;pointer-events:none}
.hc-mask{position:relative;width:clamp(30px,3.4vw,52px);aspect-ratio:.74;border-radius:48% 48% 44% 44%/40% 40% 60% 60%;background:radial-gradient(ellipse at 50% 30%,#fffdf8,#efe6dc 55%,#c9b8b0);box-shadow:0 0 22px #a45cff66,inset 0 -6px 10px #0003;transform:translateY(24px);transition:transform 2.6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.18s)}
.hc-mask::before{content:"";position:absolute;left:14%;right:14%;top:33%;height:15%;background:radial-gradient(21% 40% at 27% 55%,#07030b 82%,transparent 100%),radial-gradient(21% 40% at 73% 55%,#07030b 82%,transparent 100%)}
.hc-mask::after{content:"";position:absolute;left:0;right:0;top:44%;height:52%;background:radial-gradient(11% 5% at 50% 64%,#9b1f2c 78%,transparent 100%),linear-gradient(90deg,transparent 31.6%,#6b2aa0 32% 34.6%,transparent 35% 65%,#6b2aa0 65.4% 68%,transparent 68.4%);-webkit-mask:linear-gradient(#000 72%,transparent);mask:linear-gradient(#000 72%,transparent)}
/* the middle of the line stays open so the menu links read clearly */
.hc-mask:nth-child(4){visibility:hidden}
.achievement-menu-environment[data-scene="hollow"].hc-chant .hc-chorus{opacity:.92}
.achievement-menu-environment[data-scene="hollow"].hc-chant .hc-mask{transform:translateY(0)}
.achievement-menu-environment[data-scene="hollow"].hc-chant .hc-lantern{filter:brightness(.45) saturate(.6)}
.hc-pulse{position:absolute;left:calc(64% + clamp(60px,8.5vw,125px));top:calc(9vh + clamp(60px,8.5vw,125px));width:10px;height:10px;border-radius:50%;border:1px solid #c79cff;opacity:0;transform:translate(-50%,-50%)}
.achievement-menu-environment[data-scene="hollow"].hc-chant .hc-pulse{animation:hcPulse 3.2s ease-out 3}
.hc-curtain{position:absolute;top:0;bottom:0;width:clamp(46px,7vw,120px);background:repeating-linear-gradient(90deg,#140d0c 0 33.3%,#9c4422 33.3% 66.6%,#26402b 66.6% 100%);background-size:clamp(46px,7vw,120px) 100%;box-shadow:inset -18px 0 26px #0009,0 0 40px #000c;transform-origin:50% 0;animation:hcSway 8s ease-in-out infinite alternate}
.hc-curtain::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0000 0 8px,#0005 11px,#fff1 14px,#0000 16px 22px),linear-gradient(#35105acc,#35105a55 24%,transparent 46%,transparent 78%,#1a0826aa)}
.hc-curtain::after{content:"";position:absolute;left:-10%;right:-10%;top:58%;height:14px;border-radius:7px;background:linear-gradient(#e0b55a,#8d6420);box-shadow:0 2px 6px #000a}
.hc-curtain.l{left:0;clip-path:polygon(0 0,100% 0,100% 55%,70% 62%,100% 70%,78% 100%,0 100%)}
.hc-curtain.r{right:0;transform:scaleX(-1);animation-name:hcSwayR;clip-path:polygon(0 0,100% 0,100% 55%,70% 62%,100% 70%,78% 100%,0 100%)}
.hc-beam{position:absolute;left:0;right:0;top:0;height:clamp(30px,4.6vh,50px);background:linear-gradient(#1a0a0c,#3c0f15 55%,#120507);border-bottom:2px solid #c99a42;box-shadow:0 6px 22px #000c}
.hc-beam::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:3px;background:repeating-linear-gradient(90deg,#c99a42 0 18px,transparent 18px 30px);opacity:.55}
.hc-lanterns{position:absolute;left:clamp(50px,8vw,130px);right:clamp(50px,8vw,130px);top:clamp(28px,4.4vh,48px);display:flex;justify-content:space-between}
.hc-lantern{position:relative;width:clamp(22px,2.4vw,38px);aspect-ratio:.78;margin-top:calc(var(--d)*1px);border-radius:46%;background:radial-gradient(ellipse at 50% 55%,#ffd89a 0 18%,#e0472f 46%,#8e1a1f 80%),repeating-linear-gradient(180deg,transparent 0 5px,#0000002e 6px 7px);background-blend-mode:multiply;box-shadow:0 0 20px 4px #ff7a3f55;transform-origin:50% -18px;animation:hcLantern 5s ease-in-out infinite alternate,hcFlicker 3.3s steps(1,end) infinite;animation-delay:calc(var(--i)*-.8s),calc(var(--i)*-1.3s);transition:filter 1.8s ease}
.hc-lantern::before{content:"";position:absolute;left:50%;top:-18px;width:1px;height:18px;background:#0008}
.hc-lantern::after{content:"";position:absolute;left:14%;right:14%;top:-3px;bottom:-3px;border-block:4px solid #16090b;border-radius:3px}
.hc-lantern.corrupt{background:radial-gradient(ellipse at 50% 55%,#f3dcff 0 16%,#9b4dff 46%,#361058 82%),repeating-linear-gradient(180deg,transparent 0 5px,#0000002e 6px 7px);box-shadow:0 0 22px 5px #a45cff66}
.hc-banner{position:absolute;left:calc(clamp(46px,7vw,120px) + 1.6vw);top:13vh;width:clamp(26px,2.7vw,40px);padding:12px 0;writing-mode:vertical-rl;text-orientation:mixed;background:linear-gradient(#e9dfcf,#cdbfa9);color:#2a0d12;font:700 clamp(12px,1.25vw,19px)/1.05 Georgia,"Times New Roman",serif;font-variant:small-caps;letter-spacing:.2em;text-align:center;box-shadow:0 8px 20px #0009;opacity:.84;animation:hcBanner 7s ease-in-out infinite alternate}
.hc-banner::before{content:"";position:absolute;left:-18%;right:-18%;top:-8px;height:6px;border-radius:3px;background:#2b1a0e}
.hc-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,#5b2386aa 56% 58%,transparent 59%),linear-gradient(90deg,transparent 30%,#3b12608c 31% 34%,transparent 35%);-webkit-mask:linear-gradient(transparent 40%,#000);mask:linear-gradient(transparent 40%,#000)}
.hc-stage{position:absolute;left:0;right:0;bottom:0;height:7vh;background:repeating-linear-gradient(90deg,#3b2717 0 60px,#46301d 61px 120px),linear-gradient(#4a321e,#1c1209);box-shadow:0 -8px 30px #000c,inset 0 3px 0 #7a5530;-webkit-mask:linear-gradient(#000,#000);opacity:.95}
.hc-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0,#a45cff22,transparent 60%)}
.hc-lore{position:absolute;left:50%;bottom:calc(7vh + 8px);transform:translateX(-50%);width:min(560px,80vw);text-align:center;color:#d9c8ef;font:italic 400 clamp(11px,1.1vw,14px)/1.4 Georgia,serif;letter-spacing:.06em;text-shadow:0 0 12px #a45cffaa,0 2px 6px #000;opacity:0;transition:opacity 2s ease}
.achievement-menu-environment[data-scene="hollow"].hc-chant .hc-lore{opacity:.85}
.hc-scan{position:absolute;inset:0;pointer-events:none;opacity:.7;background:repeating-linear-gradient(0deg,#09030d00 0 7px,#a855b824 8px 9px,#02010300 10px 15px),repeating-linear-gradient(0deg,transparent 0 8px,#e77cff1e 9px 10px);mix-blend-mode:screen;animation:facGlitchBlocks 1.8s steps(1,end) infinite,hcScanRoll 9s linear infinite}
.achievement-menu-environment[data-scene="hollow"].hc-tearing .hc-scan{opacity:1;filter:brightness(1.8)}
@keyframes hcScanRoll{to{background-position:0 30px,0 -40px}}
.hc-glitch{position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,#35f4e814,transparent 30% 70%,#ff315d18),repeating-linear-gradient(0deg,transparent 0 6px,#a45cff1c 7px 8px,transparent 9px 15px);mix-blend-mode:screen}
.achievement-menu-environment[data-scene="hollow"].hc-tearing .hc-glitch{animation:hcGlitch .5s steps(2,end) 1}
.achievement-menu-environment[data-scene="hollow"].hc-tearing .hc-moon{filter:drop-shadow(-4px 0 #35f4e8) drop-shadow(4px 0 #ff315d)}
@keyframes hcTwinkle{to{opacity:.55}}
@keyframes hcMoonBreath{to{box-shadow:0 0 90px 26px #c9b3ff66,0 0 220px 80px #7e46d53a}}
@keyframes hcTear{0%{height:0;opacity:0;transform:translateY(0)}12%{opacity:1}55%{height:26px;transform:translateY(0)}72%{height:34px;transform:translateY(0);opacity:1}100%{height:10px;transform:translateY(34vh);opacity:0}}
@keyframes hcShimmer{to{opacity:.55;transform:translateX(-50%) scaleX(1.18)}}
@keyframes hcRipple{to{transform:rotate(3deg) scaleY(-1) skewX(4deg);opacity:.2}}
@keyframes hcGem{to{filter:drop-shadow(0 0 13px #c28bffee);transform:translateY(-3px)}}
@keyframes hcSway{to{transform:skewX(-1.3deg)}}
@keyframes hcSwayR{to{transform:scaleX(-1) skewX(-1.3deg)}}
@keyframes hcLantern{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes hcFlicker{0%,100%{opacity:1}47%{opacity:.8}49%{opacity:1}83%{opacity:.88}}
@keyframes hcBanner{to{transform:skewY(-1.5deg) translateX(-2px)}}
@keyframes hcPulse{0%{opacity:.9;width:10px;height:10px}100%{opacity:0;width:70vmin;height:70vmin;border-color:#a45cff00}}
@keyframes hcGlitch{0%{opacity:.9;transform:translateX(-6px)}50%{opacity:.6;transform:translateX(5px)}100%{opacity:0;transform:none}}
@media(max-width:700px){.hc-banner{display:none}.hc-torii,.hc-reflect{left:calc(clamp(46px,7vw,120px) + 2vw)}.hc-moon{left:58%}.hc-mask:nth-child(n+5){display:none}.hc-lantern:nth-child(even){display:none}.hc-chorus{left:16vw;right:16vw}}
@media(prefers-reduced-motion:reduce){.achievement-menu-environment[data-scene="hollow"] *{animation:none!important;transition:none!important}}
/* the reward card preview */
.achievement-menu-preview[data-achievement-menu="achievement-menu-hollow-chorus"]{background:radial-gradient(circle at 68% 32%,#fffaf2 0 9%,#c9b3ff66 10%,transparent 22%),linear-gradient(#0c0816,#1c1030 60%,#07050b)!important}
.achievement-menu-preview[data-achievement-menu="achievement-menu-hollow-chorus"]::before{inset:0;background:radial-gradient(3px 2px at 22% 30%,#ff9fc4 60%,transparent),radial-gradient(3px 2px at 41% 55%,#ffb3d0 60%,transparent),radial-gradient(3px 2px at 58% 22%,#ff9fc4 60%,transparent),radial-gradient(3px 2px at 76% 64%,#6a3a8a 60%,transparent),radial-gradient(3px 2px at 33% 76%,#4b2366 60%,transparent),radial-gradient(3px 2px at 64% 44%,#ffc4dc 60%,transparent),linear-gradient(90deg,#140d0c 0 3%,#9c4422 3% 6%,#26402b 6% 9%,transparent 9% 91%,#26402b 91% 94%,#9c4422 94% 97%,#140d0c 97%);animation:hcPreviewFall 6s linear infinite}
.achievement-menu-preview[data-achievement-menu="achievement-menu-hollow-chorus"]::after{inset:auto 0 0 0;height:30%;background:radial-gradient(4px 5px at 30% 40%,#c28bff 60%,transparent),radial-gradient(4px 5px at 70% 60%,#a45cff 60%,transparent),linear-gradient(#1c1030,#05030a);box-shadow:0 -1px 0 #a45cff55}
@keyframes hcPreviewFall{from{background-position:0 -40px,0 -40px,0 -40px,0 -40px,0 -40px,0 -40px,0 0}to{background-position:6px 40px,-4px 40px,5px 40px,-6px 40px,4px 40px,-3px 40px,0 0}}

/* ---- smoother card effects ---- */
.lbe>*{will-change:transform,opacity;backface-visibility:hidden}
/* ---- the Unwriting ---- */
.m.unwrite-possessed,.card.unwrite-possessed,.card.erase-glitch,.m.erase-glitch{animation:uwPossess .92s steps(1,end) 1}
.m.unwrite-possessed::after,.card.unwrite-possessed::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,#e77cff38 0 2px,transparent 2px 4px),repeating-linear-gradient(90deg,transparent 0 11px,#35f4e81c 12px 13px);animation:uwStatic .92s steps(6,end) 1}
@keyframes uwPossess{
  0%{translate:0 0;clip-path:inset(0);filter:none}
  7%{translate:-6px 0;filter:invert(1) hue-rotate(180deg) contrast(1.6)}
  15%{translate:7px 1px;clip-path:polygon(0 0,100% 0,100% 28%,0 28%,0 44%,100% 44%,100% 100%,0 100%);filter:drop-shadow(-5px 0 #35f4e8) drop-shadow(5px 0 #ff315d)}
  24%{translate:0 0;clip-path:inset(0);filter:grayscale(1) brightness(1.9)}
  33%{translate:-3px -2px;filter:drop-shadow(-7px 0 #35f4e8) drop-shadow(7px 0 #ff315d) contrast(1.5)}
  44%{translate:0 0;filter:brightness(.15)}
  51%{filter:invert(.9) contrast(1.4)}
  60%{translate:-10px 0;clip-path:polygon(0 10%,100% 10%,100% 21%,0 21%,0 58%,100% 58%,100% 87%,0 87%);filter:none}
  71%{translate:3px 1px;clip-path:inset(0);filter:saturate(0) contrast(2.2)}
  83%{translate:0 0;filter:drop-shadow(-2px 0 #35f4e8) drop-shadow(2px 0 #ff315d)}
  100%{translate:0 0;clip-path:inset(0);filter:none}}
@keyframes uwStatic{0%{opacity:.9;background-position:0 0,0 0}50%{opacity:.35;background-position:0 7px,5px 0}100%{opacity:0;background-position:0 -9px,-6px 0}}
/* an Unwritten minion's portrait twitches now and then, as if something is still being removed
   (on the art, so the card's own hit and summon animations are untouched) */
.m.unwritten .mart{animation:uwHaunt 8.3s steps(1,end) infinite}
.m.unwritten:nth-child(2n) .mart{animation-duration:10.7s;animation-delay:-3.1s}
.m.unwritten:nth-child(3n) .mart{animation-duration:6.9s;animation-delay:-5.3s}
@keyframes uwHaunt{
  0%,95.5%,100%{translate:0 0;clip-path:none}
  96%{translate:3px 0;clip-path:polygon(0 0,100% 0,100% 36%,0 36%,0 52%,100% 52%,100% 100%,0 100%)}
  96.6%{translate:-4px 0;clip-path:none}
  97.4%{translate:0 0;clip-path:polygon(0 62%,100% 62%,100% 71%,0 71%,0 100%,100% 100%,100% 0,0 0)}
  98%{translate:2px 0;clip-path:none}}
.uw-whisper{position:fixed;z-index:100002;pointer-events:none;transform:translate(-50%,-50%);white-space:nowrap;
  font:700 11px/1 var(--mono,monospace);letter-spacing:.2em;color:#f1e6ff;text-transform:lowercase;
  text-shadow:-2px 0 #35f4e8,2px 0 #ff315d,0 0 12px #a855b8;animation:uwWhisper 1.2s steps(10,end) forwards}
@keyframes uwWhisper{0%{opacity:0;letter-spacing:.6em}12%{opacity:1}22%{opacity:.2}30%{opacity:1;letter-spacing:.2em}62%{opacity:.85;translate:0 -6px}70%{opacity:.1}78%{opacity:.9}100%{opacity:0;translate:0 -18px;letter-spacing:.05em}}
.uw-tear{position:fixed;left:0;right:0;z-index:100001;height:4px;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,#35f4e8aa 20%,#fff 48%,#ff315daa 76%,transparent);box-shadow:0 0 14px #e77cff;animation:uwTear .34s steps(3,end) forwards}
@keyframes uwTear{0%{opacity:1;translate:-18px 0;scale:1 1}50%{opacity:.8;translate:14px 0;scale:1 3}100%{opacity:0;translate:0 0;scale:1 .5}}
.lbe-redact.uw-redact{display:flex;align-items:center;justify-content:center;width:132px;color:#ff3df2;font:800 9px/1 var(--mono,monospace);letter-spacing:.3em;text-shadow:0 0 6px #ff3df2}
@media(prefers-reduced-motion:reduce){.m.unwritten .mart,.m.unwrite-possessed,.m.unwrite-possessed::after,.card.unwrite-possessed,.uw-whisper,.uw-tear{animation:none!important}.uw-whisper,.uw-tear{display:none}}

/* ================= Legendary rivalries ================= */
.rv-box{position:fixed;z-index:100011;max-width:min(330px,82vw);padding:9px 14px 11px;border:1px solid var(--rv-c,#dcb35c);border-radius:10px;
  background:linear-gradient(#17121cf5,#0c0a11f5);color:#efe8f6;box-shadow:0 12px 32px #000c,0 0 20px color-mix(in srgb,var(--rv-c,#dcb35c) 35%,transparent);
  pointer-events:auto;cursor:pointer;transform-origin:var(--rv-tail,50%) 100%;animation:rvIn .26s cubic-bezier(.2,.8,.3,1.2) both}
.rv-box.below{transform-origin:var(--rv-tail,50%) 0}
.rv-box::after{content:"";position:absolute;left:var(--rv-tail,50%);bottom:-8px;width:14px;height:14px;transform:translateX(-50%) rotate(45deg);
  background:#0c0a11;border-right:1px solid var(--rv-c,#dcb35c);border-bottom:1px solid var(--rv-c,#dcb35c)}
.rv-box.below::after{bottom:auto;top:-8px;transform:translateX(-50%) rotate(225deg);background:#17121c}
.rv-box.centre::after{display:none}
.rv-name{display:block;margin-bottom:3px;font:800 9px/1 var(--mono,monospace);letter-spacing:.24em;text-transform:uppercase;color:var(--rv-c,#dcb35c)}
.rv-text{display:block;font:italic 500 15px/1.35 Georgia,"Times New Roman",serif}
.rv-text i{font-style:inherit;opacity:0}
.rv-box.nys .rv-text{text-shadow:-1px 0 #35f4e8aa,1px 0 #ff315daa}
.rv-box.out{animation:rvOut .2s ease-in forwards}
@keyframes rvIn{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
@keyframes rvOut{to{opacity:0;transform:translateY(-6px) scale(.96)}}
@media(prefers-reduced-motion:reduce){.rv-box,.rv-box.out{animation:none}}
/* the Rivalry Theatre's controls */
.rvt{position:fixed;left:12px;top:118px;z-index:100009;width:min(280px,calc(100vw - 24px));border:1px solid #dcb35c88;border-radius:10px;
  background:linear-gradient(#15121bf2,#0b0a10f2);color:#eee6d6;box-shadow:0 14px 36px #000c;font:12px/1.4 var(--ui-font,system-ui,sans-serif)}
.rvt header{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #dcb35c33}
.rvt header b{font:700 14px Georgia,serif;letter-spacing:.06em;color:#f3e2b3}
.rvt header span{flex:1;color:#9d927f;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.rvt header button{width:24px;height:24px;border:1px solid #dcb35c55;border-radius:6px;background:#0000;color:#dcb35c;cursor:pointer}
.rvt.folded .rvt-body{display:none}
.rvt-body{display:grid;gap:8px;padding:10px}
.rvt label{display:grid;gap:3px;color:#b9ad96;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.rvt select{padding:6px 8px;border:1px solid #dcb35c55;border-radius:6px;background:#0d0b12;color:#f1e9da;font:13px Georgia,serif;letter-spacing:0;text-transform:none}
.rvt .rvt-check{display:flex;align-items:center;gap:6px;letter-spacing:.04em;text-transform:none;font-size:12px;color:#d7ccb8}
.rvt-side,.rvt-row{display:flex;gap:6px}
.rvt-side button,.rvt-row button{flex:1;padding:7px 6px;border:1px solid #dcb35c55;border-radius:6px;background:#1b1622;color:#eadfca;cursor:pointer;font:600 12px var(--ui-font,system-ui,sans-serif)}
.rvt-side button.on{background:#dcb35c;color:#1a1208;border-color:#dcb35c}
.rvt-side button:disabled{opacity:.35;cursor:not-allowed}
.rvt-row .pri{background:linear-gradient(#e8c26d,#b88b35);color:#1a1208;border-color:#e8c26d}
.rvt button:hover:not(:disabled){filter:brightness(1.15)}
.rvt-now{min-height:32px;padding:6px 8px;border-radius:6px;background:#0000004d;color:#cfc3ad;font:italic 12px/1.35 Georgia,serif}
@media(max-width:700px){.rvt{top:auto;bottom:10px;left:10px}}

/* ================= Health breakdown ================= */
#php,#ehp,#parm,#earm,.thero .hp,.thero .arm{cursor:help}
.hpb{position:fixed;z-index:100012;width:min(300px,calc(100vw - 20px));padding:10px 12px 11px;border:1px solid #dcb35c88;border-radius:10px;
  background:linear-gradient(#17131cf7,#0c0a10f7);color:#ece4d4;box-shadow:0 14px 34px #000c;pointer-events:none;
  font:12px/1.4 var(--ui-font,system-ui,sans-serif);animation:hpbIn .14s ease-out both}
.hpb h4{margin:0 0 6px;font:700 14px/1.2 Georgia,"Times New Roman",serif;color:#f3e2b3;letter-spacing:.03em}
.hpb h4 small{display:block;margin-top:2px;font:600 9px/1 var(--mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:#9d927f}
.hpb .hpb-now{display:flex;gap:10px;margin-bottom:7px;font-size:13px}
.hpb .hpb-now b{font-size:17px;color:#fff}
.hpb .hpb-now .arm b{color:#b9d3ff}
.hpb .hpb-row{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.hpb .hpb-row span:last-child{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.hpb .dmg span:last-child{color:#ff8a7a}
.hpb .heal span:last-child{color:#9be39b}
.hpb .armor span:last-child{color:#b9d3ff}
.hpb .hpb-sub{padding:0 0 3px 12px;color:#b3a891;font-size:11px}
.hpb .hpb-sub i{font-style:normal;color:#8d8372}
.hpb .hpb-sec{margin-top:7px;padding-top:6px;border-top:1px solid #dcb35c2e}
.hpb .hpb-sec > b{display:block;margin-bottom:3px;font:700 9px/1 var(--mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:#dcb35c}
.hpb .hpb-ev{display:flex;gap:8px;color:#cfc4b0;font-size:11px}
.hpb .hpb-ev em{flex:0 0 30px;font-style:normal;color:#8d8372}
.hpb .hpb-ev .d{color:#ff8a7a}.hpb .hpb-ev .h{color:#9be39b}.hpb .hpb-ev .a{color:#b9d3ff}
.hpb .hpb-quiet{color:#8d8372;font-style:italic}
@keyframes hpbIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hpb{animation:none}}

/* ================= Khaz: Pack or Council ================= */
.khaz-stance{margin-top:3px;padding:2px 6px;border-radius:4px;font:700 8px/1.3 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase}
.khaz-stance.pack{background:#c8783a2e;color:#f0a867;border:1px solid #f0a86766}
.khaz-stance.council{background:#7fa6d82e;color:#a9c8f0;border:1px solid #a9c8f066}
.khaz-stance.even,.khaz-stance.none{background:#ffffff0d;color:#a39a88;border:1px solid #ffffff22}

/* ================= Death: torn apart, into shadow ================= */
.ds-wrap{position:fixed;z-index:9000;pointer-events:none;contain:layout style}
.ds-shard{position:absolute;left:0;top:0;transform-origin:var(--ox) var(--oy);will-change:transform,opacity,filter;
  animation:dsTear var(--dur,1050ms) cubic-bezier(.2,.62,.18,1) var(--delay,0ms) forwards}
.ds-shard>*{animation:none!important;transition:none!important}
.ds-rip{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;animation:dsRip 260ms ease-out forwards}
.ds-rip svg{width:100%;height:100%;overflow:visible}
.ds-rip path{fill:none;stroke:var(--ds-c,#ff5a4a);stroke-width:1.6;filter:drop-shadow(0 0 4px var(--ds-c,#ff5a4a))}
.ds-smoke{position:absolute;left:50%;top:55%;width:120%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;
  background:radial-gradient(circle,#050308ee 0%,#0b0712aa 34%,#120a1a44 58%,transparent 72%);filter:blur(6px);
  opacity:0;animation:dsSmoke 1550ms ease-out 120ms forwards}
.ds-wisp{position:absolute;width:10px;height:26px;border-radius:50%;background:radial-gradient(ellipse at 50% 70%,#07040bdd,#0000 70%);
  filter:blur(3px);opacity:0;animation:dsWisp var(--wd,1200ms) ease-out var(--wdelay,200ms) forwards}
@keyframes dsTear{
  0%{transform:translate(0,0) rotate(0);filter:brightness(1) saturate(1);opacity:1}
  14%{transform:translate(calc(var(--tx)*.22),calc(var(--ty)*.22)) rotate(calc(var(--rot)*.3));filter:brightness(1.25) saturate(1.1);opacity:1}
  55%{filter:brightness(.35) saturate(.25) blur(.6px);opacity:.85}
  100%{transform:translate(var(--tx),calc(var(--ty) + var(--sink))) rotate(var(--rot)) scale(.92);filter:brightness(0) saturate(0) blur(3px);opacity:0}}
@keyframes dsRip{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@keyframes dsSmoke{0%{opacity:0;transform:scale(.55)}35%{opacity:.95}100%{opacity:0;transform:scale(1.35) translateY(-8%)}}
@keyframes dsWisp{0%{opacity:0;transform:translate(0,0) scale(.6)}30%{opacity:.8}100%{opacity:0;transform:translate(var(--wx),-46px) scale(1.4)}}
@media(prefers-reduced-motion:reduce){
  .ds-shard{animation:dsFade 420ms ease-out forwards}.ds-rip,.ds-smoke,.ds-wisp{display:none}
  @keyframes dsFade{to{opacity:0;filter:brightness(0)}}}

/* ================= Legendary barks ================= */
.rv-box.bark{max-width:min(260px,70vw);padding:7px 11px 8px}
.rv-box.bark .rv-text{font-size:14px}
.rv-box.bark.bk-jitter{animation:bkJitter .09s steps(2) infinite}
.rv-box.bark.bk-jitter .rv-text{animation:bkFlicker .5s steps(3) infinite}
.m.bk-buzz{animation:bkBuzz .07s linear infinite}
@keyframes bkJitter{0%{translate:-1px 1px}25%{translate:2px -1px}50%{translate:-2px 0}75%{translate:1px 2px}100%{translate:0 -1px}}
@keyframes bkBuzz{0%{translate:-1px 0;rotate:-.6deg}50%{translate:1px -1px;rotate:.6deg}100%{translate:0 1px;rotate:0deg}}
@keyframes bkFlicker{0%,100%{text-shadow:0 0 6px #a8e6ff}50%{text-shadow:-1px 0 #ff9ce6,1px 0 #9cf6ff,0 0 10px #d8b4ff}}
@media(prefers-reduced-motion:reduce){.rv-box.bark.bk-jitter,.rv-box.bark.bk-jitter .rv-text,.m.bk-buzz{animation:none}}
.bkt{display:grid;gap:6px;margin-top:4px;padding-top:8px;border-top:1px solid #dcb35c33}
.bkt-h{font:700 12px Georgia,serif;letter-spacing:.08em;color:#f3e2b3}
.bkt-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.bkt-grid button{padding:6px 5px;border:1px solid #dcb35c55;border-radius:6px;background:#1b1622;color:#eadfca;cursor:pointer;font:600 11px var(--ui-font,system-ui,sans-serif)}
.bkt-grid button:hover{filter:brightness(1.15)}
.bkt-grid button:disabled{opacity:.35;cursor:not-allowed}

.aekera-arg{position:fixed;inset:0;z-index:100900;display:none;place-items:center;padding:24px;background:#000;color:#ececf3;font-family:var(--mono,monospace);isolation:isolate}.aekera-arg.on{display:grid}.aekera-arg::before,.aekera-arg::after{content:"";position:absolute;inset:0;pointer-events:none}.aekera-arg::before{opacity:.18;background:repeating-linear-gradient(0deg,#f003 0 1px,transparent 1px 4px),linear-gradient(90deg,#f003,transparent 2%,transparent 98%,#0ff3);mix-blend-mode:screen;animation:aekeraScan 5s steps(2,end) infinite}.aekera-arg::after{background:linear-gradient(104deg,transparent 0 43%,#f003 44% 45%,transparent 46% 54%,#0ff3 55% 56%,transparent 57%);opacity:.12;animation:aekeraDrift 9s steps(4,end) infinite}.aekera-arg-box{position:relative;z-index:1;width:min(620px,94vw);padding:clamp(25px,5vw,52px);border:1px solid #d9d9e744;background:#030305e8;box-shadow:0 0 0 1px #f004,0 0 0 2px #0ff3,0 24px 80px #000;text-align:center}.aekera-arg-title,.aekera-arg-question,.aekera-arg-status{margin:0}.aekera-arg-title{color:#f4f5ff;font:700 clamp(20px,4vw,42px)/1.1 var(--serif,serif);letter-spacing:.12em;text-shadow:2px 0 #f004,-2px 0 #0ff4}.aekera-arg-eye{display:none;width:86px;height:42px;margin:18px auto -4px;border:1px solid #badfff;background:radial-gradient(ellipse,#020208 0 19%,#bceaff 20% 25%,#17233a 26% 55%,#020207 56%);box-shadow:0 0 18px #a8dcff66}.aekera-arg-eye.on{display:block}.aekera-arg-eye.blink-1{animation:aekeraBlinkOnce 1.5s steps(2,end) 1}.aekera-arg-eye.blink-2{animation:aekeraBlinkTwice 1.8s steps(3,end) 1}.aekera-arg-question{margin:28px auto 22px;max-width:42ch;color:#d7d7e3;font:500 clamp(13px,2vw,17px)/1.65 var(--mono,monospace)}.aekera-arg-answers{display:grid;gap:9px}.aekera-arg-answer{padding:13px 16px;border:1px solid #6a6b7a;background:#08080d;color:#eeeef8;font:700 11px/1.4 var(--mono,monospace);letter-spacing:.06em;text-align:left;cursor:pointer}.aekera-arg-answer:focus-visible{outline:2px solid #e6f2ff;outline-offset:3px}.aekera-arg-answer:hover{border-color:#f1f4ff;background:#12121a}.aekera-arg-status{min-height:1.5em;margin-top:18px;color:#b8bbc9;font:700 9px/1.5 var(--mono,monospace);letter-spacing:.1em}.aekera-arg-hint{margin:20px 0 0;color:#777987;font:700 8px var(--mono,monospace);letter-spacing:.14em}@keyframes aekeraScan{50%{opacity:.38;transform:translateY(1px)}}@keyframes aekeraDrift{25%{transform:translateX(2px)}75%{transform:translateX(-2px)}}@keyframes aekeraBlinkOnce{46%,54%{transform:scaleY(.08)}}@keyframes aekeraBlinkTwice{28%,35%,68%,75%{transform:scaleY(.08)}}
.aekera-arg{background:radial-gradient(circle at 50% 46%,#2a1044 0 2%,#08010f 19%,#000 62%),#000;overflow:hidden}.aekera-arg::before{inset:-14%;opacity:.9;background:radial-gradient(circle at 50% 50%,#000 0 11%,#140622 12% 19%,transparent 20%),repeating-conic-gradient(from 0deg at 50% 50%,#d4a64a00 0 10deg,#d4a64a42 11deg 12deg,#d4a64a00 13deg 30deg);animation:aekeraSigilTurn 26s linear infinite}.aekera-arg::after{opacity:.62;background-image:radial-gradient(circle,#fff7 0 1px,transparent 1.5px),radial-gradient(circle,#b98bff88 0 1px,transparent 1.5px),radial-gradient(circle,#f0c96177 0 1px,transparent 1.5px);background-size:137px 151px,211px 197px,293px 263px;background-position:0 0,50px 90px,100px 30px;animation:aekeraStars 18s steps(8,end) infinite}.aekera-arg-sigil{position:absolute;z-index:1;left:50%;top:50%;width:min(76vw,720px);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #d9b55b38;border-radius:50%;background:repeating-conic-gradient(from 9deg,#d9b55b00 0 13deg,#d9b55b42 14deg 15deg,#d9b55b00 16deg 30deg);box-shadow:0 0 90px #4b1f792e,inset 0 0 80px #000;pointer-events:none}.aekera-arg-glitch{position:absolute;z-index:2;inset:0;pointer-events:none;opacity:.2;background:linear-gradient(90deg,#f002,transparent 18% 80%,#0ff2),repeating-linear-gradient(0deg,transparent 0 5px,#fff1 6px 7px);mix-blend-mode:screen}.aekera-arg.on .aekera-arg-glitch{animation:aekeraRgbGlitch 3.8s steps(2,end) infinite}.aekera-arg-copy{position:relative;z-index:3;width:min(620px,94vw);text-align:center;text-shadow:2px 0 #f006,-2px 0 #0ff6,0 2px 18px #000}.aekera-arg-title{margin:0 0 20px;color:#f0cf75;font:700 12px var(--mono,monospace);letter-spacing:.6em}.aekera-arg-answer{background:#09040fb0;border-color:#c19a4c88;text-shadow:1px 0 #f004,-1px 0 #0ff4}.aekera-arg-answer:hover{background:#20122cb8;border-color:#f0cf75}.aekera-arg-hint{color:#bea66b}@keyframes aekeraSigilTurn{to{transform:rotate(360deg)}}@keyframes aekeraStars{50%{background-position:44px 84px,7px 142px,143px 78px}}@keyframes aekeraRgbGlitch{47%,53%{transform:translateX(1px)}49%{transform:translateX(-2px)}}@media(prefers-reduced-motion:reduce){.aekera-arg::before,.aekera-arg::after,.aekera-arg.on .aekera-arg-glitch{animation:none}.aekera-arg-sigil{transform:translate(-50%,-50%)}}

:is(.cardback-prototype-preview[data-back="back-manifest-totality"],.reward-cardback-visual[data-back="back-manifest-totality"],.back[data-card-back="back-manifest-totality"],.pile[data-card-back="back-manifest-totality"],.tdeckpile[data-card-back="back-manifest-totality"],.manifest-totality-local){position:relative;isolation:isolate;background:#000!important;box-shadow:inset 0 0 28px #ffffff18!important;overflow:visible!important}.cardback-prototype-preview[data-back="back-manifest-totality"]>span{visibility:hidden}.card-back-preview-copy{position:relative;z-index:3}.card-back-preview-close{z-index:3}.manifest-totality-layer{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.manifest-totality-layer .s01,.manifest-totality-layer .s02,.manifest-totality-layer .s03,.manifest-totality-layer .s04,.manifest-totality-layer .s05,.manifest-totality-layer .s06,.manifest-totality-layer .s07,.manifest-totality-layer .s08,.manifest-totality-layer .s09,.manifest-totality-layer .s10,.manifest-totality-layer .s11,.manifest-totality-layer .s12{fill:#000;stroke:transparent;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:manifestShatter 4.2s cubic-bezier(.42,0,.16,1) infinite;animation-delay:calc(var(--card-seq,0)*-.23s)}@keyframes manifestShatter{0%,12%,62%,100%{transform:translate(0,0) rotate(0) skew(0);fill:#000;stroke:transparent;opacity:1}14%{transform:translate(var(--rx),var(--ry)) rotate(var(--rr));fill:#010103;stroke:#8d97a5}18%,34%{transform:translate(var(--x),var(--y)) rotate(var(--r));fill:#000;stroke:#dce3ec;opacity:1}35%{transform:translate(calc(var(--x) + var(--gx)),calc(var(--y) + var(--gy))) rotate(var(--gr)) skewX(38deg) scale(1.78,.34);fill:var(--gf1);stroke:var(--gc1);opacity:1;animation-timing-function:steps(1,end)}36%{transform:translate(calc(var(--x) - var(--gx)),calc(var(--y) - var(--gy))) rotate(var(--grr)) skewY(-34deg) scale(.31,1.74);fill:var(--gf2);stroke:var(--gc2);opacity:.03;animation-timing-function:steps(1,end)}37.5%{transform:translate(calc(var(--x) + var(--gx)),calc(var(--y) + var(--gy))) rotate(var(--gr)) skewX(-41deg) scale(1.92,.28);fill:var(--gf1);stroke:var(--gc2);opacity:.92;animation-timing-function:steps(1,end)}39%,41%{transform:translate(calc(var(--x) - var(--gx)),calc(var(--y) + var(--gy))) rotate(var(--grr)) skewY(31deg) scale(.27,1.86);fill:var(--gf2);stroke:var(--gc1);opacity:.08;animation-timing-function:steps(1,end)}42%{transform:translate(calc(var(--x) + var(--gx)),calc(var(--y) - var(--gy))) rotate(var(--gr)) skewX(46deg) scale(2.05,.24);fill:var(--gf1);stroke:var(--gc1);opacity:1;animation-timing-function:steps(1,end)}43%,45.5%{transform:translate(calc(var(--x) - var(--gx)),calc(var(--y) - var(--gy))) rotate(var(--grr)) skewY(-39deg) scale(.24,1.96);fill:var(--gf2);stroke:var(--gc2);opacity:.02;animation-timing-function:steps(1,end)}47%{transform:translate(calc(var(--x) + var(--gx)),calc(var(--y) + var(--gy))) rotate(var(--gr)) skewX(-44deg) scale(1.88,.3);fill:var(--gf1);stroke:var(--gc2);opacity:.96;animation-timing-function:steps(1,end)}49%{transform:translate(calc(var(--x) - var(--gx)),calc(var(--y) - var(--gy))) rotate(var(--grr)) skewY(42deg) scale(.29,2.02);fill:var(--gf2);stroke:var(--gc1);opacity:.04;animation-timing-function:steps(1,end)}51%,53%{transform:translate(calc(var(--x) + var(--gx)),calc(var(--y) + var(--gy))) rotate(var(--gr)) skewX(35deg) scale(1.7,.38);fill:var(--gf1);stroke:var(--gc1);opacity:.86;animation-timing-function:steps(1,end)}55%{transform:translate(var(--x),var(--y)) rotate(var(--r));fill:#000;stroke:transparent;opacity:1;animation-timing-function:cubic-bezier(.12,.72,.1,1)}58%{transform:translate(0,0) rotate(0);fill:#000;stroke:#fff}60%{transform:scale(1.022);fill:#000;stroke:transparent}}.friend-cardback-skin.back[data-card-back="back-manifest-totality"]::before,.friend-cardback-skin.back[data-card-back="back-manifest-totality"]::after{animation:none}.friend-cardback-skin.back[data-card-back="back-manifest-totality"] .manifest-totality-layer{display:none}@media(prefers-reduced-motion:reduce){.manifest-totality-layer .s01,.manifest-totality-layer .s02,.manifest-totality-layer .s03,.manifest-totality-layer .s04,.manifest-totality-layer .s05,.manifest-totality-layer .s06,.manifest-totality-layer .s07,.manifest-totality-layer .s08,.manifest-totality-layer .s09,.manifest-totality-layer .s10,.manifest-totality-layer .s11,.manifest-totality-layer .s12{animation:none!important}}

:is(.cardback-prototype-preview[data-back="back-manifest-totality"],.reward-cardback-visual[data-back="back-manifest-totality"],.back[data-card-back="back-manifest-totality"],.pile[data-card-back="back-manifest-totality"],.tdeckpile[data-card-back="back-manifest-totality"],.manifest-totality-local):not(.friend-cardback-skin)::after{content:"";position:absolute;z-index:1;inset:-18% -42%;border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent 0 4%,#35f4e877 5% 6%,transparent 7% 27%,#e77cff66 28% 31%,transparent 32% 58%,#ff315d77 59% 62%,transparent 63% 82%,#f4f7ff88 83% 84%,transparent 85%),repeating-linear-gradient(0deg,transparent 0 2px,#f4f7ff80 2px 3px,transparent 3px 6px);animation:manifestScanlines 4.2s steps(1,end) infinite;animation-delay:calc(var(--card-seq,0)*-.23s);transform:translate3d(0,0,0)}@keyframes manifestScanlines{0%,34%,57%,100%{opacity:0;transform:translate3d(0,0,0) skewX(0) scaleX(1)}35%{opacity:.94;transform:translate3d(-31%,-2%,0) skewX(18deg) scaleX(1.44)}36%{opacity:.12;transform:translate3d(37%,3%,0) skewX(-21deg) scaleX(.62)}37.5%{opacity:.88;transform:translate3d(-43%,-3%,0) skewX(27deg) scaleX(1.72)}39%,41%{opacity:.24;transform:translate3d(24%,1%,0) skewX(-13deg) scaleX(.81)}42%{opacity:1;transform:translate3d(48%,-4%,0) skewX(-31deg) scaleX(1.96)}43%,45.5%{opacity:.08;transform:translate3d(-46%,4%,0) skewX(34deg) scaleX(.54)}47%{opacity:.96;transform:translate3d(39%,-2%,0) skewX(-25deg) scaleX(1.83)}49%{opacity:.15;transform:translate3d(-52%,3%,0) skewX(38deg) scaleX(.48)}51%,53%{opacity:.82;transform:translate3d(28%,-1%,0) skewX(-17deg) scaleX(1.56)}55%{opacity:.62;transform:translate3d(-18%,0,0) skewX(9deg) scaleX(1.22)}}@media(prefers-reduced-motion:reduce){:is(.cardback-prototype-preview[data-back="back-manifest-totality"],.reward-cardback-visual[data-back="back-manifest-totality"],.back[data-card-back="back-manifest-totality"],.pile[data-card-back="back-manifest-totality"],.tdeckpile[data-card-back="back-manifest-totality"],.manifest-totality-local)::after{animation:none!important;opacity:0!important}}

.cardback-prototype-preview[data-back="back-nemean-triumph"],.reward-cardback-visual[data-back="back-nemean-triumph"],.back[data-card-back="back-nemean-triumph"],.pile[data-card-back="back-nemean-triumph"],.tdeckpile[data-card-back="back-nemean-triumph"],:root[data-road-cardback="back-nemean-triumph"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back]){background:#050403 url("/assets/card-backs/nemean-triumph.svg?v=9f3d6dd4cc") center/cover no-repeat!important;border-color:#d5aa52!important;color:#f3db9b!important;box-shadow:inset 0 0 0 2px #100c06,inset 0 0 0 3px #e1bd7088,0 0 18px #d5aa5244!important}
.cardback-prototype-preview[data-back="back-nemean-triumph"]::before,.cardback-prototype-preview[data-back="back-nemean-triumph"]::after,.back[data-card-back="back-nemean-triumph"]::before,.back[data-card-back="back-nemean-triumph"]::after,.pile[data-card-back="back-nemean-triumph"]::before,.pile[data-card-back="back-nemean-triumph"]::after,.tdeckpile[data-card-back="back-nemean-triumph"]::before,.tdeckpile[data-card-back="back-nemean-triumph"]::after{display:none!important}
.cardback-prototype-preview[data-back="back-nemean-triumph"]>span{visibility:hidden}
.trialslist .modeplate[data-trial-faction]{position:relative;overflow:hidden}.trialslist .modeplate[data-trial-faction]::after{content:attr(data-trial-faction);position:absolute;right:12px;top:10px;color:var(--fac,var(--gold));font:900 7px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.72}.trialslist .modeplate.cleared{box-shadow:inset 3px 0 #d8b460,inset 0 0 26px #d8b4140f}.trial-mechanic{display:block;margin-top:5px;color:#b4bfca;font:8px/1.45 var(--mono)}

.cardback-prototype-preview[data-back="back-all-roads-concord"],.reward-cardback-visual[data-back="back-all-roads-concord"],.back[data-card-back="back-all-roads-concord"],.pile[data-card-back="back-all-roads-concord"],.tdeckpile[data-card-back="back-all-roads-concord"],:root[data-road-cardback="back-all-roads-concord"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back]){background:#050608 url("/assets/card-backs/all-roads-concord.svg?v=728e8c79d5") center/cover no-repeat!important;border-color:#d5bc78!important;box-shadow:inset 0 0 0 2px #050608,inset 0 0 0 3px #e8d59b66,0 0 18px #70d8d844!important}
.cardback-prototype-preview[data-back="back-thousandfold-hand"],.reward-cardback-visual[data-back="back-thousandfold-hand"],.back[data-card-back="back-thousandfold-hand"],.pile[data-card-back="back-thousandfold-hand"],.tdeckpile[data-card-back="back-thousandfold-hand"],:root[data-road-cardback="back-thousandfold-hand"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back]){background:#040608 url("/assets/card-backs/thousandfold-hand.svg?v=3b9579add4") center/cover no-repeat!important;border-color:#d4aa50!important;box-shadow:inset 0 0 0 2px #050608,inset 0 0 0 3px #d9b35f66,0 0 18px #d2a54538!important}
.cardback-prototype-preview[data-back="back-unbroken-draft"],.reward-cardback-visual[data-back="back-unbroken-draft"],.back[data-card-back="back-unbroken-draft"],.pile[data-card-back="back-unbroken-draft"],.tdeckpile[data-card-back="back-unbroken-draft"],:root[data-road-cardback="back-unbroken-draft"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back]){background:#07090d url("/assets/card-backs/unbroken-draft.svg?v=bfbf936186") center/cover no-repeat!important;border-color:#dce7ef!important;box-shadow:inset 0 0 0 2px #050608,inset 0 0 0 3px #edf6ff77,0 0 18px #8fd9ef44!important}
.cardback-prototype-preview[data-back="back-finch-mark"],.reward-cardback-visual[data-back="back-finch-mark"],.back[data-card-back="back-finch-mark"],.pile[data-card-back="back-finch-mark"],.tdeckpile[data-card-back="back-finch-mark"],:root[data-road-cardback="back-finch-mark"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back]){background:#050403 url("/assets/card-backs/finch-mark.svg?v=53463f7d6e") center/cover no-repeat!important;border-color:#e0bd6a!important;box-shadow:inset 0 0 0 2px #050403,inset 0 0 0 3px #e9c97a66,0 0 22px #e9b94f55!important}
.cardback-prototype-preview[data-back="back-neutral-reckoning"],.reward-cardback-visual[data-back="back-neutral-reckoning"],.back[data-card-back="back-neutral-reckoning"],.pile[data-card-back="back-neutral-reckoning"],.tdeckpile[data-card-back="back-neutral-reckoning"],:root[data-road-cardback="back-neutral-reckoning"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back]){background:#040403 url("/assets/card-backs/neutral-reckoning.svg?v=919576423f") center/cover no-repeat!important;border-color:#d2ad58!important;box-shadow:inset 0 0 0 2px #050403,inset 0 0 0 3px #d5b46566,0 0 18px #f2d27a33!important}
.cardback-prototype-preview[data-back="back-all-roads-concord"]::before,.reward-cardback-visual[data-back="back-all-roads-concord"]::before,.back[data-card-back="back-all-roads-concord"]::before,.pile[data-card-back="back-all-roads-concord"]::before,.tdeckpile[data-card-back="back-all-roads-concord"]::before,:root[data-road-cardback="back-all-roads-concord"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back])::before,.cardback-prototype-preview[data-back="back-all-roads-concord"]::after,.reward-cardback-visual[data-back="back-all-roads-concord"]::after,.back[data-card-back="back-all-roads-concord"]::after,.pile[data-card-back="back-all-roads-concord"]::after,.tdeckpile[data-card-back="back-all-roads-concord"]::after,:root[data-road-cardback="back-all-roads-concord"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back])::after,.cardback-prototype-preview[data-back="back-thousandfold-hand"]::before,.reward-cardback-visual[data-back="back-thousandfold-hand"]::before,.back[data-card-back="back-thousandfold-hand"]::before,.pile[data-card-back="back-thousandfold-hand"]::before,.tdeckpile[data-card-back="back-thousandfold-hand"]::before,:root[data-road-cardback="back-thousandfold-hand"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back])::before,.cardback-prototype-preview[data-back="back-thousandfold-hand"]::after,.reward-cardback-visual[data-back="back-thousandfold-hand"]::after,.back[data-card-back="back-thousandfold-hand"]::after,.pile[data-card-back="back-thousandfold-hand"]::after,.tdeckpile[data-card-back="back-thousandfold-hand"]::after,:root[data-road-cardback="back-thousandfold-hand"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back])::after,.cardback-prototype-preview[data-back="back-unbroken-draft"]::before,.reward-cardback-visual[data-back="back-unbroken-draft"]::before,.back[data-card-back="back-unbroken-draft"]::before,.pile[data-card-back="back-unbroken-draft"]::before,.tdeckpile[data-card-back="back-unbroken-draft"]::before,:root[data-road-cardback="back-unbroken-draft"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back])::before,.cardback-prototype-preview[data-back="back-unbroken-draft"]::after,.reward-cardback-visual[data-back="back-unbroken-draft"]::after,.back[data-card-back="back-unbroken-draft"]::after,.pile[data-card-back="back-unbroken-draft"]::after,.tdeckpile[data-card-back="back-unbroken-draft"]::after,:root[data-road-cardback="back-unbroken-draft"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back])::after,.cardback-prototype-preview[data-back="back-neutral-reckoning"]::before,.reward-cardback-visual[data-back="back-neutral-reckoning"]::before,.back[data-card-back="back-neutral-reckoning"]::before,.pile[data-card-back="back-neutral-reckoning"]::before,.tdeckpile[data-card-back="back-neutral-reckoning"]::before,:root[data-road-cardback="back-neutral-reckoning"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back])::before,.cardback-prototype-preview[data-back="back-neutral-reckoning"]::after,.reward-cardback-visual[data-back="back-neutral-reckoning"]::after,.back[data-card-back="back-neutral-reckoning"]::after,.pile[data-card-back="back-neutral-reckoning"]::after,.tdeckpile[data-card-back="back-neutral-reckoning"]::after,:root[data-road-cardback="back-neutral-reckoning"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back])::after,.cardback-prototype-preview[data-back="back-finch-mark"]::before,.reward-cardback-visual[data-back="back-finch-mark"]::before,.back[data-card-back="back-finch-mark"]::before,.pile[data-card-back="back-finch-mark"]::before,.tdeckpile[data-card-back="back-finch-mark"]::before,:root[data-road-cardback="back-finch-mark"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back])::before,.cardback-prototype-preview[data-back="back-finch-mark"]::after,.reward-cardback-visual[data-back="back-finch-mark"]::after,.back[data-card-back="back-finch-mark"]::after,.pile[data-card-back="back-finch-mark"]::after,.tdeckpile[data-card-back="back-finch-mark"]::after,:root[data-road-cardback="back-finch-mark"] :is(.back,.card.back,.m.back,.pile,.tdeckpile):not([data-faction]):not([data-card-back])::after{display:none!important}
.cardback-prototype-preview[data-back="back-all-roads-concord"]>span,.cardback-prototype-preview[data-back="back-thousandfold-hand"]>span,.cardback-prototype-preview[data-back="back-unbroken-draft"]>span,.cardback-prototype-preview[data-back="back-neutral-reckoning"]>span,.cardback-prototype-preview[data-back="back-finch-mark"]>span{visibility:hidden}

#tip{overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin}
#tip.on{pointer-events:none;touch-action:none}

:root{--veh:#efd36a;--veh-menu-gold:#dfc35c;--veh-menu-deep:#010101;--veh-menu-ink:#fff0bd}
.deck-coach{display:none!important}
#builder.sanctum-visible .deck-coach{display:block!important}
.sanctum-toggle{margin-left:auto;padding:5px 8px;border:1px solid color-mix(in srgb,var(--fac) 58%,#697086);border-radius:3px;background:#0d121d;color:var(--ink);font:700 7px var(--mono);letter-spacing:.11em;text-transform:uppercase;cursor:pointer}
.sanctum-toggle:hover,.sanctum-toggle[aria-expanded="true"]{border-color:var(--gold);color:var(--gold);box-shadow:0 0 10px rgba(220,179,92,.24)}
.m.vehemence-infected{isolation:isolate}
.m.vehemence-infected>.mn,.m.vehemence-infected>.tr,.m.vehemence-infected>.mx,.m.vehemence-infected>.kw,.m.vehemence-infected>.cbmark{position:relative;z-index:3}
.m.vehemence-infected>.stat{z-index:7}
.m.vehemence-infected>.keyword-dock{z-index:8}
.veh-tendrils{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);z-index:1;pointer-events:none;overflow:hidden;border-radius:6px;clip-path:inset(0 round 6px);filter:drop-shadow(0 0 1.5px rgba(239,211,106,.92)) drop-shadow(0 0 4px rgba(117,91,18,.62))}
.veh-tendrils .veh-rim{fill:none;stroke:#8d7425;stroke-width:1.1;vector-effect:non-scaling-stroke;opacity:.78}
.veh-tendrils path{fill:none;stroke:#060606;stroke-width:2.65;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.98}
.veh-tendrils path:nth-child(3){stroke-width:2.15;opacity:.78}
.veh-tendrils path.glint{stroke:#f2d56a;stroke-width:1.15;stroke-dasharray:2 5;opacity:.98;animation:vehTendrilCrawl var(--veh-speed,1.15s) linear infinite;animation-delay:var(--veh-phase,-.23s)}
.veh-tendrils .knots{filter:drop-shadow(0 0 1.5px rgba(239,211,106,.72))}
.veh-tendrils .knots circle{fill:#020202;stroke:#dfbd53;stroke-width:.95;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:vehKnotBreathe calc(var(--veh-speed,1.15s) + .6s) ease-in-out infinite alternate}
.veh-tendrils .knots circle:nth-child(even){animation-delay:calc(var(--veh-phase,-.23s) - .5s)}
.veh-tendrils .left,.veh-tendrils .right,.veh-tendrils .top,.veh-tendrils .bottom{filter:drop-shadow(0 0 1.1px rgba(239,211,106,.94)) drop-shadow(0 0 3px rgba(92,70,10,.84))}
.veh-tendrils .left,.veh-tendrils .right{transform-box:fill-box;transform-origin:center;animation:vehSideWriggle var(--veh-wriggle,.48s) ease-in-out infinite alternate;animation-delay:var(--veh-phase,-.23s)}
.veh-tendrils .right{animation-direction:alternate-reverse;animation-delay:calc(var(--veh-phase,-.23s) - .29s)}
.veh-tendrils .top,.veh-tendrils .bottom{transform-box:fill-box;transform-origin:center;animation:vehRailWriggle calc(var(--veh-wriggle,.48s) + .11s) ease-in-out infinite alternate;animation-delay:calc(var(--veh-phase,-.23s) - .17s)}
.veh-tendrils .bottom{animation-direction:alternate-reverse;animation-delay:calc(var(--veh-phase,-.23s) - .47s)}
.veh-mark-preview{border-left:2px solid var(--veh);color:#ead88d}
.res.veh-remembrance{border-color:var(--veh)!important;background:linear-gradient(135deg,rgba(0,0,0,.92),rgba(38,31,8,.52));box-shadow:inset 0 0 14px #000,0 0 10px rgba(239,211,106,.18)}
@keyframes vehTendrilCrawl{to{stroke-dashoffset:-42}}
@keyframes vehSideWriggle{0%{transform:translateX(calc(-.55px + var(--veh-lean,0px))) scaleX(.98)}100%{transform:translateX(calc(.55px + var(--veh-lean,0px))) scaleX(1.015)}}
@keyframes vehRailWriggle{0%{transform:translateY(calc(-.55px + var(--veh-lean,0px))) scaleY(.98)}100%{transform:translateY(calc(.55px + var(--veh-lean,0px))) scaleY(1.015)}}
@keyframes vehKnotBreathe{0%{transform:scale(.78);opacity:.45}100%{transform:scale(1.2);opacity:1}}
@media(prefers-reduced-motion:reduce){.veh-tendrils path,.veh-tendrils g,.veh-tendrils circle{animation:none}}
.dk[data-faction="veh"]{--fac:#a88c35!important}
#factioncodex[data-faction="veh"] .factionstage{background:radial-gradient(ellipse at 84% 17%,#5b48131f 0 7%,transparent 29%),radial-gradient(ellipse at 24% 92%,#2a230b24,transparent 34%),repeating-linear-gradient(116deg,transparent 0 68px,#c7aa4b07 69px 70px,transparent 71px 138px),linear-gradient(145deg,#080806,#010101 63%,#050503)}
#factioncodex[data-faction="veh"] .factionstage::before{opacity:1;background:radial-gradient(circle at 84% 18%,transparent 0 8%,#c7aa4b0d 9% 9.4%,transparent 10% 16%,#c7aa4b08 17% 17.3%,transparent 18%),linear-gradient(125deg,transparent 22%,#c7aa4b06 48%,transparent 69%)}
#factioncodex[data-faction="veh"] .factionstage::after{color:#c7aa4b08;text-shadow:0 0 90px #c7aa4b12}
#factioncodex[data-faction="veh"] .stage-vfx{right:-65px;top:-54px;width:470px;height:470px;opacity:.72;border:1px solid #c7aa4b4d;border-radius:47% 53% 49% 51%;background:radial-gradient(circle,#e9d57a 0 1px,#6e5719 2px 4px,#010101 5px 23%,#c7aa4b2b 23.4% 23.8%,transparent 24.2% 37%,#c7aa4b1c 37.4% 37.7%,transparent 38.1%),repeating-conic-gradient(from 5deg,transparent 0 12deg,#c7aa4b24 12.5deg 13deg,transparent 13.5deg 29deg);box-shadow:inset 0 0 70px #000,0 0 48px #c7aa4b16;filter:drop-shadow(0 0 14px #000)}
#factioncodex[data-faction="veh"] .stage-vfx::before{inset:12%;border-color:#8f762f66;border-radius:50% 46% 52% 48%;background:repeating-conic-gradient(from 31deg,transparent 0 26deg,#c7aa4b1d 27deg 27.6deg,transparent 28deg 57deg)}
#factioncodex[data-faction="veh"] .stage-vfx::after{inset:27%;border-color:#c7aa4b55;border-style:solid;border-radius:44% 56% 50% 50%;background:radial-gradient(circle,#c7aa4b16,transparent 62%);box-shadow:0 0 30px #c7aa4b12}
#factioncodex[data-faction="veh"] .stage-sigil{border-color:#a18834;color:#e0c865;background:#010101;box-shadow:inset 0 0 22px #4d3d1055,0 0 0 4px #010101,0 0 0 5px #c7aa4b22,0 0 35px #c7aa4b16}
#factioncodex[data-faction="veh"] .stage-heading h3{color:#f0e9d7;text-shadow:0 2px #000,0 0 26px #c7aa4b10}#factioncodex[data-faction="veh"] .stage-heading .stage-arch{color:#8d835f}#factioncodex[data-faction="veh"] .stage-blurb{color:#b9b19a}
#factioncodex[data-faction="veh"] .stage-card,#factioncodex[data-faction="veh"] .match-loadout{border-color:#4a3d16;background:linear-gradient(145deg,#080806e8,#010101e8);box-shadow:inset 0 0 24px #000,0 10px 28px #0008}
#factioncodex[data-faction="veh"] .stage-card p{color:#a59d86}#factioncodex[data-faction="veh"] .stage-card p b{color:#d7c983}#factioncodex[data-faction="veh"] .stage-plan li{border-color:#51431a;background:#060604;color:#b8ad8b}#factioncodex[data-faction="veh"] .stage-actions{border-top-color:#3d3314}#factioncodex[data-faction="veh"] select{background:#030302;color:#d7ceb4;border-color:#4a3d16}
#builder[data-faction="veh"]{--fac:#dfc35c!important;--menu-accent:#dfc35c;--menu-accent-dim:#756323;background:radial-gradient(ellipse 72% 48% at 24% -5%,#50400f1f,transparent 55%),repeating-linear-gradient(116deg,transparent 0 84px,#c7aa4b06 85px 86px,transparent 87px 172px),linear-gradient(150deg,#060604,#010101 58%,#040402)}
#builder[data-faction="veh"] .bhead{position:relative;border-bottom-color:#4b3e16;background:radial-gradient(circle at 8% 50%,#4a3a1024,transparent 20%),linear-gradient(90deg,#080806,#010101 74%);box-shadow:0 12px 40px #000,inset 0 -1px #c7aa4b0d}
#builder[data-faction="veh"] .bhead::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:linear-gradient(90deg,transparent,#c7aa4b75 15%,#c7aa4b14 62%,transparent)}
#builder[data-faction="veh"] .bmark{position:relative;border-color:#a68b35;color:#e2c867;background:#010101;box-shadow:inset 0 0 15px #5a461555,0 0 0 3px #010101,0 0 0 4px #c7aa4b22,0 0 22px #c7aa4b18}#builder[data-faction="veh"] .bmark::before{content:"";position:absolute;inset:5px;border:1px solid #c7aa4b35;border-radius:50%}
#builder[data-faction="veh"] .bhead h2{color:#f0e9d7}#builder[data-faction="veh"] #bfacSwitch{background:#030302;color:#9e9477;border-color:#423714}
#builder[data-faction="veh"] .bbody{background:linear-gradient(90deg,#020202,#050503 64%,#010101)}#builder[data-faction="veh"] .browse{background:radial-gradient(circle at 18% 0,#33280c12,transparent 33%)}
#builder[data-faction="veh"] .builder-brief{border-bottom-color:#332b12;background:linear-gradient(90deg,#070705,#020202)}#builder[data-faction="veh"] .builder-brief p{color:#8f8874}#builder[data-faction="veh"] .builder-brief .brief-tip{border-left-color:#a98e38;background:#0b0904;color:#b6aa87}
#builder[data-faction="veh"] .filters{border-bottom-color:#322a11;background:#010101}#builder[data-faction="veh"] .filters label{color:#736a4d}#builder[data-faction="veh"] .filters input,#builder[data-faction="veh"] .filters select{background:#050504;color:#ded6bd;border-color:#342c13;box-shadow:inset 0 0 13px #000}#builder[data-faction="veh"] .filters option{background:#050504}
#builder[data-faction="veh"] .poolmeta{color:#7c7254}#builder[data-faction="veh"] .pool{background-image:linear-gradient(#c7aa4b05 1px,transparent 1px);background-size:100% 43px;scrollbar-color:#5d4c1a #020202}
#builder[data-faction="veh"] .prow{background:linear-gradient(100deg,#090907,#020202);border-color:#29240f;border-left-color:var(--rar);box-shadow:inset 0 0 18px #000}#builder[data-faction="veh"] .prow:hover{border-color:#8b7327;border-left-color:var(--rar);background:linear-gradient(100deg,#0e0c06,#030302);box-shadow:inset 14px 0 24px #c7aa4b08,0 8px 24px #000}#builder[data-faction="veh"] .prow.indeck{background:linear-gradient(100deg,#161206,#030302);box-shadow:inset 0 0 0 1px #c7aa4b38,inset 0 0 24px #000}
#builder[data-faction="veh"] .pn{color:#e7dfca}#builder[data-faction="veh"] .ps{color:#82795f}#builder[data-faction="veh"] .pq{color:#c7aa4b}
#builder[data-faction="veh"] .list{border-left-color:#3a3012;background:radial-gradient(circle at 80% 4%,#392d0d15,transparent 23%),linear-gradient(180deg,#070705,#010101 82%)}#builder[data-faction="veh"] .deck-title{border-bottom-color:#382f13}#builder[data-faction="veh"] .caps{border-bottom-color:#2e2710}#builder[data-faction="veh"] .cap .bar2{background:#0e0d08}
#builder[data-faction="veh"] .deck-coach,#builder[data-faction="veh"] .purity,#builder[data-faction="veh"] .mana-curve{border-color:#413614;background:#030302}#builder[data-faction="veh"] .coach-stat{border-color:#29230f;background:#010101}#builder[data-faction="veh"] .dr{background:#060604;border-color:#29230f}#builder[data-faction="veh"] .dr:hover{border-color:#766223;background:#0c0a05}
#builder[data-faction="veh"] .btn{border-color:#3e3415;background:#050504;color:#91886d}#builder[data-faction="veh"] .btn:hover{color:#eee6cd;border-color:#756224}#builder[data-faction="veh"] .btn.pri,#builder[data-faction="veh"] .btn.ai{border-color:#a88d35;color:#e0c96d;background:linear-gradient(180deg,#171204,#050402);box-shadow:inset 0 0 14px #000,0 0 18px #c7aa4b10}
@media(prefers-reduced-motion:reduce){#factioncodex[data-faction="veh"] .stage-vfx{animation:none}}
.card.veh-card,.m.veh-card,.en.veh-card{--fac:#d9bd5b!important;background-color:#050505!important;box-shadow:inset 0 0 0 1px #e2c96755,inset 0 0 28px #000,0 0 0 1px #251e0a}
.res.veh-remembrance{background:linear-gradient(155deg,#080808,#000 70%)!important;border-color:#65561f!important;box-shadow:inset 0 0 20px #000,0 0 12px #d9bd5b18}
.amb.veh-ambient{background:radial-gradient(ellipse at 50% 78%,#5c48134d 0 5%,#171205d9 28%,#010101f3 72%),repeating-linear-gradient(115deg,transparent 0 44px,#d9bd5b08 45px 46px,transparent 47px 91px)!important;box-shadow:inset 0 0 80px #000}
.amb.veh-ambient::after{content:"";position:absolute;inset:8% 12%;border:1px solid #d9bd5b1f;background:radial-gradient(circle at 50% 50%,transparent 0 32%,#d9bd5b0b 33% 34%,transparent 35% 49%,#d9bd5b08 50% 51%,transparent 52%);filter:drop-shadow(0 0 18px #d9bd5b33)}
.veh-bank-list{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto;margin-top:10px;padding:5px;background:#000;border:1px solid #2f2913}
.veh-memory-row{display:grid;grid-template-columns:22px minmax(0,1fr) 42px;align-items:center;gap:8px;padding:7px 8px;background:linear-gradient(90deg,#050505,#0b0a07);border-left:2px solid #66591f;border-bottom:1px solid #1d1a0e;color:#d9bd5b}
.veh-memory-row i{font:700 7px var(--mono);color:#66591f}.veh-memory-row span{min-width:0}.veh-memory-row b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f0ead7;font:700 11px Georgia,serif}.veh-memory-row small{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#80775d;font:650 7px var(--mono);letter-spacing:.04em}.veh-memory-row strong{font:800 12px var(--mono);color:#c8ad50;text-align:right}
#tip.veh-bank-tip{background:linear-gradient(170deg,#070707,#000 78%)!important;border-color:#4e4319!important;border-top-color:#050505!important;box-shadow:0 24px 70px #000,0 0 0 1px #d9bd5b22!important}
#tip.veh-bank-tip .th{padding-bottom:8px;border-bottom:1px solid #29230f}#tip.veh-bank-tip .th h3{color:#f0ead7}#tip.veh-bank-tip .rar{color:#d9bd5b}
#modal.veh-replicate-modal{background:rgba(0,0,0,.94)}#modal.veh-replicate-modal .mbox{background:linear-gradient(170deg,#080808,#000 76%)!important;border-color:#4e4319!important;box-shadow:0 32px 100px #000,0 0 0 1px #d9bd5b22!important}#modal.veh-replicate-modal .mbox h2{color:#f0ead7}#modal.veh-replicate-modal .opt{background:linear-gradient(160deg,#090909,#010101)!important;border-color:#4e4319!important}#modal.veh-replicate-modal .opt:hover{border-color:#d9bd5b!important;box-shadow:0 0 22px #d9bd5b22!important}
.veh-bank-empty{margin-top:8px;padding:22px;border:1px dashed #6d5b26;color:#a89766;text-align:center;background:#030303}.veh-bank-empty b{display:block;color:#d9bd5b;font:800 9px var(--mono);letter-spacing:.18em}.veh-bank-empty span{display:block;max-width:420px;margin:8px auto 0;color:#81785f;font:italic 12px/1.45 Georgia,serif}
.veh-bank-dock{position:fixed;z-index:4300;right:10px;top:50%;display:none;flex-direction:column;gap:7px;width:min(208px,22vw);transform:translateY(-50%);pointer-events:none}.veh-bank-dock.on{display:flex}.veh-bank-button{position:relative;display:grid;grid-template-columns:31px minmax(0,1fr) 32px;align-items:center;gap:8px;min-height:48px;padding:6px 8px;border:1px solid #5b4c19;border-left:3px solid #d9bd5b;border-radius:2px;background:linear-gradient(105deg,#020202 0 53%,#171205 100%);box-shadow:inset 0 0 18px #000,0 8px 25px #000b;color:#f4eccb;text-align:left;cursor:pointer;pointer-events:auto;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.veh-bank-button::after{content:"";position:absolute;inset:3px;border:1px solid #d9bd5b17;pointer-events:none}.veh-bank-button:hover,.veh-bank-button:focus-visible{outline:none;transform:translateX(-5px);border-color:#d9bd5b;box-shadow:inset 0 0 22px #000,0 0 0 1px #d9bd5b55,0 9px 28px #000}.veh-bank-sigil{display:grid;place-items:center;width:29px;height:29px;border:1px solid #d9bd5b;color:#d9bd5b;background:#060606;clip-path:polygon(50% 0,100% 22%,88% 82%,50% 100%,12% 82%,0 22%);font:900 8px var(--mono);letter-spacing:.08em;filter:drop-shadow(0 0 5px #d9bd5b55)}.veh-bank-copy{min-width:0}.veh-bank-copy b,.veh-bank-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.veh-bank-copy b{color:#e8d37b;font:800 8px var(--mono);letter-spacing:.08em}.veh-bank-copy small{margin-top:4px;color:#8f876f;font:700 7px var(--mono);letter-spacing:.07em}.veh-bank-button>strong{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#d9bd5b;color:#050505;font:900 13px var(--mono);box-shadow:0 0 13px #d9bd5b55}.veh-bank-button.receive,.veh-bank-trigger.receive{animation:vehBankReceive 1.05s ease both}
.veh-bank-trigger{cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,color .15s ease}.veh-bank-trigger:hover,.veh-bank-trigger:focus-visible{outline:none;border-color:#d9bd5b!important;color:#f3dc7e;box-shadow:inset 0 0 13px #000,0 0 0 1px #d9bd5b55,0 0 15px #d9bd5b22}
.veh-bank-dock.teams{width:58px;align-items:flex-end}.veh-bank-dock.teams .veh-bank-button{width:58px;min-height:50px;grid-template-columns:29px 29px;gap:0;padding:7px 4px;overflow:hidden}.veh-bank-dock.teams .veh-bank-copy{display:none}.veh-bank-dock.teams .veh-bank-button>strong{width:24px;height:24px;font-size:11px}.veh-bank-dock.teams .veh-bank-button:hover,.veh-bank-dock.teams .veh-bank-button:focus-visible{width:min(208px,25vw);grid-template-columns:31px minmax(0,1fr) 32px;gap:8px;padding:6px 8px}.veh-bank-dock.teams .veh-bank-button:hover .veh-bank-copy,.veh-bank-dock.teams .veh-bank-button:focus-visible .veh-bank-copy{display:block}
.veh-bank-panel{position:fixed;inset:0;z-index:100050;display:none;place-items:center;padding:20px}.veh-bank-panel.on{display:grid}.veh-bank-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.86);backdrop-filter:blur(5px);cursor:default}.veh-bank-sheet{position:relative;width:min(720px,calc(100vw - 34px));max-height:min(760px,calc(100vh - 34px));overflow:hidden;padding:25px 26px 24px;border:1px solid #776522;border-top:4px solid #d9bd5b;background:radial-gradient(circle at 88% 5%,#5e491b33,transparent 28%),linear-gradient(155deg,#090909,#000 72%);box-shadow:0 35px 100px #000,0 0 0 1px #d9bd5b22,0 0 50px #d9bd5b17;color:#ece5cf}.veh-bank-sheet::before{content:"";position:absolute;inset:8px;border:1px solid #d9bd5b13;pointer-events:none}.veh-bank-close{position:absolute;z-index:2;right:13px;top:12px;width:32px;height:32px;border:1px solid #554919;background:#050505;color:#d9bd5b;font:400 21px/1 Georgia,serif;cursor:pointer}.veh-bank-close:hover,.veh-bank-close:focus-visible{outline:1px solid #d9bd5b;color:#fff3b8}.veh-bank-kicker{color:#84733c;font:900 8px var(--mono);letter-spacing:.24em}.veh-bank-sheet h2{margin:7px 0 2px;color:#f4edda;font:700 clamp(25px,4vw,40px) Georgia,serif;letter-spacing:.02em;text-shadow:0 0 22px #d9bd5b33}.veh-bank-owner{color:#d9bd5b;font:800 8px var(--mono);letter-spacing:.18em}.veh-bank-totals{display:grid;grid-template-columns:auto auto auto auto;justify-content:start;align-items:baseline;gap:6px 10px;margin:17px 0 9px;padding:10px 12px;border-block:1px solid #2c2611;background:#030303}.veh-bank-totals b{color:#e4c85f;font:900 18px var(--mono)}.veh-bank-totals span{margin-right:16px;color:#766d53;font:800 7px var(--mono);letter-spacing:.15em}.veh-bank-rules{color:#92886f;font:italic 11px/1.45 Georgia,serif}.veh-bank-content{position:relative;max-height:min(480px,52vh);overflow:auto;padding-right:3px}.veh-bank-panel .veh-bank-list{max-height:none;margin-top:13px;padding:7px}.veh-bank-panel .veh-memory-row{min-height:46px;padding:9px 10px}.veh-bank-panel .veh-memory-row b{font-size:13px}.veh-bank-panel .veh-memory-row small{font-size:8px}.veh-bank-panel .veh-memory-row strong{font-size:14px}
.veh-memory-flight{position:fixed;z-index:100025;left:var(--sx);top:var(--sy);width:0;height:0;pointer-events:none;opacity:0;filter:drop-shadow(0 0 8px #d9bd5b);transform:translate(-50%,-50%) scale(.28) rotate(-9deg)}.veh-memory-flight.go{animation:vehMemoryFlight 1.35s cubic-bezier(.18,.75,.2,1) forwards}.veh-memory-shard{position:absolute;left:-82px;top:-28px;width:164px;min-height:56px;display:grid;place-items:center;padding:8px;border:1px solid #d9bd5b;background:radial-gradient(circle at 50% 30%,#3f3211,#050505 64%,#000);box-shadow:inset 0 0 18px #000,0 0 28px #d9bd5b55;text-align:center;clip-path:polygon(7% 0,93% 0,100% 18%,96% 84%,84% 100%,14% 96%,0 78%,4% 15%)}.veh-memory-shard b{display:block;max-width:145px;color:#f4edda;font:700 12px Georgia,serif;line-height:1.05}.veh-memory-shard small{display:block;margin-top:4px;color:#d9bd5b;font:900 6px var(--mono);letter-spacing:.18em}.veh-memory-flight>i{position:absolute;left:0;top:0;width:2px;height:52px;transform-origin:0 0;transform:rotate(var(--r));background:linear-gradient(#f8de76,transparent);box-shadow:0 0 8px #d9bd5b;animation:vehFilament 700ms ease-in-out infinite alternate}
@keyframes vehMemoryFlight{0%{left:var(--sx);top:var(--sy);opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-14deg);filter:drop-shadow(0 0 3px #000)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(0);filter:drop-shadow(0 0 18px #d9bd5b)}72%{opacity:1}100%{left:var(--tx);top:var(--ty);opacity:0;transform:translate(-50%,-50%) scale(.16) rotate(10deg);filter:drop-shadow(0 0 3px #d9bd5b)}}@keyframes vehFilament{to{height:82px;opacity:.25}}@keyframes vehBankReceive{0%,100%{transform:none}22%,55%{transform:translateX(-7px) scale(1.03);border-color:#f6de78;box-shadow:inset 0 0 24px #000,0 0 30px #d9bd5b88}}
@media(max-width:900px){.veh-bank-dock{top:auto;right:7px;bottom:67px;left:7px;width:auto;flex-direction:row;transform:none;overflow-x:auto;justify-content:flex-end}.veh-bank-button{min-width:178px;max-width:220px}.veh-bank-button:hover,.veh-bank-button:focus-visible{transform:translateY(-3px)}.veh-bank-dock.teams{left:auto;width:auto;max-width:calc(100vw - 14px);flex-direction:row}.veh-bank-dock.teams .veh-bank-button,.veh-bank-dock.teams .veh-bank-button:hover,.veh-bank-dock.teams .veh-bank-button:focus-visible{width:58px;min-width:58px;max-width:58px;grid-template-columns:29px 24px;gap:0;padding:7px 4px}.veh-bank-dock.teams .veh-bank-button:hover .veh-bank-copy,.veh-bank-dock.teams .veh-bank-button:focus-visible .veh-bank-copy{display:none}.veh-bank-sheet{padding:21px 17px 18px}.veh-bank-totals{grid-template-columns:auto auto auto auto}.veh-bank-content{max-height:54vh}}
.veh-legend-show{position:fixed;inset:0;z-index:100010;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 50% 46%,#59470f 0 2%,#171205 15%,#020202 46%,#000 100%);animation:vehLegendVeil 3.6s ease forwards}
.veh-legend-show::before{content:"";position:absolute;inset:-20%;background:repeating-conic-gradient(from 0deg at 50% 47%,transparent 0 10deg,#d9bd5b18 10.5deg 11deg,transparent 11.5deg 23deg);animation:vehLegendTurn 9s linear infinite}
.veh-legend-core{position:absolute;left:50%;top:46%;width:min(38vw,390px);aspect-ratio:1;transform:translate(-50%,-50%);border:4px solid #d9bd5b;border-radius:49% 51% 46% 54%;background:radial-gradient(circle,#f6e8a8 0 2%,#aa8b2f 3% 5%,#050505 6% 41%,#d9bd5b 42% 43%,#030303 44%);filter:drop-shadow(0 0 18px #d9bd5b) drop-shadow(0 0 70px #806414);animation:vehCoreWake 3.25s ease forwards}
.veh-legend-core i{position:absolute;left:50%;top:50%;width:3px;height:var(--d);transform-origin:0 0;transform:rotate(var(--r));background:linear-gradient(#f4db78,transparent);box-shadow:0 0 7px #d9bd5b}
.veh-legend-title{position:absolute;left:3%;right:3%;bottom:10%;color:#fff5c6;text-align:center;font:800 clamp(23px,4.2vw,60px) Georgia,serif;letter-spacing:.08em;text-shadow:0 3px 3px #000,0 0 25px #b7952e;animation:vehLegendWords 3.4s ease forwards}
.veh-legend-sub{position:absolute;left:4%;right:4%;bottom:6%;color:#d9bd5b;text-align:center;font:900 clamp(7px,1vw,12px) var(--mono);letter-spacing:.34em;text-transform:uppercase;text-shadow:0 0 12px currentColor;animation:vehLegendWords 3.5s ease forwards}
@keyframes vehLegendVeil{0%{opacity:0}8%,82%{opacity:1}100%{opacity:0}}
@keyframes vehLegendTurn{to{transform:rotate(360deg)}}
@keyframes vehCoreWake{0%,8%{opacity:0;transform:translate(-50%,-50%) scale(.08) rotate(-40deg)}38%,76%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(25deg)}}
@keyframes vehLegendWords{0%,28%{opacity:0;transform:translateY(20px);letter-spacing:.25em}45%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
#factioncodex[data-faction="veh"],.faction-stage[data-faction="veh"]{background:radial-gradient(circle at 50% 30%,#4b3c0d55,transparent 34%),linear-gradient(145deg,#000,#080704 56%,#1c1708)!important}
@media (prefers-reduced-motion:reduce){.veh-legend-show::before,.veh-legend-core,.veh-legend-title,.veh-legend-sub,.veh-memory-flight,.veh-memory-flight>i,.veh-bank-button.receive{animation:none}.veh-memory-flight{display:none}}
.iyaris-legend-show{position:fixed;inset:0;z-index:100012;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 50% 43%,#c9d7e648 0 3%,#7e8fa428 4% 14%,transparent 34%),linear-gradient(155deg,#05080ee8,#010101fa 64%,#170c08fc);animation:iyarisVeil 3.9s ease forwards}
.iyaris-legend-show::before{content:"";position:absolute;inset:-20%;background:repeating-conic-gradient(from 0deg at 50% 44%,transparent 0 11deg,#d9bd5b18 12deg 12.7deg,transparent 13deg 27deg),radial-gradient(circle at 50% 44%,transparent 0 22%,#cbd9e533 22.4% 22.8%,transparent 23.2% 38%,#b3442926 38.4% 38.8%,transparent 39.2%);animation:iyarisTurn 11s linear infinite}
.iyaris-moon{position:absolute;left:50%;top:43%;width:min(38vw,420px);aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid #d5e3ef;border-radius:50%;background:radial-gradient(circle at 38% 32%,#f5fbff,#b9c9d8 36%,#65778a 64%,#101821 66%);box-shadow:0 0 28px #d9e9f7,0 0 110px #7890a966;animation:iyarisMoon 3.5s ease forwards}
.iyaris-roots{position:absolute;left:50%;top:44%;width:min(55vw,620px);height:min(55vw,620px);transform:translate(-50%,-50%);border:10px double #080808;border-radius:42% 58% 47% 53%;box-shadow:inset 0 0 0 3px #d9bd5b88,inset 0 0 42px #000,0 0 28px #b6472f55;filter:drop-shadow(0 0 7px #000);animation:iyarisRoots 3.7s cubic-bezier(.2,.8,.2,1) forwards}
.iyaris-roots::before,.iyaris-roots::after{content:"";position:absolute;inset:9%;border:6px solid #050505;border-radius:55% 45% 58% 42%;transform:rotate(31deg);box-shadow:0 0 0 1px #d9bd5b55}.iyaris-roots::after{inset:22%;transform:rotate(-48deg);border-width:4px}
.iyaris-skull{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);color:#0b0d11;font:900 min(18vw,190px) Georgia,serif;text-shadow:0 0 2px #eef8ff,0 0 18px #d9bd5b,0 0 45px #b94b31;animation:iyarisSkull 3.5s ease forwards}
.iyaris-title{position:absolute;left:3%;right:3%;bottom:10%;color:#f5f8fb;text-align:center;font:800 clamp(30px,5.6vw,78px) Georgia,serif;letter-spacing:.18em;text-shadow:0 3px #000,0 0 22px #b7cce0,0 0 42px #b75036;animation:iyarisWords 3.65s ease forwards}.iyaris-sub{position:absolute;left:4%;right:4%;bottom:6%;color:#d9bd5b;text-align:center;font:900 clamp(7px,1vw,12px) var(--mono);letter-spacing:.34em;animation:iyarisWords 3.8s ease forwards}
@keyframes iyarisVeil{0%{opacity:0}8%,84%{opacity:1}100%{opacity:0}}@keyframes iyarisTurn{to{transform:rotate(360deg)}}@keyframes iyarisMoon{0%,10%{opacity:0;transform:translate(-50%,-50%) scale(.1)}42%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}@keyframes iyarisRoots{0%,12%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-55deg)}46%,80%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25) rotate(24deg)}}@keyframes iyarisSkull{0%,24%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-18deg)}52%,82%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}@keyframes iyarisWords{0%,30%{opacity:0;transform:translateY(24px)}52%,84%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.iyaris-legend-show,.iyaris-legend-show::before,.iyaris-moon,.iyaris-roots,.iyaris-skull,.iyaris-title,.iyaris-sub{animation:none}}


/* Nightfall campaign progression: black-blue road glass, five personal trees,
   and a warm Carlisle-Manor recruitment ledger between missions. */
#nightfallcampaignhub{overflow:auto}
.nightfall-progression{margin:22px auto 40px;max-width:1180px;padding:18px;border:1px solid #34405b;background:radial-gradient(circle at 12% 0,rgba(82,114,170,.18),transparent 30%),linear-gradient(150deg,#090d17,#03050a 72%);box-shadow:inset 0 0 42px #000,0 18px 50px #0008;color:var(--ink)}
.nightfall-progression-head{display:flex;justify-content:space-between;gap:18px;align-items:end;padding-bottom:13px;border-bottom:1px solid #28334a}.nightfall-progression-head span{font:800 7px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8ea8d4}.nightfall-progression-head h3{margin:5px 0 0;font:700 26px var(--serif);color:#edf3ff}.nightfall-progression-head p{max-width:560px;margin:0;color:#93a1ba;font:11px/1.5 var(--serif)}
.nightfall-skill-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:14px}.nightfall-member-tree{min-width:0;padding:11px;border:1px solid #29354c;background:linear-gradient(165deg,#101725,#060910)}.nightfall-member-head{display:flex;justify-content:space-between;gap:8px;align-items:start}.nightfall-member-head b{font:700 14px var(--serif);color:#f0f4ff}.nightfall-member-head em{flex:none;padding:3px 6px;border:1px solid #61779d;color:#b9cbed;font:800 7px var(--mono);font-style:normal}.nightfall-member-faction{margin-top:3px;color:#71819e;font:700 6px var(--mono);letter-spacing:.12em;text-transform:uppercase}.nightfall-skill-node{position:relative;width:100%;min-height:68px;margin-top:8px;padding:8px 8px 8px 10px;border:1px solid #34435e;border-left:3px solid #5975a8;background:#0a0f1a;color:#dbe6fa;text-align:left;cursor:pointer}.nightfall-skill-node+ .nightfall-skill-node::before{content:"";position:absolute;left:15px;top:-10px;width:1px;height:9px;background:#51678e}.nightfall-skill-node b,.nightfall-skill-node small{display:block}.nightfall-skill-node b{font:750 9px var(--mono);letter-spacing:.04em}.nightfall-skill-node small{margin-top:4px;color:#8e9db8;font:9px/1.35 var(--serif)}.nightfall-skill-node:hover:not(:disabled),.nightfall-skill-node:focus-visible{outline:none;border-color:#9cb8e9;box-shadow:0 0 15px #6d91c933}.nightfall-skill-node.bought{border-color:#b6954d;border-left-color:#e0bd66;background:linear-gradient(120deg,#181508,#0a0d14);color:#f6e7b0;cursor:default}.nightfall-skill-node:disabled:not(.bought){opacity:.45;cursor:default}
.nightfall-recruitment{margin-top:16px;padding:14px;border:1px solid #54462f;background:radial-gradient(circle at 90% 0,#694f2324,transparent 31%),#090805}.nightfall-recruitment-head{display:flex;justify-content:space-between;gap:14px;align-items:center}.nightfall-recruitment h4{margin:0;color:#f1dfb7;font:700 19px var(--serif)}.nightfall-recruitment p{margin:4px 0 0;color:#978b73;font:10px/1.45 var(--serif)}.nightfall-recruit-count{padding:5px 8px;border:1px solid #876d39;color:#e1bd67;font:800 8px var(--mono);letter-spacing:.1em;text-transform:uppercase}.nightfall-recruit-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}.nightfall-recruit-card{min-width:0;padding:9px;border:1px solid #3c3528;background:#0c0b08;color:#d9d2c3;text-align:left;cursor:pointer}.nightfall-recruit-card b,.nightfall-recruit-card span,.nightfall-recruit-card small{display:block}.nightfall-recruit-card b{overflow:hidden;text-overflow:ellipsis;color:#f3ead6;font:700 11px var(--serif)}.nightfall-recruit-card span{margin-top:4px;color:#c5a75b;font:750 7px var(--mono);letter-spacing:.08em;text-transform:uppercase}.nightfall-recruit-card small{margin-top:6px;color:#8f8777;font:8px/1.35 var(--serif)}.nightfall-recruit-card:hover:not(:disabled),.nightfall-recruit-card:focus-visible{outline:none;border-color:#c7a957;box-shadow:0 0 14px #aa87322f}.nightfall-recruit-card.recruited{border-color:#6d925d;background:#0b130a}.nightfall-recruit-card:disabled:not(.recruited){opacity:.43;cursor:default}.nightfall-mission-locked{opacity:.46;filter:grayscale(.7)}
@media(max-width:1050px){.nightfall-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nightfall-recruit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.nightfall-progression{padding:12px}.nightfall-progression-head,.nightfall-recruitment-head{display:block}.nightfall-skill-grid,.nightfall-recruit-grid{grid-template-columns:1fr}.nightfall-recruit-count{display:inline-block;margin-top:9px}}

/* Nightfall campaign v2: the route runs down the left, while the company ledger
   remains readable as the trees grow across future missions. */
#nightfallcampaignhub .section-head{max-width:1380px;margin-inline:auto}
.nightfall-campaign-shell{display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px;align-items:start;max-width:1380px;margin:18px auto 50px;padding:0 18px}
#nightfallcampaignhub .nightfall-mission-rail{position:sticky;top:14px;display:flex!important;flex-direction:column;gap:10px;margin:0!important;padding:13px;border:1px solid #303c55;background:linear-gradient(160deg,#0d1422,#05070c);box-shadow:inset 0 0 30px #0008,0 18px 46px #0008}
#nightfallcampaignhub .nightfall-mission-rail::before{content:"MISSION SELECT";padding:4px 3px 10px;border-bottom:1px solid #2f3a50;color:#8ca5cf;font:800 7px var(--mono);letter-spacing:.22em}
#nightfallcampaignhub .nightfall-mission-rail .modeplate{width:100%;min-height:150px;padding:14px!important;text-align:left;border-color:#34435d;background:radial-gradient(circle at 100% 0,#4f6d9e22,transparent 45%),#090e18}
#nightfallcampaignhub .nightfall-mission-rail .modeplate strong{font-size:16px}
#nightfallcampaignhub .nightfall-mission-rail .modeglyph{position:absolute;right:12px;top:12px;opacity:.25;transform:scale(.72);transform-origin:top right}
#nightfallcampaignhub .nightfall-mission-rail .nightfall-mission-complete{border-color:#9b8149;box-shadow:inset 3px 0 #d5b661}
#nightfallcampaignhub .nightfall-mission-rail .nightfall-mission-complete::after{content:"COMPLETED";display:inline-block;margin-top:12px;color:#dcc278;font:800 7px var(--mono);letter-spacing:.16em}
.nightfall-progression{min-width:0;max-width:none;margin:0;padding:22px;background:radial-gradient(circle at 15% 0,#496b9d26,transparent 32%),radial-gradient(circle at 95% 25%,#b4893b12,transparent 30%),linear-gradient(155deg,#0b111e,#04060b 70%)}
.nightfall-progression-head{align-items:start}.nightfall-progression-head p{margin-top:6px;max-width:720px}
.nightfall-reset{flex:none;padding:8px 11px;border:1px solid #53617a;background:#080b12;color:#aebbd0;font:800 7px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.nightfall-reset:hover{border-color:#c6916e;color:#f1c7aa}.nightfall-reset.armed{border-color:#cc604f;background:#27100d;color:#ffd2ca;box-shadow:0 0 18px #d85b4333}
.nightfall-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.nightfall-member-tree{padding:14px;border-color:#34435e;background:radial-gradient(circle at 100% 0,#6585bb18,transparent 37%),linear-gradient(160deg,#101827,#060910)}
.nightfall-member-head{padding-bottom:10px;border-bottom:1px solid #2d3850}.nightfall-member-head b{font-size:18px}.nightfall-member-head em{padding:5px 7px}
.nightfall-skill-path{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}.nightfall-skill-node{min-height:78px;margin:0;padding:9px;border-left-width:2px}.nightfall-skill-node:first-child{grid-column:1/-1;min-height:66px;border-color:#657da5;background:linear-gradient(110deg,#121e32,#09101c)}.nightfall-skill-node+ .nightfall-skill-node::before{display:none}.nightfall-skill-node>span{display:block;margin-bottom:5px;color:#6980a7;font:800 6px var(--mono);letter-spacing:.13em}.nightfall-skill-node.weapon-choice{border-color:#8d7041;background:linear-gradient(135deg,#181309,#090c13)}.nightfall-skill-node.bought>span{color:#ddb95e}
.nightfall-recruitment{padding:17px}.nightfall-recruitment-head>div>span{display:block;margin-bottom:4px;color:#b5954e;font:800 7px var(--mono);letter-spacing:.18em;text-transform:uppercase}.nightfall-recruit-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.nightfall-recruit-card{position:relative;min-height:132px;padding:12px}.nightfall-recruit-card>span{margin:0 0 5px}.nightfall-recruit-card b{font-size:14px;white-space:normal}.nightfall-recruit-card em{display:block;margin-top:4px;color:#8d826c;font:700 7px var(--mono);font-style:normal;text-transform:uppercase}.nightfall-recruit-card.rarity-e{border-top-color:#bd9550}.nightfall-recruit-card.rarity-r{border-top-color:#718db9}
@media(max-width:1120px){.nightfall-campaign-shell{grid-template-columns:220px minmax(0,1fr)}.nightfall-skill-grid{grid-template-columns:1fr}.nightfall-recruit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.nightfall-campaign-shell{display:block;padding:0 10px}.nightfall-campaign-shell .nightfall-mission-rail{position:static;display:grid!important;grid-template-columns:1fr 1fr;margin-bottom:12px!important}.nightfall-mission-rail::before{grid-column:1/-1}.nightfall-skill-path,.nightfall-recruit-grid{grid-template-columns:1fr}.nightfall-skill-node:first-child{grid-column:auto}.nightfall-reset{margin-top:12px}}

/* Nightfall campaign v3: mission map, preparation menus, and long descending trees. */
#nightfallcampaignhub .nightfall-mission-rail .modeplate{min-height:136px}
.nightfall-side-action{width:100%;padding:12px;border:1px solid #384761;background:linear-gradient(120deg,#0d1422,#080b12);color:#dce7f9;text-align:left;cursor:pointer}
.nightfall-side-action span,.nightfall-side-action b,.nightfall-side-action small{display:block}.nightfall-side-action span{color:#7892bc;font:800 6px var(--mono);letter-spacing:.17em}.nightfall-side-action b{margin-top:4px;font:700 13px var(--serif)}.nightfall-side-action small{margin-top:3px;color:#7e8da6;font:8px/1.35 var(--serif)}.nightfall-side-action:hover,.nightfall-side-action.active{border-color:#bd9d57;background:linear-gradient(120deg,#1a160c,#0a0d14);box-shadow:inset 3px 0 #d9b75f}
.nightfall-dashboard{min-height:560px;padding:32px;background:radial-gradient(circle at 85% 10%,#8d6b2822,transparent 30%),radial-gradient(circle at 10% 0,#4b73aa25,transparent 38%)}.nightfall-dashboard-kicker{color:#8ea9d6;font:800 7px var(--mono);letter-spacing:.2em;text-transform:uppercase}.nightfall-dashboard h3{margin:8px 0 0;color:#f2f6ff;font:700 34px var(--serif)}.nightfall-dashboard>p{max-width:680px;color:#9dabbe;font:13px/1.55 var(--serif)}.nightfall-dashboard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:28px 0}.nightfall-dashboard-stats>div{padding:17px;border:1px solid #34435d;background:#080d16}.nightfall-dashboard-stats span,.nightfall-dashboard-stats b{display:block}.nightfall-dashboard-stats span{color:#798aa5;font:800 7px var(--mono);letter-spacing:.13em;text-transform:uppercase}.nightfall-dashboard-stats b{margin-top:6px;color:#f0d789;font:700 28px var(--serif)}.nightfall-next-road{padding:20px;border:1px solid #665433;background:linear-gradient(110deg,#161207,#080c14)}.nightfall-next-road span,.nightfall-next-road strong{display:block}.nightfall-next-road span{color:#c5a356;font:800 7px var(--mono);letter-spacing:.18em}.nightfall-next-road strong{margin-top:6px;color:#f2ead7;font:700 22px var(--serif)}.nightfall-dashboard .nightfall-reset{margin-top:22px}
.nightfall-back{margin-bottom:16px;padding:8px 11px;border:1px solid #485873;background:#080c14;color:#aebed8;font:800 7px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.nightfall-back:hover{border-color:#d1b25f;color:#f0dc9c}
.nightfall-shared-points{flex:none;min-width:116px;padding:11px;border:1px solid #997c40;background:#141005;text-align:center}.nightfall-shared-points b,.nightfall-shared-points span{display:block}.nightfall-shared-points b{color:#f0cf72;font:700 30px var(--serif)}.nightfall-shared-points span{color:#9e8958;font:800 6px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.nightfall-skill-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}.nightfall-skill-path{display:flex;flex-direction:column;gap:0;margin-top:10px}.nightfall-skill-node{width:calc(100% - var(--tree-indent,0px));margin-left:var(--tree-indent,0px);min-height:76px;border-left-width:3px}.nightfall-skill-node:not(:first-child)::before{display:block;content:"";position:absolute;left:16px;top:-10px;width:1px;height:10px;background:#526887}.nightfall-skill-node[data-tier="1"]{--tree-indent:0px}.nightfall-skill-node[data-tier="2"]{--tree-indent:6px}.nightfall-skill-node[data-tier="3"]{--tree-indent:12px}.nightfall-skill-node[data-tier="4"]{--tree-indent:18px;border-color:#5e6383}.nightfall-skill-node[data-tier="5"]{--tree-indent:24px;border-color:#8b7041;background:linear-gradient(130deg,#161207,#090d15)}.nightfall-skill-node[data-tier="6"]{--tree-indent:30px;border-color:#c39b4c;background:radial-gradient(circle at 100% 0,#e1b45322,transparent 45%),#110d05;box-shadow:inset 0 0 20px #d5aa2911}.nightfall-skill-node[data-tier="6"] b{color:#f3dc91}.nightfall-skill-node:first-child{min-height:70px}.nightfall-member-tree{overflow:hidden}
.nightfall-progression>.nightfall-recruit-grid{margin-top:18px}
@media(max-width:1280px){.nightfall-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.nightfall-dashboard-stats{grid-template-columns:1fr}.nightfall-skill-grid{grid-template-columns:1fr}.nightfall-skill-node{--tree-indent:0px!important;width:100%;margin-left:0}.nightfall-dashboard{padding:20px}.nightfall-shared-points{margin-top:12px}}

#catastrophePanel{display:none;margin-top:14px}#catastrophePanel.on{display:block}
.cat-entry{position:relative;overflow:hidden;padding:18px;border:1px solid #a94732;background:radial-gradient(circle at 88% 12%,#cd482638,transparent 34%),repeating-linear-gradient(112deg,transparent 0 46px,#dcb35c09 47px 48px),linear-gradient(145deg,#120907,#050608 68%,#110b06);box-shadow:inset 0 0 38px #000,0 12px 36px #0009}
.cat-entry::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,#dcb35c26 49.5%,#dcb35c55 50%,#dcb35c26 50.5%,transparent);mix-blend-mode:screen;opacity:.55}
.cat-entry-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.cat-entry-head em{display:block;color:#d96b4c;font:800 8px var(--mono);letter-spacing:.22em;text-transform:uppercase}.cat-entry-head h3{margin:4px 0 3px;color:#f3e5c7;font:400 28px var(--serif)}.cat-entry-head p{max-width:720px;margin:0;color:#aeb5c2;font:10px/1.55 var(--mono)}
.cat-rules{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:15px 0}.cat-rule{padding:10px;border:1px solid #4b3325;background:#08090ddb}.cat-rule b{display:block;color:#e2bd69;font:800 8px var(--mono);letter-spacing:.12em;text-transform:uppercase}.cat-rule span{display:block;margin-top:5px;color:#c7cbd3;font:9px/1.45 var(--mono)}
.cat-connect{position:relative;display:flex;gap:9px;align-items:center;flex-wrap:wrap}.cat-connect input,.cat-loadout select{border:1px solid #5d4933;background:#06070a;color:#eee5d5;padding:8px 10px;font:10px var(--mono)}.cat-room-code{padding:8px 13px;border:1px solid #c49b49;background:#171006;color:#f0cc73;font:900 15px var(--mono);letter-spacing:.18em}
.cat-lobby{position:relative;display:none;margin-top:14px}.cat-lobby.on{display:block}.cat-lobby-status{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#c9b887;font:9px var(--mono)}.cat-lobby-status b{color:#f0d78f;letter-spacing:.12em}.cat-roster{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.cat-lobby-seat{min-height:112px;padding:10px;border:1px solid #3c3540;background:linear-gradient(155deg,#11131a,#08090d)}.cat-lobby-seat.me{border-color:#dcb35c;box-shadow:inset 0 0 18px #dcb35c12}.cat-lobby-seat.ready{border-color:#6e956d}.cat-lobby-seat.ai{border-color:#74839a;background:radial-gradient(circle at 86% 10%,#9cb3d21c,transparent 40%),linear-gradient(155deg,#151b25,#080a0f)}.cat-lobby-seat.ai.ready{border-color:#8798b0}.cat-lobby-seat b{display:block;color:#f1e6d0;font:700 10px var(--mono)}.cat-lobby-seat span{display:block;margin-top:5px;color:#8f98aa;font:8px/1.4 var(--mono)}.cat-lobby-seat i{display:block;margin-top:7px;color:#c7a95c;font:700 7px var(--mono);letter-spacing:.1em;text-transform:uppercase}.cat-lobby-seat.ai i{color:#b6c7dd}.cat-ai-controls{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}.cat-ai-controls select{min-width:0;border:1px solid #46546a;background:#080b11;color:#dce4ef;padding:5px;font:7px var(--mono)}.cat-ai-controls button,.cat-add-ai{grid-column:1/-1;width:100%;margin-top:5px;padding:5px;border:1px solid #536177;background:#0b1018;color:#b9c8da;font:800 7px var(--mono);letter-spacing:.08em;text-transform:uppercase}.cat-add-ai{margin-top:11px;border-color:#665b43;color:#dbc685;background:#111008}
.cat-loadout{display:grid;grid-template-columns:1fr 1fr 1fr auto auto;gap:8px;margin-top:10px;padding:10px;border:1px solid #423623;background:#08090d}.cat-loadout label{display:grid;gap:4px;color:#ad9b79;font:700 7px var(--mono);letter-spacing:.1em;text-transform:uppercase}
#catgame{position:fixed;inset:0;z-index:45;display:none;overflow:auto;background:radial-gradient(ellipse at 50% 0,#41180e66 0,transparent 44%),radial-gradient(ellipse at 50% 70%,#2a23104a,transparent 52%),linear-gradient(180deg,#050608,#090a0f 58%,#030405);color:#eae4d8}#catgame.on{display:block}.cat-arena{min-width:1180px;min-height:100vh;padding:14px 18px 24px;display:grid;grid-template-rows:auto auto minmax(250px,1fr) auto;gap:10px}
.cat-boss{position:relative;min-height:170px;border:1px solid #833c2c;background:radial-gradient(ellipse at 50% -10%,#a53b2266,transparent 48%),repeating-linear-gradient(90deg,transparent 0 78px,#dcb35c0b 79px 80px),linear-gradient(180deg,#1b0c09,#09090c);box-shadow:inset 0 -24px 44px #000,0 8px 28px #000b;transition:border-color .2s ease,box-shadow .2s ease,filter .2s ease}.cat-boss.active{z-index:3;border:3px solid #ff4b2f;background:radial-gradient(ellipse at 50% 0%,#ef3d277d,transparent 55%),repeating-linear-gradient(90deg,transparent 0 78px,#ffb14a18 79px 80px),linear-gradient(180deg,#2a0906,#090406);box-shadow:inset 0 0 52px #a7120f75,0 0 0 2px #8e170f,0 0 28px 8px #ef301f80,0 12px 36px #000;animation:catBossTurnPulse 1.15s ease-in-out infinite alternate}.cat-boss.active .cat-boss-title strong{color:#fff0dd;text-shadow:0 0 12px #ff3b24,0 0 28px #c71912}.cat-boss-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:9px 14px;border-bottom:1px solid #4e2d25}.cat-boss-title small{display:block;color:#d16a4f;font:800 7px var(--mono);letter-spacing:.2em;text-transform:uppercase}.cat-boss-title strong{display:block;color:#f3e2bf;font:400 24px var(--serif)}.cat-boss-taunt{position:absolute!important;left:18px;top:57px;z-index:8!important;max-width:310px;padding:9px 12px;border:1px solid #a34a31;background:linear-gradient(145deg,#1b0b08f2,#08090df2);color:#f1d6a1;font:italic 10px/1.45 var(--serif);box-shadow:0 8px 26px #000c,0 0 18px #d64c292c;opacity:0;transform:translateY(-6px);pointer-events:none}.cat-boss-taunt.on{animation:catTaunt 3.1s ease both}@keyframes catTaunt{0%{opacity:0;transform:translateY(-7px)}10%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.cat-card-dialogue{position:fixed;z-index:100018;width:min(260px,34vw);padding:10px 13px;border:1px solid #d19a4a;background:radial-gradient(circle at 50% 110%,#8f351b55,transparent 52%),linear-gradient(150deg,#1a0d09f7,#07080cf7);color:#ffe7b7;font:italic 12px/1.45 var(--serif);text-align:center;pointer-events:none;transform:translate(-50%,-100%);box-shadow:0 10px 34px #000e,0 0 22px #e4692a3d;animation:catCardDialogue 3.6s ease both}.cat-card-dialogue::after{content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:14px;border-right:1px solid #d19a4a;border-bottom:1px solid #d19a4a;background:#09080b;transform:translateX(-50%) rotate(45deg)}@keyframes catCardDialogue{0%{opacity:0;transform:translate(-50%,-86%) scale(.92)}10%,80%{opacity:1;transform:translate(-50%,-100%) scale(1)}100%{opacity:0;transform:translate(-50%,-112%) scale(.96)}}
.cat-boss-health{position:relative;min-width:270px;text-align:center}.cat-boss-health b{display:block;color:#fff0dd;font:900 28px var(--mono);text-shadow:0 0 14px #ef4d32}.cat-boss-health span{display:block;height:7px;border:1px solid #5a241d;background:#140707;overflow:hidden}.cat-boss-health i{display:block;height:100%;background:linear-gradient(90deg,#6d120f,#e84c31,#ffc06a);box-shadow:0 0 13px #ef4d32}.cat-boss-meta{text-align:right;color:#bca276;font:700 9px/1.6 var(--mono)}
.cat-boss-field{display:grid;grid-template-columns:190px minmax(360px,1fr) 150px 285px;gap:10px;align-items:center;padding:10px 14px}.cat-boss-hand,.cat-player-hand{display:flex;justify-content:center;min-height:55px}.cat-boss-hand .back{width:33px;height:48px;margin-left:-14px;border-radius:3px}.cat-boss-board,.cat-shared-board{display:flex;align-items:center;justify-content:center;gap:7px;min-height:162px}.cat-boss-work-tray{height:154px;min-width:0;display:flex;flex-direction:column;border:1px solid #4e2d22;background:linear-gradient(160deg,#150906e8,#080607e8);box-shadow:inset 0 0 24px #0009}.cat-boss-work-head{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;border-bottom:1px solid #4e2d22;color:#e9b65f;font:800 7px var(--mono);letter-spacing:.14em;text-transform:uppercase}.cat-boss-work-head span{color:#9a7860}.cat-boss-works{display:grid;grid-template-columns:repeat(2,126px);gap:7px;align-content:start;justify-content:center;overflow:auto;padding:7px;min-height:0}.cat-boss-works .en{margin:0;transform:none;flex:none}.cat-boss-work{position:relative!important;border-color:#a9472f!important;background:radial-gradient(circle at 50% 115%,#ff7a2a55,transparent 44%),repeating-linear-gradient(118deg,transparent 0 17px,#d49b3d12 18px 19px),linear-gradient(150deg,#1a0b08,#050608)!important;box-shadow:inset 0 0 24px #000,0 0 15px #e1512929!important}.cat-boss-work::after{content:"";position:absolute;inset:auto 5px 3px;height:4px;background:linear-gradient(90deg,transparent,#ff6a24,#ffd060,#ff4b1c,transparent);filter:blur(1px);animation:catWorkEmber 1.15s ease-in-out infinite alternate;pointer-events:none}@keyframes catWorkEmber{to{opacity:.35;transform:scaleX(.72)}}
.cat-turn-ribbon{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 13px;border:1px solid #5c4631;background:#0a0b10d9;box-shadow:0 5px 18px #0008}.cat-turn-ribbon b{color:#efca75;font:800 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}.cat-turn-ribbon span{color:#9fa8b6;font:8px var(--mono)}.cat-turn-ribbon .cat-round{text-align:center;color:#e9dec8;font:700 10px var(--mono)}.cat-turn-ribbon .cat-actions{display:flex;justify-content:flex-end;gap:7px}
.cat-shared{position:relative;display:grid;grid-template-rows:minmax(162px,1fr) auto 72px;border:1px solid #665434;background:radial-gradient(ellipse at 50% 120%,#b28b2820,transparent 52%),repeating-linear-gradient(90deg,transparent 0 9.8%,#c9a95a0c 10%),linear-gradient(180deg,#10131b,#090b10);box-shadow:inset 0 0 40px #000}.cat-shared::before{content:"THE SHARED LINE · 10 MINIONS MAXIMUM · EACH MINION ATTACKS ONCE PER ROUND";position:absolute;left:12px;top:9px;color:#aa9464;font:800 7px var(--mono);letter-spacing:.15em}.cat-shared-board{padding:24px 13px 7px;flex-wrap:wrap}.cat-shared-work-label{padding:5px 12px;border-top:1px solid #3b3427;color:#bba365;font:800 6px var(--mono);letter-spacing:.14em;text-transform:uppercase}.cat-shared-works{display:flex;align-items:flex-start;justify-content:center;gap:7px;min-height:72px;padding:2px 12px 7px;overflow:visible}.cat-shared-works .en{flex:0 0 auto;transform:scale(.72);transform-origin:top center;margin:0 -10px;border-bottom:3px solid var(--cat-owner,var(--fac))}.cat-shared-works .en:hover{z-index:30;transform:translateY(-10px) scale(.92)}
.cat-shared-board .m{transition:transform .16s ease,box-shadow .16s ease;border-bottom:3px solid var(--cat-owner,var(--rule))}.cat-shared-board .m[data-cat-owner="0"]{--cat-owner:#dcb35c}.cat-shared-board .m[data-cat-owner="1"]{--cat-owner:#75a9d7}.cat-shared-board .m[data-cat-owner="2"]{--cat-owner:#a67ad8}.cat-shared-board .m[data-cat-owner="3"],.cat-shared-works .en[data-cat-owner="3"]{--cat-owner:#67b68c}.cat-shared-works .en[data-cat-owner="0"]{--cat-owner:#dcb35c}.cat-shared-works .en[data-cat-owner="1"]{--cat-owner:#75a9d7}.cat-shared-works .en[data-cat-owner="2"]{--cat-owner:#a67ad8}.cat-shared-board .m.cat-waking,.cat-boss-board .m.cat-waking{filter:saturate(.6) brightness(.72)}.cat-shared-board .m.cat-waking::after,.cat-boss-board .m.cat-waking::after{content:"WAKES NEXT ROUND";position:absolute;left:4px;right:4px;bottom:6px;z-index:8;padding:3px;background:#05070ddd;color:#c0c6d3;font:800 6px var(--mono);letter-spacing:.09em;text-align:center}
.cat-players{display:grid;grid-template-columns:repeat(4,minmax(270px,1fr));gap:8px;width:100%;min-width:0}.cat-seat{position:relative;display:grid;grid-template-rows:auto minmax(124px,1fr) auto;min-width:0;min-height:218px;overflow:hidden;border:1px solid #3b4658;background:linear-gradient(160deg,#131722,#080a0f);box-shadow:inset 0 0 28px #000}.cat-seat.local{border-color:#dcb35c;box-shadow:inset 0 0 28px #000,0 0 14px #dcb35c2b}.cat-seat.ai{border-color:#6f7d93;background:linear-gradient(160deg,#171b24,#080a0f);box-shadow:inset 0 0 28px #000,0 0 15px #91a0b626}.cat-seat.ai::after{content:"ROADMIND PILOT";position:absolute;right:8px;top:48px;z-index:4;padding:3px 6px;border:1px solid #718097;background:#080b11dd;color:#b8c4d6;font:800 6px var(--mono);letter-spacing:.12em}.cat-seat.active{z-index:3;border-color:#f6d36c;outline:3px solid #f6d36c;outline-offset:-3px;box-shadow:inset 0 0 34px #dcb35c24,0 0 0 1px #fff0ad,0 0 22px 6px #dcb35c70;animation:catSeatTurnPulse 1.15s ease-in-out infinite alternate}.cat-seat.active .cat-seat-head{background:linear-gradient(90deg,#dcb35c24,transparent 72%)}.cat-seat-head{position:relative;z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;min-width:0;padding:8px;border-bottom:1px solid #303747}.cat-seat-name{min-width:0;overflow:hidden}.cat-seat-name b,.cat-seat-name>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cat-seat-no{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--seat,#536074);color:var(--seat,#dcb35c);font:900 10px var(--mono)}.cat-seat-name b{display:block;color:#eee5d6;font:700 10px var(--serif)}.cat-seat-name>span{display:block;color:#8791a2;font:7px var(--mono)}.cat-seat-status{display:flex;align-items:center;gap:3px;max-width:190px;margin-top:4px;overflow-x:auto;scrollbar-width:thin}.cat-seat-status .tchip{padding:1px 4px;font-size:5px;line-height:1.3}.cat-seat-status .tchip b{font-size:7px}.cat-seat-vitals{text-align:right;color:#c6cedb;font:800 8px/1.5 var(--mono)}.cat-seat-vitals strong{color:#f2d06f;font-size:12px}
.cat-seat-body{display:grid;grid-template-columns:64px minmax(0,1fr);gap:5px;min-width:0;overflow:hidden;padding:6px}.cat-seat-rear{display:flex;flex-direction:column;gap:3px}.cat-seat-rear>.art{min-height:37px}.cat-seat-rear>.art span{font-size:6px}.cat-player-hand{position:relative;justify-content:flex-start;align-items:flex-end;min-width:0;max-width:100%;min-height:122px;overflow-x:auto;overflow-y:hidden;padding:13px 4px 4px;scrollbar-width:thin;scrollbar-color:#6b5631 transparent}.cat-player-hand.ally::before{content:"ALLY HAND · RIGHT-CLICK TO PING";position:absolute;left:50%;top:1px;transform:translateX(-50%);white-space:nowrap;color:#8f9db1;font:700 5.5px var(--mono);letter-spacing:.08em}.cat-player-hand .back{width:29px;height:43px;margin-left:-11px;border-radius:3px}.cat-player-hand .card{zoom:.58;transform:none;transform-origin:bottom center;margin:0 -22px;flex:none}.cat-player-hand .card:first-child{margin-left:0}.cat-player-hand .card:last-child{margin-right:0}.cat-player-hand .card:hover{z-index:30;transform:translateY(-18px) scale(1.28)}.cat-player-hand .card.cat-pingable{cursor:context-menu}.cat-player-hand .card.cat-pingable:hover{box-shadow:0 0 0 2px #f0c967,0 0 24px #f0c96755}.cat-player-hand.hidden .card{filter:brightness(.55)}.cat-seat-footer{position:relative;padding:5px 7px;border-top:1px solid #252c39;display:flex;align-items:center;justify-content:space-between;gap:4px;color:#778194;font:7px var(--mono)}.cat-power{max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 6px;border:1px solid #4a5364;background:#0c1018;color:#c8d0dc;font:700 6px var(--mono);letter-spacing:.07em;text-transform:uppercase}.cat-power:not(:disabled){border-color:var(--seat,#dcb35c);color:#f1d485;box-shadow:0 0 12px #dcb35c20}.cat-mech{width:22px;height:22px;border:1px solid #3e4655;background:#090c12;color:#8d98a9}.cat-mech.veh-bank-trigger{border-color:#c6a94c;color:#e3ca76}.cat-boss-rear{display:flex;flex-direction:column;align-items:stretch;gap:5px}.cat-boss-rear>.art{min-height:42px}.cat-boss-rear>.art span{font-size:7px}
.cat-phase-scene{position:fixed;inset:0;z-index:100015;display:grid;place-content:center;text-align:center;overflow:hidden;background:radial-gradient(circle at 50% 72%,#ff7a214f,transparent 38%),#090301d9;pointer-events:none;animation:catPhaseScene 2.3s ease both}.cat-phase-scene.phase-3{background:radial-gradient(circle at 50% 50%,#a9281d44,transparent 32%),#020102ed}.cat-phase-scene small,.cat-phase-scene strong,.cat-phase-scene span{position:relative;z-index:2;display:block}.cat-phase-scene small{color:#f0b15e;font:800 9px var(--mono);letter-spacing:.3em}.cat-phase-scene strong{margin:8px 0;color:#fff0ca;font:400 42px var(--serif);letter-spacing:.08em;text-shadow:0 0 25px #ff4d20}.cat-phase-scene span{color:#d4b68a;font:9px var(--mono);letter-spacing:.12em}.cat-phase-flames{position:absolute;inset:28% 0 0;background:repeating-radial-gradient(ellipse at 50% 100%,#ffb02b 0 2%,#e63218 4%,transparent 8% 13%);filter:blur(7px);mix-blend-mode:screen;animation:catFlames .35s ease-in-out infinite alternate}.phase-3 .cat-phase-flames{filter:grayscale(.7) blur(11px);opacity:.5}@keyframes catPhaseScene{0%{opacity:0}10%,82%{opacity:1}100%{opacity:0}}@keyframes catFlames{to{transform:translateY(-18px) scaleX(1.06)}}.cat-ping{position:fixed;z-index:100020;width:24px;height:24px;border:2px solid #ffd66b;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #ff6b3d88,0 0 22px #ffb33d;animation:catPing 1.55s ease-out forwards}.cat-ping::after{content:attr(data-from);position:absolute;left:50%;top:-19px;transform:translateX(-50%);white-space:nowrap;color:#ffe9a9;font:900 7px var(--mono);letter-spacing:.1em;text-shadow:0 2px 5px #000}@keyframes catPing{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.4)}}.cat-boss-card{box-shadow:0 0 0 1px #a84632,0 0 18px #a8463238!important}
.cat-boss>.amb,.cat-seat>.amb{position:absolute!important;inset:0!important;width:100%;height:100%!important;z-index:0;overflow:hidden;pointer-events:none}.cat-boss>*:not(.amb),.cat-seat>*:not(.amb){position:relative;z-index:1}
.cat-effect-panel{position:fixed;left:14px;bottom:14px;z-index:100;width:320px;height:220px;max-height:44vh;display:flex;flex-direction:column;border:1px solid #665132;background:linear-gradient(165deg,#100d09e8,#06080de8);box-shadow:0 12px 34px #000c,0 0 20px #dcb35c12;color:#b9c0cb;opacity:.26;transition:opacity .18s ease,box-shadow .18s ease}.cat-effect-panel:hover,.cat-effect-panel:focus-within,.cat-effect-panel.dragging{opacity:1;box-shadow:0 14px 40px #000e,0 0 24px #dcb35c22}.cat-effect-panel.closed{display:none}.cat-effect-head{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;border-bottom:1px solid #3d3326;color:#e6c46d;font:800 7px var(--mono);letter-spacing:.15em;text-transform:uppercase;cursor:grab;touch-action:none;user-select:none}.cat-effect-head:active{cursor:grabbing}.cat-effect-head span{display:flex;align-items:center;gap:9px}.cat-effect-head small{color:#766d5e;font:700 6px var(--mono);letter-spacing:.13em}.cat-effect-close{border:0;background:transparent;color:#897c68;font:900 11px var(--mono);cursor:pointer;padding:2px 4px}.cat-effect-close:hover{color:#ffe39a}.cat-effect-reopen{position:fixed;left:14px;bottom:14px;z-index:99;display:none;border:1px solid #665132;background:#090908e8;color:#e6c46d;padding:7px 10px;font:800 7px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;opacity:.45}.cat-effect-reopen:hover{opacity:1}.cat-effect-reopen.on{display:block}.cat-effect-log{overflow:auto;padding:7px 9px;font:8px/1.55 var(--mono);scrollbar-width:thin}.cat-effect-log>div{padding:5px 2px;border-bottom:1px solid #ffffff0b}.cat-effect-log>div:last-child{border-bottom:0}.cat-effect-log b{color:#e5c876}.cat-effect-log em{color:#f0d48a;font-style:normal}.cat-effect-log s{color:#e66b61;text-decoration:none}.cat-effect-log i{color:#9fc5ef;font-style:normal}.cat-effect-log .cat-play{color:#d9dde5}.cat-effect-log .cat-seat-tag{display:inline-block;margin-right:5px;color:var(--cat-log-col,#dcb35c);font-weight:900}.cat-taunt-log{color:#d9bb8a;font-style:italic}.cat-taunt-log b{color:#e86b4c}.cat-phase-log{color:#e69b58}.cat-phase-log b{color:#ffcf72;letter-spacing:.12em}.cat-effect-empty{color:#6e7683;font-style:italic}
@media(max-width:1450px){.cat-boss-field{grid-template-columns:150px minmax(320px,1fr) 130px 285px}.cat-effect-panel{width:300px}}
@media(max-width:1000px){.cat-rules,.cat-roster{grid-template-columns:repeat(2,1fr)}.cat-loadout{grid-template-columns:repeat(2,1fr)}.cat-loadout button{min-height:34px}}@keyframes catSeatTurnPulse{to{box-shadow:inset 0 0 38px #dcb35c32,0 0 0 2px #fff0ad,0 0 30px 9px #dcb35c90}}@keyframes catBossTurnPulse{to{filter:brightness(1.12);box-shadow:inset 0 0 62px #c218127d,0 0 0 3px #a91e15,0 0 38px 12px #ff351f9c,0 12px 36px #000}}@media(prefers-reduced-motion:reduce){.cat-ping,.cat-boss-taunt.on,.cat-card-dialogue,.cat-phase-scene,.cat-phase-flames,.cat-boss-work::after,.cat-seat.active,.cat-boss.active{animation:none}.cat-ping{opacity:1}}

#catgame.cat-szydus{background:radial-gradient(ellipse at 50% -8%,#b8d9ff2b 0,transparent 43%),linear-gradient(90deg,transparent 0 49.92%,#b9d7f016 50%,transparent 50.08%),repeating-linear-gradient(0deg,transparent 0 47px,#a9c7e207 48px 49px),linear-gradient(180deg,#07111d,#05090f 58%,#020406);color:#e8f3ff}
.cat-szydus .cat-boss{border-color:#7899ba;background:radial-gradient(ellipse at 50% -10%,#b9dcff3d,transparent 49%),repeating-linear-gradient(90deg,transparent 0 78px,#cfe8ff0d 79px 80px),linear-gradient(180deg,#101d2a,#05090e);box-shadow:inset 0 -24px 46px #000,0 0 32px #7298bf28}
.cat-szydus .cat-boss::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.8%,#e7f4ff22 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,#e7f4ff14 50%,transparent 50.2%);background-size:112px 112px;animation:catSzydusGrid 12s linear infinite}
.cat-szydus .cat-boss.active{border:3px solid #d7ecff;background:radial-gradient(ellipse at 50% 0,#8cb9e75c,transparent 56%),repeating-linear-gradient(90deg,transparent 0 78px,#d7ecff16 79px 80px),linear-gradient(180deg,#13283b,#050a11);box-shadow:inset 0 0 58px #6d9ac74b,0 0 0 2px #89afd0,0 0 34px 9px #9bc9ef62,0 12px 36px #000;animation:catSzydusPulse 1.5s ease-in-out infinite alternate}
.cat-szydus .cat-boss.active .cat-boss-title strong{color:#f4f9ff;text-shadow:0 0 12px #9bcaff,0 0 30px #5d8db8}.cat-szydus .cat-boss-title small{color:#9bbddd}.cat-szydus .cat-boss-title strong{color:#dcecff}.cat-szydus .cat-boss-head{border-bottom-color:#49647c}.cat-szydus .cat-boss-health b{color:#eef8ff;text-shadow:0 0 14px #8ec5f5}.cat-szydus .cat-boss-health span{border-color:#587895;background:#07101a}.cat-szydus .cat-boss-health i{background:linear-gradient(90deg,#416785,#91bce0,#f1f8ff);box-shadow:0 0 14px #89bce8}
.cat-szydus .cat-boss-meta{color:#a8bfd4}.cat-szydus .cat-boss-taunt{border-color:#7598b8;background:linear-gradient(145deg,#111f2df2,#05090ef2);color:#dcecff;box-shadow:0 8px 28px #000d,0 0 20px #7ba8d735}.cat-szydus .cat-boss-work-tray{border-color:#58738d;background:linear-gradient(160deg,#101c28ed,#05080ded)}.cat-szydus .cat-boss-work-head{border-bottom-color:#58738d;color:#cfe5f8}.cat-szydus .cat-boss-work{border-color:#7899ba!important;background:radial-gradient(circle at 50% 115%,#9bc9ef3d,transparent 45%),repeating-linear-gradient(118deg,transparent 0 17px,#d7ecff0c 18px 19px),linear-gradient(160deg,#142434,#070b11)!important}
.cat-szydus .cat-turn-ribbon{border-color:#6f8da8;background:linear-gradient(90deg,#0c1722,#15283a,#0c1722)}.cat-szydus .cat-round{color:#bfd6e9}.cat-szydus .cat-card-dialogue{border-color:#9bc6ea;background:radial-gradient(circle at 50% 110%,#6f9ac64a,transparent 52%),linear-gradient(150deg,#101d2af7,#05080df7);color:#e4f2ff}.cat-szydus .cat-card-dialogue::after{border-color:#9bc6ea;background:#07101a}
.cat-phase-scene.cat-szydus-scene{background:radial-gradient(circle at 50% 45%,#b9dcff30,transparent 31%),repeating-linear-gradient(90deg,transparent 0 78px,#cfe8ff0b 79px 80px),linear-gradient(180deg,#07111df8,#020509fd)}.cat-phase-scene.cat-szydus-scene::before{background:conic-gradient(from 45deg,#e8f5ff,#6b91b8,#101d2a,#bcdfff,#e8f5ff);filter:blur(1px);opacity:.55}.cat-phase-scene.cat-szydus-scene .cat-phase-flames{inset:0;background:repeating-linear-gradient(90deg,transparent 0 59px,#dcecff12 60px 61px),repeating-linear-gradient(0deg,transparent 0 59px,#dcecff0d 60px 61px);filter:none;animation:catSzydusGrid 4s linear infinite}.cat-phase-scene.cat-szydus-scene small{color:#a9c9e4}.cat-phase-scene.cat-szydus-scene strong{color:#eff8ff;text-shadow:0 0 18px #8dbce4,0 0 48px #5b82a6}.cat-phase-scene.cat-szydus-scene span{color:#b9cfe1}
@keyframes catSzydusGrid{to{background-position:112px 0,0 112px}}@keyframes catSzydusPulse{to{filter:brightness(1.08);box-shadow:inset 0 0 68px #6d9ac75c,0 0 0 3px #b8d9f5,0 0 42px 13px #9bc9ef72,0 12px 36px #000}}

.frostleg-show{position:fixed;inset:0;z-index:100006;overflow:hidden;pointer-events:none;isolation:isolate;background:#01050af7;animation:frostlegVeil 4.15s ease forwards}
.frostleg-show::after{content:"";position:absolute;z-index:45;inset:-20%;background:linear-gradient(112deg,transparent 34%,#eaffff9e 49%,transparent 53%);transform:translateX(-125%) rotate(-8deg);animation:frostlegSweep 2.35s .62s ease-out forwards}
.frostleg-name{position:absolute;z-index:60;left:4%;right:4%;bottom:7.5%;text-align:center;color:#f3fdff;font:800 clamp(23px,4vw,62px) Georgia,serif;letter-spacing:.1em;text-shadow:0 3px 4px #000,0 0 20px var(--fr-c,#9deaff),0 0 58px var(--fr-c2,#6865c8);animation:frostlegName 3.9s ease forwards}
.frostleg-sub{position:absolute;z-index:60;left:5%;right:5%;bottom:4.5%;text-align:center;color:var(--fr-c,#9deaff);font:900 clamp(7px,.9vw,12px) var(--mono);letter-spacing:.34em;text-transform:uppercase;text-shadow:0 0 11px currentColor;animation:frostlegName 4s ease forwards}
.frostleg-flake{position:absolute;z-index:30;left:var(--x);top:-4%;width:var(--s);height:var(--s);border:1px solid var(--fc);transform:rotate(45deg);box-shadow:0 0 10px var(--fc);animation:frostlegFlake var(--t) var(--d) linear infinite}
@keyframes frostlegVeil{0%{opacity:0}8%,82%{opacity:1}100%{opacity:0}}
@keyframes frostlegSweep{45%,68%{transform:translateX(0) rotate(-8deg)}100%{transform:translateX(125%) rotate(-8deg);opacity:0}}
@keyframes frostlegName{0%,28%{opacity:0;transform:translateY(20px);letter-spacing:.24em}43%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-11px)}}
@keyframes frostlegFlake{to{transform:translate(var(--drift),112vh) rotate(405deg);opacity:0}}
.frostleg-mourn{--fr-c:#b6f3ff;--fr-c2:#59468c;background:radial-gradient(circle at 50% 37%,#8fbcdb33,transparent 35%),linear-gradient(#060b17,#111322 68%,#020305)}
.frostleg-mourn .fdm-moon{position:absolute;z-index:2;left:50%;top:38%;width:min(48vw,510px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.2);border-radius:50%;background:radial-gradient(circle,#f4ffff 0 6%,#bcefff 18%,#687ca0 46%,#151526 67%);box-shadow:0 0 55px #b9efff88,0 0 130px #6876bd55;animation:fdmMoon 3.2s ease forwards}
.frostleg-mourn .fdm-table{position:absolute;z-index:10;left:50%;bottom:17%;width:min(72vw,790px);height:min(17vh,165px);transform:translateX(-50%) translateY(100%) scaleX(.3);background:linear-gradient(#b8d4dc,#33444f 38%,#090d13);clip-path:polygon(4% 0,96% 0,100% 28%,89% 45%,84% 100%,78% 100%,76% 46%,24% 46%,22% 100%,16% 100%,11% 45%,0 28%);filter:drop-shadow(0 0 22px #a7eaff);animation:fdmTable 2.9s .15s ease forwards}
.frostleg-mourn .fdm-body{position:absolute;z-index:12;left:50%;bottom:26%;width:min(49vw,530px);height:min(15vh,145px);transform:translateX(-50%) scale(.2);border:2px solid #9ad9e6;border-radius:48% 52% 12% 12%;background:linear-gradient(100deg,#101725,#678392 42%,#212333 70%);box-shadow:0 0 23px #a9e9f066;animation:fdmBody 2.7s .38s ease forwards}
.frostleg-mourn .fdm-anatomy{position:absolute;z-index:15;left:50%;top:38%;width:min(44vw,470px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.1) rotate(-90deg);border:2px solid #b9f0ff;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 29px,#9be3ed33 30px 31px),repeating-conic-gradient(#d6faff66 0 1deg,transparent 2deg 29deg);box-shadow:0 0 30px #9ceeff66;animation:fdmAnatomy 2.8s .32s ease forwards}
.frostleg-mourn .fdm-scalpel{position:absolute;z-index:24;left:50%;top:47%;width:min(54vw,590px);height:9px;transform:translate(-50%,-50%) rotate(-17deg) scaleX(0);background:linear-gradient(90deg,#251835,#9ad8eb 22%,#fff 72%,#8ae9ff);clip-path:polygon(0 26%,78% 26%,100% 50%,78% 74%,0 74%);box-shadow:0 0 20px #c8f8ff;animation:fdmScalpel 1.5s 1.02s ease forwards}
.frostleg-mourn .fdm-specimen{position:absolute;z-index:20;left:var(--x);top:var(--y);width:clamp(36px,6vw,72px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.1);border:2px solid #aeefff;border-radius:50% 50% 42% 58%;background:radial-gradient(circle at 50% 45%,#eafcff 0 4%,#9ddbea 5% 18%,#382b51 20% 55%,#080913 58%);box-shadow:0 0 18px #a4eafa;animation:fdmSpecimen 2.2s var(--d) ease forwards}
@keyframes fdmMoon{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}40%,84%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(1.15)}}@keyframes fdmTable{0%{opacity:0;transform:translateX(-50%) translateY(100%) scaleX(.3)}42%,84%{opacity:1;transform:translateX(-50%) scaleX(1)}100%{opacity:0;transform:translateX(-50%) translateY(-12px) scaleX(1.04)}}@keyframes fdmBody{0%{opacity:0;transform:translateX(-50%) scale(.2)}45%,80%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.08)}}@keyframes fdmAnatomy{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-90deg)}45%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.28) rotate(60deg)}}@keyframes fdmScalpel{38%,72%{transform:translate(-50%,-50%) rotate(-17deg) scaleX(1)}100%{opacity:0;transform:translate(36%,-80%) rotate(-17deg) scaleX(.4)}}@keyframes fdmSpecimen{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}45%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-120%) scale(.45)}}
.frostleg-cyrus{--fr-c:#a9e9ff;--fr-c2:#5666a9;background:linear-gradient(#11131d 0 48%,#080a10 49% 100%)}
.frostleg-cyrus .fcy-street{position:absolute;z-index:2;inset:0;background:repeating-linear-gradient(165deg,transparent 0 58px,#8194aa14 59px 61px,transparent 62px 110px);filter:blur(.3px);animation:fcyRain 2.2s linear infinite}
.frostleg-cyrus .fcy-puddle{position:absolute;z-index:8;left:50%;top:53%;width:min(72vw,790px);height:min(31vh,300px);transform:translate(-50%,-50%) scale(.15);border:3px solid #a7e9ff;border-radius:50%;background:radial-gradient(ellipse,#bcefff33 0 11%,#263d5577 37%,#03050a 72%);box-shadow:0 0 42px #8bdcf077,inset 0 0 48px #8cd9ec55;animation:fcyPuddle 3.15s ease forwards}
.frostleg-cyrus .fcy-puddle::after{content:"";position:absolute;inset:12%;border:2px solid #d6f9ff88;border-radius:50%;animation:fcyRipple 1.2s .6s ease-out infinite}
.frostleg-cyrus .fcy-hand{position:absolute;z-index:17;left:50%;top:48%;width:min(24vw,250px);height:min(43vh,410px);background:linear-gradient(100deg,#e1faff,#7695a5 46%,#1c2634);clip-path:polygon(37% 0,56% 0,58% 41%,69% 6%,78% 10%,70% 47%,83% 18%,91% 24%,74% 58%,100% 48%,100% 62%,66% 78%,62% 100%,39% 100%,35% 78%,0 62%,0 49%,29% 58%,20% 23%,29% 18%,42% 48%);filter:drop-shadow(0 0 22px #b9efff);animation:fcyHand 2.7s .35s ease forwards}
.frostleg-cyrus .fcy-reflection{position:absolute;z-index:14;left:50%;top:54%;width:min(25vw,270px);height:min(39vh,380px);transform:translate(-50%,-10%) scaleY(-1) scale(.2);background:linear-gradient(#d5f7ff,#4a6b80 38%,#111827);clip-path:polygon(38% 0,62% 0,73% 18%,64% 43%,84% 100%,53% 75%,47% 75%,16% 100%,36% 43%,27% 18%);filter:blur(1px) drop-shadow(0 0 18px #a9eaff);opacity:.6;animation:fcyReflection 2.8s .45s ease forwards}
.frostleg-cyrus .fcy-cut{position:absolute;z-index:29;left:-10%;top:44%;width:120%;height:5px;background:linear-gradient(90deg,transparent,#fff,#a4eaff,#fff,transparent);box-shadow:0 0 29px #c8f8ff;transform:rotate(-11deg) scaleX(0);animation:fcyCut 1.15s 1.5s ease-out forwards}
@keyframes fcyRain{to{background-position:-90px 140px}}@keyframes fcyPuddle{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}40%,84%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}@keyframes fcyRipple{to{inset:-8%;opacity:0}}@keyframes fcyHand{0%{opacity:0;transform:translate(-50%,65%) scale(.35)}45%,80%{opacity:1;transform:translate(-50%,-48%) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) scale(1.07)}}@keyframes fcyReflection{0%{opacity:0;transform:translate(-50%,-10%) scaleY(-1) scale(.2)}45%,80%{opacity:.65;transform:translate(-50%,-10%) scaleY(-1) scale(1)}100%{opacity:0;transform:translate(-50%,15%) scaleY(-1) scale(1.08)}}@keyframes fcyCut{38%,72%{transform:rotate(-11deg) scaleX(1)}100%{opacity:0;transform:rotate(-11deg) translateX(35%) scaleX(.4)}}
.frostleg-cyrene{--fr-c:#d6f9ff;--fr-c2:#d74761;background:radial-gradient(circle at 50% 46%,#5e8ca755,transparent 38%),linear-gradient(#030812,#101620 72%,#020306)}
.frostleg-cyrene .fcr-shard{position:absolute;z-index:9;left:50%;top:45%;width:var(--w);height:var(--h);transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) rotate(var(--r)) scale(.15);clip-path:polygon(50% 0,100% 20%,75% 100%,18% 77%,0 19%);background:linear-gradient(145deg,#e7fcff99,#50758d55 47%,#140b18aa);border:1px solid #c9f6ff;box-shadow:0 0 22px #a8eaff;animation:fcrShard 2.7s var(--d) ease forwards}
.frostleg-cyrene .fcr-knight{position:absolute;z-index:18;left:50%;top:45%;width:min(35vw,370px);height:min(58vh,560px);transform:translate(-50%,-50%) scale(.18);background:linear-gradient(120deg,#f0fdff,#6d8797 42%,#182331 67%,#b82949);clip-path:polygon(38% 0,62% 0,72% 16%,67% 33%,89% 51%,75% 100%,54% 72%,46% 72%,25% 100%,11% 51%,33% 33%,28% 16%);filter:drop-shadow(0 0 24px #c8f8ff);animation:fcrKnight 3s .24s ease forwards}
.frostleg-cyrene .fcr-ward{position:absolute;z-index:22;left:50%;top:45%;width:min(48vw,500px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.12) rotate(45deg);border:4px solid #d6f8ff;background:radial-gradient(circle,#b7ecff22,transparent 61%);box-shadow:0 0 38px #b7efff,inset 0 0 45px #72aeca66;animation:fcrWard 2.75s .45s ease forwards}
.frostleg-cyrene .fcr-name{position:absolute;z-index:25;left:var(--x);top:var(--y);color:#d9f8ff;font:900 clamp(9px,1.2vw,15px) var(--mono);letter-spacing:.18em;text-shadow:0 0 12px #a8eaff;opacity:0;animation:fcrLost 2.2s var(--d) ease forwards}
@keyframes fcrShard{0%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) rotate(var(--r)) scale(.15)}42%,80%{opacity:.7;transform:translate(-50%,-50%) rotate(var(--r)) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) rotate(calc(var(--r) + 35deg)) scale(.45)}}@keyframes fcrKnight{0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}45%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-55%) scale(1.08)}}@keyframes fcrWard{0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(0)}45%,80%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45) rotate(90deg)}}@keyframes fcrLost{30%{opacity:0;transform:translateY(18px)}52%,80%{opacity:.85;transform:none}100%{opacity:0;transform:translateY(-15px)}}
.frostleg-glacenoir{--fr-c:#88dfff;--fr-c2:#1f224c;background:radial-gradient(circle at 50% 47%,#20517255,transparent 42%),linear-gradient(#01040a,#070b15)}
.frostleg-glacenoir .fgl-ice{position:absolute;z-index:5;inset:0;background:linear-gradient(124deg,transparent 0 21%,#72cce31b 22% 23%,transparent 24% 61%,#a7ecff1b 62% 63%,transparent 64%),linear-gradient(34deg,transparent 0 43%,#637bb91a 44% 45%,transparent 46%);animation:fglIce 6s ease-in-out infinite alternate}
.frostleg-glacenoir .fgl-mirror{position:absolute;z-index:12;left:50%;top:44%;width:var(--s);height:calc(var(--s) * 1.36);transform:translate(-50%,-50%) scale(.1) rotate(var(--r));clip-path:polygon(50% 0,93% 22%,100% 75%,50% 100%,0 75%,7% 22%);background:linear-gradient(135deg,#0b1524,#8dddf188 42%,#060913 72%);border:2px solid #b9f3ff;box-shadow:0 0 27px #7bd9f2,inset 0 0 23px #000;animation:fglMirror 2.85s var(--d) ease forwards}
.frostleg-glacenoir .fgl-copy{position:absolute;z-index:20;left:50%;top:44%;width:var(--s);height:calc(var(--s) * 1.36);transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(.1);clip-path:polygon(50% 0,93% 22%,100% 75%,50% 100%,0 75%,7% 22%);background:linear-gradient(145deg,#d7fbff,#29475d 52%,#080b14);filter:drop-shadow(0 0 15px #83dff8);animation:fglCopy 2.4s var(--d) ease forwards}
.frostleg-glacenoir .fgl-recursion{position:absolute;z-index:27;left:50%;top:44%;width:min(52vw,560px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.1);border:2px solid #b8f4ff;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 31px,#8ee6ff44 32px 34px);box-shadow:0 0 32px #7de1fb;animation:fglRecursion 2.8s .3s ease forwards}
@keyframes fglIce{to{filter:brightness(1.3);background-position:60px -35px,-45px 50px}}@keyframes fglMirror{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(calc(var(--r) - 65deg))}45%,80%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--r))}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25) rotate(calc(var(--r) + 35deg))}}@keyframes fglCopy{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}45%,80%{opacity:.9;transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(.55)}}@keyframes fglRecursion{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}45%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.48)}}

.amb.frostleg-mourn{background:repeating-radial-gradient(circle at 50% 40%,transparent 0 40px,#a7eaff1a 41px 42px),linear-gradient(#060b17dd,#111322dd)}
.amb.frostleg-cyrus{background:repeating-linear-gradient(165deg,transparent 0 58px,#a8eaff15 59px 61px,transparent 62px 110px),linear-gradient(#10121cdd,#06080ddd)}
.amb.frostleg-cyrene{background:linear-gradient(124deg,transparent 0 28%,#a9eaff18 29% 31%,transparent 32% 67%,#bd3e5514 68% 70%,transparent 71%),#050a12dd}
.amb.frostleg-glacenoir{background:repeating-radial-gradient(circle at 50% 45%,transparent 0 34px,#86e2fc1d 35px 37px,transparent 38px 72px),#020611dd}
@media(max-width:700px){.frostleg-name{bottom:11%;font-size:clamp(18px,6vw,31px)}.frostleg-sub{bottom:7%;letter-spacing:.17em}.frostleg-mourn .fdm-table{width:105vw}.frostleg-cyrus .fcy-puddle{width:108vw}.frostleg-cyrene .fcr-knight{width:58vw}.frostleg-glacenoir .fgl-recursion{width:78vw}}
@media(prefers-reduced-motion:reduce){.frostleg-show *{animation-duration:.01ms!important;animation-iteration-count:1!important}}
.kiriantra-show{position:fixed;inset:0;z-index:100008;pointer-events:none;isolation:isolate;overflow:hidden;background:linear-gradient(#020811,#102c3b 52%,#190811);animation:kveil 3.8s ease forwards}.kiriantra-pane,.kiriantra-shard,.kiriantra-stalk,.kiriantra-pirate,.kiriantra-blade,.kiriantra-muzzle,.kiriantra-tally,.kiriantra-title,.kiriantra-sub{position:absolute}.kiriantra-pane{left:50%;top:45%;width:min(45vw,520px);height:min(64vh,590px);transform:translate(-50%,-50%);clip-path:polygon(50% 0,96% 20%,80% 100%,50% 79%,18% 100%,4% 20%);background:linear-gradient(135deg,#d9fbffbb,#498da188,#150c16bb);border:2px solid #c8f8ff;box-shadow:0 0 44px #91e8ff,inset 0 0 55px #04070c;animation:krise 3s ease forwards}.kiriantra-shard{left:calc(50% + var(--x));top:calc(45% + var(--y));width:clamp(26px,5vw,70px);height:clamp(52px,10vw,130px);transform:translate(-50%,-50%) rotate(var(--r));clip-path:polygon(50% 0,100% 22%,78% 100%,22% 76%,0 20%);background:#bcefff88;border:1px solid #d8fbff;animation:kshard 2.8s var(--d) ease forwards}.kiriantra-stalk{left:calc(50% + var(--x));top:46%;width:clamp(42px,8vw,95px);height:clamp(105px,21vw,240px);background:linear-gradient(#0c101b,#57808e 37%,#160c17 62%,#761a35);clip-path:polygon(42% 0,58% 0,72% 18%,66% 34%,90% 55%,74% 100%,53% 77%,47% 77%,26% 100%,10% 55%,34% 34%,28% 18%);opacity:0;animation:kstalk 2.6s var(--d) ease forwards}.kiriantra-pirate{left:50%;top:46%;width:min(22vw,250px);height:min(48vh,450px);transform:translate(-50%,-50%);background:linear-gradient(110deg,#dffbff,#496d7c 35%,#121520 58%,#7d1d38);clip-path:polygon(42% 0,58% 0,72% 17%,66% 34%,89% 55%,74% 100%,52% 76%,47% 76%,26% 100%,11% 55%,35% 34%,28% 17%);animation:krise 3s .3s ease forwards}.kiriantra-pirate:before{content:"";position:absolute;left:9%;top:-12%;width:82%;height:26%;background:#10121a;clip-path:polygon(50% 0,100% 62%,76% 62%,70% 100%,30% 100%,24% 62%,0 62%)}.kiriantra-blade{left:50%;top:47%;width:min(60vw,710px);height:10px;transform:translate(-50%,-50%) rotate(-20deg);background:linear-gradient(90deg,transparent,#fff 28%,#91e5f4 68%,#8a1f3c,transparent);box-shadow:0 0 27px #c8f8ff;animation:kcut 2.1s .75s ease forwards}.kiriantra-muzzle{left:65%;top:42%;width:clamp(28px,5vw,70px);aspect-ratio:1;background:radial-gradient(circle,#fff 0 8%,#bff6ff 10% 23%,#b7193d 25% 38%,transparent 70%);animation:kflash 1.2s 1.12s ease forwards}.kiriantra-tally{right:11%;top:20%;width:70px;height:150px;background:repeating-linear-gradient(105deg,transparent 0 12px,#af1938 13px 16px,transparent 17px 27px);animation:ktally 2.6s .7s ease forwards}.kiriantra-title{left:4%;right:4%;bottom:8%;text-align:center;color:#e7fcff;font:800 clamp(24px,4vw,64px) Georgia,serif;letter-spacing:.13em;text-shadow:0 0 24px #9feeff;animation:ktitle 3.4s ease forwards}.kiriantra-sub{left:5%;right:5%;bottom:5%;text-align:center;color:#b9f2ff;font:800 10px var(--mono);letter-spacing:.32em;animation:ktitle 3.4s ease forwards}@keyframes kveil{0%{opacity:0}10%,80%{opacity:1}100%{opacity:0}}@keyframes krise{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}45%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-56%) scale(1.1)}}@keyframes kshard{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scale(.2)}45%,78%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--r) + 25deg)) scale(1.3)}}@keyframes kstalk{45%,78%{opacity:.56}100%{opacity:0;transform:translateY(-20px)}}@keyframes kcut{0%{opacity:0;transform:translate(-50%,-50%) rotate(-20deg) scaleX(.05)}45%,78%{opacity:1}100%{opacity:0;transform:translate(23%,-110%) rotate(-20deg) scaleX(.4)}}@keyframes kflash{0%,55%{opacity:0;transform:scale(.1)}66%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:scale(.3)}}@keyframes ktally{0%,26%{opacity:0}48%,78%{opacity:.8}100%{opacity:0;transform:translateY(-14px)}}@keyframes ktitle{0%,25%{opacity:0;transform:translateY(20px)}45%,78%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}@media(prefers-reduced-motion:reduce){.kiriantra-show,.kiriantra-pane,.kiriantra-shard,.kiriantra-stalk,.kiriantra-pirate,.kiriantra-blade,.kiriantra-muzzle,.kiriantra-tally,.kiriantra-title,.kiriantra-sub{animation:none}.kiriantra-show,.kiriantra-pane,.kiriantra-pirate,.kiriantra-title,.kiriantra-sub{opacity:1}.kiriantra-shard,.kiriantra-stalk,.kiriantra-muzzle,.kiriantra-tally,.kiriantra-blade{display:none}}.amb.kiriantra{background:linear-gradient(#041019,#0a202b 48%,#0b090f 49%,#020408)}.amb.kiriantra::before,.amb.kiriantra::after{content:"";position:absolute;inset:0;pointer-events:none}.amb.kiriantra::before{opacity:.3;background:repeating-linear-gradient(142deg,transparent 0 48px,#b6f4ff19 49px 50px,transparent 51px 94px),linear-gradient(90deg,transparent 0 44%,#9bdffb18 45% 46%,transparent 47%);animation:kiriantraSea 18s linear infinite}.amb.kiriantra::after{opacity:.24;background:linear-gradient(108deg,transparent 43%,#a51d3d 44% 45%,transparent 46%),linear-gradient(90deg,transparent 63%,#d9fbff66 64% 65%,transparent 66%);animation:kiriantraAmbience 9s ease-in-out infinite}@keyframes kiriantraSea{to{background-position:0 140px,90px 0}}@keyframes kiriantraAmbience{50%{opacity:.4;transform:translateX(8px)}}@media(prefers-reduced-motion:reduce){.amb.kiriantra::before,.amb.kiriantra::after{animation:none}}html.team-opening #teamgame{visibility:hidden!important;pointer-events:none!important}
.legir-show{position:fixed;inset:0;z-index:100006;overflow:hidden;pointer-events:none;isolation:isolate;background:#020306f7;animation:legirVeil 4.15s ease forwards}
.legir-show::after{content:"";position:absolute;z-index:40;inset:0;background:linear-gradient(108deg,transparent 25%,#fff9 49%,transparent 52%);transform:translateX(-145%) skewX(-13deg);animation:legirPrismCut 2.4s .62s ease-out forwards}
.legir-name{position:absolute;z-index:60;left:4%;right:4%;bottom:7.5%;text-align:center;color:#fff9e8;font:800 clamp(22px,4vw,62px) Georgia,serif;letter-spacing:.1em;text-shadow:0 3px 4px #000,0 0 20px var(--legir-c,#ef5cff),0 0 58px var(--legir-c2,#58dfff);animation:legirName 3.9s ease forwards}
.legir-sub{position:absolute;z-index:60;left:5%;right:5%;bottom:4.5%;text-align:center;color:var(--legir-c2,#70e8ff);font:900 clamp(7px,.9vw,12px) var(--mono);letter-spacing:.36em;text-transform:uppercase;text-shadow:0 0 11px currentColor;animation:legirName 4s ease forwards}
.legir-mote{position:absolute;z-index:23;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c);animation:legirMote var(--t) var(--d) ease-in-out infinite alternate}
@keyframes legirVeil{0%{opacity:0}8%,82%{opacity:1}100%{opacity:0}}
@keyframes legirPrismCut{45%,68%{transform:translateX(0) skewX(-13deg)}100%{transform:translateX(145%) skewX(-13deg);opacity:0}}
@keyframes legirName{0%,28%{opacity:0;transform:translateY(20px);letter-spacing:.25em}43%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-11px)}}
@keyframes legirMote{to{transform:translate(var(--dx),var(--dy)) scale(1.6);filter:hue-rotate(55deg)}}
.legir-sayak{--legir-c:#f083ff;--legir-c2:#65e3ff;background:radial-gradient(circle at 50% 47%,#54226666,transparent 34%),linear-gradient(#05020b,#11152b 68%,#020205)}
.legir-sayak .lsi-moon{position:absolute;z-index:2;left:50%;top:43%;width:min(63vw,690px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.25);border:3px solid #b8f5ff88;border-radius:50%;background:repeating-conic-gradient(from 8deg,#ea7cff22 0 3deg,transparent 4deg 24deg);box-shadow:0 0 45px #9454ea88,inset 0 0 65px #4bcffb44;animation:lsiMoon 3.2s ease forwards}
.legir-sayak .lsi-gem{position:absolute;z-index:12;left:var(--x);top:42%;width:clamp(72px,12vw,150px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.15) rotate(45deg);border:3px solid var(--gc);background:radial-gradient(circle,#fff 0 4%,var(--gc) 5% 24%,#101425 26% 57%,#020205 60%);box-shadow:0 0 34px var(--gc),inset 0 0 22px #000;animation:lsiGem 2.9s var(--d) cubic-bezier(.2,.78,.2,1) forwards}
.legir-sayak .lsi-gem::after{content:"";position:absolute;inset:-20%;background:linear-gradient(48deg,transparent 47%,#fff 48% 51%,transparent 52%),linear-gradient(-32deg,transparent 48%,var(--gc) 49% 51%,transparent 52%);opacity:0;animation:lsiCrack .65s calc(var(--d) + 1.05s) ease-out forwards}
.legir-sayak .lsi-beast{position:absolute;z-index:18;left:var(--x);top:43%;width:clamp(115px,18vw,225px);height:clamp(120px,24vw,290px);transform:translate(-50%,-50%) translateY(130px) scale(.2);background:linear-gradient(145deg,var(--gc),#0b0b13 58%);filter:drop-shadow(0 0 22px var(--gc));opacity:0;animation:lsiBeast 2.15s calc(var(--d) + .78s) ease forwards}
.legir-sayak .lsi-wolf{clip-path:polygon(5% 83%,18% 47%,4% 20%,28% 34%,42% 10%,57% 34%,82% 18%,73% 49%,97% 83%,64% 74%,50% 100%,36% 74%)}
.legir-sayak .lsi-cog{clip-path:polygon(38% 0,61% 0,67% 17%,84% 8%,95% 29%,80% 42%,100% 52%,91% 76%,72% 69%,67% 94%,40% 100%,34% 77%,12% 87%,0 63%,18% 49%,4% 30%,27% 20%)}
.legir-sayak .lsi-dead{clip-path:polygon(36% 0,65% 0,76% 18%,69% 37%,86% 60%,71% 100%,54% 72%,45% 72%,28% 100%,15% 60%,31% 37%,24% 18%)}
.legir-sayak .lsi-track{position:absolute;z-index:25;left:50%;top:46%;width:min(74vw,830px);height:3px;background:linear-gradient(90deg,transparent,#65e3ff,#f083ff,#f2d16d,transparent);transform:translateX(-50%) scaleX(0);box-shadow:0 0 20px #b56eff;animation:lsiTrack 1.25s 1.55s ease-out forwards}
@keyframes lsiMoon{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-80deg)}42%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18) rotate(35deg)}}@keyframes lsiGem{0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-120deg)}40%,74%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45) rotate(75deg)}}@keyframes lsiCrack{35%,80%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(1.7)}}@keyframes lsiBeast{0%{opacity:0;transform:translate(-50%,-50%) translateY(130px) scale(.2)}42%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) translateY(-45px) scale(1.08)}}@keyframes lsiTrack{40%,78%{transform:translateX(-50%) scaleX(1)}100%{opacity:0;transform:translateX(-50%) scaleX(.5)}}
.legir-dawn{--legir-c:#ff9ed8;--legir-c2:#8defff;background:linear-gradient(#08152e 0 34%,#d7567777 52%,#f5b85a55 58%,#080b18 69%)}
.legir-dawn .lsd-sun{position:absolute;z-index:2;left:50%;top:52%;width:min(47vw,510px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.15);border-radius:50%;background:radial-gradient(circle,#fffde0 0 8%,#ffd776 19%,#ef6795 43%,transparent 68%);box-shadow:0 0 75px #ff9baf,0 0 170px #e77ec488;animation:lsdSun 3.35s ease forwards}
.legir-dawn .lsd-road{position:absolute;z-index:6;left:50%;bottom:-33%;width:min(80vw,920px);height:92%;transform:translateX(-50%) perspective(700px) rotateX(63deg);transform-origin:bottom;clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);background:repeating-linear-gradient(90deg,#ff6fa533 0 10%,#66e5ff33 11% 20%,#ffe66b33 21% 30%,#8f72ff33 31% 40%);filter:drop-shadow(0 0 34px #88e9ff);animation:lsdRoad 2.8s ease forwards}
.legir-dawn .lsd-centaur{position:absolute;z-index:18;left:50%;bottom:12%;width:min(54vw,590px);height:min(52vh,500px);transform:translateX(-50%) translateX(-48vw) skewX(-11deg);clip-path:polygon(8% 69%,37% 57%,48% 24%,55% 0,62% 25%,68% 53%,94% 62%,100% 78%,69% 78%,59% 100%,53% 73%,38% 73%,28% 100%,22% 76%,0 83%);background:linear-gradient(105deg,#e9fbff,#58d4ef 38%,#f078c9 69%,#120b25);filter:drop-shadow(0 0 27px #a1efff);animation:lsdCharge 3.15s cubic-bezier(.15,.78,.22,1) forwards}
.legir-dawn .lsd-hoof{position:absolute;z-index:15;left:var(--x);bottom:var(--y);width:8px;height:8px;border-radius:50%;background:#fff8b5;box-shadow:0 0 18px #ff9dd6;animation:lsdHoof 1.2s var(--d) ease-out forwards}
.legir-dawn .lsd-horizon{position:absolute;z-index:12;left:0;right:0;top:55%;height:4px;background:linear-gradient(90deg,transparent,#65e8ff,#fff,#ff78c8,transparent);box-shadow:0 0 25px #ff9ed8;transform:scaleX(0);animation:lsdHorizon 1.2s .7s ease forwards}
@keyframes lsdSun{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}42%,83%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1.18)}}@keyframes lsdRoad{0%{opacity:0;transform:translateX(-50%) perspective(700px) rotateX(63deg) translateY(35%)}35%,82%{opacity:1;transform:translateX(-50%) perspective(700px) rotateX(63deg)}100%{opacity:0;transform:translateX(-50%) perspective(700px) rotateX(63deg) translateY(-12%)}}@keyframes lsdCharge{0%{opacity:0;transform:translateX(-50%) translateX(-48vw) skewX(-11deg) scale(.5)}35%,76%{opacity:1;transform:translateX(-50%) skewX(-4deg) scale(1)}100%{opacity:0;transform:translateX(-50%) translateX(62vw) skewX(12deg) scale(.82)}}@keyframes lsdHoof{0%{opacity:0;transform:scale(.2)}45%{opacity:1;transform:scale(1.7)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}@keyframes lsdHorizon{40%,78%{transform:scaleX(1)}100%{opacity:0;transform:scaleX(.65)}}
.legir-march{--legir-c:#ef6fd2;--legir-c2:#66dff5;background:radial-gradient(circle at 50% 35%,#8147a355,transparent 34%),linear-gradient(#080517,#151027 65%,#030205)}
.legir-march .lim-tree{position:absolute;z-index:7;left:50%;bottom:18%;width:min(56vw,620px);height:min(68vh,650px);transform:translateX(-50%) scaleY(.1);transform-origin:50% 100%;background:linear-gradient(90deg,#2e183f,#82d4e0 48%,#4d244d);clip-path:polygon(46% 100%,47% 52%,24% 45%,5% 24%,29% 35%,16% 9%,42% 33%,50% 0,58% 33%,84% 9%,71% 35%,95% 24%,76% 45%,53% 52%,54% 100%);filter:drop-shadow(0 0 26px #80e6eb);animation:limTree 3.2s ease forwards}
.legir-march .lim-figure{position:absolute;z-index:15;left:var(--x);bottom:18%;width:clamp(34px,5vw,67px);height:clamp(145px,28vh,270px);transform:translateX(-50%) translateY(65%) scale(.5);background:linear-gradient(#fff,var(--fc) 28%,#08040f 74%);clip-path:polygon(37% 0,63% 0,72% 17%,65% 38%,83% 100%,53% 74%,47% 74%,17% 100%,35% 38%,28% 17%);filter:drop-shadow(0 0 15px var(--fc));animation:limLeave 2.8s var(--d) ease forwards}
.legir-march .lim-rank{position:absolute;z-index:4;left:50%;bottom:var(--b);width:min(92vw,1060px);height:3px;transform:translateX(-50%) scaleX(.05);background:repeating-linear-gradient(90deg,transparent 0 13px,var(--rc) 14px 22px,transparent 23px 34px);box-shadow:0 0 12px var(--rc);animation:limRank 2.6s var(--d) ease forwards}
.legir-march .lim-banner{position:absolute;z-index:11;left:var(--x);top:12%;width:4px;height:48%;background:#d8f8ff;transform:translateY(-120%);box-shadow:0 0 9px var(--bc);animation:limBanner 2.8s var(--d) ease forwards}
.legir-march .lim-banner::after{content:"";position:absolute;left:4px;top:8%;width:clamp(42px,8vw,100px);height:32%;background:linear-gradient(135deg,var(--bc),#120717);clip-path:polygon(0 0,100% 15%,73% 50%,100% 85%,0 100%)}
@keyframes limTree{0%{opacity:0;transform:translateX(-50%) scaleY(.1)}38%,84%{opacity:1;transform:translateX(-50%) scaleY(1)}100%{opacity:0;transform:translateX(-50%) scale(1.06)}}@keyframes limLeave{0%{opacity:0;transform:translateX(-50%) translateY(65%) scale(.5)}42%,76%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-45%) scale(.65)}}@keyframes limRank{0%{opacity:0;transform:translateX(-50%) scaleX(.05)}40%,82%{opacity:1;transform:translateX(-50%) scaleX(1)}100%{opacity:0;transform:translateX(-50%) translateY(-45px) scaleX(1.08)}}@keyframes limBanner{0%{opacity:0;transform:translateY(-120%)}35%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12%)}}
.legir-menos{--legir-c:#ff5ca8;--legir-c2:#65e5ff;background:radial-gradient(circle at 50% 47%,#392a7b77,transparent 37%),linear-gradient(#04030b,#101329 72%,#020204)}
.legir-menos .lme-gem{position:absolute;z-index:22;left:50%;top:43%;width:min(18vw,190px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.15) rotate(45deg);border:4px solid #d7fbff;background:radial-gradient(circle,#fff 0 7%,#76e5ff 8% 23%,#ee58af 24% 42%,#150d2c 44%);box-shadow:0 0 40px #70e9ff,0 0 100px #f05ab3;animation:lmeGem 3s ease forwards}
.legir-menos .lme-armour{position:absolute;z-index:14;left:50%;top:45%;background:linear-gradient(125deg,#f2f9ff,#4f6577 38%,#171524 64%,#c42c72);filter:drop-shadow(0 0 19px #75e4ff);animation:lmeAssemble 2.65s var(--d) cubic-bezier(.2,.8,.2,1) forwards}
.legir-menos .lme-helm{width:min(20vw,210px);height:min(24vh,230px);clip-path:polygon(25% 0,75% 0,100% 35%,78% 100%,55% 73%,45% 73%,22% 100%,0 35%);--sx:0;--sy:-48vh}
.legir-menos .lme-chest{width:min(34vw,360px);height:min(38vh,360px);clip-path:polygon(18% 0,82% 0,100% 25%,82% 100%,18% 100%,0 25%);--sx:0;--sy:58vh}
.legir-menos .lme-left{width:min(12vw,125px);height:min(42vh,390px);clip-path:polygon(25% 0,75% 0,100% 100%,45% 78%,0 100%);--sx:-58vw;--sy:5vh}
.legir-menos .lme-right{width:min(12vw,125px);height:min(42vh,390px);clip-path:polygon(25% 0,75% 0,100% 100%,45% 78%,0 100%);--sx:58vw;--sy:5vh}
.legir-menos .lme-crown{position:absolute;z-index:26;left:50%;top:18%;width:min(38vw,410px);height:min(14vh,135px);transform:translateX(-50%) scale(.15);clip-path:polygon(0 100%,8% 18%,29% 66%,50% 0,71% 66%,92% 18%,100% 100%);background:linear-gradient(145deg,#fff4a8,#f15cad,#665cff);filter:drop-shadow(0 0 22px #ff6bb7);animation:lmeCrown 2.7s .55s ease forwards}
.legir-menos .lme-beam{position:absolute;z-index:20;left:50%;top:43%;width:5px;height:92vw;transform-origin:50% 0;transform:rotate(var(--r)) scaleY(0);background:linear-gradient(#fff,#6fe6ff 35%,#f15cad 72%,transparent);box-shadow:0 0 22px #75e8ff;animation:lmeBeam 1.3s var(--d) ease-out forwards}
@keyframes lmeGem{0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-120deg)}42%,82%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.42) rotate(90deg)}}@keyframes lmeAssemble{0%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) rotate(40deg) scale(.4)}44%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-55%) scale(1.05)}}@keyframes lmeCrown{0%{opacity:0;transform:translateX(-50%) translateY(-70px) scale(.15)}43%,80%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-20px) scale(1.15)}}@keyframes lmeBeam{35%,76%{transform:rotate(var(--r)) scaleY(1)}100%{opacity:0;transform:rotate(var(--r)) scaleY(.65)}}
.legir-acre{--legir-c:#f6b15c;--legir-c2:#65e7ee;background:linear-gradient(#07131b,#0e1f28 70%,#030608)}
.legir-acre .laa-grid{position:absolute;z-index:2;inset:5%;border:1px solid #65e7ee44;background:repeating-linear-gradient(0deg,transparent 0 39px,#6ee8ed22 40px 41px),repeating-linear-gradient(90deg,transparent 0 39px,#6ee8ed22 40px 41px);transform:perspective(700px) rotateX(59deg);animation:laaGrid 7s linear infinite}
.legir-acre .laa-circle{position:absolute;z-index:5;left:50%;top:44%;width:var(--s);aspect-ratio:1;transform:translate(-50%,-50%) scale(.1) rotate(var(--r));border:2px solid var(--cc);border-radius:50%;box-shadow:0 0 15px var(--cc);background:repeating-conic-gradient(var(--cc) 0 1deg,transparent 2deg 24deg);animation:laaCircle 2.7s var(--d) ease forwards}
.legir-acre .laa-part{position:absolute;z-index:13;left:50%;top:44%;width:var(--w);height:var(--h);transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) rotate(var(--rr)) scale(.2);background:linear-gradient(135deg,#eafcff,#596e78 42%,#c66f28);clip-path:polygon(10% 0,90% 0,100% 30%,78% 100%,22% 100%,0 30%);filter:drop-shadow(0 0 12px var(--pc));animation:laaPart 2.55s var(--d) ease forwards}
.legir-acre .laa-type{position:absolute;z-index:20;left:50%;top:44%;width:clamp(35px,5vw,62px);aspect-ratio:1;border:2px solid var(--tc);border-radius:50%;display:grid;place-items:center;color:#fff;font:900 clamp(12px,2vw,24px) var(--mono);background:#061016dd;box-shadow:0 0 18px var(--tc);transform:translate(-50%,-50%) rotate(var(--a)) translateY(-190px) rotate(calc(var(--a) * -1)) scale(.1);animation:laaType 2.6s var(--d) ease forwards}
.legir-acre .laa-pencil{position:absolute;z-index:25;left:50%;top:44%;width:min(58vw,650px);height:5px;transform:translate(-50%,-50%) rotate(-18deg) scaleX(0);background:linear-gradient(90deg,#f6b15c,#fff 72%,#51dce8);box-shadow:0 0 19px #6de8ef;animation:laaPencil 1.4s .8s ease forwards}
@keyframes laaGrid{to{background-position:0 80px,80px 0}}@keyframes laaCircle{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(var(--r))}42%,80%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(calc(var(--r) + 120deg))}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotate(calc(var(--r) + 200deg))}}@keyframes laaPart{0%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) rotate(var(--rr)) scale(.2)}45%,80%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}100%{opacity:0;transform:translate(-50%,-55%) scale(1.08)}}@keyframes laaType{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-260px) rotate(calc(var(--a) * -1)) scale(.1)}45%,80%{opacity:1;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-190px) rotate(calc(var(--a) * -1)) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--a) + 70deg)) translateY(-230px) rotate(calc((var(--a) + 70deg) * -1)) scale(.45)}}@keyframes laaPencil{35%,72%{transform:translate(-50%,-50%) rotate(-18deg) scaleX(1)}100%{opacity:0;transform:translate(25%,-50%) rotate(-18deg) scaleX(.35)}}
.legir-innumerable{--legir-c:#ec63d0;--legir-c2:#6ee8ee;background:radial-gradient(ellipse at 50% 105%,#5956b65e,transparent 55%),linear-gradient(#05040c,#111025 72%,#020204)}
.legir-innumerable .lli-road{position:absolute;z-index:2;left:50%;bottom:-38%;width:min(96vw,1150px);height:125%;transform:translateX(-50%) perspective(650px) rotateX(67deg);transform-origin:bottom;clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);background:repeating-linear-gradient(90deg,transparent 0 9%,#73e8ee22 10% 11%,transparent 12% 19%),repeating-linear-gradient(0deg,transparent 0 55px,#ef65d022 56px 58px);filter:drop-shadow(0 0 29px #8764e9);animation:lliRoad 2.8s ease forwards}
.legir-innumerable .lli-soldier{position:absolute;z-index:var(--z);left:var(--x);bottom:var(--b);width:var(--w);height:var(--h);transform:translateX(-50%) translateY(110%) scale(.2);background:linear-gradient(130deg,var(--sc),#0a0713 68%);clip-path:var(--shape);filter:drop-shadow(0 0 10px var(--sc));animation:lliSoldier 2.75s var(--d) cubic-bezier(.2,.78,.22,1) forwards}
.legir-innumerable .lli-echo{position:absolute;z-index:7;left:var(--x);bottom:var(--b);width:2px;height:var(--h);background:linear-gradient(transparent,var(--ec),transparent);box-shadow:0 0 12px var(--ec);opacity:0;animation:lliEcho 2.2s var(--d) ease forwards}
.legir-innumerable .lli-command{position:absolute;z-index:28;left:50%;top:37%;width:min(24vw,260px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.1);border:4px solid #fff;border-radius:50%;background:repeating-conic-gradient(#ec63d0 0 4deg,#6ee8ee 5deg 9deg,transparent 10deg 30deg);box-shadow:0 0 36px #ee68d7,0 0 90px #6ee8ee;animation:lliCommand 2.8s .35s ease forwards}
@keyframes lliRoad{0%{opacity:0;transform:translateX(-50%) perspective(650px) rotateX(67deg) translateY(35%)}38%,84%{opacity:1;transform:translateX(-50%) perspective(650px) rotateX(67deg)}100%{opacity:0;transform:translateX(-50%) perspective(650px) rotateX(67deg) translateY(-10%)}}@keyframes lliSoldier{0%{opacity:0;transform:translateX(-50%) translateY(110%) scale(.2)}42%,82%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-24%) scale(1.08)}}@keyframes lliEcho{25%{opacity:0}55%,82%{opacity:.65;transform:scaleY(1.3)}100%{opacity:0;transform:translateY(-55px) scaleY(.5)}}@keyframes lliCommand{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-120deg)}45%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(120deg)}}

.amb.legir-sayak{background:radial-gradient(circle at 50% 45%,#763e8c44,transparent 36%),linear-gradient(#05020bdd,#101329dd)}
.amb.legir-dawn{background:linear-gradient(#07142ddd 0 42%,#cf547555 56%,#080b18dd 72%)}
.amb.legir-march{background:radial-gradient(ellipse at 50% 105%,#8357b344,transparent 60%),#090614dd}
.amb.legir-menos{background:repeating-conic-gradient(from 12deg at 50% 48%,#ee5dac16 0 3deg,transparent 4deg 30deg),#070612dd}
.amb.legir-acre{background:repeating-linear-gradient(0deg,transparent 0 39px,#66e4e81a 40px 41px),repeating-linear-gradient(90deg,transparent 0 39px,#66e4e81a 40px 41px),#07131bdd}
.amb.legir-innumerable{background:repeating-linear-gradient(90deg,transparent 0 8%,#805de61a 9% 10%,transparent 11% 18%),linear-gradient(#05040ddd,#111025dd)}
@media(max-width:700px){.legir-name{bottom:11%;font-size:clamp(18px,6vw,31px)}.legir-sub{bottom:7%;letter-spacing:.18em}.legir-sayak .lsi-beast{width:27vw}.legir-dawn .lsd-centaur{width:82vw}.legir-march .lim-tree{width:88vw}.legir-menos .lme-chest{width:50vw}.legir-acre .laa-type{transform-origin:50% 145px}}
@media(prefers-reduced-motion:reduce){.legir-show *{animation-duration:.01ms!important;animation-iteration-count:1!important}}

.wldleg-show{position:fixed;inset:0;z-index:100006;overflow:hidden;pointer-events:none;isolation:isolate;background:#020805f5;animation:wldlegVeil 4.35s ease forwards}
.wldleg-show::after{content:"";position:absolute;z-index:48;inset:-20%;background:linear-gradient(108deg,transparent 36%,var(--wl-flash,#d8ffad88) 49%,transparent 54%);transform:translateX(-130%) rotate(-7deg);animation:wldlegSweep 2.4s .55s ease-out forwards}
.wldleg-name{position:absolute;z-index:70;left:3%;right:3%;bottom:7.2%;text-align:center;color:#f7ffe9;font:800 clamp(22px,4vw,61px) Georgia,serif;letter-spacing:.1em;text-shadow:0 3px 4px #000,0 0 19px var(--wl-c,#bfff8f),0 0 52px var(--wl-c2,#4c9f70);animation:wldlegName 4.15s ease forwards}
.wldleg-sub{position:absolute;z-index:70;left:4%;right:4%;bottom:4.2%;text-align:center;color:var(--wl-c,#bfff8f);font:900 clamp(7px,.85vw,12px) var(--mono);letter-spacing:.31em;text-transform:uppercase;text-shadow:0 0 10px currentColor;animation:wldlegName 4.2s ease forwards}
.wldleg-leaf{position:absolute;z-index:35;left:var(--x);top:-7%;width:var(--s);height:calc(var(--s)*.54);border-radius:100% 0 100% 0;background:var(--lc);box-shadow:0 0 9px var(--lc);animation:wldlegLeaf var(--t) var(--d) linear infinite}
@keyframes wldlegVeil{0%{opacity:0}8%,84%{opacity:1}100%{opacity:0}}
@keyframes wldlegSweep{48%,68%{transform:translateX(0) rotate(-7deg)}100%{transform:translateX(130%) rotate(-7deg);opacity:0}}
@keyframes wldlegName{0%,28%{opacity:0;transform:translateY(20px);letter-spacing:.23em}42%,84%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}
@keyframes wldlegLeaf{to{transform:translate(var(--drift),112vh) rotate(680deg);opacity:0}}
.wldleg-escaladon{--wl-c:#ffb44f;--wl-c2:#9d271c;--wl-flash:#ffb63b99;background:radial-gradient(circle at 50% 43%,#e04e1538,transparent 32%),linear-gradient(#16090b,#3b1308 65%,#080302)}
.wldleg-escaladon .wes-tree{position:absolute;z-index:2;left:50%;bottom:10%;width:min(82vw,980px);height:76vh;transform:translateX(-50%) scale(.15);transform-origin:50% 100%;background:radial-gradient(ellipse at 50% 23%,#d94a17 0 20%,transparent 52%),repeating-conic-gradient(from 8deg at 50% 85%,#190806 0 2deg,transparent 3deg 12deg);filter:drop-shadow(0 0 25px #ff642c);animation:wesTree 3.5s ease forwards}
.wldleg-escaladon .wes-antlers{position:absolute;z-index:15;left:50%;top:45%;width:min(35vw,430px);height:43vh;transform:translate(-50%,-50%) scale(.2);border:clamp(9px,1.2vw,17px) solid #331509;border-width:0 12px 0;border-radius:50%;filter:drop-shadow(0 0 15px #ff9c43);animation:wesAntlers 3s .28s ease forwards}
.wldleg-escaladon .wes-antlers::before,.wldleg-escaladon .wes-antlers::after{content:"";position:absolute;top:-13%;width:55%;height:80%;border:10px solid #4d1c0d;border-bottom:0}
.wldleg-escaladon .wes-antlers::before{right:48%;border-right:0;transform:skewX(-18deg)}.wldleg-escaladon .wes-antlers::after{left:48%;border-left:0;transform:skewX(18deg)}
.wldleg-escaladon .wes-squirrel{position:absolute;z-index:28;left:var(--x);bottom:var(--y);width:clamp(20px,4vw,48px);aspect-ratio:1;background:#7e2114;border-radius:45% 55% 38% 42%;box-shadow:0 0 13px #ff6b31;transform:translate(-50%,80vh) rotate(var(--r));animation:wesSquirrel 2.2s var(--d) cubic-bezier(.18,.8,.22,1) forwards}
.wldleg-escaladon .wes-squirrel::after{content:"";position:absolute;right:-55%;top:-25%;width:95%;height:95%;border:8px solid #b63a1e;border-left:0;border-radius:50%}
@keyframes wesTree{35%,84%{transform:translateX(-50%) scale(1);opacity:1}100%{transform:translateX(-50%) scale(1.08);opacity:0}}@keyframes wesAntlers{42%,84%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-55%) scale(1.12);opacity:0}}@keyframes wesSquirrel{45%,82%{transform:translate(-50%,0) rotate(var(--r));opacity:1}100%{transform:translate(-50%,-40px) rotate(calc(var(--r) + 12deg));opacity:0}}
.wldleg-isha{--wl-c:#aefbc8;--wl-c2:#55aee7;--wl-flash:#a6f6dcaa;background:linear-gradient(#081d2d,#17434c 58%,#102c22)}
.wldleg-isha .wis-cloud{position:absolute;z-index:3;left:50%;top:15%;width:78vw;height:30vh;transform:translateX(-50%) scale(.3);border-radius:50%;background:radial-gradient(ellipse,#caeff0aa,transparent 63%);filter:blur(9px);animation:wisCloud 3.4s ease forwards}
.wldleg-isha .wis-archfey{position:absolute;z-index:18;left:50%;bottom:14%;width:min(31vw,350px);height:68vh;transform:translateX(-50%) translateY(35%) scale(.65);clip-path:polygon(45% 0,55% 0,61% 14%,78% 27%,68% 50%,83% 100%,17% 100%,32% 50%,22% 27%,39% 14%);background:linear-gradient(90deg,#071a21,#7ac7a8 50%,#071a21);box-shadow:0 0 45px #8af9c8;animation:wisArchfey 3.6s ease forwards}
.wldleg-isha .wis-rain{position:absolute;z-index:25;left:var(--x);top:-20%;width:2px;height:var(--h);background:linear-gradient(transparent,#c5fff6);box-shadow:0 0 6px #a9eaff;transform:rotate(9deg);animation:wisRain var(--t) var(--d) linear infinite}
.wldleg-isha .wis-flower{position:absolute;z-index:30;left:var(--x);bottom:13%;width:var(--s);aspect-ratio:1;transform:translate(-50%,50%) scale(0) rotate(0);background:conic-gradient(from 22deg,#f9e5ff 0 10%,transparent 11% 20%,#99f4bd 21% 31%,transparent 32% 40%,#d7f9ff 41% 51%,transparent 52% 60%,#a7f0c4 61% 71%,transparent 72%);border-radius:50%;filter:drop-shadow(0 0 9px #b7ffcf);animation:wisFlower 2.3s var(--d) ease forwards}
@keyframes wisCloud{35%,84%{transform:translateX(-50%) scale(1);opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.18)}}@keyframes wisArchfey{35%,84%{transform:translateX(-50%) translateY(0) scale(1);opacity:1}100%{transform:translateX(-50%) translateY(-5%) scale(1.04);opacity:0}}@keyframes wisRain{to{transform:translate(35px,130vh) rotate(9deg);opacity:0}}@keyframes wisFlower{40%,82%{transform:translate(-50%,50%) scale(1) rotate(180deg);opacity:1}100%{transform:translate(-50%,25%) scale(1.25) rotate(230deg);opacity:0}}
.wldleg-copycat{--wl-c:#e4ccff;--wl-c2:#6fd4c8;--wl-flash:#d3b7ffaa;background:radial-gradient(circle,#44285455,transparent 38%),linear-gradient(120deg,#071c19,#190d21 52%,#07171c)}
.wldleg-copycat .wco-mirror{position:absolute;z-index:8;left:50%;top:44%;width:min(57vw,670px);height:62vh;transform:translate(-50%,-50%) scale(.15) rotateY(80deg);border:clamp(7px,1vw,14px) double #bda4ce;border-radius:50% 50% 42% 42%;background:linear-gradient(115deg,#99e4d233,#d6bdff66,#132526aa);box-shadow:0 0 42px #cba7ff;animation:wcoMirror 3.3s ease forwards}
.wldleg-copycat .wco-mask{position:absolute;z-index:20;left:50%;top:43%;width:clamp(65px,12vw,150px);height:clamp(90px,18vw,220px);transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r)) scale(.1);border:2px solid #e7d9ff;border-radius:48% 52% 54% 46%;background:linear-gradient(135deg,#e9faf2,#765a89);clip-path:polygon(16% 0,84% 0,100% 65%,50% 100%,0 65%);box-shadow:0 0 22px var(--mc);animation:wcoMask 2.5s var(--d) ease forwards}
.wldleg-copycat .wco-mask::before{content:"";position:absolute;left:17%;right:17%;top:42%;height:16%;background:linear-gradient(90deg,#06120f 0 31%,transparent 32% 68%,#06120f 69%);clip-path:polygon(0 0,100% 0,88% 100%,12% 100%)}
.wldleg-copycat .wco-stolen{position:absolute;z-index:28;left:var(--x);top:var(--y);color:#e7d5ff;font:900 clamp(8px,1vw,13px) var(--mono);letter-spacing:.25em;text-transform:uppercase;text-shadow:0 0 10px #cda5ff;animation:wcoStolen 2.2s var(--d) ease forwards}
@keyframes wcoMirror{35%,84%{transform:translate(-50%,-50%) scale(1) rotateY(0);opacity:1}100%{transform:translate(-50%,-50%) scale(1.12) rotateY(-12deg);opacity:0}}@keyframes wcoMask{38%,78%{transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r)) scale(1);opacity:1}88%{filter:hue-rotate(150deg)}100%{transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(0) scale(.2);opacity:0}}@keyframes wcoStolen{0%,25%{opacity:0;letter-spacing:.7em}45%,78%{opacity:1}100%{opacity:0;transform:translateY(-25px);filter:blur(5px)}}
.wldleg-willow{--wl-c:#bdeecb;--wl-c2:#4de7da;--wl-flash:#8fffd999;background:radial-gradient(ellipse at 50% 58%,#41b99a30,transparent 36%),linear-gradient(#06121b,#09231c 70%,#020806)}
.wldleg-willow .wwi-beast{position:absolute;z-index:13;left:50%;bottom:9%;width:min(62vw,710px);height:77vh;transform:translateX(-50%) scale(.12);transform-origin:50% 100%;background:repeating-conic-gradient(from -18deg at 50% 18%,#15372b 0 3deg,transparent 4deg 13deg),linear-gradient(90deg,transparent 33%,#173a2c 39% 61%,transparent 67%);clip-path:polygon(36% 0,64% 0,72% 28%,87% 42%,76% 58%,83% 100%,61% 100%,55% 60%,45% 60%,39% 100%,17% 100%,24% 58%,13% 42%,28% 28%);filter:drop-shadow(0 0 23px #64d8ba);animation:wwiBeast 3.45s ease forwards}
.wldleg-willow .wwi-wisp{position:absolute;z-index:31;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;transform:translate(-50%,-50%) scale(0);border-radius:50% 45% 50% 35%;background:radial-gradient(circle,#fff 0 6%,#baffea 12%,#5af0d8 40%,transparent 68%);box-shadow:0 0 calc(var(--s)*.65) #6dffe2;animation:wwiWisp 2.5s var(--d) ease forwards}
@keyframes wwiBeast{38%,84%{transform:translateX(-50%) scale(1);opacity:1}100%{transform:translateX(-50%) scale(1.08);opacity:0}}@keyframes wwiWisp{35%{transform:translate(-50%,-50%) scale(0);opacity:0}55%,84%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-90%) scale(1.35);opacity:0}}
.wldleg-unseen{--wl-c:#b9e1bf;--wl-c2:#566d63;--wl-flash:#d7ffe277;background:linear-gradient(#0a1714,#101d19 62%,#050906)}
.wldleg-unseen .wun-grass{position:absolute;z-index:3;inset:45% 0 0;background:repeating-linear-gradient(82deg,transparent 0 15px,#284939 16px 19px,transparent 20px 31px);transform:perspective(400px) rotateX(54deg) scale(1.8);filter:drop-shadow(0 0 7px #6bb78e);animation:wunGrass 3.6s ease forwards}
.wldleg-unseen .wun-print{position:absolute;z-index:22;left:var(--x);top:var(--y);width:clamp(21px,4vw,48px);height:clamp(34px,6vw,72px);transform:translate(-50%,-50%) rotate(var(--r)) scale(0);border:3px solid #a7d1b4;border-radius:50% 50% 35% 35%;box-shadow:0 0 17px #b5e8c5,inset 0 0 13px #89caa0;animation:wunPrint 1.7s var(--d) ease forwards}
.wldleg-unseen .wun-claw{position:absolute;z-index:28;left:50%;top:46%;width:min(70vw,820px);height:29vh;transform:translate(-50%,-50%) scaleX(0);background:repeating-linear-gradient(174deg,transparent 0 19%,#d7f5df 20% 22%,transparent 23% 34%);filter:drop-shadow(0 0 13px #d6ffe2);clip-path:polygon(0 0,100% 12%,92% 24%,100% 38%,91% 49%,100% 63%,89% 74%,100% 88%,0 100%);animation:wunClaw 1.6s 1.15s ease forwards}
.wldleg-unseen .wun-erased{position:absolute;z-index:32;left:50%;top:var(--y);transform:translateX(-50%);color:#c8ddcf;font:900 clamp(11px,1.5vw,22px) var(--mono);letter-spacing:.42em;text-transform:uppercase;white-space:nowrap;animation:wunErase 2.5s var(--d) ease forwards}
@keyframes wunGrass{0%{opacity:0}35%,85%{opacity:1}100%{opacity:0;filter:blur(4px)}}@keyframes wunPrint{35%,70%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1);opacity:1}100%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1.35);opacity:0}}@keyframes wunClaw{45%,74%{transform:translate(-50%,-50%) scaleX(1);opacity:1}100%{transform:translate(-50%,-50%) scaleX(1.2);opacity:0}}@keyframes wunErase{0%,24%{opacity:0}42%,61%{opacity:1;filter:none}82%,100%{opacity:0;filter:blur(10px);letter-spacing:.7em}}
.wldleg-hollow{--wl-c:#d7b6ff;--wl-c2:#5d315d;--wl-flash:#d7b5ff99;background:radial-gradient(circle at 50% 44%,#6f3f6b3b,transparent 36%),linear-gradient(#0c0711,#1f101d 67%,#050306)}
.wldleg-hollow .who-throne{position:absolute;z-index:9;left:50%;bottom:13%;width:min(38vw,430px);height:67vh;transform:translateX(-50%) translateY(80%) scale(.4);background:linear-gradient(90deg,#160c18,#8a5a86 48% 52%,#160c18);clip-path:polygon(22% 0,78% 0,68% 18%,78% 31%,70% 62%,86% 100%,14% 100%,30% 62%,22% 31%,32% 18%);box-shadow:0 0 39px #a775a0;animation:whoThrone 3.45s ease forwards}
.wldleg-hollow .who-void{position:absolute;z-index:14;left:50%;top:43%;width:min(19vw,230px);height:36vh;transform:translate(-50%,-50%) scale(.15);border-radius:50% 50% 42% 42%;background:#000;box-shadow:0 0 25px #b880b8,0 0 75px #4c264c;animation:whoVoid 3s .3s ease forwards}
.wldleg-hollow .who-crown{position:absolute;z-index:25;left:var(--x);top:var(--y);width:clamp(50px,9vw,112px);height:clamp(34px,6vw,74px);transform:translate(-50%,-50%) scale(.12) rotate(var(--r));background:linear-gradient(#f3d6a4,#7e542b);clip-path:polygon(0 100%,5% 12%,29% 55%,49% 0,70% 55%,96% 12%,100% 100%);box-shadow:0 0 17px #eccb8a;animation:whoCrown 2.4s var(--d) ease forwards}
@keyframes whoThrone{38%,84%{transform:translateX(-50%) translateY(0) scale(1);opacity:1}100%{transform:translateX(-50%) translateY(-3%) scale(1.06);opacity:0}}@keyframes whoVoid{40%,84%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}}@keyframes whoCrown{34%,66%{transform:translate(-50%,-50%) scale(1) rotate(var(--r));opacity:1}84%,100%{transform:translate(-50%,-50%) scale(.05) rotate(0);left:50%;top:43%;opacity:0}}
.wldleg-nettle{--wl-c:#d5ff91;--wl-c2:#7563bf;--wl-flash:#d7ff8d88;background:radial-gradient(circle at 50% 43%,#b5e36f25,transparent 32%),linear-gradient(#0b1510,#172016 65%,#080607)}
.wldleg-nettle .wne-cottage{position:absolute;z-index:4;left:50%;bottom:13%;width:min(72vw,850px);height:67vh;transform:translateX(-50%) scale(.2);transform-origin:50% 100%;background:linear-gradient(90deg,transparent 8%,#251b15 9% 91%,transparent 92%);clip-path:polygon(13% 28%,31% 3%,45% 24%,58% 0,88% 30%,88% 100%,13% 100%);box-shadow:0 0 36px #9fcc67;animation:wneCottage 3.5s ease forwards}
.wldleg-nettle .wne-loom{position:absolute;z-index:14;left:50%;top:45%;width:min(44vw,520px);height:40vh;transform:translate(-50%,-50%) rotate(-12deg) scale(.2);border:clamp(7px,1vw,13px) solid #6d4931;background:repeating-linear-gradient(90deg,transparent 0 7%,#d8ff9b 8% 9%,transparent 10% 16%);box-shadow:0 0 25px #a5d86e;animation:wneLoom 3s .25s ease forwards}
.wldleg-nettle .wne-thread{position:absolute;z-index:25;left:50%;top:50%;width:var(--w);height:2px;transform-origin:0 50%;transform:rotate(var(--r)) scaleX(0);background:linear-gradient(90deg,#e6ffbd,#9571d9);box-shadow:0 0 9px #d9ffa6;animation:wneThread 1.9s var(--d) ease forwards}
.wldleg-nettle .wne-name{position:absolute;z-index:31;left:var(--x);top:var(--y);color:#e2ffb8;font:900 clamp(8px,1vw,13px) var(--mono);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 0 9px #b8ed7e;animation:wneName 2.5s var(--d) ease forwards}
@keyframes wneCottage{38%,84%{transform:translateX(-50%) scale(1);opacity:1}100%{transform:translateX(-50%) scale(1.07);opacity:0}}@keyframes wneLoom{38%,84%{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:1}100%{transform:translate(-50%,-50%) rotate(5deg) scale(1.08);opacity:0}}@keyframes wneThread{40%,80%{transform:rotate(var(--r)) scaleX(1);opacity:1}100%{transform:rotate(var(--r)) scaleX(.2);opacity:0}}@keyframes wneName{0%,25%{opacity:0}45%,80%{opacity:1}100%{opacity:0;transform:translate(20px,-15px);filter:blur(4px)}}
.wldleg-crown{--wl-c:#f4d39b;--wl-c2:#77c1d5;--wl-flash:#ffe0a699;background:linear-gradient(104deg,#0d1720 0 49.5%,#28131f 50.5% 100%)}
.wldleg-crown .wcr-hero{position:absolute;z-index:9;left:var(--x);top:43%;width:min(24vw,285px);height:56vh;transform:translate(-50%,-50%) scale(.15);clip-path:polygon(35% 0,65% 0,73% 18%,85% 30%,72% 48%,90% 100%,10% 100%,28% 48%,15% 30%,27% 18%);background:linear-gradient(90deg,var(--hc1),var(--hc2));box-shadow:0 0 35px var(--hc2);animation:wcrHero 3.15s var(--d) ease forwards}
.wldleg-crown .wcr-glass{position:absolute;z-index:20;left:50%;top:43%;width:3px;height:72vh;transform:translate(-50%,-50%) scaleY(0);background:#e8fbff;box-shadow:0 0 18px #fff,0 0 48px #9eefff;animation:wcrGlass 2.6s .4s ease forwards}
.wldleg-crown .wcr-crown{position:absolute;z-index:32;left:28%;top:20%;width:clamp(80px,15vw,180px);height:clamp(55px,10vw,120px);transform:translate(-50%,-50%) rotate(-18deg) scale(.15);background:linear-gradient(#fff3c5,#a26a2f);clip-path:polygon(0 100%,4% 15%,27% 57%,50% 0,73% 57%,96% 15%,100% 100%);box-shadow:0 0 28px #ffe7a2;animation:wcrCrown 3.1s .3s ease forwards}
.wldleg-crown .wcr-deck{position:absolute;z-index:27;left:var(--x);bottom:22%;width:clamp(36px,6vw,68px);height:clamp(52px,9vw,100px);transform:translate(-50%,90vh) rotate(var(--r));border:2px solid #ead39f;border-radius:7px;background:linear-gradient(135deg,#152633,#673444);box-shadow:0 0 12px #dff4ff;animation:wcrDeck 2.2s var(--d) ease forwards}
@keyframes wcrHero{38%,82%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.08);opacity:0}}@keyframes wcrGlass{38%,82%{transform:translate(-50%,-50%) scaleY(1);opacity:1}100%{transform:translate(-50%,-50%) scaleY(1.2);opacity:0}}@keyframes wcrCrown{38%{left:28%;transform:translate(-50%,-50%) rotate(-18deg) scale(1)}72%,84%{left:72%;transform:translate(-50%,-50%) rotate(12deg) scale(1.08)}100%{left:72%;transform:translate(-50%,-70%) rotate(12deg) scale(1.2);opacity:0}}@keyframes wcrDeck{42%,80%{transform:translate(-50%,0) rotate(var(--r));opacity:1}100%{transform:translate(-50%,-20px) rotate(0);left:72%;opacity:0}}
.wldleg-portal{--wl-c:#ffe293;--wl-c2:#7fd5ff;--wl-flash:#fff0acaa;background:conic-gradient(from -45deg at 50% 45%,#589e6f 0 25%,#e6ad44 0 50%,#b54b29 0 75%,#789ac3 0)}
.wldleg-portal .wap-dark{position:absolute;z-index:2;inset:0;background:#02060bc0}
.wldleg-portal .wap-ring{position:absolute;z-index:14;left:50%;top:44%;width:min(58vw,690px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.08) rotate(-180deg);border:clamp(9px,1.2vw,17px) double #f9dfa1;border-radius:50%;background:conic-gradient(transparent 0 23%,#91ffc544 24% 25%,transparent 26% 48%,#ffdd7944 49% 50%,transparent 51% 73%,#ff765644 74% 75%,transparent 76% 98%,#b7e6ff44 99%);box-shadow:0 0 34px #fff0af,inset 0 0 48px #84d7ff66;animation:wapRing 3.45s ease forwards}
.wldleg-portal .wap-core{position:absolute;z-index:16;left:50%;top:44%;width:min(35vw,410px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.1);border-radius:50%;background:conic-gradient(#70d49a,#f3c55b,#c95532,#8fb9e6,#70d49a);filter:blur(4px);box-shadow:0 0 55px #f5e4aa;animation:wapCore 3.1s .25s ease forwards}
.wldleg-portal .wap-season{position:absolute;z-index:27;left:var(--x);top:var(--y);width:clamp(50px,9vw,110px);height:clamp(70px,14vw,165px);transform:translate(-50%,-50%) scale(.1) rotate(var(--r));background:linear-gradient(var(--sc),#07120d);clip-path:polygon(35% 0,65% 0,78% 22%,68% 50%,88% 100%,12% 100%,32% 50%,22% 22%);filter:drop-shadow(0 0 16px var(--sc));animation:wapSeason 2.5s var(--d) ease forwards}
.wldleg-portal .wap-glyph{position:absolute;z-index:31;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(0);color:var(--sc);font:900 clamp(18px,4vw,51px) Georgia,serif;text-shadow:0 0 17px currentColor;animation:wapGlyph 2.4s var(--d) ease forwards}
@keyframes wapRing{40%,84%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}100%{transform:translate(-50%,-50%) scale(1.12) rotate(90deg);opacity:0}}@keyframes wapCore{40%,82%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}100%{transform:translate(-50%,-50%) scale(1.18) rotate(-90deg);opacity:0}}@keyframes wapSeason{38%,80%{transform:translate(-50%,-50%) scale(1) rotate(var(--r));opacity:1}100%{transform:translate(-50%,-50%) scale(.1) rotate(0);left:50%;top:44%;opacity:0}}@keyframes wapGlyph{38%,80%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.5) rotate(45deg);opacity:0}}

@media(max-width:700px){.wldleg-name{font-size:clamp(18px,6vw,29px);bottom:10%}.wldleg-sub{bottom:7%;letter-spacing:.14em}.wldleg-escaladon .wes-tree,.wldleg-willow .wwi-beast{width:105vw}.wldleg-copycat .wco-mirror{width:88vw}.wldleg-nettle .wne-cottage{width:108vw}}
@media(prefers-reduced-motion:reduce){.wldleg-show *{animation-duration:.01ms!important;animation-iteration-count:1!important}}

.br-fire-host{isolation:isolate}
/* the fire never hides a minion's Attack and Health */
.m.br-fire-host>.stat{z-index:33}
.br-fire{position:absolute;inset:-5px;z-index:32;pointer-events:none;overflow:visible;border:1px solid #ff793580;border-radius:8px;box-shadow:0 0 15px -5px #ff6727}
.br-fire-flames{position:absolute;inset:-8px -8px 25px;mask-image:linear-gradient(90deg,#000 0 10px,transparent 10px calc(100% - 10px),#000 calc(100% - 10px));pointer-events:none}
.br-fire-flame{position:absolute;left:var(--x);bottom:-4%;width:var(--w);height:var(--h);transform-origin:50% 100%;background:linear-gradient(0deg,#e3270d 0%,#ff7e10 30%,#ffe568 65%,#fffbd8 95%);clip-path:polygon(0 100%,12% 64%,28% 78%,35% 31%,52% 0,61% 42%,75% 21%,89% 67%,100% 100%);filter:drop-shadow(0 0 4px #ff790a);opacity:.86;animation:brFireDance var(--speed) var(--delay) ease-in-out infinite alternate}
.br-fire-flame:nth-child(even){background:linear-gradient(0deg,#af1123,#ff5818 30%,#ffc838 70%,#fffbd8);animation-direction:alternate-reverse}
.br-fire-label{position:absolute;top:2px;right:2px;white-space:nowrap;background:#250b09ed;border:1px solid #ff9b43;border-radius:4px;padding:2px 5px;color:#fff0c1;font:800 8px var(--mono,monospace);letter-spacing:.06em;text-shadow:0 0 6px #ff7315;box-shadow:0 0 12px #ff53194d}
.br-fire.deck{border-color:#ffba58;box-shadow:0 0 23px -5px #ff6c17}
.br-fire.deck .br-fire-flame{opacity:.95}
.br-fire.deck .br-fire-flames{bottom:0}
.br-fire.deck .br-fire-label{top:auto;bottom:3px}
.br-fire-burst{position:fixed;z-index:100010;pointer-events:none;width:var(--w);height:var(--h);border-radius:50%;background:radial-gradient(ellipse,transparent 64%,#ffd45f66 69%,transparent 73%);animation:brFireBurst .9s ease-out forwards}
.br-fire-ring{position:absolute;inset:-15%;border:3px solid #ffd168;border-radius:50%;box-shadow:0 0 20px #ff591f;animation:brFireRing .85s ease-out forwards}
.br-fire-ember{position:absolute;left:50%;top:70%;width:5px;height:10px;border-radius:70% 15% 70% 15%;background:#fff0b2;box-shadow:0 0 7px #ff831e;animation:brFireEmber .9s var(--delay) ease-out forwards}
@keyframes brFireDance{0%{transform:scaleY(.7) skewX(-8deg);opacity:.68}50%{transform:scaleY(1.1) skewX(7deg);opacity:.95}100%{transform:scaleY(.85) skewX(-3deg);opacity:.8}}
@keyframes brFireBurst{0%{opacity:0;transform:scale(.45)}22%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1.6)}}
@keyframes brFireRing{from{opacity:.9;transform:scale(.35)}to{opacity:0;transform:scale(1.7)}}
@keyframes brFireEmber{from{opacity:1;transform:translate(0,0) rotate(-15deg)}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(110deg)}}
@media(prefers-reduced-motion:reduce){.br-fire-flame{animation:none;opacity:.7}.br-fire-burst,.br-fire-ring,.br-fire-ember{animation:none}.br-fire-burst{background:radial-gradient(ellipse,transparent 64%,#ffbd5577 69%,transparent 73%)}.br-fire-ember{display:none}}
/* Burn Bright: the whole card runs hot — an orange rim, heat rising from the
   bottom of the card, and a strong pulse. No badge. */
.br-mark{position:absolute;inset:-4px;z-index:31;border-radius:10px;pointer-events:none}
.br-mark.bright{border:2px solid #ff8a2a;background:linear-gradient(0deg,rgba(255,96,16,.55) 0%,rgba(255,140,40,.22) 38%,transparent 70%);animation:brBrightPulse 1s ease-in-out infinite}
.br-mark.bright::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 20% 100%,#ffd36a 0 2px,transparent 3px),radial-gradient(circle at 55% 100%,#fff0b0 0 2px,transparent 3px),radial-gradient(circle at 80% 100%,#ffb341 0 2px,transparent 3px);animation:brBrightEmbers 1.4s linear infinite}
@keyframes brBrightPulse{0%,100%{border-color:#ff7a1a;box-shadow:0 0 0 1px #ff9a3c,0 0 16px 4px rgba(255,100,15,.65),inset 0 0 14px rgba(255,120,30,.45)}50%{border-color:#ffe08a;box-shadow:0 0 0 3px #ffd36a,0 0 40px 14px rgba(255,110,15,.95),inset 0 0 30px rgba(255,170,60,.7)}}
@keyframes brBrightEmbers{from{transform:translateY(0);opacity:1}to{transform:translateY(-85%);opacity:0}}
/* Midsummer Blaze: a shell of fire around the minion, like Ward but burning —
   a flickering gold-and-red rim, a wide glow, and flames licking up its sides */
.br-mark.blaze{inset:-8px;border-radius:14px;border:3px solid #ffb020;background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(255,170,40,.28) 70%,rgba(255,90,10,.18) 100%);animation:brBlazeFlicker .9s ease-in-out infinite alternate}
.br-mark.blaze .br-mark-flames{position:absolute;left:-10px;right:-10px;bottom:-6px;height:62%;overflow:visible;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#000 0 22%,rgba(0,0,0,.35) 40% 60%,#000 78%);mask-image:linear-gradient(90deg,#000 0 22%,rgba(0,0,0,.35) 40% 60%,#000 78%)}
.br-mark.blaze::after{content:"\1F525 " attr(data-dmg);position:absolute;left:50%;top:-13px;transform:translateX(-50%);padding:1px 7px;border-radius:8px;border:1px solid #ffb341;background:#2a0d05f2;color:#fff0c1;font:800 11px var(--mono,monospace);text-shadow:0 0 7px #ff7315;box-shadow:0 0 10px #ff6a1a;white-space:nowrap}
@keyframes brBlazeFlicker{0%{border-color:#ffe27a;box-shadow:0 0 0 2px #ff5414,0 0 22px 7px rgba(255,90,10,.85),0 0 48px 16px rgba(255,190,50,.45),inset 0 0 18px rgba(255,200,80,.45)}50%{border-color:#ff7a1a;box-shadow:0 0 0 1px #ffd36a,0 0 30px 10px rgba(255,120,20,.95),0 0 60px 20px rgba(255,80,10,.4),inset 0 0 26px rgba(255,150,40,.55)}100%{border-color:#ffc247;box-shadow:0 0 0 3px #ff7a1a,0 0 18px 5px rgba(255,140,30,.8),0 0 42px 12px rgba(255,210,90,.5),inset 0 0 14px rgba(255,220,110,.4)}}
@media(prefers-reduced-motion:reduce){.br-mark.bright,.br-mark.bright::after,.br-mark.blaze,.br-mark.blaze .br-fire-flame{animation:none}.br-mark.bright{box-shadow:0 0 0 2px #ff9a3c,0 0 24px 8px rgba(255,120,20,.8)}.br-mark.blaze{box-shadow:0 0 0 2px #ff5414,0 0 26px 8px rgba(255,100,15,.85)}}
/* going up in flames: Burn Bright's self-burn, Blaze's tick */
.br-flare{position:fixed;z-index:100011;pointer-events:none;overflow:visible}
.br-flare i{position:absolute;bottom:0;left:var(--x);width:var(--w);height:100%;transform-origin:50% 100%;background:linear-gradient(0deg,#e3270d 0%,#ff7e10 30%,#ffe568 68%,#fffbd8 96%);clip-path:polygon(0 100%,12% 64%,28% 78%,35% 31%,52% 0,61% 42%,75% 26%,88% 70%,100% 100%);opacity:0;animation:brFlareRise .95s var(--delay) ease-out forwards}
@keyframes brFlareRise{0%{opacity:0;transform:scaleY(.15)}30%{opacity:1;transform:scaleY(1.15)}100%{opacity:0;transform:translateY(-38%) scaleY(1.45)}}
@media(prefers-reduced-motion:reduce){.br-flare i{animation:none;opacity:0}}

.moonfox-shirayuki,.moonfox-renkai{overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(164,230,238,.12),transparent 36%),#03070b}.moonfox-shirayuki .moonfox-moon{position:absolute;width:min(42vw,560px);aspect-ratio:1;border-radius:50%;left:50%;top:47%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#fff 0 2%,#c9fbff 9%,#79c9d4 42%,#0a1721 72%);box-shadow:0 0 90px #76eaff99;animation:moonfoxEclipse 2.7s ease-in-out both}.moonfox-shirayuki .moonfox-shrine{position:absolute;left:50%;bottom:6%;width:min(70vw,850px);height:38%;transform:translateX(-50%);border-top:9px solid #2f6d72;filter:drop-shadow(0 0 22px #8cf5ff66)}.moonfox-shirayuki .moonfox-gem{position:absolute;left:50%;top:48%;width:68px;height:68px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(135deg,#fff,#66cbd7 45%,#17254f);box-shadow:0 0 32px #9cffff;animation:moonfoxOrbit 2.5s cubic-bezier(.2,.8,.2,1) both}.moonfox-shirayuki .moonfox-fox{position:absolute;left:-24%;bottom:22%;width:31%;height:13%;background:linear-gradient(90deg,transparent,#f7ffff 42%,#6edbe7);clip-path:polygon(0 60%,45% 35%,58% 0,64% 34%,100% 48%,65% 65%,58% 100%,48% 69%);filter:drop-shadow(0 0 24px #dfffff);animation:moonfoxCross 2.2s .2s cubic-bezier(.15,.75,.2,1) both}@keyframes moonfoxOrbit{0%{transform:translate(-50%,-50%) rotate(calc(var(--i)*72deg)) translateX(52vw) rotate(calc(var(--i)*-72deg));opacity:0}38%,66%{transform:translate(-50%,-50%) rotate(calc(var(--i)*72deg)) translateX(22vw) rotate(calc(var(--i)*-72deg));opacity:1}100%{transform:translate(-50%,-50%) rotate(calc(var(--i)*72deg)) translateX(0) scale(.1);opacity:0}}@keyframes moonfoxCross{0%{transform:translateX(0)}70%,100%{transform:translateX(470%)}}@keyframes moonfoxEclipse{0%,25%{filter:brightness(1)}62%{filter:brightness(.08)}100%{filter:brightness(1)}}
.moonfox-renkai .renkai-half{position:absolute;inset:0 50% 0 0;background:radial-gradient(circle at 100% 50%,#dffaff 0 8%,#123849 32%,#020408 70%)}.moonfox-renkai .renkai-half.sun{inset:0 0 0 50%;background:radial-gradient(circle at 0 50%,#fff7b0 0 8%,#e74424 31%,#150303 72%)}.moonfox-renkai .renkai-crane{position:absolute;inset:8% 12%;background:linear-gradient(90deg,#bdeeff,#fff 47%,#ffdc73 52%,#e83e24);clip-path:polygon(50% 5%,56% 31%,92% 12%,68% 47%,96% 61%,60% 57%,55% 95%,50% 67%,45% 95%,40% 57%,4% 61%,32% 47%,8% 12%,44% 31%);filter:drop-shadow(0 0 32px #fff);animation:renkaiCrane 2.8s cubic-bezier(.22,.8,.18,1) both}.moonfox-renkai .renkai-card{position:absolute;width:82px;height:118px;border:2px solid #ff8c54;background:#160707;left:50%;top:50%;transform:translate(-50%,-50%) rotate(calc(var(--i)*18deg)) translateY(55vh);box-shadow:0 0 22px #ff4d28;animation:renkaiCards 2.8s ease-out both}@keyframes renkaiCrane{0%{transform:scale(.05) rotate(-30deg);opacity:0}40%{transform:scale(1.18);opacity:1}70%{transform:scale(.9);filter:drop-shadow(0 0 70px #fff)}100%{transform:scale(1);opacity:0}}@keyframes renkaiCards{0%,35%{transform:translate(-50%,-50%) rotate(calc(var(--i)*18deg)) translateY(55vh);opacity:0}60%{opacity:1}100%{transform:translate(-50%,-50%) rotate(calc(var(--i)*18deg)) translateY(-65vh);opacity:0}}
.renkai-hero{background:radial-gradient(circle at 50% 40%,rgba(30,6,2,.25),rgba(18,3,1,.82) 70%),var(--renkai-art,none) center 28%/cover!important;border-color:#ff7854!important;animation:renkaiHeroGlow 2.4s ease-in-out infinite}
.renkai-hero .hname,.renkai-hero .hsub{text-shadow:0 0 6px #000,0 0 10px #ff5a2a}
@keyframes renkaiHeroGlow{0%,100%{box-shadow:0 0 0 2px #ff7854,0 0 18px 4px rgba(255,90,40,.55),0 0 36px 10px rgba(255,214,110,.25)}50%{box-shadow:0 0 0 3px #ffd36a,0 0 28px 8px rgba(255,120,50,.8),0 0 54px 16px rgba(255,214,110,.4)}}
@media(prefers-reduced-motion:reduce){.renkai-hero{animation:none;box-shadow:0 0 0 2px #ff7854,0 0 22px 6px rgba(255,90,40,.6)}}

.jb-legend-show{position:fixed;inset:0;z-index:100006;overflow:hidden;pointer-events:none;isolation:isolate;animation:jbVeil 4.45s ease forwards}
.jb-legend-name{position:absolute;z-index:60;left:3%;right:3%;bottom:7.4%;text-align:center;color:#fff4c5;font:800 clamp(21px,3.9vw,60px) Georgia,serif;letter-spacing:.08em;text-shadow:0 3px 4px #000,0 0 20px var(--jb-glow,#f7c94b),0 0 62px var(--jb-glow,#f7c94b);animation:jbWords 4.1s ease forwards}
.jb-legend-sub{position:absolute;z-index:60;left:4%;right:4%;bottom:3.9%;text-align:center;color:var(--jb-ink,#e7be56);font:900 clamp(7px,.88vw,12px) var(--mono);letter-spacing:.34em;text-transform:uppercase;text-shadow:0 0 11px currentColor;animation:jbWords 4.25s ease forwards}
.jb-gold-dust{position:absolute;z-index:45;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#fff4ad;box-shadow:0 0 7px #ffd955,0 0 18px #dca324;animation:jbDust var(--t) var(--d) ease-in-out infinite alternate}
@keyframes jbVeil{0%{opacity:0}7%,85%{opacity:1}100%{opacity:0}}
@keyframes jbWords{0%,43%{opacity:0;transform:translateY(20px);letter-spacing:.25em}56%,85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
@keyframes jbDust{to{transform:translate(12px,-24px) scale(1.55);filter:brightness(1.8)}}
.jb-reservoir-show{--jb-glow:#e7c04f;--jb-ink:#8ff2dc;background:linear-gradient(#071b26 0 30%,#16434a 58%,#06231e 78%,#020c0a)}
.jb-reservoir-show::before{content:"";position:absolute;z-index:2;inset:0;background:radial-gradient(circle at 50% 19%,#fff3b8 0 2%,#f4cb5c 3% 8%,#cb8d2633 9% 22%,transparent 36%);animation:jbrSun 3.8s ease forwards}
.jb-reservoir-show .jbr-mountain{position:absolute;z-index:4;left:-8%;right:-8%;top:23%;height:44%;background:linear-gradient(155deg,#12352f,#071b1a 62%,#020b0a);clip-path:polygon(0 100%,0 68%,10% 48%,18% 64%,28% 31%,35% 55%,46% 7%,53% 48%,64% 19%,72% 58%,82% 35%,91% 64%,100% 43%,100% 100%);filter:drop-shadow(0 14px 11px #000);animation:jbrMountain 3.8s ease forwards}
.jb-reservoir-show .jbr-terrace{position:absolute;z-index:10;left:50%;bottom:var(--b);width:var(--w);height:clamp(46px,7vh,80px);transform:translateX(-50%) perspective(650px) rotateX(62deg) scaleX(.2);transform-origin:50% 100%;border:2px solid #d5aa3e;background:linear-gradient(180deg,#63e9dc88 0 37%,#0c5d5d 39% 57%,#0c211b 59%);box-shadow:0 0 22px #64e4d4,inset 0 0 28px #8df8ea;clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);animation:jbrTerrace 2.8s var(--d) cubic-bezier(.18,.8,.18,1) forwards}
.jb-reservoir-show .jbr-fall{position:absolute;z-index:13;left:var(--x);top:var(--y);width:clamp(13px,2.3vw,34px);height:var(--h);transform:scaleY(0);transform-origin:50% 0;background:linear-gradient(90deg,transparent,#b9fff7 38%,#55dacd 58%,transparent);filter:drop-shadow(0 0 10px #71eee1);animation:jbrFall 2.35s var(--d) ease forwards}
.jb-reservoir-show .jbr-crown{position:absolute;z-index:25;left:50%;top:25%;width:min(35vw,390px);height:min(18vw,190px);transform:translateX(-50%) translateY(-90px) scale(.25);clip-path:polygon(0 100%,7% 22%,28% 65%,50% 0,72% 65%,93% 22%,100% 100%);background:linear-gradient(145deg,#fff3a5,#c89024 45%,#77eee0 50%,#806018 72%);filter:drop-shadow(0 0 20px #ffdf67) drop-shadow(0 0 48px #5de0d0);animation:jbrCrown 3.25s .25s ease forwards}
.jb-reservoir-show .jbr-scepter{position:absolute;z-index:28;left:50%;top:29%;width:clamp(7px,.8vw,12px);height:min(48vh,470px);transform:translateX(-50%) scaleY(0);transform-origin:50% 100%;background:linear-gradient(90deg,#704e13,#ffe68c,#805a18);box-shadow:0 0 12px #ffd85d;animation:jbrScepter 2.7s .55s ease forwards}
.jb-reservoir-show .jbr-scepter::before{content:"";position:absolute;left:50%;top:-34px;width:58px;aspect-ratio:1;transform:translateX(-50%) rotate(45deg);border:5px double #ffe57c;background:radial-gradient(circle,#eafffb,#4dd9cd 38%,#0b5656 65%);box-shadow:0 0 25px #5ff0df}
.jb-reservoir-show .jbr-wave{position:absolute;z-index:32;left:50%;top:50%;width:var(--s);aspect-ratio:1;border:3px solid #85f5e5;border-radius:50%;transform:translate(-50%,-50%) scale(.15);box-shadow:0 0 18px #57dccc,inset 0 0 18px #57dccc;animation:jbrWave 2.2s var(--d) ease-out forwards}
@keyframes jbrSun{0%{opacity:0;transform:scale(.4)}30%,84%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.1)}}
@keyframes jbrMountain{0%{opacity:0;transform:translateY(60px)}28%,86%{opacity:1;transform:none}100%{opacity:0}}
@keyframes jbrTerrace{0%{opacity:0;transform:translateX(-50%) perspective(650px) rotateX(62deg) scaleX(.2)}38%,84%{opacity:1;transform:translateX(-50%) perspective(650px) rotateX(62deg) scaleX(1)}100%{opacity:0;transform:translateX(-50%) perspective(650px) rotateX(62deg) scaleX(1.08)}}
@keyframes jbrFall{0%,18%{opacity:0;transform:scaleY(0)}46%,84%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1.12)}}
@keyframes jbrCrown{0%{opacity:0;transform:translateX(-50%) translateY(-90px) scale(.25)}43%,84%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-12px) scale(1.15)}}
@keyframes jbrScepter{0%{opacity:0;transform:translateX(-50%) scaleY(0)}42%,84%{opacity:1;transform:translateX(-50%) scaleY(1)}100%{opacity:0;transform:translateX(-50%) scaleY(1.08)}}
@keyframes jbrWave{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}25%,68%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
.jb-speaker-show{--jb-glow:#ffb928;--jb-ink:#d5ff90;background:radial-gradient(circle at 50% 43%,#ba4f102e,transparent 42%),linear-gradient(#130903,#3e1607 57%,#081407)}
.jb-speaker-show .jbs-sun{position:absolute;z-index:7;left:50%;top:42%;width:min(64vmin,670px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.15) rotate(-70deg);border:clamp(5px,1vw,12px) double #ffd45d;border-radius:50%;background:repeating-conic-gradient(#ffdf6c 0 5deg,#7d2408 6deg 12deg,#82b632 13deg 18deg,#2d1206 19deg 24deg);box-shadow:0 0 34px #ffc23c,0 0 130px #e7601c,inset 0 0 62px #2d0802;animation:jbsSun 3.6s ease forwards}
.jb-speaker-show .jbs-sun::after{content:"";position:absolute;inset:20%;border:3px solid #fff0a3;border-radius:50%;background:radial-gradient(circle,#fffad0 0 5%,#ffb72f 14%,#7e1d08 41%,#160402 67%);box-shadow:0 0 32px #ffe073}
.jb-speaker-show .jbs-ray{position:absolute;z-index:4;left:50%;top:42%;width:clamp(3px,.55vw,8px);height:min(47vh,470px);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-31vmin) scaleY(.1);background:linear-gradient(transparent,#ffe27b 42%,#ff9f24);filter:drop-shadow(0 0 8px #ffbb32);animation:jbsRay 2.8s var(--d) ease forwards}
.jb-speaker-show .jbs-petal{position:absolute;z-index:18;left:50%;top:42%;width:clamp(34px,6vw,78px);height:clamp(75px,13vw,165px);transform-origin:50% 105%;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-16vmin) scale(.12);border-radius:70% 15% 70% 15%;background:linear-gradient(135deg,var(--pc),#f3d36a 42%,#1a1208 78%);box-shadow:0 0 19px var(--pc);animation:jbsPetal 2.65s var(--d) cubic-bezier(.2,.8,.2,1) forwards}
.jb-speaker-show .jbs-bone{position:absolute;z-index:22;left:50%;top:42%;width:clamp(11px,1.8vw,24px);height:min(35vmin,310px);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-8vmin) scaleY(.08);background:linear-gradient(90deg,#8d805e,#fff6cf 45%,#7b6b4b);clip-path:polygon(35% 0,65% 0,82% 8%,65% 16%,67% 84%,84% 91%,66% 100%,34% 100%,16% 91%,33% 84%,35% 16%,18% 8%);filter:drop-shadow(0 0 7px #ffe49b);animation:jbsBone 2.5s var(--d) ease forwards}
.jb-speaker-show .jbs-mask{position:absolute;z-index:34;left:50%;top:42%;width:min(19vmin,185px);height:min(26vmin,255px);transform:translate(-50%,-50%) scale(.1);clip-path:polygon(50% 0,88% 19%,100% 58%,75% 100%,50% 82%,25% 100%,0 58%,12% 19%);background:linear-gradient(90deg,#4f2a0a,#fff1ac 25%,#ce7b18 49%,#fff0a2 73%,#4d2508);box-shadow:0 0 28px #ffc23e;animation:jbsMask 3.05s .48s ease forwards}
.jb-speaker-show .jbs-mask::before,.jb-speaker-show .jbs-mask::after{content:"";position:absolute;top:40%;width:23%;height:9%;border-radius:50%;background:#130301;box-shadow:0 0 13px #dbff67}.jb-speaker-show .jbs-mask::before{left:17%;transform:rotate(12deg)}.jb-speaker-show .jbs-mask::after{right:17%;transform:rotate(-12deg)}
.jb-speaker-show .jbs-vine{position:absolute;z-index:16;left:var(--x);bottom:-5%;width:5px;height:var(--h);transform-origin:50% 100%;transform:rotate(var(--r)) scaleY(0);background:linear-gradient(#b8dd52,#1c5e24);box-shadow:0 0 9px #85c53d;animation:jbsVine 2.45s var(--d) ease forwards}
.jb-speaker-show .jbs-vine::after{content:"";position:absolute;left:-13px;top:28%;width:30px;height:16px;border-radius:100% 0;background:#83b63c;box-shadow:0 0 8px #a9d84c}
@keyframes jbsSun{0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-70deg)}42%,84%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.16) rotate(24deg)}}
@keyframes jbsRay{0%{opacity:0;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-31vmin) scaleY(.1)}40%,80%{opacity:.82;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-31vmin) scaleY(1)}100%{opacity:0;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-31vmin) scaleY(1.3)}}
@keyframes jbsPetal{0%,15%{opacity:0;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-16vmin) scale(.12)}47%,82%{opacity:1;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-16vmin) scale(1)}100%{opacity:0;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-24vmin) scale(.48)}}
@keyframes jbsBone{0%,18%{opacity:0;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-8vmin) scaleY(.08)}48%,82%{opacity:1;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-8vmin) scaleY(1)}100%{opacity:0;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-18vmin) scaleY(.5)}}
@keyframes jbsMask{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-18deg)}48%,84%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.24) rotate(9deg)}}
@keyframes jbsVine{0%{opacity:0;transform:rotate(var(--r)) scaleY(0)}46%,84%{opacity:1;transform:rotate(var(--r)) scaleY(1)}100%{opacity:0;transform:rotate(var(--r)) scaleY(1.12)}}
.jb-riverway-show{--jb-glow:#72f2e4;--jb-ink:#ffe076;background:linear-gradient(#061923,#0b3d45 49%,#09271e 73%,#030b09)}
.jb-riverway-show .jgr-mesa{position:absolute;z-index:3;left:-5%;right:-5%;bottom:12%;height:70%;background:linear-gradient(165deg,#724b25,#2c2819 55%,#071311);clip-path:polygon(0 100%,0 60%,11% 45%,19% 66%,29% 25%,39% 61%,50% 11%,61% 58%,72% 29%,81% 67%,91% 43%,100% 62%,100% 100%);filter:drop-shadow(0 12px 15px #000);animation:jgrMesa 3.8s ease forwards}
.jb-riverway-show .jgr-canal{position:absolute;z-index:12;left:var(--x);top:var(--y);width:var(--w);height:clamp(8px,1.1vw,15px);transform-origin:0 50%;transform:rotate(var(--r)) scaleX(0);background:linear-gradient(#effff8,#65ede0 48%,#167c81);border:1px solid #e9c75a;box-shadow:0 0 12px #77f7ea;animation:jgrCanal 2.25s var(--d) ease forwards}
.jb-riverway-show .jgr-river{position:absolute;z-index:17;left:50%;top:23%;width:min(34vw,390px);height:75vh;transform:translateX(-50%) perspective(650px) rotateX(56deg) scaleY(.05);transform-origin:50% 0;background:linear-gradient(90deg,transparent,#54d9d0 19%,#e9ffec 48%,#58dcd2 76%,transparent);clip-path:polygon(33% 0,67% 0,85% 35%,64% 55%,83% 76%,54% 100%,25% 100%,43% 77%,19% 54%,39% 33%);filter:drop-shadow(0 0 18px #71f2e5);animation:jgrRiver 3s .5s ease forwards}
.jb-riverway-show .jgr-drop{position:absolute;z-index:27;left:var(--x);top:var(--y);width:var(--s);height:var(--s);transform:translate(-50%,-50%) scale(0);border-radius:55% 45% 58% 42%;background:radial-gradient(circle at 38% 28%,#fff 0 8%,#72f4e5 16% 51%,#126976 70%);box-shadow:0 0 17px #7affed;animation:jgrDrop 2.3s var(--d) ease forwards}
.jb-riverway-show .jgr-heart{position:absolute;z-index:31;left:var(--x);bottom:var(--b);width:clamp(30px,5vw,62px);aspect-ratio:1;transform:translate(-50%,50%) rotate(45deg) scale(0);background:#8affd4;box-shadow:0 0 23px #75ffd0;animation:jgrHeart 1.9s var(--d) ease forwards}.jb-riverway-show .jgr-heart::before,.jb-riverway-show .jgr-heart::after{content:"";position:absolute;width:100%;height:100%;border-radius:50%;background:inherit}.jb-riverway-show .jgr-heart::before{left:-50%}.jb-riverway-show .jgr-heart::after{top:-50%}
@keyframes jgrMesa{0%{opacity:0;transform:translateY(60px)}30%,86%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.03)}}@keyframes jgrCanal{40%,82%{transform:rotate(var(--r)) scaleX(1);opacity:1}100%{transform:rotate(var(--r)) scaleX(1.12);opacity:0}}@keyframes jgrRiver{42%,84%{transform:translateX(-50%) perspective(650px) rotateX(56deg) scaleY(1);opacity:1}100%{transform:translateX(-50%) perspective(650px) rotateX(56deg) scaleY(1.08);opacity:0}}@keyframes jgrDrop{40%,78%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,60vh) scale(.55);opacity:0}}@keyframes jgrHeart{42%,78%{transform:translate(-50%,50%) rotate(45deg) scale(1);opacity:1}100%{transform:translate(-50%,-25px) rotate(45deg) scale(1.25);opacity:0}}
.jb-cloudbreak-show{--jb-glow:#b9f8ff;--jb-ink:#f7d968;background:linear-gradient(#01060d,#102a3b 58%,#123d43)}
.jb-cloudbreak-show .jfc-cloud{position:absolute;z-index:5;left:50%;top:23%;width:125vw;height:52vh;transform:translate(-50%,-50%) scale(.35);border-radius:50%;background:radial-gradient(ellipse at 50% 55%,#718699 0 13%,#172635 43%,#02060d 71%);filter:drop-shadow(0 25px 30px #000);animation:jfcCloud 3.65s ease forwards}
.jb-cloudbreak-show .jfc-rift{position:absolute;z-index:18;left:50%;top:0;width:min(19vw,230px);height:75vh;transform:translateX(-50%) scaleY(0);transform-origin:50% 0;background:linear-gradient(90deg,transparent,#fff8c8 43%,#d6ffff 50%,#ffe677 57%,transparent);clip-path:polygon(48% 0,65% 15%,46% 27%,72% 43%,41% 57%,61% 72%,48% 100%,34% 73%,53% 58%,27% 43%,54% 27%,37% 14%);filter:drop-shadow(0 0 22px #dfffff);animation:jfcRift 2.45s .35s ease forwards}
.jb-cloudbreak-show .jfc-rain{position:absolute;z-index:24;left:var(--x);top:-15%;width:2px;height:var(--h);background:linear-gradient(transparent,#c7ffff);box-shadow:0 0 7px #7aeaf7;transform:rotate(7deg);animation:jfcRain var(--t) var(--d) linear infinite}
.jb-cloudbreak-show .jfc-reservoir{position:absolute;z-index:31;left:50%;top:57%;width:min(55vw,620px);height:min(25vh,250px);transform:translate(-50%,-50%) scale(.15);border:clamp(6px,1vw,12px) double #f2cd5e;border-radius:50%;background:linear-gradient(180deg,#05141c 0 48%,#54e3df 51%);box-shadow:0 0 32px #74eee7,inset 0 -35px 45px #42cfc8;animation:jfcReservoir 3s .4s ease forwards}
.jb-cloudbreak-show .jfc-number{position:absolute;z-index:37;left:var(--x);top:57%;transform:translate(-50%,-50%) scale(.1);color:#fff3b2;font:900 clamp(70px,15vw,190px) Georgia,serif;text-shadow:0 0 22px var(--nc);animation:jfcNumber 2.45s var(--d) ease forwards}
.jb-cloudbreak-show .jfc-arrow{position:absolute;z-index:39;left:50%;top:57%;width:min(16vw,180px);height:10px;transform:translate(-50%,-50%) scaleX(0);background:#fce27e;box-shadow:0 0 16px #fff0a4;animation:jfcArrow 1.7s .9s ease forwards}.jb-cloudbreak-show .jfc-arrow::after{content:"";position:absolute;right:-4px;top:50%;width:31px;height:31px;border-top:9px solid #fce27e;border-right:9px solid #fce27e;transform:translateY(-50%) rotate(45deg)}
@keyframes jfcCloud{35%,83%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-62%) scale(1.15);opacity:0}}@keyframes jfcRift{38%,84%{transform:translateX(-50%) scaleY(1);opacity:1}100%{transform:translateX(-50%) scaleY(1.16);opacity:0}}@keyframes jfcRain{to{transform:translate(30px,125vh) rotate(7deg);opacity:0}}@keyframes jfcReservoir{40%,84%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.12);opacity:0}}@keyframes jfcNumber{38%,78%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-65%) scale(1.2);opacity:0}}@keyframes jfcArrow{42%,78%{transform:translate(-50%,-50%) scaleX(1);opacity:1}100%{transform:translate(-40%,-50%) scaleX(1.15);opacity:0}}
.jb-ixala-show{--jb-glow:#ffd85f;--jb-ink:#9affd8;background:radial-gradient(circle at 50% 12%,#ffe57b38,transparent 27%),linear-gradient(#07131a,#1d3124 65%,#080d09)}
.jb-ixala-show .jia-pyramid{position:absolute;z-index:4;left:50%;bottom:9%;width:min(78vw,920px);height:70vh;transform:translateX(-50%) scaleY(.08);transform-origin:50% 100%;background:repeating-linear-gradient(0deg,#48361d 0 8%,#d6a83f 8.5% 9.5%,#1b291d 10% 14%);clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 0 18px #e9ba4d);animation:jiaPyramid 3.25s ease forwards}
.jb-ixala-show .jia-duty{position:absolute;z-index:21;left:50%;bottom:var(--b);width:clamp(42px,7vw,88px);aspect-ratio:1;transform:translate(-50%,50%) translateX(var(--x)) scale(.1) rotate(-90deg);border:4px double var(--dc);border-radius:50%;background:repeating-conic-gradient(var(--dc) 0 5deg,transparent 6deg 31deg);box-shadow:0 0 19px var(--dc);animation:jiaDuty 2.35s var(--d) ease forwards}
.jb-ixala-show .jia-duty.fulfilled{background:radial-gradient(circle,#fff7bf 0 10%,#e6bd3f 16% 38%,transparent 42%),repeating-conic-gradient(#fff0a0 0 7deg,transparent 8deg 30deg)}
.jb-ixala-show .jia-ixala{position:absolute;z-index:29;left:50%;bottom:13%;width:min(25vw,285px);height:61vh;transform:translateX(-50%) translateY(45%) scale(.55);clip-path:polygon(40% 0,60% 0,67% 14%,82% 27%,70% 50%,88% 100%,12% 100%,30% 50%,18% 27%,33% 14%);background:linear-gradient(90deg,#11160f,#e2bb4c 44% 56%,#12332b);filter:drop-shadow(0 0 22px #f1c95d);animation:jiaIxala 3.55s ease forwards}
.jb-ixala-show .jia-shield{position:absolute;z-index:34;left:50%;top:42%;width:min(36vw,430px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.1) rotate(45deg);border:clamp(7px,1vw,13px) double #b9ffe8;background:radial-gradient(circle,transparent 33%,#5de8c83d 35% 58%,transparent 60%);box-shadow:0 0 31px #73f4d8,inset 0 0 38px #6eedcf;animation:jiaShield 2.75s .48s ease forwards}
.jb-ixala-show .jia-sun{position:absolute;z-index:14;left:50%;top:17%;width:min(27vmin,280px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.1) rotate(-90deg);border-radius:50%;background:repeating-conic-gradient(#ffe889 0 8deg,#9e681c 9deg 17deg);box-shadow:0 0 35px #ffd75d,0 0 95px #efad31;animation:jiaSun 3s .35s ease forwards}
@keyframes jiaPyramid{38%,85%{transform:translateX(-50%) scaleY(1);opacity:1}100%{transform:translateX(-50%) scaleY(1.06);opacity:0}}@keyframes jiaDuty{40%,82%{transform:translate(-50%,50%) translateX(var(--x)) scale(1) rotate(0);opacity:1}100%{transform:translate(-50%,20%) translateX(var(--x)) scale(1.2) rotate(30deg);opacity:0}}@keyframes jiaIxala{35%,82%{transform:translateX(-50%) translateY(0) scale(1);opacity:1}100%{transform:translateX(-50%) translateY(-18%) scale(1.08);opacity:0}}@keyframes jiaShield{42%,80%{transform:translate(-50%,-50%) scale(1) rotate(45deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1.25) rotate(135deg);opacity:0}}@keyframes jiaSun{40%,84%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}100%{transform:translate(-50%,-50%) scale(1.2) rotate(70deg);opacity:0}}
.amb.jb-riverway{background:radial-gradient(ellipse at 50% 65%,#48dacf3d,transparent 33%),repeating-linear-gradient(0deg,#071a16cc 0 11%,#44cfc43b 12% 15%,#0b2720cc 16% 26%)}
.amb.jb-cloudbreak{background:radial-gradient(ellipse at 50% 0,#d4ffff30,transparent 35%),linear-gradient(#06111ddd,#10353cdd)}
.amb.jb-ixala{background:radial-gradient(circle at 50% 16%,#f7cd4f36,transparent 22%),repeating-linear-gradient(0deg,#0c1d17dd 0 12%,#bd8e3031 13% 14%,#14271cdd 15% 27%)}
.amb.jb-reservoir{background:radial-gradient(circle at 50% 20%,#f5cb5130,transparent 20%),repeating-linear-gradient(0deg,#06201ccc 0 13%,#2db6aa38 14% 17%,#092a25cc 18% 29%)}
.amb.jb-speaker{background:radial-gradient(circle at 50% 46%,#f6b72e42 0 8%,#a7461822 9% 31%,transparent 48%),linear-gradient(#1a0903dd,#081307dd)}
.amb .jbb-canal{position:absolute;left:var(--x);bottom:var(--b);width:var(--w);height:7px;border:1px solid #d7b54e;background:#62e5d5;box-shadow:0 0 13px #63e8d7;animation:jbbCanal var(--t) ease-in-out infinite alternate}
.amb .jbb-solar{position:absolute;left:50%;top:47%;width:42vmin;aspect-ratio:1;transform:translate(-50%,-50%);border:4px double #e8bd43;border-radius:50%;background:repeating-conic-gradient(#d18c1b44 0 8deg,transparent 9deg 18deg);box-shadow:0 0 24px #e8a62b55;animation:jbbSolar 18s linear infinite}
.amb .jbb-petal{position:absolute;left:var(--x);top:var(--y);width:16px;height:34px;border-radius:90% 10%;background:var(--c);box-shadow:0 0 9px var(--c);animation:jbbPetal var(--t) ease-in-out infinite alternate}
@keyframes jbbCanal{to{filter:brightness(1.8);transform:translateX(10px)}}@keyframes jbbSolar{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes jbbPetal{to{transform:translateY(-13px) rotate(18deg);filter:brightness(1.5)}}
@media(max-width:700px){.jb-legend-name{bottom:11%;font-size:clamp(18px,6.5vw,32px)}.jb-legend-sub{bottom:7%;letter-spacing:.16em}.jb-reservoir-show .jbr-crown{width:58vw;height:29vw}.jb-speaker-show .jbs-sun{width:82vmin}}
@media(prefers-reduced-motion:reduce){.jb-legend-show *,.amb .jbb-canal,.amb .jbb-solar,.amb .jbb-petal{animation-duration:.01ms!important;animation-iteration-count:1!important}}

.adm-legend-show{position:fixed;inset:0;z-index:100006;overflow:hidden;pointer-events:none;isolation:isolate;background:#01070bf5;animation:admLegendVeil 4s ease forwards}
.adm-legend-show::after{content:"";position:absolute;z-index:30;inset:0;background:linear-gradient(112deg,transparent 38%,#d6fff133 49%,transparent 60%);transform:translateX(-130%);animation:admCausticSweep 2.7s .45s ease-out forwards}
.adm-legend-name{position:absolute;z-index:50;left:3%;right:3%;bottom:7.5%;text-align:center;color:#e9fff8;font:800 clamp(22px,4vw,62px) Georgia,serif;letter-spacing:.1em;text-shadow:0 3px 4px #000,0 0 18px var(--adm-vfx,#42d8d2),0 0 55px var(--adm-vfx,#42d8d2);animation:admLegendName 3.7s ease forwards}
.adm-legend-sub{position:absolute;z-index:50;left:4%;right:4%;bottom:4.5%;text-align:center;color:var(--adm-metal,#d6a75b);font:900 clamp(7px,.9vw,12px) var(--mono);letter-spacing:.38em;text-transform:uppercase;text-shadow:0 0 10px currentColor;animation:admLegendName 3.8s ease forwards}
.adm-bubble{position:absolute;z-index:12;left:var(--x);bottom:-8%;width:var(--s);height:var(--s);border:1px solid #a9fff1aa;border-radius:50%;box-shadow:inset 0 0 8px #42d8d266,0 0 8px #42d8d244;animation:admBubble var(--t) var(--d) ease-in infinite}
@keyframes admLegendVeil{0%{opacity:0}8%,82%{opacity:1}100%{opacity:0}}
@keyframes admLegendName{0%,28%{opacity:0;transform:translateY(18px);letter-spacing:.25em}42%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
@keyframes admCausticSweep{to{transform:translateX(130%)}}
@keyframes admBubble{to{transform:translate(var(--drift),-115vh) scale(.3);opacity:0}}
.adm-kholat-show{--adm-vfx:#59fff1;--adm-metal:#e0b766;background:radial-gradient(ellipse at 50% 105%,#12616b 0,#062630 33%,#01080e 70%)}
.adm-kholat-show .ak-sea{position:absolute;z-index:2;inset:0;background:repeating-linear-gradient(173deg,transparent 0 45px,#5ee8dc18 46px 49px,transparent 50px 91px);animation:akSea 1.8s ease-in-out infinite alternate}
.adm-kholat-show .ak-fin{position:absolute;z-index:10;left:50%;bottom:16%;width:min(78vw,940px);height:min(58vh,560px);transform:translateX(-50%) scale(.2);clip-path:polygon(0 92%,10% 62%,25% 48%,39% 18%,49% 0,58% 23%,78% 48%,94% 75%,100% 100%);background:linear-gradient(145deg,#173a42,#020609 58%);filter:drop-shadow(0 0 28px #42d8d288);animation:akRise 3.3s cubic-bezier(.18,.75,.2,1) forwards}
.adm-kholat-show .ak-eye{position:absolute;z-index:13;left:50%;top:46%;width:min(18vw,190px);height:min(6vw,62px);transform:translate(-50%,-50%) scale(.2);border-radius:50%;background:radial-gradient(ellipse,#fff3b0 0 5%,#d9a83f 6% 28%,#030506 31% 48%,transparent 51%);box-shadow:0 0 28px #e7b653;animation:akEye 2.4s .55s ease forwards}
.adm-kholat-show .ak-flag{position:absolute;z-index:18;left:50%;top:10%;width:5px;height:42vh;background:#b98b45;box-shadow:0 0 8px #e8c574;animation:akFlagMast 2.8s ease forwards}
.adm-kholat-show .ak-flag::after{content:"";position:absolute;left:5px;top:6%;width:min(28vw,310px);height:42%;background:linear-gradient(120deg,#020305,#0b171b 66%,#b78a3f);clip-path:polygon(0 0,100% 14%,75% 50%,100% 86%,0 100%);box-shadow:0 0 22px #42d8d255;animation:akFlag 1s ease-in-out infinite alternate}
@keyframes akSea{to{background-position:0 38px;filter:brightness(1.35)}}@keyframes akRise{0%{opacity:0;transform:translateX(-50%) translateY(50%) scale(.2)}35%,82%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.2)}}@keyframes akEye{0%,20%{opacity:0;transform:translate(-50%,-50%) scale(.2)}48%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}@keyframes akFlagMast{0%{opacity:0;transform:translateY(-80%)}28%,84%{opacity:1;transform:none}100%{opacity:0}}@keyframes akFlag{to{transform:skewY(5deg) scaleX(.92)}}
.adm-kass-show{--adm-vfx:#7af4e7;--adm-metal:#d9a34d;background:radial-gradient(circle at 50% 46%,#17434c66,transparent 42%),linear-gradient(#02070c,#071d26 65%,#010407)}
.adm-kass-show .aks-chart{position:absolute;z-index:3;inset:7%;border:1px solid #56d7c744;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 38px,#5cf0dc22 39px 40px,transparent 41px 75px),repeating-linear-gradient(27deg,transparent 0 70px,#c79a5022 71px 72px);transform:perspective(700px) rotateX(57deg);animation:aksChart 8s linear infinite}
.adm-kass-show .aks-card{position:absolute;z-index:12;left:var(--x);top:var(--y);width:clamp(42px,7vw,82px);aspect-ratio:5/7;border:2px solid #bd9150;border-radius:5px;background:linear-gradient(145deg,#13343c,#020507 72%);box-shadow:0 0 18px #42d8d255;transform:rotate(var(--r)) scale(.3);animation:aksCards 2.8s var(--d) cubic-bezier(.2,.8,.2,1) forwards}
.adm-kass-show .aks-knife{position:absolute;z-index:19;left:-20%;top:46%;width:140%;height:4px;background:linear-gradient(90deg,transparent,#effff9 36%,#d6a75b 50%,#effff9 64%,transparent);box-shadow:0 0 24px #8effef;transform:rotate(-11deg) scaleX(0);animation:aksKnife 1.2s 1.05s ease-out forwards}
.adm-kass-show .aks-prize{position:absolute;z-index:22;left:50%;top:44%;width:min(17vw,170px);aspect-ratio:5/7;transform:translate(-50%,-50%) scale(.1) rotate(-9deg);border:3px solid #f0c66f;border-radius:7px;background:radial-gradient(circle,#70fff0,#0b3138 42%,#020405 72%);box-shadow:0 0 35px #42d8d2,0 0 90px #b78c44;animation:aksPrize 2.5s .65s ease forwards}
@keyframes aksChart{to{background-position:130px 80px,150px 0}}@keyframes aksCards{0%{opacity:0;transform:translate(0,90px) rotate(var(--r)) scale(.3)}35%,72%{opacity:1;transform:rotate(var(--r)) scale(1)}100%{opacity:0;transform:translate(calc(50vw - var(--x)),-110px) rotate(180deg) scale(.2)}}@keyframes aksKnife{35%,72%{transform:rotate(-11deg) scaleX(1)}100%{opacity:0;transform:rotate(-11deg) translateX(35%) scaleX(.5)}}@keyframes aksPrize{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(35deg)}42%,82%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-9deg)}100%{opacity:0;transform:translate(135%,-70%) scale(.65) rotate(24deg)}}
.adm-pearl-show{--adm-vfx:#b7fff4;--adm-metal:#f4dfae;background:linear-gradient(#042535,#071a26 46%,#02080e)}
.adm-pearl-show .ape-palace{position:absolute;z-index:8;left:50%;bottom:14%;width:min(82vw,980px);height:min(56vh,540px);transform:translateX(-50%) translateY(85%);background:linear-gradient(90deg,#c7eee744,#0a3037 30%,#d8fff45e 50%,#0a3037 70%,#c7eee744);clip-path:polygon(0 100%,0 72%,8% 72%,8% 43%,15% 43%,15% 65%,23% 65%,23% 29%,29% 29%,29% 58%,38% 58%,38% 18%,46% 18%,50% 0,54% 18%,62% 18%,62% 58%,71% 58%,71% 29%,77% 29%,77% 65%,85% 65%,85% 43%,92% 43%,92% 72%,100% 72%,100% 100%);filter:drop-shadow(0 0 28px #a8fff077);animation:apePalace 3.25s ease forwards}
.adm-pearl-show .ape-pearl{position:absolute;z-index:16;left:50%;top:36%;width:min(25vw,250px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.2);background:radial-gradient(circle at 35% 28%,#fff 0 8%,#dffff6 24%,#81bbb7 58%,#12353b 78%);box-shadow:0 0 48px #dffff6,0 0 130px #64d9d0;animation:apePearl 2.9s .2s ease forwards}
.adm-pearl-show .ape-crown{position:absolute;z-index:18;left:50%;top:16%;width:min(35vw,350px);height:min(18vw,180px);transform:translateX(-50%) scale(.2);clip-path:polygon(0 100%,8% 18%,30% 64%,50% 0,70% 64%,92% 18%,100% 100%);background:linear-gradient(150deg,#fff7d8,#b9944d 48%,#31484a);filter:drop-shadow(0 0 18px #effff8);animation:apeCrown 3.1s ease forwards}
@keyframes apePalace{0%{opacity:0;transform:translateX(-50%) translateY(85%)}38%,84%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-5%) scale(1.04)}}@keyframes apePearl{0%,18%{opacity:0;transform:translate(-50%,-50%) scale(.2)}45%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}@keyframes apeCrown{0%{opacity:0;transform:translateX(-50%) translateY(-70px) scale(.2)}40%,82%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.12)}}
.adm-redwake-show{--adm-vfx:#ff5748;--adm-metal:#dda64f;background:radial-gradient(circle at 50% 48%,#76171366,transparent 44%),linear-gradient(#080203,#230606 70%,#020101)}
.adm-redwake-show .arv-knife{position:absolute;z-index:12;left:50%;top:48%;width:clamp(8px,1.1vw,14px);height:min(25vh,230px);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-90px) scaleY(.15);clip-path:polygon(50% 0,100% 72%,62% 100%,38% 100%,0 72%);background:linear-gradient(90deg,#35110d,#fff3d3 46%,#c77f36 54%,#280906);box-shadow:0 0 14px #ff4938;animation:arvKnife 2.5s var(--d) ease forwards}
.adm-redwake-show .arv-vote{position:absolute;z-index:8;left:50%;top:48%;width:min(48vw,490px);aspect-ratio:1;border:3px solid #a32d23;border-radius:50%;transform:translate(-50%,-50%) scale(.2);box-shadow:0 0 35px #ff3c2c,inset 0 0 50px #5b0d0a;background:repeating-conic-gradient(#e8ae5555 0 2deg,transparent 3deg 28deg);animation:arvVote 2.8s ease forwards}
.adm-redwake-show .arv-cut{position:absolute;z-index:20;left:-10%;top:44%;width:120%;height:18px;background:#fff0c7;box-shadow:0 0 25px #ff3828,0 0 90px #b10f0c;transform:rotate(8deg) scaleX(0);animation:arvCut 1.25s 1.15s ease-out forwards}
@keyframes arvKnife{0%{opacity:0;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-210px) scaleY(.15)}38%,76%{opacity:1;transform:translate(-50%,-100%) rotate(var(--r)) translateY(-90px) scaleY(1)}100%{opacity:0;transform:translate(-50%,-100%) rotate(calc(var(--r) + 90deg)) translateY(-170px) scaleY(.5)}}@keyframes arvVote{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-90deg)}38%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4) rotate(90deg)}}@keyframes arvCut{35%,70%{transform:rotate(8deg) scaleX(1)}100%{opacity:0;transform:rotate(8deg) translateX(30%) scaleX(.55)}}
.adm-thalassor-show{--adm-vfx:#55e8de;--adm-metal:#c99950;background:linear-gradient(#03141d,#020a10 58%,#000306)}
.adm-thalassor-show .ath-city{position:absolute;z-index:9;left:50%;bottom:12%;width:min(82vw,920px);height:min(62vh,600px);transform:translateX(-50%) translateY(70%) scaleY(.4);background:repeating-linear-gradient(90deg,#071c25 0 8%,#2e7776 8.5% 10%,#061118 10.5% 17%),linear-gradient(#2d7772,#02070a);clip-path:polygon(0 100%,0 57%,7% 57%,7% 31%,13% 31%,13% 65%,21% 65%,21% 42%,28% 42%,28% 8%,35% 8%,35% 54%,43% 54%,43% 27%,50% 0,57% 27%,57% 54%,65% 54%,65% 8%,72% 8%,72% 42%,79% 42%,79% 65%,87% 65%,87% 31%,93% 31%,93% 57%,100% 57%,100% 100%);filter:drop-shadow(0 0 32px #42d8d266);animation:athStand 3.4s cubic-bezier(.2,.75,.2,1) forwards}
.adm-thalassor-show .ath-leg{position:absolute;z-index:7;left:var(--x);bottom:-8%;width:min(12vw,120px);height:58%;background:linear-gradient(90deg,#02070a,#2b6565,#03080b);clip-path:polygon(18% 0,82% 0,66% 73%,100% 100%,0 100%,34% 73%);transform-origin:50% 0;transform:rotate(var(--r)) scaleY(.2);animation:athLeg 3s .35s ease forwards}
.adm-thalassor-show .ath-window{position:absolute;z-index:12;left:var(--x);top:var(--y);width:5px;height:16px;background:#c9fff2;box-shadow:0 0 12px #61f3e1;animation:athWindow .8s var(--d) ease-in-out infinite alternate}
@keyframes athStand{0%{opacity:0;transform:translateX(-50%) translateY(70%) scaleY(.4)}38%,84%{opacity:1;transform:translateX(-50%) scaleY(1)}100%{opacity:0;transform:translateX(-50%) translateY(-9%) scale(1.07)}}@keyframes athLeg{0%{opacity:0;transform:rotate(var(--r)) scaleY(.2)}42%,84%{opacity:1;transform:rotate(var(--r)) scaleY(1)}100%{opacity:0;transform:rotate(var(--r)) translateY(-10%) scaleY(1.08)}}@keyframes athWindow{to{filter:brightness(2.2);transform:scale(1.4)}}
.adm-flag-show{--adm-vfx:#4cf3e2;--adm-metal:#e0ae57;background:radial-gradient(ellipse at 50% 55%,#18464a55,transparent 48%),linear-gradient(#02070a,#071319)}
.adm-flag-show .abf-mast{position:absolute;z-index:10;left:38%;top:4%;width:7px;height:83%;background:linear-gradient(90deg,#6b481e,#f0ca79,#523413);box-shadow:0 0 14px #d8ad5d;animation:abfMast 3s ease forwards}
.adm-flag-show .abf-cloth{position:absolute;z-index:12;left:38%;top:12%;width:min(53vw,590px);height:min(45vh,430px);transform-origin:0 0;clip-path:polygon(0 0,100% 8%,74% 50%,100% 92%,0 100%);background:repeating-linear-gradient(155deg,#020305 0 27px,#0d2024 28px 54px,#020305 55px 78px);box-shadow:0 0 35px #42d8d255;animation:abfCloth 1.15s ease-in-out infinite alternate}
.adm-flag-show .abf-name{position:absolute;z-index:16;left:var(--x);top:var(--y);color:#d9b15f;font:900 clamp(7px,1vw,13px) var(--mono);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 0 8px #d9b15f;opacity:0;animation:abfName 2.1s var(--d) ease forwards}
.adm-flag-show .abf-ward{position:absolute;z-index:20;left:50%;top:45%;width:min(38vw,390px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.15) rotate(45deg);border:3px solid #d7b66b;background:radial-gradient(circle,#a9fff166,transparent 60%);box-shadow:0 0 35px #55eadc,inset 0 0 45px #42d8d255;animation:abfWard 2.5s .7s ease forwards}
@keyframes abfMast{0%{opacity:0;transform:translateY(-100%)}30%,84%{opacity:1;transform:none}100%{opacity:0}}@keyframes abfCloth{to{transform:skewY(4deg) scaleX(.94);filter:brightness(1.2)}}@keyframes abfName{20%{opacity:0;transform:translateX(-30px)}50%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateX(35px)}}@keyframes abfWard{0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(0)}45%,80%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45) rotate(90deg)}}
.adm-gudeverker-show{--adm-vfx:#8bdfff;--adm-metal:#d4eef7;background:radial-gradient(circle at 50% 52%,#104a6255,transparent 40%),linear-gradient(#01050a,#020d17 68%,#000204)}
.adm-gudeverker-show .agp-ring{position:absolute;z-index:8;left:50%;top:48%;width:var(--s);aspect-ratio:1;border:3px solid #7ee7ff88;border-radius:50%;transform:translate(-50%,-50%) scale(1.7);box-shadow:0 0 24px #5fcde8,inset 0 0 22px #5fcde855;animation:agpPressure 2.5s var(--d) ease forwards}
.adm-gudeverker-show .agp-hull{position:absolute;z-index:13;left:50%;top:48%;width:min(58vw,650px);height:min(22vw,230px);transform:translate(-50%,-50%) scaleX(1.4);background:linear-gradient(#5c4832,#140d08 58%,#050403);clip-path:polygon(0 35%,14% 12%,77% 4%,100% 35%,86% 76%,18% 95%);filter:drop-shadow(0 18px 8px #000) drop-shadow(0 0 13px #6ad8ed);animation:agpHull 2.7s .25s ease forwards}
.adm-gudeverker-show .agp-jaw{position:absolute;z-index:18;left:50%;top:49%;width:min(76vw,820px);height:min(45vh,420px);transform:translate(-50%,-50%) scale(1.6);clip-path:polygon(0 8%,17% 19%,29% 4%,40% 20%,50% 0,60% 20%,71% 4%,83% 19%,100% 8%,88% 50%,100% 92%,82% 80%,70% 97%,59% 79%,50% 100%,41% 79%,30% 97%,18% 80%,0 92%,12% 50%);background:#010407;filter:drop-shadow(0 0 20px #79ddf0);opacity:0;animation:agpJaw 1.65s .9s ease-out forwards}
@keyframes agpPressure{0%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}35%,76%{opacity:1;transform:translate(-50%,-50%) scale(.55)}100%{opacity:0;transform:translate(-50%,-50%) scale(.18)}}@keyframes agpHull{0%,18%{opacity:0;transform:translate(-50%,-50%) scaleX(1.4)}45%,66%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(18deg)}}@keyframes agpJaw{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}38%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.72)}}

.amb.adm-kholat{background:radial-gradient(ellipse at 50% 115%,#17647155,transparent 60%),linear-gradient(#011018dd,#020609dd)}
.amb.adm-kass{background:repeating-radial-gradient(circle at 60% 50%,transparent 0 38px,#43d8cb16 39px 40px,transparent 41px 77px),#020b10dd}
.amb.adm-pearl{background:radial-gradient(circle at 50% 45%,#dffff633,transparent 28%),linear-gradient(#042331dd,#02090ddd)}
.amb.adm-redwake{background:radial-gradient(circle at 50% 105%,#a51e194c,transparent 60%),linear-gradient(#100203dd,#020101dd)}
.amb.adm-thalassor{background:repeating-linear-gradient(90deg,#020a0fdd 0 12%,#17474944 13% 15%,#020a0fdd 16% 28%)}
.amb.adm-flag{background:linear-gradient(120deg,#020407ee,#0b2025cc 52%,#422d0f55)}
.amb.adm-gudeverker{background:repeating-radial-gradient(circle at 50% 52%,transparent 0 55px,#69d9ee22 56px 58px,transparent 59px 105px),#01060bdd}
@media(max-width:700px){.adm-legend-name{bottom:11%;font-size:clamp(18px,6vw,31px)}.adm-legend-sub{bottom:7%;letter-spacing:.2em}.adm-kholat-show .ak-fin{width:110vw}.adm-kass-show .aks-prize{width:28vw}.adm-pearl-show .ape-palace{width:112vw}.adm-flag-show .abf-cloth{width:70vw}}
@media(prefers-reduced-motion:reduce){.adm-legend-show *{animation-duration:.01ms!important;animation-iteration-count:1!important}}

:root{--adm:#42d8d2;--adm-deep:#041a24;--adm-bronze:#b98648;--adm-pearl:#d9f6ef}
#factioncodex[data-faction="adm"] .factionstage{background:
  radial-gradient(ellipse at 72% 12%,#43f4e82b,transparent 25%),
  linear-gradient(180deg,#073143 0,#051b28 43%,#020b13 100%)}
#factioncodex[data-faction="adm"] .factionstage::before{opacity:.9;background:
  repeating-radial-gradient(ellipse at 80% 28%,transparent 0 25px,#55ddd914 27px 29px,transparent 31px 54px),
  linear-gradient(112deg,transparent 0 53%,#d49b5520 54% 55%,transparent 56%)}
#factioncodex[data-faction="adm"] .stage-vfx{border:1px solid #74fff06b;border-radius:50% 48% 52% 45%;
  background:radial-gradient(circle at 50% 45%,#f0fff1 0 2px,#52e5d94d 3px 9%,transparent 10% 31%,#53dcd32d 32% 33%,transparent 34%),
  repeating-conic-gradient(from 17deg,transparent 0 17deg,#b9864838 18deg 19deg,transparent 20deg 40deg);
  box-shadow:inset 0 0 50px #03111d,0 0 34px #42d8d229}
#factioncodex[data-faction="adm"] .stage-sigil{color:var(--adm-pearl);border-color:var(--adm);background:#04151f;
  box-shadow:inset 0 0 22px #42d8d22e,0 0 0 4px #031019,0 0 0 5px #b986485c,0 0 30px #42d8d22e}
#builder[data-faction="adm"]{--fac:var(--adm)!important;background:
  radial-gradient(ellipse at 18% -5%,#40d8d51d,transparent 39%),
  linear-gradient(155deg,#082735,#04151f 55%,#020910)}
#builder[data-faction="adm"] .bhead{background:linear-gradient(90deg,#082b38,#04131d 70%);border-bottom-color:#b9864866}
#builder[data-faction="adm"] .bmark{color:var(--adm-pearl);border-color:var(--adm);background:#04141e;box-shadow:inset 0 0 16px #42d8d22c,0 0 18px #42d8d21f}
#builder[data-faction="adm"] .list{background:linear-gradient(180deg,#08232e,#031019);border-left-color:#b9864859}
#builder[data-faction="adm"] .prow.indeck,#builder[data-faction="adm"] .dr{background:linear-gradient(100deg,#092632,#041018)}
.dr.admiralcy-captain{border-color:var(--adm)!important;box-shadow:inset 3px 0 var(--adm),inset 0 0 18px #42d8d21f,0 0 12px #42d8d218}
.captain-badge{display:inline-flex;align-items:center;gap:4px;margin:2px 0 0 7px;padding:2px 6px;border:1px solid #b9864885;border-radius:10px;
  color:#f2cf91;background:#07141b;font:800 6px var(--mono);letter-spacing:.12em;text-transform:uppercase;vertical-align:middle}
.captain-badge::before{content:"⚓";color:var(--adm);font-size:9px}
.captain-appoint{flex:0 0 auto;margin-left:auto;padding:4px 7px;border:1px solid #52717c;background:#07141b;color:#9ab7bd;
  font:700 6px var(--mono);letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.captain-appoint:hover,.captain-appoint.active{color:#f4d28f;border-color:#b98648;background:#11242a;box-shadow:0 0 10px #42d8d21f}
.m>.captain-hat,.card>.captain-hat{position:absolute;z-index:17;top:-13px;right:11px;width:31px;height:22px;pointer-events:none;filter:drop-shadow(0 2px 2px #000) drop-shadow(0 0 5px #42d8d266);transform:rotate(3deg)}
.captain-hat svg{display:block;width:100%;height:100%;overflow:visible}
.captain-hat .hat-crown,.captain-hat .hat-brim{fill:#090c12;stroke:#b98648;stroke-width:1.25;stroke-linejoin:round}
.captain-hat .hat-brim{fill:#111722}.captain-hat .hat-bones{fill:none;stroke:#d9f6ef;stroke-width:1.25;stroke-linecap:round}.captain-hat .hat-skull{fill:#d9f6ef}.captain-hat .hat-eye{fill:#07141b}
.m>.captain-hat{right:12px}.card>.captain-hat{right:8px}
.res.admiralcy-infamy{border-color:var(--adm)!important;background:linear-gradient(145deg,#082b38,#031019);box-shadow:inset 0 0 15px #02080e,0 0 10px #42d8d21c}
.res.admiralcy-infamy .captain-line{color:var(--adm-pearl)}
.res.admiralcy-infamy .infamy-keywords{color:#e1bd7d}
.tchip.tchip-infamy{border-color:#42d8d269;color:#c8fff7;background:linear-gradient(135deg,#092a36,#06131c)}
:root{--sen:#eee8db;--sen-teal:#77cfc8;--sen-white:#f7f3e9;--sen-gold:#aa8b54;--sen-marble:#d8d4c9;--sen-charcoal:#101519;--sen-bronze:#665139}
#factioncodex[data-faction="sen"] .factionstage{background:radial-gradient(circle at 73% 18%,#bdfbf223 0 1.5%,transparent 19%),repeating-radial-gradient(circle at 73% 18%,transparent 0 7.1%,#a88b5530 7.35% 7.8%,transparent 8.05% 12.2%),linear-gradient(118deg,#d8d4c915 0 1px,transparent 1px 64px),linear-gradient(145deg,#182024,#0b1013 58%,#07090b);box-shadow:inset 0 0 110px #000,inset 0 1px #f7f3e917}
#factioncodex[data-faction="sen"] .stage-sigil{border-color:var(--sen-gold);color:var(--sen-white);background:radial-gradient(circle,#72d8cf25,transparent 55%),#111619;box-shadow:inset 0 0 28px #87e7dc24,0 0 32px #7bded344}
#factioncodex[data-faction="sen"] .factionstage::before{opacity:.9;background:linear-gradient(112deg,transparent 0 51%,#f7f3e908 51.2% 51.5%,transparent 51.8%),radial-gradient(ellipse at 16% 104%,#735f3e33,transparent 44%),radial-gradient(circle at 84% 12%,#71d9d023,transparent 28%)}
#factioncodex[data-faction="sen"] .factionstage::after{right:-5px;top:-35px;color:#f7f3e906;font-size:205px;letter-spacing:.02em;text-shadow:0 0 70px #77cfc81a}
#factioncodex[data-faction="sen"] .stage-vfx{right:-52px;top:-116px;width:520px;height:520px;border:0;opacity:.42;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 7.2%,#9e855627 7.5% 7.9%,transparent 8.2% 12.8%);box-shadow:inset 0 0 60px #77cfc812,0 0 70px #000;animation:senfallArchiveTurn 54s linear infinite}
#factioncodex[data-faction="sen"] .stage-vfx::before{inset:20%;border-color:#a9eee633;border-style:solid;transform:rotate(17deg)}
#factioncodex[data-faction="sen"] .stage-vfx::after{inset:36%;border-color:#f7f3e938;border-style:dashed;transform:rotate(-23deg)}
@keyframes senfallArchiveTurn{to{transform:rotate(360deg)}}
#factioncodex[data-faction="sen"] .stage-sigil{position:relative}
#factioncodex[data-faction="sen"] .stage-sigil::before,#factioncodex[data-faction="sen"] .stage-sigil::after{content:"";position:absolute;inset:12px;border:1px solid #aa8b546b;border-radius:50%;transform:rotate(-45deg);box-shadow:0 0 10px #77cfc82b}
#factioncodex[data-faction="sen"] .stage-sigil::after{inset:21px;border-color:#dffbf680}
#factioncodex[data-faction="sen"] .stage-heading h3{color:var(--sen-white);text-shadow:0 2px 18px #000}
#factioncodex[data-faction="sen"] .stage-eyebrow{color:var(--sen-teal)}
#factioncodex[data-faction="sen"] .stage-arch{color:#aaa596}
#factioncodex[data-faction="sen"] .stage-blurb{max-width:730px;color:#d0ccc2}
#factioncodex[data-faction="sen"] .stage-card{position:relative;overflow:hidden;border-color:#95815d70;background:linear-gradient(145deg,#12191de8,#080c0fe8);box-shadow:inset 0 1px #f7f3e90d,0 14px 38px #0004;backdrop-filter:blur(4px)}
#factioncodex[data-faction="sen"] .stage-card::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(transparent,var(--sen-teal),var(--sen-gold),transparent);opacity:.72}
#factioncodex[data-faction="sen"] .stage-card h4{color:var(--sen-white)}
#factioncodex[data-faction="sen"] .stage-card p{color:#bfc5c4}
#factioncodex[data-faction="sen"] .stage-label{color:#d5c39f}
#factioncodex[data-faction="sen"] .stage-plan{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)}
#factioncodex[data-faction="sen"] .stage-plan li{border-color:#806e4e80;background:#77cfc80b;color:#d9dfdc}
#factioncodex[data-faction="sen"] .stage-actions{border-top-color:#9b85585c}
#factioncodex[data-faction="sen"] .match-deck-field select{border-color:#806e4e;background:#0e171d;color:#f0ede4;box-shadow:inset 0 0 18px #77cfc809}
#factioncodex[data-faction="sen"] .go{border-color:#c6b17c;background:linear-gradient(180deg,#39352c,#1d1b17);color:#f5edda;box-shadow:inset 0 1px #fff2}
#builder[data-faction="sen"]{--fac:var(--sen)!important;background:linear-gradient(118deg,#d8d4ca12 0 1px,transparent 1px 54px),radial-gradient(circle at 76% 0,#71cbc429,transparent 34%),linear-gradient(145deg,#202526,#0c1012 62%,#080a0b)}
#builder[data-faction="sen"] .bhead{background:linear-gradient(90deg,#282a27,#151c1c);border-bottom-color:#a88a5788}
.senfall-card{border-color:#a88a57!important;background:linear-gradient(170deg,#1e2739,#0f1524)!important}
.senfall-card.senfall-breathbound-active{border-color:#77cfc8!important;outline:1px solid #77cfc8;outline-offset:-2px}
.senfall-card.senfall-breathbound-active.illuminated{border-color:#eef7ff!important;outline-color:#77cfc8}
.senfall-breath-mark{position:absolute;right:3px;top:19px;z-index:5;color:#b6eee8;font:800 5px var(--mono);letter-spacing:.11em;text-transform:uppercase;text-shadow:0 0 6px #72dcd2;pointer-events:none}
.senfall-work-counter{position:absolute;right:5px;bottom:5px;z-index:8;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:#f2fff9;background:repeating-radial-gradient(circle,transparent 0 2px,#a88b55 2.4px 3px,transparent 3.4px 5px),radial-gradient(circle,#2a4b49,#0a1012 68%);border:1px solid #c5a96b;box-shadow:0 0 10px #5ad9cf88,inset 0 0 8px #000;font:900 11px var(--mono);text-shadow:0 0 6px #9ffff4;pointer-events:none}.senfall-work-counter::before{content:"VII";position:absolute;top:-8px;color:#c8ae72;font:700 4px var(--mono);letter-spacing:.16em}.senfall-howl-modal .mbox{border-color:#aa8b54;background:radial-gradient(circle at 50% 0,#77cfc81b,transparent 42%),linear-gradient(145deg,#171d1d,#080b0d);box-shadow:0 0 80px #77cfc826,inset 0 0 50px #000}.senfall-howl-modal .opt{border-left:2px solid #77cfc8}
.senfall-breath-sigil{--breath-color:var(--sen-bronze);position:relative;width:54px;height:54px;display:inline-grid;place-items:center;flex:none;border-radius:50%;isolation:isolate}
.senfall-breath-sigil>i{position:absolute;inset:calc(2px + var(--i)*3px);border:1px solid color-mix(in srgb,var(--breath-color) 76%,#111);border-radius:50%;clip-path:polygon(0 0,42% 0,47% 12%,57% 0,100% 0,100% 68%,89% 72%,100% 81%,100% 100%,0 100%,0 35%,12% 31%,0 22%);opacity:calc(1 - var(--i)*.065);transform:rotate(calc(var(--i)*13deg));box-shadow:inset 0 0 3px #000,0 0 2px #000}
.senfall-breath-sigil>b{position:relative;z-index:2;color:#8b7655;font:900 6px var(--mono);letter-spacing:.13em;text-transform:uppercase;text-shadow:0 1px #000}
.senfall-breath-sigil.awake{--breath-color:#a9fff4;filter:drop-shadow(0 0 7px #66d8ce66)}
.senfall-breath-sigil.awake>i{border-color:color-mix(in srgb,#eafef9 64%,#66cfc6);box-shadow:inset 0 0 4px #dfffff6e,0 0 5px #56d5cba8;animation:senfallCurrent 3.8s linear infinite;animation-delay:calc(var(--i)*-.31s)}
.senfall-breath-sigil.awake>b{color:#effffb;text-shadow:0 0 7px #62d8ce}
.senfall-breath-sigil.compact{width:36px;height:36px}.senfall-breath-sigil.compact>i{inset:calc(1px + var(--i)*2px)}.senfall-breath-sigil.compact>b{font-size:4px}
@keyframes senfallCurrent{0%{transform:rotate(calc(var(--i)*13deg));opacity:.35}40%{opacity:1}100%{transform:rotate(calc(var(--i)*13deg + 360deg));opacity:.35}}
.senfall-transition{position:absolute;inset:0;z-index:70;pointer-events:none;overflow:hidden;display:grid;place-items:center;animation:senfallTransitionLife 1.65s both;isolation:isolate}.senfall-transition::before,.senfall-transition::after{content:"";position:absolute;inset:-14%;background:repeating-radial-gradient(ellipse at center,transparent 0 8%,#dffdf80d 8.4% 8.7%,transparent 9.1% 13%);transform:scale(.7);opacity:0}.senfall-transition::after{background:repeating-linear-gradient(118deg,transparent 0 46px,#edfdf9 47px 48px,transparent 49px 92px);filter:blur(.5px)}
.senfall-transition-ring{position:absolute;width:min(70vmin,680px);aspect-ratio:1;border:2px solid #a5eee7;border-radius:50%;clip-path:polygon(0 0,36% 0,43% 9%,50% 0,100% 0,100% 64%,87% 71%,100% 79%,100% 100%,0 100%,0 39%,14% 33%,0 24%);opacity:0;transform:scale(calc(.18 + var(--i)*.09)) rotate(calc(var(--i)*11deg));box-shadow:0 0 16px #5ce1d4,inset 0 0 13px #eafffa}
.senfall-transition.awaken .senfall-transition-ring{animation:senfallRingAwaken 1.5s cubic-bezier(.16,.8,.28,1) both;animation-delay:calc(var(--i)*.035s)}
.senfall-transition.subside .senfall-transition-ring{border-color:#846943;box-shadow:0 0 10px #000,inset 0 0 8px #4c3725;animation:senfallRingSubside 1.45s cubic-bezier(.62,0,.78,.28) both;animation-delay:calc(var(--i)*.025s)}
.senfall-transition-core{position:absolute;width:8vmin;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f2fffc,#80ddd3 18%,#112326 52%,#000 70%);box-shadow:0 0 35px #bffdf4,0 0 110px #4dd9ce66}.senfall-transition.subside .senfall-transition-core{background:#050708;box-shadow:0 0 40px #000}
.senfall-transition-feather{position:absolute;left:calc(9% + var(--i)*8.8%);top:calc(68% - var(--i)*1.4%);width:clamp(8px,1.2vw,15px);height:clamp(22px,4vw,46px);border-radius:100% 0 100% 0;background:linear-gradient(100deg,transparent 42%,#effbf7 44% 51%,#8cc7c2aa 53% 62%,transparent 64%);opacity:0;transform:rotate(calc(-28deg + var(--i)*7deg));animation:senfallFeatherLift 1.4s cubic-bezier(.18,.71,.24,1) calc(var(--i)*.045s) both}.senfall-transition.subside .senfall-transition-feather{background:linear-gradient(100deg,transparent 42%,#756044 44% 60%,transparent 62%);animation-direction:reverse}
@keyframes senfallFeatherLift{0%{opacity:0;translate:0 14vh;rotate:-14deg}24%{opacity:.75}78%{opacity:.35}100%{opacity:0;translate:calc((var(--i) - 5)*1.8vw) -54vh;rotate:38deg}}
.senfall-transition>b{position:absolute;top:72%;color:#e9f5ef;font:900 clamp(8px,1.4vw,14px) var(--mono);letter-spacing:.42em;text-transform:uppercase;text-shadow:0 0 12px #72d9d0}.senfall-transition.subside>b{color:#9c8765;text-shadow:0 0 10px #000}
@keyframes senfallTransitionLife{0%{opacity:0}9%,77%{opacity:1}100%{opacity:0}}
@keyframes senfallRingAwaken{0%{opacity:0;transform:scale(.08) rotate(-18deg)}34%{opacity:.95}76%{opacity:.7;transform:scale(calc(.55 + var(--i)*.095)) rotate(calc(25deg + var(--i)*22deg))}100%{opacity:0;transform:scale(calc(.68 + var(--i)*.105)) rotate(calc(38deg + var(--i)*26deg))}}
@keyframes senfallRingSubside{0%{opacity:.9;transform:scale(calc(.66 + var(--i)*.1)) rotate(calc(var(--i)*19deg))}54%{opacity:.55}82%{opacity:.8;transform:scale(.12) rotate(calc(-48deg + var(--i)*8deg))}100%{opacity:0;transform:scale(0) rotate(-72deg)}}
.res.senfall-breath{border-color:#7ecfc5;background:linear-gradient(145deg,#192122,#0b0e0f)}.res.senfall-breath .senfall-resource{display:flex;align-items:center;gap:9px}.res.senfall-breath .tier{color:#a99b80}
.tchip.tchip-breath .tv{display:flex;align-items:center;gap:5px}.tchip.tchip-breath{border-color:#8c7754}.tchip.tchip-breath.on{border-color:#7bd8ce;box-shadow:inset 0 0 12px #57d7ca25}
.faction-menu-preview[data-faction="sen"]{background:repeating-radial-gradient(circle at 50% 50%,transparent 0 8%,#8d744a55 8.6% 9%,transparent 9.5% 13%),radial-gradient(circle,#f7f3e94d,transparent 28%),linear-gradient(135deg,#d7d2c817 0 1px,transparent 1px),#111619!important;color:#f7f3e9!important}
.back[data-faction="sen"],.pile[data-faction="sen"],.tdeckpile[data-faction="sen"],:root[data-road-faction-back="sen"] .back:not([data-card-back]):not([data-faction]),:root[data-road-faction-back="sen"] .pile:not([data-card-back]):not([data-faction]),:root[data-road-faction-back="sen"] .tdeckpile:not([data-card-back]):not([data-faction]){background:repeating-radial-gradient(circle at 50% 50%,transparent 0 7%,#a6eee544 7.5% 8.2%,transparent 8.7% 12%),radial-gradient(circle at 50% 50%,#ebfff4 0 2%,#65cfc438 3% 20%,transparent 36%),linear-gradient(132deg,#dbd7cd0d 0 1px,transparent 1px 19px),linear-gradient(145deg,#1d2424,#090c0d 72%)!important;border-color:#a88b55!important;box-shadow:inset 0 0 0 2px #d8d2c324,inset 0 0 28px #000,0 0 10px #5dcec65c!important}
@media(prefers-reduced-motion:reduce){#factioncodex[data-faction="sen"] .stage-vfx,.senfall-breath-sigil.awake>i,.senfall-transition,.senfall-transition-ring,.senfall-transition-feather{animation:none!important}.senfall-transition{display:none!important}}
.senlegend{position:fixed;inset:0;z-index:100010;pointer-events:none;overflow:hidden;isolation:isolate;color:#f7f3e9;background:#07090a;animation:senLegendLife 4s ease both}.senlegend i,.senlegend b,.senlegend em{position:absolute;display:block}.senlegend-title{left:4%;right:4%;bottom:8%;text-align:center;font:800 clamp(25px,4.4vw,68px) Georgia,serif;letter-spacing:.12em;text-shadow:0 0 22px currentColor;animation:senLegendTitle 3.8s ease both}.senlegend-sub{left:5%;right:5%;bottom:5%;text-align:center;font:800 9px var(--mono);letter-spacing:.32em;color:#d7c8aa;animation:senLegendTitle 3.8s ease both}.sen-ephemones{background:radial-gradient(circle at 50% 43%,#dafef0 0 1%,#56aa9c22 2% 22%,transparent 40%),linear-gradient(#07100f,#111718 58%,#050708)}.sen-oracle-ring{left:50%;top:43%;width:min(76vmin,720px);aspect-ratio:1;border:2px solid #eee8db;border-radius:50%;clip-path:polygon(0 0,38% 0,44% 9%,51% 0,100% 0,100% 65%,88% 72%,100% 80%,100% 100%,0 100%,0 38%,13% 32%,0 23%);box-shadow:0 0 18px #8ef6e4,inset 0 0 13px #9ee8dc;transform:translate(-50%,-50%) scale(calc(.18 + var(--i)*.105)) rotate(calc(var(--i)*17deg));opacity:0;animation:senOracleRing 3.45s calc(var(--i)*.035s) cubic-bezier(.16,.8,.25,1) both}.sen-oracle-wing{left:50%;top:42%;width:clamp(20px,4vw,55px);height:clamp(90px,18vw,240px);border-radius:100% 0;background:linear-gradient(105deg,transparent 39%,#f8f3e8 41% 50%,#75c9bd 52% 60%,transparent 62%);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(calc((var(--i) - 5.5)*15deg));opacity:0;animation:senOracleWing 3.2s calc(.2s + var(--i)*.045s) ease both}.sen-ephemones .senlegend-title{color:#e9fff9}.sen-runner{background:radial-gradient(ellipse at 50% 84%,#e8e1d130 0 4%,transparent 35%),linear-gradient(#07090b,#182126 56%,#050607)}.sen-road{left:-12%;right:-12%;top:calc(12% + var(--i)*10%);height:2px;background:linear-gradient(90deg,transparent,#eee8db 15% 27%,#6fcabe 48%,#eee8db 69% 83%,transparent);box-shadow:0 0 9px #78d8ca;transform:perspective(500px) rotateX(58deg) translateX(calc((var(--i) - 3)*5%));animation:senRoadRun 2.5s calc(var(--i)*-.13s) cubic-bezier(.2,.8,.25,1) both}.sen-courier{left:50%;top:45%;width:min(19vw,210px);height:min(45vh,440px);background:linear-gradient(90deg,#111418,#eee8db 48% 52%,#182126);clip-path:polygon(42% 0,59% 0,70% 18%,63% 36%,88% 58%,70% 100%,52% 76%,45% 76%,24% 100%,11% 57%,36% 35%,29% 17%);transform:translate(-50%,-50%);animation:senCourierArrives 3.3s ease both}.sen-runner .senlegend-title{color:#eee8db}.sen-mahiki{background:radial-gradient(circle at 50% 45%,#6f4a271f,transparent 31%),linear-gradient(#060707,#17100b 57%,#030303)}.sen-lock-ring{left:50%;top:45%;width:min(65vmin,650px);aspect-ratio:1;border:3px solid #b79562;border-radius:50%;transform:translate(-50%,-50%) scale(calc(.25 + var(--i)*.11));box-shadow:0 0 15px #9edccd55,inset 0 0 16px #000;animation:senLockRing 3s calc(var(--i)*.04s) cubic-bezier(.7,0,.3,1) both}.sen-claw{left:calc(10% + var(--i)*11%);top:-15%;width:3px;height:130%;background:linear-gradient(transparent,#eee8db 28% 72%,transparent);transform:rotate(calc(-20deg + var(--i)*5deg));opacity:0;animation:senClawFall 2.7s calc(.3s + var(--i)*.045s) ease both}.sen-mahiki-core{left:50%;top:45%;width:min(25vw,280px);aspect-ratio:.72;background:linear-gradient(125deg,#efe8dc,#675441 26%,#121314 55%,#000);clip-path:polygon(50% 0,73% 10%,65% 29%,88% 55%,70% 100%,50% 77%,30% 100%,12% 55%,35% 29%,27% 10%);transform:translate(-50%,-50%);animation:senMahikiRise 3.2s ease both}.sen-mahiki .senlegend-title{color:#d6b37d}.sen-howl{background:radial-gradient(circle at 50% 44%,#aa7b4130,transparent 34%),linear-gradient(#060707,#211811 58%,#030303)}.sen-howl-ring{left:50%;top:44%;width:min(60vmin,650px);aspect-ratio:1;border:clamp(2px,.35vw,5px) solid #c39a64;border-radius:50%;transform:translate(-50%,-50%) scale(.06);opacity:0;animation:senHowlShock 1.02s calc(.35s + var(--i)*.34s) cubic-bezier(.1,.8,.25,1) both}.sen-wolf-shell{left:50%;top:45%;width:min(34vw,390px);height:min(59vh,570px);background:linear-gradient(108deg,#090a0b,#a27a49 27%,#302318 53%,#d0ab75 56%,#0a0b0c 76%);clip-path:polygon(35% 0,65% 0,78% 14%,70% 29%,91% 47%,76% 100%,55% 75%,45% 75%,24% 100%,9% 47%,30% 29%,22% 14%);transform:translate(-50%,-50%);animation:senWolfWake 3.35s ease both}.sen-howl .senlegend-title{color:#e7c391}@keyframes senLegendLife{0%{opacity:0}8%,82%{opacity:1}100%{opacity:0}}@keyframes senLegendTitle{0%,28%{opacity:0;transform:translateY(22px)}48%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}@keyframes senOracleRing{0%{opacity:0;translate:0 12%;rotate:-28deg}30%,72%{opacity:.9}74%{scale:1.06}100%{opacity:0;translate:0 -8%;rotate:45deg}}@keyframes senOracleWing{0%,18%{opacity:0;scale:.2}45%,76%{opacity:.82;scale:1}100%{opacity:0;translate:0 -10%}}@keyframes senRoadRun{0%{opacity:0;translate:-70% 18%}25%,70%{opacity:.8;translate:0 0}82%{opacity:1;translate:28% -10%}100%{opacity:0;translate:110% -30%}}@keyframes senCourierArrives{0%{opacity:0;translate:-80vw 0;rotate:-12deg}34%,72%{opacity:1;translate:0 0;rotate:0}83%{translate:8px 0}86%{translate:-8px 0}100%{opacity:0;translate:70vw 0}}@keyframes senLockRing{0%{opacity:0;rotate:0}28%,58%{opacity:.85}68%{scale:.34;rotate:-38deg}73%{scale:.04;opacity:1}76%{scale:.3;opacity:.15}100%{scale:0;opacity:0}}@keyframes senClawFall{0%,24%{opacity:0;translate:0 -20%}38%,66%{opacity:.65}74%{opacity:1;translate:0 22%}100%{opacity:0;translate:0 50%}}@keyframes senMahikiRise{0%{opacity:0;scale:.2;rotate:12deg}38%,69%{opacity:1;scale:1;rotate:0}73%{translate:-9px 0}76%{translate:11px 0}79%{translate:-5px 0}100%{opacity:0;scale:1.08}}@keyframes senHowlShock{0%{opacity:0;scale:.06}18%{opacity:1}78%{opacity:.5}100%{opacity:0;scale:1.8}}@keyframes senWolfWake{0%{opacity:0;scale:.25;rotate:-6deg}32%,68%{opacity:1;scale:1;rotate:0}72%{scale:1.07}76%{scale:.98}82%{scale:1.06}100%{opacity:0;translate:0 -8%}}@media(prefers-reduced-motion:reduce){.senlegend,.senlegend *{animation:none!important}.senlegend{opacity:1}.sen-oracle-wing,.sen-road,.sen-claw,.sen-howl-ring{display:none}.sen-oracle-ring,.sen-courier,.sen-mahiki-core,.sen-wolf-shell,.senlegend-title,.senlegend-sub{opacity:1}}:root{--run:#b78cff;--run-deep:#120b2b;--run-flame:#ff704d;--run-earth:#c7a66b;--run-wind:#8ee8ff;--run-water:#69a9ff}
#factioncodex[data-faction="run"] .factionstage{background:radial-gradient(ellipse at 50% 8%,#8d5cff55,transparent 35%),repeating-conic-gradient(from 0deg at 50% 44%,#b78cff10 0 7deg,transparent 8deg 29deg),linear-gradient(180deg,#211143,#090719)}
#factioncodex[data-faction="run"] .stage-sigil{border-color:var(--run);color:#eadfff;background:#130a2c;box-shadow:inset 0 0 24px #b78cff35,0 0 28px #b78cff45}
#builder[data-faction="run"]{--fac:var(--run)!important;background:radial-gradient(ellipse at 20% -5%,#9c69ff2b,transparent 40%),linear-gradient(155deg,#21133f,#0c0820 60%,#05030d)}
#builder[data-faction="run"] .bhead{background:linear-gradient(90deg,#29164c,#10091f);border-bottom-color:#b78cff88}
.runic-rep-picker{display:flex;flex-wrap:wrap;gap:5px;width:100%;margin-top:8px;padding-top:8px;border-top:1px solid #b78cff44}.runic-rep-picker>span{width:100%;color:#a993c8;font:800 6px var(--mono);letter-spacing:.17em;text-transform:uppercase}
.runic-rep-choice{padding:6px 8px;border:1px solid #57466f;background:#0c0718;color:#bcaed1;font:700 7px var(--mono);cursor:pointer}.runic-rep-choice b,.runic-rep-choice em{display:block;margin-top:3px;color:#d8c5ff;font-size:5px;font-style:normal}.runic-rep-choice small{display:block}.runic-rep-choice em{display:block;margin-top:3px;color:#d8c5ff;font-size:5px;font-style:normal}.runic-rep-choice small{margin-top:2px;color:#796a91;font-size:6px}.runic-rep-choice:hover,.runic-rep-choice.active{border-color:var(--run);color:#f1e8ff;background:#24123f;box-shadow:0 0 12px #b78cff31}.runic-rep-choice.active small{color:#d9c3ff}
.runic-card{border-color:color-mix(in srgb,var(--run-el,var(--run)) 66%,#39415a)!important;box-shadow:inset 3px 0 var(--run-el,var(--run)),0 0 14px color-mix(in srgb,var(--run-el,var(--run)) 22%,transparent)}
.runic-element-flame{--run-el:var(--run-flame)}.runic-element-earth{--run-el:var(--run-earth)}.runic-element-wind{--run-el:var(--run-wind)}.runic-element-water{--run-el:var(--run-water)}
.m.run-asleep{filter:saturate(.72) brightness(.9)}.run-sleep-cloud{position:absolute;left:20%;right:20%;top:-25px;height:20px;z-index:22;pointer-events:none;filter:drop-shadow(0 2px 3px #000a)}
/* A minion card clips its own overflow, so a sleeper wears its clouds around
   its name: puffs behind the letters, and the z z z drifting off the end. */
.m .mn{position:relative;isolation:isolate}
.m.run-asleep .mn{color:#a8d4ff;text-shadow:0 0 10px #2f68d6aa,0 1px 2px #001028cc}
/* A full-art card paints a dark plate behind its name; a sleeper trades it for the clouds. */
:root:not([data-card-art="off"]) .m.hasart.fullart.run-asleep .mn{color:#a8d4ff;background:none;text-shadow:0 0 10px #2f68d6cc,0 1px 3px #000}
:root:not([data-card-art="off"]) .m.hasart.fullart.unwritten.run-asleep .mn{color:#d9bcff;background:none}
/* The Waking Dream, in the four-seat HUD: a little cloud beside the Spell
   Power and Overcharge badges, carrying the Health it is currently giving.
   The decorative cloud strip is far too wide for that stat cluster. */
.thero>.run-dream-badge{position:relative;display:none;place-items:center;min-width:26px;height:26px;padding:0 5px;border-radius:13px;
  border:1px solid #3f5f8c;background:linear-gradient(#1b2740,#101827);color:#bfe0ff;
  font:800 11px var(--mono);letter-spacing:.02em;box-shadow:0 0 10px #2a4a7a66}
.thero>.run-dream-badge.on{display:grid;animation:runDreamPop .32s cubic-bezier(.2,.9,.3,1) both}
.thero>.run-dream-badge::before{content:"";position:absolute;left:3px;right:3px;top:-5px;height:9px;border-radius:9px;
  background:radial-gradient(circle at 26% 70%,#cfe6ff 46%,transparent 47%),radial-gradient(circle at 56% 44%,#e6f2ff 52%,transparent 53%),radial-gradient(circle at 82% 72%,#cfe6ff 44%,transparent 45%);
  opacity:.92;filter:drop-shadow(0 1px 1px #0008)}
.thero>.run-dream-badge b{font:800 11px var(--mono);color:#eaf4ff}
.thero>.run-dream-badge i{position:absolute;right:-3px;top:-8px;font:800 8px var(--mono);font-style:normal;color:#9fc9f5;opacity:.9;animation:runDreamZ 2.6s ease-in-out infinite}
@keyframes runDreamPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes runDreamZ{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-4px);opacity:.95}}
@media (prefers-reduced-motion:reduce){.thero>.run-dream-badge.on{animation:none}.thero>.run-dream-badge i{animation:none;opacity:.8}}
.m .mn>.run-sleep-cloud{left:-6%;right:-6%;top:50%;height:24px;transform:translateY(-52%);z-index:-1;filter:drop-shadow(0 1px 2px #0009)}
.m .mn>.run-sleep-cloud i{top:8px;height:11px;opacity:.88}
.m .mn>.run-sleep-cloud i:nth-child(1){left:2%;width:26%}
.m .mn>.run-sleep-cloud i:nth-child(2){left:33%;width:34%;top:4px;height:16px}
.m .mn>.run-sleep-cloud i:nth-child(3){right:2%;width:26%}
.m .mn>.run-sleep-cloud b{left:auto;right:6%;top:0;font-size:9px;animation-duration:2.4s}
.m .mn>.run-sleep-cloud b:nth-of-type(2){right:2%;font-size:11px}
.m .mn>.run-sleep-cloud b:nth-of-type(3){right:-2%;font-size:12px}
@keyframes runZzzName{0%{opacity:0;transform:translate(0,0) scale(.7)}18%{opacity:1}100%{opacity:0;transform:translate(6px,-20px) scale(1.1)}}
.m .mn>.run-sleep-cloud b{animation-name:runZzzName}
/* An Unwritten sleeper dreams in broken colour. */
.m.unwritten.run-asleep .mn{color:#d9bcff;text-shadow:1.5px 0 #ff2bd6aa,-1.5px 0 #22ffc3aa}
.m.unwritten.run-asleep .mn>.run-sleep-cloud{animation:nvSleepGlitch .62s steps(3,end) infinite}
.m.unwritten.run-asleep .mn>.run-sleep-cloud i{background:radial-gradient(circle at 38% 32%,#f6e9ff,#b17ff5 46%,#5b23c9 92%);box-shadow:0 0 10px #c46bff99}
.m.unwritten.run-asleep .mn>.run-sleep-cloud b{color:#f2f8ff;text-shadow:1.5px 0 #ff2bd6,-1.5px 0 #22ffc3}
@keyframes nvSleepGlitch{0%,100%{transform:translateY(-54%) translateX(0);clip-path:none}
  22%{transform:translateY(-54%) translateX(-2px);clip-path:inset(0 0 42% 0)}
  44%{transform:translateY(-52%) translateX(3px);clip-path:inset(38% 0 0 0)}
  66%{transform:translateY(-56%) translateX(-1px);clip-path:inset(0 22% 0 0)}
  88%{transform:translateY(-54%) translateX(2px);clip-path:none}}
@media (prefers-reduced-motion:reduce){.m.unwritten.run-asleep .mn>.run-sleep-cloud{animation:none}}
/* The buff pill sat 6px above the card, where the frame clipped it. */
.m .buff{top:1px}.run-sleep-cloud i{position:absolute;top:5px;height:11px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#e4f0ff,#6fa8f5 45%,#2f68d6 88%);box-shadow:0 0 10px #4f8ff0cc,inset 0 -2px 3px #1f4fa888;animation:runCloudBob 3.2s ease-in-out infinite}.run-sleep-cloud i:nth-child(1){left:6%;width:34%}.run-sleep-cloud i:nth-child(2){left:30%;width:40%;top:0;height:13px;animation-delay:-1.1s}.run-sleep-cloud i:nth-child(3){right:6%;width:32%;animation-delay:-2.2s}.run-sleep-cloud b{position:absolute;left:58%;top:-2px;color:#cfe3ff;font:900 10px Georgia,serif;text-shadow:0 0 5px #3a7bd5,0 1px 1px #0b1a33;opacity:0;animation:runZzz 2.7s ease-out infinite}.run-sleep-cloud b:nth-of-type(2){left:66%;font-size:12px;animation-delay:.9s}.run-sleep-cloud b:nth-of-type(3){left:74%;font-size:14px;animation-delay:1.8s}@keyframes runCloudBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes runZzz{0%{opacity:0;transform:translate(0,0) scale(.7)}20%{opacity:1}100%{opacity:0;transform:translate(9px,-26px) scale(1.15)}}.hero.run-hero-asleep{position:relative}.hero.run-hero-asleep>.run-sleep-cloud{top:-16px;left:10%;right:10%;height:24px}.hero.run-hero-asleep>.run-sleep-cloud i{height:14px}.hero.run-hero-asleep>.run-sleep-cloud i:nth-child(2){height:18px}.run-sleep-count{position:absolute;left:50%;top:3px;transform:translateX(-50%);z-index:2;min-width:15px;text-align:center;color:#fff;font:900 11px var(--mono);text-shadow:0 0 4px #0b2a66,0 1px 1px #000}@media (prefers-reduced-motion:reduce){.run-sleep-cloud i,.run-sleep-cloud b{animation:none}.run-sleep-cloud b{opacity:.8}}.runic-representative{outline:2px solid var(--run);box-shadow:0 0 18px #b78cff69!important}.runic-rep-badge{display:inline-block;margin-left:7px;padding:2px 6px;border:1px solid #b78cff78;border-radius:9px;color:#eadfff;background:#130a25;font:800 6px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.runic-required::after{content:"RUNE-LOCKED";position:absolute;right:5px;top:5px;padding:2px 4px;border:1px solid #ff9a7e75;background:#210a0c;color:#ffb8a6;font:700 5px var(--mono);letter-spacing:.08em}
.runic-overflow-warning{position:absolute;z-index:10;left:6px;right:6px;bottom:8px;padding:2px 4px;border:1px solid #ffcf6b88;border-radius:4px;background:#120d08e8;color:#ffdf91;font:800 6px var(--mono);text-align:center;letter-spacing:.06em;pointer-events:none}.runic-spend-row{position:absolute;z-index:9;left:6px;right:6px;bottom:27px;justify-content:flex-start;align-items:center;padding:3px 5px;border:1px solid #b78cff55;border-radius:5px;background:#090512e8;box-shadow:0 0 10px #0009;pointer-events:none}.runic-spend-row>b{margin-right:3px;color:#d7c5ef;font:900 5px var(--mono);letter-spacing:.12em}.runic-spend-row .runic-rune-chip{min-width:13px;padding:2px 3px;text-align:center;box-shadow:0 0 7px currentColor}
.runic-variant{background-image:radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--run-el,var(--run)) 28%,transparent),transparent 31%),linear-gradient(145deg,color-mix(in srgb,var(--run-el,var(--run)) 15%,transparent),transparent 52%)!important}.runic-variant .cname,.prow.runic-variant .pn>div:first-child,.dr.runic-variant .dn>span:first-child{color:#f0e6ff;text-shadow:0 0 8px color-mix(in srgb,var(--run-el,var(--run)) 70%,transparent)}.runic-rep-choice.runic-rep-choice em{display:block;margin-top:3px;color:#ae98c9;font:600 6px/1.3 var(--mono);font-style:normal;letter-spacing:.03em}.runic-rep-current{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;width:100%;padding:7px 9px;border:1px solid #7957a7;background:#140b25}.runic-rep-current b{color:#f0e6ff;font:800 9px var(--mono)}.runic-rep-current small{color:#c9aff5;font:700 6px var(--mono)}.runic-rep-current em{color:#a993c8;font:600 6px/1.35 var(--mono);font-style:normal}

.res.runic-matrix{border-color:#b78cff77!important;background:linear-gradient(145deg,#21113a,#080512);box-shadow:inset 0 0 15px #020108,0 0 11px #b78cff24}.runic-rune-line{display:flex;justify-content:center;gap:4px;margin-top:3px}.runic-rune-chip{padding:2px 5px;border:1px solid currentColor;border-radius:8px;font:800 6px var(--mono)}.runic-rune-chip.flame{color:var(--run-flame)}.runic-rune-chip.earth{color:var(--run-earth)}.runic-rune-chip.wind{color:var(--run-wind)}.runic-rune-chip.water{color:var(--run-water)}.runic-rune-chip.wild{color:#f5edff;background:linear-gradient(135deg,#f56cff33,#70efff33,#fff7);box-shadow:0 0 10px #f3d5ff99}
.tchip.tchip-runes{align-items:center;border-color:#b78cff77;color:#e8dcff;background:linear-gradient(135deg,#251443,#090612)}
.tchip-runes .runic-hud-runes{display:inline-flex;align-items:center;gap:2px;margin-left:2px}
.tchip-runes .runic-rune-chip{width:13px;height:13px;padding:0;font-size:6px;line-height:13px;text-align:center}
:is(.back[data-faction="run"],.pile[data-faction="run"],.tdeckpile[data-faction="run"],:root[data-road-faction-back="run"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="run"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="run"] .tdeckpile:not([data-faction]):not([data-card-back])){--faccent:var(--run);background:#0b0618 url("/assets/card-backs/run.svg?v=18d1f67252") center/cover no-repeat!important;border-color:var(--run)!important;box-shadow:inset 0 0 19px #000b,0 0 10px #b78cff49!important}

.faction-menu-preview[data-faction="vir"]{
  --scene-bg:
    radial-gradient(circle at 72% 24%,#d8ffc9 0 2%,#70d781 3% 8%,transparent 9%),
    linear-gradient(104deg,#010302 0 47%,#0b1b10 48% 53%,#174b28 54% 100%);
  --scene-mark:
    radial-gradient(ellipse at 18% 76%,#000 0 16%,transparent 17%),
    radial-gradient(ellipse at 82% 69%,#a4ef9e 0 5%,#2e753d 6% 24%,transparent 25%),
    repeating-linear-gradient(78deg,transparent 0 12%,#76d68155 12.5% 13.5%,transparent 14% 24%);
  --scene-glow:#81e28d
}
.faction-menu-preview[data-faction="vir"]::before{animation:virPreviewPulse 7s ease-in-out infinite alternate}
.faction-menu-preview[data-faction="vir"]::after{transform-origin:50% 100%;animation:virPreviewGrow 6.8s cubic-bezier(.25,.72,.22,1) infinite alternate}
@keyframes virPreviewPulse{to{filter:brightness(1.22) saturate(1.15);background-position:8px -5px,0 0}}
@keyframes virPreviewGrow{0%{clip-path:inset(62% 0 0);filter:brightness(.75)}100%{clip-path:inset(0);filter:brightness(1.32) drop-shadow(0 0 12px #71d77f)}}

#menu[data-theme="vir"]{
  --menu-accent:#7ee08d;
  --menu-accent2:#07150c;
  background:#010302
}
#menu[data-theme="vir"] #themeDecor::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 72% 20%,#c9ffc022 0 4%,#68d37a18 5% 17%,transparent 34%),
    radial-gradient(ellipse at 18% 68%,#000 0 13%,#061009 14% 31%,transparent 49%),
    linear-gradient(105deg,#010302 0 45%,#07140b 46% 55%,#153a20 72%,#061109);
  animation:virSanctuaryBreathe 8s ease-in-out infinite alternate
}
#menu[data-theme="vir"] #themeDecor::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 9% 29%,#bbffab 0 2px,transparent 3px),
    radial-gradient(circle at 21% 72%,#67d77a 0 2px,transparent 3px),
    radial-gradient(circle at 36% 18%,#d5ffc8 0 1px,transparent 3px),
    radial-gradient(circle at 54% 64%,#8bed91 0 2px,transparent 4px),
    radial-gradient(circle at 68% 33%,#c7ffb9 0 2px,transparent 3px),
    radial-gradient(circle at 83% 77%,#6edc7b 0 2px,transparent 4px),
    radial-gradient(circle at 94% 43%,#d9ffd1 0 1px,transparent 3px);
  background-size:143px 181px,191px 227px,173px 211px,231px 269px,157px 197px,211px 251px,181px 239px;
  opacity:.56;filter:drop-shadow(0 0 5px #8bf095);
  animation:virSporeDrift 16s linear infinite
}
#menu[data-theme="vir"] .td-gate{
  display:block;z-index:2;left:50%;top:auto;bottom:-4%;width:min(78vw,980px);height:min(76vh,760px);
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 28%,transparent 0 16%,#07150c 17% 22%,transparent 23%),
    linear-gradient(90deg,#010302 0 42%,#10291a 43% 56%,#285f36 57% 100%);
  clip-path:polygon(0 100%,5% 78%,12% 69%,18% 39%,25% 25%,34% 14%,42% 5%,47% 0,50% 12%,53% 0,58% 5%,66% 14%,75% 25%,82% 39%,88% 69%,95% 78%,100% 100%,72% 100%,67% 79%,61% 62%,56% 49%,50% 41%,44% 49%,39% 62%,33% 79%,28% 100%);
  filter:drop-shadow(-22px 0 24px #000) drop-shadow(22px 0 28px #63d67544);
  animation:virGreatArch 9s ease-in-out infinite alternate
}
#menu[data-theme="vir"] .td-gate::before{
  content:"";position:absolute;inset:4% 3% 0;
  background:
    repeating-radial-gradient(ellipse at 45% 100%,transparent 0 31px,#020503 32px 38px,transparent 39px 61px),
    repeating-radial-gradient(ellipse at 58% 100%,transparent 0 37px,#4b9e5b44 38px 44px,transparent 45px 72px);
  mask:linear-gradient(90deg,#000,transparent 48%,#000);
  animation:virArchVeins 7s ease-in-out infinite alternate
}
#menu[data-theme="vir"] .td-gate::after{
  content:"";position:absolute;left:46%;top:17%;width:8%;height:25%;border-radius:50% 50% 38% 38%;
  background:radial-gradient(ellipse at 50% 45%,#f1ffe8 0 5%,#8cf092 6% 22%,#17371e 24% 54%,#010302 56%);
  box-shadow:0 0 25px #8bea92,0 0 72px #58b96977,inset 0 0 18px #000;
  animation:virSeedHeart 3.8s ease-in-out infinite alternate
}
#menu[data-theme="vir"] .td-silhouette{
  display:block;z-index:3;inset:auto -5% -3%;height:39%;
  background:
    radial-gradient(ellipse at 12% 100%,#000 0 19%,transparent 20%),
    radial-gradient(ellipse at 33% 100%,#020603 0 22%,transparent 23%),
    radial-gradient(ellipse at 58% 100%,#0b2212 0 23%,transparent 24%),
    radial-gradient(ellipse at 82% 100%,#194824 0 20%,transparent 21%),
    linear-gradient(180deg,transparent 0 34%,#020603 35% 100%);
  filter:drop-shadow(0 -11px 22px #3f9f5233);
  animation:virRootFloor 7.5s ease-in-out infinite alternate
}
#menu[data-theme="vir"] .td-silhouette::before{
  content:"";position:absolute;inset:-34% 0 15%;
  background:
    repeating-linear-gradient(79deg,transparent 0 7%,#020503 7.3% 8.2%,transparent 8.5% 17%),
    repeating-linear-gradient(101deg,transparent 0 11%,#347d4444 11.3% 12.2%,transparent 12.5% 23%);
  mask:linear-gradient(transparent,#000 28%);
  transform-origin:50% 100%;animation:virRootReach 6.5s ease-in-out infinite alternate
}
#menu[data-theme="vir"] .td-vines{
  display:block;z-index:4;inset:-2%;width:auto;
  background:
    radial-gradient(ellipse at 6% 76%,#b7f7ab 0 7px,transparent 8px),
    radial-gradient(ellipse at 18% 54%,#070b08 0 8px,transparent 9px),
    radial-gradient(ellipse at 29% 82%,#75db7e 0 7px,transparent 8px),
    radial-gradient(ellipse at 43% 46%,#020403 0 10px,transparent 11px),
    radial-gradient(ellipse at 58% 73%,#9bea98 0 8px,transparent 9px),
    radial-gradient(ellipse at 72% 41%,#245c31 0 10px,transparent 11px),
    radial-gradient(ellipse at 86% 69%,#c0f7b3 0 8px,transparent 9px),
    radial-gradient(ellipse at 96% 35%,#357e43 0 9px,transparent 10px),
    repeating-linear-gradient(77deg,transparent 0 8%,#020503cc 8.25% 8.85%,transparent 9.1% 17%),
    repeating-linear-gradient(103deg,transparent 0 11%,#4ca75d66 11.25% 11.9%,transparent 12.2% 22%);
  background-size:151px 221px,181px 259px,137px 209px,227px 317px,169px 241px,197px 289px,143px 229px,211px 307px,197px 317px,239px 349px;
  background-position:0 100%,13% 100%,26% 100%,39% 100%,53% 100%,67% 100%,81% 100%,96% 100%,0 100%,0 100%;
  background-repeat:repeat-y;
  transform-origin:50% 100%;
  filter:drop-shadow(0 0 8px #6edb7a55);
  animation:virLivingClimb 13s cubic-bezier(.24,.73,.24,1) infinite
}
#menu[data-theme="vir"] .td-vines::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 15% 72%,#020302 0 4px,transparent 5px),
    radial-gradient(ellipse at 38% 43%,#8be690 0 3px,transparent 4px),
    radial-gradient(ellipse at 64% 67%,#010201 0 4px,transparent 5px),
    radial-gradient(ellipse at 88% 31%,#a6f19f 0 3px,transparent 4px);
  background-size:113px 173px,157px 211px,181px 239px,137px 199px;
  animation:virLeafFlicker 4.7s ease-in-out infinite alternate
}
#menu[data-theme="vir"] .td-vines::after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);
  background:linear-gradient(transparent,#caffbc 18%,#4fbd62 48%,#020403 83%,transparent);
  box-shadow:-10px 0 28px #000,10px 0 28px #72df7e;
  animation:virSymbioticSeam 5.2s ease-in-out infinite alternate
}
#menu[data-theme="vir"] .td-rays{
  display:block;z-index:1;inset:0;
  background:
    linear-gradient(112deg,transparent 0 22%,#0009 37%,transparent 49%),
    linear-gradient(72deg,transparent 0 53%,#a7ffa81c 68%,transparent 83%);
  background-size:180% 100%,220% 100%;mix-blend-mode:screen;
  animation:virCanopyLight 12s ease-in-out infinite alternate
}
#menu[data-theme="vir"] .td-moon{
  display:block;z-index:2;right:9%;top:10%;width:min(22vw,260px);height:min(22vw,260px);border-radius:47% 53% 43% 57%;
  background:
    radial-gradient(circle at 39% 35%,#f0ffe8 0 3%,#a7f3a0 4% 12%,#3f8c4f 13% 31%,#0b2211 32% 64%,#010302 66%);
  box-shadow:0 0 46px #91eb9255,0 0 130px #3b9d5155,inset 0 0 40px #000;
  animation:virMoonseed 8s ease-in-out infinite alternate
}
#menu[data-theme="vir"] .td-moon::before,#menu[data-theme="vir"] .td-moon::after{
  content:"";position:absolute;left:50%;top:50%;width:132%;height:24%;transform:translate(-50%,-50%) rotate(28deg);
  border:2px solid #76d98355;border-radius:50%;box-shadow:0 0 14px #61c97144
}
#menu[data-theme="vir"] .td-moon::after{transform:translate(-50%,-50%) rotate(-36deg);width:118%;border-color:#020403}
#menu[data-theme="vir"] .td-frame{
  display:block;z-index:5;inset:0;
  background:
    linear-gradient(90deg,#000b 0 2%,transparent 5% 95%,#3c934a55 98% 100%),
    linear-gradient(0deg,#041008aa 0 3%,transparent 7% 94%,#13331d66 98% 100%);
  clip-path:polygon(0 0,19% 0,11% 10%,16% 25%,7% 39%,14% 56%,5% 74%,12% 90%,22% 100%,0 100%,0 0,100% 0,81% 0,89% 10%,84% 25%,93% 39%,86% 56%,95% 74%,88% 90%,78% 100%,100% 100%,100% 0);
  filter:drop-shadow(0 0 8px #6edb7a44);animation:virBorderCreep 9s ease-in-out infinite alternate
}
#menu[data-theme="vir"] .td-scan{
  display:block;z-index:6;inset:0;
  background:linear-gradient(105deg,transparent 25%,#d5ffca12 42%,transparent 57%);
  background-size:230% 100%;mix-blend-mode:screen;animation:virLifeSheen 8.5s ease-in-out infinite
}
@keyframes virSanctuaryBreathe{to{filter:brightness(1.18) saturate(1.16);transform:scale(1.018)}}
@keyframes virSporeDrift{to{background-position:43px -181px,-37px -227px,51px -211px,-61px -269px,35px -197px,-45px -251px,58px -239px}}
@keyframes virGreatArch{to{transform:translateX(-50%) scale(1.018);filter:drop-shadow(-30px 0 30px #000) drop-shadow(28px 0 38px #63d67566)}}
@keyframes virArchVeins{to{background-position:42px -28px,-35px -52px;filter:brightness(1.45)}}
@keyframes virSeedHeart{to{transform:scale(1.08);filter:brightness(1.35);box-shadow:0 0 42px #a8f6a9,0 0 105px #58b96999,inset 0 0 18px #000}}
@keyframes virRootFloor{to{transform:translateY(-8px) scaleX(1.02);filter:drop-shadow(0 -16px 35px #3f9f5255)}}
@keyframes virRootReach{to{transform:skewX(2deg) scaleY(1.08);filter:brightness(1.3)}}
@keyframes virLivingClimb{0%{clip-path:inset(100% 0 0);opacity:0;transform:translateY(5%)}12%{opacity:.84}72%{clip-path:inset(0);opacity:1;transform:none}90%{clip-path:inset(0);opacity:.96}100%{clip-path:inset(0);opacity:0;transform:translateY(-4%)}}
@keyframes virLeafFlicker{to{filter:brightness(1.8);transform:translateY(-9px)}}
@keyframes virSymbioticSeam{to{filter:brightness(1.7);transform:translateX(-50%) scaleY(1.04)}}
@keyframes virCanopyLight{to{background-position:100% 0,-120% 0;filter:brightness(1.24)}}
@keyframes virMoonseed{to{transform:rotate(4deg) scale(1.035);filter:brightness(1.22)}}
@keyframes virBorderCreep{to{clip-path:polygon(0 0,24% 0,14% 12%,20% 28%,9% 43%,17% 59%,7% 78%,15% 92%,27% 100%,0 100%,0 0,100% 0,76% 0,86% 12%,80% 28%,91% 43%,83% 59%,93% 78%,85% 92%,73% 100%,100% 100%,100% 0);filter:drop-shadow(0 0 14px #6edb7a66)}}
@keyframes virLifeSheen{0%{background-position:180% 0}100%{background-position:-110% 0}}


#menu[data-theme="vir"] #themeDecor::before{
  background:radial-gradient(ellipse at 78% 54%,#4baf5a25 0 13%,transparent 42%),radial-gradient(ellipse at 14% 76%,#000 0 17%,transparent 43%),linear-gradient(108deg,#010302 0 43%,#061109 57%,#15341c 100%);
  animation:virQuietBreathe 14s ease-in-out infinite alternate
}
#menu[data-theme="vir"] #themeDecor::after{
  background:radial-gradient(circle at 7% 20%,#8be38d 0 1px,transparent 2px),radial-gradient(circle at 91% 28%,#b9f7ad 0 1px,transparent 2px),radial-gradient(circle at 83% 81%,#5fc66d 0 2px,transparent 3px);
  background-size:331px 367px,419px 443px,383px 421px;opacity:.2;filter:drop-shadow(0 0 4px #78dc82);animation:virQuietSpores 30s linear infinite
}
#menu[data-theme="vir"] .td-gate{
  left:auto;right:-7%;bottom:-12%;width:min(55vw,700px);height:min(89vh,850px);transform:none;opacity:.9;
  background:radial-gradient(ellipse at 53% 31%,transparent 0 18%,#183d21 19% 23%,transparent 24%),linear-gradient(105deg,#020503 0 44%,#102919 45% 67%,#347442 100%);
  clip-path:polygon(24% 100%,31% 74%,29% 53%,39% 32%,52% 16%,65% 5%,76% 0,70% 14%,84% 29%,91% 51%,88% 72%,100% 100%);
  filter:drop-shadow(-26px 0 34px #000) drop-shadow(0 0 28px #57b96738);animation:virQuietTree 13s ease-in-out infinite alternate
}
#menu[data-theme="vir"] .td-gate::before{inset:8% 8% 0;background:repeating-radial-gradient(ellipse at 70% 100%,transparent 0 48px,#77d47f2b 49px 52px,transparent 53px 89px);mask:linear-gradient(90deg,transparent,#000 45%);animation:virQuietSap 18s linear infinite}
#menu[data-theme="vir"] .td-gate::after{left:62%;top:21%;width:10%;height:18%;box-shadow:0 0 22px #8bea9277,0 0 58px #58b96944,inset 0 0 16px #000;animation:virQuietHeart 6s ease-in-out infinite alternate}
#menu[data-theme="vir"] .td-silhouette{inset:auto auto -8% -7%;width:46%;height:57%;background:radial-gradient(ellipse at 16% 100%,#000 0 35%,transparent 36%),radial-gradient(ellipse at 55% 100%,#030704 0 30%,transparent 31%),linear-gradient(148deg,transparent 0 51%,#010302 52% 100%);filter:drop-shadow(13px -5px 25px #000);opacity:.92;animation:virQuietRoot 15s ease-in-out infinite alternate}
#menu[data-theme="vir"] .td-silhouette::before{inset:-8% 0 17%;background:linear-gradient(72deg,transparent 0 28%,#010302 29% 31%,transparent 32%),linear-gradient(96deg,transparent 0 51%,#09150c 52% 54%,transparent 55%);mask:linear-gradient(transparent,#000 34%);animation:none}
#menu[data-theme="vir"] .td-vines{inset:0;opacity:.33;filter:none;background:linear-gradient(78deg,transparent 0 8%,#010302 8.3% 9%,transparent 9.3% 100%),linear-gradient(102deg,transparent 0 91%,#347d444f 91.3% 92%,transparent 92.3%);background-size:310px 100%,370px 100%;background-repeat:repeat-x;animation:virQuietVines 16s ease-in-out infinite alternate}
#menu[data-theme="vir"] .td-vines::before,#menu[data-theme="vir"] .td-vines::after,#menu[data-theme="vir"] .td-rays,#menu[data-theme="vir"] .td-moon,#menu[data-theme="vir"] .td-frame,#menu[data-theme="vir"] .td-scan{display:none}
@keyframes virQuietBreathe{to{filter:brightness(1.09) saturate(1.05)}}
@keyframes virQuietSpores{to{background-position:24px -367px,-17px -443px,19px -421px}}
@keyframes virQuietTree{to{transform:translateY(-5px) scale(1.008);filter:drop-shadow(-30px 0 38px #000) drop-shadow(0 0 34px #57b96744)}}
@keyframes virQuietSap{to{background-position:0 -140px;filter:brightness(1.18)}}
@keyframes virQuietHeart{to{transform:scale(1.035);filter:brightness(1.16)}}
@keyframes virQuietRoot{to{transform:translateX(5px) scale(1.01)}}
@keyframes virQuietVines{to{transform:translateY(-8px);opacity:.4}}

:is(.back[data-faction="vir"],.pile[data-faction="vir"],.tdeckpile[data-faction="vir"],:root[data-road-faction-back="vir"] .back:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="vir"] .pile:not([data-faction]):not([data-card-back]),:root[data-road-faction-back="vir"] .tdeckpile:not([data-faction]):not([data-card-back])){
  --faccent:#78df86!important;
  --faction-back:linear-gradient(104deg,#010302 0 48%,#153c20 52% 100%)!important;
  background-image:url("/assets/card-backs/vir.svg?v=106b7a6b88"),var(--faction-back)!important;
  background-position:center,center!important;background-size:cover,cover!important;background-repeat:no-repeat!important;
  border-color:#6ed97c!important;
  box-shadow:inset 0 0 18px #000d,0 0 13px #66d67555!important;
  animation:none!important
}
@keyframes virCardLivingEdge{0%,100%{opacity:1}}
@media(max-width:760px){#menu[data-theme="vir"] .td-gate{width:120vw;height:68vh;opacity:.72}#menu[data-theme="vir"] .td-moon{right:-5%;width:36vw;height:36vw;opacity:.68}}
@media(prefers-reduced-motion:reduce){
  #menu[data-theme="vir"] #themeDecor::before,#menu[data-theme="vir"] #themeDecor::after,#menu[data-theme="vir"] .td-gate,#menu[data-theme="vir"] .td-gate::before,#menu[data-theme="vir"] .td-gate::after,#menu[data-theme="vir"] .td-silhouette,#menu[data-theme="vir"] .td-silhouette::before,#menu[data-theme="vir"] .td-vines,#menu[data-theme="vir"] .td-vines::before,#menu[data-theme="vir"] .td-vines::after,#menu[data-theme="vir"] .td-rays,#menu[data-theme="vir"] .td-moon,#menu[data-theme="vir"] .td-frame,#menu[data-theme="vir"] .td-scan,
  :is(.back[data-faction="vir"],.pile[data-faction="vir"],.tdeckpile[data-faction="vir"]){animation:none!important}
}

.grand-peace-counter{position:absolute;right:5px;bottom:5px;z-index:13;min-width:34px;height:34px;padding:0 4px;display:grid;place-items:center;border-radius:50%;border:1px solid #e7d08b;background:radial-gradient(circle at 42% 35%,#fff4be 0 7%,#8a6d28 9% 14%,#243332 42%,#080d0d 72%);box-shadow:0 0 12px #e3cb7470,inset 0 0 0 2px #0b1111,inset 0 0 12px #000;color:#fff5c9;font:900 9px var(--mono);letter-spacing:-.05em;text-shadow:0 1px 3px #000;pointer-events:none}
.grand-peace-counter::before{content:"TREATY";position:absolute;top:-8px;color:#e9d38d;font:700 4px var(--mono);letter-spacing:.16em;text-shadow:0 1px 3px #000}
.grand-peace-counter.complete{border-color:#fff6b2;box-shadow:0 0 18px #fff1a6,inset 0 0 0 2px #173c32,inset 0 0 12px #000;color:#fff}
#tip .grand-peace-checklist{margin-top:10px;padding:9px;border:1px solid #786932;background:linear-gradient(145deg,#15150d,#080d0d 72%);box-shadow:inset 0 0 18px #000;color:#d9d5bc}
#tip .grand-peace-check-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid #51491f}
#tip .grand-peace-check-head b{color:#fff0ad;font:800 9px var(--mono);letter-spacing:.13em;text-transform:uppercase}
#tip .grand-peace-check-head span{color:#d9c46e;font:900 11px var(--mono)}
#tip .grand-peace-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 6px}
#tip .grand-peace-check{display:grid;grid-template-columns:15px minmax(0,1fr);gap:5px;align-items:start;min-height:29px;padding:4px 5px;border:1px solid #383a2a;background:#080b0b}
#tip .grand-peace-check .mark{color:#766f50;font:900 11px/1 var(--mono)}
#tip .grand-peace-check b,#tip .grand-peace-check small{display:block}
#tip .grand-peace-check b{color:#c7c3ad;font:700 8px/1.15 var(--mono)}
#tip .grand-peace-check small{margin-top:3px;color:#8f907f;font:6px/1.25 var(--mono)}
#tip .grand-peace-check.signed{border-color:#456c55;background:#09120d}
#tip .grand-peace-check.signed .mark,#tip .grand-peace-check.signed b{color:#8ee0a5}
#tip .grand-peace-check.missing-card{border-color:#71453a}
#tip .grand-peace-check.missing-card small{color:#d98e7a}
#tip .grand-peace-check-note{margin-top:7px;color:#89856f;font:6px/1.35 var(--mono)}
@media(max-width:560px){#tip .grand-peace-check-grid{grid-template-columns:1fr}}

/* Display fitting
   ----------------
   Keep the established visual language, but let every interactive surface
   fit the viewport that actually exists. Full arenas remain fixed on normal
   displays; compact displays gain readable density and deliberate scrolling
   instead of clipped controls. */

html,
body {
  width: 100%;
  max-width: 100vw;
  height: 100%;
}

#menu,
#game,
#teamgame,
#builder {
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
}

#menu,
#netui,
#builder {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

#game .hand,
#teamgame .tshand {
  padding-bottom: max(5px, env(safe-area-inset-bottom, 0px));
}

button,
input,
select,
textarea {
  min-width: 0;
}

/* Full-screen prompts must expose all of their controls. Several of these
   previously centred content taller than the viewport while body scrolling
   was disabled, making the bottom half unreachable. */
#pause,
#modal,
#dbg,
#seasonModal,
#bloodlineModal,
#changelogModal,
#recapmodal,
#zonesmodal,
#overlay,
#replaymodal,
.lobby-settings {
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  overscroll-behavior: contain;
}

#pause,
#modal,
#dbg,
#seasonModal,
#bloodlineModal,
#changelogModal,
#recapmodal,
#zonesmodal,
#overlay {
  overflow-x: hidden;
  overflow-y: auto;
  padding:
    max(10px, env(safe-area-inset-top, 0px))
    max(10px, env(safe-area-inset-right, 0px))
    max(10px, env(safe-area-inset-bottom, 0px))
    max(10px, env(safe-area-inset-left, 0px));
}

.pbox,
.mbox,
.dbox,
.seasonbox,
.bloodlineBox,
.clbox,
.recapbox,
.replaybox,
.ovbox,
.lobby-panel {
  max-width: 100%;
  margin-block: auto;
}

.mbox {
  width: min(720px, 100%);
}

.prebox {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}

#chatbox {
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
}

/* On narrow duel HUDs the long resource explanation is still available via
   its tooltip, while the visible chip remains compact enough to preserve the
   hero, Mana, deck and End Turn controls. */
@media (max-width: 520px) {
  #game .side {
    gap: 5px;
    padding-inline: 6px;
  }

  #game .side > .res {
    flex: 0 1 74px;
    max-width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #game .side > .res .tier {
    display: none;
  }

  #game .crystals {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  #game .manatxt {
    flex: none;
  }

  #game .power {
    max-width: 72px;
  }

  #game .hname {
    font-size: 10px;
  }

  #game .hsub {
    font-size: 6px;
  }

  #hint {
    width: calc(100vw - 12px);
    justify-content: center;
  }

  #toast {
    width: calc(100vw - 24px);
    font-size: clamp(22px, 9vw, 34px);
  }
}

/* Short displays need a true compact arena, not merely smaller artwork inside
   unchanged minimum-height rows. */
@media (max-height: 600px) {
  #game .side {
    gap: 5px;
    padding: 2px 6px;
  }

  #game .hero,
  #game .art,
  #game .power {
    zoom: calc(.58 * var(--scale-hero, 1));
  }

  #game .field {
    min-height: 56px;
  }

  #game .field .m {
    zoom: calc(.5 * var(--scale-board, 1));
  }

  #game .rear {
    min-height: 22px;
  }

  #game .rear .en {
    zoom: calc(.5 * var(--scale-board, 1));
  }

  #game .hand {
    min-height: 96px;
    padding-bottom: 3px;
  }

  #game .hand .card {
    zoom: calc(.43 * var(--scale-hand, 1));
  }

  #game .pile {
    width: 44px;
    height: 56px;
  }

  #game .turnbox {
    padding-inline: 5px;
  }

  #game .end {
    padding: 8px 10px;
  }
}

@media (max-height: 440px) {
  #game .field {
    min-height: 46px;
  }

  #game .rear {
    min-height: 18px;
  }

  #game .hand {
    min-height: 82px;
  }

  #game .hero,
  #game .art,
  #game .power {
    zoom: calc(.5 * var(--scale-hero, 1));
  }

  #game .field .m,
  #game .rear .en {
    zoom: calc(.42 * var(--scale-board, 1));
  }

  #game .hand .card {
    zoom: calc(.36 * var(--scale-hand, 1));
  }

  #game .pile {
    width: 39px;
    height: 48px;
  }
}

/* Four readable seats beat four clipped seats. On compact displays the team
   arena becomes a vertically scrollable board with a sticky match header.
   Tablet landscape keeps two columns; phone portrait uses one. */
@media (max-width: 700px), (max-height: 500px) {
  #teamgame {
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
    overscroll-behavior-y: contain;
  }

  #teamgame.on {
    display: flex;
  }

  .tgbar {
    position: sticky;
    top: 0;
    z-index: 30;
    flex: none;
  }

  .tggrid {
    flex: none;
    height: auto;
    min-height: 0;
    grid-template-rows: none;
    grid-auto-rows: minmax(280px, calc(100dvh - 90px));
    overflow: visible;
  }

  .tseat {
    min-height: 280px;
    scroll-snap-align: start;
  }
}

@media (max-width: 700px) {
  .tgbar {
    height: auto;
    min-height: 74px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 5px 7px;
    padding:
      max(6px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      6px
      max(8px, env(safe-area-inset-left, 0px));
  }

  .tgbar .tgturn {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    padding: 4px 8px;
  }

  .tgbar .tgteam:first-child {
    grid-column: 1;
    grid-row: 2;
  }

  .tgbar .tgsync {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }

  .tgbar .tgend {
    grid-column: 3;
    grid-row: 2;
  }

  .tgbar .tgteam.right {
    grid-column: 4;
    grid-row: 2;
  }

  .tgteam b {
    display: block;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tgteam small {
    font-size: 6px;
  }

  .tgturn b {
    font-size: 13px;
  }

  .tggrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tshead {
    padding-inline: 6px;
  }

  .tswho {
    min-width: 54px;
    max-width: 94px;
  }

  .tswho b {
    font-size: 11px;
  }

  .tspower {
    min-width: 52px;
    max-width: 72px;
    padding-inline: 5px;
  }

  .tart {
    max-width: 50px;
  }

  /* Keep the secondary inspectors available without allowing them and the
     history panel to cover a quarter of a compact battlefield. */
  #recapopen,
  #zonesopen {
    right: 6px;
    width: 52px;
    min-width: 52px;
    padding: 6px 3px;
    overflow: hidden;
    font-size: 6px;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #log {
    width: min(150px, 40vw) !important;
  }

  #logbody {
    max-height: 14dvh !important;
    font-size: 7px;
  }
}

@media (max-width: 520px) {
  .tggrid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(330px, calc(100dvh - 88px));
  }

  .tseat {
    min-height: 330px;
  }

  .tgbar .tgsync {
    width: 12px;
    height: 12px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    color: transparent;
  }

  .tgbar .tgsync.bad {
    background: #7d3434;
  }

  .tgbar .tgend {
    min-width: 82px;
    min-height: 38px;
    padding: 6px 8px;
  }

  .tswho {
    max-width: 108px;
  }

  .tspower {
    max-width: 88px;
  }
}

/* Opening-hand cards and their decisions wrap inside the prompt. Buttons no
   longer become unreachable siblings beyond the right edge. */
@media (max-width: 560px), (max-height: 600px) {
  .mbox,
  .pbox,
  .seasonbox,
  .bloodlineBox,
  .ovbox,
  .lobby-panel {
    padding: 20px 16px;
  }

  .mbox .msub {
    margin-bottom: 14px;
    line-height: 1.55;
  }

  .opts {
    max-width: 100%;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .opt {
    flex: 0 0 min(168px, 100%);
    width: min(168px, 100%);
  }

  .opts > .go,
  .opts > .mquit {
    flex: 1 1 100%;
    max-width: 220px;
  }

  .pbox {
    width: min(440px, 100%);
  }

  .scale-row {
    gap: 6px;
  }

  .scale-row span {
    width: 70px;
  }

  .pdanger {
    flex-direction: column;
  }

  .seasonwheel {
    width: min(230px, 74vw);
    height: min(230px, 74vw);
  }

  .bloodlineCrest,
  .bloodlineSide {
    max-width: 100%;
  }

  .recaphead,
  .replayhead {
    padding: 12px;
  }

  .recapbox,
  .replaybox {
    width: 100%;
    height: calc(100dvh - 20px);
  }
}

@media (max-width: 380px) {
  .prow {
    flex-direction: column;
  }

  .pbox h1 {
    font-size: 26px;
  }

  .settings-check,
  .scale-row {
    font-size: 9px;
  }

  #chatbox {
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
  }

  .homeview {
    padding-top: 34px;
  }

  .home-title {
    font-size: clamp(48px, 18vw, 72px);
  }
}
/* Mulligan footer redesign */
#modal:has(.opts > .mquit) .mbox {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
  padding: 28px 30px 24px;
}

#modal .opts:has(> .mquit) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 168px));
  justify-content: center;
  align-items: stretch;
  gap: 14px;
  max-width: 100%;
}

#modal .opts:has(> .mquit) > .opt {
  width: auto;
  min-width: 0;
}

#modal .opts:has(> .mquit) > .opt.mulled {
  opacity: 1;
  border-color: #ff6d61;
  background:
    linear-gradient(rgba(104, 29, 31, .32), rgba(31, 14, 20, .46)),
    linear-gradient(175deg, #1c2537, #101725);
  box-shadow: inset 0 0 0 1px rgba(255, 109, 97, .2);
}

#modal .opts:has(> .mquit) > .opt.mulled .card {
  opacity: .62;
  filter: saturate(.55);
}

#modal .opts:has(> .mquit) > .go,
#modal .opts:has(> .mquit) > .mquit {
  grid-row: 2;
  width: 100%;
  min-height: 42px;
  margin: 6px 0 0 !important;
  padding: 11px 14px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#modal .opts:has(> .mquit) > .mquit {
  grid-column: 1;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #6f788c;
  text-decoration: none;
}

#modal .opts:has(> .mquit) > .mquit:hover {
  color: var(--ink);
  border-color: var(--rule);
  background: rgba(255, 255, 255, .025);
}

#modal .opts:has(> .mquit) > .go.alt {
  grid-column: 2;
}

#modal .opts:has(> .mquit) > .go:not(.alt) {
  grid-column: 3;
}

@media (max-width: 600px) {
  #modal:has(.opts > .mquit) {
    align-items: flex-start;
    overflow-y: auto;
    padding: 14px 0;
  }

  #modal:has(.opts > .mquit) .mbox {
    width: min(430px, calc(100vw - 24px));
    padding: 22px 16px 18px;
  }

  #modal .opts:has(> .mquit) {
    grid-template-columns: repeat(2, minmax(0, 168px));
    gap: 12px;
  }

  #modal .opts:has(> .mquit) > .opt:nth-child(3) {
    grid-column: 1 / -1;
    width: 168px;
    justify-self: center;
  }

  #modal .opts:has(> .mquit) > .go {
    grid-row: 3;
  }

  #modal .opts:has(> .mquit) > .mquit {
    grid-column: 1 / -1;
    grid-row: 4;
    min-height: 36px;
    margin-top: 0 !important;
  }

  #modal .opts:has(> .mquit) > .go.alt {
    grid-column: 1;
  }

  #modal .opts:has(> .mquit) > .go:not(.alt) {
    grid-column: 2;
  }
}
/* Four-card mulligan support */
#modal:has(.opts > .mquit) .mbox {
  width: min(820px, calc(100vw - 32px));
  max-width: 820px;
}

#modal .opts:has(> .opt:nth-child(4)) {
  grid-template-columns: repeat(4, minmax(0, 168px));
}

#modal .opts:has(> .opt:nth-child(4)) > .mquit {
  grid-column: 1 / 3;
}

#modal .opts:has(> .opt:nth-child(4)) > .go.alt {
  grid-column: 3;
}

#modal .opts:has(> .opt:nth-child(4)) > .go:not(.alt) {
  grid-column: 4;
}

@media (max-width: 600px) {
  #modal:has(.opts > .mquit) .mbox {
    width: min(430px, calc(100vw - 24px));
  }

  #modal .opts:has(> .opt:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 168px));
  }

  #modal .opts:has(> .opt:nth-child(4)) > .opt:nth-child(3) {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }

  #modal .opts:has(> .opt:nth-child(4)) > .mquit {
    grid-column: 1 / -1;
  }

  #modal .opts:has(> .opt:nth-child(4)) > .go.alt {
    grid-column: 1;
  }

  #modal .opts:has(> .opt:nth-child(4)) > .go:not(.alt) {
    grid-column: 2;
  }
}
/* Factions stay as a readable one-per-line archive at every width. */
#factionview .decks {
  flex-direction: column;
}

@media (max-width: 650px) {
  #factionview .factionrail .decks {
    flex-direction: column;
    max-height: 52vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #factionview .factionrail .dk {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* Solo 2v2 exposes every AI-controlled seat while keeping Player 1's
   own faction and deck in the main picker above. */
.solo-ai-roster-picker{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--gold) 34%,#263147);background:linear-gradient(100deg,rgba(220,179,92,.08),rgba(6,9,15,.88));box-shadow:inset 0 0 18px rgba(0,0,0,.35)}
.solo-ai-roster-head{grid-column:1/-1}.solo-ai-roster-head b{display:block;color:var(--ink);font:700 13px var(--serif)}.solo-ai-roster-head small,.solo-ai-seat small{display:block;margin-top:3px;color:var(--dim);font:650 7px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase}.solo-ai-seat{display:block;padding:9px 10px;border:1px solid #30384a;border-left:3px solid var(--blood);background:#070a11}.solo-ai-seat.ally{border-left-color:var(--gold)}.solo-ai-seat span{display:block;color:var(--ink);font:700 11px var(--serif)}.solo-ai-seat select{width:100%;min-height:36px;margin-top:8px;padding:7px 9px;border:1px solid #46516a;border-radius:3px;background:#080b12;color:var(--ink);font:700 10px var(--mono);cursor:pointer}.solo-ai-seat.ally select{border-color:var(--gold-dim)}.solo-ai-seat select:hover,.solo-ai-seat select:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 12px rgba(220,179,92,.22)}
@media(max-width:820px){.solo-ai-roster-picker{grid-template-columns:1fr}}