/* Deck builder. One sheet, written once (Oct 4): the page is a tool, so the cards and the deck
   own the screen. Cards add with a tap and say how many copies the deck holds; the deck reads as
   card strips with the domain on the edge; the Legend's domains set the filters. */
body:has(.db-app){--db-border:color-mix(in srgb,var(--soft) 65%,transparent);--db-surface:color-mix(in srgb,var(--bg2) 97%,transparent);--db-bad:#f08a7e;--db-warn:#e7bc7f}
:root[data-theme=light] body:has(.db-app){--db-bad:#b4372a;--db-warn:#8a5a00}
body:has(.db-app) main{width:auto;max-width:1680px;margin:auto;padding:0 32px}
body:has(.db-app) .breadcrumbs{display:none}
.db-app{position:relative;isolation:isolate;padding-bottom:36px}
.db-about{max-width:76ch;margin:12px 0 40px;padding-top:24px;border-top:1px solid var(--db-border);font:16px/1.6 var(--body)}
.db-about h2{margin:0 0 12px;font:700 28px/1.05 var(--head);text-transform:uppercase}.db-about p{margin:0 0 12px}.db-about .fine{font-size:14px;color:var(--muted)}
.db-app button,.db-dialog button{font-family:var(--body);cursor:pointer}
:is(.db-app,.db-dialog) [data-domain-1=Fury]{--d1:var(--fury);--d2:var(--fury)}:is(.db-app,.db-dialog) [data-domain-1=Calm]{--d1:var(--calm);--d2:var(--calm)}:is(.db-app,.db-dialog) [data-domain-1=Mind]{--d1:var(--mind);--d2:var(--mind)}:is(.db-app,.db-dialog) [data-domain-1=Body]{--d1:var(--body-color);--d2:var(--body-color)}:is(.db-app,.db-dialog) [data-domain-1=Chaos]{--d1:var(--chaos);--d2:var(--chaos)}:is(.db-app,.db-dialog) [data-domain-1=Order]{--d1:var(--order);--d2:var(--order)}
:is(.db-app,.db-dialog) [data-domain-2=Fury]{--d2:var(--fury)}:is(.db-app,.db-dialog) [data-domain-2=Calm]{--d2:var(--calm)}:is(.db-app,.db-dialog) [data-domain-2=Mind]{--d2:var(--mind)}:is(.db-app,.db-dialog) [data-domain-2=Body]{--d2:var(--body-color)}:is(.db-app,.db-dialog) [data-domain-2=Chaos]{--d2:var(--chaos)}:is(.db-app,.db-dialog) [data-domain-2=Order]{--d2:var(--order)}
:is(.db-app,.db-dialog) [data-domain=Fury]{--dc:var(--fury)}:is(.db-app,.db-dialog) [data-domain=Calm]{--dc:var(--calm)}:is(.db-app,.db-dialog) [data-domain=Mind]{--dc:var(--mind)}:is(.db-app,.db-dialog) [data-domain=Body]{--dc:var(--body-color)}:is(.db-app,.db-dialog) [data-domain=Chaos]{--dc:var(--chaos)}:is(.db-app,.db-dialog) [data-domain=Order]{--dc:var(--order)}
[hidden]{display:none!important}
html:has(.db-app[data-mode=builder]){scroll-padding-top:150px}
.db-import-apply{position:sticky;bottom:-22px;margin:16px -24px -22px;padding:4px 24px 22px;background:var(--bg2);border-top:1px solid var(--soft)}

/* Head: back link, the deck's title, its actions, then Cards & deck and Stats. */
.db-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--db-border);font:14px/1.5 var(--body);color:var(--muted)}
.db-topline>span{display:none}
.db-topline button,.db-topline a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);background:none;border:0;padding:0;font:inherit}
.db-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0 14px}
.db-heading{min-width:0;flex:1 1 auto}
.db-heading .eyebrow{font-size:13px;line-height:1.5;letter-spacing:0;margin:0}
.db-heading h1{font:700 38px/1 var(--head);text-transform:uppercase;letter-spacing:-.4px;margin:4px 0 8px}
#db-title{display:flex;align-items:baseline;min-width:0}#db-title .db-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:.06em}#db-title .heading-slash{flex:none}
.db-status{margin:0;font:14px/1.5 var(--body);color:var(--muted)}
.db-toolbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.db-toolbar-actions .button{min-height:44px;padding:10px 16px;font:600 14px/1.3 var(--body);text-transform:none;white-space:nowrap;border-color:var(--db-border)}
.db-toolbar-actions .primary{border-color:transparent}
.db-app:not([data-empty]) .db-empty-only{display:none}.db-app[data-empty] .db-toolbar-actions>:not(.db-empty-only){display:none}
.db-playing[aria-pressed=true]{border-color:var(--ac);background:var(--ac-soft);color:var(--ac)}
.db-more{position:relative}
.db-more>summary{list-style:none;cursor:pointer}.db-more>summary::-webkit-details-marker{display:none}
.db-more>div{position:absolute;right:0;top:calc(100% + 6px);z-index:40;display:grid;gap:8px;min-width:230px;padding:10px;background:var(--bg2);border:1px solid var(--soft);box-shadow:0 10px 28px #0006}
.db-toolbar-actions .db-more{margin:0;display:flex}.db-toolbar-actions .db-more>summary{display:flex;align-items:center;justify-content:center;width:100%}
/* Saving: signed-in players choose who can see the deck and save it to their account. Saving on
   this device is for signed-out visitors (html[data-player=in] is set before first paint). */
html[data-player=in] .db-app .db-device-only,html:not([data-player=in]) .db-app .db-account-only{display:none}
.db-visibility{display:inline-flex;border:1px solid var(--db-border);background:var(--bg)}
.db-visibility button{min-height:44px;padding:0 14px;border:0;background:none;color:var(--muted);font:600 14px var(--body);cursor:pointer}
.db-visibility button+button{border-left:1px solid var(--db-border)}
/* One segmented look (D-23): the choice is filled ink, as on the deck page and in Menu's theme switch. */
.db-visibility button[aria-checked=true]{color:var(--ac-ink);background:var(--ac)}
.db-visibility button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* Messages float over the page on every screen size, so a status never moves the workspace.
   The box keeps one size and fades; screen readers still hear each new message. */
.db-toast{position:fixed;z-index:31;left:50%;right:auto;bottom:24px;transform:translate(-50%,0);width:min(560px,calc(100vw - 24px));min-height:0;margin:0;padding:12px 16px;background:var(--bg2);border:1px solid var(--ac);color:var(--ink);box-shadow:0 8px 24px #0009;font:14px/1.45 var(--body);transition:opacity .2s,transform .2s;cursor:pointer}
.db-toast:not([data-fresh]),.db-toast:empty{display:block;opacity:0;pointer-events:none;transform:translate(-50%,8px)}

/* The workspace: cards on the left, the deck on the right, both on the near-solid surface so
   the page light stays around them. */
.db-workspace{display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,31vw,470px);align-items:start;border:1px solid var(--db-border);background:color-mix(in srgb,var(--bg) 95%,transparent)}
.db-discovery{min-width:0;border-right:1px solid var(--db-border)}
.db-app:not(.db-has-atmosphere) .domain-light{opacity:0}
@media(min-width:901px){.db-app[data-mode=builder] .db-workspace{min-height:100vh}.db-workspace:not([data-reader])>.db-deck{position:sticky;top:var(--top-bar,0px);max-height:calc(100dvh - var(--top-bar,0px));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}}

/* Search head: stays at the top while the cards scroll. */
.db-search-head{position:sticky;top:var(--top-bar,0px);z-index:12;padding:16px 20px 12px;background:var(--bg2);border-bottom:1px solid var(--db-border)}
.db-searchrow{display:flex;gap:8px}
.db-searchbox{flex:1;display:flex;align-items:center;gap:10px;min-width:0;height:46px;padding:0 13px;border:1px solid var(--soft);background:var(--bg)}
.db-searchbox:focus-within{outline:2px solid var(--ac);outline-offset:2px}
.db-searchbox svg{flex:none;color:var(--muted)}
.db-searchbox input{width:100%;min-width:0;height:100%;border:0;background:none;color:var(--ink);font:16px var(--body)}
.db-searchbox input:focus,.db-searchbox input:focus-visible{outline:none}
.db-searchbox kbd{border:1px solid var(--soft);border-radius:3px;padding:0 5px;font:13px var(--mono);color:var(--muted)}
.db-view{display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:0 14px;border:1px solid var(--soft);background:var(--bg);color:var(--ink);font:500 14px var(--body)}
.db-view:hover{border-color:var(--ink)}
.db-types{flex-wrap:wrap;display:flex;gap:4px;padding:10px 0 0}
.db-types::-webkit-scrollbar{display:none}
.db-types button{flex:none;min-height:40px;padding:0 12px;border:1px solid transparent;background:none;color:var(--muted);font:500 14px var(--body);white-space:nowrap}
.db-types button:hover{color:var(--ink)}
.db-types button[aria-pressed=true]{color:var(--ink);background:var(--bg3);border-color:var(--db-border);box-shadow:inset 0 -2px var(--ink)}
/* Chips: the Legend's domains lead and start on; energy is one tap; Owned for signed-in players. */
.db-chips{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding-top:10px;overflow-x:auto;scrollbar-width:none}
.db-chips:not([data-ready]){visibility:hidden}
.db-chips:not([data-end]){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.db-chips::-webkit-scrollbar{display:none}
.db-chips button{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 11px;border:1px solid var(--db-border);border-radius:999px;background:none;color:var(--muted);font:500 13px var(--body);white-space:nowrap}
.db-chips button:hover{color:var(--ink);border-color:var(--soft)}
.db-chips button[aria-pressed=true]{color:var(--ink);background:var(--bg3);border-color:var(--soft)}
.db-domain-chips,.db-energy-chips{display:flex;gap:6px;flex:none}
.db-domain-chips i{width:9px;height:9px;border-radius:50%;background:var(--dc);opacity:.45}
.db-domain-chips [aria-pressed=true] i{opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--dc) 25%,transparent)}
.db-domain-chips [aria-pressed=true]{border-color:color-mix(in srgb,var(--dc) 60%,var(--soft))}
.db-domain-chips [data-outside]:not([aria-pressed=true]){border-style:dashed}
.db-energy-chips{padding:0 8px;margin:0 2px;border:solid var(--db-border);border-width:0 1px}
.db-outside-chips:empty{display:none}
.db-energy-chips button{justify-content:center;min-width:36px;padding:0 8px;font:500 13px var(--mono)}
.db-owned-chip{margin-left:2px}
.db-chips .db-dest-pill{border-color:var(--ink);background:var(--ink);color:var(--bg);font-weight:600}.db-dest-pill b{font-size:16px;line-height:1}
.db-zone-add{display:block;min-height:44px;margin-top:6px;padding:0;border:0;background:none;color:var(--ink);font:14px var(--body);text-decoration:underline;text-underline-offset:3px}
.db-type-menu,.db-insights-toggle{display:none}
.db-type-menu select{min-height:40px;padding:0 30px 0 14px;border:1px solid var(--soft);border-radius:999px;background-color:var(--bg3);color:var(--ink);font:500 14px var(--body)}
.db-card-flag.is-outside{background:var(--bg);color:var(--ink);border:1px dashed var(--soft)}
.db-results[data-type=Battlefield]:not([data-view=list]){grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.db-results[data-type=Battlefield][data-view=compact]{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.db-results[data-type=Battlefield][data-view] .db-card-wide{grid-column:auto}
.db-results[data-view=compact] .db-card-wide .db-card-art{aspect-ratio:1039/744}
.db-rune .db-quantity button{min-width:44px;height:44px}
.db-rune .db-row-name{min-height:40px;display:flex;align-items:center}
.db-dialog .kw{font-size:13px}
.db-legality button{min-height:36px}
.db-sort select{min-height:40px}
.db-review>summary,.db-notes>summary{min-height:44px;align-items:center}
.db-stack li.is-illegal .db-stack-card{box-shadow:0 0 0 2px var(--db-bad),0 -3px 12px #000a}
.db-stack-label i{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:4px;border-radius:50%;background:var(--db-bad);color:#111;font:700 13px/1 var(--body);font-style:normal;vertical-align:1px}
.db-owned-chip:disabled{opacity:.45;cursor:default}
.db-more-filters span{font:16px/1 var(--body)}
.db-app[data-type=Legend] .db-chips>:not(.db-type-menu),.db-app[data-type=Rune] .db-energy-chips,.db-app[data-type=Battlefield] .db-energy-chips{display:none}
.db-app:not([data-legend]) .db-legend-only{display:none}
.db-filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px;padding:12px 0 2px}
.db-filters label{display:grid;gap:5px;font:14px/1.4 var(--body);color:var(--muted)}
.db-filters select{min-width:170px;min-height:44px;padding:8px 26px 8px 10px;border:1px solid var(--soft);background:var(--bg);color:var(--ink);font-size:16px}
.db-filters button{min-height:44px;border:0;background:none;color:var(--ink);font:14px var(--body);text-decoration:underline;text-underline-offset:3px}
:is(.db-app,.db-dialog) select:not([multiple]){appearance:none;-webkit-appearance:none;border-radius:0;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 10px) 50%;background-size:4px 4px;background-repeat:no-repeat}
.db-resultline{display:flex;align-items:center;justify-content:space-between;gap:4px 14px;min-height:33px;margin:0;padding:10px 20px 0;font:14px/1.5 var(--body);color:var(--muted)}
.db-resultline p{display:flex;gap:0 14px;margin:0;min-width:0;white-space:nowrap;overflow:hidden}.db-resultline p>span{overflow:hidden;text-overflow:ellipsis}
.db-sort{display:flex;align-items:center;gap:8px;flex:none}
.db-sort select{min-height:36px;padding:4px 26px 4px 10px;border:1px solid var(--db-border);background:var(--bg);color:var(--ink);font:14px var(--body)}
.db-undo-quick{display:none}
.db-counter{color:var(--ink)}

/* Card tiles: the art adds a copy, the name opens the card, the pill counts and adjusts copies. */
.db-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:22px 14px;padding:14px 20px 24px}
.db-results:has(.db-loading){min-height:100vh}
.db-loading{grid-column:1/-1;margin:0;padding:48px 0;color:var(--muted);font:14px var(--body)}
.db-card{position:relative;min-width:0}
.db-card-frame{position:relative}
.db-card-art{position:relative;display:block;width:100%;aspect-ratio:744/1039;padding:0;border:0;border-radius:7px;overflow:hidden;background:var(--bg3);isolation:isolate;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.db-card-art img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .15s,opacity .15s;-webkit-user-drag:none}
.db-card-art:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.db-card-add{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 14px;border-radius:999px;background:#000d;color:#fff;font:600 14px var(--body);white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
@media(hover:hover){.db-card-art:hover img{transform:scale(1.025)}.db-card-art:hover .db-card-add,.db-card-art:focus-visible .db-card-add{opacity:1}}
.db-in-deck .db-card-art{box-shadow:0 0 0 2px var(--ink)}
.db-card.is-full .db-card-art img{opacity:.55}
.db-card.is-full .db-card-art{cursor:not-allowed}
.db-image-unavailable:before{content:'Image unavailable · open the name for its text';position:absolute;inset:16px;display:flex;align-items:center;justify-content:center;text-align:center;font:13px/1.6 var(--body);color:var(--muted)}
.db-card-frame>.db-quantity{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;align-items:center;height:36px;border:1px solid var(--ink);border-radius:999px;background:var(--bg);box-shadow:0 6px 16px #000a;overflow:hidden}
.db-card:not(.db-in-deck) .db-card-frame>.db-quantity{display:none}
.db-quantity{display:flex;align-items:center}
.db-quantity button{display:grid;place-items:center;min-width:36px;height:36px;padding:0;border:0;background:none;color:var(--ink);font:400 20px/1 var(--body)}
.db-quantity button:hover{background:var(--bg3)}
.db-quantity button:disabled{opacity:.35;cursor:not-allowed}.db-quantity button:disabled:hover{background:none}
.db-quantity .db-count-button{display:inline-flex;align-items:center;justify-content:center;min-width:30px;padding:0 4px;font:600 15px var(--mono);white-space:nowrap}
.db-quantity .db-count-button small{font:13px var(--mono);color:var(--muted);margin-left:1px}
.db-card-name{display:block;width:100%;margin:9px 0 0;padding:0;border:0;background:none;color:var(--ink);text-align:left;font:500 14px/1.35 var(--body)}
.db-card-name span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.db-card-name:hover span{text-decoration:underline;text-underline-offset:3px}
.db-card-sub{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;margin:3px 0 0;font:13px/1.4 var(--body);color:var(--muted)}
.db-card-sub>span{display:flex;flex-wrap:wrap;gap:0 8px}
.db-card-owned{font-weight:500;color:var(--ink)}.db-card-owned.is-none{font-weight:400;color:var(--muted)}
/* Revealed cards from an unreleased set: built with, never owned or priced. */
.db-card-owned.is-preview{padding:0 6px;border:1px dashed var(--soft);border-radius:999px;font-weight:500;color:var(--ink)}
.db-row-text small.db-row-preview{color:var(--muted)}
.db-preview-note{margin:8px 0 0;padding:8px 10px;border-left:2px solid var(--soft);background:var(--bg);font:14px/1.5 var(--body);color:var(--ink)}
.db-results[data-view=grid] .db-card-wide{grid-column:span 2}
.db-results[data-view=grid] .db-card-wide .db-card-art{aspect-ratio:1039/744}
.db-results-group{grid-column:1/-1;margin:0;padding-bottom:8px;border-bottom:1px solid var(--db-border);font:14px/1.5 var(--body);color:var(--muted)}
.db-results-group~.db-results-group{margin-top:8px}
.db-results-more{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;border:1px dashed var(--soft)}
.db-results-more p{margin:0;max-width:56ch;font:14px/1.55 var(--body);color:var(--muted)}
.db-results-more .button,.db-empty .button{min-height:44px;font:500 14px var(--body);text-transform:none}
.db-champion-pick{width:100%;margin:8px 0 0;min-height:40px;border:1px solid var(--db-border);background:var(--bg2);color:var(--ink);font:500 14px var(--body)}
.db-champion-pick:hover{border-color:var(--ink)}
.db-champion-pick[aria-pressed=true]{border-color:var(--ac);background:var(--ac-soft)}
.db-empty{grid-column:1/-1;min-height:180px;padding:32px 4px}
.db-empty h3{margin:0 0 8px;font:600 28px var(--head);text-transform:uppercase}
.db-empty p{font:14px/1.55 var(--body);color:var(--muted)}
.db-empty .button+.button{margin-left:8px}
.db-more{display:block;margin:0 auto 22px}
.db-catalog-note{margin:0;padding:0 20px 22px;font:14px/1.6 var(--body);color:var(--muted)}
.db-skip{position:absolute;left:20px;top:8px;z-index:20;padding:10px 14px;background:var(--bg);color:var(--ink);border:1px solid var(--ink);font:500 14px var(--body)}
.db-skip:not(:focus){width:1px;height:1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.db-discovery{position:relative}
/* A card the format bans says so on the art, and the suggested order lists it last. */
.db-card-flag{position:absolute;left:6px;right:6px;top:34%;padding:4px 6px;border-radius:4px;background:var(--db-bad);color:#111;font:600 13px/1.3 var(--body);text-align:center;pointer-events:none}
.db-card.is-banned .db-card-art img{opacity:.7}
.db-suggest{padding:0;border:0;background:none;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:3px}
.db-copy-missing{justify-self:start;min-height:36px;padding:0;border:0;background:none;color:var(--ink);font:500 14px var(--body);text-decoration:underline;text-underline-offset:3px}
/* Visual: the deck as card stacks, one column per cost or type. Each card shows its top edge;
   hover or focus lifts it to the front. */
.db-visual{padding:18px 20px 32px;border:1px solid var(--db-border);background:color-mix(in srgb,var(--bg) 95%,transparent)}
.db-visual-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.db-visual-head p{margin:0;font:15px var(--body);color:var(--muted)}.db-visual-head b{color:var(--ink);font:600 15px var(--mono)}
.db-visual-modes{display:inline-flex;border:1px solid var(--db-border)}
.db-visual-modes button{min-height:40px;padding:0 14px;border:0;background:none;color:var(--muted);font:500 14px var(--body)}
.db-visual-modes button+button{border-left:1px solid var(--db-border)}
.db-visual-modes button[aria-pressed=true]{color:var(--ink);background:var(--bg3);box-shadow:inset 0 -2px var(--ink)}
.db-stacks{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,160px);justify-content:start;gap:14px;align-items:start;overflow-x:auto;padding:4px 2px 18px;scrollbar-width:thin}
.db-stack h3,.db-visual-rows h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 15px var(--body);text-transform:none}
.db-stack h3 small,.db-visual-rows h3 small{font:500 14px var(--mono);color:var(--muted)}
.db-stack ol,.db-visual-rows ol{margin:0;padding:0;list-style:none}
.db-stack li{position:relative}
.db-stack li+li{margin-top:-104%}
.db-stack li:is(:hover,:focus-within){z-index:5}
.db-stack-card{position:relative;display:block;width:100%;padding:0;border:0;border-radius:6px;overflow:hidden;background:var(--bg3);box-shadow:0 -3px 12px #000a;transition:transform .15s}
.db-stack li:is(:hover,:focus-within) .db-stack-card{transform:translateY(-4%)}
.db-stack-card:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.db-stack-card img{display:block;width:100%;aspect-ratio:744/1039;object-fit:cover}
.db-stack-card.is-wide img{aspect-ratio:1039/744}
.db-stack-label{position:absolute;left:0;right:0;top:calc(25.5% - 30px);display:flex;align-items:center;justify-content:space-between;gap:4px;padding:4px 6px 4px 8px;background:linear-gradient(90deg,#000d,#0009);color:#fff;font:600 13px/1.25 var(--body);text-align:left}
.db-stack-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-stack-label b{flex:none;padding:1px 6px;border-radius:999px;background:#fff;color:#111;font:600 13px var(--mono)}
.db-stack li:last-child .db-stack-label{top:auto;bottom:0}
.db-stack li.is-champion .db-stack-card{box-shadow:0 0 0 2px var(--ink),0 -3px 12px #000a}
.db-stack.is-legend .db-stack-label{top:auto;bottom:0}
.db-stack h3 .dk-energy{min-width:26px;height:26px;font-size:14px}
.db-visual-rows{display:grid;gap:22px;margin-top:22px}
.db-visual-rows ol{display:flex;flex-wrap:wrap;gap:10px}
.db-visual-rows li{width:118px}.db-visual-rows li:has(.is-wide){width:168px}
.db-visual-rows .db-stack-label{top:auto;bottom:0}
/* Stats inside the builder: the tab already names it, so its heading is for screen readers only. */
.db-app .ds-header>div:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.db-app .ds-header{justify-content:flex-end}
/* Dragging a card or a row: the deck panel and the section under the pointer show where it lands. */
.db-app[data-dragging] .db-deck{box-shadow:inset 0 0 0 2px var(--soft)}
.db-deck .is-drop{outline:2px solid var(--ink);outline-offset:4px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.db-deck.is-drop{outline-offset:-2px}
[draggable=true]{-webkit-user-drag:element}
/* Choosing a Legend: the whole tile is the button. The label appears on hover and focus. */
.db-results[data-type=Legend]{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px 12px}
.db-legend-pick{display:block;width:100%;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:left}
.db-legend-pick .db-card-art{pointer-events:none}
.db-legend-name{display:block;margin:9px 0 2px;color:var(--ink);font:500 15px/1.35 var(--body);overflow-wrap:anywhere}
.db-legend-pick .db-card-sub{display:block;margin:0}
.db-legend-cta{display:block;margin-top:6px;font:500 13px/1.4 var(--body);color:var(--ink);opacity:0;transition:opacity .15s}
.db-legend-pick:hover .db-legend-cta,.db-legend-pick:focus-visible .db-legend-cta,.db-legend-pick[aria-pressed=true] .db-legend-cta{opacity:1}
.db-legend-pick:hover img{transform:scale(1.025)}.db-legend-pick:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.db-legend-pick[aria-pressed=true] .db-card-art{box-shadow:0 0 0 2px var(--ac)}
@media(hover:none){.db-legend-cta{display:none}.db-legend-pick[aria-pressed=true] .db-legend-cta{display:block}}
/* Compact view: more cards to a row and no captions; the count shows on the art, and the sheet opens on a long press or right-click. */
.db-results[data-view=compact]{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px 8px}
.db-results[data-view=compact] :is(.db-card-name,.db-card-sub,.db-card-add){display:none}
.db-results[data-view=compact] .db-card-frame>.db-quantity{bottom:4px;height:30px}
.db-results[data-view=compact] .db-card-frame>.db-quantity button:not(.db-count-button){display:none}
.db-results[data-view=compact] .db-card-flag{top:auto;bottom:38px;font-size:13px;padding:2px 4px}
.db-results[data-view=compact] .db-card-wide{grid-column:span 2}
/* List view: a thumbnail that adds, the name and type, and the count with plus and minus. */
.db-results[data-view=list]{grid-template-columns:1fr;gap:0;padding-top:6px}
.db-results[data-view=list] .db-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:'art name qty' 'art sub qty';align-items:center;gap:0 12px;padding:8px 0;border-bottom:1px solid var(--db-border)}
.db-results[data-view=list] .db-card-frame{display:contents}
.db-results[data-view=list] .db-card-art{grid-area:art;border-radius:3px}
.db-results[data-view=list] .db-card-add{display:none}
.db-results[data-view=list] .db-card-name{grid-area:name;margin:0}
.db-results[data-view=list] .db-card-sub{grid-area:sub;justify-content:flex-start;gap:4px 10px}
.db-results[data-view=list] .db-card-frame>.db-quantity,.db-results[data-view=list] .db-card:not(.db-in-deck) .db-card-frame>.db-quantity{grid-area:qty;position:static;display:flex;transform:none;box-shadow:none;border-color:var(--db-border);background:var(--bg2)}
.db-results[data-view=list] .db-in-deck .db-card-frame>.db-quantity{border-color:var(--ink)}
.db-results[data-view=list] .db-card-wide .db-card-art{aspect-ratio:1039/744;align-self:center}
.db-results[data-view=list] .db-champion-pick{grid-column:2/4;margin:6px 0 0}
.db-results[data-view=list] .db-results-more,.db-results[data-view=list] .db-results-group{margin:10px 0 0}
.db-results[data-view=list] .db-legend-tile{display:block}
.db-results[data-view=list] .db-legend-pick{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:2px 10px;align-items:center}
.db-results[data-view=list] .db-legend-pick .db-card-art{grid-row:1/3}.db-results[data-view=list] .db-legend-name{margin:0}
.db-results[data-view=list] .db-legend-cta{grid-column:3;grid-row:1/3;margin:0}

/* The deck. */
.db-deck{min-width:0;padding:18px 20px 22px;background:var(--db-surface)}
.db-panel-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.db-panel-title h2{margin:0;font:600 22px/1.1 var(--head);text-transform:uppercase;letter-spacing:.6px}
.db-history{display:flex;gap:2px}
.db-history button{display:inline-flex;align-items:center;gap:5px;min-width:44px;min-height:44px;padding:0 10px;border:0;background:none;color:var(--ink);font:500 14px var(--body)}
.db-history button:hover{background:var(--bg3)}
.db-history button:disabled{color:var(--muted);opacity:.55;cursor:default}.db-history button:disabled:hover{background:none}
.db-history svg{flex:none}.db-history [data-action=redo] svg{transform:scaleX(-1)}
.db-name{width:100%;min-width:0;padding:2px 0 8px;border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;color:var(--ink);font:500 19px var(--body)}
.db-name:hover,.db-name:focus{border-bottom-color:var(--soft)}
.db-legality{margin:6px 0 0;font:14px/1.5 var(--body);color:var(--muted)}
.db-legality button{padding:0;border:0;background:none;color:var(--ac);font:inherit;text-decoration:underline}
.db-illegal{display:inline-block;margin:0 6px 0 0;padding:1px 6px;border:1px solid var(--db-bad);color:var(--db-bad);font:600 13px/1.4 var(--body);letter-spacing:.02em;vertical-align:1px}
.db-composition{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 0}
.db-composition span{padding:4px 8px;border:1px solid var(--db-border);font:13px/1.5 var(--body);color:var(--muted)}
.db-composition b{color:var(--ink);font:400 13px var(--mono)}
.db-composition span.is-full b{font-weight:600}.db-composition span.is-full:after{content:' ✓';color:var(--muted)}
.db-composition span.is-over{border-color:var(--db-bad);color:var(--db-bad)}.db-composition span.is-over b{color:var(--db-bad);font-weight:600}.db-composition span em{font-style:normal;font-weight:600}
/* The energy curve: one bar per cost, the count above, the cost below. A bar filters the cards. */
.db-curve{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;height:92px;margin:14px 0 2px}
.db-curve button{display:grid;grid-template-rows:18px minmax(0,1fr) 18px;height:100%;padding:0;border:0;background:none;color:var(--muted)}
.db-curve b{font:500 13px/18px var(--mono);color:var(--ink)}
.db-curve i{align-self:end;justify-self:stretch;height:calc(var(--h,0)*100%);min-height:2px;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--ink) 55%,transparent);transition:background .15s}
.db-curve small{font:13px/18px var(--mono)}
.db-curve button:hover i,.db-curve button:focus-visible i{background:var(--ink)}
.db-curve button[data-empty] i{background:var(--db-border)}
.db-price{display:grid;gap:3px;margin:12px 0 0;font:14px/1.5 var(--body);color:var(--muted)}
.db-price-pair{display:flex;flex-wrap:wrap;gap:2px 18px}
.db-price b{color:var(--ink);font:500 14px var(--mono)}
.db-price small{font-size:13px}
.db-price-own{color:var(--ink)}
@media(min-width:901px){.db-app[data-mode=builder] #db-deck-content{min-height:720px}}
#db-deck-content{margin-top:6px}
#db-identity{margin:10px 0 0}
/* The Legend: art, champion, title and domains, with Change beside them. */
.db-legend{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 12px 10px 14px;border:1px solid var(--db-border);background:var(--bg)}
.db-legend:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--d1,transparent) 50%,var(--d2,transparent) 50%)}
.db-legend-art{display:block;padding:0;border:0;background:none;border-radius:4px;overflow:hidden}
.db-legend-art img{display:block;width:62px;height:auto}
.db-legend .eyebrow{margin:0 0 2px;font:13px/1.4 var(--body);letter-spacing:0;color:var(--muted)}
.db-legend h3{margin:0 0 2px;font:600 26px/1 var(--head);text-transform:uppercase}
.db-legend p{margin:0;font:14px/1.45 var(--body);color:var(--muted)}
.db-legend p.db-legend-domains{margin-top:4px}
.db-legend .db-row-issue,.db-legend .db-row-own{display:block;margin-top:4px;font:13px/1.4 var(--body)}
.db-legend-change{align-self:start;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink);font:14px var(--body);text-decoration:underline;text-underline-offset:3px}
.db-legend-empty{display:block;padding:20px;border-style:dashed}
.db-legend-empty:before{content:none}
.db-legend-empty h3{font-size:26px}
.db-legend-empty .button{margin-top:14px;min-height:44px;font:500 14px var(--body);text-transform:none}
@media(min-width:901px){.db-phone-only{display:none}}
.db-domain{display:inline-flex;align-items:center;gap:5px;margin-right:10px;font:14px var(--body)}
.db-domain i{width:7px;height:7px;border-radius:50%;background:var(--dc,var(--muted))}
.db-warning{margin:10px 0;padding:10px 12px;border-left:2px solid var(--db-warn);background:var(--bg);font:14px/1.5 var(--body);color:var(--muted)}
.db-champion-prompt{display:block;width:100%;min-height:44px;margin:0 0 8px;padding:8px 10px;border:1px dashed var(--soft);background:var(--bg);color:var(--ink);font:500 14px var(--body)}
.db-champion-prompt:hover{border-color:var(--ink)}
/* Sections, then type groups, then rows. */
.db-zone{margin:20px 0 0}
.db-zone-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.db-zone-head h3{margin:0;font:600 15px var(--body);text-transform:none}
.db-zone-head h3 b{margin-left:6px;font:400 14px var(--mono);color:var(--muted)}
.db-zone-head b.is-over,.db-zone-head .db-over{color:var(--db-bad);font-weight:600}.db-zone-head .db-over{font:600 13px var(--body);font-style:normal;margin-left:4px}
.db-zone-head button{min-height:44px;padding:0 2px;border:0;background:none;color:var(--ink);font:14px var(--body);text-decoration:underline;text-underline-offset:3px}
.db-zone>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0;border-top:1px solid var(--db-border);list-style:none;cursor:pointer;font:600 15px var(--body)}
.db-zone>summary::-webkit-details-marker{display:none}
.db-zone>summary b{margin-left:6px;margin-right:auto;font:400 14px var(--mono);color:var(--muted)}
.db-zone>summary:after{content:'+';font:400 20px var(--body);color:var(--muted)}.db-zone[open]>summary:after{content:'−'}
.db-group h4{display:flex;justify-content:space-between;margin:14px 0 4px;font:600 13px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.db-group h4 span{font:500 13px var(--mono);letter-spacing:0}
.db-section-empty{margin:0;padding:12px;border:1px dashed var(--db-border);font:14px/1.5 var(--body);color:var(--muted)}
/* A row: domain edge, cost, name and notes, a strip of the art, then the count. */
.db-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px;min-height:54px;border-top:1px solid var(--db-border)}
.db-group h4+.db-row{border-top-color:transparent}
.db-row:before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:2px;background:linear-gradient(var(--d1,var(--soft)) 50%,var(--d2,var(--soft)) 50%)}
.db-row-name{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;min-height:54px;padding:6px 0 6px 12px;border:0;background:none;color:var(--ink);text-align:left;font:inherit}
.db-row-name:hover .db-row-title{text-decoration:underline;text-underline-offset:3px}
.db-row-cost{display:flex;min-width:48px}
.db-cost{display:grid;place-items:center;width:22px;height:22px;border:1px dashed var(--db-border);border-radius:50%;color:var(--muted);font:13px var(--mono)}
.db-row-text{min-width:0}
.db-row-title{font:500 15px/1.3 var(--body);overflow-wrap:anywhere}
.db-row-text .db-illegal{margin:0 0 0 7px}
.db-row-text small{display:block;margin-top:1px;font:13px/1.4 var(--body);color:var(--muted)}
.db-row-text .db-row-issue{color:var(--db-bad)}.db-row-text .db-row-issue.is-warning{color:var(--db-warn)}
.db-row-text .db-row-tag{color:var(--ink)}
.db-row-text .db-row-own,.db-legend .db-row-own{color:var(--db-warn)}.db-row-text .db-row-own.is-done,.db-legend .db-row-own.is-done{color:var(--muted)}
.db-row-art{display:block;width:76px;height:40px;overflow:hidden;border-radius:3px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%);opacity:.9}
.db-row-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 24%;transform:scale(1.5);transform-origin:50% 26%}
.db-row-art.is-wide img{object-position:50% 45%;transform:scale(1.15);transform-origin:50% 45%}
.db-row.is-champion .db-row-title{font-weight:600}
/* With a mouse, a row shows its count; minus and plus float over the art strip on hover or focus,
   so the name keeps the width. */
