:root{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#d5f4eb;background:#dce9e8}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#f9fcf2 0,#deece9 44%,#c4dddf 100%)}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #ffce77;outline-offset:2px}a{color:inherit}.site-header{max-width:1110px;margin:auto;padding:16px 20px;display:flex;justify-content:space-between;gap:14px;color:#194459;font-size:13px;font-weight:800}.site-header a{text-decoration:none}.site-header a:hover{text-decoration:underline}.brand{font-size:17px}.page-title{text-align:center;margin:5px auto 17px;color:#173f56}.page-title small{color:#c2734b;letter-spacing:.19em;font-size:10px;font-weight:900}.page-title h1{font-size:clamp(28px,4vw,42px);letter-spacing:.1em;margin:4px 0}.page-title p{font-size:13px;color:#5b7980;margin:0}main{width:min(100% - 28px,940px);margin:auto}.cabinet{position:relative;max-width:840px;margin:0 auto;background:#092c43;border:8px solid #173b50;border-radius:26px;box-shadow:0 15px 0 #b9d1d3,0 24px 40px #345b6552;overflow:hidden;outline:none}.cabinet:focus-visible{box-shadow:0 0 0 4px #ffcc70,0 15px 0 #b9d1d3,0 24px 40px #345b6552}.cabinet-head{background:#082538;padding:13px 20px 11px;display:flex;justify-content:space-between;align-items:center;gap:10px}.cabinet-head small{font-size:9px;color:#69cdc5;letter-spacing:.19em;font-weight:900}.cabinet-head h2{margin:3px 0 0;color:#f3edd3;font-size:19px;letter-spacing:.07em}.stage-chip{border:1px solid #519399;border-radius:99px;padding:7px 12px;white-space:nowrap;font-size:11px;font-weight:900;letter-spacing:.08em;color:#a9dbd9}.stage-chip strong{font-size:17px;color:#fff4c7}.progress{height:5px;background:#1b5364}.progress i{height:100%;display:block;width:0;background:linear-gradient(90deg,#66ccbc,#f3d17e);transition:width .3s}.viewport{height:136px;position:relative;overflow:hidden;background:linear-gradient(180deg,#0c596c 0,#0b5263 18%,#07394e 58%,#082b45 100%);border-bottom:2px solid #317786}.ocean-art{position:absolute;inset:0;overflow:hidden}.surface{position:absolute;inset:7px 0 auto;height:2px;background:linear-gradient(90deg,transparent,#8bdfd6 25%,#e3ecbd 50%,#8bdfd6 75%,transparent);box-shadow:0 5px 19px #aeebdba0}.light{position:absolute;top:0;width:130px;height:125px;background:linear-gradient(180deg,#afeed726,transparent);clip-path:polygon(30% 0,65% 0,100% 100%,0 100%)}.light-a{left:12%;transform:rotate(10deg)}.light-b{right:17%;transform:rotate(-13deg)}.fish{position:absolute;color:#74bac3;font-size:10px;text-shadow:14px 5px #74bac3,27px -3px #74bac3;opacity:.7}.fish-a{right:15%;top:41px}.fish-b{left:21%;top:78px;transform:scale(.65)}.coral{position:absolute;bottom:-9px;width:125px;height:80px;border-radius:100% 100% 0 0;background:radial-gradient(circle at 42% 24%,#2a8590 0,#135265 58%,#0b394d 100%)}.coral:before,.coral:after{content:"";position:absolute;bottom:38px;width:8px;height:68px;border-radius:10px;background:#2e7384;transform:rotate(-28deg);box-shadow:17px -5px 0 -2px #3d8b92,39px 4px 0 -1px #2a7180}.coral:before{left:42px}.coral:after{left:70px;transform:rotate(30deg)}.coral-a{left:-28px}.coral-b{right:-32px;transform:scaleX(-1)}.viewport-copy{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:70%;text-align:center;text-shadow:0 2px 8px #052a3b,0 1px #052a3b}.viewport-copy span{display:block;color:#9ce6d8;font-size:10px;letter-spacing:.2em;font-weight:900}.viewport-copy strong{display:block;color:#fff7d6;font-size:clamp(16px,3vw,23px);letter-spacing:.07em;margin-top:6px}.console{background:linear-gradient(145deg,#103c53,#092d46);padding:13px 22px 17px}.readouts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.readouts>div{border:1px solid #36798a;background:#123f54;border-radius:9px;padding:7px 12px;display:flex;justify-content:space-between;align-items:center;gap:7px;min-height:47px}.readouts small{color:#9ed6d2;font-size:10px;font-weight:900}.readouts strong{color:#f7d98e;font-size:24px;line-height:1;font-variant-numeric:tabular-nums}.map-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:12px 0 7px;color:#c8eee6;font-size:11px;font-weight:900;letter-spacing:.05em}.map-head span:last-child{color:#f7d789}.map-frame{display:flex;align-items:stretch;justify-content:center;gap:9px}.depth-scale{width:19px;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;align-items:center;color:#72b6bf;font-size:9px;font-weight:800;writing-mode:vertical-rl}.map{--n:5;position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);width:min(100%,410px);aspect-ratio:1;gap:3px;padding:8px;border:3px solid #5ca4a7;border-radius:13px;background:linear-gradient(135deg,#0a354b,#0a5260 49%,#082e4b);box-shadow:0 0 0 3px #052438,0 5px 24px #001a2c88,inset 0 0 25px #6ed5c62b}.map-cell{position:relative;overflow:hidden;min-width:0;min-height:0;padding:0;border:1px solid #53a9a797;border-radius:5px;background:linear-gradient(155deg,#155e6d,#0b425a);color:#efffe7;display:grid;place-items:center;transition:background .15s,box-shadow .15s;isolation:isolate}.map-cell:hover{background:#20798a}.map-cell.eliminated{background:linear-gradient(150deg,#0b3b52,#092d43);border-color:#41778070}.map-cell.selected{box-shadow:inset 0 0 0 3px #ffd887,0 0 12px #f7d88785;z-index:1}.map-cell.sampled{background:linear-gradient(155deg,#218c90,#14556e)}.map-cell.missed{background:#365261}.seafloor{position:absolute;left:11%;bottom:8%;font-size:15px;opacity:.27;color:#c3ede2;transform:rotate(-15deg)}.distance-badge,.miss-badge{font-size:clamp(16px,3vw,27px);line-height:1;z-index:2;text-shadow:0 2px 4px #08324c}.distance-badge{color:#fff1b1}.miss-badge{color:#f5b0a0}.candidate-dot{width:8px;height:8px;border-radius:50%;background:#f6d887;box-shadow:0 0 10px #ffe59e;opacity:.88}.sight{position:absolute;inset:19%;border:1px solid #ffdb91aa;border-radius:50%;pointer-events:none}.sight:before,.sight:after{content:"";position:absolute;left:50%;top:-22%;width:1px;height:145%;background:linear-gradient(#ffe3a9 0 16%,transparent 16% 84%,#ffe3a9 84%)}.sight:after{transform:rotate(90deg)}.pulse{position:absolute;width:12px;height:12px;border:2px solid #f8e9aa;border-radius:50%;animation:pulse 1.4s ease-out 1 forwards;pointer-events:none}@keyframes pulse{from{transform:scale(.5);opacity:1}to{transform:scale(7);opacity:0}}.rule-hint{max-width:540px;margin:8px auto 0;color:#9fcfcf;font-size:11px;line-height:1.45;text-align:center;min-height:17px}.status{max-width:670px;min-height:37px;margin:9px auto;padding:9px 12px;color:#f3ead0;background:#174b5e;border-left:4px solid #f0cb77;border-radius:4px;font-size:12px;font-weight:800}.controls{max-width:670px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr auto;gap:8px}.controls button{border-radius:9px;border:1px solid #b0dacd;border-bottom-width:3px;min-height:46px;padding:8px 11px;color:#082e45;font-weight:900;font-size:13px}.controls button:hover{filter:brightness(1.08)}.controls button:disabled{opacity:.48;cursor:default}.ping{background:#95e0d4}.guess{background:#f4d28a}.reset{background:#d5e6e3}.key-help{max-width:680px;margin:9px auto 0;display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;color:#90c1c5;font-size:10px;font-weight:800}kbd{font:inherit;border:1px solid currentColor;padding:1px 4px;border-radius:4px;white-space:nowrap}.overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px;background:#041c2edb}.overlay[hidden]{display:none}.overlay-card{width:min(100%,470px);text-align:center;border:5px solid #7dd6ca;border-radius:18px;background:radial-gradient(circle at 50% -10%,#1e6876,#103b57 60%,#082d45);padding:21px 25px 19px;box-shadow:0 16px 36px #00192b99;color:#ecf8e8}.overlay-icon{width:73px;height:73px;margin:auto auto 10px;border-radius:50%;border:3px solid #b8e8dc;background:radial-gradient(circle,#1d9caa,#164c67 60%);display:grid;place-items:center;box-shadow:0 0 0 7px #75c7be24,0 0 0 14px #75c7be12}.overlay-icon span{font-size:38px;color:#f5d890}.overlay-card small{font-size:10px;font-weight:900;letter-spacing:.2em;color:#95e6d8}.overlay-card h3{margin:7px 0 10px;font-size:clamp(24px,4vw,32px);color:#fff0bd}.overlay-card p{font-size:14px;line-height:1.7;margin:0 0 17px;font-weight:700}.overlay-card button{border:1px solid #ffe3a9;border-bottom:4px solid #a57637;border-radius:10px;background:#f1cb7d;color:#173d4d;min-height:48px;padding:8px 25px;font-size:15px;font-weight:900}.overlay-card button:hover{background:#ffe19e}.overlay-foot{display:block;color:#a7cfd0;margin-top:11px;font-size:11px}.below{max-width:840px;margin:35px auto 0;color:#557781;font-size:12px;line-height:1.8}footer{max-width:850px;margin:30px auto;padding:20px 12px 32px;border-top:1px solid #b6cdd0;display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#66848e}footer a{text-decoration:none}footer a:hover{text-decoration:underline}@media(max-width:620px){.site-header{padding:10px 14px;font-size:11px}.brand{font-size:13px}.page-title{margin:2px auto 10px}.page-title h1{font-size:26px;margin:2px 0}.page-title p{font-size:11px}.cabinet{border-width:5px;border-radius:18px}.cabinet-head{padding:9px 11px}.cabinet-head h2{font-size:15px}.cabinet-head small{font-size:8px}.stage-chip{font-size:9px;padding:5px 8px}.stage-chip strong{font-size:12px}.viewport{height:85px}.viewport-copy strong{font-size:16px;margin-top:2px}.viewport-copy span{font-size:8px}.console{padding:9px}.readouts{gap:5px}.readouts>div{padding:5px 6px;min-height:37px;display:block;text-align:center}.readouts small{display:block;font-size:8px;white-space:nowrap}.readouts strong{display:block;font-size:19px;margin-top:2px}.map-head{margin:8px 0 5px;font-size:10px}.map{width:min(100%,344px);gap:2px;padding:5px;border-width:2px;border-radius:9px}.depth-scale{font-size:8px;width:12px}.map-frame{gap:5px}.distance-badge,.miss-badge{font-size:20px}.rule-hint{font-size:9px;margin-top:6px}.status{font-size:10px;padding:6px 9px;min-height:31px;margin:7px auto}.controls{grid-template-columns:1fr 1fr;gap:5px}.controls button{min-height:43px;padding:5px 4px;font-size:11px}.controls .reset{grid-column:1/-1;min-height:34px}.key-help{font-size:9px;margin-top:7px;gap:3px 8px}.overlay{padding:9px}.overlay-card{padding:13px 12px;border-width:4px}.overlay-icon{width:52px;height:52px;margin-bottom:6px}.overlay-icon span{font-size:27px}.overlay-card h3{font-size:24px;margin:3px 0 7px}.overlay-card p{font-size:12px;line-height:1.55;margin-bottom:10px}.overlay-card button{min-height:43px;font-size:13px}.overlay-foot{font-size:9px;margin-top:8px}.below{margin-top:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}