/* ==========================================================================
   style.css — Retro pixel-uiterlijk, mobiel eerst.
   ========================================================================== */

:root {
  --ink: #0d1117;
  --ink-soft: #161b26;
  --panel: #1c2333;
  --edge: #3d4763;
  --text: #e8ecf7;
  --muted: #8b95b0;
  --accent: #ffcb3d;
  --accent-2: #4ade80;
  --danger: #ff5c72;

  --font: "Press Start 2P", "Courier New", monospace;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/*
  Verderop krijgen knoppen en panelen een eigen `display`, en die wint het
  normaal van het `hidden`-attribuut. Deze regel zet dat recht, zodat
  `element.hidden = true` overal gewoon werkt.
*/
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  /* Voorkomt dat de pagina meebeweegt bij het bedienen van de D-pad. */
  overscroll-behavior: none;
  touch-action: none;
}

button,
input {
  font-family: var(--font);
}

/* --------------------------------------------------------------------------
   Overlays en panelen
   -------------------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 8, 14, 0.92);
  backdrop-filter: blur(3px);
}

.overlay[hidden] {
  display: none;
}

.panel {
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px;
  background: var(--panel);
  border: 4px solid var(--edge);
  /* Harde pixelrand in plaats van een zachte schaduw. */
  box-shadow:
    0 0 0 4px var(--ink),
    0 0 0 8px var(--edge);
  image-rendering: pixelated;
}

/* --------------------------------------------------------------------------
   Inlogscherm
   --------------------------------------------------------------------------
   Een titelscherm, geen formulier: nachtlucht met sterren, een schaap dat
   op en neer wipt, en daaronder pas het invoerveld.
*/

.login-overlay {
  /* `position` bewust niet overschrijven: .overlay staat op `fixed` en dat
     vult het scherm. Dat is meteen ook het anker voor de sterren. */
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, #1b2440 0%, #0d1117 70%);
}

/* Sterren: twee lagen puntjes die heel traag langs elkaar schuiven. */
.stars {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.9) 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 15%, rgba(255, 255, 255, 0.7) 50%, transparent 50%),
    radial-gradient(1px 1px at 45% 65%, rgba(255, 203, 61, 0.8) 50%, transparent 50%),
    radial-gradient(1px 1px at 85% 80%, rgba(255, 255, 255, 0.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 12% 85%, rgba(255, 255, 255, 0.5) 50%, transparent 50%);
  background-size: 220px 220px, 300px 300px, 260px 260px, 340px 340px, 280px 280px;
  animation: drift 90s linear infinite;
  opacity: 0.7;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(60px, 40px, 0);
  }
}

.login-panel {
  position: relative;
  text-align: center;
  max-width: 380px;
}

.logo-sheep {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 12px;
  animation: sheep-bob 2.4s ease-in-out infinite;
}

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

.title {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--accent);
  /* Harde pixelschaduw plus een zachte gloed eromheen. */
  text-shadow:
    3px 3px 0 var(--ink),
    0 0 18px rgba(255, 203, 61, 0.45);
}

/* Het invoerveld met een knipperende prompt ervoor. */
.email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  margin-bottom: 14px;
  background: var(--ink);
  border: 3px solid var(--edge);
}

.email-row:focus-within {
  border-color: var(--accent);
}

.email-caret {
  font-size: 10px;
  color: var(--accent);
  animation: caret-blink 1.1s steps(1) infinite;
}

@keyframes caret-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.15;
  }
}

/* Het veld zelf is kaal: de rand zit op de rij eromheen. De extra `.email-row`
   ervoor is nodig omdat `.input` verderop in dit bestand staat en anders wint. */
.email-row .email-input {
  flex: 1;
  padding: 13px 0;
  margin: 0;
  border: none;
  background: transparent;
}

.email-row .email-input:focus {
  border: none;
}

.btn-login {
  width: 100%;
  padding: 15px;
}

/* --------------------------------------------------------------------------
   Het openingsverhaal
   -------------------------------------------------------------------------- */

.intro-overlay {
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, #1b2440 0%, #0d1117 70%);
}

.intro-panel {
  position: relative;
  max-width: 460px;
  text-align: center;
}

.intro-lines {
  margin: 18px 0 22px;
  text-align: left;
}

