:root{color-scheme:dark;--paper:#eee1c4;--gold:#f3c678;--ink:#132c38;--red:#ffb397}
*{box-sizing:border-box}body{margin:0;background:#081822;color:var(--paper);font:15px/1.4 system-ui,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;min-width:48px;min-height:48px;color:inherit;background:#0b202bd9;border:1px solid #ceb98377;border-radius:4px;touch-action:manipulation}button:hover:not(:disabled){border-color:var(--gold);filter:brightness(1.15)}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffdb89;outline-offset:4px}button svg{width:24px;height:24px;pointer-events:none}button>*{pointer-events:none}[hidden]{display:none!important}a{color:var(--gold)}kbd{font:10px system-ui,sans-serif;opacity:.7}#game{position:relative;min-height:540px;height:100svh;overflow:hidden;max-width:1680px;margin:auto;background:radial-gradient(ellipse at 50% 32%,#30434b,#0a1b25 75%)}.loading{padding:25vh 25px;text-align:center}.loading button{display:block;margin:20px auto}.hud{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:22px 32px;z-index:6;pointer-events:none;background:linear-gradient(#07141be6,transparent)}.hud>*{pointer-events:auto}.life{display:flex;gap:8px;align-items:center;font-size:14px}.life strong{font:30px Georgia,serif}.life svg{width:25px;fill:#ed997c33;stroke:#f4b498}.life span{color:#cabfa7}.chapter{text-align:center}.chapter>span{font-size:10px;letter-spacing:.23em;color:#d8c099}.chapter h1{font:24px Georgia,serif;margin:3px 0}.chapter small{font-size:10px;letter-spacing:.12em;color:#bdc5c0}.hud nav{display:flex;gap:8px}.hud button{border-color:transparent;background:#0c202b80;font-size:23px;display:grid;place-items:center}.field{position:absolute;left:0;right:0;top:12%;bottom:15%;outline:none;isolation:isolate}.landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-3;filter:brightness(.84) saturate(.8)}.shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(#0a1b25 0%,transparent 18%,transparent 65%,#0a1b25 100%);pointer-events:none}.actor{position:absolute;bottom:30%;width:26%;height:49%;transform:translateX(-50%);pointer-events:none;z-index:3}.actor img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 4px #07121c88)}.actor.guardian{margin-left:calc(var(--facing)*1%)}.actor.cangrejo{height:35%;width:25%}.actor.centinela{height:57%;width:29%;margin-left:calc(var(--facing)*3%)}.pose-art{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;filter:drop-shadow(0 5px 4px #07121c88)}.actor img[hidden]{display:none}.cell{position:absolute;bottom:27%;height:12%;width:18%;transform:translateX(-50%);border:0;background:transparent;z-index:2;padding:0}.cell::before{content:'';position:absolute;inset:7% 0;border:1px solid transparent;border-radius:50%;background:transparent;transform:scaleY(.65);pointer-events:none}.cell:not(:disabled):hover::before,.cell:focus-visible::before{border:2px solid var(--paper);background:#e5c38128}.cell span{position:absolute;bottom:-3px;left:50%;translate:-50% 0;font-size:11px;text-shadow:0 2px 3px #000;color:#f8e9cc;opacity:.7}.cell.here::before{border:2px solid #f1d693bb;box-shadow:0 0 16px #e8c68166}.cell.danger::before{border:2px dashed var(--red);background:repeating-linear-gradient(135deg,#f2a07d38 0 4px,transparent 4px 12px)}.cell.danger i::after{content:'!';position:absolute;bottom:18%;left:44%;color:#ffe0ba;font-style:normal;font-weight:bold;font-size:18px}.cell.selectable::before{border:2px dashed var(--gold);background:#edc17733}.intent{position:absolute;top:21%;transform:translateX(-50%);padding:5px 9px;border:1px solid #aca58980;background:#102631eb;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:12px;z-index:5;min-width:88px;border-radius:5px}.intent.centinela{top:7%}.intent.danger{border-color:#e6a386;background:#422c29eb;color:#ffe0c2}.enemy-life{display:flex;align-items:center;gap:4px;font-weight:700}.enemy-life svg{width:12px;height:12px}.queue-anchor{position:absolute;top:5%;transform:translateX(-50%);z-index:7}.queue{display:flex;flex-direction:column-reverse;gap:4px;align-items:center}.queued{width:51px;height:51px;min-height:48px;position:relative;background:var(--paper);border:2px solid #c3a471;color:var(--ink);box-shadow:0 2px 8px #05111c88;padding:10px;transform:rotate(-2deg)}.queued:nth-child(2){transform:rotate(3deg)}.queued>span{position:absolute;left:3px;bottom:1px;font:bold 12px Georgia,serif}.queued.active{background:#ffdb88;box-shadow:0 0 23px #f4c36f88;border-color:#fff0be}.queued.spent{opacity:.2}.queue-caption{display:block;text-align:center;font-size:8px;letter-spacing:.07em;margin-top:6px;white-space:nowrap;text-shadow:0 1px 5px #000}.empty{visibility:hidden}.reorder{position:absolute;top:30px;left:calc(100% + 2px);background:#112831e8;border:0;font-size:26px}.mark{position:absolute;bottom:30%;height:6%;width:14%;border:3px solid var(--gold);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 14px #f5bb5c77;z-index:2;pointer-events:none}#mark-label{position:absolute;bottom:23%;transform:translateX(-50%);font-size:10px;color:var(--gold);text-shadow:0 1px 4px black}#effects{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}.impact-ring{fill:#f3ca6733;stroke:var(--gold);stroke-width:4}#damage{position:absolute;z-index:9;transform:translateX(-50%);font:bold 32px Georgia,serif;color:#ffe0b2;text-shadow:0 2px 8px black;pointer-events:none}.flash{filter:brightness(1.7)}.decision{position:absolute;bottom:23%;left:10%;right:10%;z-index:8;text-align:center;pointer-events:none}.decision p{margin:0;text-shadow:0 1px 5px #000,0 2px 10px #07141b}#notice{font-size:13px;color:#ffe2ac;min-height:19px}#hint{font-size:12px;color:#bccac7;margin-top:5px}.belt{position:absolute;bottom:30px;left:4%;right:4%;display:flex;align-items:flex-end;justify-content:center;gap:40px;z-index:10}.movement{display:grid;grid-template-columns:repeat(4,48px);gap:5px;padding-bottom:10px}.movement button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:54px;background:transparent;border-color:#77909655}.movement button:disabled{opacity:.3}.inventory{display:flex;gap:9px;align-items:flex-end;padding:10px 16px 7px;background:linear-gradient(90deg,transparent,#c9ab6d18,transparent);border-bottom:2px solid #aa8d5755}.skill{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:91px;height:112px;background:linear-gradient(140deg,#eee1c5,#c6b48e);color:#1c333c;border:2px solid #b99a66;border-radius:9px 9px 5px 5px;box-shadow:0 5px 0 #5e4b35,0 8px 20px #040e1977;gap:3px;padding:9px 4px 6px;transform:rotate(-2deg)}.skill:nth-child(2){transform:rotate(2deg)}.skill:nth-child(3){transform:rotate(-1deg)}.skill>svg{width:30px;height:30px}.skill kbd{position:absolute;left:6px;top:4px}.skill b{font:16px Georgia,serif}.value{font:bold 18px Georgia,serif}.value small{font:8px system-ui,sans-serif}.state{font-size:10px;font-weight:600;letter-spacing:.01em}.skill.loaded{background:#172d35;color:#bcb69f;box-shadow:0 2px 0 #5e4b35;border-style:dashed}.skill.loaded svg{opacity:.25}.skill.cooling{background:#697779;color:#fff0d1;border-color:#8b9997;box-shadow:0 3px 0 #354548}.skill.cooling .state{font-size:13px;color:#fff}.mark-tool{background:linear-gradient(140deg,#263c44,#172e37);color:#e8cd91;border-color:#a28c61}.mark-tool[aria-pressed=true]{outline:3px solid var(--gold);outline-offset:4px}.execute{min-width:152px;height:63px;align-self:center;display:grid;grid-template-columns:25px auto;gap:1px 8px;padding:10px 18px;border:1px solid #e6bc74;background:#a97e3f20;box-shadow:inset 0 0 25px #e6bc7418;color:#ffe2a9}.execute strong{font:21px Georgia,serif}.execute small{grid-column:2;font-size:9px;letter-spacing:.15em}.execute svg{grid-row:1/3}.execute:disabled{opacity:.32}.prototype{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.16em;color:#788e95;pointer-events:none}.flying-card{position:fixed;pointer-events:none;z-index:50;width:48px;height:48px;border:2px solid #d7af6d;border-radius:5px;display:grid;place-items:center;background:#eddfc0;color:#1c333c;box-shadow:0 2px 15px #e6b56b66}.flying-card svg{width:28px;height:28px}.ending{position:absolute;inset:17% 16% auto;padding:35px;text-align:center;background:#0c2029f0;border-block:1px solid #ad986c;z-index:20;box-shadow:0 15px 80px #07121b99}.ending h2{font:42px Georgia,serif;margin:12px 0}.ending p{color:#d5d2c0}.ending a{display:block;margin-top:15px;font-size:12px}.gold{background:#e4c38b;color:#18323c;border-color:#e4c38b;padding:9px 22px}.eyebrow{font-size:10px;letter-spacing:.18em}.ending button{margin-top:10px}dialog{max-width:530px;width:calc(100% - 28px);max-height:calc(100svh - 28px);overflow:auto;padding:28px;background:#e7dbc1;color:#19323e;border:1px solid #9d845c;box-shadow:0 20px 100px #0009}dialog::backdrop{background:#041018cf;backdrop-filter:blur(3px)}dialog h1{font:32px Georgia,serif;margin:10px 0}dialog label{display:flex;align-items:center;gap:12px;min-height:48px}dialog input{width:22px;height:22px;accent-color:#264b5b}dialog button{background:#17323e;color:#eee0c4;padding:10px 14px}dialog .gold{background:#274e5c;color:#fff1d3}dialog a{color:#245364;display:block;margin-top:20px;font-size:13px}dialog dt{font-weight:bold;margin-top:13px}dialog dd{margin:3px 0;font-size:13px}dialog p{font-size:14px}.dialog-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}dialog :focus-visible{outline-color:#275465}
@media(min-width:1400px){.field{left:5%;right:5%}.belt{gap:65px}}
@media(max-width:900px){.hud{padding:14px 20px}.chapter h1{font-size:21px}.belt{gap:16px;left:12px;right:12px}.movement{grid-template-columns:repeat(2,48px)}.skill{width:79px;height:105px}.inventory{padding-inline:7px}.execute{min-width:130px;padding:10px}.actor{height:47%;width:28%}.actor.centinela{width:31%}.decision{bottom:25%}}
@media(max-width:600px){#game{min-height:690px}.hud{padding:12px}.life{gap:4px}.life strong{font-size:24px}.life svg{width:19px}.life span{font-size:12px}.chapter>span{font-size:7px;letter-spacing:.1em}.chapter h1{font-size:16px}.chapter small{font-size:9px}.hud nav{gap:0}.hud button{min-width:48px}.field{top:23%;bottom:33%}.actor{height:51%;width:32%}.actor.cangrejo{height:40%;width:31%}.actor.centinela{height:61%;width:35%}.intent{font-size:10px;min-width:76px;max-width:94px;padding:3px 5px}.intent.cangrejo{top:13%}.intent.centinela{top:-3%}.queue-anchor{top:auto;bottom:64%}.queue{gap:3px}.queued{width:48px;height:48px;padding:10px}.reorder{left:50%;top:-51px;transform:translateX(-50%);font-size:24px}.queue-caption{font-size:7px}.cell{min-width:0}.cell span{font-size:10px}.belt{bottom:31px;display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;left:14px;right:14px;align-items:center}.inventory{grid-column:1/3;grid-row:1;justify-content:center;gap:12px;padding:0 0 6px;border:0;background:none}.skill{width:83px;height:104px}.movement{grid-template-columns:repeat(4,48px);gap:3px;padding:0}.movement button{min-height:48px}.execute{min-width:0;width:100%;height:52px;padding:7px 8px;grid-template-columns:1fr}.execute svg{display:none}.execute strong{font-size:17px}.execute small{grid-column:auto;font-size:8px}.decision{bottom:calc(31px + 190px);left:5%;right:5%;}.decision #hint{font-size:10px;max-width:340px;margin:4px auto 0;min-height:28px}.decision #notice{font-size:11px;min-height:16px}.ending{inset:24% 5% auto;padding:25px 20px}.ending h2{font-size:32px}.prototype{font-size:7px}.hud nav button{background:transparent}#damage{font-size:25px}}
@media(max-width:359px){.hud{padding:10px 6px}.chapter h1{font-size:14px}.chapter>span{display:none}.hud nav{flex-direction:column;gap:0}.hud nav button{min-height:48px}.hud{align-items:flex-start}.skill{width:79px}.inventory{gap:10px}.belt{left:8px;right:8px;gap:12px 8px}.movement{gap:0}.execute strong{font-size:16px}.intent{min-width:70px;font-size:9px}.queue-anchor{top:auto;bottom:64%}}
@media(min-width:601px) and (max-height:600px){#game{min-height:410px}.hud{padding:8px 20px}.chapter h1{font-size:18px}.field{top:13%;bottom:17%}.belt{bottom:19px;gap:24px}.movement{grid-template-columns:repeat(4,48px);padding-bottom:0}.skill{width:70px;height:83px;padding:5px 3px}.skill svg{width:23px;height:23px}.skill b{font-size:14px}.value{font-size:14px}.state{font-size:9px}.inventory{padding:0 8px}.execute{height:53px}.decision{bottom:26%}#hint{display:none}.queued{width:48px;height:48px}.queue-anchor{top:-3%}.intent{font-size:10px}.chapter>span{font-size:8px}}
/* Reglas 0.3: cuatro herramientas, tres fichas y entradas de oleada. */
#turn,#wave{display:inline-block;margin-inline:5px}#swap-state{grid-column:1/-1;font-size:10px;text-align:center;color:#dbc494;white-space:nowrap}.movement .swap-ready{border-color:var(--gold);color:var(--gold)}.queue-slot{position:relative}.earlier{position:absolute;left:calc(100% + 4px);top:0;width:48px;height:48px;background:#0d2530eb;border:0;font-size:23px}.queue-anchor[data-edge=right] .earlier{left:auto;right:calc(100% + 4px)}.arrival{position:absolute;bottom:28%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-size:11px;color:#f6d39d;text-shadow:0 2px 3px black;z-index:4}.arrival b{font-size:36px;line-height:1.3}.arrival small{font-size:10px}.wave-entry{position:absolute;bottom:22%;left:50%;transform:translateX(-50%);z-index:12;text-align:center;white-space:nowrap}.wave-entry span{display:block;font-size:11px;margin-top:5px;color:#e1d4b8}.wave-entry:not([hidden])~.ending{visibility:hidden}#game:has(.wave-entry:not([hidden])) .decision{display:none}.inventory{gap:7px}.skill{width:80px}.belt{gap:24px}.actor.guardian{height:40%}.queue-anchor{top:3%}
@media(max-width:900px) and (min-width:601px){.belt{gap:16px}.skill{width:66px}.inventory{gap:6px}.skill b{font-size:14px}.skill .state{font-size:9px}}
@media(max-width:600px){.inventory{gap:5px;justify-content:center}.skill{width:61px;height:98px}.skill b{font-size:13px}.skill .value{font-size:15px}.skill .state{font-size:9px}.skill>svg{width:26px;height:26px}.inventory .mark-tool .state{font-size:8px}.belt{gap:10px 8px;left:8px;right:8px}.actor.guardian{height:51%}.queue-anchor{top:auto;bottom:64%}.wave-entry{bottom:26%;width:94%;white-space:normal}.wave-entry button{font-size:14px;padding:8px 14px}.wave-entry span{font-size:10px}#swap-state{font-size:9px}.movement{row-gap:4px}.decision{bottom:238px}.chapter small{font-size:8px;margin-inline:3px}}
@media(max-width:359px){.skill{width:55px;height:93px}.skill b{font-size:12px}.inventory{gap:4px}.skill .state{font-size:8px}.skill>svg{width:25px;height:25px}.skill .value{font-size:13px}.value small{font-size:7px}.queue-caption{font-size:7px}.wave-entry{bottom:29%}.decision{bottom:225px}}
@media(min-width:601px) and (max-height:600px){.inventory{gap:5px}.skill{width:63px;height:78px}.skill>svg{width:21px;height:21px}.skill b{font-size:12px}.skill .state{font-size:8px}.skill .value{font-size:12px}.movement{grid-template-columns:repeat(4,48px);padding:0}.belt{gap:18px}.queue-anchor{top:-1%}.actor.guardian{height:37%}.queue{gap:2px}.queued{height:48px}.queue-caption{margin-top:3px}.wave-entry{bottom:25%}}
@media(max-width:600px){.intent.cangrejo,.intent.centinela{top:26%;min-width:0;width:calc(20% - 4px);max-width:76px;font-size:9px;padding:3px 2px}.intent .enemy-life{font-size:11px}}
@media(min-width:601px) and (max-height:600px){.queue-anchor{top:3%;max-width:160px}.queue{flex-direction:row;gap:3px}.queue:has(.queue-slot:nth-child(2)) .queue-slot{padding-top:49px}.earlier,.queue-anchor[data-edge=right] .earlier{left:0;right:auto;top:0}.queue-caption{font-size:0}.queue-caption::after{content:'PRIMERO A LA IZQUIERDA';font-size:7px}.actor.guardian{height:37%}}
/* Respuesta material y aprendizaje, fase de interfaz y arte. */
.motion-art{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;filter:drop-shadow(0 5px 4px #07121c88)}
.ground-shadow{position:absolute;bottom:28.8%;height:3%;width:14%;translate:-50% 0;border-radius:50%;background:#020e17b0;filter:blur(3px);z-index:1;pointer-events:none}
#forecast{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}.forecast-path{fill:none;stroke:#e5cb94;stroke-width:2;stroke-dasharray:7 7;opacity:.7}.forecast-destination{fill:#edd29b22;stroke:#eed096;stroke-width:2;stroke-dasharray:6 5}.forecast-hit{fill:#f1b18a20;stroke:#ffbf9a;stroke-width:2}.forecast-number{fill:#ffe2bd;font:bold 19px Georgia,serif;text-anchor:middle;paint-order:stroke;stroke:#0a1c24;stroke-width:4px}.forecast-blocked{fill:#ffc6b4;font:13px system-ui,sans-serif;text-anchor:middle;paint-order:stroke;stroke:#0a1c24;stroke-width:4px}
.swap-player,.swap-enemy,.jump-trail{fill:none;stroke:#f8d18b;stroke-width:3;stroke-linecap:round;stroke-dasharray:8 6}.swap-enemy{stroke:#9bced2;stroke-dasharray:4 7}.landing-ring{fill:#f3ce7820;stroke:#f3cc86;stroke-width:3}.sweep{fill:none;stroke:#ffe3a5;stroke-width:9;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;filter:drop-shadow(0 0 5px #efb653)}.sweep-back{stroke:#bda983;stroke-width:5}.sweep-core{fill:#eabf6c12;stroke:#f6cf8920;stroke-width:14}.blocked-cross{stroke:#ffc3aa;stroke-width:5;stroke-linecap:round}.blocked-label{fill:#ffceb5;font:bold 17px system-ui,sans-serif;text-anchor:middle;paint-order:stroke;stroke:#172b33;stroke-width:4px}
#wave-banner{position:absolute;top:9%;left:50%;translate:-50% 0;font:30px Georgia,serif;color:#ffe4ad;letter-spacing:.06em;text-shadow:0 3px 15px #000;z-index:9;white-space:nowrap;pointer-events:none}.arrival{bottom:30%;padding-bottom:10px;min-width:80px}.arrival::after{content:'';position:absolute;bottom:0;width:80px;height:19px;border:2px dashed #ecc681;border-radius:50%;box-shadow:0 0 15px #f8d39955;background:#eac68016}.arrival b{font-size:28px}.wave-entry .eyebrow{margin:0 0 6px;color:#cbbd9e}.wave-entry .gold{min-width:190px;border-radius:2px}
.lesson-guide{position:absolute;bottom:20.5%;left:50%;translate:-50% 0;width:min(600px,92%);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;z-index:12;padding:12px 18px;background:linear-gradient(90deg,#102932f0,#102932e6);border-block:1px solid #c5a86c70;box-shadow:0 8px 30px #05141b66}.lesson-guide small{font-size:9px;letter-spacing:.1em;color:#c6b78f}.lesson-guide h2{font:21px Georgia,serif;margin:3px 0;color:#ffe0a4}.lesson-guide p{font-size:12px;line-height:1.5;margin:0;color:#d5ddd3}.lesson-guide button{padding:8px 12px;max-width:145px;font-size:12px}.lesson-target{outline:2px solid #ffe0a0!important;outline-offset:4px;box-shadow:0 0 25px #efcc7c66!important}.unintroduced{display:none!important}#game[data-training=true] .decision,#game[data-training=true] #wave,#game[data-training=true] .prototype{display:none}#game[data-training=true] .field{bottom:23%}#game[data-training=true] .wave-entry{bottom:36%}#game[data-training=true] .wave-entry .eyebrow,#game[data-training=true] .wave-entry>span{display:none}.intro{width:min(600px,calc(100% - 28px));padding:40px 38px;background:radial-gradient(ellipse at 50% 5%,#27434b,#0d2631 80%);color:#e4dbc4;border:1px solid #ac9461;text-align:center;overflow:auto}.intro::backdrop{background:#04131b9c;backdrop-filter:blur(1px)}.intro h1{font:56px/.98 Georgia,serif;color:#f4deb0;letter-spacing:-.03em;margin:24px 0}.intro>p{color:#c6d0c7;line-height:1.6}.intro .eyebrow{color:#dec893;letter-spacing:.2em}.intro-rule{display:flex;align-items:center;justify-content:center;gap:16px;margin:25px 0;font-size:10px;letter-spacing:.08em;color:#dfc99a}.intro-rule i{font-style:normal;color:#829e9e}.intro-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.intro-actions button{min-height:78px;background:#0d2730;color:#f0ddb8;border-color:#8c835f}.intro-actions button.gold{background:#ead09a;color:#1e3942}.intro-actions small{display:block;font-size:10px;margin-top:7px;opacity:.8}.intro .intro-note{font-size:10px;margin:24px 0 0;color:#9ab0ad}.intro :focus-visible{outline-color:#ffe6ab}
@media(max-width:600px){.lesson-guide{bottom:224px;gap:12px;padding:10px 12px;width:calc(100% - 20px)}.lesson-guide h2{font-size:17px}.lesson-guide p{font-size:11px;line-height:1.45}.lesson-guide small{font-size:8px;letter-spacing:.03em}.lesson-guide button{font-size:11px;max-width:95px;padding:7px}#game[data-training=true] .field{bottom:43%}#game[data-training=true] .wave-entry{bottom:37%}.intro{padding:30px 20px}.intro h1{font-size:45px}.intro-rule{gap:10px}.intro-actions{grid-template-columns:1fr}.intro-actions button{min-height:66px}.intro-actions small{margin-top:4px}.arrival{font-size:9px;min-width:62px}.arrival::after{width:58px}.arrival small{font-size:8px}#wave-banner{font-size:23px;top:4%}}
@media(max-width:359px){.lesson-guide{bottom:214px;padding:8px 10px;gap:8px}.lesson-guide h2{font-size:16px}.lesson-guide p{font-size:10px}#game[data-training=true] .field{bottom:44%}.intro h1{font-size:40px}}
@media(min-width:601px) and (max-height:600px){.lesson-guide{bottom:23%;padding:8px 14px;width:min(630px,88%);gap:16px}.lesson-guide h2{font-size:17px}.lesson-guide small{font-size:8px}.lesson-guide p{font-size:10px;line-height:1.3}.lesson-guide button{font-size:11px}#game[data-training=true] .field{bottom:28%}#game[data-training=true] .wave-entry{bottom:42%}.earlier{rotate:90deg}.intro{padding:22px 30px;width:560px}.intro h1{font-size:38px;margin:12px 0}.intro h1 br{display:none}.intro-rule{margin:15px 0}.intro-actions button{min-height:64px}.intro .intro-note{margin-top:16px}}
#game[data-executing=true] .queue{flex-direction:row;gap:4px}#game[data-executing=true] .queue-slot{padding-top:0}#game[data-executing=true] .earlier{display:none}#game[data-executing=true] .queue-caption{font-size:0}#game[data-executing=true] .queue-caption::after{content:'PRIMERO A LA IZQUIERDA';font-size:7px}
@media(min-width:601px){.lesson-guide{bottom:23.5%}}
@media(min-width:601px) and (max-height:600px){.lesson-guide{bottom:24%}}
#forecast-labels{position:absolute;inset:0;z-index:5;pointer-events:none}.forecast-label{position:absolute;top:76%;translate:-50% 0;font:bold 16px Georgia,serif;color:#ffe2bd;text-shadow:0 1px 3px #071b24,0 0 7px #071b24}.forecast-label.blocked{top:74%;font:10px system-ui,sans-serif;color:#ffc6b4;white-space:nowrap}.forecast-push{fill:none;stroke:#f2b89b;stroke-width:2;stroke-dasharray:5 4}
/* El paisaje continúa fuera del tablero. El centro conserva las cinco losas. */
#game{--field-top:12%;--field-bottom:15%;--field-height:calc(100% - var(--field-top) - var(--field-bottom));max-width:none;isolation:isolate;background:#17333f;overflow:clip}
#game .field{top:var(--field-top);bottom:var(--field-bottom);left:0;right:0}
#game[data-training=true]{--field-bottom:23%}
.environment{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.environment-sky,.environment-sea{position:absolute;left:0;right:0;overflow:hidden;filter:brightness(.84) saturate(.8)}
.environment-sky{top:0;height:calc(var(--field-top) + var(--field-height)*.25)}
.environment-sea{bottom:0;height:calc(var(--field-bottom) + var(--field-height)*.25)}
.environment svg{display:block;width:calc(100% + 8px);height:calc(100% + 6px);margin:-3px -4px;overflow:hidden}
.environment-sky svg{animation:cloud-drift 18s ease-in-out infinite alternate}
.environment-sea svg{animation:sea-breathe 7s ease-in-out infinite}
.landscape{mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent)}
.shade{background:linear-gradient(#0a1b2500 55%,#06192210 100%)}
.sea-motion{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;mask-image:linear-gradient(transparent 35%,#000 42%,#000 52%,transparent 57%,transparent 80%,#000 87%,transparent 100%)}
.sea-motion img{width:100%;height:100%;object-fit:fill;filter:brightness(.89) saturate(.8);animation:surf-drift 6.5s ease-in-out infinite}
.lighthouse-glow{position:absolute;left:6.3%;top:14%;width:3.6%;height:7%;border-radius:50%;background:radial-gradient(ellipse,#ffe0a18c, #ffc77233 30%,transparent 70%);mix-blend-mode:screen;z-index:-1;pointer-events:none;animation:beacon-breathe 8s ease-in-out infinite;opacity:.35}
/* Todos los elementos que pisan el suelo comparten el mismo ajuste vertical. */
.actor{bottom:33%}
.ground-shadow{bottom:31.8%}
.cell{bottom:30%}
.mark{bottom:33%}
#mark-label{bottom:26%}
.arrival{bottom:33%}
#forecast,#effects,#forecast-labels{translate:0 -3%}
/* La respiración vive dentro del actor para no sobrescribir salto, giro o impacto. */
.actor-breath{position:absolute;inset:0;transform-origin:50% 96%;animation:guardian-idle 4.2s ease-in-out infinite;animation-delay:var(--idle-delay,0s)}
.cangrejo .actor-breath{animation-name:crab-idle;animation-duration:3.4s}
.centinela .actor-breath{animation-name:sentinel-idle;animation-duration:5.1s}
#game[data-busy=true] .actor-breath,.actor:not([data-pose=auto]) .actor-breath,.actor[data-motion]:not([data-motion=""]) .actor-breath{animation:none}
body:has(dialog[open]) #game .actor-breath,body:has(dialog[open]) #game .environment svg,body:has(dialog[open]) #game .sea-motion img,body:has(dialog[open]) #game .lighthouse-glow,
#game[data-paused=true] .actor-breath,#game[data-paused=true] .environment svg,#game[data-paused=true] .sea-motion img,#game[data-paused=true] .lighthouse-glow{animation-play-state:paused}
#game[data-reduced=true] .actor-breath,#game[data-reduced=true] .environment svg,#game[data-reduced=true] .sea-motion img,#game[data-reduced=true] .lighthouse-glow{animation:none}
#game[data-reduced=true] .sea-motion{display:none}
.decision p{text-shadow:0 1px 3px #04131b,0 2px 7px #04131b,0 0 14px #04131b}
.belt::before{content:'';position:absolute;inset:-20px -5vw -40px;z-index:-1;pointer-events:none;background:linear-gradient(transparent,#071c29b3 40%,#071c29d9)}
@keyframes guardian-idle{0%,100%{transform:rotate(-.25deg) scale(1,1)}50%{transform:rotate(.25deg) scale(1.006,1.014)}}
@keyframes crab-idle{0%,100%{transform:rotate(.35deg) scale(1,1)}50%{transform:rotate(-.35deg) scale(1.014,.984)}}
@keyframes sentinel-idle{0%,100%{transform:rotate(-.2deg) scale(1,1)}50%{transform:rotate(.3deg) scale(.996,1.008)}}
@keyframes cloud-drift{from{transform:translateX(-2px)}to{transform:translateX(2px)}}
@keyframes sea-breathe{0%,100%{transform:translate(-1px,1px)}50%{transform:translate(2px,-1px)}}
@keyframes surf-drift{0%,100%{transform:translate(-1px,0);opacity:.06}50%{transform:translate(2px,-1px);opacity:.28}}
@keyframes beacon-breathe{0%,100%{opacity:.2}50%{opacity:.75}}
@media(max-width:600px){#game{--field-top:23%;--field-bottom:33%}#game[data-training=true]{--field-bottom:43%}}
@media(max-width:359px){#game[data-training=true]{--field-bottom:44%}}
@media(min-width:601px) and (max-height:600px){#game{--field-top:13%;--field-bottom:17%}#game[data-training=true]{--field-bottom:28%}}