body {
  font-family: 'Montserrat', sans-serif;
}

/* ===========================
   Knapper + regler (fold-ud)
   =========================== */
.rules {
  margin-top: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
.rules.open {
  max-height: 600px;
}

.btn {
  padding: 10px 16px;
  border-radius: 20px;
  background: #2E8B57;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.btn.ghost {
  background: transparent;
  color: #0b2b08;
  border: 2px solid #44D62C;
}

.site-logo {
    width: 260px;
}

.time-panel {
    --accent: #ef4444; /* rød nuance – tilpas efter dit tema */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 10px 0 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    max-width: 520px;
    position:relative;
}

.time-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.time-display {
  font-family: var(--font, 'Montserrat', system-ui, Segoe UI, Roboto, Arial, sans-serif);
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  min-width: 96px;
  text-align: center;
  padding: 6px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
}

.time-controls .btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: transform .06s ease, background .15s ease;
}
.time-controls .btn:hover { filter: brightness(1.05); }
.time-controls .btn:active { transform: scale(0.98); }

.time-controls {
  display: flex; gap: 8px;
}

.time-preset select {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

.time-hints {
  font-size: 12px;
  color: #475569;
  margin-top: 4px;
}

/* Skjult label-tekst til skærmlæsere */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===========================
   3D TERNI NG (wobble)
   =========================== */
.dice3d{
  --size: 120px;
  width: var(--size);
  height: var(--size);
  border-radius: 18px;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f7f7f9 60%, #ececf1 100%);
  border: 1px solid #e5e7eb;
  box-shadow:
    0 1px 2px rgba(0,0,0,.06),
    0 8px 20px rgba(0,0,0,.08),
    inset 0 2px 4px rgba(255,255,255,.9),
    inset 0 -2px 6px rgba(0,0,0,.05);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.dice3d::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.85) 0 20%, transparent 60%);
  mix-blend-mode: screen;
  opacity:.6;
  pointer-events:none;
}
.dice3d .pip{
  width: 18px; height: 18px; border-radius: 50%;
  background: #1f2937;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.6);
}
.dice3d.rolling{ animation: wobble .45s ease; }
@keyframes wobble{
  0%   { transform: rotateX(0) rotateY(0) rotateZ(0) translateY(0); }
  25%  { transform: rotateX(8deg) rotateY(-6deg) rotateZ(6deg) translateY(-3px); }
  50%  { transform: rotateX(-6deg) rotateY(8deg) rotateZ(-4deg) translateY(0); }
  75%  { transform: rotateX(10deg) rotateY(4deg) rotateZ(4deg) translateY(-2px); }
  100% { transform: rotateX(0) rotateY(0) rotateZ(0) translateY(0); }
}

