/* ==== Kids · Nintendo-style design system ==== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;800&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap');
:root{
  --sky:#87ceeb;
  --sky-2:#b3e1ff;
  --cloud:#ffffff;
  --cream:#fff8dc;
  --paper:#fffdf4;
  --grass:#7cdb6d;
  --grass-dark:#4aa83d;
  --fire:#ff6b6b;
  --fire-dark:#c83a3a;
  --banana:#ffe066;
  --banana-dark:#e5b000;
  --candy:#ff9ec7;
  --candy-dark:#d85a96;
  --berry:#a78bfa;
  --berry-dark:#7a5be0;
  --ocean:#5eb7ff;
  --ocean-dark:#2c7fd0;
  --orange:#ff9944;
  --orange-dark:#d16b20;
  --ink:#3d2b1f;
  --line:#2a1a0e;
  --shadow:rgba(61,43,31,.32);
}
*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;
  font-family:"ZCOOL KuaiLe","Baloo 2","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
/* chunky bean-curd headline font for big titles */
.title,.hero h1,.unit-header .name,.card .cn,.gameover-title,.flash,.popup{
  font-family:"ZCOOL QingKe HuangYou","Baloo 2","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:400 /* chinese font ignores weight; Latin gets regular */}
html,body{width:100%;height:100%;overflow:hidden;color:var(--ink);
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky-2) 50%,#d6f5b8 100%)}
body{position:relative}

/* Cloud background decoration */
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.grid-bg::before, .grid-bg::after{
  content:"";position:absolute;border-radius:50%;background:var(--cloud);
  box-shadow:
    200px 80px 0 -5px var(--cloud),
    500px 200px 0 -10px var(--cloud),
    800px 60px 0 -5px var(--cloud),
    1100px 180px 0 0 var(--cloud),
    1400px 90px 0 -8px var(--cloud),
    1700px 220px 0 -3px var(--cloud);
  opacity:.75;filter:blur(1px)}
.grid-bg::before{width:120px;height:50px;top:40px;left:0}
.grid-bg::after{width:90px;height:40px;top:380px;left:0;
  box-shadow:
    250px -100px 0 -5px var(--cloud),
    550px 50px 0 -8px var(--cloud),
    900px -80px 0 -3px var(--cloud),
    1300px 40px 0 -5px var(--cloud),
    1600px -100px 0 -10px var(--cloud)}
.scanlines, .vignette{display:none}

/* Back button */
.back{position:fixed;top:20px;left:20px;z-index:50;cursor:pointer;text-decoration:none;
  font-size:16px;font-weight:900;padding:12px 20px;color:var(--ink);
  background:var(--banana);border:4px solid var(--ink);border-radius:22px;
  box-shadow:0 5px 0 var(--ink),0 8px 16px var(--shadow);
  transition:all .15s}
.back:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink),0 10px 20px var(--shadow)}
.back:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink),0 4px 8px var(--shadow)}

