/* assets/duel/duel-talents.css: your talents before a duel (duel_talents.js; owner: the talents lane), 29 Oct 2026. */
/* (30 Oct 2026, Chris: "the talents spec page itself doesn't feel like the real talentsforever spec buttons, it should feel like a replica
   from the real site") The calculator itself, under .dt: each rule below is index.html's own (its :root colours, .status, .trees, .tree,
   .thead, .tbody, .grid, .arrows, .talent and .rk, body.done, .tip, .ghost and .un, .yrow .btn and #cmp) or the polish layer's (lab/lab.css
   .lab-gate, .lab-ttabs, the phone's tree head, the press), copied with its values and renamed, so the trees read as the site's and the
   164 KB site.css is not loaded. What the duel adds: a talent the duel does not read yet greyed and hatched (dt-no, dt-pt), the window's
   frame (the duel's warm black under one gold line), and Done in the site's own accented button (#cmp: gold words on a dark warm face in a
   gold line), never a red or a gold slab (pick-no-red-yellow-buttons). */
.dt{--panel:#1e1e1e;--panel2:#262626;--line:#3a3a3a;--ink:#e8e8e8;--ink2:#bdbdbd;--muted:#8a8a8a;--gold:#ffd100;--gold2:#c89b1a;--green:#1eff00;--green2:#4fbf3a;--blue:#58a6ff;--red:#ff4d4d;--tip-line:#5a4a1e;
  position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding:12px;box-sizing:border-box;background:rgba(4,3,2,.72);pointer-events:auto;
  color:var(--ink);font:400 14px/1.4 "Open Sans",system-ui,"Segoe UI",Arial,sans-serif;text-align:left}
