/* ===========================================================
   ZOEK DE VERSCHILLEN — styles
   Basis-layout 800x600. Schaalt responsive door transform: scale().
   =========================================================== */

:root {
  /* Lente-palet: fris groen (gras), zacht roze (bloesem), zonnig geel,
     hemelsblauw. "--orange" en "--green" zijn behouden als variabelen
     zodat de gedeelde game.js/styles.css structuur intact blijft; de
     kleurwaarden zijn lente. --orange = primair (pink), --green = accent. */
  --orange:        #ff8fb1;   /* zacht roze (primair) */
  --orange-2:      #ffb1c8;   /* lichter roze (hover) */
  --orange-dark:   #e85a83;   /* roze schaduw */
  --green:         #7cc04a;   /* gras groen */
  --green-2:       #4f8a2a;   /* donker groen */
  --green-light:   #cfe9b5;
  --blue:          #2bb6e7;   /* hemelsblauw (secundair) */
  --blue-dark:     #1a8aac;
  --pink:          #ff8fb1;
  --yellow:        #ffd84a;
  --yellow-dark:   #d99c00;
  --dark:          #243a25;   /* bos-groen donkere tekst */
  --darker:        #0e1620;
  --paper:         #fff8e7;   /* warme crème */
  --sky:           #b8e0ff;
  --sky-soft:      #d8efff;
  --shadow:        0 4px 0 rgba(36,58,37,.18), 0 8px 18px rgba(36,58,37,.22);
}

html, body {
  margin: 0; padding: 0;
  background: var(--darker);
  height: 100%;
  overflow: hidden;
  font-family: 'Comic Sans MS', 'Chalkboard SE', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
* { -webkit-user-select: none; user-select: none; box-sizing: border-box; }
input { -webkit-user-select: text; user-select: text; }

body {
  display: flex; align-items: center; justify-content: center;
}

/* === Stage that scales the 800x600 game === */
.stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(900px 600px at 50% 100%, #b6e6a2 0%, transparent 60%),
    radial-gradient(900px 600px at 80% 0%, #ffe9a3 0%, transparent 60%),
    linear-gradient(180deg, var(--sky-soft) 0%, var(--sky) 60%, var(--green-light) 100%);
}

#game {
  position: relative;
  width: 800px;
  height: 600px;
  background: var(--paper);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  overflow: hidden;
  transform-origin: center center;
  touch-action: none;
}

/* === Top HUD (compact) === */
.hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-2) 100%);
  color: white;
  font-weight: bold;
  z-index: 5;
  border-bottom: 3px solid var(--green-2);
}
.hud-cell {
  display: flex; flex-direction: column;
  align-items: center; line-height: 1;
}
.hud-cell .label {
  font-size: 10px; letter-spacing: .8px;
  opacity: .85; text-transform: uppercase;
}
.hud-cell .value {
  font-size: 22px;
  margin-top: 3px;
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.hud-cell.found .value { color: var(--yellow); }

/* === Image area — BIG twin panels === */
.images {
  position: absolute;
  top: 56px; left: 0; right: 0;
  bottom: 76px;     /* HUD 56 + controls 76 = 132; images = 468 tall */
  display: flex; gap: 12px;
  padding: 14px;
  align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, var(--sky-soft) 0%, var(--green-light) 100%);
}
.image-pane {
  position: relative;
  flex: 1;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sky);
  cursor: crosshair;
  box-shadow: inset 0 0 0 2px white,
              0 6px 14px rgba(36,58,37,.25);
}
.image-pane img {
  width: 100%; height: 100%;
  display: block;
  /* COVER fills the pane completely. game.js compensates for the
     possible crop so click coords map 1-to-1 to image coords. */
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  -webkit-user-drag: none;
}
.image-pane:hover { box-shadow: inset 0 0 0 2px var(--yellow), 0 6px 14px rgba(0,0,0,.4); }
.image-pane.shake { animation: shake .35s; }
@keyframes shake {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-6px, 2px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-3px, 4px); }
  80% { transform: translate(4px, -2px); }
}

