/* =========================================================
   1. VARIÁVEIS E RESET
   ========================================================= */
:root{
  color-scheme:light;box-sizing:border-box;
  --bg:#dfeecd;--card:#fffef8;--ink:#20331e;--ink-soft:#4a5e47;
  --g1:#2e7d32;--g2:#5cb85c;--g3:#b7e1b0;--g4:#8dc98a;
  --soft:#f1f8e9;--warn:#e53935;--gem:#26c6da;--blue:#2f6fcc;
  --earth:#7a5a3a;--earth-dark:#5a3f28;--earth-light:#a98862;
  --sun:#ffe38a;--sky:#bfe3f2;
  --shadow:0 4px 0 rgba(0,0,0,.12),0 12px 24px rgba(20,50,20,.15);
  --radius:18px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;--bg:#0d1f14;--card:#152a1c;--ink:#e5f3df;--ink-soft:#a7c2a2;
  --g1:#7bd382;--g2:#4aa853;--g3:#2a5631;--g4:#357a3d;
  --soft:#122b19;--earth:#5a4030;--earth-dark:#3b2a1e;--earth-light:#7a5a42;
  --sun:#f0c860;--sky:#1a3a4a;
}}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0;min-height:100vh;
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  overflow-x:hidden;
}
h1,h2,h3{margin:.2em 0}
button{font:inherit}

/* =========================================================
   2. CENÁRIO DE SELVA (camadas decorativas fixas)
   ========================================================= */
.jungle-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% -10%, var(--sun) 0%, transparent 45%),
    linear-gradient(180deg, var(--sky) 0%, #d9efd5 45%, var(--bg) 70%);
}
.jungle-bg::before{
  content:"";position:absolute;top:-10%;left:50%;width:120%;height:120%;
  transform:translateX(-50%);
  background:repeating-linear-gradient(105deg,transparent 0 60px,rgba(255,240,180,.10) 60px 62px,transparent 62px 140px);
  animation:sun-rays 40s linear infinite;
}
@keyframes sun-rays{to{transform:translateX(-50%) rotate(2deg)}}
.jungle-bg::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:
    radial-gradient(ellipse 40% 60% at 10% 100%, var(--g4) 0 60%, transparent 61%),
    radial-gradient(ellipse 35% 55% at 30% 100%, var(--g3) 0 60%, transparent 61%),
    radial-gradient(ellipse 45% 65% at 55% 100%, var(--g4) 0 60%, transparent 61%),
    radial-gradient(ellipse 40% 60% at 80% 100%, var(--g3) 0 60%, transparent 61%),
    radial-gradient(ellipse 30% 50% at 95% 100%, var(--g4) 0 60%, transparent 61%);
  opacity:.55;
}
.leaf{
  position:fixed;z-index:-1;pointer-events:none;
  color:var(--g4);opacity:.35;
  animation:sway 6s ease-in-out infinite;
}
.leaf.tl{top:-30px;left:-30px;width:220px;height:220px;transform:rotate(-15deg)}
.leaf.tr{top:-20px;right:-40px;width:240px;height:240px;transform:rotate(20deg) scaleX(-1);animation-delay:-3s}
.leaf.bl{bottom:-40px;left:-50px;width:260px;height:260px;transform:rotate(10deg);animation-delay:-1.5s}
.leaf.br{bottom:-30px;right:-40px;width:200px;height:200px;transform:rotate(-20deg) scaleX(-1);animation-delay:-4.5s}
@keyframes sway{50%{transform:translateY(6px) rotate(-6deg)}}
.leaf.br,.leaf.tr{animation-name:sway-r}
@keyframes sway-r{50%{transform:translateY(6px) rotate(6deg) scaleX(-1)}}

.fireflies{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fireflies span{
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,var(--sun),transparent 70%);
  animation:fly 14s linear infinite;
  opacity:.7;
}
.fireflies span:nth-child(1){top:20%;left:10%;animation-delay:0s}
.fireflies span:nth-child(2){top:60%;left:85%;animation-delay:-3s}
.fireflies span:nth-child(3){top:75%;left:20%;animation-delay:-6s}
.fireflies span:nth-child(4){top:35%;left:70%;animation-delay:-9s}
.fireflies span:nth-child(5){top:50%;left:45%;animation-delay:-11s}
@keyframes fly{
  0%{transform:translate(0,0) scale(.8);opacity:.3}
  25%{transform:translate(30px,-40px) scale(1.1);opacity:.9}
  50%{transform:translate(-20px,-80px) scale(.9);opacity:.5}
  75%{transform:translate(40px,-30px) scale(1);opacity:.8}
  100%{transform:translate(0,0) scale(.8);opacity:.3}
}

