/* ===== BWB KIDS — CARTOON UI KIT (thạch bóng 3D) ===== *
 * Dùng chung cho Hub + 93 game. Nhúng SAU <style> nội tuyến để đè font.
 * Font Baloo 2 self-host (mập-tròn, có tiếng Việt). */
@import url("./fonts/baloo2.css");

:root{
  --c-font:'Baloo 2',-apple-system,"SF Pro Rounded","Baloo 2",system-ui,sans-serif;
  --c-green-1:#7ed83f; --c-green-2:#2aa015; --c-green-3:#19710c;
  --c-pink-1:#ff4593;  --c-pink-2:#d81a6a;  --c-pink-3:#9c0e4d;
  --c-yellow-1:#ffc224; --c-yellow-2:#ef8606;--c-yellow-3:#b35f04;
  --c-blue-1:#34a4ff;  --c-blue-2:#0f72cc;  --c-blue-3:#0a4f95;
  --c-purple-1:#9d52ff;--c-purple-2:#5e22ba;--c-purple-3:#411887;
  /* xanh dương nền panel/pill — đậm hơn */
  --c-pnl-1:#1f7ad8; --c-pnl-2:#0e4f9e; --c-pnl-3:#0a3c79;
}

/* Áp font mập-tròn cho toàn app (đè cả font nội tuyến của game) */
html, body, button, input, select, textarea { font-family: var(--c-font) !important; }

/* ---------- NÚT THẠCH 3D ---------- */
.c-btn{
  position:relative; border:none; cursor:pointer; color:#fff; font-family:var(--c-font);
  font-weight:800; font-size:clamp(16px,4.4vw,23px); letter-spacing:.3px;
  white-space:nowrap; max-width:100%;
  padding:clamp(11px,1.7vh,16px) clamp(18px,4.5vw,28px); border-radius:999px;
  text-shadow:0 2px 0 rgba(0,0,0,.22); -webkit-text-stroke:.3px rgba(0,0,0,.06);
  transition:transform .08s ease, box-shadow .08s ease;
  background:linear-gradient(180deg,var(--c-green-1),var(--c-green-2));
  box-shadow:0 7px 0 var(--c-green-3), 0 11px 16px rgba(0,0,0,.22), inset 0 2px 1px rgba(255,255,255,.55);
}
/* lớp bóng kính trên đỉnh nút */
.c-btn::before{content:"";position:absolute;left:8%;right:8%;top:6%;height:38%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0));pointer-events:none}
.c-btn:active{transform:translateY(6px);box-shadow:0 1px 0 var(--c-green-3),0 3px 7px rgba(0,0,0,.22),inset 0 2px 1px rgba(255,255,255,.5)}
.c-btn--pink  {background:linear-gradient(180deg,var(--c-pink-1),var(--c-pink-2));box-shadow:0 7px 0 var(--c-pink-3),0 11px 16px rgba(0,0,0,.22),inset 0 2px 1px rgba(255,255,255,.55)}
.c-btn--pink:active{box-shadow:0 1px 0 var(--c-pink-3),0 3px 7px rgba(0,0,0,.22),inset 0 2px 1px rgba(255,255,255,.5)}
.c-btn--yellow{background:linear-gradient(180deg,var(--c-yellow-1),var(--c-yellow-2));color:#7a4d00;text-shadow:0 2px 0 rgba(255,255,255,.45);box-shadow:0 7px 0 var(--c-yellow-3),0 11px 16px rgba(0,0,0,.22),inset 0 2px 1px rgba(255,255,255,.6)}
.c-btn--yellow:active{box-shadow:0 1px 0 var(--c-yellow-3),0 3px 7px rgba(0,0,0,.22),inset 0 2px 1px rgba(255,255,255,.5)}
.c-btn--blue  {background:linear-gradient(180deg,var(--c-blue-1),var(--c-blue-2));box-shadow:0 7px 0 var(--c-blue-3),0 11px 16px rgba(0,0,0,.22),inset 0 2px 1px rgba(255,255,255,.55)}
.c-btn--blue:active{box-shadow:0 1px 0 var(--c-blue-3),0 3px 7px rgba(0,0,0,.22),inset 0 2px 1px rgba(255,255,255,.5)}
.c-btn--purple{background:linear-gradient(180deg,var(--c-purple-1),var(--c-purple-2));box-shadow:0 7px 0 var(--c-purple-3),0 11px 16px rgba(0,0,0,.22),inset 0 2px 1px rgba(255,255,255,.55)}
.c-btn--purple:active{box-shadow:0 1px 0 var(--c-purple-3),0 3px 7px rgba(0,0,0,.22),inset 0 2px 1px rgba(255,255,255,.5)}

/* nút tròn icon (home/sound/book...) kiểu thạch */
.c-iconbtn{position:relative;border:none;cursor:pointer;width:48px;height:48px;border-radius:16px;font-size:23px;
  color:#2f6fe0;background:linear-gradient(180deg,#ffffff,#e8f1ff);
  box-shadow:0 5px 0 rgba(120,150,200,.55),0 8px 12px rgba(0,0,0,.18),inset 0 2px 1px rgba(255,255,255,.9);
  transition:transform .08s,box-shadow .08s}
.c-iconbtn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(120,150,200,.55),0 3px 6px rgba(0,0,0,.18)}