@media(hover:hover) and (pointer:fine){
 .db-row:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
 .db-workspace:not([data-reader]) .db-row{grid-template-columns:minmax(0,1fr) 36px}
 .db-row .db-quantity button:not(.db-count-button){display:none}
 .db-row:is(:hover,:focus-within) .db-quantity{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:1;border:1px solid var(--soft);border-radius:999px;background:var(--bg2);box-shadow:0 4px 14px #0008}
 .db-row:is(:hover,:focus-within) .db-quantity button{display:grid}
}
.db-row .db-count-button{min-width:34px}
/* Runes: one tile per rune, coloured by its domain. */
.db-runes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.db-rune{position:relative;display:grid;align-content:space-between;gap:4px;padding:10px 6px 4px 14px;border:1px solid var(--db-border);background:var(--bg)}
.db-rune:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--d1,var(--soft))}
.db-rune .db-row-name{display:flex;align-items:center;min-height:40px;padding:0}
.db-rune .db-quantity{justify-content:flex-start;margin-left:-8px}
.db-rune-fill{width:100%;min-height:44px;margin-top:8px;padding:8px 12px;border:1px solid var(--db-border);background:var(--bg3);color:var(--ink);font:500 14px var(--body)}
.db-rune-fill:hover{border-color:var(--ink)}
/* Review, notes and the footnote. */
.db-review,.db-notes{margin-top:20px;padding:14px 0 0;border-top:1px solid var(--db-border)}
.db-review>summary,.db-notes>summary{display:flex;justify-content:space-between;gap:10px;cursor:pointer;font:600 15px var(--body)}
.db-review>summary span:last-child{font:500 14px var(--body);color:var(--muted)}
.db-review ul{padding-left:18px;font:14px/1.8 var(--body);color:var(--muted)}
.db-review p,.db-footnote{font:14px/1.6 var(--body);color:var(--muted)}
.db-review label{display:flex;align-items:center;gap:10px;margin-top:14px;font:14px var(--body)}
.db-format{max-width:100%;min-height:40px;padding:8px;border:1px solid var(--soft);background:var(--bg);color:var(--ink);font-size:14px}
.db-notes textarea{width:100%;margin-top:12px;padding:12px;border:1px solid var(--soft);background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);resize:vertical}
.db-footnote p{margin:12px 0 0}
.db-footnote a{color:var(--ink)}
/* Deck rows preview their card beside the panel. */
.db-hover{position:fixed;z-index:40;pointer-events:none;filter:drop-shadow(0 18px 36px #000a)}
.db-hover img{display:block;height:auto;border-radius:10px}

/* Dialogs: a sheet for one card, sharing, saving and importing. */
.db-dialog{width:min(760px,calc(100vw - 28px));max-height:88dvh;padding:22px 24px;border:1px solid var(--soft);background:var(--bg2);color:var(--ink);box-shadow:0 25px 100px #0009}
.db-dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}
.db-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}
.db-dialog-top h2{margin:0;font:600 30px/1.05 var(--head);text-transform:uppercase}
.db-dialog-top>button{flex:none;min-width:44px;height:44px;border:1px solid var(--soft);background:none;color:var(--ink);font-size:24px}
.db-dialog [tabindex='-1']:focus{outline:none}
.db-dialog p,.db-dialog label,.db-dialog .fine{font:15px/1.6 var(--body);color:var(--muted)}
.db-dialog label{display:block;margin:14px 0 6px}
.db-dialog textarea,.db-dialog input[type=text],.db-dialog input[type=search]{width:100%;padding:12px;border:1px solid var(--soft);background:var(--bg);color:var(--ink);font:16px/1.5 var(--body)}
.db-dialog textarea{min-height:100px;resize:vertical}
.db-dialog .db-code{font:13px/1.7 var(--mono);overflow-wrap:anywhere}
.db-dialog input[type=number]{max-width:140px;padding:12px;border:1px solid var(--soft);background:var(--bg);color:var(--ink);font:16px var(--mono)}
.db-dialog select{min-height:44px;padding:8px 26px 8px 10px;border:1px solid var(--soft);background:var(--bg);color:var(--ink);font-size:16px}
.db-dialog .button{min-height:44px;font:500 14px var(--body);text-transform:none}
.db-dialog-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.db-dialog #db-dialog-status{margin-top:12px;color:var(--ink);overflow-wrap:anywhere}
.db-dialog #db-dialog-status:empty{display:none}
.db-dialog .db-check{display:flex;align-items:center;gap:8px}
.db-inspector{display:grid;grid-template-columns:minmax(170px,250px) minmax(0,1fr);gap:24px;align-items:start}
.db-inspector-art img{display:block;width:100%;height:auto;border-radius:10px}
.db-dialog p.db-inspector-kicker{margin:0 0 4px;font:13px/1.5 var(--mono)}
.db-dialog p.db-inspector-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:2px 0 0;color:var(--ink)}
.db-inspector-facts .db-domain{margin:0}
.db-dialog .db-inspector .db-text{margin:12px 0 0;white-space:pre-wrap;color:var(--ink);font:15px/1.7 var(--body)}
.db-inspector-qty{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:4px 4px 4px 14px;border:1px solid var(--db-border);background:var(--bg);font:500 15px var(--body)}
.db-inspector-qty .db-quantity button{min-width:44px;height:44px}
.db-inspector-qty+.db-inspector-qty{margin-top:6px}
.db-counts{display:flex;gap:4px}
.db-counts button{min-width:44px;height:44px;border:1px solid var(--db-border);background:var(--bg2);color:var(--ink);font:600 15px var(--mono)}
.db-counts button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.db-counts button:disabled{opacity:.35;cursor:not-allowed}
.db-dialog p.db-inspector-odds{margin:12px 0 0;font-size:14px}.db-inspector-odds span{display:block;font:13px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.db-inspector-odds b{color:var(--ink);font-weight:600}
.db-inspector-link{display:inline-block;padding:10px 0}
.db-dialog p.db-inspector-own{margin:8px 0 0;font-size:14px}
.db-inspector a{color:var(--ink);font:14px var(--body)}
.db-printings{margin-top:16px}
.db-dialog .db-printings>p{margin:0 0 8px;font-size:14px}
.db-printings>div{display:flex;gap:10px;overflow-x:auto;padding:3px 3px 6px;scrollbar-width:thin}
.db-printing{flex:none;display:grid;align-content:start;gap:4px;width:96px;padding:0;border:0;background:none;color:var(--ink);text-align:left}
.db-printing img{display:block;width:96px;aspect-ratio:744/1039;object-fit:cover;border-radius:5px;background:var(--bg3)}
.db-printing.is-wide{width:118px}.db-printing.is-wide img{width:118px;aspect-ratio:1039/744}
.db-printing span{font:13px/1.3 var(--mono);white-space:nowrap;letter-spacing:-.02em}.db-printing small{font:13px/1.3 var(--body);color:var(--muted)}
.db-printing[aria-pressed=true] img{box-shadow:0 0 0 2px var(--ink)}
.db-printing:hover img{box-shadow:0 0 0 1px var(--soft)}.db-printing[aria-pressed=true]:hover img{box-shadow:0 0 0 2px var(--ink)}
.db-library-row{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid var(--soft)}
.db-library-row h3{margin:0 0 6px;font:500 16px var(--body);overflow-wrap:anywhere}
.db-library-row p{margin:0;font-size:14px}
.db-library-actions{display:flex;gap:5px;flex-shrink:0}
.db-library-actions button{min-height:44px;padding:0 12px;border:1px solid var(--soft);background:none;color:var(--ink);font-size:14px}
.db-import-row{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:start;gap:10px;padding:12px 0;border-top:1px solid var(--soft);font:14px var(--body);overflow-wrap:anywhere}
.db-import-row small{display:block;color:var(--muted);font-size:13px}
.db-import-row>input[type=number]{grid-column:1;grid-row:1;width:100%;max-width:64px;padding:10px 8px}
.db-import-row>div{grid-column:2;grid-row:1;padding:7px 0}
.db-import-row>input[type=search],.db-import-row>select{grid-column:2;min-width:0;max-width:100%}
.db-import-errors{padding:12px;border-left:3px solid var(--db-warn);background:var(--bg)}
.db-import-row small.db-import-guess{color:var(--db-warn)}

/* Shared decks (the reader): one centred column, counts as text. */
.db-workspace[data-reader]{display:block;max-width:860px;margin:0 auto}
.db-workspace[data-reader] .db-deck{padding:28px 32px}
.db-reader-qty{min-width:40px;text-align:right;font:500 15px var(--mono);color:var(--ink)}
.db-workspace[data-reader] .db-legend{grid-template-columns:96px minmax(0,1fr)}
.db-workspace[data-reader] .db-legend-art img{width:96px}
.db-workspace[data-reader] .db-legend h3{font-size:36px}
#db-reader-name{margin:6px 0 0;font:600 26px/1.1 var(--head);text-transform:uppercase;overflow-wrap:anywhere}

/* Energy and power pips, as deck pages show them. */
.dk-cost{display:inline-flex;gap:4px;align-items:center;flex:none}.dk-energy,.dk-power{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;font:600 13px var(--body);font-style:normal}.dk-energy{border:1px solid var(--muted);color:var(--ink)}.dk-power{--power:var(--muted);background:var(--power);color:var(--bg)}.dk-power[data-domain=Fury]{--power:var(--fury)}.dk-power[data-domain=Calm]{--power:var(--calm)}.dk-power[data-domain=Mind]{--power:var(--mind)}.dk-power[data-domain=Body]{--power:var(--body-color)}.dk-power[data-domain=Chaos]{--power:var(--chaos)}.dk-power[data-domain=Order]{--power:var(--order)}

/* Phone bar: Cards and Deck. */
.db-mobile-tabs{display:none}
.db-pane-icon{display:inline-grid;place-items:center;width:22px;height:22px;font-style:normal}.db-pane-icon img{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:1px solid var(--ac)}
@keyframes db-bump{40%{transform:scale(1.05);border-color:var(--ac);color:var(--ink)}}.db-mobile-tabs .is-bumped{animation:db-bump .5s ease-out}

@media(max-width:1180px){.db-toolbar{display:block}.db-toolbar-actions{justify-content:flex-start;margin-top:12px}}
@media(min-width:1201px){.db-app[data-type=Legend] .db-chips{display:none}}
@media(max-width:1200px){.db-types{display:none}.db-type-menu{display:block;flex:none}}
/* Short laptop screens: the title, its actions and the tabs take less height, so cards show on load. */
@media(min-width:901px) and (max-height:860px){.db-topline{padding:0}.db-toolbar{display:flex;align-items:center;padding:8px 0 6px}.db-heading h1{font-size:30px;margin:0 0 4px}.db-toolbar-actions{margin-top:0}.db-toolbar-actions .button{min-height:40px;padding:8px 12px}.db-visibility button{min-height:40px;padding:0 10px}.db-workspace-tabs button{min-height:40px}.db-app .db-workspace-tabs+[role=tabpanel]{margin-top:10px}}
/* Tablet and small laptop widths keep the tabs and chips to one row each, scrolling sideways. */
@media(max-width:1280px){.db-types,.db-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.db-types:not([data-end]),.db-chips:not([data-end]){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}}
@media(max-width:1050px){
 body:has(.db-app) main{padding:0 20px}
 .db-workspace{grid-template-columns:minmax(0,1fr) minmax(340px,.8fr)}
 .db-results{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
/* Phones: the builder is the screen. The page head scrolls away, the search head stays, three
   cards to a row, and Cards and Deck switch at the bottom. */
@media(max-width:900px){
 body:has(.db-app) main{padding:0 12px}
 .db-app{padding-bottom:84px}
 .db-app .footer{margin-bottom:75px}
 .db-topline{padding:0}
 .db-toolbar{display:block;padding:10px 0 12px}
 .db-heading h1{font-size:30px;margin:4px 0 6px}
 .db-status{max-width:40ch}
 .db-app[data-empty] .db-status,.db-app[data-empty] .db-workspace-tabs{display:none}
 /* An empty deck on a phone: the Legend grid below is the first step, so the title shares its row with Import. */
 .db-app[data-empty] .db-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
 .db-app[data-empty] .db-toolbar-actions{flex:none;margin-top:0}
 .db-app[data-empty] .db-toolbar-actions [data-action="choose-legend"]{display:none}
 .db-app[data-empty] .db-toolbar-actions .button{flex:none;padding:10px 12px}
 .db-app[data-type=Legend] .db-sort{display:none}
 .db-toolbar-actions{justify-content:flex-start;margin-top:12px;gap:6px}
 .db-toolbar-actions .button{flex:1 1 0;min-width:0;padding:10px 8px}
 .db-toolbar-actions>[data-secondary]{display:none}
 .db-app[data-mode=reader] .db-toolbar-actions .button{flex:1 1 calc(50% - 3px);white-space:normal}
 .db-toolbar-actions .db-visibility{flex:1 1 100%}.db-visibility button{flex:1;font-size:14px}
 .db-app .db-workspace-tabs+[role=tabpanel]{margin-top:10px}
 .db-workspace{display:block;margin:0 -12px;border-width:1px 0 0}
 .db-discovery{border-right:0}
 .db-app[data-mobile=cards] .db-workspace:not([data-reader]) .db-deck{display:none}
 .db-app[data-mobile=deck] .db-discovery{display:none}
 .db-search-head{padding:10px 12px 8px}
 .db-searchbox{height:44px}.db-searchbox kbd{display:none}
 .db-view{min-height:44px;padding:0 12px}.db-view span{display:none}
 .db-undo-quick{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--soft);background:var(--bg);color:var(--ink)}.db-undo-quick:disabled{color:var(--muted);opacity:.5}
 .db-sort span{display:none}.db-sort select{min-height:40px;font-size:14px}
 .db-stacks{grid-auto-columns:112px;margin-inline:-12px;padding-inline:12px}
 .db-visual{margin:0 -12px;padding:12px 12px 32px;border-width:1px 0 0}
 .db-types,.db-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-12px;padding-inline:12px;scroll-padding-inline:12px}
 .db-types{padding-top:8px}
 .db-chips{padding-top:8px}
 .db-resultline{min-height:30px;padding:8px 12px 0;font-size:13px}
 .db-results{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px;padding:10px 12px 20px}
 .db-results[data-type=Legend]{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px}
 .db-results[data-view=grid] .db-card-wide{grid-column:span 3}
 .db-results[data-view=compact]{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px}
 .db-results[data-view=compact] .db-card-wide{grid-column:span 2}
 /* The deck pane: the name shares its row with Undo, Redo and options; the Deck tab already names the panel. */
 .db-deck-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:6px}
 .db-deck-head>*{grid-column:1/-1}
 .db-deck-head .db-panel-title{display:contents}
 .db-deck-head .db-panel-title h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .db-deck-head .db-history{grid-column:2;grid-row:1}
 .db-deck-head .db-name{grid-column:1;grid-row:1;padding-bottom:4px}
 .db-history [data-action=undo],.db-history [data-action=redo]{font-size:0;gap:0;padding:0;justify-content:center}
 .db-row-title{font-size:14px}
 .db-row-art{width:44px}
 .db-card-art{border-radius:5px}
 .db-card-add{display:none}
 .db-card-frame>.db-quantity{bottom:4px;height:44px}
 .db-card-frame>.db-quantity button{min-width:38px;height:44px}
 .db-card-frame>.db-quantity .db-count-button{min-width:24px;font-size:14px}
 .db-card-name{margin-top:0;padding:6px 0 8px;font-size:13px;line-height:1.3}
 .db-card-sub{font-size:13px}
 .db-card-sub>span>span,.db-card-sub .dk-cost{display:none}
 .db-legend-name{font-size:13px}
 .db-legend-pick .db-card-sub{font-size:13px}
 .db-results[data-view=list] .db-card-sub>span>span,.db-results[data-view=list] .db-card-sub .dk-cost{display:inline-flex}
 .db-results[data-view=list] .db-card{grid-template-columns:40px minmax(0,1fr) auto;gap:0 10px}
 .db-results[data-view=list] .db-card-name{font-size:14px}
 .db-results[data-view=list] .db-quantity button{min-width:38px;height:40px}
 .db-champion-pick{font-size:13px;min-height:40px}
 .db-catalog-note{padding:0 12px 20px}
 .db-deck{padding:14px 12px 20px}
 .db-row-name{gap:8px;padding-left:10px}
 .db-row-cost{min-width:48px}
 .db-row-art{width:52px;height:38px}
 .db-row .db-quantity button{min-width:40px;height:44px}
 .db-row .db-count-button{min-width:26px}
 .db-mobile-tabs{position:fixed;z-index:30;left:0;right:0;bottom:0;display:flex;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--soft)}
 .db-mobile-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;border:1px solid var(--soft);background:var(--bg2);color:var(--muted);font:500 15px var(--body)}
 .db-mobile-tabs button[aria-pressed=true]{border-color:var(--ac);color:var(--ink);background:var(--ac-soft)}
 .db-mobile-tabs b{padding:2px 6px;background:var(--bg);font:13px var(--mono)}
 .db-mobile-tabs [data-pane=deck]{position:relative;overflow:hidden}
 .db-mobile-tabs [data-pane=deck]:after{content:'';position:absolute;left:0;bottom:0;height:3px;width:calc(var(--progress,0)*100%);background:var(--ink);transition:width .2s}
 .db-app[data-mode=builder][data-tab] .db-mobile-tabs{display:flex}
 .db-app[data-mode=builder][data-tab]{padding-bottom:84px}
 .db-types{display:none}
 .db-type-menu{display:block;flex:none}
 .db-card-type{display:none}
 .db-results[data-type=Battlefield][data-view=grid]{grid-template-columns:1fr}
 .db-results[data-type=Battlefield][data-view=compact]{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* The deck pane: the Legend as a slim row, the counts on one line, the curve and prices folded. */
 .db-insights-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;margin-top:8px;padding:0 12px;border:1px solid var(--db-border);background:var(--bg);color:var(--ink);font:500 14px var(--body)}
 .db-insights-toggle:after{content:'+';color:var(--muted);font-size:18px}.db-insights-toggle[aria-expanded=true]:after{content:'−'}
 .db-app:not([data-insights]) :is(#db-curve,#db-price){display:none}
 .db-legend{grid-template-columns:42px minmax(0,1fr) auto;gap:10px;padding:8px 8px 8px 12px}
 .db-legend-art img{width:42px}
 .db-legend .eyebrow{display:none}
 .db-legend-text>p:not(.db-legend-domains){display:inline;margin-right:8px}.db-legend p.db-legend-domains{display:inline}
 .db-zone[data-drop=main]>.db-zone-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .db-zone[data-drop=main]>.db-zone-head button{display:none}
 #db-deck-content{margin-top:2px}#db-deck-content>.db-zone:first-of-type{margin-top:6px}
 .db-group h4{margin:10px 0 2px}
 .db-name{min-height:40px}
 .db-stacks.is-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible}.db-stacks.is-columns>div{display:grid;align-content:start;gap:18px;min-width:0}
 .db-legend h3{font-size:21px}
 .db-legend p{font-size:13px}.db-legend p.db-legend-domains{margin-top:0}
 .db-composition{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:4px}
 .db-composition span{flex:none;padding:3px 6px;white-space:nowrap}
 .db-stack li+li{margin-top:-92%}
 .db-stack-label{top:calc(33% - 44px)}
 .db-stack-label span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 .db-chips button{min-height:44px}.db-type-menu select{min-height:44px}
 .db-energy-chips button{min-width:40px}
 .db-types:not([data-end]),.db-chips:not([data-end]){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
 .db-stacks{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;row-gap:20px}
 .db-workspace-tabs button{min-height:44px}
 .db-toast,.db-toast:not([data-fresh]),.db-toast:empty{left:12px;right:12px;width:auto;max-width:none;bottom:calc(76px + env(safe-area-inset-bottom))}
 .db-toast{transform:none}.db-toast:not([data-fresh]),.db-toast:empty{transform:translateY(8px)}
 .db-dialog{width:100%;max-width:100%;max-height:90dvh;margin:auto 0 0;padding:16px 14px calc(18px + env(safe-area-inset-bottom));border-width:1px 0 0}
 .db-dialog-top h2{font-size:25px}
 .db-import-apply{bottom:calc(-18px - env(safe-area-inset-bottom));margin:16px -14px calc(-18px - env(safe-area-inset-bottom));padding:4px 14px calc(18px + env(safe-area-inset-bottom))}
 .db-inspector{grid-template-columns:112px minmax(0,1fr);gap:0 14px}
 .db-inspector-art{grid-row:1/span 3}
 .db-inspector-body{display:contents}
 .db-inspector-body>*{grid-column:1/-1}
 .db-inspector-body>:is(.db-inspector-kicker,.db-inspector-facts,.db-text){grid-column:2}
 .db-dialog .db-inspector .db-text{font-size:14px;line-height:1.6;max-height:220px;overflow:auto}
 .db-library-row{align-items:flex-start}.db-library-actions{flex-direction:column}
 .db-name{font-size:18px}
 .db-workspace[data-reader]{margin:0 -12px}
 .db-workspace[data-reader] .db-deck{padding:18px 12px}
 .db-workspace[data-reader] .db-legend{grid-template-columns:62px minmax(0,1fr)}
 .db-workspace[data-reader] .db-legend-art img{width:62px}
 .db-workspace[data-reader] .db-legend h3{font-size:28px}
}
/* W3b (Oct 7): phones edit one deck under a 56 px deck bar: the name (tap it to rename), Save with its state, Share
   and one ••• menu holding everything else. The bar stays put while the cards scroll under it, with the search
   docked beneath. The bottom bar switches Cards | Deck | Stats, and Visual is a view of the deck. */