/* =========================================================
   3. HUD
   ========================================================= */
#hud{
  display:none;position:sticky;top:env(safe-area-inset-top,0px);z-index:8;
  align-items:center;gap:8px;padding:10px 14px;
  background:linear-gradient(180deg,var(--g1),#1e5c22);
  color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.12);
  border-bottom:2px solid #163f18;
}
#hud .mini{width:44px;height:44px;background:#fff3;border-radius:50%;
  overflow:hidden;flex-shrink:0;border:2px solid #c6f36a}
#hud .brand{font-weight:900;color:#e7ff9a;letter-spacing:.5px;font-size:.95rem}
#hud b{flex:1;font-size:1.05rem}
.pill{background:#0005;border-radius:99px;padding:6px 12px;font-weight:800;
  display:flex;gap:6px;align-items:center;cursor:pointer;border:0;color:#fff;
  transition:background .15s}
.pill:hover{background:#0008}
.pill.icon{padding:6px 10px;font-size:1.05rem}
.pill.icon.playing{background:#e7ff9a;color:#1e5c22}
/* =========================================================
   4. BOTÕES E COMUNS
   ========================================================= */
.btn{
  font:inherit;font-weight:800;border:0;border-radius:14px;padding:12px 20px;
  background:var(--g2);color:#fff;cursor:pointer;
  box-shadow:0 5px 0 var(--g1),0 8px 16px rgba(30,90,30,.15);
  transition:transform .1s,box-shadow .1s,filter .2s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--g1)}
.btn.alt{background:var(--card);color:var(--ink);box-shadow:0 5px 0 var(--g3)}
.btn.big{font-size:1.4rem;padding:16px 38px}
.btn.danger{background:var(--warn);box-shadow:0 5px 0 #a32020}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible,.pill:focus-visible,.opt:focus-visible,.tab:focus-visible,
.subj:focus-visible,#nav button:focus-visible,.profile-card:focus-visible,
input:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

main{max-width:900px;margin:0 auto;padding:16px;padding-bottom:110px}
.screen{display:none;animation:in .3s}
.screen.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.card{
  background:var(--card);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);border:2px solid var(--g3);
  position:relative;
}
.row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.bar{height:16px;border-radius:9px;background:var(--g3);overflow:hidden;margin:10px 0;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.1)}
.bar i{display:block;height:100%;background:linear-gradient(180deg,var(--g2),var(--g1));
  transition:width .4s}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;margin:16px 0}

/* =========================================================
   5. TELA INICIAL / CRIAÇÃO
   ========================================================= */
.bob{animation:bob 2.2s ease-in-out infinite;display:inline-block}
@keyframes bob{50%{transform:translateY(-12px) rotate(2deg)}}

input[type=text]{
  font:inherit;padding:12px 16px;border-radius:14px;border:3px solid var(--g2);
  width:min(320px,90%);text-align:center;background:var(--card);color:var(--ink);
  margin:10px 0 6px;transition:border-color .2s;
}
input[type=text].invalid{border-color:var(--warn);animation:shake .35s}
.field-error{
  color:var(--warn);font-weight:800;font-size:.9rem;min-height:1.4em;
  margin:0 0 12px;opacity:0;transition:opacity .2s;
}
.field-error.show{opacity:1}
.credit{text-align:center;font-size:.8rem;opacity:.75;margin-top:20px}

/* =========================================================
   6. PERFIS
   ========================================================= */
