:root{--ink:#56354e;--rose:#ac5d74;--cream:#fff7e8;--gold:#d8ad51}*{box-sizing:border-box}body{margin:0;background:#f7ecdf;color:var(--ink);font-family:Georgia,serif}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;min-height:44px;border:1px solid #d7b88d;border-radius:24px;background:#fff9ef;padding:8px 16px}button:focus-visible,a:focus-visible{outline:3px solid #885da5;outline-offset:3px}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}.game{width:min(100%,850px);height:100dvh;min-height:600px;margin:auto;display:flex;flex-direction:column;background:var(--cream);overflow:hidden;box-shadow:0 0 50px #83634422;padding-top:env(safe-area-inset-top)}header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 15px}header a{text-decoration:none;font-size:16px;white-space:nowrap}h1{font-size:clamp(20px,3.2vw,35px);margin:0;text-align:center}header button{font-size:24px;width:44px;padding:4px;flex:none}.voyages{display:flex;justify-content:center;gap:7px;padding:0 12px 8px}.voyages button{font-size:14px;flex:1;max-width:220px;padding:8px 5px}.voyages [aria-pressed=true]{background:#f5e4b8;box-shadow:inset 0 0 0 2px #fdf8e8;border-color:#bb902f}.question-panel{text-align:center;position:relative;padding:8px 12px 9px;background:linear-gradient(100deg,#f5dfb2,#fff2d6 25%,#fff2d6 75%,#edcfa0);border-block:1px solid #d9b77f;z-index:2}.question-panel h2{font-size:clamp(38px,7vh,72px);line-height:1.05;margin:0 0 4px}.question-panel p{font-size:18px;margin:0}.question-panel #hear{position:absolute;right:8px;top:8px;font-size:12px;padding:5px 9px;min-height:35px}.sea{position:relative;flex:1;min-height:230px;overflow:hidden;background:#73c4d5;isolation:isolate}.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;z-index:-1}.targets{position:absolute;left:9%;right:9%;top:22%;height:23%;display:flex;align-items:center;justify-content:space-between;z-index:3}.barrel{position:relative;border:0;border-radius:45%;padding:0;width:26%;max-width:150px;aspect-ratio:1;min-height:0;background:none;filter:drop-shadow(0 6px 2px #235c6c44);animation:bob 4s ease-in-out infinite;transform-origin:center center}.barrel:nth-child(2){animation-delay:-1.2s}.barrel:nth-child(3){animation-delay:-2.4s}.barrel svg{width:100%;height:100%;display:block}.barrel .number{position:absolute;inset:18% 6% 14%;display:grid;place-items:center;font:bold clamp(30px,5vw,60px)/1 Georgia;color:#583653}.barrel[aria-pressed=true]{outline:3px solid #ffdf76;outline-offset:5px;box-shadow:0 0 25px #ffe6a5;animation:none}.barrel.hit{visibility:hidden}#aim-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}#aim-path{fill:none;stroke:#ffe69d;stroke-width:.7;stroke-linecap:round;stroke-dasharray:.8 3}.cannon{position:absolute;left:50%;bottom:0;width:32%;height:38%;transform:translateX(-50%);transform-origin:50% 85%;z-index:4;transition:rotate .3s}.cannon img{height:100%;width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 3px #543d3b55)}.cannon.recoil{animation:recoil .35s ease-out}.cannonball{position:absolute;left:50%;top:77%;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#9a9696,#34323c 65%,#171920);z-index:5;pointer-events:none;box-shadow:0 1px 3px #0006}#impact{position:absolute;transform:translate(-50%,-50%);z-index:6;font-size:50px;text-shadow:0 2px 5px #fff9;pointer-events:none}.dashboard{text-align:center;padding:7px 14px max(8px,env(safe-area-inset-bottom));background:linear-gradient(#fff9ef,#f9ebd4);z-index:7}#status{font-size:17px;line-height:1.25;min-height:22px;margin:0 0 7px}.fire-row{display:grid;grid-template-columns:1fr 1.6fr 1fr;align-items:center;gap:12px}.fire-row #hint{font-size:14px;justify-self:start}#fire,#start,#again{background:linear-gradient(#c37d88,#a65169);color:#fff9e7;border:2px solid #d3a24b;box-shadow:inset 0 0 0 3px #f6d29b,0 3px 5px #8b6c4f33;font-size:clamp(27px,4.5vh,43px);font-weight:bold;min-height:57px;padding:4px 25px}#score{font-size:28px;white-space:nowrap}.route{display:flex;align-items:center;justify-content:center;gap:13px;margin:8px auto 0;max-width:500px;font-size:25px}#route-dots{display:flex;justify-content:space-between;align-items:center;position:relative;gap:20px;flex:1}#route-dots:before{content:'';position:absolute;left:0;right:0;border-top:2px dashed #af8b65}#route-dots span{width:14px;height:14px;border-radius:50%;border:2px solid #c5a36f;background:#fff7e4;z-index:1}#route-dots .earned{background:#e7b733;border-color:#b88028;box-shadow:0 0 6px #edc84a}.voyage-label{font-size:13px;margin:0}.overlay{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#423b3a44;backdrop-filter:blur(2px);padding:20px}.welcome-card{background:#fff8e9f5;border:2px solid #d2ae73;border-radius:25px;padding:24px;text-align:center;max-width:470px;box-shadow:0 10px 50px #342c3955}.welcome-card>span{font-size:40px}.welcome-card h2{font-size:32px;margin:8px 0}.welcome-card p{font-size:19px;line-height:1.5;margin:8px 0 18px}.welcome-card button{display:block;margin:10px auto 0}#start,#again{font-size:25px;min-height:52px}#count-coins{display:flex;justify-content:center;flex-wrap:wrap;gap:3px;max-width:360px;margin:5px auto;font-size:25px}#count-coins span{display:inline-block}#picture-hint{padding:8px;margin:8px auto;background:#f4e8cf;border-radius:12px;font:18px/1.5 Georgia;max-width:600px}#picture-hint .removed{text-decoration:line-through;opacity:.45}#count-coins:not([hidden])~#hear{position:static;min-height:30px;margin-top:3px}.count-mode .question-panel h2{font-size:30px}
@keyframes bob{50%{transform:translateY(5px) rotate(1deg)}}@keyframes recoil{40%{translate:0 12px}100%{translate:0 0}}@media(max-width:550px){header{padding:7px 10px}header a{font-size:13px}h1{font-size:21px}.voyages{gap:5px;padding:0 9px 6px}.voyages button{font-size:12px;line-height:1.2;min-height:40px}.question-panel #hear{position:static;min-height:30px;font-size:11px;padding:3px 10px;margin-top:5px}.question-panel h2{font-size:47px}.question-panel p{font-size:15px}.question-panel{padding:6px 8px}.targets{left:7%;right:7%;top:22%;height:21%}.barrel{width:27%}.barrel .number{font-size:39px}.cannon{height:37%;width:40%}.dashboard{padding:7px 10px max(7px,env(safe-area-inset-bottom))}#status{font-size:14px;min-height:35px;display:grid;place-items:center;margin-bottom:4px}.fire-row{gap:7px;grid-template-columns:1fr 1.5fr .8fr}.fire-row #hint{font-size:11px;padding:6px 9px}#fire{font-size:29px;min-height:53px;padding:6px 15px}#score{font-size:23px}.route{margin-top:5px;font-size:21px}.voyage-label{font-size:11px}.welcome-card{padding:18px}.welcome-card h2{font-size:27px}.welcome-card p{font-size:17px}#count-coins{font-size:21px}.count-mode .question-panel h2{font-size:25px}}
@media(max-height:700px){.game{min-height:520px}.question-panel h2{font-size:36px}.question-panel p{font-size:13px}#status{min-height:19px}.route{margin-top:3px}.question-panel #hear{min-height:25px}#fire{min-height:46px;font-size:28px}.voyages button{min-height:35px}.dashboard{padding-top:4px}.count-mode .question-panel h2{font-size:23px}#count-coins{font-size:18px}}
@media(orientation:landscape) and (max-height:550px){body{overflow:auto}.game{height:auto;min-height:100dvh}.sea{flex:none;height:65vw;max-height:650px}.question-panel #hear{position:absolute}header h1{font-size:26px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.scene{object-position:center center}
@media(min-width:700px) and (max-height:1000px){.scene{content:url('/assets/number-cannon/ship-wide.png');object-position:center center}}