/* Centrering af terning-området */
.dice-center{
  display: grid;
  place-items: center;
  min-height: 50vh;
  padding: 16px;
}
.dice-area{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.dice-controls{
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.dice-result{ margin: 0; }

/* ===========================
   KORT m. FLIP (bagside -> forside)
   =========================== */
:root{ --card-w: 280px; }


.card3d{
  width: 400px;        /* låst bredde som du ønsker */
  aspect-ratio: 7 / 5; /* 400 × 286 – landscape */
  perspective: 1200px;
  position: relative;
}

.card3d .inner{
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s ease;
}
/* Nr. 1: Landscape som gennemgående format (7:5) for selve kortet */
.card3d.landscape {
  aspect-ratio: 7 / 5; /* svarer til 400 × 286 px ved cardWidth=400 */
}

/* NÃ¥r vi vil vise forside, roterer vi indmaden 180deg */
.card3d.flipped .inner{
  transform: rotateY(180deg);
}

/* Fælles side-stil */
.card-face{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(0,0,0,.12),
    0 10px 24px rgba(0,0,0,.08);
}

/* BAGSIDE vender mod brugeren først */
.card-face.back{
  transform: rotateY(0deg);
}

/* FORSIDE vender væk indtil flip */
.card-face.front{
  transform: rotateY(180deg);
  display: grid;
  place-items: center;
}

.card-text{
  position: relative;
  z-index: 5;
  width: 90%;
  max-height: 80%;
  overflow-y: auto;
  border-radius: 12px;
  padding: 12px;
  line-height: 1.35;
}

/* ===========================
   BUNKER – 2 rækker x 3 kolonner
   =========================== */
.card-stacks{
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 kolonner (desktop) */
  gap: 20px;
  margin-top: 30px;
}
/* (valgfri) responsiv til tablet/mobil */
@media (max-width: 900px){
  .card-stacks{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .card-stacks{ grid-template-columns: 1fr; }
}

.stack{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
  text-align:center;
}

.stack .stack-back{
  margin: 10px auto 0;
  width: 120px;
  aspect-ratio: 5/7;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
  box-shadow:
    0 2px 6px rgba(0,0,0,.18),
    0 8px 20px rgba(0,0,0,.12);
	width:80% !important;
}

/* “Vis svar” knap på kortet */
.show-answer-btn{
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: #2E8B57;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.show-answer-btn:hover{ background: #276c47; }
.answer.hidden{ display: none; }
/* ============================
   KORTSTØRRELSE & KANTER
   ============================ */

/* Global standardbredde for alle kort (kan ændres via admin-siden) */
:root{
  --card-w: 300px;     /* passer perfekt til din forside-ramme */
}

/* Selve kortets ydre ramme */
.card3d{
  width: var(--card-w);
  aspect-ratio: 5 / 8
  perspective: 1200px;
  position: relative;
}

/* Indersiden = vendeflade */
.card3d .inner{
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s ease;
}

.card3d.flipped .inner{
  transform: rotateY(180deg);
}

/* ============================
   FORSIDE & BAGSIDE
   ============================ */
.card-face{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.card-face.back{
  /* bagside (billede sættes via JS) */
}

.card-face.front{
  /* forside-ramme (transparent PNG via JS) */
  transform: rotateY(180deg);
  display: grid;
  place-items: center;
}

/* ============================
   TEKST-ZONE (SAFE ZONE)
   ============================ */

.card-text{
  width: 78%;            /* perfekt safe zone inde i din hvide form */
  max-height: 72%;       /* sikrer at lange svar ikke løber ud */
  padding: 16px;         /* giver luft, især i bunden */
  overflow-y: auto;
  border-radius: 14px;
  line-height: 1.35;
  font-family: var(--card-font, system-ui, sans-serif);
  font-size: var(--card-font-size, 17px);
  color: var(--card-font-color, #0f172a);
}

/* ============================
   BUNKER SOM HOLDER KORTET
   ============================ */

.stack .stack-back{
  position: relative;
  margin: 10px auto 0;
  width: var(--card-w);       /* matcher kortet 1:1 */
  aspect-ratio: 5 / 8
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  overflow: visible;          /* så kortets skygge må være udenfor */
}

/* Hvis et kort ligger inde i bunken (vis-kort-i-bunken feature) */
.stack .stack-back .card3d{
  width: 100%;
  height: 100%;
}
/* Landscape-kort: bytter aspect-ratio: 5 / 8 (liggende) */
.card3d.landscape{
}
.top-control-bar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  max-width: 900px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.top-left,
.top-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Begræns bredden så timer + timeglas ikke fylder for meget */
.top-right {
  max-width: 240px;
}

/* TIMER PANEL JUSTERET */
.time-panel {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);

}
/* === FORBEDRET TIMER-LOOK === */

.time-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  width: 180px;           /* smallere og flottere */
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.time-display {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 8px;
}

.time-controls {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}

.time-controls .btn {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
}

.time-preset {
  margin-top: 6px;
}

.time-preset select {
  font-size: 14px;
  padding: 4px 6px;
}
/* === TIMER – luftigere kort, tydelig typografi === */
.time-panel {
  --accent: #44D62C;          /* Din grønne farve */
  --panel-bg: #ffffff;
  --panel-border: #e5e7eb;
  --shadow: 0 6px 18px rgba(0,0,0,.08);
  --radius: 16px;

  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 18px 16px;
  width: 200px;               /* lidt bredere for mere luft */
  text-align: center;
  box-shadow: var(--shadow);
}

/* Stor, rolig tidsvisning med lidt tracking */
.time-display {
  font-family: var(--font, 'Montserrat', system-ui, Segoe UI, Roboto, Arial, sans-serif);
  font-size: 38px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: .5px;
  min-width: 110px;
  margin: 6px auto 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}

/* Knapper – gør Start/Pause grøn (#44D62C) og mere “soft” */
.time-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

#btnStartPause.btn {
  background: #44D62C;          /* DIN farve */
  color: #0b2b08;               /* mørk tekst for kontrast */
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
  transition: transform .06s ease, filter .18s ease, box-shadow .18s ease;
}
#btnStartPause.btn:hover { filter: brightness(1.04); }
#btnStartPause.btn:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(0,0,0,0); }

/* Reset-knap – neutral sekundær */
#btnReset.btn {
  background: #e5e7eb;
  color: #111827;
  border: none;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  transition: filter .18s ease;
}
#btnReset.btn:hover { filter: brightness(1.03); }

/* Vælgere lidt smallere og pænere */
.time-preset {
  margin-top: 8px;
}
.time-preset select {
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

/* Hint-tekst lys og afdæmpet */
.time-hints {
  font-size: 12px;
  color: #64748b;
  margin-top: 8px;
}

/* ========== MINI-TERNING + LABEL INDE I BUNKER ========== */
.stack .stack-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;              /* luft mellem terning og label */
  margin-bottom: 10px;   /* luft ned til kortbunken */
}

.stack .mini-dice {
  --size: 36px;
  width: var(--size);
  height: var(--size);
  border-radius: 8px;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f7f7f9 60%, #ececf1 100%);
  border: 1px solid #d1d5db;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.stack .mini-dice .mini-pip {
  width: 7px;
  height: 7px;
  background: #1f2937;
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.25);
}

.stack .mini-label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
}
/* Slå-knappen (roll3d) med ny grøn farve */
#roll3d.btn {
  background: #44D62C;
  color: #0b2b08;               /* mørk tekst for god kontrast */
  border: none;
  font-weight: 700;
  border-radius: 20px;
  padding: 10px 16px;
  transition: filter .15s ease, transform .06s ease;
}

