/* Shared refinements on the original paper / purple palette. Loaded after the base styles. */
:root{--surface:#fbfaf7;--surface-2:#f6f2f8;--surface-3:#e9e2ee;--radius:14px}
body{-webkit-tap-highlight-color:transparent}
button{border-radius:10px;transition:background .16s,border-color .16s,transform .12s,box-shadow .16s}
button:active:not(:disabled){transform:scale(.97)}
button.primary{border-radius:12px}
input,select{border-radius:10px}
select{background-image:linear-gradient(45deg,transparent 50%,var(--purple) 50%),linear-gradient(135deg,var(--purple) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;appearance:none;-webkit-appearance:none;padding-right:28px!important}
.panel,.cover,.rule-step,.basic-guide,.offline-card,.history-game{border-radius:var(--radius)}
.effect{border-left:0;border-radius:10px}
#notice:not(:empty){animation:toast-in .35s cubic-bezier(.2,.9,.3,1.2)}
/* Main view transition (applied once per navigation) */
main.view-enter>*{animation:view-in .36s cubic-bezier(.2,.8,.2,1) both}
main.view-enter>*:nth-child(2){animation-delay:.04s}main.view-enter>*:nth-child(3){animation-delay:.08s}
/* Library: the card image carries the information; the caption keeps only the name. */
.card-grid.is-entering .card{animation:card-in .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(min(var(--i,0),18) * 22ms)}
.card-art-wrap .art{border-radius:6%/4.3%;overflow:hidden;box-shadow:0 6px 14px #291a3926;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.card-art-wrap .art:hover{transform:translateY(-3px);box-shadow:0 12px 22px #291a3933}
.card-caption{position:relative;padding-top:8px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px}
.card-caption h3{flex:1 1 80px}
.card-caption .card-bottom{flex:0 0 auto;margin:0 0 0 auto!important}
.card-caption .card-bottom:has(.has-count){flex:1 1 100%}
.card-caption>small,.card-numbers,.card-attack{display:none}
.card-caption h3{font-size:12px;line-height:1.4;margin:0;overflow-wrap:anywhere}
.card-bottom{margin:6px 0 0;display:block}
.tile-stepper{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.tile-stepper.has-count{justify-content:space-between;background:var(--lilac);border-radius:12px;padding:2px}
.tile-stepper b{font:700 15px ui-monospace,monospace;color:var(--purple)}
.tile-stepper b small{font-size:10px;color:var(--muted)}
.tile-stepper button{width:40px;min-width:40px;height:38px;min-height:38px;padding:0;border-radius:10px;display:grid;place-items:center}
.tile-stepper .add{background:var(--purple);border-color:var(--purple);color:#fff}
.tile-stepper .add:disabled{background:#d9cde1;border-color:#d9cde1;color:var(--muted);opacity:1}
.tile-stepper .tile-remove{background:#fbfaf7;border-color:#d9cde1;color:var(--purple)}
.tile-stepper .icon{width:16px;height:16px}
.tile-count{position:absolute;right:6px;top:6px;padding:2px 8px;border-radius:9px;background:var(--purple);color:#fff;font:700 12px ui-monospace,monospace;pointer-events:none;animation:pop-in .25s cubic-bezier(.2,1.4,.3,1)}
@keyframes pop-in{from{transform:scale(.5)}to{transform:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.compact-filters{gap:10px!important;padding-bottom:12px;margin-bottom:4px!important}
.filter-top{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.filter-top .search-field{flex:1;min-width:0;margin:0}
.filter-top .more-filters>summary{min-height:48px;height:100%;padding:0 14px;gap:6px;display:flex;align-items:center}
.filter-top .more-filters[open]>summary{width:auto;margin:0;background:var(--lilac);border-color:var(--purple);color:var(--purple)}
.filter-top>.advanced-filter-grid{flex-basis:100%}
.filter-top .more-filters:not([open])~.advanced-filter-grid{display:none}
.filter-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px}
.bare-select select{width:100%;min-width:0;min-height:42px;font-size:14px;padding:8px 10px}
.reset-chip{min-height:42px;padding:0 10px;display:inline-flex;gap:4px;align-items:center;border-radius:10px;background:var(--lilac);color:var(--purple);border-color:transparent;font:700 12px ui-monospace,monospace}
.reset-chip[hidden]{display:none}
.reset-chip .icon{width:14px;height:14px}
.filter-clear{grid-column:1/-1;min-height:44px;display:inline-flex;justify-content:center;gap:6px;align-items:center;border-radius:10px;background:var(--lilac);color:var(--purple);border-color:transparent;font-weight:700}
.filter-clear .icon{width:14px;height:14px}
.filter-clear:disabled{opacity:.45}
.collection .section-heading{margin-bottom:12px}
.collection .section-heading .eyebrow{display:none}
.collection-meta{padding:10px 0}
#hero-deck span{background:var(--lilac);color:var(--purple);border-radius:9px;padding:1px 7px;font:700 11px ui-monospace,monospace}
.search-field{border-radius:12px}
.more-filters>summary,.more-filters summary{border-radius:10px}
.filter-top>.advanced-filter-grid{border-radius:var(--radius)}
.filter-multiple label{border-radius:9px}
/* Deck sheet */
.deck.is-open.is-opening{animation:sheet-up .36s cubic-bezier(.2,.9,.25,1)}
[data-long-detail]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
[data-long-detail] img{-webkit-user-drag:none;transition:transform .45s cubic-bezier(.3,0,.2,1),filter .2s}
[data-long-detail].is-pressing img{transform:scale(.94);filter:brightness(.92)}
.deck-library-item{transition:transform .18s,box-shadow .18s}
.deck-library-item:hover{transform:translateY(-2px);box-shadow:0 8px 16px #30203914}
/* Deck contents as a card grid: each name stays with its image. */
.deck .deck-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;margin-top:12px}
.deck .deck-list li{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:1fr auto;grid-template-areas:"info info info" "remove qty add";align-items:center;gap:4px;padding:0;border:0}
/* Art and name sit at the top; the extra height of a long name in the row goes below them, so steppers line up. */
.deck-list .deck-card-info{grid-area:info;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px;padding:0!important;min-width:0}
.deck-list .deck-card-info img{width:100%!important;height:auto!important;aspect-ratio:5/7;object-fit:cover;border-radius:6%/4.3%;box-shadow:0 4px 10px #291a3926}
.deck-list .deck-card-info span{font-size:10px!important;white-space:normal!important;line-height:1.35;overflow-wrap:anywhere}
.deck-list .deck-card-info small{display:none}
.deck-list [data-remove]{grid-area:remove;min-width:0!important;width:100%!important;min-height:34px!important;border-radius:9px;padding:0}
.deck-list .deck-card-add{grid-area:add;min-width:0!important;width:100%;min-height:34px!important;border-radius:9px;background:var(--lilac);color:var(--purple);border-color:transparent;padding:0}
.deck-list .deck-card-add .icon{width:15px;height:15px}
.deck-list .deck-quantity{grid-area:qty;font:700 13px ui-monospace,monospace!important;width:auto!important}
/* Dialogs and sheets */
dialog[open]:not(.card-preview){animation:dialog-in .28s cubic-bezier(.2,.9,.3,1.1)}
.sheet-dialog{width:min(720px,100vw);max-width:100vw;max-height:90dvh;margin:auto auto 0;border-radius:20px 20px 0 0;border-top:3px solid var(--purple);padding:18px max(16px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overflow:auto}
dialog.sheet-dialog[open]{animation:sheet-up .36s cubic-bezier(.2,.9,.25,1)}
.sheet-dialog::before{content:'';display:block;width:44px;height:5px;border-radius:3px;background:var(--line);margin:-6px auto 10px}
.sheet-dialog .close{position:absolute;right:14px;top:14px;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%}
.sheet-head{margin:0 50px 14px 0}
.sheet-head .eyebrow{display:flex;align-items:center;gap:6px;margin:0 0 2px;color:var(--muted)}
.sheet-head .eyebrow .icon{width:14px;height:14px}
.sheet-head h2{margin:0;font-size:20px}
/* Card detail: image first, effect visible without an extra tap. */
.card-preview .detail-layout{display:flex!important;flex-direction:column;gap:12px;padding:max(58px,calc(env(safe-area-inset-top,0px) + 50px)) max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px))!important}
.detail-art{position:relative;flex:1 1 0;min-height:0;display:grid;place-items:center;perspective:900px;animation:detail-in .4s cubic-bezier(.2,.9,.3,1.1) both}
.detail-art img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;border-radius:4.5%/3.2%;box-shadow:0 20px 40px #000a;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out}
.detail-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#ffffff1c calc(var(--sx,50%) - 4%),transparent calc(var(--sx,50%) + 10%));mix-blend-mode:screen}
.card-preview .card-data{position:relative!important;inset:auto!important;top:auto!important;flex:0 1 auto;max-height:56%;overflow-y:auto;padding:0 18px calc(14px + var(--safe-bottom,12px));margin:0 -14px;border-radius:18px 18px 0 0;background:#21182ff5;animation:sheet-up .38s .05s cubic-bezier(.2,.9,.25,1) both}
.card-preview .card-data:not([open]){flex:none}
.card-data>summary{display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:14px 0 10px!important;position:sticky;top:0;background:#21182f;z-index:1}
.card-data>summary .icon{transition:transform .2s;flex-shrink:0}
.card-data[open]>summary .icon{transform:rotate(180deg)}
.detail-title{display:grid;gap:2px;min-width:0}
.detail-title small{font-size:10px;color:#cabcd3}
.detail-title strong{font-size:18px;color:#fff;line-height:1.35}
.stat-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px}
.stat-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:10px;background:#ffffff12;border:1px solid #ffffff1a;font-size:11px;color:#f3eef6}
.stat-chip small{color:#cabcd3;font-size:9px}
.stat-chip b{font:700 14px ui-monospace,monospace}
.stat-chip .icon{width:14px;height:14px;color:#c1afcf}
.stat-chip.is-day .icon{color:var(--day,#e8b84a)}
.card-data .effect{font-size:13px;line-height:1.85;margin:0 0 10px;padding:12px;background:#ffffff10;color:#f3eef6}
.card-data .errata{font-size:11px;color:var(--acid)}
.detail-qa{margin:12px 0}
.detail-qa .eyebrow{color:#cabcd3}
.detail-qa details{border-top:1px solid #ffffff1a;padding:4px 0}
.detail-qa summary{font-size:12px;line-height:1.6;padding:8px 0;color:#f3eef6}
.detail-qa p{font-size:12px;line-height:1.8;color:#cabcd3;white-space:pre-wrap}
.detail-meta{font-size:10px!important;line-height:1.8!important;color:#cabcd3}
.detail-meta a{display:inline-flex;align-items:center;gap:4px}
.detail-meta .icon{width:12px;height:12px}
/* Match setup */
.setup-stage{max-width:720px;margin:0 auto;display:grid;gap:16px}
.setup-stage .page-heading{margin:0}
.mode-selection{display:grid;gap:8px}
.mode-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.mode-subpicker{padding:8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.mode-subpicker .mode-card{min-height:68px!important}
.mode-card{min-height:84px!important;padding:12px 6px!important;flex-direction:column;justify-content:center;gap:8px!important;border-radius:var(--radius)}
.mode-card strong{font-size:12px!important;white-space:nowrap}
.mode-card>.icon{width:24px!important;height:24px!important}
.mode-card .mode-selected{position:absolute;right:7px;top:7px}
.versus-board{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}
.versus-slot{position:relative;display:grid;justify-items:center;gap:6px;padding:14px 8px 12px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-align:center;min-width:0;overflow:hidden}
.versus-slot.slot-0{border-top:3px solid var(--purple)}.versus-slot.slot-1{border-top:3px solid var(--sun)}
.versus-slot strong{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.versus-slot small{font-size:10px;color:var(--muted);min-height:1.4em}
.versus-cover{display:grid;place-items:center;height:112px}
.versus-cover .deck-cover{transform:scale(1.15) rotate(-4deg)}
.side-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:9px;font:700 9px ui-monospace,monospace;letter-spacing:1px;background:var(--lilac);color:var(--purple)}
.side-badge.is-day{background:var(--sun-soft);color:var(--sun-ink)}
.side-badge .icon{width:12px;height:12px}
.slot-change{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--purple)}
.slot-change .icon{width:13px;height:13px}
.versus-mark{font:italic 900 22px/1 var(--display);color:var(--purple)}
.cpu-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.cpu-level{display:grid!important;gap:6px;margin:0!important;font-size:11px;color:var(--muted)}
.cpu-level>span{display:flex;align-items:center;gap:5px}
.cpu-level .icon{width:14px;height:14px}
.cpu-level select{width:100%;margin:0!important;font-size:15px}
.start-match{min-height:56px;font-size:15px!important;justify-content:center!important;gap:12px!important;margin:0!important;border-radius:14px!important}
/* Research: the match setup's versus board, compact settings and run buttons */
.lab-setup{padding:14px!important}
.lab-versus{margin:0 0 6px}
.lab-versus .versus-slot{padding:10px 6px 10px}
.lab-versus .versus-cover{height:92px}
.lab-versus .versus-cover .deck-cover{transform:scale(.95) rotate(-4deg)}
.lab-versus .versus-slot strong{font-size:13px}
.slot-select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:pointer}
.slot-select:disabled{cursor:default}
.versus-slot:has(.slot-select:focus-visible){outline:2px solid var(--purple);outline-offset:2px}
.lab-opponent-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;font-size:12px}
.lab-opponent-row .text-button{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0;font-size:12px}
.lab-opponent-row .icon{width:14px;height:14px}
.profile-details{margin:0 0 10px!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.profile-details>summary{display:flex;align-items:center;gap:6px;padding:8px 0}
.profile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:1;margin:0;padding:0;border:0}
.profile-grid>span{display:grid;gap:2px;min-width:0}
.profile-grid>span>small{font-size:10px;line-height:1.3;color:var(--muted)}
.profile-grid strong{font:17px/1.2 var(--display);color:var(--purple)}
.profile-grid strong small{font-size:10px}
.lab-setup .ai-evidence{margin:0 0 10px}
.lab-controls{display:grid!important;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:8px;margin:0 0 10px!important}
.lab-controls label{display:grid!important;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:4px;min-width:0;font-size:11px;color:var(--muted)}
.lab-controls .lab-cpu{order:-1}
.lab-controls select{display:block;box-sizing:border-box;width:100%;min-width:0;max-width:none!important;min-height:44px;margin:0!important;font-size:16px}
.lab-run{display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px;margin:0!important}
.lab-run>button{min-width:0;min-height:48px;justify-content:center;gap:6px;padding:8px 10px;font-size:13px;line-height:1.35;text-align:center;border-radius:12px;white-space:normal}
.lab-run>button .icon{width:16px;height:16px;flex:none}
.lab-run>.wide{grid-column:1/-1;white-space:normal}
.analysis-progress{margin-top:10px}
.analysis-progress progress{margin-top:6px}
.analysis-progress>div:last-child{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.analysis-progress .text-button{margin:0;min-height:36px}
.lab-help{margin-top:8px;border-top:1px solid var(--line)}
.lab-help>summary{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.lab-help dl{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;margin:4px 0 8px;font-size:12px;line-height:1.5}
.lab-help dt{font-weight:700;white-space:nowrap}.lab-help dd{margin:0}
.lab-help p{font-size:11px;margin:0 0 6px}
.lab-results,.optimization-results{margin-top:16px}
.lab-results>h2,.optimization-results h2,.study-result h2{font-size:18px;margin:0 0 8px}
.study-result p{margin:4px 0;font-size:12px;line-height:1.6}
.matchup-result{padding:14px!important;margin-bottom:12px}
.result-name h3{margin-bottom:2px}
.win-rate-line{margin:4px 0 10px}
.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;padding:0 0 8px}
.metric>span{margin-bottom:2px;line-height:1.35}
.metric>strong{font-size:20px}
.metric>small{margin-top:1px;line-height:1.4}
.side-split{margin:0 0 4px;font-size:12px}
.tested-candidate{padding:12px 14px!important;margin:10px 0}
.tested-candidate p{margin:4px 0;font-size:12px;line-height:1.6}
.swap-cards{gap:14px;margin:10px 0}
.swap-cards>div{width:118px}
.swap-card-detail img{max-width:118px}
.saved-audit{margin:12px 0 0;padding:0 14px!important}
.saved-audit>summary{display:flex;align-items:center;min-height:46px;padding:0;font-size:13px}
.research-history{margin:14px 0}
.lab-method{margin-top:10px}
/* Card names always appear with their image */
.recipe-card-list{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px!important}
.recipe-card-list>button{position:relative;display:grid!important;gap:5px!important;padding:0!important;border:0!important;background:none!important;min-height:0!important;text-align:left}
.recipe-card-list>button img{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:6%/4.3%;box-shadow:0 4px 10px #291a3926}
.recipe-card-list>button>span{font-size:10px!important;line-height:1.35!important;overflow-wrap:anywhere}
.recipe-card-list>button>strong{position:absolute;right:4px;top:4px;padding:1px 6px;border-radius:8px;background:var(--deep);color:#fff;font:700 11px ui-monospace,monospace!important}
.recipe-card-list>button>small{position:absolute;left:4px;top:4px;padding:1px 6px;border-radius:8px;background:var(--acid);color:var(--deep)!important;font-weight:700}
@media(max-width:600px){
  .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .metric>strong{font-size:18px}
  .recommendation-head>strong{font-size:24px}
  .library-actions{margin-bottom:12px}
  .library-actions button{min-height:42px}
  .collection .section-heading h2{font-size:19px}
  .filter-top .more-filters>summary span{display:none}
  .mode-card{min-height:78px!important}
  .mode-card strong{font-size:11px!important}
  .versus-cover{height:96px}
  .versus-cover .deck-cover{transform:scale(1) rotate(-4deg)}
}
@keyframes view-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes card-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sheet-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes dialog-in{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
@keyframes detail-in{from{transform:scale(.9) translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes toast-in{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
/* Both VS slots share one height; the player line reserves two lines so the change link lines up. */
.versus-board{align-items:stretch}
.versus-mark{align-self:center}
.versus-slot{grid-template-rows:auto auto auto minmax(2.9em,auto) 1fr;align-content:start}
.versus-slot small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}
.versus-slot .slot-change{align-self:end}
/* Settings: pacing */
.pace-card{display:grid;gap:12px}
.pace-card h2{margin:0;font-size:18px}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--surface-3)}
.segmented button{min-height:42px;border:0;border-radius:9px;font-size:13px}
.segmented button[aria-pressed="true"]{background:#fbfaf7;color:var(--purple);font-weight:700;box-shadow:0 1px 4px #291a3920}
.toggle-row{display:flex;align-items:center;gap:10px;font-size:13px}
.toggle-row input{width:20px;height:20px;min-height:20px}
.pace-card .muted{margin:0;font-size:11px}
/* Deck editor insights */
.deck-insights{display:grid;gap:8px;margin:0 0 12px;padding:10px;border-radius:12px;background:var(--surface-2)}
.insight-curve{display:grid;grid-template-columns:repeat(9,1fr);align-items:end;gap:4px;height:64px}
.insight-curve>div{display:grid;grid-template-rows:12px 1fr 12px;height:100%;justify-items:center}
.insight-curve b{font:700 9px ui-monospace,monospace;color:var(--purple)}
.insight-curve i{align-self:end;display:block;width:70%;min-height:2px;border-radius:3px 3px 0 0;background:#9474aa}
.insight-curve small{font:9px ui-monospace,monospace;color:var(--muted)}
.insight-chips{display:flex;flex-wrap:wrap;gap:5px}
.insight-chips span{padding:3px 8px;border-radius:9px;background:#fbfaf7;font-size:10px;color:var(--ink)}
.deck-issue{margin:0;padding:6px 10px;border-radius:9px;background:#fff6dc;color:#6b5414;font-size:11px}
.deck-issue.is-error{background:#f8e3e8;color:#8f2f4a}
/* Card tiles: count controls on the image, one-line name below */
.card-art-wrap{position:relative}
.card-art-wrap .tile-stepper{position:absolute;right:6px;bottom:6px;z-index:2;display:flex;align-items:center;gap:2px;padding:3px;border-radius:22px;background:#fbfaf7f2;box-shadow:0 3px 10px #291a3940}
.card-art-wrap .tile-stepper:not(.has-count){padding:0;background:none;box-shadow:none}
.card-art-wrap .tile-stepper button{width:36px;min-width:36px;height:36px;min-height:36px;border-radius:50%}
.card-art-wrap .tile-stepper:not(.has-count) .add{box-shadow:0 3px 10px #291a3955,0 0 0 2px #fbfaf7}
.card-art-wrap .tile-stepper b{min-width:30px;text-align:center}
.card-caption{display:block;padding-top:7px}
.card-caption h3{min-height:0;margin:0;font-size:12px}
@media(max-width:600px){.collection-meta{display:none}.collection .section-heading{margin-bottom:10px}}
/* Result card */
.result-overlay{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:#291a39d9}
.result-card{display:grid;justify-items:center;gap:10px;width:min(340px,100%)}
.result-winner{margin:-4px 0 0;font-size:14px;font-weight:700;color:#f3eef6}
.result-score{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;width:100%;margin-top:4px}
.result-side{display:grid;justify-items:center;gap:4px;padding:10px 6px;border-radius:14px;background:#ffffff10;border:1px solid #ffffff1f;min-width:0}
.result-side.is-winner{background:#d6eb911f;border-color:#d6eb9188}
.result-side strong{font-size:12px;line-height:1.35;color:#f3eef6;text-align:center;overflow-wrap:anywhere}
.result-side b{font:700 16px ui-monospace,monospace;color:#f3eef6}
.result-side.is-winner b{color:var(--acid)}
.result-score .versus-mark{color:#d9c9e5;font-size:16px}
.result-turn{margin:0;font:700 10px ui-monospace,monospace;letter-spacing:2px;color:#b09bc2}
.result-card>.primary{width:100%;justify-content:center;min-height:52px}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.result-actions .secondary{min-height:46px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;color:var(--ink)}
.result-actions .icon{width:16px;height:16px}
.card-grid .card-caption h3{display:block;white-space:normal;overflow:visible}
/* Favourites */
.filter-row{grid-template-columns:repeat(3,minmax(0,1fr)) auto auto}
.favorite-chip{min-height:42px;width:42px;padding:0;border-radius:10px;font-size:18px;color:#b9a8c8;background:#fbfaf7}
.favorite-chip[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:var(--acid)}
.favorite-mark{position:absolute;right:6px;top:6px;z-index:2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--purple);color:var(--acid);font-size:13px;box-shadow:0 2px 6px #291a3955}
.favorite-toggle{position:absolute;left:4px;top:4px;z-index:3;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;font-size:22px;color:#ffffffaa;background:#21182fcc;border:1px solid #ffffff30}
.favorite-toggle[aria-pressed="true"]{color:var(--acid);background:var(--purple)}
/* Deck tools: quick test and history */
.deck-tool{margin:12px 0;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.deck-tool>summary{display:flex;align-items:center;gap:8px;min-height:46px;font-size:13px;font-weight:700}
.deck-tool>summary .icon{width:16px;height:16px;color:var(--purple)}
.deck-tool[open]{padding-bottom:12px}
.trial-controls{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px}
.trial-controls label{display:grid;gap:4px;font-size:11px;color:var(--muted)}
.trial-controls select{width:100%;font-size:14px;min-height:42px}
.deck-trial .primary{width:100%;justify-content:center;gap:8px;min-height:46px}
.trial-progress{display:grid;gap:6px}
.trial-result{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;margin-top:10px;padding:10px;border-radius:10px;background:#fbfaf7}
.trial-result strong{grid-row:span 2;font:700 22px var(--display);color:var(--purple)}
.trial-result span{font-size:12px;font-weight:700}
.trial-result small{font-size:10px;line-height:1.6;color:var(--muted)}
.deck-tool .muted{font-size:10px;margin:8px 0 0}
.revision{padding:10px 0;border-top:1px solid var(--line)}
.revision-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.revision-head strong{font-size:12px}
.diff-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px}
.diff-row b{width:34px;font:700 10px ui-monospace,monospace}
.diff-row.is-in b{color:#4f6b14}.diff-row.is-out b{color:#9b2f4b}
.diff-card{width:34px;padding:0;min-height:0;border:0;background:none}
.diff-card img{display:block;width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:3px}
.diff-row.is-out .diff-card img{filter:grayscale(.6);opacity:.7}
/* First-launch offline offer */
.offline-offer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 10px;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:var(--surface-3);font-size:12px;line-height:1.6}
.offline-offer>.icon{width:20px;height:20px;color:var(--purple)}
.offline-offer progress{grid-column:1/-1;width:100%;margin:0}
.offline-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.offline-actions .primary{min-height:40px;padding:6px 16px;font-size:12px}
.offline-offer.is-done{background:#eef6cf}
.offline-size{display:block;font-size:10px;color:var(--muted)}
/* Day/night seat controls on the match setup */
.side-actions{display:grid;grid-template-columns:1fr auto;gap:8px}
.side-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fbfaf7;font-size:13px;font-weight:700;color:var(--ink)}
.side-actions .icon{width:16px;height:16px}
.versus-slot.is-you{box-shadow:0 0 0 2px var(--purple)}
/* Names wrap instead of truncating; tiles keep art aligned at the top of each row. */
.recipe-card-list>button,.zone-card-list>button{align-content:start}
.card-grid .card{display:flex;flex-direction:column}
@media(max-width:600px){.advanced-filter-grid .filter-range{grid-column:1/-1}}
.pagination[hidden]{display:none}
/* Original AI and tournament decks are read-only; copying makes an editable deck */
.deck-readonly{display:grid;gap:8px;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--surface-3)}
.deck-readonly p{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:12px;line-height:1.5}
.deck-readonly .icon{flex:none;width:16px;height:16px;margin-top:1px}
.deck-readonly button{min-height:44px;justify-content:center}
#deck-name[readonly]{background:transparent;border-color:transparent}