/* Kleurenjacht — UI styling. Game world renders on the canvas; everything
   here is DOM overlay (screens, HUD, joystick). */

@font-face {
  font-family: 'Fredoka';
  src: url('fonts/Fredoka-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #8fd3ff;
  font-family: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}
button { font-family: inherit; border: none; cursor: pointer; background: none; }
[hidden] { display: none !important; }

#game-root {
  position: fixed; inset: 0; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* ===== animations ===== */
@keyframes popIn { 0% { transform: scale(.72); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pulseGlow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes confFall { 0% { transform: translateY(-30px) rotate(0); opacity: 1; } 100% { transform: translateY(140px) rotate(420deg); opacity: 0; } }
@keyframes bannerIn { 0% { transform: translate(-50%, -22px); opacity: 0; } 15% { transform: translate(-50%, 0); opacity: 1; } 82% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, -22px); opacity: 0; } }
@keyframes starPop { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.35) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes shake { 0%, 100% { transform: translate(-50%, -50%); } 25% { transform: translate(calc(-50% - 5px), -50%); } 75% { transform: translate(calc(-50% + 5px), -50%); } }

.floaty { animation: floaty 3.2s ease-in-out infinite; }
.pulse { animation: pulseGlow 1.8s ease-in-out infinite; }

/* ===== overlays & cards ===== */
.overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: linear-gradient(180deg, rgba(10,40,70,.10), rgba(10,40,70,.28));
}
.overlay-confetti { overflow: hidden; }
.conf { position: absolute; top: 6%; animation-name: confFall; animation-timing-function: linear; animation-iteration-count: infinite; }

.card {
  background: rgba(255,255,255,.95); border-radius: 34px; padding: 26px 26px;
  box-shadow: 0 24px 60px rgba(20,60,90,.32); border: 5px solid #fff;
  text-align: center; max-width: 460px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: popIn .45s cubic-bezier(.2,.9,.3,1.4) both;
  max-height: 94vh; max-height: 94dvh; overflow: auto;
}
.card-wide { max-width: 560px; }

