:root{color-scheme:dark;--cream:#fff3d4;--blue:#86d9ff;--ink:#091925;--muted:#a0b7c3}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);font-family:Arial,Helvetica,sans-serif;color:var(--cream)}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button{border:0;color:inherit}#app{height:100%;position:relative;isolation:isolate}#game{display:block;width:100%;height:100%;object-fit:contain;outline:0}.hidden{display:none!important}.screen,.modal,#load{position:absolute;inset:0}.screen{overflow:auto}.home-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,22,36,.98),rgba(5,22,36,.91) 37%,rgba(5,22,36,.32) 100%)}.home-content{position:relative;width:55%;min-height:100%;padding:6vh 0 3vh 7vw;display:flex;flex-direction:column;z-index:2}.edition{font-size:10px;font-weight:700;letter-spacing:2.4px;display:flex;align-items:center;gap:10px;color:var(--blue)}.edition i{background:var(--blue);width:6px;height:6px;border-radius:50%}.edition span{margin-left:18px;color:#9ab2c2;font-size:9px;letter-spacing:1.2px}h1{font-family:Arial Black,Arial,sans-serif;font-weight:950;font-size:clamp(60px,8.5vw,140px);line-height:.85;letter-spacing:-.055em;margin:6vh 0 0;transform:skew(-5deg);transform-origin:left}h1>span{display:block;font-size:.57em;letter-spacing:-.04em;padding-bottom:12px}h1 strong{font-weight:950}.period{color:var(--blue)}.tagline{font-weight:700;font-size:clamp(16px,1.65vw,26px);margin:24px 0 8px}.intro{font-size:14px;line-height:1.7;color:#b7cbd4;margin:0}.menu{max-width:330px;display:grid;gap:3px;margin-top:3vh}.menu button,.compact>button,.lab-link{display:flex;align-items:center;justify-content:space-between;background:transparent;border-bottom:1px solid #ffffff24;padding:15px 16px;text-align:left;font-size:13px}.menu button:hover,.compact>button:hover,.lab-link:hover{background:#ffffff0d}.menu button span{color:var(--blue)}button.primary{background:var(--cream);color:#102839;padding:18px 20px;font-weight:800;border-radius:5px;margin-bottom:7px;border:0;letter-spacing:1px}.primary:hover{background:#fff!important}.primary span{color:#102839!important}.home-foot{display:flex;gap:20px;flex-wrap:wrap;color:#7d98a8;font-size:8px;letter-spacing:1.5px;margin-top:auto;padding-top:30px}.hero{position:absolute;left:59%;top:10%;width:32%;height:83%;display:flex;align-items:center;justify-content:center;flex-direction:column}.hero img{max-height:68%;max-width:88%;filter:drop-shadow(0 25px 22px #0008);transform:rotate(8deg);animation:breathe 4s ease-in-out infinite}.hero-ring{position:absolute;top:4%;width:min(34vw,480px);aspect-ratio:1;border:1px solid #def6ff32;border-radius:50%;background:radial-gradient(circle,#94dfff33,transparent 68%)}.hero-ring:after{content:'';position:absolute;inset:25px;border:1px dashed #def6ff24;border-radius:50%}.hero-label{margin-top:25px;text-align:center;display:grid;gap:8px;z-index:1}.hero-label span{font-size:9px;letter-spacing:3px;color:#ade3fa}.hero-label b{font-size:21px}.hero-label small{font-size:11px;color:#c6dae0}@keyframes breathe{50%{transform:translateY(-9px) rotate(6deg)}}#load{background:var(--ink);z-index:20;display:flex;flex-direction:column;justify-content:center;align-items:center}progress{width:280px;height:4px;accent-color:var(--blue)}#load p{font-size:12px;color:var(--muted)}.eyebrow{color:var(--blue);font-size:10px;letter-spacing:2px;font-weight:700}.modal{z-index:8;display:flex;align-items:center;justify-content:center;background:#03121bc7;backdrop-filter:blur(12px);padding:20px}.panel{width:min(520px,95vw);max-height:95%;overflow:auto;padding:38px;background:linear-gradient(140deg,#172f41,#0c1d2a);border:1px solid #90b4cc35;border-radius:15px;box-shadow:0 30px 80px #0006}.panel h2{font-size:30px;letter-spacing:-1px;margin:12px 0 25px}.panel p{font-size:14px;line-height:1.6;color:#bdd2de}.panel.wide{width:min(800px,95vw)}.compact>button{width:100%;padding:17px 12px}.compact .primary{padding:19px 16px}.route-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.route{padding:0 0 20px;text-align:left;background:#071722;border:1px solid #ffffff20;border-radius:8px;overflow:hidden}.route:hover{border-color:var(--blue);transform:translateY(-2px)}.route img{width:100%;aspect-ratio:2;object-fit:cover;display:block;margin-bottom:18px}.route span,.route strong,.route small{display:block;margin:0 18px}.route span{font-size:9px;letter-spacing:1.8px;color:var(--blue);margin-bottom:9px}.route strong{font-size:19px}.route small{font-size:11px;color:#acbec9;margin-top:8px}.lab-link{width:100%;margin-top:18px}.muted{font-size:11px!important;color:#98b0be!important}.back{margin-top:20px;background:transparent;color:var(--blue);padding:10px 0}.setting{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid #ffffff15;font-size:13px}.setting input{accent-color:var(--blue)}.controls{display:grid;grid-template-columns:1fr auto;gap:13px;font-size:11px;margin-top:24px;color:#b8cdd8}.controls b{font-size:10px;color:var(--cream)}#hud{position:absolute;top:0;left:0;right:0;padding:24px 28px;display:flex;justify-content:space-between;pointer-events:none;background:linear-gradient(#06152299,transparent)}.hud-left,.hud-right{display:flex;align-items:center;gap:15px}.badge{font-weight:950;border:1px solid #ffffff75;padding:10px;border-radius:10px;letter-spacing:-1px;background:#092239b3}.hud-left div{display:grid;gap:5px}.hud-left div>span{font-size:9px;letter-spacing:2px}.hud-left strong{font-size:15px;text-shadow:0 2px 6px #001}.hud-right button{pointer-events:auto;background:#061d33bb;border:1px solid #ffffff45;width:42px;height:42px;border-radius:12px}.journey{display:flex;align-items:center;gap:12px;font-size:10px}.journey>div{width:95px;height:3px;background:#ffffff50}.journey i{display:block;height:100%;background:var(--cream);width:0}#hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#061827c9;border:1px solid #ffffff20;padding:12px 18px;font-size:10px;border-radius:8px;color:#e0eff3;pointer-events:none}#hint span{margin-left:20px}#toast{position:absolute;top:110px;left:50%;transform:translate(-50%,-10px);opacity:0;transition:.4s;pointer-events:none;padding:12px 20px;border-radius:7px;background:#082235e8;color:var(--cream);font-size:13px;white-space:nowrap}#toast.visible{opacity:1;transform:translate(-50%,0)}#touch{position:absolute;bottom:max(15px,env(safe-area-inset-bottom));left:15px;right:15px;display:flex;justify-content:space-between;pointer-events:none}#touch>div{display:flex;gap:8px}#touch button{pointer-events:auto;touch-action:none;user-select:none;width:55px;height:55px;background:#071e36aa;border:1px solid #d9f2ff80;border-radius:15px;font-size:12px}#touch button.down{background:#8bcdeabb;color:#031725}#debug{position:absolute;top:95px;left:25px;background:#000b;padding:14px;font-size:11px;pointer-events:none}@media(max-height:650px){.home-content{padding-top:4vh}.edition span{display:none}h1{margin-top:4vh;font-size:clamp(55px,8vw,100px)}.tagline{margin-top:18px}.menu{margin-top:15px}.menu button{padding:12px}.intro{font-size:12px}.home-foot{font-size:7px;padding-top:15px}.hero-label{margin-top:14px}.panel{padding:25px}.panel h2{margin:10px 0 18px}}@media(max-width:600px){.home-content{width:75%;padding:6vh 0 4vh 7vw}.hero{left:68%;width:29%;top:20%;opacity:.75;height:45%}.hero-label{display:none}h1{font-size:18vw}.edition{font-size:8px;letter-spacing:1px}.edition span{display:none}.home-foot{line-height:1.8}.route-grid{grid-template-columns:1fr}.route img{aspect-ratio:3}.panel h2{font-size:25px}#hud{padding:16px}.hud-left strong{font-size:12px}.journey>div{width:45px}#hint{font-size:8px;padding:10px}#hint span{margin-left:7px}.panel.wide{max-height:95%}}@media(pointer:coarse){#hint{display:none}}@media(prefers-reduced-motion:reduce){.hero img{animation:none}*{scroll-behavior:auto}}

.vital{display:grid;gap:6px;width:105px}.vital>span{font-size:9px;letter-spacing:1px;display:flex;justify-content:space-between}.vital>div{height:6px;border-radius:5px;background:#061622aa;border:1px solid #d8f3ff66;overflow:hidden}.vital i{display:block;height:100%;width:100%;background:#fff1cd;transition:width .15s}.flags{font-size:12px;color:#b3e4d1}@media(max-width:600px){.journey{display:none}.hud-left .badge{display:none}.hud-right{gap:8px}.vital{width:75px}#touch button{width:44px;height:48px;font-size:10px}#touch>div{gap:5px}#hint{display:none}}

#condition{font-style:normal;font-size:8px}.poison{color:#c7eb70}.vital{width:118px}#mute[aria-pressed=true]{opacity:.5;border-color:#c7b078}.hud-right{gap:11px}@media(max-width:600px){.vital{width:92px}.hud-right{gap:5px}.hud-right button{width:34px}.hud-left strong{max-width:90px;font-size:10px}.flags{font-size:10px}}

/* ---------- V4 ---------- */
#hud4{position:absolute;top:92px;left:28px;display:flex;align-items:center;gap:14px;pointer-events:none;font-size:12px}
#hud4 .score{display:grid;gap:3px;background:#061d33b3;border:1px solid #ffffff30;border-radius:10px;padding:7px 12px}
#hud4 .score span{font-size:8px;letter-spacing:2px;color:var(--blue)}
#hud4 .score b{font-family:"Courier New",monospace;font-size:18px;letter-spacing:1px}
#hud4 .pick{display:flex;align-items:center;gap:7px;background:#061d33b3;border:1px solid #ffffff30;border-radius:10px;padding:9px 12px}
#hud4 .pick i{width:13px;height:16px;display:block}
#hud4 .drop i{background:#fff;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;clip-path:polygon(50% 0,100% 62%,92% 88%,50% 100%,8% 88%,0 62%);box-shadow:inset -2px -3px 0 #bcd3ee}
#hud4 .cap i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff2a8,#f3c03a 55%,#b77d16);box-shadow:0 0 8px #ffd76a}
.thermo{display:flex;align-items:center;gap:6px;background:#061d33b3;border:1px solid #ffffff30;border-radius:10px;padding:6px 10px}
.thermo>div{width:8px;height:28px;border-radius:5px;background:#03121baa;border:1px solid #ffffff55;display:flex;align-items:flex-end;overflow:hidden}
.thermo i{display:block;width:100%;height:20%;background:#7fe0b0;transition:height .2s,background .3s}
.thermo b{font-size:12px;min-width:28px}
.thermo.hot{animation:hot .6s ease-in-out infinite alternate;border-color:#ff8a4c}
@keyframes hot{to{box-shadow:0 0 14px #ff6b3d99}}
#powers{display:flex;gap:8px}
.chip{position:relative;overflow:hidden;display:block;border-radius:9px;padding:9px 12px;background:#061d33cc;border:1px solid #ffffff40;font-size:10px;letter-spacing:1px}
.chip b{position:relative;z-index:1}
.chip i{position:absolute;left:0;bottom:0;height:3px;background:#fff}
.chip.cacao{border-color:#b07a4a}.chip.cacao i{background:#d09a68}
.chip.frutilla{border-color:#ff7f95}.chip.frutilla i{background:#ff7f95}
.chip.shield{border-color:#7cc4ff}.chip.shield i{background:#7cc4ff}
.chip.uht{border-color:#fff;animation:rainbow 1s linear infinite}.chip.uht i{background:#fff}
.chip.combo{border-color:#ffd23f;color:#ffd23f;animation:pop .3s ease-out}
@keyframes rainbow{to{filter:hue-rotate(360deg)}}
@keyframes pop{from{transform:scale(1.3)}}
.home-stats{display:flex;gap:18px;margin-top:16px;font-size:9px;letter-spacing:1.5px;color:#9ab2c2}
.home-stats b{color:#ffd23f;margin-left:6px;font-size:11px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 20px}
.stats div{display:flex;justify-content:space-between;padding:10px 12px;background:#061722;border:1px solid #ffffff18;border-radius:8px;font-size:12px}
.stats b{color:#ffd23f}
.panel.catalog{width:min(1100px,96vw);max-height:94%}
.panel.catalog code{background:#061722;border:1px solid #ffffff20;border-radius:4px;padding:1px 5px;color:#ffd23f;font-size:12px}
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:18px}
.design{margin:0;background:linear-gradient(#22465f,#0d2333);border:1px solid #ffffff20;border-radius:10px;overflow:hidden}
.design canvas{display:block;width:100%;height:auto;background:radial-gradient(circle at 50% 70%,#3d6a85,#14324a 70%)}
.design figcaption{padding:10px 12px 12px;display:grid;gap:5px}
.design b{font-size:13px}
.design figcaption>span{font-size:10px;color:#98b0be}
.design figcaption>span.ok{color:#7fe0b0;font-weight:700}
.design small{font-size:10px;line-height:1.45;color:#98b0be}
@media(max-width:600px){#hud4{top:64px;left:16px;gap:6px;transform:scale(.8);transform-origin:left top}}
#toast{top:150px}
/* V5.1: fullscreen illustrated story, independent from game simulation. */
.milk-cinema{position:fixed;inset:0;z-index:1000;background:#030910;display:grid;place-items:center;color:#fff2d8;font-family:Arial,sans-serif}
.milk-cinema canvas{width:min(100vw,177.7778vh);height:min(56.25vw,100vh);display:block}
.cinema-controls{position:absolute;inset:20px 28px auto;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:2px}
.cinema-controls>div{display:flex;gap:8px}.cinema-controls button{background:#071725e6;border:1px solid #7c8d9e80;border-radius:8px;color:#fff2d8;padding:10px 13px;font-size:12px;cursor:pointer}
.cinema-controls button:focus-visible{outline:3px solid #ffd679;outline-offset:3px}
.cinema-caption{position:absolute;bottom:4%;left:5%;right:5%;text-align:center;font-size:clamp(13px,1.5vw,20px);text-shadow:0 2px 5px #000;background:#04101dc9;border-radius:6px;padding:9px;margin:0;pointer-events:none}
.cinema-caption:empty{display:none}.cinema-paused{position:absolute;inset:0;display:grid;place-items:center;background:#0008;pointer-events:none;font-size:32px;letter-spacing:6px}.cinema-paused[hidden]{display:none}
@media(max-width:700px){.cinema-controls{inset:8px 10px auto;letter-spacing:0}.cinema-controls>span{display:none}.cinema-controls>div{margin-left:auto}.cinema-controls button{font-size:11px;padding:9px}.cinema-caption{bottom:7%;font-size:12px}}