/* Layout: a 1920×1080 stage scaled to fit; a live Three.js layer of playful toy-like shapes sits between the colored ground and the slide content. Single deliberate look. */
:root{
  --ink:#0B1022; --navy:#12203F; --cream:#FFF8EC; --paper:#F3EADB;
  --blue:#2F6BFF; --orange:#FF7A2F; --lime:#A8E04B; --pink:#FF4F8B; --yellow:#FFC933; --sky:#6FC3FF; --violet:#8B5CF6;
  --purple:#2B1B5E; --teal:#0E4A4F;
  --muted-l:#566079; --muted-d:#BCC6E3;
  --f-display:'Bricolage Grotesque','Trebuchet MS',Arial,sans-serif;
  --f-body:'Figtree',Arial,sans-serif;
  --f-serif:'Fraunces',Georgia,serif;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--ink);color:var(--cream);font-family:var(--f-body);overflow:hidden}
#app{position:fixed;inset:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-bottom,0px))}
#view{position:relative;width:100%;height:100%}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:50% 50%;overflow:hidden;border-radius:18px;box-shadow:0 30px 120px rgba(0,0,0,.55);background:var(--cream)}
#bg{position:absolute;inset:0;background:var(--cream)}
#cover-img{position:absolute;inset:0;width:1920px;height:1080px;max-width:none;object-fit:cover;opacity:0;transition:opacity .9s ease}
#gl{position:absolute;left:0;top:0;width:1920px;height:1080px;z-index:1;pointer-events:none}
#slides{position:absolute;inset:0;z-index:2}
.slide{position:absolute;inset:0;visibility:hidden;opacity:0;color:var(--fg)}
.slide.on{visibility:visible;opacity:1}
.slide[data-tone="dark"]{--fg:var(--cream);--mut:var(--muted-d)}
.slide[data-tone="light"]{--fg:var(--navy);--mut:var(--muted-l)}
.slide aside{display:none}
.abs{position:absolute}
.eyebrow{font:700 24px/1.1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ac)}
.h1{font-family:var(--f-display);font-weight:800;font-size:132px;line-height:.95;letter-spacing:-.035em;margin:0}
.h2{font-family:var(--f-display);font-weight:750;font-size:84px;line-height:1.02;letter-spacing:-.025em;margin:0;text-wrap:balance}
.h3{font-family:var(--f-display);font-weight:700;font-size:44px;line-height:1.1;margin:0}
.lead{font-size:34px;line-height:1.4;color:var(--mut);margin:0}
.small{font-size:26px;line-height:1.4;color:var(--mut);margin:0}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400}
.quote{font-family:var(--f-serif);font-weight:400;font-size:66px;line-height:1.2;margin:0;text-wrap:pretty}
.wi{display:inline-block;will-change:transform}
.ac{color:var(--ac)}
.card{border-radius:36px;padding:44px;box-sizing:border-box}
.btn{font:700 26px/1 var(--f-body);padding:20px 34px;border-radius:999px;border:0;cursor:pointer;background:var(--ac);color:var(--ink);transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 8px 0 rgba(0,0,0,.18)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 3px currentColor}
button:focus-visible,.flip:focus-visible{outline:4px solid var(--yellow);outline-offset:4px}
.chip{display:inline-flex;align-items:center;gap:12px;font:700 26px/1 var(--f-body);padding:16px 26px;border-radius:999px}
.num{font-variant-numeric:tabular-nums}

/* Cards that flip */
.flip{perspective:1800px;cursor:pointer;background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left}
.flip-in{position:relative;width:100%;height:100%;transition:transform 1s cubic-bezier(.2,.9,.25,1.25);transform-style:preserve-3d}
.flip.done .flip-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:32px;padding:40px;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box}
.face.back{transform:rotateY(180deg)}
.tilt{transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}

/* Timer */
.timer{display:flex;align-items:center;gap:36px}
.ring{position:relative;width:220px;height:220px}
.ring svg{width:220px;height:220px;transform:rotate(-90deg)}
.ring .t{position:absolute;inset:0;display:grid;place-items:center;font:800 54px/1 var(--f-display);font-variant-numeric:tabular-nums}
.timer .btns{display:flex;flex-direction:column;gap:16px}

