/* ==========================================================================
   Spil'bardo — forside
   En solrig København-scene tegnet på canvas, et balloneret logo i SVG og
   et spillekort der linker videre til EgernetAlbert.
   ========================================================================== */

:root {
  --bark-900: #2b1a10;
  --bark-700: #4a3120;
  --cream: #f6e7cd;
  --cream-hi: #fffaf0;
  --amber: #f0a63c;
  --amber-hi: #ffc96b;
  --amber-lo: #b8761d;
  --rust: #b8452f;
  --flag: #c8102e;
  --ink: #3a2418;

  --shadow-lg: 0 26px 50px -18px rgba(0, 0, 0, .7), 0 4px 12px rgba(0, 0, 0, .35);
  --r-lg: 26px;
  --r-md: 18px;

  --ui: "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--ui);
  color: #fff;
  /* Erstatning hvis JS er slået fra — ellers er canvas'en tom */
  background: linear-gradient(180deg, #2e7cc0 0%, #82bde0 45%, #ffe6bb 62%, #2f7396 63%, #1a4c68 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.sprite-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ico { width: 1em; height: 1em; display: block; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Scene og scrim
   -------------------------------------------------------------------------- */
#scene {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(72% 40% at 50% 14%, rgba(6, 20, 34, .46), rgba(6, 20, 34, 0) 72%),
    radial-gradient(130% 85% at 10% 104%, rgba(6, 20, 34, .58), rgba(6, 20, 34, 0) 58%),
    linear-gradient(180deg,
      rgba(6, 20, 34, .50) 0%,
      rgba(6, 20, 34, .06) 22%,
      rgba(6, 20, 34, 0) 40%,
      rgba(6, 20, 34, .40) 76%,
      rgba(6, 20, 34, .62) 100%);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.splash {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 3.4vh, 44px);
  padding: clamp(16px, 3vh, 38px) clamp(16px, 4vw, 56px) clamp(10px, 2vh, 24px);
}

.brand {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}

/* --- kicker med lille Dannebrog ----------------------------------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 clamp(6px, 1.2vh, 14px);
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  background: rgba(12, 30, 46, .38);
  border: 1px solid rgba(255, 240, 210, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  backdrop-filter: blur(3px);
  font-size: clamp(10px, 1.05vw, 13px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff4dc;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.kicker-flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  flex: 0 0 auto;
  background:
    linear-gradient(#fff, #fff) 6.49px 0 / 2.16px 100% no-repeat,
    linear-gradient(#fff, #fff) 0 6.43px / 100% 2.16px no-repeat,
    var(--flag);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .28);
}

/* --- logo: SVG-balloner eller ren tekst uden JavaScript ------------------ */
.wordmark {
  margin: 0;
  font-family: var(--ui);
  font-weight: 900;
  font-size: clamp(44px, 10.5vw, 126px);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--amber-hi);
  text-shadow:
    0 3px 0 var(--rust),
    0 6px 0 #7d3318,
    0 16px 30px rgba(0, 0, 0, .5);
}

.wordmark--ready {
  font-size: 0;
  color: transparent;
  text-shadow: none;
}

.wm-svg {
  display: block;
  width: min(74vw, 760px);
  height: auto;
  margin: clamp(2px, .6vh, 8px) auto clamp(4px, 1vh, 12px);
  overflow: visible;
  filter: drop-shadow(0 10px 16px rgba(6, 20, 34, .45));
  animation: wm-in .75s cubic-bezier(.2, 1.1, .3, 1) both;
}

