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

html {
  height: 100%;
  height: -webkit-fill-available;
}
body {
  width:100%; height:100%;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  font-family:'Nunito',sans-serif;
  background: radial-gradient(ellipse at 25% 35%, #0d2060 0%, #040d1f 60%, #071830 100%);
  overflow:hidden;
  cursor:none;
  user-select:none; -webkit-user-select:none;
  /* iOS safe area */
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* On touch devices, restore cursor */
@media (hover:none) {
  body { cursor: auto; }
  #cursor, .cur-trail { display: none !important; }
}

/* ══════════════════════════════════════
   STARFIELD
══════════════════════════════════════ */
#stars { position:fixed; inset:0; pointer-events:none; z-index:0; }

/* ══════════════════════════════════════
   IDLE PARADE
══════════════════════════════════════ */
#idle-stage { position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.idle-char {
  position:absolute; animation:idleFloat linear forwards;
  pointer-events:none; opacity:0; will-change:transform,opacity;
}
@keyframes idleFloat {
  0%   { opacity:0;    transform:translate(0,0)         rotate(-5deg) scale(0.7); }
  8%   { opacity:0.52; }
  88%  { opacity:0.52; }
  100% { opacity:0;    transform:translate(35vw,-115vh) rotate(15deg) scale(1.2); }
}

/* ══════════════════════════════════════
   FLOATING COMIC CHARS
══════════════════════════════════════ */
#comic-stage { position:fixed; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.comic-char {
  position:absolute; opacity:0.14; animation:floatChar linear;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.5)); pointer-events:none;
}
@keyframes floatChar {
  0%   { transform:translateY(110vh) rotate(-8deg) scale(0.8); opacity:0; }
  8%   { opacity:0.14; }
  90%  { opacity:0.14; }
  100% { transform:translateY(-20vh) rotate(10deg) scale(1.1); opacity:0; }
}

