/* The arena (14.1): night glass over a pixel field. Everything is scoped to #arena-dialog so the
   app's themes (bluish, green, pink) can't reach in and repaint it. */
#arena-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;
  --ar-bg:#0b1024;--ar-glass:rgba(14,20,46,.92);--ar-glass2:rgba(22,30,64,.9);--ar-rim:rgba(176,204,255,.2);--ar-ink:#eef3fc;--ar-ink2:#aebbd6;--ar-dim:#7c88a6;--ar-glow:#7aefec;--ar-gold:#ffe08a;
  --ar-top:env(safe-area-inset-top,0px);--ar-bot:env(safe-area-inset-bottom,0px);
  background:var(--ar-bg);color:var(--ar-ink);font-family:systemmono,wispsymbols,'Courier New',monospace;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#arena-dialog[open]{display:block}
#arena-dialog::backdrop{background:#0b1024}
#arena-dialog .ar-shell{position:absolute;inset:0}
#arena-dialog .ar-screen{position:absolute;inset:0;display:flex;flex-direction:column}
#arena-dialog .ar-screen[hidden]{display:none!important}
/* build 239: on a phone too short for a menu, the bottom of it (Quick match, Fight stage N, Start)
   was cut off and couldn't be reached: only the menu itself could scroll, and it was allowed to be as
   tall as the whole screen under a header. Now every screen but the fight scrolls as a whole, and the
   pieces in it keep their size. Pulling down from the top still closes the arena (feel.js). */
#arena-dialog .ar-screen:not(.ar-fight){overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#arena-dialog .ar-screen:not(.ar-fight)>*{flex-shrink:0}
#arena-dialog .ar-screen:not(.ar-fight) .ar-menu{max-height:none;overflow:visible}
#arena-dialog h2,#arena-dialog h3,#arena-dialog p{margin:0}
#arena-dialog button{font:inherit;color:inherit}
#arena-dialog svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- shared pieces ---- */
#arena-dialog .ar-top{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:calc(var(--ar-top) + 16px) 18px 10px}
#arena-dialog .ar-top h2{font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
#arena-dialog .ar-top p{margin-top:4px;color:var(--ar-ink2);font-size:13px;line-height:1.35;max-width:34ch}
#arena-dialog .ar-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:var(--ar-glass);border:1px solid var(--ar-rim);flex:none}
#arena-dialog .ar-icon:active{transform:scale(.94)}
#arena-dialog .ar-menu{position:relative;z-index:2;margin-top:auto;width:100%;max-width:520px;align-self:center;display:flex;flex-direction:column;gap:12px;
  padding:16px 16px calc(var(--ar-bot) + 16px);background:linear-gradient(to bottom,rgba(11,16,36,0),rgba(11,16,36,.9) 22px,var(--ar-bg) 60%);overflow-y:auto;max-height:100%}
#arena-dialog .ar-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#arena-dialog .ar-btn{min-height:48px;padding:10px 14px;border-radius:14px;background:var(--ar-glass2);border:1px solid var(--ar-rim);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center}
#arena-dialog .ar-btn:active{transform:scale(.97)}
#arena-dialog .ar-btn.ar-small{min-height:36px;padding:6px 12px;font-size:12px;border-radius:11px}
#arena-dialog .ar-go{min-height:64px;border-radius:18px;background:var(--ar-glow);color:#0b1024;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 16px;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 8px 28px rgba(122,239,236,.22)}
#arena-dialog .ar-go b{font-size:18px;font-weight:800}
#arena-dialog .ar-go span{font-size:12px;opacity:.75}
#arena-dialog .ar-go:active{transform:scale(.98)}
#arena-dialog .ar-link{background:none;border:0;color:var(--ar-glow);font-size:13px;padding:6px 2px;min-height:32px}
#arena-dialog .ar-top p.ar-climb-best{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;color:var(--ar-ink)}
#arena-dialog .ar-climb-best .ar-link{min-height:28px;padding:2px 0}
#arena-dialog .ar-chip{display:inline-block;font-size:10px;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.08);color:var(--ar-ink2)}
#arena-dialog .ar-bold{color:#f1c593}#arena-dialog .ar-sly{color:#a9c4da}#arena-dialog .ar-calm{color:#d8cc84}
#arena-dialog .ar-toast{position:absolute;left:50%;bottom:calc(var(--ar-bot) + 100px);transform:translate(-50%,14px);opacity:0;pointer-events:none;z-index:40;max-width:calc(100% - 32px);
  padding:10px 16px;border-radius:14px;background:#eef3fc;color:#0b1024;font-size:13px;font-weight:600;transition:opacity .2s,transform .3s cubic-bezier(.2,1.4,.4,1)}
