/* ============================================================
   PLANT GROWING GAME — KIDS PIANO–STYLE 3D UI
   Tab Bar at bottom like Kids Piano app
   Bold Fredoka font · 3D glossy buttons · Chunky kids design
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@700;800;900&display=swap');

:root {
  --font: 'Fredoka', 'Nunito', -apple-system, sans-serif;

  --green-t: #7ade2a;
  --green-m: #4cbb17;
  --green-b: #2e8b07;
  --green-brd: #b5f542;
  --green-sh: rgba(30, 90, 5, 0.7);

  --blue-t: #47c8ff;
  --blue-m: #0ea5e9;
  --blue-b: #0276b1;
  --blue-brd: #93d9ff;
  --blue-sh: rgba(2, 100, 160, 0.7);

  --yellow-t: #ffe237;
  --yellow-m: #f5c700;
  --yellow-b: #c99500;
  --yellow-brd: #fff176;
  --yellow-sh: rgba(120, 80, 0, 0.7);

  --purple-t: #c085ff;
  --purple-m: #8b5cf6;
  --purple-b: #6527d4;
  --purple-brd: #ddb6ff;
  --purple-sh: rgba(80, 25, 160, 0.7);

  --orange-t: #ffaa44;
  --orange-m: #f97316;
  --orange-b: #c45b0a;
  --orange-brd: #fec97a;
  --orange-sh: rgba(160, 60, 8, 0.7);

  --tab-h: 84px;
  --header-h: 60px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  background: #1a2a1a;
  display: flex;
  flex-direction: column;
}

/* ─── TOP HEADER ─────────────────────────────────────────────── */
.game-app-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: linear-gradient(180deg, #1e1050 0%, #140c3a 100%);
  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  z-index: 50;
  position: relative;
}

/* 3D Back Button */
.app-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 18px !important;
  background: linear-gradient(180deg, var(--blue-t) 0%, var(--blue-m) 50%, var(--blue-b) 100%) !important;
  color: #fff !important;
  border-radius: 50px !important;
  border: 3px solid var(--blue-brd) !important;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9),
    inset 0 -4px 0 var(--blue-sh), 0 6px 16px rgba(14, 165, 233, 0.45) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer !important;
  min-height: 40px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.1s !important;
}

.app-back-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 8px !important;
  right: 8px !important;
  height: 40% !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  border-radius: 50px 50px 20px 20px !important;
  pointer-events: none !important;
}

.app-back-btn:active {
  transform: translateY(3px) !important;
}

/* Game title */
.game-app-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Header right-side controls */
.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdr-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  border: 3px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg, var(--blue-t), var(--blue-m));
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.8),
    inset 0 -3px 0 var(--blue-sh), 0 4px 10px rgba(14, 165, 233, 0.35);
  transition: transform 0.1s;
  position: relative;
  overflow: hidden;
}

.hdr-btn::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 4px;
  right: 4px;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 50%;
  pointer-events: none;
}

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

.hdr-btn--red {
  background: linear-gradient(180deg, #ff6b6b, #e53e3e);
  border-color: rgba(255, 180, 180, 0.5);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.8),
    inset 0 -3px 0 rgba(140, 20, 20, 0.7), 0 4px 10px rgba(220, 38, 38, 0.4);
}

/* ─── CANVAS ─────────────────────────────────────────────────── */
.canvas-container {
  flex: 1;
  width: 100%;
  height: calc(100vh - var(--header-h) - var(--tab-h));
  position: relative;
  overflow: hidden;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* ─── KIDS PIANO–STYLE BOTTOM TAB BAR ────────────────────────── */
.tool-tab-bar {
  height: var(--tab-h);
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #1e1050 0%, #140c3a 100%);
  border-top: 3px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  z-index: 50;
  position: relative;
  padding: 6px 8px 8px;
  gap: 6px;
}

.tool-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 16px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35);
}

.tool-tab::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  right: 6px;
  height: 35%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-radius: 12px 12px 8px 8px;
  pointer-events: none;
}

/* Active tab — gold highlight */
.tool-tab.active {
  background: linear-gradient(180deg, #ffe237 0%, #f5c700 55%, #c99500 100%);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9),
    inset 0 -4px 0 rgba(120, 80, 0, 0.7),
    0 0 16px rgba(245, 199, 0, 0.55);
  transform: translateY(-3px);
}

.tool-tab.active .tool-tab__label {
  color: #4a2c02;
}

/* Wrong-shake animation */
.tool-tab.wrong {
  animation: tabShake 0.35s ease;
  background: linear-gradient(180deg, #ff6b6b 0%, #e53e3e 55%, #b91c1c 100%) !important;
  border-color: #ffa0a0 !important;
}

@keyframes tabShake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-6px);
  }

  40% {
    transform: translateX(6px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(4px);
  }
}

/* Correct pop animation */
.tool-tab.correct {
  animation: tabPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tabPop {
  0% {
    transform: translateY(-3px) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.12);
  }

  100% {
    transform: translateY(-3px) scale(1);
  }
}

.tool-tab__emoji {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.tool-tab__label {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.3px;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Glow ring on active required tool */
.tool-tab.required {
  border-color: #fde047;
  animation: pulse-ring 1.2s ease infinite;
}

@keyframes pulse-ring {

  0%,
  100% {
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(253, 224, 71, 0.6);
  }

  50% {
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.2), 0 0 0 6px rgba(253, 224, 71, 0);
  }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 380px) {
  .tool-tab__emoji {
    font-size: 22px;
  }

  .tool-tab__label {
    font-size: 10px;
  }

  :root {
    --tab-h: 74px;
  }
}

/* ─── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes popIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  80% {
    transform: scale(1.06);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}