/* Norske Spill: snow, birch, fjord blue and cabin red. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Young Serif";
  src: url("../fonts/youngserif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sno: #fbfcfd;
  --bjork: #f5f0e6;
  --bjork-dyp: #e9e0cf;
  --fjord: #16324f;
  --fjord-midt: #1f4e79;
  --skifer: #4b5e70;
  --hytte: #a8261d;
  --hytte-mork: #82180f;
  --nordlys: #1d7556;
  --nordlys-lys: #46c99a;
  --oker: #c8962e;
  --ved: #6e4527;
  --ved-mork: #45291a;
  --linje: #d9e0e7;
  --kremhvit: #fbf6ec;
  --skygge: 0 1px 2px rgba(22, 50, 79, .07), 0 10px 28px rgba(22, 50, 79, .10);
  --tekst: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --tittel: "Young Serif", Georgia, "Times New Roman", serif;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font: 400 1.0625rem/1.62 var(--tekst);
  color: var(--fjord);
  background: var(--sno);
  min-width: 320px;
}

img, svg { max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--tittel);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 1.35rem + 3vw, 3.3rem); }
h2 { font-size: clamp(1.5rem, 1.18rem + 1.35vw, 2.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }

a { color: var(--fjord-midt); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a:hover { color: var(--hytte); }

:focus-visible {
  outline: 3px solid var(--nordlys);
  outline-offset: 3px;
  border-radius: 4px;
}

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .9em;
  background: var(--bjork);
  padding: .1em .35em;
  border-radius: 5px;
}

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tegnelager { position: absolute; width: 0; height: 0; overflow: hidden; }

.bredde {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
}

.hopp {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--fjord);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  font-weight: 700;
  text-decoration: none;
}
.hopp:focus { top: 0; color: #fff; }

main:focus { outline: none; }

.overlinje {
  font: 800 .78rem/1.3 var(--tekst);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nordlys);
  margin-bottom: .7em;
}
.ingress { font-size: clamp(1.06rem, 1rem + .35vw, 1.2rem); max-width: 46rem; color: #23415f; }

/* ---------- buttons ---------- */
.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 1rem/1.2 var(--tekst);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s, color .15s, transform .12s, box-shadow .15s;
}
.knapp:active { transform: translateY(1px); }
.knapp:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.knapp-rod { background: var(--hytte); color: #fff; box-shadow: 0 3px 0 var(--hytte-mork); }
.knapp-rod:hover:not(:disabled) { background: var(--hytte-mork); color: #fff; }
.knapp-lys { background: #fff; color: var(--fjord); border-color: var(--fjord); }
.knapp-lys:hover:not(:disabled) { background: var(--bjork); color: var(--fjord); }
.knapp-gronn { background: var(--nordlys); color: #fff; box-shadow: 0 3px 0 #11523b; }
.knapp-gronn:hover:not(:disabled) { background: #155e44; color: #fff; }
.knapp-liten { min-height: 40px; padding: 8px 16px; font-size: .93rem; }
.knapp-stor { width: 100%; min-height: 56px; font-size: 1.12rem; }
.knapperad { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* ---------- header ---------- */
.topp {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 252, 253, .95);
  border-bottom: 1px solid var(--linje);
}
@supports (backdrop-filter: blur(8px)) {
  .topp { background: rgba(251, 252, 253, .86); backdrop-filter: blur(8px); }
}
.topp-rad {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  position: relative;
}
.merke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fjord);
  text-decoration: none;
  flex: none;
}
.merke:hover { color: var(--fjord); }
.merke-tegn { width: 40px; height: 40px; flex: none; }
.merke-ord { font: 400 1.4rem/1 var(--tittel); white-space: nowrap; }
.merke-ord em { font-style: normal; color: var(--hytte); }

.hovednav { margin-left: auto; }
.hovednav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.hovednav a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--fjord);
  font-weight: 650;
  text-decoration: none;
}
.hovednav a:hover { background: var(--bjork); color: var(--fjord); }
.hovednav a[aria-current="page"] { background: var(--fjord); color: #fff; }

/* the wooden purse sign */
.skilt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-left: 8px;
  padding: 8px 16px 8px 16px;
  border: 0;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .10)),
    repeating-linear-gradient(178deg, #7c4d2c 0 6px, #714428 6px 7px, #80512f 7px 12px, #6a4025 12px 13px);
  color: #fdf4e3;
  font: 650 .95rem/1.1 var(--tekst);
  box-shadow: inset 0 0 0 2px var(--ved-mork), 0 2px 0 var(--ved-mork), 0 6px 14px rgba(69, 41, 26, .28);
  cursor: pointer;
}
.skilt::before, .skilt::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #d8c29d;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35);
}
.skilt::before { left: 6px; }
.skilt::after { right: 6px; }
.skilt:hover { filter: brightness(1.07); }
.skilt-navn {
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 10px;
  border-right: 1px solid rgba(253, 244, 227, .35);
}
.skilt-sum { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-variant-numeric: tabular-nums; }
.skilt-gjest .skilt-sum { display: none; }
.skilt-gjest .skilt-navn { border-right: 0; padding-right: 0; }

