/* ============================================================
   BOP BOT — friendly-robot arcade aesthetic for kids
   Copy the robot's full-body moves before the timer runs out.
   ============================================================ */
@font-face{font-family:'Fredoka';src:url('../fonts/Fredoka-var.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Nunito';src:url('../fonts/Nunito-var.woff2') format('woff2');font-weight:400 800;font-display:swap}

:root{
  --ink:#0b2545;
  --cyan:#28e0ff;
  --cyan-deep:#0aa6d6;
  --lime:#a6ff3d;
  --pink:#ff5da2;
  --orange:#ff9d3d;
  --yellow:#ffe14a;
  --sky1:#06122b;
  --sky2:#0c2c5c;
  --sky3:#1e6bd6;
  --card:#f3fbff;
  --card-line:#c8e6f5;
  --shadow:0 18px 44px rgba(4,18,43,.5);
  --glow-cyan:0 0 26px rgba(40,224,255,.75);
  --fd:'Fredoka',system-ui,sans-serif;
  --fb:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%}
body{
  font-family:var(--fb);color:var(--ink);overflow:hidden;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  user-select:none;cursor:default;
}

/* deep arcade sky */
.sky{position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(40,224,255,.32), transparent 50%),
    radial-gradient(80% 60% at 85% 100%, rgba(255,93,162,.28), transparent 55%),
    linear-gradient(180deg,#06122b 0%, var(--sky1) 30%, var(--sky2) 76%, #123f7a 100%);
}
/* retro perspective grid floor */
.grid-floor{position:fixed;left:-25%;right:-25%;bottom:0;height:52%;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(40,224,255,.35) 2px, transparent 2px),
    linear-gradient(90deg, rgba(40,224,255,.22) 2px, transparent 2px);
  background-size:64px 64px;
  transform:perspective(340px) rotateX(62deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top, #000 20%, transparent 92%);
  -webkit-mask-image:linear-gradient(to top, #000 20%, transparent 92%);
  animation:floor 3.2s linear infinite;
}
@keyframes floor{to{background-position:0 64px}}
/* floating energy bolts (JS fills) */
.bolts{position:fixed;inset:0;z-index:2;pointer-events:none}
.bolt{position:absolute;font-size:20px;opacity:.5;animation:boltfloat var(--fdur,14s) ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(40,224,255,.6))}
@keyframes boltfloat{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(var(--mx,20px),var(--my,-30px)) rotate(18deg)}100%{transform:translate(0,0) rotate(0)}}

#app{position:relative;z-index:3;height:100%}
.screen{height:100%;display:grid;place-items:center;padding:20px}

.pop{opacity:0;transform:translateY(20px) scale(.96);animation:pop .6s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--d)}
@keyframes pop{to{opacity:1;transform:none}}