@keyframes wm-in {
  from { opacity: 0; transform: translateY(-22px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.wm-letter {
  animation: wm-bob 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -.34s);
}

@keyframes wm-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* --- tagline -------------------------------------------------------------- */
.tagline {
  max-width: 58ch;
  margin: 0 auto;
  font-size: clamp(13.5px, 1.45vw, 18.5px);
  line-height: 1.55;
  color: #fdf3e0;
  text-shadow:
    0 1px 2px rgba(6, 20, 34, .9),
    0 2px 8px rgba(6, 20, 34, .85),
    0 0 22px rgba(6, 20, 34, .6);
}

/* --------------------------------------------------------------------------
   Spillekort
   -------------------------------------------------------------------------- */
.games {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 24px);
  justify-content: flex-start;
  align-items: flex-end;
}

.card {
  --tilt: -1.4deg;
  display: grid;
  grid-template-columns: clamp(104px, 13vw, 142px) 1fr;
  gap: clamp(13px, 1.5vw, 20px);
  align-items: center;
  width: 100%;
  max-width: 560px;
  padding: clamp(12px, 1.3vw, 17px);
  border-radius: var(--r-lg);
  border: 3px solid var(--bark-900);
  background: linear-gradient(178deg, var(--cream-hi) 0%, var(--cream) 62%, #edd9b6 100%);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-lg), 0 5px 0 rgba(0, 0, 0, .22);
  transform: rotate(var(--tilt));
  transition:
    transform .26s cubic-bezier(.2, 1.15, .3, 1),
    box-shadow .26s ease;
}

.card:hover,
.card:focus-visible {
  --tilt: 0deg;
  transform: translateY(-8px) scale(1.012);
  box-shadow: 0 34px 60px -18px rgba(0, 0, 0, .72), 0 6px 0 rgba(0, 0, 0, .2);
  outline: none;
}
.card:focus-visible { border-color: var(--amber-lo); box-shadow: 0 0 0 4px rgba(255, 201, 107, .55), var(--shadow-lg); }
.card:active { transform: translateY(-2px) scale(.998); }

.card > * { min-width: 0; }

.card-art {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  border: 2px solid rgba(43, 26, 16, .28);
  overflow: hidden;
  box-shadow: inset 0 -8px 18px rgba(90, 55, 20, .18);
}
.card-art > svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .4s cubic-bezier(.2, 1.1, .3, 1);
}
.card:hover .card-art > svg,
.card:focus-visible .card-art > svg { transform: scale(1.07) rotate(-2deg); }

.card-badge {
  position: absolute;
  right: -9px;
  top: -9px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber));
  border: 3px solid var(--bark-900);
  font-size: 19px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
  transform: rotate(-12deg);
  transition: transform .3s cubic-bezier(.2, 1.4, .3, 1);
}
.card:hover .card-badge { transform: rotate(10deg) scale(1.08); }

.card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}

.card-kicker {
  font-size: clamp(9.5px, .95vw, 11.5px);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a6a45;
}

.card-title {
  font-size: clamp(21px, 2.5vw, 30px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--bark-900);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.card-text {
  font-size: clamp(12.5px, 1.15vw, 14.5px);
  line-height: 1.5;
  color: #5d4632;
}

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 2.5px solid var(--bark-900);
  background: linear-gradient(180deg, var(--amber-hi), var(--amber));
  color: var(--bark-900);
  font-size: clamp(12.5px, 1.15vw, 15px);
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 3px 0 var(--amber-lo);
}
.card-cta .ico { width: 1.15em; height: 1.15em; transition: transform .26s cubic-bezier(.2, 1.2, .3, 1); }
.card:hover .card-cta .ico,
.card:focus-visible .card-cta .ico { transform: translateX(5px); }

/* --- Albert blinker, når man holder musen over kortet -------------------- */
.ab-lid {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transform: scaleY(0);
  animation: ab-blink 6s ease-in-out infinite;
}
@keyframes ab-blink {
  0%, 88%, 100% { transform: scaleY(0); }
  91%, 93%      { transform: scaleY(1); }
}
.card:hover .ab-lid,
.card:focus-visible .ab-lid { animation-duration: 1.6s; }

.ab-leaves { animation: ab-sway 7s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes ab-sway {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-3px, 4px) rotate(-3deg); }
}

/* --------------------------------------------------------------------------
   Sidefod
   -------------------------------------------------------------------------- */
.foot {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  justify-content: space-between;
  align-items: center;
  padding: 10px clamp(16px, 4vw, 56px) 14px;
  font-size: clamp(10px, 1vw, 12.5px);
  color: rgba(255, 244, 224, .8);
  text-shadow: 0 1px 4px rgba(6, 20, 34, .8);
}
.foot-note { font-weight: 700; letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   Små skærme
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .splash { padding-bottom: 6px; }
  .games { justify-content: center; }
  .card { max-width: 100%; --tilt: 0deg; }
  .card:hover { transform: translateY(-4px); }
  .wm-svg { width: min(88vw, 560px); }
  .foot { justify-content: center; text-align: center; }
  .foot-note { display: none; }
}

@media (max-width: 420px) {
  .card { grid-template-columns: 88px 1fr; gap: 12px; }
  .card-badge { width: 32px; height: 32px; font-size: 16px; right: -7px; bottom: -7px; }
  .tagline { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   Reduceret bevægelse
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wm-svg, .wm-letter, .ab-lid, .ab-leaves { animation: none !important; }
  .ab-lid { transform: scaleY(0); }
  .card, .card-art > svg, .card-badge, .card-cta .ico { transition-duration: .01ms !important; }
  .card:hover .card-art > svg { transform: none; }
}