*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:#061f36;color:#e9fbff;font-family:Segoe UI,Arial}main{width:min(1400px,96vw);margin:16px auto}header{display:flex;align-items:center;justify-content:space-between;padding:8px 24px;background:#10354c;border-radius:22px 22px 0 0;gap:16px}.score{display:grid;grid-template-columns:90px auto;align-items:center;column-gap:8px}.score kbd{grid-column:2;color:#a6ccd5;font-size:12px;margin-top:-15px}.score>span:not(.portrait){font-weight:800;font-size:20px}.portrait{display:inline-block;width:90px;height:70px;background-image:url('assets/swimming-sprites-v2.png');background-size:360px 140px;grid-row:span 2}.portrait.mikel{background-position:0 -70px}.team{text-align:center;min-width:140px}.team strong{font-size:27px;color:#8effd7}progress{display:block;width:100%;height:12px;accent-color:#70efc2;margin-top:8px}button{cursor:pointer;border:0;border-radius:16px;padding:12px 20px;background:#245368;color:white;font:inherit;font-size:26px}button:hover{filter:brightness(1.15);transform:scale(1.04)}button:focus-visible{outline:3px solid white;outline-offset:4px}section{position:relative;overflow:hidden;border-radius:0 0 22px 22px}canvas{display:block;width:100%}#overlay{position:absolute;inset:0;pointer-events:none}#overlay.hidden{display:none}article{height:100%;text-align:center;padding:20px;display:flex;flex-direction:column;align-items:center}h1{font-size:clamp(20px,3vw,42px);margin:0;text-shadow:0 3px 12px #075274}h1 span{display:block;font-size:clamp(34px,5vw,70px);color:#aeffde;line-height:1.05}#message{display:flex;gap:30px;justify-content:center;align-items:center;margin:12px 0;font-size:24px}.result{background:#073449eb;border-radius:20px;padding:10px 20px;display:flex;align-items:center;gap:12px}.result .portrait{flex-shrink:0}.actions{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:auto}.legend{display:flex;gap:25px;background:#073449ce;border-radius:30px;padding:8px 22px;font-size:23px;font-weight:bold}.legend span{display:flex;gap:10px;align-items:center}.fish{display:inline-block;width:31px;height:20px;border-radius:50%;position:relative;background:var(--fish)}.fish:before{content:'';position:absolute;left:-8px;top:2px;border-left:10px solid var(--fish);border-top:8px solid transparent;border-bottom:8px solid transparent}.fish:after{content:'';position:absolute;right:6px;top:5px;width:4px;height:4px;border-radius:50%;background:#173b51}.orange{--fish:#ff9566}.blue{--fish:#67d9ff}.gold{--fish:#ffe169}#start{background:#ffdb70;color:#163c4c;font-weight:900;font-size:45px;width:150px;padding:8px 20px;box-shadow:0 6px 0 #bc913e;border-radius:25px}#completed{font-size:16px;color:#e1ffe8;min-height:18px}#overlay[data-state="paused"],#overlay[data-state="won"]{background:#002c4566}#overlay[data-state="paused"] h1,#overlay[data-state="won"] h1{font-size:65px}@media(max-width:850px){header{gap:8px;padding:4px 10px}.score{grid-template-columns:60px auto}.score .portrait{transform:scale(.7);transform-origin:left center;width:60px}.score>span:not(.portrait){font-size:14px}.team strong{font-size:20px}.team{min-width:100px}.score kbd{font-size:9px}article{padding:10px}.actions{gap:5px}.legend{font-size:16px;padding:5px 15px}#start{font-size:32px;width:110px}#message{font-size:16px;margin:5px}.result{padding:4px 10px}}

.air-meter{grid-column:1 / -1;display:flex;align-items:center;gap:8px;margin:3px 0 5px}.air-meter progress{appearance:none;height:15px;margin:0;width:145px;border:2px solid #b4e8df;border-radius:12px;overflow:hidden;background:#18374b;accent-color:#5ade88}.air-meter progress::-webkit-progress-bar{background:#18374b}.air-meter progress::-webkit-progress-value{background:#5ade88;border-radius:8px}.air-meter progress::-moz-progress-bar{background:#5ade88}.air-meter progress[data-low="true"]{accent-color:#ff565e;border-color:#ff9c9f}.air-meter progress[data-low="true"]::-webkit-progress-value{background:#ff565e}.air-meter progress[data-low="true"]::-moz-progress-bar{background:#ff565e}.air-meter b{font-size:16px;min-width:35px;font-variant-numeric:tabular-nums}@media(max-width:850px){.air-meter{gap:4px}.air-meter progress{width:95px}.air-meter b{font-size:12px}}

.lives{grid-column:1 / -1;text-align:center;font-size:24px;letter-spacing:5px;line-height:1.3}


.legend .orange{transform:scale(.75);margin:0 3px}.legend .blue{transform:scale(1.1);margin:0 6px}.legend .gold{transform:scale(1.35);margin:0 9px}

.player-summary{display:flex;flex-direction:column;gap:2px}.player-name{font-size:14px;letter-spacing:.5px;color:#c6eee7}.score kbd{margin-top:0}

#area{display:block;font-size:17px;margin-top:8px;white-space:nowrap;letter-spacing:1px}@media(max-width:850px){#area{font-size:12px;letter-spacing:0}}
main:fullscreen{width:100vw;height:100vh;max-width:none;margin:0;background:#061f36;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden}main:fullscreen>header{width:100%;flex:0 0 auto;border-radius:0}main:fullscreen>section{flex:0 0 auto;margin:auto 0;border-radius:0}main:fullscreen canvas{width:100%;height:100%}#fullscreen-status{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);padding:12px 18px;background:#10354c;color:#fff;border:1px solid #8edbd6;border-radius:12px;z-index:20;font-size:14px;max-width:90vw}

.title-art{display:none}#overlay[data-state="intro"] .title-art{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#overlay[data-state="intro"] article{position:relative;background:linear-gradient(180deg,#00395222,transparent 38%,transparent 72%,#03263b88)}#overlay[data-state="intro"] h1{font-weight:900;letter-spacing:1px;text-shadow:0 4px 0 #075375,0 8px 25px #003249;color:#fff7d1}#overlay[data-state="intro"] h1 span{color:#a5ffe2}#overlay[data-state="intro"] .legend{background:#073449d9}

.ship-choice{display:block;padding:10px 22px;border-radius:18px;background:#174c60;color:#ffe5a0;border:2px solid #d1ac61;text-decoration:none;font-size:19px;font-weight:bold}.ship-choice:hover{background:#28697a}.ship-choice:focus-visible{outline:3px solid white}

/* Playful titles across all four adventures. */
h1{font-family:"Showcard Gothic","Cooper Black","Comic Sans MS",cursive;letter-spacing:1px}button,.ship-choice,.shipnav,.home{font-family:"Comic Sans MS","Trebuchet MS",cursive;font-weight:bold}