.meny-knapp {
  display: none;
  flex: none;
  width: 44px; height: 44px;
  border: 2px solid var(--linje);
  border-radius: 12px;
  background: #fff;
  color: var(--fjord);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 859px) {
  .meny-knapp { display: inline-flex; }
  .skilt { margin-left: auto; }
  .hovednav {
    display: none;
    position: absolute;
    top: 100%;
    left: -16px;
    right: -16px;
    background: var(--sno);
    border-bottom: 1px solid var(--linje);
    box-shadow: 0 14px 24px rgba(22, 50, 79, .12);
    padding: 8px 16px 16px;
  }
  .meny-apen .hovednav { display: block; }
  .hovednav ul { flex-direction: column; }
  .hovednav a { padding: 12px 14px; border-radius: 10px; }
}
@media (max-width: 479px) {
  .topp-rad { gap: 8px; min-height: 60px; }
  .merke { gap: 8px; }
  .merke-tegn { width: 34px; height: 34px; }
  .merke-ord { font-size: 1.14rem; }
  .skilt { padding: 8px 13px; gap: 6px; font-size: .9rem; }
  .skilt:not(.skilt-gjest) .skilt-navn { display: none; }
}
@media (max-width: 359px) {
  .merke-ord { font-size: 1rem; }
}

/* ---------- ornament ---------- */
.rosett { display: flex; justify-content: center; padding: 30px 16px; }
.rosett svg { width: 240px; height: auto; }

/* ---------- front page: the view ---------- */
.utsikt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(470px, 74vh, 700px);
  display: flex;
  align-items: flex-start;
}
.utsikt-bakgrunn { position: absolute; inset: 0; z-index: -1; background: #dbe8f1; }
.utsikt-tegning, .utsikt-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.utsikt-foto { object-fit: cover; object-position: 50% 40%; }
.uten-foto { visibility: hidden; }
.utsikt-tekst { padding-block: clamp(28px, 6vw, 72px) clamp(96px, 12vw, 140px); }
.utsikt-glass {
  max-width: 35rem;
  padding: clamp(22px, 4vw, 38px);
  background: rgba(251, 252, 253, .9);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 20px 50px rgba(22, 50, 79, .18);
  position: relative;
}
@supports (backdrop-filter: blur(6px)) {
  .utsikt-glass { background: rgba(251, 252, 253, .84); backdrop-filter: blur(6px) saturate(1.1); }
}
.utsikt-glass::before {
  content: "";
  position: absolute;
  left: clamp(22px, 4vw, 38px);
  top: 0;
  width: 64px;
  height: 5px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, var(--hytte) 0 40%, var(--oker) 40% 70%, var(--nordlys) 70%);
}
.utsikt h1 { font-size: clamp(2.7rem, 1.6rem + 5vw, 4.7rem); margin: .05em 0 .22em; }
.utsikt-for { margin: 0; font-weight: 800; color: var(--nordlys); letter-spacing: .02em; }
.utsikt-forklar { font-weight: 500; color: var(--skifer); font-size: .9rem; }

.tre-ting {
  list-style: none;
  padding: 22px 26px;
  margin-top: -56px;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 28px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--skygge);
  border: 1px solid var(--linje);
}
.tre-ting li { position: relative; padding-left: 26px; font-size: .98rem; }
.tre-ting li::before {
  content: "";
  position: absolute;
  left: 2px; top: .45em;
  width: 11px; height: 11px;
  background: var(--hytte);
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: 3px 3px 0 -1px var(--oker);
}
.tre-ting strong { display: block; font-size: 1.04rem; }

