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

:root {
  --orange:   #ff7a00;
  --orange-2: #ffa040;
  --green:    #6abe2a;
  --green-2:  #5aa520;
  --blue:     #2bb6e7;
  --pink:     #ff5fa1;
  --yellow:   #ffd23a;
  --dark:     #1a2a36;
  --darker:   #0e1620;
  --paper:    #fffbe9;
  --shadow:   0 4px 0 rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.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(circle at 30% 20%, #1c2c40 0%, #0a121b 70%),
    var(--darker);
}

#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(--orange) 0%, #e96900 100%);
  color: white;
  font-weight: bold;
  z-index: 5;
  border-bottom: 3px solid #b34d00;
}
.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, #25394d 0%, #0e1620 100%);
}
.image-pane {
  position: relative;
  flex: 1;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #11181f;
  cursor: crosshair;
  box-shadow: inset 0 0 0 2px white,
              0 6px 14px rgba(0,0,0,.4);
}
.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, #fffbe9 0%, #f1e6c0 100%);
  border-top: 3px solid #d0bf85;
}
.btn {
  background: var(--orange);
  color: white;
  border: 0;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 0 #b34d00, 0 6px 12px rgba(0,0,0,.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 #b34d00, 0 3px 8px rgba(0,0,0,.2); }
.btn:disabled { background: #aaa; box-shadow: 0 4px 0 #777; cursor: not-allowed; }
.btn.secondary { background: var(--blue); box-shadow: 0 4px 0 #1a8aac, 0 6px 12px rgba(0,0,0,.18); }
.btn.secondary:hover { background: #4dc9f0; }
.btn.secondary:active { box-shadow: 0 2px 0 #1a8aac, 0 3px 8px rgba(0,0,0,.2); }
.btn.muted { background: #888; box-shadow: 0 4px 0 #555; }
.btn.icon { padding: 10px 12px; min-width: 44px; justify-content: center; }
.btn .badge {
  display: inline-block;
  background: white; color: var(--orange);
  border-radius: 999px;
  padding: 0 8px; font-size: 12px;
  margin-left: 4px;
}
.btn.secondary .badge { color: var(--blue); }

/* === 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: 20px;
  padding: 28px 32px;
  text-align: center;
  max-width: 560px;
  width: 100%;
  box-shadow: var(--shadow);
  border: 4px solid var(--orange);
}
.overlay h1 {
  color: var(--orange);
  margin: 0 0 8px 0;
  font-size: 38px;
  text-shadow: 3px 3px 0 #000;
  letter-spacing: 1px;
}
.overlay h2 {
  color: var(--green-2);
  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(--orange);
  border-radius: 12px;
  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(--orange); font-weight: bold;
}
.overlay .actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 8px;
}
.overlay .hint-text {
  background: var(--yellow);
  color: var(--dark);
  border-radius: 10px;
  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(0,0,0,.55);
  color: var(--orange);
  border: 2px solid var(--orange);
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
#fullscreenBtn:hover { background: rgba(0,0,0,.85); }

/* 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(--orange);
  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; }