/* ==========================================================================
   Angry Marius Games — landing page
   Koncept: solrig 16-bit arkadehal. PigDerbys pixelmark er rammen, og spillenes
   grafik sidder i "tændte skærme" — så PrisonBaLLs mørke kunst bliver en bevidst
   kontrast frem for et brud. Ingen frameworks, intet build-step.
   ========================================================================== */

:root {
  --paper:    #FFF6E4;
  --paper-2:  #F7E9CD;
  --sky:      #6FC3E8;
  --sky-2:    #A9DDF2;
  --sky-deep: #2E7FA8;
  --grass:    #5FA845;
  --grass-d:  #3F7C30;
  --dirt:     #B98B54;
  --dirt-d:   #8A6238;
  --sun:      #F0A92E;   /* AMG-guldet — brandtråd fra kontoret */
  --ink:      #22303C;
  --ink-2:    #3D556B;
  --pig:      #E4657F;
  --prison:   #FF6B35;

  --px: 4px;               /* grundenhed for de chunky pixelkanter */
  --grass-h: clamp(74px, 11vw, 112px);  /* delt af graes og hegn, saa de aldrig overlapper */
  --font-display: "Bungee", "Impact", sans-serif;
  --font-body: "Fredoka", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fin pixelrasterering over hele siden — giver papiret tekstur */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9; pointer-events: none;
  background-image:
    linear-gradient(rgba(34,48,60,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,48,60,.035) 1px, transparent 1px);
  background-size: 4px 4px;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: var(--px) solid var(--ink);
  outline-offset: 3px;
}

/* ==========================================================================
   Himmel + hero
   ========================================================================== */

.sky {
  position: relative;
  min-height: min(100svh, 860px);
  padding: clamp(2rem, 6vw, 4rem) 1.25rem calc(clamp(90px, 14vw, 140px) + 2rem);
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, var(--sky-deep) 0%, var(--sky) 38%, var(--sky-2) 100%);
  overflow: hidden;
  isolation: isolate;
}

/* --- Sol: varm skive med bloed glød (ingen hård ramme — den lignede et vindue) --- */
.sun {
  position: absolute;
  top: clamp(28px, 6vw, 70px); right: clamp(24px, 8vw, 120px);
  width: clamp(64px, 9vw, 92px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #FFF3C4 0%, #FFE07A 55%, #FFC93C 100%);
  box-shadow:
    0 0 34px 12px rgba(255, 224, 122, .55),
    0 0 90px 40px rgba(255, 210, 90, .22);
  animation: sun-pulse 6s ease-in-out infinite;
  z-index: 0;
}
@keyframes sun-pulse {
  50% { box-shadow:
    0 0 44px 16px rgba(255, 224, 122, .62),
    0 0 120px 54px rgba(255, 210, 90, .26); }
}

/* --- Pixelskyer bygget af box-shadow-klodser --- */
.clouds { position: absolute; inset: 0; z-index: 0; }
.cloud {
  position: absolute;
  width: 22px; height: 22px;
  background: #fff;
  box-shadow:
    22px 0 0 #fff, 44px 0 0 #fff, 66px 0 0 #fff, 88px 0 0 #fff,
    22px -22px 0 #fff, 44px -22px 0 #fff, 66px -22px 0 #fff,
    44px -44px 0 #fff;
  opacity: .9;
  animation: drift linear infinite;
}
.c1 { top: 16%; left: -140px; transform: scale(1);    animation-duration: 62s; }
.c2 { top: 30%; left: -140px; transform: scale(.65);  animation-duration: 46s; animation-delay: -18s; opacity: .7; }
.c3 { top:  9%; left: -140px; transform: scale(1.35); animation-duration: 84s; animation-delay: -40s; opacity: .75; }
.c4 { top: 44%; left: -140px; transform: scale(.5);   animation-duration: 38s; animation-delay: -9s;  opacity: .55; }
@keyframes drift { to { margin-left: calc(100vw + 300px); } }

/* --- Hero-indhold --- */
.hero {
  position: relative; z-index: 2;
  text-align: center;
  display: grid; justify-items: center;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  max-width: 780px;
}

/* Logoet som arkademønt — sidens ét-ting-man-husker */
.coin {
  width: clamp(132px, 26vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ink-2), var(--ink) 70%);
  display: grid; place-items: center;
  box-shadow:
    0 0 0 var(--px) var(--sun),
    0 0 0 calc(var(--px) * 2) var(--ink),
    0 12px 0 rgba(34, 48, 60, .3);
  animation: coin-in .7s cubic-bezier(.2,.9,.25,1.2) both, bob 4.5s ease-in-out 1s infinite;
}
.coin img { width: 78%; }
@keyframes coin-in { from { opacity: 0; transform: translateY(-26px) scale(.7) rotate(-12deg); } }
@keyframes bob { 50% { transform: translateY(-9px); } }

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 8.5vw, 4.6rem);
  line-height: .95;
  color: var(--paper);
  letter-spacing: .01em;
  text-transform: uppercase;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 .35em;
  /* Hård pixelskygge i stedet for blød blur */
  text-shadow:
    var(--px) var(--px) 0 var(--ink),
    calc(var(--px) * 2) calc(var(--px) * 2) 0 rgba(34,48,60,.35);
}
.wordmark span { animation: word-in .55s cubic-bezier(.2,.9,.25,1.15) both; }
.wordmark span:nth-child(1) { animation-delay: .15s; }
.wordmark span:nth-child(2) { animation-delay: .27s; color: var(--sun); }
.wordmark span:nth-child(3) { animation-delay: .39s; }
@keyframes word-in { from { opacity: 0; transform: translateY(22px) rotate(-2deg); } }