#arena-dialog .ar-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- home: the live field behind the menu ---- */
#arena-dialog .ar-attract{position:absolute;left:0;top:0;image-rendering:pixelated;opacity:.9}
#arena-dialog .ar-home::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(11,16,36,.82),rgba(11,16,36,.15) 26%,rgba(11,16,36,0) 40%)}
#arena-dialog .ar-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#arena-dialog .ar-mode{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px 9px;border-radius:16px;background:var(--ar-glass);border:1px solid var(--ar-rim);min-height:96px}
#arena-dialog .ar-mode b{font-size:14px}
#arena-dialog .ar-mode small{font-size:11px;color:var(--ar-dim)}
#arena-dialog .ar-mode-map{position:relative;width:44px;height:36px;border-radius:6px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);margin-bottom:4px}
#arena-dialog .ar-mode-map i{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:2px}
#arena-dialog .ar-mode[aria-checked="true"]{border-color:var(--ar-glow);background:rgba(122,239,236,.12);box-shadow:0 0 18px rgba(122,239,236,.18)}
#arena-dialog .ar-rule,#arena-dialog .ar-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));padding:4px;border-radius:14px;background:var(--ar-glass);border:1px solid var(--ar-rim)}
#arena-dialog .ar-rule button,#arena-dialog .ar-seg button{min-height:38px;border-radius:10px;font-size:13px;font-weight:600;color:var(--ar-ink2)}
#arena-dialog .ar-rule button[aria-checked="true"],#arena-dialog .ar-seg button[aria-checked="true"]{background:var(--ar-ink);color:#0b1024}
#arena-dialog .ar-rule-line{font-size:12px;color:var(--ar-ink2);margin-top:-4px;padding:0 4px}
#arena-dialog .ar-team{padding:10px;border-radius:16px;background:var(--ar-glass);border:1px solid var(--ar-rim)}
#arena-dialog .ar-team-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ar-ink2);padding:0 4px}
#arena-dialog .ar-team-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#arena-dialog .ar-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 8px;border-radius:12px;background:rgba(255,255,255,.04)}
#arena-dialog .ar-slot canvas{width:56px;height:56px}
#arena-dialog .ar-slot-name{font-size:12px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#arena-dialog .ar-first,#arena-dialog .ar-loan{position:absolute;top:4px;left:5px;font-size:9px;color:var(--ar-glow)}
#arena-dialog .ar-loan{left:auto;right:5px;color:var(--ar-gold)}
#arena-dialog .ar-team-note{font-size:11px;color:var(--ar-dim);padding:6px 4px 0}
#arena-dialog .ar-today{font-size:12px;color:var(--ar-dim);text-align:center}

/* ---- the ladder: a card on home, then its own screen ---- */
#arena-dialog .ar-climb{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;min-height:64px;padding:10px 14px 10px 10px;border-radius:18px;text-align:left;
  background:linear-gradient(100deg,rgba(255,224,138,.1),var(--ar-glass) 45%);border:1px solid rgba(255,224,138,.35)}
