/* ============================================================
     THE ARENA — party and battle share the duel's night survey.
     Everything here layers ax- components onto the dx tokens and
     stage; nothing below redefines a colour the sheet already has.
     The laptop rules at the bottom are the widening: the stages
     break out of the 660px column with symmetric negative margins
     (no transforms — the shake owns transform) once there is room.
     ============================================================ */
  .ax-shell{padding:6px 0}
  .ax-card{position:relative;color:var(--dxt);border-radius:6px;border:1px solid #1E4854;
    padding:22px 20px 18px;overflow:hidden;
    background:
      repeating-radial-gradient(circle at 12% 4%, transparent 0 30px, var(--dxl) 30px 31px, transparent 31px 62px),
      linear-gradient(180deg,#0A2E39 0%, var(--dxa) 62%);
    box-shadow:0 14px 34px rgba(8,50,60,.35)}
  .ax-lbl{font-family:var(--display);font-weight:900;font-size:10px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--dxm)}
  .ax-h{font-family:var(--display);font-weight:900;font-size:24px;margin:4px 0 6px;color:var(--dxt)}
  .ax-sub{font-size:13.5px;color:var(--dxm);line-height:1.55;margin:0 0 14px}
  .ax-meta{font-size:11.5px;color:var(--dxm);font-variant-numeric:tabular-nums}
  .ax-center{text-align:center;justify-content:center;margin-top:10px}
  .ax-back{text-align:center;margin-top:14px}
  .ax-back a{color:var(--dxm);cursor:pointer;font-size:13px}
  .ax-back a:hover{color:var(--dxyou)}
  .ax-err{color:#FF9B82;font-size:13px;margin-top:8px;min-height:1em}
  .ax-hint{font-size:12px;color:var(--dxm);margin-top:7px;line-height:1.5}
  .ax-quiet{color:var(--dxm);font-size:13px}
  .ax-wait{color:var(--dxm);font-size:13.5px;text-align:center;padding:10px 0}
  .ax-count{display:flex;justify-content:space-between;gap:10px;font-size:12px;
    color:var(--dxm);margin-top:9px;min-height:1.1em}

  /* ---- buttons ---- */
  .ax-primary{display:block;width:100%;margin-top:12px;padding:14px 18px;border:0;border-radius:10px;
    font-family:var(--display);font-weight:900;font-size:14.5px;letter-spacing:.03em;cursor:pointer;
    text-transform:uppercase;
    background:var(--dxgold);color:#16221F;
    box-shadow:0 5px 0 #A06B24}
  .ax-primary:active{transform:translateY(3px);box-shadow:0 2px 0 #A06B24}
  .ax-primary:hover{filter:brightness(1.08)}
  .ax-primary:disabled{opacity:.55;cursor:default}
  .ax-ghost{display:block;width:100%;margin-top:9px;padding:10px 16px;border-radius:3px;cursor:pointer;
    border:1px solid #1E4854;background:rgba(9,42,52,.6);color:var(--dxt);font-size:13.5px}
  .ax-ghost:hover{border-color:var(--dxyou2)}
  .ax-startslot{margin-top:14px}
  .ax-startslot .ax-primary{margin-top:0}

  /* ---- the mode plates on the hub ---- */
  .ax-modes{display:grid;gap:9px;margin:6px 0 4px}
  .ax-mode{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;
    column-gap:11px;align-items:center;text-align:left;padding:13px 14px;border-radius:4px;
    cursor:pointer;border:1px solid #1E4854;background:rgba(9,42,52,.65);color:var(--dxt)}
  .ax-mode:hover{border-color:var(--dxyou2);background:rgba(12,53,65,.8)}
  .ax-mi{grid-row:1/3;font-size:22px;text-align:center}
  .ax-mt{font-family:var(--display);font-weight:900;font-size:15px}
  .ax-md{grid-column:2;font-size:11.5px;color:var(--dxm);line-height:1.45;margin-top:2px}

  /* ---- forms ---- */
  .ax-field{margin:11px 0}
  .ax-field label{display:block;font-family:var(--display);font-weight:900;font-size:9.5px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--dxm);margin-bottom:6px}
  .ax-field input[type=number],.ax-field input[type=text]{width:100%;padding:10px 12px;
    border:1px solid #1E4854;border-radius:3px;font-size:15px;background:#082630;color:var(--dxt)}
  .ax-field input::placeholder{color:var(--dxm)}
  .ax-codein{text-transform:uppercase;letter-spacing:.35em;font-family:var(--display);
    font-weight:900;font-size:20px !important;text-align:center}
  .ax-togglerow{display:flex;align-items:center;gap:9px;margin:12px 0 4px}
  .ax-togglerow label{font-size:14px;color:var(--dxt);cursor:pointer}
  .ax-seg{display:flex;flex-wrap:wrap;gap:6px}
  .ax-seg button{flex:1;min-width:72px;padding:9px 10px;border-radius:3px;cursor:pointer;
    border:1px solid #1E4854;background:rgba(8,38,48,.7);color:var(--dxm);
    font-family:var(--display);font-weight:900;font-size:12.5px;letter-spacing:.02em}
  .ax-seg button.on{background:var(--dxyou2);border-color:var(--dxyou2);color:#04161C}

  /* ---- the code plate ---- */
  .ax-codewrap{margin:12px 0}
  .ax-code{font-family:var(--display);font-weight:900;font-size:34px;letter-spacing:.42em;
    text-align:center;color:var(--dxgold);cursor:pointer;padding:10px 6px 8px;border-radius:4px;
    border:1px dashed rgba(227,180,92,.5);background:rgba(227,180,92,.06);text-indent:.42em}
  .ax-code:hover{background:rgba(227,180,92,.12)}
  .ax-linkrow{display:flex;gap:8px;margin-top:8px}
  .ax-linkrow input{flex:1;min-width:0;padding:8px 10px;border:1px solid #1E4854;border-radius:3px;
    font-size:12px;background:#082630;color:var(--dxm)}
  .ax-linkrow .ax-ghost{width:auto;margin:0;padding:8px 13px;font-size:12.5px;white-space:nowrap}

  /* ---- rosters, chips, avatar picking ---- */
  .ax-roster{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
  .ax-roster.big{gap:10px}
  .ax-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 6px;border-radius:20px;
    border:1px solid #1E4854;background:rgba(9,42,52,.7);font-size:13px;color:var(--dxt)}
  .ax-chip.leader{border-color:rgba(227,180,92,.55)}
  .ax-chip.you{border-color:var(--dxyou2);background:rgba(44,143,160,.16)}
  .ax-cups{font-size:11.5px;margin-left:2px}
  .ax-rosman{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 7px;border-radius:4px;
    border:1px solid #1E4854;background:rgba(9,42,52,.7);font-size:13.5px;color:var(--dxt)}
  .ax-rosman.me{border-color:var(--dxyou2);background:rgba(44,143,160,.16)}
  .ax-avpick{margin:6px 0 4px}
  .av.ax-cav{width:20px;height:20px;border-radius:50%;flex:none;font-size:12px;line-height:20px}
  .av.ax-cav img{width:100%;height:100%;border-radius:50%;object-fit:cover}
  .ax-blbl{font-family:var(--display);font-weight:900;font-size:9.5px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--dxm);margin:12px 0 7px}

  /* ---- the stage chrome ---- */
  .ax-stage{padding:16px 16px 14px}
  .ax-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
  .ax-top .ax-prog{flex:1;min-width:0}
  .ax-round{font-family:var(--display);font-weight:900;font-size:15px;color:var(--dxt)}
  .ax-prog{margin:0}
  .ax-progtop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    font-size:12px;color:var(--dxm);margin-bottom:5px}
  .ax-progtop span:first-child{font-family:var(--display);font-weight:900;font-size:13px;color:var(--dxt)}
  .ax-segbar{display:flex;gap:3px}
  .ax-segbar i{flex:1;height:5px;border-radius:2px;background:rgba(159,211,212,.14)}
  .ax-segbar i.done{background:var(--dxyou2)}
  .ax-segbar i.now{background:var(--dxgold);animation:axnow 1.4s ease-in-out infinite}
  @keyframes axnow{0%,100%{opacity:1}50%{opacity:.45}}
  .ax-trk{height:5px;border-radius:2px;background:rgba(159,211,212,.14);overflow:hidden}
  .ax-trk i{display:block;height:100%;background:var(--dxyou2)}

  /* ---- clocks ---- */
  .ax-timerslot{min-height:0}
  .ax-clockchip{display:inline-block;font-family:var(--display);font-weight:900;font-size:17px;
    padding:5px 13px;border-radius:3px;border:1px solid #1E4854;background:rgba(8,38,48,.8);
    color:var(--dxt);font-variant-numeric:tabular-nums;margin-bottom:9px}
  .ax-clockchip.low{color:#FF9B82;border-color:var(--dxthem2);animation:axnow .9s ease-in-out infinite}
  .ax-clockwrap{text-align:center;margin:2px 0 12px}
  .ax-clock{display:inline-flex;align-items:baseline;gap:5px;padding:7px 16px 6px;
    border:1px solid #1E4854;border-radius:4px;background:rgba(8,38,48,.8);
    transform:none}
  .ax-clock b{font-family:var(--display);font-weight:900;font-size:30px;color:var(--dxt);
    font-variant-numeric:tabular-nums;line-height:1}
  .ax-clock span{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dxm)}
  .ax-clock.low{border-color:var(--dxthem2)}
  .ax-clock.low b{color:#FF9B82}
  .ax-fuse{margin:8px auto 0;max-width:340px}

  /* ---- the two-pane game body (single column until the laptop rules) ---- */
  .ax-cols{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
  .ax-main{min-width:0}
  .ax-side{min-width:0}
  .ax-q{margin-top:0}
  .ax-locked{display:flex;align-items:center;gap:10px;justify-content:center;
    padding:26px 14px;border:1px dashed #1E4854;border-radius:4px;color:var(--dxm);font-size:14px}
  .ax-spectate{margin:10px 0 2px;padding:8px 11px;border-radius:3px;font-size:12.5px;
    background:rgba(224,120,74,.12);border:1px solid rgba(224,120,74,.4);color:#F4B294}

  /* ---- boards ---- */
  .ax-board{border:1px solid #16404C;border-radius:4px;background:rgba(7,33,42,.72);
    padding:9px 10px 7px}
  .ax-board .ax-blbl{margin:0 0 7px}
  .ax-brow,.ax-btrow{display:flex;align-items:center;gap:8px;padding:6px 4px;
    border-top:1px solid rgba(30,72,84,.5);font-size:13px;color:var(--dxt);position:relative}
  .ax-brow:first-of-type,.ax-btrow:first-of-type{border-top:0}
  .ax-brow.me,.ax-btrow.me{background:rgba(44,143,160,.13);border-radius:3px}
  .ax-brow.gone,.ax-btrow.gone,.ax-res.gone{opacity:.45}
  .ax-brank{width:20px;text-align:center;font-family:var(--display);font-weight:900;
    font-size:12px;color:var(--dxm);flex:none}
  .ax-bname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
  .ax-btotal{font-family:var(--display);font-weight:900;font-variant-numeric:tabular-nums}
  .ax-bstate{font-size:10px;letter-spacing:.08em;text-transform:uppercase;flex:none}
  .ax-bstate.in{color:var(--dxyou)}
  .ax-bstate.out{color:var(--dxm)}
  .ax-lives{font-size:12px;letter-spacing:1px;white-space:nowrap}
  .ax-btrow.peril .ax-lives{animation:axnow 1.1s ease-in-out infinite}
  .ax-gaps{position:absolute;right:2px;top:100%;margin-top:-3px;display:flex;gap:8px;z-index:1}
  .ax-gap{font-size:9.5px;color:var(--dxm);background:var(--dxa);padding:0 4px;border-radius:2px}
  .ax-gap.up{color:#F4B294}
  .ax-gap.dn{color:var(--dxyou)}
  .ax-btrow{padding-bottom:9px}

  /* ---- the reveal box ---- */
  .ax-reveal{margin:12px 0 2px;padding:10px 12px 11px;border:1px solid #16404C;border-radius:4px;
    background:rgba(7,33,42,.72)}
  .ax-rlbl{font-family:var(--display);font-weight:900;font-size:9.5px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--dxgold)}
  .ax-rdesc{font-size:11.5px;color:var(--dxm);margin:4px 0 8px;line-height:1.5}
  .ax-rrow{display:flex;gap:8px;flex-wrap:wrap}
  .ax-acwrap{position:relative;flex:1;min-width:150px;display:block}
  .ax-rin{width:100%;padding:9px 11px;border:1px solid #1E4854;border-radius:3px;
    font-size:13.5px;background:#082630;color:var(--dxt)}
  .ax-rin::placeholder{color:var(--dxm)}
  .ax-rrow .ax-ghost{width:auto;margin:0;padding:9px 14px}
  .ax-ac{position:absolute;left:0;right:0;top:100%;margin-top:3px;z-index:8;display:none;
    background:#0B303A;border:1px solid #1E4854;border-radius:3px;max-height:220px;overflow:auto;
    box-shadow:0 12px 26px rgba(4,18,24,.55)}
  .ax-ac.show{display:block}
  .ax-ac .ac-item{display:flex;align-items:center;gap:8px;padding:8px 11px;cursor:pointer;
    font-size:13px;color:var(--dxt)}
  .ax-ac .ac-item:hover,.ax-ac .ac-item.active{background:rgba(44,143,160,.2)}
  .ax-rout{display:none;font-size:13px;margin-top:8px;color:var(--dxt)}
  .ax-rout.show{display:block}
  .ax-rout .rv{color:var(--dxgold);font-family:var(--display);font-weight:900}
  .ax-rout.err{color:#FF9B82}

  /* ---- round results ---- */
  .ax-ans{margin:2px 0 12px}
  .ax-reshead{display:flex;align-items:center;gap:8px;padding:0 4px 5px;font-size:9.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--dxm)}
  .ax-reshead .ax-rpts{background:none;width:76px}
  .ax-reshead .ax-guess,.ax-reshead .ax-btotal{color:var(--dxm)}
  .ax-res{opacity:0;animation:axin .4s ease forwards}
  @keyframes axin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
  .ax-resrow{display:flex;align-items:center;gap:8px;padding:7px 4px;
    border-top:1px solid rgba(30,72,84,.5);font-size:13.5px;color:var(--dxt)}
  .ax-res:first-of-type .ax-resrow{border-top:0}
  .ax-res.me .ax-resrow{background:rgba(44,143,160,.13);border-radius:3px}
  .ax-move{width:14px;text-align:center;font-size:10px;flex:none}
  .ax-move.up{color:var(--dxyou)}
  .ax-move.down{color:#F4B294}
  .ax-guess{width:84px;text-align:right;font-variant-numeric:tabular-nums;flex:none;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ax-off{font-size:11.5px;color:var(--dxm);flex:none}
  .ax-rpts{position:relative;width:76px;height:16px;flex:none;border-radius:2px;
    background:rgba(159,211,212,.1);overflow:hidden}
  .ax-rpts i{position:absolute;inset:0 auto 0 0;background:rgba(44,143,160,.5)}
  .ax-rpts.green i{background:rgba(80,180,120,.55)}
  .ax-rpts.yellow i{background:rgba(227,180,92,.5)}
  .ax-rpts.orange i{background:rgba(224,120,74,.5)}
  .ax-rpts.red i{background:rgba(180,69,60,.5)}
  .ax-rpts b{position:relative;display:block;text-align:center;font-size:10.5px;line-height:16px;
    font-family:var(--display);font-weight:900;color:var(--dxt)}
  .ax-rline{font-size:11.5px;color:var(--dxm);padding:0 4px 6px 46px}
  .ax-fact{margin-top:12px;padding:10px 12px;border-left:2px solid var(--dxgold);
    background:rgba(227,180,92,.07);font-size:12.5px;line-height:1.55;color:var(--dxt);border-radius:0 3px 3px 0}
  .ax-elim{margin-top:12px;padding:9px 12px;text-align:center;border-radius:3px;font-size:13.5px;
    background:rgba(180,69,60,.16);border:1px solid var(--dxthem2);color:#F4B294;
    font-family:var(--display);font-weight:900;letter-spacing:.02em}

  /* ---- podium and verdicts ---- */
  .ax-verdict{padding-bottom:4px}
  .ax-podium{display:flex;justify-content:center;align-items:flex-end;gap:12px;margin:14px 0 6px}
  .ax-pod{opacity:0;animation:axin .5s ease forwards;text-align:center;padding:12px 14px 10px;
    border:1px solid #1E4854;border-radius:4px;background:rgba(9,42,52,.7);min-width:96px}
  .ax-pod.gold{border-color:rgba(227,180,92,.6);background:rgba(227,180,92,.08);
    padding-top:18px;min-width:112px}
  .ax-pi{font-size:26px}
  .ax-pn{font-family:var(--display);font-weight:900;font-size:14px;margin-top:4px;color:var(--dxt);
    max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ax-ps{font-size:11.5px;color:var(--dxm);margin-top:2px;font-variant-numeric:tabular-nums}
  .ax-award{margin:10px auto 2px;max-width:420px;text-align:center;padding:9px 13px;
    border:1px dashed rgba(227,180,92,.5);border-radius:4px;background:rgba(227,180,92,.06);
    font-size:12.5px;color:var(--dxt);line-height:1.5}
  .ax-boardwrap{margin:12px auto 0;max-width:430px}
  .ax-after{margin-top:16px}
  .ax-after .ax-wait{padding-bottom:2px}

  /* ---- the round banner (same manners as the duel's) ---- */
  #axBanner{position:fixed;left:50%;top:26vh;transform:translateX(-50%);z-index:70;
    display:flex;align-items:baseline;gap:12px;padding:12px 26px;border-radius:4px;
    background:rgba(6,34,43,.92);border:1px solid var(--dxyou2);pointer-events:none;
    box-shadow:0 18px 48px rgba(4,18,24,.6);animation:axbanner 1.5s ease forwards}
  #axBanner .axb-r{font-family:var(--display);font-weight:900;font-size:24px;color:#EAF4F2;
    letter-spacing:.04em}
  #axBanner .axb-m{font-family:var(--display);font-weight:900;font-size:14px;color:#E3B45C}
  @keyframes axbanner{0%{opacity:0;transform:translate(-50%,12px)}
    12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}

  /* ============================================================
     THE LAPTOP RULES — the widening.
     The .wrap column is 660px for good phone reasons; on a laptop
     the stages break out of it symmetrically. Negative margins,
     not transforms: the danger shake animates transform, and a
     transformed ancestor would also capture the fixed-position
     toast and banner.
     ============================================================ */
  @media (min-width:1020px){
    .dx-stage, .ax-shell{
      --axw:min(1020px, 94vw);
      width:var(--axw);
      margin-left:calc((100% - var(--axw)) / 2);
    }
    .ax-shell .ax-card{max-width:560px;margin:0 auto}
    .ax-stage{padding:20px 22px 16px}
    /* the game screens earn a real second column */
    .ax-game .ax-cols{grid-template-columns:minmax(0,1fr) 300px;gap:18px}
    .ax-game .ax-side{position:sticky;top:12px}
    /* A DUEL IS NOT A WIDE SCREEN.
       The shell width above exists for the PARTY game screens, which have a
       real second column to put in it — a live scoreboard and a chat panel.
       A duel has neither: it is two players, a clock, one question and one
       input. Given 1020px it became a letterbox band 409px tall, with the two
       names flung 530px apart, the clock stranded in the gap between them,
       the health bars drawn out into thin ribbons and 300px of dead space
       either side of the question. Wide, but not a head-to-head.

       Capped and centred instead, in the same family as the 560px .ax-card
       above — which is what every other screen here already does, so it was
       the duel that was the odd one out rather than this being a new idea.

       :not(.ax-stage) is load-bearing. The party stages carry BOTH classes
       (`dx dx-stage ax-stage ax-game`), so a bare .dx-stage cap would take
       the room away from the very screens the room was meant for. */
    .dx-stage:not(.ax-stage){--axw:660px;width:660px;
      margin-left:calc((100% - 660px) / 2)}
    /* duels: the clash bar can use the room, the prose should not */
    .dx-q{max-width:720px;margin-left:auto;margin-right:auto}
    .ax-q{max-width:none}
    .ax-clockwrap{margin-top:4px}
    .ax-podium{gap:16px}
  }

  /* ---------- reduced motion ----------------------------------------------
     Same rule and same reasoning as the duel sheet above: off by default for
     everything in the ax- namespace, so a party or battle effect added later
     is covered without anybody remembering this block exists. The arena has
     no equivalent of .dx-dmg — nothing here is invisible until it animates —
     so it needs no exceptions. */
  @media (prefers-reduced-motion: reduce){
    [class^="ax-"],[class*=" ax-"]{
      animation:none !important;transition:none !important}
  }