.tagline {
  color: var(--ink);
  background: rgba(255, 246, 228, .82);
  padding: .55rem 1rem;
  font-size: clamp(.95rem, 2.4vw, 1.1rem);
  font-weight: 500;
  box-shadow: 0 0 0 var(--px) var(--ink);
  animation: fade-up .6s ease-out .55s both;
}

.scroll-cue {
  margin-top: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  display: grid; justify-items: center; gap: .35rem;
  text-shadow: 2px 2px 0 var(--ink);
  animation: fade-up .6s ease-out .75s both;
}
.scroll-cue .arrow { font-size: 1.1rem; animation: nudge 1.8s ease-in-out infinite; }
.scroll-cue:hover .arrow { color: var(--sun); }
@keyframes nudge { 50% { transform: translateY(6px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }

/* --- Hegn + græs: PigDerbys bane som sidens fundament ---
   Hegnet sidder FRIT over græstotterne (12px luft), ellers mudrer de to
   pixelmønstre sammen til en grumset stribe. */
.fence {
  position: absolute; z-index: 1;
  left: 0; right: 0;
  bottom: calc(var(--grass-h) + 14px);
  height: 42px;
  /* lodrette stolper — rækværket ligger som pseudo-elementer ovenpå */
  background-image: repeating-linear-gradient(90deg, var(--dirt-d) 0 9px, transparent 9px 104px);
}
.fence::before, .fence::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 9px;
  background: var(--dirt);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.fence::before { top: 7px; }
.fence::after  { top: 26px; }

.grass {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  height: var(--grass-h);
  background: var(--grass);
  box-shadow: inset 0 calc(var(--px) * -1) 0 var(--grass-d);
}
/* Én række chunky pixeltotter langs græssets overkant */
.grass::before {
  content: "";
  position: absolute; top: -12px; left: 0; right: 0; height: 12px;
  background-image: repeating-linear-gradient(90deg, var(--grass) 0 12px, transparent 12px 24px);
}

/* ==========================================================================
   Spil-sektionen
   ========================================================================== */

.field {
  position: relative;
  padding: clamp(2.5rem, 7vw, 5rem) 1.25rem clamp(3rem, 8vw, 5.5rem);
  background: var(--paper);
}

.section-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  text-transform: uppercase;
  margin-bottom: clamp(2rem, 5vw, 3.2rem);
}
.section-title span {
  display: inline-block;
  background: var(--sun);
  color: var(--ink);
  padding: .45rem 1.2rem;
  transform: rotate(-1.5deg);
  box-shadow:
    0 0 0 var(--px) var(--ink),
    0 8px 0 rgba(34, 48, 60, .22);
}

.cabinets {
  max-width: 1120px; margin: 0 auto;
  display: grid;
  /* min() forhindrer at sporet bliver bredere end skaermen paa smalle telefoner
     (320px-enheder ville ellers faa vandret overloeb) */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(2rem, 5vw, 3.2rem);
  align-items: start;
}

/* --- Arkadekabinettet --- */
.cab {
  background: var(--paper-2);
  box-shadow:
    0 0 0 var(--px) var(--ink),
    0 10px 0 rgba(34, 48, 60, .25);
  transition: transform .2s cubic-bezier(.2,.9,.25,1.1), box-shadow .2s;
}
.cab--pig    { transform: rotate(-1.1deg); }
.cab--prison { transform: rotate(1.1deg); }
/* Brudt grid: højre kabinet hænger lavere på brede skærme */
@media (min-width: 760px) {
  .cab--prison { margin-top: 3.2rem; }
}
.cab:hover, .cab:focus-within {
  transform: rotate(0deg) translateY(-8px);
  box-shadow:
    0 0 0 var(--px) var(--ink),
    0 18px 0 rgba(34, 48, 60, .28);
}

/* Skærmen: mørk ramme + let CRT-følelse */
.cab__screen {
  position: relative;
  margin: var(--px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  box-shadow: inset 0 0 0 var(--px) rgba(0, 0, 0, .45);
}
.cab__screen img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s cubic-bezier(.2,.9,.25,1);
}
/* PigDerbys pixelkunst må ikke udglattes når den skaleres op */
.cab--pig .cab__screen img { image-rendering: pixelated; }
.cab:hover .cab__screen img { transform: scale(1.045); }

/* Scanlinjer + glans — "skærmen er tændt" */
.cab__glare {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%),
    repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 2px, transparent 2px 4px);
  mix-blend-mode: screen;
  opacity: .55;
}