#roll3d.btn:hover {
  filter: brightness(1.05);
}

#roll3d.btn:active {
  transform: scale(0.97);
}
/* ===== STOR, FLOT, CENTRERET TITEL ===== */
h1 {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  font-size: 48px;          /* stor og elegant */
  font-weight: 700;         /* flot, tyk Montserrat */
  letter-spacing: 1px;      /* lidt luft mellem bogstaver */
  margin-top: 20px;
  margin-bottom: 10px;
  color: #0f172a;           /* mørk, flot blå-sort */
}

/* Diskret undertekst-streg (valgfri – ser lækkert ud) */
h1::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #44D62C;      /* den samme grøn som dine knapper */
  margin: 10px auto 0;
  border-radius: 2px;
}
.stack .btn {
  margin: 16px 0;
}

/* Giv luft i toppen, så h1/indhold ikke gemmer sig under logoet */
body { padding-top: 90px; }

/* Mobil: du har i forvejen et mindre logo – vi matcher top-padding */
@media (max-width: 600px) {
  .site-logo { max-height: 44px; top: 10px; right: 10px; }
  body { padding-top: 64px; }
}

/* Lidt luft på små skærme */
@media (max-width: 600px) {
  .site-logo { max-height: 44px; top: 10px; right: 10px; }
}

/* Grønne "Træk kort"-knapper */
.stack .btn {
  background: #44D62C !important;
  color: #0b2b08; /* mørk tekst for kontrast */
  border: none;
  font-weight: 700;
}
.stack .btn:hover {
  filter: brightness(1.05);
}
.stack .btn:active {
  transform: scale(0.97);
}
/* Grønne "Vis svar"-knapper */
.show-answer-btn {
  background: #44D62C !important;
  color: #0b2b08; /* kontrast */
  font-weight: 700;
  border: none;
}
.show-answer-btn:hover {
  filter: brightness(1.05);
}
.show-answer-btn:active {
  transform: scale(0.97);
}
/* ===== GLAS-EFFEKT PÅ BUNKER ===== */
.stack {
  background: rgba(255,255,255,0.15) !important; 
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* Safari */
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
#dice3d {
  margin-bottom: 16px;  /* gør afstanden større – justér tallet efter smag */
}
/* === BAGGRUND === */
body.has-bg {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    background-attachment: fixed;
    background-image: none !important; /* sikrer at JS kan sætte baggrund uden at blive overskrevet */
}





#stackBack1 {
    background-image: url("./resources/bunke 1 bagside.png") !important;
    background-size:contain !important;
}
#stackBack1 .front {
    background-image: url("./resources/bunke 1 forside.png") !important;
    background-size: contain !important;
}
#stackBack1 .back {
    background-image: url("./resources/bunke 1 bagside.png") !important;
    background-size: contain !important;
}



#stackBack2 {
    background-image: url("./resources/bunke 2 bagside.png") !important;
    background-size: contain !important;
}
#stackBack2 .front {
    background-image: url("./resources/bunke 2 forside.png") !important;
    background-size: contain !important;
}
#stackBack2 .back {
    background-image: url("./resources/bunke 2 bagside.png") !important;
    background-size: contain !important;
}



#stackBack3 {
    background-image: url("./resources/bunke 3 bagside.png") !important;
    background-size: contain !important;
}
#stackBack3 .front {
    background-image: url("./resources/bunke 3 forside.png") !important;
    background-size: contain !important;
}
#stackBack3 .back {
    background-image: url("./resources/bunke 3 bagside.png") !important;
    background-size: contain !important;
}


#stackBack4 {
    background-image: url("./resources/bunke 4 bagside.png") !important;
    background-size: contain !important;
}
#stackBack4 .front {
    background-image: url("./resources/bunke 4 forside.png") !important;
    background-size: contain !important;
}
#stackBack4 .back {
    background-image: url("./resources/bunke 4 bagside.png") !important;
    background-size: contain !important;
}


#stackBack5 {
    background-image: url("./resources/bunke 5 bagside.png") !important;
    background-size: contain !important;
}
#stackBack5 .front {
    background-image: url("./resources/bunke 5 forside.png") !important;
    background-size: contain !important;
}
#stackBack5 .back {
    background-image: url("./resources/bunke 5 bagside.png") !important;
    background-size: contain !important;
}

#stackBack6 {
    background-image: url("./resources/bunke 6 bagside.png") !important;
    background-size: contain !important;
}

#stackBack6 .front {
    background-image: url("./resources/bunke 6 forside.png") !important;
    background-size: contain !important;
}

#stackBack6 .back {
    background-image: url("./resources/bunke 6 bagside.png") !important;
    background-size: contain !important;
}