/* Unit header */
.unit-header{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;text-align:center;pointer-events:none}
.unit-header .num{display:inline-block;font-size:14px;font-weight:900;padding:4px 12px;
  background:var(--fire);color:#fff;border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 3px 0 var(--ink);margin-bottom:4px;letter-spacing:.1em}
.unit-header .name{font-size:30px;color:var(--ink);
  text-shadow:2px 3px 0 rgba(255,255,255,.9),3px 5px 0 rgba(61,43,31,.2)}

/* Stats pill */
.pill{position:fixed;top:20px;right:20px;z-index:50;
  display:flex;gap:10px;padding:8px 16px;
  background:var(--paper);border:4px solid var(--ink);border-radius:22px;
  box-shadow:0 5px 0 var(--ink),0 8px 16px var(--shadow);
  font-size:15px;font-weight:900;align-items:center}
.pill span{color:var(--ink)}
.pill b{font-size:22px;color:var(--fire);-webkit-text-stroke:1px var(--ink)}

/* Bottom panel */
.panel{position:fixed;left:10px;right:10px;bottom:10px;z-index:30;
  background:var(--paper);border:4px solid var(--ink);border-radius:28px;
  box-shadow:0 8px 0 var(--ink),0 12px 24px var(--shadow);
  padding:20px 24px;display:flex;gap:16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap}
.panel .question{flex:1;min-width:260px;font-size:18px;line-height:1.5;color:var(--ink);font-weight:700}
.panel .question .highlight{color:var(--fire);font-weight:900;padding:1px 8px;background:var(--banana);border-radius:8px;display:inline-block}
.panel .hint{font-size:13px;color:var(--ink);opacity:.65;margin-top:4px;font-weight:500}
.panel .actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Buttons — chunky Nintendo style */
.btn{cursor:pointer;font-size:18px;font-weight:900;padding:12px 22px;
  background:var(--ocean);border:4px solid var(--ink);border-radius:22px;color:#fff;
  box-shadow:0 5px 0 var(--ink),0 8px 16px var(--shadow);
  transition:all .12s;text-shadow:2px 2px 0 rgba(42,26,14,.5);
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink),0 10px 20px var(--shadow)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink),0 4px 8px var(--shadow)}
.btn.primary{background:var(--fire)}
.btn.danger{background:var(--fire);color:#fff}
.btn.more{background:var(--paper);color:var(--ink);text-shadow:none}
.btn.big{font-size:26px;padding:18px 36px;border-radius:28px;border-width:5px;box-shadow:0 7px 0 var(--ink),0 10px 20px var(--shadow)}
.btn.yellow{background:var(--banana);color:var(--ink);text-shadow:2px 2px 0 rgba(255,255,255,.5)}
.btn.green{background:var(--grass);color:#fff}
.btn.pink{background:var(--candy);color:#fff}
.btn.purple{background:var(--berry);color:#fff}

/* Center canvas stage */
.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;padding:100px 20px 180px}
canvas.board{
  border:6px solid var(--ink);border-radius:24px;
  box-shadow:0 10px 0 var(--ink),0 14px 30px var(--shadow);
  background:transparent;image-rendering:-webkit-optimize-contrast}

/* Feedback flash — BIG BOUNCY */
.flash{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%) scale(0);z-index:60;
  font-size:110px;letter-spacing:.05em;color:var(--banana);
  text-shadow:
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink),
    -3px 3px 0 var(--ink), 3px 3px 0 var(--ink),
    0 8px 0 rgba(61,43,31,.35);
  opacity:0;pointer-events:none;text-align:center}
.flash.show{opacity:1;animation:bounce-in .5s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes bounce-in{
  0%{transform:translate(-50%,-50%) scale(0.2) rotate(-20deg)}
  50%{transform:translate(-50%,-50%) scale(1.3) rotate(8deg)}
  80%{transform:translate(-50%,-50%) scale(.95) rotate(-3deg)}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0)}
}
.flash.red{color:var(--fire)}
.flash.green{color:var(--grass)}
.flash.cyan{color:var(--ocean)}
.flash.gold{color:var(--banana)}

/* Flash sparkles */
.flash::before, .flash::after{
  content:"⭐";position:absolute;font-size:60px;-webkit-text-stroke:0;
  animation:spin 2s linear infinite}
.flash::before{left:-80px;top:10px;animation-delay:0s}
.flash::after{right:-80px;top:-10px;animation-delay:.3s}
@keyframes spin{to{transform:rotate(360deg)}}

/* Explanation bubble — speech-bubble look */
.explain{position:fixed;left:50%;bottom:200px;transform:translateX(-50%) scale(0);z-index:40;
  max-width:560px;padding:18px 26px;background:var(--paper);color:var(--ink);
  border:4px solid var(--ink);border-radius:22px;
  box-shadow:0 6px 0 var(--ink),0 10px 20px var(--shadow);
  font-size:16px;line-height:1.5;text-align:center;font-weight:700;
  transition:transform .3s cubic-bezier(.3,1.4,.5,1);pointer-events:none}
.explain.show{transform:translateX(-50%) scale(1)}
.explain.bad{background:#ffe0e0}
.explain.good{background:#e8ffd7}
.explain .tag{display:inline-block;padding:3px 14px;font-size:13px;font-weight:900;margin-right:10px;
  background:var(--grass);color:#fff;border:2px solid var(--ink);border-radius:14px;
  box-shadow:0 2px 0 var(--ink)}
.explain.bad .tag{background:var(--fire)}
.explain b{color:var(--fire)}
.explain.good b{color:var(--grass-dark)}

/* Camera toggle button — big and obvious */
.cam-toggle{position:fixed;top:76px;left:20px;z-index:55;cursor:pointer;
  font-size:18px;padding:14px 22px;color:#fff;
  background:linear-gradient(180deg,var(--candy) 0%,var(--candy-dark) 100%);
  border:4px solid var(--ink);border-radius:24px;
  box-shadow:0 6px 0 var(--ink),0 10px 18px var(--shadow);
  transition:all .12s;text-shadow:2px 2px 0 rgba(0,0,0,.25);
  animation:pulseGlow 2s ease-in-out infinite}
.cam-toggle:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--ink),0 14px 22px var(--shadow)}
.cam-toggle:active{transform:translateY(3px);box-shadow:0 3px 0 var(--ink),0 5px 10px var(--shadow)}
.cam-toggle.on{background:linear-gradient(180deg,var(--grass),var(--grass-dark));animation:none}
@keyframes pulseGlow{0%,100%{box-shadow:0 6px 0 var(--ink),0 10px 18px var(--shadow),0 0 0 rgba(255,158,199,0)}50%{box-shadow:0 6px 0 var(--ink),0 10px 18px var(--shadow),0 0 24px rgba(255,158,199,.7)}}

