/* Card Viewer: a collector's binder. The cards are the loud part; everything around them stays quiet.
   Palette is taken from the card frame itself: night navy, frame gold, parchment. */
:root {
  --ink: #0b0a1e; --night: #10142e; --panel: #171d3d; --panel-2: #1e2650; --line: #2c3566;
  --gold: #e9c46a; --gold-deep: #b98a2e; --parch: #f7ecc8; --text: #e9ebfa; --muted: #959bc4;
  --foil: #7df9ff; --good: #6fe0a4; --bad: #ff7a8c;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cell: 168px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: radial-gradient(1200px 700px at 70% -10%, #1b2352 0%, transparent 60%), var(--ink); color: var(--text); font: 15px/1.5 var(--sans); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--gold); }
:focus-visible { outline: 2px solid var(--foil); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; left: -9999px; }
[hidden] { display: none !important; }

/* ---- top bar */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 10px clamp(12px, 3vw, 28px); background: rgba(11, 10, 30, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font: 600 21px/1 var(--serif); letter-spacing: .02em; color: var(--parch); text-decoration: none; white-space: nowrap; }
.brand svg { width: 26px; height: 26px; stroke: var(--gold); fill: none; stroke-width: 1.6; }
.tabs { display: flex; gap: 2px; margin-left: 6px; }
.tab { background: none; border: 0; padding: 9px 14px; border-radius: 9px; color: var(--muted); cursor: pointer; font-weight: 600; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--ink); background: var(--gold); }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.iconbtn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.iconbtn:hover { border-color: var(--gold-deep); }
.iconbtn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.who { color: var(--muted); font-size: 13px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; font-weight: 600; text-decoration: none; }
.btn:hover { border-color: var(--gold-deep); }
.btn.primary { background: linear-gradient(180deg, #f1d078, var(--gold)); color: #231a05; border-color: var(--gold-deep); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { color: var(--bad); }
.btn.small { padding: 5px 11px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: default; }

main { padding: clamp(12px, 3vw, 28px); max-width: 1500px; margin: 0 auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--parch); margin: 0; }
h2 { font-size: 26px; } h3 { font-size: 19px; }
.muted { color: var(--muted); }
.notice { padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--gold); background: var(--panel); border-radius: 10px; margin-bottom: 16px; }
.notice.warn { border-left-color: var(--bad); }
.empty { padding: 60px 20px; text-align: center; color: var(--muted); }
.empty h3 { margin-bottom: 6px; }

