/* ============ Fruit Frenzy — playful, big-touch, fullscreen ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  font-family: "Baloo 2", "Comic Sans MS", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

#app {
  position: fixed;
  inset: 0;
  /* Playful sky & grass backdrop behind the 3D scene */
  background: linear-gradient(180deg, #7fc8f8 0%, #a8e6f7 40%, #d9f3e3 70%, #8fd06a 100%);
}

canvas#gl { position: absolute; inset: 0; width: 100%; height: 100%; }
canvas#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hidden { display: none !important; }

/* ---------------- Screens (start / game over / loading) ---------------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.25), rgba(30,60,20,.45));
  backdrop-filter: blur(3px);
}

.card {
  background: rgba(255, 252, 240, 0.95);
  border: 6px solid #ffb03b;
  border-radius: 32px;
  padding: 28px 30px;
  max-width: min(92vw, 560px);
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 14px 0 rgba(0,0,0,.18), 0 22px 60px rgba(0,0,0,.25);
}

.title {
  font-size: clamp(34px, 9vw, 64px);
  font-weight: 800;
  color: #ff6b4a;
  line-height: 1.05;
  letter-spacing: .5px;
  text-shadow: 0 3px 0 #ffd9a0;
}
.title span { color: #46b04a; text-shadow: 0 3px 0 #bfe8a8; }
.title.small { font-size: clamp(26px, 7vw, 44px); }

.subtitle {
  margin-top: 10px;
  font-size: clamp(15px, 3.6vw, 20px);
  color: #5a4632;
  font-weight: 600;
}
.subtitle .sub2 { display: block; }

.mode-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 22px;
  flex-wrap: wrap;
}

.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 130px;
  padding: 16px 22px;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(18px, 4.5vw, 24px);
  color: #4a2f17;
  background: linear-gradient(180deg, #ffd76e, #ffb03b);
  border: 4px solid #fff;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 6px 0 #c9811f, 0 10px 18px rgba(0,0,0,.22);
  transition: transform .08s ease, box-shadow .08s ease;
}
.mode-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #c9811f; }
.mode-btn.colored-zen { background: linear-gradient(180deg, #9be36e, #58c04c); box-shadow: 0 6px 0 #3c8f35, 0 10px 18px rgba(0,0,0,.22); }
.mode-btn .emoji { font-size: clamp(26px, 6vw, 34px); }
.mode-btn .label { }
.mode-btn .hint { font-size: 12px; font-weight: 600; color: rgba(74,47,23,.75); }

.best {
  display: flex;
  gap: 22px;
  justify-content: center;
  margin-top: 18px;
  font-size: clamp(14px, 3.5vw, 18px);
  color: #6b5238;
  font-weight: 600;
}

.credit { margin-top: 14px; font-size: 11px; color: #a08a6d; }

.final-score {
  font-size: clamp(48px, 13vw, 90px);
  font-weight: 800;
  color: #ff8d1a;
  text-shadow: 0 4px 0 #ffe3b3;
  margin: 6px 0;
}

/* ---------------- HUD ---------------- */
#hud {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  padding: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
#hud-left, #hud-right, #hud-center { display: flex; align-items: flex-start; gap: 10px; pointer-events: none; }

#score {
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 14px rgba(0,0,0,.2);
}

#mode-badge {
  font-size: clamp(13px, 3.2vw, 18px);
  font-weight: 800;
  color: #fff;
  background: rgba(0,0,0,.28);
  padding: 3px 12px;
  border-radius: 999px;
}

#timer {
  font-size: clamp(30px, 8vw, 48px);
  font-weight: 800;
  color: #fff;
  background: rgba(0,0,0,.32);
  border-radius: 18px;
  padding: 2px 18px;
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
}
#timer.low { background: rgba(200,30,30,.55); animation: pulse .5s infinite; }
@keyframes pulse { 50% { transform: scale(1.14); } }

#hearts { font-size: clamp(22px, 5.5vw, 32px); letter-spacing: 2px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }

.chip {
  pointer-events: auto;
  width: clamp(42px, 10vw, 52px);
  height: clamp(42px, 10vw, 52px);
  font-size: clamp(20px, 5vw, 26px);
  border: 3px solid #fff;
  border-radius: 16px;
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 0 rgba(0,0,0,.25);
}
.chip:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }

/* ---------------- Score popups ---------------- */
#popups { position: absolute; inset: 0; z-index: 22; pointer-events: none; overflow: hidden; }
.popup {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: clamp(22px, 6vw, 34px);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
  animation: popup .9s ease-out forwards;
  white-space: nowrap;
}
.popup.bad { color: #ff5a5a; }
.popup.combo { color: #ffe25a; font-size: clamp(26px, 7.5vw, 44px); }
@keyframes popup {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  15% { opacity: 1; transform: translate(-50%, -62%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

/* ---------------- Countdown & loading ---------------- */
#countdown {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#countdown-num {
  font-size: clamp(70px, 20vw, 140px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 6px 0 rgba(0,0,0,.3);
  animation: count .6s ease-out forwards;
}
@keyframes count {
  0% { transform: scale(.3); opacity: 0; }
  30% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: .9; }
}

#loading-bar {
  width: min(70vw, 340px);
  height: 18px;
  border-radius: 999px;
  background: #eee3c8;
  border: 3px solid #fff;
  margin: 16px auto 0;
  overflow: hidden;
}
#loading-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8fe06a, #ffb03b);
  transition: width .25s ease;
}

/* ---------------- Fallback error ---------------- */
#fallback-error {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  color: #4a2f17;
  font-weight: 600;
}

/* Short landscape screens (phones sideways): compact layout */
@media (orientation: landscape) and (max-height: 480px) {
  .card { padding: 14px 22px; }
  .title { font-size: clamp(22px, 9vh, 34px); }
  .title.small { font-size: clamp(20px, 8vh, 30px); }
  .subtitle { margin-top: 4px; font-size: clamp(11px, 3.6vh, 15px); }
  .subtitle .sub2 { display: inline; }
  .mode-buttons { margin-top: 10px; gap: 10px; }
  .mode-btn { min-width: 100px; padding: 10px 14px; }
  .mode-btn .emoji { font-size: 22px; }
  .mode-btn .hint { display: none; }
  .best { margin-top: 8px; gap: 14px; font-size: 12px; }
  .credit { margin-top: 6px; font-size: 9px; }
  .final-score { font-size: clamp(28px, 12vh, 46px); }
}