/* ============================================================
   Alphie by Atena — styles
   Bright, chunky, touch-friendly. Works with mouse, trackpad
   and tablet touch screens.
   ============================================================ */

:root {
  --ink: #17324a;
  --shadow: 0 8px 0 rgba(2, 62, 115, 0.14);
  --shadow-sm: 0 5px 0 rgba(2, 62, 115, 0.14);
  --blue: #4cc9f0;
  --pink: #ff5e7e;
  --green: #06b98b;
  --yellow: #ffd166;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: "Baloo 2", "Chalkboard SE", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #5fb0f2 0%, #a3dcff 38%, #dff4ff 68%, #ffffff 100%) fixed;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* ---------- Finland: silk aurora, stars, snow, hills & forest ---------- */
.sky, .snow, .hills, .forest, .deer {
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
.sky { inset: 0; overflow: hidden; }

.aurora {
  position: absolute;
  top: -14%;
  left: -25%;
  width: 150%;
  height: 52%;
  border-radius: 50%;
  filter: blur(42px);
}
.a1 {
  background: linear-gradient(100deg, transparent 6%, #a5f3d0 28%, #93d8ff 52%, #c4b5fd 74%, transparent 95%);
  opacity: 0.5;
  animation: aurora1 18s ease-in-out infinite alternate;
}
.a2 {
  background: linear-gradient(80deg, transparent 10%, #bfe9ff 38%, #b7f0dc 60%, transparent 90%);
  opacity: 0.35;
  animation: aurora2 24s ease-in-out infinite alternate;
}
@keyframes aurora1 {
  from { transform: rotate(-6deg) translateX(-3%) scale(1); }
  to   { transform: rotate(-3deg) translateX(3%) scale(1.06); }
}
@keyframes aurora2 {
  from { transform: rotate(-2deg) translateX(3%) scale(1.05); }
  to   { transform: rotate(-5deg) translateX(-3%) scale(1); }
}

/* twinkling stars */
.star {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.7);
  opacity: 0.15;
  animation: twinkle 3.4s ease-in-out infinite;
}
.s1 { left: 10%; top: 7%;  animation-delay: 0.1s; }
.s2 { left: 24%; top: 14%; animation-delay: 0.9s; width: 4px; height: 4px; }
.s3 { left: 41%; top: 5%;  animation-delay: 1.7s; }
.s4 { left: 58%; top: 11%; animation-delay: 0.5s; width: 5px; height: 5px; }
.s5 { left: 71%; top: 6%;  animation-delay: 2.3s; }
.s6 { left: 84%; top: 13%; animation-delay: 1.2s; width: 4px; height: 4px; }
.s7 { left: 92%; top: 4%;  animation-delay: 2.9s; }
.s8 { left: 33%; top: 10%; animation-delay: 2.0s; width: 4px; height: 4px; }
@keyframes twinkle {
  0%, 100% { opacity: 0.12; transform: scale(0.8); }
  50%      { opacity: 0.95; transform: scale(1.2); }
}

/* gentle snowfall */
.snow { inset: 0; overflow: hidden; }
.snow i {
  position: absolute;
  top: -14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  filter: blur(0.6px);
  animation: fall linear infinite;
}
.snow i:nth-child(1)  { left: 4%;  width: 7px; height: 7px; animation-duration: 12s;  animation-delay: 0s; }
.snow i:nth-child(2)  { left: 12%; width: 5px; height: 5px; animation-duration: 15s;  animation-delay: 3s; }
.snow i:nth-child(3)  { left: 21%; width: 8px; height: 8px; animation-duration: 10s;  animation-delay: 6s; }
.snow i:nth-child(4)  { left: 29%; width: 5px; height: 5px; animation-duration: 16s;  animation-delay: 1s; }
.snow i:nth-child(5)  { left: 37%; width: 6px; height: 6px; animation-duration: 13s;  animation-delay: 8s; }
.snow i:nth-child(6)  { left: 46%; width: 8px; height: 8px; animation-duration: 11s;  animation-delay: 4s; }
.snow i:nth-child(7)  { left: 55%; width: 5px; height: 5px; animation-duration: 17s;  animation-delay: 2s; }
.snow i:nth-child(8)  { left: 63%; width: 7px; height: 7px; animation-duration: 12s;  animation-delay: 9s; }
.snow i:nth-child(9)  { left: 72%; width: 5px; height: 5px; animation-duration: 14s;  animation-delay: 5s; }
.snow i:nth-child(10) { left: 80%; width: 8px; height: 8px; animation-duration: 10s;  animation-delay: 7s; }
.snow i:nth-child(11) { left: 88%; width: 6px; height: 6px; animation-duration: 15s;  animation-delay: 11s; }
.snow i:nth-child(12) { left: 95%; width: 5px; height: 5px; animation-duration: 13s;  animation-delay: 0.5s; }
@keyframes fall {
  0%   { transform: translate(0, -4vh); }
  25%  { transform: translate(14px, 26vh); }
  50%  { transform: translate(-10px, 52vh); }
  75%  { transform: translate(12px, 78vh); }
  100% { transform: translate(-6px, 106vh); }
}

/* rolling snow hills + pine forest */
.hills  { left: 0; right: 0; bottom: 0; width: 100%; height: 150px; }
.forest { left: 0; right: 0; bottom: 40px; width: 100%; height: 105px; }
.deer   { bottom: 56px; left: 21%; font-size: 26px; opacity: 0.9; }

/* Fluffy decorative clouds */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 14%, #ffffffcc 0 52px, transparent 53px),
    radial-gradient(circle at 19% 11%, #ffffffcc 0 38px, transparent 39px),
    radial-gradient(circle at 6% 12%, #ffffffcc 0 34px, transparent 35px),
    radial-gradient(circle at 86% 24%, #ffffffaa 0 44px, transparent 45px),
    radial-gradient(circle at 93% 21%, #ffffffaa 0 32px, transparent 33px),
    radial-gradient(circle at 78% 78%, #ffffff88 0 40px, transparent 41px),
    radial-gradient(circle at 85% 81%, #ffffff88 0 52px, transparent 53px);
  z-index: 0;
}

button {
  font-family: inherit;
  color: inherit;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.hidden { display: none !important; }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  z-index: 20;
  pointer-events: none;
}
.topbar-left, .topbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  pointer-events: auto;
}

.icon-btn {
  font-size: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  transition: transform 0.12s;
}
.icon-btn:active { transform: scale(0.9) translateY(2px); }
.icon-btn.big { width: 64px; height: 64px; font-size: 30px; }

.chip {
  background: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 20px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.chip.pulse { animation: pop 0.4s; }

/* ---------- Screens ---------- */
main { position: relative; z-index: 1; }

.screen {
  max-width: 1000px;
  margin: 0 auto;
  min-height: 100vh;
  padding: calc(76px + env(safe-area-inset-top)) 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.screen-title { font-size: 40px; margin: 0; }

/* ---------- Home ---------- */
.logo {
  font-size: clamp(38px, 7vw, 64px);
  margin: 0;
  text-shadow: 0 3px 0 #ffffffaa;
  letter-spacing: 1px;
}
.teacher-line {
  font-size: clamp(16px, 3vw, 22px);
  font-weight: 700;
  color: #b3541e;
  background: #fff;
  padding: 6px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  margin: 0;
}
.tagline { font-size: clamp(16px, 3vw, 22px); margin: 0 0 8px; opacity: 0.85; }

.mascot-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }

.duo { display: flex; align-items: flex-end; gap: clamp(10px, 3vw, 26px); }
.teacher-wrap, .fox-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }

.teacher-img {
  width: clamp(110px, 16vw, 160px);
  height: auto;
  animation: float 3.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 5px rgba(120, 53, 5, 0.25));
}

.teacher-wrap::before {
  content: '';
  position: absolute;
  top: 52px; left: 50%;
  transform: translate(-50%, -50%);
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255, 146, 43, 0.4) 0%, rgba(255, 146, 43, 0) 68%);
  border-radius: 50%;
  pointer-events: none;
}

.teacher-tag {
  background: #fff;
  color: #b3541e;
  font-size: clamp(13px, 2.4vw, 17px);
  font-weight: 800;
  padding: 4px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.bubble {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  max-width: 320px;
  text-align: center;
}
.bubble::after {
  content: '';
  position: absolute;
  bottom: -12px; left: 50%;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}

.home-cards { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }

.mode-card {
  width: min(300px, 40vw);
  min-height: min(300px, 40vw);
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.15);
  box-shadow: var(--shadow);
  border: 5px solid #ffffffcc;
  transition: transform 0.12s;
}
.mode-card:active { transform: scale(0.95) translateY(4px); }

.mode-card.abc     { background: linear-gradient(160deg, #ff8fab, #ff5e7e); }
.mode-card.num     { background: linear-gradient(160deg, #43d9a3, #06b98b); }
.mode-card.explore { background: linear-gradient(160deg, #74c0fc, #4dabf7); }
.mode-card.play    { background: linear-gradient(160deg, #ffd166, #ffab00); }

.mode-emoji { font-size: clamp(52px, 8vw, 72px); }

/* colorful toy blocks on the home cards */
.blocks { display: flex; gap: 10px; align-items: center; }
.block {
  width: clamp(46px, 7vw, 66px);
  height: clamp(46px, 7vw, 66px);
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: clamp(22px, 3.6vw, 34px);
  font-weight: 800;
  color: #fff;
  border: 3px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.abc .b1 { background: #ff6b81; transform: rotate(-7deg); }
.abc .b2 { background: #ffd166; color: #7a5b00; text-shadow: none; transform: rotate(4deg) translateY(-5px); }
.abc .b3 { background: #4dabf7; transform: rotate(-2deg); }
.num .b1 { background: #06b98b; transform: rotate(5deg); }
.num .b2 { background: #b388ff; transform: rotate(-5deg) translateY(-5px); }
.num .b3 { background: #ff922b; transform: rotate(3deg); }
.mode-title { font-size: clamp(30px, 5vw, 42px); font-weight: 800; letter-spacing: 1px; }
.mode-sub   { font-size: clamp(14px, 2.4vw, 18px); font-weight: 600; opacity: 0.9; }

/* ---------- Display card (explore screens) ---------- */
.display-card {
  background: #fff;
  border-radius: 30px;
  box-shadow: var(--shadow);
  padding: 18px 34px;
  min-height: 190px;
  min-width: min(440px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.display-big   { font-size: clamp(84px, 16vw, 150px); font-weight: 800; line-height: 1; }
.display-word  { font-size: clamp(20px, 4vw, 32px); font-weight: 700; }
.display-emoji { font-size: clamp(44px, 8vw, 72px); min-height: 1.2em; }

#num-display-stars { font-size: clamp(22px, 4vw, 32px); letter-spacing: 2px; min-height: 1.3em; }
#num-display-stars .star-pop { display: inline-block; animation: pop 0.35s both; }

/* ---------- Letter / number grids ---------- */
.letter-grid, .number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 12px;
  width: 100%;
}
.number-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

.letter, .number {
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  border-bottom: 6px solid rgba(2, 62, 115, 0.15);
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 800;
  transition: transform 0.1s;
}
.letter { font-size: clamp(30px, 5vw, 42px); }
.number .numeral { font-size: clamp(30px, 5vw, 40px); line-height: 1; }
.number .word { font-size: 13px; font-weight: 600; opacity: 0.65; }

.letter:active, .number:active { transform: scale(0.92) translateY(3px); }

/* rainbow-ish rotation for grids */
.letter-grid .letter:nth-child(5n+1) { background: #fff0f3; }
.letter-grid .letter:nth-child(5n+2) { background: #fff9e6; }
.letter-grid .letter:nth-child(5n+3) { background: #e8fbf1; }
.letter-grid .letter:nth-child(5n+4) { background: #e9f6ff; }
.letter-grid .letter:nth-child(5n+5) { background: #f3edff; }

/* ---------- Games ---------- */
.game-prompt {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 14px 22px;
}
.prompt-text { font-size: clamp(24px, 5vw, 38px); font-weight: 800; }

.progress { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pstar { font-size: 30px; opacity: 0.22; filter: grayscale(1); }
.pstar.earned { opacity: 1; filter: none; animation: pop 0.35s; }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 200px));
  gap: 16px;
  justify-content: center;
  width: 100%;
}
.choice-grid.three { grid-template-columns: repeat(3, minmax(100px, 150px)); }

.choice { min-height: 110px; }
.choice.good { background: #b9f7cf; border-color: #2fbf71; transform: scale(1.06); }
.choice.bad  { animation: shake 0.45s; background: #ffe0e3; }

/* counting tray */
.count-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  background: #ffffffd9;
  border-radius: 26px;
  box-shadow: var(--shadow-sm);
  padding: 18px;
  min-height: 120px;
  min-width: min(560px, 94vw);
}
.count-item {
  font-size: 52px;
  width: 86px;
  height: 86px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  transition: transform 0.15s, background 0.15s;
}
.count-item:active { transform: scale(0.9); }
.count-item.counted {
  background: #d6ffe6;
  box-shadow: inset 0 0 0 4px #2fbf71;
  transform: scale(0.94);
}

/* ---------- Overlays & modals ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 50, 74, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}

.modal {
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  padding: 26px;
  width: min(540px, 94vw);
  max-height: 86vh;
  overflow: auto;
}
.modal-title { margin: 0 0 14px; font-size: 30px; text-align: center; }

.setting-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
}
.setting-row.check label { display: flex; align-items: center; gap: 10px; }
.setting-row input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--green); }
.setting-row select {
  font: inherit;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid #d5e6f2;
  background: #fff;
}
.setting-row input[type="range"] { width: 100%; accent-color: var(--blue); }

.set-letters { display: flex; gap: 10px; flex-wrap: wrap; }

.voice-rec { display: flex; gap: 10px; flex-wrap: wrap; }
#btn-rec.recording { animation: recpulse 1s infinite; }
@keyframes recpulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.rec-hint { font-size: 15px; font-weight: 600; opacity: 0.75; line-height: 1.4; }
.set-letter {
  font-size: 24px;
  font-weight: 800;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #eef6ff;
  box-shadow: var(--shadow-sm);
}
.set-letter:active { transform: scale(0.92); }

.big-btn {
  font-size: 20px;
  font-weight: 800;
  border-radius: 18px;
  padding: 14px 22px;
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s;
}
.big-btn:active { transform: scale(0.95) translateY(3px); }
.big-btn.green { background: linear-gradient(160deg, #43d9a3, #06b98b); }
.big-btn.blue  { background: linear-gradient(160deg, #74c0fc, #4dabf7); }
.big-btn.pink  { background: linear-gradient(160deg, #ff8fab, #ff5e7e); }

.setting-row.btns, .setting-row:last-of-type { flex-direction: row; gap: 12px; flex-wrap: wrap; }

.credit { text-align: center; opacity: 0.6; font-size: 14px; margin: 10px 0 0; }

/* celebration */
.modal.celebrate { text-align: center; width: min(460px, 94vw); }
.celebrate-duo { display: flex; align-items: center; justify-content: center; gap: 18px; }
.celebrate-teacher { width: clamp(80px, 12vw, 110px); }
.celebrate-star { font-size: 110px; animation: star-spin 1.4s ease; }
.celebrate-text { font-size: clamp(28px, 6vw, 40px); font-weight: 800; margin: 6px 0 4px; }
.celebrate-sub { font-size: clamp(16px, 3.5vw, 22px); font-weight: 700; color: #b3541e; margin-bottom: 16px; }
.celebrate-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* start gate */
.overlay.start { background: linear-gradient(180deg, #8ad8ff, #fff6d8); flex-direction: column; }
.start-inner { text-align: center; }
.start-wave { font-size: 110px; animation: bounce 1s infinite; }
.start-text { font-size: clamp(34px, 7vw, 54px); font-weight: 800; margin-top: 8px; }
.start-sub  { font-size: clamp(18px, 3.5vw, 24px); opacity: 0.75; margin-top: 6px; }

/* confetti */
.confetti {
  position: fixed;
  width: 12px;
  height: 16px;
  border-radius: 3px;
  z-index: 100;
  pointer-events: none;
}

/* ---------- Animations ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes pop {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-8px); }
  50%      { transform: translateX(8px); }
  75%      { transform: translateX(-5px); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-18px) rotate(4deg); }
}
@keyframes star-spin {
  0%   { transform: scale(0) rotate(0deg); }
  60%  { transform: scale(1.3) rotate(340deg); }
  100% { transform: scale(1) rotate(360deg); }
}

.pop    { animation: pop 0.35s; }
.pulse  { animation: pop 0.4s; }

/* ---------- Small screens ---------- */
@media (max-width: 700px) {
  .letter-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
  .number-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
  .letter, .number { min-height: 68px; border-radius: 16px; }
  .count-item { font-size: 40px; width: 68px; height: 68px; }
  .mode-card { width: min(220px, 42vw); min-height: min(220px, 42vw); }
  .choice-grid { grid-template-columns: repeat(2, minmax(110px, 170px)); gap: 12px; }
  .choice-grid.three { grid-template-columns: repeat(3, minmax(84px, 120px)); }
  .icon-btn { width: 46px; height: 46px; font-size: 20px; }
  .chip { font-size: 16px; padding: 8px 14px; }
}

/* landscape phones / small tablets */
@media (max-height: 520px) {
  .bubble { font-size: 15px; }
  .screen { padding-top: calc(66px + env(safe-area-inset-top)); gap: 10px; }
  .display-card { min-height: 130px; }
  .snow, .hills, .forest, .deer { display: none; }
}