:root { color-scheme: light dark;
  --line: #ddd; --muted: #777; --accent: #d97706; --bg-card: #fff;
  --bg-page: #fff; --text: #222; --badge-anom-bg: #c70039; --badge-p-bg: #1f6feb;
  --badge-orig-bg: #6e7681; --type-head-fg: #444;
}
@media (prefers-color-scheme: dark) {
  :root { --line: #333; --muted: #999; --accent: #ffa940; --bg-card: #1a1a1a;
    --bg-page: #0d0d0d; --text: #e0e0e0; --badge-anom-bg: #ff5c8a;
    --badge-p-bg: #4a90e2; --badge-orig-bg: #555; --type-head-fg: #ccc; }
}
* { box-sizing: border-box; }
html, body { background: var(--bg-page); color: var(--text); margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  line-height: 1.4; }
.page-header { max-width: min(1400px, 95vw); margin: 1.5em auto 1em; padding: 0 1.5em; }
.page-header h1 { font-size: 1.6em; margin: 0 0 0.3em; }
.intro { color: var(--muted); margin: 0; }
.deck-list { max-width: min(1400px, 95vw); margin: 0 auto; padding: 0 1.5em 3em; }

.deck { margin: 0 0 2em; padding: 1em 1.2em; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg-card); }
.deck-top { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1em; margin-bottom: 0.8em; }
.deck-header { flex: 1; }
.dh-player { font-size: 1.15em; font-weight: 600; }
.dh-player-link { color: inherit; text-decoration: none; }
.dh-player-link:hover { color: var(--accent); }
.dh-arch { font-size: 0.98em; color: var(--muted); margin-top: 0.1em; }
.dh-sub { font-size: 0.88em; color: var(--muted); margin-top: 0.2em; }
.dh-sub a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); }
.dh-sub a:hover { color: var(--accent); }
.dh-record { font-family: ui-monospace, Menlo, monospace; padding: 0.05em 0.4em;
  border-radius: 3px; }