/* ───────────────────────── TITLE ───────────────────────── */
.title-card{text-align:center;max-width:640px}
.bot{font-size:104px;line-height:1;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));animation:pop .6s cubic-bezier(.34,1.56,.64,1) forwards, botbob 2.4s ease-in-out infinite 1s}
@keyframes botbob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
.game-title{font-family:var(--fd);font-weight:700;font-size:clamp(56px,13vw,124px);line-height:.9;letter-spacing:.02em;
  color:#fff;text-shadow:0 4px 0 var(--cyan-deep),0 8px 26px rgba(0,0,0,.4);margin-top:6px}
.game-title span{color:var(--cyan);display:block;text-shadow:0 4px 0 #067ba3,0 0 30px rgba(40,224,255,.7)}
.subtitle{font-family:var(--fd);font-weight:500;font-size:clamp(18px,4vw,26px);color:#d7f6ff;margin:18px 0 24px}

.move-preview{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:26px}
.mv-chip{display:flex;align-items:center;gap:8px;background:rgba(40,224,255,.12);
  border:2px solid rgba(40,224,255,.4);border-radius:999px;padding:8px 14px;
  font-family:var(--fd);font-weight:500;color:#eafaff;font-size:14px;backdrop-filter:blur(4px)}
.mv-chip .e{font-size:22px}

/* difficulty toggle */
.diff-toggle{display:flex;justify-content:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.diff-btn{font-family:var(--fd);font-weight:600;font-size:15px;color:#eafaff;cursor:pointer;
  background:rgba(40,224,255,.1);border:2px solid rgba(40,224,255,.34);border-radius:999px;
  padding:10px 18px;transition:transform .12s,background .15s,border-color .15s}
.diff-btn:hover{transform:translateY(-2px)}
.diff-btn.active{background:linear-gradient(180deg,#7ff0ff,var(--cyan-deep));color:#022b39;
  border-color:#fff;box-shadow:0 6px 0 #067ba3,0 10px 20px rgba(0,0,0,.35)}
.diff-note{font-family:var(--fd);font-weight:500;font-size:14px;color:#a9d6f0;min-height:20px;margin-bottom:22px}

/* chunky buttons */
.big-btn{font-family:var(--fd);font-weight:600;font-size:30px;color:#022b39;cursor:pointer;border:none;
  padding:20px 46px;border-radius:999px;display:inline-flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#7ff0ff,var(--cyan-deep));
  box-shadow:0 10px 0 #067ba3,0 18px 34px rgba(0,0,0,.4);
  transition:transform .12s,box-shadow .12s}
.big-btn .bb-emoji{font-size:30px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.big-btn:hover{transform:translateY(-3px);box-shadow:0 13px 0 #067ba3,0 22px 40px rgba(0,0,0,.45)}
.big-btn:active{transform:translateY(6px);box-shadow:0 4px 0 #067ba3,0 8px 20px rgba(0,0,0,.4)}
.big-btn:disabled{filter:saturate(.5) brightness(.9);cursor:wait}

.rc-btnrow{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.ghost-btn{font-family:var(--fd);font-weight:600;font-size:20px;color:var(--cyan-deep);cursor:pointer;
  border:3px solid var(--cyan-deep);background:transparent;padding:14px 28px;border-radius:999px;
  display:inline-flex;align-items:center;gap:10px;transition:transform .12s,background .12s}
.ghost-btn .bb-emoji{font-size:20px}
.ghost-btn:hover{background:rgba(40,224,255,.12);transform:translateY(-2px)}
.ghost-btn:active{transform:translateY(1px)}

.title-status{margin-top:22px;font-family:var(--fd);font-weight:500;color:#d7f6ff;font-size:16px;min-height:20px}
.title-status.err{color:#ffd0d0}
.grownups{margin-top:20px;font-size:12.5px;line-height:1.5;color:rgba(215,246,255,.6);max-width:460px;margin-left:auto;margin-right:auto}

/* ───────────────────────── ARENA ───────────────────────── */
#arena{position:relative;height:100%;overflow:hidden}
#cam,#fx{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
#cam{filter:saturate(1.05) brightness(.9)}
.arena-tint{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(40,224,255,.22), transparent 55%),
    linear-gradient(180deg, rgba(6,18,43,.55), rgba(6,18,43,.1) 30%, rgba(6,18,43,.1) 68%, rgba(6,18,43,.7));
  mix-blend-mode:multiply}
#fx{z-index:2}

/* HUD badges */
.hud{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:12px;padding:16px 18px}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(243,251,255,.92);
  border:3px solid #fff;border-radius:999px;padding:8px 16px;font-family:var(--fd);font-weight:600;
  box-shadow:0 8px 20px rgba(4,18,43,.4);color:var(--ink)}
.badge .b-ico{font-size:22px}
.badge b{font-size:26px;min-width:1ch}
.score-badge b{color:var(--cyan-deep)}
.streak-badge{transition:transform .15s;transform-origin:center}
.streak-badge b{color:var(--orange)}
.streak-badge.bump{transform:scale(1.3) rotate(-4deg)}
.best-badge{margin-left:auto}
.best-badge b{color:#b58a00}
.sound-badge{cursor:pointer;font-size:22px;padding:8px 14px}
.sound-badge[aria-pressed="true"]{opacity:.55}

/* slim move command banner along the bottom — the voice explains the move, so
   this stays low-profile and doesn't cover the centered player. Name + hold
   ring sit in a row; the shrinking timer is a thin strip underneath. */
.movecard{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:7;width:min(560px,92vw);
  display:flex;align-items:center;gap:14px;
  background:rgba(243,251,255,.9);border:3px solid rgba(255,255,255,.85);border-radius:999px;
  padding:10px 18px;backdrop-filter:blur(3px);
  box-shadow:0 10px 28px rgba(4,18,43,.4);animation:cardin .34s cubic-bezier(.34,1.56,.64,1)}
@keyframes cardin{from{transform:translate(-50%,30px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.movecard.leaving{animation:cardout .26s forwards}
@keyframes cardout{to{transform:translate(-50%,22px) scale(.94);opacity:0}}
.movecard.locked{animation:cardpop .4s}
@keyframes cardpop{0%{transform:translate(-50%,0) scale(1)}40%{transform:translate(-50%,0) scale(1.04)}100%{transform:translate(-50%,0) scale(1)}}
.mc-name{flex:1;font-family:var(--fd);font-weight:700;font-size:clamp(22px,4.6vw,32px);color:var(--ink);
  line-height:1.05;text-align:left}

/* shrinking timer bar — thin strip pinned to the banner's bottom edge */
.mc-timer{position:absolute;left:18px;right:18px;bottom:5px;height:6px;background:#dceff8;border-radius:999px;overflow:hidden}
.mc-timer-fill{height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--lime),var(--cyan));transition:width .1s linear}
.mc-timer-fill.warn{background:linear-gradient(90deg,var(--orange),var(--pink))}

/* hold-to-lock ring, inline at the right of the banner */
.mc-ringrow{position:relative;flex:0 0 auto;width:52px;height:52px}
.mc-ring{width:100%;height:100%;transform:rotate(-90deg)}
.mcr-track{fill:#fff;stroke:#c8e6f5;stroke-width:9}
.mcr-fill{fill:none;stroke:var(--lime);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .08s linear;
  filter:drop-shadow(0 0 5px rgba(166,255,61,.9))}
.mc-ringlabel{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fd);font-weight:600;font-size:10px;color:var(--cyan-deep);text-align:center;line-height:1}

/* body hint */
.bodyhint{position:absolute;left:50%;top:52%;transform:translateX(-50%);z-index:7;
  background:rgba(243,251,255,.95);border:3px solid #fff;border-radius:999px;padding:12px 22px;
  font-family:var(--fd);font-weight:600;font-size:19px;color:var(--ink);box-shadow:var(--shadow);
  display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .3s;text-align:center;max-width:90vw}
.bodyhint .bh-emoji{font-size:26px;animation:wiggle 1s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.bodyhint.show{opacity:1}

/* floating praise */
.praise{position:absolute;left:50%;top:38%;transform:translateX(-50%);z-index:9;
  font-family:var(--fd);font-weight:700;font-size:clamp(40px,9vw,74px);color:#fff;
  text-shadow:0 3px 0 var(--cyan-deep),0 0 30px rgba(40,224,255,.9);pointer-events:none;
  animation:praise 1s ease-out forwards}
@keyframes praise{0%{transform:translate(-50%,10px) scale(.5);opacity:0}
  25%{transform:translate(-50%,-6px) scale(1.15);opacity:1}
  70%{opacity:1}100%{transform:translate(-50%,-60px) scale(1);opacity:0}}

/* get-ready / countdown overlay */
.ready{position:absolute;inset:0;z-index:8;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 45%, rgba(6,18,43,.35), rgba(6,18,43,.74));backdrop-filter:blur(2px)}
.ready-big{font-size:120px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.45))}
.ready-big.count{font-family:var(--fd);font-weight:700;color:#fff;text-shadow:0 0 34px rgba(40,224,255,.9);animation:countpop .6s ease-out}
@keyframes countpop{0%{transform:scale(.4);opacity:0}40%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
.ready-text{font-family:var(--fd);font-weight:600;font-size:clamp(24px,6vw,40px);color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.55);margin-top:12px;max-width:88vw}

/* ───────────────────────── RESULTS ───────────────────────── */
.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;
  background:radial-gradient(circle at 50% 40%, rgba(30,107,214,.6), rgba(6,18,43,.92))}
.result-card{position:relative;text-align:center;max-width:520px;width:100%;
  background:var(--card);border:5px solid #fff;border-radius:36px;padding:40px 34px 34px;
  box-shadow:var(--shadow);animation:pop .55s cubic-bezier(.34,1.56,.64,1)}
.rc-burst{position:absolute;top:-30px;left:50%;transform:translateX(-50%);font-size:60px;animation:botbob 2.5s ease-in-out infinite}
.rc-rankemoji{font-size:96px;line-height:1;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28));animation:botbob 3s ease-in-out infinite}
.rc-rank{font-family:var(--fd);font-weight:700;font-size:42px;color:var(--sky3);margin:4px 0 4px;line-height:1}
.rc-reason{font-family:var(--fd);font-weight:500;font-size:17px;color:#5a86a5;margin-bottom:10px}
.rc-score{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--fd);font-weight:700;font-size:56px;color:var(--cyan-deep)}
.rc-score span{font-size:44px}
.rc-stats{display:flex;justify-content:center;gap:24px;margin:20px 0 20px}
.rc-stat label{display:block;font-family:var(--fd);font-weight:600;font-size:12px;letter-spacing:.06em;color:#5a86a5;margin-bottom:4px}
.rc-stat b{font-family:var(--fd);font-weight:700;font-size:30px;color:var(--ink)}

/* high-score board */
.rc-board{margin:0 0 24px;text-align:left}
.rcb-title{font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.06em;color:#5a86a5;
  text-align:center;margin-bottom:10px}
.rcb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;
  max-height:230px;overflow-y:auto}
.rcb-row{display:flex;align-items:center;gap:10px;padding:7px 14px;border-radius:12px;
  background:rgba(40,224,255,.09);border:2px solid transparent;font-family:var(--fd)}
.rcb-rank{flex:0 0 34px;font-weight:700;font-size:17px;color:#5a86a5;text-align:center}
.rcb-score{flex:1;font-weight:700;font-size:20px;color:var(--ink)}
.rcb-tag{flex:0 0 auto;font-weight:700;font-size:13px;letter-spacing:.05em;color:var(--cyan-deep)}
.rcb-row.you{background:linear-gradient(180deg,#dffaff,#b6f0ff);border-color:var(--cyan-deep);
  box-shadow:0 4px 0 #067ba3,0 8px 18px rgba(0,0,0,.18);animation:youPulse 1.1s ease-in-out infinite}
.rcb-row.you .rcb-rank{color:var(--cyan-deep)}
.rcb-empty{padding:10px;text-align:center;font-family:var(--fd);font-weight:500;font-size:15px;color:#5a86a5}
@keyframes youPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

@media (max-height:560px){
  .mc-name{font-size:22px}
}