:root {
  /* A deep ink-blue playmat, card-stock text, and a brass accent like a rare set symbol. */
  --mat: #1d2733;
  --mat-raised: #263241;
  --mat-line: #3a4a5c;
  --stock: #ece4d0;
  --stock-dim: #aaa594;
  --brass: #d1a85a;

  /* Mana pip colors */
  --pip-w: #f5efd3;
  --pip-u: #a7d2ee;
  --pip-b: #cbc1bd;
  --pip-r: #f19f80;
  --pip-g: #9bd2ad;
  --pip-c: #cfcac6;
  --pip-ink: #1d2733;

  --serif: 'Alegreya', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Alegreya Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--mat);
  color: var(--stock);
  font: 400 1.0625rem/1.5 var(--sans);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

/* Masthead */
.masthead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  padding: 1.25rem clamp(1rem, 4vw, 3rem) 0;
}
.site-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.5rem; }
.site-nav a { color: var(--stock-dim); text-decoration: none; }
.site-nav a:hover { color: var(--stock); }
.site-nav a[aria-current="page"] { color: var(--stock); box-shadow: 0 2px 0 var(--brass); }
.site-nav .brand {
  margin-right: 0.75rem;
  font: italic 500 1.25rem/1.2 var(--serif);
  color: var(--brass);
  box-shadow: none;
}
.db-status { margin: 0; font-size: 0.9375rem; color: var(--stock-dim); }

main { padding: 0 clamp(1rem, 4vw, 3rem) 4rem; }

/* Search: the name field is the centrepiece, set like the name line of a card */
.search { padding: clamp(1.5rem, 5vw, 3.5rem) 0 1.5rem; }

.name-field input {
  width: 100%;
  padding: 0.15em 0 0.2em;
  border: 0;
  border-bottom: 2px solid var(--mat-line);
  background: transparent;
  color: var(--stock);
  font: 500 clamp(2rem, 6vw, 3.75rem)/1.1 var(--serif);
  letter-spacing: -0.01em;
}
.name-field input::placeholder { color: #5f6f80; }
.name-field input:focus { outline: none; border-bottom-color: var(--brass); }
.name-field input::-webkit-search-cancel-button { filter: invert(0.7); }

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 2rem;
  margin-top: 1.5rem;
}

.identity { margin: 0; padding: 0; border: 0; }
.identity legend, .field span {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9375rem;
  color: var(--stock-dim);
}
.pips { display: flex; gap: 0.5rem; }

.pip-toggle {
  width: 2.5rem; height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--pip);
  color: var(--pip-ink);
  font: 700 1.0625rem/1 var(--sans);
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 120ms ease, box-shadow 120ms ease;
}
.pip-toggle[data-color="W"] { --pip: var(--pip-w); }
.pip-toggle[data-color="U"] { --pip: var(--pip-u); }
.pip-toggle[data-color="B"] { --pip: var(--pip-b); }
.pip-toggle[data-color="R"] { --pip: var(--pip-r); }
.pip-toggle[data-color="G"] { --pip: var(--pip-g); }
.pip-toggle:hover { opacity: 0.6; }
.pip-toggle[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 3px var(--mat), 0 0 0 5px var(--brass); }

.field input {
  width: 14rem;
  max-width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--mat-line);
  border-radius: 6px;
  background: var(--mat-raised);
  color: var(--stock);
  font: inherit;
}
.field input:focus { outline: none; border-color: var(--brass); }

.checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding-bottom: 0.5rem; }
.check { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--brass); }

.summary { min-height: 1.5em; margin: 0.5rem 0 1.25rem; color: var(--stock-dim); }
.summary code { color: var(--stock); font-size: 0.95em; }

/* Results: the cards themselves, at real card proportions */
.results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11.5rem, 42vw), 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin: 0; padding: 0;
  list-style: none;
}

.tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 488 / 680;
  padding: 0;
  border: 0;
  border-radius: 4.75% / 3.4%;
  overflow: hidden;
  background: var(--mat-raised);
  cursor: pointer;
}
.tile:hover { box-shadow: 0 0 0 2px var(--mat-line); }
.tile-name {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 1rem;
  font: 500 1.0625rem/1.25 var(--serif);
  color: var(--stock-dim);
  text-align: center;
}
.tile img {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

.more {
  display: block;
  margin: 2rem auto 0;
  padding: 0.65rem 1.5rem;
  border: 1px solid var(--brass);
  border-radius: 999px;
  background: transparent;
  color: var(--brass);
  font: 500 1rem/1 var(--sans);
  cursor: pointer;
}
.more:hover { background: rgba(209, 168, 90, 0.12); }

/* Card detail dialog */
dialog {
  width: min(62rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  padding: 0;
  border: 1px solid var(--mat-line);
  border-radius: 14px;
  background: var(--mat-raised);
  color: var(--stock);
}
dialog::backdrop { background: rgba(12, 17, 23, 0.75); }

.detail {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding: clamp(1rem, 3vw, 2rem);
}
.detail-art { margin: 0; }
.detail-art img {
  display: block;
  width: 100%; height: auto;
  border-radius: 4.75% / 3.4%;
  background: var(--mat);
}
.flip {
  display: block;
  margin: 0.75rem auto 0;
  padding: 0.45rem 1rem;
  border: 1px solid var(--mat-line);
  border-radius: 999px;
  background: var(--mat);
  color: var(--stock);
  font: inherit;
  cursor: pointer;
}

.detail-text { position: relative; min-width: 0; }
.close {
  float: right;
  margin: 0 0 0.5rem 1rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--mat-line);
  border-radius: 999px;
  background: transparent;
  color: var(--stock-dim);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}
.close:hover { color: var(--stock); }

.title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.title-row h2 { margin: 0; font: 700 clamp(1.6rem, 3.2vw, 2.1rem)/1.15 var(--serif); }

.face + .face { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--mat-line); }
.face-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; }
.face-head h3 { margin: 0; font: 700 1.25rem/1.2 var(--serif); }
.type-line { margin: 0.6rem 0 0.75rem; font: italic 500 1.0625rem/1.3 var(--serif); color: var(--stock-dim); }
.rules { max-width: 36em; font: 400 1.125rem/1.6 var(--serif); }
.rules p { margin: 0 0 0.6em; }
.rules i { color: var(--stock-dim); }
.flavor { max-width: 36em; margin: 0.75rem 0 0; font: italic 400 1.0625rem/1.6 var(--serif); color: var(--stock-dim); }
.stats { margin: 0.5rem 0 0; font: 700 1.125rem/1 var(--sans); }

.legality { margin: 1.25rem 0 0; font-size: 0.9375rem; }
.legality .tag {
  display: inline-block;
  margin: 0 0.4rem 0.4rem 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--mat);
  border: 1px solid var(--mat-line);
}
.legality .tag.ok { border-color: #5f8f6f; }
.legality .tag.bad { border-color: #a35a4a; }
.legality .tag.commander { border-color: var(--brass); color: var(--brass); }

.printings-heading { margin: 1.5rem 0 0.5rem; font: 500 1.0625rem/1.2 var(--sans); }
.printings-heading span { color: var(--stock-dim); font-weight: 400; }
.printings {
  max-height: 13rem;
  margin: 0; padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--mat-line);
  border-radius: 8px;
}
.printings button {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--stock);
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
}
.printings li + li button { border-top: 1px solid rgba(58, 74, 92, 0.6); }
.printings button:hover { background: var(--mat); }
.printings button[aria-current="true"] { color: var(--brass); }
.printings .when { color: var(--stock-dim); white-space: nowrap; }

.source { margin: 1rem 0 0; font-size: 0.9375rem; }
.source a { color: var(--stock-dim); }
.source a:hover { color: var(--stock); }

/* Shared page parts */
.page-title {
  margin: clamp(1.5rem, 5vw, 3rem) 0 1rem;
  font: 500 clamp(2rem, 6vw, 3.75rem)/1.1 var(--serif);
  letter-spacing: -0.01em;
}
.section-title { margin: 0 0 0.5rem; font: 700 1.5rem/1.2 var(--serif); }
.hint { max-width: 40em; margin: 0 0 1rem; color: var(--stock-dim); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1rem; }

.button {
  display: inline-block;
  padding: 0.55rem 1.25rem;
  border: 1px solid var(--brass);
  border-radius: 999px;
  background: transparent;
  color: var(--brass);
  font: 500 1rem/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: rgba(209, 168, 90, 0.12); }