/* ---- binder */
.binder { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.rail { position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow: auto; padding-right: 4px; }
.rail h3 { margin: 0 0 10px; font-size: 16px; color: var(--muted); font-family: var(--sans); font-weight: 600; }
.spine { display: block; width: 100%; text-align: left; margin: 0 0 8px; padding: 11px 12px 11px 16px; border-radius: 6px 12px 12px 6px; border: 1px solid var(--line); border-left: 6px solid var(--hue, var(--gold-deep)); background: var(--panel); cursor: pointer; }
.spine:hover { background: var(--panel-2); }
.spine[aria-current="true"] { background: var(--panel-2); border-color: var(--gold); border-left-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.spine b { display: block; font: 600 15px/1.25 var(--serif); color: var(--parch); }
.spine small { color: var(--muted); }
.gauge { height: 4px; margin-top: 8px; border-radius: 4px; background: #0b0a1e; overflow: hidden; }
.gauge i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.gauge.done i { background: linear-gradient(90deg, #4ccf95, var(--foil)); }

.top-row { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: end; justify-content: space-between; margin-bottom: 14px; }
.sum { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; }
.sum .big { font: 600 34px/1 var(--serif); color: var(--parch); }
.tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.search { flex: 1 1 200px; max-width: 340px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--night); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { padding: 8px 14px; border: 0; background: var(--night); cursor: pointer; color: var(--muted); font-weight: 600; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--panel-2); color: var(--gold); }
select.field, .field { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--night); }

.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr)); gap: 16px; }
.roomy { --cell: 210px; } .compact { --cell: 140px; }
.pocket { position: relative; padding: 10px 10px 8px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px -12px #000; }
.pocket .face { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.pocket .face:hover .sbc { transform: translateY(-2px); }
.pocket .sbc { transition: transform .18s ease, filter .25s ease; }
.pocket.missing { border-style: dashed; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.01); box-shadow: none; }
.pocket.missing .sbc { filter: grayscale(.9) brightness(.42) contrast(.9); }
.pocket.missing .face:hover .sbc { filter: grayscale(.55) brightness(.62); }
.cap { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; margin-top: 8px; font-size: 13px; }
.cap b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rar { flex: none; font-size: 11px; color: var(--muted); }
.rar[data-r="uncommon"] { color: #7fd6a2; } .rar[data-r="rare"] { color: #7db8ff; } .rar[data-r="legendary"] { color: var(--gold); } .rar[data-r="promo"] { color: #ff9fe0; }
.count { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; }
.count .n { min-width: 34px; text-align: center; font: 600 18px/1 var(--serif); color: var(--parch); }
.pocket.missing .count .n { color: var(--muted); }
.step { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--night); cursor: pointer; font-size: 18px; line-height: 1; }
.step:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.step:disabled { opacity: .35; cursor: default; }
.fin { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--night); cursor: pointer; display: grid; place-items: center; }
.fin:hover { border-color: var(--foil); }
.fin svg { width: 16px; height: 16px; stroke: var(--foil); fill: none; stroke-width: 1.8; }
.pills { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 6px; min-height: 18px; }
.pill { font-size: 11px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.pill[data-f="holo"] { color: #9fe9ff; border-color: #3b7d92; } .pill[data-f="gilded"] { color: var(--gold); border-color: var(--gold-deep); }
.pill[data-f="aurora"] { color: #8dffc8; border-color: #2f8a63; } .pill[data-f="cosmic"] { color: #c0a8ff; border-color: #6445c9; }
.pill[data-f="polychrome"] { color: #ffb3d4; border-color: #b04a7f; }
.sentinel { height: 1px; grid-column: 1 / -1; }

/* ---- packs */
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; }
.pack { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.pack-art { aspect-ratio: 587 / 986; background: url("../cards/assets/pack.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 14px 18px rgba(0,0,0,.55)); transform: rotate(-3deg); transition: transform .25s ease; }
.pack:hover .pack-art { transform: rotate(0) translateY(-3px); }
.pack dl { margin: 10px 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 13px; }
.pack dt { color: var(--muted); } .pack dd { margin: 0; }
.pack .row { display: flex; gap: 8px; flex-wrap: wrap; }
.keep { display: flex; gap: 8px; align-items: center; margin: 0 0 18px; color: var(--muted); }

/* ---- decks */
.decks { display: grid; gap: 10px; }
.deckrow { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.deckrow .grow { flex: 1; min-width: 0; }
.deckrow b { font: 600 17px var(--serif); color: var(--parch); }
.editor { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.editor .list { max-height: 60vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--night); }
.line { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.line:last-child { border: 0; } .line .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line button.add { cursor: pointer; text-align: left; background: none; border: 0; width: 100%; padding: 0; display: flex; gap: 10px; align-items: center; }
.line:hover { background: rgba(255,255,255,.03); }
.warn-text { color: var(--bad); font-size: 12px; }

/* ---- dialogs and forms */
.sheet-back { position: fixed; inset: 0; z-index: 60; background: rgba(5, 4, 18, .72); display: grid; place-items: center; padding: 16px; }
.sheet { width: min(760px, 100%); max-height: 92vh; overflow: auto; border-radius: 16px; border: 1px solid var(--line); background: var(--night); padding: 22px; box-shadow: 0 30px 60px -20px #000; }
.sheet.wide { width: min(1100px, 100%); }
.sheet header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form input[type="text"], .form input[type="url"], .form textarea, .form select, .form input[type="number"] { padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--ink); color: var(--text); }
.form input[type="color"] { width: 100%; height: 38px; padding: 2px; border-radius: 9px; border: 1px solid var(--line); background: var(--ink); }
.fin-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.odds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
code, .embedbox { font: 12.5px/1.5 ui-monospace, Consolas, monospace; }
.embedbox { width: 100%; min-height: 76px; padding: 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--ink); color: var(--text); }
.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { padding: 10px 16px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--gold-deep); box-shadow: 0 10px 30px -10px #000; animation: tin .18s ease both; }
.toast.bad { border-color: var(--bad); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }
.deck-stage { display: grid; place-items: center; gap: 16px; padding: 10px; }
.deck-pile { width: min(300px, 70vw); position: relative; }
.deck-hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; width: 100%; }

@media (max-width: 820px) {
  .binder { grid-template-columns: 1fr; }
  .rail { position: static; max-height: none; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
  .rail h3 { display: none; } .spine { flex: 0 0 190px; margin: 0; }
  .editor { grid-template-columns: 1fr; } .pack { grid-template-columns: 110px 1fr; }
  .tabs { order: 3; width: 100%; margin: 0; } .bar { flex-wrap: wrap; row-gap: 6px; } .who { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }