/* kortspillet.dk - regelhæftet fra kortæsken: cremet papir, blæk, kortrødt og bagsidens blå. */
@font-face { font-family: "Rokkitt"; src: url("../fonts/rokkitt-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
  --papir: #f4ede1;
  --papir-2: #ebe1cf;
  --blaek: #1c1a17;
  --blaek-2: #4f473d;
  --roed: #a8201a;
  --roed-mork: #861812;
  --bag: #1f2d4b;
  --bag-tekst: #efe6d6;
  --bag-tekst-2: #c9c0b4;
  --kort: #fffcf6;
  --streg: #d3c6ae;
  --skygge: rgba(52, 33, 12, 0.2);
  --display: "Rokkitt", "Rockwell", Georgia, serif;
  --tekst: "Literata", Georgia, "Times New Roman", serif;
  --ramme: 1120px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--streg) var(--papir); }
body {
  margin: 0;
  background: var(--papir);
  color: var(--blaek);
  font-family: var(--tekst);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
}
::selection { background: var(--roed); color: var(--kort); }
a { color: inherit; text-decoration-color: var(--roed); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { color: var(--roed-mork); }
:focus-visible { outline: 3px solid var(--roed); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
p, ul, ol { margin: 0 0 1em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ramme { width: 100%; max-width: var(--ramme); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 700px) { .ramme { padding-inline: 32px; } }

.spring { position: absolute; left: 16px; top: -60px; background: var(--blaek); color: var(--kort); padding: 0.5rem 0.9rem; border-radius: 6px; z-index: 5; }
.spring:focus { top: 12px; }

/* Sidehoved */
.top { border-bottom: 4px double var(--blaek); }
.top-indre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 0.9rem; }
.ordmaerke { display: block; line-height: 0; }
.ordmaerke svg { height: 34px; width: auto; overflow: visible; }
.om-pip { fill: var(--roed); }
.om-tekst { font-family: var(--display); font-weight: 800; font-size: 31px; fill: var(--blaek); letter-spacing: -0.3px; }
.om-dk { fill: var(--roed); }
.spilnav { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; font-size: 1rem; }
.spilnav a { text-decoration: none; padding-block: 0.25rem; border-bottom: 2px solid transparent; }
.spilnav a:hover { border-bottom-color: var(--streg); color: var(--blaek); }
.spilnav a[aria-current="page"] { border-bottom-color: var(--roed); font-weight: 600; }

/* Spillekort (SVG) */
.kort { display: block; width: 100%; height: auto; filter: drop-shadow(0 5px 9px var(--skygge)); }
.kort-kant { fill: var(--kort); stroke: var(--streg); stroke-width: 2; }
.kort-roed { color: var(--roed); fill: var(--roed); }
.kort-sort { color: var(--blaek); fill: var(--blaek); }
.kort-vaerdi { font-family: var(--display); font-weight: 800; font-size: 38px; }
.billed-ramme { fill: none; stroke: currentColor; stroke-width: 2; opacity: 0.32; }
.billed-vaerdi { font-family: var(--display); font-weight: 800; font-size: 112px; }
.bag-flade { fill: var(--bag); }
.bag-streg { stroke: rgba(239, 230, 214, 0.2); stroke-width: 2; fill: none; }
.bag-felt { fill: var(--bag); stroke: var(--bag-tekst); stroke-width: 2; }
.bag-pip { fill: var(--bag-tekst); }

/* Forside */
.forside-top { padding-block: 2.5rem 1rem; }
.forside-grid { display: grid; gap: 2rem; align-items: center; }
.forside-tekst h1 { font-size: clamp(2.7rem, 9vw, 5.2rem); line-height: 0.95; max-width: 11ch; }
.lede { font-size: 1.2rem; line-height: 1.5; color: var(--blaek-2); max-width: 38ch; margin-top: 1.1rem; }

.vifte { --kb: 92px; position: relative; height: calc(var(--kb) * 1.4 + 2.2rem); max-width: 100%; }
.vifte-kort {
  position: absolute; left: 50%; bottom: 0; width: var(--kb); margin-left: calc(var(--kb) / -2);
  transform: rotate(var(--v)); transform-origin: 50% 165%;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none; color: var(--blaek);
}
.vifte-kort:hover, .vifte-kort:focus-visible { transform: rotate(var(--v)) translateY(-16px); z-index: 2; }
.vifte-navn {
  position: absolute; left: 50%; top: -2rem; translate: -50% 0; white-space: nowrap;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem; background: var(--blaek); color: var(--kort);
  padding: 0.1rem 0.55rem; border-radius: 4px; opacity: 0; transition: opacity 0.2s ease-out;
}
.vifte-kort:hover .vifte-navn, .vifte-kort:focus-visible .vifte-navn { opacity: 1; }
@media (min-width: 560px) { .vifte { --kb: 120px; } }
@media (min-width: 900px) {
  .forside-top { padding-block: 4.5rem 2.5rem; }
  .forside-grid { grid-template-columns: 1fr 1fr; }
  .vifte { --kb: 150px; }
}

.indeks { padding-block: 2.5rem 3.5rem; }
.indeks h2, .kortene h2, .husregel-note h2 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: 1.2rem; }
.indeks-liste { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--streg); }
.indeks-liste li { border-top: 1px solid var(--streg); }
.indeks-liste a {
  display: grid; grid-template-columns: 52px 1fr; gap: 0.4rem 1.1rem; align-items: center;
  padding-block: 1rem; text-decoration: none; color: var(--blaek);
}
.kort.mini { width: 52px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.indeks-liste a:hover .kort.mini, .indeks-liste a:focus-visible .kort.mini { transform: rotate(-6deg) translateY(-3px); }
.indeks-tekst { display: grid; gap: 0.15rem; }
.indeks-navn { font-family: var(--display); font-weight: 800; font-size: 1.85rem; line-height: 1; }
.indeks-liste a:hover .indeks-navn { color: var(--roed); }
.indeks-linje { color: var(--blaek-2); line-height: 1.45; }
.indeks-fakta { grid-column: 2; font-size: 0.9rem; color: var(--blaek-2); line-height: 1.45; }
@media (min-width: 700px) {
  .indeks-liste a { grid-template-columns: 64px 1fr auto; gap: 0.4rem 1.6rem; padding-block: 1.2rem; }
  .kort.mini { width: 64px; }
  .indeks-liste .kort.mini { width: 64px; }
  .indeks-navn { font-size: 2.3rem; }
  .indeks-fakta { grid-column: 3; text-align: right; }
}

.kortene { background: var(--bag); color: var(--bag-tekst); padding-block: 3rem; }
.kortene p { color: var(--bag-tekst-2); max-width: 60ch; }
.kortene ::selection { background: var(--bag-tekst); color: var(--bag); }
.kortene-grid { display: grid; gap: 2.2rem; align-items: center; }
.kortraekke { display: flex; justify-content: center; padding-inline: 8px; }
.kortraekke .kort { width: 25%; max-width: 130px; margin-inline: -4px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35)); }
.kortraekke .kort:nth-child(1) { transform: rotate(-7deg) translateY(6px); }
.kortraekke .kort:nth-child(2) { transform: rotate(-2deg); }
.kortraekke .kort:nth-child(3) { transform: rotate(3deg); }
.kortraekke .kort:nth-child(4) { transform: rotate(8deg) translateY(8px); }
@media (min-width: 900px) { .kortene { padding-block: 4.5rem; } .kortene-grid { grid-template-columns: 1.1fr 1fr; } }

.husregel-note { padding-block: 3rem 4rem; }
.husregel-note p { max-width: 64ch; font-size: 1.12rem; }

/* Spilside */
.spil { padding-top: 2rem; }
.spil-top { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
.spil-titel h1 { font-size: clamp(3.4rem, 15vw, 7rem); line-height: 0.9; }
.spil-titel .lede { max-width: 46ch; }
.spil-kort { position: relative; width: clamp(96px, 26vw, 220px); aspect-ratio: 200 / 280; margin-right: 8px; }
.spil-kort .kort { position: absolute; inset: 0; }
.spil-kort .bagerst { transform: rotate(-9deg) translateX(-18%); }
.spil-kort .forrest { transform: rotate(6deg) translateX(6%); }
@media (max-width: 559px) { .spil-top { align-items: start; } .spil-titel .lede { grid-column: 1 / -1; } .spil-titel { display: contents; } .spil-titel h1 { align-self: center; } .spil-kort { grid-row: 1; grid-column: 2; } }

.fakta { display: grid; grid-template-columns: repeat(2, 1fr); margin: 2rem 0 0; border-block: 4px double var(--blaek); }
.fakta div { padding: 0.8rem 1rem 0.8rem 0; }
.fakta div + div { border-left: 1px solid var(--streg); padding-left: 1rem; }
.fakta .fakta-maal { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--streg); }
.fakta dt { font-size: 0.85rem; color: var(--blaek-2); }
.fakta dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.15; }
@media (min-width: 700px) {
  .fakta { grid-template-columns: 1fr 1fr 2fr; }
  .fakta .fakta-maal { grid-column: auto; border-top: 0; border-left: 1px solid var(--streg); padding-left: 1rem; }
}

.regler { max-width: 68ch; padding-block: 1rem 2rem; }
.regler h2 { font-size: clamp(1.7rem, 4.6vw, 2.2rem); margin: 2.4rem 0 0.8rem; }
.regler ol { list-style: none; counter-reset: trin; padding: 0; }
.regler ol li { counter-increment: trin; position: relative; padding-left: 2.6rem; margin-bottom: 0.8rem; }
.regler ol li::before {
  content: counter(trin); position: absolute; left: 0; top: -0.05em;
  font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--roed);
}
.regler ul { padding-left: 1.2rem; }
.regler ul li { margin-bottom: 0.55rem; }
.regler ul li::marker { color: var(--roed); }
.regler strong { font-weight: 650; }

.husregler { margin-top: 2.8rem; background: var(--papir-2); border: 1px solid var(--streg); border-radius: 12px; padding: 1.4rem 1.2rem 0.6rem; }
.husregler h2 { margin-top: 0; font-size: 1.6rem; }
@media (min-width: 700px) { .husregler { padding: 1.8rem 2rem 0.8rem; } }

.flere { padding-block: 1rem 3.5rem; }
.flere h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.flere ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 1rem; }
.flere a { display: grid; justify-items: center; gap: 0.5rem; text-decoration: none; padding: 0.4rem; }
.flere .kort.mini { width: 64px; }
.flere a:hover .kort.mini, .flere a:focus-visible .kort.mini { transform: rotate(-6deg) translateY(-3px); }
.flere span { font-family: var(--display); font-weight: 800; font-size: 1.2rem; }

/* Tekstsider */
.tekstside { padding-block: 2.5rem 4rem; }
.tekstside .ramme { max-width: calc(68ch + 64px); }
.tekstside h1 { font-size: clamp(2.6rem, 9vw, 4rem); margin-bottom: 1rem; }
.tekstside h2 { font-size: 1.6rem; margin: 2rem 0 0.6rem; }
.fejl .fejl-kort { width: 110px; transform: rotate(-8deg); margin: 0.5rem 0 1.8rem 0.5rem; }
.knap {
  display: inline-block; background: var(--blaek); color: var(--kort); text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: 1.15rem; padding: 0.6rem 1.2rem; border-radius: 8px;
}
.knap:hover { background: var(--roed); color: var(--kort); }

/* Sidefod */
.bund { border-top: 4px double var(--blaek); padding-block: 1.4rem 2rem; font-size: 0.95rem; }
.bund-indre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }
.bund p { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.15rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}