/* First-time gesture tutorial overlay */
.gesture-intro{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.gesture-intro.show{display:flex}
.gesture-intro .box{background:var(--paper);border:5px solid var(--ink);border-radius:28px;
  padding:32px 40px;max-width:520px;text-align:center;
  box-shadow:0 10px 0 var(--ink),0 14px 30px rgba(0,0,0,.4);
  animation:popIn .4s cubic-bezier(.3,1.4,.5,1)}
@keyframes popIn{0%{transform:scale(.4) rotate(-6deg)}100%{transform:scale(1) rotate(0)}}
.gesture-intro h2{font-size:32px;color:var(--fire);margin-bottom:12px;
  text-shadow:-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink),0 4px 0 rgba(61,43,31,.2)}
.gesture-intro p{font-size:18px;color:var(--ink);line-height:1.6;margin:10px 0}
.gesture-intro p b{color:var(--fire);padding:0 8px;background:var(--banana);border-radius:8px;border:2px solid var(--ink);display:inline-block}
.gesture-intro .arrow{font-size:60px;line-height:1;margin:10px 0;animation:bounce-arrow 1s ease-in-out infinite}
@keyframes bounce-arrow{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.gesture-intro .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* Camera preview — bigger, with detected gesture */
.cam-preview{position:fixed;top:82px;left:220px;width:200px;height:150px;z-index:55;
  border:4px solid var(--ink);border-radius:16px;background:#000;display:none;overflow:hidden;
  box-shadow:0 4px 0 var(--ink),0 6px 12px var(--shadow)}
.cam-preview.show{display:block}
.cam-preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam-preview canvas.skeleton{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:scaleX(-1)}
.cam-indicator{position:absolute;top:8px;right:8px;width:14px;height:14px;border-radius:50%;background:#666;border:2px solid #fff;transition:all .15s}
.cam-label{position:absolute;bottom:6px;left:8px;right:8px;font-size:11px;font-weight:900;color:#fff;
  text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.cam-detected{position:absolute;top:8px;left:8px;padding:4px 10px;border-radius:12px;font-size:13px;font-weight:900;
  background:var(--banana);color:var(--ink);border:2px solid var(--ink);min-width:40px;text-align:center;
  text-shadow:none}
.cam-detected:empty{display:none}

/* Gesture hint */
.gesture-hint{position:fixed;top:82px;right:20px;z-index:55;max-width:320px;
  padding:10px 18px;font-size:14px;line-height:1.4;color:var(--ink);font-weight:700;
  background:var(--banana);border:4px solid var(--ink);border-radius:20px;
  box-shadow:0 4px 0 var(--ink),0 6px 12px var(--shadow)}
.gesture-hint:empty{display:none}

/* Virtual hand cursor */
.hand-cursor{position:fixed;width:36px;height:36px;background:radial-gradient(circle,var(--banana),var(--orange));
  border:4px solid var(--ink);border-radius:50%;pointer-events:none;z-index:65;
  transform:translate(-50%,-50%);box-shadow:0 4px 0 var(--ink),0 0 20px rgba(255,224,102,.8);
  display:none}
.hand-cursor.show{display:block}
.hand-cursor.pinch{background:radial-gradient(circle,var(--fire),var(--candy-dark));
  transform:translate(-50%,-50%) scale(1.4);box-shadow:0 0 30px var(--fire)}
.hand-cursor::after{content:"👆";position:absolute;font-size:24px;top:0;left:50%;
  transform:translate(-50%,-110%) rotate(0deg);filter:drop-shadow(2px 2px 0 var(--ink))}

@media(max-width:760px){
  .unit-header .name{font-size:22px}
  .back{font-size:13px;padding:10px 14px;border-radius:18px;border-width:3px}
  .pill{font-size:13px;padding:6px 12px}
  .panel{padding:14px 16px}
  .panel .question{font-size:15px}
  .btn{font-size:14px;padding:10px 16px;border-width:3px;border-radius:18px}
  .flash{font-size:70px;-webkit-text-stroke:4px var(--ink)}
  .cam-preview{width:120px;height:90px;left:160px;top:70px}
  .cam-toggle{top:72px;font-size:12px;padding:8px 12px}
  .gesture-hint{top:130px;right:10px;max-width:220px;font-size:12px}
}