.button.primary { background: var(--brass); color: var(--pip-ink); }
.button.primary:hover { background: #dcb86f; }
.button.danger { border-color: #a35a4a; color: #e3a091; }
.button.danger:hover { background: rgba(163, 90, 74, 0.15); }
.button:disabled { opacity: 0.5; cursor: wait; }
.text-link { color: var(--stock-dim); }

/* Deck list */
.deck-list { display: grid; gap: 0.5rem; margin: 0 0 3rem; padding: 0; list-style: none; max-width: 52rem; }
.deck-row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border: 1px solid var(--mat-line);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.deck-row:hover { border-color: var(--brass); }
.deck-art { display: block; aspect-ratio: 626 / 457; border-radius: 6px; overflow: hidden; background: var(--mat-raised); }
.deck-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.deck-info { display: grid; min-width: 0; }
.deck-name { font: 700 1.25rem/1.25 var(--serif); }
.deck-meta, .deck-count { color: var(--stock-dim); font-size: 0.9375rem; }
.deck-count { white-space: nowrap; }

.game-row { grid-template-columns: minmax(0, 1fr) auto; padding: 0.75rem 1rem; }
.user-row { grid-template-columns: minmax(0, 1fr) auto; padding: 0.75rem 1rem; }
.private-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--mat-line);
  border-radius: 999px;
  color: var(--stock-dim);
  font: 500 0.8125rem/1.4 var(--sans);
  vertical-align: middle;
}
.page-title .private-tag { font-size: 0.9375rem; }
.private-check { align-self: flex-end; padding-bottom: 0.55rem; }
.you-tag { margin-left: 0.4rem; color: var(--stock-dim); font: 400 0.875rem/1 var(--sans); }
.back-link { display: inline-block; margin-top: clamp(1rem, 3vw, 1.5rem); color: var(--stock-dim); }
.back-link:hover { color: var(--stock); }
.back-link + .page-title, .back-link + .deck-head .page-title { margin-top: 0.25rem; }
.game-row .button { white-space: nowrap; }

/* Import form */
.import { max-width: 52rem; padding-top: 2rem; border-top: 1px solid var(--mat-line); }

/* Decks page: lists and import side by side when there's room, one under the other when not */
.decks-layout { display: grid; gap: 2rem 3rem; align-items: start; }
.deck-lists > section:last-child .deck-list { margin-bottom: 0; }
.deck-lists .summary:empty { display: none; } /* the loading line, once the decks are there */
.deck-lists .section-title { margin-top: 0; }
@media (min-width: 75rem) {
  .decks-layout { grid-template-columns: minmax(0, 52rem) minmax(26rem, 44rem); }
  .decks-layout .import { padding: 1.25rem 1.5rem 1.5rem; border: 1px solid var(--mat-line); border-radius: 12px; }
}
.import-fields { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1rem; }
.field-wide { display: block; }
.field-wide textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--mat-line);
  border-radius: 6px;
  background: var(--mat-raised);
  color: var(--stock);
  font: 0.9375rem/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace;
  resize: vertical;
}
.field-wide textarea:focus { outline: none; border-color: var(--brass); }

.preview { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid var(--mat-line); border-radius: 10px; background: var(--mat-raised); }
.preview-summary { margin: 0 0 0.75rem; font: 700 1.125rem/1.3 var(--serif); }
.problems-title { margin: 0 0 0.4rem; }
.problems { margin: 0 0 1rem; padding-left: 1.25rem; }
.problems li { margin-bottom: 0.4rem; color: var(--stock-dim); }
.line-ref { display: block; color: var(--stock); }

.commander-pick { margin: 1rem 0 0; padding: 0; border: 0; }
.commander-pick legend { margin-bottom: 0.25rem; font: 700 1.125rem/1.3 var(--serif); }
.commander-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.5rem; }
.commander-option {
  display: grid;
  grid-template-columns: auto 3.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--mat-line);
  border-radius: 8px;
  cursor: pointer;
}
.commander-option:has(input:checked) { border-color: var(--brass); }
.commander-option:has(input:disabled) { opacity: 0.5; cursor: default; }
.commander-option input { width: 1.1rem; height: 1.1rem; accent-color: var(--brass); }
.commander-option img { width: 100%; aspect-ratio: 626 / 457; object-fit: cover; border-radius: 4px; }

