:root{--bg:#10112b;--panel:#1b1d43;--panel2:#252854;--text:#fff;--muted:#b9bddb;--pink:#ff4f9a;--cyan:#39d6e8;--yellow:#ffd34e;--green:#35d39a;--red:#ff6577}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 10%,#34366f 0,transparent 32%),radial-gradient(circle at 90% 90%,#4a205c 0,transparent 30%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;display:flex;align-items:center;justify-content:center;padding:22px}
.app{width:min(850px,100%);background:rgba(27,29,67,.96);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:clamp(22px,5vw,46px);box-shadow:0 24px 80px #05061699}
.topline{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:.88rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pill{background:#ffffff12;border:1px solid #ffffff20;border-radius:99px;padding:8px 13px}
h1{font-size:clamp(2rem,6vw,3.7rem);line-height:1.03;margin:24px 0 14px;letter-spacing:-.045em}
.gradient{background:linear-gradient(90deg,var(--cyan),#a99bff,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
p{color:var(--muted);line-height:1.65}
.start-content{text-align:center;padding:20px 0 8px}.start-content .eyebrow{color:var(--yellow);font-weight:800;letter-spacing:.15em;text-transform:uppercase;font-size:.8rem}
.start-content p{max-width:590px;margin:0 auto 28px}
.btn{border:0;border-radius:14px;padding:15px 24px;background:linear-gradient(100deg,var(--pink),#a45cff);color:white;font-weight:850;font-size:1rem;cursor:pointer;box-shadow:0 8px 24px #ff4f9a35;transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.btn:focus-visible,.answer:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.secondary{background:#ffffff12;box-shadow:none;border:1px solid #ffffff25}
.stats{display:flex;gap:10px;flex-wrap:wrap}.stat{flex:1;min-width:110px;background:#ffffff0c;border:1px solid #ffffff13;border-radius:15px;padding:12px;text-align:center}.stat strong{display:block;font-size:1.35rem}.stat span{color:var(--muted);font-size:.78rem}
.progress-wrap{height:9px;background:#ffffff17;border-radius:99px;overflow:hidden;margin:22px 0 28px}.progress{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink));transition:width .3s}
.question{font-size:clamp(1.25rem,3vw,1.8rem);line-height:1.3;margin:0 0 22px}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.answer{border:2px solid transparent;border-radius:16px;padding:18px 16px;min-height:82px;text-align:left;color:white;font-size:1rem;font-weight:750;cursor:pointer;display:flex;align-items:center;gap:12px;transition:transform .15s,border .15s,filter .15s}
.answer:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.1)}
.answer:disabled{cursor:default;opacity:1}
.answer:nth-child(1){background:#db477f}.answer:nth-child(2){background:#267fc4}.answer:nth-child(3){background:#b17a21}.answer:nth-child(4){background:#258b70}
.shape{font-size:1.25rem;background:#0002;border-radius:9px;width:30px;height:30px;display:grid;place-items:center;flex-shrink:0}
.answer.correct{border-color:#8dffcb;box-shadow:0 0 0 3px #35d39a55}.answer.wrong{border-color:#ff9aa5;filter:grayscale(.35)}
.feedback{margin-top:18px;padding:17px 18px;border-radius:15px;background:#ffffff10;border:1px solid #ffffff20;line-height:1.55;color:#e9eaff}
.feedback.good{border-color:#35d39a88}.feedback.bad{border-color:#ff657788}
.actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}
.hidden{display:none!important}.small{font-size:.82rem;color:var(--muted)}
.result{text-align:center}.score{font-size:clamp(3.4rem,12vw,6rem);font-weight:950;line-height:1;margin:18px 0;background:linear-gradient(90deg,var(--yellow),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.result h2{font-size:2rem;margin-bottom:4px}.review{margin:25px 0 0;text-align:left;display:grid;gap:10px}.review-item{background:#ffffff0b;border:1px solid #ffffff15;border-radius:13px;padding:13px}.review-item strong{display:block;margin-bottom:5px}.review-item span{font-size:.9rem;color:var(--muted)}
footer{border-top:1px solid #ffffff18;margin-top:28px;padding-top:18px;font-size:.78rem;color:#aeb2d2;line-height:1.55}footer a{color:var(--cyan)}
@media(max-width:600px){body{padding:12px}.app{border-radius:20px;padding:22px 17px}.answers{grid-template-columns:1fr}.answer{min-height:66px}.topline{font-size:.72rem}.actions{align-items:stretch;flex-direction:column-reverse}.actions .btn{width:100%}}

/* Identidade visual jovem + narrativa */
body{background-color:#090a20;background-image:radial-gradient(ellipse at 8% 15%,#713bce66 0,transparent 34%),radial-gradient(ellipse at 92% 18%,#00c6d766 0,transparent 28%),radial-gradient(ellipse at 80% 100%,#ff3d9a44 0,transparent 34%),linear-gradient(135deg,#090a20,#171039 58%,#101b3d);background-attachment:fixed}
.app{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(31,29,78,.97),rgba(17,20,53,.98));border:1px solid #ffffff24;box-shadow:0 30px 100px #030414bb,0 0 55px #8d4dff19}
.app:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#25e0d0,#8a65ff,#ff4f9a,#ffd34e)}
h1{letter-spacing:-.055em}
.btn{background:linear-gradient(100deg,#ff438d,#a04dff 55%,#5865ff);box-shadow:0 10px 30px #a04dff45,0 0 0 1px #ffffff24 inset;text-transform:uppercase;letter-spacing:.035em}
.pill{background:linear-gradient(120deg,#ffffff15,#ffffff08);backdrop-filter:blur(8px)}
.story-kicker{display:flex;align-items:center;gap:10px;color:#54e6dc;font-weight:900;font-size:.78rem;letter-spacing:.16em;margin-top:26px}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:#54e6dc;box-shadow:0 0 0 6px #54e6dc22,0 0 18px #54e6dc;display:inline-block}
.story-title{font-size:clamp(2.5rem,8vw,4.5rem);margin:18px 0 8px}
.story-lead{font-size:1.08rem;max-width:650px;margin:0 0 25px}
.story-scene{position:relative;overflow:hidden;border:1px solid #ffffff24;border-radius:22px;padding:25px;background:linear-gradient(115deg,#542b9c,#293b86 60%,#146d83);box-shadow:0 16px 40px #05061655}
.story-scene:after{content:"";position:absolute;width:210px;height:210px;border:1px solid #ffffff20;border-radius:50%;right:-70px;top:-90px;box-shadow:0 0 0 25px #ffffff08,0 0 0 55px #ffffff05}
.scene-number{font-size:.7rem;font-weight:900;letter-spacing:.15em;color:#9af7ee}
.scene-icon{font-size:2.1rem;margin:13px 0 5px}
.story-scene h2,.story-card h3{margin:0 0 8px;font-size:1.35rem}
.story-scene p,.story-card p{margin:0;color:#e4e7ff;line-height:1.65}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.story-card{border:1px solid #ffffff20;border-radius:19px;padding:20px;background:linear-gradient(145deg,#ffffff12,#ffffff06)}
.story-card .scene-icon{font-size:1.7rem;margin:10px 0}
.story-card h3{font-size:1.1rem}
.story-quote{margin-top:16px;border-left:4px solid #ffcf4a;border-radius:0 16px 16px 0;padding:17px 19px;background:linear-gradient(90deg,#ffcf4a18,#ffffff06)}
.story-quote span{display:block;color:#ffda70;font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em;margin-bottom:7px}
.story-quote strong{display:block;font-size:1.12rem;line-height:1.45}
.story-quote small{display:block;color:var(--muted);line-height:1.5;margin-top:8px}
.story-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.answer{box-shadow:0 8px 22px #0002;border:1px solid #ffffff20}
.answer:nth-child(1){background:linear-gradient(135deg,#e84387,#b82c75)}
.answer:nth-child(2){background:linear-gradient(135deg,#278fd1,#2461b5)}
.answer:nth-child(3){background:linear-gradient(135deg,#d49428,#a96616)}
.answer:nth-child(4){background:linear-gradient(135deg,#22a886,#17745f)}
@media(max-width:600px){.story-grid{grid-template-columns:1fr}.story-actions{align-items:stretch;flex-direction:column}.story-actions .btn{width:100%}.story-scene{padding:20px}}

.name-entry{max-width:420px;margin:26px auto 12px;display:grid;gap:10px;text-align:left}.name-entry label{font-weight:800;color:#e9eaff}.name-entry input{width:100%;padding:15px 16px;border:1px solid #ffffff30;border-radius:13px;background:#ffffff10;color:white;font-size:1rem;outline:none}.name-entry input:focus{border-color:var(--cyan)}.name-entry input::placeholder{color:#aeb2d2}.question-story{margin:18px 0 22px;padding:20px;border:1px solid #ffffff25;border-radius:18px;background:linear-gradient(120deg,#542b9c88,#146d8388)}.story-label{font-size:.72rem;font-weight:900;letter-spacing:.15em;color:#9af7ee;text-transform:uppercase}.question-story p{margin:9px 0 0;color:#f0f1ff;line-height:1.65}.leaderboard{margin:26px 0;text-align:left;padding:18px;border:1px solid #ffffff20;border-radius:16px;background:#ffffff09}.leaderboard h3{margin:0 0 4px}.leaderboard ol{padding-left:25px;margin-bottom:0}.leaderboard li{padding:9px 2px;color:#e9eaff;border-bottom:1px solid #ffffff12}.leaderboard li:last-child{border:0}.leaderboard li strong{float:right;color:var(--yellow)}