/* ══════════════════════════════════════
   CURSOR (desktop only)
══════════════════════════════════════ */
#cursor {
  position:fixed; width:36px; height:36px; border-radius:50%;
  background:radial-gradient(circle,#ffd93d 0%,#ff6b6b 100%);
  pointer-events:none; transform:translate(-50%,-50%) scale(1);
  z-index:9999; mix-blend-mode:screen; box-shadow:0 0 22px 8px #ffd93d99;
  transition:transform 0.08s ease; animation:cursorPulse 2s ease-in-out infinite;
}
@keyframes cursorPulse {
  0%,100% { box-shadow:0 0 22px 8px #ffd93d99; }
  50%      { box-shadow:0 0 35px 14px #ff6b6b99; }
}
.cur-trail {
  position:fixed; border-radius:50%; pointer-events:none;
  z-index:9998; transform:translate(-50%,-50%);
  animation:trailFade 0.5s ease forwards;
}
@keyframes trailFade {
  0%   { opacity:0.7; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0;   transform:translate(-50%,-50%) scale(0.1); }
}
.cur-click {
  position:fixed; border-radius:50%; pointer-events:none;
  z-index:9997; transform:translate(-50%,-50%); border:3px solid;
  animation:clickRipple 0.5s ease-out forwards;
}
@keyframes clickRipple {
  0%   { width:10px; height:10px; opacity:1; }
  100% { width:80px; height:80px; opacity:0; }
}

/* ══════════════════════════════════════
   LEARNING CARD  (responsive)
══════════════════════════════════════ */
#learn-card {
  position:fixed; z-index:1000;
  --card-rest-w: clamp(150px, 28vw, 270px);
  --card-full-w: clamp(260px, 80vw, 480px);
  width: var(--card-full-w);
  background:linear-gradient(145deg,#0b1e55 0%,#040d1f 100%);
  border:4px solid rgba(255,255,255,0.22); border-radius:36px;
  padding:20px 24px 16px;
  display:flex; flex-direction:column; align-items:center;
  backdrop-filter:blur(24px);
  box-shadow:0 0 0 8px rgba(255,255,255,0.04),0 20px 80px rgba(0,0,0,0.8);
  pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(0.15);
  top:50%; left:50%;
  transition:none;
  will-change:top,left,transform,opacity,width;
}
#learn-card.lc-centre {
  opacity:1; transform:translate(-50%,-50%) scale(1);
  transition:opacity 0.22s ease, transform 0.42s cubic-bezier(.34,1.56,.64,1);
}
#learn-card.lc-flying {
  opacity:1; transform:translate(0,0) scale(1); width:var(--card-rest-w);
  transition:top 0.52s cubic-bezier(.4,0,.2,1), left 0.52s cubic-bezier(.4,0,.2,1),
             transform 0.52s cubic-bezier(.4,0,.2,1), width 0.52s ease, opacity 0.15s ease;
}
#learn-card.lc-rest {
  opacity:1; transform:translate(0,0) scale(1); width:var(--card-rest-w);
  top:12px !important; left:12px !important;
  transition:opacity 0.5s ease, transform 0.5s ease;
}
#learn-card.lc-out {
  opacity:0; transform:translate(0,0) scale(0.88) translateY(-10px);
  transition:opacity 0.42s ease, transform 0.42s ease;
}
#learn-card.lc-rest::before {
  content:''; position:absolute; inset:-10px; border-radius:46px;
  border:3px solid; border-color:inherit; opacity:0.5;
  animation:cardPulse 1.4s ease-in-out infinite; pointer-events:none;
}
@keyframes cardPulse {
  0%,100% { transform:scale(1); opacity:0.3; }
  50%      { transform:scale(1.05); opacity:0.75; }
}
#learn-key {
  font-family:'Fredoka One',cursive;
  font-size:clamp(5rem,16vw,11rem); line-height:1; color:#fff;
  text-shadow:0 4px 28px rgba(255,217,61,0.65);
  letter-spacing:-2px; margin-bottom:4px; transition:font-size 0.52s ease;
}
#learn-card.lc-flying #learn-key,
#learn-card.lc-rest   #learn-key { font-size:clamp(1.8rem,5vw,3.8rem); }
#learn-phrase {
  font-family:'Fredoka One',cursive;
  font-size:clamp(1.4rem,4.5vw,2.6rem); color:#fff;
  line-height:1.25; text-align:center; margin-bottom:8px; transition:font-size 0.52s ease;
}
#learn-card.lc-flying #learn-phrase,
#learn-card.lc-rest   #learn-phrase { font-size:clamp(0.7rem,1.8vw,1.1rem); }
#learn-emoji {
  font-size:clamp(4rem,12vw,8rem); line-height:1;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,0.5));
  margin-bottom:12px; transition:font-size 0.52s ease;
}
#learn-card.lc-flying #learn-emoji,
#learn-card.lc-rest   #learn-emoji { font-size:clamp(1.4rem,3.5vw,2.8rem); }
#learn-emoji.pop { animation:emojiWiggle 0.62s ease; }
.learn-img-el { width:1em; height:1em; object-fit:contain; vertical-align:middle; border-radius:14%; }
@keyframes emojiWiggle {
  0%   { transform:scale(0.2) rotate(-20deg); }
  50%  { transform:scale(1.3)  rotate(10deg); }
  75%  { transform:scale(0.92) rotate(-5deg); }
  100% { transform:scale(1)    rotate(0deg);  }
}
.lc-bar-track { width:100%; height:7px; border-radius:7px; background:rgba(255,255,255,0.12); overflow:hidden; }
.lc-bar-fill  { height:100%; border-radius:7px; animation:shrinkBar 3s linear forwards; box-shadow:0 0 8px currentColor; }
@keyframes shrinkBar { from{width:100%} to{width:0%} }

/* ══════════════════════════════════════
   HUD  (responsive)
══════════════════════════════════════ */
#hud {
  position:fixed; top:max(12px, env(safe-area-inset-top)); right:12px;
  z-index:800; display:flex; gap:8px; align-items:center;
}
#score-box {
  font-family:'Fredoka One',cursive; font-size:clamp(0.9rem,3vw,1.2rem); color:#ffd93d;
  background:rgba(255,255,255,0.07); border:1.5px solid rgba(255,217,61,0.3);
  border-radius:50px; padding:5px 14px; backdrop-filter:blur(10px);
  transition:transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
