@font-face{font-family:Fredoka;src:url('assets/Fredoka.ttf') format('truetype');font-display:swap}
:root{--ink:#163f4b;--teal:#12797b;--cream:#fffbed;--gold:#f6cc69;--shadow:#14585c22}body{font-family:Fredoka,Arial,sans-serif;color:var(--ink);background:#e8f6f0}button,select{font-family:inherit;font-weight:500}button{border:2px solid #bbd5cf;border-radius:14px;background:#fffef5;box-shadow:0 3px 0 #96b8b454;transition:transform .12s,background .12s}button:hover{background:#e5f6ed}button:active{transform:translateY(2px);box-shadow:none}button:focus-visible,select:focus-visible{outline:4px solid #dd9d22;outline-offset:2px}button[aria-pressed=true]{background:var(--teal);border-color:#0b6066;color:#fff}button.primary{background:linear-gradient(#ffdb7d,#f4bd4e);border-color:#c69336;color:#3b472d;box-shadow:0 5px 0 #bc8b32,0 10px 20px #b3924225;font-size:clamp(20px,2.7vh,28px);font-weight:600}.primary:hover{background:#ffda80}.primary span{float:right}#app{background:linear-gradient(#fff9df10,#fff9df20),url('assets/hospital.webp') center top/cover;height:100dvh;min-height:540px}header{height:12%;padding:1vh 2.3vw;gap:2vw}.brand{display:flex;align-items:center;gap:12px;background:#fffdf2ed;border:2px solid white;box-shadow:0 7px 20px #19505218;border-radius:21px;padding:1vh 1.2vw}.brand small{display:block;letter-spacing:.16em;font-size:9px;color:#6b807d}.brand h1{font-size:clamp(25px,4.1vh,43px);line-height:1.05;margin:3px 0;color:#155e67;font-weight:600}.brand span{display:block;font-size:clamp(11px,1.6vh,16px);color:#63776d}.hospital-mark{background:#197d7d;color:#ffedbc;width:49px;height:49px;display:grid;place-items:center;border-radius:15px;font:600 42px/1 Fredoka;box-shadow:inset 0 -4px 0 #0f6267}.headline{background:#fffff1e8;border:2px solid #fff;border-radius:16px;font-size:clamp(15px,2.2vh,24px);box-shadow:0 4px 16px #6a825c18;padding:1.4vh 2vw}#theatre{height:38%;padding:0 3vw .7vh;gap:2vw}.bay{border:0;border-bottom:5px solid var(--accent);background:linear-gradient(0deg,#f9fff6c9,transparent 55%);border-radius:0 0 24px 24px;gap:1vw;align-items:flex-end;padding-bottom:1vh}.doctor{height:85%;width:48%;max-width:48%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 6px 4px #264c4b30)}.doctor-2{height:97%;max-width:50%}.bay .tag{top:auto;bottom:0;left:6%;transform:translateY(25%);z-index:3;background:var(--accent);border:2px solid #fff9dc;border-radius:12px;padding:3px 20px;font-size:clamp(14px,1.9vh,21px);color:#26474d;box-shadow:0 3px 5px #46635e20}.monitor{align-self:flex-end;margin-bottom:3vh;background:linear-gradient(150deg,#254e58,#12363e);border:5px solid #e5ece1;box-shadow:0 4px 0 #89a9a3,0 10px 20px #25453f24;border-radius:18px;width:40%;max-width:240px;padding:1vh 1.2vw}.monitor small{color:#dceee5;font-weight:400;font-size:clamp(11px,1.5vh,17px)}.monitor strong{font-size:clamp(27px,4.5vh,50px);color:#f8e3a1;font-weight:500}.ecg{display:block;height:3vh;stroke:#89ddbf;opacity:.75}.care-meter{height:10px;border-radius:9px;background:#ffffff20;overflow:hidden}.care-meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,#69d7b8,#e4e48a);transition:width .65s ease}.care-pop{position:absolute;top:9%;right:5%;background:#fff5c7;border:2px solid #e4bc57;padding:7px 14px;border-radius:16px;color:#236d5d;opacity:0;pointer-events:none;font-size:clamp(18px,2.6vh,29px)}.bay.healed{animation:none}.healed .doctor{animation:doctor-cheer .7s ease}.healed .care-pop{animation:care-pop 1.5s ease both}@keyframes doctor-cheer{45%{transform:translateY(-9px) rotate(-3deg)}70%{transform:rotate(2deg)}}@keyframes care-pop{10%,75%{opacity:1;transform:translateY(-5px)}100%{opacity:0;transform:translateY(-18px)}}
#controls{top:50%;background:linear-gradient(135deg,#f8f8e9,#eaf6ef);border-top:4px solid #fffce8;padding:1vh 1.4vw .8vh;box-shadow:0 -5px 24px #426c6120;gap:.8vh}#menu{gap:5vw;align-items:center;min-height:0}.intro{max-width:32%;}.eyebrow{font-size:clamp(10px,1.4vh,14px);letter-spacing:.14em;color:#587e70;font-weight:500}.intro h2{font-weight:600;font-size:clamp(28px,4.6vh,47px);line-height:1.04;color:#176c72;margin:.8vh 0}.intro p{font-size:clamp(14px,1.9vh,19px);line-height:1.3;color:#566c66;margin:.7vh 0}.mini-steps{font-size:clamp(14px,1.8vh,19px);line-height:1.7;margin-top:1vh}.mini-steps b{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#d9eee2;color:#247164;margin-right:5px}.options{max-width:690px;width:58%;gap:1vh}.seg{gap:9px}.seg button{min-height:4.8vh;font-size:clamp(15px,2vh,21px)}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8vh 15px}.choice-grid label{display:flex;flex-direction:column;gap:4px;font-size:clamp(13px,1.7vh,18px);font-weight:500;min-width:0;color:#557268}.choice-grid select{width:100%;min-width:0;font-size:clamp(13px,1.7vh,18px);border:2px solid #c6dacf;border-radius:11px;padding:.6vh 9px;background:#fffef8;color:#274a4c}.settings{font-size:clamp(12px,1.6vh,17px);gap:12px;color:#4d6e65}.options .primary{padding:.8vh 1.4vw}nav{gap:8px;min-height:4.4vh;flex-shrink:0}nav button{min-height:4.4vh;padding:.45vh 1vw;font-size:clamp(12px,1.7vh,18px)}nav #status{visibility:visible;font-size:clamp(11px,1.4vh,15px);color:#58766c}nav #music{color:#5c532d;background:#f9edbb;border-color:#e1c77b}nav #music[aria-pressed=false]{background:#fffef5;color:#526d65;border-color:#bbd5cf}#stations{gap:1.2vw}.station{border:3px solid var(--accent);background:#fffef5;padding:.6vh .65vw;border-radius:21px;box-shadow:0 4px 0 #a9c4b736;gap:.4vh}.mission{min-height:7.4vh;background:#18767d;border:2px solid #12666e;border-radius:13px;padding:.5vh .85vw;box-shadow:inset 0 1px 0 #5aaba9;flex-shrink:0}.mission small{color:#d5ebe5;font-size:clamp(11px,1.5vh,16px);font-weight:400;line-height:1}.mission strong{color:#fff6d4;font-weight:500;font-size:clamp(23px,3.5vh,37px);line-height:1.05}.mission button{background:#fafff1;color:#276d72;border-color:#afcfc3;min-width:44px;min-height:44px;display:grid;place-items:center;padding:6px}.workspace{gap:4px}.anatomy{background:radial-gradient(ellipse,#fffefa 20%,#e9f3ed 100%);border:1px solid #d7e5dc;box-shadow:inset 0 0 20px #afc5b518;border-radius:12px}.anatomy>svg{height:100%;width:auto;max-width:100%}.tools{flex-wrap:nowrap;gap:5px;min-height:37px}.tools button,.tools .zoom-buttons button{min-height:36px;min-width:36px;font-size:17px;border-radius:10px;padding:4px 10px}.tools .view{font-size:clamp(11px,1.4vh,15px);white-space:nowrap;padding:0 3px}.zoom-buttons{margin-left:auto;gap:4px}.feedback{font-size:clamp(13px,1.7vh,18px);line-height:1.12;min-height:20px;max-height:3.5em;margin:0;color:#547269}.found .mission{background:#26775f;border-color:#26775f}.found .feedback{color:#216b51}.found .anatomy{box-shadow:inset 0 0 0 3px #66ba9638}.organ-hit{fill:transparent;stroke:transparent;stroke-width:4;pointer-events:all;cursor:pointer}.organ-hit.hint,.organ-hit:focus-visible{fill:#ffe58166;stroke:#ba8e24;stroke-width:4;outline:none}.organ-hit.correct{fill:#92edb777;stroke:#2b956b;stroke-width:5;pointer-events:none}.atlas-hit.correct{stroke:#1e926f;fill:#6cdda63b}.paused .mission{background:#57756f}.paused #stations::after{content:'Pausa';position:absolute;top:45%;left:40%;padding:12px 30px;background:#fff6d5;border-radius:20px;font-size:30px;color:#225c59}
#ending-scene{position:absolute;top:12%;height:38%;width:100%;overflow:hidden;background:url('assets/campamento.webp') center 60%/cover;border-bottom:4px solid #fff1c3}#ending-scene::before{content:'';position:absolute;inset:0;background:linear-gradient(#fff8d300,#fff1c329)}.ending-message{position:absolute;top:1vh;left:50%;transform:translateX(-50%);background:#fffae5ef;border:2px solid white;padding:7px 24px;border-radius:18px;white-space:nowrap;color:#325c4d;font-size:clamp(18px,2.8vh,30px);z-index:4;animation:message-arrive 1s 1.5s both}.hikers{position:absolute;left:3%;bottom:1%;height:78%;width:48%;object-fit:contain;object-position:bottom;animation:arrive 2s ease-out both}.ending-doctors{position:absolute;right:4%;bottom:1%;height:85%;width:46%;display:flex;align-items:flex-end;justify-content:center;gap:1%;animation:reunite 1s 1.5s both}.ending-doctors img{width:31%;height:82%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 4px 3px #364d4433)}.ending-doctors img.tilo{height:100%;width:35%}.confetti{position:absolute;inset:0;pointer-events:none}.confetti i{position:absolute;top:-10%;left:var(--x);width:8px;height:14px;background:var(--c);border-radius:3px;animation:confetti 3s var(--d) both;opacity:0}@keyframes arrive{from{opacity:0;transform:translateX(-110%)}to{opacity:1;transform:translateX(0)}}@keyframes reunite{from{opacity:0;transform:translateY(20px)}50%{transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes message-arrive{from{opacity:0}to{opacity:1}}@keyframes confetti{10%{opacity:1}to{opacity:0;transform:translateY(38vh) rotate(270deg)}}#finish{padding:2vh 4vw}#finish h2{font-size:clamp(28px,4.6vh,48px);color:#167578;margin:1vh 0}#finish p{font-size:clamp(16px,2.3vh,24px);margin:1vh 0;color:#506e61}#finish #results{font-size:clamp(14px,1.8vh,20px);color:#62786b;margin-bottom:2vh}
@media(min-width:1000px){#app[data-count='1'] .bay{max-width:800px;width:65%;margin:auto;height:100%}#app[data-count='1'] .doctor{height:90%;width:38%}#app[data-count='1'] .monitor{width:35%}}
@media(max-height:680px) and (orientation:landscape){.brand span,.brand small,.intro p,.mini-steps{display:none}.options{gap:5px}.choice-grid{gap:4px 10px}.seg button{min-height:33px}.mission{min-height:47px}.mission strong{font-size:24px}.tools .view{display:none}.feedback{font-size:12px}.choice-grid select{padding:3px}.settings{font-size:12px}}
@media(max-width:900px) and (orientation:portrait){#app{min-height:100dvh;height:auto;overflow:visible;background-size:auto 430px;background-repeat:no-repeat}header{height:100px;padding:12px 4vw}.brand{padding:10px 12px}.brand h1{font-size:30px}.brand span{font-size:12px}.brand small{font-size:8px}.headline{display:none}#theatre{height:240px;padding:0 4vw 10px}.bay{gap:0}.doctor{height:85%;max-width:55%;width:55%}.doctor-2{height:97%}.monitor{width:42%;border-width:3px;padding:8px 4px;margin-bottom:20px}.monitor strong{font-size:28px}.monitor small{font-size:11px}.ecg{height:18px}.bay .tag{font-size:13px;padding:3px 12px;left:8%}#controls{position:relative;top:auto;bottom:auto;padding:14px 4vw;background:#eff7ec;min-height:calc(100dvh - 340px)}#menu{flex-direction:column;gap:15px}.intro{display:block;max-width:none;width:100%}.intro h2{font-size:29px;margin:5px 0}.intro h2 br{display:none}.intro p{font-size:15px;margin:0}.intro p br{display:none}.mini-steps{display:none}.options{width:100%;max-width:690px;gap:12px}.choice-grid{gap:12px}.choice-grid label{font-size:14px}.choice-grid select{font-size:16px;min-height:44px}.seg button{font-size:16px;min-height:46px;padding:6px}.settings{font-size:14px}.options .primary{padding:12px;font-size:23px}.eyebrow{font-size:10px}nav{margin-top:12px;flex-wrap:wrap;gap:7px}nav button{min-height:44px;font-size:14px;padding:8px 10px}nav #status{display:none}#stations{flex-direction:column;gap:16px}.station{padding:8px;border-radius:19px;min-height:620px;height:calc(100dvh - 170px);max-height:850px;flex:none}.mission{min-height:75px;padding:9px 12px}.mission strong{font-size:31px}.mission small{font-size:14px}.mission button{width:49px;height:49px}.anatomy{min-height:390px}.tools{flex-wrap:wrap;min-height:46px}.tools button,.tools .zoom-buttons button{min-width:44px;min-height:44px;font-size:18px}.tools .view{font-size:13px}.feedback{font-size:16px;min-height:24px}.care-pop{font-size:17px;right:0}#app[data-count='3'] .monitor{position:absolute;bottom:2px;right:0;width:55%;padding:3px;max-width:95px;margin:0;z-index:3}#app[data-count='3'] .monitor small,#app[data-count='3'] .ecg{display:none}#app[data-count='3'] .monitor strong{font-size:19px}#app[data-count='3'] .doctor{width:100%;max-width:100%;height:87%}#app[data-count='3'] .doctor-2{height:97%}#app[data-count='3'] .bay .tag{bottom:auto;top:0;left:3%;transform:none}#ending-scene{top:100px;height:240px}.ending-message{font-size:16px;top:8px;padding:6px 10px}.hikers{left:1%;width:54%;height:72%}.ending-doctors{right:0;width:44%;height:78%}#app[data-phase='finish'] #theatre{visibility:hidden}#finish{padding:20px 5px}#finish h2{font-size:32px}#finish p{font-size:18px}}
@media(max-width:400px){.choice-grid{grid-template-columns:1fr}.tools .view{display:none}.brand h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.care-pop{display:none}.confetti{display:none}.ending-message,.hikers,.ending-doctors{opacity:1}}
/* Give the drawing the space: tools live in a slim side rail. */
@media(orientation:landscape){.workspace{position:relative}.tools{position:absolute;right:5px;top:5px;bottom:5px;width:47px;flex-direction:column;justify-content:flex-end;gap:5px;z-index:2}.tools .view{position:absolute;right:54px;top:0;white-space:nowrap;font-size:11px;background:#fffff3dc;padding:3px 7px;border-radius:8px}.tools .zoom-buttons{flex-direction:column;margin:0;width:100%}.tools button,.tools .zoom-buttons button{width:44px;min-width:44px;height:38px;min-height:38px;padding:3px;font-size:16px}.tools .hintbutton{font-size:12px}.feedback:empty{display:none}.feedback{position:absolute;bottom:8px;left:10px;right:62px;z-index:3;background:#fff9ddec;border-radius:10px;padding:6px;pointer-events:none}.station{position:relative}.anatomy>svg{max-width:calc(100% - 65px);margin-right:35px}.anatomy{min-height:0}.mission{min-height:7.4vh}}