/* Vocabulary Site Styles - more formal, calm, and kid-friendly */
:root{
  /* Softer background */
  --bg: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
  --primary:#6b5cff; /* purple */
  --secondary:#ff6bd6; /* pink */
  --accent:#00c2ff; /* cyan */
  --sun:#ffd166; /* yellow */
  --leaf:#2ed573; /* green */
  --text:#1a1a1a;
  --white:#fff;
  --shadow: 0 6px 16px rgba(0,0,0,.08);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family: 'Poppins','Nunito',system-ui,-apple-system,Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background: var(--bg);
  overflow-x:hidden;
}

/* Floating bubbles background */
.bubbles{
  position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:-1; display:none !important; /* hidden for formal look */
}
.bubbles span{
  position:absolute; border-radius:50%; opacity:.25; filter:blur(0.5px);
  animation: none; /* disable floating animation */
}
/* Removed floatUp animation for calmer UI */

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(140%) blur(6px);
  background:rgba(255,255,255,.55); border-bottom: 3px solid rgba(0,0,0,.05);
}
.navwrap{
  max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:16px; padding:10px 16px;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:#4a3aff;
}
.brand .logo{
  width:36px; height:36px; border-radius:10px; background:linear-gradient(145deg, var(--primary), var(--secondary));
  box-shadow: var(--shadow);
}
.navlinks{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap }
.navlinks a, .level-toggle button{
  appearance:none; border:none; background:var(--white); color:var(--text);
  padding:10px 14px; border-radius:12px; box-shadow: var(--shadow); font-weight:600;
  text-decoration:none; transition: box-shadow .2s ease;
}
.navlinks a:hover, .level-toggle button:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.1) }

/* Level toggle */
.level-toggle{ display:flex; gap:8px; align-items:center }
.level-toggle button.active{ background:var(--primary); color:var(--white) }

/* Hero */
.hero{
  max-width:1100px; margin:24px auto 8px; padding:12px 16px; display:grid; grid-template-columns:1.2fr .8fr; gap:20px;
}
.hero .card{
  background:rgba(255,255,255,.85); border-radius:24px; padding:18px; box-shadow: var(--shadow);
}
.hero h1{ margin:0 0 10px; font-size: clamp(26px, 4vw, 40px); color:#4a3aff }
.hero p{ margin:0; font-size:clamp(14px, 2vw, 18px) }
.hero .stats{ display:flex; gap:14px; margin-top:14px; flex-wrap:wrap }
.hero .chip{ background:#fff; padding:8px 12px; border-radius:999px; box-shadow: var(--shadow); font-weight:700 }

/* Sections */
.section{ max-width:1100px; margin:14px auto; padding:0 16px }
.section h2{ margin:10px 0 8px; color:#3b2eff }
.grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap:14px;
}
.tile{
  grid-column: span 6; background:rgba(255,255,255,.92); border-radius:18px; padding:14px; box-shadow: var(--shadow);
}
@media (max-width: 860px){
  .hero{ grid-template-columns:1fr }
  .tile{ grid-column: span 12 }
}

.tile h3{ margin:6px 0 10px; color:#5a49ff }

/* Cards & buttons */
.card{ background:rgba(255,255,255,.92); border-radius:18px; padding:14px; box-shadow: var(--shadow) }
.btn{ appearance:none; border:none; background:var(--primary); color:#fff; font-weight:700; padding:10px 14px; border-radius:10px; box-shadow: var(--shadow); cursor:pointer }
.btn.secondary{ background:var(--accent); color:#003347 }
.btn:active{ transform: translateY(1px) }

/* Games */
.game-area{ display:flex; flex-direction:column; gap:10px }
.flashcards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px }
.flashcards .card{
  position:relative;
  height:120px;
  padding:0; /* override generic .card padding */
  background:transparent; /* no background so faces fill fully */
  box-shadow:none; /* faces will have visual surface */
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  user-select:none;
  display:block;
  width:100%;
}
.flashcards .card *{ cursor:pointer; user-select:none }
.flashcards .card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.flashcards .card .card-inner{ position:absolute; inset:0; will-change:transform }
.flashcards .card .card-face{ padding:16px; background:#fff; border-radius:14px; width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center }
.flashcards .card .card-face.back{ background:#f1f3ff }
.card.flip{
  transform: rotateY(180deg);
}
.card-inner{
  position:relative; transform-style:preserve-3d; transition: transform .4s ease;
}
/* Flip only on click for a calmer behavior (handled by JS) */
.card-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:14px; display:flex; align-items:center; justify-content:center; padding:12px; margin:0 }
.card-face.back{ transform: rotateY(180deg); background:#f1f0ff; color:#2b2b2b }

.quiz{ display:flex; flex-direction:column; gap:10px }
.quiz .choices{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px }
.quiz .choice{ padding:12px; border-radius:12px; background:#fff; box-shadow: var(--shadow); cursor:pointer; border:2px solid transparent; text-align:center; font-weight:700 }
.quiz .choice.correct{ border-color:#2ed573; background:#ecfff4 }
.quiz .choice.wrong{ border-color:#ff4757; background:#fff1f1 }

/* Match game */
.match{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.match .col{ background:#fff; border-radius:12px; padding:10px; box-shadow: var(--shadow) }
.match .item{ background:#f6f6ff; padding:10px; margin:8px 0; border-radius:10px; cursor:grab; font-weight:700 }
.match .target{ background:#f0fff4; padding:10px; margin:8px 0; border-radius:10px; min-height:42px; border:2px dashed #2ed573 }
.match .target.filled{ border-style:solid; background:#eafff0 }

/* Scramble */
.scramble .letters{ display:flex; gap:8px; flex-wrap:wrap }
.scramble .letter{ background:#ffffff; border-radius:10px; padding:10px 12px; box-shadow: var(--shadow); font-weight:700; cursor:grab; user-select:none }

/* Video grid */
.videos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px }
.video{ aspect-ratio: 16/9; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); background:#000 }
.video iframe{ width:100%; height:100%; border:0 }

/* Footer */
.footer{ text-align:center; padding:30px 12px; opacity:.7; font-weight:700 }

/* Removed floating/bobbing animations for a more formal feel */