*{box-sizing:border-box} :root{--navy:#0a2347;--gold:#ffd044;--green:#079928;--cream:#fff5d7}body{margin:0;color:var(--navy);font-family:'Trebuchet MS',Arial,sans-serif;font-weight:700;background:#75be62 url('assets/park.webp') center/cover fixed}button{font:inherit;cursor:pointer;border:0;color:inherit;touch-action:manipulation}button:focus-visible,[role=button]:focus-visible{outline:4px solid #f38021;outline-offset:3px}button:disabled{opacity:.55;cursor:default}#game{max-width:1700px;margin:auto;min-height:100dvh;padding:0 3% 16px;position:relative}header{height:91px;background:linear-gradient(130deg,#164c77,#052448);border-radius:0 0 27px 27px;color:white;display:flex;align-items:center;justify-content:space-between;padding:10px 28px;box-shadow:0 5px 12px #002b4a38}.brand{background:none;color:white;display:flex;align-items:center;gap:13px;text-align:left}.brand strong{font-size:clamp(27px,3.5vw,49px);letter-spacing:-1.6px;line-height:1}.brand small{display:block;font-size:15px;background:var(--gold);color:var(--navy);padding:2px 10px;border-radius:8px;width:max-content;margin-top:5px}.compass{border:5px solid var(--gold);border-radius:50%;font-size:47px;width:64px;height:64px;text-align:center;line-height:52px;color:var(--gold)}.header-right{display:flex;gap:10px;align-items:center}.valebox{font-size:26px;margin-right:20px}.score,.round{background:#19496e;color:white;border:2px solid #c9e9ff;border-radius:30px;min-height:42px;padding:6px 15px}.score{color:var(--gold);font-size:21px}.round{width:43px;padding:5px;font-size:23px}nav{display:flex;gap:9px;margin:17px 0 15px 10%;justify-content:center}nav button{background:linear-gradient(white,#fff4df);border-radius:28px;padding:11px 14px;font-size:clamp(13px,1.35vw,19px);box-shadow:0 4px 0 #c4a66c55;border:3px solid transparent;white-space:nowrap}nav button.active{background:linear-gradient(#17b944,#008e27);color:white;border-color:var(--gold);box-shadow:0 3px 0 #ad891c}nav button b{font-size:23px;vertical-align:middle;margin-right:6px}nav button .check{color:#0c9a35;font-size:13px}nav button.active .check{color:white}.guide{position:absolute;left:-1.5%;bottom:115px;width:21%;z-index:2;pointer-events:none}.guide img{width:100%;display:block;max-height:66vh;object-fit:contain;object-position:bottom}.guide-label{margin:-28px auto 0;text-align:center;font-size:20px;padding:10px;width:90%;max-width:230px;background:linear-gradient(#fffdf0,#ffedab);border:4px solid var(--gold);border-radius:22px;position:relative;box-shadow:0 3px 0 #9e751c44}main{margin-left:16%;border:4px solid var(--gold);border-radius:33px;background:linear-gradient(115deg,#fff,#fffefa);box-shadow:inset 0 0 0 5px white,0 7px 0 #94722c33;padding:16px 25px 20px;min-height:450px}.title-line{display:flex;align-items:center;justify-content:center;gap:16px}.spark{color:#f5bc00;font-size:31px}h1{font-size:clamp(23px,2.6vw,38px);margin:4px 0 14px;text-align:center;line-height:1.15}.mode-row{display:flex;align-items:center;justify-content:center;position:relative;min-height:44px}.modes{display:flex;background:var(--cream);border-radius:30px;overflow:hidden;box-shadow:0 3px 0 #d9c49766}.modes button{padding:8px 28px;background:transparent;font-size:20px;border-radius:30px}.modes button.active{background:linear-gradient(#13b935,#008c25);color:white;box-shadow:inset 0 2px 2px #ffffff77}#roundLabel{position:absolute;right:0;font-size:13px;color:#688168}.learning{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;min-height:310px}.figure-area{min-width:0;text-align:center;align-self:stretch;display:flex;flex-direction:column;justify-content:center}#figure{height:clamp(230px,34vh,360px);touch-action:none;user-select:none}#figure svg{width:100%;height:100%;overflow:visible}#figureName{font-size:18px;color:#455a70;margin-top:2px}.rotate-tools{font-size:12px;display:flex;justify-content:center;align-items:center;gap:5px}.rotate-tools[hidden]{display:none}.rotate-tools button{border-radius:15px;padding:5px 10px;background:#e7f7dd;border:1px solid #b1d49c}.rotate-tools button[aria-pressed=true]{background:#ffdf75}.parts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.parts button,.primary{background:linear-gradient(#1db914,#009315);color:white;border:2px solid #69d343;border-radius:19px;box-shadow:inset 0 2px 1px #e0ff9888,0 4px 0 #006f19;font-size:clamp(17px,1.8vw,25px);padding:11px 16px}.parts button.active{background:linear-gradient(#ffb129,#ff7800);border-color:#ffcb60;box-shadow:0 4px 0 #c36900}.parts button[data-part=overview]{grid-column:1/-1}.explanation{padding:17px 20px;background:linear-gradient(130deg,#fffaf0,#fff2d4);border:2px solid #e6c98a;border-radius:22px;font-size:clamp(16px,1.7vw,23px);line-height:1.4;box-shadow:inset 0 0 0 3px #fff9ec}.explanation small{display:block;font-size:14px;margin-top:9px;font-weight:normal;color:#60716c}.mission-row{display:flex;align-items:center;gap:12px;margin-top:10px;justify-content:space-between}.mission{background:#fff3cf;border-radius:22px;padding:12px 18px;font-size:clamp(15px,1.45vw,20px);flex:1}.actions{display:flex;align-items:center;gap:10px}.primary{white-space:nowrap}.primary span{margin-left:10px}.secondary{padding:10px 15px;border-radius:20px;background:#f2ffe7;border:2px solid #b9df9c;color:#235a18;white-space:nowrap}footer{display:flex;gap:8px;justify-content:center;margin:14px 0 0 16%;background:linear-gradient(#fff,#fff8e8);border:3px solid var(--gold);border-radius:25px;padding:8px 12px;box-shadow:0 4px 0 #b88a3555}footer button{background:transparent;flex:1;min-width:0;border:3px solid transparent;border-radius:18px;padding:2px 5px;font-size:14px}footer button.active{background:#fff3c4;border-color:var(--gold)}footer svg{display:block;width:100%;height:48px}footer button:hover{background:#fff1be}.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.answers button{background:#eff9ff;border:2px solid #afcede;border-radius:15px;padding:12px 6px;font-size:18px}.answers button.correct{background:#d9f3c7;border-color:#42ac38}.answers button.wrong{background:#ffe8cc;border-color:#ef9e4e}#feedback{min-height:24px;margin-top:10px;font-size:16px;color:#26612b}#feedback.error{color:#a45317}.pickable{cursor:pointer}.pickable:hover{filter:brightness(1.12)}#toast{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);background:#07304b;color:white;border-radius:18px;padding:12px 22px;z-index:8;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}dialog{border:4px solid var(--gold);border-radius:30px;max-width:820px;width:90vw;color:var(--navy);padding:30px;background:#fffdf5;text-align:center;box-shadow:0 20px 60px #001a3c66}dialog::backdrop{background:#092342ad;backdrop-filter:blur(5px)}.close{position:absolute;right:13px;top:7px;font-size:32px;background:none}.dialog-heading{font-size:30px}dialog p{font-weight:normal}.privacy{font-size:12px}.trophy{font-size:72px;color:#ecb500}#mapCards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:23px 0}#mapCards button{background:#f1f8df;border:2px solid #c7d9a8;border-radius:20px;padding:18px 10px;font-size:17px}#mapCards b{display:block;font-size:32px;color:#119a38;margin-bottom:7px}#mapCards small{display:block;font-size:12px;margin-top:8px;font-weight:normal}#resultStars{font-size:35px;color:#dca700;margin:15px}#finish button{margin:8px}.confetti{animation:celebrate .65s ease}@keyframes celebrate{50%{transform:scale(1.025);box-shadow:0 0 25px #ffc526}}@media(min-width:1000px) and (max-height:780px){header{height:76px}.brand strong{font-size:36px}.compass{width:53px;height:53px;line-height:42px;font-size:39px}nav{margin-top:10px;margin-bottom:10px}nav button{padding:7px 11px}main{padding:10px 20px 14px;min-height:0}h1{margin-bottom:7px}.learning{min-height:260px}#figure{height:29vh}.explanation{padding:12px 16px}.parts{margin-bottom:10px;gap:8px}.parts button{padding:7px 10px}.mission{padding:10px 14px}.primary{padding:8px 13px}footer{margin-top:10px}footer svg{height:38px}}@media(max-width:1000px){#game{padding:0 2% 15px}.valebox{display:none}.guide{left:-3%;width:20%;bottom:105px}.guide-label{font-size:14px}nav{margin-left:0;gap:5px}nav button{padding:8px;font-size:13px}nav button b{display:none}main,footer{margin-left:14%}main{padding:14px 17px}.learning{gap:15px}.parts button{padding:9px;font-size:18px}.actions{gap:5px}.secondary{padding:9px}.mission-row{flex-wrap:wrap}.mission{flex-basis:50%}.brand small{font-size:12px}.header-right{gap:5px}.score{padding:6px 10px}.round{width:38px}footer button{font-size:11px}.explanation{font-size:17px}#roundLabel{position:static;margin-left:12px}}
@media(max-width:650px){header{height:77px;padding:8px 12px}.brand strong{font-size:27px}.compass{display:none}.brand small{font-size:10px}.header-right{gap:4px}.score{font-size:16px}.round{font-size:20px;width:35px;min-height:35px}#fullscreen{display:none}nav{flex-wrap:wrap;gap:6px;margin:12px 0}nav button{flex:1 0 29%;padding:7px 3px;font-size:12px}.guide{display:none}main,footer{margin-left:0}main{padding:14px;border-radius:23px}.spark{display:none}h1{font-size:23px}.learning{grid-template-columns:1fr;gap:9px;min-height:0}#figure{height:235px}.modes button{font-size:17px;padding:7px 22px}.lesson{display:flex;flex-direction:column}.parts{grid-template-columns:repeat(4,1fr);gap:5px}.parts button{font-size:13px;padding:9px 4px;border-radius:13px}.parts button[data-part=overview]{grid-column:auto}.explanation{font-size:16px;padding:12px}.explanation small{font-size:12px}.mission-row{margin-top:5px}.mission{flex-basis:100%;font-size:15px}.actions{justify-content:flex-end;width:100%}.primary{font-size:18px}.answers button{padding:10px;font-size:16px}footer{flex-wrap:wrap;padding:7px}footer button{flex:1 0 20%;font-size:11px}footer svg{height:40px}#mapCards{grid-template-columns:1fr 1fr}#figureName{font-size:15px}.guide-label{display:none}#feedback{margin-top:6px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Pantalla única: se redistribuye el contenido y se ajusta a la altura real. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
#game{min-height:0;height:auto;width:100%;padding-bottom:8px;transform-origin:top center}
header{height:clamp(52px,9dvh,82px)}
nav{margin-top:10px;margin-bottom:10px}
main{min-height:0;padding-top:10px;padding-bottom:12px}
h1{margin:2px 0 8px}
.learning{min-height:0;gap:18px}
#figure{height:clamp(150px,32dvh,330px)}
.parts{gap:8px;margin-bottom:10px}
.parts button{padding:8px 12px}
.explanation{padding:12px 16px}
#feedback:empty{display:none}
#feedback{min-height:0}
.mission-row{margin-top:8px}
footer{margin-top:10px;padding:5px 10px}
footer svg{height:clamp(28px,5dvh,48px)}
.guide{left:0;bottom:90px;width:18%}
.guide img{max-height:57dvh}
.guide-label{font-size:16px;padding:6px}
dialog{max-height:none;max-width:min(820px,94vw);overflow:visible;transform-origin:center}
@media(max-width:650px){
#game{padding:0 8px 6px}
header{height:55px;padding:6px 10px;border-radius:0 0 20px 20px}
.brand strong{font-size:24px}.brand small{font-size:9px;margin-top:3px}
nav{margin:7px 0;gap:5px}nav button{padding:6px 2px}
main{padding:9px 12px;border-width:3px;border-radius:22px}
h1{font-size:20px;margin:0 0 6px}
.mode-row{min-height:32px}.modes button{padding:6px 16px;font-size:15px}
#roundLabel{font-size:11px;margin-left:8px}
.learning{gap:5px}
#figure{height:clamp(105px,21dvh,190px)}
#figureName{font-size:13px;margin:0 0 3px}
.parts{gap:5px;margin:5px 0 7px;grid-template-columns:repeat(4,minmax(0,1fr))}
.parts button{font-size:12px;padding:7px 3px;white-space:normal}
.explanation{padding:9px 11px;font-size:14px;line-height:1.3;border-radius:16px}
.answers{gap:6px;margin-top:8px}.answers button{padding:8px 4px;font-size:14px}
#feedback{font-size:13px;margin-top:6px;line-height:1.25}
.mission-row{gap:6px;margin-top:7px}
.mission{padding:7px 10px;font-size:12px;border-radius:14px}
.primary,.secondary{padding:7px 12px;font-size:15px}
.rotate-tools{font-size:10px;gap:4px}.rotate-tools button{padding:5px 8px}
footer{gap:3px;margin-top:7px;padding:4px;border-width:2px;border-radius:18px}
footer button{padding:1px 3px;font-size:10px;border-width:2px;flex:1 0 21%}
footer svg{height:28px}
#mapCards{gap:8px;margin:14px 0}#mapCards button{padding:10px 7px;font-size:15px}
#mapCards b{font-size:24px;margin-bottom:4px}dialog{padding:22px 16px}
.dialog-heading{font-size:22px}.trophy{font-size:48px}
}
@media(min-width:651px) and (max-height:600px){
#game{padding:0 12px 6px}header{height:48px;padding:5px 18px}
.brand strong{font-size:27px}.brand small{font-size:9px}.compass{height:37px;width:37px;font-size:28px;line-height:29px;border-width:3px}
.valebox{font-size:19px}.round,.score{min-height:32px;font-size:17px}.round{width:33px}
nav{margin:6px 0;gap:5px}nav button{padding:5px 10px;font-size:12px}nav button b{display:none}
main,footer{margin-left:12%}main{padding:7px 13px;border-width:3px;border-radius:23px}
h1{font-size:22px;margin:0 0 4px}.spark{font-size:20px}.mode-row{min-height:28px}.modes button{font-size:14px;padding:5px 20px}
#figure{height:125px}.learning{gap:14px}.figure-area{min-height:0}#figureName{font-size:12px}
.parts{gap:5px;margin-bottom:6px}.parts button{font-size:14px;padding:5px 8px;border-radius:13px}
.parts button[data-part=overview]{grid-column:auto}.explanation{font-size:13px;padding:8px 10px;line-height:1.25;border-radius:14px}
.answers{margin-top:6px;gap:5px}.answers button{font-size:13px;padding:6px}
#feedback{font-size:12px;margin-top:5px}.mission-row{flex-wrap:nowrap;gap:8px;margin-top:5px}.mission{font-size:12px;padding:6px 9px;flex-basis:auto}
.primary,.secondary{font-size:13px;padding:6px 10px}.rotate-tools{font-size:10px}.rotate-tools button{padding:3px 8px}
footer{margin-top:6px;padding:3px 7px}footer svg{height:24px}footer button{font-size:10px;padding:0 3px}
.guide{width:14%;bottom:68px}.guide img{max-height:61dvh}.guide-label{font-size:11px;padding:4px}
dialog{padding:15px 22px}.dialog-heading{font-size:23px}#mapCards{margin:10px 0;gap:7px}#mapCards button{padding:8px;font-size:14px}#mapCards b{font-size:22px}dialog p{margin:8px 0}.trophy{font-size:40px}#resultStars{font-size:27px;margin:8px}
}

/* Aprovechar la altura de tablet y ordenador sin añadir desplazamiento. */
@media(min-width:651px){
 #game{height:var(--available-height,100dvh);display:flex;flex-direction:column}
 #game>header,#game>nav,#game>footer{flex-shrink:0}
 #game>main{flex:1;display:flex;flex-direction:column;min-height:0}
 .title-line,.mode-row,.mission-row{flex-shrink:0}
 .learning{flex:1;min-height:0}
 .figure-area{min-height:0}
 #figure{height:0;min-height:100px;flex:1}
 #figureName,.rotate-tools{flex-shrink:0}
 .guide{bottom:90px}
}
@media(min-width:651px) and (max-height:600px){.guide{bottom:68px}}