/* Warm Mediterranean Storybook Theme */
:root {
  --color-primary: #E76F51;      /* Coral */
  --color-secondary: #2A9D8F;    /* Mint / Teal */
  --color-accent: #E9C46A;       /* Sun Yellow */
  --color-dark: #1D3557;         /* Deep Navy */
  --color-light: #FDFBF7;        /* Soft warm cream */
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: #F4EFEA;
  color: var(--color-dark);
}

h1, h2, h3, .font-display {
  font-family: 'Outfit', sans-serif;
}

/* 3D Tactile Buttons with Press-Down physics */
.btn-3d {
  position: relative;
  transition: all 0.08s ease-in-out;
  box-shadow: 0 4px 0 rgba(0,0,0,0.18);
}
.btn-3d:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.btn-3d-coral {
  background-color: #E76F51;
  color: white;
  border-bottom: 4px solid #C45337;
  box-shadow: 0 4px 0 #A33F27;
}
.btn-3d-coral:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #A33F27;
}

.btn-3d-teal {
  background-color: #2A9D8F;
  color: white;
  border-bottom: 4px solid #1E746A;
  box-shadow: 0 4px 0 #15554D;
}
.btn-3d-teal:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #15554D;
}

.btn-3d-white {
  background-color: #ffffff;
  color: #1D3557;
  border: 2px solid #E2D9CE;
  box-shadow: 0 4px 0 #D3C7B8;
}
.btn-3d-white:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #D3C7B8;
}

/* Interactive Card select */
.selectable-card {
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 2px solid #EAE3D9;
  background-color: #ffffff;
  box-shadow: 0 3px 0 #DDD2C4;
}
.selectable-card:hover {
  transform: translateY(-2px);
  border-color: #2A9D8F;
}
.selectable-card.selected {
  border-color: #2A9D8F;
  background-color: #E8F6F4;
  box-shadow: 0 4px 0 #2A9D8F;
  transform: translateY(-2px);
}

/* Word bank chips for sentence builder */
.word-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: white;
  border: 2px solid #DFD7CB;
  border-radius: 16px;
  font-weight: 700;
  color: #1D3557;
  box-shadow: 0 3px 0 #CEC4B5;
  cursor: pointer;
  transition: all 0.1s ease;
}
.word-chip:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #CEC4B5;
}
.word-chip.used {
  opacity: 0.25;
  pointer-events: none;
  background: #ECE6DC;
  border-color: #D2C8B8;
  box-shadow: none;
}

/* Learning Trail Stepper Nodes */
.trail-node {
  width: 76px;
  height: 76px;
  border-radius: 9999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 0 rgba(0,0,0,0.14);
}
.trail-node:active:not(.locked) {
  transform: scale(0.94) translateY(3px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.14);
}
.trail-node.active {
  background: radial-gradient(circle at 30% 30%, #F4A261, #E76F51);
  border: 4px solid #FFE3D8;
  color: white;
  box-shadow: 0 6px 0 #A83E26, 0 10px 20px rgba(231,111,81,0.35);
  animation: pulse-ring 2s infinite;
}
.trail-node.completed {
  background: radial-gradient(circle at 30% 30%, #48CAE4, #2A9D8F);
  border: 4px solid #D8F3DC;
  color: white;
  box-shadow: 0 6px 0 #185E55;
}
.trail-node.locked {
  background: #E5DFD5;
  border: 4px solid #F0ECE4;
  color: #9C9283;
  box-shadow: 0 5px 0 #C9C1B4;
  cursor: not-allowed;
}

@keyframes pulse-ring {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Speech bubble caret */
.bubble-arrow-left::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid white;
}
.bubble-arrow-bottom::before {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid white;
}

/* Matching pairs state */
.matching-card {
  padding: 12px 14px;
  background: white;
  border: 2px solid #E6DFD4;
  border-radius: 16px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 3px 0 #D5CCC0;
  cursor: pointer;
  transition: all 0.12s;
}
.matching-card.selected {
  border-color: #2A9D8F;
  background: #EBF8F6;
  color: #1A6C63;
  box-shadow: 0 4px 0 #2A9D8F;
  transform: translateY(-2px);
}
.matching-card.matched {
  border-color: #52B788;
  background: #D8F3DC;
  color: #1B4332;
  box-shadow: none;
  pointer-events: none;
  opacity: 0.9;
}
.matching-card.error {
  border-color: #E63946;
  background: #FCE8E9;
  color: #9B1D20;
  animation: shake 0.35s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Bottom Nav highlight active */
.nav-btn.active {
  color: #E76F51;
}
.nav-btn.active span:first-child {
  transform: scale(1.15);
}

/* Custom smooth scrollbar */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #E2DACF;
  border-radius: 10px;
}