#fs-btn {
  background:rgba(255,255,255,0.08); border:1.5px solid rgba(255,255,255,0.18);
  color:#fff; font-family:'Nunito',sans-serif; font-size:clamp(0.72rem,2.5vw,0.88rem); font-weight:700;
  padding:6px 14px; border-radius:50px; cursor:pointer;
  backdrop-filter:blur(10px); transition:background 0.2s,transform 0.15s;
  -webkit-tap-highlight-color:transparent;
}
#fs-btn:hover { background:rgba(255,255,255,0.16); }
#fs-btn:active { transform:scale(0.95); }

/* ══════════════════════════════════════
   PROGRESS BAR  (responsive, scrollable on small screens)
══════════════════════════════════════ */
#progress-bar {
  position:fixed; z-index:800;
  display:flex; gap:3px; flex-wrap:wrap;
  justify-content:center;
  padding:6px 12px;
  background:rgba(4,13,31,0.82); border-radius:40px;
  border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(12px);
  /* Mobile: sit just above on-screen keyboard */
  bottom: calc(env(safe-area-inset-bottom) + 42px);
  left:50%; transform:translateX(-50%);
  max-width:96vw;
}
.prog-letter {
  font-family:'Fredoka One',cursive; font-size:clamp(0.6rem,2vw,0.78rem);
  width:clamp(18px,4vw,24px); height:clamp(18px,4vw,24px); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.3);
  transition:background 0.3s,color 0.3s,transform 0.3s;
}
.prog-letter.done { background:#ffd93d; color:#040d1f; transform:scale(1.2); box-shadow:0 0 10px #ffd93d99; }

/* ══════════════════════════════════════
   ON-SCREEN KEYBOARD  (mobile only)
══════════════════════════════════════ */
#mobile-keyboard {
  display:none; /* hidden on desktop */
  position:fixed; bottom:0; left:0; right:0; z-index:850;
  background:rgba(4,13,31,0.96); backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,0.08);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
  flex-direction:column; gap:4px;
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}
.kb-row {
  display:flex; justify-content:center; gap:4px; flex-wrap:nowrap;
}
.kb-key {
  font-family:'Fredoka One',cursive;
  font-size:clamp(0.9rem,3.2vw,1.3rem);
  color:#fff;
  background:rgba(255,255,255,0.10);
  border:1.5px solid rgba(255,255,255,0.15);
  border-radius:10px;
  /* equal sizing, fill row */
  flex:1; min-width:0;
  max-width:clamp(28px,8vw,52px);
  height:clamp(36px,8vw,50px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background 0.1s, transform 0.1s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  position:relative;
  overflow:hidden;
}
.kb-key:active, .kb-key.pressed {
  background:rgba(255,217,61,0.28);
  border-color:rgba(255,217,61,0.5);
  transform:scale(0.91);
}
/* Number row slightly tinted */
.kb-key.num {
  background:rgba(77,150,255,0.12);
  border-color:rgba(77,150,255,0.25);
  font-size:clamp(0.8rem,2.8vw,1.1rem);
}
/* Special keys */
.kb-key.wide {
  max-width: clamp(50px,13vw,90px);
  flex:2;
  font-size:clamp(0.65rem,2vw,0.85rem);
  background:rgba(255,255,255,0.06);
}
/* Touch ripple on key */
.kb-ripple {
  position:absolute; border-radius:50%;
  background:rgba(255,217,61,0.35);
  transform:translate(-50%,-50%) scale(0);
  animation:kbRipple 0.4s ease-out forwards;
  pointer-events:none;
}
@keyframes kbRipple {
  to { transform:translate(-50%,-50%) scale(4); opacity:0; }
}

/* ══════════════════════════════════════
   EFFECTS
══════════════════════════════════════ */
.burst {
  position:fixed; pointer-events:none; z-index:500;
  font-family:'Fredoka One',cursive;
  font-size:clamp(2.5rem,10vw,9rem); color:#fff; text-align:center;
  animation:burstAnim 0.95s cubic-bezier(.22,1,.36,1) forwards;
  text-shadow:0 4px 30px rgba(0,0,0,0.45);
}
@keyframes burstAnim {
  0%   { opacity:0; transform:scale(0.15) rotate(var(--rot)); }
  30%  { opacity:1; transform:scale(1.18) rotate(var(--rot)); }
  70%  { opacity:1; transform:scale(1.0)  rotate(var(--rot)); }
  100% { opacity:0; transform:scale(0.65) translateY(-70px) rotate(var(--rot)); }
}
.word-bubble {
  position:fixed; pointer-events:none; z-index:510;
  font-family:'Bubblegum Sans',cursive; font-size:clamp(1rem,3.5vw,1.5rem);
  background:rgba(255,255,255,0.11); backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,0.22); border-radius:50px;
  padding:7px 18px; color:#fff; white-space:nowrap;
  animation:bubblePop 1.5s ease forwards;
}
@keyframes bubblePop {
  0%   { opacity:0; transform:translateX(-50%) scale(0.5) translateY(0); }
  20%  { opacity:1; transform:translateX(-50%) scale(1.08) translateY(-10px); }
  75%  { opacity:1; transform:translateX(-50%) scale(1)    translateY(-30px); }
  100% { opacity:0; transform:translateX(-50%) scale(0.88) translateY(-62px); }
}
.click-ring {
  position:fixed; pointer-events:none; z-index:400;
  border-radius:50%; border:4px solid; animation:ringOut 0.65s ease-out forwards;
}
@keyframes ringOut {
  0%   { width:10px; height:10px; opacity:1; }
  100% { width:150px;height:150px;opacity:0; }
}
.emoji-rain {
  position:fixed; pointer-events:none; z-index:300;
  font-size:clamp(1.8rem,5vw,2.8rem); animation:fall linear forwards;
}
@keyframes fall {
  0%   { transform:translateY(0) rotate(0deg); opacity:1; }
  100% { transform:translateY(110vh) rotate(720deg); opacity:0; }
}
.confetti {
  position:fixed; pointer-events:none; z-index:350;
  width:10px; height:10px; border-radius:2px; animation:confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { opacity:1; }
  100% { transform:translateY(100vh) rotate(900deg); opacity:0; }
}
.comic-pop {
  position:fixed; pointer-events:none; z-index:600;
  font-size:clamp(3rem,11vw,10rem);
  animation:comicPop 1.1s cubic-bezier(.22,1,.36,1) forwards;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,0.6));
}
@keyframes comicPop {
  0%   { opacity:0; transform:scale(0.1) rotate(-20deg); }
  35%  { opacity:1; transform:scale(1.25) rotate(8deg); }
  65%  { opacity:1; transform:scale(1.05) rotate(-4deg); }
  100% { opacity:0; transform:scale(0.7) translateY(-80px) rotate(15deg); }
}
.bg-flash { position:fixed; inset:0; pointer-events:none; z-index:1; animation:flashOut 0.35s ease forwards; }
@keyframes flashOut { 0%{opacity:1} 100%{opacity:0} }

