:root {
  color-scheme: light;
  --ink: #123b46;
  --muted: #59747a;
  --teal: #078f91;
  --teal-dark: #056b70;
  --teal-soft: #e3f7f4;
  --coral: #f36f50;
  --coral-dark: #c94b35;
  --gold: #ffc84b;
  --line: #d3e7e3;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; color: var(--ink); background: #e7f8f7; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 4px solid rgba(7,143,145,.24); outline-offset: 4px; }
[hidden] { display: none !important; }

.game { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 690px; overflow: hidden; isolation: isolate; }
.world-art { position: absolute; z-index: -4; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); object-fit: cover; opacity: .34; filter: blur(3px) saturate(.72); transform: scale(1.025); }
.world-wash { position: absolute; z-index: -3; inset: 0; background: linear-gradient(115deg,rgba(235,250,247,.9),rgba(255,252,240,.76) 50%,rgba(229,248,246,.9)); }
.world-wash::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 51% 42%,rgba(255,255,255,.18),rgba(236,249,246,.55) 72%); }

.game-shell { position: relative; width: min(1180px,calc(100% - 48px)); height: min(820px,calc(100% - 42px)); min-height: 650px; overflow: hidden; border: 1px solid rgba(171,216,211,.8); border-radius: 36px; background: rgba(249,255,253,.82); box-shadow: 0 32px 90px rgba(29,83,79,.17),0 2px 0 rgba(255,255,255,.9) inset; backdrop-filter: blur(18px); }
.hud { position: absolute; z-index: 30; top: 22px; left: 26px; right: 26px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.campaign-hud { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border-radius: 17px; background: rgba(255,255,255,.82); box-shadow: 0 8px 26px rgba(27,81,77,.08); backdrop-filter: blur(12px); }
.campaign-hud > span { color: var(--teal-dark); font-size: 10px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.campaign-hud > strong { font-size: 12px; }
.mission-dots { display: flex; gap: 6px; }
.mission-dots i { width: 9px; height: 9px; border-radius: 50%; background: #cce2de; transition: transform 160ms ease-out,background 160ms ease-out; }
.mission-dots i.complete { background: var(--teal); }
.mission-dots i.current { background: var(--coral); box-shadow: 0 0 0 4px rgba(243,111,80,.13); transform: scale(1.08); }
.practice-hud { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 7px 12px; border-radius: 17px; background: rgba(255,255,255,.86); box-shadow: 0 8px 26px rgba(27,81,77,.08); }
.practice-hud > div { min-width: 54px; text-align: center; }
.practice-hud span { display: block; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.practice-hud strong { display: block; margin-top: 2px; font-size: 18px; line-height: 1; }
.difficulty-track { width: 110px; height: 7px; overflow: hidden; border-radius: 999px; background: #dcebe7; }
.difficulty-track b { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--teal),#46caae); transition: width 220ms ease-out; }
.mute { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(18,77,78,.1); border-radius: 16px; background: rgba(255,255,255,.86); box-shadow: 0 8px 26px rgba(27,81,77,.08); pointer-events: auto; }
.mute svg { width: 22px; height: 22px; fill: none; stroke: var(--teal-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mute .sound-off { display: none; }.mute[aria-pressed="true"] .sound-on { display: none; }.mute[aria-pressed="true"] .sound-off { display: block; }

.tank { position: absolute; z-index: 2; top: 86px; left: 50%; width: min(720px,calc(100% - 350px)); height: 470px; overflow: hidden; transform: translateX(-50%); border: 8px solid rgba(255,255,255,.92); border-radius: 48px; background: linear-gradient(180deg,#dff9f7 0,#b9eee9 47%,#8eddd8 100%); box-shadow: 0 0 0 1px #aedbd7,0 24px 60px rgba(17,105,105,.18),0 20px 70px rgba(255,255,255,.7) inset; }
.tank::before { content: ""; position: absolute; z-index: 1; top: 53px; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.75); box-shadow: 0 5px 18px rgba(255,255,255,.55); }
.tank::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 74px; background: linear-gradient(180deg,transparent,rgba(37,139,133,.13)),radial-gradient(ellipse at 50% 120%,#e7dfb6 0 47%,transparent 48%); opacity: .7; }
.water-light { position: absolute; inset: 0; opacity: .35; background: repeating-linear-gradient(105deg,transparent 0 54px,rgba(255,255,255,.36) 57px 64px,transparent 68px 120px); transform: skewX(-8deg); }
.depth-label { position: absolute; z-index: 2; left: 18px; color: rgba(20,83,87,.55); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.surface-label{top:33px}.deep-label{bottom:18px}
.bubbles i { position: absolute; z-index: 2; bottom: -20px; width: 10px; height: 10px; border: 2px solid rgba(255,255,255,.65); border-radius: 50%; animation: bubbleRise 6s linear infinite; }.bubbles i:nth-child(1){left:8%;animation-delay:-1s}.bubbles i:nth-child(2){left:23%;width:15px;height:15px;animation-delay:-4s}.bubbles i:nth-child(3){left:43%;animation-delay:-2.4s}.bubbles i:nth-child(4){left:65%;width:17px;height:17px;animation-delay:-5s}.bubbles i:nth-child(5){left:81%;animation-delay:-3.3s}.bubbles i:nth-child(6){left:91%;width:7px;height:7px;animation-delay:-.4s}

.density-card { position: absolute; z-index: 12; top: 20px; right: 20px; width: 235px; padding: 14px 15px 12px; border: 1px solid rgba(18,82,83,.1); border-radius: 19px; background: rgba(255,255,255,.9); box-shadow: 0 10px 30px rgba(23,96,91,.12); backdrop-filter: blur(12px); transition: opacity 160ms ease-out,transform 160ms ease-out; }
.density-title { display: block; margin-bottom: 8px; color: var(--coral-dark); font-size: 9px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.density-row { display: grid; grid-template-columns: 69px 1fr 40px; align-items: center; gap: 7px; margin-top: 7px; font-size: 10px; font-weight: 850; }
.density-row > i { position: relative; display: block; height: 8px; overflow: hidden; border-radius: 99px; background: #dcebe8; }
.density-row > i b { display: block; width: 64%; height: 100%; border-radius: inherit; background: var(--coral); transition: width 240ms ease-out; }
.density-row > i .water-bar { width: 64%; background: var(--teal); }
.density-row > strong { text-align: right; font-size: 10px; }
.density-card p { margin: 9px 0 0; color: var(--teal-dark); font-size: 10px; font-weight: 900; }
.density-card.is-pulsing { animation: cardPulse 600ms ease-in-out 2; }

.subject { position: absolute; z-index: 8; left: 50%; top: 51%; width: 245px; height: 185px; display: grid; place-items: center; transform: translate(-50%,-50%); transition: top 650ms cubic-bezier(.22,.78,.27,1),transform 180ms ease-out; }
.sticker-art { overflow: hidden; padding: 7px; border: 1px solid rgba(25,75,72,.11); border-radius: 26px; background: #fffefa; box-shadow: 0 12px 30px rgba(21,75,73,.16); }
.sticker-art img { display: block; width: 100%; border-radius: 19px; }
.sub-sticker { position: relative; width: 226px; transform: rotate(-1deg); }
.sub-sticker img { aspect-ratio: 1.36; object-fit: cover; }
.cargo { position: absolute; right: 19px; bottom: 17px; width: 43px; height: 43px; display: grid; place-items: center; border: 3px solid #b8502e; border-radius: 10px; color: #7a3f16; background: #ffc04a; box-shadow: 0 5px 0 #b8502e; font-size: 18px; animation: cargoDrop 420ms cubic-bezier(.2,.8,.25,1.2); }
.object-art { width: 152px; height: 152px; filter: drop-shadow(0 14px 16px rgba(16,75,78,.18)); }.object-art svg{width:100%;height:100%}
.tank.moving-up .subject { top: 28%; }.tank.moving-down .subject { top: 75%; }.tank.hovering .subject { animation: neutralHover 1.3s ease-in-out 2; }
.tank.is-snap .subject { animation: subSnap 310ms ease-out; }
.force { position: absolute; z-index: 11; left: calc(50% - 36px); display: grid; justify-items: center; color: var(--teal-dark); opacity: 0; transform: translateX(-50%) scale(.75); transition: opacity 180ms ease-out,transform 180ms ease-out; }.force i{font-style:normal;font-size:48px;font-weight:950;line-height:.8}.force span{margin-top:5px;font-size:9px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.force-up{top:79px}.force-down{bottom:53px;color:var(--coral-dark)}
.tank.show-forces .force { opacity: 1; transform: translateX(-50%) scale(1); }.force.is-pulsing{animation:forcePulse 560ms ease-in-out 3}
.sonar-ring { position: absolute; z-index: 4; left: 50%; top: 51%; width: 235px; height: 235px; opacity: 0; transform: translate(-50%,-50%) scale(.55); border: 3px solid rgba(255,255,255,.65); border-radius: 50%; pointer-events: none; }.tank.is-scanning .sonar-ring{animation:sonar 650ms ease-out}

.mascot { position: absolute; z-index: 15; left: 25px; bottom: 30px; width: 174px; pointer-events: none; transform-origin: 50% 100%; }.mascot .sticker-art{border-radius:31px;padding:8px}.mascot .sticker-art img{border-radius:23px}.mascot p{position:absolute;left:125px;top:-19px;width:145px;margin:0;padding:11px 13px;border-radius:16px 16px 16px 5px;color:var(--teal-dark);background:rgba(255,255,255,.96);box-shadow:0 10px 28px rgba(24,78,75,.13);font-size:12px;font-weight:850;line-height:1.25}.mascot.is-happy{animation:mascotPop 590ms cubic-bezier(.2,.8,.25,1.2)}.mascot.is-sad{animation:mascotNudge 340ms ease-out}.mascot.is-thinking .sticker-art{animation:mascotThink 1.8s ease-in-out infinite}

.decision-dock { position: absolute; z-index: 20; left: 222px; right: 26px; bottom: 25px; min-height: 182px; display: grid; grid-template-columns: minmax(245px,.82fr) minmax(390px,1.18fr); align-items: center; gap: 28px; padding: 25px 30px; border: 1px solid rgba(191,221,216,.9); border-radius: 28px; background: rgba(255,255,255,.95); box-shadow: 0 18px 50px rgba(28,82,77,.14); backdrop-filter: blur(14px); }
.mission-copy > span { color: var(--coral-dark); font-size: 10px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.mission-copy h1 { max-width: 420px; margin: 8px 0 0; font-size: clamp(27px,2.3vw,38px); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.mission-copy p { margin: 10px 0 0; color: var(--muted); font-size: 13px; font-weight: 750; line-height: 1.35; }
.action-area { min-height: 72px; display: grid; align-items: center; }
.choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.choice-grid.reasons { grid-template-columns: repeat(2,minmax(0,1fr)); }
.choice, .primary { min-height: 68px; padding: 12px 14px; border-radius: 17px; font-weight: 900; transition: transform 130ms ease-out,box-shadow 130ms ease-out,border-color 130ms ease-out,background 130ms ease-out; }
.choice { display: grid; grid-template-columns: 33px 1fr; align-items: center; gap: 9px; color: var(--ink); border: 2px solid var(--line); background: #fff; box-shadow: 0 5px 0 #d8e6e2; text-align: left; }
.choice > i { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 11px; color: var(--teal-dark); background: var(--teal-soft); font-style: normal; font-size: 19px; }
.choice strong { display:block;font-size:13px;line-height:1.1}.choice small{display:block;margin-top:4px;color:var(--muted);font-size:10px;line-height:1.2}
.choice:hover{transform:translateY(-2px);border-color:#79c4bb;background:#f6fffd;box-shadow:0 7px 0 #cde2dc}.choice:active{transform:translateY(4px);box-shadow:0 1px 0 #cde2dc}
.choice-grid.reasons .choice { display:block; min-height:58px; text-align:center; font-size:12px; }
.primary { width:min(360px,100%); margin:0 auto; color:#fff; border:1px solid #057074; background:linear-gradient(180deg,#1ba5a3,var(--teal)); box-shadow:0 6px 0 var(--teal-dark),0 14px 26px rgba(7,143,145,.17); font-size:16px; }.primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--teal-dark),0 16px 30px rgba(7,143,145,.19)}.primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--teal-dark)}
.result-row { display:grid;gap:12px }.result-mark { display:flex;align-items:center;justify-content:center;gap:9px;color:var(--teal-dark);font-size:13px;font-weight:900}.result-mark i{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--teal-soft);font-style:normal}
.trim-controls { display:grid;grid-template-columns:1fr 1fr;gap:13px 18px }.trim-control label{display:flex;justify-content:space-between;margin-bottom:8px;color:var(--muted);font-size:11px;font-weight:850}.trim-control output{color:var(--ink)}.trim-control input{width:100%;accent-color:var(--teal)}.trim-controls .primary{grid-column:1/-1;min-height:55px}
.waiting { display:flex;align-items:center;justify-content:center;gap:10px;color:var(--teal-dark);font-size:13px;font-weight:900}.waiting i{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:17px 0 0 var(--coral),34px 0 0 var(--gold);margin-right:35px;animation:waitingPop .65s ease-in-out infinite alternate}
.game-shell.is-miss .decision-dock { animation:gentleShake 320ms ease-out; }

.finale { position:absolute;z-index:50;left:50%;top:49%;width:min(500px,calc(100% - 54px));min-height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px 42px;transform:translate(-50%,-50%);border:1px solid rgba(23,82,79,.12);border-radius:31px;background:rgba(255,254,249,.97);box-shadow:0 30px 90px rgba(22,73,70,.24);text-align:center;backdrop-filter:blur(18px)}.reward-sticker{width:190px;margin-bottom:18px}.finale>span{color:var(--coral-dark);font-size:10px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}.finale h1{margin:8px 0 7px;font-size:38px;line-height:1.05;letter-spacing:-.04em}.finale p{max-width:350px;margin:0 0 23px;color:var(--muted);font-size:14px;line-height:1.4}.finale button{min-width:245px;min-height:57px;padding:0 22px;border:1px solid var(--teal-dark);border-radius:16px;color:#fff;background:var(--teal);box-shadow:0 6px 0 var(--teal-dark);font-weight:950}.finale button:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--teal-dark)}.finale button:active{transform:translateY(4px);box-shadow:0 2px 0 var(--teal-dark)}
.toast { position:absolute;z-index:70;left:50%;top:24px;max-width:470px;padding:11px 18px;opacity:0;transform:translate(-50%,-12px) scale(.96);border-radius:999px;color:#fff;background:#153f47;box-shadow:0 14px 34px rgba(16,59,62,.2);pointer-events:none;font-size:13px;font-weight:850;transition:opacity 160ms ease-out,transform 160ms ease-out}.toast.is-showing{opacity:1;transform:translate(-50%,0) scale(1)}.toast.is-error{background:var(--coral-dark)}
.celebration { position:absolute;z-index:60;inset:0;overflow:hidden;pointer-events:none}.celebration i{position:absolute;left:50%;top:43%;opacity:0;color:var(--gold);font-style:normal;font-size:22px}.celebration.is-showing i{animation:confetti 850ms cubic-bezier(.15,.72,.25,1) forwards}.celebration i:nth-child(1){--x:-340px;--y:-250px}.celebration i:nth-child(2){--x:-245px;--y:-300px;color:var(--teal)}.celebration i:nth-child(3){--x:-145px;--y:-260px;color:var(--coral)}.celebration i:nth-child(4){--x:-40px;--y:-315px}.celebration i:nth-child(5){--x:85px;--y:-285px;color:var(--teal)}.celebration i:nth-child(6){--x:190px;--y:-320px;color:var(--coral)}.celebration i:nth-child(7){--x:285px;--y:-260px}.celebration i:nth-child(8){--x:350px;--y:-205px;color:var(--teal)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes bubbleRise{from{transform:translateY(0);opacity:0}12%{opacity:.7}to{transform:translateY(-520px);opacity:0}}
@keyframes neutralHover{50%{transform:translate(-50%,-55%) rotate(1deg)}}
@keyframes sonar{0%{opacity:.8;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}
@keyframes cargoDrop{from{opacity:0;transform:translateY(-70px) rotate(-15deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes subSnap{35%{transform:translate(-50%,-50%) scale(1.05) rotate(-1deg)}70%{transform:translate(-50%,-50%) scale(.98) rotate(1deg)}}
@keyframes mascotPop{35%{transform:translateY(-17px) rotate(-3deg)}68%{transform:translateY(0) rotate(2deg)}}
@keyframes mascotNudge{35%{transform:rotate(-4deg)}70%{transform:rotate(3deg)}}
@keyframes mascotThink{50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes gentleShake{0%,100%{transform:translateX(0)}28%{transform:translateX(-7px) rotate(-.2deg)}68%{transform:translateX(6px) rotate(.2deg)}}
@keyframes waitingPop{to{transform:translateY(-5px);opacity:.6}}
@keyframes confetti{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}14%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(500deg) scale(1.1)}}
@keyframes cardPulse{50%{transform:scale(1.035);box-shadow:0 0 0 7px rgba(255,200,75,.2),0 14px 34px rgba(23,96,91,.16)}}
@keyframes forcePulse{50%{filter:drop-shadow(0 0 8px rgba(255,255,255,.8));transform:translateX(-50%) scale(1.14)}}

@media (max-width:900px){
  .game{min-height:720px}.game-shell{width:100%;height:100%;min-height:720px;border-radius:0;border:0}.hud{top:14px;left:14px;right:14px}.campaign-hud{gap:8px}.campaign-hud>span{display:none}.practice-hud{gap:7px}.difficulty-track{width:62px}.tank{top:76px;width:calc(100% - 28px);height:390px;border-radius:33px}.density-card{top:14px;right:14px;width:205px}.subject{width:210px}.sub-sticker{width:195px}.decision-dock{left:14px;right:14px;bottom:14px;min-height:225px;grid-template-columns:1fr;gap:15px;padding:20px}.mission-copy{text-align:center}.mission-copy h1{max-width:none;font-size:27px}.mascot{left:13px;bottom:244px;width:92px}.mascot p{left:69px;top:-2px;width:125px;font-size:10px}.choice{min-height:62px;padding:9px}.choice>i{display:none}.choice strong{font-size:12px}.choice small{font-size:9px}.finale{min-height:520px}}
@media (max-width:560px){.practice-hud>div:nth-last-child(-n+2){min-width:40px}.tank{height:372px}.density-card{width:185px}.density-row{grid-template-columns:57px 1fr 36px}.subject{top:56%;width:180px}.sub-sticker{width:168px}.object-art{width:125px;height:125px}.decision-dock{min-height:242px}.choice-grid{gap:7px}.choice{padding:8px 5px;text-align:center}.choice strong{font-size:11px}.choice small{display:none}.trim-controls{gap:10px}.mascot{bottom:263px}.finale{padding:28px 24px}.reward-sticker{width:160px}}
@media (max-height:760px) and (min-width:901px){.game-shell{height:calc(100% - 20px);min-height:650px}.tank{top:75px;height:390px}.decision-dock{min-height:155px;padding-top:18px;padding-bottom:18px}.mascot{width:145px}.subject{width:210px}.sub-sticker{width:195px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.bubbles{display:none}}