*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#172d38;font-family:system-ui,sans-serif;touch-action:auto;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#game{touch-action:none;display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#0e202ac4;color:#fff8df;text-align:center;padding:18px}.card{background:#203b47f4;border:3px solid #f5c965;border-radius:20px;padding:25px 22px;max-width:358px;width:100%;box-shadow:0 16px 45px #0008}.card h1{font:900 clamp(35px,9vw,45px)/.95 Impact,'Arial Narrow',sans-serif;letter-spacing:.6px;margin:9px 0 12px;color:#f5c965;text-shadow:2px 3px #112934}.card p{line-height:1.36;margin:9px 0}.card .lead{font-size:17px;font-weight:800}.card .instructions{background:#132b35;border-radius:12px;padding:12px 14px;text-align:left;font-size:14px;line-height:1.55}.card .tag{display:inline-block;background:#e97768;color:#17323e;border-radius:5px;padding:4px 9px;font:900 12px Impact,'Arial Narrow',sans-serif;letter-spacing:1px}.card .portrait{display:block;margin:auto;width:74px;height:74px;border:3px solid #f5c965;border-radius:16px;object-fit:cover;object-position:58% 31%;background:#fffaf0}.card button{display:block;width:100%;border:0;border-radius:12px;background:#f5c965;color:#17323e;font:900 20px Impact,'Arial Narrow',sans-serif;padding:13px 20px;margin-top:15px;cursor:pointer}.card button.secondary{background:#315361;color:#fff8df;font-size:17px;margin-top:9px}.card .small{font-size:12px;opacity:.8;margin-top:12px}.hide{display:none}