.dt *,.dt *::before,.dt *::after{box-sizing:border-box}
/* (the duel's own rules for a bare button, h3, i and b, .dl-ui button with its 44 px and Cinzel above all, are put back to the page's) */
.dt button{font:inherit;color:inherit;background:none;border:0;border-radius:0;box-shadow:none;min-height:0;padding:0;margin:0;letter-spacing:normal;text-transform:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.dt button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dt h3{margin:0;font:inherit;letter-spacing:normal;text-transform:none}
.dt i{font-style:normal}
/* the Halloween dress the calculator wears while it is on (lab/halloween.css html.hw-on: the panels and the tree heads in dusk purple) */
html.hw-on .dt{--panel:#1c1722;--panel2:#241d2c;--line:#3b3046}
html.hw-on .dt .dt-th{background-color:#31293a}
.dt-box{position:relative;width:min(100%,1180px);max-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#6b5a2a rgba(0,0,0,.25);border-radius:4px;background:var(--panel);
  box-shadow:0 0 0 1px #000,0 0 0 2px rgba(232,192,98,.32),0 14px 36px rgba(0,0,0,.65);
  /* a row of the tree: the calculator's 64 px wherever the window has the height, less on a short screen so the whole window fits (1280 x 720) */
  --dtr:clamp(50px,calc((100vh - 312px) / 7),64px)}
.dt-wait{margin:30px 0;text-align:center;color:var(--ink2)}

/* ---- the status bar (index.html .status) ---- */
.dt-st{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:10px 12px;background:var(--panel);border-radius:4px 4px 0 0}
.dt-st strong{font-size:16px;font-weight:700}
.dt-who{font-size:13px;font-weight:600;white-space:nowrap}
.dt .dt-sr{margin-right:auto;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;color:var(--ink2);background:#333;box-shadow:inset 0 0 0 1px #444;white-space:nowrap}
.dt .dt-sr:hover{color:#fff;background:#3f3f3f;box-shadow:inset 0 0 0 1px var(--gold2)}.dt .dt-sr:disabled{opacity:.45;cursor:default}
.dt-ro-tag{margin-right:auto;font-size:12px;color:var(--muted)}
.dt-st .r{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 14px;min-width:0;color:var(--ink2);font-variant-numeric:tabular-nums}
.dt-st .r b{font-weight:700}.dt-st .dt-split{color:var(--blue)}.dt-st .dt-left b{color:var(--green2)}.dt-st .lvl{color:var(--muted)}.dt-st .lvl b{color:var(--ink2);font-weight:600}
.dt .dt-x{flex:none;width:30px;height:30px;margin:-4px -4px -4px 0;border-radius:4px;color:#aaa;font-size:22px;line-height:1}
.dt .dt-x:hover{color:#fff;background:#333}

/* ---- the trees (index.html .trees, .tree, .thead, .tbody, .grid) ---- */
.dt-trees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 6px 6px;background:var(--panel)}
.dt-tree{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:4px;background:var(--panel2)}
html.hw-on .dt-tree{box-shadow:0 0 0 1px rgba(122,75,179,.35),0 -1px 0 rgba(255,138,31,.45)}
.dt-th{--fill:0%;position:relative;display:flex;align-items:center;gap:8px;padding:8px 10px;background:#333}
.dt-th::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--fill);background:linear-gradient(90deg,var(--gold2),var(--gold));box-shadow:0 0 8px rgba(255,209,0,.35);transition:width .3s ease}
.dt-th.lead::after{background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 70%,#000),var(--cc));box-shadow:0 0 8px color-mix(in srgb,var(--cc) 45%,transparent)}
.dt-th img{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid #4fc3f7;box-shadow:0 0 0 1px #000}
.dt-th .n{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;font-size:15px;font-weight:700;line-height:1.15}
.dt-th .nr{font-size:10px;font-weight:400;color:var(--muted);letter-spacing:.04em}
.dt-th .c{color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}.dt-th .c b{color:#fff}
.dt-th.spent .c b{color:var(--gold)}.dt-th.lead .c b{color:var(--cc)}
.dt .dt-th .tr{opacity:.55;padding:2px 4px;border-radius:3px;font-size:15px;line-height:1}
.dt .dt-th .tr:hover{opacity:1;background:#444}.dt .dt-th .tr:disabled{opacity:.25;cursor:default;background:none}
.dt-body{position:relative;flex:1;padding:14px 8px 16px;background:#111 center/cover no-repeat}
.dt-body::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.65));pointer-events:none}
.dt-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:4px 0}
/* the row gates at the right (lab/lab.css .lab-gate): what each row needs, gold once open, the next one as points / need */
.dt-gates{position:absolute;inset:0;pointer-events:none}
.dt-gate{position:absolute;left:-2px;right:-2px;height:0;margin-top:-2px;border-top:1px dashed rgba(255,255,255,.05)}
.dt-gate i{position:absolute;right:0;top:-7px;display:block;padding:0 4px;border-radius:3px;font-size:10px;font-weight:700;line-height:13px;color:#8d8d8d;background:rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.dt-gate.open{border-top-color:rgba(255,215,94,.12)}.dt-gate.open i{color:#c9a94a}
.dt-gate.next{border-top-color:rgba(255,255,255,.13)}.dt-gate.next i{color:#fff;box-shadow:0 0 0 1px #4a4a4a}
/* the arrows (index.html .arrows) */
.dt-arr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.dt-arr line,.dt-arr polyline{stroke:#c9c9c9;stroke-width:2;fill:none;opacity:.55}
.dt-arr .on{stroke:var(--gold);opacity:1}.dt-arr marker path{fill:#c9c9c9}.dt-arr marker.on path{fill:var(--gold)}

/* ---- a talent (index.html .talent and .rk; its press, lab/lab.css lab-on-press) ---- */
.dt .dt-tal{position:relative;z-index:1;display:block;align-self:start;width:44px;height:44px;margin:4px auto 0;padding:0;border-radius:5px;background:#000;cursor:pointer;user-select:none;
  box-shadow:0 0 0 1px #000,0 0 0 2px #6b6b6b;transition:transform .09s cubic-bezier(.2,.7,.2,1)}
.dt .dt-tal:active{transform:scale(.94)}
.dt .dt-tal img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;border-radius:5px;object-fit:cover;color:transparent}
.dt .dt-tal.dt-locked img{filter:grayscale(1) brightness(.55)}
.dt .dt-tal.dt-avail,.dt .dt-tal.dt-partial{box-shadow:0 0 0 1px #000,0 0 0 2px var(--green2)}
.dt .dt-tal.dt-maxed{box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold)}
.dt .dt-tal:hover{box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
.dt .dt-tal.dt-sel{box-shadow:0 0 0 1px #000,0 0 0 2px #fff,0 0 16px rgba(255,255,255,.4)}
.dt .dt-tal:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dt-rk{position:absolute;z-index:2;right:-8px;bottom:-8px;min-width:26px;height:17px;padding:0 4px;border:1px solid #444;border-radius:3px;background:#000;color:#8a8a8a;font-size:11px;font-weight:400;line-height:15px;text-align:center;font-variant-numeric:tabular-nums}
.dt-avail .dt-rk{color:#e8e8e8}.dt-partial .dt-rk{color:var(--green);border-color:#2a5a1a}.dt-maxed .dt-rk{color:var(--gold);border-color:#6a5510;font-weight:700}
/* every point spent: the talents not taken go quiet so the build is all you see (index.html body.done) */
.dt-done .dt-tal.dt-avail{box-shadow:0 0 0 1px #000,0 0 0 2px #6b6b6b}
.dt-done .dt-tal.dt-avail img{filter:grayscale(1) brightness(.55)}
.dt-done .dt-tal.dt-avail .dt-rk,.dt-done .dt-tal.dt-locked .dt-rk{display:none}
.dt-done .dt-tal.dt-avail:hover,.dt-done .dt-tal.dt-locked:hover{box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
/* not in the duel yet: greyed and hatched, its rank still in its colour (a point in it is a real point of the build, it just does nothing here) */
.dt .dt-tal.dt-no img{filter:grayscale(1) brightness(.5) contrast(.85)}
.dt-tal.dt-no::after{content:"";position:absolute;inset:0;border-radius:5px;background:repeating-linear-gradient(135deg,rgba(0,0,0,0) 0 5px,rgba(0,0,0,.45) 5px 8px);pointer-events:none}
/* (30 Oct 2026, talents round review) partly in the duel: a part of its text is not read yet, a half hatch in the corner (sim.js TAL_PART) */
.dt-tal.dt-pt::after{content:"";position:absolute;right:0;top:0;width:45%;height:45%;border-radius:0 5px 0 0;background:repeating-linear-gradient(135deg,rgba(0,0,0,0) 0 4px,rgba(0,0,0,.55) 4px 7px);pointer-events:none}
/* in a fight the trees are to read: no green for a point you could add */
.dt-read .dt-tal.dt-avail{box-shadow:0 0 0 1px #000,0 0 0 2px #6b6b6b}.dt-read .dt-avail .dt-rk{color:#8a8a8a}.dt-read .dt-tal{cursor:default}
/* a touch screen: the rank a little bigger, and the minus on the talent you just tapped takes a point back (index.html .un, hover:none) */
.dt-un{display:none;position:absolute;z-index:3;left:-19px;top:-19px;width:32px;height:32px;border-radius:50%;border:1px solid #000;font-size:0;
  background:radial-gradient(circle at 35% 30%,#6e5a2e,#2e2410 62%,#1a1408);box-shadow:0 0 0 1px #b8963f,0 0 8px rgba(214,178,94,.35),0 3px 7px rgba(0,0,0,.7);animation:dtunin .16s ease-out}
.dt-un::before{content:"";position:absolute;inset:-10px 0 0 -10px}
.dt-un::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:#fff3d6;box-shadow:0 0 4px rgba(255,225,160,.7)}
.dt-un:active{transform:scale(.86);filter:brightness(1.35)}
@keyframes dtunin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.dt-touch .dt-tal.dt-sel.dt-partial .dt-un,.dt-touch .dt-tal.dt-sel.dt-maxed .dt-un{display:block}
.dt-touch .dt-rk{min-width:30px;height:20px;right:-9px;bottom:-9px;font-size:12px;line-height:18px}

/* ---- the tooltips: with a mouse the calculator's .tip, on a touch screen its .ghost ---- */
.dt-tip{position:fixed;z-index:1001;pointer-events:none}
.dt-tip[hidden]{display:none}
.dt-tip.tip{width:340px;max-width:calc(100vw - 16px);padding:10px 12px;border:1px solid var(--tip-line);border-radius:6px;background:rgba(10,10,12,.84);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  color:#e8e8e8;font-size:13px;line-height:1.38;box-shadow:inset 0 1px 0 rgba(255,215,94,.45),0 12px 34px rgba(0,0,0,.75)}
.dt-tip.up::after,.dt-tip.dn::after{content:"";position:absolute;left:var(--ax,50%);width:9px;height:9px;margin-left:-5px;transform:rotate(45deg);background:#0b0b0d;border:1px solid var(--tip-line)}
.dt-tip.up::after{bottom:-6px;border-width:0 1px 1px 0}.dt-tip.dn::after{top:-6px;border-width:1px 0 0 1px}
.dt-tip .hd{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #2c2618}
.dt-tip .hd img{flex:none;width:34px;height:34px;border-radius:5px;border:1px solid #6b5a2a;box-shadow:0 0 0 1px #000}
.dt-tip .n{font-family:Cinzel,Georgia,serif;font-size:15px;font-weight:700;letter-spacing:.02em;line-height:1.15;color:#ffd75e;text-shadow:0 1px 0 #5a4210}
.dt-tip .pips{margin-right:4px;font-size:11px;letter-spacing:3px;color:var(--gold)}.dt-tip .pips i{color:#4a4a4a}
.dt-tip .r{margin-top:2px;color:#9a9a9a;font-size:12px}
.dt-tip .d{margin-top:3px;color:var(--gold);white-space:pre-line}.dt-tip .d ins{text-decoration:none;color:#fff;font-weight:600}
.dt-tip .est{margin-top:4px;color:#d8c58a;font-style:italic;font-size:12px}
.dt-tip .next{margin-top:11px;color:#bdbdbd;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.dt-tip .req{margin-top:10px;color:var(--red)}
.dt-tip .cta{margin-top:11px;color:var(--green)}.dt-tip .cta small{margin-left:8px;color:#777;font-size:12px}.dt-tip .cta.no{color:#999}
.dt-tip.ghost{width:min(340px,calc(100vw - 16px));padding:9px 12px 10px;border:1px solid rgba(255,215,94,.38);border-radius:10px;background:rgba(10,10,14,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#e8e8e8;font-size:13.5px;line-height:1.35;box-shadow:0 8px 28px rgba(0,0,0,.55);animation:dtghin .14s ease-out}
.dt-tip.ghost::after{content:"";position:absolute;left:var(--ax,50%);bottom:-7px;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);background:rgba(10,10,14,.9);border:1px solid rgba(255,215,94,.38);border-width:0 1px 1px 0}
.dt-tip.ghost.below::after{top:-7px;bottom:auto;border-width:1px 0 0 1px}
@keyframes dtghin{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
.dt-tip .gn{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15px;font-weight:600}
.dt-tip .gn span{color:#bbb;font-size:12px;font-weight:400;white-space:nowrap}.dt-tip .gn span b{color:var(--green2)}
.dt-tip .gm{margin-top:2px;color:#ddd;font-size:12px}
.dt-tip .gd{margin-top:3px;color:var(--gold);white-space:pre-line}
.dt-tip .gx{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;margin-top:5px;color:#ddd}.dt-tip .gx .lab{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#888}
.dt-tip .gx s{color:#999;text-decoration-color:#777}.dt-tip .gx b{margin-left:5px;color:var(--gold)}.dt-tip .gx b::before{content:"\2192  ";color:#777;font-weight:400}
.dt-tip .ge{margin-top:3px;color:#c9b98a;font-style:italic;font-size:11.5px}.dt-tip .gr{margin-top:4px;color:var(--red);font-size:12.5px}

/* ---- under the trees: the words, the site's picks and the buttons (index.html .yrow, .ylab, .yrow .btn; #cmp for Done) ---- */
.dt-notes{padding:7px 12px 0;background:var(--panel);border-top:1px solid var(--line)}
.dt-side{padding:6px 12px 10px;background:var(--panel);border-radius:0 0 4px 4px}
.dt-note{margin:0 0 6px;padding-left:8px;border-left:2px solid var(--gold2);font-size:12px;line-height:1.4;color:var(--ink2)}
.dt-drop{border-left-color:#b04a3a}
.dt-msg{margin:0 0 6px;color:var(--gold);font-size:13px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.dt-sum{margin:0;color:var(--muted);font-size:12px;line-height:1.35}
.dt-ro{margin:6px 0 0;color:var(--muted);font-size:12.5px}
.dt-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.dt-ygrp{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dt .ylab{flex:none;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dt .dt-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:30px;padding:6px 12px;border-radius:4px;background:#3a3a3a;color:#fff;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap}
.dt .dt-b:hover{background:#4a4a4a}.dt .dt-b:disabled{opacity:.4;cursor:default;background:#3a3a3a}
/* a pick: its name and its points by tree, as the calculator's Popular builds list writes them (.poptop .pts) */
.dt .dt-pick .pts{display:inline-flex;align-items:center;gap:2px 5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.dt .dt-pick .pts img{width:16px;height:16px;border-radius:3px;border:1px solid #000}.dt .dt-pick .pts i{color:var(--muted);font-weight:400}
.dt .dt-pick b{font-weight:600}
.dt .dt-pick.on{box-shadow:inset 0 0 0 1px var(--gold2)}
/* Done: the site's own accented button (#cmp, #prBtn) */
.dt .dt-b.dt-ok{margin-left:auto;padding:6px 22px;background:#2e2a1f;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold2)}
.dt .dt-b.dt-ok:hover{background:#3a3323;box-shadow:inset 0 0 0 1px var(--gold)}
.dt .dt-paste .dt-ok{margin-left:0}
.dt-paste{display:flex;gap:8px;margin-top:8px}
.dt .dt-in{flex:1;min-width:0;min-height:30px;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:#111;color:#ddd;font:400 13px/1.3 "Open Sans",sans-serif}
.dt .dt-in:focus{outline:none;border-color:var(--gold2)}
.dt-tabs{display:none}
/* (30 Oct 2026, Chris: "you can scroll up & down to see more of it") a window taller than the screen scrolls inside itself, the wheel, a
   swipe or its slim gold scrollbar, while the status bar with Close stays at its top and the picks and Done at its foot */
.dt-top{position:sticky;top:0;z-index:5;background:var(--panel)}
.dt-foot{position:sticky;bottom:0;z-index:5;background:var(--panel)}
.dt-box::-webkit-scrollbar{width:8px}.dt-box::-webkit-scrollbar-track{background:rgba(0,0,0,.25)}
.dt-box::-webkit-scrollbar-thumb{border-radius:4px;background:#6b5a2a;border:2px solid transparent;background-clip:padding-box}.dt-box::-webkit-scrollbar-thumb:hover{background-color:#c89b1a}

/* the Talents button among Spellbook and Key bindings on the Fighters screen takes their own look (duel-select.css .dx-bdo) */
.dt-open .dx-bdo-i img{object-fit:cover}
.dt-open .dt-open-n{font:600 12px/1 'Open Sans',sans-serif;font-style:normal;color:#1eff00;font-variant-numeric:tabular-nums;white-space:nowrap}
/* (a phone or a phone on its side: the Fighters screen keeps one row of buttons by the bars, so Enter Arena stays above the fold; Talents is its
   picture there beside the Spellbook, its name in its label) */
@media (max-width:900px) and (orientation:portrait),(max-width:700px),(orientation:landscape) and (max-width:900px){
  .dx-cs-bars .dx-bars-do:has(.dt-open){grid-template-columns:minmax(0,1fr) auto}
  .dl-ui .dx-cs-bars .dt-open{padding:2px;gap:0}.dx-cs-bars .dt-open .dx-bdo-t{display:none}
  .dx-cs-bars .dx-bars-do:has(.dt-open){gap:4px;grid-template-columns:minmax(0,1fr) 36px}
  .dl-ui .dx-cs-bars .dt-open{justify-content:center}.dx-cs-bars .dt-open .dx-bdo-i{width:28px;height:28px}
  .dl-ui .dx-cs-bars .dx-bars-do:has(.dt-open) .dx-bdo:not(.dt-open){padding-right:5px;gap:5px}
  .dx-cs-bars .dx-bars-do:has(.dt-open) .dx-bdo-t b{font-size:12px;letter-spacing:.01em}
}

/* in a fight: the window to read your build, docked at the left as the Spellbook is, the fight going on beside it */
.dl-on-fight .dt{position:absolute;z-index:60;inset:auto auto auto 12px;top:72px;width:min(1000px,calc(100% - 24px));max-height:calc(100% - 200px);padding:0;background:none;place-items:start}
.dl-on-fight .dt .dt-box{--dtr:clamp(42px,calc((100svh - 440px) / 7),60px);max-height:calc(100svh - 220px)}
/* (in a fight the docked window is shorter: on a screen under 900 px tall the talents take 36 px, so a rank badge never sits on the talent
   under it and the window keeps its foot in view at 1280 x 720) */
@media (max-height:900px){.dl-on-fight .dt .dt-tal{width:36px;height:36px;margin-top:2px}.dl-on-fight .dt .dt-body{padding:8px 8px 10px}.dl-on-fight .dt .dt-sum{display:none}.dl-on-fight .dt .dt-notes{padding-top:0;border-top:0}}

/* ---- a phone or a narrow window: a sheet over the whole screen, one tree at a time with the three as tabs (lab/lab.css .lab-ttabs and
   the phone's tree head); the status bar and the tabs stay at its top and the buttons at its foot while the tree scrolls between ---- */
@media (max-width:700px),(pointer:coarse) and (max-width:900px){
  .dt{padding:0;place-items:stretch}
  .dt-box{display:flex;flex-direction:column;width:100%;height:100%;max-height:none;border-radius:0;box-shadow:none;--dtr:64px}
  .dt-box>*{flex:none}
  /* (30 Oct 2026, the final QA: at 390 x 844 the sticky buttons and the yellow note over them covered the end of "...the greyed ones are not
     in it yet") the words under the tree and the buttons stay at the foot as one block, so the tree scrolls behind both */
  .dt-foot{display:block;position:sticky;bottom:0;z-index:5;margin-top:auto;box-shadow:0 -8px 14px rgba(0,0,0,.45)}
  .dt-foot:has(.dt-side>.dt-ro:only-child){position:static;box-shadow:none}
  .dt-top{position:sticky;top:0;z-index:5;box-shadow:0 6px 14px rgba(0,0,0,.5)}
  .dt-st{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:4px 10px;border-radius:0;padding:8px 10px 6px}
  .dt-st strong{grid-column:1;grid-row:1}
  .dt-who{grid-column:2 / 4;grid-row:1;overflow:hidden;text-overflow:ellipsis}
  .dt .dt-x{grid-column:4;grid-row:1;width:40px;height:40px;margin:-8px -6px -8px 0;font-size:26px}
  .dt .dt-sr,.dt-ro-tag{grid-column:1 / 3;grid-row:2;margin-right:0;justify-self:start}
  .dt-st .r{grid-column:3 / -1;grid-row:2;align-self:center}
  .dt-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:0 6px 6px}
  .dt .dt-tabs button{display:flex;align-items:center;gap:6px;min-width:0;min-height:40px;padding:5px 8px;border-radius:5px;background:#2a2a2a;box-shadow:inset 0 0 0 1px #333;color:var(--ink2);font-size:13px;font-weight:600}
  .dt-tabs img{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid #000}
  .dt-tabs .dt-tn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
  .dt-tabs b{flex:none;color:#fff;font-variant-numeric:tabular-nums}
  .dt .dt-tabs button.spent b{color:var(--gold)}
  .dt .dt-tabs button.on{background:#4a4229;color:#fff;box-shadow:inset 0 0 0 1px var(--gold)}
  .dt-trees{grid-template-columns:1fr;padding-top:6px}
  .dt-tree{display:none}.dt-tree.dt-on{display:flex}
  .dt-th{padding:4px 10px;gap:8px}.dt-th>img{display:none}.dt-th .n{font-size:0;flex-direction:row}.dt-th .n .nr{font-size:11.5px}
  .dt-side{border-radius:0;padding:8px 10px calc(10px + env(safe-area-inset-bottom))}
  .dt-note{font-size:11.5px;margin-bottom:4px}
  .dt-notes{padding:8px 10px 10px}
  .dt-acts{flex-wrap:nowrap;flex-direction:column;align-items:stretch;gap:6px}
  /* the picks in one row that slides sideways, the buttons as one row of four */
  .dt-site{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -10px;padding:0 10px}.dt-site::-webkit-scrollbar{display:none}
  .dt-site .ylab{display:none}
  .dt-acts>.dt-ygrp:not(.dt-site){display:contents}
  .dt-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .dt-acts>.dt-site{grid-column:1 / -1}
  .dt .dt-b{min-height:44px;padding:6px 6px;white-space:normal;text-align:center;line-height:1.15}
  .dt .dt-pick{flex:none;white-space:nowrap}
  .dt .dt-b.dt-ok{margin-left:0;padding:6px}
  .dt-paste .dt-in{min-height:44px;font-size:16px}
  .dl-on-fight .dt{position:fixed;inset:0;top:0;width:auto;max-height:none;z-index:1000}
}
/* (30 Oct 2026, the final QA: "Protection" read "Protecti..." on its tab at 390) on a phone the tab's icon and its points share the top line
   and the tree's name has the tab's whole width under them, as the site's phone tabs give it */
@media (max-width:480px){
  .dt .dt-tabs button{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i b" "n n";gap:2px 6px;padding:5px 7px 4px}
  .dt-tabs img{grid-area:i}.dt-tabs b{grid-area:b;text-align:right}
  .dt-tabs .dt-tn{grid-area:n;font-size:11.5px;line-height:1.2}
}
/* (30 Oct 2026, the final QA: Reset build at 98 x 25 and a tree's row reset at 20 x 19 under the 44 px a finger needs) on a touch screen
   each takes a 44 px hit area around it, its look unchanged (the row reset's reaches down over the tree's top, where no talent sits, as the
   tree clips it above and at the right) */
@media (pointer:coarse){
  .dt .dt-sr,.dt .dt-th .tr{position:relative}
  .dt .dt-sr::before{content:"";position:absolute;inset:-13px -4px -6px}
  .dt .dt-th .tr{z-index:2}.dt .dt-th .tr::before{content:"";position:absolute;inset:-6px -10px -22px -14px}
}
@media (max-width:400px){.dt-st .lvl{display:none}}
@media (max-width:360px){.dt .dt-tabs button{padding:5px 5px;gap:4px;font-size:12px}.dt-tabs img{width:20px;height:20px}}
/* a phone on its side: the tree on the left, the words and the buttons (dt-side) beside it, kept in view while the tree scrolls; the
   status bar and tabs across the top */
@media (pointer:coarse) and (max-height:500px) and (orientation:landscape){
  .dt-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;--dtr:48px}
  .dt-top{grid-column:1 / -1}
  .dt-st .r{flex-basis:auto;order:0;margin-left:auto}
  .dt-st{display:flex}
  .dt-trees{grid-column:1;grid-row:2}
  .dt-foot{display:flex;flex-direction:column-reverse;grid-column:2;grid-row:2;align-self:start;position:sticky;top:var(--dt-top,96px);bottom:auto;margin-top:0;box-shadow:none;background:var(--panel)}
  .dt-side{position:static;border-top:0;box-shadow:none}
  .dt-notes{margin-top:0;border-top:0;padding-top:0}
  .dt .dt-tal{width:40px;height:40px;margin-top:2px}
  .dt-body{padding:8px 6px 10px}
}
@media (prefers-reduced-motion:reduce){.dt *,.dt-tip{transition:none!important;animation:none!important}}