/* ---------- PANEL (khung xanh kẻ sọc, viền sáng dày) ---------- */
.c-panel{position:relative;border-radius:30px;padding:18px 20px;color:#fff;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 14px,rgba(255,255,255,0) 14px 28px),
    linear-gradient(180deg,var(--c-pnl-1),var(--c-pnl-2));
  border:5px solid #6fc0ec;
  box-shadow:0 14px 30px rgba(0,0,0,.32),inset 0 0 0 3px var(--c-pnl-3),inset 0 3px 6px rgba(255,255,255,.22)}

/* ---------- BANNER ruy-băng (tiêu đề cam) ---------- */
.c-banner{display:inline-block;position:relative;color:#fff;font-weight:800;white-space:nowrap;
  font-size:clamp(16px,4.4vw,22px);letter-spacing:.5px;text-shadow:0 2px 0 rgba(0,0,0,.25);
  padding:7px 26px;border-radius:14px;
  background:linear-gradient(180deg,var(--c-yellow-1),var(--c-yellow-2));
  box-shadow:0 5px 0 var(--c-yellow-3),0 8px 14px rgba(0,0,0,.25),inset 0 2px 1px rgba(255,255,255,.6)}
.c-banner::after{content:"";position:absolute;left:14px;right:14px;top:5px;height:36%;border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));pointer-events:none}

/* ---------- STATUS pill (sao/xu/năng lượng) ---------- */
.c-status{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:800;white-space:nowrap;
  font-size:clamp(14px,3.8vw,18px);padding:6px 14px 6px 10px;border-radius:999px;
  background:linear-gradient(180deg,var(--c-pnl-1),var(--c-pnl-2));
  box-shadow:0 4px 0 var(--c-pnl-3),0 6px 10px rgba(0,0,0,.2),inset 0 2px 1px rgba(255,255,255,.35)}