#arena-dialog .ar-climb:active{transform:scale(.98)}
#arena-dialog .ar-climb-art{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.05);display:grid;place-items:center}
#arena-dialog .ar-climb-art canvas{width:40px;height:40px}
#arena-dialog .ar-climb-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
#arena-dialog .ar-climb-txt b{font-size:16px;font-weight:800}
#arena-dialog .ar-climb-txt small{font-size:12px;color:var(--ar-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#arena-dialog .ar-climb-n{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
#arena-dialog .ar-climb-n small{font-size:10px;color:var(--ar-dim)}
#arena-dialog .ar-climb-n b{font-size:26px;font-weight:800;color:var(--ar-gold);font-variant-numeric:tabular-nums}
#arena-dialog .ar-climb.boss{border-color:rgba(255,176,112,.7);box-shadow:0 0 22px rgba(255,176,112,.18);animation:ar-boss-card 2.4s ease-in-out infinite}
@keyframes ar-boss-card{50%{box-shadow:0 0 30px rgba(255,176,112,.32)}}
#arena-dialog .ar-climb-screen{background:radial-gradient(120% 60% at 50% 0%,#2a2350,var(--ar-bg) 70%)}
#arena-dialog .ar-path{position:relative;z-index:2;display:flex;align-items:center;gap:0;padding:14px 18px 6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:none}
#arena-dialog .ar-path::-webkit-scrollbar{display:none}
#arena-dialog .ar-node{position:relative;flex:none;width:56px;height:56px;margin:0 9px;border-radius:50%;display:grid;place-items:center;align-content:center;background:var(--ar-glass);border:1.5px solid var(--ar-rim);color:var(--ar-ink)}
#arena-dialog .ar-node::before{content:'';position:absolute;right:100%;top:50%;width:18px;height:2px;background:rgba(176,204,255,.25)}
#arena-dialog .ar-node:first-child::before{display:none}
#arena-dialog .ar-node b{font-size:16px;font-weight:800;line-height:1}
#arena-dialog .ar-node small{font-size:9px;color:var(--ar-glow);line-height:1}
#arena-dialog .ar-node .ar-pips{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);display:flex;gap:2px}
#arena-dialog .ar-node .ar-pips i{width:6px;height:6px;border-radius:2px;background:#2a3054;opacity:1}
#arena-dialog .ar-node .ar-pips i.on{background:var(--ar-gold)}
#arena-dialog .ar-node.locked{opacity:.45}
#arena-dialog .ar-node.locked .ar-pips{display:none}
#arena-dialog .ar-node.now{border-color:var(--ar-glow);box-shadow:0 0 0 3px rgba(122,239,236,.18),0 0 18px rgba(122,239,236,.3)}
#arena-dialog .ar-node.sel{background:var(--ar-ink);color:#0b1024}
#arena-dialog .ar-node.sel small{color:#0b1024}
#arena-dialog .ar-node.ar-boss{width:68px;height:68px;border-color:rgba(255,176,112,.6)}
#arena-dialog .ar-node.ar-boss canvas{width:34px;height:34px;margin-bottom:-2px}
#arena-dialog .ar-node.ar-boss b{font-size:12px}
#arena-dialog .ar-node.ar-boss.sel{background:#ffe0b0}
#arena-dialog .ar-climb-screen .ar-menu{margin-top:0;flex:none}
#arena-dialog .ar-scene-box{flex:1;min-height:70px;display:flex;align-items:flex-end;justify-content:center;padding:0 12px;overflow:hidden}
#arena-dialog .ar-scene{width:100%;max-width:520px;max-height:100%;aspect-ratio:160/96;object-fit:contain;image-rendering:pixelated}
#arena-dialog .ar-stage-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;background:var(--ar-glass);border:1px solid var(--ar-rim)}
#arena-dialog .ar-stage-card.ar-boss{border-color:rgba(255,176,112,.55);background:linear-gradient(180deg,rgba(255,176,112,.1),var(--ar-glass) 60%)}
#arena-dialog .ar-stage-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#arena-dialog .ar-stage-head b{font-size:22px;font-weight:800;letter-spacing:-.01em}
#arena-dialog .ar-stage-head span{font-size:12px;color:var(--ar-ink2)}
#arena-dialog .ar-stage-row{display:flex;flex-direction:column;gap:4px}
#arena-dialog .ar-stage-row>small{font-size:11px;color:var(--ar-dim)}
#arena-dialog .ar-stage-pals{display:flex;flex-wrap:wrap;gap:6px}
#arena-dialog .ar-stage-pal{position:relative;display:grid;place-items:center;padding:2px 4px 12px;border-radius:12px;background:rgba(255,255,255,.04)}
#arena-dialog .ar-stage-pal canvas{width:40px;height:40px}
#arena-dialog .ar-boss .ar-stage-pal canvas{width:72px;height:72px}
#arena-dialog .ar-stage-pal small{position:absolute;bottom:2px;font-size:9px;color:var(--ar-ink2)}
#arena-dialog .ar-stage-pay{font-size:12px;line-height:1.45;color:var(--ar-ink2)}
#arena-dialog .ar-climb-go.boss{background:linear-gradient(180deg,#ffd27a,#ffb070);box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 8px 28px rgba(255,176,112,.3)}
#arena-dialog .ar-climb-go:disabled{opacity:.45;box-shadow:none}
/* results: the stars pop in one at a time */
#arena-dialog .ar-stars{display:flex;justify-content:center;gap:8px;margin:-4px 0 2px}
#arena-dialog .ar-stars i{display:grid;place-items:center;width:52px;height:52px;opacity:0;animation:ar-star-in .5s cubic-bezier(.2,1.6,.4,1) forwards;animation-delay:calc(.35s + var(--k) * .26s)}
#arena-dialog .ar-stars i:nth-child(2){width:62px;height:62px;margin-top:-10px}
#arena-dialog .ar-stars svg{width:100%;height:100%;fill:#2a3054;stroke:#4a5380;stroke-width:1.2}
#arena-dialog .ar-stars i.on svg{fill:var(--ar-gold);stroke:#fff2c0;filter:drop-shadow(0 0 10px rgba(255,224,138,.55))}
@keyframes ar-star-in{0%{opacity:0;transform:scale(.2) rotate(-40deg)}100%{opacity:1;transform:none}}
#arena-dialog .ar-chest{color:#ffb070}

/* ---- friends ---- */
#arena-dialog .ar-friends-screen,#arena-dialog .ar-room,#arena-dialog .ar-done{background:radial-gradient(120% 70% at 50% 0%,#1a2350,var(--ar-bg) 70%)}
#arena-dialog .ar-join{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:16px;background:var(--ar-glass);border:1px solid var(--ar-rim)}
#arena-dialog .ar-join label{font-size:13px;color:var(--ar-ink2)}
#arena-dialog .ar-join div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
#arena-dialog .ar-join input{min-height:52px;border-radius:12px;border:1px solid var(--ar-rim);background:#0b1024;color:var(--ar-ink);font:inherit;font-size:24px;font-weight:700;letter-spacing:.35em;text-align:center;text-transform:uppercase;padding:0 10px}
#arena-dialog .ar-join input:focus{outline:2px solid var(--ar-glow);outline-offset:1px}
/* build 239: the code box took its width from its letters and pushed Join off the right edge; it also
   picked up the light theme's input colours. It fits its row now, and stays dark like the rest of the arena. */