.intro-lines p {
  margin: 0 0 14px;
  font-size: 8px;
  line-height: 2.1;
  color: var(--muted);
  /* Regel voor regel invliegen; game.js zet de vertraging per regel. */
  opacity: 0;
  animation: intro-line 0.5s ease-out forwards;
}

/* De laatste regel is de klap op de vuurpijl. */
.intro-lines p:last-child {
  color: var(--accent);
}

@keyframes intro-line {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#intro-start {
  opacity: 0;
  animation: intro-line 0.5s ease-out forwards;
}

/* Zolang hij nog niet aan de beurt is, vangt hij ook geen kliks. */
#intro-start[disabled] {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   "Next up" — einde van wat er nu live staat
   -------------------------------------------------------------------------- */

.teaser-panel {
  text-align: center;
}

.teaser-kicker {
  margin: 0 0 14px;
  font-size: 8px;
  letter-spacing: 6px;
  color: var(--muted);
}

.teaser-name {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--accent);
  text-shadow:
    3px 3px 0 var(--ink),
    0 0 18px rgba(255, 203, 61, 0.45);
}

.teaser-soon {
  margin: 0 0 20px;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent-2);
  animation: soon-pulse 2s ease-in-out infinite;
}

@keyframes soon-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.teaser-note {
  margin: 0 0 22px;
  font-size: 8px;
  line-height: 2.1;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .teaser-soon {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-lines p,
  #intro-start {
    animation-duration: 0.01s;
  }
}

.login-foot {
  margin: 18px 0 0;
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--edge);
}

@media (prefers-reduced-motion: reduce) {
  .stars,
  .logo-sheep,
  .email-caret {
    animation: none;
  }
}

.title-sm {
  margin: 0;
  font-size: 12px;
  color: var(--accent);
}

.subtitle {
  margin: 0 0 18px;
  font-size: 8px;
  color: var(--accent-2);
  letter-spacing: 3px;
}

.blurb {
  margin: 0 0 24px;
  font-size: 8px;
  line-height: 2.1;
  color: var(--muted);
}

/* Inlogformulier: alleen een adres, verder niets. */
.email-form {
  text-align: left;
}

.email-label {
  display: block;
  margin-bottom: 8px;
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--muted);
}

.notice {
  margin: 0 0 12px;
  padding: 10px;
  font-size: 7px;
  line-height: 1.9;
  color: var(--accent);
  background: rgba(255, 203, 61, 0.1);
  border: 2px solid rgba(255, 203, 61, 0.35);
}

.notice code {
  font-family: var(--font);
  color: var(--text);
}

/* Melding dat er nog levels bijkomen — geen waarschuwing, dus rustiger. */
.notice-soon {
  color: var(--accent-2);
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.3);
}

.error {
  margin: 12px 0 0;
  font-size: 8px;
  line-height: 1.8;
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */

.btn {
  display: block;
  width: 100%;
  padding: 14px;
  font-size: 10px;
  color: var(--ink);
  background: var(--accent);
  border: none;
  border-bottom: 4px solid #b8892a;
  cursor: pointer;
  transition: transform 0.05s;
}

.btn:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}

.icon-btn {
  padding: 8px 10px;
  font-size: 14px;
  color: var(--text);
  background: var(--panel);
  border: 3px solid var(--edge);
  cursor: pointer;
  line-height: 1;
}

.icon-btn:active {
  transform: translateY(2px);
}

/* --------------------------------------------------------------------------
   Speelveld
   -------------------------------------------------------------------------- */

#game-root {
  position: fixed;
  inset: 0;
}

#game-root[hidden] {
  display: none;
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Houdt de pixels scherp in plaats van vervaagd. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #4a7a3a;
}

/* Level klaar zonder terminal (Pula): het beeld vervaagt in het echt in
   plaats van dat er een zwart scherm overheen komt. */
#game-canvas.blur-out {
  transition: filter 1.1s ease-in;
}

/* Statusbalk */

#hud {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 8px;
  z-index: 20;
  padding: 8px 10px;
  font-size: 8px;
  line-height: 1.8;
  background: rgba(13, 17, 23, 0.85);
  border: 3px solid var(--edge);
}

.hud-name {
  color: var(--accent);
}

.hud-progress {
  color: var(--muted);
}

#hud-code {
  color: var(--accent-2);
  letter-spacing: 3px;
}

#hud-buttons {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: 8px;
  z-index: 20;
}