.profile-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;margin:18px 0}
.profile-card{
  background:var(--soft);border:2px solid var(--g3);border-radius:16px;
  padding:14px;text-align:center;cursor:pointer;font:inherit;color:var(--ink);
  transition:transform .15s,border-color .2s,box-shadow .2s;position:relative;
}
.profile-card:hover{transform:translateY(-4px);border-color:var(--g2);box-shadow:var(--shadow)}
.profile-card.active{border-color:var(--g1);box-shadow:0 0 0 3px var(--g2) inset}
.profile-card .avatar{width:80px;height:80px;margin:0 auto 8px}
.profile-card .pname{font-weight:900;font-size:1.05rem;margin:4px 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-card .pgems{font-size:.85rem;color:var(--g1);font-weight:800}
.profile-card .del{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
  border:0;background:#0002;color:var(--ink-soft);cursor:pointer;font-weight:900;
  opacity:0;transition:opacity .2s;font-size:.8rem;
}
.profile-card:hover .del,.profile-card:focus-within .del{opacity:1}
.profile-card .del:hover{background:var(--warn);color:#fff}

/* =========================================================
   7. MENU / MATÉRIAS
   ========================================================= */
.subj{
  cursor:pointer;text-align:center;font:inherit;color:var(--ink);
  transition:transform .15s,box-shadow .2s;
  border:2px solid var(--g3);position:relative;overflow:hidden;
}
.subj::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 10%,rgba(140,200,140,.15),transparent 60%);
  pointer-events:none;
}
.subj:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:0 10px 0 var(--g3)}
.subj .e{font-size:2.8rem;display:block;filter:drop-shadow(0 3px 0 rgba(0,0,0,.1))}
.subj small{opacity:.75}

/* =========================================================
   8. TRILHA IMERSIVA
   ========================================================= */
