/* Expansion picker (artboard 1g): a bottom sheet on the phone, a centred
   dialog on a laptop. Overrides the legacy dialog chrome from style.css. */
#modal.expansion-modal{padding:0;border:0;background:var(--sheet-bg);color:var(--fg);max-width:min(560px,calc(100vw - 30px));width:560px;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow)}
#modal.expansion-modal .modal-close{color:var(--fg-muted);z-index:6}

.sheet{display:flex;flex-direction:column;max-height:min(760px,88vh);min-height:0}
.grabber{width:40px;height:4px;border-radius:2px;background:var(--edge-3);margin:10px auto 0;flex:none}
.sheet-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 20px 0;flex:none}
.sheet-head h2{font-family:var(--font-display);font-weight:800;font-size:calc(22px*var(--scale));letter-spacing:-.6px;color:var(--fg);margin:0}
.sheet-head small{font-size:calc(13px*var(--scale));color:var(--fg-muted);white-space:nowrap}

.sheet-search{display:flex;align-items:center;gap:10px;margin:14px 20px 0;padding:0 14px;height:44px;border-radius:var(--r-md);background:var(--field);color:var(--fg-muted);flex:none}
.sheet-search input{flex:1;min-width:0;border:0;background:none;color:var(--fg);font-size:calc(14px*var(--scale));outline:none}
.sheet-search input::placeholder{color:var(--fg-muted)}
.sheet-search input::-webkit-search-cancel-button{filter:invert(.5)}

.sheet-filters{display:flex;gap:6px;padding:12px 20px 0;overflow-x:auto;scrollbar-width:none;flex:none}
.sheet-filters::-webkit-scrollbar{display:none}
.sheet-filters button{flex:none;padding:7px 12px;border-radius:var(--r-pill);background:var(--surface-2);font-size:calc(12px*var(--scale));font-weight:600;color:var(--fg-2);white-space:nowrap}
.sheet-filters button.on{background:var(--on-nav);color:var(--on-nav-ink);font-weight:700}

.sheet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:16px 20px 8px;overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
.sheet-empty{grid-column:1/-1;padding:28px 4px;text-align:center;color:var(--fg-muted);font-size:calc(13px*var(--scale))}

.set-card{position:relative;border-radius:var(--r-lg);background:var(--tile);border:1.5px solid transparent}
.set-card.picked{border-color:var(--accent)}
.set-pick{display:block;width:100%;padding:12px;border-radius:var(--r-lg);text-align:left}
.set-pick b{display:block;font-weight:700;font-size:calc(14px*var(--scale));color:var(--fg);margin-top:10px}
.set-pick small{display:block;font-size:calc(11px*var(--scale));color:var(--fg-muted);margin-top:2px}
.set-pick .bar{display:block;margin-top:8px}

.fan{display:flex;justify-content:center;align-items:flex-end;height:100px;overflow:hidden}
.fan img{height:100%;width:auto;object-fit:contain}
.fan[data-n="1"] img{filter:drop-shadow(0 8px 10px #0008)}
.fan[data-n="2"] img:nth-child(1){transform:rotate(-8deg);margin-right:-12px;opacity:.8}
.fan[data-n="2"] img:nth-child(2){transform:rotate(8deg);position:relative;z-index:1;filter:drop-shadow(0 8px 10px #0008)}
.fan[data-n="3"] img:nth-child(1){transform:rotate(-10deg);margin-right:-18px;opacity:.75}
.fan[data-n="3"] img:nth-child(2){position:relative;z-index:1;filter:drop-shadow(0 8px 10px #0008)}
.fan[data-n="3"] img:nth-child(3){transform:rotate(10deg);margin-left:-18px;opacity:.75}

.pin-star{position:absolute;top:4px;right:4px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font-size:calc(14px*var(--scale));color:var(--pin-off);line-height:1}
.pin-star.on{color:var(--gold-text)}

.sheet-foot{flex:none;padding:14px 20px 20px;background:linear-gradient(transparent,var(--sheet-bg) 40%)}
.sheet-foot .btn-open{width:100%;height:54px;font-size:calc(15px*var(--scale))}

@media(max-width:860px){
 #modal.expansion-modal{width:100%;max-width:100%;margin:0;top:auto;bottom:0;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:90dvh}
 .sheet{max-height:90dvh}
 .sheet-foot{padding-bottom:max(20px,env(safe-area-inset-bottom))}
}

/* The remaining dialogs — settings, hourglasses, pack odds, the ten-pack results
   and the box — were the last light surfaces under a dark app. The default dialog
   moves to the night palette so they match the shell instead of each needing its
   own override; the legacy tokens inside them are re-pointed to suit. */
dialog:not(.cinematic-opening){background:var(--sheet-bg);color:var(--fg);border:1px solid var(--edge);box-shadow:var(--shadow);--ink:var(--fg);--muted:var(--fg-muted);--line:var(--edge);--mint:var(--surface-2);--green:var(--accent-text)}
dialog:not(.cinematic-opening)::backdrop{background:var(--scrim);backdrop-filter:blur(8px)}
dialog:not(.cinematic-opening) h2,dialog:not(.cinematic-opening) h3{color:var(--fg)}
dialog:not(.cinematic-opening) p{color:var(--fg-muted)}
dialog:not(.cinematic-opening) .eyebrow{color:var(--fg-muted)}
dialog:not(.cinematic-opening) .green{color:var(--accent-text)}
dialog:not(.cinematic-opening) .modal-close{color:var(--fg-muted)}
dialog:not(.cinematic-opening) input,dialog:not(.cinematic-opening) select,dialog:not(.cinematic-opening) textarea{background:var(--field);color:var(--fg);border:1px solid var(--edge)}
dialog:not(.cinematic-opening) input::placeholder{color:var(--fg-muted)}
dialog:not(.cinematic-opening) .secondary{background:var(--surface-2);color:var(--fg);border:1px solid var(--edge)}
dialog:not(.cinematic-opening) .primary{background:var(--accent);color:var(--accent-ink);border:0}
dialog:not(.cinematic-opening) .text-btn{color:var(--fg-muted)}
/* Panels inside those dialogs sat on white; give them the night surface. */
dialog:not(.cinematic-opening) :is(.hg-list,.hg-card,.odds-row,.settings-row,.link-panel,.batch-pack,.box-panel,.odds-table){background:var(--surface);border-color:var(--edge);color:var(--fg)}
dialog:not(.cinematic-opening) .hg-list li{border-color:var(--edge)}

/* Booster boxes and the ten-pack results keep their own light panels from the
   pre-overhaul design; move them onto the night surfaces too. */
#modal.box-modal,#modal.elite-modal,#modal.batch-modal{background:var(--sheet-bg);color:var(--fg)}
dialog:not(.cinematic-opening) :is(.box-product,.elite-shelf,.elite-promo,.batch-pack,.elite-head,.elite-foot){background:var(--surface);border-color:var(--edge);color:var(--fg)}
dialog:not(.cinematic-opening) :is(.box-product,.batch-pack) h3{color:var(--fg)}
dialog:not(.cinematic-opening) .elite-progress-track{background:var(--edge-2)}
dialog:not(.cinematic-opening) .elite-booster{background:var(--surface-2);border-color:var(--edge);color:var(--fg)}
dialog:not(.cinematic-opening) .elite-booster.next{background:var(--accent-soft);border-color:var(--accent)}
dialog:not(.cinematic-opening) .box-library-grid,dialog:not(.cinematic-opening) .batch-results{color:var(--fg)}
#modal.box-modal{width:900px;max-width:min(900px,calc(100vw - 30px))}