/* ============================================================
     DUELS — the night survey.
     The same topographic sheet as the rest of the game, taken into
     the dark for the arena. You read as the map's own water blue,
     the opponent as an ember. The signature is the clash bar: two
     healths slanting into a centre diamond that carries the clock.
     ============================================================ */
  /* Retinted for quiz night. The arena keeps its own scale — you read cool,
     the opponent reads ember — but both now sit on the cabinet's dark and
     take its gold. Only the colours moved; every class here is unchanged. */
  .dx{--dxa:#0D191C; --dxb:#16262B; --dxc:#1E3237;
      --dxl:rgba(255,255,255,.06); --dxt:#FFFFFF; --dxm:var(--text-muted);
      --dxyou:#8FC7DA; --dxyou2:#1B4E7A; --dxthem:#E0784A; --dxthem2:#C25A3A;
      --dxgold:var(--gold)}
  .dx-stage{position:relative;color:var(--dxt);border-radius:6px;
    border:1px solid #1E4854;padding:16px 16px 12px;overflow:hidden;
    background:
      repeating-radial-gradient(circle at 14% 6%, transparent 0 26px, var(--dxl) 26px 27px, transparent 27px 54px),
      repeating-radial-gradient(circle at 86% 92%, transparent 0 32px, var(--dxl) 32px 33px, transparent 33px 66px),
      linear-gradient(180deg,#0A2E39 0%, var(--dxa) 60%);
    box-shadow:0 14px 34px rgba(8,50,60,.35)}
  .dx-stage.danger{animation:dxdanger 1.6s ease-in-out infinite}
  @keyframes dxdanger{0%,100%{box-shadow:0 14px 34px rgba(8,50,60,.35), inset 0 0 0 0 rgba(180,69,60,0)}
    50%{box-shadow:0 14px 34px rgba(8,50,60,.35), inset 0 0 34px 2px rgba(180,69,60,.28)}}
  .dx-stage.shake{animation:dxshake .32s}
  .dx-stage.shake-big{animation:dxshake .5s}
  @keyframes dxshake{0%,100%{transform:translate(0,0)}20%{transform:translate(-5px,2px)}
    40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,-1px)}}

  /* ---- the clash bar ---- */
  .dx-clash{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start}
  .dx-side{position:relative;min-width:0}
  .dx-who{display:flex;align-items:center;gap:7px;margin-bottom:6px;min-width:0}
  .dx-side.them .dx-who{flex-direction:row-reverse}
  .dx-name{font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.02em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dx-me{font-style:normal;font-family:var(--display);font-weight:700;font-size:8.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--dxa);
    background:var(--dxyou);border-radius:2px;padding:1px 4px;margin-left:5px;vertical-align:1px}
  .dx-rec{font-size:10px;color:var(--dxm);font-variant-numeric:tabular-nums;white-space:nowrap}
  .av.dx-pav{width:24px;height:24px;border-radius:50%;flex:none;font-size:14px;line-height:24px}
  .av.dx-pav img{width:100%;height:100%;border-radius:50%;object-fit:cover}
  .dx-init{display:inline-flex;align-items:center;justify-content:center;
    background:var(--dxc);color:var(--dxt);font-family:var(--display);font-weight:900}
  .dx-side.you .av.dx-pav{box-shadow:0 0 0 2px var(--dxyou2)}
  .dx-side.them .av.dx-pav{box-shadow:0 0 0 2px var(--dxthem2)}
  .dx-track{position:relative;height:24px;background:#082630;border:1px solid #1E4854;
    transform:skewX(-16deg);border-radius:3px;overflow:hidden}
  .dx-ghost{position:absolute;inset:0 auto 0 0;background:rgba(234,244,242,.32);
    transition:width .45s ease}
  .dx-fill{position:absolute;inset:0 auto 0 0;transition:width .5s ease;
    background:linear-gradient(180deg,var(--dxyou) 0%,var(--dxyou2) 100%);
    background-image:repeating-linear-gradient(90deg,transparent 0 14px,rgba(8,38,48,.18) 14px 15px),
      linear-gradient(180deg,var(--dxyou) 0%,var(--dxyou2) 100%)}
  .dx-side.them .dx-track{transform:skewX(16deg)}
  .dx-side.them .dx-ghost,.dx-side.them .dx-fill{left:auto;right:0}
  .dx-side.them .dx-fill{background-image:repeating-linear-gradient(90deg,transparent 0 14px,rgba(8,38,48,.18) 14px 15px),
      linear-gradient(180deg,var(--dxthem) 0%,var(--dxthem2) 100%)}
  .dx-side.low .dx-fill{background-image:repeating-linear-gradient(90deg,transparent 0 14px,rgba(8,38,48,.18) 14px 15px),
      linear-gradient(180deg,#E0784A 0%,#B4453C 100%);animation:dxlow 1.1s ease-in-out infinite}
  @keyframes dxlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
  .dx-side.struck .dx-fill{filter:brightness(1.7)}
  .dx-hp{position:absolute;top:50%;right:8px;transform:translateY(-50%) skewX(16deg);
    font-family:var(--display);font-weight:900;font-size:15px;color:var(--dxa);
    font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(234,244,242,.35)}
  .dx-side.them .dx-hp{right:auto;left:8px;transform:translateY(-50%) skewX(-16deg)}
  .dx-side.low .dx-hp{color:#2A0F0B}
  .dx-pips{display:flex;gap:4px;margin-top:6px;height:8px;align-items:center}
  .dx-side.them .dx-pips{justify-content:flex-end}
  .dx-pips i{width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--dxyou2)}
  .dx-side.them .dx-pips i{background:var(--dxthem2)}
  .dx-pips b{font-size:9px;color:var(--dxm);font-weight:700}
  .dx-dmg{position:absolute;top:26px;right:12px;z-index:4;opacity:0;pointer-events:none;
    font-family:var(--display);font-weight:900;font-size:22px;color:#FFB09A;
    text-shadow:0 2px 8px rgba(6,20,26,.8)}
  .dx-side.them .dx-dmg{right:auto;left:12px}
  .dx-dmg.go{animation:dxdmg 1.15s ease-out forwards}
  .dx-dmg.big{font-size:30px;color:#FF8E6E}
  @keyframes dxdmg{0%{opacity:0;transform:translateY(6px) scale(.6)}
    12%{opacity:1;transform:translateY(-2px) scale(1.18)}
    30%{transform:translateY(-8px) scale(1)}
    100%{opacity:0;transform:translateY(-40px) scale(.94)}}
  .dx-shard{position:absolute;left:50%;top:50%;width:9px;height:3px;border-radius:1px;
    background:var(--dxt);opacity:0;pointer-events:none;animation:dxshard .6s ease-out forwards}
  @keyframes dxshard{0%{opacity:.9;transform:rotate(var(--a)) translateX(8px)}
    100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d))}}

  /* ---- the centre diamond: the clock ---- */
  .dx-core{width:52px;height:52px;margin-top:8px;position:relative;flex:none;
    transform:rotate(45deg);border:2px solid var(--dxyou2);border-radius:8px;
    background:linear-gradient(135deg,#0C3541,#082630);
    box-shadow:0 0 0 4px rgba(44,143,160,.14)}
  .dx-core .dx-clock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    transform:rotate(-45deg);font-family:var(--display);font-weight:900;font-size:21px;
    font-variant-numeric:tabular-nums;color:var(--dxt);padding-bottom:6px}
  .dx-corecap{position:absolute;left:50%;top:64%;transform:translateX(-50%) rotate(-45deg);
    font-size:6.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dxm)}
  .dx-core.warn{border-color:var(--dxgold);box-shadow:0 0 0 4px rgba(227,180,92,.18)}
  .dx-core.warn .dx-clock{color:var(--dxgold)}
  .dx-core.low{border-color:var(--dxthem2);box-shadow:0 0 0 4px rgba(180,69,60,.25);
    animation:dxcore .5s ease-in-out infinite}
  .dx-core.low .dx-clock{color:#FF9B82}
  @keyframes dxcore{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(45deg) scale(1.07)}}
  /* the handover: no urgency, nothing is being asked of anyone */
  .dx-core.reveal{border-color:var(--dxm);box-shadow:0 0 0 4px rgba(143,178,174,.12)}
  .dx-core.reveal .dx-clock{color:var(--dxm)}

  /* the line under the finished round, counting the next one in */
  .dx-next{text-align:center;margin:10px 0 2px;font-size:12.5px;color:var(--dxm);
    letter-spacing:.02em}
  .dx-next b{font-family:var(--display);font-weight:900;font-size:15px;color:var(--dxt);
    font-variant-numeric:tabular-nums}
  /* only seen if a deal ever runs dry mid-match — an honest wait, not a blank stage */
  .dx-dealing{display:flex;align-items:center;justify-content:center;gap:9px;
    padding:26px 8px;color:var(--dxm);font-size:13.5px}
  .dx-fuse{height:3px;margin:12px 2px 0;background:#0A2E38;border-radius:2px;overflow:hidden}
  .dx-fuse i{display:block;height:100%;background:linear-gradient(90deg,var(--dxthem2),var(--dxgold),var(--dxyou));
    transition:width 1s linear}

  /* ---- the row under the bar ---- */
  .dx-snd{display:none}
  .dx-sub{display:flex;align-items:center;gap:10px;margin:10px 0 12px}
  .dx-roundlbl{font-family:var(--display);font-weight:900;font-size:11px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--dxm)}
  .dx-mult{display:inline-flex;align-items:baseline;gap:6px;padding:3px 9px;border-radius:3px;
    border:1px solid #1E4854;background:#0A2E38;font-variant-numeric:tabular-nums}
  .dx-mult b{font-family:var(--display);font-weight:900;font-size:12.5px;color:var(--dxt)}
  .dx-mult .dx-mcap{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dxm)}
  .dx-mult.live{border-color:var(--dxgold);background:rgba(227,180,92,.12)}
  .dx-mult.live b{color:var(--dxgold)}
  .dx-snd{margin-left:auto;width:30px;height:30px;border-radius:3px;border:1px solid #1E4854;
    background:#0A2E38;color:var(--dxt);cursor:pointer;font-size:13px}
  .dx-snd.off{color:var(--dxm)}

  /* ---- the question ---- */
  .dx-q{background:var(--snow);color:var(--abyss);border-radius:4px;
    padding:14px 15px 15px;border:1px solid #1E4854;
    box-shadow:0 10px 24px rgba(4,18,24,.45)}
  .dx-qmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
  .dx-cat{font-family:var(--display);font-weight:900;font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--deep);background:var(--panel-3);
    border-radius:2px;padding:3px 7px}
  .dx-scale{font-size:11.5px;color:var(--text-muted)}
  .dx-scale .k{font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-right:4px}
  .dx-scale b{color:var(--abyss);font-variant-numeric:tabular-nums}
  /* Duel, battle and party all render the question through this one class.
     Kept below .qtext because it shares its card with a clock, a scoreboard
     and both players' guesses — it scales with them, it does not match them. */
  .dx-qtext{font-family:var(--display);font-weight:700;
    font-size:calc(25px * var(--q-scale,1));line-height:1.3}
  .dx-unit{font-size:12px;color:var(--text-muted);margin-top:5px}
  .dx-answer{margin-top:12px}
  .dx-answer input{flex:1;min-width:0;padding:12px 13px;border:1px solid var(--border-strong);
    border-radius:4px;font-size:19px;font-family:var(--display);font-weight:700;
    font-variant-numeric:tabular-nums;background:var(--field);color:var(--text)}
  .dx-opplocked{margin-top:10px;font-family:var(--display);font-weight:700;font-size:11px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--orange);
    animation:dxopp .4s ease}
  @keyframes dxopp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .dx-waitopp{display:flex;align-items:center;justify-content:center;gap:9px;
    padding:16px 8px 8px;color:var(--text-muted);font-size:13.5px}
  .dx-dots i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--shelf);
    margin-right:3px;animation:dxdots 1.2s infinite}
  .dx-dots i:nth-child(2){animation-delay:.2s}
  .dx-dots i:nth-child(3){animation-delay:.4s}
  @keyframes dxdots{0%,60%,100%{opacity:.25}30%{opacity:1}}

  /* ---- the round result ---- */
  .dx-rr{position:relative;border:1px solid #1E4854;border-radius:4px;background:#0A2E38;
    padding:12px 14px;margin-bottom:12px}
  .dx-rr.good{border-color:rgba(159,211,212,.5)}
  .dx-rr.bad{border-color:rgba(224,120,74,.55)}
  .dx-rrh{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-weight:700;
    font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dxm)}
  .dx-rrsub{letter-spacing:.04em;text-transform:none;font-size:11.5px;color:var(--dxt);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .dx-rrmult{margin-left:auto;color:var(--dxgold)}
  .dx-ans{text-align:center;margin:8px 0 2px}
  .dx-anslbl{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--dxm);font-weight:700}
  .dx-ansval{font-family:var(--display);font-weight:900;font-size:38px;line-height:1.1;
    font-variant-numeric:tabular-nums;color:var(--dxgold)}
  .dx-ansunit{font-size:11px;color:var(--dxm)}
  .dx-map{margin:10px 4px 2px}
  .dx-mapline{position:relative;height:14px;border-radius:2px;
    background:linear-gradient(90deg,rgba(224,120,74,.25),rgba(159,211,212,.22) 50%,rgba(224,120,74,.25));
    border:1px solid #1E4854}
  .dx-tick.c{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:var(--dxgold)}
  .dx-dot{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
    transform:translate(-50%,-50%);border:2px solid var(--dxa);box-shadow:0 0 0 1px rgba(234,244,242,.4)}
  .dx-dot.you{background:var(--dxyou)}
  .dx-dot.them{background:var(--dxthem)}
  .dx-dot.near{box-shadow:0 0 0 3px rgba(227,180,92,.6)}
  .dx-maplbl{display:flex;justify-content:space-between;font-size:8.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--dxm);margin-top:3px;font-weight:700}
  .dx-cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;margin-top:10px}
  .dx-vsmall{align-self:center;font-family:var(--display);font-weight:900;font-size:10px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--dxm)}
  .dx-p{min-width:0;border-radius:3px;padding:8px 9px;background:rgba(8,38,48,.6)}
  .dx-p.winner{background:rgba(159,211,212,.12);box-shadow:inset 0 0 0 1px rgba(159,211,212,.4)}
  .dx-p.them.winner{background:rgba(224,120,74,.12);box-shadow:inset 0 0 0 1px rgba(224,120,74,.45)}
  .dx-pname{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--dxm);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dx-pguess{font-family:var(--display);font-weight:900;font-size:19px;
    font-variant-numeric:tabular-nums;margin-top:2px}
  .dx-exact{font-size:10.5px;color:var(--dxgold);font-weight:700}
  .dx-off{font-size:10.5px;color:var(--dxm)}
  .dx-ptrack{height:5px;background:#082630;border-radius:2px;overflow:hidden;margin:6px 0 4px}
  .dx-ptrack i{display:block;height:100%;background:var(--dxyou2)}
  .dx-p.them .dx-ptrack i{background:var(--dxthem2)}
  .dx-pscore{font-family:var(--display);font-weight:900;font-size:13px;font-variant-numeric:tabular-nums}
  .dx-pscore small{font-weight:700;color:var(--dxm)}
  .dx-dmgline{margin-top:10px;padding-top:9px;border-top:1px solid #1E4854;
    text-align:center;font-size:13px;color:var(--dxt)}
  .dx-dmgline b{font-family:var(--display);font-weight:900}
  .dx-rr.bad .dx-dmgline b{color:#FF9B82}
  .dx-rr.good .dx-dmgline b{color:var(--dxyou)}
  .dx-sum{color:var(--dxm);margin-left:7px;font-size:11.5px}

  /* ---- chat ---- */
  .dx-chatbar{display:flex;align-items:center;gap:9px;margin-top:12px;padding:8px 11px;
    border:1px solid #1E4854;border-radius:3px;background:#0A2E38;cursor:pointer;min-width:0}
  .dx-cbpre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:12px;color:var(--dxm)}
  .dx-cbpre b{color:var(--dxt);font-weight:700}
  .dx-cbn{font-size:10px;color:var(--dxm);font-variant-numeric:tabular-nums}
  .dx-chat{margin-top:12px;border:1px solid #1E4854;border-radius:3px;background:#0A2E38;
    padding:9px 11px 11px}
  .dx-chathead{display:flex;justify-content:space-between;font-family:var(--display);
    font-weight:700;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--dxm);cursor:pointer;padding-bottom:7px}
  .dx-log{max-height:130px;overflow-y:auto;font-size:13px;margin-bottom:8px}
  .dx-msg{margin-bottom:3px;color:var(--dxt)}
  .dx-msg .mn{font-weight:700;color:var(--dxthem)}
  .dx-msg.mine .mn{color:var(--dxyou)}
  .dx-emotes{display:flex;gap:6px;margin-bottom:8px}
  .dx-emote{flex:1;padding:6px 0;border:1px solid #1E4854;border-radius:3px;background:#082630;
    color:var(--dxt);font-size:15px;cursor:pointer;font-family:var(--font);font-weight:700}
  .dx-emote:active{background:var(--dxc)}
  .dx-crow{display:flex;gap:8px}
  /* The Send button is an .ax-ghost, which is a full-width block everywhere
     else; beside an input it has to be a button-sized button or the input is
     squeezed to nothing. */
  .dx-crow .ax-ghost{width:auto;flex:none;margin:0;padding:9px 14px}
  .dx-crow input{flex:1;min-width:0;padding:9px 11px;border:1px solid #1E4854;border-radius:3px;
    font-size:14px;background:#082630;color:var(--dxt)}
  .dx-crow input::placeholder{color:var(--dxm)}
  #dxToast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
    max-width:86%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    background:#0C3541;border:1px solid var(--dxyou2);color:var(--dxt);border-radius:3px;
    padding:7px 12px;font-size:12.5px;box-shadow:0 10px 24px rgba(4,18,24,.6);
    animation:dxtoast 2.8s ease forwards}
  #dxToast b{color:var(--dxyou)}
  @keyframes dxtoast{0%{opacity:0;transform:translate(-50%,10px)}8%,84%{opacity:1;transform:translate(-50%,0)}
    100%{opacity:0;transform:translate(-50%,-6px)}}

  /* ---- the verdict ---- */
  .dx-verdict{position:relative;text-align:center;padding:30px 0 18px}
  .dx-vword{font-family:var(--display);font-weight:900;font-size:40px;letter-spacing:.24em;
    text-transform:uppercase;padding-left:.24em}
  .dx-vword.small{font-size:22px;letter-spacing:.18em}
  .dx-stage.won .dx-vword{color:var(--dxgold);text-shadow:0 0 26px rgba(227,180,92,.45)}
  .dx-stage.lost .dx-vword{color:#FF9B82}
  .dx-burst{position:absolute;left:50%;top:42px;width:60px;height:60px;border-radius:12px;
    transform:translate(-50%,-50%) rotate(45deg);border:2px solid var(--dxgold);opacity:0;
    pointer-events:none}
  .dx-stage.won .dx-burst{animation:dxburst 1.4s ease-out forwards}
  .dx-stage.won .b2{animation-delay:.18s}
  .dx-stage.won .b3{animation-delay:.36s}
  .dx-stage.lost .dx-burst{border-color:var(--dxthem2);animation:dxsink 1.2s ease-out forwards}
  .dx-stage.lost .b2{animation-delay:.15s}
  @keyframes dxburst{0%{opacity:.8;transform:translate(-50%,-50%) rotate(45deg) scale(.4)}
    100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(4.2)}}
  @keyframes dxsink{0%{opacity:.5;transform:translate(-50%,-50%) rotate(45deg) scale(3.4)}
    100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.4)}}
  .dx-final{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;flex-wrap:wrap}
  .dx-fp{display:flex;align-items:center;gap:8px;min-width:0}
  .dx-fp b{font-family:var(--display);font-weight:900;font-size:26px;font-variant-numeric:tabular-nums}
  .dx-fp.you b{color:var(--dxyou)} .dx-fp.them b{color:var(--dxthem)}
  .dx-fp span:last-child{font-size:12px;color:var(--dxm);overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;max-width:110px}
  .dx-fdash{color:var(--dxm)}
  .av.dx-fav{width:30px;height:30px;border-radius:50%;flex:none;font-size:17px;line-height:30px}
  .av.dx-fav img{width:100%;height:100%;border-radius:50%;object-fit:cover}
  .dx-vstats{margin-top:10px;font-family:var(--display);font-weight:700;font-size:10.5px;
    letter-spacing:.18em;text-transform:uppercase;color:var(--dxm);font-variant-numeric:tabular-nums}
  .dx-why{font-size:12.5px;color:var(--dxm);margin-top:8px}
  .dx-actions{display:flex;gap:10px;margin-top:6px}
  .dx-actions .primary{flex:1}
  .dx-homelink{text-align:center;margin-top:10px}
  .dx-homelink a{font-size:11.5px;color:var(--dxm);cursor:pointer;text-decoration:underline}

  /* ---- the VS card and the round banner ---- */
  .dx-introwrap{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
    background:
      repeating-radial-gradient(circle at 16% 10%, transparent 0 26px, rgba(159,211,212,.09) 26px 27px, transparent 27px 54px),
      rgba(6,30,38,.94);
    animation:dxfadein .25s ease;cursor:pointer}
  .dx-introwrap.out{opacity:0;transition:opacity .32s ease}
  @keyframes dxfadein{from{opacity:0}to{opacity:1}}
  .dx-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
    width:min(560px,92vw);color:var(--dxt);padding:10px}
  .dx-vcard{text-align:center;min-width:0}
  .dx-vcard.you{animation:dxinL .5s cubic-bezier(.2,.9,.3,1.1) both}
  .dx-vcard.them{animation:dxinR .5s cubic-bezier(.2,.9,.3,1.1) both}
  @keyframes dxinL{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}}
  @keyframes dxinR{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}
  .av.dx-vav{width:76px;height:76px;border-radius:50%;margin:0 auto 10px;font-size:44px;line-height:76px;
    display:flex;align-items:center;justify-content:center}
  .av.dx-vav img{width:100%;height:100%;border-radius:50%;object-fit:cover}
  .dx-vcard.you .av.dx-vav{box-shadow:0 0 0 3px var(--dxyou2),0 0 30px rgba(44,143,160,.5)}
  .dx-vcard.them .av.dx-vav{box-shadow:0 0 0 3px var(--dxthem2),0 0 30px rgba(180,69,60,.5)}
  .dx-vname{font-family:var(--display);font-weight:900;font-size:17px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dx-vcard .dx-rec{display:block;margin-top:3px;font-size:11px}
  .dx-vmid{text-align:center}
  .dx-vmark{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;
    transform:rotate(45deg);border:2px solid var(--dxgold);border-radius:10px;
    background:linear-gradient(135deg,#123B47,#082630);
    animation:dxvmark .55s .25s cubic-bezier(.2,1.4,.4,1) both}
  .dx-vmark::after{content:"VS";transform:rotate(-45deg);font-family:var(--display);
    font-weight:900;font-size:19px;letter-spacing:.06em;color:var(--dxgold)}
  @keyframes dxvmark{from{opacity:0;transform:rotate(45deg) scale(2.6)}to{opacity:1;transform:rotate(45deg) scale(1)}}
  .dx-vmark{font-size:0}
  .dx-vdeck{display:block;margin-top:14px;font-family:var(--display);font-weight:700;font-size:10px;
    letter-spacing:.24em;text-transform:uppercase;color:var(--dxm)}
  .dx-vseries{grid-column:1/-1;text-align:center;font-family:var(--display);font-weight:700;
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dxgold);
    animation:dxfadein .4s .55s both}
  .dx-introwrap.slim{background:rgba(6,30,38,.55)}
  .dx-back-in{font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--dxt);background:#0C3541;border:1px solid var(--dxyou2);
    border-radius:4px;padding:12px 22px}
  #dxBanner{position:absolute;left:0;right:0;top:38%;z-index:5;display:flex;align-items:center;
    justify-content:center;gap:14px;padding:10px 0;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(12,53,65,.96) 18% 82%,transparent);
    border-top:1px solid rgba(159,211,212,.35);border-bottom:1px solid rgba(159,211,212,.35);
    animation:dxbanner 1.5s ease both}
  .dxb-r{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:.26em;
    text-transform:uppercase;color:var(--dxt);padding-left:.26em}
  .dxb-m{font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--dxgold)}
  @keyframes dxbanner{0%{opacity:0;transform:translateX(-26px)}12%,80%{opacity:1;transform:none}
    100%{opacity:0;transform:translateX(26px)}}

  /* ---- the picker and the queue ---- */
  .dx-livedot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);
    margin-right:6px;animation:dxlive 1.4s ease-in-out infinite;vertical-align:1px}
  @keyframes dxlive{0%,100%{box-shadow:0 0 0 0 rgba(63,124,78,.5)}50%{box-shadow:0 0 0 5px rgba(63,124,78,0)}}
  .dx-rejoin{border:1px solid var(--border-strong);border-left:5px solid var(--shelf);
    border-radius:4px;background:var(--panel-3);padding:13px 14px;margin-bottom:14px}
  .dxr-who{display:flex;gap:11px;align-items:center;min-width:0}
  .av.dxr-av{width:38px;height:38px;border-radius:50%;flex:none;font-size:22px;line-height:38px;
    display:flex;align-items:center;justify-content:center;background:var(--panel-2)}
  .av.dxr-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
  .dxr-t{font-family:var(--display);font-weight:900;font-size:13px}
  .dxr-s{font-size:13px;color:var(--text-muted);margin-top:2px}
  .dxr-deck{border:1px solid var(--border);border-radius:99px;padding:1px 8px;font-size:11.5px}
  .dxr-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
  .dxr-btns button{flex:1;min-width:140px}
  .dxr-note{font-size:11.5px;color:var(--text-muted);margin-top:9px;line-height:1.45}
  .dx-wait{text-align:center;padding:26px 0 8px}
  .dx-sonar{position:relative;width:128px;height:128px;margin:0 auto 18px;border-radius:50%;
    background:radial-gradient(circle,#0C3541 0%,#06222B 70%);border:1px solid #1E4854;overflow:hidden}
  .dx-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(159,211,212,.28)}
  .dx-ring.r2{inset:21px} .dx-ring.r3{inset:42px}
  .dx-sweep{position:absolute;inset:0;border-radius:50%;
    background:conic-gradient(from 0deg, rgba(159,211,212,.55) 0deg, rgba(159,211,212,.12) 46deg, transparent 70deg);
    animation:dxsweep 2.6s linear infinite}
  @keyframes dxsweep{to{transform:rotate(360deg)}}
  .dx-blip{position:absolute;left:74%;top:30%;width:6px;height:6px;border-radius:50%;
    background:var(--dxyou);opacity:0;animation:dxblip 2.6s linear infinite}
  @keyframes dxblip{6%,14%{opacity:1}0%,20%,58%,100%{opacity:0}
    62%,70%{opacity:.9;left:26%;top:64%}}
  .dx-wait-t{font-family:var(--display);font-weight:900;font-size:17px;color:var(--abyss)}
  .dx-ell i{animation:dxdots 1.2s infinite;display:inline-block}
  .dx-ell i:nth-child(2){animation-delay:.2s} .dx-ell i:nth-child(3){animation-delay:.4s}
  .dx-wait-s{color:var(--text-muted);font-size:13px;margin:6px 0 2px;min-height:18px}
  .dx-tip{max-width:340px;margin:14px auto 18px;font-size:12.5px;color:var(--deep);
    border:1px dashed var(--border-strong);border-radius:4px;padding:9px 12px;background:var(--panel-3)}
  .dx-tip.show{animation:dxtipin .5s ease}
  @keyframes dxtipin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

  @media(max-width:560px){
    .dx-stage{padding:12px 10px 10px;margin:0 -3px}
    .dx-clash{gap:7px}
    .dx-core{width:44px;height:44px;margin-top:10px}
    .dx-core .dx-clock{font-size:18px}
    .dx-name{font-size:11.5px}
    .dx-rec{display:none}
    .dx-qtext{font-size:calc(21px * var(--q-scale,1))}
    .dx-ansval{font-size:32px}
    .dx-vword{font-size:30px}
    .dx-cmp{gap:7px}
    .dx-hp{font-size:13px}
    .av.dx-vav{width:60px;height:60px;font-size:34px;line-height:60px}
    .dx-vname{font-size:14px}
  }

  /* ---------- reduced motion ----------------------------------------------
     The duel is the most animated thing in the game: the stage shakes in
     proportion to the damage, shards shear off the struck bar, the number
     floats away, the fuse pulses, the banner sweeps. For somebody with a
     vestibular disorder that is not atmosphere, it is a reason to stop
     playing — and until now nothing here asked.

     A BLANKET, NOT A LIST, and deliberately. There are twenty keyframes in
     this sheet and the next duel effect will not remember to come back here,
     so the default is "off" for anything in the dx- namespace and the
     exceptions are named underneath. Matching on the prefix rather than
     `.dx *` because the stage is not always the ancestor — toasts are
     appended to document.body on purpose (a rebuild inside the stage would
     wipe them), and a descendant selector would miss exactly those.

     THE ONE THING THAT MUST NOT BE SUPPRESSED IS THE DAMAGE NUMBER, and it is
     the one that looks most like decoration. `.dx-dmg` is opacity:0 at rest
     and is only ever made visible BY its animation — so turning the animation
     off does not calm it down, it deletes it, and the player is told how much
     health they lost by nothing at all. It is shown statically instead: no
     movement, same information. What is genuinely decorative — the shake and
     the shards — goes entirely, because the health bar, the HP figure and the
     brightened .struck fill already say a hit landed. */
  @media (prefers-reduced-motion: reduce){
    .dx,[class^="dx-"],[class*=" dx-"]{
      animation:none !important;transition:none !important}
    .dx-shard{display:none !important}
    .dx-dmg.go{opacity:1 !important;transform:none !important}
  }