:root{--bg:#030814;--panel:rgba(7,20,43,.78);--line:rgba(255,255,255,.15);--gold:#ffd65a;--text:#fff;--muted:#a9bedb;--good:#54e29b;--bad:#ff6377}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#030814;color:var(--text);font-family:Nunito,system-ui,sans-serif;overflow:hidden}button,input{font:inherit}
body{background:radial-gradient(circle at 20% 0,rgba(30,144,255,.18),transparent 35%),radial-gradient(circle at 80% 0,rgba(255,214,90,.12),transparent 30%),linear-gradient(180deg,#071830,#020611)}
.app,.game-shell{height:100dvh;width:100vw}.game-shell{position:relative;overflow:hidden;background:#06142b}.canvas-wrap{position:relative;height:calc(100dvh - 92px);display:grid;place-items:center;overflow:hidden;background:#030d20}
#gameCanvas{display:block;width:100%;height:100%;object-fit:contain;max-width:100%;max-height:100%;background:#7bdcff;image-rendering:pixelated;touch-action:none}
.game-top-ui{position:absolute;top:10px;left:12px;right:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;z-index:8;pointer-events:none}.hud-panel{background:var(--panel);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.28)}.hud-left{display:flex;align-items:center;gap:10px;padding:8px 12px;min-width:220px;pointer-events:auto}#hudAvatar,.map-status img{width:48px;height:48px;border-radius:14px;object-fit:cover;border:2px solid rgba(255,255,255,.12);background:radial-gradient(circle,#dffbff,#429bd9)}.hud-left small{display:block;color:#9db5d3;font-size:.55rem;font-weight:900;letter-spacing:.08em}.hud-left strong{display:block;font:700 1.02rem Fredoka}.hud-left em{display:block;color:#dbe8f9;font-style:normal;font-size:.68rem;font-weight:900}.world-chip{align-self:center;padding:8px 14px;background:rgba(4,14,34,.86);border:1px solid var(--line);border-radius:999px;font:900 .74rem Nunito;box-shadow:0 10px 25px rgba(0,0,0,.25)}.hud-right{display:flex;align-items:center;gap:7px;pointer-events:auto}.mini-stat{display:flex;align-items:center;justify-content:center;gap:6px;min-width:58px;padding:8px 10px}.mini-stat img{width:22px;height:22px;object-fit:contain}.mini-stat span{font-size:1rem}.mini-stat b{font:700 .96rem Fredoka}.icon-btn{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:#fff;font-size:1.1rem;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.25)}
.overlay{position:absolute;inset:0;display:none;place-items:center;background:rgba(2,7,18,.35);backdrop-filter:blur(6px);z-index:20}.overlay.open{display:grid}.image-overlay{padding:0}.overlay-bg{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none}.hotspot,.character-option,.kingdom-node{position:absolute;background:transparent;border:0;cursor:pointer}.hotspot:focus-visible,.character-option:focus-visible,.kingdom-node:focus-visible{outline:3px solid #ffe16b;outline-offset:2px;border-radius:20px}
.menu-play{left:38.6%;top:52.2%;width:36.1%;height:23.1%;border-radius:34px}.menu-settings{left:74.3%;top:78.1%;width:21.4%;height:14.3%;border-radius:26px}
.name-input{position:absolute;left:50%;top:17%;transform:translateX(-50%);width:min(310px,28%);padding:10px 16px;border-radius:999px;border:2px solid rgba(255,255,255,.35);background:rgba(7,20,43,.74);color:#fff;font-weight:800;box-shadow:0 10px 25px rgba(0,0,0,.3)}
.character-option{border-radius:28px;transition:.16s transform,.16s box-shadow}.character-option.selected{box-shadow:0 0 0 4px #ffe16b,0 0 32px rgba(255,214,90,.45)}.character-raphael{left:14.6%;top:35.7%;width:32.4%;height:42.6%}.character-bianca{left:52.1%;top:35.7%;width:32.6%;height:42.6%}.char-prev{left:6.1%;top:49.7%;width:6.5%;height:11.1%;border-radius:50%}.char-next{left:87.5%;top:49.7%;width:6.5%;height:11.1%;border-radius:50%}.char-play{left:34.1%;top:82.1%;width:32.6%;height:11.7%;border-radius:26px}.char-settings{left:78.6%;top:80.5%;width:14.9%;height:17.4%;border-radius:24px}
.map-status{position:absolute;left:2.2%;bottom:3.2%;display:flex;align-items:center;gap:10px;padding:8px 12px}.map-status b{display:block;font:700 1rem Fredoka}.map-status span,.map-status i{font-style:normal;color:#e3ecf8;font-size:.78rem}.kingdom-node{width:10.5%;height:18%;border-radius:28px;transition:.18s transform,.18s box-shadow}.kingdom-node.selected{box-shadow:0 0 0 4px #ffe16b,0 0 28px rgba(255,214,90,.4);transform:translateY(-2px)}.kingdom-node.locked{filter:grayscale(1) brightness(.7);opacity:.55}.node-1{left:5.8%;top:31.8%}.node-2{left:25.8%;top:28.6%}.node-3{left:45.1%;top:34.3%}.node-4{left:66.5%;top:31.5%}.node-5{left:3.7%;top:67.1%}.node-6{left:27.2%;top:74.2%}.node-7{left:49.8%;top:73.7%}.node-8{left:73.2%;top:76.6%}.map-play{left:77.1%;top:2.1%;width:10.5%;height:16.7%;border-radius:24px}.map-settings{left:88.1%;top:2.1%;width:10.3%;height:16.7%;border-radius:24px}
.quiz-overlay{background:rgba(1,6,18,.72)}
.quiz-frame{position:relative;width:min(1000px,96vw);aspect-ratio:1024/645;background:url('v6/ui/question_frame.png') center/100% 100% no-repeat}
.quiz-category,.quiz-title{display:none}
.question{position:absolute;left:32%;right:14%;top:23.2%;height:21.5%;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 18px;color:#5b3518;font-weight:900;font-size:clamp(1.12rem,1.85vw,1.56rem);line-height:1.22;text-wrap:balance;overflow:hidden}
.question.q-medium{font-size:clamp(1.02rem,1.65vw,1.34rem)}
.question.q-long{font-size:clamp(.9rem,1.4vw,1.18rem);line-height:1.18}
.answers{position:absolute;inset:0;display:block;pointer-events:none}
.answers button{position:absolute;border:0;border-radius:24px;background:transparent;color:#5b3518;padding:0;margin:0;font-weight:900;cursor:pointer;pointer-events:auto;box-shadow:none}
.answers button:nth-child(1){left:18.2%;top:56.5%;width:31.6%;height:10.5%}
.answers button:nth-child(2){left:51.0%;top:56.5%;width:31.6%;height:10.5%}
.answers button:nth-child(3){left:18.2%;top:68.9%;width:31.6%;height:10.5%}
.answers button:nth-child(4){left:51.0%;top:68.9%;width:31.6%;height:10.5%}
.answers button span{display:none}
.answers button b{position:absolute;left:21.5%;right:2%;top:2%;bottom:2%;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 12px;font-weight:900;font-size:1.08rem;line-height:1.08;white-space:normal;overflow-wrap:anywhere}
.answers button.correct b{background:rgba(84,226,155,.18);border-radius:14px;box-shadow:0 0 0 3px rgba(84,226,155,.72) inset}
.answers button.wrong b{background:rgba(255,99,119,.15);border-radius:14px;box-shadow:0 0 0 3px rgba(255,99,119,.72) inset}
.feedback{position:absolute;left:32%;right:22%;bottom:7.8%;min-height:4%;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px 10px;border-radius:12px;background:rgba(255,248,222,.82);color:#5b3518;font-size:.84rem;font-weight:900;line-height:1.12;opacity:0;pointer-events:none}
.feedback:not(:empty){opacity:1}
.secondary,.primary{border:0;border-radius:999px;padding:10px 18px;font-weight:900;cursor:pointer}.primary{background:linear-gradient(90deg,#2cbcff,#7f67ff,#ff5b9c);color:#fff}.secondary{background:#11305c;color:#fff}.hidden{display:none!important}
#retryBtn{position:absolute;left:50%;bottom:1.3%;transform:translateX(-50%);z-index:3;padding:7px 14px;font-size:.72rem}
.level-card,.end-card,.settings-card{padding:24px;border-radius:24px;border:1px solid var(--line);background:rgba(7,20,43,.92);text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.38)}.level-card h2,.end-card h2,.settings-card h3{margin:.35rem 0 .5rem;font:700 2rem Fredoka}.level-card small,.end-card small{color:#adc2de;font-weight:900;letter-spacing:.12em}.level-card p,.settings-card p{margin:0;color:#e0e8f5}.end-stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:16px 0}.end-stats span{padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.06)}
.settings-card{width:min(420px,92vw)}.settings-card input{width:100%;margin:14px 0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#08162e;color:#fff}.settings-actions{display:flex;gap:12px;justify-content:center}.dev-status{display:block;min-height:20px;color:#e8f1ff;margin-top:12px}
.gameover-retry{left:31.5%;top:53.5%;width:37.6%;height:13.7%;border-radius:30px}.gameover-menu{left:36.7%;top:71.3%;width:27%;height:10.8%;border-radius:24px}
.toast{position:absolute;left:50%;bottom:110px;transform:translateX(-50%) translateY(12px);padding:12px 18px;border-radius:16px;background:rgba(14,20,32,.92);color:#fff;font-weight:800;opacity:0;pointer-events:none;transition:.18s;z-index:35}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.rotate-hint{display:none;position:fixed;inset:0;z-index:99;place-items:center;background:#020611;color:#fff;text-align:center;padding:30px}.rotate-hint div{display:grid;gap:10px}.rotate-hint b{font-size:1.5rem}.rotate-hint span{color:#bdd0ea}
.mobile-controls{height:92px;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;position:relative;background:linear-gradient(180deg,rgba(4,18,42,.92),rgba(2,10,24,.98));border-top:1px solid rgba(255,255,255,.08)}.mobile-controls>div{display:flex;gap:12px}.mobile-controls button{min-width:68px;height:68px;border-radius:22px;border:2px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#0c2a56,#071630);color:#fff;font-size:1.2rem;font-weight:900;box-shadow:0 10px 25px rgba(0,0,0,.28)}.mobile-controls button small{display:block;font-size:.6rem;margin-top:2px}.mobile-controls .attack{background:linear-gradient(180deg,#ef5a60,#b81f3d)}.mobile-controls .jump{background:linear-gradient(180deg,#45a2ff,#1e59bb)}.mobile-controls .interact{background:linear-gradient(180deg,#d4a93f,#9d7314)}
.sr-only{position:absolute!important;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}
@media (max-width:900px){.canvas-wrap{height:calc(100dvh - 84px)}.game-top-ui{top:8px;left:8px;right:8px;gap:6px}.hud-left{min-width:155px;padding:6px 8px}#hudAvatar{width:38px;height:38px}.hud-left strong{font-size:.9rem}.hud-left em{font-size:.58rem}.world-chip{font-size:.62rem;padding:7px 10px;max-width:40%;text-align:center}.mini-stat{min-width:44px;padding:6px}.mini-stat img{width:18px;height:18px}.mini-stat b{font-size:.82rem}.icon-btn{width:36px;height:36px;border-radius:12px;font-size:.95rem}.mobile-controls{height:84px;padding:8px}.mobile-controls button{min-width:58px;height:58px;border-radius:18px}.toast{bottom:98px;font-size:.82rem}.name-input{top:13%;width:54%}.quiz-frame{width:min(98vw,1000px)}.question{left:31.8%;right:14%;top:23.4%;font-size:clamp(.96rem,2.3vw,1.18rem)}.question.q-medium{font-size:clamp(.86rem,2.0vw,1.04rem)}.question.q-long{font-size:clamp(.78rem,1.8vw,.94rem)}.answers button b{left:21%;right:2%;font-size:.9rem;padding:0 8px}.feedback{font-size:.72rem}}
@media (max-width:760px){.world-chip{display:none}.hud-right{gap:4px}.mini-stat{min-width:40px;padding:5px 6px}.mini-stat span{font-size:.88rem}.mini-stat b{font-size:.76rem}.hud-left small{font-size:.48rem}.hud-left em{font-size:.53rem}.map-status{padding:6px 8px}.map-status img{width:34px;height:34px}.map-status b{font-size:.85rem}.map-status span{font-size:.65rem}}
@media (orientation:portrait) and (pointer:coarse){.rotate-hint{display:grid}.app{visibility:hidden}}

/* V7.0.1 — image-stage alignment + true fullscreen */
.canvas-wrap{height:100dvh}
.image-overlay{background:#020611;overflow:hidden}
.image-stage{position:relative;max-width:100vw;max-height:100dvh;flex:none}
.menu-stage,.gameover-stage{width:min(100vw,177.6833156dvh);aspect-ratio:1672/941}
.character-stage,.map-stage{width:min(100vw,150dvh);aspect-ratio:3/2}
.image-stage>.overlay-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.name-input{display:none!important}
.character-option.selected{box-shadow:inset 0 0 0 4px rgba(255,225,107,.88),0 0 24px rgba(255,214,90,.42)}
.character-raphael{left:14.5%;top:35.8%;width:31.4%;height:45.4%}
.character-bianca{left:52.8%;top:35.8%;width:31.8%;height:45.4%}
.char-prev{left:6.9%;top:50.2%;width:6.8%;height:10.8%}
.char-next{left:86.2%;top:50.2%;width:6.8%;height:10.8%}
.char-play{left:35.3%;top:86.0%;width:29.9%;height:11.1%;border-radius:26px}
.char-settings{left:79.1%;top:84.4%;width:12.3%;height:14.5%;border-radius:24px}
.node-1{left:6.8%;top:31.8%;width:13%;height:19%}
.node-2{left:27.2%;top:28.4%;width:13%;height:19%}
.node-3{left:46.8%;top:33.9%;width:13%;height:19%}
.node-4{left:67.8%;top:31.0%;width:13%;height:19%}
.node-5{left:6.2%;top:66.8%;width:13%;height:20%}
.node-6{left:29.0%;top:72.5%;width:13%;height:20%}
.node-7{left:51.0%;top:72.3%;width:13%;height:20%}
.node-8{left:75.0%;top:75.0%;width:13%;height:20%}
.map-play{left:76.0%;top:2.0%;width:10.8%;height:17.0%}
.map-settings{left:87.5%;top:2.0%;width:10.8%;height:17.0%}
.map-status{left:1.4%;bottom:1.2%;transform:scale(.9);transform-origin:left bottom}
.gameover-retry{left:33.8%;top:50.5%;width:32.5%;height:16.8%;border-radius:30px}
.gameover-menu{left:37.1%;top:68.1%;width:25.6%;height:11.0%;border-radius:24px}
.mobile-controls{display:none;position:fixed;left:0;right:0;bottom:max(8px,env(safe-area-inset-bottom));height:auto;padding:8px 12px;z-index:15;background:transparent;border:0;pointer-events:none}
.mobile-controls>div,.mobile-controls button{pointer-events:auto}
@media (pointer:coarse) and (orientation:landscape){body.playing .mobile-controls{display:flex}.canvas-wrap{height:100dvh}.game-top-ui{top:max(7px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}}
@media (pointer:fine){.mobile-controls{display:none!important}}