/* ══════════════════════════════════════
   WINNER OVERLAY
══════════════════════════════════════ */
#winner {
  position:fixed; inset:0; z-index:3000;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(4,13,31,0.92); backdrop-filter:blur(16px); cursor:pointer;
  padding:20px;
}
#winner-inner {
  display:flex; flex-direction:column; align-items:center;
  animation:winnBounce 0.7s cubic-bezier(.34,1.56,.64,1) forwards;
}
#winner h1 {
  font-family:'Fredoka One',cursive; font-size:clamp(2rem,7vw,5.5rem);
  color:#ffd93d; text-shadow:0 0 50px #ffd93dcc;
  text-align:center; line-height:1.2; padding:0 10px;
}
#winner-stars {
  font-size:clamp(2rem,6vw,5rem); margin:10px 0; letter-spacing:6px;
  animation:starPop 0.6s 0.3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes starPop { 0%{transform:scale(0)} 100%{transform:scale(1)} }
#winner p {
  font-family:'Bubblegum Sans',cursive; font-size:clamp(1rem,3vw,1.7rem);
  color:#fff; margin-bottom:22px; text-align:center;
}
#winner-close {
  padding:14px 40px;
  font-family:'Fredoka One',cursive; font-size:clamp(1.1rem,4vw,1.5rem);
  background:linear-gradient(135deg,#ffd93d,#ff9f43);
  color:#040d1f; border:none; border-radius:60px; cursor:pointer;
  box-shadow:0 0 40px #ffd93daa; letter-spacing:0.03em;
  animation:btnPop 0.6s 0.5s cubic-bezier(.34,1.56,.64,1) both;
  transition:transform 0.15s; -webkit-tap-highlight-color:transparent;
}
#winner-close:active { transform:scale(0.94); }
@keyframes btnPop { 0%{opacity:0;transform:scale(0.3)} 100%{opacity:1;transform:scale(1)} }
@keyframes winnBounce { 0%{opacity:0;transform:scale(0.4)} 60%{transform:scale(1.06)} 100%{opacity:1;transform:scale(1)} }
#winner-hint {
  margin-top:16px; font-family:'Nunito',sans-serif; font-size:clamp(0.75rem,2.5vw,0.88rem);
  font-weight:700; color:rgba(255,255,255,0.35); letter-spacing:0.05em;
  animation:btnPop 0.5s 0.9s both; text-align:center;
}