@media(max-width:900px){
 .db-app[data-mode=builder]:not([data-empty]){--deck-bar:56px}
 .db-app[data-mode=builder]:not([data-empty]) .db-topline,.db-app[data-mode=builder] .db-workspace-tabs,.db-app[data-mode=builder]:not([data-empty]) .db-heading .db-status,.db-app[data-mode=builder] .db-deck-head .db-name{display:none}
 .db-app[data-mode=builder]:not([data-empty]) .db-toolbar{position:sticky;top:var(--top-bar,0px);z-index:31;display:flex;align-items:center;gap:6px;box-sizing:border-box;height:var(--deck-bar);margin:0 -12px;padding:0 12px;border-bottom:1px solid var(--soft);background:var(--bg)}
 .db-app[data-mode=builder]:not([data-empty]) .db-heading{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0}
 .db-app[data-mode=builder]:not([data-empty]) .db-heading h1{display:flex;align-items:baseline;min-width:0;margin:0;font-size:23px;line-height:1.15}
 .db-app[data-mode=builder]:not([data-empty]) .db-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .db-app[data-mode=builder]:not([data-empty]) #db-title[data-auto] .db-title-text{color:var(--muted)}
 .db-rename{flex:none;width:30px;min-height:44px;padding:0;border:0;background:none;color:var(--muted);cursor:pointer}
 .db-rename::after{content:'';display:block;width:16px;height:16px;margin:auto;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 20h4L19 9l-4-4L4 16z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M13 7l4 4' stroke='black' stroke-width='2'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 20h4L19 9l-4-4L4 16z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M13 7l4 4' stroke='black' stroke-width='2'/></svg>") center/contain no-repeat}
 .db-rename::before{content:'';position:absolute;inset:0}
 .db-app[data-empty] .db-rename{display:none}
 .db-app[data-mode=builder]:not([data-empty]) .db-toolbar-actions{flex:none;flex-wrap:nowrap;align-items:center;margin:0;gap:6px}
 .db-app[data-mode=builder]:not([data-empty]) .db-toolbar-actions .button{flex:none;min-height:44px;padding:0 12px;font-size:15px}
 .db-app[data-mode=builder]:not([data-empty]) .db-toolbar-actions>[data-action=share]{width:44px;padding:0;gap:0;font-size:0}
 .db-app[data-mode=builder]:not([data-empty]) .db-save-noun{display:none}
 .db-app[data-mode=builder]:not([data-empty]) .db-toolbar-actions>[data-action=share]::before{content:'';width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3v12M7 8l5-5 5 5M5 13v7h14v-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3v12M7 8l5-5 5 5M5 13v7h14v-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
 .db-app[data-mode=builder]:not([data-empty]) .db-toolbar .db-more>summary.button{width:44px;padding:0;letter-spacing:1px}
 /* ••• opens as an action sheet from the bottom, over a dimmed page; a tap on the dimmed page closes it. */
 .db-app[data-mode=builder]:not([data-empty]) .db-toolbar .db-more>div{position:fixed;inset:auto 0 0;width:auto;min-width:0;max-height:min(82dvh,600px);overflow:auto;overscroll-behavior:contain;padding:14px 12px calc(14px + env(safe-area-inset-bottom,0px));border-width:1px 0 0;box-shadow:0 -14px 36px #0009}
 .db-app[data-mode=builder]:not([data-empty]) .db-toolbar .db-more[open]>summary::after{content:'';position:fixed;inset:0;z-index:39;background:rgb(0 0 0/.55);cursor:default;animation:db-dim-in .18s ease-out}
 .db-app[data-mode=builder]:not([data-empty]) .db-toolbar .db-more[open]>div{animation:db-sheet-in .22s cubic-bezier(.2,.8,.2,1)}
 .db-app[data-mode=builder]:not([data-empty]) .db-toolbar .db-more>div>.button{padding:0 14px}
 .db-toolbar .db-more .db-visibility{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
 .db-toolbar .db-more .db-visibility::before{content:'Who can see this deck';content:'Who can see this deck' / '';grid-column:1/-1;padding:9px 12px;border-bottom:1px solid var(--db-border);color:var(--muted);font:500 13px/1.3 var(--body)}
 .db-toolbar .db-more .db-visibility button{min-height:44px;padding:0 4px}
 .db-app[data-mode=builder]:not([data-empty]) .db-search-head{top:calc(var(--top-bar,0px) + var(--deck-bar))}
 .db-app[data-mode=builder]:not([data-empty]) .db-workspace-tabs+[role=tabpanel]{margin-top:0}
 .db-view-switch{display:flex;border:1px solid var(--db-border);background:var(--bg)}
 .db-view-switch button{min-height:44px;padding:0 16px;border:0;background:none;color:var(--muted);font:600 14px var(--body);cursor:pointer}
 .db-view-switch button+button{border-left:1px solid var(--db-border)}
 .db-view-switch button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
 .db-deck-head .db-view-switch{grid-column:1;grid-row:1;justify-self:start}
 #db-visual-panel>.db-view-switch{width:max-content;margin:12px 0}
 .db-mobile-tabs{gap:6px}
 .db-mobile-tabs button{min-width:0;gap:7px;padding:0 6px}
 .db-mobile-tabs [data-pane=deck]{flex:1.6 1 0}
 .db-mobile-tabs :is([data-pane=cards],[data-pane=stats]){flex:1 1 0}
}
@keyframes db-sheet-in{from{transform:translateY(24px);opacity:0}}
@keyframes db-dim-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.db-app[data-mode=builder]:not([data-empty]) .db-toolbar .db-more[open]>div,.db-app[data-mode=builder]:not([data-empty]) .db-toolbar .db-more[open]>summary::after{animation:none}}
/* Menu items read left to right like a menu. */
.db-toolbar .db-more>div>.button{justify-content:flex-start;width:100%}
/* The share sheet of a Private account deck: the live link first, the snapshot under a rule. */
.db-share-live{padding-bottom:18px;border-bottom:1px solid var(--soft)}
.db-share-live>p{margin-top:0}
.db-share-or{margin:18px 0 6px;color:var(--ink);font:600 16px/1.3 var(--body)}
/* Small phones (D-28): the result line wraps instead of cutting words, and a message covers less of the screen. */
@media(max-width:359px){
 .db-resultline p{flex-wrap:wrap;white-space:normal}
 .db-resultline p>span{text-overflow:clip}
 .db-toast,.db-toast:not([data-fresh]),.db-toast:empty{left:8px;right:8px;padding:8px 12px;font-size:14px;line-height:1.35}
 .db-toast{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
 .db-mobile-tabs .db-pane-icon{display:none}
 /* A saved deck's Save shows only its check, so the name keeps its room. */
 .db-app[data-mode=builder]:not([data-empty]) .db-toolbar-actions [data-action=save-account].is-saved{width:44px;padding:0;font-size:0}
 .db-app[data-mode=builder]:not([data-empty]) .db-toolbar-actions [data-action=save-account].is-saved::after{content:'✓';font-size:18px}
 .db-app[data-mode=builder]:not([data-empty]) .db-heading h1{font-size:21px}
}
@media(max-width:480px){.db-workspace:not([data-reader]) .db-row-art{display:none}}
@media(max-width:359px){.db-row-art{display:none}.db-results,.db-results[data-type=Legend]{grid-template-columns:repeat(2,minmax(0,1fr))}.db-results[data-view=grid] .db-card-wide{grid-column:span 2}}
@media(prefers-reduced-motion:reduce){.db-card-art img,.db-card-add,.db-legend-cta,.db-legend-pick img,.db-toast,.db-curve i{transition:none}.db-mobile-tabs .is-bumped{animation:none}}