.dh-record-hot { background: #1f7a4d; color: white; }
.dh-record-cold { background: #7a1f3a; color: white; }
.dh-record-warm { color: var(--muted); }
.dh-badges { margin-top: 0.5em; display: flex; gap: 0.4em; flex-wrap: wrap; }
.badge { display: inline-block; padding: 0.12em 0.55em; border-radius: 3px;
  font-size: 0.78em; color: white; }
.badge-p { background: var(--badge-p-bg); }
.badge-anom { background: var(--badge-anom-bg); }
.badge-orig { background: var(--badge-orig-bg); }
.badge-preban { background: #8b5cf6; font-weight: 600; letter-spacing: 0.04em; cursor: help; }
.dh-top3 { margin-top: 0.4em; font-size: 0.85em; color: var(--muted); }
.dh-top3 summary { cursor: pointer; }
.dh-src { margin-top: 0.4em; font-size: 0.85em; }
.dh-src a { color: var(--muted); }
.toggle-view { background: none; border: 1px solid var(--line); color: var(--text);
  font-size: 0.82em; padding: 0.3em 0.7em; border-radius: 4px; cursor: pointer;
  font-family: inherit; }
.toggle-view:hover { border-color: var(--accent); color: var(--accent); }

/* Tekst-modus: mainboard + sideboard side ved side, hver med sitt column-layout. */
.text-body:not([hidden]) { display: flex; gap: 1.8em; align-items: flex-start;
  flex-wrap: wrap; }
.t-main { flex: 1 1 600px; min-width: 0; max-width: 1000px; }
.t-side { flex: 0 0 200px; border-left: 1px solid var(--line); padding-left: 1.2em; }
@media (max-width: 700px) {
  .text-body:not([hidden]) { gap: 1em; }
  .t-side { flex: 1 1 auto; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line); padding-top: 1em; }
  /* Mindre horisontal padding — gi kort-grid-et mer plass. */
  .page-header { padding: 0 0.7em; }
  .deck-list { padding: 0 0.6em 3em; }
  .deck { padding: 0.9em 0.7em; }
}
.board { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.91em; }
/* Mainboard: column-width-basert; gir 2 kolonner på smal, 3 på bred. */
.t-main .board-cols { column-width: 17em; column-gap: 1.5em; }
.board-cols-1 { columns: 1; }
.type-group { break-inside: avoid; margin-bottom: 0.7em; }
.type-head { color: var(--type-head-fg); font-style: italic; font-weight: 600;
  margin-bottom: 0.15em; font-family: inherit; }
.cline { padding: 0.05em 0; }
.chover { display: inline-flex; gap: 0.4em; align-items: baseline; cursor: default; }
.chover:hover { color: var(--accent); }
a.chover.card-link { color: inherit; text-decoration: none; cursor: pointer; }
a.chover.card-link:hover { color: var(--accent); }
a.vcard, a.vsbtile { color: inherit; text-decoration: none; display: block; }
.qty { color: var(--muted); min-width: 1.4em; display: inline-block; }
.board-total { font-size: 0.85em; color: var(--muted); margin-top: 0.5em;
  font-style: italic; font-family: -apple-system, system-ui, sans-serif; }

/* Visuell modus — mainboard og sideboard har samme kort-bredde */
.visual-body:not([hidden]) { padding: 0.5em 0; display: grid;
  grid-template-columns: 1fr minmax(140px, 170px); gap: 1em; }
@media (max-width: 820px) { .visual-body:not([hidden]) { grid-template-columns: 1fr; } }
.vmain { display: grid; gap: 0.45em;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); align-content: flex-start; }
/* Smal skjerm: én kolonne, og sideboard rendres NØYAKTIG som maindeck (4-bredt grid,
   ingen overlapp) i stedet for én smal kolonne med store kort ved siden av. */
@media (max-width: 820px) {
  /* 0 horisontal padding på mobil — kort-gridet går helt til skjermkanten.
     Overskrifts-/intro-tekst beholder litt innrykk via egen padding under. */
  .page-header { max-width: 100vw; padding: 0 0.6em; }
  .deck-list { max-width: 100vw; padding: 0 0 2em; }
  .deck { padding: 0.7em 0; border-left: none; border-right: none;
    border-radius: 0; }
  .deck-top { padding: 0 0.6em; }
  .vmain { grid-template-columns: repeat(6, 1fr); gap: 0; }
  /* Spesifikke selektorer (.visual-body …) så de vinner over base-reglene
     .vsb/.vsbtile som står LENGER NED i kilden (lik spesifisitet → senere vinner). */
  .visual-body .vsb { display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 0; }
  .visual-body .vsbtile { width: 100%; margin-bottom: 0; }
}
.vcard { position: relative; cursor: pointer; }
.vcard img { width: 100%; display: block; border-radius: 4%; }
.vqty { position: absolute; top: 0.7em; left: 0.4em;
  background: rgba(0,0,0,0.88); color: white; border-radius: 7px;
  min-width: 1.62em; height: 1.62em; padding: 0 0.4em; display: flex;
  align-items: center; justify-content: center;
  font-size: 0.945em; font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.7); }
/* Sideboard: overlappende kort, samme bredde som mainboard. */
.vsb { display: flex; flex-direction: column; }
.vsbtile { position: relative; width: 100%; margin-bottom: -110%; cursor: pointer; }
.vsbtile:last-child { margin-bottom: 0; }
.vsbtile img { width: 100%; display: block; border-radius: 4%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.vsbqty { position: absolute; top: 0.6em; left: 0.35em;
  background: rgba(0,0,0,0.9); color: white; border-radius: 6px;
  min-width: 1.44em; height: 1.44em; padding: 0 0.36em; display: flex;
  align-items: center; justify-content: center; font-size: 0.855em;
  font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.6); }

/* Hover preview — større bilde (~400px bred kort) */
#hover-preview { position: fixed; pointer-events: none; z-index: 1000;
  display: none; }
#hover-preview img { width: 400px; border-radius: 4%; box-shadow: 0 6px 24px rgba(0,0,0,0.6); }

/* Sitefooter (brukes av metagame-siten; harmløs ellers) */
.site-footer { max-width: min(1400px, 95vw); margin: 2em auto 1em; padding: 1em 1.5em 2em;
  color: var(--muted); font-size: 0.85em; border-top: 1px solid var(--line); }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

/* Katalog-modus */
.layout-catalog .deck { padding: 0.7em 1.2em; }
.layout-catalog .text-body,
.layout-catalog .visual-body { display: none; }
.layout-catalog .deck.expanded .text-body[data-mode="text"] { display: grid; margin-top: 1em; }
.layout-catalog .deck.expanded .visual-body[data-mode="visual"] { display: grid; margin-top: 1em; }
.layout-catalog .deck { cursor: pointer; }
.layout-catalog .deck.expanded { cursor: default; }
.layout-catalog .toggle-view { display: none; }
.layout-catalog .deck.expanded .toggle-view { display: inline-block; }