/* Mörkt tema. Laddas med media="(prefers-color-scheme: dark)" och styrs av js/theme.js (systemet, eller användarens val). */
/* Mjukt mörk blågrå i stället för nästan svart, så att sidan inte känns som ett svart hål. */
:root{--bg:#1b1e28;--card:#232734;--surface:#2a2f3e;--ink:#e8eaf1;--ink-solid:#353c5c;--muted:#a3abbe;--line:#363c4e;--navy:#aab8e0}
/* Helt ogenomskinligt sidhuvud i mörkt läge, så att landskapet bakom inte syns igenom. */
.site-header{background:#232734;box-shadow:0 6px 18px -12px rgba(0,0,0,.6)}
/* Milt mönster med linjeteckningar (bollar, spöke, kort, paket) bakom innehållet. Följer med när man scrollar. */
body{background:var(--bg) url(img/bg-dark.svg?v=2) repeat;background-size:420px}
.page-head{background:var(--card)}
.page-head h1{color:var(--ink)}
.page-head p{color:var(--muted)}
/* Brödsmulorna: guldlänk och ljus text, så att de syns tydligt mot den mörka bakgrunden. */
.crumbs{color:#c3c9d9;font-size:.82rem}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.srow-chg.down{color:#4cc764}
.crumbs a{color:var(--gold)}
.tcard .art,.pimg,.product .art.cardimg{color:#1b1b2f}
.skel .art,.skel i{background:#2a2f3e;border-color:#2a2f3e}

.btn.primary,.btn.gold{color:#1b1b2f}
.btn.primary{color:#fff}
.card-ghost-tail{color:#8b93a7}
.btn.gold{color:#1b1b2f}
.seg button[aria-pressed=true]{color:#1b1b2f}
.k-new{color:#1b1b2f}
.ev-set{background:#152538}
.badge:not(.hot){color:#1b1b2f}
input[type=search],select,.shop-search{background:#2a2f3e}
/* Dropdowns: syns som knappar med ljus pil, och listan som fälls ut är mörk med ljus text. */
:root{color-scheme:dark}
.drop{background:var(--surface);border:1px solid var(--line)}
.drop:hover{background:#343a4f;border-color:#4b5268}
.drop:focus-within{background:#343a4f;box-shadow:0 0 0 2px var(--gold)}
.drop select{color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f2b632' stroke-width='1.8'/%3E%3C/svg%3E")}
select option{background:#232734;color:#e8eaf1}
select option:checked{background:#3b4a6b;color:#fff}
.price-cap input{background:#2a2f3e}
.toc a:hover{background:#403315}
.todo{background:#494218}
/* Av: grå text och släckt lampa. På: ljus text, färgad ram och svagt färgad bakgrund i lampans färg. */
.qc[aria-pressed=false]{color:var(--muted)}
.qc[aria-pressed=true]{color:var(--ink);background:rgba(242,182,50,.14);border-color:var(--gold)}
#c-in[aria-pressed=true]{background:rgba(47,179,68,.16);border-color:#2fb344}
/* Lamporna lyser när filtret är på och är släckta när det är av. */
.qc i{transition:opacity .2s,box-shadow .2s}
.qc[aria-pressed=false] i{opacity:.3;filter:grayscale(.7)}
.qc[aria-pressed=true] .dot-in{box-shadow:0 0 4px 1px rgba(47,179,68,.9),0 0 10px 3px rgba(47,179,68,.45)}
.qc[aria-pressed=true] .dot-pre{box-shadow:0 0 4px 1px rgba(242,182,50,.9),0 0 10px 3px rgba(242,182,50,.45)}
.qc[aria-pressed=true] svg{color:var(--gold);filter:drop-shadow(0 0 4px rgba(242,182,50,.7))}
.dot-pre{color:#1b1b2f}
.bell{background:rgba(35,39,52,.92);color:var(--ink);border-color:#3a4052;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.bell[aria-pressed=true]{color:#1b1b2f}
.btn.gold{color:#1b1b2f}
.acc-find{background:#2a2f3e}
.price-cap input{background:#2a2f3e}
.rs-btn:hover{background:#282c32}
.card-search .card-suggest-wrap{background:#2a2f3e}
.search-row .card-suggest-wrap{background:#2a2f3e}
.cad-header{background:#292e3b}
.cad-item:hover,
.cad-item.is-active{background:#3f3315}
.cad-item.is-top:hover,
.cad-item.is-top.is-active{background:#453a17}
.cad-trend-card{background:#2a2f3e}
.cad-footer{background:#292e3b}
.cad-footer:hover,
.cad-footer.is-active{background:#2d3340}
.guide-tips{background:#3c3114;border:2px solid #0b0c12;box-shadow:4px 4px 0 #0b0c12}
.verdict.good{background:#203326}
.verdict.mid{background:#3c3117}
.verdict.bad{background:#381f1a}
.badge-pulse{color:#1b1b2f}
.val-data-table tr:hover td{background:#1e252d}
.rsec{background:#2a2f3e}
.val-cond-tip{background:#3c3117}
/* Släppkalendern */
.cal-grid{border-color:#3a4058;box-shadow:4px 4px 0 #05060a}
.cal-nav{border-color:#3a4058;box-shadow:3px 3px 0 #05060a}
.day.weekend{background:#262a37}
.day.out{background:#1f222d;color:#575e73}
/* Dagar med släpp: lite ljusare blågrå ruta med en röd list upptill (samma rött som "Produkter"). */
.day.has:not(.out){background:#2c3248;box-shadow:inset 0 3px 0 var(--red)}
.day.today .num{box-shadow:none}
.lg-drop,.lg-set{box-shadow:0 0 0 2px #3a4058}
.ev-drop{box-shadow:none}
.ev-set{color:#cfdcff;box-shadow:0 0 0 1px #2c4566}
/* Släppsidan */
.rc-note{background:#403315}
.rc-waves button:hover{background:#323849}
.pill,.rs-st.listed,.rs-st.out{background:#323849;color:#9aa2b6}
.pill.in,.rs-st.in{background:#17331f;color:#7fdc95}
.pill.pre,.rs-st.pre{background:#1f2a4d;color:#a9bbff}
.rd-tabs button[aria-selected=true]{background:#e8eaf1;border-color:#e8eaf1;color:#1b1e28}
.day[data-day]:hover{background:#353c56}
.ph{background:repeating-linear-gradient(45deg,#2a2f3e 0 6px,#323849 6px 12px)}
.next-rel{border-color:#3a4058;box-shadow:4px 4px 0 #05060a}
.rc-prod em{background:#3a2f55;color:#d9c9ff}

/* Sektionsbakgrunder för nattläge */
.restock {
  background:
    linear-gradient(135deg, rgba(10, 12, 22, 0.70) 0%, rgba(10, 12, 22, 0.42) 48%, rgba(10, 12, 22, 0.78) 100%),
    radial-gradient(circle at 88% 18%, rgba(140, 180, 255, 0.20) 0%, transparent 48%),
    url("img/pokemon-restock-night.jpg") center 48% / cover no-repeat,
    #131422;
  /* Svart pixelram i stället för den ljusa textfärgen */
  box-shadow: 0 calc(var(--px)*-1) 0 0 #0b0c12, 0 var(--px) 0 0 #0b0c12, calc(var(--px)*-1) 0 0 0 #0b0c12, var(--px) 0 0 0 #0b0c12, 0 16px 36px rgba(0, 0, 0, 0.45);
}
.val-hero {
  background:
    linear-gradient(135deg, rgba(14, 16, 28, 0.76) 0%, rgba(14, 16, 28, 0.60) 48%, rgba(14, 16, 28, 0.84) 100%),
    radial-gradient(circle at 82% 28%, rgba(242, 182, 50, 0.22) 0%, transparent 48%),
    url("img/pokemon-nature-night.jpg") center 58% / cover no-repeat,
    #131422;
  /* Svart pixelram i stället för den ljusa textfärgen */
  box-shadow: 0 calc(var(--px)*-1) 0 0 #0b0c12, 0 var(--px) 0 0 #0b0c12, calc(var(--px)*-1) 0 0 0 #0b0c12, var(--px) 0 0 0 #0b0c12, 0 16px 36px rgba(0, 0, 0, 0.45);
}

/* Valt skick i nattläge: mörk bakgrund med ljus text, i stället för den vita ljusläges-gradienten. */
.chip input:checked+span {
  border-color: #e8eaf1;
  background: linear-gradient(180deg, #2f3658 0%, var(--surface) 100%);
  box-shadow: 0 0 0 1px #e8eaf1, 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}
.chip input:checked+span b { color: #ffffff; }
.chip input:checked+span small { color: #c3c9da; }

/* PROMO-stjärnan är svart med ljus kant, så att den och texten syns mot den mörka bakgrunden. */
.rsym .rs-promo { fill: #0b0c12; stroke: #e8eaf1; stroke-width: 0.8px; }

/* Produktraderna i "Precis inne i butikerna" i nattläge: ingen mörk overlay bakom dem, bara texten på landskapet. */
.rf a { background: none; backdrop-filter: none; border-color: transparent; }
.rf a:hover { background: none; }
.rf-body b { color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }
.rf-body small { color: #d6dcec; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }

/* Produktbilder i nattläge: vit botten som i fotona, utan hinna eller färgfilter över bilderna. */
.pimg,.tcard .art,.product .art.cardimg {
  background: #fff !important;
}

/* Produktkorten får en ljusare yta än sidans bakgrund, så de syns tydligare i nattläge. */
.tcard,.pcard,.product {
  background: #2e3446;
  border-color: #3e465c;
  box-shadow: 0 3px 0 #3e465c;
}
.tcard .muted,.pcard .muted,.product .muted,.tcard small,.pcard small,.product small {
  color: #b4bbcd;
}


/* Svarta sällsynthetsstjärnor (Rare, Double Rare) är svarta med ljus kant, så att de skiljer sig från silverstjärnorna. */
.rsy-black svg { fill: #0b0c12; stroke: #e8eaf1; stroke-width: 1.4px; }

/* "Vad är ditt kort värt?" på startsidan: mörk marinblå i stället för ljus lavendel, så att den vita texten syns. */
.price-band { background: linear-gradient(135deg, #273056 0%, #1f2742 100%); box-shadow: 0 calc(var(--px)*-1) 0 0 #0b0c12, 0 var(--px) 0 0 #0b0c12, calc(var(--px)*-1) 0 0 0 #0b0c12, var(--px) 0 0 0 #0b0c12; }
.price-band .search-row .card-suggest-wrap { border-color: #0b0c12; }

/* Svarta pixelramar i stället för den ljusa textfärgen: strecket ovanför sidfotens landskap och tidslinjens kort.
   Det aktuella släppet behåller sin gröna ram. */
.site-footer canvas.scene { border-top-color: #0b0c12; }
.tl-card { border-color: #0b0c12; box-shadow: 4px 4px 0 #0b0c12; }
.tl-step.current .tl-card { border-color: var(--mint); }

/* Butiker: sökfältet med svart ram i mörkt läge. */
input.shop-search { border-color: #0b0c12; }

/* Sök-knappen på startsidans prisband: svart ram i mörkt läge. */
.price-band .btn { box-shadow: 0 -3px 0 0 #0b0c12, 0 3px 0 0 #0b0c12, -3px 0 0 0 #0b0c12, 3px 0 0 0 #0b0c12; border-color: #0b0c12; }

/* Svarta ramar runt knappar i mörkt läge i stället för den ljusa textfärgen. */
.btn { box-shadow: 0 calc(var(--px)*-1) 0 0 #0b0c12, 0 var(--px) 0 0 #0b0c12, calc(var(--px)*-1) 0 0 0 #0b0c12, var(--px) 0 0 0 #0b0c12, inset 0 -4px 0 0 rgba(0, 0, 0, 0.25); }
.btn:active { box-shadow: 0 calc(var(--px)*-1) 0 0 #0b0c12, 0 var(--px) 0 0 #0b0c12, calc(var(--px)*-1) 0 0 0 #0b0c12, var(--px) 0 0 0 #0b0c12, inset 0 4px 0 0 rgba(0, 0, 0, 0.3); }

/* Knapparna "Produkter och butiker" på Släpp är lika de övriga mörka knapparna i mörkt läge, i stället för orange. */
.rc-foot .btn.primary { background: var(--card); color: var(--ink); }

/* Kalenderns produktchips är mörka med svart ram i mörkt läge, i stället för starkt orange. */
.ev-drop { background: #2a2f3e; color: var(--ink); box-shadow: 0 0 0 2px #0b0c12; }

/* Kortsökens ram i mörkt läge: svart i stället för den ljusa textfärgen. */
.card-search .card-suggest-wrap, .search-row .card-suggest-wrap { border-color: #0b0c12; }

/* Svarta streck i mörkt läge på alla sidor: under sidhuvudet och under banderollen. */
.page-head, .site-header { border-bottom-color: #0b0c12; }

/* Svart streck längst ner på sidfotens landskap i mörkt läge. */
.site-footer canvas.scene { border-bottom: 4px solid #0b0c12; }

/* Svarta pixelramar och streck i mörkt läge: "Nästa släpp" på startsidan (px-frame) och linjen under startsidans landskap. */
.px-frame { box-shadow: 0 calc(var(--px)*-1) 0 0 #0b0c12, 0 var(--px) 0 0 #0b0c12, calc(var(--px)*-1) 0 0 0 #0b0c12, var(--px) 0 0 0 #0b0c12; }
.hero { border-bottom-color: #0b0c12; }

/* Flikarna (Produkter, Händelser, Butiker, Notiser) med svarta kanter i mörkt läge. */
.seg { border-color: #0b0c12; }
.seg button + button { border-left-color: #0b0c12; }

/* "I lager"-chipsen på produktkorten: svart text i mörkt läge. */
.c.in { color: #0b0c12; }

/* Mobilmenyn och fokusmarkeringarna i mörkt läge: neutrala i stället för gula och orange. */
.mm-sheet li a[aria-current=page] { background: var(--surface); color: var(--ink); }
.menu-btn[aria-expanded=true] { background: var(--surface); color: var(--ink); border-color: var(--ink); }
:focus-visible { outline-color: #e8eaf1; }
.header-search:focus-within { box-shadow: 0 0 0 3px rgba(232, 234, 241, 0.25); }