/* Deck view */
.deck-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.deck-head .page-title { margin-bottom: 0.25rem; }
.deck-subtitle { margin: 0; color: var(--stock-dim); }
.warnings { max-width: 52rem; margin-bottom: 2rem; padding: 1rem 1.25rem; border: 1px solid #a35a4a; border-radius: 10px; }
.warnings .problems { margin-bottom: 0; }

.card-group { margin-bottom: 2.5rem; }
.group-title { margin: 0 0 0.75rem; font: 700 1.375rem/1.2 var(--serif); }
.group-title span { color: var(--stock-dim); font-weight: 400; }
.deck-grid { grid-template-columns: repeat(auto-fill, minmax(min(clamp(9.5rem, 6.5vw, 13rem), 30vw), 1fr)); gap: 0.75rem; }
.deck-card { position: relative; }
.deck-card .tile { cursor: pointer; }
.deck-card .tile:hover { box-shadow: none; }
/* A selected card on the deck page: the same highlight as on the table */
.deck-card .tile.selected { outline: 3px solid #f0cf6a; outline-offset: 2px; }

/* Choosing a card to swap with: the prompt, and everything else faded */
.swap-prompt {
  position: fixed; top: 1rem; left: 50%; z-index: 1005;
  transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 1rem;
  margin: 0; padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: #f0cf6a;
  color: var(--pip-ink);
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.swap-prompt .text-button { color: var(--pip-ink); }
body.swap-to-side .card-group:not([data-board="side"]),
body.swap-to-main .card-group[data-board="side"],
body.swap-to-main .tile[data-commander] { opacity: 0.35; }
body.swap-to-side .card-group[data-board="side"] .tile,
body.swap-to-main .card-group[data-board="main"] .tile:not([data-commander]) { cursor: crosshair; }
.qty {
  position: absolute;
  top: 11%; left: 5%;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--brass);
  border-radius: 999px;
  background: var(--mat);
  color: var(--stock);
  font: 700 0.9375rem/1.3 var(--sans);
}

@media (max-width: 36rem) {
  .deck-row { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .deck-count { grid-column: 2; }
}

/* Account */
.account { display: flex; align-items: baseline; gap: 0.75rem; font-size: 0.9375rem; }
.account-name { color: var(--stock); }
.text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--stock-dim);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.text-button:hover { color: var(--stock); }

.login { max-width: 24rem; margin: 0 auto; padding: clamp(2rem, 10vh, 6rem) 1.25rem 3rem; }
.login-brand { margin: 0; font: italic 500 1.25rem/1.2 var(--serif); color: var(--brass); }
.login .page-title { margin-top: 0.5rem; }
.login-form { display: grid; gap: 1rem; }
.login-form .field input { width: 100%; }
.login-form .hint { margin: 0; font-size: 0.9375rem; }
.login-form .actions { margin-top: 0.25rem; }
.form-error { min-height: 1.5em; margin: 0; color: #e3a091; }
.form-error:empty { min-height: 0; }

/* Right-click menus (the table and the deck page) */
.menu {
  position: fixed; z-index: 1001;
  min-width: 13rem;
  margin: 0; padding: 0.3rem;
  border: 1px solid var(--mat-line);
  border-radius: 8px;
  background: var(--mat-raised);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.menu button {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 0.4rem 0.7rem;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--stock);
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
}
.menu button:hover, .menu button:focus-visible { background: var(--mat); outline: none; }
.menu-title { margin: 0; padding: 0.4rem 0.7rem 0.3rem; font-weight: 700; }
.menu kbd { color: var(--stock-dim); font: inherit; font-size: 0.8125rem; white-space: nowrap; }
.menu hr { margin: 0.3rem 0; border: 0; border-top: 1px solid var(--mat-line); }

/* Large card shown while hovering a card (the table and the deck page). Not to be
   confused with .preview, the results panel on the Decks page. */
.card-preview {
  position: fixed; top: 4.5rem; z-index: 900;
  display: flex; gap: 0.75rem;
  /* Grows with the window's height, so it's as big on a 1440p screen as it feels on 1080p */
  width: clamp(16rem, 37vh, 34rem); max-width: 30vw;
  pointer-events: none;
}
.card-preview.on-left { left: 1.5rem; }
.card-preview.on-right { right: 1.5rem; }
.card-preview.double { width: clamp(32rem, 74vh, 68rem); max-width: 60vw; }
.card-preview img { display: block; flex: 1; min-width: 0; width: 100%; height: auto; border-radius: 4.75% / 3.4%; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); }

/* Inline mana symbols */
.cost { display: inline-flex; gap: 0.12em; font-size: 1.15rem; }
.sym {
  display: inline-grid;
  place-items: center;
  width: 1.2em; height: 1.2em;
  border-radius: 50%;
  background: var(--sym, var(--pip-c));
  color: var(--pip-ink);
  font: 700 0.72em/1 var(--sans);
  text-decoration: none;
  vertical-align: 0.08em;
  margin: 0 0.04em;
}
.sym.long { font-size: 0.5em; width: 2.1em; height: 2.1em; letter-spacing: -0.04em; }

@media (max-width: 44rem) {
  .detail { grid-template-columns: 1fr; }
  .detail-art { max-width: 20rem; margin: 0 auto; }
  .field, .field input { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}