#game[data-mode]:not([data-mode="combat"]){height:auto;min-height:100svh;overflow:clip}
.menu-screen{min-height:100svh;padding:36px max(5vw,20px) 75px;background:linear-gradient(90deg,#102833f2,#102833d9),url('./assets/ambientes/puerto-sereno-v1.webp') center/cover;color:#eadfc5}
.menu-screen h1{font:clamp(32px,4vw,52px)/1.1 Georgia,serif;margin:16px 0 22px;color:#f2dcb1;outline:none;max-width:900px}
.menu-screen .eyebrow{color:#bda87d;margin-top:32px}.menu-screen p{line-height:1.6}.menu-screen .menu-intro{max-width:650px;color:#c0d0c8}
.menu-screen button{padding:10px 18px;border-radius:3px}.menu-screen button:disabled{opacity:.45}
.menu-header{display:flex;align-items:center;justify-content:space-between;gap:15px}.menu-header button{background:transparent;border-color:transparent;padding-left:0}
.purse{display:flex;align-items:center;gap:8px;font-size:13px;color:#e4c797}.purse svg{width:22px;height:22px}.purse b{font-size:20px}
.home-screen{display:flex;align-items:center;background:linear-gradient(90deg,#10283324,#102833ba 42%,#0d2532ea 80%),url('./assets/ambientes/puerto-sereno-v1.webp') center/cover}
.home-copy{width:min(520px,85%);margin-left:48%;padding-block:20px}.home-copy h1{font-size:clamp(55px,6.5vw,96px);letter-spacing:-.04em;line-height:.95;margin:30px 0}
.home-copy .eyebrow{font-size:9px;letter-spacing:.18em}.home-copy>p{font-size:15px;color:#d3d7c4}.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:390px;margin-top:30px}.home-actions .gold{grid-column:1/-1;min-height:60px;font-size:18px}.menu-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 14px;text-align:center;color:#ebd099;text-decoration:none;border-bottom:1px solid #bfa46970}.home-actions .menu-link{grid-column:1/-1;font-size:12px}.home-copy .home-stats{font-size:11px;color:#adc2ba;margin-top:24px}.home-stats span{display:block}
.workshop-layout{display:grid;grid-template-columns:minmax(180px,1fr) minmax(280px,1.6fr);gap:45px;max-width:950px;margin:30px auto 0;align-items:center}.workshop-guardian{text-align:center;background:radial-gradient(ellipse at 50% 60%,#a4874640,transparent 60%)}.workshop-guardian img{height:min(45svh,350px);width:100%;object-fit:contain;filter:drop-shadow(0 15px 10px #071821)}.workshop-guardian p{font-size:13px;color:#d6c091}.workshop-tools>button{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;text-align:left;border:0;border-bottom:1px solid #bcaa7e60;border-radius:0;background:transparent}.workshop-tools>button svg{height:32px;width:32px;color:#dcc187}.workshop-tools button.selected{background:linear-gradient(90deg,#d5b97522,transparent);border-left:3px solid #e9c886}.workshop-tools small{display:block;font-size:11px;color:#b6c0ad;margin-top:3px}.workshop-detail{padding:14px 18px 0}.workshop-detail h2{font:24px Georgia,serif;color:#f0d4a0}.workshop-detail p{font-size:13px}.small-copy{font-size:11px!important;color:#afc0b7;max-width:600px}.workshop-detail .gold{width:100%;max-width:320px}
.achievement-list{max-width:780px;margin:25px auto}.achievement-list article{display:flex;gap:25px;padding:21px 10px;border-bottom:1px solid #a5916455;opacity:.6}.achievement-list article>span{display:grid;place-items:center;flex:0 0 48px}.achievement-list svg{width:35px;height:35px}.achievement-list h2{font:22px Georgia,serif;margin:0 0 7px}.achievement-list p{font-size:13px;margin:0 0 8px}.achievement-list small{font-size:11px;color:#ebce94}.achievement-list .earned{opacity:1}.achievement-list .earned>span{color:#f2cb73}
.coast-route{display:flex;list-style:none;padding:0;margin:65px auto 50px;max-width:1050px;gap:0}.coast-route li{position:relative;flex:1;text-align:center;padding:0 12px}.coast-route li::before{content:'';position:absolute;top:27px;left:0;right:0;border-top:2px dashed #b69c6580}.coast-route li:first-child::before{left:50%}.coast-route li:last-child::before{right:50%}.route-stone{position:relative;display:grid;place-items:center;z-index:1;width:58px;height:58px;margin:auto;background:#183742;border:2px solid #9b9475;border-radius:40% 45% 40% 48%;font:24px Georgia,serif;color:#e0c99d;rotate:-5deg}.coast-route .cleared .route-stone{background:#354d43;border-color:#bbcf9b;color:#d5e7bd}.coast-route .current .route-stone{background:#e4c58d;color:#19323c;box-shadow:0 0 35px #d5b46633}.coast-route h2{font:20px Georgia,serif;max-width:200px;margin:20px auto 10px}.coast-route p{font-size:12px;margin:0;color:#b9c7bd}.coast-route small{font-size:10px;color:#c5b58d}.route-action{text-align:center;max-width:650px;margin:0 auto}.route-action p{font-size:13px}
.reward-options{display:flex;max-width:760px;gap:24px;margin:55px auto 35px}.reward-options button{flex:1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:30px 22px;background:linear-gradient(130deg,#e7d7b9,#bca780);color:#18323e;border:2px solid #b19461;box-shadow:0 6px 0 #695238}.reward-options svg{width:60px;height:60px}.reward-options b{font:27px Georgia,serif}.reward-options span{font-size:13px;line-height:1.6}.reward-screen>.small-copy{text-align:center;margin-inline:auto}
.ending-screen{display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#0e2934ed,#0e2934d9),url('./assets/escenario.png') center/cover}.ending-screen .menu-header{position:absolute;top:28px;left:5vw;right:5vw}.ending-story{font:22px/1.6 Georgia,serif;max-width:630px}.run-summary{font-size:13px;color:#c1cfbf}.ending-actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:30px}.recovery-screen{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.recovery-screen p{max-width:640px}.recovery-actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:15px}.recovery-screen .menu-link{margin-block:15px}
#save-status{position:fixed;bottom:3px;left:10px;right:10px;z-index:35;margin:0;text-align:center;color:#c0cfc5;font-size:9px;pointer-events:none;text-shadow:0 1px 4px #071a24}#save-status button{pointer-events:auto;padding:0 8px;min-height:48px;min-width:48px;font-size:10px;border:0;margin-left:8px;background:#102936e8}#toast{position:fixed;top:100px;left:50%;translate:-50% 0;z-index:45;width:max-content;max-width:calc(100% - 24px);margin:0;padding:10px 18px;border-bottom:1px solid #ceb677;color:#ffe0a0;background:#102832ed;text-align:center;font-size:12px;pointer-events:none}#toast:empty{display:none}dialog select{min-height:48px;padding:8px;color:#16313e;background:#f4e8ce;border:1px solid #8f805f}dialog input[type=range]{width:min(220px,60%);min-height:48px}dialog .dialog-actions button{flex:1 0 auto}
#game[data-theme="puerto-sereno"] .landscape,#game[data-theme="puerto-sereno"] .environment-sky,#game[data-theme="puerto-sereno"] .environment-sea{filter:brightness(.96) saturate(.85)}#game[data-theme="puerto-sereno"]{background:#41676a}#game[data-theme="puerto-sereno"] .sea-motion{opacity:.07;animation-duration:16s}#game[data-theme="puerto-sereno"] .lighthouse-glow{opacity:.1;animation:none}#game[data-theme="paso-brumoso"] .sea-motion{opacity:.06;animation-duration:14s}
@media(max-width:700px){.menu-screen{padding:22px 20px 75px}.home-screen{background-position:30% center;align-items:flex-start}.home-copy{margin:5svh auto 0;width:100%;max-width:390px;text-align:center;padding:12px 8px}.home-copy .eyebrow{font-size:8px;line-height:1.8}.home-copy h1{font-size:64px}.home-actions{margin-inline:auto}.home-screen{background-image:linear-gradient(#10283399,#0d2532eb 50%),url('./assets/ambientes/puerto-sereno-v1.webp')}.menu-screen h1{font-size:32px}.home-copy h1{font-size:64px}.workshop-layout{gap:12px;grid-template-columns:1fr;margin-top:18px}.workshop-guardian{display:none}.workshop-detail{padding-inline:7px}.workshop-detail h2{font-size:23px}.menu-screen .eyebrow{margin-top:24px}.coast-route{display:block;margin:30px auto;max-width:400px}.coast-route li{text-align:left;min-height:110px;padding-left:80px;padding-right:0}.route-stone{position:absolute;left:0;top:0;width:52px;height:52px}.coast-route li::before{top:0;bottom:0;left:25px!important;right:auto!important;border-left:2px dashed #b69c6580;border-top:0}.coast-route li:last-child::before{bottom:calc(100% - 26px)}.coast-route li:first-child::before{top:26px}.coast-route h2{padding-top:4px;margin:0 0 7px;max-width:none;font-size:19px}.coast-route p{font-size:11px}.reward-options{gap:15px;flex-direction:column;margin:25px auto}.reward-options button{display:grid;grid-template-columns:48px 1fr;text-align:left;padding:20px 16px;gap:8px 15px}.reward-options svg{width:42px;height:42px;grid-row:1/3}.reward-options b{font-size:22px}.reward-options span{font-size:12px}.ending-screen .menu-header{left:20px;right:20px;top:20px}.ending-story{font-size:20px}.ending-actions{display:grid;gap:10px}.achievement-list article{gap:12px;padding:17px 0}.achievement-list h2{font-size:20px}.achievement-list p{font-size:12px}.purse{font-size:11px;gap:5px}.purse b{font-size:18px}#toast{top:95px;font-size:11px}}
@media(min-width:701px) and (max-height:600px){.home-copy{margin-left:43%;padding:0}.home-copy h1{font-size:54px;margin:12px 0}.home-copy .eyebrow{margin-top:5px}.home-copy>p{font-size:12px}.home-actions{gap:7px;margin-top:15px}.home-actions .gold{min-height:48px;font-size:15px}.home-copy .home-stats{margin-top:15px}.menu-screen{padding-top:18px}.menu-screen .eyebrow{margin-top:12px}.menu-screen h1{font-size:32px;margin:10px 0 15px}.coast-route{margin:25px auto}.ending-screen{padding-top:85px}.workshop-layout{gap:20px;margin-top:15px}.workshop-guardian img{height:230px}.reward-options{margin:25px auto}.reward-options button{padding:20px}}

.home-copy .eyebrow{margin-top:0}.home-copy h1{margin-block:20px;font-size:clamp(55px,6vw,84px)}
@media(max-width:700px){.home-copy h1{font-size:60px}.home-copy{margin-top:3svh}}

#game[data-mode="combat"] .prototype{bottom:17px;margin:0;font-size:9px}

#game[data-mode="combat"] .prototype{font-size:10px;color:#cfddcf;text-shadow:0 1px 4px #071a24}

#game[data-mode="combat"] .prototype{z-index:11}

#game[data-theme="faro-encendido"]{background:#264348}
#game[data-theme="faro-encendido"] .landscape,#game[data-theme="faro-encendido"] .environment-sky,#game[data-theme="faro-encendido"] .environment-sea{filter:brightness(1.05) saturate(1.08) sepia(.12)}
#game[data-theme="faro-encendido"] .lighthouse-glow{opacity:.75;scale:1.5}

/* Consulta gratuita con los valores del intento y lectura en marcos pequeños. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.help-rule{font-size:13px;line-height:1.5}.help-tools{display:grid;grid-template-columns:repeat(5,minmax(48px,1fr));gap:4px;margin:18px 0}.help-tools button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 3px;font-size:11px;min-height:65px}.help-tools button[aria-pressed=true]{background:#f8edcf;color:#19323e;box-shadow:inset 0 -3px #826438;border:1px solid #826438}.help-tools button svg{width:24px;height:24px}.help-detail h2{font:26px Georgia,serif;margin:18px 0 10px}.help-detail p{line-height:1.5;font-size:13px;margin:9px 0}.help-state{font-weight:600}.help-controls{margin-top:16px;border-top:1px solid #998568}.help-controls summary{cursor:pointer;min-height:48px;padding:12px 0;font-size:13px}.help-controls p{font-size:13px;line-height:1.5}.help-back{position:sticky;bottom:-28px;margin:18px -10px -10px;padding:10px;background:#e7dbc1}.help-back button{width:100%}
.decision[data-inspecting=true] #hint{display:block;width:fit-content;max-width:560px;margin-inline:auto;padding:7px 12px;background:#0b2533ed;border-block:1px solid #b5a47b70;color:#eee0c3;font-size:12px;line-height:1.45;text-wrap:pretty}
@media(max-width:600px){.skill .state{font-size:10px}.inventory .mark-tool .state{font-size:10px}.skill b{font-size:14px}.value small{font-size:9px}.decision #hint{font-size:12px;line-height:1.4;max-width:360px}.decision #notice{font-size:12px}.intent.cangrejo,.intent.centinela{font-size:10px}.queue-caption{font-size:8px}.decision[data-inspecting=true] #hint{padding:6px 8px}dialog{width:calc(100% - 20px);padding:16px}.help-back{bottom:-16px}.help-tools button{font-size:10px}}
@media(max-width:359px){.skill b{font-size:13px}.skill .state{font-size:10px}.skill .value{font-size:15px}.value small{font-size:8px}.queue-anchor{bottom:59%}dialog{padding:12px}.help-back{bottom:-12px}.intent.cangrejo,.intent.centinela{font-size:10px}}
@media(min-width:601px) and (max-height:600px){.belt{bottom:38px}.queue-anchor{top:6%}.decision{bottom:calc(27% + 12px);left:18%;right:18%}.decision #hint{display:block;font-size:11px;line-height:1.3;margin-top:2px}.decision #notice{font-size:11px;min-height:15px}.decision[data-inspecting=true] #hint{padding:4px 8px;max-width:500px}.skill .state{font-size:10px}}

/* Pulido del tablero: cada figura pisa su losa y las amenazas siguen su cabeza. */
.actor{bottom:35%}
.actor.cangrejo{width:20%}
.actor.centinela{width:22%}
.ground-shadow{bottom:33.8%}
.cell{bottom:32%}
.mark{bottom:35%}
#mark-label{bottom:28%}
.arrival{bottom:35%}
#forecast,#effects,#forecast-labels{translate:0 -5%}
.intent,.intent.cangrejo,.intent.centinela{top:auto;min-width:78px;max-width:calc(20% - 6px);min-height:48px;padding:5px 7px 6px;gap:2px;border:1px solid #ad9870;border-radius:3px 8px 3px 8px;background:linear-gradient(155deg,#eee2c8f2,#c8b58fe9);color:#19303a;box-shadow:0 3px 0 #574a36,0 7px 15px #07151dbb;font-size:10px;line-height:1.1;text-align:center}
.intent::after{content:'';position:absolute;left:calc(50% - 4px);bottom:-8px;border:4px solid transparent;border-top-color:#a28b67}
.intent.danger{border-color:#df9d75;background:linear-gradient(150deg,#613d37f5,#392b2cf2);color:#ffdfbe;box-shadow:0 3px 0 #2d1a1d,0 7px 16px #120e14cc}
.intent.danger::after{border-top-color:#633b35}
.enemy-life{display:flex;justify-content:center;gap:2px;min-height:14px}
.enemy-life svg{width:12px;height:12px;fill:#aa5c52;stroke:#794339;stroke-width:1.6}
.intent.danger .enemy-life svg{fill:#e7a475;stroke:#ffe0ba}
.enemy-intent{font-weight:650;white-space:normal;text-wrap:balance}
.queue-anchor{top:auto;bottom:75%}
.queue-slot{animation:queue-rise .32s cubic-bezier(.22,.85,.28,1) both}
@keyframes queue-rise{from{opacity:.25;translate:0 23px;scale:.9}to{opacity:1;translate:0 0;scale:1}}
.decision{left:50%;right:auto;width:min(570px,calc(100% - 36px));bottom:calc(23% - 5px);translate:-50% 0;padding:7px 18px 10px;border:1px solid #a99368;border-top:2px solid #d3b77e;border-radius:4px 4px 11px 11px;background:linear-gradient(160deg,#122b35ed,#081c27ef);box-shadow:0 5px 0 #08172288,0 13px 34px #06131bcc}
.decision-label{display:block;margin-bottom:3px;color:#dcc494;font-size:8px;font-weight:700;letter-spacing:.19em}
.decision #notice{font-size:12px;font-weight:600;min-height:17px;color:#ffe1a5}
.decision #hint{font-size:12px;line-height:1.35;color:#e3e7d8;margin-top:2px}
.decision[data-inspecting=true] #hint{max-width:none;padding:0;border:0;background:none;color:#f2e6cb}
.environment-sky svg,.environment-sea svg{width:calc(100% + 28px);margin-left:-14px}
.environment-sky svg{animation:cloud-wander 23s ease-in-out infinite alternate}
.environment-sea svg{animation:sea-swell 8s ease-in-out infinite}
.sea-motion img{animation:water-drift 7s ease-in-out infinite}
@keyframes cloud-wander{from{transform:translate(-8px,0) scale(1.016)}to{transform:translate(8px,2px) scale(1.016)}}
@keyframes sea-swell{0%,100%{transform:translate(-5px,1px) scale(1.012)}50%{transform:translate(5px,-3px) scale(1.012)}}
@keyframes water-drift{0%,100%{transform:translate(-6px,2px) scale(1.014);opacity:.1}50%{transform:translate(6px,-3px) scale(1.014);opacity:.28}}
@media(max-width:600px){.actor.guardian{width:27%}.queue-anchor{top:auto;bottom:55%}.intent,.intent.cangrejo,.intent.centinela{min-width:60px;max-width:calc(20% - 3px);padding:4px 3px;font-size:9px}.enemy-life svg{width:10px;height:10px}.decision{bottom:calc(31px + 188px);width:calc(100% - 30px);padding:6px 10px 8px}.decision-label{font-size:7px}.decision #notice{font-size:11px}.decision #hint{font-size:11px;min-height:0}}
@media(min-width:601px) and (max-height:600px){.queue-anchor{top:auto;bottom:72%}.decision{left:50%;right:auto;bottom:calc(27% + 12px);width:min(540px,56%);padding:5px 12px 7px}.decision-label{margin-bottom:1px}.decision #hint{display:block;padding:0}}
#game[data-reduced=true] .queue-slot{animation:none}