/* =========================================================
   ADVENTURE SCHOOL — STYLES COMPLETS
   ========================================================= */
:root{
  --sky-top:#5EC6E8;
  --sky-bottom:#BFEAF5;
  --sun:#FFC93C;
  --sun-dark:#F2A007;
  --grass:#57C46B;
  --grass-dark:#2E9E4A;
  --coral:#FF6F59;
  --coral-dark:#E5503C;
  --plum:#5B3A8E;
  --plum-dark:#432A6B;
  --ink:#26324A;
  --paper:#FFFDF8;
  --card:#FFFFFF;
  --gold:#F5B301;
  --shadow-hard: 4px 6px 0 rgba(38,50,74,0.18);
  --shadow-soft: 0 10px 24px rgba(38,50,74,0.14);
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --font-display:'Baloo 2', system-ui, sans-serif;
  --font-body:'Nunito', system-ui, sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(255,255,255,.5), transparent 40%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 55%, #EAF8E9 100%);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; color:var(--plum-dark);}
p{margin:0;}
button{font-family:var(--font-body); border:none; cursor:pointer; background:none;}
img,svg{display:block;}
::selection{background:var(--sun); color:var(--ink);}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #EAF8E9; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--plum); border-radius: 10px; }

/* ========== BOUTONS ========== */
.btn{
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  color:#fff;
  padding:14px 22px;
  border-radius:999px;
  box-shadow:var(--shadow-hard);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:transform .12s ease, box-shadow .12s ease;
  border:2px solid rgba(255,255,255,0.25);
}
.btn:active{transform:translateY(3px); box-shadow:1px 2px 0 rgba(38,50,74,0.18);}
.btn-primary{background:linear-gradient(180deg, #FF8A6D, var(--coral));}
.btn-secondary{background:linear-gradient(180deg, #7C57B8, var(--plum));}
.btn-grass{background:linear-gradient(180deg, #6FDB84, var(--grass-dark));}
.btn-sun{background:linear-gradient(180deg, #FFD65C, var(--sun-dark)); color:var(--ink); border-color:rgba(38,50,74,0.1);}
.btn-ghost{
  background:var(--card); color:var(--plum-dark);
  border:2px solid rgba(38,50,74,0.12);
  box-shadow:var(--shadow-hard);
}
.btn-block{width:100%;}
.btn-lg{padding:17px 22px; font-size:19px;}
.btn-sm{padding:10px 16px; font-size:14px;}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}

/* ========== HUD ========== */
.hud{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:6px;
  padding:8px 10px;
  background:rgba(255,253,248,0.92);
  backdrop-filter:blur(6px);
  border-bottom:3px solid rgba(38,50,74,0.08);
  flex-wrap:wrap;
}
.hud-pill{
  display:flex; align-items:center; gap:4px;
  background:var(--card);
  border-radius:999px;
  padding:4px 10px 4px 6px;
  box-shadow:var(--shadow-hard);
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  color:var(--ink);
  border:2px solid rgba(38,50,74,0.06);
}
.hud-pill .ico{font-size:15px;}
.hud-back{
  margin-left:auto;
  background:var(--plum);
  color:#fff;
  border-radius:999px;
  padding:6px 12px;
  font-weight:700;
  font-family:var(--font-display);
  box-shadow:var(--shadow-hard);
  display:flex; align-items:center; gap:4px;
  font-size:13px;
}
.hud-back:active{transform:translateY(2px); box-shadow:2px 3px 0 rgba(38,50,74,0.18);}
.hud-xpbar-wrap{
  position:sticky; top:48px; z-index:19;
  padding:4px 14px 8px;
  background:rgba(255,253,248,0.92);
  backdrop-filter:blur(6px);
}
.hud-xpbar{
  height:10px; border-radius:999px; background:#E4E9F2;
  overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,0.08);
}
.hud-xpbar-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--grass), var(--grass-dark));
  transition:width .5s cubic-bezier(.4,1.4,.6,1);
}

/* ========== SCREENS ========== */
.screen{
  flex:1;
  position:relative; z-index:1;
  padding:14px 14px 80px;
  animation:fadeIn .35s ease;
}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.hidden{display:none !important;}

/* ========== PARENT ONBOARDING ========== */
.parent-onboarding{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  padding-top:8px;
}
.parent-onboarding .logo-badge{
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:.5px;
  background:var(--gold);
  color:#5C3A00;
  padding:3px 12px;
  border-radius:999px;
  box-shadow:var(--shadow-hard);
  transform:rotate(-2deg);
}
.parent-onboarding .big-icon{font-size:56px;}
.parent-onboarding h1{font-size:28px;}
.parent-onboarding .desc{
  font-weight:600;
  font-size:14px;
  line-height:1.6;
  opacity:.85;
  max-width:420px;
}
.parent-onboarding .feature-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  width:100%;
  max-width:400px;
}
.parent-onboarding .feature-item{
  background:var(--card);
  border-radius:var(--radius-md);
  padding:14px 12px;
  box-shadow:var(--shadow-hard);
  font-weight:700;
  font-size:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.parent-onboarding .feature-item .fi-ico{font-size:28px;}
.parent-onboarding .reassure{
  font-weight:700;
  font-size:14px;
  color:var(--plum);
  opacity:.7;
}

/* ========== HOME ========== */
.home-screen{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;}
.logo-wrap{margin-top:4px; display:flex; flex-direction:column; align-items:center;}
.logo-badge{
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:.5px;
  background:var(--gold);
  color:#5C3A00;
  padding:3px 12px;
  border-radius:999px;
  box-shadow:var(--shadow-hard);
  transform:rotate(-2deg);
  margin-bottom:4px;
}
.logo-title{
  font-size:40px;
  line-height:1;
  color:#fff;
  -webkit-text-stroke:3px var(--plum-dark);
  paint-order:stroke fill;
  text-shadow:4px 5px 0 rgba(38,50,74,0.25);
}
.logo-sub{
  font-family:var(--font-body); font-weight:700; color:var(--plum-dark);
  opacity:.75; font-size:13px; margin-top:2px;
}
.hero-character{width:160px; height:160px; margin:10px 0 2px; animation:bob 3.2s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-10px) rotate(1deg);}}
.home-stats{display:flex; gap:8px; margin:6px 0 14px; flex-wrap:wrap; justify-content:center;}
.home-actions{display:flex; flex-direction:column; gap:10px; width:100%; max-width:300px;}
.parent-link{margin-top:14px; font-size:12px; color:var(--plum-dark); opacity:.6; text-decoration:underline; font-weight:700;}

/* ========== MAP ========== */
.map-title{text-align:center; margin-bottom:12px;}
.map-title h2{font-size:24px;}
.map-title p{font-weight:700; opacity:.6; font-size:13px; margin-top:2px;}
.zone-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.zone-card{
  position:relative;
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:14px 12px 12px;
  box-shadow:var(--shadow-hard);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border:3px solid rgba(38,50,74,0.06);
  transition:transform .15s ease, box-shadow .15s ease;
  text-align:center;
}
.zone-card:active{transform:translateY(3px); box-shadow:1px 2px 0 rgba(38,50,74,0.18);}
.zone-card.locked{opacity:.55; filter:grayscale(.4);}
.zone-card.full-width{grid-column:1 / -1; flex-direction:row; justify-content:flex-start; text-align:left; gap:12px; padding:14px 16px;}
.zone-icon{font-size:34px; line-height:1;}
.zone-card.full-width .zone-icon{font-size:30px;}
.zone-name{font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--plum-dark);}
.zone-lock{position:absolute; top:8px; right:8px; background:var(--ink); color:#fff; border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:12px;}
.zone-progress{width:100%; height:5px; border-radius:999px; background:#E4E9F2; overflow:hidden; margin-top:2px;}
.zone-progress-fill{height:100%; background:var(--grass-dark); border-radius:999px;}
.zone-unlock-hint{font-size:10px; font-weight:700; opacity:.6; margin-top:2px;}

/* ========== QUIZ ========== */
.quiz-container{display:flex; flex-direction:column; gap:10px;}
.quiz-progress-row{display:flex; justify-content:space-between; align-items:center; font-family:var(--font-display); font-weight:700; color:var(--plum-dark); font-size:13px;}
.riko-companion{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border-radius:var(--radius-md);
  padding:10px 14px; box-shadow:var(--shadow-soft);
  border:2px solid rgba(38,50,74,0.06);
}
.riko-avatar{flex-shrink:0; width:48px; height:48px; display:flex; align-items:center; justify-content:center; font-size:34px; transition:transform .3s ease;}
.riko-speech{flex:1; font-weight:600; font-size:14px; line-height:1.4; color:var(--ink); min-height:40px; display:flex; align-items:center;}
.quiz-card{background:var(--card); border-radius:var(--radius-lg); padding:18px 16px; box-shadow:var(--shadow-soft); text-align:center;}
.quiz-question{font-family:var(--font-display); font-size:20px; color:var(--ink); line-height:1.35; margin-bottom:4px;}
.quiz-choices{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}
.choice-btn{
  background:#F1F3F9; border-radius:var(--radius-md); padding:14px 10px;
  font-family:var(--font-display); font-weight:700; font-size:16px;
  color:var(--ink); border:3px solid transparent;
  box-shadow:0 3px 0 rgba(38,50,74,0.1);
  min-height:56px; display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease;
}
.choice-btn:active{transform:scale(.97);}
.choice-btn.correct{background:#DFF6E3; border-color:var(--grass-dark); color:var(--grass-dark); animation:pop .35s ease;}
.choice-btn.wrong{background:#FDE3E1; border-color:var(--coral-dark); color:var(--coral-dark); animation:shake .35s ease;}
.choice-btn.dim{opacity:.45;}
@keyframes pop{0%{transform:scale(1);}50%{transform:scale(1.08);}100%{transform:scale(1);}}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

/* ========== ANIMATIONS RIKO ========== */
.riko-avatar.bounce{animation:rikoBounce .5s ease;}
@keyframes rikoBounce{0%,100%{transform:scale(1);}30%{transform:scale(1.2) rotate(-5deg);}60%{transform:scale(0.9) rotate(3deg);}}
.riko-avatar.happy{animation:rikoHappy .6s ease;}
@keyframes rikoHappy{0%,100%{transform:scale(1);}40%{transform:scale(1.3) rotate(-8deg);}70%{transform:scale(0.95) rotate(4deg);}}
.riko-avatar.thinking{animation:rikoThink 1.2s ease-in-out infinite;}
@keyframes rikoThink{0%,100%{transform:rotate(0deg);}25%{transform:rotate(-8deg);}75%{transform:rotate(8deg);}}
.riko-avatar.sad{animation:rikoSad .6s ease;}
@keyframes rikoSad{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.riko-avatar.celebrate{animation:rikoCelebrate .8s ease;}
@keyframes rikoCelebrate{0%,100%{transform:scale(1) rotate(0deg);}20%{transform:scale(1.3) rotate(-10deg);}60%{transform:scale(1.1) rotate(10deg);}}
.riko-avatar.proud{animation:rikoProud .6s ease;}
@keyframes rikoProud{0%,100%{transform:scale(1);}30%{transform:scale(1.2) rotate(-3deg);}60%{transform:scale(1.05) rotate(2deg);}}

/* ========== REWARD ========== */
.reward-screen{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding-top:16px;}
.reward-burst{width:130px; height:130px; display:flex; align-items:center; justify-content:center; font-size:60px; border-radius:50%; background:radial-gradient(circle, #FFF3C4, #FFD65C 60%, transparent 70%); animation:burst .6s cubic-bezier(.3,1.6,.4,1);}
@keyframes burst{0%{transform:scale(0); opacity:0;}60%{transform:scale(1.15); opacity:1;}100%{transform:scale(1);}}
.reward-stats-row{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}

/* ========== SHOP ========== */
.tab-row{display:flex; gap:6px; margin-bottom:12px;}
.tab-btn{flex:1; padding:8px; border-radius:999px; font-family:var(--font-display); font-weight:700; background:#F1F3F9; color:var(--plum-dark); border:2px solid transparent; font-size:13px;}
.tab-btn.active{background:var(--plum); color:#fff;}
.shop-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.shop-item{background:var(--card); border-radius:var(--radius-md); padding:12px; text-align:center; box-shadow:var(--shadow-hard); display:flex; flex-direction:column; align-items:center; gap:4px; border:3px solid transparent;}
.shop-item.owned{border-color:var(--grass-dark);}
.shop-item .s-ico{font-size:30px;}
.shop-item .s-name{font-family:var(--font-display); font-weight:700; font-size:12px;}
.shop-item .s-price{font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--gold); display:flex; align-items:center; gap:2px;}
.shop-buy-btn{margin-top:4px; padding:6px 12px; border-radius:999px; font-family:var(--font-display); font-weight:700; font-size:11px; background:var(--grass); color:#fff; width:100%;}
.shop-buy-btn.equipped{background:var(--plum);}
.shop-buy-btn:disabled{background:#D6DAE2; color:#8892A3;}

/* ========== HOUSE ========== */
.house-scene{
  background:linear-gradient(180deg,#BFEAF5,#EAF8E9 70%);
  border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; align-items:center; gap:8px; min-height:180px; justify-content:flex-end; position:relative; overflow:hidden;
}
.house-floor{width:100%; height:28px; background:#D9C79A; border-radius:8px 8px 0 0; margin-top:8px;}
.house-pet{position:absolute; bottom:30px; left:12px; font-size:28px;}
.house-furniture{position:absolute; bottom:30px; right:12px; font-size:28px; display:flex; gap:4px;}
.house-avatar-wrap{position:relative; display:inline-block;}

/* ========== BADGES ========== */
.badges-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.badge-card{background:var(--card); border-radius:var(--radius-md); padding:14px; text-align:center; box-shadow:var(--shadow-hard); opacity:.35; display:flex; flex-direction:column; gap:4px; align-items:center;}
.badge-card.earned{opacity:1;}
.badge-card .b-ico{font-size:32px;}
.badge-card .b-name{font-family:var(--font-display); font-weight:700; font-size:12px;}

/* ========== STATS / DASHBOARD ========== */
.stat-card{background:var(--card); border-radius:var(--radius-md); padding:14px; box-shadow:var(--shadow-hard); display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.stat-card .label{font-weight:700; font-size:13px; opacity:.7;}
.stat-card .value{font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--plum-dark);}
.subject-bar-row{margin-bottom:10px;}
.subject-bar-row .lbl{display:flex; justify-content:space-between; font-weight:700; font-size:12px; margin-bottom:3px;}
.subject-bar{height:8px; border-radius:999px; background:#E4E9F2; overflow:hidden;}
.subject-bar-fill{height:100%; border-radius:999px;}

/* ========== PARENT GATE ========== */
.pin-container{display:flex; gap:10px; justify-content:center; margin:6px 0;}
.pin-input{width:48px; height:58px; border-radius:var(--radius-md); border:3px solid #E4E9F2; background:#FBFCFE; font-family:var(--font-display); font-size:26px; font-weight:700; text-align:center; color:var(--ink); transition:border-color .2s;}
.pin-input:focus{outline:none; border-color:var(--plum);}
.pin-input.error{border-color:var(--coral); animation:shake .35s ease;}
.pin-error-msg{color:var(--coral); font-weight:700; font-size:13px; min-height:20px;}

/* ========== DAILY CHALLENGES ========== */
.daily-challenge{
  background:var(--card); border-radius:var(--radius-md); padding:14px;
  box-shadow:var(--shadow-hard); margin-bottom:10px;
  display:flex; justify-content:space-between; align-items:center;
}
.daily-challenge .dc-left{display:flex; align-items:center; gap:10px;}
.daily-challenge .dc-icon{font-size:28px;}
.daily-challenge .dc-name{font-family:var(--font-display); font-weight:700; font-size:14px;}
.daily-challenge .dc-progress{font-weight:700; font-size:13px; opacity:.7;}
.daily-challenge .dc-done{color:var(--grass-dark); font-weight:700;}
.daily-challenge .dc-reward{font-family:var(--font-display); font-weight:700; color:var(--gold);}

/* ========== REVISION ========== */
.revision-item{
  background:var(--card); border-radius:var(--radius-md); padding:14px;
  box-shadow:var(--shadow-hard); margin-bottom:8px;
}
.revision-item .ri-question{font-weight:600; font-size:14px;}
.revision-item .ri-answer{font-family:var(--font-display); font-weight:700; color:var(--grass-dark);}

/* ========== TREASURE HUNT ========== */
.treasure-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-width:350px; margin:0 auto;}
.treasure-cell{
  aspect-ratio:1; border-radius:var(--radius-md); background:var(--card);
  border:3px solid var(--grass-dark); font-size:32px; display:flex;
  align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--shadow-hard); transition:transform .15s ease;
}
.treasure-cell:active{transform:scale(.95);}
.treasure-cell.found{background:#DFF6E3; border-color:var(--gold);}
.treasure-cell.empty{opacity:.4; cursor:default;}

/* ========== CONTROLE MUSIQUE ========== */
.music-control {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow-hard);
  border: 2px solid rgba(38,50,74,0.08);
}
.music-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--plum);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: transform .15s ease;
}
.music-btn:active { transform: scale(.92); }
.music-btn.muted { background: #8892A3; }
.music-btn .icon-off { display: none; }
.music-btn.muted .icon-on { display: none; }
.music-btn .icon-on { display: inline; }
.music-btn.muted .icon-off { display: inline; }

.music-volume {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  background: #E4E9F2;
  border-radius: 2px;
  outline: none;
}
.music-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--plum);
  cursor: pointer;
}
.music-volume::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--plum);
  cursor: pointer;
}
.music-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  opacity: .5;
  letter-spacing: .3px;
}

/* ========== TOAST ========== */
.toast{
  position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px;
  font-weight:700; font-size:13px; z-index:80; box-shadow:var(--shadow-soft);
  opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}

/* ========== RESPONSIVE ========== */
@media (max-width:420px){
  .logo-title{font-size:32px;}
  .zone-grid{gap:8px;}
  .pin-input{width:42px; height:50px; font-size:22px;}
  .quiz-choices{grid-template-columns:1fr;}
  .riko-avatar{width:40px; height:40px; font-size:28px;}
  .hud-pill{font-size:11px; padding:3px 8px 3px 5px;}
  .hud-back{font-size:11px; padding:4px 10px;}
  .reward-burst{width:100px; height:100px; font-size:44px;}
  .music-control { padding: 6px 10px 6px 8px; gap: 6px; }
  .music-btn { width: 32px; height: 32px; font-size: 14px; }
  .music-volume { width: 40px; }
}