h1.game-title {
  font-weight: 700; font-size: clamp(42px, 10vw, 66px); color: #15517F;
  margin: 2px 0; letter-spacing: 1px; line-height: .92;
  text-shadow: 0 3px 0 #fff, 0 7px 14px rgba(20,60,90,.22);
}
h2 { font-weight: 700; font-size: clamp(24px, 6vw, 32px); color: #1B4E76; margin: 0; }
.emoji-row { font-size: 40px; letter-spacing: 4px; }
.tagline, .sub { font-weight: 500; font-size: 16px; color: #52697B; margin: 0; line-height: 1.45; max-width: 360px; }
.sub b { color: #15517F; }
.credit { font-weight: 600; font-size: 14px; color: #8AA1B4; margin-top: 4px; }
.trophy { font-size: 72px; line-height: 1; }
.total-stars { font-weight: 700; font-size: 22px; color: #E8960C; }
.level-badge {
  font-weight: 700; font-size: 14px; color: #fff; background: #FF9E1E;
  border-radius: 999px; padding: 5px 16px; letter-spacing: .5px;
}
.intro-emoji { font-size: 64px; line-height: 1; }
#intro-color { text-transform: capitalize; }

.btn-primary {
  margin-top: 4px; padding: 15px 34px; font-weight: 700; font-size: 22px; color: #fff;
  background: linear-gradient(180deg, #3AD15A, #22A83B); border-radius: 999px;
  box-shadow: 0 9px 0 #178A30, 0 14px 24px rgba(20,90,40,.35); letter-spacing: .4px;
}
.btn-primary:active { transform: translateY(5px); box-shadow: 0 4px 0 #178A30, 0 6px 12px rgba(20,90,40,.3); }
.btn-ghost { color: #2A4D6E; font-weight: 700; font-size: 15px; text-decoration: underline; opacity: .8; padding: 8px; }

.tips {
  display: flex; flex-direction: column; gap: 8px; background: #F4F9FC; border-radius: 18px;
  padding: 14px 16px; width: 100%; text-align: left; font-weight: 500; font-size: 14px; color: #3C566A;
}
.tips div { display: flex; gap: 10px; align-items: center; }

.obstacle-callout {
  background: #FFF4E0; border: 3px solid #FFD79A; border-radius: 18px;
  padding: 12px 16px; font-weight: 600; font-size: 15px; color: #8A5A12; width: 100%;
}

/* ===== animal grid ===== */
.animal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.animal-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border: 4px solid #EAF2F7; border-radius: 22px; padding: 16px 6px;
  box-shadow: 0 8px 18px rgba(20,60,90,.12); transition: transform .12s, border-color .12s;
}
.animal-grid button:hover { transform: translateY(-5px); border-color: #FFC24D; }
.animal-grid button:active { transform: scale(.95); }
.animal-grid button.selected { border-color: #FFC24D; background: #FFF9EC; }
.animal-grid .a-emoji { font-size: 52px; line-height: 1; }
.animal-grid .a-name { font-weight: 700; font-size: 16px; color: #2A4D6E; }
.animal-grid-small { grid-template-columns: repeat(6, 1fr); gap: 8px; }
.animal-grid-small button { padding: 10px 2px; border-radius: 16px; border-width: 3px; }
.animal-grid-small .a-emoji { font-size: 34px; }
.animal-grid-small .a-name { display: none; }
@media (max-width: 420px) { .animal-grid-small { grid-template-columns: repeat(3, 1fr); } }

/* ===== level grid ===== */
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: 100%; }
@media (max-width: 480px) { .level-grid { grid-template-columns: repeat(3, 1fr); } }
.level-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #fff; border: 4px solid #EAF2F7; border-radius: 20px; padding: 12px 4px;
  box-shadow: 0 8px 18px rgba(20,60,90,.12); transition: transform .12s, border-color .12s;
}
.level-grid button:not(:disabled):hover { transform: translateY(-4px); border-color: #FFC24D; }
.level-grid button:not(:disabled):active { transform: scale(.95); }
.level-grid button:disabled { opacity: .55; filter: grayscale(.7); cursor: default; }
.level-grid .l-biome { font-size: 30px; line-height: 1.1; }
.level-grid .l-num { font-weight: 700; font-size: 16px; color: #2A4D6E; }
.level-grid .l-stars { font-size: 12px; letter-spacing: 1px; color: #FFC61E; }
.level-grid .l-stars .off { color: #DCE5EB; }

/* ===== stars on complete ===== */
.stars { display: flex; gap: 6px; }
.stars span {
  color: #DFE7EC; font-size: 46px; line-height: 1;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.15));
}
.stars span.on { color: #FFC61E; animation: starPop .5s cubic-bezier(.2,.9,.3,1.5) both; }
.stars span.on:nth-child(2) { animation-delay: .18s; }
.stars span.on:nth-child(3) { animation-delay: .36s; }

/* ===== HUD ===== */
#hud { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  padding: calc(env(safe-area-inset-top) + 8px) 10px 6px;
  display: flex; gap: 8px; align-items: center;
}
.hud-btn {
  pointer-events: auto; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.94); box-shadow: 0 4px 12px rgba(20,60,90,.2);
  font-size: 20px; color: #2A4D6E; display: grid; place-items: center; flex: none;
}
.hud-btn:active { transform: scale(.92); }
#btn-back { font-size: 24px; }
.hud-pill {
  pointer-events: auto; background: rgba(255,255,255,.94); border-radius: 999px;
  padding: 8px 14px; font-weight: 700; font-size: 15px; color: #2A4D6E;
  box-shadow: 0 4px 12px rgba(20,60,90,.18); white-space: nowrap;
}
.hud-target { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; }
.hud-target #hud-color { text-transform: capitalize; }
.swatch { width: 18px; height: 18px; border-radius: 50%; background: #FF8A1E; box-shadow: inset 0 -2px 3px rgba(0,0,0,.25); display: inline-block; }
.count { background: #EEF4F8; border-radius: 999px; padding: 2px 9px; color: #15517F; }
.hud-spacer { flex: 1; }

.progress {
  position: absolute; top: calc(env(safe-area-inset-top) + 62px); left: 12px; right: 12px;
  height: 12px; background: rgba(255,255,255,.5); border-radius: 999px;
}
#progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #FFD34E, #FF9E1E); border-radius: 999px; }
#progress-marker { position: absolute; top: -9px; left: 0%; font-size: 22px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); margin-left: -11px; }
.progress-finish { position: absolute; top: -7px; right: -2px; font-size: 20px; }

#banner {
  position: absolute; top: calc(env(safe-area-inset-top) + 96px); left: 50%;
  background: #FF8A1E; color: #fff; padding: 11px 22px; border-radius: 999px;
  font-weight: 700; font-size: 18px; box-shadow: 0 8px 20px rgba(20,60,90,.3);
  white-space: nowrap; animation: bannerIn 2.4s ease both; text-transform: capitalize;
}
#lock-toast {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(38,52,64,.92); color: #fff; padding: 14px 22px; border-radius: 18px;
  font-weight: 700; font-size: 19px; box-shadow: 0 10px 26px rgba(0,0,0,.3);
  animation: shake .4s ease; white-space: nowrap;
}

#joy-base {
  pointer-events: auto; position: absolute;
  left: calc(env(safe-area-inset-left) + 20px); bottom: calc(env(safe-area-inset-bottom) + 22px);
  width: 132px; height: 132px; border-radius: 50%;
  background: rgba(255,255,255,.26); border: 3px solid rgba(255,255,255,.62);
  box-shadow: 0 8px 22px rgba(20,60,90,.2); touch-action: none;
}
#joy-knob {
  position: absolute; left: calc(50% - 30px); top: calc(50% - 30px);
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffffff, #dfeaf2);
  box-shadow: 0 6px 14px rgba(0,0,0,.28); will-change: transform;
}