#arena-dialog .ar-join input{width:100%;min-width:0}
html #arena-dialog .ar-join input{background-color:#0b1024!important;color:var(--ar-ink)!important;border:1px solid var(--ar-rim)!important;border-radius:12px!important;box-shadow:none!important}
#arena-dialog .ar-join input::placeholder{color:rgba(200,214,255,.32)}
#arena-dialog .ar-join-msg{font-size:12px;color:var(--ar-gold);min-height:16px}

/* ---- the room ---- */
#arena-dialog .ar-code-box{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;background:var(--ar-glass);border:1px solid var(--ar-rim)}
#arena-dialog .ar-code-tiles{display:flex;justify-content:center;gap:8px}
#arena-dialog .ar-code-tiles span{width:52px;height:60px;display:grid;place-items:center;border-radius:12px;background:#0b1024;border:1px solid rgba(122,239,236,.45);font-size:30px;font-weight:800;color:var(--ar-glow);box-shadow:0 0 18px rgba(122,239,236,.12) inset}
#arena-dialog .ar-room-opts{display:flex;flex-direction:column;gap:8px}
#arena-dialog .ar-room-sum{font-size:13px;color:var(--ar-ink2);text-align:center}
#arena-dialog .ar-seats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#arena-dialog .ar-seat{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:var(--ar-glass);border:1px solid var(--ar-rim);box-shadow:inset 3px 0 0 var(--tc,#7aefec);min-height:58px}
#arena-dialog .ar-seat.me{border-color:rgba(122,239,236,.5)}
#arena-dialog .ar-seat.ar-open{opacity:.75;border-style:dashed}
#arena-dialog .ar-seat-art{width:40px;height:40px;flex:none;border-radius:10px;background:rgba(255,255,255,.05);display:grid;place-items:center}
#arena-dialog .ar-seat-art canvas{width:40px;height:40px}
#arena-dialog .ar-seat-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#arena-dialog .ar-seat-who b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#arena-dialog .ar-seat-who small{font-size:11px;color:var(--ar-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#arena-dialog .ar-small-x{width:36px;height:36px;border-radius:10px}
#arena-dialog .ar-small-x svg{width:16px;height:16px}
#arena-dialog .ar-vs{list-style:none;text-align:center;font-size:11px;color:var(--ar-dim);padding:2px 0}
#arena-dialog .ar-room .ar-menu{margin-top:0;flex:1;background:none}
#arena-dialog .ar-room .ar-start{margin-top:auto}
#arena-dialog .ar-room-status{font-size:13px;color:var(--ar-gold);text-align:center;min-height:18px}

