:root{--yellow: #FCD746;--yellow-deep: #E8B020;--teal: #5DCDBA;--ink: #081B17;--panel: rgba(8, 27, 23, .86);--edge: rgba(93, 205, 186, .35);--cream: #FFF7E6;--red: #E8402F;--u: min(1vw, 1vh * .62);font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b2a26;color:var(--cream);overflow:hidden}body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0}#view{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}#rocks{position:absolute;left:0;right:0;bottom:0;height:var(--rocks-h, 0px);pointer-events:none;background:url(/shore/front-left.webp) left bottom / auto 100% no-repeat,url(/shore/front-right.webp) right bottom / auto 100% no-repeat}#grade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 70% at 88% -6%,#ffc46e4d,#ffaa5a00 55%),radial-gradient(ellipse 85% 80% at 50% 48%,#03121000 58%,#03121080)}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;border:0;background:none}button:disabled{cursor:default;opacity:.45}.fire:disabled{opacity:1;filter:brightness(.86) saturate(.9)}[hidden]{display:none!important}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.panel{background:var(--panel);border:2px solid var(--edge);border-radius:18px;box-shadow:0 6px 24px #00000059}#bar{position:absolute;top:max(8px,env(safe-area-inset-top));left:50%;transform:translate(-50%);width:min(96vw,1180px);display:flex;align-items:center;gap:clamp(8px,2vw,22px);padding:6px clamp(10px,2vw,22px);border-radius:999px}.logo{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;column-gap:6px;line-height:.9}.logo .sun{grid-row:1 / 3;width:1.9em;height:1em;border-radius:1em 1em 0 0;align-self:end;background:linear-gradient(#ffb238,#f05a28);box-shadow:0 4px 0 -1px #5dcdba,0 7px 0 -2px #2fa592}.logo b{font-weight:900;letter-spacing:.02em;font-size:clamp(12px,3.4vw,22px);color:#fff;text-shadow:0 2px 0 #0d3b33}.logo i{font-style:normal;font-weight:900;font-size:clamp(16px,4.6vw,30px);color:var(--yellow);text-shadow:0 2px 0 #7a4a00}.logo.big b{font-size:clamp(26px,8vw,54px)}.logo.big i{font-size:clamp(36px,11vw,76px)}.logo.big .sun{width:2.6em;height:1.3em}.pill{background:linear-gradient(#FFE36B,var(--yellow) 55%,var(--yellow-deep));color:var(--ink);font-weight:900;border-radius:999px;padding:6px clamp(10px,2.6vw,26px);font-size:clamp(12px,3.4vw,22px);box-shadow:inset 0 -3px #00000026;white-space:nowrap}.pill.theirs{background:linear-gradient(#9FE7DA,var(--teal))}#bar .stat{display:grid;justify-items:center;border-left:2px solid rgba(255,255,255,.18);padding-left:clamp(8px,2vw,20px);line-height:1}#bar .stat b{font-size:clamp(16px,4.6vw,30px);font-weight:900}#bar .stat small{font-size:clamp(8px,2.2vw,13px);font-weight:800;letter-spacing:.04em}#bar .icons{margin-left:auto;display:flex;gap:4px}.icon{width:40px;height:40px;border-radius:50%;font-size:22px;display:grid;place-items:center}.icon:hover{background:#ffffff1a}#btn-sound{background:no-repeat center / 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='white'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6M18.5 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E")}#btn-sound.off{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='white'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6'/%3E%3C/svg%3E")}@media(max-width:520px){#bar{gap:6px;padding:4px 6px 4px 12px}#bar .stat.acc{display:none}.icon{width:34px;height:34px}.logo b{font-size:12px}.logo i{font-size:17px}.pill{padding:6px 10px;font-size:13px}}body:not(.wide) #enemy-row{justify-content:space-around}body:not(.wide) #enemy-row .boat{width:auto;flex:1;max-width:56px}.tag{position:absolute;transform:translate(-50%,-100%);background:var(--yellow);color:var(--ink);font-weight:900;border-radius:8px;padding:2px 8px;font-size:15px;pointer-events:none;box-shadow:0 2px #9a6b00}#callout{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;font-weight:900;font-size:clamp(30px,9vw,72px);color:#fff;text-align:center;white-space:nowrap;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 24px rgba(0,0,0,.45);transition:transform .18s ease-out,opacity .18s}#callout.on{opacity:1;transform:translate(-50%,-50%) scale(1)}#callout.hit{color:#ffb238}#callout.sunk{color:var(--yellow)}#callout small{display:block;font-size:.42em;color:#fff}.ftag{position:absolute;transform:translate(-50%,-100%);background:linear-gradient(#FFE36B,var(--yellow));color:var(--ink);font-weight:900;padding:5px 16px;border-radius:999px;font-size:clamp(12px,1.5vw,20px);pointer-events:none;border:2px solid #3a2a00}#mini{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));padding:0 8px 8px;width:clamp(124px,36vw,190px);transform-origin:0 100%;transition:transform .28s ease}#mini.big{transform:scale(1.75);z-index:5}.mini-title{margin:0 -8px 6px;padding:4px;text-align:center;border-radius:15px 15px 8px 8px;font-weight:900;color:var(--ink);background:linear-gradient(#FFE36B,var(--yellow));font-size:clamp(11px,3vw,16px)}#mini-map{width:100%;aspect-ratio:1;display:block}#enemy-row{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:2px;padding:4px 8px;align-items:center}#enemy-row .boat{position:relative;width:clamp(34px,7vw,116px);aspect-ratio:2 / 1}#enemy-row .boat img{width:100%;height:100%;object-fit:contain;display:block}#enemy-row .boat.sunk:after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 44%,var(--red) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--red) 44% 56%,transparent 56%)}#enemy-row .boat.sunk img{filter:grayscale(.6) brightness(.8)}.fire{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:clamp(92px,26vw,150px);aspect-ratio:1;border-radius:50%;font-weight:900;font-size:clamp(24px,7vw,40px);color:var(--ink);background:radial-gradient(circle at 40% 30%,#FFF2A8,var(--yellow) 45%,#E9A80F);border:5px solid #fff3c4;box-shadow:0 7px #9a6b00,0 10px 26px #00000073}.fire:not(:disabled):active{transform:translateY(4px);box-shadow:0 3px #9a6b00,0 6px 16px #0006}.fire:not(:disabled){animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{filter:brightness(1.08)}}.sheet{position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translate(-50%);width:min(94vw,460px);padding:16px 18px;border-radius:22px;background:var(--panel);border:2px solid var(--edge);display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 40px #00000073;z-index:10}.sheet.center{top:50%;bottom:auto;transform:translate(-50%,-50%);text-align:center;align-items:stretch}.sheet h2{margin:0;font-size:26px;font-weight:900;color:var(--yellow);text-align:center}.sheet p{margin:0}.hint,.small,.tagline{color:#fff7e6cc;text-align:center;font-size:15px}.small{font-size:13px}.tagline{font-size:18px}#title .logo{justify-content:center;margin:4px auto 6px}.row{display:flex;gap:10px}.row .btn{flex:1}.btn{min-height:48px;border-radius:14px;font-weight:900;font-size:18px;padding:8px 14px}.btn.big{min-height:58px;font-size:24px;color:var(--ink);background:linear-gradient(#FFE36B,var(--yellow) 55%,var(--yellow-deep));box-shadow:0 5px #9a6b00}.btn.big:active{transform:translateY(3px);box-shadow:0 2px #9a6b00}.btn.ghost{background:#ffffff14;border:2px solid rgba(255,255,255,.2)}.btn.danger{color:#ffb3a8}.levels{display:flex;background:#0000004d;border-radius:14px;padding:4px;gap:4px}.levels button{flex:1;min-height:44px;border-radius:10px;font-weight:800;font-size:17px}.levels button[aria-checked=true]{background:var(--teal);color:var(--ink)}.score{display:grid}.score small{font-weight:800;letter-spacing:.1em;color:var(--teal)}.score b{font-size:56px;font-weight:900;color:var(--yellow);line-height:1}.end-stats{display:flex;justify-content:center;gap:16px;color:#fff7e6d9}#help ol{margin:0;padding-left:22px;display:grid;gap:8px;font-size:16px;line-height:1.35}.toast{position:absolute;top:76px;left:50%;transform:translate(-50%);background:var(--panel);border:2px solid var(--edge);padding:8px 14px;border-radius:12px;font-size:14px;z-index:20}@media(prefers-reduced-motion:reduce){.fire:not(:disabled){animation:none}#mini,#callout{transition:none}}body.wide #setup{left:auto;right:max(24px,env(safe-area-inset-right));top:50%;bottom:auto;transform:translateY(-50%);width:min(40vw,420px)}#help{top:50%;bottom:auto;transform:translate(-50%,-50%);z-index:30}