/* ---------- the trail ---------- */
.loypa {
  padding-block: clamp(56px, 8vw, 96px) clamp(40px, 6vw, 72px);
  background: linear-gradient(180deg, var(--sno) 0, var(--bjork) 100%);
}
.seksjon-hode { max-width: 44rem; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.seksjon-hode p:last-child { color: #2c4a66; }

.loype-kart { position: relative; }
.loype-spor {
  position: absolute;
  top: 0;
  left: 50%;
  width: 120px;
  height: 100%;
  transform: translateX(-50%);
  overflow: visible;
}
.loype {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-auto-rows: 1fr;
}
.post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  align-items: center;
  padding-block: 18px;
}
.post-innhold, .post-notat, .post-punkt { grid-row: 1; }
.post-venstre .post-innhold { grid-column: 1; }
.post-venstre .post-notat { grid-column: 3; justify-self: start; }
.post-hoyre .post-innhold { grid-column: 3; }
.post-hoyre .post-notat { grid-column: 1; justify-self: end; text-align: right; }
.post-punkt {
  grid-column: 2;
  justify-self: center;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hytte);
  color: #fff;
  font: 400 1.2rem/1 var(--tittel);
  box-shadow: 0 0 0 6px var(--bjork), 0 0 0 8px #9db4c8;
  position: relative;
  z-index: 1;
}
.post-innhold {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--linje);
  border-radius: 20px;
  box-shadow: var(--skygge);
}
.post-hoyre .post-innhold { grid-template-columns: minmax(0, 1fr) 150px; }
.post-hoyre .post-bilde { order: 2; transform: rotate(1.6deg); }
.post-venstre .post-bilde { transform: rotate(-1.6deg); }
.post-bilde {
  display: block;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: 0 0 0 1px var(--linje), 0 8px 18px rgba(22, 50, 79, .16);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 72 L22 46 L34 58 L52 34 L74 60 L100 40 V100 H0Z' fill='%23a9bfd1'/%3E%3Cpath d='M0 84 C30 78 60 80 100 86 V100 H0Z' fill='%23fff'/%3E%3Crect x='58' y='70' width='16' height='10' fill='%23a8261d'/%3E%3Cpath d='M55 71 L66 62 L77 71Z' fill='%232b1b12'/%3E%3C/svg%3E") center / cover,
    linear-gradient(180deg, #cfe2ee, #eef3f6);
}
.post-bilde img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-tekst h3 { margin: .15em 0 .3em; font-size: 1.45rem; }
.post-tekst p { margin-bottom: .8em; font-size: .98rem; }
.post-nr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--skifer);
}
.post-notat {
  max-width: 17rem;
  margin: 0 24px;
  font: 400 1.04rem/1.45 var(--tittel);
  color: #2c4a66;
}
.post-pris {
  display: block;
  margin-top: 6px;
  font: 700 .86rem/1.3 var(--tekst);
  color: var(--hytte-mork);
  letter-spacing: .02em;
}

.grad {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font: 800 .72rem/1.3 var(--tekst);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.grad-green { background: #dcf1e7; color: #11533b; }
.grad-blue { background: #dce8f4; color: #1a446b; }
.grad-red { background: #f7dfdb; color: #82180f; }
.grad-black { background: #1d2833; color: #fff; }

@media (max-width: 899px) {
  .loype-spor { display: none; }
  .loype { grid-auto-rows: auto; }
  .loype::before {
    content: "";
    position: absolute;
    top: 8px; bottom: 8px;
    left: 21px;
    border-left: 3px dotted #9db4c8;
  }
  .post { grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: start; padding-block: 12px; }
  .post .post-punkt { grid-column: 1; grid-row: 1 / span 2; margin-top: 18px; }
  .post .post-innhold { grid-column: 2; grid-row: 1; }
  .post .post-notat { grid-column: 2; grid-row: 2; justify-self: start; text-align: left; margin: 10px 4px 0; max-width: none; font-size: .98rem; }
  .post-hoyre .post-innhold, .post-innhold { grid-template-columns: 120px minmax(0, 1fr); }
  .post-hoyre .post-bilde { order: 0; }
}
@media (max-width: 559px) {
  .post-hoyre .post-innhold, .post-innhold { grid-template-columns: 1fr; gap: 14px; padding: 12px; }
  .post-bilde { max-width: 100%; aspect-ratio: 16 / 10; border-width: 4px; }
  .post-venstre .post-bilde, .post-hoyre .post-bilde { transform: none; }
  .post-tekst h3 { font-size: 1.32rem; }
}

/* ---------- purse explainer ---------- */
.pung {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding-bottom: clamp(48px, 7vw, 88px);
}
.vedskjul {
  background: var(--kremhvit);
  border: 1px solid #ecdfc6;
  border-radius: 22px;
  padding: 26px;
  text-align: center;
  box-shadow: var(--skygge);
}
.vedskjul h2, .vedskjul h3 { font-size: 1.45rem; margin-bottom: .25em; }
.vedskjul-tegn { display: block; margin: 0 auto 10px; }
.vedskjul .knapp { margin-top: 4px; }
.vedstabel-tid { margin: 10px 0 0; font-size: .88rem; color: var(--skifer); min-height: 1.4em; font-variant-numeric: tabular-nums; }

.klart-hode {
  background:
    radial-gradient(ellipse 70% 120% at 85% 0, rgba(70, 201, 154, .28), transparent 60%),
    var(--fjord);
  color: #e8f0f6;
  padding-block: clamp(44px, 7vw, 76px);
}
.klart-innhold { max-width: 46rem; }
.klart-hode h2 { color: #fff; }
.klart-hode a:not(.knapp) { color: #b9f0d8; }
.klart-hode a:not(.knapp):hover { color: #fff; }
.klart-hode :focus-visible { outline-color: #9be3c4; }

@media (max-width: 759px) {
  .tre-ting { grid-template-columns: 1fr; margin-top: -48px; padding: 18px 20px; }
  .pung { grid-template-columns: 1fr; }
}

/* ---------- page heads and text pages ---------- */
.side-hode {
  background:
    radial-gradient(ellipse 60% 140% at 100% 0, rgba(70, 201, 154, .16), transparent 70%),
    var(--bjork);
  border-bottom: 1px solid var(--bjork-dyp);
  padding-block: clamp(36px, 6vw, 64px) clamp(28px, 4vw, 44px);
}
.side-hode-gronn {
  background:
    radial-gradient(ellipse 60% 140% at 100% 0, rgba(70, 201, 154, .3), transparent 70%),
    #eef5ef;
}
.tekstside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(28px, 5vw, 64px);
  padding-block: clamp(36px, 5vw, 56px) clamp(52px, 7vw, 80px);
  align-items: start;
}
.skrift { max-width: 44rem; }
.skrift h2 { margin-top: 1.7em; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); }
.skrift > h2:first-child, .skrift > section:first-child + h2 { margin-top: 0; }
.skrift ul { padding-left: 1.25em; }
.skrift li { margin: .45em 0; }
.skrift li::marker { color: var(--hytte); }
.tekst-side { position: sticky; top: 90px; }
.faktaboks {
  background: #fff;
  border: 1px solid var(--linje);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--skygge);
}
.faktaboks h2 { font-size: 1.25rem; }
.faktaboks p:last-child, .faktaboks ul:last-child { margin-bottom: 0; }
.faktaboks ul { padding-left: 1.1em; margin: 0; }
.faktaboks li { margin: .35em 0; }
.faktaboks dl { margin: 0; }
.faktaboks dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dotted #c5d0db;
  font-size: .95rem;
}
.faktaboks dt { color: var(--skifer); }
.faktaboks dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.faktaboks-rod { border-top: 5px solid var(--hytte); }

.hjelpelinje {
  background: #e7f4ed;
  border-left: 6px solid var(--nordlys);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 1.5em;
}
.hjelpelinje h2 { margin-top: 0; }
.hjelpelinje-nr { font: 400 clamp(1.9rem, 1.3rem + 2.6vw, 2.7rem)/1.1 var(--tittel); margin-bottom: .35em; }
.hjelpelinje-nr a { color: var(--fjord); text-decoration: none; }
.hjelpelinje p:last-child { margin: 0; }
.hjelpeliste { margin: 0 0 1em; }
.hjelpeliste div { padding: 14px 0; border-bottom: 1px solid var(--linje); }
.hjelpeliste dt { font-weight: 800; }
.hjelpeliste dd { margin: 4px 0 0; }

.postkasse {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: var(--bjork);
  border-radius: 18px;
  margin-bottom: 1.6em;
}
.postkasse svg { flex: none; }
.postkasse p { margin: 0; }
.postkasse-liten { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--skifer); }
.postkasse-adr { font-size: clamp(1.02rem, .9rem + 1.2vw, 1.45rem); font-weight: 800; overflow-wrap: anywhere; }

@media (max-width: 899px) {
  .tekstside { grid-template-columns: 1fr; }
  .tekst-side { position: static; }
}

/* ---------- games overview ---------- */
.oversikt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(24px, 4vw, 48px);
  padding-block: clamp(32px, 5vw, 56px) clamp(52px, 7vw, 80px);
  align-items: start;
}
.tavle { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.tavle-rad {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 14px 20px 14px 14px;
  background: #fff;
  border: 1px solid var(--linje);
  border-left: 6px solid var(--hytte);
  border-radius: 16px;
  box-shadow: var(--skygge);
}
.tavle-rad:nth-child(even) { border-left-color: var(--fjord-midt); }
.tavle-bilde {
  display: block;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, #cfe2ee, #f5f0e6);
}
.tavle-bilde img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tavle-tekst h2 { font-size: 1.45rem; margin-bottom: .2em; }
.tavle-tekst h2 a { color: var(--fjord); text-decoration: none; }
.tavle-tekst h2 a:hover { color: var(--hytte); }
.tavle-tekst p { margin-bottom: .5em; font-size: .97rem; }
.tavle-fakta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .9rem; color: var(--skifer); font-weight: 600; margin: 0 !important; }
.oversikt-side { display: grid; gap: 20px; position: sticky; top: 90px; }
.vedskjul-smal { text-align: left; padding: 22px; }
.fargeforklaring {
  background: #fff;
  border: 1px solid var(--linje);
  border-radius: 18px;
  padding: 22px;
}
.fargeforklaring h2 { font-size: 1.25rem; }
.fargeforklaring ul { list-style: none; margin: 0; padding: 0; }
.fargeforklaring li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: start; margin: .7em 0; font-size: .93rem; line-height: 1.45; }
.fargeforklaring .grad { text-align: center; }

@media (max-width: 959px) {
  .oversikt { grid-template-columns: 1fr; }
  .oversikt-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 599px) {
  .tavle-rad { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .tavle-knapp { grid-column: 1 / -1; }
  .tavle-tekst h2 { font-size: 1.28rem; }
}

/* ---------- game pages ---------- */
.spill-hode { padding-block: 22px clamp(20px, 3vw, 32px); }
.spill-hode h1 { margin-top: .35em; }
.smuler ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; font-size: .9rem; }
.smuler li + li::before { content: "\203A"; margin-right: 8px; color: var(--skifer); }
.smuler a { color: var(--skifer); }
.smuler [aria-current] { font-weight: 700; }

/* the red cabin wall the window sits in */
.vegg {
  background-color: #9b2a1f;
  background-image:
    linear-gradient(180deg, rgba(40, 8, 4, .38), rgba(40, 8, 4, 0) 34px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 52px, rgba(40, 8, 4, .26) 52px 54px, rgba(255, 255, 255, .06) 54px 55px);
  padding-block: clamp(34px, 5vw, 60px) clamp(36px, 5vw, 60px);
  border-bottom: 10px solid #e9e1d2;
}
.vegg-oppsett { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .vegg-oppsett { grid-template-columns: minmax(0, 1fr) 330px; align-items: center; gap: 44px; }
}
.glass {
  position: relative;
  margin-top: 18px;
  margin-bottom: 14px;
  padding: clamp(9px, 1.6vw, 16px);
  background: #fdfdfb;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #e7e0d2, 0 20px 44px rgba(40, 8, 4, .42);
}
.glass::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -20px;
  width: min(46%, 220px);
  height: 21px;
  transform: translateX(-50%);
  background: #fdfdfb;
  clip-path: polygon(0 100%, 12% 34%, 50% 0, 88% 34%, 100% 100%);
}
.glass::after {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: -16px;
  height: 18px;
  border-radius: 3px 3px 6px 6px;
  background:
    radial-gradient(ellipse 18% 70% at 18% 0, #fff 60%, transparent 62%),
    radial-gradient(ellipse 22% 80% at 55% 0, #fff 60%, transparent 62%),
    radial-gradient(ellipse 15% 70% at 86% 0, #fff 60%, transparent 62%),
    #efebe3;
  box-shadow: 0 8px 12px rgba(40, 8, 4, .35);
}
.glass-ruter {
  position: relative;
  border-radius: 3px;
  padding: clamp(12px, 2.6vw, 28px);
  box-shadow: inset 0 0 0 3px #e6dfd1, inset 0 6px 18px rgba(22, 50, 79, .16);
  overflow: hidden;
}

.styring {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 22px;
  background: var(--kremhvit);
  border: 3px solid #fff;
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(40, 8, 4, .32);
}
.styring p { margin: 0; }
.styring-saldo { font-size: .95rem; }
.styring-saldo strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.styring-pris { font-size: .95rem; }
.styring-hint { font-size: .86rem; color: var(--skifer); }
.innsats { border: 0; margin: 0; padding: 0; display: flex; gap: 8px; min-width: 0; }
.innsats legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.innsats label { flex: 1; position: relative; }
.innsats input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.innsats span {
  display: block;
  padding: 10px 6px;
  text-align: center;
  border: 2px solid #c9d3dd;
  border-radius: 12px;
  background: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.innsats input:checked + span { background: var(--fjord); border-color: var(--fjord); color: #fff; }
.innsats input:focus-visible + span { outline: 3px solid var(--nordlys); outline-offset: 2px; }
.innsats input:disabled + span { opacity: .6; }
.melding {
  min-height: 3.3em;
  padding: 12px 14px;
  background: #fff;
  border-left: 5px solid var(--oker);
  border-radius: 10px;
  font-size: .96rem;
  line-height: 1.45;
}
.melding[data-tone="opp"] { border-left-color: var(--nordlys); background: #f1faf5; }
.melding[data-tone="lik"] { border-left-color: var(--fjord-midt); }
.melding[data-tone="ned"] { border-left-color: #9db4c8; }
.knapp-hopp { background: var(--nordlys); box-shadow: 0 3px 0 #11523b; }
.knapp-hopp:hover:not(:disabled) { background: #155e44; }

.spill-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 60px);
  padding-block: clamp(36px, 5vw, 56px) 20px;
}
.regler ol { padding-left: 1.3em; margin: 0 0 1em; }
.regler li { margin: .55em 0; }
.regler li::marker { color: var(--hytte); font-weight: 800; }
.regler-ord { background: var(--bjork); padding: 14px 16px; border-radius: 12px; font-size: .95rem; }
.rune-mini { display: inline-block; vertical-align: -3px; color: var(--hytte); }
@media (max-width: 859px) {
  .spill-info { grid-template-columns: 1fr; }
}

.tabell-rull { overflow-x: auto; margin: 0 0 1.2em; -webkit-overflow-scrolling: touch; }
.tabell { width: 100%; border-collapse: collapse; font-size: .95rem; background: #fff; }
.tabell caption { caption-side: top; text-align: left; font-size: .88rem; color: var(--skifer); padding-bottom: 8px; }
.tabell th, .tabell td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linje); }
.tabell thead th {
  font-size: .76rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--skifer);
  background: var(--bjork);
  border-bottom: 0;
}
.tabell tbody th { font-weight: 700; }
.tabell small { display: block; font-size: .78rem; color: var(--skifer); font-weight: 500; }
.tabell td strong { font-variant-numeric: tabular-nums; }
@media (max-width: 479px) {
  .tabell { font-size: .86rem; }
  .tabell th, .tabell td { padding: 8px 7px; }
}

.virtuell {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 8px 0 28px;
  padding: 16px 18px;
  background: var(--kremhvit);
  border: 1px solid #ecdfc6;
  border-radius: 14px;
  font-size: .95rem;
}
.virtuell svg { flex: none; margin-top: 2px; }

.neste-stopp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-bottom: clamp(44px, 6vw, 72px); }
.neste-stopp > a:first-child {
  display: grid;
  gap: 2px;
  padding: 16px 26px;
  background: var(--fjord);
  color: #fff;
  border-radius: 16px;
  text-decoration: none;
  box-shadow: var(--skygge);
}
.neste-stopp > a:first-child:hover { background: #0f2740; color: #fff; }
.neste-liten { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a9e7cc; }
.neste-navn { font: 400 1.45rem/1.2 var(--tittel); }
.neste-alle { font-weight: 700; }

/* --- Troll Bridge --- */
.glass-troll { background: linear-gradient(180deg, #d6e5ef 0, #eef2f3 55%, #f3ede1 100%); }
.valser { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, 1vw, 10px); }
.valse {
  position: relative;
  aspect-ratio: 1 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, .82);
  box-shadow:
    inset 0 0 0 1px rgba(22, 50, 79, .14),
    inset 0 14px 14px -10px rgba(22, 50, 79, .3),
    inset 0 -14px 14px -10px rgba(22, 50, 79, .3);
}
.valse-belte { display: flex; flex-direction: column; will-change: transform; }
.rute { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 8%; flex: none; }
.rute img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rute-navn {
  display: none;
  position: absolute;
  inset: 12%;
  place-items: center;
  border-radius: 50%;
  font: 800 clamp(.5rem, 1.5vw, .82rem)/1.05 var(--tekst);
  text-align: center;
  color: #fff;
  background: var(--fjord-midt);
  padding: 2px;
  overflow: hidden;
}
.rute.uten-bilde img { display: none; }
.rute.uten-bilde .rute-navn { display: grid; }
.rute[data-sym="troll"] .rute-navn { background: #2a5a46; }
.rute[data-sym="moose"] .rute-navn { background: #6e4527; }
.rute[data-sym="longship"] .rute-navn { background: #1f4e79; }
.rute[data-sym="fish"] .rute-navn { background: #2c6587; }
.rute[data-sym="snowflake"] .rute-navn { background: #4b6782; }
.rute[data-sym="cabin"] .rute-navn { background: #a8261d; }
.rute.treff {
  background: radial-gradient(circle, rgba(70, 201, 154, .5), rgba(70, 201, 154, .12) 70%);
  box-shadow: inset 0 0 0 3px var(--nordlys);
  border-radius: 10px;
}
@media (prefers-reduced-motion: no-preference) {
  .rute.treff { animation: glod 1.1s ease-in-out 3; }
}
@keyframes glod { 50% { box-shadow: inset 0 0 0 6px var(--nordlys-lys); } }
.linjemerke {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}
.linjemerke span {
  width: clamp(8px, 1.6vw, 14px);
  height: clamp(14px, 2.6vw, 24px);
  background: var(--hytte);
}
.linjemerke span:first-child { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.linjemerke span:last-child { clip-path: polygon(100% 0, 0 50%, 100% 100%); }

/* --- Aurora Wheel --- */
.glass-natt {
  background:
    radial-gradient(ellipse 80% 45% at 30% 8%, rgba(70, 201, 154, .45), transparent 70%),
    radial-gradient(ellipse 60% 35% at 80% 18%, rgba(128, 214, 255, .25), transparent 70%),
    linear-gradient(180deg, #0e2238, #183a5a);
  display: grid;
  place-items: center;
}
.hjul { display: block; width: min(100%, 440px); height: auto; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .35)); }
.hjul-skive { transition: transform 4.2s cubic-bezier(.12, .7, .14, 1); }
.hjul-tall { font: 800 21px/1 var(--tekst); }
.hjul path.lyser { stroke: #ffe28a; stroke-width: 5; }
.hjul-pil, .hjul-skive g { pointer-events: none; }

/* --- Ice Fishing --- */
.glass-is {
  background:
    linear-gradient(115deg, transparent 0 30%, rgba(255, 255, 255, .55) 30.3%, transparent 31% 62%, rgba(255, 255, 255, .5) 62.3%, transparent 63%),
    radial-gradient(ellipse at 50% 40%, #f4f9fc, #cfe1ed 75%);
}
.isflak { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2.4vw, 22px); max-width: 560px; margin: 0 auto; }
.hull {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: radial-gradient(circle closest-side, #0f3550 0 50%, #2f6489 52% 60%, #9cc1d8 62% 66%, #f4f9fc 68% 86%, rgba(244, 249, 252, 0) 90%);
  cursor: pointer;
  color: #fff;
  transition: transform .15s;
}
.hull:disabled { cursor: default; }
.hull:not(:disabled):hover { transform: scale(1.05); }
.hull-ring { position: absolute; inset: 0; border-radius: 50%; }
.hull-tekst {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.hull.valgt .hull-ring { box-shadow: 0 0 0 4px var(--hytte); }
.hull.valgt::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  width: 2px;
  height: 46%;
  margin-left: -1px;
  background: #16324f;
}
.hull.vist::before { display: none; }
.fangst {
  position: absolute;
  inset: 10%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  text-align: center;
  font: 800 clamp(.6rem, 1.9vw, .84rem)/1.1 var(--tekst);
  color: #fff;
}
.fangst svg { width: 52%; height: auto; }
.fangst b { font-size: 1.15em; line-height: 1; }
.hull.vist:not(.valgt) { opacity: .5; }

/* --- Rune Stones --- */
.glass-stein { background: radial-gradient(ellipse at 50% 35%, #ffffff, #e2e9ee 80%); }
.steinsirkel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3vw, 22px); max-width: 430px; margin: 0 auto; }
.stein {
  position: relative;
  aspect-ratio: 1 / 1.08;
  border: 0;
  border-radius: 46% 46% 40% 40% / 52% 52% 36% 36%;
  background: radial-gradient(circle at 34% 28%, #a3aeb7, #74818c 58%, #5a6670);
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, .18), inset 0 3px 0 rgba(255, 255, 255, .2), 0 7px 0 #d7dfe5, 0 12px 18px rgba(22, 50, 79, .25);
  color: #2e3d4a;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .18s;
}
.stein:disabled { cursor: default; }
.stein:not(:disabled):hover { transform: translateY(-3px); }
.stein-flate { display: grid; place-items: center; width: 62%; height: 62%; }
.stein:not(.snudd) .stein-flate::before {
  content: "";
  width: 36%;
  height: 36%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .28);
}
.stein-flate svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6)); }
.stein.snudd { background: radial-gradient(circle at 34% 28%, #eef2f4, #c4ced6 62%, #a9b5bf); }
.stein.stein-sol { color: var(--hytte); }
.stein.stein-elg { color: #1b6a4e; }
.stein.stein-frost { background: radial-gradient(circle at 34% 28%, #ffffff, #cbe4f2 60%, #9fc6dd); color: #1f5f8b; }
.stein.dempet { opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .stein.snudd:not(.dempet) { animation: snu .32s ease-out; }
}
@keyframes snu { 0% { transform: scaleX(.2); } 100% { transform: scaleX(1); } }
.funnet { display: flex; justify-content: center; gap: 20px; margin: 18px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.funnet span { background: rgba(255, 255, 255, .85); padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linje); }

/* --- Ski Jump --- */
.glass-bakke { padding: clamp(8px, 1.6vw, 14px); background: #f7f3ea; }
.bakke { display: block; width: 100%; height: auto; border-radius: 3px; }
.maler {
  position: relative;
  height: 28px;
  margin: 16px 6px 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d8e4ed, #c4d5e2);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
.maler-sone { position: absolute; top: 0; bottom: 0; }
.maler-sone-0 { background: var(--hytte); z-index: 4; }
.maler-sone-1 { background: #e58a74; z-index: 3; }
.maler-sone-2 { background: #f0c48f; z-index: 2; }
.maler-sone-3 { background: #f4e5c4; z-index: 1; }
.maler-nal {
  position: absolute;
  top: 2px; bottom: 2px;
  left: 0;
  width: 6px;
  margin-left: -3px;
  border-radius: 3px;
  background: var(--fjord);
  box-shadow: 0 0 0 2px #fff;
  z-index: 5;
}
.maler-tekst { position: relative; display: flex; justify-content: space-between; margin: 0 6px; font-size: .78rem; font-weight: 700; color: var(--skifer); }
.maler-tekst span:nth-child(2) { position: absolute; left: 80%; transform: translateX(-50%); color: var(--hytte-mork); }
.baand-prikk { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.baand-0 { background: var(--hytte); }
.baand-1 { background: #e58a74; }
.baand-2 { background: #f0c48f; }
.baand-3 { background: #f4e5c4; }
.baand-4 { background: #d8e4ed; }

@media (max-width: 999px) {
  .glass::after { left: -8px; right: -8px; }
}

/* ---------- 404 ---------- */
.tapt { text-align: center; padding-block: clamp(40px, 8vw, 96px); max-width: 40rem; }
.tapt-skilt { display: block; margin: 0 auto 8px; }
.tapt-kode { font: 800 .85rem/1 var(--tekst); letter-spacing: .3em; color: var(--hytte); }
.tapt p { color: #2c4a66; }
.tapt-lenker { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 1.6em; }

/* ---------- footer ---------- */
.bunn {
  --rosett-strek: #c9d7e3;
  background: #10263d;
  color: #d9e3ec;
  font-size: .95rem;
}
.bunn a { color: #fff; }
.bunn a:hover { color: #b9f0d8; }
.bunn :focus-visible { outline-color: #9be3c4; }
.rosett-lys { padding-bottom: 6px; }
.bunn-felt {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(26px, 4vw, 52px);
  padding-block: 20px 34px;
}
.bunn-merke { display: flex; align-items: center; gap: 10px; font: 400 1.35rem/1 var(--tittel); color: #fff; }
.aldersmerke {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 2px solid #fff;
  border-radius: 50%;
  font: 800 .78rem/1 var(--tekst);
  margin-left: 4px;
}
.bunn-tittel { font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #9be3c4; margin-bottom: .8em; }
.bunn-kart { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bunn ul { list-style: none; margin: 0; padding: 0; }
.bunn li { margin: .45em 0; }
.bunn-hjelp ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.bunn-linje {
  margin: 0 auto;
  padding-block: 18px 30px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .85rem;
  color: #b8c7d4;
}
@media (max-width: 899px) {
  .bunn-felt { grid-template-columns: 1fr; }
}

/* ---------- dialogs ---------- */
.vindu-dlg {
  width: min(31rem, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: var(--fjord);
  box-shadow: 0 30px 80px rgba(10, 25, 40, .45);
  overflow: auto;
}
.vindu-dlg::backdrop { background: rgba(16, 38, 61, .66); backdrop-filter: blur(3px); }
.dlg-innhold { padding: clamp(22px, 5vw, 34px); border-top: 7px solid var(--hytte); }
.dlg-innhold h2 { font-size: 1.65rem; }
#aldersport .dlg-innhold { text-align: center; }
#aldersport .dlg-liste { text-align: left; }
.dlg-tegn { display: block; margin: 0 auto 10px; }
.dlg-knapper { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dlg-knapper .knapp { flex: 1 1 auto; }
.dlg-smatt { font-size: .86rem; color: var(--skifer); margin: 14px 0 0; }
.dlg-liste { padding-left: 1.2em; }
.dlg-liste li { margin: .5em 0; }
.felt-navn { display: block; font-weight: 700; margin-top: 14px; }
.felt-navn span { font-weight: 400; color: var(--skifer); font-size: .86rem; }
.felt {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 2px solid #aebccb;
  border-radius: 12px;
  font: inherit;
  color: var(--fjord);
  background: #fff;
}
.felt[aria-invalid="true"] { border-color: var(--hytte); }
.felt-feil { min-height: 1.4em; margin: 6px 0 0; color: var(--hytte-mork); font-size: .9rem; font-weight: 650; }
.tall-liste { margin: 14px 0; }
.tall-liste div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dotted #c5d0db; }
.tall-liste dt { color: var(--skifer); }
.tall-liste dd { margin: 0; font-weight: 800; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.vedstabel { background: #edf7f1; border-radius: 16px; padding: 16px; margin: 14px 0 6px; }
.vedstabel p { margin: 0 0 10px; }
.vedstabel .vedstabel-tid { margin: 10px 0 0; }

/* ---------- storage note ---------- */
.lapp {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  max-width: 40rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 14px 20px;
  background: #fff;
  border: 1px solid var(--linje);
  border-left: 6px solid var(--oker);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(22, 50, 79, .22);
  font-size: .9rem;
}
.lapp p { margin: 0; }
.lapp .knapp { flex: none; }
@media (max-width: 559px) {
  .lapp { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* ---------- calmer motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}