/* ---- the fight ---- */
#arena-dialog .ar-fight{background:#070a18;touch-action:none}
#arena-dialog .ar-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#arena-dialog .ar-field{position:absolute;left:0;top:0;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
#arena-dialog .ar-words{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#arena-dialog .ar-hud{position:absolute;left:0;right:0;top:0;z-index:5;background:linear-gradient(to bottom,rgba(7,10,24,.72),rgba(7,10,24,.38) 70%,rgba(7,10,24,0));padding:calc(var(--ar-top) + 6px) 10px 6px;display:grid;grid-template-columns:44px 1fr 44px;grid-template-rows:auto auto;gap:6px;align-items:center;pointer-events:none}
#arena-dialog .ar-hud>*{pointer-events:auto}
#arena-dialog .ar-quit{grid-column:1;grid-row:1;width:40px;height:36px;border-radius:12px}
#arena-dialog .ar-quit svg{width:18px;height:18px}
#arena-dialog .ar-clock{grid-column:2;grid-row:1;justify-self:center;padding:5px 14px;border-radius:999px;background:var(--ar-glass);border:1px solid var(--ar-rim);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;min-width:74px;text-align:center}
#arena-dialog .ar-clock.late{color:#ffb070;border-color:rgba(255,176,112,.6);box-shadow:0 0 16px rgba(255,140,60,.25)}
#arena-dialog .ar-cards{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:6px}
#arena-dialog .ar-cards[data-n="4"]{grid-template-columns:repeat(4,1fr);gap:4px}
#arena-dialog .ar-card{position:relative;display:flex;align-items:center;gap:6px;padding:5px 7px 6px 5px;border-radius:12px;background:var(--ar-glass);border:1px solid var(--ar-rim);box-shadow:inset 0 2px 0 var(--tc);min-width:0;transition:opacity .3s}
#arena-dialog .ar-card.me{border-color:color-mix(in srgb,var(--tc) 55%,transparent)}
#arena-dialog .ar-card.out{opacity:.45}
#arena-dialog .ar-card-art{width:36px;height:36px;flex:none;display:grid;place-items:center}
#arena-dialog .ar-card-art canvas{width:36px;height:36px}
#arena-dialog .ar-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#arena-dialog .ar-card-pal{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1}
#arena-dialog .ar-card-who{font-size:10px;color:var(--ar-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1}
#arena-dialog .ar-hp{position:relative;display:block;height:6px;border-radius:3px;background:#262a45;overflow:hidden}
#arena-dialog .ar-hp u,#arena-dialog .ar-hp i{position:absolute;inset:0;transform-origin:0 50%;border-radius:3px}
#arena-dialog .ar-hp u{background:#ffffff;opacity:.55;transition:transform .45s ease-out}
#arena-dialog .ar-hp i{background:#8ef0a0;transition:transform .12s ease-out}
#arena-dialog .ar-hp i[data-low="1"]{background:#ffe08a}
#arena-dialog .ar-hp i[data-low="2"]{background:#ff8a7a}
#arena-dialog .ar-pips{display:flex;gap:3px}
#arena-dialog .ar-pips i{width:7px;height:7px;border-radius:2px;background:var(--tc);opacity:.85}
#arena-dialog .ar-pips i.now{box-shadow:0 0 0 1px #fff}
#arena-dialog .ar-pips i.gone{background:#3a3f5c;opacity:1}
#arena-dialog .ar-cards[data-n="4"] .ar-card{flex-direction:column;align-items:stretch;gap:3px;padding:4px 5px 5px}
#arena-dialog .ar-cards[data-n="4"] .ar-card-art{position:absolute;right:3px;top:2px;width:22px;height:22px}
#arena-dialog .ar-cards[data-n="4"] .ar-card-art canvas{width:22px;height:22px}
#arena-dialog .ar-cards[data-n="4"] .ar-card-pal{font-size:10px;padding-right:22px}
#arena-dialog .ar-cards[data-n="4"] .ar-card-who{font-size:9px;padding-right:22px}
#arena-dialog .ar-banner{position:absolute;left:50%;top:44%;z-index:6;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;max-width:calc(100% - 40px);text-align:center;
  padding:10px 18px;border-radius:16px;background:rgba(7,10,24,.82);border:1px solid var(--ar-rim);font-size:16px;font-weight:700;line-height:1.3;transition:opacity .18s,transform .3s cubic-bezier(.2,1.5,.4,1)}
#arena-dialog .ar-banner.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#arena-dialog .ar-banner:is(:empty){display:none}
#arena-dialog .ar-banner.low{top:auto;bottom:calc(var(--ar-bot) + 205px);transform:translate(-50%,0) scale(.9);font-size:14px;font-weight:600;padding:8px 14px}
#arena-dialog .ar-banner.low.on{transform:translate(-50%,0) scale(1)}
#arena-dialog .ar-call{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;padding:5px 11px;border-radius:999px;background:#fff8ec;color:#141026;font-size:14px;font-weight:800;font-style:italic;
  box-shadow:0 0 0 2px var(--tc),0 6px 18px rgba(0,0,0,.35);animation:ar-call 1.5s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes ar-call{0%{opacity:0;transform:translate(-50%,-60%) scale(.6)}12%{opacity:1;transform:translate(-50%,-100%) scale(1.08)}22%{transform:translate(-50%,-100%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-150%) scale(.96)}}
