/* assets/duel/duel-hud.css: the Duel Arena's HUD (duel_hud.js; owner: the HUD), 24 Oct 2026. */
/* (24 Oct 2026) Rebuilt for Chris's "need to know like when im stunned & the name plates & character bar needs to be a lot better & things
   way more fluid": unit frames in the game's layout (ours), a loss-of-control alert, a nameplate, a real bar. Everything that moves each
   frame moves by transform or opacity; bars scale from their left edge instead of changing width. */
.dl-fight{position:absolute;inset:0;--dl-bronze:#5b4a2e;--dl-plate:linear-gradient(180deg,rgba(30,26,20,.94),rgba(12,10,8,.94))}

/* ---- unit frames: yours top left, the target's beside it (mirrored) ---- */
.dl-top{position:absolute;top:12px;left:12px;display:flex;gap:16px;align-items:flex-start}
.dl-frame{position:relative;width:336px;display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto;align-items:center}
.dl-frame.dl-b{grid-template-columns:minmax(0,1fr) 72px;opacity:0;visibility:hidden;transition:opacity .1s,visibility 0s .1s}
/* (27 Oct 2026, round 9) the target's frame is there the moment you target (it slid down over 0.18 sec: Tab read late), and goes as quickly */
.dl-frame.dl-b.on{opacity:1;visibility:visible;transition:opacity .06s}
/* (27 Oct 2026, round 9, Chris: "when you are targeting someone its like their portrait isnt highlighted enough for the user to believe that
   they are being targeted ... should just overall feel better") your target's frame reads as the active one: a bright gold edge and a warm
   light round its plate and its portrait (ours, the game's gold for an elite's border made plain), the name on its selection colour as
   Forever's target frame lays it (Camelot TargetFrame.lua:15-21, the ReputationColor band, UnitSelectionColor: red for a foe, green for a
   friend, Mainline TargetFrame.lua:325-336), and a flash of light when it becomes your target */
.dl-frame.dl-b.on .dl-fb{box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(255,216,120,.92),0 0 0 2px rgba(201,162,74,.6),0 0 16px rgba(255,196,80,.3),0 4px 14px rgba(0,0,0,.45)}
.dl-frame.dl-b.on .dl-port{box-shadow:0 0 0 2px #0a0806,0 0 0 4px #e3bd5c,0 0 0 5px #0a0806,0 0 18px rgba(255,196,80,.5)}
.dl-frame.dl-b.on .dl-port.dl-held{box-shadow:0 0 0 2px #0a0806,0 0 0 4px var(--ht,#ffb45e),0 0 0 5px #0a0806,0 0 16px var(--ht,#ffb45e)}
.dl-b .dl-fn b{position:relative;isolation:isolate;padding:0 6px 0 16px;margin-right:-4px;text-shadow:0 0 2px #000,0 1px 2px #000,1px 1px 0 #000}
.dl-b .dl-fn b::before{content:'';position:absolute;inset:-2px 0 -1px;z-index:-1;border-radius:2px;background:linear-gradient(270deg,rgba(170,14,10,.85),rgba(170,14,10,.6) 55%,rgba(170,14,10,0))}
.dl-tpet.dl-friend .dl-fn b::before{background:linear-gradient(270deg,rgba(0,130,24,.85),rgba(0,130,24,.6) 55%,rgba(0,130,24,0))}
/* (the line asking you to target goes the moment you have one, not over the target's frame as it fades) */
.dl-top:has(.dl-frame.dl-b.on) .dl-hint{transition:none}
.dl-frame.dl-b.dl-tgton .dl-fb{animation:dl-tgton .4s ease-out}.dl-frame.dl-b.dl-tgton .dl-port{animation:dl-tgtport .4s ease-out}
@keyframes dl-tgton{0%{box-shadow:0 0 0 1px #000,inset 0 0 0 2px #fff3c4,0 0 0 3px #ffd36a,0 0 30px rgba(255,214,110,.75),0 4px 14px rgba(0,0,0,.45)}100%{box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(255,216,120,.92),0 0 0 2px rgba(201,162,74,.6),0 0 16px rgba(255,196,80,.3),0 4px 14px rgba(0,0,0,.45)}}
@keyframes dl-tgtport{0%{box-shadow:0 0 0 2px #0a0806,0 0 0 5px #fff1b8,0 0 0 6px #0a0806,0 0 32px rgba(255,214,110,.85)}100%{box-shadow:0 0 0 2px #0a0806,0 0 0 4px #e3bd5c,0 0 0 5px #0a0806,0 0 18px rgba(255,196,80,.5)}}
@media (prefers-reduced-motion:reduce){.dl-frame.dl-b.dl-tgton .dl-fb,.dl-frame.dl-b.dl-tgton .dl-port,.dl-np.dl-tgton .dl-np-hp{animation:none}}
/* (27 Oct 2026, round 9) the target of target (duel_hud.js totPaint): beside the target's frame on a wide screen, under the enemy pet's
   frame when that is there; a small portrait, the name, the health (the pet frames' own look) */
.dl-tot{display:none}
@media (min-width:1000px) and (min-height:501px){
  .dl-tot{position:absolute;left:702px;top:18px;display:flex;align-items:center;width:160px;cursor:pointer;pointer-events:auto}
  .dl-tot[hidden]{display:none}
  .dl-top:has(.dl-frame.dl-b.on>.dl-pf:not([hidden])) .dl-tot{top:66px}
  .dl-tot.dl-tot-me{cursor:default}
}
.dl-tot-port{position:relative;flex:none;width:32px;height:32px;border-radius:50%;z-index:2;overflow:hidden;background:#0d0b09;box-shadow:0 0 0 2px #0a0806,0 0 0 3px var(--dl-bronze),0 3px 10px rgba(0,0,0,.6)}
.dl-tot-port img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;transform:scale(1.08)}
.dl-tot-b{flex:1;min-width:0;margin-left:-9px;padding:3px 7px 4px 14px;background:var(--dl-plate);border-radius:0 5px 5px 0;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.7)}
.dl-tot-b b{display:block;font:700 11px/1.2 Cinzel,Georgia,serif;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.dl-tot-hp{position:relative;display:block;height:9px;background:#0b0907;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px #000}
.dl-tot-hp i{position:absolute;inset:0;transform-origin:0 50%;background:linear-gradient(180deg,#78e07f 0,#36a842 45%,#23812e 100%)}
.dl-tot-hp.dl-low i{background:linear-gradient(180deg,#f08a5a 0,#c9472d 50%,#99301c 100%)}
.dl-tot-hp span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 8px/1 PkNum,'Open Sans',sans-serif;color:#fff;text-shadow:0 1px 1px #000,0 0 2px #000}
.dl-over .dl-tot{opacity:0}
.dl-port{position:relative;grid-row:1/3;grid-column:1;align-self:start;width:72px;height:72px;border-radius:50%;z-index:2;background:#0d0b09;box-shadow:0 0 0 2px #0a0806,0 0 0 4px var(--dl-bronze),0 0 0 5px #0a0806,0 4px 14px rgba(0,0,0,.6)}
.dl-b .dl-port{grid-column:2}
.dl-pr{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;transform:scale(1.08)}
.dl-pc{position:absolute;right:-4px;top:-3px;width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 2px #0a0806,0 0 0 3px var(--dl-bronze);z-index:3}
.dl-b .dl-pc{right:auto;left:-4px}
.dl-lvl{position:absolute;left:-4px;bottom:-2px;z-index:3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 PkNum,'Open Sans',sans-serif;color:#ffd100;background:radial-gradient(circle at 40% 35%,#2a241b,#0c0a08);box-shadow:0 0 0 2px #0a0806,0 0 0 3px var(--dl-bronze)}
.dl-b .dl-lvl{left:auto;right:-4px}
/* a hold on the portrait: the spell's icon over the face, a sweep, the seconds, a ring in the hold's tint */
.dl-pcc{position:absolute;inset:0;border-radius:50%;overflow:hidden;opacity:0;transition:opacity .12s;z-index:2}
.dl-pcc img,.dl-pcc i{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}.dl-pcc img,.dl-np-cc img{background:#0b0907}.dl-pcc img{transform:scale(1.1)}
.dl-pcc b{position:absolute;inset:0;display:grid;place-items:center;font:700 22px/1 PkNum,'Open Sans',sans-serif;color:#fff;text-shadow:0 0 4px #000,0 1px 2px #000}
.dl-port.dl-held .dl-pcc{opacity:1}
.dl-port.dl-held{box-shadow:0 0 0 2px #0a0806,0 0 0 4px var(--ht,#ffb45e),0 0 0 5px #0a0806,0 0 16px var(--ht,#ffb45e)}
.dl-port::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 45%,rgba(255,40,30,.75));opacity:0;z-index:2;pointer-events:none}
.dl-port.dl-hurt::after{animation:dl-hurt .45s ease-out}
@keyframes dl-hurt{0%{opacity:1}100%{opacity:0}}
.dl-fb{grid-column:2;grid-row:1;margin-left:-16px;padding:6px 9px 7px 24px;background:var(--dl-plate);border-radius:0 6px 6px 0;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.7),0 4px 14px rgba(0,0,0,.45)}
.dl-b .dl-fb{grid-column:1;margin:0 -16px 0 0;padding:6px 24px 7px 9px;border-radius:6px 0 0 6px}
.dl-fn{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;min-width:0}
.dl-b .dl-fn{flex-direction:row-reverse}.dl-a .dl-fn small{text-align:right}
.dl-fn b{flex:none;max-width:100%;font:700 15px/1.15 Cinzel,Georgia,serif;color:var(--cc);text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-fn small{flex:1 1 0;min-width:0;font-size:11px;color:#a99d86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-fx{grid-column:2;grid-row:2;padding:5px 0 0 10px;min-width:0}
.dl-b .dl-fx{grid-column:1;padding:5px 10px 0 0}

/* health: a trail (white, what the last hit took), the fill, an absorb shield laid over the empty part, the numbers */
.dl-hp,.dl-np-hp{position:relative;height:18px;background:#0b0907;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px #000,inset 0 2px 4px rgba(0,0,0,.7)}
.dl-hp s,.dl-hp i,.dl-hp em,.dl-np-hp s,.dl-np-hp i,.dl-np-hp em{position:absolute;inset:0;transform-origin:0 50%;text-decoration:none}
/* (28 Oct 2026, impact round, bar-ease-ghost) the trail is your frame's loss bar alone, Forever's PlayerFrameHealthBarAnimatedLoss: solid red
   (AnimatedHealthLossMixin:OnLoad SetStatusBarColor(1, 0, 0, 1), UnitFrame.lua l.666-775); the target's frame and the nameplate have none */
.dl-hp s{background:#ff0000}
.dl-b .dl-hp s,.dl-np-hp s{display:none}
.dl-hp i,.dl-np-hp i{background:linear-gradient(180deg,#78e07f 0,#36a842 45%,#23812e 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.dl-hp.dl-low i{background:linear-gradient(180deg,#f08a5a 0,#c9472d 50%,#99301c 100%)}
.dl-hp em,.dl-np-hp em{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.75) 0 4px,rgba(200,225,255,.4) 4px 8px);transform:scaleX(0)}
.dl-hv,.dl-hpc{position:absolute;top:0;bottom:0;display:flex;align-items:center;font:600 11px/1 PkNum,'Open Sans',sans-serif;color:#fff;text-shadow:0 1px 1px #000,0 0 3px #000;white-space:nowrap}
.dl-hv{left:7px}.dl-hpc{right:7px}
/* (26 Oct 2026) a shield's number stands apart from the health's, in the shield's own pale blue */
.dl-ha:not(:empty){margin-left:.45em;color:#d6e6ff}.dl-b .dl-ha:not(:empty){margin:0 0 0 .45em}
.dl-b .dl-hv{left:auto;right:7px}.dl-b .dl-hpc{right:auto;left:7px}
.dl-res{position:relative;height:10px;margin-top:3px;background:#0b0907;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px #000}
.dl-res i{position:absolute;inset:0;transform-origin:0 50%;background:linear-gradient(180deg,#6aa6ff,#2f68c9)}
.dl-res[data-kind=rage] i{background:linear-gradient(180deg,#f0684e,#a92c1a)}.dl-res[data-kind=energy] i{background:linear-gradient(180deg,#f6e07a,#c9a52b)}
.dl-res span{position:absolute;inset:0;display:grid;place-items:center;font:600 9px/1 PkNum,'Open Sans',sans-serif;color:#fff;text-shadow:0 1px 1px #000}
.dl-cp{display:flex;gap:4px;margin-top:4px}.dl-cp[hidden]{display:none}.dl-b .dl-cp{justify-content:flex-end}
.dl-cp i{width:10px;height:10px;border-radius:50%;background:#1a1510;box-shadow:inset 0 0 0 1px #000,0 0 0 1px #3b3122}
.dl-cp i.on{background:radial-gradient(circle at 40% 35%,#ffd0a0,#ff7a35 55%,#b33a12);box-shadow:0 0 6px rgba(255,120,50,.8)}

/* buffs and debuffs under the frame: small icons, the time under 10 minutes, stacks; a debuff has a red rim, a hold its tint */
.dl-buffs,.dl-debuffs,.dl-np-db{display:flex;flex-wrap:wrap;gap:3px}
.dl-debuffs:not(:empty){margin-top:3px}
/* (27 Oct 2026, round 6, ui-auras) the target's row: debuffs first, then buffs, from the left under its bars, 3 px apart; 21 px for yours,
   17 for the rest, a dark sweep over the share that has run (TargetFrameAuraShared.lua:6-28, TargetFrameAuraButton.xml:26) */
.dl-tga .dl-debuffs:not(:empty){margin-top:0}.dl-tga .dl-buffs:not(:empty){margin-top:3px}
.dl-tga .dl-buffs,.dl-tga .dl-debuffs{justify-content:flex-start;align-items:flex-end}
.dl-ui .dl-tgau{width:17px;height:17px;border-radius:2px}.dl-ui .dl-tgau.dl-big{width:21px;height:21px}
.dl-asw{position:absolute;inset:0;pointer-events:none}
.dl-tgau b{font-size:9px}
/* your own, top right under the clock: 30 of 768 a side, the time under each in gold, white under 90 sec (BuffFrameTemplates.xml:5-16) */
.dl-pau{position:absolute;top:calc(12px + 34px + 10px);right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--uh,1080px) * 5 / 768);pointer-events:none}
.dl-pau .dl-buffs,.dl-pau .dl-debuffs{flex-direction:row-reverse;gap:calc(var(--uh,1080px) * 5 / 768);margin:0;max-width:calc(var(--uh,1080px) * 35 / 768 * 8)}
.dl-pa1{display:flex;flex-direction:column;align-items:center;pointer-events:auto}
.dl-pau .dl-au{width:calc(var(--uh,1080px) * 30 / 768);height:calc(var(--uh,1080px) * 30 / 768);border-radius:2px}
.dl-pau .dl-au b{font-size:calc(var(--uh,1080px) * 12 / 768)}
.dl-pa1 small{margin-top:1px;font:600 calc(var(--uh,1080px) * 10 / 768)/1 'Open Sans',sans-serif;color:#ffd100;text-shadow:0 1px 1px #000,0 0 2px #000;white-space:nowrap}
.dl-pa1 small.dl-warn{color:#fff}
/* debuff borders by dispel type (AuraUtil.lua:5-8; 1.12 DebuffTypeColor) */
.dl-au.dl-deb.dl-dt-none{box-shadow:0 0 0 1px #000,0 0 0 2px #cc0000}.dl-au.dl-deb.dl-dt-magic{box-shadow:0 0 0 1px #000,0 0 0 2px #3399ff}
.dl-au.dl-deb.dl-dt-curse{box-shadow:0 0 0 1px #000,0 0 0 2px #9900ff}.dl-au.dl-deb.dl-dt-disease{box-shadow:0 0 0 1px #000,0 0 0 2px #996600}
.dl-au.dl-deb.dl-dt-poison{box-shadow:0 0 0 1px #000,0 0 0 2px #009900}
.dl-au{position:relative;width:26px;height:26px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px #000,0 0 0 2px #4b3f2a}
.dl-au.dl-deb{box-shadow:0 0 0 1px #000,0 0 0 2px #a8352a}.dl-au.dl-hold{box-shadow:0 0 0 1px #000,0 0 0 2px #ffb45e}
.dl-au img{width:100%;height:100%;display:block;transform:scale(1.1)}
.dl-au b{position:absolute;right:1px;bottom:0;font:700 10px/1 PkNum,'Open Sans',sans-serif;color:#fff;text-shadow:0 0 2px #000,0 1px 1px #000}
.dl-au small{position:absolute;left:0;right:0;bottom:0;text-align:center;font:700 10px/12px PkNum,'Open Sans',sans-serif;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));text-shadow:0 1px 1px #000}
.dl-au.dl-soon small{color:#ffb39a}
.dl-hint{position:absolute;left:368px;top:24px;margin:0;padding:6px 12px;font:600 13px/1.3 'Open Sans',sans-serif;color:#e9e3d6;background:rgba(10,9,8,.7);border-radius:4px;box-shadow:0 0 0 1px var(--dl-line);opacity:0;transition:opacity .25s;white-space:nowrap}
.dl-hint.on{opacity:1}

/* ---- cast bars: the bot's (frame and nameplate) and yours; amber for a cast, green for a channel, "Interrupted" in red ---- */
.dl-cast{display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .22s}
.dl-cast.on{opacity:1;transition:opacity .06s}
.dl-cic{flex:none;width:20px;height:20px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px #000,0 0 0 2px #4b3f2a}.dl-cic img{width:100%;height:100%;display:block;transform:scale(1.1)}
.dl-cbar{position:relative;flex:1;min-width:0;height:16px;background:#0b0907;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px #000,0 0 0 1px rgba(91,74,46,.7)}
.dl-cbar i{position:absolute;inset:0;transform-origin:0 50%;background:linear-gradient(180deg,#ffd77a,#d99a2b 55%,#a96d14)}
.dl-chan .dl-cbar i{background:linear-gradient(180deg,#8ff0a8,#3fae66 55%,#24804a)}
.dl-int .dl-cbar i{background:linear-gradient(180deg,#e0634e,#9c2b1c)}
.dl-done .dl-cbar i{filter:brightness(1.35)}
.dl-cn,.dl-ctm{position:absolute;top:0;bottom:0;display:flex;align-items:center;font:600 11px/1 'Open Sans',sans-serif;color:#fff;text-shadow:0 1px 1px #000,0 0 3px #000;white-space:nowrap}
.dl-cn{left:6px;right:34px;overflow:hidden}.dl-ctm{right:6px;font-family:PkNum,'Open Sans',sans-serif}
.dl-cb{margin-bottom:4px}
.dl-me-cast{position:absolute;left:50%;bottom:150px;width:320px;margin-left:-160px}
.dl-me-cast .dl-cic{width:26px;height:26px}.dl-me-cast .dl-cbar{height:22px}.dl-me-cast .dl-cn{font-size:12px}

/* ---- the clock, the error line, the count ---- */
.dl-clock{position:absolute;top:12px;right:12px;font:700 18px/1 PkNum,Cinzel,Georgia,serif;color:#e9e3d6;padding:8px 12px;background:var(--dl-plate);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.7);border-radius:5px}
/* (24 Oct 2026, QA: the error line sat over the bot and the loss-of-control alert) it sits just over your cast bar, where your eyes are
   when a press fails, clear of the bot, the alert and the combat text */
.dl-err-line{position:absolute;bottom:190px;left:0;right:0;text-align:center;font:600 16px/1.2 'Open Sans',sans-serif;color:#ff2020;text-shadow:0 1px 2px #000,0 0 6px #000;pointer-events:none}
/* (26 Oct 2026, the swarm: "fades within about 1 sec, too fast to read on a phone") the words hold 2 sec, as the game's error text does;
   the line's own layer steps aside of a nameplate (duel_hud.js placeUp) */
/* (27 Oct 2026, round 6, ui-error-blacklist) up to three lines, the newest on top, each red (RED_FONT_COLOR) and lit and faded by
   duel_hud.js errStep: 2 sec, then out over 0.5, a repeat flashing brighter (UIErrorsFrame.xml, UIErrorsFrame.lua:26-48) */
.dl-err-line>span{display:block;width:max-content;max-width:100%;margin:0 auto;opacity:0}
.dl-err-line>span:empty{display:none}
.dl-locw{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;will-change:transform}
.dl-count{position:absolute;top:34%;left:0;right:0;text-align:center;font:700 72px/1 Cinzel,Georgia,serif;color:#ffd100;text-shadow:0 2px 14px #000,0 0 2px #000;opacity:0;transition:opacity .2s;pointer-events:none}
.dl-count.on{opacity:1}.dl-count.dl-tick{animation:dl-tick .5s cubic-bezier(.2,.9,.3,1.2)}.dl-count.go{animation:dl-go 1s ease-out forwards}
@keyframes dl-tick{0%{transform:scale(1.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes dl-go{0%{transform:scale(.7);opacity:0}22%{transform:scale(1.08);opacity:1}100%{transform:scale(1.2);opacity:0}}

/* ---- loss of control (27 Oct 2026, round 9): Retail's LossOfControlFrame, over your own character (duel_hud.js lossOfControl places
   it). Its sizes are the frame's own in the game's 768-high units, scaled by the stage's height as the client scales its UI (--u, kept
   between 560 and 1440 px high so a phone held sideways still reads it): the band 256 x 58 (LoC-ShadowBG at 0.6), the red lines 236 x 27
   over and under it (Loc-RedLine), the icon 48 x 48 with its sweep, the name in a 22-high font swelling to 32 as it comes in, the time
   20 high swelling to 28 (LossOfControlFrame.xml, ABILITY_NAME_MIN/MAX_HEIGHT, TIME_LEFT_MIN/MAX_HEIGHT). The art is drawn here in CSS,
   none of the game's files. The name in the game's gold (NORMAL_FONT_COLOR 1, 0.82, 0), the time in white with a 2 px shadow ---- */
.dl-loc{--u:calc(clamp(560px,var(--uh,1080px),1440px) / 768);position:absolute;left:0;top:0;transform:translate(-50%,-50%);box-sizing:border-box;min-width:calc(var(--u) * 256);height:calc(var(--u) * 58);
  padding:0 calc(var(--u) * 30);display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 8);white-space:nowrap;
  opacity:0;transition:opacity .3s ease-out;pointer-events:none}
.dl-loc.on{opacity:1;transition:opacity .08s}
/* the band: black, soft at its two ends, as the game's shadow texture */
.dl-loc-bg{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.62) 16%,rgba(0,0,0,.62) 84%,transparent);z-index:-1}
/* the red lines: a bright core at the band's edge, a glow spreading away from it, both fading to the ends */
.dl-loc-rl{position:absolute;left:50%;width:calc(var(--u) * 236);height:calc(var(--u) * 27);margin-left:calc(var(--u) * -118);z-index:-1;
  background:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(255,40,20,.42),rgba(255,40,20,.12) 45%,transparent 72%)}
.dl-loc-rl::after{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(var(--u) * 2.2);background:linear-gradient(90deg,transparent,#c8140a 12%,#ff4a2a 35%,#ff7a52 50%,#ff4a2a 65%,#c8140a 88%,transparent);box-shadow:0 0 calc(var(--u) * 6) rgba(255,50,20,.7)}
.dl-loc-rt{bottom:100%}
.dl-loc-rb{top:100%;transform:scaleY(-1)}
/* the icon, square as the game's, its sweep laid over it */
.dl-loc-ic{position:relative;flex:none;width:calc(var(--u) * 48);height:calc(var(--u) * 48);box-shadow:0 0 0 1px #000,0 0 calc(var(--u) * 8) rgba(0,0,0,.8)}
.dl-loc-ic img,.dl-loc-ic i{position:absolute;inset:0;width:100%;height:100%}
.dl-loc-ic img{background:#0b0907;transform:scale(1.08)}
.dl-loc-ic{overflow:hidden}
/* the name over the time, both from the same left edge */
.dl-loc-tx{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u) * 2)}
.dl-loc-tx b{display:block;transform-origin:0 60%;font:700 calc(var(--u) * 22)/1 Cinzel,Georgia,serif;letter-spacing:.02em;color:#ffd100;text-shadow:0 0 calc(var(--u) * 2) #000,calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 #000}
.dl-loc-s{display:block;transform-origin:0 50%;font:700 calc(var(--u) * 20)/1 'Open Sans',sans-serif;color:#fff;text-shadow:calc(var(--u) * 2) calc(var(--u) * 2) 0 #000,0 0 calc(var(--u) * 3) #000}
.dl-loc-s em{font:inherit;font-family:PkNum,'Open Sans',sans-serif;font-style:normal;font-variant-numeric:tabular-nums}
/* the words for a screen reader alone */
.dl-loc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* its coming in, the game's Anim group: the lines from a tenth of their width out to 1.4 and back to 1 (0.01, 0.1 and 0.1 sec), the
   icon swelling to 1.33 and 20 out to the left and back (0.1 and 0.1 sec), the name and the time swelling and settling (FadingFrame
   text scaling: up in 0.1 sec, down in 0.2) */
.dl-loc.dl-pop .dl-loc-rl::after{animation:dl-loc-line .21s linear}
.dl-loc.dl-pop .dl-loc-ic{animation:dl-loc-icon .2s ease-out}
.dl-loc.dl-pop .dl-loc-tx b{animation:dl-loc-name .3s ease-out}
.dl-loc.dl-pop .dl-loc-s{animation:dl-loc-time .3s ease-out}
@keyframes dl-loc-line{0%{transform:scaleX(.1)}5%{transform:scaleX(.1)}52%{transform:scaleX(1.4)}100%{transform:scaleX(1)}}
@keyframes dl-loc-icon{0%{transform:none}50%{transform:translateX(calc(var(--u) * -20)) scale(1.33)}100%{transform:none}}
@keyframes dl-loc-name{0%{transform:scale(1)}33%{transform:scale(1.4545)}100%{transform:scale(1)}}
@keyframes dl-loc-time{0%{transform:scale(1)}33%{transform:scale(1.4)}100%{transform:scale(1)}}

/* ---- combat text: each number rides a wrapper that follows its body; the number rises, drifts and fades ---- */
/* (28 Oct 2026, impact round, text-off-body) the combat layer lies under the frames along the top (it comes before .dl-top), as the game's
   world text slips under the UI */
.dl-ct{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.dl-nw{position:absolute;left:0;top:0;will-change:transform}
/* (28 Oct 2026, impact round, num-font-outline: a soft local Times New Roman Bold with a blurred shadow, which ran into fire and frost) the
   game draws world text in a heavy damage face with a hard black outline (DAMAGE_TEXT_FONT, from memory, so ours to label; Forever's
   Fonts.xml number styles are outlined THICK): a heavy grotesque already served (Cabinet Grotesk 800), a 1.5 px outline outside the glyph
   (a 3 px stroke painted under the fill) and one short drop. The frames' bar text keeps PkNum */
@font-face{font-family:DlNum;src:url(/assets/fonts/cabinet-grotesk-800.woff2) format('woff2');font-weight:800;font-display:swap}
/* (28 Oct 2026, impact round, text-fade-in: it faded and grew in, opacity 0 and scale 0.6 on the hit's frame, readable 100 to 150 ms later)
   whole at full strength on its first frame; a hit rises with a light ease-out (the stops, linear between them) and fades over its last 28%
   (duel_hud.js RISE). Sizes (crit-size): a hit 24 px, a crit 40 px, a tick as big as a hit (from memory of the WorldTextScreenY 0.015 and
   WorldTextCritScreenY 0.0275 cvars, so ours to label) */
.dl-num{position:absolute;left:0;top:0;white-space:nowrap;font:800 24px/1 DlNum,'Arial Black',Arial,sans-serif;color:#fff;-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:0 2px 2px #000;animation:dl-rise 1.35s linear forwards;will-change:transform,opacity}
@keyframes dl-rise{0%{opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(1)}25%{transform:translate(-50%,-50%) translate(0,-24px) scale(1)}50%{transform:translate(-50%,-50%) translate(0,-44px) scale(1)}72%{opacity:1;transform:translate(-50%,-50%) translate(0,-57px) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) translate(0,-66px) scale(1)}}
/* (30 Oct 2026, Chris: "a bit more exciting like yellow dps crit numbers") a crit pops: from the hit's size up to 1.75 in 0.1 sec, back to
   1.15 by 0.28 sec, held near its spot to 0.8 sec, then off and out by 2 sec (duel_hud.js CRIT). An ability's crit is gold over the hit's
   yellow, a swing's crit white, each with a soft glow of its own colour; a crit heal pops the same in green. Transform and opacity only */
.dl-num.dl-crit{font-size:40px;animation:dl-crit 2s linear forwards;text-shadow:0 2px 2px #000,0 0 10px rgba(255,255,255,.35)}
.dl-num.dl-crit.dl-spell{color:#ffd21f;text-shadow:0 2px 2px #000,0 0 12px rgba(255,170,0,.65)}
.dl-num.dl-hcrit{animation:dl-crit 2s linear forwards}.dl-num.dl-heal.dl-hcrit{text-shadow:0 2px 2px #000,0 0 12px rgba(0,255,0,.5)}
@keyframes dl-crit{0%{opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(1);animation-timing-function:cubic-bezier(.3,1.4,.6,1)}5%{transform:translate(-50%,-50%) translate(0,-2px) scale(1.75);animation-timing-function:cubic-bezier(.3,0,.3,1)}14%{transform:translate(-50%,-50%) translate(0,-4px) scale(1.15)}40%{transform:translate(-50%,-50%) translate(0,-14px) scale(1.15)}62%{transform:translate(-50%,-50%) translate(0,-38px) scale(1.15)}80%{opacity:1;transform:translate(-50%,-50%) translate(0,-56px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) translate(0,-70px) scale(1.15)}}
.dl-num.dl-dot{font-size:24px}
.dl-num.dl-in{color:#ff5b4f}
/* (28 Oct 2026, impact round, heals-foe) the heal green is the game's (0, 1, 0), CombatFeedback HEAL (cfb.lua l.66-72) */
.dl-num.dl-heal{color:#00ff00}
/* (28 Oct 2026, impact round, words-style: pale-blue Cinzel small caps) a miss, dodge, parry, block, absorb, resist or immune shows at the
   body like a number, in its face and size, white for a blow (a spell's Resist or Immune takes .dl-spell's yellow, below) */
.dl-num.dl-word{color:#fff}
/* (27 Oct 2026, round 6, ui-fct-colours-portrait) damage of any school but physical is yellow (1, 1, 0), physical white; a crit heal half again
   as big (CombatFeedback.lua:26-92) */
.dl-num.dl-spell{color:#ffff00}.dl-num.dl-hcrit{font-size:36px}
.dl-num.dl-cc{font:700 17px/1 Cinzel,Georgia,serif;color:#ffcf7a;animation-duration:1.6s}

/* ---- the bot's nameplate: over its head, sized by distance, ringed when targeted ---- */
.dl-np{position:absolute;left:0;top:0;opacity:0;transition:opacity .15s;pointer-events:none;will-change:transform}
.dl-np.on{opacity:1}
.dl-np-in{position:absolute;left:0;bottom:0;width:150px;transform-origin:50% 100%;text-align:center}
.dl-np-in>b{display:block;font:700 15px/1.2 Cinzel,Georgia,serif;color:var(--cc);text-shadow:0 0 3px #000,0 1px 2px #000,0 0 6px #000;white-space:nowrap}
.dl-np-db{justify-content:center;margin-bottom:3px;min-height:0}.dl-np-db .dl-au{width:20px;height:20px}.dl-np-db .dl-au small{font-size:9px;line-height:10px}
.dl-np-row{position:relative;display:flex;justify-content:center;margin-top:2px}
.dl-np-hp{width:132px;height:13px;box-shadow:inset 0 0 0 1px #000,0 0 0 1px #000,0 0 0 2px rgba(91,74,46,.8)}
.dl-np-hp span{position:absolute;right:4px;top:0;bottom:0;display:flex;align-items:center;font:700 10px/1 PkNum,'Open Sans',sans-serif;color:#fff;text-shadow:0 1px 1px #000,0 0 2px #000}
.dl-np-in{transition:opacity .2s}
/* (27 Oct 2026, round 9, Chris: "when you are targeting someone its like their portrait isnt highlighted enough") your target's plate:
   a white edge round its health, as the modern client's selected plate (a white border), a soft light round it, the name lit; a pet's
   plate (duel_pets.js) the same. A plate behind a pillar keeps its full strength (duel_hud.js plate): no fade for dl-hid any more */
.dl-np.dl-tgt .dl-np-hp{box-shadow:inset 0 0 0 1px #000,0 0 0 1px #000,0 0 0 2.5px #fff,0 0 12px rgba(255,255,255,.6)}
.dl-np.dl-tgt .dl-np-in>b{color:#fff;text-shadow:0 0 3px #000,0 1px 2px #000,0 0 9px var(--cc),0 0 2px var(--cc)}
.dl-np.dl-tgton .dl-np-hp{animation:dl-np-tgt .35s ease-out}
@keyframes dl-np-tgt{0%{box-shadow:inset 0 0 0 1px #000,0 0 0 1px #000,0 0 0 4px #fff,0 0 22px rgba(255,255,255,.95)}100%{box-shadow:inset 0 0 0 1px #000,0 0 0 1px #000,0 0 0 2.5px #fff,0 0 12px rgba(255,255,255,.6)}}
.dl-np-cc{position:absolute;right:calc(50% + 72px);top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;overflow:hidden;opacity:0;transition:opacity .12s;box-shadow:0 0 0 1px #000,0 0 0 2px var(--ht,#ffb45e),0 0 8px var(--ht,#ffb45e)}
.dl-np-cc.on{opacity:1}
.dl-np-cc img,.dl-np-cc i{position:absolute;inset:0;width:100%;height:100%}.dl-np-cc img{transform:scale(1.1)}
.dl-np-cc b{position:absolute;inset:0;display:grid;place-items:center;font:700 12px/1 PkNum,'Open Sans',sans-serif;color:#fff;text-shadow:0 0 3px #000,0 1px 1px #000}
.dl-np-cb{width:140px;margin:4px auto 0}.dl-np-cb .dl-cic{width:14px;height:14px}.dl-np-cb .dl-cbar{height:11px}.dl-np-cb .dl-cn,.dl-np-cb .dl-ctm{font-size:9px}.dl-np-cb .dl-cn{left:4px;right:24px}.dl-np-cb .dl-ctm{right:4px}

/* ---- the bar: a frame of wells; the sweep, the tints, the glow of a lit button, the queued press, the press flash ---- */
.dl-bar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(6,52px);gap:5px;padding:8px;
  background:linear-gradient(180deg,rgba(34,29,22,.95),rgba(13,11,9,.95));border-radius:8px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.8),inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.55)}
.dl-ui .dl-slot{position:relative;width:52px;height:52px;min-height:0;padding:0;border-radius:5px;overflow:hidden;background:#0b0907;box-shadow:0 0 0 1px #000,0 0 0 2px #3d3324;transition:transform .08s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.dl-ui .dl-slot:hover{box-shadow:0 0 0 1px #000,0 0 0 2px #8a7650}
.dl-ui .dl-slot:active{transform:scale(.93)}
/* (28 Oct 2026, impact round, r13-friend-press) the button goes down on the key's or the pointer's down, on your screen at once, as
   ActionButtonDown sets PUSHED (Blizzard_ActionBar_Shared_ActionButton.lua:146-159), held while the key is (duel_hud.js push): darkened and
   pressed in, with no easing, so it shows on the next frame (the look is ours, near the game's UI-Quickslot-Depress) */
.dl-ui .dl-slot.dl-push{transform:scale(.93);transition:none;box-shadow:0 0 0 1px #000,0 0 0 2px #8a7650,inset 0 0 0 2px rgba(0,0,0,.75)}
.dl-ui .dl-slot.dl-push img{filter:brightness(.6);transition:none}
.dl-slot img{display:block;width:100%;height:100%;transform:scale(1.1);transition:filter .12s}
.dl-slot::before{content:'';position:absolute;inset:0;z-index:1;opacity:0;mix-blend-mode:multiply;transition:opacity .12s}
/* (27 Oct 2026, round 6, ui-range-hotkey) out of range leaves the icon alone and turns the key red (below); short of power multiplies the
   icon by 0.5, 0.5, 1 as the game's vertex colour does (Forever Shared/ActionButton.lua:721-734) */
.dl-slot.dl-power::before{opacity:1;background:rgb(128,128,255)}
.dl-slot.dl-held img{filter:grayscale(.9) brightness(.5)}
.dl-sw,.dl-gl,.dl-fl{position:absolute;inset:0;z-index:2;pointer-events:none}
.dl-gl{z-index:3;opacity:0;border-radius:5px;box-shadow:inset 0 0 0 2px #ffe8a8,inset 0 0 14px rgba(255,214,120,.85);transition:opacity .2s}
.dl-ui .dl-slot.dl-lit{box-shadow:0 0 0 1px #000,0 0 0 2px #f0d68e,0 0 14px rgba(255,210,110,.75)}
.dl-slot.dl-lit .dl-gl{opacity:1;animation:dl-glow .8s ease-in-out infinite alternate}
@keyframes dl-glow{0%{opacity:.55}100%{opacity:1}}
.dl-fl{z-index:4;opacity:0;background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,.15) 70%)}
.dl-fl.dl-hit{animation:dl-hit .28s ease-out}
@keyframes dl-hit{0%{opacity:1}100%{opacity:0}}
/* (27 Oct 2026, round 6, ui-cooldown-look) no ready flash when a cooldown ends (drawBling false), and none when the global cooldown ends: the
   game's GCD flipbook (ActionButtonComponentTemplate.xml:312-333) is never played by Forever's action bars */
/* (27 Oct 2026, round 6, ui-button-cast-anim) the cast on its own button: a light band across it over the cast's time with a soft glow
   inside (CastFill, InnerGlowTexture), a ring bursting out as it lands (EndBurst GlowRing, 0.5 sec, and the fill out over 0.25), and the
   red interrupt mark on a cut cast (InterruptDisplay: 1 sec, then out over 0.25). All drawn here, ours */
.dl-cf{position:absolute;inset:0;z-index:3;overflow:hidden;opacity:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 10px rgba(255,214,120,.55)}
.dl-cf.on{opacity:1}
.dl-cf>i{position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,rgba(255,214,120,0) 0,rgba(255,226,150,.28) 70%,rgba(255,244,205,.85) 96%,rgba(255,250,230,0) 100%);mix-blend-mode:screen}
.dl-cf.dl-cfok{animation:dl-cfok .5s ease-out}
.dl-cf.dl-cfok::after{content:'';position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 3px rgba(255,236,170,.9),0 0 12px rgba(255,214,120,.8);transform:translate(-50%,-50%) scale(0);animation:dl-cfring .5s ease-out forwards}
@keyframes dl-cfok{0%,50%{opacity:1}100%{opacity:0}}
@keyframes dl-cfring{from{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(1.25);opacity:0}}
.dl-slot.dl-intr::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:inset 0 0 0 3px #e0281e,inset 0 0 12px rgba(230,40,30,.85);animation:dl-intr 1.25s linear forwards;pointer-events:none}
@keyframes dl-intr{0%,80%{opacity:1}100%{opacity:0}}
.dl-slot.dl-q::after{content:'';position:absolute;inset:0;z-index:4;border-radius:5px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.95),inset 0 0 8px rgba(255,255,255,.5)}
/* (27 Oct 2026, round 6, ui-key-text and ui-range-hotkey) the key sits top right in the game's grey (Mainline/ActionButtonTemplate.xml:85-86
   NumberFontNormalSmallGray, justifyH RIGHT; ActionButton.lua:507-516 TOPRIGHT), red out of range (RED_FONT_COLOR 1, 0.125, 0.125). An
   unbound button's dot (RANGE_INDICATOR) shows only while the button checks range, grey or red the same way */
/* (27 Oct 2026, night; Chris: "super difficult to see the keybinds over the action bar abilities & spells") the key in the button's top right
   corner, larger, near white and outlined all round so it reads on any icon (it was 10 px, #999 grey, a soft shadow) */
.dl-key{position:absolute;z-index:5;top:2px;right:3px;text-align:right;font:800 13px/1 'Open Sans',sans-serif;color:#f4f1ea;letter-spacing:.2px;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 3px #000,0 0 5px rgba(0,0,0,.9)}
.dl-slot.dl-range .dl-key{color:#ff2020}
.dl-key.dl-dot{display:none;font-size:9px}.dl-slot.dl-chk .dl-key.dl-dot{display:block}
.dl-cd{position:absolute;z-index:5;inset:0;display:grid;place-items:center;font:800 19px/1 PkNum,'Open Sans',sans-serif;color:#fff;text-shadow:0 0 3px #000,0 1px 2px #000}
.dl-empty{display:block;width:52px;height:52px;border-radius:5px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px #2a241b}
.dl-touch .dl-key{display:none}
/* (a phone's round buttons have no key: their dot sits in at the top right of the circle) */
.dl-touch .dl-slot.dl-chk .dl-key.dl-dot{display:block;top:13%;right:15%;font-size:10px}
/* the stance bar sits beside the action bar */
.dl-mini{position:absolute;right:calc(50% + 190px);bottom:12px;display:flex;gap:6px;padding:6px;background:linear-gradient(180deg,rgba(34,29,22,.92),rgba(13,11,9,.92));border-radius:8px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.8)}
.dl-ui .dl-mini button{position:relative;width:44px;height:44px;padding:0;min-height:0;overflow:hidden;border-radius:5px;box-shadow:0 0 0 1px #000,0 0 0 2px #3d3324}
.dl-ui .dl-mini button[aria-pressed=true]{box-shadow:0 0 0 1px #000,0 0 0 2px #f2ead8,0 0 10px rgba(255,255,255,.35)}
.dl-mini img{width:100%;height:100%;display:block;transform:scale(1.1)}
.dl-tip{position:absolute;z-index:9;transform:translate(-50%,-100%);width:max-content;max-width:300px;padding:10px 12px;font-size:12px;line-height:1.45;color:#e9e3d6;background:rgba(10,9,8,.96);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.8),0 8px 24px rgba(0,0,0,.5);border-radius:5px;pointer-events:none}
.dl-tip b{display:block;font:700 14px/1.2 Cinzel,Georgia,serif;color:#fff}.dl-tip small{display:block;color:#9a907e;font-size:11px}
.dl-tip em{display:block;font-style:normal;color:#cfc6b4;margin-top:3px}.dl-tip p{margin:5px 0 0;color:#e9e3d6}.dl-tip kbd{display:block;margin-top:5px;font:600 11px/1 'Open Sans',sans-serif;color:#9a907e}
.dl-ui .dl-leave{position:absolute;right:12px;bottom:12px;min-height:44px;font-size:12px;color:#b8ad98;background:rgba(10,9,8,.6)}
.dl-stick{position:absolute;left:18px;bottom:18px;width:120px;height:120px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(201,162,74,.6);background:rgba(10,9,8,.35);touch-action:none}
.dl-stick i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;box-shadow:inset 0 0 0 2px #c9a24a;background:rgba(201,162,74,.12)}

/* ---- the result (24 Oct 2026; owner: the result): a fighting game's result screen in the select screen's look. The fight's HUD steps
   away; both fighters stand as stills (the winner lit, the loser in the dark), the word slams in, the numbers and the ladder's answer in a
   column between them, the buttons under. A phone: the fighters side by side on top, the column under them, the page scrolls. ---- */
.dl-over .dl-loc,.dl-over .dl-me-cast,.dl-over .dl-tip,.dl-over .dl-np,.dl-over .dl-hint{opacity:0}
.dl-over .dl-pau,.dl-over .dl-top,.dl-over .dl-bar,.dl-over .dl-mini,.dl-over .dl-clock,.dl-over .dl-stick,.dl-over .dl-leave,.dl-over .dl-ct,.dl-over .dl-err-line,.dl-over .dl-keys{opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.dl-end{position:absolute;inset:0;z-index:10;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px) minmax(0,1fr);gap:0 20px;overflow:hidden;pointer-events:auto;color:#e9e3d6;
  background:radial-gradient(ellipse 70% 55% at 50% 30%,rgba(70,46,82,.28),transparent 70%),linear-gradient(rgba(10,8,6,.5),rgba(10,8,6,.84) 58%,rgba(10,8,6,.96));animation:dl-end-in .5s ease-out both}
@keyframes dl-end-in{from{opacity:0}to{opacity:1}}
.dl-end-figs{display:contents}
.dl-end-fig{position:relative;grid-row:1;min-width:0;min-height:0}
.dl-end-fa{grid-column:1}.dl-end-fb{grid-column:3}
.dl-end-fig::after{content:"";position:absolute;left:22%;right:22%;bottom:2%;height:6%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);pointer-events:none}
.dl-end-fig.dl-end-lit::before{content:"";position:absolute;inset:8% -10% 0;background:radial-gradient(ellipse 46% 50% at 50% 66%,rgba(255,214,150,.2),transparent 72%);pointer-events:none}
.dl-end-fig img{position:absolute;z-index:1;left:-14%;bottom:4%;width:128%;height:90%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 10px 28px rgba(0,0,0,.55))}
.dl-end-fa img{animation:dx-vs-l .6s .05s cubic-bezier(.15,.9,.2,1) both}.dl-end-fb img{animation:dx-vs-r .6s .12s cubic-bezier(.15,.9,.2,1) both}
.dl-end-lit img{filter:drop-shadow(0 0 22px rgba(255,200,120,.35)) drop-shadow(0 10px 28px rgba(0,0,0,.55))}
.dl-end-fig.dl-end-dim img{animation-name:dx-vs-l,dl-end-dim;animation-duration:.6s,.9s;animation-delay:.05s,.55s;animation-timing-function:cubic-bezier(.15,.9,.2,1),ease-out;animation-fill-mode:both,both}
.dl-end-fb.dl-end-dim img{animation-name:dx-vs-r,dl-end-dim}
@keyframes dl-end-dim{from{filter:drop-shadow(0 10px 28px rgba(0,0,0,.55))}to{filter:grayscale(.7) brightness(.4) drop-shadow(0 10px 28px rgba(0,0,0,.55))}}
.dl-end-in{grid-column:2;grid-row:1;align-self:center;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:18px 4px;text-align:center;scrollbar-width:none;position:relative;z-index:2}
.dl-end-h{margin:0;padding:0;border:0;background:none;font:700 clamp(44px,4.3vw,68px)/1 Cinzel,Georgia,serif;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}.dl-end-h::before,.dl-end-h::after{display:none}
.dl-ui .dl-end h2.dl-end-h{background:none;box-shadow:none}   /* (the season's h2 underline is the page's, not the result's) */
.dl-end-h span{display:inline-block;color:#ffd100;text-shadow:0 0 30px rgba(255,209,0,.4),0 5px 0 #5c4512,0 10px 24px #000;animation:dx-em .5s .2s cubic-bezier(.3,1.6,.5,1) both}
.dl-end-lost .dl-end-h span,.dl-end-draw .dl-end-h span{color:#e9e3d6;text-shadow:0 5px 0 #2a2620,0 10px 24px #000}
.dl-end-say{margin:12px 0 16px;font-size:15px;color:#cfc6b4;animation:dx-pop .4s .45s ease-out both}.dl-end-say b{font:700 15px/1 Cinzel,Georgia,serif}
.dl-end-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:10px;margin:0 0 14px;animation:dx-pop .4s .55s ease-out both}
.dl-end-vs>i{padding-top:3px;font:700 13px/1 Cinzel,Georgia,serif;font-style:normal;color:#8a7f6c}
.dl-end-p{min-width:0}
.dl-end-p b{--fs:19px;display:block;font:700 var(--fs)/1.15 Cinzel,Georgia,serif;color:var(--cc);text-shadow:0 1px 3px #000;overflow-wrap:anywhere}
/* (27 Oct 2026, a friend's duel at 390: a 16-letter name broke as MAXIMILIANSWOR / TH) a long name gets smaller to fit its column whole:
   --n its longest word's letters (duel_hud.js plateOf), about 0.75 em a Cinzel capital; never over the size a short name has there (--fs,
   set again by the smaller screens below: 27 Oct 2026, review, a long name drew at 19px beside a short one at 14) */
.dl-end-p{container-type:inline-size}.dl-end .dl-end-p.dl-end-lg b{font-size:min(var(--fs),calc(130cqi / var(--n)))}
.dl-end-p small{display:block;margin-top:3px;font-size:12px;color:#cfc6b4}.dl-end-p em{display:block;margin-top:2px;font-size:12px;font-style:normal;color:#9a907e}
.dl-end-p.dl-end-dim b{opacity:.7}
.dl-end-st{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 14px;padding:11px 0;background:linear-gradient(90deg,transparent,rgba(201,162,74,.6),transparent) 0 0/100% 1px no-repeat,linear-gradient(90deg,transparent,rgba(201,162,74,.3),transparent) 0 100%/100% 1px no-repeat;animation:dx-pop .4s .65s ease-out both}
.dl-end-st dt{font:600 11px/1 Cinzel,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:#b8ad98}
.dl-end-st dd{margin:7px 0 0;font:700 22px/1 PkNum,'Open Sans',sans-serif;color:#fff;font-variant-numeric:tabular-nums}
.dl-end-rate{min-height:0;display:grid;place-items:center;margin:0 0 12px}
.dl-end-chk{min-height:72px;display:grid;align-content:center;margin:0;font:600 15px/1.4 Cinzel,Georgia,serif;color:#cfc6b4}
.dl-end-chk i{display:block;width:180px;height:2px;margin:9px auto 0;background:linear-gradient(90deg,transparent,#c9a24a,transparent);background-size:60% 100%;background-repeat:no-repeat;animation:dl-slide 1.1s linear infinite}
.dl-end-rt{display:flex;align-items:baseline;justify-content:center;gap:10px;animation:dx-pop .35s ease-out both}
.dl-end-rt small{font:600 12px/1 Cinzel,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:#b8ad98}
.dl-end-rt b{font:700 48px/1 PkNum,'Open Sans',sans-serif;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 2px 12px #000}
.dl-end-d{font:800 24px/1 PkNum,'Open Sans',sans-serif;font-variant-numeric:tabular-nums;animation:dl-end-d .45s 1.1s cubic-bezier(.3,1.6,.5,1) both}.dl-end-d.up{color:#7ee787}.dl-end-d.down{color:#ff9b8f}
@keyframes dl-end-d{from{opacity:0;transform:translateY(8px) scale(.6)}to{opacity:1;transform:none}}
.dl-end-meta{margin:7px 0 0;font-size:13px;color:#cfc6b4}
.dl-end-note{margin:0;max-width:400px;font-size:14px;line-height:1.5;color:#cfc6b4;animation:dx-pop .35s ease-out both}.dl-end-no b,.dl-end-srv b{font:700 14px/1 Cinzel,Georgia,serif;color:#fff}.dl-end-srv{margin:8px 0 0;font-size:13px;color:#cfc6b4}
.dl-end-acts{display:flex;flex-direction:column;align-items:stretch;gap:8px;animation:dx-pop .4s .75s ease-out both}
.dl-ui .dl-end-main{min-height:54px;font-size:20px;letter-spacing:.14em;text-transform:uppercase;background:rgba(14,12,10,.6);box-shadow:0 0 0 2px #c9a24a;text-shadow:0 0 14px rgba(255,209,0,.35)}
/* (27 Oct 2026, a friend's duel: the main button's line under it, "Chris left" over "Back to the setup", ran on as CHRIS LEFTBACK TO
   THE SETUP) the small line under the big one, plain */
.dl-ui .dl-end-main small{display:block;margin-top:3px;font:600 12px/1.2 'Open Sans',sans-serif;letter-spacing:.02em;text-transform:none;color:#cfc6b4;text-shadow:none}
.dl-ui .dl-end-main:hover{box-shadow:0 0 0 2px #ffd100,0 0 22px rgba(255,209,0,.25)}
.dl-end-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dl-ui .dl-end-row button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px;line-height:1.1;background:rgba(14,12,10,.6)}
.dl-ui .dl-end-row button:disabled{cursor:default;color:#cfc6b4}
.dl-end-row small{font:600 10px/1 'Open Sans',sans-serif;color:#9a907e}
.dl-end .dl-link{align-self:center;padding:14px 12px}

/* ---- a phone (390 x 844 first): compact frames at the top, the target beside yours; the alert under them; the bar under the right
   thumb with the first six nearest it; the clock and Leave in the gap between the thumb stick and the bar ---- */
/* (25 Oct 2026, QA round 2: at 667 x 375 and narrower both phone layouts applied, and the portrait clock's left and bottom with the
   landscape's top and right stretched it to 346 x 347 over the arena) the portrait layout is for a phone held upright only */
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:501px){
  .dl{height:calc(100svh - 64px)}.dl.dl-live{height:100svh}
  .dl-top{top:8px;left:6px;right:6px;gap:6px}
  .dl-frame{width:calc(50% - 3px);grid-template-columns:46px minmax(0,1fr)}.dl-frame.dl-b{grid-template-columns:minmax(0,1fr) 46px}
  .dl-port{width:46px;height:46px;box-shadow:0 0 0 1px #0a0806,0 0 0 3px var(--dl-bronze),0 0 0 4px #0a0806,0 3px 10px rgba(0,0,0,.6)}
  .dl-port.dl-held{box-shadow:0 0 0 1px #0a0806,0 0 0 3px var(--ht,#ffb45e),0 0 0 4px #0a0806,0 0 12px var(--ht,#ffb45e)}
  .dl-pc{width:16px;height:16px;right:-3px;top:-3px}.dl-b .dl-pc{left:-3px}
  .dl-lvl{width:19px;height:19px;font-size:9px;left:-3px;bottom:-3px}.dl-b .dl-lvl{right:-3px}
  .dl-pcc b{font-size:15px}
  .dl-fb{margin-left:-10px;padding:4px 5px 5px 14px}.dl-b .dl-fb{margin:0 -10px 0 0;padding:4px 14px 5px 5px}
  .dl-fn{margin-bottom:3px}.dl-fn b{font-size:12px}.dl-fn small{display:none}
  .dl-hp{height:14px}.dl-hv,.dl-hpc{font-size:9px}.dl-hv{left:4px}.dl-hpc{right:4px}.dl-b .dl-hv{right:4px}.dl-b .dl-hpc{left:4px}
  .dl-res{height:6px;margin-top:2px}.dl-res span{display:none}
  .dl-cp{gap:3px;margin-top:3px}.dl-cp i{width:7px;height:7px}
  .dl-fx{padding:4px 0 0 4px}.dl-b .dl-fx{padding:4px 4px 0 0}
  .dl-au{width:19px;height:19px}.dl-au small{font-size:8px;line-height:9px}.dl-au b{font-size:8px}
  .dl-cast .dl-cic{width:15px;height:15px}.dl-cb .dl-cbar{height:13px}.dl-cn,.dl-ctm{font-size:9px}.dl-cn{left:4px;right:26px}.dl-ctm{right:4px}
  .dl-hint{left:calc(50% + 3px);top:12px;right:0;padding:6px 8px;font-size:12px;white-space:normal}
  .dl-clock{top:auto;right:auto;bottom:22px;left:calc((138px + 100% - 178px) / 2);transform:translateX(-50%);font-size:14px;padding:6px 8px}
  /* (24 Oct 2026, QA: Leave sat 15 px from the bar and the stick) it sits over the stick, clear of both thumbs */
  .dl-ui .dl-leave{right:auto;left:18px;bottom:170px;padding:0 12px;font-size:11px}
  .dl-err-line{bottom:334px;font-size:13px;padding:0 12px}
  .dl-count{font-size:56px}
  .dl-bar{left:auto;right:8px;transform:none;grid-template-columns:repeat(3,50px);gap:5px;padding:6px;bottom:8px}
  .dl-bar .dl-x{order:-1}
  .dl-ui .dl-slot,.dl-empty{width:50px;height:50px}
  .dl-mini{right:8px;bottom:246px;padding:4px;gap:4px}.dl-onebar .dl-mini{bottom:134px}
  .dl-me-cast{bottom:300px;width:62%;margin-left:-31%}.dl-me-cast .dl-cbar{height:18px}.dl-me-cast .dl-cic{width:20px;height:20px}
  .dl-num,.dl-num.dl-dot,.dl-num.dl-word{font-size:20px}.dl-num.dl-crit{font-size:33px}.dl-num.dl-hcrit{font-size:30px}.dl-num.dl-cc{font-size:13px}
  .dl-keys{top:calc(34% + 74px);font-size:13px}.dl-keys b{font-size:13px}
  .dl-end{display:block;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
  .dl-end-figs{display:grid;grid-template-columns:1fr 1fr;height:clamp(210px,38svh,360px);margin:0 -8px}.dl-end-fb{grid-column:2}
  .dl-end-fig img{left:-22%;width:144%;height:100%;bottom:0}.dl-end-fig::after{bottom:-2%}
  .dl-end-in{max-height:none;overflow:visible;margin-top:-30px;padding:0 16px 18px}
  .dl-end-h{font-size:52px}.dl-end-say{font-size:14px;margin:8px 0 12px}.dl-end-p b{--fs:17px;font-size:17px}
  .dl-ui .dl-end-row button{font-size:12px}
}
/* ---- (24 Oct 2026) the controls during the count-in: a line under the count, gone at the go ---- */
.dl-keys{position:absolute;top:calc(34% + 96px);left:16px;right:16px;margin:0;text-align:center;font:600 15px/1.5 'Open Sans',sans-serif;color:#e9e3d6;text-shadow:0 1px 3px #000,0 0 10px #000;opacity:0;transition:opacity .5s;pointer-events:none}
.dl-keys.on{opacity:1}.dl-keys b{font:700 15px/1 Cinzel,Georgia,serif;color:#fff}
/* (24 Oct 2026, QA) Leave in a ladder duel: armed by the first tap, it says what the second does */
.dl-ui .dl-leave.dl-arm{color:#fff;box-shadow:0 0 0 1px #c9a24a;background:rgba(10,9,8,.85)}

/* ---- a phone held sideways (844 x 390): compact frames top left, the clock and Leave top right, the stick bottom left, the bar under the
   right thumb, the stance or pet bar beside it, the cast bar and the alerts in the middle; the arena the whole screen (24 Oct 2026, QA) ---- */
@media (orientation:landscape) and (max-height:500px){
  .dl.dl-live{height:100svh;min-height:0}
  .dl-top{top:6px;left:6px;gap:6px}
  .dl-frame{width:236px;grid-template-columns:46px minmax(0,1fr)}.dl-frame.dl-b{grid-template-columns:minmax(0,1fr) 46px}
  .dl-port{width:46px;height:46px;box-shadow:0 0 0 1px #0a0806,0 0 0 3px var(--dl-bronze),0 0 0 4px #0a0806,0 3px 10px rgba(0,0,0,.6)}
  .dl-port.dl-held{box-shadow:0 0 0 1px #0a0806,0 0 0 3px var(--ht,#ffb45e),0 0 0 4px #0a0806,0 0 12px var(--ht,#ffb45e)}
  .dl-pc{width:16px;height:16px;right:-3px;top:-3px}.dl-b .dl-pc{left:-3px}
  .dl-lvl{width:19px;height:19px;font-size:9px;left:-3px;bottom:-3px}.dl-b .dl-lvl{right:-3px}
  .dl-pcc b{font-size:15px}
  .dl-fb{margin-left:-10px;padding:4px 5px 5px 14px}.dl-b .dl-fb{margin:0 -10px 0 0;padding:4px 14px 5px 5px}
  .dl-fn{margin-bottom:3px}.dl-fn b{font-size:12px}.dl-fn small{display:none}
  .dl-hp{height:14px}.dl-hv,.dl-hpc{font-size:9px}.dl-hv{left:4px}.dl-hpc{right:4px}.dl-b .dl-hv{right:4px}.dl-b .dl-hpc{left:4px}
  .dl-res{height:6px;margin-top:2px}.dl-res span{display:none}
  .dl-cp{gap:3px;margin-top:3px}.dl-cp i{width:7px;height:7px}
  .dl-fx{padding:4px 0 0 4px}.dl-b .dl-fx{padding:4px 4px 0 0}
  .dl-au{width:19px;height:19px}.dl-au small{font-size:8px;line-height:9px}.dl-au b{font-size:8px}
  .dl-cast .dl-cic{width:15px;height:15px}.dl-cb .dl-cbar{height:13px}.dl-cn,.dl-ctm{font-size:9px}.dl-cn{left:4px;right:26px}.dl-ctm{right:4px}
  .dl-hint{left:248px;top:10px;padding:6px 8px;font-size:12px}
  .dl-clock{top:6px;right:8px;font-size:14px;padding:6px 8px}
  .dl-ui .dl-leave{top:44px;right:8px;bottom:auto;left:auto;transform:none;padding:0 10px;font-size:11px}
  .dl-stick{left:14px;bottom:12px;width:104px;height:104px}.dl-stick i{width:44px;height:44px;margin:-22px 0 0 -22px}
  .dl-bar{left:auto;right:8px;bottom:8px;transform:none;grid-template-columns:repeat(3,46px);gap:4px;padding:5px}
  .dl-bar .dl-x{order:-1}
  .dl-ui .dl-slot,.dl-empty{width:46px;height:46px}
  .dl-mini{right:172px;bottom:8px;padding:5px;gap:5px}
  .dl-me-cast{bottom:78px;width:260px;margin-left:-130px}.dl-me-cast .dl-cbar{height:16px}.dl-me-cast .dl-cic{width:18px;height:18px}
  .dl-err-line{bottom:108px;font-size:13px}
  .dl-count{top:24%;font-size:48px}
  .dl-keys{top:calc(24% + 62px);left:130px;right:170px;font-size:13px}.dl-keys b{font-size:13px}
  .dl-num,.dl-num.dl-dot,.dl-num.dl-word{font-size:20px}.dl-num.dl-crit{font-size:33px}.dl-num.dl-hcrit{font-size:30px}.dl-num.dl-cc{font-size:13px}
  .dl-end{grid-template-columns:minmax(0,1fr) minmax(300px,400px) minmax(0,1fr);gap:0 8px}
  .dl-end-in{padding:10px 4px}
  .dl-end-h{font-size:40px}.dl-end-say{margin:6px 0 8px;font-size:13px}.dl-end-vs{margin-bottom:8px}.dl-end-p b{--fs:15px;font-size:15px}
  .dl-end-st{padding:7px 0;margin-bottom:8px}.dl-end-st dd{font-size:18px}.dl-end-rate{min-height:56px;margin-bottom:8px}.dl-end-rt b{font-size:36px}
  .dl-ui .dl-end-main{min-height:46px;font-size:17px}.dl-end .dl-link{padding:10px}
}
/* (28 Oct 2026, impact round fix: under reduced motion a number lived 0.01 sec, so it was never seen) it stands still where it is born, whole,
   for its usual time and then goes at once (ours) */
@keyframes dl-still{0%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-50%)}}
@keyframes dl-still-c{0%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.dl-num{animation:dl-still 1.35s steps(1,end) forwards}.dl-num.dl-crit,.dl-num.dl-hcrit{animation:dl-still-c 2s steps(1,end) forwards}.dl-count.go,.dl-count.dl-tick,.dl-loc.dl-pop *,.dl-loc.dl-pop .dl-loc-rl::after,.dl-end,.dl-end *{animation:none}.dl-slot.dl-lit .dl-gl{animation:none}.dl-end-fig.dl-end-dim img{filter:grayscale(.7) brightness(.4)}}

/* ---- (25 Oct 2026, QA round 2) ---- */
/* the HUD waits under the VS until it is gone (its hint and keys line showed through the fade) */
.dl-fight.dl-wait>*{opacity:0!important;transition:none!important}
/* the bot's frame targets it on a click or a tap, as in the game */
.dl-frame.dl-b.on{pointer-events:auto;cursor:pointer}
/* a phone's jump, by the stick */
.dl-ui .dl-jump{position:absolute;left:104px;bottom:142px;width:52px;height:52px;min-height:0;padding:0;border-radius:50%;background:rgba(10,9,8,.4);box-shadow:inset 0 0 0 1px rgba(201,162,74,.6);-webkit-tap-highlight-color:transparent;touch-action:none}
.dl-jump i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-4px 0 0 -7px;border-left:2px solid #c9a24a;border-top:2px solid #c9a24a;transform:rotate(45deg)}
.dl-ui .dl-jump:active,.dl-ui .dl-jump.on{background:rgba(201,162,74,.22)}
@media (orientation:landscape) and (max-height:500px){.dl-ui .dl-jump{left:126px;bottom:14px;width:48px;height:48px}}
.dl-over .dl-jump{opacity:0;visibility:hidden}
/* the result's links: 44 px to touch, side by side */
.dl-end-links{display:flex;justify-content:center;flex-wrap:wrap;gap:0 18px}
.dl-ui .dl-end .dl-link{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;align-self:auto;background:none;box-shadow:none;border:0;color:#c9a24a;font:600 14px/1 Cinzel,Georgia,serif;letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer}
.dl-ui .dl-end .dl-link:hover{box-shadow:none;color:#ffd100}
@media (orientation:landscape) and (max-height:500px){.dl-end-acts{gap:6px}.dl-ui .dl-end-row button{min-height:44px}.dl-end-h{font-size:34px}}

/* ---- (25 Oct 2026) pets (duel_pets.js): a pet frame under your frame and under the target's, a pet's own target frame, a nameplate
   over each pet, your pet's bar over your own (the game's places, our look) ---- */
.dl-pf{grid-column:1/3;grid-row:3;justify-self:start;position:relative;display:flex;align-items:center;gap:0;margin:6px 0 0 14px;width:212px;cursor:pointer;pointer-events:auto}
.dl-pf[hidden]{display:none}
/* (31 Oct 2026, the sizes sweep: on a phone the foe's pet frame, a tap to target the pet, was 31 px tall) on touch its tap reaches 7 px
   above and below the frame, 45 px, into the clear space round it; nothing drawn */
@media (pointer:coarse){.dl-pf::before{content:'';position:absolute;left:0;right:0;top:-7px;bottom:-7px}}
.dl-b .dl-pf{justify-self:end;margin:6px 14px 0 0;flex-direction:row-reverse}
.dl-pf-port{position:relative;flex:none;width:38px;height:38px;border-radius:50%;z-index:2;background:#0d0b09;box-shadow:0 0 0 2px #0a0806,0 0 0 3px var(--dl-bronze),0 3px 10px rgba(0,0,0,.6)}
.dl-pf-port>img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;transform:scale(1.08)}
.dl-pf-cc{position:absolute;inset:0;border-radius:50%;overflow:hidden;opacity:0;transition:opacity .12s}.dl-pf-cc.on{opacity:1}
.dl-pf-cc img{position:absolute;inset:0;width:100%;height:100%;background:#0b0907}
.dl-pf-cc b{position:absolute;inset:0;display:grid;place-items:center;font:700 12px/1 PkNum,'Open Sans',sans-serif;color:#fff;text-shadow:0 0 3px #000,0 1px 1px #000}
.dl-pf-b{flex:1;min-width:0;margin-left:-10px;padding:4px 7px 5px 15px;background:var(--dl-plate);border-radius:0 5px 5px 0;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.7)}
.dl-b .dl-pf-b{margin:0 -10px 0 0;padding:4px 15px 5px 7px;border-radius:5px 0 0 5px;text-align:right}
.dl-pf-n{display:block;font:700 12px/1.2 Cinzel,Georgia,serif;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.dl-pf-hp{position:relative;display:block;height:11px;background:#0b0907;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px #000}
.dl-pf-hp s,.dl-pf-hp i{position:absolute;inset:0;transform-origin:0 50%;text-decoration:none}
.dl-pf-hp s{background:linear-gradient(180deg,#fff,#e8e2d6);opacity:.9}
.dl-pf-hp i{background:linear-gradient(180deg,#78e07f 0,#36a842 45%,#23812e 100%)}
.dl-pf-hp.dl-low i{background:linear-gradient(180deg,#f08a5a 0,#c9472d 50%,#99301c 100%)}
.dl-pf-hp span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 9px/1 PkNum,'Open Sans',sans-serif;color:#fff;text-shadow:0 1px 1px #000,0 0 2px #000}
.dl-pf-pw{position:relative;display:block;height:5px;margin-top:2px;background:#0b0907;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px #000}.dl-pf-pw[hidden]{display:none}
.dl-pf-pw i{position:absolute;inset:0;transform-origin:0 50%;background:linear-gradient(180deg,#6aa6ff,#2f68c9)}
.dl-pf-pw[data-kind=focus] i,.dl-res[data-kind=focus] i{background:linear-gradient(180deg,#ffb36b,#c9682b)}
.dl-pf-au{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);display:flex;gap:3px}
.dl-b .dl-pf-au{left:auto;right:calc(100% + 6px)}
.dl-pf-au .dl-au{width:20px;height:20px}.dl-pf-au .dl-au small{font-size:8px;line-height:9px}
.dl-pf.dl-tgt .dl-pf-b{box-shadow:0 0 0 1px #000,inset 0 0 0 1px #f2ead8,0 0 8px rgba(255,255,255,.3)}
.dl-pf.dl-dead{opacity:.55}.dl-pf.dl-dead .dl-pf-port>img{filter:grayscale(1)}
/* (a frame with a pet keeps room for a row of buffs and one of debuffs, so the pet's frame under it never jumps as auras come and go) */
.dl-haspet .dl-a .dl-fx{min-height:62px}.dl-haspet .dl-b:not(.dl-tpet) .dl-fx{min-height:84px}
/* (a wide window: the enemy's pet frame sits beside the target's frame, as the game's target of target does, not under it over the arena) */
@media (min-width:1000px) and (min-height:501px){
  .dl-b .dl-pf{position:absolute;grid-row:auto;grid-column:auto;left:calc(100% + 14px);top:18px;margin:0;flex-direction:row}
  .dl-b .dl-pf-b{margin:0 0 0 -10px;padding:4px 7px 5px 15px;border-radius:0 5px 5px 0;text-align:left}
  .dl-b .dl-pf-au{left:40px;right:auto;top:calc(100% + 4px);transform:none}
  .dl-haspet .dl-b:not(.dl-tpet) .dl-fx{min-height:0}
}
/* the pet's own target frame, in the bot's frame's place */
.dl-frame.dl-tpet{position:absolute;left:352px;top:0;cursor:default}
.dl-tpet .dl-pr{transform:scale(1.02)}
/* the plates over the pets: smaller than a player's, the owner's class colour on the name */
.dl-np-pet .dl-np-in{width:116px}
.dl-np-pet .dl-np-in>b{font-size:12px}
.dl-np-pet .dl-np-hp{width:96px;height:9px}.dl-np-pet .dl-np-hp span{font-size:8px}
.dl-np-pet .dl-np-cc{width:22px;height:22px;margin-top:-11px;right:calc(50% + 53px)}.dl-np-pet .dl-np-cc b{font-size:10px}
.dl-np-pet .dl-np-cb{width:104px}
.dl-np-a .dl-np-in{opacity:1}
/* your pet's bar: over the left of your bar, as the game has it */
.dl-pbar{position:absolute;left:calc(50% - 176px);bottom:144px;display:flex;gap:4px;padding:5px;background:linear-gradient(180deg,rgba(34,29,22,.92),rgba(13,11,9,.92));border-radius:7px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.8)}
.dl-pbar[hidden]{display:none}
.dl-onebar .dl-pbar{bottom:87px}
.dl-ui .dl-pslot{position:relative;width:36px;height:36px;min-height:0;padding:0;border-radius:4px;overflow:hidden;background:#0b0907;box-shadow:0 0 0 1px #000,0 0 0 2px #3d3324;-webkit-tap-highlight-color:transparent}
.dl-ui .dl-pslot:active{transform:scale(.93)}
.dl-pslot img{display:block;width:100%;height:100%;transform:scale(1.1)}
.dl-pslot .dl-cd{font-size:13px}
.dl-pslot.dl-auto::after{content:'';position:absolute;inset:1px;z-index:4;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(242,234,216,.55);pointer-events:none}
.dl-pslot.dl-held img{filter:grayscale(.9) brightness(.5)}
.dl-haspbar .dl-me-cast{bottom:196px}.dl-haspbar .dl-err-line{bottom:232px}
.dl-onebar.dl-haspbar .dl-me-cast{bottom:140px}.dl-onebar.dl-haspbar .dl-err-line{bottom:176px}
.dl-over .dl-pbar,.dl-over .dl-tpet,.dl-wait .dl-pbar{opacity:0;visibility:hidden}
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:501px){
  .dl-pf{width:auto;margin:4px 0 0 4px;max-width:calc(100% - 4px)}.dl-b .dl-pf{margin:4px 4px 0 0}
  .dl-pf-port{width:26px;height:26px}.dl-pf-b{margin-left:-8px;padding:3px 5px 3px 11px}.dl-b .dl-pf-b{margin:0 -8px 0 0;padding:3px 11px 3px 5px}
  .dl-pf-n{font-size:10px;margin-bottom:1px}.dl-pf-hp{height:8px}.dl-pf-hp span{display:none}.dl-pf-pw{height:3px;margin-top:1px}
  .dl-pf-au{display:none}
  .dl-haspet .dl-a .dl-fx{min-height:44px}.dl-haspet .dl-b:not(.dl-tpet) .dl-fx{min-height:60px}
  .dl-frame.dl-tpet{left:calc(50% + 3px);width:calc(50% - 3px)}
  /* the pet's bar: a column in the gap between the stick and your bar, over the clock */
  .dl-pbar{left:calc((138px + 100% - 180px) / 2 - 23px);bottom:58px;flex-direction:column-reverse;padding:4px;gap:4px}
  .dl-onebar .dl-pbar{bottom:58px}
  .dl-ui .dl-pslot{width:38px;height:38px}
  .dl-haspbar .dl-me-cast,.dl-onebar.dl-haspbar .dl-me-cast{bottom:300px}.dl-haspbar .dl-err-line,.dl-onebar.dl-haspbar .dl-err-line{bottom:334px}
  .dl-ui .dl-jump{left:18px;bottom:146px;width:48px;height:48px}
  .dl-ui .dl-leave{bottom:206px}
}
@media (orientation:landscape) and (max-height:500px){
  .dl-pf{width:auto;margin:4px 0 0 4px;max-width:calc(100% - 4px)}.dl-b .dl-pf{margin:4px 4px 0 0}
  .dl-pf-port{width:26px;height:26px}.dl-pf-b{margin-left:-8px;padding:3px 5px 3px 11px}.dl-b .dl-pf-b{margin:0 -8px 0 0;padding:3px 11px 3px 5px}
  .dl-pf-n{font-size:10px;margin-bottom:1px}.dl-pf-hp{height:8px}.dl-pf-hp span{display:none}.dl-pf-pw{height:3px;margin-top:1px}
  .dl-pf-au{display:none}
  .dl-haspet .dl-a .dl-fx{min-height:44px}.dl-haspet .dl-b:not(.dl-tpet) .dl-fx{min-height:60px}
  .dl-frame.dl-tpet{left:242px}
  /* the pet's bar: a row left of your bar (over the stance bar when there is one), clear of the stick and the jump; your cast bar and the
     alert step up over it */
  .dl-pbar{left:auto;right:172px;bottom:8px;padding:4px}
  .dl-onebar .dl-pbar{bottom:8px}
  .dl-mini~.dl-pbar{bottom:66px}
  .dl-ui .dl-pslot{width:38px;height:38px}
  .dl-haspbar .dl-me-cast,.dl-onebar.dl-haspbar .dl-me-cast{bottom:78px}.dl-haspbar .dl-err-line,.dl-onebar.dl-haspbar .dl-err-line{bottom:108px}
  .dl-fight:has(.dl-mini~.dl-pbar:not([hidden])) .dl-me-cast{bottom:120px}.dl-fight:has(.dl-mini~.dl-pbar:not([hidden])) .dl-err-line{bottom:146px}
}

/* numbers on a pet: a size under a player's */
.dl-num.dl-pn{font-size:17px}.dl-num.dl-pn.dl-crit{font-size:24px}
/* (25 Oct 2026) a phone under 375 px: the clock and the pet's column fit the gap between the stick and the bar */
@media (max-width:374px) and (orientation:portrait){
  .dl-clock{padding:5px 5px;font-size:13px}
  .dl-ui .dl-pslot{width:34px;height:34px}
  .dl-pbar{left:calc((138px + 100% - 180px) / 2 - 21px)}
}
/* (25 Oct 2026) a window of 701 to 899 px: both frames narrower, so the target's never reaches the clock */
@media (min-width:701px) and (max-width:899px) and (min-height:501px){.dl-frame{width:304px}.dl-frame.dl-tpet{left:320px}.dl-hint{left:336px}}
/* (26 Oct 2026, the swarm: the target's line cut upright at 768 wide with 150 px free beside it) the frames take the room there is, up to
   their full 336 px, leaving the clock or the menu theirs */
@media (min-width:701px) and (max-width:899px) and (min-height:501px){.dl-fight{--fw:max(304px,min(336px,calc((100vw - 112px) / 2)))}.dl-frame{width:var(--fw)}.dl-frame.dl-tpet{left:calc(var(--fw) + 16px)}.dl-hint{left:calc(var(--fw) + 32px)}}
/* (25 Oct 2026) a touch tablet (a stick on a window wider than a phone): the stance bar in the bottom right, Leave over it, the stick's
   corner left to the stick and the jump */
@media (min-width:701px) and (min-height:501px){.dl-touch .dl-mini{right:12px;bottom:12px}.dl-touch .dl-leave{bottom:84px}}
/* (25 Oct 2026) the floating stick: it jumps under the thumb at once and eases home when let go */
.dl-stick{transition:transform .14s ease-out}.dl-stick.dl-float{transition:none;box-shadow:inset 0 0 0 1px rgba(201,162,74,.9)}

/* ---- (25 Oct 2026) a touch screen, rebuilt from Chris's iPhone: "the buttons overlap the screen", "You should have a very clean FOV".
   No slab of twelve: six round, see-through buttons in an arc round the right thumb's corner (the first the biggest), the rest behind the
   swap at its top; the pet's and the stance buttons a slim column beside it; Leave on the left edge, out of both thumbs' way; the clock a
   small tag at the bottom; the error line a quiet line at the top. --k scales the arc; the bar is a point at the arc's centre ---- */
.dl-touch .dl-bar.dl-arc{position:absolute;left:auto;top:auto;right:var(--ar,64px);bottom:var(--ab,74px);width:0;height:0;padding:0;display:block;transform:none;background:none;box-shadow:none;border-radius:0;--k:1}
.dl-touch .dl-arc .dl-slot,.dl-touch .dl-arc .dl-swap{position:absolute;--s:54px;width:calc(var(--s) * var(--k));height:calc(var(--s) * var(--k));left:calc(var(--x) * var(--k) - var(--s) * var(--k) / 2);top:calc(var(--y) * var(--k) - var(--s) * var(--k) / 2);
  padding:0;min-height:0;border-radius:50%;overflow:hidden;background:rgba(8,7,6,.3);box-shadow:0 0 0 1.5px rgba(0,0,0,.6),0 0 0 3px rgba(233,227,214,.22);transition:transform .08s;-webkit-tap-highlight-color:transparent;touch-action:none}
.dl-touch .dl-arc .dl-slot img{opacity:.9;transform:scale(1.12)}
.dl-touch .dl-arc .dl-slot::before,.dl-touch .dl-arc .dl-gl,.dl-touch .dl-arc .dl-fl,.dl-touch .dl-arc .dl-slot.dl-q::after{border-radius:50%}
.dl-touch .dl-arc .dl-slot:active{transform:scale(.92)}
.dl-touch .dl-arc .dl-slot.dl-lit{box-shadow:0 0 0 1.5px #000,0 0 0 3px #f0d68e,0 0 14px rgba(255,210,110,.7)}
.dl-touch .dl-arc .dl-cd{font-size:calc(20px * var(--k))}
.dl-touch .dl-arc .dl-a0{--s:76px;--x:0px;--y:0px}.dl-touch .dl-arc .dl-a0 .dl-cd{font-size:calc(26px * var(--k))}
.dl-touch .dl-arc .dl-a1{--x:-90px;--y:2px}
.dl-touch .dl-arc .dl-a2{--x:-62px;--y:-66px}
.dl-touch .dl-arc .dl-a3{--x:6px;--y:-92px}
.dl-touch .dl-arc .dl-a4{--x:-156px;--y:-34px}
.dl-touch .dl-arc .dl-a5{--x:-104px;--y:-128px}
.dl-touch .dl-arc .dl-swap{--s:50px;--x:-24px;--y:-168px;display:block;color:#e9e3d6;background:rgba(8,7,6,.55);box-shadow:0 0 0 1.5px #000,0 0 0 3px rgba(201,162,74,.7)}
.dl-touch .dl-arc .dl-slot{display:none}.dl-touch .dl-arc[data-page='1'] .dl-pg1,.dl-touch .dl-arc[data-page='2'] .dl-pg2,.dl-touch .dl-arc[data-page='3'] .dl-pg3{display:block}
.dl-touch .dl-arc .dl-stn[aria-pressed=true]{box-shadow:0 0 0 1.5px #000,0 0 0 3px #f2ead8,0 0 10px rgba(255,255,255,.4)}

/* (25 Oct 2026, Chris: "Should be a little more obvious there's a second page of buttons") the page control: the next page's first three
   icons peek out of it, a gold ring round it, the pages as dots under it; the shown page's buttons pop in as it turns; a swipe across the
   arc's pad turns it too; the first three duels it pulses at the go with a quiet tag beside it */
.dl-peek>span{display:none;position:absolute;inset:0}
.dl-arc[data-next='1'] .dl-peek>[data-p='1'],.dl-arc[data-next='2'] .dl-peek>[data-p='2'],.dl-arc[data-next='3'] .dl-peek>[data-p='3'],.dl-arc[data-next='4'] .dl-peek>[data-p='4']{display:block}
.dl-peek img{position:absolute;width:42%;height:42%;border-radius:50%;box-shadow:0 0 0 1px #000;transform:scale(1.05)}
.dl-peek img:nth-child(1){left:8%;top:12%}.dl-peek img:nth-child(2){right:8%;top:12%}.dl-peek img:nth-child(3){left:29%;bottom:6%}
.dl-touch .dl-arc .dl-dots{position:absolute;left:calc(-24px * var(--k));top:calc(-168px * var(--k) + 25px * var(--k) + 5px);transform:translateX(-50%);display:flex;gap:6px;pointer-events:none}
.dl-dots i{width:7px;height:7px;border-radius:50%;background:rgba(233,227,214,.3);box-shadow:0 0 0 1px rgba(0,0,0,.6)}.dl-dots i.on{background:#f2ead8}
.dl-touch .dl-arc .dl-arcpad{position:absolute;left:calc(-186px * var(--k));top:calc(-196px * var(--k));width:calc(250px * var(--k));height:calc(250px * var(--k));pointer-events:auto;touch-action:none}
.dl-touch .dl-arc.dl-flip .dl-slot{animation:dl-flipin .2s ease-out}
@keyframes dl-flipin{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.dl-touch .dl-arc .dl-more{position:absolute;left:calc(-24px * var(--k) - 34px * var(--k));top:calc(-168px * var(--k));transform:translate(-100%,-50%);white-space:nowrap;padding:5px 10px;border-radius:12px;font:600 12px/1.2 'Open Sans',sans-serif;color:#f2ead8;background:rgba(10,9,8,.72);box-shadow:0 0 0 1px rgba(201,162,74,.55);opacity:0;transition:opacity .4s;pointer-events:none}
.dl-touch .dl-arc.dl-cue .dl-more{opacity:1}
.dl-touch .dl-arc.dl-cue .dl-swap{animation:dl-cue 1s ease-in-out 2}
@keyframes dl-cue{0%,100%{transform:none}50%{transform:scale(1.18);box-shadow:0 0 0 1.5px #000,0 0 0 3px #f0d68e,0 0 16px rgba(255,210,110,.75)}}
@media (prefers-reduced-motion:reduce){.dl-touch .dl-arc.dl-flip .dl-slot,.dl-touch .dl-arc.dl-cue .dl-swap{animation:none}}
.dl-touch .dl-arc .dl-swap.dl-lit{box-shadow:0 0 0 1.5px #000,0 0 0 3px #f0d68e,0 0 12px rgba(255,210,110,.7)}
.dl-touch .dl-arc .dl-slot.dl-going{box-shadow:0 0 0 1.5px #000,0 0 0 3px #f2ead8,0 0 12px rgba(255,255,255,.5);animation:dl-going .7s ease-in-out infinite alternate}
@keyframes dl-going{from{transform:scale(1)}to{transform:scale(1.06)}}
/* the stick: a faint ring at rest, brighter under the thumb; the jump just above it */
.dl-touch .dl-stick{box-shadow:inset 0 0 0 1px rgba(233,227,214,.28);background:rgba(10,9,8,.18)}
.dl-touch .dl-stick i{box-shadow:inset 0 0 0 2px rgba(233,227,214,.7);background:rgba(233,227,214,.1)}
.dl-touch .dl-stick.dl-float{box-shadow:inset 0 0 0 1px rgba(233,227,214,.55);background:rgba(10,9,8,.28)}
/* Leave: the left edge above the stick's reach, small but 44 px to touch */
.dl-ui.dl-touch .dl-leave{left:4px;right:auto;top:30%;bottom:auto;transform:none;min-height:44px;padding:0 10px;font-size:11px;color:#a99d86;background:rgba(10,9,8,.45);box-shadow:0 0 0 1px rgba(58,51,38,.8)}
/* the error line: small, at the top under the frames, never over the fight */
.dl-touch .dl-err-line{top:calc(var(--ft,96px));bottom:auto;font-size:12px;padding:0 12px}
/* the pet's buttons: a slim column at the right edge over the arc (upright), a short row at the foot between the thumbs (on its side);
   44 px to touch. Stances, forms and aspects are the arc's last page */
.dl-touch .dl-pbar{left:auto;right:6px;bottom:calc(var(--ab,74px) + 196px);top:auto;flex-direction:column-reverse;gap:4px;padding:0;background:none;box-shadow:none}
.dl-ui.dl-touch .dl-pslot{width:44px;height:44px;border-radius:50%;background:rgba(8,7,6,.3);box-shadow:0 0 0 1.5px rgba(0,0,0,.6),0 0 0 3px rgba(233,227,214,.22)}
.dl-touch .dl-pslot .dl-sw,.dl-touch .dl-pslot .dl-fl,.dl-touch .dl-pslot.dl-auto::after{border-radius:50%}
/* the clock: a small tag at the foot of the screen between the thumbs */
.dl-touch .dl-clock{top:auto;right:auto;left:50%;bottom:4px;transform:translateX(-50%);font-size:12px;padding:4px 7px;opacity:.85}
@media (orientation:portrait){
  /* (QA round 4: your cast bar sat on your own body on a small phone) at the top, under the frames and the error line, off the fight;
     the loss-of-control alert just under it */
  .dl-touch .dl-me-cast,.dl-touch .dl-haspbar .dl-me-cast,.dl-touch .dl-onebar.dl-haspbar .dl-me-cast{top:122px;bottom:auto;width:200px;margin-left:-100px}
  .dl-touch .dl-haspet .dl-me-cast,.dl-touch .dl-haspet.dl-haspbar .dl-me-cast{top:154px}
  .dl-touch.dl-ui .dl-jump,.dl-ui.dl-touch .dl-jump{left:26px;bottom:156px;width:44px;height:44px}
}
/* (QA round 6: at 375 x 667 the arc's far button met the stick's ring) the smaller arc up to 389 px wide */
@media (max-width:389px) and (orientation:portrait){.dl-touch .dl-bar.dl-arc{--k:.88;--ar:58px;--ab:66px}.dl-touch .dl-pbar{bottom:calc(66px + 176px)}}
/* a phone on its side: the arc in the right corner, the column left of it, the cast bar over the middle */
@media (orientation:landscape) and (max-height:500px){
  .dl-touch .dl-bar.dl-arc{--ar:66px;--ab:60px;--k:.9}
  .dl-touch .dl-pbar{left:130px;right:auto;bottom:6px;flex-direction:row;flex-wrap:wrap-reverse;max-width:calc(50% - 130px - 34px)}
  .dl-ui.dl-touch .dl-leave{top:8px;bottom:auto;left:auto;right:8px}
  .dl-ui.dl-touch .dl-jump{left:30px;right:auto;bottom:124px}
  .dl-touch .dl-err-line{top:72px}
}
@media (orientation:landscape) and (max-height:340px){.dl-touch .dl-bar.dl-arc{--k:.8;--ab:54px}}
/* a touch tablet: a bigger arc */
@media (min-width:701px) and (min-height:501px){.dl-touch .dl-bar.dl-arc{--k:1.15;--ar:80px;--ab:90px}.dl-touch .dl-pbar{bottom:calc(90px + 230px)}.dl-ui.dl-touch .dl-leave{bottom:auto;top:40%}}

/* ---- (25 Oct 2026) QA round 3 ---- */
/* a frame takes taps on its portrait and its plate only: its aura and cast row (often empty) never sits over a far plate and eats the tap;
   a pet's own target frame takes none */
.dl-frame.dl-b.on .dl-fx{pointer-events:none}.dl-frame.dl-b.on .dl-fx .dl-au{pointer-events:auto}
.dl-frame.dl-tpet.on{pointer-events:none}
/* the alert's second line (another hold under the worst) sits on its own small pill, not bare over the arena */
.dl-loc-more{position:absolute;left:50%;top:100%;margin-top:calc(var(--u) * 12);width:max-content;max-width:calc(100vw - 24px);transform:translateX(-50%);padding:3px 10px;border-radius:10px;font:600 12px/1.2 'Open Sans',sans-serif;color:#e8e0cc;text-shadow:0 1px 2px #000;white-space:nowrap;background:rgba(12,10,8,.88);box-shadow:0 0 0 1px #000,0 0 0 2px rgba(91,74,46,.6);overflow:hidden;text-overflow:ellipsis}
.dl-loc-more:empty{display:none}
/* the result's buttons: 44 px to touch on every phone */
.dl-ui .dl-end-row button,.dl-ui .dl-end .dl-end-row button{min-height:44px}
/* (25 Oct 2026) First Aid: its own round button by the jump, always on screen */
.dl-ui.dl-touch .dl-aidb{position:absolute;left:26px;bottom:210px;width:44px;height:44px;min-height:0;padding:0;border-radius:50%;overflow:hidden;background:rgba(8,7,6,.3);box-shadow:0 0 0 1.5px rgba(0,0,0,.6),0 0 0 3px rgba(233,227,214,.22);-webkit-tap-highlight-color:transparent;touch-action:none}
.dl-touch .dl-aidb img{opacity:.9;transform:scale(1.12)}.dl-touch .dl-aidb .dl-cd{font-size:14px}
.dl-touch .dl-aidb::before,.dl-touch .dl-aidb .dl-gl,.dl-touch .dl-aidb .dl-fl{border-radius:50%}
.dl-over .dl-aidb{opacity:0;visibility:hidden}
@media (orientation:landscape) and (max-height:500px){.dl-ui.dl-touch .dl-aidb{left:84px;bottom:124px}}
@media (min-width:701px) and (min-height:501px){.dl-ui.dl-touch .dl-aidb{bottom:230px}}
/* (25 Oct 2026) First Aid on a desktop bar: its own well at the bar's end, between the two rows, on F */
.dl-bar.dl-aidbar{grid-template-columns:repeat(6,52px) 52px}
.dl-bar .dl-aidd{grid-column:7;grid-row:1 / span 2;align-self:center;margin-left:6px}
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:501px),(orientation:landscape) and (max-height:500px){.dl-bar.dl-aidbar{grid-template-columns:repeat(3,auto)}.dl-bar .dl-aidd{grid-column:auto;grid-row:auto;margin:0}}
.dl-fight:has(.dl-aidbar) .dl-mini{right:calc(50% + 222px)}.dl-fight:has(.dl-aidbar) .dl-pbar{left:calc(50% - 208px)}

/* ---- (25 Oct 2026) QA round 4 ---- */
/* the result on a short phone on its side (667 x 375): tighter, and its column scrolls inside the screen; the notch and the home bar kept
   clear with the safe-area insets */
.dl-end{padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) 0 env(safe-area-inset-left,0);box-sizing:border-box}
.dl-end-in{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
@media (orientation:landscape) and (max-height:400px){
  .dl-end-in{max-height:100%;overflow-y:auto;padding:6px 4px calc(8px + env(safe-area-inset-bottom,0px));align-self:stretch;display:flex;flex-direction:column;justify-content:center}
  .dl-end-h{font-size:28px}.dl-end-vs{margin-bottom:4px}.dl-end-p b{--fs:14px;font-size:14px}.dl-end-p small{font-size:11px}.dl-end-p em{display:none}
  .dl-end-st{padding:4px 0;margin-bottom:6px}.dl-end-st dd{font-size:16px;margin-top:4px}.dl-end-rate{min-height:0;margin-bottom:6px}.dl-end-rt b{font-size:28px}.dl-end-note{font-size:12px}
  .dl-ui .dl-end-main{min-height:44px;font-size:15px}.dl-end-acts{gap:5px}
}
/* the fixed arena keeps the notch's side clear on a phone on its side */
@media (orientation:landscape) and (max-height:500px){html.dl-lock .dl.dl-live .dl-fight{left:env(safe-area-inset-left,0);right:env(safe-area-inset-right,0)}}

.dl-touch .dl-haspbar .dl-err-line,.dl-touch .dl-onebar.dl-haspbar .dl-err-line{bottom:auto}

/* ---- (25 Oct 2026) a new player's playtest ---- */
/* a touch screen's menu: Sound and Leave behind one small button in the corner, off the arena's view */
.dl-ui .dl-menu{position:absolute;top:8px;right:4px;width:44px;height:44px;min-height:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:6px;background:rgba(10,9,8,.55);box-shadow:0 0 0 1px rgba(91,74,46,.7);z-index:4}
.dl-menu i{width:4px;height:4px;border-radius:50%;background:#cfc6b4}
.dl-ui .dl-menu[aria-expanded=true]{box-shadow:0 0 0 1px #c9a24a}
.dl-menu-pop{position:absolute;top:58px;right:4px;z-index:5;display:flex;gap:8px;padding:6px;border-radius:8px;background:rgba(12,10,8,.92);box-shadow:0 0 0 1px #000,0 0 0 2px rgba(91,74,46,.7),0 8px 22px rgba(0,0,0,.5);pointer-events:auto}
.dl-menu-pop[hidden]{display:none}
.dl-ui .dl-menu-pop .dl-leave,.dl-ui.dl-touch .dl-menu-pop .dl-leave{position:static!important;inset:auto!important;transform:none!important;min-height:44px;padding:0 14px;font-size:12px;opacity:1}
.dl-ui .dl-menu-pop .dl-snd{position:static!important;left:auto!important;top:auto!important;height:44px!important}
/* (30 Oct 2026, the release QA: at 360 x 780 the fight menu's five buttons ran off the left edge, "MBAT LOG" at x -33, and the sound
   button was 22 to 30 px wide) the sound button 44 px square at least, and on a narrow phone upright the menu wraps onto two rows inside
   the screen, each button as wide as its row lets it be */
.dl-ui .dl-menu-pop .dl-snd{min-width:44px!important;flex:none}
@media (orientation:portrait) and (max-width:520px){
  .dl-menu-pop{left:4px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 8px);box-sizing:border-box}
  .dl-menu-pop>*{flex:1 1 auto}
  .dl-ui .dl-menu-pop .dl-ctl,.dl-ui .dl-menu-pop .dl-leave{padding:0 10px;white-space:nowrap}
}
.dl-over .dl-menu,.dl-over .dl-menu-pop{opacity:0;visibility:hidden}
@media (orientation:portrait){.dl-touch .dl-top{right:52px}}
@media (orientation:landscape) and (max-height:500px){.dl-ui .dl-menu{top:6px;right:8px}.dl-menu-pop{top:56px;right:8px}}
@media (min-width:701px) and (min-height:501px){.dl-ui .dl-menu{top:12px;right:12px}.dl-menu-pop{top:62px;right:12px}.dl-touch .dl-clock{right:auto}}
/* your target off the screen: an arrow on the edge pointing at him */
.dl-edge{position:absolute;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:3}
.dl-edge::before{content:'';position:absolute;inset:4px;background:#ff8a5c;clip-path:polygon(100% 50%,10% 8%,34% 50%,10% 92%);filter:drop-shadow(0 0 3px #000)}
.dl-edge.on{opacity:.95}
/* a big hit on you: the screen's edge flashes red as it lands */
.dl-hurtfx{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 70px 14px rgba(215,28,18,.6);z-index:1}
.dl-hurtfx.on{animation:dl-hurtfx .5s ease-out}
@keyframes dl-hurtfx{0%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.dl-hurtfx.on{animation-duration:.2s}}
/* the bot's big cast (over 1.5 sec) warns on its plate and frame */
.dl-cast.dl-big .dl-cbar{box-shadow:inset 0 0 0 1px #000,0 0 0 2px #ff7a45,0 0 12px rgba(255,110,60,.75)}
.dl-cast.dl-big.on .dl-cic{box-shadow:0 0 0 1px #000,0 0 0 2px #ff7a45}
.dl-np-cb.dl-big.on{animation:dl-bigcast .6s ease-in-out infinite alternate}
@keyframes dl-bigcast{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.dl-np-cb.dl-big.on{animation:none}}
/* hits on you read bigger */
.dl-num.dl-in{font-size:28px}.dl-num.dl-in.dl-word{font-size:17px}
@media (max-width:700px) and (orientation:portrait),(orientation:landscape) and (max-height:500px){.dl-num.dl-in{font-size:24px}}
/* a desktop's error line: up under the frames, off your own body */
/* (27 Oct 2026, round 6) at the game's own place: TOP -122 of a 768-high screen (UIErrorsFrame.xml), 171 px at 1080 and 143 at 900, its
   ErrorFont 16 of 768 */
@media (min-width:701px) and (min-height:501px){.dl-ui:not(.dl-touch) .dl-err-line,.dl-ui:not(.dl-touch) .dl-haspbar .dl-err-line,.dl-ui:not(.dl-touch) .dl-onebar.dl-haspbar .dl-err-line{top:calc(var(--uh,1080px) * 122 / 768);bottom:auto;font-size:clamp(14px,calc(var(--uh,1080px) * 16 / 768),24px)}}
/* the page control glows softly for a defensive ready on a page not shown, under 35% health */
.dl-touch .dl-arc .dl-swap.dl-def{box-shadow:0 0 0 1.5px #000,0 0 0 3px #9fe7a8,0 0 16px rgba(140,230,160,.7);animation:dl-defglow 1.1s ease-in-out infinite alternate}
@keyframes dl-defglow{from{opacity:.85}to{opacity:1}}
/* the result's line about the fight, and the ladder offered after a few practice wins */
.dl-end-why{margin:-8px 0 14px;font-size:14px;line-height:1.4;color:#f2ead8;animation:dx-pop .4s .5s ease-out both}
.dl-end-offer{margin:2px 0 0;text-align:center;font-size:13px;color:#cfc6b4}
.dl-ui .dl-end .dl-link.dl-end-hot{color:#ffd100;text-decoration:underline;text-underline-offset:3px}
@media (orientation:landscape) and (max-height:400px){.dl-end-why{margin:-4px 0 6px;font-size:12px}}

/* ---- (25 Oct 2026) QA round 6 on phones ---- */
/* the result on a phone on its side keeps "You beat Halvar in 0:26", a little smaller, with air under VICTORY */
@media (orientation:landscape) and (max-height:500px){.dl-end-h{margin-bottom:6px}.dl-end-say{display:block;margin:0 0 4px;font-size:12px;animation:none}.dl-end-why{margin:0 0 6px}}
@media (orientation:landscape) and (max-height:400px){.dl-end-h{font-size:26px;margin-bottom:4px}.dl-end-say{font-size:11px;margin:0 0 2px}.dl-end-why{font-size:11px;margin:0 0 4px}.dl-end-vs small{display:none}}
/* the count and "Duel!" stand in the sky above the foe, never over his plate (an upright phone) or between him and you (on its side) */
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:501px){.dl-touch .dl-count{top:19%}.dl-touch .dl-keys{top:calc(19% + 66px)}}
@media (orientation:landscape) and (max-height:500px){.dl-touch .dl-count{top:37%}.dl-touch .dl-keys{top:calc(37% + 54px)}}

/* (25 Oct 2026) a mouse's tooltip stands in the bottom right corner, over Leave and the sound button, as the game's does */
.dl-tip.dl-tip-corner{left:auto;top:auto;right:14px;bottom:72px;transform:none;max-width:260px;font-size:11.5px}

/* (25 Oct 2026) the beta note on the result (the local link only) */
.dl-end-notef{display:flex;gap:8px;align-items:flex-end;margin:8px 0 0}.dl-end-notef textarea{flex:1;min-height:60px;padding:8px;font:400 14px/1.4 'Open Sans',sans-serif;color:#e9e3d6;background:rgba(10,9,8,.7);border:0;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(201,162,74,.5);resize:vertical}.dl-end-notef textarea:focus{outline:2px solid #c9a24a;outline-offset:1px}.dl-ui .dl-end-notef button{min-height:44px}
/* (25 Oct 2026, QA round 7: the note form's display:flex beat its [hidden], so it stood open on every result and pushed a landscape phone's
   result past the screen) hidden wins inside the result; the thanks line centred */
.dl-end [hidden]{display:none!important}.dl-end-notef .dl-end-note{flex:1;text-align:center}
/* (25 Oct 2026, QA round 8) the result's first 1.1 sec takes no tap: a thumb still on the bar at the kill lands on nothing */
.dl-end.dl-end-hold *{pointer-events:none!important}
/* (25 Oct 2026, QA round 8: at 667x375 and 568x320 your cast bar's right end ran under the arc's far button) a small phone on its side keeps
   the cast bar shorter and a little left of the middle, clear of the right thumb's arc */
@media (orientation:landscape) and (max-width:700px){.dl-me-cast{width:200px;margin-left:-150px}}
/* (QA round 9) while the result holds, its buttons read as resting, then light up when they will take a tap */
.dl-end .dl-end-acts{transition:opacity .25s}.dl-end.dl-end-hold .dl-end-acts{opacity:.55}

/* ---- (25 Oct 2026) the Training Dummy (duel_dummy.js): its frame in plain ink with no class, no power bar and no health number (it fills
   again), the meter where the clock stands, the end with each spell's share. Gold only as ink, no filled buttons ---- */
.dl-dummy .dl-clock{display:none}
/* (26 Oct 2026) the duel's last 30 sec: the clock's figures in gold */
.dl-clock.dl-late{color:#f2c86b}
.dl-dummy .dl-frame.dl-b .dl-res,.dl-dummy .dl-frame.dl-b .dl-hv{visibility:hidden}
.dl-pr.dl-pr-dum{object-fit:cover;object-position:50% 12%;background:#2a2219}
.dl-pr.dl-pr-still{object-fit:cover;object-position:50% 8%;background:#2a2219}   /* (26 Oct 2026) a female fighter's own still, her head */
.dl-dps{position:absolute;top:12px;right:12px;z-index:3;width:188px;padding:9px 10px 10px;text-align:center;color:#e9e3d6;background:var(--dl-plate);border-radius:6px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.7),0 4px 14px rgba(0,0,0,.45)}
/* (28 Oct 2026, impact round, the playtest: on the Dummy your buffs stood under the damage meter, hidden) with the meter in the top right
   corner your buffs and debuffs stand at its left, from the same top */
.dl-fight:has(.dl-dps) .dl-pau{top:12px;right:calc(12px + 188px + 12px)}
.dl-dps-top{display:flex;align-items:baseline;justify-content:center;gap:6px}
.dl-dps-n{font:700 30px/1 PkNum,'Open Sans',sans-serif;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000}
.dl-dps-top small{font:700 12px/1 Cinzel,Georgia,serif;letter-spacing:.1em;color:#c9a24a}
.dl-dps-ln{margin:5px 0 0;font:600 13px/1.2 'Open Sans',sans-serif;color:#cfc6b4;font-variant-numeric:tabular-nums}
.dl-dps-st{margin:3px 0 0;font-size:11px;line-height:1.25;color:#9a907e}
.dl-dps-b{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.dl-ui .dl-dps-b button{min-height:36px;padding:0 6px;font-size:12px;background:rgba(10,9,8,.6)}
.dl-over .dl-dps{opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
@media (pointer:coarse){.dl-ui .dl-dps-b button{min-height:44px}}
/* a phone upright: under the target's frame on the right, small (31 Oct 2026, the phone pass: 6 px under the spellbook's button, which
   ends 102 px down, where it touched its foot by 2 px; the chat button stands under the meter, duel_chat.js placeBtn) */
@media (orientation:portrait) and (max-width:700px){
  .dl-dps{top:calc(var(--ft,96px) + 12px);right:6px;width:132px;padding:6px 7px 7px}
  .dl-dps-n{font-size:22px}.dl-dps-top small{font-size:10px}.dl-dps-ln{font-size:11px;margin-top:3px}.dl-dps-st{font-size:10px}
  .dl-dps-b{gap:4px;margin-top:5px}.dl-ui .dl-dps-b button{padding:0 2px;font-size:11px}
}
/* a phone on its side: the top right corner, left of the menu */
@media (orientation:landscape) and (max-height:500px){
  .dl-dps{top:6px;right:60px;width:150px;padding:5px 7px 6px}
  .dl-dps-n{font-size:20px}.dl-dps-ln{font-size:11px;margin-top:2px}.dl-dps-st{display:none}
  .dl-dps-b{margin-top:4px;gap:4px}.dl-ui .dl-dps-b button{font-size:11px}
}
/* (31 Oct 2026, the sizes sweep: on an iPad, 768 x 1024 and 1024 x 768, the spellbook's button lay on the meter's corner, 44 x 40, and
   upright the meter on the target's portrait) a touch tablet's meter starts under the menu and the spellbook's column and under the target's frame box (126 px down upright) */
@media (min-width:701px) and (min-height:501px){.dl-touch .dl-dps{top:132px}}
/* (30 Oct 2026, the release QA: on a phone the damage numbers rising off the dummy went under the meter at 360 x 780) on a phone the
   numbers draw over the meter as they pass it; they are gone in a second, the meter stays */
@media (orientation:portrait) and (max-width:700px),(orientation:landscape) and (max-height:500px){.dl-dummy .dl-ct{z-index:4}}
/* the end */
.dl-end-dummy{grid-template-columns:minmax(0,1fr) minmax(320px,560px) minmax(0,1fr)}
.dl-end-dummy .dl-end-h{display:flex;flex-direction:column;align-items:center;gap:6px}
.dl-end-dummy .dl-end-h small{font:700 13px/1 Cinzel,Georgia,serif;letter-spacing:.14em;color:#c9a24a;text-transform:uppercase}
.dl-end-dummy .dl-end-h span{font-family:PkNum,Cinzel,Georgia,serif}
.dl-dm-tb{width:100%;margin:0 0 14px;border-collapse:collapse;font-size:13px;text-align:left;animation:dx-pop .4s .7s ease-out both}
.dl-dm-tb th,.dl-dm-tb td{padding:6px 6px;border-bottom:1px solid #221e17;vertical-align:middle}
.dl-dm-tb thead th{font:600 10px/1.2 Cinzel,Georgia,serif;letter-spacing:.1em;text-transform:uppercase;color:#b8ad98;border-bottom:1px solid rgba(201,162,74,.45)}
.dl-dm-tb tbody th{display:flex;align-items:center;gap:7px;font:600 13px/1.2 'Open Sans',sans-serif;color:#e9e3d6;min-width:0}
.dl-dm-tb tbody th span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-dm-tb img,.dl-dm-ic{flex:none;width:20px;height:20px;border-radius:3px;box-shadow:0 0 0 1px #000}
.dl-dm-ic{display:inline-block;background:radial-gradient(circle,#3a3326,#15120e)}
.dl-dm-tb .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dl-dm-tb td small{color:#9a907e;font-size:11px}
.dl-dm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* (30 Oct 2026, the release QA: a mark with no damage sat in the damage rows at 0%) the spells that dealt none, one quiet line under the table */
.dl-dm-also{margin:-6px 0 14px;font-size:12px;line-height:1.4;color:#b8ad98;text-align:left;animation:dx-pop .4s .8s ease-out both}
.dl-dm-also b{font:600 10px/1 Cinzel,Georgia,serif;letter-spacing:.1em;text-transform:uppercase;color:#c9a24a;margin-right:4px}
.dl-dm-also small{color:#9a907e;font-size:11px}
.dl-end-row.dl-end-row2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:501px){
  .dl-end-dummy .dl-end-in{margin-top:0;padding-top:24px}
  .dl-dm-tb{font-size:12px}.dl-dm-tb th,.dl-dm-tb td{padding:5px 3px}.dl-dm-tb tbody th{font-size:12px}
}
@media (orientation:landscape) and (max-height:500px){
  .dl-end-dummy .dl-end-h small{font-size:10px}
  .dl-dm-tb{font-size:11px;margin-bottom:8px}.dl-dm-tb th,.dl-dm-tb td{padding:3px 4px}.dl-dm-tb tbody th{font-size:11px}.dl-dm-tb img,.dl-dm-ic{width:16px;height:16px}
}
/* ---- (26 Oct 2026) a button the game would grey out (a stance or form it needs, a proc not lit, no Seal, no combo point), and a phone's
   More: a small round button at the arc's top left that opens a panel of the rare buttons and the other stances and forms, each named ---- */
.dl-slot.dl-no img{filter:grayscale(.85) brightness(.55)}
.dl-touch .dl-arc .dl-mbtn{position:absolute;--s:40px;width:calc(var(--s) * var(--k));height:calc(var(--s) * var(--k));left:calc(-168px * var(--k) - var(--s) * var(--k) / 2);top:calc(-112px * var(--k) - var(--s) * var(--k) / 2);
  min-height:0;padding:0;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:50%;background:rgba(8,7,6,.55);box-shadow:0 0 0 1.5px #000,0 0 0 3px rgba(201,162,74,.55);-webkit-tap-highlight-color:transparent;touch-action:none}
.dl-touch .dl-arc .dl-mbtn i{width:4px;height:4px;border-radius:50%;background:#e9e3d6}
.dl-touch .dl-arc .dl-mbtn[aria-expanded=true]{box-shadow:0 0 0 1.5px #000,0 0 0 3px #c9a24a}
/* (30 Oct 2026, the release QA: More was 35 to 36 px and the PvP trinket 39 to 40 px on a phone, the arc's --k shrinking them) at least
   44 px whatever the arc's scale (the trinket's own rule below, --s by --k) */
.dl-touch .dl-arc .dl-mbtn{--s:max(44px,calc(44px / var(--k)))}
.dl-mpop{position:absolute;z-index:6;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:min(300px,calc(100vw - 16px));padding:8px;border-radius:10px;background:rgba(12,10,8,.92);
  box-shadow:0 0 0 1px #000,0 0 0 2px rgba(91,74,46,.7),0 8px 22px rgba(0,0,0,.5);pointer-events:auto}
.dl-mpop[hidden]{display:none}
.dl-ui .dl-mrow{display:flex;align-items:center;gap:8px;min-height:48px;padding:4px 8px 4px 4px;border-radius:8px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(91,74,46,.55);text-align:left;color:#f2ead8;font:600 12px/1.25 'Open Sans',sans-serif;-webkit-tap-highlight-color:transparent}
.dl-ui .dl-mrow:active{background:rgba(201,162,74,.16)}
.dl-ui .dl-mpop .dl-mic{position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#0b0907;box-shadow:0 0 0 1px #000,0 0 0 2px rgba(233,227,214,.22)}
.dl-mpop .dl-mic img{display:block;width:100%;height:100%;transform:scale(1.12)}
.dl-mpop .dl-mic::before,.dl-mpop .dl-mic .dl-gl,.dl-mpop .dl-mic .dl-fl{border-radius:50%}
.dl-mpop .dl-mic .dl-cd{font-size:14px}
.dl-ui .dl-mst[aria-pressed=true]{box-shadow:inset 0 0 0 1px #f2ead8}
.dl-ui .dl-mst[aria-pressed=true] .dl-mn::after{content:' (on)';color:#cfc6b4;font-weight:400}
.dl-over .dl-mpop{opacity:0;visibility:hidden}
/* ---- (26 Oct 2026) the HUD's collisions, the swarm's leads (duel_hud.js measure, keepPlate, placeUp, textNow) ---- */
/* a phone's long press: the tooltip solid, and the page control's tag hidden while it is open (it showed through) */
.dl-touch .dl-tip{background:#0a0908}
.dl-fight:has(>.dl-tip:not([hidden])) .dl-arc .dl-more{opacity:0!important}
/* a phone on its side: the enemy pet's small frame beside the target's frame, as on a wide window, not under it over the arena */
@media (orientation:landscape) and (max-height:500px){
  .dl-b .dl-pf{position:absolute;grid-row:auto;grid-column:auto;left:calc(100% + 10px);top:8px;margin:0;flex-direction:row;max-width:min(220px,calc(100vw - 560px))}
  .dl-b .dl-pf-b{margin:0 0 0 -8px;padding:3px 5px 3px 11px;border-radius:0 5px 5px 0;text-align:left}
  .dl-haspet .dl-b:not(.dl-tpet) .dl-fx{min-height:0}
}

/* ---- (26 Oct 2026, a friend: "i need 6 buttons just for totems") the third bar: a row of six over the two, shown when it holds a spell
   (duel_hud.js dl-has3); the cast bar, the pet's bar and the error line step up over it by its row (52 px and its 5 px gap) ---- */
.dl-bar3{grid-column:1 / span 6;grid-row:1;display:grid;grid-template-columns:repeat(6,52px);gap:5px;padding-bottom:5px;border-bottom:1px solid rgba(91,74,46,.55)}
.dl-has3 .dl-aidd{grid-row:1 / span 3;align-self:end;margin-bottom:28px}
.dl-has3 .dl-me-cast{bottom:207px}.dl-has3 .dl-err-line{bottom:247px}.dl-has3 .dl-pbar{bottom:201px}
.dl-has3.dl-haspbar .dl-me-cast{bottom:253px}.dl-has3.dl-haspbar .dl-err-line{bottom:289px}
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:501px),(orientation:landscape) and (max-height:500px){
  .dl-bar3{grid-column:1 / -1;grid-row:auto;order:-2;grid-template-columns:repeat(3,auto);gap:inherit}
  .dl-has3 .dl-aidd{grid-row:auto;align-self:auto;margin:0}
}
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:501px){
  .dl-has3 .dl-mini{bottom:356px}.dl-has3 .dl-me-cast,.dl-has3.dl-haspbar .dl-me-cast{bottom:410px}.dl-has3 .dl-err-line,.dl-has3.dl-haspbar .dl-err-line{bottom:444px}
}
@media (orientation:landscape) and (max-height:500px){.dl-has3 .dl-me-cast,.dl-has3.dl-haspbar .dl-me-cast{bottom:78px}.dl-has3 .dl-err-line,.dl-has3.dl-haspbar .dl-err-line{bottom:108px}}

/* ---- (27 Oct 2026, round 4) the spellbook and Key bindings in the fight (duel_book.js): the micro menu by the bar's right end, as the
   game's sits beside its bars (the Spellbook with its P, Key bindings with its K); a phone's small book under the corner menu; while a
   spell is dragged from the book the bar's wells, empty ones too, light as places to drop it. The alerts and the error line stay over the
   open book ---- */
.dl-micro{position:absolute;left:calc(100% + 10px);bottom:0;display:flex;flex-direction:column;gap:6px}
.dl-ui .dl-ub{position:relative;width:38px;height:38px;min-height:0;padding:0;display:grid;place-items:center;overflow:hidden;border-radius:6px;color:#d9cdb2;background:linear-gradient(180deg,rgba(34,29,22,.95),rgba(13,11,9,.95));box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.8)}
.dl-ub img{width:100%;height:100%;display:block;transform:scale(1.1)}
.dl-ui .dl-ub:hover{box-shadow:0 0 0 1px #000,inset 0 0 0 1px #8a7650}
.dl-ui .dl-ub.dl-on{color:#fff;box-shadow:0 0 0 1px #000,0 0 0 2px #e8c062,0 0 10px rgba(232,192,98,.45)}
.dl-ub .dl-key{top:2px;right:3px}
.dl-ui .dl-bookb{position:absolute;top:58px;right:4px;width:44px;height:44px;border-radius:50%;z-index:4}
@media (orientation:landscape) and (max-height:500px){.dl-ui .dl-bookb{top:56px;right:8px}}
@media (min-width:701px) and (min-height:501px){.dl-ui .dl-bookb{top:62px;right:12px}}
.dl-over .dl-bookb,.dl-over .dl-micro{opacity:0;visibility:hidden}
.dl-fight .dl-locw,.dl-fight .dl-err-line{z-index:3}
.dx-dragging .dl-bar .dl-slot[data-k],.dx-dragging .dl-bar .dl-empty{box-shadow:0 0 0 1px #000,0 0 0 2px #c9a24a}
.dx-dragging .dl-bar .dl-empty{background:rgba(201,162,74,.12);pointer-events:auto}
.dx-dragging .dl-bar .dl-slot:hover,.dx-dragging .dl-bar .dl-empty:hover{box-shadow:0 0 0 1px #000,0 0 0 2px #ffe8a8,0 0 12px rgba(255,214,120,.6)}

/* ---- (27 Oct 2026, round 5, Chris: "can you make the action bar spread out wider and lower") a desktop's bars as WoW Classic lays its
   main bar out: bar 1 and bar 2 as one long row of twelve along the bottom edge, centred on the screen (its twelve, First Aid hangs at
   its right end), 6 px off the bottom; over its right half the third bar (always shown now, its empty wells with their keys, as the
   game's bottom right bar sits over the main bar), and beside it the Spellbook, Key bindings and Bind mode buttons; over its left half the
   small bar (stances, forms, aspects), as the game's stance bar, and your pet's bar over that, as the game's pet bar. The cast bar over
   them all, in the middle, as the game's. The sizes are the duel's own (wells of 52 px, 5 px apart, as before); the 1100 px is where the
   row, First Aid and the buttons beside it still clear the sound and Leave in the corner (ours, measured); a narrower window keeps the
   rows of six ---- */
@media (min-width:1100px) and (min-height:501px){
  .dl-ui:not(.dl-touch) .dl-fight{--s:52px;--bb:6px;--row:calc(var(--bb) + var(--s) + 22px);--castb:calc(var(--row) + var(--s) + 26px)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar{bottom:var(--bb);left:50%;transform:translateX(calc(var(--s) * -6 - 35.5px));grid-template-columns:repeat(12,var(--s))}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-aidbar{grid-template-columns:repeat(12,var(--s)) var(--s)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-slot{width:var(--s);height:var(--s)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-aidd{grid-column:13;grid-row:1;align-self:center;margin:0 0 0 6px}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar3{position:absolute;bottom:calc(100% + 6px);right:calc(var(--s) + 8px);grid-column:auto;grid-row:auto;display:grid;grid-template-columns:repeat(6,var(--s));gap:5px;padding:6px;border:0;
    background:linear-gradient(180deg,rgba(34,29,22,.92),rgba(13,11,9,.92));border-radius:8px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.8)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar:not(.dl-aidbar) .dl-bar3{right:2px}
  .dl-ui:not(.dl-touch) .dl-fight .dl-micro{left:calc(100% - var(--s) - 2px);bottom:calc(100% + var(--s) / 2 - 6px);flex-direction:row;gap:4px}
  .dl-ui:not(.dl-touch) .dl-fight .dl-micro .dl-ub{width:36px;height:36px}
  .dl-ui:not(.dl-touch) .dl-fight .dl-mini{left:calc(50% - var(--s) * 6 - 35.5px);right:auto;bottom:var(--row)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-pbar{left:calc(50% - var(--s) * 6 - 35.5px);bottom:var(--row)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-mini~.dl-pbar{bottom:calc(var(--row) + 62px)}
  .dl-ui:not(.dl-touch) .dl-fight:has(.dl-mini~.dl-pbar:not([hidden])){--castb:calc(var(--row) + 120px)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-me-cast{bottom:var(--castb)}
  /* (the corner tooltip over the column of the three buttons and the corner, never on them: it stood on Bind mode at 1440) */
  .dl-ui:not(.dl-touch) .dl-fight .dl-tip.dl-tip-corner{bottom:calc(var(--row) + var(--s) + 18px)}
  /* (bind mode's line at the bottom left, where the game's chat frame tells you things, clear of your fighter: over the bars' middle it
     stood on your feet at 1280 x 800) */
  .dl-ui:not(.dl-touch) .dl-fight .dl-bind-line{left:12px;bottom:12px;transform:none;width:auto;max-width:min(340px,calc(50% - var(--s) * 6 - 59.5px));text-align:left}
}
/* (a big screen: the wells a little bigger, as the game's own bars grow with the screen; ours, 58 px from 1800 x 1000) */
@media (min-width:1800px) and (min-height:1000px){.dl-ui:not(.dl-touch) .dl-fight{--s:58px}.dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-key{font-size:11px}}
/* an empty third bar's well: quiet, its key still there */
.dl-ui:not(.dl-touch) .dl-bar3 .dl-empty{background:rgba(0,0,0,.28)}
.dl-empty .dl-key{opacity:.7}

/* ---- (27 Oct 2026, round 5, Chris: "can you make it easier to keybind") bind mode (duel_book.js): every button you can bind lit in gold,
   the one under the pointer brighter, the keys bigger; the empty wells take the pointer; a short line over the bars says what to do ---- */
.dl-ui.dl-binding .dl-bar .dl-slot,.dl-ui.dl-binding .dl-mini button,.dl-ui.dl-binding .dl-pslot,.dl-ui.dl-binding .dl-micro .dl-ub:not([data-ui=ui_bind]){box-shadow:0 0 0 1px #000,0 0 0 2px #b8933f,0 0 9px rgba(201,162,74,.35)}
.dl-ui.dl-binding .dl-bar .dl-empty{pointer-events:auto;background:rgba(201,162,74,.12)}
.dl-ui.dl-binding .dl-bar .dl-slot.dl-bhov,.dl-ui.dl-binding .dl-mini button.dl-bhov,.dl-ui.dl-binding .dl-pslot.dl-bhov,.dl-ui.dl-binding .dl-ub.dl-bhov{box-shadow:0 0 0 1px #000,0 0 0 2px #fff0c0,0 0 16px rgba(255,214,120,.8)}
.dl-ui.dl-binding .dl-key{font-size:12px;color:#ffe08a;opacity:1}
.dl-ui.dl-binding .dl-slot img,.dl-ui.dl-binding .dl-pslot img,.dl-ui.dl-binding .dl-mini img{filter:brightness(.62)}
.dl-ui.dl-binding .dl-bhov img{filter:none}.dl-ui.dl-binding .dl-bhov .dl-key{color:#fff}
.dl-ui .dl-pslot .dl-key{top:2px;right:3px;font-size:9px}
.dl-key.dl-knew{animation:dl-knew .9s ease-out}
@keyframes dl-knew{0%{color:#fff;transform:scale(1.7);text-shadow:0 0 6px #ffd36a,0 0 2px #000}100%{transform:scale(1)}}
.dl-bind-line{position:absolute;left:50%;bottom:calc(var(--castb,214px) + 34px);z-index:4;transform:translateX(-50%);width:max-content;max-width:min(780px,calc(100% - 32px));margin:0;padding:7px 14px;text-align:center;
  font:600 13px/1.4 'Open Sans',sans-serif;color:#e9e3d6;background:rgba(10,9,8,.86);border-radius:6px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #8f7745,0 6px 18px rgba(0,0,0,.45);pointer-events:none}
.dl-bind-line b{color:#ffd100;font-weight:700}
.dl-bind-line.dl-said{box-shadow:0 0 0 1px #000,inset 0 0 0 1px #e8c062,0 0 14px rgba(232,192,98,.35)}
.dl-over .dl-bind-line{display:none}
/* (27 Oct 2026, round 5, the review: on a narrow desktop window, 1024 x 700, the line sat over the middle of the screen across your own
   fighter, the cast bar at her feet) under 1100 px wide it goes to the left edge, halfway down: under your frame and its buffs, over the
   small bar that takes the bottom left corner there, and clear of the middle where you stand (ours, measured at 1024 x 700 and 820 x 640;
   the docked book starts below it, duel_book.js KEEP) */
@media (min-width:701px) and (max-width:1099.98px) and (min-height:501px){
  .dl-ui:not(.dl-touch) .dl-fight .dl-bind-line{left:12px;top:42%;bottom:auto;transform:none;width:auto;max-width:min(300px,calc(50% - 130px));text-align:left;font-size:12px;padding:6px 11px}
}
.dl-binding .dl-tip{display:none}
@media (prefers-reduced-motion:reduce){.dl-key.dl-knew{animation:none}}

/* (27 Oct 2026, round 6, ui-fct-colours-portrait) your portrait's hit text, Forever's HitIndicator (PlayerFrame.lua:51, 74, 121-124: font 30 on
   a 64 portrait): white for a blow, yellow for a spell, green for a heal (set in duel_hud.js portHit), --k its size, 1.5 on a crit */
.dl-hitn{position:absolute;inset:0;z-index:4;display:grid;place-items:center;font:700 calc(72px * 30 / 64 * var(--k,1) * var(--fit,1))/1 PkNum,'Open Sans',sans-serif;color:#fff;text-shadow:0 0 3px #000,0 2px 2px #000;opacity:0;pointer-events:none;white-space:nowrap}
@media (max-width:700px) and (orientation:portrait),(orientation:landscape) and (max-height:500px){.dl-hitn{font-size:calc(46px * 30 / 64 * var(--k,1) * var(--fit,1))}}
/* (27 Oct 2026, round 9) while a hold is on your portrait its clock and a hit's number both stood in the middle, one over the other ("616"
   over "4.9"): the hit takes the upper half and the hold's clock the lower, each still whole */
.dl-a .dl-port.dl-held .dl-hitn{place-items:start center;padding-top:4%}
/* (30 Oct 2026) a crit on you glows red round its own colour, a crit heal green; its pop is duel_hud.js portHit's */
.dl-hitn.dl-hcin{text-shadow:0 0 3px #000,0 2px 2px #000,0 0 10px rgba(255,40,20,.85)}.dl-hitn.dl-hcheal{text-shadow:0 0 3px #000,0 2px 2px #000,0 0 10px rgba(0,255,0,.6)}
.dl-a .dl-port.dl-held .dl-pcc b{place-items:end center;padding-bottom:9%;font-size:18px}
@media (max-width:700px) and (orientation:portrait),(orientation:landscape) and (max-height:500px){.dl-a .dl-port.dl-held .dl-pcc b{font-size:13px;padding-bottom:6%}.dl-a .dl-port.dl-held .dl-hitn{padding-top:0}}
@media (prefers-reduced-motion:reduce){.dl-cf.dl-cfok,.dl-cf.dl-cfok::after{animation:none}}

/* ---- (27 Oct 2026, round 12; Chris: "we should also give everyone a pvp trinket that gets them out of any CC") the PvP trinket's button
   (duel_hud.js dl-trk): on a desktop beside First Aid (under it in its column while the bars are rows of six, after it on the long row of
   twelve from 1240 px, the micro menu and the third bar moved along by its well; before the row's 1 from 1100 to 1239); on a phone in the arc, at its top right beside the page control and
   over its third button, under the right thumb's reach and clear of More, the pet's bar and the page control's first-duel tag (on the
   left it sat under that tag, the first GPU run). A thin gold ring marks it as an item, as First Aid's pale one does (ours) ---- */
.dl-bar.dl-trkbar .dl-aidd{grid-row:1;align-self:center}
.dl-bar .dl-trkd{grid-column:7;grid-row:2;align-self:center;margin-left:6px}
.dl-has3 .dl-bar.dl-trkbar .dl-aidd{grid-row:1 / span 2;align-self:end;margin-bottom:0}
.dl-has3 .dl-bar .dl-trkd{grid-row:3}
.dl-bar .dl-trk{box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(226,176,74,.55)}
.dl-bar .dl-trk img{width:100%;height:100%;display:block}
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:501px),(orientation:landscape) and (max-height:500px){.dl-bar .dl-trkd,.dl-has3 .dl-bar .dl-trkd{grid-column:auto;grid-row:auto;margin:0}.dl-has3 .dl-bar.dl-trkbar .dl-aidd{grid-row:auto}}
@media (min-width:1100px) and (min-height:501px){
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-aidbar.dl-trkbar{grid-template-columns:repeat(12,var(--s)) var(--s) var(--s)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-trkd{grid-column:14;grid-row:1;align-self:center;margin:0 0 0 1px;width:var(--s);height:var(--s)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-trkbar .dl-bar3{right:calc(var(--s) * 2 + 14px)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-trkbar .dl-micro{left:calc(100% - var(--s) * 2 - 8px)}
}
/* (1100 to 1239 px wide the long row with First Aid and the trinket after it ran under the sound and Leave in the corner, the GPU run at
   1100 x 720: there the trinket stands at the row's left end, before its 1, and bind mode's line keeps clear of it; from 1240 px beside
   First Aid, 33 px clear of the corner at 1240) */
@media (min-width:1100px) and (max-width:1239.98px) and (min-height:501px){
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-aidbar.dl-trkbar{grid-template-columns:repeat(12,var(--s)) var(--s)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-trkd{position:absolute;right:calc(100% + 6px);bottom:8px;grid-column:auto;grid-row:auto;margin:0}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-trkbar .dl-bar3{right:calc(var(--s) + 8px)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-trkbar .dl-micro{left:calc(100% - var(--s) - 2px)}
  .dl-ui:not(.dl-touch) .dl-fight:has(.dl-trkbar) .dl-bind-line{max-width:calc(50% - var(--s) * 7 - 72px)}
}
.dl-touch .dl-arc .dl-trkb{--s:max(44px,calc(44px / var(--k)));--x:36px;--y:-160px;display:block;box-shadow:0 0 0 1.5px rgba(0,0,0,.6),0 0 0 3px rgba(226,176,74,.5)}
.dl-touch .dl-arc .dl-trkb .dl-cd{font-size:calc(12px * var(--k))}
.dl-over .dl-trk{opacity:0;visibility:hidden}
/* (30 Oct 2026, Chris's screenshot: a big white "5m" over the insignia) the trinket's and the race's long cooldowns as the game shows one:
   the dark clock sweep over the icon and a small number in its middle, so the icon still reads under it */
.dl-slot.dl-trk .dl-cd,.dl-slot.dl-rac .dl-cd{font-size:13px;font-weight:700;text-shadow:0 0 2px #000,0 1px 1px #000}
/* (27 Oct 2026, round 12 fix; the review) a key of one mark (` to start) at 13 px was a speck at the button's corner at 1440 x 900, and a
   backtick's ink sits above the line box, clipped by the button's edge: drawn at 46 px and set down 7 px, its stroke is as plain as the
   bar's 1 (checked on the desktop GPU, fix12-trinket kv5) */
.dl-ui:not(.dl-touch) .dl-bar .dl-trk .dl-key.dl-keyp{font-size:46px;line-height:1;top:7px;right:4px;letter-spacing:0}
.dl-ui.dl-binding:not(.dl-touch) .dl-bar .dl-trk .dl-key.dl-keyp{font-size:40px}

/* ---- (29 Oct 2026, round 18; Chris, 29 Oct: "orc racial also not working") the race's own buttons (duel_hud.js dl-rac, sim.js RACE, slots
   20 and 21): on a desktop's long row of twelve they stand before its 1, at the row's left end (after them on the right the row of
   sixteen ran under the sound and Leave in the corner at 1280 x 800, checked in software at 1280 and 1440: the right end stays as round
   12 left it), and further left than the trinket from 1100 to 1239, where it stands there itself; in a column after First Aid and the
   trinket while the bars are rows of six; on a phone in the left column over First Aid (on its side, in a row right of it), clear of the
   stick, the jump and the arc ---- */
.dl-bar.dl-aidbar.dl-racbar{grid-template-columns:repeat(6,52px) 52px 52px}
.dl-bar .dl-racd{grid-column:8;align-self:center;margin-left:4px}
.dl-bar .dl-racd.dl-rac0{grid-row:1}.dl-bar .dl-racd.dl-rac1{grid-row:2}
.dl-has3 .dl-bar .dl-racd.dl-rac0{grid-row:2}.dl-has3 .dl-bar .dl-racd.dl-rac1{grid-row:3}
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:501px),(orientation:landscape) and (max-height:500px){.dl-bar .dl-racd,.dl-has3 .dl-bar .dl-racd{grid-column:auto;grid-row:auto;margin:0}}
@media (min-width:1100px) and (min-height:501px){
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-aidbar.dl-racbar{grid-template-columns:repeat(12,var(--s)) var(--s) var(--s)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-racd{position:absolute;bottom:8px;grid-column:auto;grid-row:auto;margin:0;width:var(--s);height:var(--s)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-racd.dl-rac1{right:calc(100% + 6px)}.dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-racd.dl-rac0{right:calc(100% + var(--s) + 10px)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-rn1 .dl-racd.dl-rac0{right:calc(100% + 6px)}
}
@media (min-width:1100px) and (max-width:1239.98px) and (min-height:501px){
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-aidbar.dl-racbar{grid-template-columns:repeat(12,var(--s)) var(--s)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-racd.dl-rac1{right:calc(100% + var(--s) + 10px)}.dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-racd.dl-rac0{right:calc(100% + var(--s) * 2 + 14px)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-rn1 .dl-racd.dl-rac0{right:calc(100% + var(--s) + 10px)}
}
.dl-bar .dl-rac img{width:100%;height:100%;display:block}
.dl-ui.dl-touch .dl-racb{position:absolute;left:26px;bottom:262px;width:44px;height:44px;min-height:0;padding:0;border-radius:50%;overflow:hidden;background:rgba(8,7,6,.3);box-shadow:0 0 0 1.5px rgba(0,0,0,.6),0 0 0 3px rgba(233,227,214,.22);-webkit-tap-highlight-color:transparent;touch-action:none}
.dl-ui.dl-touch .dl-racb.dl-rac1{bottom:314px}
.dl-touch .dl-racb img{opacity:.9;transform:scale(1.12);width:100%;height:100%;display:block}.dl-touch .dl-racb .dl-cd{font-size:12px}
.dl-touch .dl-racb::before,.dl-touch .dl-racb .dl-gl,.dl-touch .dl-racb .dl-fl{border-radius:50%}
.dl-ui.dl-touch .dl-racb.dl-lit{box-shadow:0 0 0 1.5px #000,0 0 0 3px #f0d68e,0 0 14px rgba(255,210,110,.7)}
@media (orientation:landscape) and (max-height:500px){.dl-ui.dl-touch .dl-racb{left:136px;bottom:124px}.dl-ui.dl-touch .dl-racb.dl-rac1{left:188px;bottom:124px}}
@media (min-width:701px) and (min-height:501px){.dl-ui.dl-touch .dl-racb{bottom:282px}.dl-ui.dl-touch .dl-racb.dl-rac1{bottom:334px}}
.dl-over .dl-rac{opacity:0;visibility:hidden}
/* ---- (30 Oct 2026, Chris: "the action bars and that ui also need to be brought down in like idk maybe 30% so smaller or something? it
   takes up a lot of the screen") a desktop's bars about 30% smaller: wells of 38 px (52 before) and 42 px from 1800 x 1000 (58 before);
   the small bar's buttons (stances, forms), the pet's bar and the corner's buttons (Spellbook, Key bindings, Bind mode, Talents, ?) with
   them; the keys on the buttons stay 12 px, readable. A phone's and a tablet's touch layouts are as they were ---- */
@media (min-width:1100px) and (min-height:501px){
  .dl-ui:not(.dl-touch) .dl-fight{--s:38px;--ms:calc(var(--s) * .85);--ts:calc(var(--s) * 1.5)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-key,.dl-ui:not(.dl-touch) .dl-fight .dl-mini .dl-key{font-size:12px;top:1px;right:2px}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-cd{font-size:16px}
  .dl-ui:not(.dl-touch) .dl-fight .dl-mini{padding:5px;gap:5px}
  .dl-ui:not(.dl-touch) .dl-fight .dl-mini button{width:var(--ms);height:var(--ms)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-micro .dl-ub{width:28px;height:28px}
  .dl-ui:not(.dl-touch) .dl-fight .dl-micro{bottom:calc(100% + 6px)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-pslot{width:30px;height:30px}
  .dl-ui:not(.dl-touch) .dl-fight .dl-mini~.dl-pbar{bottom:calc(var(--row) + var(--ms) + 16px)}
  .dl-ui:not(.dl-touch) .dl-fight:has(.dl-mini~.dl-pbar:not([hidden])){--castb:calc(var(--row) + var(--ms) + 66px)}
}
@media (min-width:1800px) and (min-height:1000px){.dl-ui:not(.dl-touch) .dl-fight{--s:42px}}
/* ---- (30 Oct 2026, Chris: "the insignia of the horde or alliance should be like on its own button i think maybe to the left of the action
   bars with an easier keybind") on a desktop the PvP trinket stands alone left of the bars, half as big again as a well, its bottom on
   the row's, after the race's buttons (duel_keys.js gives it B, its ` kept as its second key). The row behind it is the twelve and
   First Aid again, the third bar and the corner's buttons where they stand without it ---- */
@media (min-width:1100px) and (min-height:501px){
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-aidbar.dl-trkbar,.dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-aidbar.dl-trkbar.dl-racbar{grid-template-columns:repeat(12,var(--s)) var(--s)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-trkbar:not(.dl-aidbar){grid-template-columns:repeat(12,var(--s))}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-trkd{position:absolute;right:calc(100% + 10px);bottom:0;grid-column:auto;grid-row:auto;margin:0;width:var(--ts);height:var(--ts);border-radius:7px}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-rn1 .dl-trkd{right:calc(100% + var(--s) + 16px)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-rn2 .dl-trkd{right:calc(100% + var(--s) * 2 + 20px)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-racd.dl-rac1{right:calc(100% + 6px)}.dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-racd.dl-rac0{right:calc(100% + var(--s) + 10px)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-rn1 .dl-racd.dl-rac0{right:calc(100% + 6px)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-aidbar.dl-trkbar .dl-bar3{right:calc(var(--s) + 8px)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-trkbar:not(.dl-aidbar) .dl-bar3{right:2px}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar.dl-trkbar .dl-micro{left:calc(100% - var(--s) - 2px)}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-trkd .dl-key{font-size:15px;top:3px;right:4px}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-trkd .dl-key.dl-keyp{font-size:44px;top:6px}
  .dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-trkd .dl-cd{font-size:14px}.dl-ui:not(.dl-touch) .dl-fight .dl-bar .dl-racd .dl-cd{font-size:12px}
  .dl-ui:not(.dl-touch) .dl-fight:has(.dl-trkbar) .dl-bind-line{max-width:max(160px,calc(50% - var(--s) * 9.5 - 90px))}
}
/* (30 Oct 2026, the release audit) the 3D view lost (duel_gl.js): its words and Reload in the middle of the dark view where the arena was,
   in the HUD's plate */
.dl-glost{position:absolute;left:50%;top:34%;z-index:30;transform:translate(-50%,-50%);width:min(420px,calc(100% - 32px));box-sizing:border-box;padding:14px 16px;border-radius:6px;text-align:center;
  background:linear-gradient(180deg,rgba(30,26,20,.96),rgba(12,10,8,.96));box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.9),0 10px 28px rgba(0,0,0,.55);color:#e9e3d6;font:400 14px/1.45 'Open Sans',sans-serif}
.dl-glost p{margin:0 0 10px}
.dl-glost button{min-height:40px;padding:0 18px;border:0;border-radius:5px;font:700 14px/1 Cinzel,Georgia,serif;color:#ffd100;background:linear-gradient(#2a241b,#14110d);box-shadow:0 0 0 1px #000,0 0 0 2px #c9a24a;cursor:pointer}
.dl-glost button:hover{color:#fff;box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
/* (30 Oct 2026, the release audit: on a phone the HUD's numbers were 8 and 9 px, the health, the cast bar's spell and the auras' seconds)
   each a size or two up, the bars they sit in a little taller to hold them: health and cast 11 and 10.5 px, an aura's seconds 10 px, the
   level 10 px; the target of target's, the pet's frame and the nameplates' small numbers from 8 and 9 px to 10 */
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:501px),(orientation:landscape) and (max-height:500px){
  .dl-hp{height:16px}.dl-hv,.dl-hpc{font-size:11px}
  .dl-cb .dl-cbar{height:15px}.dl-cn,.dl-ctm{font-size:10.5px}
  .dl-au small{font-size:10px;line-height:10px}.dl-au b{font-size:10px}
  .dl-lvl{font-size:10px}
}
.dl-tot-hp span,.dl-pf-hp span,.dl-np-pet .dl-np-hp span{font-size:10px}
.dl-np-pet .dl-np-hp{height:11px}
.dl-pf-au .dl-au small,.dl-np-db .dl-au small{font-size:10px;line-height:10px}
.dl-np-cb .dl-cn,.dl-np-cb .dl-ctm{font-size:10px}.dl-np-cb .dl-cbar{height:12px}
.dl-tgau b{font-size:10px}
/* (30 Oct 2026, the release audit) the Training Dummy's result has Save picture too: its row of two is a row of three */
.dl-end-dummy .dl-end-row.dl-end-row2{grid-template-columns:repeat(3,minmax(0,1fr))}
/* ---- (31 Oct 2026, players: "Only allowing 18 action bar buttons for spells is not enough. As I mage I want to find nearly every single
   spell I have available", "i need more action bars for hunter/warlocks for pet management") bars 4 and 5 (duel_hud.js deskBar, the sim's
   slots 22 to 33), turned on in Key bindings (Bars 3, 4 or 5): rows over the third bar in its own panel, bar 5 on top, as the game stacks
   its extra action bars over the main bar, a little more room between the bars than between their buttons. The cast bar, the error line
   and the pet's bar step up over them by a row each (a well and its 8 px). A phone has them as pages 3 and 4 of its arc ---- */
.dl-bar3.dl-bx4,.dl-bar3.dl-bx5{row-gap:8px}
.dl-bar3 .dl-r4,.dl-bar3 .dl-r5{position:relative}
.dl-has4 .dl-me-cast{bottom:267px}.dl-has4 .dl-err-line{bottom:307px}.dl-has4 .dl-pbar{bottom:261px}
.dl-has4.dl-haspbar .dl-me-cast{bottom:313px}.dl-has4.dl-haspbar .dl-err-line{bottom:349px}
.dl-has5 .dl-me-cast{bottom:327px}.dl-has5 .dl-err-line{bottom:367px}.dl-has5 .dl-pbar{bottom:321px}
.dl-has5.dl-haspbar .dl-me-cast{bottom:373px}.dl-has5.dl-haspbar .dl-err-line{bottom:409px}
@media (min-width:1100px) and (min-height:501px){
  .dl-ui:not(.dl-touch) .dl-fight.dl-has4{--xr:1}.dl-ui:not(.dl-touch) .dl-fight.dl-has5{--xr:2}
  .dl-ui:not(.dl-touch) .dl-fight.dl-has4,.dl-ui:not(.dl-touch) .dl-fight.dl-has5{--castb:calc(var(--row) + var(--s) + 26px + var(--xr) * (var(--s) + 8px))}
  .dl-ui:not(.dl-touch) .dl-fight.dl-has4:has(.dl-mini~.dl-pbar:not([hidden])),.dl-ui:not(.dl-touch) .dl-fight.dl-has5:has(.dl-mini~.dl-pbar:not([hidden])){--castb:max(calc(var(--row) + var(--ms) + 66px),calc(var(--row) + var(--s) + 26px + var(--xr) * (var(--s) + 8px)))}
}
/* (a phone's arc: page 4, bar 5) */
.dl-touch .dl-arc[data-page='4'] .dl-pg4{display:block}