/* ---------- thanh tiến trình sao ---------- */
.c-progress{position:relative;height:22px;border-radius:999px;overflow:hidden;
  background:rgba(0,0,0,.22);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.c-progress>span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(180deg,#ff8fc0,#e0457b);box-shadow:inset 0 2px 1px rgba(255,255,255,.5)}

/* ---------- KHUNG ngoài xanh nhạt bo dày (bọc panel) ---------- */
.c-frame{background:linear-gradient(180deg,#c4ecff,#8ccef0);border-radius:36px;padding:11px;
  box-shadow:0 16px 34px rgba(0,0,0,.3),inset 0 3px 4px rgba(255,255,255,.85),inset 0 -5px 7px rgba(70,130,180,.45)}
.c-frame>.c-panel{border:none;box-shadow:inset 0 0 0 3px rgba(31,99,180,.55),inset 0 3px 6px rgba(255,255,255,.2)}

/* banner ruy-băng có khía 2 đầu */
.c-banner--ribbon{clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%);border-radius:6px;padding-left:30px;padding-right:30px}

/* ---------- NÚT ICON VUÔNG (kiểu nút xanh trong kit) ---------- */
.c-sqbtn{position:relative;overflow:hidden;width:60px;height:60px;border:none;border-radius:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;
  background:linear-gradient(180deg,var(--c-green-1),var(--c-green-2));
  box-shadow:0 6px 0 var(--c-green-3),0 9px 14px rgba(0,0,0,.2),inset 0 2px 1px rgba(255,255,255,.6);
  transition:transform .08s,box-shadow .08s}
.c-sqbtn::before{content:"";position:absolute;left:14%;right:14%;top:9%;height:34%;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));pointer-events:none}
.c-sqbtn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--c-green-3),0 3px 6px rgba(0,0,0,.2),inset 0 2px 1px rgba(255,255,255,.5)}
.c-sqbtn>svg{width:54%;height:54%;filter:drop-shadow(0 2px 0 rgba(0,0,0,.18))}
.c-sqbtn--blue{background:linear-gradient(180deg,var(--c-blue-1),var(--c-blue-2));box-shadow:0 6px 0 var(--c-blue-3),0 9px 14px rgba(0,0,0,.2),inset 0 2px 1px rgba(255,255,255,.6)}
.c-sqbtn--yellow{background:linear-gradient(180deg,var(--c-yellow-1),var(--c-yellow-2));box-shadow:0 6px 0 var(--c-yellow-3),0 9px 14px rgba(0,0,0,.2),inset 0 2px 1px rgba(255,255,255,.6)}

/* ---------- PILL TÀI NGUYÊN (icon kẹo + số + nút +) ---------- */
.c-res{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 6px 0 40px;position:relative;border-radius:999px;
  background:linear-gradient(180deg,var(--c-pnl-1),var(--c-pnl-2));
  box-shadow:0 5px 0 var(--c-pnl-3),0 7px 11px rgba(0,0,0,.2),inset 0 2px 1px rgba(255,255,255,.3)}
.c-res__ico{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:46px;height:46px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
.c-res__num{color:#fff;font-weight:800;font-size:20px;min-width:34px;text-align:center;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.c-res__plus{width:32px;height:32px;border:none;border-radius:11px;cursor:pointer;color:#fff;font-size:22px;font-weight:800;line-height:1;
  background:linear-gradient(180deg,var(--c-yellow-1),var(--c-yellow-2));box-shadow:0 3px 0 var(--c-yellow-3),inset 0 2px 1px rgba(255,255,255,.6)}

/* ---------- THANH SAO tiến trình ---------- */
.c-starbar{position:relative;height:34px;border-radius:999px;padding:5px;
  background:linear-gradient(180deg,var(--c-pnl-1),var(--c-pnl-2));box-shadow:inset 0 3px 5px rgba(0,0,0,.38),0 4px 0 var(--c-pnl-3)}
.c-starbar__fill{height:100%;border-radius:999px;background:linear-gradient(180deg,#ff8fc0,#e0457b);box-shadow:inset 0 2px 1px rgba(255,255,255,.5)}
.c-starbar__stars{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-around;padding:0 6%}
.c-starbar__stars>svg{width:30px;height:30px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}

/* ---------- hiệu ứng lắc / nảy (chỉ khi chạm, KHÔNG chạy vô tận) ---------- */
@keyframes c-bounce{0%,100%{transform:scale(1)}30%{transform:scale(1.16)}55%{transform:scale(.94)}}
@keyframes c-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.c-bounce{animation:c-bounce .45s ease}
.c-wiggle{animation:c-wiggle .5s ease}