:root {
  --bg: #f6f4ef; --surface: #fff; --text: #1d1d1f; --muted: #6b6b70; --border: #dedad2; --accent: #c0392b;
}
/* Dark follows the device, unless the button in the top bar chose (data-theme, see shared.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #141416; --surface: #1f1f23; --text: #ececee; --muted: #9a9aa2; --border: #34343a; --accent: #e5604f; }
}
:root[data-theme="dark"] { --bg: #141416; --surface: #1f1f23; --text: #ececee; --muted: #9a9aa2; --border: #34343a; --accent: #e5604f; }
* { box-sizing: border-box; }
/* A display rule on a class beats the hidden attribute; this keeps hidden elements hidden. */
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 system-ui, sans-serif; }
/* The top bar (header, .bar, h1 and the page links) is in shared.css, so it matches events.html. */
input[type=search] { flex: 1; min-width: 0; padding: 10px 12px; font: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
input[type=search]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Own set menu: a native <select> with 60 options becomes a full-screen system list on macOS. */
/* Wide screens: the bar wraps to a second line. Narrow screens: one line you swipe sideways (see the media query). */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chips { display: flex; gap: 6px; flex: none; }
.sep { flex: none; width: 1px; height: 22px; background: var(--border); }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font: inherit; font-size: 13px; white-space: nowrap;
        border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; }
.chip[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.ghost { border-color: transparent; background: none; color: var(--muted); text-decoration: underline; }
#sheet { display: contents; }
#sheetbtn, .sheet-head, .m-only { display: none; }
.badge { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.chips .lbl { align-self: center; font-size: 12px; color: var(--muted); padding-right: 2px; }
#costs .chip { min-width: 32px; justify-content: center; padding: 6px 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .35); }
#setwrap { flex: none; width: 260px; }
#set { width: 100%; display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font: inherit; text-align: left; cursor: pointer;
       border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
#set[aria-expanded=true] { outline: 2px solid var(--accent); outline-offset: 1px; }
#setlabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#setmenu { position: fixed; z-index: 10; width: 360px; max-height: min(70vh, 560px); overflow-y: auto;
           padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px rgb(0 0 0 / .35); }
.grp { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.opt { display: flex; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--text);
       font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.opt:hover, .opt:focus-visible { background: var(--bg); outline: none; }
.opt[aria-selected=true] { background: var(--accent); color: #fff; }
.opt .c { flex: none; min-width: 88px; font-weight: 600; }
/* Packs get their own line(s) in the bar on a laptop; there can be thirty of them. */
#packs { flex-basis: 100%; flex-wrap: wrap; }
.opt .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .75; }
#count { color: var(--muted); white-space: nowrap; font-size: 13px; }
/* Full window width: the grid adds columns as the window grows. */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 24vw, 480px); gap: 20px; padding: 16px; align-items: start; }
#grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.card { all: unset; cursor: pointer; display: block; border-radius: 8px; }
.card:focus-visible, .card[aria-pressed=true] { outline: 2px solid var(--accent); outline-offset: 3px; }
.card img { width: 100%; aspect-ratio: 600 / 838; display: block; border-radius: 6px; background: var(--border); }
.card .name { font-size: 13px; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumbwrap { position: relative; display: block; }
.owned { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #fff;
         font-size: 12px; font-weight: 700; box-shadow: 0 1px 4px rgb(0 0 0 / .4); }
.own { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 12px; border-radius: 10px; background: var(--bg); font-size: 14px; }
.own span { flex: 1; color: var(--muted); }
.own .owncount { min-width: 24px; text-align: center; font-size: 18px; }
.ownbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text);
          font-size: 22px; line-height: 1; cursor: pointer; }
.ownbtn:disabled { opacity: .3; cursor: default; }
.card .code { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Deck: a third column on a laptop, a sheet from the bottom on a phone (see the media query). */
body.deckopen .layout { grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 440px) clamp(290px, 20vw, 400px); }
#deck { position: sticky; top: var(--header-h, 70px); max-height: calc(100vh - var(--header-h, 70px) - 16px); overflow-y: auto;
        border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
