/* ============================================================
   EDUKIDS ENGLISH ADVENTURE - INTERACTIVE LEARNING MEDIA
   Modern 2D Web UI Game System (PID Smartboard, Laptop & Mobile)
   Developed by Arif Rahmanulhakim, S.Pd. — SD Negeri 118 Pekanbaru
   ============================================================ */

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

:root {
  --font-display: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: #fef3c7;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  touch-action: manipulation;
}

.font-kids {
  font-family: var(--font-display);
}

/* ---------------- Thin Sleek Scrollbar ---------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(245, 158, 11, 0.08);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb {
  background: #f59e0b;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #d97706;
}
* {
  scrollbar-width: thin;
  scrollbar-color: #f59e0b rgba(245, 158, 11, 0.08);
}

/* ---------------- 2D Juicy Game Buttons ---------------- */
.btn-game-play {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 40%, #16a34a 100%);
  border: 4px solid #ffffff;
  border-bottom: 7px solid #14532d;
  box-shadow: 0 10px 20px -2px rgba(20, 83, 45, 0.45), 
              0 0 16px rgba(74, 222, 128, 0.4),
              inset 0 2px 0 rgba(255, 255, 255, 0.7);
  border-radius: 9999px;
  font-family: var(--font-display);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-game-play:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 26px -2px rgba(20, 83, 45, 0.55), 
              0 0 24px rgba(74, 222, 128, 0.6);
}
.btn-game-play:active {
  transform: translateY(3px);
  border-bottom: 3px solid #14532d;
  box-shadow: 0 4px 8px rgba(20, 83, 45, 0.3);
}

.btn-game-secondary {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  border: 3px solid #ffffff;
  border-bottom: 5px solid #78350f;
  box-shadow: 0 6px 14px rgba(120, 53, 15, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.6);
  border-radius: 9999px;
  font-family: var(--font-display);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-game-secondary:hover {
  transform: translateY(-2px) scale(1.02);
}
.btn-game-secondary:active {
  transform: translateY(2px);
  border-bottom: 2px solid #78350f;
}

/* 3D Claymorphic Buttons */
.btn-3d {
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.08);
}
.btn-3d:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.16), 0 10px 16px rgba(0, 0, 0, 0.12);
}
.btn-3d:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16), 0 3px 5px rgba(0, 0, 0, 0.08);
}

/* ---------------- 3D Game Title Stroke ---------------- */
.text-stroke-title {
  -webkit-text-stroke: 3px #1e1b4b;
  paint-order: stroke fill;
  filter: drop-shadow(0 4px 0 #172554) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

/* ---------------- Mascot Breathing & Floating Animation ---------------- */
@keyframes foxFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(-1.5deg);
  }
  50% {
    transform: translateY(-14px) rotate(0deg);
  }
  75% {
    transform: translateY(-6px) rotate(1.5deg);
  }
}

@keyframes shadowPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.45;
  }
  50% {
    transform: scale(0.82);
    opacity: 0.22;
  }
}

.fox-animated {
  animation: foxFloat 3.5s ease-in-out infinite;
}
.fox-shadow {
  animation: shadowPulse 3.5s ease-in-out infinite;
}

/* ---------------- Animated Ornaments (Floating School Elements) ---------------- */
@keyframes floatOrn1 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(5deg);
  }
}

@keyframes floatOrn2 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(-5deg);
  }
}

.ornament-float-1 {
  animation: floatOrn1 3.6s ease-in-out infinite;
}
.ornament-float-2 {
  animation: floatOrn2 4.2s ease-in-out infinite;
}

/* ---------------- Desktop Collapsible Sidebar ---------------- */
#desktop-sidebar {
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#desktop-sidebar.collapsed {
  width: 5.5rem !important;
}
#desktop-sidebar.collapsed .sidebar-hide-on-collapse {
  display: none !important;
}
#desktop-sidebar.collapsed .sidebar-nav-btn {
  justify-content: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* ---------------- Mobile Off-Canvas Drawer ---------------- */
.mobile-drawer-transition {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------- Terracotta/Wood Floating Mobile Dock ---------------- */
.dock-wood-capsule {
  background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
  border: 2px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 10px 25px -4px rgba(120, 53, 15, 0.45), 
              inset 0 2px 0 rgba(255, 255, 255, 0.35),
              inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

.dock-item {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dock-item.active .dock-icon-circle {
  background: #fbbf24;
  color: #78350f;
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}

/* ---------------- Custom Modal Dialog ---------------- */
.custom-modal-backdrop {
  backdrop-filter: blur(8px);
  background-color: rgba(15, 23, 42, 0.65);
}

@keyframes modalPop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.modal-pop {
  animation: modalPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ---------------- 3-Lane Perspective Mountain Road Game ---------------- */
.game-perspective-container {
  perspective: 700px;
}
.game-road-bed {
  transform: rotateX(24deg);
  transform-origin: bottom center;
}
@keyframes hopJump {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-28px) scale(1.15); }
  100% { transform: translateY(0) scale(1); }
}
.hop-active {
  animation: hopJump 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ---------------- Certificate Printable Frame ---------------- */
@media print {
  body * {
    visibility: hidden;
  }
  #printable-certificate, #printable-certificate * {
    visibility: visible;
  }
  #printable-certificate {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    padding: 2rem;
    box-shadow: none !important;
  }
}