:root {
  --np-night:#06162a;
  --np-deep:#0b2340;
  --np-panel:rgba(9,34,63,.88);
  --np-panel-strong:rgba(8,25,49,.96);
  --np-line:rgba(92,210,235,.32);
  --np-cyan:#27cbe8;
  --np-coral:#ff6f73;
  --np-orange:#ff9838;
  --np-mint:#67dfb3;
  --np-yellow:#ffd15c;
  --np-snow:#f8fbff;
  --np-muted:#b8c5dc;
  --np-shadow:0 22px 70px rgba(0,8,22,.34);
}

/* Shared visual system. The logo remains owned by the existing header template. */
.np-category-page {
  position:relative;
  isolation:isolate;
  min-height:100vh;
  color:var(--np-snow);
  background-color:var(--np-night);
  background-image:linear-gradient(180deg,rgba(3,14,30,.08),rgba(3,14,30,.4)),url("images/nordic-winter-bg.webp");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  background-attachment:fixed;
  padding-bottom:112px;
}
.np-category-page::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,20,39,.04) 0,rgba(4,20,39,.44) 46%,rgba(4,20,39,.92) 100%);
}
.np-category-page :where(h1,h2,h3,h4,p) { text-wrap:pretty; }
.np-category-page :where(a,button) { transition:transform .18s ease,filter .18s ease,background-color .18s ease,border-color .18s ease; }
.np-category-page :where(a,button):focus-visible { outline:3px solid var(--np-yellow); outline-offset:3px; }

.np-design-panel,
.np-category-header,
.np-featured-banner {
  border:1px solid var(--np-line);
  box-shadow:var(--np-shadow);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
}
.np-category-header {
  width:min(1180px,calc(100% - 32px));
  margin:28px auto 34px !important;
  padding:18px 22px !important;
  border-radius:24px;
  background:linear-gradient(135deg,rgba(9,42,75,.9),rgba(12,47,82,.72));
  gap:20px 34px !important;
}
.np-category-heading { gap:18px !important; align-items:center !important; }
.np-category-heading h2 { margin:0; font-size:clamp(25px,3vw,38px); line-height:1.05; }
.np-category-heading p { margin:.35rem 0 0; color:var(--np-muted) !important; }
.np-back-button .wp-block-button__link {
  min-height:46px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(220,235,255,.7) !important;
  border-radius:999px !important;
  background:rgba(4,18,35,.28) !important;
  color:var(--np-snow) !important;
  font-weight:750;
}
.np-filter-row { gap:8px !important; }
.np-filter-button .wp-block-button__link {
  min-height:40px;
  padding:8px 15px !important;
  border:1px solid rgba(220,235,255,.18);
  border-radius:999px !important;
  background:rgba(238,247,255,.09) !important;
  color:var(--np-snow) !important;
  font-size:14px;
  font-weight:750;
}
.np-filter-button.is-active .wp-block-button__link,
.np-filter-button .wp-block-button__link:hover { background:var(--np-cyan) !important; color:#061522 !important; }

.np-category-content {
  width:min(1180px,calc(100% - 32px)) !important;
  max-width:1180px !important;
  margin-inline:auto !important;
}
.np-category-content > * { max-width:none !important; }
.np-category-content > .wp-block-heading,
.np-category-content .wp-block-heading[id="alle-spil"] {
  margin:38px 0 18px;
  font-size:clamp(26px,3vw,38px);
  color:var(--np-snow);
}

.np-card-grid {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px !important;
  align-items:stretch;
}
.np-card-grid > .np-content-card,
.np-content-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:300px;
  margin:0 !important;
  overflow:hidden;
  border:1px solid rgba(127,214,236,.2);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(30,47,78,.93) 0 58%,rgba(7,19,36,.97) 58% 100%);
  box-shadow:0 15px 38px rgba(0,8,22,.24);
  transform:translateZ(0);
}
.np-content-card:hover { transform:translateY(-5px); border-color:rgba(39,203,232,.78); box-shadow:0 20px 46px rgba(0,8,22,.42),0 0 0 2px rgba(39,203,232,.12); }
.np-card-visual {
  display:grid;
  place-items:center;
  width:100%;
  height:174px;
  min-height:174px;
  margin:0 !important;
  overflow:hidden;
  color:#dce7ff;
  font-size:60px;
  line-height:1;
  background:linear-gradient(145deg,rgba(35,48,82,.95),rgba(25,35,65,.9));
}
.np-card-visual img {
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover;
}
.np-card-copy {
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:100%;
  padding:20px 22px !important;
  background:rgba(6,18,34,.92);
}
.np-card-copy h3 { margin:0; color:var(--np-snow); font-size:20px; line-height:1.15; }
.np-card-copy p { margin:0; color:var(--np-muted) !important; font-size:15px; }
.np-game-selector::after { content:"Se dagens spil" !important; }
.np-content-card[hidden] { display:none !important; }

.np-category-nav {
  position:fixed;
  left:50%;
  bottom:18px;
  z-index:30;
  transform:translateX(-50%);
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:5px !important;
  width:max-content;
  max-width:calc(100vw - 24px);
  padding:6px !important;
  border:1px solid var(--np-line);
  border-radius:999px;
  background:rgba(4,19,37,.92);
  box-shadow:0 14px 38px rgba(0,7,20,.45);
  backdrop-filter:blur(16px);
}
.np-category-nav .wp-block-button__link {
  padding:10px 18px !important;
  border-radius:999px !important;
  background:transparent !important;
  color:var(--np-snow) !important;
  font-weight:750;
  white-space:nowrap;
}
.np-category-nav .wp-block-button__link:hover { background:rgba(39,203,232,.18) !important; }

@media (max-width:980px) {
  .np-category-page { background-attachment:scroll; }
  .np-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px !important; }
  .np-category-header { align-items:flex-start !important; }
}
@media (max-width:600px) {
  .np-category-page { padding-bottom:88px; background-position:center top; }
  .np-category-header,.np-category-content { width:min(100% - 24px,1180px) !important; }
  .np-category-header { margin-top:12px !important; padding:16px !important; border-radius:18px; }
  .np-category-heading { width:100%; align-items:flex-start !important; }
  .np-back-button .wp-block-button__link { min-height:40px; padding:8px 12px !important; font-size:13px; }
  .np-filter-row { flex-wrap:nowrap !important; width:100%; overflow-x:auto; padding-bottom:3px; }
  .np-filter-row .wp-block-button { flex:0 0 auto; }
  .np-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px !important; }
  .np-content-card { min-height:238px; border-radius:17px; }
  .np-card-visual { height:132px; min-height:132px; font-size:46px; }
  .np-card-copy { padding:14px !important; }
  .np-card-copy h3 { font-size:16px; }
  .np-card-copy p { font-size:13px; }
  .np-category-nav { bottom:9px; width:calc(100vw - 18px); justify-content:space-around !important; }
  .np-category-nav .wp-block-button { flex:1; }
  .np-category-nav .wp-block-button__link { width:100%; padding:9px 8px !important; font-size:12px; }
}

@media (prefers-reduced-motion:reduce) {
  .np-category-page *, .np-category-page *::before, .np-category-page *::after { scroll-behavior:auto !important; transition:none !important; }
}