/* ══════════════════════════════════════
   FOOTER / HINT
══════════════════════════════════════ */
#footer {
  position:fixed; left:0; right:0; z-index:900;
  text-align:center; padding:5px 10px;
  font-family:'Nunito',sans-serif; font-size:clamp(0.58rem,1.8vw,0.72rem); font-weight:700;
  color:rgba(255,255,255,0.28);
  background:rgba(4,13,31,0.92); backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,0.05); letter-spacing:0.04em;
  /* Push footer above progress bar */
  bottom: calc(env(safe-area-inset-bottom) + 0px);
}
#footer span { color:rgba(255,200,60,0.6); }
#hint {
  position:fixed; z-index:700; color:rgba(255,255,255,0.2);
  font-size:clamp(0.65rem,2.2vw,0.8rem); font-weight:700; letter-spacing:0.05em;
  pointer-events:none; white-space:nowrap;
  bottom:calc(env(safe-area-inset-bottom) + 88px);
  left:50%; transform:translateX(-50%);
}

/* ══════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════ */

/* Tablet portrait and smaller */
@media (max-width: 768px) {
  #mobile-keyboard { display:flex; }
  /* Push progress bar above keyboard */
  #progress-bar {
    bottom: calc(env(safe-area-inset-bottom) + 182px);
  }
  #hint {
    bottom: calc(env(safe-area-inset-bottom) + 218px);
  }
  #footer {
    bottom: calc(env(safe-area-inset-bottom) + 148px);
  }
}

/* Very small phones (< 380px wide) */
@media (max-width: 380px) {
  .kb-key { border-radius:7px; height:clamp(32px,9vw,42px); }
  #progress-bar { gap:2px; padding:5px 8px; }
  .prog-letter { width:16px; height:16px; font-size:0.55rem; }
}

/* Landscape mobile — compact keyboard */
@media (max-height: 500px) and (max-width: 900px) {
  #mobile-keyboard { display:flex; }
  .kb-key { height:28px; font-size:0.8rem; border-radius:6px; }
  #progress-bar {
    bottom: calc(env(safe-area-inset-bottom) + 120px);
  }
  #footer {
    bottom: calc(env(safe-area-inset-bottom) + 95px);
  }
  #hint { display:none; }
}