.builder-shell.page-shell { width:100%; max-width:1664px; padding:24px 32px; } .builder-page .dc-main-column { padding-inline:0; } #deck-builder { --db-bg:#0a0a0c; --db-panel:#111115; --db-raised:#17171d; --db-text:#f0eef8; --db-muted:#aaa6bc; --db-accent:#c9a84c; --db-border:#303039; color:var(--db-text); font:14px/1.5 Manrope,sans-serif; container-type:inline-size; } #deck-builder *, #deck-builder *::before, #deck-builder *::after { box-sizing:border-box; } #deck-builder [hidden] { display:none!important; } #deck-builder button, #deck-builder input, #deck-builder select, #deck-builder textarea { font:inherit; color:var(--db-text); border:1px solid var(--db-border); background:var(--db-raised); border-radius:8px; min-height:44px; padding:8px 12px; min-width:0; } #deck-builder button { cursor:pointer; font-weight:650; transition:background .14s,border-color .14s; } #deck-builder button:hover { background:#22222b; border-color:#64616d; } #deck-builder button:active { background:#303039; } #deck-builder button:disabled { opacity:.45; cursor:not-allowed; } #deck-builder #db-favorite { width:32px; min-height:44px; height:44px; margin:0; padding:6px; background:transparent; border:0; box-shadow:none; vertical-align:middle; color:var(--db-muted); } #deck-builder #db-favorite:hover { color:#e0bf61; } #deck-builder #db-favorite[aria-pressed="true"] { color:var(--db-accent); } #deck-builder :focus-visible { outline:2px solid #70dcff; outline-offset:3px; } #deck-builder .db-primary { background:var(--db-accent); border-color:var(--db-accent); color:#16140d; } #deck-builder .db-primary:hover { background:#dfc16a; } #deck-builder #db-save { background:#32b9ee; border-color:#32b9ee; color:#071923; } #deck-builder #db-save:hover { background:#70dcff; border-color:#70dcff; } #deck-builder h2,#deck-builder h3,#deck-builder p { margin:0; } #deck-builder h2 { font-size:16px; font-weight:750; } #deck-builder h3 { font-size:14px; } #deck-builder a { color:var(--db-accent); } #deck-builder .db-back { display:inline-block; color:var(--db-muted); margin-bottom:12px; text-decoration:none; } #deck-builder .db-header { display:flex; align-items:center; gap:8px; margin-bottom:20px; } #deck-builder .db-heading { flex:1; min-width:140px; } #deck-builder #db-title { width:100%; background:transparent; font-size:26px; font-weight:750; padding:0 4px; border:1px solid transparent; } #deck-builder #db-title:hover { border-color:var(--db-border); } #deck-builder #db-save-state { font-size:12px; color:var(--db-muted); min-height:21px; padding-left:4px; } #deck-builder .db-workspace { display:grid; grid-template-columns:minmax(0,26fr) minmax(0,50fr) minmax(0,24fr); gap:16px; align-items:start; } #deck-builder .db-panel { background:var(--db-panel); border:1px solid var(--db-border); border-radius:10px; padding:16px; min-width:0; } #deck-builder .db-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:44px; margin-bottom:12px; } #deck-builder .db-panel-heading span,#deck-builder .db-muted,#deck-builder .db-footnote { color:var(--db-muted); font-size:12px; font-weight:400; } #deck-builder #db-deck-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } #deck-builder .db-history-buttons { display:flex; gap:4px; } #deck-builder .db-history-buttons button { width:44px; padding:0; font-size:24px; } #deck-builder #db-query { width:100%; } #deck-builder .db-search-options { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:12px 0; font-size:12px; } #deck-builder .db-search-options label:first-child { flex:1; } #deck-builder .db-search-options select { width:100%; margin-top:4px; } #deck-builder .db-check { display:inline-flex; align-items:center; gap:8px; min-height:44px; } #deck-builder input[type=checkbox] { width:18px; height:18px; min-height:18px; accent-color:var(--db-accent); flex:none; padding:0; } #deck-builder .db-result { display:grid; grid-template-columns:42px minmax(0,1fr) 44px; gap:8px; align-items:center; padding:12px 0; border-bottom:1px solid var(--db-border); } #deck-builder .db-result img,#deck-builder .db-thumb { width:42px; height:59px; object-fit:contain; border-radius:3px; background:var(--db-raised); } #deck-builder .db-result-name { padding:0; background:transparent; border:0; text-align:left; line-height:1.4; overflow-wrap:anywhere; } #deck-builder .db-result small { display:block; color:var(--db-muted); line-height:1.5; } #deck-builder .db-add { padding:0; width:44px; font-size:22px; } #deck-builder #db-load-more { width:100%; margin-top:12px; } #deck-builder .db-search-footer { display:flex; flex-direction:column; gap:8px; padding-top:16px; } #deck-builder .db-deck-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-bottom:12px; border-bottom:1px solid var(--db-border); } #deck-builder .db-deck-tools select { margin-left:auto; max-width:160px; } #deck-builder .db-section { margin-top:20px; } #deck-builder .db-section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; } #deck-builder .db-section-heading h3 span { color:var(--db-muted); font-weight:400; margin-left:8px; } #deck-builder .db-row { display:grid; grid-template-columns:34px minmax(0,1fr) 56px 44px; gap:8px; align-items:center; border-top:1px solid #24242c; padding:10px 0; } #deck-builder .db-row .db-thumb { width:34px; height:48px; } #deck-builder .db-row-name { overflow-wrap:anywhere; font-weight:650; } #deck-builder .db-row-name button { padding:0; border:0; background:transparent; text-align:left; min-height:24px; } #deck-builder .db-row-meta { color:var(--db-muted); font-size:11px; overflow-wrap:anywhere; } #deck-builder .db-row input[type=number] { width:56px; padding:8px; } #deck-builder .db-row-menu { position:relative; padding:0; width:44px; font-size:0!important; } #deck-builder .db-row-menu::after { content:''; position:absolute; inset:0; margin:auto; width:16px; height:16px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='1.5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Ccircle cx='19' cy='12' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat; } #deck-builder .db-row[draggable=true] { cursor:grab; } #deck-builder .db-row.db-selected { background:#ffffff08; } #deck-builder .db-empty { padding:20px 8px; text-align:center; color:var(--db-muted); font-size:13px; } #deck-builder .db-empty button { margin-top:12px; } #deck-builder .db-footnote { padding-top:24px; line-height:1.6; } #deck-builder .db-notice { padding:12px 16px; border:1px solid #8f7739; border-radius:8px; background:#292318; margin-bottom:16px; overflow-wrap:anywhere; } #deck-builder .db-notice button { margin:8px 8px 0 0; } #deck-builder #db-warning { opacity:1; transition:none; } #deck-builder #db-warning.db-notice-fading { opacity:0; transition:opacity 1.2s ease; pointer-events:none; } @media (prefers-reduced-motion:reduce) { #deck-builder #db-warning.db-notice-fading { transition:none; } } @media (prefers-reduced-motion:no-preference) { body:has(#deck-builder) .dc-command-dialog[open] { animation-duration:80ms; } } #deck-builder .db-bulk { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 0; } #deck-builder .db-tabs { display:none; gap:8px; margin-bottom:16px; } #deck-builder .db-tabs button[aria-pressed=true] { color:var(--db-accent); border-color:transparent; } #deck-builder .db-metric { margin-bottom:20px; } #deck-builder .db-big-number { font-size:32px; font-weight:750; font-variant-numeric:tabular-nums; } #deck-builder .db-big-number small { font-size:14px; color:var(--db-muted); font-weight:400; } #deck-builder .db-stat-line { display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-variant-numeric:tabular-nums; } #deck-builder .db-stat-block { border-top:1px solid var(--db-border); margin-top:16px; padding-top:16px; } #deck-builder .db-curve { display:flex; height:104px; align-items:end; gap:5px; margin:16px 0 24px; } #deck-builder .db-curve-column { flex:1; text-align:center; min-width:0; color:var(--db-muted); font-size:10px; } #deck-builder .db-curve-bar { min-height:2px; background:#a88b45; border-radius:3px 3px 0 0; margin:3px 0; } #deck-builder .db-warnings { padding-left:16px; font-size:12px; color:#d9c38b; line-height:1.65; } #deck-builder .db-warnings li { margin-bottom:8px; } #deck-builder dialog { color:var(--db-text); background:var(--db-panel); border:1px solid #55515f; border-radius:12px; padding:24px; width:min(680px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow:auto; } #deck-builder dialog::backdrop { background:#000b; } #deck-builder .db-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; } #deck-builder .db-dialog-heading h2 { font-size:22px; } #deck-builder #db-dialog-close { width:44px; flex:none; font-size:24px; padding:0; } #deck-builder .db-form { display:grid; gap:16px; } #deck-builder .db-form label { display:grid; gap:6px; } #deck-builder .db-form textarea { min-height:220px; width:100%; resize:vertical; } #deck-builder .db-dialog-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; } #deck-builder .db-dialog-grid { display:grid; gap:8px; grid-template-columns:1fr 1fr; } #deck-builder .db-dialog-error { color:#ffa8a8; white-space:pre-wrap; padding:8px 0; } #deck-builder .db-version-history { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px; } #deck-builder .db-version-history li { min-width:0; border-top:1px solid var(--db-border); padding-top:12px; } #deck-builder .db-version-history-heading { display:flex; gap:8px; align-items:start; } #deck-builder .db-version-history-heading [data-version] { flex:1; text-align:left; overflow-wrap:anywhere; } #deck-builder .db-version-history-heading [data-history-rename] { flex:none; } #deck-builder .db-version-history-heading small { display:block; color:var(--db-muted); font-size:12px; margin-top:3px; font-weight:400; } #deck-builder .db-version-name-form { display:grid; gap:8px; margin-top:12px; } #deck-builder .db-version-name-form input { width:100%; font-size:16px; } #deck-builder .db-version-name-form .db-dialog-actions { margin-top:0; } #deck-builder .db-version-history [role=status] { font-size:12px; overflow-wrap:anywhere; margin-top:8px; } #deck-builder .db-version-history [role=status]:empty { display:none; } @media(max-width:400px) { #deck-builder .db-version-history-heading { flex-wrap:wrap; } #deck-builder .db-version-history-heading [data-version] { flex-basis:100%; } } #deck-builder .db-preview-list { max-height:260px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; background:var(--db-raised); padding:12px; border-radius:8px; } #deck-builder .db-card-preview { display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:20px; align-items:start; } #deck-builder .db-card-preview > div { min-width:0; overflow-wrap:anywhere; } #deck-builder .db-card-preview img:not(.db-card-symbol) { display:block; width:100%; height:auto; border-radius:5% / 3.6%; } #deck-builder .db-card-preview p { white-space:pre-wrap; overflow-wrap:anywhere; margin-bottom:12px; } #deck-builder img.db-card-symbol { display:inline-block; width:1.15em; height:1.15em; margin:0 .04em; border-radius:0; vertical-align:-.15em; object-fit:contain; } #deck-builder .db-card-prices { margin:16px 0; padding-top:12px; border-top:1px solid var(--db-border); } #deck-builder .db-card-prices h4 { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 10px; font-size:13px; font-weight:650; } #deck-builder .db-card-prices h4 span { font-size:11px; color:var(--db-muted); font-weight:400; } #deck-builder .db-card-prices dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,90px),1fr)); gap:12px; margin:0; } #deck-builder .db-card-prices dt { font-size:12px; color:var(--db-muted); } #deck-builder .db-card-prices dd { margin:3px 0 0; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } #deck-builder .db-card-prices .db-muted { margin:10px 0 0; font-size:11px; line-height:1.5; } #deck-builder .db-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Visual deck page: art header, compact tools, preview rail and grouped cards. */ #deck-builder[data-auth=pending] > * { visibility:hidden; } #deck-builder[data-auth=pending]::before { content:'Checking your account…'; position:absolute; padding:24px; color:var(--db-muted); } #deck-builder .db-header { position:relative; isolation:isolate; min-height:174px; padding:28px 24px; margin-bottom:18px; flex-wrap:wrap; border-radius:10px; overflow:hidden; background:#1b1915; } #deck-builder .db-cover { position:absolute; inset:0; z-index:-1; } #deck-builder .db-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#0a0a0cee 0%,#0a0a0cbb 45%,#0a0a0c33 100%); } #deck-builder .db-cover img { width:100%; height:100%; object-fit:cover; object-position:center 35%; } #deck-builder .db-heading { flex:1 1 320px; } #deck-builder #db-title { font-size:32px; line-height:1.2; text-shadow:0 1px 8px #000; } #deck-builder #db-save-state { color:#d2cfdc; margin-top:8px; } #deck-builder .db-tabs { display:flex; border-bottom:1px solid var(--db-border); padding-bottom:12px; } #deck-builder .db-tabs button { display:inline-flex; align-items:center; justify-content:center; text-align:center; white-space:nowrap; border-color:transparent; background:transparent; border-radius:5px; } #deck-builder .db-tabs button[aria-pressed=true] { background:#c9a84c13; } #deck-builder .db-combos-ideas { margin-top:32px; padding:clamp(14px,2vw,24px); border:1px solid #8973c066; border-radius:14px; background:#211b30; } #deck-builder .db-combos-ideas-heading { margin-bottom:20px; } #deck-builder .db-combos-ideas-heading > span { color:#ccb8ff; font-size:12px; } #deck-builder .db-combos-ideas-heading h2 { margin:6px 0; } #deck-builder .db-combos-ideas-heading p { max-width:65ch; color:#bbb2cc; } #deck-builder .db-combos-ideas .db-combo-suggestion { background:#15121e; border-color:#8973c044; } #deck-builder .db-workspace { grid-template-columns:220px minmax(0,1fr); gap:20px 28px; } #deck-builder .db-search { grid-column:1/-1; padding:0 0 16px; background:transparent; border:0; border-radius:0; } #deck-builder .db-search-top { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:start; } #deck-builder #db-add-options-toggle { display:none; } #deck-builder #db-add-options { display:contents; } #deck-builder .db-search-field { grid-column:1; grid-row:1; position:relative; min-width:0; } #deck-builder #db-query { min-width:0; width:100%; } #deck-builder .db-search-field:has(#db-search-dropdown:not([hidden])) #db-query { border-bottom-left-radius:0; border-bottom-right-radius:0; } #deck-builder .db-search-field:has(#db-search-dropdown:not([hidden])) #db-query:focus-visible { outline-offset:-3px; } #deck-builder #db-search-dropdown { position:absolute; top:100%; inset-inline:0; z-index:40; padding:12px; max-height:min(440px,var(--db-search-room,440px)); overflow:auto; overscroll-behavior:contain; background:var(--db-raised); border:1px solid var(--db-border); border-top:0; border-radius:0 0 8px 8px; box-shadow:0 12px 24px #0005; scrollbar-width:thin; scrollbar-color:#686471 transparent; } #deck-builder #db-search-dropdown #db-search-count { display:block; margin-bottom:4px; } #deck-builder #db-search-dropdown .db-result:last-child { border-bottom:0; } #deck-builder #db-search-dropdown .db-result-name { min-height:32px; } #deck-builder #db-import { grid-column:2; grid-row:1; } #deck-builder #db-manual { grid-column:3; grid-row:1; } #deck-builder #db-import-package { grid-column:3; grid-row:2; } #deck-builder .db-search-options { display:flex; grid-column:1/3; grid-row:2; gap:16px; margin:0; min-width:0; } #deck-builder .db-search-options label:first-child { flex:none; display:flex; align-items:center; gap:8px; } #deck-builder .db-search-options select { margin:0; width:auto; } #deck-builder #db-search-status { margin-top:4px; } #deck-builder #db-search-status:empty { display:none; } #deck-builder #db-results { display:grid; grid-template-columns:minmax(0,1fr); gap:0; } #deck-builder .db-deck { padding:0; border:0; background:transparent; border-radius:0; } #deck-builder .db-deck>.db-panel-heading { margin-bottom:6px; } #deck-builder .db-deck-tools { gap:10px; align-items:end; } #deck-builder .db-display-control { display:grid; gap:3px; color:var(--db-muted); font-size:11px; } #deck-builder .db-display-control select { margin:0; max-width:150px; font-size:13px; } #deck-builder .db-deck-tools .db-check { margin-right:auto; } #deck-builder .db-inspector { position:sticky; top:24px; min-width:0; } #deck-builder #db-inspect-open { display:block; padding:0; border:0; width:100%; aspect-ratio:63/88; border-radius:10px; overflow:hidden; background:var(--db-panel); } #deck-builder #db-inspect-open:disabled { opacity:1; } #deck-builder #db-inspect-image { width:100%; height:100%; object-fit:contain; display:block; } #deck-builder #db-inspect-empty { display:block; padding:28px; color:var(--db-muted); font-weight:400; } #deck-builder #db-inspect-name { margin:14px 0 6px; overflow-wrap:anywhere; } #deck-builder #db-inspect-edit { width:100%; margin-top:14px; } #deck-builder .db-section { margin-top:20px; } #deck-builder .db-section-heading { margin-bottom:4px; } #deck-builder .db-group-heading { margin:14px 0 4px; font-size:14px; font-weight:700; padding-bottom:6px; border-bottom:1px solid var(--db-border); } #deck-builder .db-group-heading span { color:var(--db-muted); font-weight:400; margin-left:6px; } #deck-builder .db-card-image { display:block; padding:0; border:0; background:transparent; line-height:0; min-height:0; } #deck-builder .db-card-image img { display:block; } /* Deck thumbnails use a flat paint surface. The shared foil's hidden 3D backfaces can leave artwork unpainted until a hover invalidates the layer. */ #deck-builder .db-card-image.foil-card-frame { transform-style:flat; backface-visibility:visible; -webkit-backface-visibility:visible; } #deck-builder .db-card-image.foil-card-frame img { backface-visibility:visible; -webkit-backface-visibility:visible; } #deck-builder .db-card-image[data-artwork-ready=false]::before,#deck-builder .db-card-image[data-artwork-ready=false]::after { display:none; } #deck-builder .db-card-badges { display:none; } #deck-builder[data-layout=visual] .db-card-group { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr)); gap:0 6px; align-items:start; padding-top:4px; } #deck-builder[data-layout=visual] .db-row { position:relative; display:block; aspect-ratio:63/38; border:0; padding:0; min-width:0; background:none; } #deck-builder[data-layout=visual] .db-row:last-child { aspect-ratio:63/88; } #deck-builder[data-layout=visual] .db-card-image { position:absolute; inset:0 0 auto; width:100%; aspect-ratio:63/88; border-radius:7px; overflow:hidden; box-shadow:0 -2px 5px #0009; } #deck-builder[data-layout=visual] .db-card-image .db-thumb { width:100%; height:100%; object-fit:contain; border-radius:7px; } #deck-builder[data-layout=visual] .db-row-name,#deck-builder[data-layout=visual] .db-row input[type=number] { display:none; } #deck-builder[data-layout=visual] .db-row-menu { position:absolute; top:26px; right:4px; z-index:2; width:36px; min-height:32px; padding:0; background:#111115ed; box-shadow:0 2px 6px #0007; opacity:0; } #deck-builder[data-layout=visual] .db-row:hover .db-row-menu,#deck-builder[data-layout=visual] .db-row:focus-within .db-row-menu { opacity:1; } #deck-builder[data-layout=visual] .db-card-badges { position:absolute; top:28px; left:4px; right:44px; pointer-events:none; display:flex; flex-wrap:wrap; gap:3px; } #deck-builder[data-layout=visual] .db-card-badges span { padding:1px 5px; font-size:11px; font-weight:750; border-radius:4px; color:var(--db-text); background:#111115ec; overflow-wrap:anywhere; } #deck-builder[data-layout=visual] .db-card-badges .db-selected-badge { color:#16140d; background:var(--db-accent); } #deck-builder .db-mana-settings summary,#deck-builder .db-tag-settings summary { cursor:pointer; min-height:32px; padding:4px 0; color:var(--db-accent); } #deck-builder .db-mana-settings[open] { display:grid; } #deck-builder .db-mana-settings label,#deck-builder .db-mana-settings p { margin:8px 0; } @media (hover:none), (pointer:coarse) { #deck-builder[data-layout=visual] .db-row-menu { opacity:1; width:44px; min-height:44px; } } #deck-builder:is([data-view=list],[data-view=condensed]) .db-card-image { width:34px; } #deck-builder .db-stats { grid-column:1/-1; display:none; } #deck-builder[data-panel=stats] .db-stats { display:block; } #deck-builder[data-panel=stats] .db-search,#deck-builder[data-panel=stats] .db-inspector,#deck-builder[data-panel=stats] .db-deck { display:none; } #deck-builder #db-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } #deck-builder .db-account-gate { max-width:560px; margin:64px auto; padding:28px; text-align:center; } #deck-builder .db-account-gate h1 { font-size:28px; line-height:1.25; } #deck-builder .db-account-gate p { margin:18px 0 24px; color:var(--db-muted); } #deck-builder .db-account-gate button { margin:4px; } #deck-builder .db-account-gate a { display:block; margin-top:22px; } @container (max-width:900px) { #deck-builder .db-workspace { grid-template-columns:170px minmax(0,1fr); gap:20px; } #deck-builder .db-header .db-heading { flex-basis:100%; } #deck-builder .db-header { padding:20px; } } @container (max-width:679px) { #deck-builder .db-workspace { display:block; } #deck-builder .db-inspector { display:none; } #deck-builder .db-tabs { gap:4px; overflow-x:auto; } #deck-builder .db-tabs button { flex:1 0 auto; min-width:max-content; padding-inline:6px; } #deck-builder .db-search { display:block; } #deck-builder .db-search-top { grid-template-columns:repeat(2,minmax(0,1fr)); } #deck-builder .db-search-field { grid-column:1/-1; grid-row:1; } #deck-builder #db-add-options-toggle { display:flex; align-items:center; justify-content:space-between; grid-column:1/-1; grid-row:2; width:100%; } #deck-builder #db-add-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; grid-column:1/-1; grid-row:3; min-width:0; } #deck-builder #db-add-options-toggle[aria-expanded=false] + #db-add-options { display:none; } #deck-builder #db-import { grid-column:1; grid-row:1; } #deck-builder #db-manual { grid-column:2; grid-row:1; } #deck-builder #db-import-package { grid-column:2; grid-row:2; } #deck-builder .db-search-options { grid-column:1/-1; grid-row:3; } #deck-builder #db-stats { display:block; } #deck-builder .db-display-control { flex:1; } #deck-builder .db-display-control select { width:100%; max-width:none; font-size:14px; } #deck-builder .db-deck-tools .db-check { flex-basis:100%; } #deck-builder #db-bulk-text { flex-basis:100%; } #deck-builder #db-title { font-size:26px; } #deck-builder .db-heading { min-width:0; } #deck-builder .db-header { gap:6px; padding:20px 12px; } #deck-builder #db-format { width:100%; flex-basis:100%; } #deck-builder input,#deck-builder textarea { font-size:16px; } #deck-builder .db-row { grid-template-columns:34px minmax(0,1fr) 52px 44px; gap:5px; } #deck-builder[data-layout=visual] .db-card-group { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:6px; } #deck-builder .db-account-gate { margin:24px auto; padding:16px 0; } } @media (max-width:767px) { .builder-shell.page-shell { padding:16px; } #deck-builder .db-card-preview { grid-template-columns:minmax(0,1fr); } #deck-builder .db-card-preview img:not(.db-card-symbol) { width:auto; max-width:100%; max-height:330px; margin-inline:auto; } #deck-builder .db-dialog-grid { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { #deck-builder *,#deck-builder *::before,#deck-builder *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } } #deck-builder .db-context { position:fixed; inset:auto; margin:0; width:320px; max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); overflow:auto; box-sizing:border-box; border:1px solid var(--db-border); border-radius:10px; padding:14px; color:var(--db-text); background:var(--db-panel); box-shadow:0 12px 40px #0009; } #deck-builder .db-context:popover-open { animation:db-context-in 130ms ease-out; } #deck-builder .db-context::backdrop { background:transparent; } #deck-builder .db-context-heading { display:flex; align-items:center; gap:10px; margin-bottom:10px; } #deck-builder .db-context-heading h2 { flex:1; margin:0; font-size:14px; line-height:1.4; } #deck-builder #db-context-close { flex:none; width:32px; min-height:32px; padding:0; font-size:22px; } #deck-builder .db-context .db-dialog-grid { grid-template-columns:1fr 1fr; gap:6px; } #deck-builder .db-context .db-form { gap:10px; } #deck-builder .db-context .db-form p { margin:0; font-size:11px; } #deck-builder #db-row-mana-reset { margin-top:12px; } #deck-builder .db-context .db-footnote { font-size:11px; margin:10px 0 0; } @keyframes db-context-in { from { opacity:0; transform:translateY(-4px) scale(.98); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce) { #deck-builder .db-context:popover-open { animation:none; } } #deck-builder #db-stats { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; } #deck-builder #db-stats h3 { margin:0 0 12px; font-size:16px; } #deck-builder .db-stats-summary { grid-column:1/-1; display:grid; grid-template-columns:150px 1fr; align-items:center; column-gap:30px; border-bottom:1px solid var(--db-border); padding:8px 0 24px; } #deck-builder .db-stats-summary > p { grid-column:2; margin:0; } #deck-builder .db-composition { position:relative; width:140px; height:140px; border-radius:50%; display:grid; place-content:center; text-align:center; grid-row:span 2; background:conic-gradient(#81b8e6 0deg 100deg,#c9a84c 100deg 360deg); } #deck-builder .db-composition::before { content:''; position:absolute; inset:23px; border-radius:50%; background:var(--db-panel); } #deck-builder .db-composition > strong,#deck-builder .db-composition > span { position:relative; } #deck-builder .db-composition strong { font-size:30px; line-height:1.15; } #deck-builder .db-composition span { font-size:12px; color:var(--db-muted); } #deck-builder .db-summary-numbers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } #deck-builder .db-summary-numbers strong { display:block; font-size:30px; } #deck-builder .db-summary-numbers span { font-size:12px; color:var(--db-muted); } #deck-builder .db-visual-curve { display:flex; gap:8px; height:238px; align-items:end; padding-top:16px; border-bottom:1px solid var(--db-border); background:repeating-linear-gradient(to top,transparent 0px,transparent 59px,#ffffff08 59px,#ffffff08 60px); } #deck-builder .db-visual-curve button { flex:1; padding:0 3px; background:transparent; border:1px solid transparent; border-radius:5px 5px 0 0; display:flex; flex-direction:column; gap:6px; font-size:11px; } #deck-builder .db-visual-curve button[aria-pressed=true] { border-color:var(--db-accent); background:#c9a84c15; } #deck-builder .db-curve-stack { height:180px; width:100%; display:flex; flex-direction:column; justify-content:end; } #deck-builder .db-curve-segment { position:relative; display:block; width:100%; overflow:hidden; } #deck-builder .db-curve-segment .pchart-canvas { clip-path:none; } #deck-builder .db-curve-segment.is-particle-ready { background:transparent!important; } #deck-builder .db-chart-legend { display:flex; justify-content:center; gap:20px; font-size:12px; color:var(--db-muted); } #deck-builder .db-chart-legend i { display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:2px; } #deck-builder .db-stat-card-list { max-height:320px; overflow:auto; display:grid; gap:4px; } #deck-builder .db-stat-card-list button { display:grid; grid-template-columns:24px 1fr auto; text-align:left; gap:8px; border:0; padding:8px; } #deck-builder .db-stat-card-list small { color:var(--db-muted); } #deck-builder .db-color-section { grid-column:1/-1; border-block:1px solid var(--db-border); padding:24px 0; } #deck-builder .db-color-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; margin:24px 0; } #deck-builder .db-color-stat { text-align:center; } #deck-builder .db-mana-symbol { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--mana-color); color:#141218; font-size:20px; font-weight:800; } #deck-builder .db-color-stat h4 { font-size:12px; margin:8px 0; color:var(--db-muted); } #deck-builder .db-color-stat > strong { display:block; font-size:28px; line-height:1.2; } #deck-builder .db-color-stat small { font-size:10px; color:var(--db-muted); display:block; } #deck-builder .db-color-stat p { font-size:12px; margin:14px 0 6px; } #deck-builder .db-stat-track { display:block; position:relative; height:14px; background:#ffffff07; border:1px solid var(--db-border); border-radius:4px; overflow:hidden; margin:6px 0; } #deck-builder .db-stat-fill { height:100%; display:block; } #deck-builder .db-stat-track.is-particle-ready > .db-stat-fill { opacity:0; } #deck-builder .db-role { margin:0 0 14px; } @container (max-width:679px) { #deck-builder #db-stats { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; } #deck-builder .db-stats-summary { grid-template-columns:100px 1fr; gap:16px; } #deck-builder .db-composition { width:100px; height:100px; } #deck-builder .db-composition::before { inset:17px; } #deck-builder .db-summary-numbers { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #deck-builder .db-summary-numbers strong { font-size:24px; } #deck-builder .db-stats-summary > p { grid-column:1/-1; } #deck-builder .db-color-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; } #deck-builder .db-visual-curve { gap:3px; } #deck-builder .db-stat-card-list { max-height:240px; } } #deck-builder .db-mana-symbol img { width:100%; height:100%; display:block; } #deck-builder[data-layout=visual] .db-image-missing .db-thumb { opacity:.2; } #deck-builder[data-layout=visual] .db-image-missing .db-row-name { display:block; position:absolute; top:4px; left:5px; right:5px; padding:0; font-size:12px; line-height:1.3; pointer-events:none; } #deck-builder[data-layout=visual] .db-image-missing .db-row-name button { font-size:12px; } #deck-builder[data-layout=visual] .db-image-missing .db-row-meta { display:none; } #deck-builder .foil-card-frame { will-change:auto; } @media (hover:hover) and (pointer:fine) { #deck-builder .db-card-image.foil-card-frame.db-is-foil::before { background-image:repeating-linear-gradient(110deg,#d875ff 0%,#7a95ff 7%,#85fff7 14%,#a8ff61 21%,#ffed61 28%,#ff7a75 35%,#d875ff 42%); background-size:400% 400%; background-position:var(--deck-holo-x,50%) var(--deck-holo-y,50%); mix-blend-mode:color-dodge; filter:saturate(.65) contrast(1.15); transform:none; opacity:.16; transition:opacity 180ms ease; } #deck-builder .db-card-image.foil-card-frame.db-is-foil::after { background:radial-gradient(ellipse at var(--deck-holo-x,50%) var(--deck-holo-y,50%),#fff8 0%,#fff2 20%,transparent 55%); mix-blend-mode:screen; transform:none; opacity:.16; transition:opacity 180ms ease; } #deck-builder .db-row:hover .db-card-image.foil-card-frame.db-is-foil::before { opacity:.32; } #deck-builder .db-row:hover .db-card-image.foil-card-frame.db-is-foil::after { opacity:.38; } } #deck-builder .db-preview-foil { border-radius:10px; line-height:0; } #deck-builder .db-preview-foil img { display:block; } #deck-builder .db-image-missing .foil-card-frame::before,#deck-builder .db-image-missing .foil-card-frame::after { display:none; } @media (prefers-reduced-motion:reduce), (hover:none), (pointer:coarse) { #deck-builder .foil-card-frame,#deck-builder .foil-card-frame img { transform:none; filter:none; } #deck-builder .foil-card-frame::before,#deck-builder .foil-card-frame::after { display:none; } } #deck-builder .db-tag-settings label { margin-top:8px; } /* Inline card inspection and the visual printing picker share the card menu. */ #deck-builder .db-inspect-heading { display:flex; align-items:center; gap:8px; margin-top:12px; } #deck-builder .db-inspect-heading h2 { flex:1; margin:0; } #deck-builder #db-inspect-edit { width:44px; margin:0; padding:0; flex:none; } #deck-builder #db-inspect-close { display:none; } #deck-builder #db-inspect-detail,#deck-builder #db-inspect-print { margin:8px 0; } #deck-builder #db-inspect-oracle { white-space:pre-line; margin:10px 0; font-size:12px; } #deck-builder .db-inspect-copy summary { cursor:pointer; padding:8px 0; } #deck-builder #db-inspect-flip,#deck-builder #db-inspect-add { width:100%; margin-top:8px; } #deck-builder dialog.db-printing-dialog { width:min(90vw,1020px); height:min(880px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px); padding:20px; overflow:hidden; } #deck-builder .db-printing-dialog .db-dialog-heading { margin-bottom:8px; } #deck-builder .db-printing-dialog #db-dialog-body { height:calc(100% - 60px); min-height:0; } #deck-builder .db-printing-picker { height:100%; display:flex; flex-direction:column; gap:12px; min-height:0; } #deck-builder .db-print-header { flex:none; } #deck-builder .db-print-header p { margin:6px 0 10px; } #deck-builder #db-print-back { min-height:32px; padding:4px 8px; background:none; } #deck-builder .db-print-filter { display:grid; gap:4px; font-size:12px; color:var(--db-muted); } #deck-builder .db-print-results { flex:1; min-height:0; overflow:auto; padding:2px 4px 12px; scrollbar-gutter:stable; } #deck-builder .db-print-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; align-items:start; } #deck-builder .db-print-tile { display:flex; flex-direction:column; padding:6px; gap:5px; min-width:0; text-align:left; background:transparent; border:1px solid var(--db-border); border-radius:9px; transition:background 180ms ease,border-color 180ms ease,box-shadow 180ms ease; } #deck-builder .db-print-tile:hover { background:var(--db-raised); } #deck-builder .db-print-tile[aria-pressed=true] { border-color:var(--db-border); background:#ffffff08; box-shadow:none; } #deck-builder .db-print-art { position:relative; display:block; flex:none; width:100%; aspect-ratio:63/88; border-radius:7px; background:var(--db-raised); overflow:hidden; } #deck-builder .db-print-art img { display:block; width:100%; height:100%; object-fit:contain; } #deck-builder .db-print-tile strong { font-size:13px; line-height:1.4; overflow-wrap:anywhere; } #deck-builder .db-print-tile small { color:var(--db-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; } #deck-builder .db-print-badges { position:absolute; inset:6px 6px auto; display:flex; flex-wrap:wrap; gap:4px; } #deck-builder .db-print-badges > span { padding:3px 6px; border-radius:4px; background:#16140df2; color:#f1d788; font-size:11px; } #deck-builder .db-print-badges .db-print-selected { display:none; } #deck-builder .db-print-tile[aria-pressed=true] .db-print-selected { display:inline; } #deck-builder .db-print-footer { flex:none; display:flex; gap:12px; align-items:center; justify-content:space-between; border-top:1px solid var(--db-border); padding-top:12px; background:var(--db-panel); min-height:70px; } #deck-builder .db-print-footer > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; flex:none; max-width:100%; } #deck-builder .db-print-footer { flex-wrap:wrap; } #deck-builder .db-print-finish { display:flex; align-items:center; gap:8px; font-size:12px; } #deck-builder .db-print-finish[hidden] { display:none; } #deck-builder .db-print-finish select { min-height:44px; min-width:100px; width:auto; } #deck-builder #db-print-choice { font-size:12px; overflow-wrap:anywhere; } #deck-builder .db-print-actions { display:grid; gap:8px; } #deck-builder .db-print-actions button { text-align:left; } #deck-builder .db-print-actions small { display:block; color:var(--db-muted); font-size:12px; font-weight:400; margin-top:4px; } #deck-builder .db-print-skips { margin-top:16px; } #deck-builder .db-print-skips ul { max-height:240px; overflow:auto; font-size:13px; padding-left:20px; } #deck-builder .db-print-price { margin-top:16px; } @media(max-width:1199px) { #deck-builder .db-print-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:899px) { #deck-builder .db-print-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:599px) { #deck-builder dialog.db-printing-dialog { width:calc(100vw - 20px); height:calc(100dvh - 24px); max-height:calc(100dvh - 24px); padding:14px; } #deck-builder .db-print-grid { gap:12px; } #deck-builder .db-print-footer { flex-direction:column; align-items:stretch; gap:8px; } #deck-builder .db-print-footer > div { flex:none; display:grid; grid-template-columns:1fr; gap:6px; } #deck-builder .db-print-tile strong { font-size:12px; } #deck-builder .db-print-tile small { font-size:11px; } } @media(max-width:359px) { #deck-builder .db-print-grid { grid-template-columns:1fr; } } @media(prefers-reduced-motion:reduce) { #deck-builder .db-print-tile { transition:none; } } #deck-builder .db-illegal { color:#efb184; } @container (max-width:679px) { #deck-builder [data-action=preview] { cursor:default; } } @media (hover:none), (pointer:coarse) { #deck-builder .db-inspector { display:none; } #deck-builder [data-action=preview] { cursor:default; } } @media (max-width:540px) { #deck-builder .db-print-footer { flex-direction:column; align-items:stretch; gap:6px; } } #deck-builder .db-bulk { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:20; max-width:calc(100vw - 24px); width:max-content; padding:10px 14px; border:1px solid var(--db-accent); border-radius:10px; background:var(--db-panel); box-shadow:0 8px 28px #0008; } #deck-builder #db-rows,#deck-builder .db-inspector { overflow-anchor:none; } #deck-builder .db-card-image.foil-card-frame,#deck-builder #db-inspect-open.foil-card-frame { transform:none; } #deck-builder .db-card-image.foil-card-frame img,#deck-builder #db-inspect-open.foil-card-frame img { transform:none; } @media (hover:hover) and (pointer:fine) { #deck-builder[data-layout=visual] .db-row { transition:transform 150ms ease,box-shadow 150ms ease; transform-origin:center center; } #deck-builder[data-layout=visual] .db-row:hover { transform:translateY(-3px); z-index:10; } #deck-builder[data-layout=visual] .db-row:hover .db-card-image { width:calc(100% + 4px); left:-2px; box-shadow:0 7px 16px #0007; } #deck-builder[data-layout=visual] .db-row:hover .db-card-image.foil-card-frame { transform:translate(var(--db-hover-x,0px),var(--db-hover-y,0px)); } } @media (prefers-reduced-motion:reduce) { #deck-builder[data-layout=visual] .db-row { transition:none; } #deck-builder[data-layout=visual] .db-row:hover { transform:none; } #deck-builder[data-layout=visual] .db-row:hover .db-card-image { width:100%; left:0; } #deck-builder[data-layout=visual] .db-row:hover .db-card-image.foil-card-frame { transform:none; } } #deck-builder .db-header { display:block; min-height:240px; padding:28px 32px; border-radius:12px; margin-bottom:0; } #deck-builder .db-cover::after { background:linear-gradient(90deg,#0a0a0ce8 0%,#0a0a0cb3 40%,#0a0a0c22 100%),linear-gradient(0deg,#0a0a0c88,transparent 55%); } #deck-builder .db-owner-line { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; color:#e4d7a9; margin-bottom:14px; } #deck-builder #db-owner-avatar { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; border:1px solid #c9a84c88; background:#19170f; } #deck-builder #db-title { font-size:clamp(28px,3.5vw,44px); padding:0; line-height:1.2; } #deck-builder .db-hero-meta { display:flex; align-items:center; gap:12px; margin-top:12px; font-size:12px; color:#e2deeb; } #deck-builder #db-format { min-height:36px; padding:4px 10px; font-size:12px; border-radius:6px; background:#16151ac9; } #deck-builder .db-hero-status { display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; margin-top:18px; font-size:11px; color:#ccc7d7; } #deck-builder #db-save-state { margin:0; padding:0; min-height:0; font-size:11px; } #deck-builder .db-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:16px 0; padding-bottom:12px; border-bottom:1px solid var(--db-border); } #deck-builder .db-toolbar .db-tabs { border:0; padding:0; margin:0; } #deck-builder .db-page-actions { display:flex; flex-wrap:wrap; gap:6px; } #deck-builder .db-page-actions button { font-size:12px; } #deck-builder .db-buy-link { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 10px; border:1px solid #706137; border-radius:8px; background:#c9a84c0c; text-decoration:none; font-size:12px; font-weight:700; } #deck-builder .db-buy-link:hover { background:#c9a84c22; } #deck-builder #db-inspect-buy { margin-top:14px; } #deck-builder .db-affiliate-note { display:block; margin-top:4px; text-align:center; } @container (max-width:679px) { #deck-builder .db-header { padding:22px 18px; min-height:220px; } /* Saving and date text keep their rows without moving the search controls. */ #deck-builder :is(#db-save-state,#db-updated) { flex:0 0 100%; min-height:1.5em; } #deck-builder .db-hero-meta #db-format { width:auto; flex-basis:auto; min-height:44px; } #deck-builder .db-page-actions { width:100%; } #deck-builder .db-page-actions button:not(#db-more) { flex:1; padding-inline:7px; } #deck-builder .db-toolbar .db-tabs { width:100%; } } /* Compact text mode: whole groups flow down columns; the preview stays shared. */ #deck-builder .db-type-block { display:contents; } #deck-builder:is([data-view=list],[data-view=condensed]) #db-rows { columns:230px; column-gap:24px; margin-top:20px; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-section { display:inline-block; width:100%; break-inside:avoid; margin:0 0 24px; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-section[data-section=deck] { display:contents; } #deck-builder:is([data-view=list],[data-view=condensed]):not([data-grouping=zone]) .db-section[data-section=deck] > .db-section-heading { display:none; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-type-block { display:inline-block; width:100%; break-inside:avoid; margin:0 0 24px; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-group-heading { margin:0 0 8px; padding:0; border:0; line-height:1.6; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-row { grid-template-columns:36px minmax(0,1fr) 32px; gap:4px; padding:0 2px; min-height:32px; border:0; border-radius:3px; break-inside:avoid; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-row:nth-child(odd) { background:#ffffff05; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-row:hover,#deck-builder:is([data-view=list],[data-view=condensed]) .db-row:focus-within { background:#ffffff0d; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-row.db-selected { background:#ffffff0d; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-card-image,#deck-builder:is([data-view=list],[data-view=condensed]) .db-row-meta { display:none; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-row input[type=number] { grid-column:1; grid-row:1; width:36px; min-height:32px; padding:2px; border-color:transparent; background:transparent; text-align:center; font-size:13px; border-radius:3px; appearance:textfield; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-row input[type=number]::-webkit-inner-spin-button { appearance:none; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-row input[type=number]:hover,#deck-builder:is([data-view=list],[data-view=condensed]) .db-row input[type=number]:focus { border-color:#777384; background:var(--db-raised); } #deck-builder:is([data-view=list],[data-view=condensed]) .db-row-name { grid-column:2; grid-row:1; min-width:0; font-weight:500; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-row-name button { display:block; width:100%; min-height:32px; font-size:13px; line-height:1.4; padding:5px 0; font-weight:500; border-radius:3px; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-row-menu { grid-column:3; grid-row:1; width:32px; min-height:32px; padding:0; border-color:transparent; border-radius:50%; background:transparent; color:var(--db-muted); font-size:12px; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-row-menu:hover { border-color:#777384; color:var(--db-text); } #deck-builder:is([data-view=list],[data-view=condensed]) .db-section-heading button { min-height:32px; padding:4px 8px; font-size:12px; background:transparent; } @media (hover:none), (pointer:coarse) { #deck-builder:is([data-view=list],[data-view=condensed]) .db-row { grid-template-columns:40px minmax(0,1fr) 44px; min-height:44px; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-row-name button,#deck-builder:is([data-view=list],[data-view=condensed]) .db-row input[type=number] { min-height:44px; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-row-menu { width:44px; min-height:44px; } } /* Compact card commands, with editing and printings opened on demand. */ #deck-builder .db-context.db-card-actions { width:400px; padding:8px; border-radius:5px; background:#222225; } #deck-builder .db-card-actions .db-context-heading { margin:0 4px 6px; } #deck-builder .db-action-columns { display:grid; grid-template-columns:1fr 1fr; gap:0; } #deck-builder .db-action-column { min-width:0; display:flex; flex-direction:column; } #deck-builder .db-action-column + .db-action-column { border-left:1px solid #45454b; padding-left:4px; margin-left:4px; } #deck-builder .db-action-column button, #deck-builder .db-action-column .db-buy-link { min-height:32px; width:100%; border:0; background:transparent; border-radius:2px; padding:7px 9px; text-align:left; justify-content:flex-start; font-size:12px; line-height:1.4; font-weight:500; } #deck-builder .db-action-column button:hover, #deck-builder .db-action-column .db-buy-link:hover { background:#38383e; } #deck-builder .db-action-column .db-action-danger { color:#ff9494; } #deck-builder .db-action-column hr { border:0; border-top:1px solid #45454b; width:100%; margin:5px 0; } #deck-builder .db-action-column small { padding:0 9px 5px; font-size:10px; } #deck-builder .db-card-actions.db-printing-context { width:720px; } @media (pointer:coarse) { #deck-builder .db-action-column button, #deck-builder .db-action-column .db-buy-link { min-height:44px; } } @media (max-width:359px) { #deck-builder .db-action-column button, #deck-builder .db-action-column .db-buy-link { font-size:11px; padding:7px 5px; } } /* Six views share row identity, grouping, sorting and the card inspector. */ #deck-builder[data-view=condensed] #db-rows { columns:190px; column-gap:12px; } #deck-builder[data-view=condensed] .db-type-block, #deck-builder[data-view=condensed] .db-section { margin-bottom:16px; } #deck-builder[data-view=condensed] .db-row { grid-template-columns:28px minmax(0,1fr) 28px; min-height:26px; gap:2px; } #deck-builder[data-view=condensed] .db-row-name button { min-height:26px; padding:3px 0; font-size:12px; } #deck-builder[data-view=condensed] .db-row input[type=number], #deck-builder[data-view=condensed] .db-row-menu { width:28px; min-height:26px; font-size:12px; } #deck-builder:is([data-view=stacks],[data-view=split]) #db-rows { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr)); gap:24px 18px; align-items:start; margin-top:20px; } #deck-builder:is([data-view=stacks],[data-view=split]) .db-section, #deck-builder:is([data-view=stacks],[data-view=split]) .db-type-block { display:inline-block; width:100%; break-inside:avoid; margin:0 0 24px; } #deck-builder:is([data-view=stacks],[data-view=split]):not([data-grouping=zone]) .db-section[data-section=deck] { display:contents; } #deck-builder:is([data-view=stacks],[data-view=split]):not([data-grouping=zone]) .db-section[data-section=deck] > .db-section-heading { display:none; } #deck-builder:is([data-view=stacks],[data-view=split]) .db-group-heading { margin:0 0 8px; padding:0; border:0; } #deck-builder:is([data-view=stacks],[data-view=split]) .db-card-group { display:block; padding:0; } #deck-builder:is([data-view=stacks],[data-view=split]) .db-row { aspect-ratio:63/13; min-height:36px; } #deck-builder:is([data-view=stacks],[data-view=split]) .db-row:last-child { aspect-ratio:63/88; } #deck-builder:is([data-view=stacks],[data-view=split]) .db-row-menu { top:2px; right:3px; min-height:30px; width:32px; } #deck-builder:is([data-view=stacks],[data-view=split]) .db-card-badges { top:3px; left:3px; } #deck-builder:is([data-view=stacks],[data-view=split]) .db-row:focus-within { z-index:3; } #deck-builder[data-view=spoiler] .db-card-group { grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr)); gap:14px 10px; } #deck-builder[data-view=spoiler] .db-row { aspect-ratio:63/88; } @container (max-width:679px) { #deck-builder:is([data-view=stacks],[data-view=split]) #db-rows { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:8px; } #deck-builder[data-view=spoiler] .db-card-group { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (hover:none), (pointer:coarse) { #deck-builder[data-view=condensed] .db-row { grid-template-columns:40px minmax(0,1fr) 44px; min-height:44px; } #deck-builder[data-view=condensed] .db-row-name button, #deck-builder[data-view=condensed] .db-row input[type=number], #deck-builder[data-view=condensed] .db-row-menu { min-height:44px; } #deck-builder[data-view=condensed] .db-row input[type=number] { width:40px; } #deck-builder[data-view=condensed] .db-row-menu, #deck-builder:is([data-view=stacks],[data-view=split]) .db-row-menu { width:44px; min-height:44px; } #deck-builder:is([data-view=stacks],[data-view=split]) .db-row:not(:last-child) { min-height:50px; } } #deck-builder .db-card-sidebar { position:sticky; top:24px; min-width:0; } #deck-builder .db-card-sidebar .db-inspector { position:static; } #deck-builder[data-panel=stats] .db-card-sidebar { display:none; } #deck-builder #db-commanders .db-section { display:block; margin:24px 0 0; padding-top:16px; border-top:1px solid var(--db-border); } #deck-builder #db-commanders .db-section-heading { flex-wrap:wrap; } #deck-builder #db-commanders .db-section-heading button { padding:6px 10px; min-height:44px; } #deck-builder #db-commanders .db-card-group { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:0; } #deck-builder #db-commanders .db-row { display:grid; grid-template-columns:40px minmax(0,1fr) 36px; gap:6px; padding:6px 0; min-height:68px; aspect-ratio:auto; border:0; background:transparent; } #deck-builder #db-commanders .db-card-image { display:block; position:relative; inset:auto; grid-column:1; grid-row:1; width:40px; aspect-ratio:63/88; border-radius:4px; overflow:hidden; } #deck-builder #db-commanders .db-thumb { width:100%; height:100%; object-fit:contain; } #deck-builder #db-commanders .db-row-name { display:block; position:static; grid-column:2; grid-row:1; min-width:0; padding:0; pointer-events:auto; } #deck-builder #db-commanders .db-row-name button { display:block; width:100%; min-height:44px; padding:0; text-align:left; font-size:12px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; } #deck-builder #db-commanders .db-row-meta, #deck-builder #db-commanders .db-card-badges, #deck-builder #db-commanders input[type=number] { display:none; } #deck-builder #db-commanders .db-row-menu { position:static; grid-column:3; grid-row:1; width:36px; min-height:44px; padding:0; opacity:1; font-size:12px; } #deck-builder #db-commanders .db-selected { background:#ffffff08; border-radius:4px; } @container (max-width:679px) { #deck-builder .db-card-sidebar { position:static; margin:16px 0 24px; } #deck-builder #db-commanders .db-section { margin-top:0; padding-top:0; border-top:0; } #deck-builder #db-commanders .db-row { grid-template-columns:40px minmax(0,1fr) 44px; } #deck-builder #db-commanders .db-row-menu { width:44px; } } #deck-builder #db-recovery:not([hidden]), #deck-builder #db-warning:not([hidden]) { margin-top:16px; } @container (min-width:680px) { #deck-builder .db-card-sidebar { overflow-anchor:none; } #deck-builder .db-inspect-copy { height:auto; overflow:visible; padding-right:0; overflow-anchor:none; } } #deck-builder[data-panel=combos] .db-search,#deck-builder[data-panel=combos] .db-card-sidebar,#deck-builder[data-panel=combos] .db-deck, #deck-builder[data-panel=compare] .db-search,#deck-builder[data-panel=compare] .db-card-sidebar,#deck-builder[data-panel=compare] .db-deck, #deck-builder[data-panel=edhrec] .db-search,#deck-builder[data-panel=edhrec] .db-card-sidebar,#deck-builder[data-panel=edhrec] .db-deck { display:none; } #deck-builder .db-discovery { grid-column:1/-1; min-width:0; } #deck-builder .db-discovery-heading { display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:12px 0; } #deck-builder .db-discovery-layout { display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;margin-top:24px;align-items:start; } #deck-builder .db-discovery-preview { position:sticky;top:24px;display:grid;gap:12px;min-height:380px; } #deck-builder .db-discovery-preview img { width:100%;height:auto;aspect-ratio:210/293;object-fit:contain;border-radius:10px; } #deck-builder .db-discovery-preview strong { height:64px;overflow:auto; } #deck-builder .db-discovery-content { min-width:0; } #deck-builder .db-discovery-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:12px 8px;margin:16px 0 28px; } @media(min-width:761px) { #deck-builder[data-panel=edhrec] .db-discovery-grid { grid-template-columns:repeat(auto-fill,minmax(max(125px,calc((100% - 56px) / 8)),1fr)); } } #deck-builder .db-discovery-card { position:relative;min-width:0; } #deck-builder .db-discovery-card .db-discovery-art { display:block;padding:0;border:0;background:transparent;width:100%; } #deck-builder .db-discovery-art img { display:block;width:100%;height:auto;aspect-ratio:146/204;object-fit:contain;border-radius:7px; } #deck-builder .db-discovery-menu { position:absolute;right:4px;top:4px;padding:4px 8px;min-width:36px;background:#111e; } #deck-builder .db-discovery-quantity { position:absolute;left:5px;top:5px;border-radius:4px;padding:2px 6px;background:#111e;font-weight:bold;pointer-events:none; } #deck-builder .db-discovery-name,#deck-builder .db-discovery-card small { display:block;overflow-wrap:anywhere;font-size:12px; } #deck-builder .db-discovery-card small { color:var(--db-muted); } #deck-builder .db-rec-bulk { margin:16px 0; padding:12px; border:1px solid var(--db-border); border-radius:10px; background:var(--db-panel); } #deck-builder .db-rec-bulk.db-rec-selecting { position:sticky; top:76px; z-index:3; } #deck-builder .db-rec-bulk [data-rec-actions]:not([hidden]) { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } #deck-builder .db-rec-bulk strong { margin-right:auto; white-space:nowrap; } #deck-builder .db-rec-bulk label { display:flex; gap:8px; align-items:center; font-size:12px; } #deck-builder .db-rec-bulk select { width:auto; min-height:44px; } #deck-builder .db-rec-bulk [data-rec-start] { display:flex; align-items:center; justify-content:center; gap:8px; } #deck-builder .db-rec-bulk [hidden] { display:none; } #deck-builder .db-rec-feedback { color:var(--db-text); } #deck-builder .db-rec-select { position:absolute; top:4px; left:4px; width:44px; height:44px; min-height:44px; padding:0; background:#111e; border:1px solid var(--db-muted); font-size:22px; } #deck-builder .db-rec-select[hidden] { display:none; } #deck-builder .db-rec-select[aria-pressed=true] { background:var(--db-accent); color:#15110a; border-color:var(--db-accent); } @media(max-width:480px) { #deck-builder .db-rec-bulk strong { flex-basis:100%; } #deck-builder .db-rec-bulk label { flex:1 1 100%; } #deck-builder .db-rec-bulk select { flex:1; min-width:0; } #deck-builder .db-rec-bulk [data-rec-add] { flex:1 1 100%; } #deck-builder .db-rec-bulk [data-rec-clear],#deck-builder .db-rec-bulk [data-rec-done] { flex:1; } } #deck-builder .db-combo-suggestion { border-bottom:1px solid var(--db-border);padding:22px 0; } #deck-builder .db-combo-suggestion .db-discovery-grid { grid-template-columns:repeat(auto-fill,minmax(100px,140px));margin-bottom:12px; } #deck-builder .db-combo-suggestion details { margin:12px 0; } #deck-builder .db-combo-suggestion summary { cursor:pointer; } #deck-builder .db-combo-steps { white-space:pre-line; } #deck-builder .db-combo-missing { color:var(--db-accent); } #deck-builder .db-combo-additions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0; } #deck-builder .db-combo-additions label { display:flex; gap:8px; align-items:center; font-size:12px; } #deck-builder .db-combo-additions select { width:auto; min-height:44px; } @media(max-width:480px) { #deck-builder .db-combo-additions label,#deck-builder .db-combo-additions button { flex:1 1 100%; } #deck-builder .db-combo-additions select { flex:1; } } #deck-builder .db-compare-controls { display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin:16px 0; } #deck-builder .db-compare-url { flex:1;min-width:180px; } #deck-builder .db-compare-url input { display:block;width:100%; } #deck-builder .db-compare-group { padding-bottom:20px; } #deck-builder #db-results[aria-busy=true] { opacity:.6; } @media(max-width:760px) { #deck-builder .db-discovery-layout { grid-template-columns:minmax(0,1fr); } #deck-builder .db-discovery-preview { display:none; } #deck-builder .db-discovery-grid { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); } } #deck-builder .db-hero-meta { flex-wrap:wrap; } #deck-builder #db-visibility { width:auto; flex:none; } #deck-builder #db-visibility-help { max-width:420px; } #deck-builder[data-panel=compare] .db-discovery > .db-discovery-heading { margin:12px 0 18px; } #deck-builder[data-panel=compare] .db-discovery > .db-discovery-heading h2 { font-size:22px; } #deck-builder .db-compare-controls { display:grid; grid-template-columns:minmax(200px,1fr) minmax(0,2fr); align-items:center; gap:24px; padding:24px; margin:0 0 20px; border:1px solid var(--db-border); border-radius:12px; background:var(--db-panel); } #deck-builder .db-compare-current { display:flex; align-items:center; gap:14px; min-width:0; } #deck-builder .db-compare-current img { flex:none; width:50px; height:70px; object-fit:cover; border-radius:5px; } #deck-builder .db-compare-current div { min-width:0; } #deck-builder .db-compare-current span, #deck-builder .db-compare-current small { display:block; color:var(--db-muted); font-size:12px; } #deck-builder .db-compare-current strong { display:block; margin:3px 0; font-size:16px; overflow-wrap:anywhere; } #deck-builder .db-compare-entry { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:end; } #deck-builder .db-compare-url { min-width:0; font-size:12px; font-weight:650; } #deck-builder .db-compare-url input { margin-top:8px; min-height:48px; font-size:16px; font-weight:400; } #deck-builder .db-compare-entry .db-primary { min-height:48px; } #deck-builder #db-compare-providers { grid-column:1/-1; color:var(--db-muted); font-size:12px; } #deck-builder [data-reverse] { grid-column:1/-1; justify-self:end; background:transparent; } #deck-builder .db-compare-empty { padding:28px 0; border-top:1px solid var(--db-border); } #deck-builder .db-compare-empty h3 { font-size:18px; } #deck-builder .db-compare-empty p { max-width:560px; margin:8px 0 20px; color:var(--db-muted); } #deck-builder .db-compare-empty small { color:var(--db-muted); } #deck-builder .db-compare-key { display:flex; flex-wrap:wrap; gap:12px 24px; margin-bottom:20px; } #deck-builder .db-compare-key span::before { content:''; display:inline-block; width:8px; height:8px; margin-right:8px; background:var(--db-accent); border-radius:50%; } #deck-builder .db-compare-key span:nth-child(2)::before { background:#84b9aa; } #deck-builder .db-compare-key span:nth-child(3)::before { background:#b5a2d4; } #deck-builder .db-compare-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid var(--db-border); margin-top:20px; } #deck-builder .db-compare-summary > div { padding:18px 16px; min-width:0; margin-block:16px; } #deck-builder .db-compare-summary > div:nth-child(2) { border-color:#84b9aa; } #deck-builder .db-compare-summary > div:nth-child(3) { border-color:#b5a2d4; } #deck-builder .db-compare-summary strong { display:block; font-size:28px; line-height:1.2; } #deck-builder .db-compare-summary span { display:block; font-size:12px; color:var(--db-muted); margin-top:6px; overflow-wrap:anywhere; } #deck-builder .db-compare-group .db-discovery-heading { justify-content:space-between; border-bottom:1px solid var(--db-border); padding-bottom:12px; } #deck-builder .db-compare-group h3 { overflow-wrap:anywhere; min-width:0; } @media(max-width:760px) { #deck-builder .db-compare-controls { grid-template-columns:minmax(0,1fr); gap:20px; padding:18px; } #deck-builder .db-compare-current { padding-bottom:18px; border-bottom:1px solid var(--db-border); } #deck-builder .db-compare-entry { grid-template-columns:minmax(0,1fr); gap:12px; } #deck-builder #db-compare-providers { grid-row:2; } #deck-builder .db-compare-summary > div { padding:12px 8px; } #deck-builder #db-visibility-help { flex-basis:100%; } } #deck-builder .db-recommendation-controls { display:flex; align-items:end; flex-wrap:wrap; gap:12px; padding:16px; margin:16px 0; background:var(--db-panel); border:1px solid var(--db-border); border-radius:10px; } #deck-builder .db-recommendation-controls label { display:grid; gap:6px; font-size:12px; flex:1; min-width:180px; } #deck-builder .db-recommendation-controls select { width:100%; } #deck-builder .db-recommendation-controls p { flex-basis:100%; color:var(--db-muted); font-size:12px; } #deck-builder[data-panel=edhrec] .db-discovery-content > .db-muted { margin-top:10px; } @media(max-width:480px) { #deck-builder .db-recommendation-controls button { width:100%; } } /* Keep discovery progress in the document flow instead of covering existing results. */ #deck-builder .db-discovery-body.storm-refreshing > .storm-loader { position:relative; inset:auto; margin-bottom:20px; } #deck-builder .db-discovery-body.storm-refreshing .db-discovery-preview { position:static; } #deck-builder .db-discovery-preview .db-affiliate-note, #deck-builder .db-form .db-affiliate-note { text-align:center; } #deck-builder .db-compare-entry { min-width:0; } #deck-builder .db-compare-columns { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; } #deck-builder .db-compare-group { min-width:0; } @media(min-width:1100px) { #deck-builder .db-compare-columns { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; } #deck-builder .db-compare-group:last-child { grid-column:1/-1; } #deck-builder .db-compare-group .db-discovery-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } #deck-builder .db-compare-group:last-child .db-discovery-grid { grid-template-columns:repeat(8,minmax(0,1fr)); } #deck-builder .db-compare-group .db-discovery-heading { display:grid; align-content:start; gap:12px; min-height:112px; } #deck-builder .db-compare-group .db-discovery-heading button { justify-self:start; } } #deck-builder .db-discovery-art.foil-card-frame, #deck-builder .db-discovery-preview-art.foil-card-frame, #deck-builder .db-discovery-art.foil-card-frame img, #deck-builder .db-discovery-preview-art.foil-card-frame img { transform:none; } #deck-builder .db-discovery-preview-art { border-radius:10px; line-height:0; } #deck-builder .db-discovery-menu, #deck-builder .db-discovery-quantity { z-index:3; } #deck-builder .db-toolbar .db-tabs { flex:1 1 600px; min-width:0; max-width:100%; overflow-x:auto; flex-wrap:nowrap; gap:8px; } #deck-builder .db-toolbar .db-tabs button { flex:none; padding-inline:12px; } #deck-builder:is([data-panel=audit],[data-panel=improve],[data-panel=mana],[data-panel=test],[data-panel=tools]) .db-workspace { display:none; } #deck-builder .db-tool-frame { width:100%; min-height:600px; border:0; display:block; background:#0a0a0c; } #deck-builder .db-tool-frame[hidden],#deck-builder #db-tool-panel[hidden] { display:none; } /* Card actions: compact desktop surface, reachable mobile sheet. */ #deck-builder .db-context:is(.db-card-actions,.db-card-subview) { width:384px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:14px; border-radius:12px; background:var(--db-panel); box-shadow:0 20px 60px #0007,0 4px 12px #0004; } #deck-builder .db-card-actions .db-context-heading { margin:0 0 3px; } #deck-builder .db-context-heading h2 { font-size:15px; font-weight:650; line-height:1.3; overflow-wrap:anywhere; } #deck-builder .db-context-heading { position:sticky; top:-14px; background:var(--db-panel); z-index:2; padding-block:4px; } #deck-builder .db-menu-meta { color:var(--db-muted); font-size:11px; margin:0 0 5px; } #deck-builder .db-card-menu { display:grid; gap:12px; } #deck-builder .db-action-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; } #deck-builder .db-action-column + .db-action-column { padding:0; margin:0; border:0; } #deck-builder .db-action-column h3 { margin:0 0 5px; padding:0 8px; font-size:11px; font-weight:600; color:var(--db-muted); } #deck-builder .db-action-column :is(button,.db-buy-link) { display:flex; align-items:center; gap:7px; width:100%; min-height:36px; border:0; border-radius:6px; background:transparent; padding:7px 8px; text-align:left; font-size:12px; line-height:1.35; font-weight:500; transition:background 100ms,color 100ms,transform 120ms cubic-bezier(.2,.8,.2,1); } #deck-builder .db-action-column .dc-icon { flex:none; width:16px; height:16px; opacity:.7; } #deck-builder .db-action-column button > span:not(.db-action-chevron):not(.db-preferred-star) { flex:1; } #deck-builder .db-preferred-star { position:relative; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:none; transform-origin:center; } #deck-builder .db-preferred-star.is-preferred { color:#e6bf52; } #deck-builder .db-preferred-star.is-preferred svg { color:inherit; fill:currentColor; opacity:1; } #deck-builder .db-action-chevron { color:var(--db-muted); margin-left:auto; font-size:18px; } #deck-builder .db-action-column :is(button,.db-buy-link):hover { background:#ffffff0e; transform:translateX(1px); } #deck-builder .db-action-column :is(button,.db-buy-link):active { background:#ffffff16; } #deck-builder .db-action-column :is(button,.db-buy-link):focus-visible { outline:2px solid var(--db-accent); outline-offset:-2px; } #deck-builder .db-action-column button:disabled { opacity:.45; transform:none; cursor:not-allowed; } #deck-builder .db-action-column .db-action-danger { color:var(--db-muted); } #deck-builder .db-action-column .db-action-danger:is(:hover,:focus-visible) { color:#ffaaa5; background:#ff555518; } #deck-builder .db-menu-utilities > div { display:grid; grid-template-columns:1fr 1fr; gap:12px; } #deck-builder .db-menu-footer { display:grid; grid-template-columns:1fr 1.15fr; column-gap:8px; border-top:1px solid var(--db-border); padding-top:8px; } #deck-builder .db-menu-footer .db-buy-link { color:var(--db-accent); white-space:normal; justify-content:flex-end; } #deck-builder .db-menu-footer small { grid-column:2; text-align:right; padding:0 8px; font-size:10px; } #deck-builder .db-card-actions.db-printing-context { width:400px; } #deck-builder .db-card-actions .db-print-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; grid-auto-rows:max-content; } #deck-builder .db-card-actions .db-print-art img { height:100%; object-fit:contain; } #deck-builder .db-card-subview .db-dialog-grid { display:block; } #deck-builder .db-card-subview .db-dialog-grid:not(:has(:not([hidden]))) { display:none; } #deck-builder .db-card-subview .db-form [hidden] { display:none !important; } #deck-builder .db-quantity-stepper { display:grid; grid-template-columns:40px minmax(0,1fr) 40px; align-items:end; gap:8px; } #deck-builder .db-quantity-stepper input { text-align:center; width:100%; } #deck-builder .db-card-subview .db-form,#deck-builder .db-printing-picker { animation:db-subview-in 160ms cubic-bezier(.16,1,.3,1); } #deck-builder .db-row.db-menu-origin { z-index:3; animation:db-card-ack 160ms ease-out; } #deck-builder .db-context { animation:none; transition:opacity 110ms,transform 110ms,display 110ms allow-discrete,overlay 110ms allow-discrete; opacity:0; transform:translateY(3px) scale(.985); } #deck-builder .db-context:popover-open { opacity:1; transform:none; animation:none; transition-duration:90ms; transition-timing-function:cubic-bezier(.16,1,.3,1); } @starting-style { #deck-builder .db-context:popover-open { opacity:0; transform:translateY(6px) scale(.98); } } @keyframes db-subview-in { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:none; } } @keyframes db-card-ack { from { filter:brightness(1.08); } to { filter:none; } } @media(max-width:599px) { #deck-builder .db-context:is(.db-card-actions,.db-card-subview) { width:calc(100vw - 24px); max-height:78dvh; padding:12px; } #deck-builder .db-action-columns { grid-template-columns:1fr; gap:12px; } #deck-builder .db-action-column :is(button,.db-buy-link) { min-height:44px; font-size:13px; } #deck-builder .db-context-heading { top:-12px; } #deck-builder .db-context-heading h2 { font-size:16px; } #deck-builder #db-context-close { min-width:44px; min-height:44px; } } @media(prefers-reduced-motion:reduce) { #deck-builder .db-context,#deck-builder .db-context:popover-open,#deck-builder .db-card-subview .db-form,#deck-builder .db-printing-picker,#deck-builder .db-row.db-menu-origin { animation:none; transition:none; transform:none; } #deck-builder .db-action-column :is(button,.db-buy-link):hover { transform:none; } } #deck-builder #db-tools-directory { padding-block:12px 32px; } #deck-builder .db-tools-intro p,#deck-builder .db-tool-group>p { color:var(--db-muted); margin:6px 0 20px; } #deck-builder .db-tools-search { display:grid; gap:8px; max-width:520px; } #deck-builder .db-tool-filters { display:flex; flex-wrap:wrap; gap:8px; margin-block:20px 28px; } #deck-builder .db-tool-filters [aria-pressed=true] { color:var(--db-accent); border-color:var(--db-accent); background:#c9a84c14; } #deck-builder .db-tool-group { margin-bottom:32px; } #deck-builder .db-tool-group h3 { font-size:18px; margin:0; } #deck-builder .db-tool-catalog { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:12px; } #deck-builder .db-tool-catalog a { display:flex; flex-direction:column; gap:10px; padding:20px; color:var(--db-text); text-decoration:none; border:1px solid var(--db-border); border-radius:10px; background:var(--db-panel); transition:background .18s,border-color .18s,transform .18s; } #deck-builder .db-tool-catalog a>span { color:var(--db-muted); font-size:13px; } #deck-builder .db-tool-catalog strong { display:flex; gap:12px; justify-content:space-between; } #deck-builder .db-tool-catalog strong span { color:var(--db-accent); } #deck-builder .db-tool-catalog a:hover { border-color:var(--db-accent); background:var(--db-raised); transform:translateY(-2px); } #deck-builder .db-tool-catalog a:focus-visible { outline:2px solid var(--db-accent); outline-offset:3px; } #deck-builder .db-tools-heading { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-block:20px; } #deck-builder .db-tools-heading[hidden],#deck-builder #db-tools-directory[hidden] { display:none; } @media(prefers-reduced-motion:reduce){#deck-builder .db-tool-catalog a{transition:none;transform:none;}} #deck-builder[data-setup=true] > :is(.db-header,.db-toolbar,.db-workspace,#db-tool-panel,#db-tools-directory,.db-tools-heading,.deck-comments) { display:none!important; } #deck-builder .db-commander-start { max-width:1120px; margin:24px auto 64px; } #deck-builder .db-start-heading { display:flex; align-items:center; justify-content:space-between; gap:32px; margin-bottom:32px; } #deck-builder .db-start-heading h1 { font-size:clamp(28px,3vw,40px); line-height:1.15; letter-spacing:-.035em; margin:0 0 12px; } #deck-builder .db-start-heading p { color:var(--db-muted); max-width:62ch; } #deck-builder .db-start-heading > button { flex:none; } #deck-builder .db-start-label { display:block; font-weight:650; margin-bottom:8px; } #deck-builder .db-start-search { display:flex; gap:8px; margin-bottom:12px; } #deck-builder .db-start-search input { flex:1; } #deck-builder .db-start-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:24px 16px; margin:24px 0; } #deck-builder .db-start-card { display:flex; flex-direction:column; align-items:stretch; padding:0 0 10px; overflow:hidden; text-align:left; background:transparent; } #deck-builder .db-start-card img { display:block; width:100%; aspect-ratio:5/7; object-fit:contain; border-radius:8px; } #deck-builder .db-start-card strong { padding:10px 10px 4px; font-size:13px; line-height:1.4; overflow-wrap:anywhere; } #deck-builder .db-start-card span { padding:0 10px; margin-top:auto; font-size:12px; color:var(--db-accent); } #deck-builder .db-start-card:hover { border-color:var(--db-accent); background:var(--db-panel); } #deck-builder .db-start-footer { border-top:1px solid var(--db-border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:32px; padding-top:24px; color:var(--db-muted); } @container (max-width:900px) { #deck-builder .db-start-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } } @container (max-width:600px) { #deck-builder .db-start-heading { align-items:flex-start; flex-direction:column; gap:16px; margin-bottom:24px; } #deck-builder .db-start-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; } #deck-builder .db-commander-start { margin-top:12px; } } @media (hover:hover) and (pointer:fine) { #deck-builder .db-card-image.foil-card-frame { transition:transform 100ms ease-out; } #deck-builder .db-card-image.foil-card-frame:not(.db-is-foil)::before,#deck-builder .db-card-image.foil-card-frame:not(.db-is-foil)::after { display:none; } } #deck-builder .db-card-image.db-is-foil { outline:1px solid #94dbdf99; outline-offset:-1px; } #deck-builder .db-card-image.db-is-foil::before { opacity:.16; } #deck-builder .db-price-section { margin-top:24px; padding:20px 0; border-top:1px solid var(--db-border); } #deck-builder .db-price-section h2 { margin:0 0 8px; font-size:20px; } #deck-builder .db-price-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; margin-bottom:12px; } #deck-builder .db-price-header h2 { margin:0; } #deck-builder .db-price-currency { display:flex; align-items:center; flex:none; gap:8px; color:var(--db-muted); font-size:12px; } #deck-builder #db-price-currency { width:96px; min-height:44px; font-size:14px; } @media (hover:none), (pointer:coarse) { #deck-builder #db-price-currency { font-size:16px; } } #deck-builder .db-price-section .db-price-summary { max-width:none; } #deck-builder .db-price-summary > p { margin:0; } #deck-builder .db-price-summary dl { margin:16px 0 20px; display:grid; gap:10px; } #deck-builder .db-price-summary dl > div { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:0; border:0; background:none; } #deck-builder .db-price-summary dt { display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; color:var(--db-muted); } #deck-builder .db-price-summary dt svg { flex:none; color:var(--db-accent); } #deck-builder .db-price-summary dd { margin:0; font-size:15px; font-weight:700; text-align:right; color:var(--db-text); overflow-wrap:anywhere; } #deck-builder #db-price-compare { margin:0 0 20px; } #deck-builder .db-price-summary .db-price-rarity { margin:0 0 12px; } #deck-builder .db-price-notes { font-size:12px; color:var(--db-muted); } #deck-builder .db-price-notes summary { cursor:pointer; padding:4px 0; } #deck-builder .db-price-notes p { margin:8px 0 0; } #deck-builder:not([data-panel=price]) .db-price-section { display:none; } #deck-builder .db-price-loading { display:inline-flex; align-items:center; gap:8px; } #deck-builder .db-price-spinner { display:inline-block; flex:none; width:15px; height:15px; border:2px solid #5390d933; border-top-color:#64dfdf; border-right-color:#c4a5ed; border-radius:50%; animation:db-price-spin 800ms linear infinite; } @keyframes db-price-spin { to { transform:rotate(360deg); } } @media(prefers-reduced-motion:reduce) { #deck-builder .db-price-spinner { animation:none; } } #deck-builder .db-section:is([data-section=maybeboard],[data-section=sideboard])[data-collapsed=true] > :not(.db-section-heading) { display:none; } #deck-builder .db-section-heading .db-maybeboard-toggle { display:flex; align-items:center; gap:8px; padding:6px 0; min-height:44px; border:0; background:none; font-size:14px; font-weight:700; color:var(--db-text); } #deck-builder .db-maybeboard-toggle .db-maybeboard-arrow { margin:0; width:14px; color:var(--db-muted); } #deck-builder .db-maybeboard-toggle:focus-visible { outline:2px solid var(--db-accent); outline-offset:4px; } #deck-builder .db-toolbar .db-tabs { padding-bottom:10px; } /* Use the deck workspace width for compact price rows. */ @container (min-width:700px) { #deck-builder .db-price-summary { display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px; } #deck-builder .db-price-summary > p:first-child { flex-basis:100%; } #deck-builder .db-price-summary dl { width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 36px;margin:6px 0 4px; } #deck-builder #db-price-compare,#deck-builder .db-price-summary .db-price-rarity { margin:0; } #deck-builder .db-price-notes { margin-left:auto; } #deck-builder .db-price-notes summary { min-height:44px;display:flex;align-items:center;gap:6px; } #deck-builder .db-price-notes summary::before { content:'▸'; } #deck-builder .db-price-notes[open] { flex-basis:100%;margin-left:0; } #deck-builder .db-price-notes[open] summary::before { content:'▾'; } } @container (min-width:1050px) { #deck-builder .db-price-summary dl { grid-template-columns:repeat(3,minmax(0,1fr)); } } #deck-builder .db-hero-meta :is(#db-format,#db-visibility) { background-color:transparent;box-shadow:none; } #deck-builder .db-hero-meta :is(#db-format,#db-visibility):hover { background-color:transparent;border-color:#81714d; } @supports not (appearance:base-select) { #deck-builder .db-hero-meta :is(#db-format,#db-visibility) option { background:var(--db-raised);color:var(--db-text); } } #deck-builder .db-price-summary dd.db-price-comparison { display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px; } #deck-builder .db-price-comparison #db-price-compare { margin:0;min-height:36px;font-size:12px;font-weight:650;padding:6px 10px; } #deck-builder .db-price-summary dl>div:has(.db-price-comparison) { align-items:center; } @container (max-width:699px) { #deck-builder .db-price-summary dl>div:has(.db-price-comparison) { flex-wrap:wrap; } #deck-builder .db-price-comparison #db-price-compare { min-height:44px; } } #deck-builder .db-price-rarity .db-rarity-common { color:#d7d6df; } #deck-builder .db-price-rarity .db-rarity-uncommon { color:#c8ddf0; } #deck-builder .db-price-rarity .db-rarity-rare { color:var(--accent-soft,#efd58b); } #deck-builder .db-price-rarity .db-rarity-mythic { color:#f4c2a0; } #deck-builder .db-tabs button { transition:background 160ms ease-out,border-color 160ms ease-out,color 160ms ease-out; } @media(hover:hover) and (pointer:fine) { #deck-builder .db-tabs button:not([aria-pressed=true]):hover { background:rgba(255,255,255,.065);border-color:#64616d;color:var(--db-text); } #deck-builder .db-tabs button[aria-pressed=true]:hover { background:rgba(201,168,76,.2); } } @media(prefers-reduced-motion:reduce) { #deck-builder .db-tabs button { transition:none; } } /* Selection uses color; keyboard focus remains a separate cool outline. */ #deck-builder .db-tabs button:focus-visible { outline:2px solid #70dcff; outline-offset:-2px; } #deck-builder .db-tabs button:not([aria-pressed=true]):focus-visible { background:rgba(255,255,255,.065);color:var(--db-text); } /* Navigation changes are scoped above the existing Deck workspace. */ #deck-builder .db-toolbar .db-tabs { flex:1 1 420px; scrollbar-width:thin; scrollbar-color:var(--db-accent) transparent; } #deck-builder .db-tabs button { min-height:44px; font-size:14px; } #deck-builder .db-local-navigation { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:12px 0 20px; min-width:0; } #deck-builder .db-local-navigation[hidden] { display:none; } #deck-builder .db-local-navigation nav { display:flex; gap:6px; overflow-x:auto; max-width:100%; } #deck-builder .db-local-navigation button { min-height:40px; font-size:14px; background:transparent; } #deck-builder .db-local-navigation button[aria-pressed=true] { color:var(--db-accent); border-color:var(--db-accent); } #deck-builder .db-local-navigation label { font-size:13px; color:var(--db-muted); max-width:100%; } #deck-builder .db-local-navigation select { max-width:100%; min-height:40px; } #deck-builder .db-local-navigation :focus-visible { outline:2px solid #70dcff; outline-offset:2px; } @media(max-width:600px) { #deck-builder .db-local-navigation button { min-height:44px; } #deck-builder .db-local-navigation label { display:flex; flex-wrap:wrap; gap:6px; } #deck-builder .db-page-actions #db-resources { flex:0 1 auto; } } #deck-builder #db-guest-audit-cue { display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;margin:0 0 20px;color:var(--db-muted);font-size:13px; } #deck-builder:not([data-panel=deck]) #db-guest-audit-cue { display:none; } #deck-builder #db-guest-audit-cue button { min-height:44px;border:0;background:transparent;padding:8px 0;color:#a9dcf6;font-size:13px;text-align:left; } #deck-builder #db-guest-audit-cue button:hover { color:#d5f1ff;text-decoration:underline; } #db-bracket-control{display:flex;align-items:center;gap:8px;font-size:12px}#deck-builder #db-bracket{background-color:transparent;background-image:none;border:1px solid var(--db-line);max-width:230px}#db-deck-extras{margin-top:24px}.db-extra{border-top:1px solid var(--db-line);padding:12px 0}.db-extra summary{cursor:pointer;min-height:44px;align-content:center;font-weight:650}.db-extra summary::marker{color:var(--db-gold)}.db-token-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,150px));gap:16px;padding:12px 0}.db-token-grid figure{margin:0;min-width:0}.db-token-grid img{width:100%;height:auto;border-radius:6%;display:block}.db-token-grid figcaption{font-size:12px;margin-top:8px}.db-token-grid small{display:block;color:var(--db-muted);margin-top:4px}.db-token-placeholder{aspect-ratio:488/680;border:1px solid var(--db-line);padding:12px;display:grid;place-items:center}.db-extra ol{list-style:none;padding:0;margin:0}.db-extra li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--db-line);padding:10px 0;font-size:12px}.db-extra time{color:var(--db-muted);flex-shrink:0}.db-edit-added{color:#8cddb0}.db-edit-removed{color:#f3a1ab}@media(max-width:430px){.db-extra li{flex-wrap:wrap;gap:4px}.db-extra time{width:100%}} .db-token-art{position:relative}.db-token-menu{position:absolute;top:8px;right:8px;min-width:32px;min-height:32px;padding:4px!important;letter-spacing:2px;background:var(--db-raised)!important;border:1px solid var(--db-line);border-radius:7px;color:var(--db-text)}.db-token-menu:hover{border-color:var(--db-gold)}@media(pointer:coarse){.db-token-menu{min-width:44px;min-height:44px}} .db-token-placeholder{border-radius:6%;background:var(--db-raised);align-content:center;gap:8px;text-align:center} #deck-builder #db-bracket[hidden]{display:none}.db-bracket-options{display:grid;gap:4px}.db-bracket-options button{display:flex;justify-content:space-between;align-items:center;min-height:44px;border:0;background:transparent;text-align:left;padding:10px 12px}.db-bracket-options button:hover{background:#ffffff0d}.db-bracket-options button[aria-pressed=true]{color:var(--db-gold);background:#c9a84c14} #deck-builder #db-destination[hidden]{display:none}#deck-builder #db-destination-menu{background:transparent;border:0;box-shadow:none;display:inline-flex;align-items:center;gap:10px;padding:8px 2px;min-height:44px;color:var(--db-text)}#deck-builder #db-destination-menu:hover{color:var(--db-gold)} .db-menu-chevron{width:14px;height:14px;flex-shrink:0;opacity:.8;transition:transform 180ms ease}button[aria-expanded=true]>.db-menu-chevron{transform:rotate(180deg)}@media(prefers-reduced-motion:reduce){.db-menu-chevron{transition:none}} #deck-builder #db-destination-menu{vertical-align:middle;line-height:1;gap:8px}#db-destination-label{display:block;line-height:20px}.db-menu-chevron{display:block;align-self:center}#db-visibility-help{flex-basis:100%} #deck-builder :is(#db-format,#db-visibility)[hidden]{display:none}#deck-builder .db-header-menu{display:inline-flex;align-items:center;gap:14px;min-height:36px;background:transparent;border:1px solid var(--db-line);border-radius:6px;padding:7px 10px;line-height:20px}#deck-builder .db-header-menu:hover{border-color:var(--db-gold)} #deck-builder .db-price-summary dl{align-items:center}#deck-builder .db-price-compare-action{justify-content:flex-end}#deck-builder .db-price-compare-action #db-price-compare{margin:0;min-height:36px;font-size:12px;padding:6px 10px}#deck-builder #db-owner-avatar{overflow:hidden}#db-owner-avatar img{width:100%;height:100%;object-fit:cover;display:block}#db-owner-avatar svg{width:16px;height:16px} #deck-builder :is(#db-inspect-wishlist,#db-inspect-collection){display:block;width:100%;margin-top:12px;white-space:normal;text-align:center} #deck-builder :is(#db-inspect-wishlist,#db-inspect-collection)[hidden]{display:none} /* Reserve a stable details area while leaving expanded rules text readable. */ #deck-builder .db-inspect-copy{display:flex;flex-direction:column;min-height:480px;height:auto;overflow:visible} #deck-builder .db-inspect-copy>.db-inspect-heading{min-height:44px;flex-shrink:0} #deck-builder .db-inspect-copy>#db-inspect-buy{margin-top:auto} #deck-builder .db-inspect-copy>details{margin-bottom:14px} #deck-builder .db-inspect-copy>:is(button,a,small){flex-shrink:0} /* Board destinations share the deck workspace, with a quieter secondary rail. */ #deck-builder:is([data-view]) #db-rows{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,240px);gap:24px;columns:auto;margin-top:20px;align-items:start} #deck-builder:is([data-view]) #db-rows .db-section{display:block;min-width:0;width:100%;margin:0;padding:4px;border-radius:6px;transition:background 150ms,outline-color 150ms} #deck-builder:is([data-view]) #db-rows .db-section-heading{display:flex;min-height:36px;margin:0 0 12px;gap:8px} #deck-builder .db-section-heading h3{white-space:nowrap} #deck-builder .db-board-rail{display:grid;gap:24px;position:sticky;top:20px;min-width:0} #deck-builder .db-board-rail .db-card-group{max-height:min(34vh,340px);overflow:auto;overscroll-behavior:contain;padding:4px 4px 12px} #deck-builder .db-board-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:112px;padding:20px 12px;border:1px dashed var(--db-border);border-radius:6px} #deck-builder .db-empty-drop{color:var(--db-text);font-weight:600;font-size:13px} #deck-builder .db-empty-help{font-size:12px} #deck-builder .db-touch-only{display:none} #deck-builder .db-board-empty button{margin-top:4px;min-height:40px;padding:6px 12px} #deck-builder .db-drop-label{font-size:11px;color:var(--db-accent);text-align:right;line-height:1.3} #deck-builder .db-drop-ready{outline:1px dashed #c9a84c66;outline-offset:3px} #deck-builder .db-drop-active{outline:1px solid var(--db-accent);outline-offset:3px;background:#c9a84c0c} #deck-builder .db-drop-confirmed{animation:db-board-confirm 260ms ease-out} @keyframes db-board-confirm{from{background:#c9a84c18}to{background:transparent}} #deck-builder .db-drag-origin,#deck-builder .db-drag-settling{opacity:.3} #deck-builder .db-dragging{cursor:grabbing} @media(hover:hover) and (pointer:fine){#deck-builder #db-rows .db-card-image{cursor:grab}} #deck-builder #db-rows .db-row:focus-visible{outline:2px solid #81b8e6;outline-offset:-2px} #deck-builder:is([data-view=list],[data-view=condensed]) #db-rows .db-row{position:relative;grid-template-columns:36px minmax(0,1fr) 32px;min-height:40px} #deck-builder[data-view=condensed] #db-rows .db-row{min-height:32px} #deck-builder:is([data-view=list],[data-view=condensed]) #db-rows [data-action=quantity]{grid-column:1;grid-row:1} #deck-builder:is([data-view=list],[data-view=condensed]) #db-rows .db-row-name{grid-column:2;grid-row:1} #deck-builder:is([data-view=list],[data-view=condensed]) #db-rows .db-row-menu{grid-column:3;grid-row:1} #deck-builder:is([data-view=stacks],[data-view=split]) #db-rows .db-section[data-section=deck]{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:24px 12px} #deck-builder:is([data-view=stacks],[data-view=split]) #db-rows .db-section[data-section=deck]>.db-section-heading{grid-column:1/-1;margin-bottom:0} #deck-builder:is([data-view=stacks],[data-view=split]) #db-rows .db-type-block{margin:0} .db-drag-preview{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;transform-origin:top left;scale:1.03;font:12px/1.4 Manrope,sans-serif;color:#f0eef8;background:#111115;border-radius:7px;box-shadow:0 12px 28px #0008;overflow:hidden} .db-drag-preview img{display:block;width:100%;height:auto;aspect-ratio:63/88;object-fit:contain} .db-drag-preview span{display:block;padding:7px 9px;overflow-wrap:anywhere} @container(min-width:800px){ /* Allow the 3px hover lift plus up to 2px of pointer drift inside the scrollport. */ #deck-builder .db-board-rail .db-card-group{padding:10px 6px 18px} #deck-builder[data-layout=visual] .db-board-rail .db-card-group{grid-template-columns:repeat(auto-fill,minmax(120px,144px))} #deck-builder:is([data-view=stacks],[data-view=split]) .db-board-rail .db-row{max-width:144px} } @container(max-width:799px){ #deck-builder:is([data-view]) #db-rows{grid-template-columns:minmax(0,1fr)} #deck-builder .db-board-rail{position:static;grid-template-columns:repeat(2,minmax(0,1fr))} #deck-builder .db-board-rail .db-card-group{max-height:none;overflow:visible} } @container(max-width:499px){#deck-builder .db-board-rail{grid-template-columns:minmax(0,1fr)}} @media(hover:none),(pointer:coarse){ #deck-builder .db-board-hint{display:none} #deck-builder .db-mouse-only{display:none} #deck-builder .db-touch-only{display:inline} #deck-builder:is([data-view=list],[data-view=condensed]) #db-rows .db-row{grid-template-columns:36px minmax(0,1fr) 44px;min-height:44px} #deck-builder:is([data-view=list],[data-view=condensed]) #db-rows [data-action=quantity]{grid-column:1} #deck-builder:is([data-view=list],[data-view=condensed]) #db-rows .db-row-name{grid-column:2} #deck-builder:is([data-view=list],[data-view=condensed]) #db-rows .db-row-menu{grid-column:3} #deck-builder[data-layout=visual] .db-card-badges{left:4px} } @media(prefers-reduced-motion:reduce){ #deck-builder .db-drop-confirmed{animation:none} #deck-builder:is([data-view]) #db-rows .db-section{transition:none} .db-drag-preview{scale:1;box-shadow:0 4px 12px #0007} } /* Layout motion owns translate/scale; hover and foil transforms remain separate. */ #deck-builder .db-layout-moving{z-index:12;transition:none!important;will-change:translate,scale} #deck-builder [data-layout-hidden=true]{visibility:hidden} .db-layout-flight{position:fixed;z-index:2147482999;pointer-events:none;transform-origin:top left;border-radius:7px;overflow:hidden;contain:layout paint;will-change:translate,scale} .db-layout-flight img{display:block;width:100%;height:100%;object-fit:contain} @media(prefers-reduced-motion:reduce){.db-layout-flight{display:none}#deck-builder .db-layout-moving{will-change:auto}} #deck-builder .db-print-skeleton { aspect-ratio:63/88; background:var(--db-raised); border:1px solid var(--db-border); border-radius:9px; } #deck-builder .db-library-dialog { gap:20px; } #deck-builder .db-library-section { display:grid; gap:10px; padding-top:16px; border-top:1px solid var(--db-border); } #deck-builder .db-library-section h3 { font-size:16px; } #deck-builder .db-library-field { display:flex; gap:12px; align-items:end; } #deck-builder .db-library-field label { flex:1; min-width:0; } #deck-builder .db-library-field select { width:100%; } #deck-builder .db-library-field button { flex:none; } #deck-builder .db-library-links { display:flex; flex-wrap:wrap; gap:12px 20px; padding-top:16px; border-top:1px solid var(--db-border); } #deck-builder .db-library-dialog .db-check { display:flex; align-items:flex-start; gap:10px; font-size:12px; } #deck-builder .db-library-dialog .db-check input { flex:none; } @media(max-width:599px) { #deck-builder .db-library-field { flex-direction:column; align-items:stretch; } } /* Artwork is optional; the editor's header dimensions and metadata stay intact. */ #deck-builder .db-cover::after { background:linear-gradient(90deg,#0a0a0ce8,#0a0a0cb3 50%,#0a0a0c99); } #deck-builder #db-change-banner { position:absolute;top:10px;right:10px;min-height:36px;padding:6px 10px;font-size:12px;background:#111115e8;z-index:1; } #deck-builder .db-owner-line { padding-right:115px; } #deck-builder .db-banner-dialog { width:min(1020px,calc(100vw - 24px));height:min(920px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);padding:20px;overflow:hidden; } #deck-builder .db-banner-dialog #db-dialog-body { height:calc(100% - 60px); min-height:0;display:flex;flex-direction:column;overflow:hidden; } #deck-builder .db-banner-picker { display:flex;flex-direction:column;min-height:0;gap:12px; } #deck-builder .db-banner-preview { position:relative;isolation:isolate;flex:none;height:174px;overflow:hidden;border-radius:8px;background:#19191d;touch-action:none;cursor:move; } #deck-builder .db-banner-preview img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 200ms ease; } #deck-builder .db-banner-preview img.is-ready { opacity:1; } #deck-builder .db-banner-preview::after { content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0a0a0ce8,#0a0a0cb3 50%,#0a0a0c99);z-index:1;pointer-events:none; } #deck-builder .db-banner-preview > div { position:relative;z-index:2;padding:24px;pointer-events:none; } #deck-builder .db-banner-preview strong { display:block;font-size:clamp(20px,2.5vw,32px);line-height:1.25;overflow-wrap:anywhere;color:#f2eff6; } #deck-builder .db-banner-preview span { display:block;font-size:12px;margin-top:12px;color:#d2cfdc; } #deck-builder .db-banner-position { display:flex;gap:16px;align-items:center;flex:none; } #deck-builder .db-banner-position label { display:grid;gap:2px;flex:1;font-size:12px;min-width:0; } #deck-builder .db-banner-position input { width:100%;min-height:32px;padding:0;accent-color:var(--db-accent); } #deck-builder .db-banner-search { flex:none; } #deck-builder .db-banner-search label { display:block;font-size:13px;margin-bottom:6px; } #deck-builder .db-banner-search form { display:flex;gap:8px; } #deck-builder .db-banner-search input { min-width:0;flex:1; } #deck-builder #db-banner-status { font-size:12px;color:var(--db-muted);margin:8px 0 0;min-height:18px; } #deck-builder .db-banner-results { min-height:0;flex:1;overflow:auto;scrollbar-gutter:stable;padding-right:6px; } #deck-builder .db-banner-results .db-print-tile { min-width:0; } #deck-builder .db-banner-footer { flex:none;border-top:1px solid var(--db-border);padding-top:12px;font-size:12px; } #deck-builder .db-banner-footer > div { display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:10px; } #deck-builder .db-banner-footer button { min-height:44px;font-size:12px; } @media(max-width:540px){#deck-builder .db-banner-dialog{padding:14px}#deck-builder .db-banner-preview{height:140px}#deck-builder .db-banner-preview>div{padding:16px}#deck-builder .db-banner-footer>div{display:grid;grid-template-columns:1fr 1fr}#deck-builder .db-banner-position{gap:8px}#deck-builder #db-banner-printings{grid-column:1/-1}#deck-builder .db-banner-preview span{margin-top:6px}} @media(hover:hover) and (pointer:fine){#deck-builder #db-change-banner{opacity:.7;transition:opacity 180ms}#deck-builder .db-header:hover #db-change-banner,#deck-builder #db-change-banner:focus-visible{opacity:1}} @media(prefers-reduced-motion:reduce){#deck-builder .db-banner-preview img,#deck-builder #db-change-banner{transition:none}} @media(max-width:540px){#deck-builder #db-banner-save{grid-column:1/-1}} /* The public workspace uses the editor layout; permissions remove mutations. */ #deck-builder[data-readonly=true] #db-title { cursor:default; border-color:transparent; } #deck-builder[data-readonly=true] .db-header-menu:disabled { opacity:1; cursor:default; } #deck-builder[data-readonly=true] .db-menu-chevron { display:none; } #deck-builder[data-readonly=true] .db-read-quantity { text-align:center; color:var(--db-muted); } #deck-builder[data-readonly=true] .db-owner-line a { color:inherit; text-decoration:none; } #deck-builder[data-readonly=true] .db-owner-line a:hover { text-decoration:underline; } #deck-builder[data-readonly=true] .db-deck-tools::before { content:"Decklist"; font-weight:750; margin-right:auto; } @container(max-width:679px){#deck-builder .db-display-control{flex:1 1 calc((100% - 20px)/3)}#deck-builder[data-readonly=true] .db-deck-tools::before{flex-basis:100%;min-height:44px;display:flex;align-items:center}} #deck-builder[data-readonly=true][data-layout=visual] .db-read-quantity{display:none} #deck-builder[data-readonly=true]:is([data-view=list],[data-view=condensed]) .db-read-quantity{grid-column:1;grid-row:1} #deck-builder[data-readonly=true] #db-commanders .db-read-quantity{display:none} #deck-builder #db-read-title{margin:0;font-size:clamp(28px,3.5vw,44px);font-weight:750;line-height:1.2;overflow-wrap:anywhere;text-shadow:0 1px 8px #000;} /* Leave room for the existing gold focus outline inside the clipped picker. */ #deck-builder .db-banner-search { padding:4px; } #deck-builder .db-card-library { width:100%; } #deck-builder .db-card-library .cl-packages { max-height:38dvh;overflow:auto;min-height:60px; } #deck-builder .cl-packages button { width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;text-align:left;margin-bottom:6px; } #deck-builder .cl-packages strong,#deck-builder .cl-packages small { display:block;overflow-wrap:anywhere; } #deck-builder .cl-packages small { color:var(--db-muted);margin-top:3px; } #deck-builder .cl-create { border-top:1px solid var(--db-border);padding-top:12px;display:grid;gap:8px; } #deck-builder .db-menu-organization { border-top:1px solid var(--db-border);padding-top:10px; } #deck-builder .db-action-column kbd { margin-left:auto;font:11px inherit;padding:2px 5px;border:1px solid var(--db-border);border-radius:4px;color:var(--db-muted); } @media(hover:none) { #deck-builder .db-action-column kbd { display:none; } } #deck-builder[data-panel=primer] .db-workspace,#deck-builder[data-panel=primer] .db-search,#deck-builder[data-panel=primer] .db-card-sidebar,#deck-builder[data-panel=primer] .db-deck { display:none; } #deck-builder .db-primer { margin-top:24px;min-width:0; } #deck-builder .dp-controls { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px; } #deck-builder .dp-controls > div { display:flex;flex-wrap:wrap;gap:6px; } #deck-builder .dp-controls button { min-height:40px;font-size:13px;padding:8px 12px; } #deck-builder .dp-controls [aria-pressed=true] { border-color:var(--db-accent);color:var(--db-accent); } #deck-builder #dp-status { min-height:24px;margin:12px 0;color:var(--db-muted); } #deck-builder .dp-toolbar { display:flex;flex-wrap:wrap;gap:4px;margin:12px 0; } #deck-builder .dp-toolbar button { min-height:40px;font-size:12px;padding:6px 8px; } #deck-builder .dp-layout { display:grid;grid-template-columns:minmax(0,900px) 240px;gap:24px;justify-content:center;align-items:start; } #deck-builder .dp-editor { display:grid;gap:8px;min-width:0;align-content:start;align-self:start; } #deck-builder .dp-editor textarea { width:100%;min-height:420px;height:60vh;font:14px/1.6 monospace;resize:vertical; } #deck-builder .dp-layout[data-mode=write] { grid-template-columns:1fr; } #deck-builder .dp-layout[data-mode=write] .dp-reading,#deck-builder .dp-layout[data-mode=write] .dp-toc { display:none; } #deck-builder .dp-layout[data-mode=preview] .dp-editor { display:none; } #deck-builder .dp-layout[data-mode=split] { grid-template-columns:1fr 1fr; } #deck-builder .dp-layout[data-mode=split] .dp-toc { display:none; } #deck-builder .dp-reading { min-width:0;font-size:16px;line-height:1.7;overflow-wrap:anywhere;padding:24px 0;max-width:900px; } #deck-builder .dp-reading p { margin:0 0 16px; } #deck-builder .dp-reading h1 { font-size:30px;line-height:1.25;margin:0 0 20px; } #deck-builder .dp-reading h2 { font-size:25px;line-height:1.3;margin:36px 0 16px; } #deck-builder .dp-reading h3 { font-size:20px;line-height:1.4;margin:28px 0 12px; } #deck-builder .dp-reading blockquote { border-left:2px solid var(--db-accent);margin:24px 0;padding:0 16px;color:var(--db-muted); } #deck-builder .dp-reading pre,#deck-builder .dp-table { max-width:100%;overflow:auto;background:var(--db-panel);padding:12px;border-radius:6px; } #deck-builder .dp-reading code { font:14px/1.6 monospace;white-space:pre-wrap; } #deck-builder .dp-reading pre code { white-space:pre; } #deck-builder .dp-reading th,#deck-builder .dp-reading td { padding:10px 12px;border-bottom:1px solid var(--db-border);text-align:left; } #deck-builder .dp-reading hr { margin:24px 0;border:0;border-top:1px solid var(--db-border); } #deck-builder .dp-reading details { margin:20px 0;padding:12px 0;border-top:1px solid var(--db-border); } #deck-builder .dp-reading summary { cursor:pointer;color:var(--db-accent);font-weight:650; } #deck-builder .dp-reading [id] { scroll-margin-top:90px; } #deck-builder .dp-reading .dp-card-ref { border:0;padding:0 2px;min-height:24px;border-radius:3px;background:transparent;color:var(--db-accent);font:inherit; } #deck-builder .dp-toc { position:sticky;top:90px;align-self:start;max-height:75vh;overflow:auto;padding:24px 0; } #deck-builder .dp-toc summary { cursor:pointer;font-weight:700; } #deck-builder .dp-toc a { display:block;padding:6px 0;color:var(--db-muted);text-decoration:none;font-size:13px; } #deck-builder .dp-toc a[data-depth="3"] { padding-left:12px; } #deck-builder .dp-toc [aria-current] { color:var(--db-accent); } .dp-card-preview { position:fixed;z-index:10020;background:#111115;border:1px solid #303039;border-radius:8px;padding:8px;overflow:auto;color:#f0eef8;box-shadow:0 10px 30px #0008; } .dp-card-preview button { display:block;margin-left:auto;border:1px solid #303039;background:#17171d;color:#f0eef8;min-width:36px;min-height:36px;border-radius:6px; } .dp-card-preview img { width:100%;height:auto;display:block;margin-top:6px;border-radius:4.8% / 3.5%; } @media(max-width:1023px) { #deck-builder .dp-layout { grid-template-columns:1fr; } #deck-builder .dp-toc { grid-row:1;position:static;padding:8px 0;max-height:220px; } } @media(max-width:599px) { #deck-builder #dp-split { display:none; } #deck-builder .dp-layout[data-mode=split] { grid-template-columns:1fr; } #deck-builder .dp-reading { font-size:15px;padding:12px 0; } } @media(prefers-reduced-motion:no-preference) { #deck-builder .dp-layout { animation:dp-enter .15s ease-out; } @keyframes dp-enter { from { opacity:.7; } to { opacity:1; } } } /* Selection uses badges and fills. Artwork gets a frame only while keyboard focused. */ #deck-builder :is(.db-card-image,.db-discovery-art,.db-print-tile):focus-visible { outline:2px solid #81b8e6;outline-offset:-2px; } /* Keep the existing Selected text and a visible check when artwork badges are hidden. */ #deck-builder:is([data-view=list],[data-view=condensed]) .db-selected .db-card-badges, #deck-builder #db-commanders .db-selected .db-card-badges { display:contents;pointer-events:none; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-selected .db-card-badges > :not(.db-selected-badge), #deck-builder #db-commanders .db-selected .db-card-badges > :not(.db-selected-badge) { display:none; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-selected .db-selected-badge, #deck-builder #db-commanders .db-selected .db-selected-badge { display:inline-flex;grid-column:2;grid-row:1;align-self:center;justify-self:start;align-items:center;min-width:16px;min-height:20px;padding:0;background:transparent;border-radius:0;font-size:0;color:#81b8e6; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-selected .db-selected-badge::before, #deck-builder #db-commanders .db-selected .db-selected-badge::before { content:'✓';font-size:14px;line-height:1; } #deck-builder:is([data-view=list],[data-view=condensed]) .db-selected .db-row-name, #deck-builder #db-commanders .db-selected .db-row-name { padding-left:22px; } #deck-builder .db-card-library-dialog { width:min(400px,calc(100vw - 32px));max-height:80dvh; } #deck-builder .db-compare-controls{display:block;background:transparent;padding:0;border:0}#deck-builder .db-compare-panels{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:stretch;gap:12px}#deck-builder .db-compare-deck{min-width:0;display:flex;flex-direction:column;gap:16px;border:1px solid var(--db-border,#303039);border-radius:10px;overflow:hidden;padding:0 20px 20px;background:#111115}#deck-builder .db-compare-cover{height:110px;margin:0 -20px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#1b1b21;color:#c9a84c}#deck-builder .db-compare-cover img{width:100%;height:100%;object-fit:cover;object-position:center 30%}#deck-builder .db-compare-deck strong{display:block;font-size:20px;line-height:1.4;overflow-wrap:anywhere}#deck-builder .db-compare-deck small{display:block;color:#a7a4b1;margin-top:6px}#deck-builder .db-compare-versus{align-self:center;text-align:center;color:#a7a4b1;font-weight:700}#deck-builder .db-compare-entry{display:flex;flex-direction:column;gap:12px;margin-top:auto}#deck-builder .db-compare-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:22px}#deck-builder .db-compare-actions .db-primary{width:280px;max-width:100%;min-height:48px}#deck-builder .db-compare-empty{margin-top:24px;border:0;background:transparent;padding:20px;text-align:center}#deck-builder .db-compare-empty h3{font-size:18px}@media(max-width:767px){#deck-builder .db-compare-panels{grid-template-columns:1fr}#deck-builder .db-compare-versus{padding:2px}#deck-builder .db-compare-actions .db-primary{width:100%}} #db-tools-directory .db-tools-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}#db-tools-directory .db-directory-tool{min-width:0;min-height:100px;overflow-wrap:anywhere}@media(max-width:1024px){#db-tools-directory .db-tools-results{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){#db-tools-directory .db-tools-results{grid-template-columns:1fr}} .db-source-intro{max-width:65ch;color:#b5b1c3;line-height:1.7}.db-source-link-actions{margin:16px 0}#db-source-preview{margin:20px 0;padding:16px 0;border-top:1px solid #303039;line-height:1.6}#db-source-preview + .db-dialog-actions{justify-content:flex-end;padding-top:12px}#db-source-preview table{width:100%;border-collapse:collapse}#db-source-preview td,#db-source-preview th{padding:8px;text-align:left} #db-dialog .db-form:has(#db-link-source-url) { margin-top:16px; } #deck-builder #db-dialog:has(#db-source-preview,#db-link-source-url)[open] { display:flex; flex-direction:column; overflow:hidden; } #deck-builder #db-dialog:has(#db-source-preview,#db-link-source-url) .db-dialog-heading { flex:none; } #deck-builder #db-dialog:has(#db-source-preview,#db-link-source-url) #db-dialog-body { min-height:0; overflow-y:auto; } #deck-builder .db-compare-current{align-items:stretch}#deck-builder .db-compare-current .db-compare-cover img{width:100%;height:100%;border-radius:0}#deck-builder .db-compare-current strong{font-size:20px}#deck-builder .db-compare-key{justify-content:center}#deck-builder .db-compare-empty p{margin-inline:auto} #deck-builder .db-source-success{display:flex;align-items:center;gap:14px}#deck-builder .db-source-success>span{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#6ebf9720;color:#89c7aa;font-size:22px}#deck-builder .db-source-success p{color:var(--db-muted);margin-top:5px} #deck-builder .db-compare-cover{position:relative}#deck-builder .db-compare-cover img{position:absolute;inset:0} #deck-builder .db-editor-role{display:inline-block;margin-inline-start:10px;padding:3px 8px;border:1px solid #c4a34480;border-radius:999px;background:#c4a34418;color:#edd078;font-size:11px;font-weight:700} #db-dialog .dc-collab-people{list-style:none;padding:0;margin:8px 0 18px;display:grid;gap:0} #db-dialog .dc-collab-people li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #ffffff16} #db-dialog .dc-collab-people li>span{min-width:0;overflow-wrap:anywhere} #db-dialog .dc-collab-people small{display:block;margin-top:3px;color:var(--db-muted,#9b9ba9)} #db-dialog .dc-collab-people button{flex:none;min-height:40px} #db-dialog #dc-collab-results{display:grid;gap:5px} #db-dialog #dc-collab-results button{text-align:start;min-height:44px;overflow-wrap:anywhere} #db-dialog #dc-collab-status:empty{display:none} #db-dialog .db-merge-conflicts{display:grid;gap:12px;margin:14px 0}#db-dialog .db-merge-conflicts fieldset{border:1px solid #ffffff20;border-radius:8px;min-width:0;padding:12px}#db-dialog .db-merge-conflicts legend{color:#e5c976;font-weight:700;font-size:13px}#db-dialog .db-merge-conflicts label{overflow-wrap:anywhere;align-items:start;font-size:12px;margin:8px 0}#db-dialog .db-merge-conflicts input{flex:none}#deck-builder #db-warning button{margin-left:12px} @media(max-width:400px){#db-dialog .dc-collab-people li{align-items:start;flex-direction:column}#db-dialog .dc-collab-people button{width:100%}} /* The isolated sample hand lives beneath the boards, before deck utilities. */ #deck-builder:not([data-panel=deck]) :is(.db-sample-hand,#db-deck-extras), #deck-builder[data-setup=true] :is(.db-sample-hand,#db-deck-extras), #deck-builder[data-panel=price] .db-workspace { display:none; } #deck-builder .db-sample-hand { min-width:0; margin:24px 0 0; padding:24px 0; border-top:1px solid var(--db-border); } #deck-builder .db-hand-heading { display:flex; align-items:start; justify-content:space-between; flex-wrap:wrap; gap:14px 24px; } #deck-builder .db-hand-heading h2 { font-size:20px; margin:0 0 5px; } #deck-builder .db-hand-heading p { margin:0; font-size:12px; } #deck-builder .db-hand-controls { display:flex; flex-wrap:wrap; gap:8px; } #deck-builder .db-hand-controls button,#deck-builder .db-hand-bottom button { min-height:44px; font-size:13px; } #deck-builder .db-hand-meta { display:flex; flex-wrap:wrap; gap:6px 20px; color:var(--db-muted); font-size:12px; margin:18px 0 12px; } #deck-builder .db-hand-meta strong { color:var(--db-text); font-weight:650; } #deck-builder .db-hand-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; border-left:2px solid var(--db-accent); padding:8px 12px; margin:16px 0; } #deck-builder .db-hand-bottom[hidden] { display:none; } #deck-builder .db-hand-bottom strong { font-size:13px; } #deck-builder .db-hand-bottom p { font-size:12px; margin:5px 0 0; } #deck-builder .db-hand-viewport { overflow-x:auto; overscroll-behavior-x:contain; padding:8px 4px 4px; margin:0 -4px; } #deck-builder .db-hand-cards { position:relative; display:flex; align-items:start; justify-content:center; gap:10px; min-width:100%; width:max-content; } #deck-builder .db-hand-card { flex:none; width:clamp(118px,calc((100cqw - 60px) / 7),170px); min-width:0; } #deck-builder .db-hand-art { display:block; position:relative; width:100%; aspect-ratio:63/88; padding:0; border:0; overflow:hidden; border-radius:7px; background:var(--db-raised); box-shadow:0 2px 8px #0005; cursor:grab; touch-action:auto; } #deck-builder .db-hand-art img { display:block; width:100%; height:100%; object-fit:contain; border-radius:7px; } #deck-builder .db-hand-art.foil-card-frame,#deck-builder .db-hand-art.foil-card-frame img { transform:none; } #deck-builder .db-hand-art::before,#deck-builder .db-hand-art::after { border-radius:7px; } #deck-builder .db-hand-art:focus-visible,#deck-builder .db-hand-grip:focus-visible { outline:2px solid #81b8e6; outline-offset:-2px; } #deck-builder .db-hand-placeholder { display:none; font-size:13px; line-height:1.5; padding:16px; overflow-wrap:anywhere; } #deck-builder .db-hand-missing img { display:none; } #deck-builder .db-hand-missing .db-hand-placeholder { display:block; } #deck-builder .db-hand-caption { display:flex; align-items:center; justify-content:space-between; min-height:44px; color:var(--db-muted); } #deck-builder .db-hand-position { font-size:11px; padding:0 6px; } #deck-builder .db-hand-grip { width:44px; min-height:44px; padding:0; border:0; background:transparent; color:var(--db-muted); cursor:grab; touch-action:none; } #deck-builder .db-hand-grip svg { vertical-align:middle; } #deck-builder .db-hand-grip[aria-pressed=true] { color:var(--db-accent); outline:1px solid var(--db-accent); } #deck-builder .db-hand-reorder { position:fixed; inset:auto; margin:0; box-sizing:border-box; width:min(288px,calc(100vw - 32px)); max-height:calc(100svh - 32px); overflow:auto; padding:16px; border:1px solid var(--db-border); border-radius:10px; background:var(--db-raised); color:var(--db-text); box-shadow:0 10px 30px #0006; } #deck-builder .db-hand-reorder h3 { margin:0; font-size:15px; overflow-wrap:anywhere; } #deck-builder .db-hand-reorder p { margin:6px 0 16px; font-size:12px; } #deck-builder .db-hand-reorder > div { display:flex; gap:8px; } #deck-builder .db-hand-reorder button { flex:1; min-height:44px; } #deck-builder .db-hand-reorder > button { width:100%; margin-top:8px; } #deck-builder .db-hand-grip[aria-expanded=true] { color:var(--db-accent); } #deck-builder .db-hand-help { font-size:11px; margin:6px 0 0; line-height:1.7; max-width:760px; } #deck-builder .db-hand-selected { display:none; position:absolute; inset:auto 6px 6px auto; border-radius:4px; background:var(--db-accent); color:#17130a; padding:3px 7px; font-size:13px; font-weight:700; box-shadow:0 2px 8px #0008; } #deck-builder .db-hand-chosen img { opacity:.78; } #deck-builder .db-hand-chosen .db-hand-selected { display:block; } #deck-builder[data-bottoming=true] .db-hand-art { cursor:pointer; } #deck-builder .db-hand-origin .db-hand-art { opacity:.23; } #deck-builder .db-hand-settling .db-hand-art { visibility:hidden; } .db-hand-overlay { position:fixed; inset:0 auto auto 0; z-index:10000; pointer-events:none; transform-origin:center; filter:drop-shadow(0 8px 22px #0006); } .db-hand-overlay .db-hand-art { display:block; width:100%; aspect-ratio:63/88; padding:0; border:0; border-radius:7px; overflow:hidden; background:#17171c; } .db-hand-overlay img { display:block; width:100%; height:100%; object-fit:contain; border-radius:7px; } .db-hand-overlay .db-hand-placeholder { font:13px/1.5 Arial,sans-serif; color:#f0edf7; display:block; padding:16px; } .db-hand-overlay img[src] + .db-hand-placeholder { display:none; } .db-hand-overlay img:not([src]) { display:none; } .db-hand-overlay .db-hand-selected { display:none; } #deck-builder .db-summary-numbers { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:560px; } #deck-builder .db-mv-section { grid-column:1/-1; padding-bottom:20px; border-bottom:1px solid var(--db-border); } #deck-builder .db-mv-section h3 { margin:0; } #deck-builder :is(.db-mv-section,.db-mana-section-heading) h3 > span { margin-left:8px; font-size:11px; font-weight:400; } #deck-builder .db-mv-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:20px 0 14px; } #deck-builder .db-mv-metrics > div { display:flex; flex-direction:column-reverse; gap:6px; } #deck-builder .db-mv-metrics dd { margin:0; font-size:28px; font-weight:650; color:var(--db-text); line-height:1.25; } #deck-builder .db-mv-metrics dt { font-size:12px; color:var(--db-muted); } #deck-builder .db-mv-section > p { margin:0; } #deck-builder .db-mana-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; } #deck-builder .db-mana-section-heading h3 { margin:0; } #deck-builder .db-mana-info { position:relative; flex:none; } #deck-builder .db-mana-info summary { display:grid; place-items:center; width:44px; height:44px; cursor:pointer; border-radius:7px; color:var(--db-muted); list-style:none; } #deck-builder .db-mana-info summary::-webkit-details-marker { display:none; } #deck-builder .db-mana-info summary:focus-visible { outline:2px solid var(--db-accent); } #deck-builder .db-mana-info p { position:absolute; z-index:5; right:0; top:44px; width:min(300px,calc(100cqw - 12px)); box-sizing:border-box; padding:14px; border:1px solid var(--db-border); background:var(--db-raised); box-shadow:0 8px 24px #0007; border-radius:7px; color:var(--db-text); font-size:12px; line-height:1.65; } #deck-builder .db-color-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:24px; margin:18px 0 24px; } #deck-builder .db-color-stat { min-width:0; text-align:left; } #deck-builder .db-mana-symbol { display:block; width:44px; height:44px; margin:0 auto; } #deck-builder .db-mana-symbol img { width:100%; height:100%; } #deck-builder .db-color-stat h4 { margin:8px 0 20px; text-align:center; font-size:12px; color:var(--db-text); } #deck-builder .db-mana-detail { display:flex; align-items:baseline; justify-content:space-between; gap:6px; font-size:11px; color:var(--db-muted); } #deck-builder .db-mana-detail strong { font-size:15px; color:var(--db-text); white-space:nowrap; } #deck-builder .db-mana-meter { display:block; height:8px; margin:7px 0 5px; background:#ffffff0d; border-radius:3px; overflow:hidden; } #deck-builder .db-mana-meter span { display:block; height:100%; background:var(--mana-color); opacity:.65; } #deck-builder .db-mana-production { height:16px; margin-top:7px; } #deck-builder .db-mana-production span { opacity:1; } #deck-builder .db-color-stat small { font-size:11px; } #deck-builder .db-color-stat .db-mana-detail:not(:first-of-type) { margin-top:18px; } #deck-builder .db-price-section { margin-top:0; padding-top:24px; border-top:0; } #deck-builder .db-price-summary dd { font-size:17px; } #deck-builder .db-price-summary dl > div:first-child dd { font-size:21px; } @container (max-width:1199px) { #deck-builder .db-color-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; } } @container (max-width:767px) { #deck-builder .db-color-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; } #deck-builder .db-mana-symbol { width:38px; height:38px; } #deck-builder .db-hand-card { width:clamp(118px,34cqw,145px); } } @container (max-width:600px) { #deck-builder .db-mv-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } #deck-builder .db-mv-section { margin:24px 0; } #deck-builder .db-hand-controls { width:100%; gap:8px; } #deck-builder .db-hand-controls button { flex:1 1 auto; padding:8px 10px; font-size:12px; } #deck-builder .db-hand-controls [data-hand-action=deal] { flex-basis:100%; } #deck-builder .db-hand-bottom button { width:100%; font-size:12px; } #deck-builder .db-mana-detail { flex-wrap:wrap; } } @media (prefers-reduced-motion:reduce) { #deck-builder .db-hand-chosen .db-hand-art { translate:none; } #deck-builder .db-hand-card,#deck-builder .db-hand-art,.db-hand-overlay { transition:none; animation:none; } } #deck-builder .db-hand-art:not(.db-is-foil)::before,#deck-builder .db-hand-art:not(.db-is-foil)::after { display:none; } #deck-builder .db-hand-art.db-is-foil::before { opacity:.55; transform:none; background:linear-gradient(125deg,transparent 4%,#efcd7259 20%,#94e9cf66 36%,#86bfff73 50%,#c4a0ff66 65%,#ffb7d659 80%,transparent 96%); } #deck-builder .db-hand-art.db-is-foil::after { opacity:.28; } #deck-builder .db-hand-art.db-is-foil:hover::before { opacity:.72; } #deck-builder .db-hand-art.db-is-foil:hover::after { opacity:.48; } #deck-builder .db-price-summary dd { flex:none; max-width:60%; overflow-wrap:normal; } #deck-builder .db-price-summary dl > div:first-child dd { white-space:nowrap; } @media (min-width:768px) { #deck-builder .db-color-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (min-width:1200px) { #deck-builder .db-color-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; } } #deck-builder .db-price-compare-action dd { max-width:100%; } /* Center compact phone artwork independently of the adjacent touch controls. */ #deck-builder .db-hand-title { display:flex; align-items:center; flex-wrap:wrap; gap:12px; } #deck-builder .db-hand-view { display:none; gap:4px; } #deck-builder .db-hand-view button { font-size:12px; min-height:44px; padding:8px 10px; } #deck-builder .db-hand-view button[aria-pressed=true] { border-color:var(--db-accent); color:var(--db-accent); background:#c9a84c12; } @media (max-width:767px) { #deck-builder .db-hand-title { width:100%; justify-content:space-between; } #deck-builder .db-hand-view { display:flex; } #deck-builder [data-hand-view=stack] .db-hand-viewport { overflow:visible; } #deck-builder [data-hand-view=stack] .db-hand-cards { --db-hand-stack-width:min(168px,calc(100cqw - 112px)); flex-direction:column; align-items:center; gap:0; width:100%; min-width:0; } #deck-builder [data-hand-view=stack] .db-hand-card { position:relative; box-sizing:border-box; width:var(--db-hand-stack-width); z-index:var(--db-hand-index); } #deck-builder [data-hand-view=stack] .db-hand-card:not(:last-child) { margin-bottom:calc(44px - var(--db-hand-stack-width) * 88 / 63); } #deck-builder [data-hand-view=stack] .db-hand-caption { position:absolute; top:0; right:-56px; width:56px; height:44px; min-height:44px; } #deck-builder [data-hand-view=stack] .db-hand-position { width:12px; padding:0; text-align:center; } #deck-builder [data-hand-view=stack] .db-hand-grip svg { rotate:90deg; } #deck-builder [data-hand-view=stack] .db-hand-selected { inset:6px 6px auto auto; font-size:11px; padding:2px 5px; } #deck-builder [data-hand-view=stack] .db-hand-missing .db-hand-placeholder { padding:8px; font-size:12px; line-height:1.25; } } #deck-builder .db-add[data-in-deck=true]{background:var(--db-accent,#c9a84c);border-color:var(--db-accent,#c9a84c);color:#14140f;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums} #deck-builder .db-add:is([data-copy-digits="4"],[data-copy-digits="5"]){font-size:13px} #deck-builder .db-add[data-in-deck=true]:hover{background:#efd58b;border-color:#efd58b;color:#14140f} #deck-builder .db-mana-summary { border-top:1px solid var(--db-border); padding:16px 0; font-size:13px; line-height:1.6; } #deck-builder .db-mana-summary p { margin:4px 0; overflow-wrap:anywhere; } #deck-builder .db-mana-summary .db-naus-note { color:var(--db-accent); } #deck-builder .db-naus-stats { grid-column:1/-1; } #deck-builder .db-naus-controls { display:flex; flex-wrap:wrap; align-items:end; gap:16px 24px; margin-top:18px; } #deck-builder .db-naus-controls > label { display:grid; gap:6px; font-size:12px; color:var(--db-muted); } #deck-builder .db-naus-controls input { width:110px; min-height:40px; } #deck-builder .db-naus-estimate { display:grid; gap:6px; } #deck-builder .db-naus-estimate output { font-size:28px; font-weight:650; line-height:1.25; color:var(--db-accent); } #deck-builder .db-naus-estimate span { font-size:12px; color:var(--db-muted); } #deck-builder .db-cost-basis { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px 0; } #deck-builder .db-cost-basis select { max-width:100%; } #deck-builder .db-cost-basis p { flex-basis:100%; margin:0; } #deck-builder #db-print-more { margin-top:20px; } #deck-builder #db-share { color:#e5c4ff; border-color:#a855f7; background:#a855f714; box-shadow:0 0 12px #a855f71f,inset 0 0 10px #a855f70a; } #deck-builder #db-share:is(:hover,:focus-visible) { color:#f6eaff; border-color:#ce91ff; background:#a855f726; box-shadow:0 0 16px #a855f733; } #deck-builder #db-share:focus-visible { outline-color:#ce91ff; } /* Deck actions share the card menu's quiet rows, with meaningful groups. */ #deck-builder .db-context.db-deck-actions { width:340px; max-width:calc(100vw - 24px); padding:14px; border-radius:12px; box-shadow:0 20px 60px #0007,0 4px 12px #0004; } #deck-builder .db-deck-action-groups { display:grid; gap:10px; } #deck-builder .db-deck-action-group + .db-deck-action-group { border-top:1px solid var(--db-border); padding-top:10px; } #deck-builder .db-deck-action-group h3 { margin:0 8px 4px; color:var(--db-muted); font-size:11px; line-height:1.4; font-weight:500; } #deck-builder .db-deck-action-group button { display:block; width:100%; min-height:36px; padding:8px; border:0; border-radius:6px; background:transparent; box-shadow:none; color:var(--db-text); text-align:left; font-size:13px; font-weight:500; line-height:1.4; } #deck-builder .db-deck-action-group button:hover { background:#ffffff0e; } #deck-builder .db-deck-action-group button:focus-visible,#deck-builder .db-deck-menu-tools summary:focus-visible { outline:2px solid var(--db-accent); outline-offset:-2px; } #deck-builder .db-deck-action-group button:disabled { opacity:.45; cursor:not-allowed; } #deck-builder .db-deck-menu-tools summary { padding:8px; border-radius:6px; font-size:13px; cursor:pointer; color:var(--db-muted); } #deck-builder .db-deck-menu-tools[open] summary { margin-bottom:4px; color:var(--db-text); } #deck-builder .db-deck-menu-recovery #db-menu-clear { color:#eeaaa5; } #deck-builder .db-deck-menu-recovery #db-menu-clear:hover { background:#ff555518; } #deck-builder .db-deck-menu-recovery p { margin:2px 8px 0; font-size:11px; line-height:1.5; color:var(--db-muted); } #deck-builder .db-scryfall-drop { position:fixed; inset:auto 16px 24px; z-index:1000; width:max-content; max-width:calc(100vw - 32px); margin:auto; padding:18px 24px; border:1px solid var(--db-accent); border-radius:10px; background:var(--db-panel); box-shadow:0 12px 40px #0009; pointer-events:none; text-align:center; } #deck-builder .db-scryfall-drop strong { display:block; font-size:16px; color:var(--db-accent); } #deck-builder .db-scryfall-drop span { display:block; margin-top:5px; font-size:12px; color:var(--db-muted); } #deck-builder .db-section.db-scryfall-target { outline:2px solid var(--db-accent); outline-offset:4px; border-radius:6px; } /* A single card-table gesture for redealing, with no extra control chrome. */ .db-hand-deal-layer { position:fixed; inset:0; z-index:9998; pointer-events:none; overflow:clip; } .db-hand-deal-card { position:absolute; transform-style:preserve-3d; pointer-events:none; } .db-hand-deal-front,.db-hand-deal-back { position:absolute; inset:0; backface-visibility:hidden; border-radius:7px; filter:drop-shadow(0 5px 10px #0005); overflow:hidden; } .db-hand-deal-back { transform:rotateY(180deg); background:#17171c; } .db-hand-deal-card.is-back .db-hand-deal-front { display:none; } .db-hand-deal-card.is-back .db-hand-deal-back { transform:none; backface-visibility:visible; } .db-hand-deal-layer .db-hand-art { display:block; width:100%; height:100%; padding:0; border:0; border-radius:7px; background:#17171c; color:#e1dce8; } .db-hand-deal-layer img { display:block; width:100%; height:100%; object-fit:contain; border-radius:7px; } .db-hand-deal-layer .db-hand-placeholder { display:none; } .db-hand-deal-layer img:not([src]) { display:none; } .db-hand-deal-layer img:not([src]) + .db-hand-placeholder { display:block; padding:16px; font:13px/1.5 Arial,sans-serif; } .db-hand-deal-layer .db-hand-selected { display:none; } /* Keep desktop card options discreet; touch layouts retain their larger targets. */ @media (min-width:768px) and (hover:hover) and (pointer:fine) { #deck-builder[data-layout=visual]:not([data-view=list],[data-view=condensed]) #db-rows .db-row-menu {width:24px;height:24px;min-height:24px;padding:0;border-radius:5px;font-size:0;line-height:1} #deck-builder[data-layout=visual]:not([data-view=list],[data-view=condensed]) #db-rows .db-row-menu::after {mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='1.5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Ccircle cx='12' cy='19' r='1.5'/%3E%3C/svg%3E")} } /* Token finishes use the same foil treatment as deck cards. */ #deck-builder .db-token-art.db-is-foil::before{opacity:.55;transform:none;background:linear-gradient(125deg,transparent 4%,#efcd7259 20%,#94e9cf66 36%,#86bfff73 50%,#c4a0ff66 65%,#ffb7d659 80%,transparent 96%)} #deck-builder .db-token-art.db-is-foil::after{opacity:.28} #deck-builder .db-token-art .db-token-menu{z-index:3} @media(max-width:600px) { #deck-builder .db-page-actions button:not(#db-more) { flex:0 1 auto; min-width:max-content; } #deck-builder .db-page-actions #db-resources { flex:0 1 auto; } #deck-builder .db-page-actions #db-more { min-width:44px; } } #deck-builder .db-tabs[data-overflow=true] { border-right:2px solid #c9a84c60; scroll-padding-inline:8px; } /* Combo gallery: card groups and outcomes share one readable surface. */ #deck-builder[data-panel=combos] .db-discovery-heading h2 { font-size:24px; margin:8px 0 0; } #deck-builder[data-panel=combos] .db-discovery-layout { grid-template-columns:180px minmax(0,1fr); gap:28px; } #deck-builder[data-panel=combos] .db-discovery-preview { padding-top:4px; } #deck-builder[data-panel=combos] .db-discovery-preview strong { height:auto; font-size:14px; } #deck-builder .db-combo-section-heading { margin-bottom:20px; } #deck-builder .db-combo-section-heading h3,#deck-builder .db-combos-ideas-heading h2 { font-size:18px; margin:0 0 6px; } #deck-builder .db-combo-section-heading p,#deck-builder .db-combos-ideas-heading p { margin:0; color:var(--db-muted); font-size:13px; max-width:65ch; } #deck-builder .db-combo-gallery { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; } #deck-builder .db-combo-gallery .db-combo-suggestion { min-width:0; border:1px solid var(--db-border); border-radius:12px; padding:20px; background:var(--db-panel); } #deck-builder .db-combo-heading { display:flex; gap:12px; align-items:start; justify-content:space-between; } #deck-builder .db-combo-heading h3 { margin:0; font-size:16px; line-height:1.5; overflow-wrap:anywhere; } #deck-builder .db-combo-state { flex:none; font-size:11px; white-space:nowrap; color:var(--db-muted); padding:4px 8px; border:1px solid var(--db-border); border-radius:6px; } #deck-builder .is-incomplete .db-combo-state { color:#e0bf61; border-color:#c9a84c66; } #deck-builder .db-combo-gallery .db-discovery-grid { grid-template-columns:repeat(auto-fill,minmax(90px,118px)); gap:12px; margin:20px 0; } #deck-builder .db-combo-gallery .db-discovery-name { line-height:1.4; margin-top:6px; } #deck-builder .db-combo-piece-missing .db-discovery-art { outline:2px dashed #c9a84c; outline-offset:3px; border-radius:7px; } #deck-builder .db-combo-piece-missing small { color:#e0bf61; margin-top:4px; } #deck-builder .db-combo-outcomes { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; } #deck-builder .db-combo-outcomes span { font-size:12px; line-height:1.5; padding:5px 9px; color:#e3dcbd; background:#c9a84c12; border:1px solid #c9a84c33; border-radius:6px; } #deck-builder .db-combo-gallery details { margin:0; border-top:1px solid var(--db-border); } #deck-builder .db-combo-gallery summary { min-height:44px; padding:12px 0; font-size:13px; font-weight:650; } #deck-builder .db-combo-instructions { color:var(--db-muted); font-size:13px; line-height:1.7; max-width:70ch; padding-bottom:12px; } #deck-builder .db-combo-instructions h4 { color:var(--db-text); margin:12px 0 6px; font-size:13px; } #deck-builder .db-combo-instructions p { margin:6px 0 12px; white-space:pre-line; } #deck-builder .db-combo-source { display:inline-flex; align-items:center; min-height:44px; font-size:12px; color:var(--db-muted); } #deck-builder .db-combos-ideas { margin-top:36px; padding:28px 0 0; border:0; border-top:1px solid var(--db-border); border-radius:0; background:transparent; } #deck-builder .db-combo-empty { grid-column:1/-1; margin:0; color:var(--db-muted); padding:20px; border:1px dashed var(--db-border); border-radius:10px; } @media(min-width:1280px) { #deck-builder .db-combo-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:760px) { #deck-builder[data-panel=combos] .db-discovery-layout { grid-template-columns:minmax(0,1fr); } } @media(max-width:480px) { #deck-builder .db-combo-gallery .db-combo-suggestion { padding:16px; } #deck-builder .db-combo-heading { flex-direction:column-reverse; gap:8px; } #deck-builder .db-combo-gallery .db-discovery-grid { grid-template-columns:repeat(2,minmax(0,118px)); gap:14px; } }