/* assets/duel/duel.css: the Duel Arena (seo/duel.js, assets/pick/yard/duel-play.js), 24 Oct 2026. The site's tokens (--bg, --gold, --ink),
   /pick's taste: no filled controls, gold only as ink, the class colour on names, Cinzel for titles and actions, 44 px to touch. */
/* (25 Oct 2026) duel-select.css and duel-hud.css are linked by the page, each with its own ?v= (an @import had no tag, and a phone kept a
   year-old copy of the HUD's rules under the new HUD) */

.dl-page{--dl-line:#3a3326;--dl-panel:rgba(14,12,10,.82);--dl-mana:#3a7bd5;--dl-rage:#c8432b;--dl-energy:#e2c044;--dl-hp:#3fae49;--dl-err:#ff4f45}
.dl-app main{max-width:none}
/* (25 Oct 2026) the arena's page has viewport-fit=cover for the fight's full screen: outside a fight the page keeps clear of a notch */
body.dl-page{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.dl-page .masthead .whatsnew{min-height:44px;box-sizing:border-box}   /* (QA round 2: 41 px, a touch target is 44) */
.dl{position:relative;height:calc(100svh - 96px);min-height:480px;margin:0 -16px;overflow:hidden;background:#0d0b09;user-select:none;-webkit-user-select:none;touch-action:none}
.dl-stage{position:absolute;inset:0}
.dl-stage canvas{display:block;width:100%;height:100%}
.dl-ui{position:absolute;inset:0;pointer-events:none;font:400 14px/1.4 'Open Sans',sans-serif;color:#e9e3d6}
.dl-ui button,.dl-ui a,.dl-ui input,.dl-ui .dl-stick{pointer-events:auto}
.dl-ui button{font:600 13px/1 Cinzel,Georgia,serif;color:#e9e3d6;background:none;border:0;box-shadow:0 0 0 1px var(--dl-line);border-radius:4px;min-height:44px;padding:0 14px;cursor:pointer}
.dl-ui button:hover{box-shadow:0 0 0 1px #8a7650}
.dl-ui button[aria-checked=true]{box-shadow:0 0 0 2px #c9a24a;color:#fff}
.dl-ui button:focus-visible{outline:2px solid #ffd100;outline-offset:2px}

.dl-about{max-width:760px;margin:24px auto;padding:0 16px}
.dl-about h2{font:700 20px/1.2 Cinzel,Georgia,serif;color:#ffd100}
.dl-about p{color:#cfc6b4;line-height:1.6}.dl-about .fine{font-size:12px;color:#9a907e}.dl-about a{color:#c9a24a}
.dl-nojs{padding:40px;text-align:center}
/* ---- the ladder page /duel/board (24 Oct 2026; owner: the result): the select screen's dusk and Cinzel, class tabs in their colours,
   the top three standing as their fighters, the rest a clean table, your row lit. Gold only as ink; no filled buttons. Phone first. ---- */
.db{position:relative;overflow:hidden;max-width:960px;margin:12px auto 32px;padding:22px 20px 26px;color:#e9e3d6;font:400 14px/1.5 'Open Sans',sans-serif;border-radius:8px;
  background:linear-gradient(rgba(10,8,6,.5),rgba(10,8,6,.86) 300px,#0d0b09 560px) 0 0/100% 100% no-repeat,url(/assets/pick/look/arena_wide.webp) 50% 0/100% auto no-repeat,#0d0b09;
  box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.6),0 14px 40px rgba(0,0,0,.5)}
.db-head{text-align:center}
.db-head h2{margin:0;font:700 32px/1.15 Cinzel,Georgia,serif;letter-spacing:.04em;color:#ffd100;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.db-head p{max-width:560px;margin:6px auto 16px;font-size:13px;color:#cfc6b4;text-shadow:0 1px 4px #000}
.db-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.db-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font:700 13px/1 Cinzel,Georgia,serif;color:var(--cc,#e9e3d6);text-decoration:none;white-space:nowrap;background:rgba(14,12,10,.7);border-radius:4px;box-shadow:0 0 0 1px var(--dl-line)}
.db-tabs a:hover{box-shadow:0 0 0 1px #8a7650}
.db-tabs a[aria-current]{box-shadow:0 0 0 2px #c9a24a;background:rgba(14,12,10,.9)}
.db-tabs a:focus-visible,.db-go a:focus-visible{outline:2px solid #ffd100;outline-offset:2px}
.db-you{margin:14px 0 0;text-align:center;color:#cfc6b4}.db-you b{color:#fff;font-family:PkNum,'Open Sans',sans-serif}
/* the top three: the first in the middle and raised, each standing as its fighter */
.db-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:12px;margin:18px 0 8px;padding:0;list-style:none}
.db-top:has(> :only-child){grid-template-columns:minmax(0,320px);justify-content:center}
.db-p{position:relative;padding:0 6px 14px;text-align:center;border-radius:6px;background:radial-gradient(ellipse 60% 46% at 50% 44%,rgba(255,226,170,.1),transparent 72%)}
.db-fig{position:relative;display:block;height:190px;margin-bottom:-4px}
.db-fig::after{content:"";position:absolute;left:24%;right:24%;bottom:-2px;height:12px;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent)}
.db-fig img{position:absolute;z-index:1;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 8px 20px rgba(0,0,0,.55))}
.db-p1 .db-fig{height:240px}.db-p1 .db-fig img{filter:drop-shadow(0 0 18px rgba(255,200,120,.3)) drop-shadow(0 8px 20px rgba(0,0,0,.55))}
.db-rk{display:block;margin:6px 0 2px;font:700 26px/1 Cinzel,Georgia,serif;color:#d8d2c4;text-shadow:0 2px 6px #000}
.db-p1 .db-rk{font-size:32px;color:#ffd100}.db-p3 .db-rk{color:#d49a6a}
.db-nm{display:block;font:700 19px/1.15 Cinzel,Georgia,serif;color:var(--cc);text-shadow:0 1px 3px #000;overflow-wrap:anywhere}
.db-p small{display:block;font-size:12px;color:#cfc6b4}
.db-rt{display:block;margin-top:4px;font:700 28px/1.1 PkNum,'Open Sans',sans-serif;color:#fff;font-variant-numeric:tabular-nums}.db-p1 .db-rt{font-size:34px}
.db-p .db-wl{margin-top:2px;font-size:11px;color:#9a907e}
.db-p.db-me{background:radial-gradient(ellipse 60% 46% at 50% 44%,rgba(255,226,170,.14),transparent 72%),rgba(201,162,74,.08);box-shadow:inset 0 0 0 1px rgba(201,162,74,.75)}
.db-tag{display:inline-block;margin-left:7px;padding:2px 5px;font:700 10px/1 Cinzel,Georgia,serif;letter-spacing:.08em;text-transform:uppercase;color:#ffd100;vertical-align:middle;border-radius:2px;box-shadow:0 0 0 1px #c9a24a}
/* the rest */
.db-tw{margin:10px 0 0}
.db-tb{width:100%;border-collapse:collapse;font-size:14px}
.db-tb th{padding:9px 8px;text-align:left;font:600 11px/1.2 Cinzel,Georgia,serif;letter-spacing:.08em;text-transform:uppercase;color:#b8ad98;border-bottom:1px solid rgba(201,162,74,.45)}
.db-tb td{padding:10px 8px;border-bottom:1px solid #221e17;vertical-align:middle}
.db-tb .n{text-align:right;font-variant-numeric:tabular-nums}.db-tb th.n{text-align:right}
.db-tb .db-r{color:#9a907e;width:2.5em}
.db-name b{font:700 15px/1.2 Cinzel,Georgia,serif;text-shadow:0 1px 2px #000}.db-name small{display:none}
.db-tb .db-rt2{font-weight:700;color:#fff}.db-tb .db-cls{color:#cfc6b4}
.db-tb tr.db-me td{background:rgba(201,162,74,.1)}.db-tb tr.db-me td:first-child{box-shadow:inset 3px 0 #c9a24a}
.db-tg{margin-left:5px;font:600 .62em/1 PkNum,'Open Sans',sans-serif;color:#a99d86;text-shadow:none;letter-spacing:.02em;vertical-align:.12em;white-space:nowrap}
.db-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.db-empty{margin:28px 0;text-align:center;color:#cfc6b4}
.db-go{margin:22px 0 10px;text-align:center}
/* (25 Oct 2026, a new player's playtest: "Duel as a Mage" drew as a plain blue link) the site's outline button, gold as ink */
.db-go a.dl-go{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 40px;border-radius:4px;font:700 18px/1 Cinzel,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:#ffd100;text-decoration:none;background:rgba(14,12,10,.6);box-shadow:0 0 0 2px #c9a24a;text-shadow:0 0 14px rgba(255,209,0,.35)}
.db-go a.dl-go:hover{box-shadow:0 0 0 2px #ffd100,0 0 22px rgba(255,209,0,.25)}
.db-fine{max-width:620px;margin:0 auto;text-align:center;font-size:12px;color:#9a907e}
/* (31 Oct 2026, Chris: "page 2 the next 500") the pager over the board and under it: Prev, the pages round this one with the first and
   the last, Next. The tabs' dark tiles, gold as ink on this page and on Prev and Next; 44 px to a thumb. On a phone the numbers take a
   row of their own and Prev and Next share the one under it */
.db-pg-l{margin:16px 0 0;text-align:center;font-size:12px;color:#9a907e}
.db-pg{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 0 4px}
.db-pg.db-pg-b{margin:18px 0 0}
.db-pg-ns{display:flex;align-items:center;gap:6px}
.db-pg a,.db-pg span.db-pg-n,.db-pg span.db-pg-x{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:44px;min-height:44px;padding:0 10px;font:700 15px/1 PkNum,'Open Sans',sans-serif;font-variant-numeric:tabular-nums;color:#e9e3d6;text-decoration:none;background:rgba(14,12,10,.7);border-radius:4px;box-shadow:0 0 0 1px var(--dl-line)}
.db-pg a.db-pg-x,.db-pg span.db-pg-x{padding:0 18px;font:700 12px/1 Cinzel,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:#ffd100}
.db-pg a:hover{box-shadow:0 0 0 1px #8a7650}
.db-pg [aria-current]{color:#ffd100;background:rgba(14,12,10,.9);box-shadow:0 0 0 2px #c9a24a}
.db-pg [aria-disabled]{opacity:.35}
.db-pg a:focus-visible,.db-yl:focus-visible{outline:2px solid #ffd100;outline-offset:2px}
.db-pg-gap{padding:0 2px;color:#9a907e}
.db-yl{color:#ffd100;text-underline-offset:3px;white-space:nowrap}
@media (max-width:700px){
  .db-pg{flex-wrap:wrap;gap:8px 6px}
  .db-pg-ns{order:-1;flex:1 0 100%;justify-content:center;gap:4px}
  .db-pg a,.db-pg span.db-pg-n{min-width:40px;padding:0 8px}
  .db-pg .db-pg-x{flex:1 1 0;max-width:170px}
}
@media (max-width:700px){
  .db{margin:8px -8px 24px;padding:18px 12px 22px;background:linear-gradient(rgba(10,8,6,.45),rgba(10,8,6,.86) 260px,#0d0b09 470px) 0 0/100% 100% no-repeat,url(/assets/pick/look/arena_tall.webp) 50% 0/100% auto no-repeat,#0d0b09}
  .db-head h2{font-size:25px}
  /* (a new player's playtest: "ROGU", the tabs ran off the edge) they wrap, every class whole */
  .db-tabs{gap:5px}
  .db-tabs a{padding:0 10px;font-size:12px}
  .db-go a.dl-go{padding:0 22px;font-size:16px;letter-spacing:.1em}
  .db-top{gap:4px;margin-top:14px}
  .db-p{padding:0 2px 10px}
  .db-fig{height:132px}.db-p1 .db-fig{height:168px}
  .db-rk{font-size:20px}.db-p1 .db-rk{font-size:24px}
  .db-nm{font-size:14px}.db-p small{font-size:11px;line-height:1.3}
  .db-rt{font-size:21px}.db-p1 .db-rt{font-size:25px}
  .db-p .db-wl{font-size:10px}
  .db-tb{font-size:13px}.db-tb .db-cls{display:none}
  .db-tb th{padding:8px 4px;font-size:10px;letter-spacing:.04em}.db-tb td{padding:9px 4px}
  .db-name b{font-size:14px}.db-name small{display:block;font-size:11px;color:#a99d86}
  .db-tb .db-r{width:2em}
  /* (31 Oct 2026, a phone at 390 px: the table ran 417 px in a 350 px box, Best streak cut off) Best streak and Won vs players go on a
     phone and read under the name, after the spec, so the table fits 360 px with no sideways scroll */
  .db-tb .db-bs,.db-tb .db-pv{display:none}
}


/* ---- (25 Oct 2026, Chris's iPhone recording: every drag moved the page and the in-app browser's sheet 20 to 80 px, and a frame went
   black as the visible area changed) a phone, a touch tablet or a short window in a duel: the arena is the whole screen, fixed, and the
   page under it never scrolls or bounces (duel_src.js sets html.dl-lock for the duel; duel_scene.js takes the touches) ---- */
html.dl-lock,html.dl-lock body{overflow:hidden;overscroll-behavior:none;background:#0d0b09}
html.dl-lock .dl.dl-live{position:fixed;left:0;right:0;top:0;height:100vh;height:100svh;min-height:0;margin:0;z-index:60}
/* (25 Oct 2026, QA round 4: stutters) the page under a phone's duel is not drawn at all: the site's Halloween night (fifty looping
   animations: stars, bats, mist, clouds, a cat that measures the yard every frame), the masthead and the notes below kept running behind
   the arena, unseen; they come back as the duel ends */
html.dl-lock body > :not(.app):not(link):not(script):not(style){display:none!important}
html.dl-lock .dl-app > :not(main),html.dl-lock .dl-app main > :not(#dl){display:none!important}
/* (30 Oct 2026, Chris on a phone: "the how it works tab shouldn't be showing like that so far up, make it not overlap things") on a phone
   held upright the arena is tall enough for the create screen's whole column, its main button inside it, and How a duel works sits
   well below, never against the button; a fight keeps its own full height */
@media (max-width:700px) and (orientation:portrait){.dl:not(.dl-live){min-height:650px}.dl-about{margin-top:56px}}
/* (30 Oct 2026, Chris on a phone: "this page is very difficult to move up & down, kinda seems locked") the arena takes every touch only
   in a fight (dl-live, and duel_scene.js keeps the page still there); on the setup screens a swipe up or down scrolls the page and a
   sideways drag still turns the hero */
.dl:not(.dl-live){touch-action:pan-y}