#deck:not(.open) { display: none; }
#deck .head { position: sticky; top: 0; z-index: 1; background: var(--surface); padding: 12px 16px 10px; border-bottom: 1px solid var(--border); }
#deck .head h2 { margin: 0; font-size: 17px; }
#deckname { flex: 1; min-width: 0; padding: 6px 8px; font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text); }
#deckname:hover, #deckname:focus { border-color: var(--border); background: var(--bg); outline: none; }
.dtotal { font-weight: 700; white-space: nowrap; padding: 0 4px; }
.dtotal.full { color: #2f9a4f; }
.dbody { padding: 8px 16px 16px; }
.dnote { margin: 8px 0; font-size: 13px; color: var(--muted); }
.warn { color: var(--accent); }
.dgroup { margin: 14px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.drow { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.drow img { flex: none; width: 36px; aspect-ratio: 600 / 838; border-radius: 3px; background: var(--border); }
.drow.leader img { width: 52px; }
.deckitem { padding: 6px 0; border-bottom: 1px solid var(--border); }
.deckitem img, .noleader { flex: none; width: 44px; aspect-ratio: 600 / 838; border-radius: 4px; }
.noleader { border: 2px dashed var(--border); }
.deckitem .dname b { font-weight: 600; }
.delbtn { flex: none; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: none;
          color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; display: grid; place-items: center; }
.delbtn.armed { background: var(--accent); border-color: var(--accent); color: #fff; }
.dname { all: unset; cursor: pointer; flex: 1; min-width: 0; }
.dname b, .dname small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dname b { font-weight: 500; font-size: 14px; }
.dname small { font-size: 12px; color: var(--muted); }
.dname small .warn { font-weight: 600; }
.drow .n { min-width: 18px; text-align: center; font-weight: 700; }
.drow .ownbtn { width: 36px; height: 36px; font-size: 18px; }
.wide { display: block; width: 100%; padding: 11px 14px; font: inherit; font-weight: 600; border: 1px solid var(--border); border-radius: 10px;
        background: var(--surface); color: var(--text); cursor: pointer; text-align: left; }
.wide.primary { background: var(--accent); border-color: var(--accent); color: #fff; text-align: center; }
.wide:disabled { opacity: .45; cursor: default; }
.wide + .wide { margin-top: 8px; }
.wide small { font-weight: 400; color: var(--muted); }
.ghostbtn { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 8px 0; }
.sim textarea { width: 100%; margin-top: 8px; padding: 10px; font: 13px/1.4 ui-monospace, monospace; border: 1px solid var(--border); border-radius: 8px;
                background: var(--bg); color: var(--text); resize: vertical; }
.sim .wide { margin-top: 6px; }
.decksec { margin-top: 12px; }
.decksec:empty { display: none; }
.decksec .own { margin-top: 0; }
.why { margin: 6px 2px 0; font-size: 12px; color: var(--muted); }
/* "4 in deck": white with a black edge, so it stands out on all six card colours (black and yellow too).
   Bottom left, away from the cost (top left), the power (top right) and the owned badge (bottom right). */
.indeck { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: #fff; color: #111;
          border: 2px solid #111; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 6px rgb(0 0 0 / .5); }
/* Deck mode: a bar under the filters that says what to do next, and how to get out. */
#deckbar { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 6px 6px 12px; border: 1px solid var(--border);
           border-radius: 10px; background: var(--surface); font-size: 14px; }
#deckbar > span { flex: 1; min-width: 0; }
#deckbar.pick { background: var(--accent); border-color: var(--accent); color: #fff; }
/* One meaning per colour: green finishes, blue is the deck, red text deletes. */
#deckbar { border-left: 4px solid #2f6fb5; }
.chip.ok { background: #2f9a4f; border-color: #2f9a4f; color: #fff; font-weight: 600; }
.chip.deck { border-color: #2f6fb5; color: var(--text); }
.full { color: #2f9a4f; }
.ghostbtn.danger { color: var(--accent); }
#deckbar.pick .chip { background: rgb(255 255 255 / .15); border-color: rgb(255 255 255 / .5); color: #fff; }
.drow .chip { flex: none; }
#deckbtn { flex: none; }
#more[hidden] { display: none; }
#note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; color: var(--muted); }
#note.empty { flex-direction: column; padding: 40px 16px; font-size: 16px; text-align: center; }
#note.empty b { color: var(--text); font-size: 18px; }
#packsel { max-width: 100%; padding: 6px 10px; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
#more { display: block; margin: 20px auto; padding: 10px 18px; font: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; }
/* The panel sits next to the grid, so the cards stay visible and clickable. */
#panel { position: sticky; top: var(--header-h, 70px); max-height: calc(100vh - var(--header-h, 70px) - 16px); overflow-y: auto;
         border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.detail { position: relative; padding: 16px; }
/* Stays on top while the panel scrolls, so close and next stay in reach. */
.detail .head { position: sticky; top: 0; z-index: 1; background: var(--surface); margin: -16px -16px 0; padding: 12px 16px 10px;
                border-bottom: 1px solid var(--border); }
.grip { display: none; }
.head .row { display: flex; align-items: center; gap: 4px; }
.head h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav { border: 1px solid var(--border); background: var(--bg); color: var(--text); width: 34px; height: 34px; border-radius: 8px;
       font-size: 18px; line-height: 1; cursor: pointer; flex: none; }
.pos { font-size: 12px; color: var(--muted); white-space: nowrap; padding: 0 4px; }
.card { scroll-margin-top: var(--header-h, 70px); }
/* The card sits right under the fixed-height header, so it stays in place while you browse. */
.viewer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.detail .card-img { flex: 1; min-width: 0; max-width: 300px; aspect-ratio: 600 / 838; display: block; border-radius: 8px; background: var(--border); }
/* Big enough to hit with a thumb (48px is the usual minimum touch target). */
.step { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg);
        color: var(--text); display: grid; place-items: center; padding: 0; cursor: pointer; }
.step:disabled { opacity: .3; cursor: default; }
.detail h2 { margin: 0; font-size: 17px; line-height: 1.25; }
.detail .code { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.stat { font-size: 12px; padding: 2px 7px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); white-space: nowrap; }
.stat b { font-weight: 600; }
.effect { white-space: pre-line; font-size: 15px; line-height: 1.5; margin: 14px 0 0; padding: 12px; border-radius: 8px; background: var(--bg); }
.effect.trigger { border-left: 3px solid #e2b007; }
.kw { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.5; padding: 0 6px; border-radius: 4px; color: #fff; background: #2f6fb5; }
.kw.once { background: #c0392b; }
.kw.don { background: #222; border: 1px solid #555; }
.kw.ability { background: #d0731c; }
.kw.trig { background: #e2b007; color: #222; }
.ref { font-weight: 600; }
.meta { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
@media (min-width: 901px) { .filters .sep { display: none; } .filters { column-gap: 16px; } .filters .chips { gap: 6px; } }
@media (max-width: 900px) {
  .filters { flex-wrap: nowrap; }
  #setwrap { flex: 1 1 0; min-width: 0; width: auto; }
  #sheetbtn { display: inline-flex; }
  #sheet { display: flex; flex-direction: column; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-height: 75vh;
           overflow-y: auto; padding: 16px 16px 24px; border-radius: 16px 16px 0 0; background: var(--surface); box-shadow: 0 -8px 24px rgb(0 0 0 / .4); }
  #sheet:not(.open) { display: none; }
  #sheet .sep { display: none; }
  #sheet .chips { flex-wrap: wrap; }
  #sheet .lbl { display: block; flex-basis: 100%; padding-bottom: 2px; }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
  /* On the phone, "Clear all" sits in the sheet header next to Done, where you see it; the link at the bottom goes. */
  #sheet #reset { display: none !important; }
  .sheet-head strong { flex: 1; }
  .sheet-head { gap: 8px; }
  #sheetback { position: fixed; inset: 0; z-index: 19; background: rgb(0 0 0 / .5); }
  .layout { grid-template-columns: 1fr; }
  /* No room beside the grid: the panel slides up from the bottom instead. */
  #panel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; height: 80vh; max-height: none; border-radius: 12px 12px 0 0;
           box-shadow: 0 -8px 24px rgb(0 0 0 / .35); }
  #panel:not(.open) { display: none; }
  .detail .card-img { max-width: 220px; }
  .grip { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--border); margin: -4px auto 8px; }
  #panel { overscroll-behavior: contain; z-index: 6; }
  body.deckopen .layout { grid-template-columns: 1fr; }
  #deck { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 5; height: 85vh; max-height: none; border-radius: 12px 12px 0 0;
          box-shadow: 0 -8px 24px rgb(0 0 0 / .35); overscroll-behavior: contain; }
  #deck.closing { transition: transform .2s ease-in; }
  #deck.snapback { transition: transform .15s ease-out; }
  .drow .ownbtn { width: 44px; height: 44px; }
  #panel.closing, #sheet.closing { transition: transform .2s ease-in; }
  #panel.snapback, #sheet.snapback { transition: transform .15s ease-out; }
  #sheet { overscroll-behavior: contain; }
  #sheet .grip { margin: -6px auto -6px; flex: none; }
}
@media (max-width: 600px) {
  #grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
}