/* Tekstballon */

.dialogue {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  min-height: 96px;
  padding: 14px;
  background: var(--panel);
  border: 4px solid var(--edge);
  box-shadow: 0 0 0 4px var(--ink);
}

.dialogue[hidden] {
  display: none;
}

.dialogue-name {
  margin-bottom: 8px;
  font-size: 9px;
  color: var(--accent);
}

.dialogue-text {
  margin: 0;
  font-size: 9px;
  line-height: 2;
  /* Laat lange citaten netjes afbreken op smalle schermen. */
  overflow-wrap: anywhere;
}

.dialogue-next {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 10px;
  color: var(--accent);
  animation: bob 0.8s ease-in-out infinite;
}

.dialogue-next[hidden] {
  display: none;
}

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

/* "Praten"-hint boven de speler */

.interact-hint {
  position: fixed;
  left: 50%;
  bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  /* Boven #touch-controls (z-index 28), anders schuift de A-knop op
     toestellen met een grote safe-area-inset-bottom eronder en verdwijnt
     de hint er (deels) achter. */
  z-index: 29;
  padding: 6px 10px;
  font-size: 8px;
  color: var(--ink);
  background: var(--accent);
  transform: translateX(-50%);
  animation: bob 0.8s ease-in-out infinite;
}

.interact-hint[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Touch-bediening
   -------------------------------------------------------------------------- */

#touch-controls {
  position: fixed;
  inset: 0;
  z-index: 28;
  /* De laag zelf vangt niets af; alleen de knoppen erin reageren. */
  pointer-events: none;
}

#touch-controls[hidden] {
  display: none;
}