.end-screen{position:relative;width:min(100vw,calc(100vh * 390 / 844));height:min(100vh,calc(100vw * 844 / 390));width:min(100vw,calc(100dvh * 390 / 844));height:min(100dvh,calc(100vw * 844 / 390));max-width:390px;max-height:844px;overflow:hidden;background:#f3e6c8;box-shadow:0 20px 60px #07151a88;color:#19313a}.end-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.end-top{position:absolute;top:3%;left:5%;right:5%;text-align:center;filter:drop-shadow(0 2px 2px #fff7e6)}.end-top .tag{display:inline-block;background:#e97768;color:#17323e;border:2px solid #17323e;border-radius:5px;padding:4px 10px;font:900 12px Impact,'Arial Narrow',sans-serif;letter-spacing:1px}.end-top h1{margin:10px 0 0;color:#17323e;font:900 clamp(32px,9vw,42px)/.95 Impact,'Arial Narrow',sans-serif;letter-spacing:.5px;text-shadow:2px 3px #fff2d0}.end-bottom{position:absolute;bottom:2.3%;left:5%;right:5%;background:#203b47f2;color:#fff8df;border:3px solid #f5c965;border-radius:16px;padding:12px 15px 14px;text-align:center;box-shadow:0 8px 20px #081a2255}.end-bottom .result{margin:0;color:#f5c965;font:900 35px/.95 Impact,'Arial Narrow',sans-serif}.end-bottom .best{margin:3px 0 9px;font-size:13px}.end-bottom button{display:block;width:100%;border:0;border-radius:10px;background:#f5c965;color:#17323e;font:900 19px Impact,'Arial Narrow',sans-serif;padding:10px 12px;cursor:pointer}.end-bottom button.secondary{background:#315361;color:#fff8df;font-size:15px;margin-top:7px;padding:8px 12px}@media(max-height:600px){.end-bottom{padding:7px}.end-bottom .result{font-size:27px}.end-bottom .best{margin:0 0 4px}.end-bottom button{padding:6px}.end-top{top:2%}.end-top h1{margin:3px 0}}
/* Añadido en la copia mejorada */
.card button:disabled{opacity:.55;cursor:default}
#rotate{display:none;position:fixed;inset:0;z-index:5;place-items:center;background:#0e202a;color:#fff8df;text-align:center;padding:24px;font:900 22px/1.2 Impact,'Arial Narrow',sans-serif;letter-spacing:.5px}
@media (orientation:landscape) and (max-height:480px){#rotate{display:grid}}


.overlay.welcome-mode{padding:0;background:#08214b;display:block;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.overlay.welcome-mode.hide{display:none}
.welcome-screen{width:100%;max-width:430px;margin:0 auto;padding:0 14px 12px;color:#fff8df}
.welcome-hero{position:relative;width:100%;height:auto;aspect-ratio:863/740;overflow:hidden;margin:0 auto 6px}
.welcome-art{position:absolute;top:0;left:0;width:100%;height:auto}
.welcome-card{display:flex;align-items:center;gap:12px;min-height:76px;margin:6px 0;padding:9px 12px;background:#0c2851;border:2px solid #194379;border-radius:18px;text-align:left}
.welcome-card img{width:80px;height:58px;object-fit:contain;flex:none}
.welcome-card h2{font:900 17px/1.1 system-ui;margin:0 0 6px;color:#ffda3d}
.welcome-card p{font:600 14px/1.35 system-ui;margin:0}
.welcome-rule{font:700 14px/1.4 system-ui;text-align:center;margin:9px 8px}
.welcome-footer{position:sticky;bottom:0;z-index:2;padding:9px 0 max(12px,env(safe-area-inset-bottom));background:#08214bf5;box-shadow:0 -8px 16px #08214b;width:100%}
.welcome-load{height:14px;border:2px solid #426186;border-radius:999px;overflow:hidden;background:#193859;margin:0 20px}
.welcome-fill{height:100%;width:0;background:#ffda3d;border-radius:999px;transition:width .15s}
.welcome-status{min-height:20px;margin:5px 0;font:700 14px/1.4 system-ui;text-align:center}
.welcome-play{display:block;width:80%;min-height:54px;margin:8px auto 0;border:2px solid #ffe880;border-radius:18px;background:#ffda3d;color:#08214b;box-shadow:0 5px 0 #b58416;font:900 26px/1 system-ui;cursor:pointer;touch-action:manipulation}
.welcome-play:disabled{opacity:.5;cursor:wait;box-shadow:none}
.welcome-play:focus-visible{outline:3px solid white;outline-offset:4px}
@media(max-height:740px){.welcome-screen{max-width:390px}.welcome-card{min-height:72px}.welcome-card h2{font-size:16px}.welcome-card img{height:52px}}

.overlay.finish-mode{display:block;padding:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;background:#08214b}
.overlay.finish-mode.hide{display:none}
.result-screen{width:100%;max-width:430px;margin:0 auto;padding:0 14px 12px;color:#fff8df}
.result-hero{position:relative;width:100%;aspect-ratio:863/820;overflow:hidden}
.result-hero img{position:absolute;top:0;left:0;width:100%;height:auto}
.result-score{background:#0c2851;border:2px solid #194379;border-radius:18px;text-align:center;padding:12px;margin:8px 0}
.result-number{font:900 clamp(30px,9vw,48px)/1.1 system-ui;color:#ffda3d;margin:0;overflow-wrap:anywhere}
.result-number span{font-size:.55em;color:#fff8df}
.result-best{font:700 14px/1.4 system-ui;margin:5px 0 0}
.result-guide{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:8px 0}
.result-group{background:#0c2851;border:2px solid #194379;border-radius:16px;padding:10px 6px}
.result-group h2{font:900 16px/1.2 system-ui;margin:0 0 8px;color:#98d878;text-align:center}
.result-group.avoid h2{color:#ff9280}
.result-examples{display:flex;align-items:center;justify-content:space-evenly;gap:4px}
.result-examples img{width:30%;height:65px;object-fit:contain}
.result-actions{position:sticky;bottom:0;background:#08214bf5;box-shadow:0 -8px 16px #08214b;padding:10px 0 max(12px,env(safe-area-inset-bottom));z-index:2}
.result-actions button{display:block;width:94%;min-height:52px;margin:0 auto;border:2px solid #ffe880;border-radius:18px;background:#ffda3d;color:#08214b;box-shadow:0 4px 0 #b58416;font:900 21px/1.2 system-ui;cursor:pointer;touch-action:manipulation;padding:8px}
.result-actions button.secondary{margin-top:10px;min-height:44px;box-shadow:none;border-color:#487daf;background:#0c2851;color:#fff8df;font-size:16px}
.result-actions button:focus-visible{outline:3px solid white;outline-offset:3px}
@media(max-height:740px){.result-screen{max-width:390px}.result-score{padding:9px}.result-number{font-size:34px}.result-examples img{height:54px}}

.settings-entry{display:block;border:0;background:transparent;color:#dbe8fa;font:800 14px system-ui;letter-spacing:.5px;min-height:44px;margin:8px auto 0;padding:10px 20px;cursor:pointer}
#settingsDialog{width:min(94vw,430px);max-height:90vh;max-height:90dvh;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;border:2px solid #376294;border-radius:22px;background:#0b2348;color:#fff8df;padding:18px;font:500 15px/1.45 system-ui;box-shadow:0 16px 60px #0008}
#settingsDialog::backdrop{background:#020d24dc}
.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.settings-heading h2{color:#ffda3d;font:900 25px system-ui;margin:0}
.settings-close{width:44px;height:44px;border:1px solid #54779d;border-radius:12px;background:#17365e;color:#fff;font:700 22px system-ui;cursor:pointer}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:54px;border-bottom:1px solid #28486e;padding:9px 0;cursor:pointer}
.setting-row input{appearance:none;width:48px;height:28px;border:2px solid #60748b;border-radius:20px;position:relative;background:#253c56;flex:none;cursor:pointer}
.setting-row input:before{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .12s}
.setting-row input:checked{background:#f3c839;border-color:#f3c839}
.setting-row input:checked:before{transform:translateX(20px);background:#09224a}
.setting-row input:disabled{opacity:.4;cursor:default}
#settingsDialog small{display:block;color:#becfe3;font-size:13px;margin-top:4px}
#settingsDialog details{border-bottom:1px solid #28486e;padding:12px 0}
#settingsDialog summary{font-weight:800;cursor:pointer;min-height:32px;padding:5px 0;color:#ffda3d}
#settingsDialog p{margin:9px 0;font-size:14px}
#settingsDialog textarea{width:100%;min-height:90px;background:#163457;color:#fff;border:1px solid #55779f;border-radius:10px;padding:10px;font:14px system-ui;user-select:text;touch-action:auto}
#settingsDialog .support-copy{min-height:44px;border:0;border-radius:10px;padding:9px 14px;background:#ffda3d;color:#09224a;font:800 14px system-ui;cursor:pointer}
#settingsDialog :focus-visible{outline:3px solid white;outline-offset:3px}
.settings-version{text-align:center;color:#b4c9df;font-size:12px;margin:15px 0 0}
.social-links{display:grid;gap:8px;margin:8px 0}.social-links a{display:flex;align-items:center;min-height:48px;padding:10px 12px;border:1px solid #42658c;border-radius:12px;background:#163457;color:#fff8df;font:700 14px/1.3 system-ui;text-decoration:none}.social-links a:hover{border-color:#ffda3d}

#feedbackDialog{width:min(94vw,430px);max-height:90vh;max-height:90dvh;overflow:auto;touch-action:pan-y;overscroll-behavior:contain;border:2px solid #376294;border-radius:22px;background:#0b2348;color:#fff8df;padding:18px;font:500 15px/1.45 system-ui}
#feedbackDialog::backdrop{background:#020d24dc}
#feedbackDialog h2{font:900 23px system-ui;color:#ffda3d;margin:0}
#feedbackDialog p{font-size:14px}
#feedbackDialog label{display:block;margin:13px 0 5px;font-weight:700;text-align:left}
#feedbackDialog input,#feedbackDialog select,#feedbackDialog textarea{display:block;width:100%;min-height:44px;background:#163457;color:#fff;border:1px solid #55779f;border-radius:10px;padding:10px;font:15px system-ui;user-select:text;touch-action:auto}
#feedbackDialog textarea{min-height:85px}
#feedbackOutput[hidden]{display:none}
#feedbackDialog .feedback-copy,#feedbackDialog a{display:block;width:100%;text-align:center;min-height:48px;margin:12px 0 0;padding:11px;border:0;border-radius:12px;background:#ffda3d;color:#09224a;text-decoration:none;font:800 15px system-ui;cursor:pointer}
#feedbackDialog a{background:#163457;border:1px solid #55779f;color:#fff8df}
#feedbackDialog :focus-visible{outline:3px solid white;outline-offset:3px}
.map-picker{background:#123763;border:2px solid #5e94ba;border-radius:20px;overflow:hidden;margin:10px 0;color:#fff8df;box-shadow:0 5px 0 #051833}.map-label{font-size:12px;font-weight:800;letter-spacing:1.2px;margin:14px 0 6px;color:#c6dbee}.map-heading{display:flex;align-items:center;justify-content:space-between;padding:0 10px 10px;gap:12px}.map-heading h2{font-size:24px;letter-spacing:.6px;margin:0;color:#ffda3d}.map-heading button{width:44px;height:44px;border:1px solid #7098bc;border-radius:50%;background:#09244b;color:#fff8df;font-size:32px;line-height:1;cursor:pointer}.map-landscape{height:132px;overflow:hidden;background:linear-gradient(#76c8ed,#c6e9ec);touch-action:pan-y}.map-landscape img{width:100%;height:100%;object-fit:cover;object-position:center bottom;pointer-events:none}.map-picker #mapBest{font-weight:800;margin:12px 0 10px;font-size:16px}.map-dots{display:flex;justify-content:center;gap:10px;margin:0 0 14px}.map-dots button{width:12px;height:12px;border-radius:50%;border:1px solid #fff8df;background:transparent;padding:0;cursor:pointer}.map-dots button[aria-pressed="true"]{background:#ffda3d;border-color:#ffda3d}#howDialog{width:min(94vw,430px);max-height:90dvh;overflow:auto;touch-action:pan-y;background:#08214b;color:#fff8df;border:2px solid #ffda3d;border-radius:20px;padding:20px}#howDialog h2{text-align:center}#howDialog .welcome-play{font-size:18px}.welcome-hero{max-height:330px}.map-picker:focus-within{outline:2px solid #ffda3d}/* Compact map menu: preserve the approved hero crop and fit scenery previews. */
.welcome-screen{max-width:380px;padding:0 12px 10px}
.welcome-hero{width:260px;max-width:78%;max-height:none;aspect-ratio:863/740;margin:0 auto 4px}
.map-picker{margin:5px 0;border-radius:16px}
.map-label{font-size:11px;letter-spacing:.8px;margin:10px 0 4px}
.map-heading{padding:0 9px 7px;gap:8px}
.map-heading h2{font-size:21px}
.map-heading button{width:38px;height:38px;font-size:28px}
.map-landscape{height:100px;position:relative}
.map-landscape img{object-fit:contain;object-position:center bottom}
.map-landscape[data-scene="barrio"] img,.map-landscape[data-scene="costa"] img,.map-landscape[data-scene="yunque"] img,.map-landscape[data-scene="sanjuan"] img{position:absolute;width:100%;height:auto;bottom:-12%;left:0}
.map-picker #mapBest{font-size:14px;margin:8px 0}
.map-dots{margin:0 0 10px;gap:9px}
.map-dots button{width:10px;height:10px}
.welcome-footer{padding-top:5px}
.welcome-play{min-height:46px;font-size:22px;margin-top:5px}
.settings-entry{min-height:34px;margin:3px auto;font-size:12px}
@media(max-height:700px){.welcome-hero{width:220px}.map-landscape{height:85px}.map-label{margin-top:7px}.map-heading{padding-bottom:4px}}
/* Keep approved hero sizing; compact only the destination picker. */
.welcome-screen{max-width:430px;padding:0 14px 12px}
.welcome-hero{width:100%;max-width:none;max-height:330px;aspect-ratio:863/740;margin:0 auto 6px}
.map-picker{width:88%;max-width:330px;margin:6px auto}
.map-landscape{height:80px}
.map-heading h2{font-size:19px}
.map-heading button{width:34px;height:34px;font-size:26px}
.welcome-play{min-height:54px;font-size:26px;margin:8px auto 0}
@media(max-height:700px){.welcome-hero{width:100%}.map-landscape{height:75px}}
/* Landscape cards: close crop with the destination name inside the scene. */
.map-heading{padding:0 9px 5px}.map-hint{font:700 10px system-ui;letter-spacing:1px;color:#bdd6eb}
.map-landscape{height:110px;position:relative;isolation:isolate;background:#6cbde4;overflow:hidden}
.map-landscape::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 28%,#041b39b8);z-index:1;pointer-events:none}
.map-landscape img,.map-landscape[data-scene] img{position:absolute;width:215%;height:auto;max-width:none;left:50%;bottom:-12%;transform:translateX(-50%);object-fit:cover;object-position:center bottom}
.map-landscape[data-scene="barrio"] img{width:215%;left:46%;bottom:-55px}
.map-landscape[data-scene="sanjuan"] img{width:225%;left:57%;bottom:-40px}
.map-landscape[data-scene="yunque"] img{width:215%;left:60%;bottom:-55px}
.map-landscape[data-scene="costa"] img{width:215%;left:30%;bottom:-55px}
.map-landscape #mapName{position:absolute;left:12px;right:12px;bottom:9px;z-index:2;margin:0;text-align:center;line-height:1.1;color:#fff9df;text-shadow:0 2px 2px #000,0 0 8px #041b39;}
[data-scene="barrio"] #mapName{font-family:Impact,'Arial Black',sans-serif;font-size:29px;letter-spacing:2px;transform:rotate(-2deg);color:#ffdf5b}
[data-scene="sanjuan"] #mapName{font-family:Georgia,'Times New Roman',serif;font-size:27px;font-weight:800;letter-spacing:2px}
[data-scene="yunque"] #mapName{font-family:'Trebuchet MS',Verdana,sans-serif;font-size:26px;font-weight:900;letter-spacing:3px;color:#e3ffae}
[data-scene="costa"] #mapName{font-family:'Brush Script MT','Segoe Print',cursive;font-size:31px;font-style:italic;font-weight:800;letter-spacing:1px;color:#ffe7a0}
@media(max-height:700px){.map-landscape{height:95px}}