#arena-dialog .ar-say{position:absolute;left:50%;top:calc(var(--ar-top) + 112px + var(--i,0) * 30px);transform:translateX(-50%);white-space:nowrap;padding:5px 11px;border-radius:10px;background:rgba(7,10,24,.78);font-size:12px;color:var(--ar-ink2);animation:ar-say 2.6s ease forwards;transition:top .2s}
@keyframes ar-say{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
/* the pad: the left thumb moves anywhere down here; four buttons sit under the right thumb, in an arc
   round the attack, the way the thumb swings */
#arena-dialog .ar-pad{position:absolute;left:0;right:0;bottom:0;height:calc(200px + var(--ar-bot));z-index:4;pointer-events:none;background:linear-gradient(to top,rgba(7,10,24,.5),rgba(7,10,24,0))}
#arena-dialog .ar-hint{position:absolute;left:20px;right:200px;bottom:calc(var(--ar-bot) + 30px);font-size:12px;line-height:1.35;color:var(--ar-ink2);text-shadow:0 1px 2px rgba(0,0,0,.8);transition:opacity .4s}
#arena-dialog .ar-hint-keys{display:none}
@media (pointer:fine){#arena-dialog .ar-hint-touch{display:none}#arena-dialog .ar-hint-keys{display:inline}#arena-dialog.ar-moved .ar-hint{opacity:.6}}
@media (pointer:coarse){#arena-dialog.ar-moved .ar-hint{opacity:0}}
#arena-dialog .ar-stick{position:fixed;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:2px solid rgba(238,243,252,.35);background:rgba(238,243,252,.06);opacity:0;pointer-events:none;transition:opacity .12s;z-index:7}
#arena-dialog .ar-stick.on{opacity:1}
#arena-dialog .ar-stick i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(238,243,252,.85);box-shadow:0 4px 14px rgba(0,0,0,.35)}
#arena-dialog .ar-btns{position:absolute;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(var(--ar-bot) + 20px);width:168px;height:158px;pointer-events:none;--el:#ffe08a;--el2:#c8b1ff}
#arena-dialog .ar-b{position:absolute;pointer-events:auto;border-radius:50%;display:grid;place-items:center;touch-action:none;padding:0;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--el) 22%,#18214a),#0d1330 75%);border:1.5px solid color-mix(in srgb,var(--el) 45%,rgba(176,204,255,.2));
  box-shadow:0 6px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .07s ease-out,opacity .2s}
#arena-dialog .ar-b-ico{position:relative;z-index:1;display:grid;place-items:center;color:var(--el)}
#arena-dialog .ar-b-ico svg{width:28px;height:28px;stroke-width:2;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--el) 55%,transparent))}
#arena-dialog .ar-b small{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:700;color:var(--ar-ink);text-shadow:0 1px 3px #000,0 0 6px #000;opacity:0;transition:opacity .3s;pointer-events:none}
#arena-dialog.ar-names .ar-b small{opacity:1}
#arena-dialog .ar-b.down{transform:scale(.9)}
#arena-dialog .ar-b.held{opacity:.5}
#arena-dialog .ar-b.nope{animation:ar-nope .3s}
@keyframes ar-nope{25%{translate:-4px 0}75%{translate:4px 0}}
/* attack: the big one, three charges along the bottom of it */
#arena-dialog .ar-attack{right:0;bottom:0;width:86px;height:86px;border-width:2px}
#arena-dialog .ar-attack .ar-b-ico svg{width:36px;height:36px}
#arena-dialog .ar-ammo{position:absolute;left:50%;bottom:11px;transform:translateX(-50%);display:flex;gap:3px;z-index:1}
#arena-dialog .ar-ammo i{position:relative;width:13px;height:5px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
#arena-dialog .ar-ammo i::after{content:'';position:absolute;inset:0;background:color-mix(in srgb,var(--el) 55%,#5a6488);transform-origin:0 50%;transform:scaleX(var(--f,1))}
#arena-dialog .ar-ammo i.full::after{background:var(--el);box-shadow:0 0 6px var(--el)}
/* skill: a sweep while it cools, and the seconds */
#arena-dialog .ar-skill{right:100px;bottom:2px;width:64px;height:64px;overflow:visible}
#arena-dialog .ar-b-cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(5,7,18,.74) calc(var(--c,0) * 360deg),transparent 0);z-index:2;pointer-events:none}
#arena-dialog .ar-skill em{position:absolute;z-index:3;font-style:normal;font-weight:800;font-size:19px;color:#fff;text-shadow:0 1px 3px #000}
#arena-dialog .ar-skill.cool .ar-b-ico{opacity:.45}
/* ultimate: a ring that fills as you fight; gold and breathing when it's ready */
#arena-dialog .ar-ult{right:84px;bottom:86px;width:68px;height:68px}
#arena-dialog .ar-ult small{top:auto;bottom:calc(100% + 5px)}
#arena-dialog .ar-b-ring{position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(var(--ar-gold) calc(var(--m,0) * 360deg),rgba(255,255,255,.12) 0);
  -webkit-mask:radial-gradient(circle,transparent 34px,#000 35px);mask:radial-gradient(circle,transparent 34px,#000 35px);pointer-events:none}
#arena-dialog .ar-ult.ready{background:radial-gradient(circle at 50% 35%,#fff7d6,var(--ar-gold) 55%,#c48f2a);border-color:#fff2c0;box-shadow:0 0 0 2px rgba(255,242,192,.6),0 0 30px rgba(255,224,138,.7);animation:ar-ready 1.1s ease-in-out infinite}
#arena-dialog .ar-ult.ready .ar-b-ico{color:#2a1a08}
#arena-dialog .ar-ult.ready .ar-b-ico svg{filter:none}
#arena-dialog .ar-ult.ready .ar-b-ring{opacity:0}
#arena-dialog .ar-ult.ready small{color:var(--ar-gold)}
@keyframes ar-ready{50%{box-shadow:0 0 0 4px rgba(255,242,192,.35),0 0 44px rgba(255,224,138,.9);transform:scale(1.05)}}
/* dash */
#arena-dialog .ar-dash{right:12px;bottom:100px;width:54px;height:54px;overflow:hidden}
#arena-dialog .ar-dash .ar-b-ico{color:var(--ar-ink)}
#arena-dialog .ar-dash .ar-b-ico svg{width:24px;height:24px;filter:none}
#arena-dialog .ar-dash small{display:none}
/* the aim: a ring round the button you're dragging, the knob under your thumb */
#arena-dialog .ar-aim{position:fixed;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:radial-gradient(circle,rgba(255,255,255,.02),rgba(255,255,255,.09));opacity:0;pointer-events:none;z-index:7;transition:opacity .1s,border-color .1s}
#arena-dialog .ar-aim.on{opacity:1}
#arena-dialog .ar-aim i{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 3px 12px rgba(0,0,0,.4)}
#arena-dialog .ar-aim span{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#ff8a7a;color:#1a0d10;opacity:0;transition:opacity .1s}
#arena-dialog .ar-aim.cancel{border-color:#ff8a7a}
#arena-dialog .ar-aim.cancel span{opacity:1}
#arena-dialog[data-out="true"] .ar-btns,#arena-dialog[data-out="true"] .ar-hint{opacity:0;pointer-events:none}
#arena-dialog[data-out="true"] .ar-b{pointer-events:none}
/* an ultimate's cut-in: a band of its element across the screen, the pal, the move's name */
#arena-dialog .ar-cut{position:absolute;left:0;right:0;top:30%;height:124px;z-index:3;pointer-events:none;--c1:#ffe08a;--c2:#c8b1ff}
#arena-dialog .ar-cut::before{content:'';position:absolute;left:-12%;right:-12%;top:22px;bottom:16px;background:linear-gradient(100deg,var(--c1) 10%,var(--c2) 90%);transform:skewY(-5deg);
  box-shadow:0 0 0 3px #0b1024,0 0 0 5px color-mix(in srgb,var(--c1) 60%,#fff),0 10px 40px rgba(0,0,0,.45);animation:ar-band .95s cubic-bezier(.2,.9,.25,1) forwards}
#arena-dialog .ar-cut::after{content:'';position:absolute;left:-12%;right:-12%;top:22px;bottom:16px;transform:skewY(-5deg);opacity:.22;
  background:repeating-linear-gradient(90deg,#0b1024 0 2px,transparent 2px 26px);animation:ar-band .95s cubic-bezier(.2,.9,.25,1) forwards,ar-streak .3s linear infinite}
#arena-dialog .ar-cut canvas{position:absolute;left:5%;bottom:4px;width:116px;height:116px;z-index:1;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 #0b1024);animation:ar-cut-pal .95s cubic-bezier(.2,.9,.25,1) forwards}
#arena-dialog .ar-cut b{position:absolute;left:calc(5% + 128px);right:10px;top:40px;z-index:1;font-size:30px;font-weight:800;font-style:italic;letter-spacing:-.01em;line-height:1;color:#0b1024;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:ar-cut-name .95s cubic-bezier(.2,.9,.25,1) forwards}
#arena-dialog .ar-cut small{position:absolute;left:calc(5% + 130px);top:76px;z-index:1;font-size:13px;font-weight:700;color:#0b1024;opacity:.8;animation:ar-cut-name .95s cubic-bezier(.2,.9,.25,1) forwards}
#arena-dialog .ar-cut.them{top:calc(var(--ar-top) + 118px);height:72px}
#arena-dialog .ar-cut.them::before,#arena-dialog .ar-cut.them::after{top:12px;bottom:10px;left:-12%;right:30%}
#arena-dialog .ar-cut.them canvas{width:64px;height:64px;bottom:2px;left:4%}
#arena-dialog .ar-cut.them b{left:calc(4% + 72px);top:22px;font-size:19px;right:34%}
#arena-dialog .ar-cut.them small{left:calc(4% + 73px);top:44px;font-size:11px}
@media (min-width:700px){#arena-dialog .ar-cut::before,#arena-dialog .ar-cut::after{transform:skewY(-2deg)}#arena-dialog .ar-cut.me{left:8%;right:8%}}
@keyframes ar-band{0%{translate:-115% 0}15%{translate:0 0}80%{translate:0 0;opacity:1}100%{translate:115% 0;opacity:.6}}
@keyframes ar-streak{to{background-position:26px 0}}
@keyframes ar-cut-pal{0%{translate:-170px 0;scale:.8;opacity:0}20%{translate:0 0;scale:1.1;opacity:1}30%{scale:1}80%{translate:12px 0;opacity:1}100%{translate:220px 0;opacity:0}}
@keyframes ar-cut-name{0%{translate:70px 0;opacity:0}22%{translate:0 0;opacity:1}80%{translate:-6px 0;opacity:1}100%{translate:-90px 0;opacity:0}}

/* ---- results ---- */
#arena-dialog .ar-done{align-items:center;justify-content:flex-start;padding:calc(var(--ar-top) + 16px) 16px calc(var(--ar-bot) + 16px)}
#arena-dialog .ar-done-card{width:100%;max-width:440px;display:flex;flex-direction:column;gap:12px;margin-block:auto}   /* centred when it fits, scrolls from the top when it doesn't */
#arena-dialog .ar-place{text-align:center;font-size:13px;color:var(--ar-ink2)}
#arena-dialog .ar-verdict{text-align:center;font-size:36px;font-weight:800;letter-spacing:-.02em}
#arena-dialog[data-result="win"] .ar-verdict{color:var(--ar-gold);text-shadow:0 0 30px rgba(255,224,138,.35)}
#arena-dialog .ar-standings{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#arena-dialog .ar-standings li{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:8px;padding:8px 10px;border-radius:14px;background:var(--ar-glass);border:1px solid var(--ar-rim);box-shadow:inset 3px 0 0 var(--tc)}
#arena-dialog .ar-standings li.me{border-color:rgba(122,239,236,.5)}
#arena-dialog .ar-st-place{grid-row:1/3;align-self:center;font-size:15px;font-weight:800;color:var(--ar-ink2)}
#arena-dialog .ar-standings b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#arena-dialog .ar-st-pals{display:flex;gap:2px}
#arena-dialog .ar-st-pals canvas{width:32px;height:32px}
#arena-dialog .ar-pay{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
#arena-dialog .ar-pay span{padding:6px 12px;border-radius:999px;background:var(--ar-glass2);border:1px solid var(--ar-rim);font-size:14px;font-weight:700}
#arena-dialog .ar-dust{color:#a9c4da}#arena-dialog .ar-energy{color:var(--ar-gold)}#arena-dialog .ar-energy.dim{color:var(--ar-dim);font-weight:500;font-size:12px}

/* ---- the team sheet ---- */
#arena-dialog .ar-sheet{position:absolute;inset:0;z-index:30;background:rgba(5,7,18,.7);display:flex;align-items:flex-end;justify-content:center}
#arena-dialog .ar-sheet-card{width:100%;max-width:560px;max-height:88%;display:flex;flex-direction:column;gap:10px;padding:16px 14px calc(var(--ar-bot) + 14px);border-radius:22px 22px 0 0;background:#10173a;border:1px solid var(--ar-rim);border-bottom:0}
#arena-dialog .ar-sheet-card header{display:grid;grid-template-columns:1fr auto;gap:2px 10px}
#arena-dialog .ar-sheet-card h3{font-size:18px}
#arena-dialog .ar-sheet-card header p{grid-column:1;font-size:12px;color:var(--ar-ink2)}
#arena-dialog .ar-sheet-card header .ar-icon{grid-column:2;grid-row:1/3}
#arena-dialog .ar-picked{display:flex;gap:8px;justify-content:center}
#arena-dialog .ar-pick-slot{width:52px;height:52px;border-radius:12px;border:1px dashed var(--ar-rim);display:grid;place-items:center;color:var(--ar-dim);font-size:14px}
#arena-dialog .ar-pick-slot.on{border-style:solid;border-color:rgba(122,239,236,.5);background:rgba(122,239,236,.08)}
#arena-dialog .ar-pick-slot canvas{width:40px;height:40px}
#arena-dialog .ar-tools .pick-tools{margin:0}
#arena-dialog .ar-tools input,#arena-dialog .ar-tools select{background:#0b1024;color:var(--ar-ink);border:1px solid var(--ar-rim);border-radius:10px}
#arena-dialog .ar-grid{flex:1;min-height:160px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;align-content:start;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#arena-dialog .ar-pal{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid transparent;min-height:90px}
#arena-dialog .ar-pal canvas{width:48px;height:48px}
#arena-dialog .ar-pal span{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#arena-dialog .ar-pal small{font-size:10px}
#arena-dialog .ar-pal.on{border-color:var(--ar-glow);background:rgba(122,239,236,.1)}
#arena-dialog .ar-pal em{position:absolute;top:4px;left:6px;font-style:normal;font-size:11px;font-weight:800;color:#0b1024;background:var(--ar-glow);width:18px;height:18px;border-radius:6px;display:grid;place-items:center}

@media (min-width:700px){
  #arena-dialog .ar-top{padding-left:28px;padding-right:28px}
  #arena-dialog .ar-cards{max-width:640px;justify-self:center;width:100%}
}
@media (prefers-reduced-motion:reduce){
  #arena-dialog *{animation:none!important;transition:none!important}
  #arena-dialog .ar-call{opacity:1;transform:translate(-50%,-100%)}
  #arena-dialog .ar-stars i{opacity:1}
}
html.reduced-motion #arena-dialog *{animation:none!important;transition:none!important}
html.reduced-motion #arena-dialog .ar-stars i{opacity:1}

/* build 239: on the ladder the Fight button sticks to the bottom of the screen while you scroll */
#arena-dialog .ar-climb-go{position:sticky;bottom:calc(var(--ar-bot) + 10px);z-index:3;box-shadow:0 -6px 18px rgba(11,16,36,.85),0 10px 24px rgba(0,0,0,.35)}