@charset "UTF-8";
/* ─────────────────────────────────────────────
   SPILLEKASSEN — store billeder, ét tryk, ingen menuer.
   Bygget til en 3-årig: intet at læse, intet at gå galt i.
   ───────────────────────────────────────────── */

:root {
  --bg:    #171136;
  --ink:   #140e2e;
  --cream: #fff7ea;
  --sun:   #ffd23f;
  --coral: #ff7a72;
  --sky:   #4cc9f0;
  --font: "Trebuchet MS", "Segoe UI", system-ui, Avenir, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color: var(--cream);
  font-family: var(--font);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior: none;
  /* små fingre: ingen zoom, ingen markering, intet gråt blink */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* nattehimlen bagved */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 620px at 12% -10%, #4a2f9e 0%, transparent 62%),
    radial-gradient(760px 520px at 90% 4%,  #8b3a86 0%, transparent 58%),
    radial-gradient(700px 700px at 50% 108%, #1c3d78 0%, transparent 60%),
    linear-gradient(180deg, #1d1548 0%, #140e33 70%);
}
/* stjernedrys */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(rgba(255,255,255,.5) 1.4px, transparent 1.6px),
    radial-gradient(rgba(255,210,63,.45) 1.6px, transparent 1.8px);
  background-size: 46px 46px, 113px 113px;
  background-position: 0 0, 24px 60px;
}

body.is-playing { overflow: hidden; }
img { -webkit-user-drag: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }

/* ─────────────────────────────────────────────
   TOPPEN — bare navnet, lille og ude af vejen
   ───────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: calc(18px + env(safe-area-inset-top)) 20px 4px;
}
.top-mark {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1;
  display: grid;
  place-items: center;
  width: clamp(44px, 5vw, 56px);
  aspect-ratio: 1;
  border-radius: 16px;
  background: var(--sun);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  transform: rotate(-6deg);
}
.top-name {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 3px 0 rgba(0,0,0,.3);
}

/* ─────────────────────────────────────────────
   HYLDEN — store fliser, to på en iPad
   ───────────────────────────────────────────── */
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(20px, 3vw, 40px);
  justify-content: center;
  align-content: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(18px, 3vh, 34px) clamp(18px, 4vw, 48px) calc(40px + env(safe-area-inset-bottom));
}
/* fliserne krymper, efterhånden som hylden fyldes, så alt bliver på skærmen */
.tile { max-width: 560px; width: 100%; justify-self: center; }
.shelf[data-count="2"] .tile { max-width: 500px; }
.shelf[data-count="3"] .tile,
.shelf[data-count="4"] .tile { max-width: 400px; }
.shelf[data-count="many"] .tile { max-width: 340px; }

.tile {
  background: none;
  border: 0;
  padding: 0;
  display: block;
  animation: float 5s ease-in-out infinite;
}
.tile:nth-child(even) { animation-delay: -2.5s; }
@keyframes float { 50% { transform: translateY(-8px); } }

.tile-pic {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: clamp(24px, 3vw, 34px);
  overflow: hidden;
  border: 6px solid var(--cream);
  background: linear-gradient(140deg, var(--a, #4a3a86), var(--b, #1c1440));
  box-shadow: 0 12px 0 rgba(0,0,0,.4), 0 22px 34px rgba(0,0,0,.45);
  transform: rotate(var(--tilt, -1.2deg));
  transition: transform .18s cubic-bezier(.2,.9,.3,1.5), box-shadow .18s;
  isolation: isolate;
}
.tile:nth-child(even) .tile-pic { --tilt: 1.4deg; }
.tile:nth-child(3n)   .tile-pic { --tilt: -0.5deg; }

.tile:active .tile-pic {
  transform: rotate(0deg) scale(.96);
  box-shadow: 0 4px 0 rgba(0,0,0,.45), 0 8px 16px rgba(0,0,0,.4);
}
@media (hover: hover) {
  .tile:hover .tile-pic { transform: rotate(0deg) translateY(-6px) scale(1.02); }
  .tile:hover .tile-go  { transform: scale(1.08) rotate(-6deg); }
}
.tile:focus-visible .tile-pic { outline: 5px solid var(--sun); outline-offset: 6px; }

.tile-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1) brightness(.86);
}
.tile-cast {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 4%;
  padding: 0 8% 6%;
}
.tile-cast img { height: 70%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.tile-cast img:nth-child(2) { height: 84%; }
.tile-cast img:nth-child(3) { height: 30%; }
.tile-emoji {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: clamp(90px, 16vw, 170px);
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.45));
}

/* den store, tydelige "tryk her"-knap midt på billedet */
.tile-go {
  position: absolute;
  left: 50%; bottom: 14px;
  translate: -50% 0;
  width: clamp(74px, 11vw, 98px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun);
  border: 5px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  display: grid; place-items: center;
  transition: transform .18s cubic-bezier(.2,.9,.3,1.6);
  animation: pulse 2.6s ease-in-out infinite;
}
.tile-go svg { width: 44%; height: 44%; fill: var(--ink); margin-left: 8%; }
@keyframes pulse { 50% { box-shadow: 0 6px 0 var(--ink), 0 0 0 14px rgba(255,210,63,.16); } }

/* stjerner man optjener bare ved at spille */
.tile-stars {
  position: absolute;
  top: 12px; right: 14px;
  display: flex;
  gap: 2px;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.5));
}
.tile-stars span { animation: pop .45s cubic-bezier(.2,.9,.3,1.7) backwards; }
.tile-stars span:nth-child(2) { animation-delay: .1s; }
.tile-stars span:nth-child(3) { animation-delay: .2s; }
@keyframes pop { from { opacity: 0; transform: scale(0) rotate(-40deg); } }

.tile-name {
  margin: 16px 4px 0;
  text-align: center;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800;
  text-shadow: 0 3px 0 rgba(0,0,0,.3);
}

.empty {
  max-width: 40ch;
  margin: 12vh auto;
  text-align: center;
  color: #b9aee0;
  font-size: 16px;
  line-height: 1.6;
  padding: 0 20px;
}
.empty code { background: rgba(255,247,234,.12); padding: 2px 7px; border-radius: 6px; }

/* ─────────────────────────────────────────────
   SPILLET
   ───────────────────────────────────────────── */
.player {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  animation: fade .25s ease;
}
.player[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.player-frame { width: 100%; height: 100%; border: 0; display: block; }

/* huset: eneste knap i spillet — stort nok til at ramme, roligt nok til at overse */
.player-home {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 2;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 3px solid rgba(255,247,234,.55);
  background: rgba(20,14,46,.5);
  font-size: 26px;
  line-height: 1;
  opacity: .5;
  backdrop-filter: blur(4px);
  transition: opacity .2s, transform .12s, background-color .2s;
}
.player-home:hover, .player-home:active { opacity: 1; background: rgba(20,14,46,.9); }
.player-home:active { transform: scale(.92); }

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