#trail{padding:0}
.trail-scene{
  position:relative;border-radius:var(--radius);overflow:hidden;
  padding:24px 16px 30px;
  background:
    radial-gradient(ellipse at 50% 0%, #d6f0c8 0%, transparent 60%),
    linear-gradient(180deg,#bfe3f2 0%,#a5d8c0 25%,#7fc08a 60%,#5fa270 100%);
  border:3px solid var(--g1);
  box-shadow:inset 0 -40px 60px rgba(40,80,40,.25),var(--shadow);
  isolation:isolate;
}
.trail-scene::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 20% 50% at 8% 100%, #3d7a4a 0 60%, transparent 61%),
    radial-gradient(ellipse 18% 45% at 92% 100%, #3d7a4a 0 60%, transparent 61%),
    radial-gradient(ellipse 15% 40% at 25% 100%, #4a8a56 0 60%, transparent 61%),
    radial-gradient(ellipse 16% 42% at 75% 100%, #4a8a56 0 60%, transparent 61%);
  opacity:.6;
}
.trail-scene::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(100deg,transparent 0 80px,rgba(255,250,200,.15) 80px 82px,transparent 82px 180px);
  animation:sun-rays 30s linear infinite;pointer-events:none;
}
.trail-head{
  background:linear-gradient(180deg,#fffbe8,#f6ecc8);
  border:2px solid var(--earth-light);border-radius:14px;
  padding:16px 18px;margin-bottom:20px;
  box-shadow:0 4px 0 var(--earth-light),0 8px 16px rgba(60,40,20,.15);
  position:relative;max-width:420px;margin-left:auto;margin-right:auto;
}
.trail-head::before{
  content:"";position:absolute;top:6px;left:6px;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,var(--earth-light),var(--earth-dark));
}
.trail-head::after{
  content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,var(--earth-light),var(--earth-dark));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .trail-head{
  background:linear-gradient(180deg,#3a2e1e,#2e2416);color:var(--ink)
}}
.trail-head .eyebrow{
  font-size:.7rem;font-weight:900;letter-spacing:1.5px;color:var(--earth-dark);
  text-transform:uppercase;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .trail-head .eyebrow{color:var(--sun)}}
.trail-head h3{font-size:1.35rem;margin:4px 0;color:var(--ink)}
.trail-head p{font-size:.85rem;margin:0;color:var(--ink-soft)}

.lesson-path{
  list-style:none;padding:24px 0 8px;margin:0 auto;
  width:min(100%,380px);position:relative;
}
.lesson-path::before{
  content:"";position:absolute;left:50%;top:20px;bottom:20px;width:0;
  border-left:4px dashed rgba(120,80,50,.35);
  transform:translateX(-50%);z-index:0;
}
.lesson-stop{
  position:relative;display:flex;align-items:center;flex-direction:column;
  height:130px;z-index:1;
}
.stop-1,.stop-3{transform:translateX(64px)}
.stop-2{transform:translateX(-44px)}
.stop-4{transform:translateX(20px)}
.lesson-node{
  position:relative;z-index:2;
  width:74px;height:74px;flex-shrink:0;
  border:4px solid #fff;border-radius:50%;color:#fff;
  background:linear-gradient(180deg,#6cc06c,#3d8a42);
  box-shadow:
    0 6px 0 #276b2c,
    0 10px 20px rgba(30,80,30,.35),
    inset 0 -4px 8px rgba(0,0,0,.15),
    inset 0 4px 8px rgba(255,255,255,.4);
  font:inherit;font-size:1.6rem;font-weight:900;
  display:grid;place-items:center;cursor:pointer;
  transition:transform .15s,box-shadow .15s;
}
.lesson-node:hover:not(:disabled){transform:translateY(-3px) scale(1.05);
  box-shadow:0 8px 0 #276b2c,0 14px 24px rgba(30,80,30,.4),
    inset 0 -4px 8px rgba(0,0,0,.15),inset 0 4px 8px rgba(255,255,255,.4)}
.lesson-node:active:not(:disabled){transform:translateY(3px);
  box-shadow:0 2px 0 #276b2c,0 4px 8px rgba(30,80,30,.3)}
.lesson-node.node-locked{
  background:linear-gradient(180deg,#9aa89a,#6d7a6d);
  box-shadow:0 6px 0 #4a5a4a,inset 0 -4px 8px rgba(0,0,0,.15);
  color:#fff;opacity:.85;cursor:not-allowed;
}
.lesson-node.node-current{
  background:linear-gradient(180deg,#ffd35c,#e8a234);
  box-shadow:
    0 6px 0 #b37a1e,
    0 0 0 5px rgba(255,220,120,.5),
    0 0 24px rgba(255,210,90,.7),
    inset 0 -4px 8px rgba(0,0,0,.15),
    inset 0 4px 8px rgba(255,255,255,.5);
  color:#5a3a00;
  animation:pulse-current 2s ease-in-out infinite;
}
@keyframes pulse-current{
  50%{box-shadow:
    0 6px 0 #b37a1e,
    0 0 0 9px rgba(255,220,120,.25),
    0 0 32px rgba(255,210,90,.9),
    inset 0 -4px 8px rgba(0,0,0,.15),
    inset 0 4px 8px rgba(255,255,255,.5)}
}
.lesson-node.node-done{
  background:linear-gradient(180deg,#7cd67c,#3d8a42);
  color:#fff;
}
.lesson-stop>span{
  font-size:.8rem;font-weight:900;margin-top:14px;text-align:center;
  background:rgba(255,255,255,.85);
  padding:4px 10px;border-radius:99px;
  box-shadow:0 2px 0 rgba(0,0,0,.1);
  color:var(--ink);max-width:130px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lesson-stop>span{
  background:rgba(20,50,30,.85);color:var(--ink)
}}
.trail-actions{text-align:center;margin-top:20px;position:relative;z-index:1}

@media(max-width:480px){
  .stop-1,.stop-3{transform:translateX(44px)}
  .stop-2{transform:translateX(-30px)}
  .stop-4{transform:translateX(14px)}
  .lesson-node{width:64px;height:64px;font-size:1.4rem}
  .lesson-stop{height:120px}
}

/* =========================================================
   9. AULA / QUIZ
   ========================================================= */
.opts{display:grid;gap:10px;margin:14px 0}
.opt{
  font:inherit;font-weight:700;text-align:left;padding:14px 16px;border-radius:14px;
  border:3px solid var(--g3);background:var(--soft);color:var(--ink);
  cursor:pointer;font-size:1.05rem;transition:transform .1s,border-color .2s,background .2s;
}
.opt:hover:not(:disabled){border-color:var(--g2);transform:scale(1.01);background:var(--card)}
.opt.ok{background:#43a047;color:#fff;border-color:#2e7d32}
.opt.no{background:var(--warn);color:#fff;border-color:#b71c1c;animation:shake .3s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.opt:disabled{cursor:not-allowed}
#fb,#lessonFb{min-height:60px;font-weight:700;line-height:1.5}

/* BOLHA DO DINO — contraste garantido */
.dino-alert{
  display:flex;gap:12px;align-items:flex-start;
  margin:12px 0;padding:12px 14px;
  background:var(--card);
  border:3px solid var(--earth-light);
  border-radius:16px;
  box-shadow:0 4px 0 var(--earth-light),0 8px 16px rgba(120,80,20,.18);
  animation:alert-in .4s cubic-bezier(.5,1.5,.5,1) both;
}
.dino-alert.good{
  background:#eafff0;
  border-color:#2e9e4a;
  box-shadow:0 4px 0 #2e9e4a,0 8px 16px rgba(40,140,60,.22);
}
.dino-alert.bad{
  background:#fff1ef;
  border-color:#d63a2f;
  box-shadow:0 4px 0 #d63a2f,0 8px 16px rgba(200,50,40,.22);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dino-alert{
    background:#243a2a;border-color:#7c9a7e;
    box-shadow:0 4px 0 #4a6a4c,0 8px 16px rgba(0,0,0,.35);
  }
  :root:not([data-theme="light"]) .dino-alert.good{
    background:#1d3a25;border-color:#5cc46a;
    box-shadow:0 4px 0 #2e8a3a,0 8px 16px rgba(40,140,60,.3);
  }
  :root:not([data-theme="light"]) .dino-alert.bad{
    background:#3a1d1b;border-color:#e06a60;
    box-shadow:0 4px 0 #a8342c,0 8px 16px rgba(200,50,40,.3);
  }
}
@keyframes alert-in{
  from{transform:translateY(-10px) scale(.95);opacity:0}
  to{transform:none;opacity:1}
}
.dino-alert .dino-thumb{
  width:56px;height:56px;flex-shrink:0;
  animation:bob 1.4s ease-in-out infinite;
  background:#fff3;border-radius:50%;
}
.dino-alert .bubble{
  flex:1;position:relative;
  background:var(--card);
  color:var(--ink);
  border-radius:12px;padding:10px 14px;
  font-size:.95rem;font-weight:700;
  box-shadow:0 2px 0 rgba(0,0,0,.1);
  border:2px solid rgba(0,0,0,.06);
}
.dino-alert .bubble::before{
  content:"";position:absolute;left:-10px;top:16px;
  width:0;height:0;
  border:9px solid transparent;
  border-right-color:var(--card);
  filter:drop-shadow(-1px 0 0 rgba(0,0,0,.06));
}
.dino-alert .bubble b{display:block;font-size:1rem;margin-bottom:2px;color:var(--ink)}
.dino-alert.good .bubble b{color:#1e6b32}
.dino-alert.bad  .bubble b{color:#a52a20}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dino-alert.good .bubble b{color:#8ee89a}
  :root:not([data-theme="light"]) .dino-alert.bad  .bubble b{color:#ff9b8f}
}

/* =========================================================
   10. RESULTADO
   ========================================================= */
.stars{font-size:2.6rem;letter-spacing:6px}

/* =========================================================
   11. LOJA
   ========================================================= */
.shop{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:16px}
@media(max-width:640px){.shop{grid-template-columns:1fr}}
.pv{text-align:center;position:sticky;top:80px;align-self:start}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tab{font:inherit;font-weight:800;border:2px solid var(--g2);background:var(--card);
  color:var(--ink);padding:8px 14px;border-radius:99px;cursor:pointer}
.tab.on{background:var(--g2);color:#fff}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.it{text-align:center;padding:12px 8px;border-radius:16px;background:var(--soft);
  border:2px solid var(--g3);transition:transform .15s}
.it:hover{transform:translateY(-3px)}
.it.eq{border-color:var(--g1);background:var(--g3);box-shadow:0 0 0 3px var(--g2) inset}
.it .ic{font-size:2rem;height:44px;display:flex;align-items:center;justify-content:center}
.it .btn{padding:6px 10px;font-size:.85rem;margin-top:8px;box-shadow:0 3px 0 var(--g1)}
@media(max-width:480px){.items{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}

/* =========================================================
   12. REVISÃO / RANKING
   ========================================================= */
.rk{display:flex;gap:12px;padding:12px 14px;border-radius:14px;
  background:var(--soft);margin:8px 0;font-weight:800}
.rk span:nth-child(2){flex:1}
.rk.me{background:var(--g2);color:#fff}

/* =========================================================
   13. NAVEGAÇÃO INFERIOR
   ========================================================= */
#nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:7;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,#2e7d32,#1e5c22);
  gap:6px;justify-content:center;
  box-shadow:0 -3px 0 rgba(0,0,0,.15),0 -8px 16px rgba(0,0,0,.1)}
#nav button{flex:1;max-width:130px;font:inherit;font-size:.72rem;font-weight:800;
  border:2px solid transparent;border-radius:12px;background:#0003;color:#fff;
  padding:6px 2px;cursor:pointer;transition:background .15s}
#nav button span{display:block;font-size:1.3rem}
#nav button.on{border-color:#c6f36a;background:#0006}

/* =========================================================
   14. TOAST
   ========================================================= */
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,120px);background:var(--g1);color:#fff;
  padding:12px 22px;border-radius:99px;font-weight:800;transition:transform .3s;
  z-index:9;text-align:center;max-width:90%;box-shadow:var(--shadow)}
#toast.on{transform:translate(-50%,0)}

/* =========================================================
   15. ACESSIBILIDADE
   ========================================================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== FUNDO COM IMAGEM ===== */
.jungle-bg{background:#dff5e3 url("img/bg.jpg") center bottom/cover no-repeat}
.jungle-bg::before,.jungle-bg::after{display:none}
/* ===== LOGO (só o letreiro) ===== */
/* ===== INÍCIO: DINO 360° ===== */
.home-wrap{min-height:calc(100vh - 150px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;text-align:center}
#stage{position:relative;height:min(52vh,460px);aspect-ratio:298/335;cursor:grab;touch-action:pan-y;user-select:none}
#stage:active{cursor:grabbing}
#stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;visibility:hidden;pointer-events:none;-webkit-user-drag:none}
#stage img.on{visibility:visible}
#stage::after{content:"";position:absolute;left:15%;right:15%;bottom:-2%;height:6%;background:radial-gradient(closest-side,rgba(20,50,20,.45),transparent);pointer-events:none}
.hint{background:var(--card);border:2px solid var(--g3);border-radius:99px;padding:6px 16px;font-weight:800;font-size:.9rem;margin:0;box-shadow:var(--shadow)}
#turn{width:min(260px,70vw);accent-color:var(--g1)}
.subj small.lv{display:block}
#stage{container-type:inline-size}
.gl{position:absolute;inset:0;pointer-events:none}
#stage .gl.b{z-index:0}#stage img{z-index:1}#stage .gl.f{z-index:2}
.gear{position:absolute;transform:translate(-50%,-50%);line-height:1;white-space:nowrap}
.gear.hat{transform:translate(-50%,-80%)}
.cape{position:absolute;width:36%;height:38%;transform:translate(-50%,-5%);background:linear-gradient(#e53935,#9d1c1c);border-radius:40% 40% 14% 14%}

/* ===== Mini-aula antes de cada pergunta ===== */
.teach{
  margin:12px 0 14px;padding:12px 14px;
  background:var(--soft);color:var(--ink);
  border:2px solid var(--g3);border-left:8px solid var(--g2);
  border-radius:var(--radius);
  font-size:1.02rem;line-height:1.55;
}
.teach:empty{display:none}
.teach b{display:block;color:var(--g1);font-size:.95rem;margin-bottom:4px}
.teach p{margin:0}

/* ===== Segunda chance ===== */
.retry-box{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.retry-box .btn{padding:8px 12px;font-size:.95rem}
.dino-alert .bubble small{display:block;margin-top:6px;color:var(--ink-soft)}

/* ===== Módulo reprovado (3 erros) ===== */
.trail-fail{margin:10px 0;padding:10px 14px;background:var(--soft);color:var(--ink);border:2px solid var(--warn);border-left:8px solid var(--warn);border-radius:var(--radius);line-height:1.5}
.trail-ok{margin:10px 0;padding:10px 14px;background:var(--soft);color:var(--ink);border:2px solid var(--g2);border-left:8px solid var(--g2);border-radius:var(--radius);line-height:1.5}

/* ===== Cabeçalho com a imagem do DinoBrain ===== */
#hud .brand-img{display:block;height:38px;width:auto;border-radius:7px;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.hero-logo{display:block;width:min(360px,80%);height:auto;margin:0 auto 10px;border-radius:18px;box-shadow:var(--shadow)}
.home-logo{margin-bottom:auto}
#topBanner{ text-decoration-line: none;

}

/* ===== Cabeçalho preenchido de ponta a ponta ===== */
#topBanner{display:block;position:relative;z-index:8;background:#1e5c22;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;text-align:center;
  border-bottom:3px solid #014c14;box-shadow:0 4px 0 rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.12)}
#topBanner img,#hud .brand-img{display:block;margin:0 auto;height:auto;border-radius:0;box-shadow:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent)}
#topBanner img{width:auto;max-width:100%;max-height:150px}
#hud{background:#1e5c22;border-bottom:3px solid #014c14}
#hud .brand-img{height:42px;width:auto;margin:0}