/* assets/duel/duel-select.css: the Duel Arena's way in (duel_select.js; owner: the select screen), 24 Oct 2026. */
/* (27 Oct 2026, round 7, Chris: "I want the interface, I want the UI, I want the login screen to be perfect ... the gameplay should feel like
   the game itself") the game's own way in, drawn in CSS: framed panels with a gold rim and corner studs, red and gold buttons, Cinzel for
   names and actions, the class colour on emblems and class names. Four screens (dx-login, dx-chars, dx-create, dx-fight) over the arena:
   its picture at first, the yard itself once your fighter is drawn in 3D (dx-3d, duel_selstage.js). The VS, the friend's lobby, your bars
   and the spellbook keep their own rules further down. */
.dl-on-setup,.dl-on-load,.dl-on-vs{background:radial-gradient(ellipse 80% 70% at 50% 42%,rgba(20,14,24,0),rgba(6,5,7,.7) 100%),linear-gradient(rgba(10,8,12,.5),rgba(8,6,5,.9) 78%),url(/assets/pick/look/arena_wide.webp) 50% 62%/cover no-repeat,#0d0b09}
/* (the 3D figure drawn: the yard's own arena behind the panels, under a soft vignette that keeps the words on the edges readable) */
.dl-on-setup.dx-3d{background:radial-gradient(ellipse 62% 78% at 50% 46%,transparent 46%,rgba(5,4,3,.62) 100%),linear-gradient(rgba(5,4,3,.35),transparent 18%,transparent 70%,rgba(5,4,3,.72))}
.dl-on-load{display:grid;place-items:center}
.dl.dx-fit{height:var(--dx-h);min-height:0}   /* (a phone: the arena is as tall as the screen, so the screen's button is never under the fold) */
.dx{position:absolute;inset:0;box-sizing:border-box;pointer-events:none;color:#e9e3d6}
.dx > *{pointer-events:auto}
.dx .dx-fig-area,.dx .dx-plate{pointer-events:none}   /* (a drag over the figure reaches the yard, which turns it, as the game's screens do) */

/* ---- the game's look: a panel, a heading, a button, a field ---- */
.dx-panel{position:relative;box-sizing:border-box;background:linear-gradient(180deg,rgba(26,20,12,.93),rgba(9,7,5,.93)) padding-box,linear-gradient(160deg,#f6dc8a,#9a7429 22%,#e9c86b 44%,#6d4c17 70%,#d7b05a) border-box;border:2px solid transparent;border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.85),inset 0 2px 0 1px rgba(255,220,150,.06),0 0 0 1px rgba(0,0,0,.75),0 10px 28px rgba(0,0,0,.55)}
.dx-panel::before,.dx-panel::after{content:"";position:absolute;top:-6px;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#fff4c8,#d0a040 45%,#5c4012 90%);box-shadow:0 0 0 1px #000,0 1px 3px rgba(0,0,0,.7);pointer-events:none}
.dx-panel::before{left:-6px}.dx-panel::after{right:-6px}
.dx-ph2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:700 14px/1.2 Cinzel,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:#ffd100;text-shadow:0 1px 0 #000,0 0 10px rgba(255,170,40,.25);white-space:nowrap}
.dx-ph2::before,.dx-ph2::after{content:"";flex:1 1 0;height:1px;background:linear-gradient(90deg,transparent,rgba(214,176,90,.85))}
.dx-ph2::after{background:linear-gradient(90deg,rgba(214,176,90,.85),transparent)}
.dl-ui .dx-btn,.dl-ui .dx-lobby button,.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ok{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:44px;padding:0 18px;font:700 14px/1.05 Cinzel,Georgia,serif;letter-spacing:.05em;color:#ffd100;text-decoration:none;text-shadow:0 1px 0 #000,0 0 6px rgba(0,0,0,.7);white-space:nowrap;
  background:linear-gradient(180deg,#bd2c20 0%,#83150f 47%,#5f0c08 53%,#460709 100%) padding-box,linear-gradient(180deg,#f8e08f,#a9822f 45%,#6e4f18 56%,#d9b75e) border-box;border:2px solid transparent;border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,196,150,.5),inset 0 -3px 8px rgba(0,0,0,.45),0 0 0 1px #000,0 3px 8px rgba(0,0,0,.55);cursor:pointer;transition:filter .12s,box-shadow .12s,transform .06s}
.dl-ui .dx-btn:hover,.dl-ui .dx-lobby button:hover,.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ok:hover{filter:brightness(1.16) saturate(1.05);box-shadow:inset 0 1px 0 rgba(255,210,170,.6),inset 0 -3px 8px rgba(0,0,0,.4),0 0 0 1px #000,0 3px 8px rgba(0,0,0,.55),0 0 16px rgba(255,120,40,.35)}
.dl-ui .dx-btn:active,.dl-ui .dx-lobby button:active{transform:translateY(1px);filter:brightness(.9)}
.dl-ui .dx-btn:disabled{filter:grayscale(1) brightness(.55);cursor:default;transform:none}
.dl-ui .dx-btn:focus-visible,.dl-ui .dx-panel button:focus-visible,.dl-ui .dx-in:focus-visible{outline:2px solid #ffd100;outline-offset:3px}
.dl-ui .dx-btn-big{min-height:58px;padding:0 46px;font-size:21px;letter-spacing:.1em;text-transform:uppercase}
.dl-ui .dx-btn-big.dx-long{padding:0 24px;font-size:17px;letter-spacing:.05em}
.dl-ui .dx-btn-sm{min-height:40px;padding:0 14px;font-size:13px}
@media (pointer:coarse){.dl-ui .dx-btn-sm{min-height:44px}}
.dl-ui .dx-in{display:block;width:100%;box-sizing:border-box;min-height:48px;padding:0 14px;font:600 19px/1 'Open Sans',sans-serif;letter-spacing:.03em;text-align:center;color:#fff;background:linear-gradient(#030202,#0d0a07);border:1px solid #8a6c30;border-radius:4px;box-shadow:inset 0 2px 7px rgba(0,0,0,.95),0 0 0 1px #000}
.dl-ui .dx-in:focus{outline:none;border-color:#ffd100;box-shadow:inset 0 2px 7px rgba(0,0,0,.95),0 0 0 1px #000,0 0 14px rgba(255,209,0,.35)}
.dx-in::placeholder{color:#6f6556;font-weight:400}
/* an emblem: a class's sign in its colour on a dark medallion in a gold ring */
.dx-ci{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--cc,#e9e3d6);background:radial-gradient(circle at 50% 36%,#30261a,#0b0806 76%);box-shadow:0 0 0 1px #000,0 0 0 3px #8c6c2c,0 0 0 4px #000,inset 0 0 8px rgba(0,0,0,.85);transition:box-shadow .15s}
.dx-ci svg{display:block;width:58%;height:58%;filter:drop-shadow(0 1px 1px #000)}
.dx-err{margin:0;text-align:center}
.dx-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 8px}
.dl-ui .dx-row button{padding:0 12px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(201,162,74,.35);border-radius:4px}
.dl-ui .dx-row button:hover{box-shadow:inset 0 0 0 1px #c9a24a;color:#fff}
.dl-ui .dx-row button[aria-checked=true]{color:#ffd100;background:linear-gradient(rgba(255,200,60,.2),rgba(255,180,40,.06));box-shadow:inset 0 0 0 1px #e8c062,0 0 10px rgba(255,190,60,.2)}
.dx-note{margin:2px 0 8px;text-align:center;font-size:13px;color:#b8ad98}.dx-note b{color:#e9e3d6}
.dx-lbl{margin:8px 0 6px;text-align:center;font:700 12px/1.2 Cinzel,Georgia,serif;letter-spacing:.1em;text-transform:uppercase;color:#a99d86}
.dx-ph{white-space:nowrap}   /* (a plate's facts wrap only between them, at the dots) */
/* the name over the figure, as the game shows the chosen character's */
.dx-plate{text-align:center;padding:2px 0 0}
.dx-plate b{display:block;font:700 clamp(22px,2.5vw,34px)/1.1 Cinzel,Georgia,serif;letter-spacing:.03em;color:#ffd100;text-shadow:0 2px 0 #2b1d05,0 3px 14px #000}
.dx-plate small{display:block;margin-top:4px;font-size:14px;color:#efe7d6;text-shadow:0 1px 4px #000,0 0 10px #000}

/* ---- the figure: a still at once (a slide in, its pedestal under it), the yard's 3D figure once it is drawn ---- */
.dx-fig-area{position:relative;min-width:0;min-height:0}
.dx-fig{position:absolute;inset:0}
.dx-fig::after{content:"";position:absolute;left:50%;bottom:-1%;width:min(64%,300px);aspect-ratio:4/1;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,214,140,.32),rgba(255,170,70,.1) 62%,transparent 74%),radial-gradient(closest-side,transparent 84%,rgba(232,192,98,.6) 89%,rgba(232,192,98,.2) 93%,transparent 97%)}
.dx-still{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;object-position:50% 100%;background:50% 100%/contain no-repeat;filter:drop-shadow(0 10px 28px rgba(0,0,0,.55));animation:dx-in .32s cubic-bezier(.2,.8,.2,1) both}
.dx-still.dx-r{animation-name:dx-in-r}
.dx-still.dx-out{animation:dx-out .22s ease-in both}
.dx-3d .dx-fig::after{display:none}
.dx-3d .dx-fig .dx-still{animation:none;opacity:0;transition:opacity .45s}
.dx-dum .dx-still{top:12%;height:88%}   /* (the training dummy stands a little smaller than a fighter, as it does beside one in the yard) */
@keyframes dx-in{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes dx-in-r{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes dx-out{to{opacity:0;transform:scale(.97)}}
.dx-q{display:none;position:absolute;left:0;right:0;top:34%;z-index:2;text-align:center;font:900 clamp(64px,9vw,140px)/1 Cinzel,Georgia,serif;color:rgba(233,227,214,.5);text-shadow:0 0 30px rgba(0,0,0,.9)}
.dx-sil .dx-q{display:block}
.dx-sil .dx-still{filter:brightness(0) drop-shadow(0 0 1px rgba(233,227,214,.55)) drop-shadow(0 0 18px rgba(233,227,214,.14));animation:none}
/* the lit pedestal under the 3D figure's feet (duel_selstage.js places it from the yard's own box of the figure): a pool of warm light and a gold ring */
/* (27 Oct 2026, round 7 review) the 3D figure's own box in the stage: the late figure is freed from here, never from the stage box */
.dx-selhost{position:absolute;inset:0}
/* (30 Oct 2026, Chris: "when you click like arena pvp or training dummy from this screen it hitches to a different screen") the move from
   home to your fighter and back is one: home's column fades and lifts away, the next screen's panels fade and rise in (duel_select.js
   move), and the arena's picture fades off the 3D arena drawn behind it (the curtain) while the camera glides in (duel_selstage.js
   reveal). The figure mounted behind home is unseen (dx-selpre) and then parked off the screen, so the yard draws nothing (dx-selpark) */
.dx-selpre{opacity:0}
.dx-selpark{transform:translateX(-400vw)}
.dx-curtain{position:absolute;inset:0;z-index:0;pointer-events:none}
.dl-ui .dx{transition:opacity .3s ease-out}
.dl-ui .dx .dx-panel,.dl-ui .dx .dx-plate,.dl-ui .dx .dx-cs-side,.dl-ui .dx .dx-lg-head,.dl-ui .dx .dx-lg-box,.dl-ui .dx .dx-top-slot{transition:translate .36s cubic-bezier(.2,.7,.2,1)}
.dl-ui .dx.dx-in,.dl-ui .dx.dx-out{opacity:0}
.dl-ui .dx.dx-in .dx-panel,.dl-ui .dx.dx-in .dx-plate,.dl-ui .dx.dx-in .dx-cs-side,.dl-ui .dx.dx-in .dx-lg-head,.dl-ui .dx.dx-in .dx-lg-box,.dl-ui .dx.dx-in .dx-top-slot{translate:0 14px}
.dl-ui .dx.dx-out{transition:opacity .24s ease-in}
.dl-ui .dx.dx-out *{pointer-events:none!important}
.dl-ui .dx.dx-out .dx-lg-head,.dl-ui .dx.dx-out .dx-lg-box,.dl-ui .dx.dx-out .dx-top-slot,.dl-ui .dx.dx-out .dx-panel,.dl-ui .dx.dx-out .dx-plate,.dl-ui .dx.dx-out .dx-cs-side{translate:0 -16px;transition:translate .24s ease-in}
@media (prefers-reduced-motion:reduce){.dl-ui .dx .dx-panel,.dl-ui .dx .dx-plate,.dl-ui .dx .dx-cs-side,.dl-ui .dx .dx-lg-head,.dl-ui .dx .dx-lg-box,.dl-ui .dx .dx-top-slot{transition:none!important;translate:none!important}}
.dx-ped{position:absolute;z-index:0;left:0;top:0;width:0;height:0;border-radius:50%;opacity:0;pointer-events:none;transition:opacity .5s;mix-blend-mode:screen;
  background:radial-gradient(ellipse 50% 50% at 50% 55%,rgba(255,214,140,.34),rgba(255,160,60,.1) 62%,transparent 74%),radial-gradient(closest-side,transparent 84%,rgba(240,200,110,.55) 89%,rgba(240,200,110,.18) 93%,transparent 97%)}

/* ---- Login: the crest and the arena's name, one framed panel with your name and Enter ---- */
.dx-login{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:18px 16px 60px;text-align:center}
.dx-lg-head{display:flex;flex-direction:column;align-items:center}
.dx-crest{width:94px;height:110px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(255,160,50,.2));animation:dx-crest .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes dx-crest{from{opacity:0;transform:translateY(-10px) scale(.94)}to{opacity:1;transform:none}}
.dx-title{margin:10px 0 0;font:900 52px/1 Cinzel,Georgia,serif;letter-spacing:.05em}
.dx-title small{display:block;margin:0 0 8px;font:700 14px/1 Cinzel,Georgia,serif;letter-spacing:.34em;text-transform:uppercase;color:#e8d6a8;text-shadow:0 1px 0 #000,0 0 10px #000}
.dx-title span{display:block;color:#ffd100;background:linear-gradient(#fff6c8 8%,#ffd34a 42%,#d79a1c 62%,#ffe07a 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 #3a2706) drop-shadow(0 5px 14px rgba(0,0,0,.9))}
.dx-lg-tag{margin:10px 0 0;font-size:15px;color:#e2d8c4;text-shadow:0 1px 4px #000}
.dx-lg-box{display:flex;flex-direction:column;gap:8px;width:min(380px,100%);padding:20px 22px 22px}
.dx-lg-l{font:700 13px/1.2 Cinzel,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:#ffd100}
.dx-lg-hint{margin:0;font-size:12px;line-height:1.4;color:#a99d86}
.dx-lg-ch{margin:0 0 4px;font-size:14px;line-height:1.4;color:#e9e3d6}
.dl-ui .dx-lg-box .dx-btn-big{width:100%;margin-top:8px}
.dx-lg-foot{position:absolute;left:14px;right:14px;bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.dx-lg-fine{font-size:11px;color:#8f8573;text-shadow:0 1px 3px #000}
.dx-lg-links{display:flex;gap:8px;margin-left:auto}

/* ---- Fighters: the fight at the top left, your bars under it, the figure in the middle with its name and Enter Arena, the list on the right ---- */
.dx-chars{display:grid;grid-template-columns:minmax(232px,292px) minmax(0,1fr) minmax(252px,312px);grid-template-rows:auto minmax(0,1fr) auto auto;
  grid-template-areas:"realm fig list" "bars fig list" "bars plate list" "bars foot side";gap:12px 24px;padding:16px 20px 14px}
.dx-realm{grid-area:realm;align-self:start;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center;padding:10px 10px 10px 14px}
.dx-rl-k{grid-column:1;font:700 11px/1.2 Cinzel,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:#a99d86}
.dx-realm b{grid-column:1;font:700 17px/1.15 Cinzel,Georgia,serif;color:#ffd100;overflow-wrap:anywhere}
.dx-realm small{grid-column:1;font-size:12px;line-height:1.35;color:#cfc6b4}
.dl-ui .dx-realm .dx-btn{grid-column:2;grid-row:1 / 4}
.dx-chars .dx-fig-area{grid-area:fig}
.dx-chars .dx-plate{grid-area:plate}
.dx-chars .dx-foot{grid-area:foot;display:flex;flex-direction:column;align-items:center;gap:6px}
.dl-ui .dx-chars .dx-btn-big{min-width:min(300px,100%)}
.dx-cs-side{grid-area:side;display:flex;align-items:flex-end;justify-content:flex-end;gap:8px}
.dx-cs-list{grid-area:list;align-self:start;display:flex;flex-direction:column;min-height:0;max-height:100%;padding:14px 10px 12px}
.dx-cl{flex:0 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:2px 2px 4px;scrollbar-width:thin}
.dl-ui .dx-cs-new{margin-top:10px;width:100%}
.dl-ui .dx-char{display:flex;align-items:center;gap:12px;flex:none;width:100%;min-height:64px;padding:6px 10px 6px 8px;text-align:left;background:linear-gradient(90deg,rgba(255,255,255,.035),transparent);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(201,162,74,.16);transition:background .12s,box-shadow .12s}
.dl-ui .dx-char:hover{background:linear-gradient(90deg,rgba(255,209,0,.09),transparent 85%);box-shadow:inset 0 0 0 1px rgba(201,162,74,.5)}
.dl-ui .dx-char[aria-checked=true]{background:linear-gradient(90deg,rgba(255,196,60,.28),rgba(255,176,40,.07) 72%,transparent);box-shadow:inset 0 0 0 1px #e8c062,inset 3px 0 0 #ffd100,0 0 14px rgba(255,190,60,.16)}
.dx-char[aria-checked=true] .dx-ci{box-shadow:0 0 0 1px #000,0 0 0 3px #ffd100,0 0 0 4px #000,0 0 14px var(--cc),inset 0 0 8px rgba(0,0,0,.85)}
.dx-ct{display:flex;flex-direction:column;gap:2px;min-width:0}
.dx-ct b{font:700 15px/1.15 Cinzel,Georgia,serif;color:#ffd100;text-shadow:0 1px 0 #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-ct small{font:400 12.5px/1.3 'Open Sans',sans-serif;color:#efe7d6;letter-spacing:0}.dx-ct small i{font-style:normal;color:var(--cc)}
.dx-ct .dx-cz{color:#a99d86}
/* (27 Oct 2026, round 7 review) a row leads with its spec and class, the class in its own colour */
.dx-ct b i{font-style:normal;color:var(--cc)}
.dx-cs-bars{grid-area:bars;align-self:end;padding:12px}
.dx-cs-bars .dx-bars{margin:0;width:100%}
/* (the panel is narrower than the old matchup's column: the Spellbook and Key bindings buttons one under the other, each one line) */
.dx-cs-bars .dx-bars-do{grid-template-columns:1fr;gap:6px;margin-top:8px}
.dl-ui .dx-cs-bars .dx-bdo{min-height:46px;padding:4px 10px 4px 6px}
.dx-cs-bars .dx-bdo-i{width:32px;height:32px}
.dx-cs-bars .dx-bdo-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dx-cs-bars .dx-bdo-t small{display:none}
/* the question before a delete, over the screen */
.dx-dlg{position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:16px;background:rgba(4,3,2,.6)}
.dx-dlg-in{width:min(420px,100%);padding:20px 20px 18px;text-align:center}
.dx-dlg-in h2{margin:0 0 8px;font:700 20px/1.2 Cinzel,Georgia,serif;color:#ffd100}
.dx-dlg-in p{margin:0 0 16px;font-size:14px;line-height:1.45;color:#e9e3d6}
.dx-dlg-b{display:flex;justify-content:center;gap:10px}.dl-ui .dx-dlg-b .dx-btn{min-width:120px}

/* ---- Create: the races in their two columns on the left, the classes and the spec on the right, the figure between ---- */
.dx-create{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr) minmax(250px,300px);grid-template-rows:minmax(0,1fr) auto auto;
  grid-template-areas:"race fig class" "race plate class" "race foot class";gap:10px 24px;padding:16px 20px 14px}
.dx-cr-race{grid-area:race;align-self:start;max-height:100%;overflow-y:auto;padding:14px 12px 10px;scrollbar-width:thin}
.dx-cr-class{grid-area:class;align-self:start;max-height:100%;overflow-y:auto;padding:14px 12px 10px;scrollbar-width:thin}
.dx-create .dx-fig-area{grid-area:fig}
.dx-create .dx-plate{grid-area:plate}
.dx-create .dx-foot{grid-area:foot}
.dx-sides{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}
.dx-side{display:flex;flex-direction:column;gap:5px;min-width:0}
.dx-side p{margin:0 0 2px;text-align:center;font:700 12px/1.2 Cinzel,Georgia,serif;letter-spacing:.12em;text-transform:uppercase}
.dx-side-alliance p{color:#7fb0ff}.dx-side-horde p{color:#ff7262}
.dl-ui .dx-race{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:52px;padding:3px 6px 3px 3px;text-align:left;background:rgba(0,0,0,.38);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(201,162,74,.18)}
.dx-race img{flex:none;width:44px;height:44px;border-radius:3px;object-fit:cover;background:#120e0a;box-shadow:0 0 0 1px #000,0 0 0 2px #7a5f2b}
.dx-race small{min-width:0;font:700 11.5px/1.1 Cinzel,Georgia,serif;color:#e9e3d6;overflow-wrap:normal;hyphens:none}
.dl-ui .dx-race:hover{box-shadow:inset 0 0 0 1px #c9a24a}
.dl-ui .dx-race[aria-checked=true]{background:linear-gradient(90deg,rgba(255,196,60,.26),rgba(255,176,40,.05));box-shadow:inset 0 0 0 1px #e8c062}
.dx-race[aria-checked=true] img{box-shadow:0 0 0 1px #000,0 0 0 2px #ffd100,0 0 12px rgba(255,200,80,.5)}
.dx-race[aria-checked=true] small{color:#ffd100}
.dx-na{opacity:.6}.dx-na:hover,.dx-na:focus-visible{opacity:.75}
.dx-sexr{margin:0}
.dl-ui .dx-sex{display:inline-flex;align-items:center;gap:6px;flex:1 1 0}
.dx-classes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 4px}
.dl-ui .dx-cls{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:86px;padding:6px 0 4px;background:none;box-shadow:none;border-radius:6px}
.dx-cls .dx-ci{width:50px;height:50px}
.dx-cls small{font:700 12px/1.1 Cinzel,Georgia,serif;color:var(--cc);text-shadow:0 1px 2px #000}
.dl-ui .dx-cls:hover{background:rgba(255,209,0,.06);box-shadow:none}
.dx-cls:hover .dx-ci{box-shadow:0 0 0 1px #000,0 0 0 3px #c9a24a,0 0 0 4px #000,inset 0 0 8px rgba(0,0,0,.85)}
.dl-ui .dx-cls[aria-checked=true]{background:radial-gradient(ellipse at 50% 34%,rgba(255,200,80,.16),transparent 70%);box-shadow:none}
.dx-cls[aria-checked=true] .dx-ci{box-shadow:0 0 0 1px #000,0 0 0 3px #ffd100,0 0 0 4px #000,0 0 18px var(--cc),inset 0 0 8px rgba(0,0,0,.85)}
.dx-specr{margin:0}.dx-specr button{flex:1 1 auto}
.dx-go-row{display:flex;align-items:center;justify-content:center;gap:10px}
.dl-ui .dx-go-row .dx-btn:not(.dx-btn-big){min-height:52px}
.dl-ui .dx-rand svg{flex:none}

/* ---- Fight: the game's realm list, here the kinds of fight, each with its tag; the chosen one's choices under them ---- */
.dx-fight{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,560px);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"fig fp" "plate foot";gap:12px 28px;padding:16px 24px 14px}
.dx-fight .dx-fig-area{grid-area:fig}
.dx-fight .dx-plate{grid-area:plate;align-self:end}
.dx-fp{grid-area:fp;align-self:start;max-height:100%;overflow-y:auto;padding:14px 14px 10px;scrollbar-width:thin}
.dx-fight .dx-foot{grid-area:foot}
.dx-kinds{display:flex;flex-direction:column;gap:5px;margin:0 0 10px}
.dl-ui .dx-kind{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:6px 12px 6px 7px;text-align:left;background:rgba(0,0,0,.36);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(201,162,74,.18);transition:background .12s,box-shadow .12s}
.dl-ui .dx-kind:hover{background:linear-gradient(90deg,rgba(255,209,0,.08),transparent 85%);box-shadow:inset 0 0 0 1px rgba(201,162,74,.5)}
.dl-ui .dx-kind[aria-checked=true]{background:linear-gradient(90deg,rgba(255,196,60,.26),rgba(255,176,40,.06) 72%,transparent);box-shadow:inset 0 0 0 1px #e8c062,inset 3px 0 0 #ffd100}
.dx-kt{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0}
.dx-kind b{font:700 16px/1.1 Cinzel,Georgia,serif;letter-spacing:.02em;color:#e9e3d6}
.dx-kind small{font:400 12.5px/1.3 'Open Sans',sans-serif;color:#b8ad98;letter-spacing:0}
.dx-kind[aria-checked=true] b{color:#ffd100}.dx-kind[aria-checked=true] small{color:#e2d9c6}
.dx-ktag{flex:none;font:700 11px/1 Cinzel,Georgia,serif;letter-spacing:.1em;text-transform:uppercase;color:#a99d86}
.dx-k-ladder .dx-ktag,.dx-k-queue .dx-ktag{color:#ff9a62}.dx-k-friend .dx-ktag{color:#8fd18a}
.dx-ki{position:relative;flex:none;display:block;width:44px;height:44px;border-radius:3px;overflow:hidden;background:radial-gradient(circle at 50% 38%,#3b3021,#120e09 78%);box-shadow:0 0 0 1px #000,0 0 0 2px #6c5630}
.dx-ki img,.dx-ki svg{display:block;width:100%;height:100%;object-fit:cover}
.dx-ki-face img{transform:scale(1.08)}
.dx-ki-dum::before{content:"";position:absolute;inset:0;background:url(/assets/pick/look/dummy_xs.webp) 50% 16%/175% auto no-repeat}   /* (the dummy's own still, cropped to its sack head and shield) */
.dx-kind[aria-checked=true] .dx-ki{box-shadow:0 0 0 1px #000,0 0 0 2px #ffd100}
.dx-kopts:not(:empty){padding:10px 12px 4px;background:rgba(0,0,0,.34);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(201,162,74,.28)}
.dx-kopts .dx-lbl{text-align:left;margin:2px 0 6px}
.dx-kopts .dx-row:not(.dx-faces){justify-content:stretch}
.dx-kopts .dx-row:not(.dx-faces) button{flex:1 1 0;white-space:nowrap;padding:0 10px}
.dx-kopts .dx-row[aria-label="Its spec"] button{flex:1 1 auto;padding:0 6px;font-size:12px;letter-spacing:.01em}
.dx-kopts .dx-note,.dx-kopts .dx-line{text-align:left}
.dx-faces{display:grid;grid-template-columns:repeat(5,minmax(48px,1fr));gap:6px}
.dl-ui .dx-faces button{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;height:auto;min-height:44px;width:auto;padding:0 0 3px;overflow:hidden}
.dl-ui .dx-faces button[data-bot=""]{padding:0;justify-content:center}
.dx-faces img{display:block;width:44px;height:44px;object-fit:cover;filter:saturate(.6) brightness(.75)}
.dx-faces button[aria-checked=true] img,.dx-faces button:hover img{filter:none}
.dx-faces small{display:block;width:100%;margin-top:2px;font:600 9px/1.1 'Open Sans',sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;filter:brightness(.85)}
.dx-faces button[aria-checked=true] small{filter:none}
.dx-line{margin:4px 0 4px;text-align:left;font-size:13px}
.dx-kopts .dl-link{display:inline-block;padding:12px 8px 12px 0;font-size:12px}
/* a box that scrolls fades on the side that has more (duel_select.js edgeOf) */
.dx-faces.dx-more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.dx-faces.dx-more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.dx-faces.dx-more-l.dx-more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.dx-cl.dx-more-b{-webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent);mask-image:linear-gradient(#000 calc(100% - 26px),transparent)}
.dx-cl.dx-more-t{-webkit-mask-image:linear-gradient(transparent,#000 26px);mask-image:linear-gradient(transparent,#000 26px)}
.dx-cl.dx-more-t.dx-more-b{-webkit-mask-image:linear-gradient(transparent,#000 26px,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(transparent,#000 26px,#000 calc(100% - 26px),transparent)}

/* ---- a short desktop window (1280 x 720, 1366 x 768): the rows a little tighter ---- */
@media (min-width:901px) and (max-height:820px){
  .dx-chars,.dx-create,.dx-fight{padding:10px 18px 10px;gap:8px 20px}
  .dl-ui .dx-char{min-height:56px}.dx-cs-bars{padding:10px}
  .dl-ui .dx-btn-big{min-height:52px;font-size:19px}
  .dx-cr-race,.dx-cr-class{padding:10px 10px 6px}.dl-ui .dx-race{min-height:46px}.dx-race img{width:38px;height:38px}
  .dl-ui .dx-cls{min-height:74px;gap:4px}.dx-cls .dx-ci{width:44px;height:44px}
  .dl-ui .dx-kind{min-height:52px}.dx-lbl{margin:6px 0 4px}
  .dx-title{font-size:46px}.dx-crest{width:80px;height:94px}.dx-login{gap:16px}
}

/* ---- a phone upright (and a narrow window): one column; the figure fills what the panels leave, the main button at the foot ---- */
@media (max-width:900px) and (orientation:portrait),(max-width:700px){
  .dl-on-setup,.dl-on-vs,.dx-vs{background-image:radial-gradient(ellipse 90% 70% at 50% 40%,rgba(20,14,24,0),rgba(6,5,7,.7) 100%),linear-gradient(rgba(10,8,12,.5),rgba(8,6,5,.9) 78%),url(/assets/pick/look/arena_tall.webp)}
  .dx-chars,.dx-create,.dx-fight{gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .dx-panel::before,.dx-panel::after{width:9px;height:9px;top:-5px}.dx-panel::before{left:-5px}.dx-panel::after{right:-5px}
  .dl-ui .dx-btn-big{min-height:54px;padding:0 20px;font-size:19px;width:100%}
  .dx-plate b{font-size:24px}.dx-plate small{font-size:13px}
  /* Login */
  .dx-login{gap:16px;padding:14px 16px 64px}
  .dx-title{font-size:40px}.dx-title small{font-size:12px;letter-spacing:.28em}.dx-crest{width:78px;height:92px}
  .dx-lg-foot{justify-content:center;bottom:8px}.dx-lg-links{margin:0}.dx-lg-fine{order:2;width:100%;text-align:center}
  /* Fighters: the fight on top, the figure and its name, the list, the small buttons, Enter Arena */
  .dx-chars{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(120px,1fr) auto auto auto auto;
    grid-template-areas:"realm realm" "fig fig" "plate plate" "list list" "bars side" "foot foot"}
  .dx-realm{padding:8px 8px 8px 12px}.dx-realm b{font-size:15px}
  .dx-cs-list{padding:8px 8px 8px;max-height:min(212px,30svh)}
  .dx-cs-list .dx-ph2{display:none}
  .dl-ui .dx-char{min-height:56px;padding:4px 8px 4px 6px}.dx-ci{width:38px;height:38px}
  .dl-ui .dx-cs-new{margin-top:6px;min-height:44px}
  /* (a phone's bars: the Spellbook alone, beside Back and Delete; the bars themselves are in the fight under your thumb) */
  .dx-cs-bars{padding:0;background:none;border:0;box-shadow:none;align-self:stretch}
  .dx-cs-bars::before,.dx-cs-bars::after,.dx-cs-bars .dx-bars-h,.dx-cs-bars .dx-bars-l,.dx-cs-bars .dx-bind-line{display:none}
  .dx-cs-bars .dx-bars-do{margin:0}
  .dl-ui .dx-cs-bars .dx-bdo{min-height:44px;height:100%;padding:3px 8px 3px 4px;gap:7px}
  .dx-cs-bars .dx-bdo-i{width:30px;height:30px}.dx-cs-bars .dx-bdo-t b{font-size:13px}
  .dx-cs-side{justify-content:space-between}
  .dx-cs-side .dx-btn{flex:1 1 0;padding:0 8px}
  /* Create: the figure on top, the races and the classes side by side under it */
  .dx-create{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(110px,1fr) auto auto auto;grid-template-areas:"fig fig" "plate plate" "race class" "foot foot"}
  .dx-cr-race,.dx-cr-class{padding:9px 6px 6px;max-height:none;overflow:visible}
  .dx-ph2{font-size:12px;margin-bottom:6px;gap:6px}
  .dx-sides{gap:3px 4px}.dx-side{gap:3px}.dx-side p{font-size:10px;letter-spacing:.06em}
  .dl-ui .dx-race{min-height:40px;padding:2px;justify-content:center}.dx-race img{width:34px;height:34px}.dx-race small{display:none}
  .dx-classes{gap:2px}.dl-ui .dx-cls{min-height:58px;gap:3px;padding:3px 0 2px}.dx-cls .dx-ci{width:36px;height:36px}.dx-cls small{font-size:10px}
  .dx-lbl{margin:6px 0 4px;font-size:10px}
  .dl-ui .dx-sex span{display:none}.dl-ui .dx-sex{padding:0 6px}
  .dl-ui .dx-specr button{padding:0 4px;font-size:11px;min-height:40px;white-space:normal;line-height:1.05}
  .dx-go-row{gap:6px}.dl-ui .dx-go-row .dx-btn:not(.dx-btn-big){min-height:54px;padding:0 12px}
  .dx-create .dx-go-row .dx-btn-big{flex:1 1 auto;width:auto;min-width:0}
  .dl-ui .dx-rand span{display:none}
  /* Fight: the list fills the screen, the figure steps aside */
  .dx-fight{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"fp" "foot"}
  .dx-fight .dx-fig-area,.dx-fight .dx-plate{display:none}
  .dx-fp{padding:10px 8px 6px}
  .dl-ui .dx-kind{min-height:52px;gap:10px;padding:5px 8px 5px 6px}.dx-kind b{font-size:15px}.dx-kind small{font-size:12px}.dx-ki{width:38px;height:38px}
  .dx-ktag{display:none}
  .dx-fight .dx-go-row .dx-btn-big{flex:1 1 auto;width:auto}
}
/* under 375 px upright: a little narrower inside, so every row stays whole */
@media (max-width:374px) and (orientation:portrait){
  .dx-chars,.dx-create,.dx-fight{padding-left:8px;padding-right:8px}
  .dx-race img{width:30px;height:30px}.dx-cls .dx-ci{width:32px;height:32px}
  .dx-title{font-size:34px}
}
/* ---- a phone on its side: three columns, short rows; a column scrolls on its own if it must ---- */
@media (orientation:landscape) and (max-width:900px){
  .dl-on-setup,.dl-on-vs,.dx-vs{background-image:radial-gradient(ellipse 80% 70% at 50% 42%,rgba(20,14,24,0),rgba(6,5,7,.7) 100%),linear-gradient(rgba(10,8,12,.5),rgba(8,6,5,.9) 78%),url(/assets/pick/look/arena_wide.webp)}
  .dx-chars,.dx-create,.dx-fight{gap:6px 12px;padding:8px calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left))}
  .dx-panel::before,.dx-panel::after{display:none}
  .dl-ui .dx-btn-big{min-height:46px;padding:0 22px;font-size:16px}
  .dl-ui .dx-btn{min-height:44px}
  .dx-plate b{font-size:19px}.dx-plate small{font-size:12px;margin-top:1px}
  .dx-ph2{font-size:11px;margin-bottom:5px}
  /* Login: the crest and name on the left, the panel on the right */
  .dx-login{flex-direction:row;gap:28px;padding:10px 20px 40px}
  .dx-title{font-size:34px}.dx-title small{font-size:11px}.dx-crest{width:62px;height:72px}.dx-lg-tag{font-size:13px;margin-top:6px}
  .dx-lg-box{padding:12px 16px 14px;gap:6px}.dl-ui .dx-lg-box .dx-btn-big{margin-top:4px}
  .dx-lg-foot{bottom:6px}
  /* Fighters */
  .dx-chars{grid-template-columns:minmax(170px,210px) minmax(0,1fr) minmax(200px,250px);grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-areas:"realm fig list" "bars fig list" "side fig list" "side plate list" "side foot list"}
  .dx-realm{padding:6px 6px 6px 10px;grid-template-columns:minmax(0,1fr)}.dx-realm b{font-size:14px}.dx-realm small{font-size:11px}
  .dl-ui .dx-realm .dx-btn{grid-column:1;grid-row:auto;margin-top:4px;min-height:36px}
  .dx-cs-bars{padding:0;background:none;border:0;box-shadow:none;align-self:start}
  .dx-cs-bars::before,.dx-cs-bars::after,.dx-cs-bars .dx-bars-h,.dx-cs-bars .dx-bars-l,.dx-cs-bars .dx-bind-line{display:none}
  .dx-cs-bars .dx-bars-do{margin:0}
  .dl-ui .dx-cs-bars .dx-bdo{min-height:40px;padding:2px 8px 2px 4px;gap:7px}
  .dx-cs-bars .dx-bdo-i{width:28px;height:28px}.dx-cs-bars .dx-bdo-t b{font-size:13px}
  .dx-cs-side{flex-direction:column;align-items:stretch;justify-content:flex-end}
  .dx-cs-list{padding:8px 6px}.dx-cs-list .dx-ph2{display:none}
  .dl-ui .dx-char{min-height:48px;gap:8px;padding:3px 6px}.dx-ci{width:32px;height:32px;box-shadow:0 0 0 1px #000,0 0 0 2px #8c6c2c}
  .dx-ct b{font-size:13px}.dx-ct small{font-size:11px}
  .dl-ui .dx-cs-new{margin-top:6px;min-height:40px;font-size:12px}
  /* Create */
  .dx-create{grid-template-columns:minmax(200px,250px) minmax(0,1fr) minmax(200px,250px);grid-template-rows:minmax(0,1fr) auto auto}
  .dx-cr-race,.dx-cr-class{padding:6px 6px 4px}
  .dx-side p{font-size:10px}.dl-ui .dx-race{min-height:34px;padding:1px 4px 1px 1px;gap:5px}.dx-race img{width:30px;height:30px}.dx-race small{font-size:10px}
  .dl-ui .dx-cls{min-height:52px;gap:2px;padding:2px 0}.dx-cls .dx-ci{width:32px;height:32px}.dx-cls small{font-size:10px}
  .dx-lbl{margin:4px 0 3px;font-size:10px}
  .dl-ui .dx-sex span{display:none}
  .dl-ui .dx-specr button,.dl-ui .dx-sexr button{min-height:36px;padding:0 6px;font-size:11px}
  .dl-ui .dx-go-row .dx-btn:not(.dx-btn-big){min-height:46px;padding:0 12px}.dl-ui .dx-rand span{display:none}
  /* Fight */
  .dx-fight{grid-template-columns:minmax(0,.8fr) minmax(330px,1.2fr)}
  .dx-fp{padding:8px 8px 4px}
  .dl-ui .dx-kind{min-height:44px;padding:3px 8px 3px 4px;gap:8px}.dx-kind b{font-size:14px}.dx-kind small{font-size:11px}.dx-ki{width:34px;height:34px}
  .dx-kinds{gap:3px;margin-bottom:6px}
  /* (28 Oct 2026, impact round, the phone playtest: the row ran 13 px past its box, so 'Any' showed as 'NY') the ten in the row's width */
  .dx-faces{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;overflow:hidden}
  .dx-faces img{width:100%;max-width:36px;height:auto;aspect-ratio:1}
}
@media (prefers-reduced-motion:reduce){.dx-still,.dx-crest,.dx-vs-a,.dx-vs-b,.dx-vs-em span,.dx-vs::before,.dx-unmask .dx-still{animation:none}.dl-ui .dx-btn,.dx-ped{transition:none}}

/* the shared bits other screens use too */
.dl-line{margin:0 0 12px;color:#cfc6b4}.dl-line b{color:#fff}
.dl-err{margin:0 0 12px;color:var(--dl-err)}
.dl-ui .dl-go,a.dl-go{font:700 16px/1 Cinzel,Georgia,serif;color:#ffd100;min-height:48px;padding:0 28px;box-shadow:0 0 0 1px #c9a24a}
a.dl-go{display:inline-flex;align-items:center;text-decoration:none;border-radius:4px}
.dl-link{color:#c9a24a;font:600 13px/1 Cinzel,Georgia,serif;text-decoration:none;padding:14px 4px}
.dl-load{pointer-events:auto;text-align:center;color:#cfc6b4;font:600 15px/1.4 Cinzel,Georgia,serif}
.dl-load i{display:block;width:180px;height:2px;margin:10px auto 0;background:linear-gradient(90deg,transparent,#c9a24a,transparent);background-size:60% 100%;background-repeat:no-repeat;animation:dl-slide 1.1s linear infinite}
@keyframes dl-slide{from{background-position:-120% 0}to{background-position:220% 0}}

/* the VS: you slide in from the left, the opponent from the right, the VS lands between; it waits for the files and fades over the count */
.dx-vs{position:absolute;inset:0;z-index:6;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);overflow:hidden;pointer-events:auto;color:#e9e3d6;font:400 14px/1.4 'Open Sans',sans-serif;
  background:linear-gradient(rgba(10,8,6,.5),rgba(10,8,6,.88) 75%),url(/assets/pick/look/arena_wide.webp) 50% 62%/cover no-repeat,#0d0b09;transition:opacity .5s}
.dx-vs.dx-vs-off{opacity:0;pointer-events:none}
.dx-vs::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(255,230,180,.55),transparent 40%);opacity:0;animation:dx-flash .7s .38s ease-out both;pointer-events:none}
@keyframes dx-flash{30%{opacity:1}to{opacity:0}}
.dx-vs-a,.dx-vs-b{display:flex;flex-direction:column;min-width:0;min-height:0;padding:24px 20px 64px}
.dx-vs-a{animation:dx-vs-l .55s cubic-bezier(.15,.9,.2,1) both}
.dx-vs-b{animation:dx-vs-r .55s .08s cubic-bezier(.15,.9,.2,1) both}
@keyframes dx-vs-l{from{opacity:0;transform:translateX(-55%)}to{opacity:1;transform:none}}
@keyframes dx-vs-r{from{opacity:0;transform:translateX(55%)}to{opacity:1;transform:none}}
.dx-vs .dx-fig::before{display:none}
.dx-vs .dx-still{animation:none}
.dx-vs-plate{flex:none;text-align:center;padding-top:10px}
.dx-vs-plate b{display:block;font:700 clamp(24px,3vw,40px)/1.1 Cinzel,Georgia,serif;letter-spacing:.03em;color:#e9e3d6;text-shadow:0 2px 12px #000;overflow-wrap:anywhere}
.dx-vs-plate small{display:block;margin-top:4px;font-size:14px;color:#cfc6b4}
/* (27 Oct 2026, a friend's duel at 390: a 16-letter name broke as MAXIMILIANSWOR / TH) a long name (duel_select.js plate, --n its longest
   word's letters) smaller, so it fits half a phone's width whole: about 0.8 em a Cinzel capital; never over its usual size */
.dx-vs-plate b.dx-lg{font-size:min(clamp(24px,3vw,40px),calc(56vw / var(--n)))}
.dx-named .dx-vs-plate{animation:dx-pop .4s ease-out both}
.dx-unmask .dx-still{animation:dx-unmask .8s ease-out both}
@keyframes dx-unmask{from{filter:brightness(0) drop-shadow(0 0 2px rgba(233,227,214,.7));transform:scale(.98)}55%{filter:brightness(1.5) drop-shadow(0 0 22px rgba(255,230,180,.5))}to{filter:drop-shadow(0 10px 28px rgba(0,0,0,.55));transform:none}}
@keyframes dx-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dx-vs-em{align-self:center;position:relative;z-index:2;padding:0 6px;margin-bottom:8%}
.dx-vs-em span{display:block;font:900 clamp(64px,10vw,150px)/1 Cinzel,Georgia,serif;color:#ffd100;letter-spacing:-.02em;text-shadow:0 0 30px rgba(255,209,0,.4),0 5px 0 #5c4512,0 10px 24px #000;animation:dx-em .5s .32s cubic-bezier(.3,1.6,.5,1) both}
@keyframes dx-em{from{opacity:0;transform:scale(2.6) rotate(-8deg)}to{opacity:1;transform:none}}
.dx-vs-st{position:absolute;left:0;right:0;bottom:14px;z-index:2;margin:0;text-align:center;font:600 14px/1.4 Cinzel,Georgia,serif;color:#cfc6b4}
.dx-vs-st i{display:block;width:200px;height:2px;margin:8px auto 0;background:linear-gradient(90deg,transparent,#c9a24a,transparent);background-size:60% 100%;background-repeat:no-repeat;animation:dl-slide 1.1s linear infinite}
/* the stakes on the VS, and your tag */
.dx-vs-stk{position:absolute;left:0;right:0;bottom:44px;margin:0;text-align:center;font:600 14px/1.3 'Open Sans',sans-serif;color:#e9e3d6;text-shadow:0 1px 3px #000;z-index:3}
.dx-vs-stk b{font:800 18px/1 PkNum,'Open Sans',sans-serif;margin-left:4px}.dx-vs-stk span{margin-left:18px}
.dx-vs-stk .up{color:#7ee787}.dx-vs-stk .down{color:#ff9b8f}
.dx-tg{font:600 .6em/1 PkNum,'Open Sans',sans-serif;font-style:normal;color:#a99d86;letter-spacing:0}
/* (a phone upright: the VS as two halves, VS between them) */
@media (max-width:900px) and (orientation:portrait),(max-width:700px){
  .dx-vs-a,.dx-vs-b{padding:16px 4px 76px}
  .dx-vs .dx-fig{margin:0 -12px}
  .dx-vs-plate b{font-size:20px}.dx-vs-plate small{font-size:12px}.dx-vs-plate b.dx-lg{font-size:min(20px,calc(56vw / var(--n)))}   /* (27 Oct 2026: a long name, never over 20 px here) */
  .dx-vs-em{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);margin:0;padding:0}
  .dx-vs-em span{font-size:72px}
  .dx-vs{grid-template-columns:1fr 1fr}
}
/* (26 Oct 2026) challenge a friend: the host's wait, the link to send (duel_friend.js) */
.dx-lobby{pointer-events:auto;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px}
.dx-lob-in{width:min(520px,100%);padding:22px 20px 18px;text-align:center;background:var(--dl-panel);border-radius:6px;box-shadow:0 0 0 1px var(--dl-line),0 8px 30px rgba(0,0,0,.5)}
.dx-lob-in h2{margin:0 0 8px;font:700 22px/1.2 Cinzel,Georgia,serif;color:#e9e3d6}
.dx-lob-link{display:flex;gap:8px;margin:14px 0 6px}
.dx-lob-link input{flex:1 1 auto;min-width:0;min-height:44px;padding:0 12px;font:600 15px/1 'Open Sans',sans-serif;color:#fff;background:rgba(20,17,12,.85);border:0;border-radius:4px;box-shadow:0 0 0 1px var(--dl-line)}
.dx-lob-link input:focus{outline:2px solid #c9a24a;outline-offset:1px}
.dx-lob-link .dl-go{flex:none;min-width:96px}
.dx-lob-st{margin:14px 0 10px;font:600 15px/1.4 Cinzel,Georgia,serif;color:#cfc6b4}
.dx-lob-st i{display:block;width:180px;height:2px;margin:8px auto 0;background:linear-gradient(90deg,transparent,#c9a24a,transparent);background-size:60% 100%;background-repeat:no-repeat;animation:dl-slide 1.1s linear infinite}
.dx-lob-code{letter-spacing:.12em;color:#e9e3d6}
.dx-lobby .dx-back{margin-top:6px}
/* (27 Oct 2026, round 7) the lobby and the setup's spellbook in the game's look: a framed panel with a gold rim, red and gold buttons */
.dx-lob-in,.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-in{background:linear-gradient(180deg,rgba(26,20,12,.97),rgba(9,7,5,.97)) padding-box,linear-gradient(160deg,#f6dc8a,#9a7429 22%,#e9c86b 44%,#6d4c17 70%,#d7b05a) border-box;border:2px solid transparent;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.75),0 10px 28px rgba(0,0,0,.6)}
.dx-lob-in h2,.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-h b{color:#ffd100;letter-spacing:.06em;text-shadow:0 1px 0 #000}
.dl-ui .dx-lob-link .dl-go{min-width:110px}
.dx-lob-link input{background:linear-gradient(#030202,#0d0a07);border:1px solid #8a6c30;box-shadow:inset 0 2px 7px rgba(0,0,0,.95)}
/* (26 Oct 2026) your bars on the matchup step and the spellbook (duel_book.js) */
.dx-bars{margin:14px auto 0;width:min(100%,372px)}
.dx-bars-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.dx-bars-h b{font:700 12px/1 Cinzel,Georgia,serif;letter-spacing:.08em;text-transform:uppercase;color:#a99d86}
/* (27 Oct 2026, Chris circled the two small words "Key bindings" and "Spellbook": "make the spellbook & keybinds more of a prominent
   button") the two ways to set up your bars, two real buttons right under them: a framed picture, the name in gold ink, what it does */
.dx-bars-do{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.dx-bars-do.dx-bars-one{grid-template-columns:1fr}
.dl-ui .dx-bdo{display:flex;align-items:center;gap:11px;min-width:0;min-height:58px;padding:7px 12px 7px 9px;text-align:left;background:rgba(14,12,10,.86);box-shadow:0 0 0 1px #8f7745;transition:background .12s,box-shadow .12s}
.dx-bdo-i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:3px;overflow:hidden;color:#e8c062;background:radial-gradient(circle at 50% 40%,#2c2418,#110d09 80%);box-shadow:0 0 0 1px #000,0 0 0 2px #6c5a34;transition:box-shadow .12s,color .12s}
.dx-bdo-i img{display:block;width:100%;height:100%}
.dx-bdo-t{min-width:0}
.dx-bdo-t b{display:block;font:700 15px/1.1 Cinzel,Georgia,serif;letter-spacing:.03em;color:#ffd100;white-space:nowrap}
.dx-bdo-t small{display:block;margin-top:3px;font:400 12px/1.25 'Open Sans',sans-serif;color:#b8ad98;letter-spacing:0}
.dl-ui .dx-bdo:hover{background:rgba(26,21,13,.94);box-shadow:0 0 0 1px #c9a24a,0 0 14px rgba(201,162,74,.2)}
.dx-bdo:hover .dx-bdo-i{color:#ffe08a;box-shadow:0 0 0 1px #000,0 0 0 2px #c9a24a}
.dx-bdo:hover small{color:#d8d0bf}
.dx-bars-r{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:4px}
.dx-bs{position:relative;aspect-ratio:1;border-radius:4px;background:rgba(14,12,10,.7);box-shadow:0 0 0 1px #000,0 0 0 2px #3a3326;overflow:hidden}
.dx-bs img{display:block;width:100%;height:100%}
.dx-bs kbd{position:absolute;left:2px;top:1px;font:700 10px/1 'Open Sans',sans-serif;color:#fff;text-shadow:0 1px 2px #000}
.dx-bars-own .dx-bars-h b::after{content:" · yours";color:#c9a24a;font-weight:400}
.dx-book{pointer-events:auto;position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(6,5,4,.55)}
.dx-bk-in{display:flex;flex-direction:column;width:min(720px,100%);max-height:100%;background:#0e0b07;border-radius:6px;box-shadow:0 0 0 1px #000,0 0 0 2px #6c5a34,0 10px 30px rgba(0,0,0,.6);color:#ebe2cf}
.dx-bk-h{display:flex;align-items:baseline;gap:10px;padding:10px 8px 8px 14px;border-bottom:1px solid #3a2f1c}
.dx-bk-h b{font:600 18px/1 Cinzel,Georgia,serif;color:#e9e3d6}.dx-bk-h small{font:600 12px/1 'Open Sans',sans-serif}
.dl-ui .dx-bk-x{margin-left:auto;min-height:36px;width:40px;padding:0;font-size:22px;box-shadow:none;color:#c9a24a}
.dx-bk-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:2px 8px;padding:8px 10px;overflow-y:auto;min-height:120px;flex:1 1 auto}
.dl-ui .dx-bk-i{display:flex;align-items:center;gap:8px;min-height:46px;padding:3px 6px;text-align:left;box-shadow:none;border-radius:4px;cursor:grab;touch-action:manipulation}
.dx-bk-i img{flex:none;width:36px;height:36px;border-radius:3px;box-shadow:0 0 0 1px #000,0 0 0 2px #6c5a34}
.dx-bk-i span{min-width:0}.dx-bk-i b{display:block;font:600 13px/1.2 Cinzel,Georgia,serif}.dx-bk-i small{display:block;font:400 11px/1.3 'Open Sans',sans-serif;color:#a89f8c}
.dl-ui .dx-bk-i:hover{box-shadow:inset 0 0 0 1px rgba(232,192,98,.35)}
.dx-bk-i.dx-on img{box-shadow:0 0 0 1px #000,0 0 0 2px #c9a24a}.dx-bk-i.dx-on small::after{content:" · on your bar";color:#c9a24a}
.dl-ui .dx-bk-i.dx-hd,.dl-ui .dx-bk-s.dx-hd{box-shadow:inset 0 0 0 2px #e8c062,inset 0 0 14px rgba(232,192,98,.2)}
.dx-bk-tip{min-height:36px;margin:0;padding:6px 14px;border-top:1px solid #3a2f1c;font:400 12px/1.45 'Open Sans',sans-serif;color:#b8ad98}
.dx-bk-tip b{color:#e9e3d6;font-weight:600}
.dx-bk-bars{padding:6px 14px 2px}
.dx-bk-r{display:grid;grid-template-columns:repeat(6,minmax(0,52px));justify-content:center;gap:6px;margin-bottom:6px}
.dl-ui .dx-bk-s{position:relative;aspect-ratio:1;min-height:0;padding:0;overflow:hidden;background:rgba(20,17,12,.9);box-shadow:0 0 0 1px #000,0 0 0 2px #3a3326}
.dx-bk-s img{display:block;width:100%;height:100%;pointer-events:none}
.dx-bk-s kbd{position:absolute;left:3px;top:2px;font:700 10px/1 'Open Sans',sans-serif;color:#fff;text-shadow:0 1px 2px #000;pointer-events:none}
.dx-bk-bars.dx-hold .dx-bk-s{box-shadow:0 0 0 1px #000,0 0 0 2px #c9a24a}
.dx-bk-f{display:flex;gap:8px;justify-content:flex-end;padding:6px 14px 12px}
.dl-ui .dx-bk-off:disabled{opacity:.4;cursor:default}
.dx-bk-ghost{position:fixed;left:0;top:0;z-index:99;width:40px;height:40px;border-radius:4px;pointer-events:none;box-shadow:0 0 0 2px #e8c062,0 4px 12px rgba(0,0,0,.6)}
@media (max-width:600px){.dx-book{padding:0}.dx-bk-in{height:100%;border-radius:0}.dx-bk-l{grid-template-columns:1fr 1fr}.dx-bk-f{justify-content:stretch}.dx-bk-f button{flex:1}}
/* (26 Oct 2026) a short screen (a phone on its side): the book's list on the left, the words, your bars and the buttons on the right */
@media (max-height:520px){
  .dx-book{padding:4px}
  .dx-bk-in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;height:100%;width:min(1000px,100%)}
  .dx-bk-h{grid-column:1/-1;padding:4px 6px 4px 12px}.dx-bk-h b{font-size:16px}
  .dx-bk-l{grid-column:1;grid-row:2/5;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));min-height:0}
  .dl-ui .dx-bk-i{min-height:42px}
  .dx-bk-tip{grid-column:2;grid-row:2;width:320px;border-top:0;border-left:1px solid #3a2f1c;overflow:auto}
  .dx-bk-bars{grid-column:2;grid-row:3;border-left:1px solid #3a2f1c}
  .dx-bk-r{grid-template-columns:repeat(6,44px);gap:5px}
  .dx-bk-f{grid-column:2;grid-row:4;border-left:1px solid #3a2f1c;padding:4px 14px 8px}
  .dl-ui .dx-bk-f button{min-height:40px;padding:0 10px}
}

/* ---- (26 Oct 2026, a friend: "i need 6 buttons just for totems", "then def need full binds tho") the third bar over the two, each row
   named at its left; the Key bindings view of the book (a desktop's): tabs in the head, the actions with their Key 1 and Key 2 where the
   spells were, the button awaiting a key lit ---- */
.dx-bars-3{padding-bottom:4px;margin-bottom:6px;border-bottom:1px solid rgba(91,74,46,.5)}
.dx-bk-r{grid-template-columns:40px repeat(6,minmax(0,52px))}
.dx-bk-rn{align-self:center;justify-self:end;padding-right:2px;font:600 10px/1.1 'Open Sans',sans-serif;color:#8a806e;text-align:right}
.dx-bk-r3{padding-bottom:6px;border-bottom:1px solid rgba(91,74,46,.45)}
.dx-bk-tabs{display:flex;gap:4px;margin-left:14px;align-self:center}
.dl-ui .dx-bk-t{min-height:32px;padding:0 12px;font:600 12px/1 'Open Sans',sans-serif;color:#a89f8c;box-shadow:none}
.dl-ui .dx-bk-t[aria-selected=true]{color:#fff;background:rgba(201,162,74,.14);box-shadow:inset 0 -2px 0 #c9a24a}
.dx-bk-kl{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));align-content:start;gap:2px 22px;padding:6px 12px 10px;overflow-y:auto;min-height:120px;flex:1 1 auto}
.dx-bk-kl[hidden],.dx-bk-l[hidden]{display:none}
.dx-kg h4,.dx-kr{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px;gap:6px;align-items:center}
.dx-kg h4{margin:8px 0 3px;font:600 13px/1.2 Cinzel,Georgia,serif;color:#c9a24a}
.dx-kg h4 small{font:600 10px/1 'Open Sans',sans-serif;color:#7d7462;text-align:center}
.dx-kr{min-height:34px}
.dx-kn{display:flex;align-items:center;gap:7px;min-width:0;font:400 12px/1.25 'Open Sans',sans-serif;color:#d8cfbd}
.dx-kn>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-kn img,.dx-kn i{flex:none;width:22px;height:22px;border-radius:3px;box-shadow:0 0 0 1px #000,0 0 0 2px #3a3326}
.dx-kn i{background:rgba(20,17,12,.9)}
.dx-kn em{font-style:normal;font-weight:700;color:#a89f8c}.dx-kn s{text-decoration:none;color:#6f6656}
.dl-ui .dx-kb{min-height:30px;padding:0 6px;font:600 12px/1 'Open Sans',sans-serif;color:#efe8da;background:rgba(20,17,12,.9);box-shadow:0 0 0 1px #000,0 0 0 2px #3a3326;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-ui .dx-kb:hover{box-shadow:0 0 0 1px #000,0 0 0 2px #8a7650}
.dl-ui .dx-kb.dx-kb0{color:#6f6656}
.dl-ui .dx-kb.dx-cap,.dl-ui .dx-bk-s.dx-cap{color:#ffe8a8;box-shadow:0 0 0 1px #000,0 0 0 2px #e8c062,0 0 12px rgba(232,192,98,.55);animation:dx-cap 1s ease-in-out infinite alternate}
@keyframes dx-cap{from{box-shadow:0 0 0 1px #000,0 0 0 2px #e8c062,0 0 4px rgba(232,192,98,.3)}to{box-shadow:0 0 0 1px #000,0 0 0 2px #ffe8a8,0 0 14px rgba(232,192,98,.7)}}
@media (prefers-reduced-motion:reduce){.dl-ui .dx-kb.dx-cap,.dl-ui .dx-bk-s.dx-cap{animation:none}}
/* (the line under the book holds three lines whatever it says: a hover's words of another length moved the whole centred book under the
   resting mouse, and the next hover moved it back, a shiver a test's click could not land on) */
@media (min-width:601px) and (min-height:521px){.dx-bk-tip{height:64px;box-sizing:border-box;overflow-y:auto}}
.dx-keys .dx-bk-s kbd{font-size:12px}
.dx-keys .dx-bk-s img{filter:brightness(.6)}
@media (max-height:520px){
  .dx-bk-kl{grid-column:1;grid-row:2/5;min-height:0}
  /* (a spell whose name and level take three lines ran into the next one: a stretched row held them at 42 px; each takes its own height) */
  .dx-bk-l{align-items:start}.dx-bk-i small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* (the matchup's strip with a third row is drawn smaller, three rows in the height two took, so it stays clear of Back and Start; it is
     a picture of the bars, the book is where they are set) */
  .dx-bars:has(.dx-bars-3) .dx-bars-l{width:236px;margin:0 auto}.dx-bars:has(.dx-bars-3) .dx-bars-r{gap:3px;margin-bottom:3px}.dx-bars:has(.dx-bars-3) .dx-bs kbd{font-size:9px}
  /* (no row names on a short screen: the list keeps its width; the third row is the one over the line) */
  .dx-bk-r{grid-template-columns:repeat(6,44px);gap:5px}.dx-bk-rn{display:none}
}
/* (27 Oct 2026) a phone on its side: a bot's spec row of four in two even rows of two */
@media (orientation:landscape) and (max-width:900px){.dx-kopts .dx-row[aria-label="Its spec"]{display:grid;grid-template-columns:1fr 1fr}}


/* ---- (27 Oct 2026, round 4, Chris: "the spellbook & binds (without obstructing any views) should be useable while in the game") the
   book in the fight. A desktop's dock: a window at the left edge, placed by duel_book.js dockAt under your frame and over the bars beside
   it, no shade over the arena, the duel going on behind it; the spells one to a row, the bars under them, the keys list one column. A
   phone's sheet: under the frames (or beside them on a phone on its side), three rows: a line with the bar tabs, Take off and the x; the
   spells as a row of icons; the shown bar's six. Both under the alerts and the menus (duel-hud.css) ---- */
.dx-book.dx-dock,.dx-book.dx-sheet{inset:auto;left:12px;top:140px;width:300px;height:auto;z-index:2;display:block;padding:0;background:none}
.dx-dock .dx-bk-in,.dx-sheet .dx-bk-in{width:100%;height:100%;max-height:none;background:rgba(14,11,7,.95)}
/* (the setup's own layout for a short screen, the book's list beside its bars, is not the fight's: the dock stays one column) */
.dx-dock .dx-bk-in{display:flex;flex-direction:column}
.dx-dock .dx-bk-tip{width:auto;border-left:0;border-top:1px solid #3a2f1c}.dx-dock .dx-bk-bars,.dx-dock .dx-bk-f{border-left:0}
.dx-dock .dx-bk-h{flex-wrap:wrap;gap:4px 8px;padding:6px 4px 6px 12px}
.dx-dock .dx-bk-h b{font-size:16px}.dx-dock .dx-bk-h small{font-size:11px;flex:1 1 auto}
.dx-dock .dx-bk-tabs{order:3;flex:1 0 100%;margin:0}
.dl-ui .dx-dock .dx-bk-t{flex:1;min-height:30px}
.dl-ui .dx-dock .dx-bk-x{min-height:32px;width:34px}
.dx-dock .dx-bk-l{grid-template-columns:1fr;gap:1px;padding:4px 6px;min-height:60px}
.dl-ui .dx-dock .dx-bk-i{min-height:38px;padding:2px 6px}
.dx-dock .dx-bk-i img{width:30px;height:30px}
.dx-dock .dx-bk-tip{height:auto;max-height:58px;min-height:0;padding:5px 12px;font-size:11px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.dx-dock .dx-bk-h,.dx-dock .dx-bk-tip,.dx-dock .dx-bk-bars,.dx-dock .dx-bk-f{flex:none}
.dx-dock .dx-bk-bars{padding:6px 8px 0}
.dx-dock .dx-bk-r{grid-template-columns:30px repeat(6,minmax(0,1fr));gap:4px;margin-bottom:4px}
.dx-dock .dx-bk-f{flex-wrap:wrap;gap:6px;padding:4px 8px 8px}
.dl-ui .dx-dock .dx-bk-f button{min-height:34px;padding:0 10px;font-size:12px}
.dx-dock .dx-bk-kl{grid-template-columns:1fr;gap:0;padding:2px 8px 8px;min-height:60px}
.dx-dock .dx-kg h4,.dx-dock .dx-kr{grid-template-columns:minmax(0,1fr) 66px 66px;gap:4px}
.dl-ui .dx-dock .dx-kb{min-height:28px;font-size:11px;padding:0 4px}
/* (28 Oct 2026, impact round) a key the duel keeps fixed (M, the sound): shown as a key, not one to change */
.dx-kfix{display:flex;align-items:center;justify-content:center;min-height:28px;font:600 12px/1 'Open Sans',sans-serif;color:#a89f8c;box-shadow:inset 0 0 0 1px #3a3326}
/* (a short dock: the words line goes first, the bars keep their size) */
.dx-dock.dx-short .dx-bk-tip{display:none}
.dx-sheet .dx-bk-in{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:start;height:auto;max-height:100%;width:100%;border-radius:8px;overflow:hidden}
.dx-sheet .dx-bk-in>*{grid-column:1;grid-row:auto;border-left:0}
.dx-sheet .dx-bk-h{align-items:center;gap:6px;padding:4px 4px 4px 10px;min-height:0}
.dx-sheet .dx-bk-tip{flex:1 1 auto;width:auto;min-width:0;min-height:0;height:auto;margin:0;padding:0;border:0;font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-bk-rows{display:flex;gap:3px}
.dl-ui .dx-bk-rt{width:30px;min-height:30px;padding:0;font:700 12px/1 'Open Sans',sans-serif;color:#a89f8c;box-shadow:0 0 0 1px #3a3326}
.dl-ui .dx-bk-rt[aria-selected=true]{color:#fff;background:rgba(201,162,74,.18);box-shadow:0 0 0 1px #c9a24a}
.dl-ui .dx-sheet .dx-bk-off{min-height:30px;padding:0 8px;font-size:11px}
.dl-ui .dx-sheet .dx-bk-off:disabled{display:none}
.dl-ui .dx-sheet .dx-bk-x{min-height:32px;width:34px;margin:0}
.dx-sheet .dx-bk-l{display:flex;gap:6px;padding:4px 8px;min-height:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;touch-action:pan-x;scrollbar-width:none}
.dx-sheet .dx-bk-l::-webkit-scrollbar{display:none}
/* (28 Oct 2026, impact round, the phone playtest: bare icons, no names) each spell with its name and rank beside its icon, a row of named
   chips on a phone on its side, a list down the spells' column upright (duel_book.js open) */
.dl-ui .dx-sheet .dx-bk-i{flex:none;display:flex;align-items:center;gap:6px;min-height:0;min-width:0;max-width:136px;padding:0 8px 0 0;width:auto;height:var(--si,44px);border-radius:5px;text-align:left}
.dx-sheet .dx-bk-i img{flex:none;width:var(--si,44px);height:var(--si,44px)}
.dx-sheet .dx-bk-i span{display:flex;flex-direction:column;gap:1px;min-width:0}
.dx-sheet .dx-bk-i b{font:600 11px/1.15 'Open Sans',sans-serif;letter-spacing:0;color:#f1e6c8;text-transform:none;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dx-sheet .dx-bk-i small{font:400 9.5px/1.1 'Open Sans',sans-serif;color:#a89f8c;white-space:nowrap}
.dx-sheet .dx-bk-s[hidden]{display:none}
/* (on the sheet a spell on your bar is dimmed, its words stay its name and rank) */
.dx-sheet .dx-bk-i.dx-on small::after{content:none}
.dx-sheet .dx-bk-sh{display:none}
.dx-sheet .dx-bk-i.dx-on img{opacity:.55}
.dx-sheet .dx-bk-bars{padding:4px 8px 8px}
.dx-sheet .dx-bk-r{display:none;grid-template-columns:repeat(6,var(--si,44px));justify-content:center;gap:5px;margin:0;padding:0;border:0}
.dx-sheet .dx-bk-rn{display:none}
.dx-sheet .dx-bk-bars[data-row="0"] .dx-bk-r[data-o="0"],.dx-sheet .dx-bk-bars[data-row="6"] .dx-bk-r[data-o="6"],.dx-sheet .dx-bk-bars[data-row="12"] .dx-bk-r[data-o="12"]{display:grid}
.dx-sheet .dx-bk-s kbd{display:none}
/* (a sheet in a short gap, a phone on its side: the icons and slots a little smaller so its three rows fit) */
.dx-sheet{--si:42px}.dx-sheet.dx-short{--si:38px}
@media (max-height:520px){.dx-sheet{--si:38px}.dx-sheet .dx-bk-h{padding:2px 2px 2px 8px}.dl-ui .dx-bk-rt{width:28px;min-height:28px}.dl-ui .dx-sheet .dx-bk-x{min-height:28px}.dx-sheet .dx-bk-l{padding:3px 8px}.dx-sheet .dx-bk-bars{padding:3px 8px 6px}}
/* (the foe behind the open book: it turns to glass while he is there, duel_book.js dockAt; solid again when touched) */
.dx-dock,.dx-sheet{transition:opacity .18s}
.dx-dock.dx-see,.dx-sheet.dx-see{opacity:.28}
.dx-dock.dx-see:hover{opacity:.62}
/* (27 Oct 2026, round 4, the review) the foe behind it while it is in use (touched in the last 1.5 sec, or a mouse over it): a lighter glass
   you can still read and tap, and he still shows through */
.dx-dock.dx-see2,.dx-sheet.dx-see2{opacity:.62}
/* (27 Oct 2026, round 4, the review: on its side the sheet sat over the foe) the phone's drawer down the left edge, placed and sized by
   duel_book.js dockAt (--si its icons): s3 the three rows above; s2 two rows, the spells with Take off and the x, the bar's tab with its six;
   sc upright, two columns: the tab and the x, the spells beside the bar's six one under the other, the line under them (Take off over it
   while a slot's spell is held). A compact sheet's tab shows the bar in view and a tap goes on to the next */
.dx-sheet.dx-s2 .dx-bk-in,.dx-sheet.dx-sc .dx-bk-in{display:grid;gap:4px;padding:4px 6px;height:auto}
.dx-sheet.dx-s2 .dx-bk-h,.dx-sheet.dx-sc .dx-bk-h{display:contents}
.dx-sheet.dx-s2 .dx-bk-in>*,.dx-sheet.dx-sc .dx-bk-in>*{grid-column:auto;grid-row:auto}
.dx-sheet.dx-s2 .dx-bk-in{grid-template-columns:34px minmax(0,1fr) auto auto;grid-template-rows:var(--si) var(--si);grid-template-areas:"l l off x" "rt b b b"}
.dx-sheet.dx-s2 .dx-bk-tip{display:none}
.dx-sheet.dx-sc .dx-bk-in{grid-template-columns:minmax(0,1fr) var(--si);grid-template-rows:30px calc(6 * var(--si) + 25px) 28px;grid-template-areas:"sh rt" "l b" "ft x";padding:6px}
/* (28 Oct 2026, impact round) upright, the two columns headed: Spells over the list, the page's tab over its slots; the x under the slots */
.dx-sheet.dx-sc .dx-bk-sh{display:block;grid-area:sh;align-self:end;padding:0 0 5px 2px;font:600 9px/1 'Open Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#a89f8c}
.dl-ui .dx-sheet.dx-sc .dx-bk-i{width:100%;max-width:none;height:auto;min-height:calc(var(--si) - 6px);padding:1px 4px 1px 0}
.dx-sheet.dx-sc .dx-bk-i img{width:calc(var(--si) - 8px);height:calc(var(--si) - 8px)}
.dx-sheet.dx-sc .dx-bk-i b{font-size:10.5px}
/* (28 Oct 2026, impact round) a spell held from the sheet: the arc's buttons and More's rows are lit as places to put it */
.dl-ui.dx-arcdrop .dl-arc .dl-slot[data-k],.dl-ui.dx-arcdrop .dl-mpop .dl-mrow{outline:2px solid #e8c062;outline-offset:2px}
.dx-sheet.dx-s2 .dx-bk-l,.dx-sheet.dx-sc .dx-bk-l{grid-area:l;padding:0;min-height:0}
.dx-sheet.dx-sc .dx-bk-l{flex-direction:column;gap:5px;overflow-x:hidden;overflow-y:auto;touch-action:pan-y}
.dx-sheet.dx-s2 .dx-bk-bars,.dx-sheet.dx-sc .dx-bk-bars{grid-area:b;padding:0;min-width:0}
.dx-sheet.dx-s2 .dx-bk-r{justify-content:start;gap:4px}
.dx-sheet.dx-sc .dx-bk-r{grid-template-columns:var(--si);grid-template-rows:repeat(6,var(--si));gap:5px}
.dx-bk-rows{grid-area:rt}
.dl-ui .dx-sheet.dx-s2 .dx-bk-rt:not([aria-selected=true]),.dl-ui .dx-sheet.dx-sc .dx-bk-rt:not([aria-selected=true]){display:none}
.dl-ui .dx-sheet.dx-s2 .dx-bk-rt,.dl-ui .dx-sheet.dx-sc .dx-bk-rt{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:13px}
.dx-sheet.dx-s2 .dx-bk-rt::before,.dx-sheet.dx-sc .dx-bk-rt::before{content:attr(data-h);font:600 9px/1 'Open Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#a89f8c}
.dx-sheet.dx-sc .dx-bk-rt{flex-direction:row;gap:4px}
.dx-sheet.dx-s2 .dx-bk-rows,.dx-sheet.dx-sc .dx-bk-rows{display:flex;min-width:0}
.dl-ui .dx-sheet.dx-s2 .dx-bk-x,.dl-ui .dx-sheet.dx-sc .dx-bk-x{grid-area:x;width:auto;min-width:30px;height:100%;min-height:0}
.dl-ui .dx-sheet.dx-s2 .dx-bk-off{grid-area:off;min-height:0;height:100%;padding:0 6px;font-size:10px}
.dl-ui .dx-sheet.dx-sc .dx-bk-off{grid-area:ft;z-index:1;width:100%;min-height:0;height:100%;font-size:11px}
.dx-sheet.dx-sc .dx-bk-tip{grid-area:ft;white-space:normal;font-size:10.5px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:clip}
/* (Bar 1 while keys 1 to 6 show a form's page: that page, dimmed, not to be changed here; duel_book.js pageNow) */
.dl-ui .dx-bk-r.dx-bk-pg .dx-bk-s,.dl-ui .dx-bk-bars.dx-hold .dx-bk-r.dx-bk-pg .dx-bk-s{opacity:.6;box-shadow:inset 0 0 0 1px #5a4a2e;cursor:not-allowed}
.dx-bk-r.dx-bk-pg .dx-bk-rn{color:#8a7650;font-style:italic}
/* (the held spell's name in the upright drawer's line: the line's own small type, not the header's title) */
.dx-sheet.dx-sc .dx-bk-h .dx-bk-tip b{font:600 11px/1.25 'Open Sans',sans-serif;letter-spacing:0;text-transform:none;font-variant:normal}

/* ---- (27 Oct 2026, round 5, Chris: "can you make it easier to keybind") bind mode on the matchup step (duel_book.js): its button by the
   strip's heading, lit while on; every slot of the three bars lit in gold, the one under the pointer brighter, the keys bigger; the line
   under the strip says what to do and what a key just did. In Key bindings, Bind on the bars ---- */
.dl-ui .dx-bind{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px 0 8px;font:600 12px/1 'Open Sans',sans-serif;color:#e8c062;background:rgba(14,12,10,.86);border-radius:4px;box-shadow:0 0 0 1px #6c5a34;cursor:pointer}
.dl-ui .dx-bind:hover{color:#ffe08a;box-shadow:0 0 0 1px #c9a24a}
.dl-ui .dx-bind.dx-on{color:#16120b;background:#e8c062;box-shadow:0 0 0 1px #000,0 0 12px rgba(232,192,98,.45)}
.dl-ui.dl-binding .dx-bs{pointer-events:auto;cursor:crosshair;box-shadow:0 0 0 1px #000,0 0 0 2px #b8933f}
.dl-ui.dl-binding .dx-bs.dl-bhov{box-shadow:0 0 0 1px #000,0 0 0 2px #fff0c0,0 0 14px rgba(255,214,120,.75)}
.dl-ui.dl-binding .dx-bs img{filter:brightness(.62)}
.dl-ui.dl-binding .dx-bs kbd{font-size:12px;color:#ffe08a}
.dx-bs kbd.dl-knew{animation:dl-knew .9s ease-out}
.dx-bind-line{margin:6px 0 0;padding:6px 9px;font:400 12px/1.4 'Open Sans',sans-serif;color:#d8d0bf;background:rgba(10,9,8,.7);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(143,119,69,.7)}
.dx-bind-line b{color:#ffd100}
.dx-bind-line.dl-said{box-shadow:inset 0 0 0 1px #e8c062}
.dl-ui .dx-bk-bind{display:inline-flex;align-items:center;gap:6px}
.dx-bk-bind[hidden]{display:none}


/* ==================================================================================================================================
   (29 Oct 2026, round 15, Chris: "these circles - they look like every other vibe coded playable browser game out there. we need to find
   our own unique talents forever + game style feel ... maybe find a way to include our logo too") THE TREE LOOK: the way in is drawn as a
   talent tree, the site's own. A panel is a tree's column (the site's #1e1e1e, its #333 header with the points count and the 3 px bar that
   fills as points go in, a #111 body); every choice is a talent node (a square icon in a black frame, the site's rings: grey, white on a
   hover, gold once learned, green for one you can learn, a rank badge at its foot); arrows join the steps, grey, gold once lit; the main
   button is the capstone, its node the crossed blades, lit gold when the path to it is whole. The crest is the brand's book (the logo file
   as it is), the words the wordmark's gold (#ffd75e, a #7a5a10 shadow). No gold rims, no studs, no red slabs. Built 29 Oct 2026 from the
   tree design with two parts of the tome design: the fighter's face in its node, and a square frame on the floor in place of the ring.
   ================================================================================================================================== */
:root{--tf-gold:#ffd100;--tf-wm:#ffd75e;--tf-wms:#7a5a10;--tf-green:#4fbf3a;--tf-ring:#6b6b6b;--tf-line:#3a3a3a;--tf-p:#1e1e1e;--tf-p2:#262626;--tf-head:#333;--tf-body:#111;--tf-ink:#e8e8e8;--tf-ink2:#bdbdbd;--tf-mute:#8a8a8a;
  --tf-gold2:#c89b1a;--tf-gold3:#ffe680;--tf-gold4:#fff3c4;--tf-badge-on:#6a5510;--tf-badge:#444;--tf-btn1:#2a2a2a;--tf-btn2:#1a1a1a;--tf-btn1h:#323232;--tf-btn2h:#1f1f1f;--tf-btnr:#4a4a4a;--tf-chip:#161616;--tf-chip-h:#1d1d1d;--tf-chipr:#3f3f3f;--tf-well:#0a0a0a;--tf-deep:#0d0d0d;--tf-redw:#ff8a80;--tf-red:#ff4d4d;--tf-red2:#4a1414;--tf-ph:#6a6a6a;--tf-fine:#8f8f8f;--tf-ground:#121212;--tf-cap0:#141414;--tf-caph:#151515;--tf-cap1h:#2c2c2c;--tf-capn1:#4a3708;--tf-capn2:#070500;--tf-add1:#16240f;--tf-add2:#050805;--tf-ci1:#1b1b1b;--tf-ci2:#070707;
  --tf-floor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd75e' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%23ffd75e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M72 10H328L390 90H10Z' fill='%23ffd75e' fill-opacity='.05' stroke='url(%23g)' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M112 27H288L330 74H70Z' fill='none' stroke='%23ffd75e' stroke-opacity='.3' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tf-arw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24'%3E%3Cpath d='M6 0v16' stroke='%23c9c9c9' stroke-width='2' opacity='.55'/%3E%3Cpath d='M1 15h10l-5 8z' fill='%23c9c9c9' opacity='.55'/%3E%3C/svg%3E");
  --tf-arw-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24'%3E%3Cpath d='M6 0v16' stroke='%23ffd100' stroke-width='2'/%3E%3Cpath d='M1 15h10l-5 8z' fill='%23ffd100'/%3E%3C/svg%3E");
  --tf-arw-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M0 6h19' stroke='%23ffd100' stroke-width='2'/%3E%3Cpath d='M18 1v10l9-5z' fill='%23ffd100'/%3E%3C/svg%3E")}

/* ---- a panel: a tree's column ---- */
.dx-panel{background:rgba(30,30,30,.95);border:0;border-radius:4px;box-shadow:0 0 0 1px #000,0 12px 30px rgba(0,0,0,.55)}
.dx-panel::before,.dx-panel::after{content:none}
.dx-th{position:relative;display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px;box-sizing:border-box;background:var(--tf-head);border-radius:4px 4px 0 0}
.dx-th::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--fill,100%);background:linear-gradient(90deg,var(--tf-gold2),var(--tf-gold));box-shadow:0 0 8px rgba(255,209,0,.35);transition:width .3s ease}
.dx-cs-list .dx-th::after{background:linear-gradient(90deg,color-mix(in srgb,var(--cc,var(--tf-gold)) 65%,#000),var(--cc,var(--tf-gold)));box-shadow:0 0 8px color-mix(in srgb,var(--cc,var(--tf-gold)) 45%,transparent)}
.dx-th .dx-ph2,.dx-th .dx-lg-l{flex:1 1 auto;margin:0;font:700 15px/1.2 Cinzel,Georgia,serif;letter-spacing:.03em;text-transform:none;color:var(--tf-wm);text-shadow:0 1px 0 var(--tf-wms);white-space:nowrap}
.dx-th .dx-ph2::before,.dx-th .dx-ph2::after{content:none}
.dx-th .dx-lg-l{min-width:0;white-space:normal}
.dx-th-n{flex:none;font:700 13px/1 'Open Sans',sans-serif;font-variant-numeric:tabular-nums;color:var(--tf-ink)}
.dx-th-book{flex:none;width:30px;height:30px;margin:-4px -2px -4px -4px;filter:drop-shadow(0 0 6px rgba(255,200,80,.35))}
.dx-tb{background:var(--tf-body);border-radius:0 0 4px 4px}
/* a heading that opens a panel (Choose your fight, Race, Class) is its column's header */
.dx-fp,.dx-cr-race,.dx-cr-class{padding:0 12px 10px}
.dx-fp > .dx-ph2,.dx-cr-race > .dx-ph2,.dx-cr-class > .dx-ph2{position:relative;display:block;margin:0 -12px 10px;padding:11px 12px 11px;font:700 15px/1.2 Cinzel,Georgia,serif;letter-spacing:.03em;text-transform:none;color:var(--tf-wm);text-shadow:0 1px 0 var(--tf-wms);background:var(--tf-head);border-radius:4px 4px 0 0}
.dx-fp > .dx-ph2::before,.dx-cr-race > .dx-ph2::before,.dx-cr-class > .dx-ph2::before{content:none}
.dx-fp > .dx-ph2::after,.dx-cr-race > .dx-ph2::after,.dx-cr-class > .dx-ph2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--tf-gold2),var(--tf-gold));box-shadow:0 0 8px rgba(255,209,0,.35)}
.dx-lbl{font:700 12px/1.2 Cinzel,Georgia,serif;letter-spacing:.06em;color:var(--tf-ink2)}

/* ---- a talent node: a square icon in its frame, the ring says its state, a rank badge at its foot ---- */
.dx-node,.dx .dx-ci,.dx-ki{position:relative;flex:none;display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;border-radius:5px;overflow:visible;background:#000;box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-ring);transition:box-shadow .12s}
.dx .dx-ci{color:var(--cc,#e8e8e8);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--cc,#888) 34%,var(--tf-ci1)),var(--tf-ci2) 78%)}
.dx .dx-ci svg{width:62%;height:62%;filter:drop-shadow(0 1px 1px #000)}
.dx-ki img,.dx-ki svg{border-radius:5px}
.dx-ki-face img{transform:none}
.dx-ki-dum::before{border-radius:5px}
/* the rank badge (the site's): a black chip at the node's foot, grey; gold once learned */
.dx-node::after,.dx .dx-char .dx-ci::after,.dx-kind .dx-ki::after{position:absolute;right:-10px;bottom:-8px;z-index:2;box-sizing:border-box;min-width:26px;height:17px;padding:0 4px;font:400 11px/15px 'Open Sans',sans-serif;font-variant-numeric:tabular-nums;text-align:center;color:var(--tf-mute);background:#000;border:1px solid var(--tf-badge);border-radius:3px;pointer-events:none}
.dx .dx-char .dx-ci::after{content:"60"}
.dx-kind .dx-ki::after{content:"0/1"}
.dx-r60::after{content:"60"}.dx-r11::after{content:"1/1"}
.dx-node-add::after{content:"0/1"}
/* states: hover white, chosen (learned) gold with its badge gold */
.dx-char:hover .dx-ci,.dx-kind:hover .dx-ki,.dx-cls:hover .dx-ci,.dx-cs-new:hover .dx-node-add{box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
.dx .dx-char[aria-checked=true] .dx-ci,.dx .dx-cls[aria-checked=true] .dx-ci,.dx-kind[aria-checked=true] .dx-ki,.dx-lrn{box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-gold),0 0 14px rgba(255,209,0,.35)}
.dx .dx-char[aria-checked=true] .dx-ci::after,.dx-kind[aria-checked=true] .dx-ki::after,.dx-lrn::after{color:var(--tf-gold);border-color:var(--tf-badge-on);font-weight:700}
.dx-kind[aria-checked=true] .dx-ki::after{content:"1/1"}
/* a node you can learn: green, as the site marks one */
.dx-node-add{color:var(--tf-green);background:radial-gradient(circle at 50% 35%,var(--tf-add1),var(--tf-add2) 80%);box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-green)}
.dx-node-add svg{width:56%;height:56%}
.dx-cs-new:disabled .dx-node-add{color:var(--tf-ring);background:#000;box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-ring)}
.dx-node .dx-ki,.dx-node .dx-ci{width:100%;height:100%;box-shadow:none}
.dx-node .dx-ki::after,.dx-node .dx-ci::after{content:none}

/* ---- arrows: a talent's line to the next, grey, gold once lit ---- */
.dx-arw{display:block;flex:none;background:var(--tf-arw-r) 50% 50%/100% 100% no-repeat}
.dx-step-path .dx-arw{width:26px;height:12px;margin:0 3px}
.dx-arw-v{width:12px;height:30px;background-image:var(--tf-arw-on)}
/* the fighters' column: each node's arrow into the next, the one into the chosen fighter gold, the last into Create New Fighter */
.dx-cl{gap:4px}
.dx .dx-char:not(:last-child) .dx-ci::before{content:"";position:absolute;left:50%;top:calc(100% + 2px);width:12px;height:20px;margin-left:-6px;background:var(--tf-arw) 50% 0/12px 20px no-repeat;pointer-events:none}
.dx .dx-char:has(+ .dx-char[aria-checked=true]) .dx-ci::before{background-image:var(--tf-arw-on)}
.dx-cs-new .dx-node-add::before{content:"";position:absolute;left:50%;bottom:calc(100% + 2px);width:12px;height:18px;margin-left:-6px;background:var(--tf-arw) 50% 100%/12px 20px no-repeat}

/* ---- the buttons: a talent's frame (grey ring, white on a hover); the main one the capstone ---- */
.dl-ui .dx-btn,.dl-ui .dx-lobby button,.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ok{font:700 14px/1.05 Cinzel,Georgia,serif;letter-spacing:.03em;color:var(--tf-ink,#e8e8e8);text-shadow:0 1px 0 #000;background:linear-gradient(var(--tf-btn1),var(--tf-btn2));border:0;border-radius:5px;box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-btnr),0 3px 8px rgba(0,0,0,.5)}
.dl-ui .dx-btn:hover,.dl-ui .dx-lobby button:hover,.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ok:hover{filter:none;color:#fff;background:linear-gradient(var(--tf-btn1h),var(--tf-btn2h));box-shadow:0 0 0 1px #000,0 0 0 2px #fff,0 3px 8px rgba(0,0,0,.5)}
.dl-ui .dx-btn:disabled{filter:none;opacity:.45}
.dl-ui .dx-btn[data-f="del"]:hover,.dl-ui .dx-btn[data-f="delyes"]{color:var(--tf-redw)}
.dl-ui .dx-btn[data-f="delyes"]{box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-red),0 3px 8px rgba(0,0,0,.5)}
.dl-ui .dx-btn[data-f="delyes"]:hover{color:#fff;background:linear-gradient(var(--tf-red2),var(--tf-btn2));box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-red),0 3px 8px rgba(0,0,0,.5)}
/* Create New Fighter: the column's next node, one you can learn */
.dl-ui .dx-cs-new{justify-content:flex-start;gap:12px;min-height:64px;margin-top:6px;padding:6px 10px;text-align:left;font-size:15px;color:var(--tf-ink2);background:none;box-shadow:none}
.dl-ui .dx-cs-new:hover{background:linear-gradient(90deg,rgba(79,191,58,.12),transparent 85%);box-shadow:none;color:#fff}
/* the capstone: its node (the crossed blades), its words in the wordmark's gold; grey until the path to it is whole (the login's name) */
.dl-ui .dx-btn.dx-capst{gap:14px;min-height:62px;padding:0 30px 0 9px;font:700 21px/1 Cinzel,Georgia,serif;letter-spacing:.1em;text-transform:uppercase;color:var(--tf-wm);text-shadow:0 1px 0 var(--tf-wms),0 0 14px rgba(255,200,80,.25);
  background:radial-gradient(ellipse 70% 120% at 18% 0%,rgba(255,209,0,.16),transparent 62%),linear-gradient(var(--tf-p2),var(--tf-ground));border-radius:6px;
  box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-gold),0 0 0 3px #000,0 0 26px rgba(255,209,0,.28),0 8px 22px rgba(0,0,0,.6)}
.dl-ui .dx-btn.dx-capst:hover{color:var(--tf-gold4);background:radial-gradient(ellipse 70% 120% at 18% 0%,rgba(255,209,0,.26),transparent 62%),linear-gradient(var(--tf-cap1h),var(--tf-caph));box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-gold3),0 0 0 3px #000,0 0 34px rgba(255,209,0,.45),0 8px 22px rgba(0,0,0,.6)}
.dl-ui .dx-btn.dx-capst.dx-long{padding:0 22px 0 9px;font-size:17px;letter-spacing:.05em}
.dx-capst-n{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:5px;color:var(--tf-gold);background:radial-gradient(circle at 50% 30%,var(--tf-capn1),var(--tf-capn2) 80%);box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-gold)}
.dx-capst-n svg{width:66%;height:66%;filter:drop-shadow(0 1px 1px #000)}
.dx-capst-t{display:block}
.dx-lg-box:not(.dx-lit) .dx-btn.dx-capst{color:var(--tf-ink2);text-shadow:0 1px 0 #000;background:linear-gradient(var(--tf-p2),var(--tf-cap0));box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-ring),0 8px 22px rgba(0,0,0,.6)}
.dx-lg-box:not(.dx-lit) .dx-capst-n{color:var(--tf-ring);background:#000;box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-ring)}
.dx-lg-box:not(.dx-lit) .dx-btn.dx-capst:hover{color:#fff;box-shadow:0 0 0 1px #000,0 0 0 2px #fff,0 8px 22px rgba(0,0,0,.6)}
/* the small choices (run length, strength, spec, body): rank pips, grey ring, gold once taken */
.dl-ui .dx-row button{background:var(--tf-chip);border-radius:4px;box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-chipr)}
.dl-ui .dx-row button:hover{color:#fff;box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
.dl-ui .dx-row button[aria-checked=true]{color:var(--tf-gold);background:linear-gradient(rgba(255,209,0,.14),rgba(255,209,0,.04));box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-gold),0 0 10px rgba(255,209,0,.2)}
.dl-ui .dx-in{font:600 19px/1 'Open Sans',sans-serif;color:#fff;background:var(--tf-well);border:1px solid var(--tf-line);border-radius:4px;box-shadow:inset 0 2px 6px rgba(0,0,0,.9)}
.dl-ui .dx-in:focus{border-color:var(--tf-gold);box-shadow:inset 0 2px 6px rgba(0,0,0,.9),0 0 12px rgba(255,209,0,.3)}
.dx-in::placeholder{color:var(--tf-ph)}

/* ---- Login: the book and the wordmark, an arrow down into your name's column, its capstone Enter ---- */
.dx-login{gap:0}
.dx-lg-book{display:block;width:150px;height:auto;margin:0 auto -8px;filter:drop-shadow(0 0 22px rgba(255,190,70,.28)) drop-shadow(0 8px 16px rgba(0,0,0,.7));animation:dx-crest .8s cubic-bezier(.2,.8,.2,1) both}
.dx-title{margin:4px 0 0}
.dx-title small{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 10px;font:700 14px/1 Cinzel,Georgia,serif;letter-spacing:.38em;text-transform:uppercase;color:var(--tf-wm);text-shadow:0 1px 0 var(--tf-wms),0 1px 4px #000}
.dx-title small::before,.dx-title small::after{content:"";width:46px;height:2px;background:linear-gradient(90deg,transparent,var(--tf-gold))}
.dx-title small::after{background:linear-gradient(90deg,var(--tf-gold),transparent);margin-left:-.38em}
.dx-title span{display:block;margin:0;font-weight:900;letter-spacing:.04em;text-transform:none;color:var(--tf-wm);background:none;-webkit-text-fill-color:currentColor;filter:none;text-shadow:0 1px 0 var(--tf-wms),0 2px 0 var(--tf-wms),0 3px 0 var(--tf-wms),0 0 24px rgba(255,190,60,.3),0 6px 16px #000}
.dx-lg-tag{margin:10px 0 0;font-size:14px;color:var(--tf-ink2)}
.dx-lg-arw{margin:12px auto 10px}
.dx-lg-box{gap:0;width:min(400px,100%);padding:0;overflow:visible}
.dx-lg-box .dx-th-n{min-width:26px;height:17px;padding:0 4px;box-sizing:border-box;font:400 11px/15px 'Open Sans',sans-serif;text-align:center;color:var(--tf-mute);background:#000;border:1px solid var(--tf-badge);border-radius:3px}
.dx-lg-box.dx-lit .dx-th-n{color:var(--tf-gold);border-color:var(--tf-badge-on);font-weight:700}
.dx-lg-box .dx-tb{display:flex;flex-direction:column;gap:8px;padding:16px 18px 20px}
.dx-lg-hint{color:var(--tf-mute)}
.dl-ui .dx-lg-box .dx-btn-big{margin-top:10px}
.dx-lg-fine{color:var(--tf-fine)}

/* ---- Fighters ---- */
.dx-realm{grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;padding:10px 10px 10px 12px}
.dx-rl-n{grid-column:1;grid-row:1 / 4}
.dx-rl-k,.dx-realm b,.dx-realm small{grid-column:2}
.dl-ui .dx-realm .dx-btn{grid-column:3;grid-row:1 / 4}
.dx-rl-k{font:700 11px/1.2 Cinzel,Georgia,serif;letter-spacing:.12em;color:var(--tf-mute)}
.dx-realm b{color:var(--tf-wm);text-shadow:0 1px 0 var(--tf-wms)}
.dx-realm small{color:var(--tf-ink2)}
.dx-cs-list{padding:0;overflow:hidden}
.dx-cs-list .dx-tb{display:flex;flex-direction:column;min-height:0;flex:0 1 auto;padding:10px 8px 8px}
.dx-cl{padding:2px 2px 6px}
.dl-ui .dx-char{gap:14px;min-height:64px;padding:6px 10px 6px 8px;background:none;border-radius:4px;box-shadow:none}
.dl-ui .dx-char:hover{background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 85%);box-shadow:none}
.dl-ui .dx-char[aria-checked=true]{background:linear-gradient(90deg,rgba(255,209,0,.13),rgba(255,209,0,.03) 70%,transparent);box-shadow:none}
.dx-ct b{color:var(--tf-wm);text-shadow:0 1px 0 var(--tf-wms)}
.dx-ct small{color:var(--tf-ink2)}.dx-ct .dx-cz{color:var(--tf-mute)}
.dx-char:not([aria-checked=true]) .dx-ct b{color:var(--tf-ink)}
.dx-ct b i{color:var(--cw,var(--cc))}
.dx-cs-bars{padding:12px}
.dx-bars-h b{color:var(--tf-wm);text-shadow:0 1px 0 var(--tf-wms);letter-spacing:.04em;text-transform:none;font-size:14px}
.dx-bs{box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-chipr);background:var(--tf-deep)}
.dl-ui .dx-bdo{background:var(--tf-chip);box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-chipr)}
.dl-ui .dx-bdo:hover{background:var(--tf-btn2h);box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
.dx-bdo-i{box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-ring)}
.dx-bdo-t b{color:var(--tf-wm)}
.dl-ui .dx-bind{background:var(--tf-chip);box-shadow:0 0 0 1px var(--tf-chipr)}
/* the path to the capstone: your fighter, an arrow, your fight, an arrow, Enter Arena */
/* (29 Oct 2026, r15 review) the path and Enter Arena are both children of the foot, as the queue puts Leave queue right before
   Enter Arena; a grid keeps the message and Leave queue on rows of their own above, the path beside the capstone */
.dx-chars .dx-foot{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:0;row-gap:6px}
.dx-chars .dx-foot > .dx-err,.dx-chars .dx-foot > .dq-qleave{grid-column:1 / -1;justify-self:center}
.dx-chars .dx-foot > .dx-err{order:-2}.dx-chars .dx-foot > .dq-qleave{order:-1}
.dx-step-path{display:flex;align-items:center}
.dx-step-path:empty{display:none}
.dx-plate b{color:var(--tf-wm);text-shadow:0 1px 0 var(--tf-wms),0 2px 0 var(--tf-wms),0 3px 14px #000}
/* the Delete question */
.dx-dlg-in{padding:0 0 18px;overflow:hidden}
.dx-dlg-in h2{margin:0 0 12px;padding:11px 14px;font-size:17px;color:var(--tf-wm);text-shadow:0 1px 0 var(--tf-wms);background:var(--tf-head);border-bottom:3px solid var(--tf-red)}
.dx-dlg-in p,.dx-dlg-b{padding:0 16px}

/* ---- Fight: each kind a node in its row ---- */
.dl-ui .dx-kind{gap:14px;min-height:62px;padding:8px 12px 8px 9px;background:var(--tf-chip);box-shadow:none}
.dl-ui .dx-kind:hover{background:var(--tf-chip-h);box-shadow:none}
.dl-ui .dx-kind[aria-checked=true]{background:linear-gradient(90deg,rgba(255,209,0,.13),rgba(255,209,0,.03) 70%,var(--tf-chip));box-shadow:none}
.dx-kind[aria-checked=true] b{color:var(--tf-wm);text-shadow:0 1px 0 var(--tf-wms)}
.dx-kopts:not(:empty){background:var(--tf-deep);box-shadow:0 0 0 1px var(--tf-btn1)}

/* ---- Create: races and classes are nodes too ---- */
.dx-race img{border-radius:5px;box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-ring)}
.dl-ui .dx-race{background:var(--tf-chip);box-shadow:none}
.dl-ui .dx-race:hover{box-shadow:none;background:var(--tf-chip-h)}.dx-race:hover img{box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
.dl-ui .dx-race[aria-checked=true]{background:linear-gradient(90deg,rgba(255,209,0,.13),transparent);box-shadow:none}
.dx-race[aria-checked=true] img{box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-gold),0 0 12px rgba(255,209,0,.4)}
.dx-race[aria-checked=true] small{color:var(--tf-wm)}

/* the lobby and the setup's spellbook: the same column */
.dx-lob-in,.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-in{background:rgba(30,30,30,.97);border:0;border-radius:4px;box-shadow:0 0 0 1px #000,0 12px 30px rgba(0,0,0,.6)}

/* ---- a short desktop window ---- */
@media (min-width:901px) and (max-height:820px){
  .dl-ui .dx-btn.dx-capst{min-height:56px;font-size:19px}.dx-capst-n{width:40px;height:40px}
  .dl-ui .dx-char{min-height:58px}.dx .dx-char:not(:last-child) .dx-ci::before{height:16px;background-size:12px 16px}
  .dx-lg-book{width:120px}.dx-title{font-size:44px}.dx-lg-arw{height:22px;margin:8px auto 6px}
  .dx .dx-cls .dx-ci{width:40px;height:40px}
  .dx-fp,.dx-cr-race,.dx-cr-class{padding:0 10px 6px}.dx-fp > .dx-ph2,.dx-cr-race > .dx-ph2,.dx-cr-class > .dx-ph2{margin:0 -10px 8px;padding:9px 10px}
}
/* ---- a phone upright ---- */
@media (max-width:900px) and (orientation:portrait),(max-width:700px){
  .dx-cs-list .dx-th{display:none}
  .dx-cs-list .dx-tb{padding:6px 6px 4px;border-radius:4px}
  .dl-ui .dx-char{min-height:56px;padding:4px 8px 4px 6px}.dx .dx-ci{width:40px;height:40px}
  .dx .dx-char:not(:last-child) .dx-ci::before{height:14px;background-size:12px 14px}
  .dl-ui .dx-cs-new{min-height:52px;margin-top:4px;padding:4px 6px}.dx-cs-new .dx-node{width:36px;height:36px}.dx-cs-new .dx-node-add::before{display:none}
  .dl-ui .dx-btn.dx-capst{min-height:56px;padding:0 14px 0 7px;gap:10px;font-size:18px;letter-spacing:.06em}
  .dx-capst-n{width:40px;height:40px}
  .dx-chars .dx-foot{grid-template-columns:minmax(0,1fr)}.dx-chars .dx-step-path{display:none}.dl-ui .dx-chars .dx-foot .dx-btn.dx-capst{width:100%;min-width:0}
  .dx-lg-book{width:112px;margin-bottom:-6px}.dx-title{font-size:38px}.dx-title small{font-size:12px;letter-spacing:.3em;margin-bottom:8px}.dx-title small::before,.dx-title small::after{width:28px}.dx-title small::after{margin-left:-.3em}
  .dx-lg-tag{font-size:13px}.dx-lg-arw{height:22px;margin:8px auto 6px}
  .dx-fp,.dx-cr-race,.dx-cr-class{padding:0 6px 6px}.dx-fp > .dx-ph2,.dx-cr-race > .dx-ph2,.dx-cr-class > .dx-ph2{margin:0 -6px 6px;padding:8px 8px;font-size:13px}
  .dl-ui .dx-kind{min-height:54px;gap:12px;padding:5px 8px 5px 7px}.dx-ki{width:38px;height:38px}
  .dx-realm{padding:8px 8px 8px 10px;column-gap:10px}.dx-rl-n{width:38px;height:38px}
  .dx .dx-cls .dx-ci{width:36px;height:36px}
}
/* ---- a phone on its side ---- */
@media (orientation:landscape) and (max-width:900px){
  .dx-cs-list .dx-th{display:none}
  .dx-cs-list .dx-tb{padding:6px 4px 4px;border-radius:4px}
  .dl-ui .dx-char{min-height:48px;gap:10px}.dx .dx-char .dx-ci{width:32px;height:32px}
  .dx .dx-char:not(:last-child) .dx-ci::before{height:12px;background-size:12px 12px}
  .dx .dx-char .dx-ci::after{right:-8px;bottom:-6px;min-width:20px;height:14px;font-size:9px;line-height:12px}
  .dl-ui .dx-cs-new{min-height:44px;font-size:12px;padding:2px 6px}.dx-cs-new .dx-node{width:30px;height:30px}.dx-cs-new .dx-node-add::before,.dx-cs-new .dx-node-add::after{display:none}
  .dl-ui .dx-btn.dx-capst{min-height:46px;padding:0 16px 0 5px;gap:8px;font-size:15px}.dx-capst-n{width:34px;height:34px}
  .dx-chars .dx-step-path{display:none}
  .dx-realm{grid-template-columns:auto minmax(0,1fr)}.dx-rl-n{width:30px;height:30px;grid-row:1 / 3}
  .dl-ui .dx-realm .dx-btn{grid-column:1 / 3;grid-row:auto}
  .dx-lg-book{width:84px;margin-bottom:-4px}.dx-title{font-size:30px}.dx-title small{font-size:11px;margin-bottom:6px}.dx-lg-arw{display:none}
  .dx-login{gap:28px}
  .dx-fp,.dx-cr-race,.dx-cr-class{padding:0 6px 4px}.dx-fp > .dx-ph2,.dx-cr-race > .dx-ph2,.dx-cr-class > .dx-ph2{margin:0 -6px 5px;padding:6px 8px;font-size:12px}
  .dx .dx-cls .dx-ci{width:32px;height:32px}
  .dl-ui .dx-kind{min-height:44px;gap:10px}.dx-ki{width:32px;height:32px}.dx-kind .dx-ki::after{display:none}
}
/* ---- (from the tome look) the fighter's own face in its node; the class's sign stands in when a face fails to load ---- */
.dx .dx-ci.dx-face{background:#000}
.dx .dx-ci.dx-face img{display:block;width:100%;height:100%;object-fit:cover;border-radius:5px}
/* ---- (from the tome look) the ground under your fighter: a talent's square frame laid on the floor and seen from the front, its gold lit
   brighter at the near edge, a warm pool inside it; no ring ---- */
.dx-fig::after{border-radius:0;background:var(--tf-floor) 50% 50%/100% 100% no-repeat,radial-gradient(closest-side,rgba(255,214,140,.3),rgba(255,170,70,.1) 62%,transparent 80%)}
.dx-ped{border-radius:0;background:var(--tf-floor) 50% 50%/100% 100% no-repeat,radial-gradient(ellipse 50% 50% at 50% 55%,rgba(255,214,140,.32),rgba(255,160,60,.1) 62%,transparent 80%)}
@media (prefers-reduced-motion:reduce){.dx-lg-book{animation:none}.dx-th::after{transition:none}}

/* ==================================================================================================================================
   (30 Oct 2026, Chris on the way in: "lets make it the real class icons on the right side. and spellbook is not a good looking bar ui on
   this screen. basically work on that beginning ui to be more polished & thought about with more detail & design. Like that enter duel
   icon is very basic & very ai sloppy. all needs to be improved.") THE PLAQUE LOOK, over the tree look above:
   - every picture is the game's own icon in a talent's square frame (the calculator's ring: grey, white on a hover, gold when chosen),
     classes by their class icons, specs by their trees' icons, bodies by their faces; a choice you cannot make goes grey
   - a button is a plaque drawn here (an SVG of ours as its border image): a dark warm face, its corners cut inward as a book plate's,
     bronze for the quiet ones; the main one in gold with a second gold line inside, its words alone, flanked by two short gold rules as the
     wordmark's TALENTS FOREVER is
   - a panel is warm black under one fine gold line; its title the wordmark's small capitals between two rules, no grey header bar
   - the bars are bars: six sockets in a housing, the key in each socket's top right as the game writes it, an empty socket drawn empty
   Gold and dark only (pick-gold-not-class-light, pick-no-red-yellow-buttons), class colour on class names only
   ================================================================================================================================== */
:root{
  /* the main plaque: 48 x 48, sliced at 12 (its cut corners and the inner line live in the slices) */
  --pl1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23352910'/%3E%3Cstop offset='.42' stop-color='%231a140a'/%3E%3Cstop offset='1' stop-color='%230b0805'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b0'/%3E%3Cstop offset='.38' stop-color='%23ffd100'/%3E%3Cstop offset='.74' stop-color='%23a2760f'/%3E%3Cstop offset='1' stop-color='%23e3b236'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7 .75H41A7 7 0 0 0 47.25 7V41A7 7 0 0 0 41 47.25H7A7 7 0 0 0 .75 41V7A7 7 0 0 0 7 .75Z' fill='url(%23f)' stroke='url(%23g)' stroke-width='1.5'/%3E%3Cpath d='M10 4H38A10.8 10.8 0 0 0 44 10V38A10.8 10.8 0 0 0 38 44H10A10.8 10.8 0 0 0 4 38V10A10.8 10.8 0 0 0 10 4Z' fill='none' stroke='%23ffd100' stroke-opacity='.42'/%3E%3C/svg%3E");
  --pl1h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23463613'/%3E%3Cstop offset='.42' stop-color='%23241b0c'/%3E%3Cstop offset='1' stop-color='%23100c06'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fffbe6'/%3E%3Cstop offset='.38' stop-color='%23ffe066'/%3E%3Cstop offset='.74' stop-color='%23c4911a'/%3E%3Cstop offset='1' stop-color='%23ffd75e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7 .75H41A7 7 0 0 0 47.25 7V41A7 7 0 0 0 41 47.25H7A7 7 0 0 0 .75 41V7A7 7 0 0 0 7 .75Z' fill='url(%23f)' stroke='url(%23g)' stroke-width='1.5'/%3E%3Cpath d='M10 4H38A10.8 10.8 0 0 0 44 10V38A10.8 10.8 0 0 0 38 44H10A10.8 10.8 0 0 0 4 38V10A10.8 10.8 0 0 0 10 4Z' fill='none' stroke='%23ffe680' stroke-opacity='.7'/%3E%3C/svg%3E");
  /* the main plaque before its path is whole (the login's name): the same in grey */
  --pl1g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23242220'/%3E%3Cstop offset='.42' stop-color='%23141311'/%3E%3Cstop offset='1' stop-color='%230a0909'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b0aca4'/%3E%3Cstop offset='.5' stop-color='%23767370'/%3E%3Cstop offset='1' stop-color='%235a5856'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7 .75H41A7 7 0 0 0 47.25 7V41A7 7 0 0 0 41 47.25H7A7 7 0 0 0 .75 41V7A7 7 0 0 0 7 .75Z' fill='url(%23f)' stroke='url(%23g)' stroke-width='1.5'/%3E%3Cpath d='M10 4H38A10.8 10.8 0 0 0 44 10V38A10.8 10.8 0 0 0 38 44H10A10.8 10.8 0 0 0 4 38V10A10.8 10.8 0 0 0 10 4Z' fill='none' stroke='%23a09c96' stroke-opacity='.25'/%3E%3C/svg%3E");
  /* the quiet plaque: 32 x 32, sliced at 8; bronze, gold on a hover, gold and warm when chosen */
  --pl2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23231e16'/%3E%3Cstop offset='1' stop-color='%230d0b08'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4.5 .5H27.5A4.5 4.5 0 0 0 31.5 4.5V27.5A4.5 4.5 0 0 0 27.5 31.5H4.5A4.5 4.5 0 0 0 .5 27.5V4.5A4.5 4.5 0 0 0 4.5 .5Z' fill='url(%23f)' stroke='%23806b42'/%3E%3C/svg%3E");
  --pl2h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232e271b'/%3E%3Cstop offset='1' stop-color='%2312100b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4.5 .5H27.5A4.5 4.5 0 0 0 31.5 4.5V27.5A4.5 4.5 0 0 0 27.5 31.5H4.5A4.5 4.5 0 0 0 .5 27.5V4.5A4.5 4.5 0 0 0 4.5 .5Z' fill='url(%23f)' stroke='%23e8c062'/%3E%3C/svg%3E");
  --pl2on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233d2e0c'/%3E%3Cstop offset='1' stop-color='%23151007'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4.5 .5H27.5A4.5 4.5 0 0 0 31.5 4.5V27.5A4.5 4.5 0 0 0 27.5 31.5H4.5A4.5 4.5 0 0 0 .5 27.5V4.5A4.5 4.5 0 0 0 4.5 .5Z' fill='url(%23f)' stroke='%23ffd100' stroke-width='1.25'/%3E%3C/svg%3E");
  --pl-line:rgba(232,192,98,.3);--pl-ink:#ece2cb;--pl-mute:#a89c84;--pl-face:#0c0a08;
}

/* ---- a panel: warm black under one fine gold line ---- */
.dx-panel{background:linear-gradient(180deg,rgba(21,18,14,.95),rgba(10,9,7,.95));border-radius:3px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px var(--pl-line),inset 0 1px 0 1px rgba(255,226,160,.05),0 14px 34px rgba(0,0,0,.55)}
/* its title: the wordmark's small capitals between two fine rules (Race, Class, Choose your fight) */
.dx-fp > .dx-ph2,.dx-cr-race > .dx-ph2,.dx-cr-class > .dx-ph2{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:15px 2px 0;background:none;border-radius:0;font:700 13px/1 Cinzel,Georgia,serif;letter-spacing:.24em;text-transform:uppercase;color:var(--tf-wm);text-shadow:0 1px 0 #000}
.dx-fp > .dx-ph2::before,.dx-cr-race > .dx-ph2::before,.dx-cr-class > .dx-ph2::before,.dx-fp > .dx-ph2::after,.dx-cr-race > .dx-ph2::after,.dx-cr-class > .dx-ph2::after{content:"";position:static;flex:1 1 0;height:1px;box-shadow:none;background:linear-gradient(90deg,transparent,rgba(232,192,98,.65))}
.dx-fp > .dx-ph2::after,.dx-cr-race > .dx-ph2::after,.dx-cr-class > .dx-ph2::after{background:linear-gradient(90deg,rgba(232,192,98,.65),transparent)}
.dx-fp > .dx-ph2{letter-spacing:.18em}
/* a column's header (Your fighters): the same small capitals, its count at the right, the line under it the count's share */
.dx-th{background:none;border-radius:0;min-height:44px;padding:8px 12px 6px;box-shadow:inset 0 -1px 0 rgba(232,192,98,.16)}
.dx-th::after{height:1px;box-shadow:none}
.dx-th .dx-ph2{font:700 13px/1.2 Cinzel,Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:var(--tf-wm);text-shadow:0 1px 0 #000}
.dx-th-n{font:600 12px/1 'Open Sans',sans-serif;color:var(--pl-mute)}
.dx-tb{background:none}
/* a sub-heading inside a panel (Body, Spec, Its class, Run length) */
.dx-lbl{display:flex;align-items:center;gap:10px;margin:14px 0 8px;font:700 11px/1 Cinzel,Georgia,serif;letter-spacing:.2em;text-transform:uppercase;color:var(--pl-mute)}
.dx-lbl::before,.dx-lbl::after{content:"";flex:1 1 0;height:1px;background:rgba(232,192,98,.18)}
.dx-kopts .dx-lbl{margin:4px 0 8px}.dx-kopts .dx-lbl::before{content:none}

/* ---- the plaques ---- */
.dl-ui .dx-btn,.dl-ui .dx-lobby button{min-height:46px;padding:0 10px;border:8px solid transparent;border-image:var(--pl2) 8 fill / 8px stretch;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));
  font:700 14px/1 Cinzel,Georgia,serif;letter-spacing:.06em;color:var(--pl-ink);text-shadow:0 1px 0 #000;transition:color .12s}
.dl-ui .dx-btn:hover,.dl-ui .dx-lobby button:hover{border-image-source:var(--pl2h);background:none;box-shadow:none;color:#fff;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
.dl-ui .dx-btn:active{transform:translateY(1px)}
.dl-ui .dx-btn:disabled,.dl-ui .dx-btn:disabled:hover{border-image-source:var(--pl2);color:var(--pl-ink);opacity:.4}
.dl-ui .dx-btn-sm{min-height:40px;padding:0 8px;font-size:13px}
@media (pointer:coarse){.dl-ui .dx-btn-sm{min-height:44px}}
.dl-ui .dx-btn img{flex:none;display:block;width:24px;height:24px;border-radius:2px;box-shadow:0 0 0 1px #000,0 0 0 2px #5c4d30}
.dl-ui .dx-btn[data-f="del"]:hover{color:var(--tf-redw)}
.dl-ui .dx-btn[data-f="delyes"]{color:var(--tf-redw)}
.dl-ui .dx-btn[data-f="delyes"]:hover{color:#fff}
/* the main plaque: gold, its words alone between two short rules */
.dl-ui .dx-btn.dx-capst,.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ok{gap:0;min-height:60px;padding:0 20px;border:12px solid transparent;border-image:var(--pl1) 12 fill / 12px stretch;border-radius:0;background:none;box-shadow:none;
  filter:drop-shadow(0 0 12px rgba(255,186,40,.22)) drop-shadow(0 6px 10px rgba(0,0,0,.65));font:700 20px/1 Cinzel,Georgia,serif;letter-spacing:.15em;text-transform:uppercase;color:var(--tf-wm);text-shadow:0 1px 0 #3d2c05,0 0 14px rgba(255,190,60,.35)}
.dl-ui .dx-btn.dx-capst:hover,.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ok:hover{border-image-source:var(--pl1h);background:none;box-shadow:none;color:var(--tf-gold4);filter:drop-shadow(0 0 18px rgba(255,196,50,.4)) drop-shadow(0 6px 10px rgba(0,0,0,.65))}
.dl-ui .dx-btn.dx-capst.dx-long{padding:0 14px;font-size:17px;letter-spacing:.08em}
.dx-capst-t{display:flex;align-items:center;gap:12px;white-space:nowrap}
.dx-capst-t::before,.dx-capst-t::after{content:"";flex:none;width:16px;height:1px;background:linear-gradient(90deg,transparent,currentColor);opacity:.75}
.dx-capst-t::after{background:linear-gradient(90deg,currentColor,transparent)}
.dx-lg-box:not(.dx-lit) .dx-btn.dx-capst{border-image-source:var(--pl1g);color:#cfcac0;text-shadow:0 1px 0 #000;filter:drop-shadow(0 6px 10px rgba(0,0,0,.65))}
.dx-lg-box:not(.dx-lit) .dx-btn.dx-capst:hover{border-image-source:var(--pl1h);color:var(--tf-gold4)}

/* the small choices (spec, body, run length, strength, the bot's spec): quiet plaques, gold when chosen */
.dl-ui .dx-row button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 6px;border:8px solid transparent;border-image:var(--pl2) 8 fill / 8px stretch;border-radius:0;background:none;box-shadow:none;font:700 13px/1.05 Cinzel,Georgia,serif;letter-spacing:.04em;color:var(--pl-ink)}
.dl-ui .dx-row button:hover{border-image-source:var(--pl2h);background:none;box-shadow:none;color:#fff}
.dl-ui .dx-row button[aria-checked=true]{border-image-source:var(--pl2on);background:none;box-shadow:none;color:var(--tf-wm);text-shadow:0 1px 0 #3d2c05,0 0 10px rgba(255,190,60,.3)}
.dl-ui .dx-row button img{flex:none;display:block;border-radius:3px;box-shadow:0 0 0 1px #000,0 0 0 2px #5a5a5a}
.dl-ui .dx-row button:hover img{box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
.dl-ui .dx-row button[aria-checked=true] img{box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-gold),0 0 10px rgba(255,209,0,.35)}

/* ---- a talent's frame for an icon: black, the ring grey, white on a hover, gold when chosen ---- */
.dx-ico{position:relative;flex:none;display:block;width:52px;height:52px;border-radius:4px;background:#000;box-shadow:0 0 0 1px #000,0 0 0 2px #5e5e5e,0 4px 10px rgba(0,0,0,.6);transition:box-shadow .12s}
.dx-ico img{display:block;width:100%;height:100%;border-radius:4px;object-fit:cover}
.dx-ico::after{content:"";position:absolute;inset:0;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.75),inset 0 0 9px rgba(0,0,0,.5);pointer-events:none}

/* ---- Login: the book, the name, your name and Enter as one line ---- */
.dx-login{justify-content:center;gap:0;padding:18px 16px 70px}
.dx-lg-head{margin-bottom:30px}
.dx-lg-book{width:136px;margin:0 auto -6px}
.dx-title{font-size:58px}
.dx-title small{font-size:13px;letter-spacing:.42em;margin-bottom:12px}
.dx-title small::before,.dx-title small::after{width:54px;height:1px}
.dx-lg-tag{margin:14px 0 0;font:400 15px/1.4 'Open Sans',sans-serif;color:#d9d0bd;text-shadow:0 1px 4px #000}
.dx-lg-box{display:flex;flex-direction:column;align-items:stretch;gap:0;width:min(470px,100%);padding:0;background:none;box-shadow:none;overflow:visible}
.dx-lg-l{align-self:flex-start;margin:0 0 8px 2px;font:700 12px/1 Cinzel,Georgia,serif;letter-spacing:.22em;text-transform:uppercase;color:var(--tf-wm);text-shadow:0 1px 3px #000}
.dx-lg-field{display:flex;align-items:stretch;gap:0}
.dl-ui .dx-lg-field .dx-in{flex:1 1 auto;min-width:0;width:auto;min-height:60px;margin-right:-4px;padding:0 18px;text-align:left;font:600 20px/1 'Open Sans',sans-serif;letter-spacing:.02em;color:#fff;
  background:linear-gradient(#050403,#0f0c09);border:1px solid #6e5a34;border-right:0;border-radius:3px 0 0 3px;box-shadow:inset 0 2px 8px rgba(0,0,0,.95),0 6px 14px rgba(0,0,0,.5)}
.dl-ui .dx-lg-field .dx-in:focus{border-color:#d9b24a;box-shadow:inset 0 2px 8px rgba(0,0,0,.95),0 0 0 1px rgba(255,209,0,.25),0 6px 14px rgba(0,0,0,.5)}
.dl-ui .dx-lg-field .dx-btn.dx-capst{flex:none;width:auto;min-width:0;margin:0;padding:0 18px}
.dx-lg-hint{margin:10px 0 0 2px;text-align:left;font:400 13px/1.4 'Open Sans',sans-serif;color:var(--pl-mute);text-shadow:0 1px 3px #000}
.dx-lg-ch{margin:0 0 12px;text-align:left;font-size:15px;line-height:1.4;color:#efe6d2;text-shadow:0 1px 3px #000}
.dx-lg-box .dx-err{margin:8px 0 0 2px;text-align:left}
.dx-lg-arw,.dx-lg-box .dx-th{display:none}

/* ---- Create ---- */
/* the foot under all three columns, as the game's create screen keeps Back at the left and its main button at the right */
.dx-create{grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:"race fig class" "race plate class" "foot foot foot"}
.dx-cr-race,.dx-cr-class{padding:0 14px 14px}
/* races: each face in its frame, the name beside it */
.dx-sides{gap:6px 10px}
.dx-side{gap:6px}
.dx-side p{margin:0 0 4px;font:700 11px/1 Cinzel,Georgia,serif;letter-spacing:.2em}
.dl-ui .dx-race{gap:10px;min-height:52px;padding:4px 6px 4px 4px;background:transparent;border-radius:3px;box-shadow:none}
.dl-ui .dx-race:hover{background:rgba(255,236,190,.05);box-shadow:none}
.dx-race img{width:42px;height:42px;border-radius:3px;box-shadow:0 0 0 1px #000,0 0 0 2px #5e5e5e}
.dx-race small{font:700 12px/1.15 Cinzel,Georgia,serif;letter-spacing:.02em;color:var(--pl-ink)}
.dl-ui .dx-race[aria-checked=true]{background:linear-gradient(90deg,rgba(255,209,0,.14),rgba(255,209,0,.02));box-shadow:inset 0 0 0 1px rgba(255,209,0,.3)}
.dx-race[aria-checked=true] img{box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-gold),0 0 12px rgba(255,209,0,.4)}
.dx-race[aria-checked=true] small{color:var(--tf-wm)}
/* a choice the class or race cannot take: grey, its picture out of colour; pressing it still picks a pair that can */
.dx-na{opacity:1}
.dx-race.dx-na img,.dx-cls.dx-na .dx-ico img{filter:grayscale(1) brightness(.42) contrast(1.1)}
.dx-race.dx-na small{color:#6d675e}
.dx-race.dx-na:hover img,.dx-cls.dx-na:hover .dx-ico img{filter:grayscale(.6) brightness(.7)}
/* the body: two plaques, each with its face */
.dx-sexr{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dl-ui .dx-sex{justify-content:flex-start;gap:10px;padding:0 8px 0 4px;min-height:52px}
.dl-ui .dx-sex img{width:30px;height:30px;object-fit:cover}
/* classes: the game's class icons in a talent's frame, the name in the class colour under it */
.dx-classes{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 4px}
.dl-ui .dx-cls{gap:8px;min-height:0;padding:2px 0 0;background:none;box-shadow:none;border-radius:0}
.dl-ui .dx-cls:hover,.dl-ui .dx-cls[aria-checked=true]{background:none;box-shadow:none}
.dx-cls small{font:700 12px/1 Cinzel,Georgia,serif;letter-spacing:.03em;color:var(--cw,var(--cc));text-shadow:0 1px 2px #000;padding-bottom:4px;border-bottom:2px solid transparent}
.dx-cls:hover .dx-ico{box-shadow:0 0 0 1px #000,0 0 0 2px #fff,0 4px 10px rgba(0,0,0,.6)}
.dx-cls[aria-checked=true] .dx-ico{box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-gold),0 0 0 3px #000,0 0 18px rgba(255,209,0,.45)}
.dx-cls[aria-checked=true] small{border-bottom-color:var(--tf-gold)}
.dx-cls.dx-na small{color:#6d675e}
.dx-cls.dx-na .dx-ico{box-shadow:0 0 0 1px #000,0 0 0 2px #3a3a3a}
/* specs: one under another, each with its tree's icon */
.dx-specr{display:grid;grid-template-columns:1fr;gap:6px;margin:0}
.dl-ui .dx-specr .dx-spec{justify-content:flex-start;gap:12px;min-height:50px;padding:0 10px 0 2px;font-size:14px;letter-spacing:.05em}
.dl-ui .dx-spec img{width:30px;height:30px}
/* the foot: Back and Random at the left, the book's two in the middle, the main plaque at the right */
.dx-create .dx-foot,.dx-fight .dx-foot{grid-area:foot;min-width:0}
.dx-go-row{display:flex;align-items:center;justify-content:flex-start;gap:8px}
.dx-go-sub{display:flex;align-items:center;gap:8px}
.dx-go-sub:empty{display:none}
.dx-go-bars{margin-left:auto}
.dl-ui .dx-go-row .dx-btn:not(.dx-btn-big){min-height:48px;padding:0 12px}
.dl-ui .dx-go-row .dx-bkb{gap:9px;padding:0 14px 0 6px}
.dl-ui .dx-go-row .dx-btn.dx-capst{margin-left:10px;min-width:280px}
.dx-go-row > .dq-qleave{margin-left:10px}

/* ---- Fight: the choice on the right under its title, your fighter at the left, the foot under both ---- */
.dx-fight{grid-template-columns:minmax(0,1fr) minmax(400px,560px);grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:"fig fp" "plate fp" "foot foot"}
.dx-fp{padding:0 14px 14px}
.dx-kinds{gap:6px}
.dl-ui .dx-kind{gap:14px;min-height:66px;padding:8px 14px 8px 10px;background:rgba(255,236,190,.025);border-radius:3px;box-shadow:inset 0 0 0 1px rgba(232,192,98,.12)}
.dl-ui .dx-kind:hover{background:rgba(255,236,190,.06);box-shadow:inset 0 0 0 1px rgba(232,192,98,.32)}
.dl-ui .dx-kind[aria-checked=true]{background:linear-gradient(90deg,rgba(255,209,0,.15),rgba(255,209,0,.03) 75%);box-shadow:inset 0 0 0 1px rgba(255,209,0,.5),inset 3px 0 0 var(--tf-gold)}
.dx-kind .dx-ki{width:46px;height:46px;border-radius:4px;box-shadow:0 0 0 1px #000,0 0 0 2px #5e5e5e}
.dx-kind:hover .dx-ki{box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
.dx-kind[aria-checked=true] .dx-ki{box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-gold),0 0 14px rgba(255,209,0,.4)}
.dx-kind .dx-ki::after,.dx-kind[aria-checked=true] .dx-ki::after{content:none}
.dx-kind b{font:700 17px/1.1 Cinzel,Georgia,serif;letter-spacing:.03em;color:var(--pl-ink)}
.dx-kind small{font:400 13px/1.35 'Open Sans',sans-serif;color:var(--pl-mute)}
.dx-kind[aria-checked=true] small{color:#e2d8c2}
.dx-ktag{font:700 10.5px/1 Cinzel,Georgia,serif;letter-spacing:.18em;color:var(--pl-mute)}
.dx-kopts:not(:empty){margin-top:4px;padding:12px 12px 6px;background:rgba(0,0,0,.35);border-radius:3px;box-shadow:inset 0 0 0 1px rgba(232,192,98,.14)}
.dx-kopts .dx-row:not(.dx-faces) button{padding:0 6px}
.dx-kopts .dx-note{margin:6px 0 6px;font-size:13px;line-height:1.45;color:#c9bfab}
/* the bot's class: its face in a talent's frame, its name in its class colour */
.dx-faces{gap:8px 6px}
.dl-ui .dx-faces button{border:0;border-image:none;min-height:0;padding:3px 0 2px;background:none;box-shadow:none;border-radius:3px}
.dl-ui .dx-faces button:hover{border:0;background:rgba(255,236,190,.05)}
.dl-ui .dx-faces button[aria-checked=true]{border:0;background:rgba(255,209,0,.1);box-shadow:inset 0 0 0 1px rgba(255,209,0,.4)}
.dx-faces img{border-radius:3px;box-shadow:0 0 0 1px #000,0 0 0 2px #5e5e5e;filter:saturate(.7) brightness(.8)}
.dl-ui .dx-faces button[aria-checked=true] img{box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-gold)}
.dl-ui .dx-faces button[data-bot=""]{min-height:62px;font:700 12px/1 Cinzel,Georgia,serif;letter-spacing:.1em;text-transform:uppercase;color:var(--pl-ink);box-shadow:inset 0 0 0 1px rgba(232,192,98,.3)}
.dl-ui .dx-faces button[data-bot=""][aria-checked=true]{color:var(--tf-wm);box-shadow:inset 0 0 0 1px var(--tf-gold)}
.dx-faces small{margin-top:5px;font:700 9.5px/1.1 Cinzel,Georgia,serif;letter-spacing:.02em}
.dx-fight .dx-plate{align-self:end;padding-bottom:4px}
/* the foot: Back at the left, the book's two in the middle, Enter Arena at the right under the choices */
.dl-ui .dx-fight .dx-go-row .dx-btn.dx-capst{min-width:300px}

/* ---- Fighters: the foot is Enter Arena alone; the realm's Change and the side buttons are quiet plaques ---- */
.dl-ui .dx-realm .dx-btn{padding:0 6px}
.dx-chars .dx-foot{grid-template-columns:auto}
.dl-ui .dx-chars .dx-btn-big{min-width:min(320px,100%)}
.dx .dx-char .dx-ci{width:46px;height:46px;border-radius:4px}
.dx .dx-ci.dx-face img{border-radius:4px}
.dx-kind .dx-ki img,.dx-rl-n img{border-radius:4px}
.dl-ui .dx-cs-new{border:0;border-image:none;filter:none}

/* the Fighters screen's Spellbook, Key bindings (and the talents lane's Talents) under your bars: quiet plaques with their icons */
.dl-ui .dx-bdo{min-height:50px;padding:0 10px 0 2px;border:8px solid transparent;border-image:var(--pl2) 8 fill / 8px stretch;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
.dl-ui .dx-bdo:hover{border-image-source:var(--pl2h);background:none;box-shadow:none}
.dx-bdo-i{width:30px;height:30px;border-radius:3px;box-shadow:0 0 0 1px #000,0 0 0 2px #5c4d30}
.dx-bdo:hover .dx-bdo-i{box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
.dx-bdo-t b{font:700 14px/1.1 Cinzel,Georgia,serif;letter-spacing:.05em;color:var(--pl-ink)}
.dx-bdo:hover .dx-bdo-t b{color:#fff}
.dl-ui .dx-bind{min-height:32px;border-radius:3px;font:700 11.5px/1 Cinzel,Georgia,serif;letter-spacing:.06em;color:var(--pl-ink);background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(232,192,98,.35)}
.dl-ui .dx-bind:hover{color:#fff;box-shadow:inset 0 0 0 1px #e8c062}
.dx-bars-h b{font:700 12px/1 Cinzel,Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:var(--tf-wm)}
/* ---- the bars: six sockets in a housing, the key in each socket's top right ---- */
.dx-bars-r{gap:3px;margin-bottom:4px;padding:3px;background:linear-gradient(#060504,#0e0c09);border-radius:3px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(232,192,98,.2)}
.dx-bs{border-radius:2px;background:radial-gradient(circle at 50% 40%,#17140f,#070605 75%);box-shadow:inset 0 1px 4px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,236,190,.06)}
.dx-bs img{border-radius:2px}
.dx-bs kbd,.dx-bk-s kbd{left:auto;right:3px;top:2px;font:700 11px/1 'Open Sans',sans-serif;letter-spacing:0;color:#f2f2f2;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 3px #000}
.dx-bars-3{border-bottom:0;padding-bottom:3px;margin-bottom:6px}

/* ---- the Spellbook before a fight ---- */
.dx-bk-ic{display:contents}
.dx-book:not(.dx-dock):not(.dx-sheet){background:rgba(4,3,2,.62)}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-in{width:min(820px,100%);background:linear-gradient(180deg,rgba(23,19,14,.985),rgba(11,9,7,.985));border-radius:3px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(232,192,98,.34),inset 0 0 0 4px rgba(11,9,7,.6),inset 0 0 0 5px rgba(232,192,98,.12),0 18px 44px rgba(0,0,0,.7)}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-h{align-items:center;gap:14px;padding:14px 12px 12px 22px;border-bottom:0;box-shadow:inset 0 -1px 0 rgba(232,192,98,.18)}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-h b{font:700 22px/1 Cinzel,Georgia,serif;letter-spacing:.08em;color:var(--tf-wm);text-shadow:0 1px 0 #3d2c05,0 0 14px rgba(255,190,60,.25)}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-h small{font:600 13px/1 'Open Sans',sans-serif;letter-spacing:.01em}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-tabs{margin-left:auto;gap:2px}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-t{min-height:34px;padding:0 14px;border:0;border-image:none;filter:none;background:none;border-radius:0;font:700 12px/1 Cinzel,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:var(--pl-mute);box-shadow:inset 0 -1px 0 rgba(232,192,98,.2)}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-t:hover{color:#fff}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-t[aria-selected=true]{color:var(--tf-wm);background:linear-gradient(transparent,rgba(255,209,0,.08));box-shadow:inset 0 -2px 0 var(--tf-gold)}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-x{margin-left:6px;min-height:36px;width:36px;padding:0;border:0;border-image:none;filter:none;background:none;font:400 24px/1 'Open Sans',sans-serif;color:var(--pl-mute)}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-x:hover{color:#fff}
/* the spells: a framed grid, each an icon in a talent's frame, its name and the level it comes at; one on your bars carries its key */
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-l{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:4px 10px;padding:14px 18px 12px;align-content:start}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-i{gap:11px;min-height:52px;padding:4px 6px 4px 4px;border-radius:3px;box-shadow:none}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-i:hover{background:rgba(255,236,190,.05);box-shadow:none}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ic{position:relative;display:block;flex:none;width:40px;height:40px}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ic img{width:40px;height:40px;border-radius:3px;box-shadow:0 0 0 1px #000,0 0 0 2px #575757}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-i:hover .dx-bk-ic img{box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-i.dx-on .dx-bk-ic img{box-shadow:0 0 0 1px #000,0 0 0 2px #c9a23e}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ic[data-key]:not([data-key=""])::after{content:attr(data-key);position:absolute;right:-7px;bottom:-6px;min-width:18px;height:16px;padding:0 3px;box-sizing:border-box;
  font:700 10px/14px 'Open Sans',sans-serif;text-align:center;color:var(--tf-gold);background:#000;border:1px solid #6a5510;border-radius:3px;pointer-events:none}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-i b{font:700 13.5px/1.2 Cinzel,Georgia,serif;letter-spacing:.01em;color:var(--pl-ink)}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-i small{margin-top:2px;font:400 11.5px/1.2 'Open Sans',sans-serif;color:#8f8676}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-i.dx-on small::after{content:none}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-i.dx-hd{background:rgba(255,209,0,.1);box-shadow:inset 0 0 0 1px var(--tf-gold)}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-tip{min-height:0;height:auto;margin:0 18px;padding:9px 2px;border-top:1px solid rgba(232,192,98,.16);font:400 12.5px/1.45 'Open Sans',sans-serif;color:#b3a993;text-align:center}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-tip{flex:none}
@media (min-width:601px) and (min-height:521px){.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-tip{height:58px;padding:9px 2px 0;overflow:hidden}}
/* the bars: each a housing of six sockets, its name at its left; the third over the first two, apart from them, as in the fight */
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-bars{padding:8px 18px 4px;display:flex;flex-direction:column;align-items:center}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-r{position:relative;width:max-content;max-width:100%;grid-template-columns:52px repeat(6,50px);gap:4px;justify-content:center;align-items:center;margin:0 0 10px;padding:0;border:0;--hl:56px}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-r3{margin-bottom:14px}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-rn{justify-self:stretch;align-self:stretch;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;font:700 11px/1 Cinzel,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--pl-mute);text-align:right}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-r::before{content:"";position:absolute;z-index:0;top:-4px;bottom:-4px;left:calc(var(--hl) - 4px);right:-4px;border-radius:3px;pointer-events:none;background:linear-gradient(#060504,#100d0a);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(232,192,98,.24),inset 0 1px 0 1px rgba(255,236,190,.04)}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-s{z-index:1;border:0;border-image:none;filter:none;border-radius:2px;background:radial-gradient(circle at 50% 40%,#1a1610,#060504 76%);box-shadow:inset 0 1px 5px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,236,190,.07)}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-s:hover{box-shadow:inset 0 1px 5px rgba(0,0,0,.95),0 0 0 1px #fff}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-s img{border-radius:2px;box-shadow:inset 0 0 0 1px #000}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-s kbd{font-size:12px}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-bars.dx-hold .dx-bk-s{box-shadow:inset 0 1px 5px rgba(0,0,0,.95),0 0 0 1px rgba(255,209,0,.75)}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-s.dx-hd{box-shadow:0 0 0 2px var(--tf-gold),0 0 12px rgba(255,209,0,.5)}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-f{align-items:center;gap:8px;padding:8px 18px 16px}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-f .dx-btn,.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-f button:not(.dx-bk-ok){min-height:44px;padding:0 10px;border:8px solid transparent;border-image:var(--pl2) 8 fill / 8px stretch;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));font:700 13px/1 Cinzel,Georgia,serif;letter-spacing:.06em;color:var(--pl-ink)}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-f button:not(.dx-bk-ok):hover{border-image-source:var(--pl2h);color:#fff}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-f button:not(.dx-bk-ok):disabled{opacity:.38;border-image-source:var(--pl2)}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ok{min-height:50px;min-width:140px;margin-left:8px;padding:0 12px;font-size:16px;letter-spacing:.14em}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-f .dx-bk-off{margin-right:auto}
/* the key bindings view in the same window */
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-kl{padding:10px 18px 12px}
.dx-book:not(.dx-dock):not(.dx-sheet) .dx-kg h4{font:700 12px/1.2 Cinzel,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:var(--tf-wm)}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-kb{border:0;border-image:none;filter:none;border-radius:3px;background:#0b0a08;box-shadow:inset 0 0 0 1px rgba(232,192,98,.25)}
.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-kb:hover{box-shadow:inset 0 0 0 1px #fff}

/* ---- the lobby's buttons and a friend's link keep the quiet plaque; its Copy the main one, small ---- */
.dl-ui .dx-lob-link .dl-go{min-height:46px;border:8px solid transparent;border-image:var(--pl2on) 8 fill / 8px stretch;border-radius:0;background:none;box-shadow:none;color:var(--tf-wm)}

/* ---- a short desktop window (1280 x 720, 1366 x 768) ---- */
@media (min-width:901px) and (max-height:820px){
  .dx-lg-book{width:108px}.dx-title{font-size:48px}.dx-lg-head{margin-bottom:22px}
  .dl-ui .dx-btn.dx-capst{min-height:54px;font-size:18px}
  .dl-ui .dx-go-row .dx-btn:not(.dx-btn-big){min-height:46px}
  .dx-cr-race,.dx-cr-class,.dx-fp{padding:0 12px 10px}
  .dx-fp > .dx-ph2,.dx-cr-race > .dx-ph2,.dx-cr-class > .dx-ph2{padding-top:12px;margin-bottom:9px}
  .dl-ui .dx-race{min-height:44px}.dx-race img{width:36px;height:36px}
  .dx-ico{width:44px;height:44px}.dx-classes{gap:9px 4px}.dx-cls small{font-size:11.5px}
  .dx-lbl{margin:10px 0 6px}
  .dl-ui .dx-sex{min-height:44px}.dl-ui .dx-sex img{width:26px;height:26px}
  .dl-ui .dx-specr .dx-spec{min-height:44px}.dl-ui .dx-spec img{width:26px;height:26px}
  .dl-ui .dx-kind{min-height:56px}.dx-kind .dx-ki{width:40px;height:40px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-l{padding:8px 16px 8px}
  .dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-i{min-height:46px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ic,.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ic img{width:36px;height:36px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-r{grid-template-columns:52px repeat(6,44px);margin-bottom:9px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-r3{margin-bottom:10px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-f{padding:6px 16px 12px}
}
/* a window under 1360 wide: the foot's quiet plaques a little closer, so the row keeps to one line */
@media (min-width:901px) and (max-width:1359px){
  .dl-ui .dx-go-row .dx-btn:not(.dx-btn-big){padding:0 8px;font-size:13px}
  .dl-ui .dx-go-row .dx-btn.dx-capst{min-width:250px}
}

/* ---- a phone upright ---- */
@media (max-width:900px) and (orientation:portrait),(max-width:700px){
  .dx-login{padding:12px 16px 72px}
  .dx-lg-head{margin-bottom:22px}
  .dx-lg-book{width:96px}.dx-title{font-size:38px}.dx-title small{font-size:11px;letter-spacing:.3em}.dx-title small::before,.dx-title small::after{width:26px}
  .dx-lg-tag{font-size:14px;margin-top:10px}
  .dl-ui .dx-lg-field .dx-in{min-height:56px;padding:0 12px;font-size:18px}
  .dl-ui .dx-lg-field .dx-btn.dx-capst{min-height:56px;padding:0 8px;font-size:16px;letter-spacing:.1em}
  .dx-lg-field .dx-capst-t{gap:8px}.dx-lg-field .dx-capst-t::before,.dx-lg-field .dx-capst-t::after{width:8px}
  .dl-ui .dx-btn.dx-capst{min-height:54px;padding:0 10px;font-size:17px;letter-spacing:.1em}
  /* Create: the figure on top, races and classes side by side, then a row of the quiet plaques, the main plaque the whole width */
  .dx-create{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(64px,1fr) auto auto auto;grid-template-areas:"fig fig" "plate plate" "race class" "foot foot"}
  .dx-cr-race,.dx-cr-class{padding:0 6px 8px}
  .dx-create .dx-plate b{font-size:22px}.dx-create .dx-plate small{margin-top:2px}
  .dx-fp > .dx-ph2,.dx-cr-race > .dx-ph2,.dx-cr-class > .dx-ph2{padding-top:10px;margin-bottom:8px;font-size:11px;letter-spacing:.18em;gap:8px}
  .dl-ui .dx-race{justify-content:center;min-height:38px;padding:2px}.dx-race img{width:32px;height:32px}.dx-side{gap:4px}
  .dx-ico{width:36px;height:36px}.dx-classes{gap:6px 2px}.dl-ui .dx-cls{gap:4px}.dx-cls small{font-size:10px;letter-spacing:0;padding-bottom:3px}
  .dx-lbl{margin:10px 0 6px;font-size:10px;letter-spacing:.14em;gap:6px}
  .dl-ui .dx-sex{justify-content:center;padding:0;min-height:44px}.dl-ui .dx-sex img{width:28px;height:28px}
  /* (the specs by their icons alone, three in a row: the plate over the figure names the one chosen; each keeps its name for a screen reader) */
  .dx-specr{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .dl-ui .dx-specr .dx-spec{justify-content:center;min-height:44px;padding:0}.dx-spec span{display:none}
  .dl-ui .dx-spec img{width:26px;height:26px}
  .dx-go-row{flex-wrap:wrap;gap:6px}
  .dx-go-sub{display:contents}
  .dl-ui .dx-go-row .dx-btn:not(.dx-btn-big){flex:1 1 0;min-width:0;min-height:44px;padding:0 4px;font-size:13px}
  .dl-ui .dx-go-row .dx-bkb{gap:7px;padding:0 6px 0 2px}
  .dl-ui .dx-go-row .dx-btn.dx-capst{flex:1 1 100%;width:100%;min-width:0;margin:0}
  .dl-ui .dx-go-row .dx-btn.dx-capst.dx-long{font-size:15px;letter-spacing:.06em}
  .dx-go-row > .dq-qleave{margin:0}
  /* Fight: the choice fills the screen, the figure steps aside */
  .dx-fight{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"fp" "foot"}
  .dx-fp{padding:0 8px 8px}
  .dl-ui .dx-kind{min-height:50px;gap:12px;padding:5px 10px 5px 8px}.dx-kind .dx-ki{width:38px;height:38px}.dx-kind b{font-size:15px}.dx-kind small{font-size:12px}
  /* (a bot's four strengths and its four specs two by two: Champion alone on a row of its own read as a mistake) */
  .dx-kopts .dx-row[aria-labelledby="dx-lv"],.dx-kopts .dx-row[aria-label="Its spec"]{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  /* (the line under a kind only for the chosen one, so its own choices fit under the list on a small phone) */
  .dx-kind:not([aria-checked=true]) small{display:none}
  /* (the Fighters screen's buttons in their narrow columns: closer, so Spellbook and Delete stay whole) */
  .dl-ui .dx-cs-side .dx-btn{min-width:0;padding:0 2px}
  .dl-ui .dx-cs-bars .dx-bdo{padding:0 6px 0 0}
  .dl-ui .dx-fight .dx-go-row .dx-btn.dx-capst{min-width:0}
  .dl-ui .dx-chars .dx-foot .dx-btn.dx-capst{width:100%;min-width:0}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-in{width:100%}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-h{padding:10px 6px 10px 14px;gap:8px}.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-h b{font-size:19px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-l{grid-template-columns:1fr 1fr;gap:2px 6px;padding:8px 10px}
  .dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-i{gap:9px;min-height:46px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ic,.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ic img{width:36px;height:36px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-i b{font-size:12.5px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-tip{margin:0 10px;padding:7px 0;font-size:12px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-bars{padding:8px 8px 2px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-r{grid-template-columns:repeat(6,minmax(0,50px));gap:5px;--hl:0px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-rn{display:none}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-f{padding:6px 10px 12px;gap:6px}
  .dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-f button:not(.dx-bk-ok){flex:1 1 0;padding:0 4px;font-size:12px}
  .dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ok{flex:1 1 0;min-width:0;margin:0;font-size:15px}
}
@media (max-width:374px) and (orientation:portrait){
  .dx-ico{width:32px;height:32px}.dx-race img{width:28px;height:28px}.dl-ui .dx-race{min-height:34px}
  .dx-create .dx-plate b{font-size:19px}.dx-create .dx-plate small{font-size:12px}
  .dx-cr-race > .dx-ph2,.dx-cr-class > .dx-ph2{padding-top:8px;margin-bottom:6px}.dx-lbl{margin:8px 0 5px}
  .dl-ui .dx-sex{min-height:40px}.dl-ui .dx-specr .dx-spec{min-height:40px}.dl-ui .dx-spec img{width:24px;height:24px}
  .dl-ui .dx-go-row .dx-btn:not(.dx-btn-big){font-size:12px}
  .dx-cs-bars .dx-bdo-t{display:none}.dl-ui .dx-cs-bars .dx-bdo{justify-content:center;padding:0}.dl-ui .dx-cs-side .dx-btn{font-size:12px}
  .dl-ui .dx-lg-field .dx-btn.dx-capst{padding:0 4px;font-size:15px;letter-spacing:.08em}
}

/* ---- a phone on its side: the foot under all three columns; the fight's four kinds two by two, so its choices fit under them ---- */
@media (orientation:landscape) and (max-width:900px){
  .dx-login{padding:8px 20px 44px;gap:36px}
  .dx-lg-head{margin:0}
  .dx-lg-book{width:72px}.dx-title{font-size:30px}.dx-title small{font-size:10px;margin-bottom:6px}.dx-lg-tag{font-size:13px;margin-top:8px}
  .dl-ui .dx-lg-field .dx-in{min-height:50px;font-size:17px}
  .dl-ui .dx-lg-field .dx-btn.dx-capst{min-height:50px;font-size:16px}
  .dl-ui .dx-btn.dx-capst{min-height:48px;padding:0 12px;font-size:15px;letter-spacing:.1em}
  .dx-capst-t{gap:8px}.dx-capst-t::before,.dx-capst-t::after{width:8px}
  .dl-ui .dx-btn{min-height:44px}
  .dx-create{grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:"race fig class" "race plate class" "foot foot foot"}
  .dx-cr-race,.dx-cr-class{padding:0 8px 6px}
  .dx-fp > .dx-ph2,.dx-cr-race > .dx-ph2,.dx-cr-class > .dx-ph2{padding-top:7px;margin-bottom:5px;font-size:10px}
  .dx-sides{gap:3px 6px}.dx-side{gap:3px}.dx-side p{font-size:9px;margin-bottom:2px}
  .dl-ui .dx-race{min-height:32px;gap:6px;padding:1px 4px 1px 1px}.dx-race img{width:28px;height:28px}.dx-race small{font-size:10px}
  .dx-ico{width:30px;height:30px}.dx-classes{gap:4px 2px}.dl-ui .dx-cls{gap:3px}.dx-cls small{font-size:9.5px;padding-bottom:2px}
  .dx-lbl{margin:5px 0 4px;font-size:9px}
  .dl-ui .dx-sex{min-height:36px;padding:0;justify-content:center}.dl-ui .dx-sex img{width:24px;height:24px}
  .dx-specr{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
  .dl-ui .dx-specr .dx-spec{min-height:38px;justify-content:center;padding:0}.dx-spec span{display:none}.dl-ui .dx-spec img{width:24px;height:24px}
  .dl-ui .dx-go-row .dx-btn:not(.dx-btn-big){min-height:44px;padding:0 10px}
  .dl-ui .dx-go-row .dx-btn.dx-capst{min-width:0;margin-left:6px}
  .dx-go-row{gap:6px}
  .dx-fight{grid-template-columns:minmax(0,.9fr) minmax(400px,1.1fr);grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:"fig fp" "plate fp" "foot fp"}
  .dx-fight .dx-fig-area,.dx-fight .dx-plate{display:block}
  .dx-fp{padding:0 8px 6px}
  .dx-kinds{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px}
  .dl-ui .dx-kind{min-height:44px;gap:8px;padding:3px 6px 3px 4px}.dx-kind .dx-ki{width:32px;height:32px}.dx-kind b{font-size:13px}.dx-kind small,.dx-kind .dx-ktag{display:none}
  .dx-kopts:not(:empty){padding:6px 8px 2px}
  .dx-kopts .dx-lbl{margin:2px 0 4px}
  .dx-kopts .dx-row{margin-bottom:5px}
  .dl-ui .dx-kopts .dx-row:not(.dx-faces) button{min-height:40px;font-size:12px}
  .dx-kopts .dx-note{margin:4px 0;font-size:11.5px;line-height:1.35}
  .dx-faces small{display:none}.dl-ui .dx-faces button[data-bot=""]{min-height:36px;font-size:10px}
  .dx-fight .dx-go-row{flex-wrap:nowrap}
  .dl-ui .dx-fight .dx-go-row .dx-btn.dx-capst{flex:1 1 auto;min-width:0}
  .dx-fight .dx-go-bars{margin-left:0}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-in{width:min(1000px,100%)}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-l{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));padding:6px 8px}
  .dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-i{min-height:40px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ic,.dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ic img{width:30px;height:30px}
}
/* (a phone either way: the Fighters screen's Spellbook and Talents in a thinner plaque, so the narrow Talents square keeps its icon whole) */
@media (max-width:900px){.dl-ui .dx-cs-bars .dx-bdo{border-width:5px;border-image-width:5px}.dl-ui .dx-cs-bars .dt-open{padding:0}}
/* (a phone on its side in the touch layout: the words of the book's button go, its icon stays) */
@media (orientation:landscape) and (max-width:900px) and (pointer:coarse){.dx-bkb span{display:none}.dl-ui .dx-go-row .dx-bkb{padding:0 6px}}
@media (max-height:520px){
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-tip{grid-column:2;grid-row:2;margin:0;padding:8px 12px;border-top:0;text-align:left;border-left:1px solid rgba(232,192,98,.16)}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-bars{border-left:1px solid rgba(232,192,98,.16);padding:4px 10px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-f{border-left:1px solid rgba(232,192,98,.16);padding:4px 10px 8px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-r{grid-template-columns:repeat(6,40px);gap:4px;--hl:0px}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-rn{display:none}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-tip{width:280px;height:auto;overflow:auto}
  .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-r3{margin-bottom:8px}
  .dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-ok{min-height:44px;min-width:0;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.dl-ui .dx-btn,.dx-ico{transition:none}}

/* ---- (30 Oct 2026, Chris: "it is way too difficult to get back to the normal beginning login screen. make it easier to get back to the
   beginning after any duel - that should be the original starting place for everything") HOME: Main menu on every setup screen, in the
   book and on every result, its key said on it on a keyboard; the beginning screen says who you are to a returning reader ---- */
.dx-mm-b{display:none}
.dl-ui .dx-btn kbd,.dl-ui .dx-book .dx-bk-f kbd,.dl-end-home kbd{display:inline-block;margin-left:8px;padding:2px 5px 1px;font:700 10px/1.2 'Open Sans',sans-serif;letter-spacing:0;text-transform:none;color:#d8cfbd;background:rgba(0,0,0,.45);border:1px solid rgba(232,192,98,.38);border-radius:3px;text-shadow:none}
.dl-ui .dx-btn:hover kbd,.dl-end-home:hover kbd{color:#fff;border-color:#e8c062}
/* who you are, over your name on the beginning screen */
.dx-lg-you{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:10px 14px 10px 10px;background:linear-gradient(90deg,rgba(255,209,0,.1),rgba(255,209,0,.02) 80%);border-radius:3px;box-shadow:inset 0 0 0 1px rgba(232,192,98,.3)}
.dx .dx-lg-you .dx-ci{width:44px;height:44px;border-radius:4px;box-shadow:0 0 0 1px #000,0 0 0 2px var(--tf-gold)}
.dx-lg-you .dx-ci img{display:block;width:100%;height:100%;border-radius:4px;object-fit:cover}
.dx-lg-yt{display:flex;flex-direction:column;gap:3px;min-width:0;text-align:left}
.dx-lg-yt b{font:700 17px/1.1 Cinzel,Georgia,serif;letter-spacing:.02em;text-shadow:0 1px 2px #000}
.dx-lg-yt small{font:400 13px/1.3 'Open Sans',sans-serif;color:#d0c7b4}
/* the result's Main menu, beside the result's other buttons */
.dl-end-home{display:inline-flex;align-items:center;justify-content:center}
@media (max-width:900px) and (orientation:portrait),(max-width:700px){
  .dx-mm-a{display:none}.dx-mm-b{display:inline}
  .dx-create .dx-bkb span,.dx-fight .dx-bkb span{display:none}
  .dl-ui .dx-create .dx-go-row .dx-bkb,.dl-ui .dx-fight .dx-go-row .dx-bkb{flex:0 0 52px;padding:0}
  .dx-lg-you{margin-bottom:12px;padding:8px 10px 8px 8px}.dx-lg-yt b{font-size:15px}.dx-lg-yt small{font-size:12px}
  .dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-f .dx-bk-home{flex:0 0 auto;padding:0 8px}
}
@media (orientation:landscape) and (max-width:900px){
  .dx-mm-a{display:none}.dx-mm-b{display:inline}
  .dx-lg-you{margin-bottom:8px;padding:6px 10px 6px 6px}.dx .dx-lg-you .dx-ci{width:36px;height:36px}.dx-lg-yt b{font-size:14px}
}

/* ---- (30 Oct 2026, Chris: "we should also make it more prominent of a colorization for people to que into the ladder (like calling it
   duel ladder or something) ranked ladder or arena ladder idk. something with some type of colorization") THE RANKED ARENA: one colour for
   the ranked mode wherever it shows (the Fight screen's card and its button, the queue's strip, Leave queue and invite, a ranked result,
   the rating on the beginning screen): the game's own epic purple (#a335ee, the item quality colour) as a lit rim, a soft inner glow and the
   rating's number. The chrome of everything else stays gold and bronze (pick-gold-not-class-light); no red or yellow slab ---- */
:root{--rk:#a335ee;--rk-l:#cf9bff;--rk-ink:#efe0ff;--rk-d:rgba(163,53,238,.16);
  --pl-rk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23331548'/%3E%3Cstop offset='.42' stop-color='%23190b25'/%3E%3Cstop offset='1' stop-color='%230b0610'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f0dcff'/%3E%3Cstop offset='.38' stop-color='%23b35cf5'/%3E%3Cstop offset='.74' stop-color='%23641f99'/%3E%3Cstop offset='1' stop-color='%23a54ef0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7 .75H41A7 7 0 0 0 47.25 7V41A7 7 0 0 0 41 47.25H7A7 7 0 0 0 .75 41V7A7 7 0 0 0 7 .75Z' fill='url(%23f)' stroke='url(%23g)' stroke-width='1.5'/%3E%3Cpath d='M10 4H38A10.8 10.8 0 0 0 44 10V38A10.8 10.8 0 0 0 38 44H10A10.8 10.8 0 0 0 4 38V10A10.8 10.8 0 0 0 10 4Z' fill='none' stroke='%23cf9bff' stroke-opacity='.5'/%3E%3C/svg%3E");
  --pl-rkh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23461d63'/%3E%3Cstop offset='.42' stop-color='%23240f35'/%3E%3Cstop offset='1' stop-color='%23100817'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fbf4ff'/%3E%3Cstop offset='.38' stop-color='%23cf9bff'/%3E%3Cstop offset='.74' stop-color='%238a35cc'/%3E%3Cstop offset='1' stop-color='%23c27cff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7 .75H41A7 7 0 0 0 47.25 7V41A7 7 0 0 0 41 47.25H7A7 7 0 0 0 .75 41V7A7 7 0 0 0 7 .75Z' fill='url(%23f)' stroke='url(%23g)' stroke-width='1.5'/%3E%3Cpath d='M10 4H38A10.8 10.8 0 0 0 44 10V38A10.8 10.8 0 0 0 38 44H10A10.8 10.8 0 0 0 4 38V10A10.8 10.8 0 0 0 10 4Z' fill='none' stroke='%23e6c8ff' stroke-opacity='.75'/%3E%3C/svg%3E")}
/* the card: first and largest, a purple rim and a glow from its left, the rating at its right */
.dx-kinds-l{margin:12px 0 4px}
.dl-ui .dx-kind.dx-hero{min-height:88px;padding:12px 16px 12px 12px;gap:16px;margin-bottom:2px;background:radial-gradient(ellipse 60% 140% at 0% 50%,rgba(163,53,238,.24),transparent 70%),linear-gradient(180deg,rgba(40,16,58,.7),rgba(14,8,20,.7));box-shadow:inset 0 0 0 1px rgba(163,53,238,.55),0 0 18px rgba(163,53,238,.12)}
.dl-ui .dx-kind.dx-hero:hover{background:radial-gradient(ellipse 60% 140% at 0% 50%,rgba(163,53,238,.32),transparent 72%),linear-gradient(180deg,rgba(48,19,70,.75),rgba(16,9,24,.75));box-shadow:inset 0 0 0 1px var(--rk-l),0 0 22px rgba(163,53,238,.2)}
.dl-ui .dx-kind.dx-hero[aria-checked=true]{background:radial-gradient(ellipse 70% 150% at 0% 50%,rgba(163,53,238,.38),transparent 72%),linear-gradient(180deg,rgba(52,20,76,.82),rgba(18,9,27,.82));box-shadow:inset 0 0 0 1px var(--rk-l),inset 4px 0 0 var(--rk),0 0 26px rgba(163,53,238,.32)}
.dx-hero .dx-ki{width:58px;height:58px;box-shadow:0 0 0 1px #000,0 0 0 2px var(--rk),0 0 16px rgba(163,53,238,.5)}
.dx-kind.dx-hero:hover .dx-ki,.dx-kind.dx-hero[aria-checked=true] .dx-ki{box-shadow:0 0 0 1px #000,0 0 0 2px var(--rk-l),0 0 20px rgba(163,53,238,.65)}
.dx-hero .dx-kt em{font:700 10.5px/1 Cinzel,Georgia,serif;letter-spacing:.24em;text-transform:uppercase;font-style:normal;color:var(--rk-l)}
.dx-kind.dx-hero b,.dx-kind.dx-hero[aria-checked=true] b{font:700 22px/1.1 Cinzel,Georgia,serif;letter-spacing:.04em;color:var(--rk-ink);text-shadow:0 1px 0 #000,0 0 14px rgba(163,53,238,.55)}
.dx-kind.dx-hero small,.dx-kind.dx-hero[aria-checked=true] small{color:#d9cbe6}
/* the rating, in the ranked colour */
.dx-rk{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:70px;padding:6px 10px;border-radius:3px;background:rgba(12,5,18,.6);box-shadow:inset 0 0 0 1px rgba(163,53,238,.45)}
.dx-rk b{font:800 22px/1 PkNum,'Open Sans',sans-serif;font-variant-numeric:tabular-nums;color:var(--rk-l);text-shadow:0 0 12px rgba(163,53,238,.6)}
.dx-kind .dx-rk small,.dx-rk small{font:700 9.5px/1 Cinzel,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:#bfa8d4}
.dx-rk-sm{margin-left:auto;min-width:0;padding:5px 8px}.dx-rk-sm b{font-size:17px}
/* the main button while the Ranked Arena is picked: the plaque in purple, its words lit */
.dl-ui .dx-btn.dx-capst.dx-ranked{border-image-source:var(--pl-rk);color:var(--rk-ink);text-shadow:0 1px 0 #1a0628,0 0 14px rgba(190,110,255,.55);filter:drop-shadow(0 0 14px rgba(163,53,238,.35)) drop-shadow(0 6px 10px rgba(0,0,0,.65))}
.dl-ui .dx-btn.dx-capst.dx-ranked:hover{border-image-source:var(--pl-rkh);color:#fff;filter:drop-shadow(0 0 20px rgba(163,53,238,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.65))}
/* Real players only: a switch, purple when on */
.dl-ui .dq-hum{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;margin:2px 0 8px;padding:6px 10px;text-align:left;border-radius:3px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(232,192,98,.2)}
.dl-ui .dq-hum:hover{box-shadow:inset 0 0 0 1px rgba(207,155,255,.6)}
.dq-hum i{position:relative;flex:none;width:38px;height:20px;border-radius:10px;background:#1a1612;box-shadow:inset 0 0 0 1px #5e5040;transition:background .15s}
.dq-hum i::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#8a7d68;transition:left .15s,background .15s}
.dq-hum[aria-checked=true] i{background:rgba(163,53,238,.45);box-shadow:inset 0 0 0 1px var(--rk-l)}
.dq-hum[aria-checked=true] i::after{left:21px;background:var(--rk-ink)}
.dq-hum span{display:flex;flex-direction:column;gap:3px;min-width:0}
.dq-hum b{font:700 14px/1.1 Cinzel,Georgia,serif;color:var(--pl-ink)}
.dq-hum[aria-checked=true] b{color:var(--rk-ink)}
.dq-hum small{font:400 12px/1.3 'Open Sans',sans-serif;color:var(--pl-mute)}
.dq-line .dq-in{margin:6px 6px 6px 0;vertical-align:middle}
/* the ladder and your name as buttons */
.dx-links{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.dx-links .dx-btn{flex:0 0 auto}
/* the queue's own pieces in the same colour: Leave queue in the foot, the strip in a fight, the invite */
.dl-ui .dx .dx-go-row .dq-qleave,.dl-ui .dx .dx-foot>.dq-qleave{border-radius:3px;background:rgba(20,8,30,.8);box-shadow:inset 0 0 0 1px rgba(163,53,238,.6),0 0 12px rgba(163,53,238,.2)}
.dl-ui .dx .dx-go-row .dq-qleave small,.dl-ui .dx .dx-foot>.dq-qleave small{color:var(--rk-l)}
.dl .dq-bar{box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(163,53,238,.6),0 0 16px rgba(163,53,238,.25)}
.dq-pop .dq-pop-in{box-shadow:0 0 0 1px #000,inset 0 0 0 1px var(--rk-l),0 0 30px rgba(163,53,238,.35),0 16px 40px rgba(0,0,0,.7)}
.dq-pop .dq-pop-in h2{color:var(--rk-ink);text-shadow:0 0 14px rgba(163,53,238,.6)}
/* a ranked result: the rating's block and its number in the ranked colour */
.dl-end-ranked .dl-end-rate{border-radius:4px;box-shadow:inset 0 0 0 1px rgba(163,53,238,.5);background:radial-gradient(ellipse at 50% 0%,rgba(163,53,238,.18),transparent 70%)}
.dl-end-ranked .dl-end-rt b{color:var(--rk-l);text-shadow:0 0 14px rgba(163,53,238,.6)}
.dl-end-ranked .dl-end-rt small{color:#bfa8d4}
@media (max-width:900px) and (orientation:portrait),(max-width:700px){
  .dl-ui .dx-kind.dx-hero{min-height:74px;padding:8px 10px 8px 8px;gap:12px}
  .dx-hero .dx-ki{width:46px;height:46px}.dx-kind.dx-hero b{font-size:18px}
  .dx-kind.dx-hero small{display:block}
  .dx-rk{min-width:58px;padding:5px 6px}.dx-rk b{font-size:18px}
}
@media (orientation:landscape) and (max-width:900px){
  .dx-kinds{grid-template-columns:1fr 1fr 1fr}
  .dl-ui .dx-kind.dx-hero{grid-column:1 / -1;min-height:52px;padding:4px 8px 4px 6px}
  .dx-hero .dx-ki{width:36px;height:36px}.dx-kind.dx-hero b{font-size:15px}.dx-hero .dx-kt em{display:none}
  .dx-rk{padding:3px 6px}.dx-rk b{font-size:15px}.dx-kinds-l{display:none}
}
/* (30 Oct 2026) the result's row takes Main menu as its fourth, one line; on a ranked result its main button in the ranked colour */
.dl-end-row:has(.dl-end-home){grid-template-columns:repeat(4,minmax(0,1fr))}
.dl-ui .dl-end-row .dl-end-home kbd{margin-left:0}
.dl-ui .dl-end-ranked .dl-end-main{color:var(--rk-ink);background:rgba(24,9,34,.72);box-shadow:0 0 0 2px var(--rk),0 0 18px rgba(163,53,238,.3);text-shadow:0 0 14px rgba(190,110,255,.55)}
.dl-ui .dl-end-ranked .dl-end-main:hover{box-shadow:0 0 0 2px var(--rk-l),0 0 26px rgba(163,53,238,.45)}
@media (max-width:420px){.dl-end-row:has(.dl-end-home){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- (30 Oct 2026, the desktop and phone QA rounds) ---- */
/* the VS into the arena as a clean beat: its fighters and words go first, then the whole of it, so no cut-out stands half seen over the arena */
.dx-vs{transition:opacity .28s ease .18s}
.dx-vs > *{transition:opacity .16s ease}
.dx-vs.dx-vs-off > *{opacity:0}
/* a short desktop window: the calmer kinds one line each unless chosen, so the ranked card's choices fit without a scroll */
@media (min-width:901px) and (max-height:820px){
  .dl-ui .dx-kind:not(.dx-hero){min-height:46px;padding-top:4px;padding-bottom:4px}
  .dx-kind:not(.dx-hero):not([aria-checked=true]) small{display:none}
  .dl-ui .dx-kind.dx-hero{min-height:76px}.dx-hero .dx-ki{width:50px;height:50px}
  .dx-kinds-l{margin:8px 0 2px}
}
/* the book on a touch screen before a fight: its x at the head's right, 44 px; its rows the two pages, named, no keyboard labels */
.dl-ui .dx-book.dx-touch .dx-bk-x{margin-left:auto;min-height:44px;width:44px}
.dx-book.dx-touch .dx-bk-s kbd{display:none}
.dx-book.dx-touch .dx-bk-r{grid-template-columns:52px repeat(6,minmax(0,46px));--hl:56px}
.dx-book.dx-touch .dx-bk-rn{display:flex}
/* 44 px to touch: the races on a phone upright, the bot's class faces on a phone on its side */
@media (max-width:900px) and (orientation:portrait),(max-width:700px){.dl-ui .dx-race{min-height:44px}.dx-race img{width:34px;height:34px}}
@media (orientation:landscape) and (max-width:900px){.dl-ui .dx-faces button{min-height:44px}.dx-faces img{max-width:40px}}
/* Talents with its word on the Fighters screen on a phone too, the two book buttons one under the other */
@media (max-width:900px){
  .dx .dx-cs-bars .dx-bars-do:has(.dt-open){grid-template-columns:minmax(0,1fr);gap:6px}
  .dx .dx-cs-bars .dt-open .dx-bdo-t{display:block}.dx .dx-cs-bars .dt-open .dx-bdo-t small,.dx .dx-cs-bars .dt-open .dt-open-n{display:none}
  .dl-ui .dx-cs-bars .dt-open{justify-content:flex-start;padding:0 8px 0 2px;gap:7px}
}
@media (max-width:374px) and (orientation:portrait){.dx .dx-cs-bars .dx-bdo-t{display:block}.dl-ui .dx-cs-bars .dx-bdo{justify-content:flex-start}}
/* the Talents button on Create and Fight: on a phone upright its icon, as the Spellbook's */
@media (max-width:900px) and (orientation:portrait),(max-width:700px){.dx-create .dx-talb span,.dx-fight .dx-talb span{display:none}.dl-ui .dx-create .dx-go-row .dx-talb,.dl-ui .dx-fight .dx-go-row .dx-talb{flex:0 0 52px;padding:0}}
/* (an iPhone SE sized screen, 320 x 640: the figure gives way first, so the races keep their 44 px and Create Fighter stays on screen) */
@media (max-width:374px) and (orientation:portrait){.dx-create{grid-template-rows:minmax(36px,1fr) auto auto auto}.dx-side{gap:3px}.dx-sides{gap:2px 4px}}
/* (the invite's Enter in the ranked colour too) */
.dl-ui .dq-pop .dq-enter{color:var(--rk-ink);box-shadow:0 0 0 2px var(--rk),0 0 16px rgba(163,53,238,.35)}
.dl-ui .dq-pop .dq-enter:hover{box-shadow:0 0 0 2px var(--rk-l),0 0 22px rgba(163,53,238,.5)}
.dq-pop .dq-pop-bar i{background:linear-gradient(90deg,#7b2bbf,var(--rk-l))}
/* (30 Oct 2026, the phone QA at 780 x 360: VICTORY cut off at the top, the rating and its line behind the main button, the links below
   the fold) the result's column is the screen's height and scrolls from its top when it must; nothing in it is squeezed to nothing */
.dl-ui .dl-end{grid-template-rows:minmax(0,1fr)}
.dl-ui .dl-end-in > *{flex-shrink:0}
@media (orientation:landscape) and (max-height:500px){
  .dl-ui .dl-end .dl-end-in{align-self:start;max-height:100%;padding-top:8px}
  .dl-ui .dl-end .dl-end-st{padding:3px 0;margin-bottom:4px}.dl-ui .dl-end .dl-end-st dd{font-size:15px;margin-top:2px}
  .dl-ui .dl-end .dl-end-rate{margin-bottom:6px}.dl-ui .dl-end .dl-end-rt b{font-size:26px}.dl-ui .dl-end .dl-end-meta{margin:2px 0 0;font-size:11.5px}
  .dl-ui .dl-end-main{min-height:42px;font-size:15px}
  .dl-end-links .dl-link{padding:8px 10px}
}
@media (orientation:landscape) and (max-height:400px){
  /* (the plates repeat the line above them, who you met: on a screen this short the line says it alone) */
  .dl-ui .dl-end .dl-end-vs{display:none}
  .dl-ui .dl-end-row button{min-height:40px;padding:4px}.dl-end-row button small{display:none}
  .dl-end-links{gap:0 6px}.dl-end-links .dl-link{padding:6px 8px}
}

/* ---- (30 Oct 2026, Chris on the Fighters screen at about 2000 x 760 inside the browser: "the different version of the game are not possible
   to see being overlapped by the left side panels now") the bars panel sat at the foot of its column and, taller than the room under Your
   fight, grew up over it. It now keeps to its own part of the column (scrolling inside if it ever must), and its three buttons, Spellbook,
   Key bindings and Talents, are one row of three, each its icon over its word, so it needs about 130 px less ---- */
@media (min-width:901px){
  .dx-chars .dx-cs-bars{max-height:100%;min-height:0;overflow-y:auto;scrollbar-width:thin}
  .dx-chars .dx-realm{min-height:0}
  .dx .dx-cs-bars .dx-bars-do,.dx .dx-cs-bars .dx-bars-do:has(.dt-open){grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;margin-top:8px}
  .dl-ui .dx .dx-cs-bars .dx-bdo{flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:0 2px;text-align:center}
  .dx .dx-cs-bars .dx-bdo-i{width:28px;height:28px}
  .dx .dx-cs-bars .dx-bdo-t{display:block}
  .dx .dx-cs-bars .dx-bdo-t b{font-size:11px;letter-spacing:0;white-space:nowrap}
  .dx .dx-cs-bars .dx-bdo-t small,.dx .dx-cs-bars .dt-open .dt-open-n,.dx .dx-cs-bars .dt-open .dt-open-s{display:none}
}

/* ---- (30 Oct 2026, Chris on Create's class panel: "should be able to easily see the 3 spec options too without scrolling down - so maybe
   squeeze it in a touch") under 1000 px of window height the class tiles and the specs are tighter, and under 800 the three specs stand in
   one row, each its tree's icon over its name, so Frost is never under the fold ---- */
@media (min-width:901px) and (max-height:1000px){
  .dx-cr-class{padding-bottom:10px}
  .dx-cr-class > .dx-ph2{padding-top:11px;margin-bottom:8px}
  .dx-classes{gap:6px 4px}
  .dx-ico{width:42px;height:42px}
  .dl-ui .dx-cls{gap:5px}.dx-cls small{font-size:11px;padding-bottom:3px}
  .dx-cr-class .dx-lbl{margin:10px 0 6px}
  .dx-specr{gap:4px}
  .dl-ui .dx-specr .dx-spec{min-height:40px;gap:10px;font-size:13px}.dl-ui .dx-spec img{width:24px;height:24px}
}
@media (min-width:901px) and (max-height:800px){
  .dx-ico{width:38px;height:38px}.dx-classes{gap:4px 4px}
  .dx-specr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dl-ui .dx-specr .dx-spec{flex-direction:column;justify-content:center;gap:4px;min-height:58px;padding:0 2px;font-size:10.5px;letter-spacing:0;white-space:nowrap}
  .dx-spec span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
}

/* ---- (30 Oct 2026, the final desktop QA before launch) ---- */
/* the fight panel: the ladder's top beside the Ranked Arena only, and its three first on a shorter screen, so nothing scrolls inside it */
.dx-fp:not(.dx-fp-rk) .dx-top-slot{display:none}
@media (min-width:901px) and (max-height:1100px){
  .dx-fp .dx-top-slot .dtp-rows{min-height:0}.dx-fp .dx-top-slot .dtp-rows li:nth-child(n+4){display:none}
  .dx-fp .dx-top-slot .dtp-f{display:none}
}
@media (min-width:901px) and (max-height:820px){.dx-fp .dx-top-slot{display:none}}
/* the Fighters list: it scrolls in its own box, Create New Fighter under it whole, a scrollbar to say there is more */
.dx-cs-list{display:flex;flex-direction:column}
.dx-cs-list .dx-tb{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.dx-cl{flex:0 1 auto;min-height:0;overflow-y:auto}
.dl-ui .dx-cs-new{flex:none}
.dx-cl,.dx-book .dx-bk-kl,.dx-book .dx-bk-l,.dx-fp{scrollbar-width:thin;scrollbar-color:#8a7246 rgba(0,0,0,.3)}
/* no 0/1 under Create New Fighter: the list's head says how many, in words */
.dx-node-add::after{content:none}
/* the name and Enter side by side, the field's edge clear of the plaque */
.dl-ui .dx-lg-field .dx-in{margin-right:6px;border-right:1px solid #6e5a34;border-radius:3px}
.dl-ui .dx-lg-field .dx-in:focus{border-right-color:#d9b24a}

/* (30 Oct 2026, Chris: "how the site will look leading to this playability for people to test their stuff") the line that says the
   calculator's build is in, in gold, not the red of a refusal (duel_select.js show, dx-said) */
.dx-err.dx-said{color:#ffd75e}
/* (1280 x 720: the fight panel whole, no scroll inside: the ranked card and the bot's class row tighter, the faces in one row of ten) */
@media (min-width:901px) and (max-height:820px){
  .dl-ui .dx-kind.dx-hero{min-height:56px;padding:5px 12px 5px 8px;gap:12px}.dx-hero .dx-ki{width:40px;height:40px}.dx-kind.dx-hero b{font-size:17px}.dx-hero .dx-kt em{display:none}
  .dx-rk{padding:3px 8px}.dx-rk b{font-size:17px}
  .dx-kinds-l{display:none}.dx-kinds{gap:4px;margin-bottom:6px}
  .dx-kopts:not(:empty){padding:8px 10px 2px}.dx-kopts .dx-lbl{margin:2px 0 5px}.dx-kopts .dx-row{margin-bottom:5px}
  .dx-faces{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}.dx-faces small{display:none}.dx-faces img{width:100%;max-width:40px;height:auto;aspect-ratio:1}
  .dl-ui .dx-faces button[data-bot=""]{min-height:40px;font-size:10px}
  .dx-kopts .dx-note{margin:3px 0 4px;font-size:12px;line-height:1.35}
  .dl-ui .dq-hum{min-height:40px;margin:0 0 4px;padding:3px 8px}
  .dl-ui .dx-kopts .dx-row:not(.dx-faces) button{min-height:40px}
}
@media (min-width:901px) and (max-height:820px){.dx-fp > .dx-ph2{padding-top:9px;margin-bottom:6px}.dx-kopts .dx-row[aria-label="Its spec"] button{min-height:36px}}
/* (30 Oct 2026, Chris's screenshot: the notice line ran off the left edge at ~2000 px: the fine print would not shrink beside the links) it wraps in its own room */
@media (min-width:700px){.dx-lg-foot .dx-lg-fine{flex:1 1 0;min-width:0;overflow-wrap:anywhere}}
/* (30 Oct 2026, Chris: "lets rename it to the training grounds here") the longer title fits between the arena edge and the ladder panel */
#dx-lg-h span{font-size:clamp(26px,2.4vw,50px);white-space:nowrap;letter-spacing:.02em}
@media (max-width:699px){#dx-lg-h span{font-size:clamp(24px,7.6vw,34px)}}

/* ---- (30 Oct 2026, Chris: "cater to both PvE and PvP, but extremely easy to get to what you're looking to do") home's choices: the Training
   Dummy and Arena PvP large, a bot and a friend small; the name on the character screen when the fight needs one ---- */
.dx-hcs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dx-hcs2{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:8px}
.dl-ui .dx-hc{display:flex;align-items:center;gap:12px;min-height:44px;padding:12px 14px;text-align:left;border:0;border-radius:4px;background:linear-gradient(180deg,rgba(26,21,14,.92),rgba(12,10,8,.92));box-shadow:inset 0 0 0 1px rgba(232,192,98,.4),0 8px 20px rgba(0,0,0,.5)}
.dl-ui .dx-hc:hover{box-shadow:inset 0 0 0 1px #ffd100,0 0 18px rgba(255,209,0,.18),0 8px 20px rgba(0,0,0,.5)}
.dx-hc-i{flex:none}.dx-hc-i .dx-ki,.dx-hc-i img{display:block;width:52px;height:52px;border-radius:4px;box-shadow:0 0 0 1px #000,0 0 0 2px #c9a23e}
.dx-hc-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.dx-hc-t b{font:700 19px/1.1 Cinzel,Georgia,serif;letter-spacing:.03em;color:var(--tf-wm);text-shadow:0 1px 0 #000}
.dx-hc-t small{font:400 12.5px/1.35 'Open Sans',sans-serif;color:#cfc4ae}
.dl-ui .dx-hc-pvp{background:radial-gradient(ellipse 70% 140% at 0% 50%,rgba(163,53,238,.3),transparent 70%),linear-gradient(180deg,rgba(40,16,58,.9),rgba(14,8,20,.9));box-shadow:inset 0 0 0 1px rgba(163,53,238,.65),0 0 18px rgba(163,53,238,.15),0 8px 20px rgba(0,0,0,.5)}
.dl-ui .dx-hc-pvp:hover{box-shadow:inset 0 0 0 1px var(--rk-l),0 0 24px rgba(163,53,238,.35),0 8px 20px rgba(0,0,0,.5)}
.dx-hc-pvp .dx-hc-i img{box-shadow:0 0 0 1px #000,0 0 0 2px var(--rk),0 0 14px rgba(163,53,238,.5)}
.dx-hc-pvp .dx-hc-t b{color:var(--rk-ink);text-shadow:0 1px 0 #000,0 0 12px rgba(163,53,238,.55)}
.dl-ui .dx-hc-sm{justify-content:center;min-height:46px;padding:8px 10px}.dx-hc-sm .dx-hc-t b{font-size:14px;color:var(--pl-ink)}
.dx-home .dx-lg-box{width:min(560px,100%)}
/* the name on the character screen */
.dx-nmf{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 8px}
.dx-nmf label{font:700 12px/1.2 Cinzel,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--tf-wm);text-shadow:0 1px 3px #000;white-space:nowrap}
.dx-nmf label small{display:block;font:400 11px/1.2 'Open Sans',sans-serif;letter-spacing:0;text-transform:none;color:var(--pl-mute)}
.dl-ui .dx-nmf .dx-in{width:220px;min-height:46px;font-size:17px;text-align:left}
.dx-chars .dx-foot > .dx-nmf{grid-column:1 / -1}
@media (max-width:900px) and (orientation:portrait),(max-width:700px){
  .dx-hcs{grid-template-columns:1fr}.dl-ui .dx-hc{padding:10px 12px}.dx-hc-i .dx-ki,.dx-hc-i img{width:44px;height:44px}.dx-hc-t b{font-size:17px}
  .dl-ui .dx-nmf .dx-in{width:auto;flex:1 1 auto;min-width:0}.dx-nmf{justify-content:stretch}
}
@media (orientation:landscape) and (max-width:900px){
  .dx-hcs{gap:6px}.dl-ui .dx-hc{padding:6px 10px;gap:8px}.dx-hc-i .dx-ki,.dx-hc-i img{width:36px;height:36px}.dx-hc-t b{font-size:15px}.dx-hc-t small{display:none}
  .dx-hcs2{margin-top:6px}.dl-ui .dx-hc-sm{min-height:44px}
  .dx-nmf{margin-bottom:4px}.dl-ui .dx-nmf .dx-in{min-height:40px;width:180px}
}
.dx-home .dx-lg-box{width:min(500px,100%)}

/* ---- (30 Oct 2026, Chris on the Spellbook: "the buttons should be more visible. find a way to make that easier to see the action bars + the
   abilities. maybe don't stack them 3 high for the bars?") on a desktop the book takes most of the arena: the spells in a wide grid that
   shows a class's whole book, larger icons; the bars along the foot as the game lays its action bars, Bar 1 and Bar 2 side by side and
   Bar 3 beside them, each named over its six ---- */
@media (min-width:901px){
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch){padding:10px}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-in{width:min(1240px,100%);height:100%;max-height:100%}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-l{grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:2px 10px;padding:10px 18px 8px}
  .dl-ui .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-i{min-height:50px}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-ic,.dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-ic img{width:42px;height:42px}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-i b{font-size:14px}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-tip{height:auto;min-height:0;padding:7px 2px;flex:none}
  /* the bars: one strip, each bar its name over its six in a housing */
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-bars{flex:none;display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:10px 22px;padding:8px 18px 4px;border-top:1px solid rgba(232,192,98,.16)}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-r{grid-template-columns:repeat(6,48px);grid-template-rows:auto 48px;gap:4px 4px;margin:0;--hl:0px}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-r[data-o="0"]{order:1}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-r[data-o="6"]{order:2}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-r[data-o="12"]{order:3}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-r3{margin:0;padding:0;border:0}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-rn{display:block;grid-column:1 / -1;grid-row:1;justify-self:start;padding:0 0 0 2px;font:700 11px/1 Cinzel,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--tf-wm);text-align:left}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-s{grid-row:2}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-r::before{top:11px;bottom:-4px;left:-4px;right:-4px}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-s kbd{font-size:12px}
  /* an empty socket says so: a faint ring inside it */
  .dl-ui .dx-book:not(.dx-dock):not(.dx-sheet) .dx-bk-s:not(:has(img)){background:radial-gradient(circle at 50% 45%,#141109,#050403 78%);box-shadow:inset 0 1px 5px rgba(0,0,0,.95),inset 0 0 0 1px rgba(232,192,98,.14),inset 0 0 0 5px rgba(0,0,0,.4),inset 0 0 0 6px rgba(232,192,98,.07)}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-f{flex:none;padding:8px 18px 12px}
}
@media (min-width:901px) and (max-height:820px){
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-h{padding:8px 10px 8px 18px}
  .dl-ui .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-i{min-height:44px}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-ic,.dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-ic img{width:36px;height:36px}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-r{grid-template-columns:repeat(6,42px);grid-template-rows:auto 42px}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-tip{display:none}
}
/* (30 Oct 2026, Chris: "the same spellbook changes for UI should take place for the keybinds too") the Key bindings tab the same way: the
   bars in the one strip along the foot (above), the rows to bind in balanced columns over the most of the window, the keys larger */
@media (min-width:901px){
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-kl:not([hidden]){display:block;columns:3 300px;column-gap:26px;padding:8px 18px 8px}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-kg{break-inside:avoid;margin-bottom:6px}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-kg h4{margin:6px 0 3px}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-kr{min-height:31px}
  .dl-ui .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-kb{min-height:28px;font-size:13px;font-weight:700;color:#f3ecdc}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-kn{font-size:12.5px}
}
@media (min-width:901px) and (max-height:820px){.dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-kr{min-height:27px}.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-kb{min-height:24px}}
/* (a shorter window: columns would run on sideways out of sight, so the groups sit in a grid that scrolls down, its scrollbar showing) */
@media (min-width:901px) and (max-height:960px){
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-kl:not([hidden]){display:grid;columns:auto;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start;gap:0 26px;overflow-y:auto}
}
@media (min-width:901px) and (min-height:961px){
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-kl:not([hidden]){columns:4 250px;column-gap:20px}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-kg h4,.dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-kr{grid-template-columns:minmax(0,1fr) 72px 72px;gap:5px}
  .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-kr{min-height:29px}
  .dl-ui .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-kb{min-height:26px}
}
/* (30 Oct 2026, Chris: "group them by the categories they're in, like a spellbook") the book's tabs as sections: General, the three trees under
   their icons, Pets or Demons; each heading across the grid */
.dx-bk-tab{grid-column:1 / -1;display:flex;align-items:center;gap:9px;margin:10px 0 4px;padding:0 0 5px;font:700 12.5px/1 Cinzel,Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:var(--tf-wm);border-bottom:1px solid rgba(232,192,98,.2)}
.dx-bk-tab:first-child{margin-top:0}
.dx-bk-tab img{flex:none;width:22px;height:22px;border-radius:3px;box-shadow:0 0 0 1px #000,0 0 0 2px #6a5a38}
@media (min-width:901px){.dl-ui .dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-i{min-height:46px}}
@media (max-width:600px){.dx-bk-tab{margin:8px 0 3px;font-size:11px}}
/* ---- (30 Oct 2026, Chris on home at a laptop's 1280 x 600: "this page is not well balanced & fitting in the screen well") home fits the
   arena at any height: the book, the title and the line under it give way first on a short screen; the choices keep their size. The
   fighter card carries Change class. Beside the ladder panel, the column and the panel sit side by side as one group in the middle ---- */
.dx-lg-you{text-align:left}
.dl-ui .dx-lg-chg{flex:none;margin-left:auto;min-height:36px;padding:0 14px;font-size:12px}
@media (pointer:coarse){.dl-ui .dx-lg-chg{min-height:44px}}   /* (31 Oct 2026, the sizes sweep: 36 tall on a phone and an iPad) */
.dx-rk-sm + .dx-lg-chg{margin-left:10px}
.dx-home{padding-bottom:44px}
.dx-home .dx-lg-head{margin-bottom:20px}
@media (min-width:901px){.dx-hc-t b{white-space:nowrap}}
@media (min-width:901px){
  .dx-home .dx-lg-box{width:min(580px,100%)}
  .dx-home .dx-hc-t b{font-size:18px}.dx-home .dx-hc-sm .dx-hc-t b{font-size:14px}
  .dx-home .dx-lg-foot{bottom:12px;justify-content:center}
  .dx-home .dx-lg-fine{flex:0 1 auto;text-align:center}
}
@media (min-width:901px) and (max-height:900px){.dx-home .dx-lg-book{width:100px}.dx-home .dx-lg-head{margin-bottom:16px}}
@media (min-width:901px) and (max-height:760px){
  .dx-home .dx-lg-book{width:68px;margin-bottom:-2px}
  .dx-home #dx-lg-h span{font-size:clamp(26px,2.2vw,40px)}.dx-home .dx-title small{margin-bottom:6px}
  .dx-home .dx-lg-tag{margin-top:6px;font-size:13.5px}.dx-home .dx-lg-head{margin-bottom:14px}
  .dx-home .dx-lg-you{margin-bottom:10px;padding:7px 10px 7px 8px}.dx-home .dx-lg-you .dx-ci{width:38px;height:38px}
  .dl-ui .dx-home .dx-hc{padding:10px 12px}.dx-home .dx-hc-i .dx-ki,.dx-home .dx-hc-i img{width:44px;height:44px}
}
@media (min-width:901px) and (max-height:660px){
  .dx-home{padding-top:10px;padding-bottom:34px}
  .dx-home .dx-lg-book,.dx-home .dx-lg-tag{display:none}
  .dx-home .dx-lg-head{margin-bottom:12px}
  .dx-home .dx-hc-t small{font-size:12px}
  .dl-ui .dx-home .dx-hc-sm{min-height:40px}
}
/* (beside the ladder panel: one group in the middle, the column then the panel, centred on the arena together) */
@media (min-width:1270px) and (min-height:600px){
  .dx-home{display:grid;grid-template-columns:minmax(0,560px) 300px;grid-template-areas:"head top" "box top";column-gap:44px;justify-content:center;align-content:center;align-items:center}
  .dx-home .dx-lg-head{grid-area:head;align-self:end}
  .dx-home .dx-lg-box{grid-area:box;align-self:start;width:100%}
  .dx-home .dx-top-slot{grid-area:top;position:static;transform:none;width:300px;align-self:center}
}
/* (a desktop too narrow for the panel beside the column and too short for it under: the panel gives way, Ladder in the nav is one click; the
   column never starts above the arena's top) */
@media (min-width:901px){.dx-home{justify-content:safe center}}
@media (min-width:901px) and (max-width:1269px) and (max-height:899px),(min-width:1270px) and (max-height:599px){.dx-home .dx-top-slot{display:none}}
/* (30 Oct 2026, Chris on the fighter card: "make this have a hover effect of sorts, make it feel interactive") on home the whole card is the
   way to Change class: it lights gold under the pointer, the portrait's ring glows and lifts, the button lights with it */
.dx-home .dx-lg-you[data-f]{pointer-events:auto;cursor:pointer;transition:background .18s,box-shadow .18s}
.dx-home .dx-lg-you[data-f] .dx-ci{transition:box-shadow .18s,transform .18s}
.dx-home .dx-lg-you[data-f] .dx-lg-yt b{transition:color .18s,text-shadow .18s}
.dx-home .dx-lg-you[data-f]:hover{background:linear-gradient(90deg,rgba(255,209,0,.2),rgba(255,209,0,.06) 85%);box-shadow:inset 0 0 0 1px #ffd100,0 0 22px rgba(255,209,0,.2)}
.dx .dx-home .dx-lg-you[data-f]:hover .dx-ci,.dx-home .dx-lg-you[data-f]:hover .dx-ci{transform:translateY(-1px) scale(1.05);box-shadow:0 0 0 1px #000,0 0 0 2px #ffe27a,0 0 14px rgba(255,209,0,.55)}
.dx-home .dx-lg-you[data-f]:hover .dx-lg-yt b{text-shadow:0 1px 2px #000,0 0 12px rgba(255,209,0,.35)}
.dl-ui .dx-home .dx-lg-you[data-f]:hover .dx-lg-chg{border-image-source:var(--pl2h);color:#fff;filter:drop-shadow(0 0 8px rgba(255,209,0,.35))}
.dx-home .dx-lg-you[data-f]:active{background:linear-gradient(90deg,rgba(255,209,0,.26),rgba(255,209,0,.08) 85%)}
@media (prefers-reduced-motion:reduce){.dx-home .dx-lg-you[data-f]:hover .dx-ci{transform:none}}
/* (30 Oct 2026, the pane at 554 px: the notice sat over the ladder panel) below a desktop the home's foot is in the column's flow, under
   the ladder panel, never over it */
@media (max-width:900px){.dx-home .dx-lg-foot{position:static;margin:18px auto 0;width:min(470px,100%);justify-content:center}.dx-home{justify-content:flex-start}.dx-home .dx-lg-fine{text-align:center}}
/* (30 Oct 2026, the phone QA at 390 x 844: the Fight screen's bottom row cut "Menu" and "Key bindin" in a narrow window with a mouse) at 420
   px wide and under the row drops the Esc key's mark (Escape still goes home) and gives Key bindings the room its two words need, on two
   lines if it must, so every button there reads whole at 390 and 360 */
@media (max-width:420px){
  .dl-ui .dx-go-row .dx-btn kbd{display:none}
  .dl-ui .dx-go-row .dx-btn[data-f="keys"]:not(.dx-btn-big){flex-grow:1.6;white-space:normal;line-height:1.15;text-align:center}
}
/* ---- (31 Oct 2026, bars 4 and 5) how many action bars the fight shows (duel_book.js nbarsHtml): Bars 3, 4 or 5 in Key bindings, Pages 2,
   3 or 4 in a phone's book; a phone's sheet in the fight shows pages 3 and 4 as it shows 1 and 2 ---- */
.dx-nbars{display:inline-flex;align-items:center;gap:4px;grid-column:2 / span 2;justify-self:end}
.dx-nbars-h{font:600 11px/1 'Open Sans',sans-serif;color:#a89f8c;margin-right:4px}
.dl-ui .dx-nb{width:34px;min-height:28px;padding:0;font:700 12px/1 'Open Sans',sans-serif;color:#a89f8c;background:rgba(0,0,0,.25);border-radius:4px;box-shadow:inset 0 0 0 1px #3a3326}
.dl-ui .dx-nb[aria-checked=true]{color:#fff;background:rgba(201,162,74,.18);box-shadow:inset 0 0 0 1px #c9a24a}
.dx-bk-pgs{display:flex;justify-content:flex-end;padding:0 0 6px}.dx-nbars-f{grid-column:auto}
.dx-nbars-f .dx-nb{min-height:36px}
.dx-sheet .dx-bk-bars[data-row="18"] .dx-bk-r[data-o="18"],.dx-sheet .dx-bk-bars[data-row="24"] .dx-bk-r[data-o="24"]{display:grid}
@media (min-width:901px){.dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-r[data-o="18"]{order:4}.dx-book:not(.dx-dock):not(.dx-sheet):not(.dx-touch) .dx-bk-r[data-o="24"]{order:5}}