/* Counter bars */
.cnt{display:flex;align-items:center;gap:18px}
.cnt button{width:64px;height:64px;border-radius:50%;border:0;font:800 34px/1 var(--f-display);cursor:pointer;background:var(--navy);color:var(--cream)}
.cnt .v{font:800 64px/1 var(--f-display);min-width:90px;text-align:center;font-variant-numeric:tabular-nums}

/* Fraction game */
.game{position:absolute;inset:28px;display:flex;flex-direction:column;gap:18px;color:var(--navy)}
.g-top{display:flex;justify-content:space-between;font:700 22px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.g-q{font:700 36px/1.15 var(--f-display);margin:0}
#g-pie{display:grid;place-items:center;height:260px}
#g-opts{display:grid;gap:12px}
.opt{font:800 34px/1 var(--f-display);padding:18px;border-radius:20px;border:0;background:#ECE4D4;color:var(--navy);cursor:pointer;transition:transform .15s,background .2s}
.opt:hover{transform:scale(1.03)}
.opt.ok{background:var(--lime)}
.opt.no{background:#FFC3D5}
#g-fb{font:600 24px/1.3 var(--f-body);min-height:62px;margin:0}

/* Rubric */
.rub{display:grid;gap:14px}
.rub-row{display:grid;grid-template-columns:300px 1fr;align-items:center;gap:20px}
.rub-row .lbl{font:700 38px/1 var(--f-display)}
.rub-row .opts{display:flex;gap:12px}
.rb{width:76px;height:64px;border-radius:18px;border:0;font:800 30px/1 var(--f-display);background:#ECE4D4;color:var(--navy);cursor:pointer;transition:transform .15s,background .2s}
.rb.sel{background:var(--ac);color:var(--ink);transform:scale(1.08)}

/* Planet labels */
.pl{position:absolute;width:300px;margin-left:-150px;text-align:center;cursor:pointer;background:none;border:0;color:var(--fg);font:inherit;padding:0}
.pl .n{font:800 40px/1.1 var(--f-display)}
.pl .d{font:500 24px/1.35 var(--f-body);color:var(--mut);margin-top:8px}

/* Arrows */
@keyframes bobUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
@keyframes bobDown{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.bob-up{animation:bobUp 1.6s ease-in-out infinite}
.bob-down{animation:bobDown 1.6s ease-in-out infinite}

/* HUD */
#progress{position:fixed;left:0;top:0;height:5px;background:linear-gradient(90deg,var(--blue),var(--pink),var(--orange),var(--lime));width:0;z-index:20;transition:width .6s cubic-bezier(.2,.8,.2,1)}
#hud{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:20;display:flex;align-items:center;gap:8px;background:rgba(11,16,34,.78);backdrop-filter:blur(10px);padding:8px;border-radius:999px;transition:opacity .4s}
#hud.idle{opacity:.12}
#hud button{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--cream);font:700 18px/1 var(--f-body);cursor:pointer}
#hud button:hover{background:rgba(255,255,255,.12)}
#hud .c{font:600 15px/1 var(--f-body);color:var(--muted-d);padding:0 8px;font-variant-numeric:tabular-nums}
#notes{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:max(80px,calc(env(safe-area-inset-bottom,0px) + 80px));max-height:38vh;overflow:auto;z-index:19;background:rgba(11,16,34,.94);color:var(--cream);border-radius:20px;padding:22px 28px;font:400 19px/1.55 var(--f-body);white-space:pre-line;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#notes b{display:block;font:700 13px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-bottom:10px}
#help{position:fixed;left:max(18px,env(safe-area-inset-left,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:20;font:500 13px/1.4 var(--f-body);color:var(--muted-d);background:rgba(11,16,34,.7);padding:8px 14px;border-radius:999px;transition:opacity .6s}
#help.idle{opacity:0}
@media (prefers-reduced-motion: reduce){.bob-up,.bob-down{animation:none}.flip-in{transition:none}}

/* Básicos */
[hidden]{display:none!important}
body{margin:0;font-size:14px}

.card{box-sizing:border-box}