.dpad {
  position: absolute;
  left: calc(14px + env(safe-area-inset-left, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: 156px;
  height: 156px;
  pointer-events: auto;
}

.dpad-btn {
  position: absolute;
  width: 52px;
  height: 52px;
  font-size: 14px;
  color: var(--text);
  background: rgba(28, 35, 51, 0.9);
  border: 3px solid var(--edge);
  cursor: pointer;
  user-select: none;
}

.dpad-btn:active,
.dpad-btn.pressed {
  background: var(--accent);
  color: var(--ink);
}

.dpad-up {
  top: 0;
  left: 52px;
}
.dpad-left {
  top: 52px;
  left: 0;
}
.dpad-right {
  top: 52px;
  left: 104px;
}
.dpad-down {
  top: 104px;
  left: 52px;
}

.dpad-center {
  position: absolute;
  top: 52px;
  left: 52px;
  width: 52px;
  height: 52px;
  background: rgba(28, 35, 51, 0.55);
}

.action-btn {
  position: absolute;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  width: 84px;
  height: 84px;
  font-size: 22px;
  color: var(--ink);
  background: var(--accent);
  border: 4px solid #b8892a;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}

.action-btn:active {
  transform: scale(0.93);
}

/* --------------------------------------------------------------------------
   Woordenboek
   -------------------------------------------------------------------------- */

.codex-panel {
  max-width: 520px;
  height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.codex-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.input {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 9px;
  color: var(--text);
  background: var(--ink);
  border: 3px solid var(--edge);
  outline: none;
}

.input:focus {
  border-color: var(--accent);
}

.codex-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.tab {
  flex: 1;
  padding: 10px 4px;
  font-size: 7px;
  color: var(--muted);
  background: var(--ink);
  border: 3px solid var(--edge);
  cursor: pointer;
}

.tab-active {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--accent);
}

.codex-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

.codex-entry {
  padding: 10px;
  margin-bottom: 8px;
  background: var(--ink-soft);
  border-left: 4px solid var(--accent);
}

.codex-entry.locked {
  border-left-color: var(--edge);
  opacity: 0.45;
}

.codex-term {
  font-size: 9px;
  color: var(--accent);
  line-height: 1.6;
}

.codex-entry.locked .codex-term {
  color: var(--muted);
}

.codex-def {
  margin: 6px 0 0;
  font-size: 8px;
  line-height: 1.9;
  color: var(--text);
}

.codex-empty {
  padding: 24px 12px;
  font-size: 8px;
  line-height: 2;
  color: var(--muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Terminal
   -------------------------------------------------------------------------- */

.terminal-panel {
  max-width: 400px;
  text-align: center;
}

.terminal-text {
  margin: 0 0 16px;
  font-size: 8px;
  line-height: 2;
  color: var(--muted);
}

.code-input {
  margin-bottom: 12px;
  font-size: 16px;
  text-align: center;
  letter-spacing: 6px;
  color: var(--accent-2);
}

.terminal-msg {
  min-height: 16px;
  margin: 0 0 12px;
  font-size: 8px;
  line-height: 1.8;
}

.terminal-msg.ok {
  color: var(--accent-2);
}
.terminal-msg.bad {
  color: var(--danger);
}

.terminal-hint {
  margin: 14px 0 0;
  font-size: 7px;
  line-height: 2;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Levelkiezer
   -------------------------------------------------------------------------- */

.levels-panel {
  max-width: 520px;
  height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.levels-intro {
  margin: 0 0 14px;
  font-size: 7px;
  line-height: 2;
  color: var(--muted);
}

.level-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

.level-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 10px;
  margin-bottom: 8px;
  text-align: left;
  color: var(--text);
  background: var(--ink-soft);
  border: 3px solid var(--edge);
  cursor: pointer;
}

.level-row:hover:not(.locked) {
  border-color: var(--accent);
}

.level-row.locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.level-row.done {
  border-left-color: var(--accent-2);
}

.level-num {
  flex-shrink: 0;
  width: 26px;
  font-size: 11px;
  text-align: center;
  color: var(--accent);
}

.level-row.done .level-num {
  color: var(--accent-2);
}

.level-info {
  flex: 1;
  min-width: 0;
}

.level-name {
  display: block;
  font-size: 9px;
  line-height: 1.6;
}

.level-place {
  display: block;
  margin-top: 4px;
  font-size: 7px;
  line-height: 1.6;
  color: var(--muted);
}

.level-frag {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--accent-2);
}

/* --------------------------------------------------------------------------
   Cameraflits (Malta)
   -------------------------------------------------------------------------- */

.flash {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.flash[hidden] {
  display: none;
}

.flash.flash-run {
  animation: camera-flash 0.85s ease-out;
}

@keyframes camera-flash {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flash.flash-run {
    animation: camera-flash 0.4s linear;
  }
}

/* --------------------------------------------------------------------------
   Armpje drukken
   -------------------------------------------------------------------------- */

.arm-panel {
  max-width: 420px;
  text-align: center;
}

.arm-intro {
  margin: 12px 0 18px;
  font-size: 8px;
  line-height: 2;
  color: var(--muted);
}

.arm-names {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 8px;
  color: var(--muted);
}

.arm-names #arm-you {
  color: var(--accent);
}

/* De baan waarover de handen heen en weer gaan. */
.arm-track {
  position: relative;
  height: 34px;
  margin-bottom: 14px;
  background: var(--ink);
  border: 3px solid var(--edge);
  overflow: hidden;
}

.arm-mid {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--edge);
}

.arm-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  line-height: 1;
  /* `left` wordt vanuit game.js gezet; hier alleen het centreren. */
  transform: translate(-50%, -50%);
}

.arm-status {
  min-height: 18px;
  margin: 0 0 14px;
  font-size: 9px;
  line-height: 1.8;
  color: var(--text);
}

.arm-status.winning {
  color: var(--accent-2);
}
.arm-status.losing {
  color: var(--danger);
}

.arm-push {
  /* Groot en zonder tekstselectie: hier wordt op geramd. */
  padding: 20px;
  font-size: 14px;
  user-select: none;
  touch-action: manipulation;
}

.arm-hint {
  margin: 12px 0 0;
  font-size: 7px;
  line-height: 1.9;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Zwart worden (Buisonville)
   -------------------------------------------------------------------------- */

.blackout {
  position: fixed;
  inset: 0;
  z-index: 46;
  background: #000;
  opacity: 0;
  pointer-events: none;
  /* Moet klaar zijn vóórdat game.js het level omwisselt (na 700 ms), anders
     zie je de wissel gebeuren door een half doorzichtig scherm heen. */
  transition: opacity 0.55s ease-in;
}

.blackout.on {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .blackout {
    transition-duration: 0.4s;
  }
}

/* --------------------------------------------------------------------------
   Spelletjes om een fles wijn (Buisonville)
   --------------------------------------------------------------------------
   Vier spellen in één paneel. De gedeelde onderdelen (kop, uitleg, uitslag,
   afhaakknop) staan hier; daaronder krijgt elk spel zijn eigen stukje.
   -------------------------------------------------------------------------- */

.mg-panel {
  max-width: 420px;
  text-align: center;
}

.mg-intro {
  margin: 12px 0 18px;
  font-size: 8px;
  line-height: 2;
  color: var(--muted);
}

.mg-status {
  min-height: 30px;
  margin: 14px 0 0;
  font-size: 9px;
  line-height: 1.8;
}

.mg-status.won {
  color: var(--accent-2);
}
.mg-status.lost {
  color: var(--danger);
}

.mg-action {
  width: 100%;
  padding: 16px;
  font-size: 11px;
  user-select: none;
  touch-action: manipulation;
}

.mg-quit {
  width: 100%;
  margin-top: 12px;
  font-size: 8px;
  color: var(--muted);
}

/* --- Jeu de boules -------------------------------------------------------- */

.boules-piste {
  position: relative;
  height: 66px;
  margin-bottom: 16px;
  background: linear-gradient(#c9b98e, #b3a279);
  border: 3px solid var(--edge);
  overflow: hidden;
}

.boules-but,
.boules-ball {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Het butje: het kleine houten balletje waar het allemaal om draait. */
.boules-but {
  width: 8px;
  height: 8px;
  background: #d94f3d;
  box-shadow: 0 0 0 2px #7a2b20;
}

.boules-ball {
  width: 14px;
  height: 14px;
}

.boules-rival {
  margin-top: -13px;
  background: #6f7681;
  box-shadow: 0 0 0 2px #3b4149;
}

.boules-you {
  margin-top: 13px;
  background: var(--accent);
  box-shadow: 0 0 0 2px #8a6b12;
}

/* De cursor die heen en weer schiet; hier zet je je worp mee vast. */
.boules-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1px;
  background: var(--text);
}

/* --- Steen, papier, schaar ------------------------------------------------ */

.rps-score {
  font-size: 14px;
  color: var(--accent);
}

.rps-dash {
  margin: 0 10px;
  color: var(--muted);
}

.rps-hands {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 74px;
  margin: 10px 0 16px;
  font-size: 38px;
  line-height: 1;
}

/* De hand van de tegenstander komt van de andere kant. */
.rps-flip {
  transform: scaleX(-1);
}

.rps-hands.shaking .rps-hand {
  animation: rps-shake 0.28s ease-in-out infinite;
}

@keyframes rps-shake {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.rps-hands.shaking .rps-flip {
  animation-name: rps-shake-flip;
}

@keyframes rps-shake-flip {
  0%,
  100% {
    transform: scaleX(-1) translateY(0);
  }
  50% {
    transform: scaleX(-1) translateY(-10px);
  }
}

.rps-buttons {
  display: flex;
  gap: 8px;
}

/* Donkere knoppen: de emoji van de handen komen op geel niet uit de verf. */
.rps-btn {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  font-size: 22px;
  color: var(--text);
  background: var(--ink-soft);
  border: 3px solid var(--edge);
  border-bottom-width: 5px;
  touch-action: manipulation;
}

.rps-btn small {
  font-size: 7px;
  color: var(--muted);
}

/* --- De buurman afschieten ------------------------------------------------ */

.shoot-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 9px;
  color: var(--muted);
}

.shoot-field {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* Elk vakje is een stuk heg; de buurman piept er soms bovenuit. */
.shoot-cell {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 62px;
  padding-bottom: 4px;
  font-size: 26px;
  line-height: 1;
  background: #2f5a26;
  border: 3px solid #23431c;
  cursor: crosshair;
  overflow: hidden;
  touch-action: manipulation;
}

.shoot-cell span {
  transform: translateY(70px);
}

.shoot-cell.up span {
  transform: translateY(0);
}

.shoot-cell.hit {
  background: #7a3226;
}

.shoot-cell.hit span {
  transform: translateY(70px) rotate(70deg);
}

/* --- De pizza ------------------------------------------------------------- */

.pizza {
  width: min(230px, 62vw);
  height: auto;
  margin-bottom: 14px;
  cursor: crosshair;
  touch-action: manipulation;
}

.pizza-korst {
  fill: #c98a3c;
}
.pizza-kaas {
  fill: #e8c05a;
}
.pizza-salami circle {
  fill: #b5442f;
}

.pizza-cuts line {
  stroke: #6b4420;
  stroke-width: 5;
  stroke-linecap: round;
}

/* --------------------------------------------------------------------------
   De gemaakte foto
   --------------------------------------------------------------------------
   Een polaroid: witte rand rondom, dikker aan de onderkant, licht scheef.
   -------------------------------------------------------------------------- */

.polaroid {
  max-width: min(340px, 82vw);
  padding: 12px 12px 16px;
  background: #f6f4ee;
  border: 3px solid #d8d4c8;
  box-shadow:
    0 0 0 3px var(--ink),
    0 14px 30px rgba(0, 0, 0, 0.55);
  transform: rotate(-1.5deg);
  animation: polaroid-in 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

@keyframes polaroid-in {
  from {
    transform: rotate(-8deg) scale(0.7);
    opacity: 0;
  }
  to {
    transform: rotate(-1.5deg) scale(1);
    opacity: 1;
  }
}

.polaroid-img {
  display: block;
  width: 100%;
  height: auto;
  /* Een echte foto, geen pixelart: hier wél gladjes schalen. */
  image-rendering: auto;
  background: #cfcabb;
}

.polaroid-caption {
  margin: 12px 4px 14px;
  font-size: 8px;
  line-height: 1.9;
  color: #4a4638;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .polaroid {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Melding na een uitgespeeld level
   --------------------------------------------------------------------------
   Verschijnt over het nieuwe level heen en verdwijnt vanzelf. Vangt bewust
   geen klikken af: je kunt meteen doorlopen.
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--panel);
  border: 3px solid var(--accent-2);
  box-shadow: 0 0 0 3px var(--ink);
  pointer-events: none;
  transform: translate(-50%, -16px);
  opacity: 0;
  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.toast[hidden] {
  display: none;
}

.toast.toast-in {
  transform: translate(-50%, 0);
  opacity: 1;
}

.toast-frag {
  flex-shrink: 0;
  font-size: 26px;
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--ink);
}

.toast-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.toast-title {
  font-size: 9px;
  line-height: 1.5;
  color: var(--accent-2);
}

.toast-text {
  font-size: 7px;
  line-height: 1.6;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: opacity 0.2s ease;
    transform: translate(-50%, 0);
  }
}

/* --------------------------------------------------------------------------
   Onthulling
   -------------------------------------------------------------------------- */

.reveal-overlay {
  background: radial-gradient(circle at 50% 40%, #2a1f4d 0%, #06080e 70%);
}

#confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.reveal-inner {
  position: relative;
  z-index: 2;
  max-width: 460px;
  padding: 20px;
  text-align: center;
}

.reveal-title {
  margin: 0 0 12px;
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--muted);
}

.reveal-destination {
  margin: 0 0 16px;
  font-size: 34px;
  line-height: 1.3;
  color: var(--accent);
  text-shadow:
    4px 4px 0 var(--ink),
    0 0 24px rgba(255, 203, 61, 0.5);
  animation: pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes pop {
  from {
    transform: scale(0.3);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.reveal-subtitle {
  margin: 0 0 20px;
  font-size: 11px;
  color: var(--accent-2);
}

.reveal-message {
  margin: 0 0 28px;
  font-size: 8px;
  line-height: 2.2;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Grotere schermen
   -------------------------------------------------------------------------- */

@media (min-width: 760px) {
  .title {
    font-size: 24px;
  }
  .blurb,
  .dialogue-text {
    font-size: 10px;
  }
  .dialogue {
    left: 50%;
    right: auto;
    width: min(720px, calc(100% - 32px));
    transform: translateX(-50%);
  }
}

/* Liggend op een kleine telefoon: alles wat compacter. */
@media (max-height: 460px) and (orientation: landscape) {
  .dialogue {
    min-height: 72px;
    padding: 10px;
  }
  .dpad {
    width: 120px;
    height: 120px;
  }
  .dpad-btn {
    width: 40px;
    height: 40px;
  }
  .dpad-up,
  .dpad-down {
    left: 40px;
  }
  .dpad-left,
  .dpad-right,
  .dpad-center {
    top: 40px;
  }
  .dpad-right {
    left: 80px;
  }
  .dpad-down {
    top: 80px;
  }
  .action-btn {
    width: 64px;
    height: 64px;
    font-size: 18px;
  }
}