/* Markers placed on top of images */
.marker {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 6;
}
.marker.found {
  border: 4px solid var(--yellow);
  background: rgba(255, 210, 58, 0.18);
  animation: popIn .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 14px rgba(255, 210, 58, .85),
              inset 0 0 14px rgba(255, 210, 58, .35);
}
.marker.hint {
  border: 4px dashed var(--blue);
  animation: hintPulse 1.6s ease-out forwards;
}
.marker.miss {
  border: 5px solid #d0353a;
  animation: missFlash .6s ease-out forwards;
}
.marker.debug {
  border: 2px dashed rgba(255,255,255,.6);
  background: rgba(255,255,255,.05);
}
@keyframes popIn {
  0% { transform: translate(-50%, -50%) scale(0); }
  60% { transform: translate(-50%, -50%) scale(1.25); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes hintPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
  10%      { opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
  90%      { opacity: 0.4; }
}
@keyframes missFlash {
  0%   { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* Score-pop +N */
.score-pop {
  position: absolute;
  color: var(--yellow);
  font-weight: bold;
  font-size: 26px;
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
  z-index: 8;
  transform: translate(-50%, 0);
  animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp {
  0% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, -50px); opacity: 0; }
}

/* === Bottom controls (compact) === */
.controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 76px;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 10px;
  background: linear-gradient(180deg, var(--paper) 0%, #e9f3d2 100%);
  border-top: 3px solid var(--green-light);
}
.btn {
  background: var(--orange);
  color: white;
  border: 0;
  border-radius: 14px;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--orange-dark), 0 6px 12px rgba(36,58,37,.18);
  transition: transform .08s, box-shadow .08s, background .15s;
  display: inline-flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: .4px;
}
.btn:hover { background: var(--orange-2); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--orange-dark), 0 3px 8px rgba(36,58,37,.2); }
.btn:disabled { background: #b9c4b3; box-shadow: 0 4px 0 #8a988a; cursor: not-allowed; }
.btn.secondary { background: var(--green); box-shadow: 0 4px 0 var(--green-2), 0 6px 12px rgba(36,58,37,.18); }
.btn.secondary:hover { background: #9bd96b; }
.btn.secondary:active { box-shadow: 0 2px 0 var(--green-2), 0 3px 8px rgba(36,58,37,.2); }
.btn.muted { background: #b8c6b9; box-shadow: 0 4px 0 #7e8d80; }
.btn.icon { padding: 10px 12px; min-width: 44px; justify-content: center; }
.btn .badge {
  display: inline-block;
  background: white; color: var(--orange-dark);
  border-radius: 999px;
  padding: 0 8px; font-size: 12px;
  margin-left: 4px;
}
.btn.secondary .badge { color: var(--green-2); }

/* === Overlays (start/win/lose/pause) === */
.overlay {
  position: absolute; inset: 0;
  background: rgba(14,22,32,.78);
  display: none;
  align-items: center; justify-content: center;
  z-index: 20;
  padding: 30px;
}
.overlay.visible { display: flex; }
.overlay .panel {
  background: var(--paper);
  border-radius: 22px;
  padding: 28px 32px;
  text-align: center;
  max-width: 560px;
  width: 100%;
  box-shadow: var(--shadow);
  border: 4px solid var(--green);
}
.overlay h1 {
  color: var(--green-2);
  margin: 0 0 8px 0;
  font-size: 38px;
  text-shadow: 3px 3px 0 rgba(36,58,37,.18);
  letter-spacing: 1px;
}
.overlay h2 {
  color: var(--orange-dark);
  margin: 0 0 12px 0;
  font-size: 26px;
}
.overlay p { font-size: 15px; color: var(--dark); margin: 8px 0; }
.overlay .stats {
  display: flex; gap: 14px; justify-content: center;
  margin: 18px 0;
  flex-wrap: wrap;
}
.overlay .stat {
  background: white;
  border: 3px solid var(--green);
  border-radius: 14px;
  padding: 10px 16px;
  min-width: 100px;
}
.overlay .stat .label {
  font-size: 11px; color: var(--dark); opacity: .7;
  text-transform: uppercase; letter-spacing: .5px;
}
.overlay .stat .value {
  font-size: 24px; color: var(--green-2); font-weight: bold;
}
.overlay .actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 8px;
}
.overlay .hint-text {
  background: linear-gradient(180deg, #fff5cc 0%, var(--yellow) 100%);
  color: var(--dark);
  border: 2px solid var(--yellow-dark);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  margin: 14px 0;
}

/* Confetti */
#confetti {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 21;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 10px; height: 14px;
  top: -20px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(700px) rotate(720deg); }
}

/* Fullscreen button (top-right outside game) */
#fullscreenBtn {
  position: fixed;
  right: 12px; top: 12px;
  z-index: 50;
  width: 38px; height: 38px;
  background: rgba(255,255,255,.85);
  color: var(--green-2);
  border: 2.5px solid var(--green-2);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 rgba(36,58,37,.18);
}
#fullscreenBtn:hover { background: white; }

/* Mute button */
#muteBtn { font-size: 16px; }

/* Loading message */
#loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  color: var(--green-2);
  font-weight: bold;
  font-size: 22px;
  z-index: 100;
}

/* === Debug overlay === */
#debug {
  position: absolute;
  top: 60px; right: 12px;
  z-index: 90;
  background: rgba(0,0,0,.85);
  color: #ffe07b;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #ffe07b;
  display: none;
  pointer-events: none;
  white-space: pre;
  line-height: 1.3;
}
#debug.visible { display: block; }