.cab__body {
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 1.6rem) clamp(1.4rem, 3.5vw, 1.8rem);
  display: grid; gap: .85rem; justify-items: start;
}
.cab__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.6vw, 1.75rem);
  line-height: 1.1;
  text-transform: uppercase;
}
.cab--pig    .cab__title { color: var(--sky-deep); }
.cab--prison .cab__title { color: var(--prison); }

.cab__blurb { font-size: .97rem; color: var(--ink-2); }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.tags li {
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  padding: .22rem .6rem;
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--ink);
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Mud & Whiskers — kabinet under opbygning

   Kortet skal laese som "endnu ikke": ingen knap, intet link, og et baand hen
   over skaermen. Det er dæmpet og staar lige (ingen skaev vinkel), saa det
   visuelt traeder et skridt tilbage fra de to spilbare — uden at forsvinde.
   -------------------------------------------------------------------------- */
.cab--mud { transform: rotate(-.5deg); }
.cab--mud .cab__title { color: #6B4A1F; }

/* Ingen loefte om interaktion: kortet maa ikke hoppe eller loefte sig paa hover
   som de spilbare goer, for der er ikke noget at klikke paa. */
.cab--soon,
.cab--soon:hover,
.cab--soon:focus-within {
  transform: rotate(-.5deg);
  box-shadow:
    0 0 0 var(--px) var(--ink),
    0 10px 0 rgba(34, 48, 60, .25);
}
/* Daempet, men ikke slukket: kunsten skal stadig kunne saelge spillet. */
.cab--soon .cab__screen img {
  filter: grayscale(.2) brightness(.86);
  transition: none;
}
.cab--soon:hover .cab__screen img { transform: none; }

/* Baandet: et baelte tvaers over billedet, ikke et hjoernebaand.
   Foerste forsoeg var en 45-graders sløjfe i hjoernet, men kortene er smalle
   (grid-sporet gaar ned til 320px) og baandet blev klippet midt i ordet paa
   hver eneste bredde jeg proevede. Et vandret baelte i fuld bredde kan ikke
   klippe teksten, uanset hvor smalt kortet bliver — og "en banner hen over"
   er ogsaa praecis det der blev bedt om. */
.cab__ribbon {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(.78rem, 2.4vw, .95rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #F7E9CD;
  background: rgba(43, 33, 24, .88);
  border-top: 3px solid #6B4A1F;
  border-bottom: 3px solid #6B4A1F;
  padding: .5rem 0;
  text-shadow: 0 2px 4px rgba(0,0,0,.9);
  pointer-events: none;
}

.cab__soon {
  margin-top: .3rem;
  font-family: var(--font-display);
  font-size: clamp(.72rem, 2vw, .82rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-2);
  opacity: .75;
}

/* Arkadeknap: hård skygge der "trykkes ned" */
.btn {
  margin-top: .3rem;
  font-family: var(--font-display);
  font-size: clamp(.82rem, 2.2vw, .95rem);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  padding: .8rem 1.5rem;
  background: var(--ink);
  box-shadow: 0 0 0 var(--px) var(--ink), 0 6px 0 rgba(34, 48, 60, .45);
  transition: transform .1s, box-shadow .1s, background .15s;
}
.btn--pig    { background: var(--sky-deep); }
.btn--prison { background: var(--prison); color: #2A1206; }
.btn:hover   { filter: brightness(1.08); }
.btn:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 var(--px) var(--ink), 0 0 0 rgba(34, 48, 60, .45);
}

/* --- 404-siden: samme himmel, men uden hegn og graes. Den nederste polstring
   i .sky findes kun for at goere plads til dem, saa uden dem ville siden staa
   med et tomt baelte forneden. --- */
.sky--lost { padding-bottom: clamp(2rem, 6vw, 4rem); }
.sky--lost .btn { margin-top: .6rem; text-decoration: none; }

/* ==========================================================================
   Say hello — postkortet
   Samme sprog som kabinetterne: hård pixelkant, skæv vinkel, trykbar knap.
   Lidt mørkere papir end marken, saa sektionen laeser som "et andet rum".
   ========================================================================== */

.field--hello { background: var(--paper-2); }

.postcard {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(1.3rem, 4vw, 2rem);
  background: var(--paper);
  transform: rotate(-.6deg);
  box-shadow:
    0 0 0 var(--px) var(--ink),
    0 10px 0 rgba(34, 48, 60, .25);
}

.postcard__intro {
  font-size: .97rem;
  color: var(--ink-2);
  margin-bottom: 1.3rem;
}

.fb { display: grid; gap: .45rem; }

.fb__label {
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: .6rem;
}
.fb__hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-2);
  opacity: .8;
}

