/* --- Geheim: Pepernotenpret (5x op het logo) --------------------------------
   Welkomstvenster in de nachtstijl van de site; daarna het spel (telefoonvorm) in een iframe. */

/* Het logo wiebelt bij snel klikken: er gebeurt iets... */
.so-nav__brand.is-wiebel .so-nav__logo { animation: soPnWiebel 0.45s ease; }
@keyframes soPnWiebel {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg) scale(1.08); }
  60% { transform: rotate(9deg) scale(1.08); }
}

html.so-pn-open { overflow: hidden; }
/* Zolang het spel open is, staan de animaties van de pagina erachter stil: alle rekenkracht
   voor het spel. Op de telefoon (spel over het hele scherm) wordt de pagina niet eens getekend. */
html.so-pn-open body > :not(.so-pn),
html.so-pn-open body > :not(.so-pn) *,
html.so-pn-open body > :not(.so-pn) *::before,
html.so-pn-open body > :not(.so-pn) *::after { animation-play-state: paused !important; }
@media (max-width: 600px) {
  html.so-pn-playing body > :not(.so-pn) { visibility: hidden; }
}

.so-pn {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--paper);
  overflow: visible;
}
.so-pn::backdrop { background: rgba(11, 21, 49, 0.82); }

/* Welkom */
.so-pn__intro {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 36px clamp(22px, 6vw, 36px) 30px;
  text-align: center;
  background: linear-gradient(165deg, var(--navy-700), var(--navy-900) 72%);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  animation: soPnIn 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes soPnIn {
  from { transform: scale(0.85) translateY(20px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.so-pn__intro > *:not(.so-stars):not(.so-pn__close) { position: relative; z-index: 1; }
.so-pn__icon { display: inline-block; animation: soPnSpeur 2.4s ease-in-out infinite; }
@keyframes soPnSpeur {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
.so-pn__eyebrow {
  margin: 10px 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.so-pn__title {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 2.6rem);
  line-height: 1.05;
  color: var(--paper);
}
.so-pn__text { margin: 14px 0 0; color: var(--paper-soft); line-height: 1.55; }
.so-pn__welcome { margin: 14px 0 0; font-weight: 600; color: var(--gold-300); }
.so-pn__tip { margin: 12px 0 0; font-size: 0.9rem; color: var(--paper-faint); }

.so-pn__board {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(236, 202, 123, 0.28);
}
.so-pn__board-title {
  margin: 0 0 8px;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.so-pn__top { list-style: none; margin: 0; padding: 0; counter-reset: so-pn; text-align: left; }
.so-pn__top li {
  counter-increment: so-pn;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 2px;
  color: var(--paper-soft);
  font-variant-numeric: tabular-nums;
}
.so-pn__top li::before { content: counter(so-pn) "."; min-width: 22px; color: var(--gold-300); }
.so-pn__top li span { flex: 1; }
.so-pn__top li strong { color: var(--paper); }
.so-pn__top li.is-me span,
.so-pn__top li.is-me strong { color: var(--gold-300); }

.so-pn__start { margin-top: 24px; font-size: 1.1rem; padding: 16px 34px; }

.so-pn__close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 44px; height: 44px; } /* verder .so-close */

/* Spel: telefoonvorm; de sluitknop zit in de balk van het spel zelf */
.so-pn.is-playing {
  width: min(460px, 100vw);
  height: min(900px, 100dvh - 24px);
  max-height: none;
}
.so-pn__game {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: var(--navy-900);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.so-pn__game[hidden] { display: none; }
.so-pn__frame { flex: 1; width: 100%; border: 0; background: #fff5dc; }

@media (max-width: 600px) {
  /* Op de telefoon vult het spel het hele scherm */
  .so-pn.is-playing { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; border-radius: 0; }
  /* Geen eigen rand voor de inkeping of het thuisstreepje: het spel krijgt die ruimte (safe area) ook
     door in het iframe en houdt hem zelf vrij. Hier nog eens vrijhouden gaf dubbele ruimte onderin. */
  .so-pn.is-playing .so-pn__game { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .so-nav__brand.is-wiebel .so-nav__logo,
  .so-pn__intro,
  .so-pn__icon { animation: none; }
}