.fb__text,
.fb__input {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 0;
  padding: .7rem .8rem;
  box-shadow: 0 0 0 2px var(--ink);
}
.fb__text { resize: vertical; min-height: 7.5rem; line-height: 1.5; }
.fb__text:focus,
.fb__input:focus {
  outline: none;
  background: var(--paper);
  box-shadow: 0 0 0 var(--px) var(--sky-deep);
}
.fb__text::placeholder,
.fb__input::placeholder { color: var(--ink-2); opacity: .5; }

/* Honningkrukken skal vaere usynlig for mennesker, men ikke display:none —
   det springer nogle bots bevidst over. */
.fb__pot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.fb__turnstile:not(:empty) { margin-top: .9rem; }

.btn--send {
  justify-self: start;
  margin-top: 1rem;
  background: var(--grass-d);
  color: var(--paper);
  border: 0;
  font-family: var(--font-display);
  cursor: pointer;
}
.btn--send:disabled { opacity: .6; cursor: progress; }

.fb__status:empty { display: none; }
.fb__status {
  margin-top: .8rem;
  font-size: .92rem;
  font-weight: 600;
  padding: .55rem .75rem;
  box-shadow: 0 0 0 2px var(--ink);
}
.fb__status.is-ok   { background: #DFF3D2; color: var(--grass-d); }
.fb__status.is-warn { background: #FDEFCB; color: #8A5B12; }
.fb__status.is-err  { background: #FBDDD9; color: #9A3229; }

.fb__fine {
  margin-top: 1rem;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--ink-2);
  opacity: .85;
}
.fb__fine a { color: var(--sky-deep); font-weight: 600; }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(2.2rem, 6vw, 3.2rem) 1.25rem;
  text-align: center;
  border-top: var(--px) solid var(--sun);
}
.foot__inner { display: grid; gap: .5rem; }
.foot__mark {
  font-family: var(--font-display);
  font-size: clamp(1rem, 3vw, 1.35rem);
  text-transform: uppercase;
  color: var(--sun);
}
.foot__line { font-size: .92rem; }
.foot__line a { color: var(--sky-2); text-underline-offset: 3px; }
.foot__line a:hover { color: var(--sun); }
.foot__fine { font-size: .78rem; opacity: .6; margin-top: .4rem; }

/* ==========================================================================
   Tilgængelighed
   ========================================================================== */

/* Paa smalle skaerme braekker teksten alligevel — det haarde linjeskift ville
   kun give en kort forladt linje */
@media (max-width: 599px) {
  .tagline br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}