.sonar-game{position:relative;width:min(100%,520px);margin:0 auto;color:#264b61}
.sonar-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:11px}
.sonar-hud>div{padding:7px 5px;border:2px solid #9bc2d2;border-radius:14px;background:#eef9fb;box-shadow:0 3px 0 #bad6db;text-align:center}
.sonar-hud small{display:block;font-size:11px;font-weight:800;color:#607e8d}
.sonar-hud strong{display:block;font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
.sonar-hud [data-oxygen]{color:#e47678;white-space:nowrap;letter-spacing:1px}
.sonar-sea{position:relative;overflow:hidden;padding:10px 12px 13px;border:4px solid #316780;border-radius:23px;background:radial-gradient(circle at 13% 12%,#8ecedb 0,#458ca9 42%,#164f75 100%);box-shadow:inset 0 0 0 3px #ffffff5c,0 6px 0 #5e96a6;isolation:isolate}
.sonar-sea:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 8% 55%,#ffffff42 0 3px,transparent 4px),radial-gradient(circle at 85% 32%,#ffffff47 0 4px,transparent 5px),radial-gradient(circle at 26% 80%,#ffffff36 0 2px,transparent 3px),repeating-linear-gradient(155deg,transparent 0 47px,#defcff16 48px 51px);pointer-events:none}
.sonar-heading{position:relative;z-index:1;display:flex;justify-content:space-between;gap:8px;margin:0 3px 9px;color:#efffff;font-size:13px;font-weight:900;text-shadow:0 1px 2px #235473}
.sonar-board{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--sonar-size),minmax(0,1fr));gap:3px;width:min(100%,390px);aspect-ratio:1;margin:0 auto;padding:5px;border:2px solid #bce8e1;border-radius:13px;background:#0b4168a8;box-shadow:0 4px 18px #082c4f99}
.sonar-cell{display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:1px solid #8bc9ce88;border-radius:5px;background:linear-gradient(145deg,#95dae463,#286e9866);color:#e8ffff;font-family:inherit;font-size:clamp(13px,4.4vw,23px);font-weight:900;cursor:pointer;touch-action:manipulation;transition:background .14s,transform .14s}
.sonar-cell:hover:not(:disabled){background:#7acbd197;transform:scale(.94)}
.sonar-cell.is-scanned{border-color:#a9e7dc;background:#78c6c4;color:#173f5c;box-shadow:inset 0 0 0 2px #c6fff3}
.sonar-cell.is-missed{border-color:#e8aaad;background:#a85d7799;color:#ffeaed}
.sonar-cell.is-candidate{box-shadow:inset 0 0 0 3px #f9de77;background:#76bbb29d}
.sonar-cell.is-found{border-color:#fff1b2;background:#f9db75;font-size:clamp(20px,6vw,34px);box-shadow:0 0 15px #fff3a6}
.sonar-cell:disabled{cursor:default}
.sonar-sub{position:relative;z-index:1;margin:7px 9px -2px;text-align:right;font-size:21px;filter:drop-shadow(0 2px 2px #154966)}
.sonar-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:15px 0 10px}
.sonar-modes .button{min-width:0;min-height:49px;padding:7px 4px;font-size:14px;white-space:nowrap}
.sonar-modes .button[aria-pressed=true]{border-color:#247b8b;background:#c3f0e8;box-shadow:0 4px 0 #a5cfc9}
.sonar-clues{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center;padding:8px;border:2px solid #a5c7ce;border-radius:13px;background:#f2fbf8;font-size:12px;font-weight:800}
.sonar-clues strong{font-size:15px}
.sonar-clues .button{min-width:0;min-height:37px;padding:4px 5px;font-size:12px;white-space:normal;line-height:1.2}
.sonar-game .toy-status{min-height:2.6em;margin:9px 0;text-align:center}
.sonar-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sonar-controls .button{min-width:0;padding:7px 2px;font-size:14px;white-space:nowrap}
.sonar-overlay{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:18px;border-radius:20px;background:#143c60ac;backdrop-filter:blur(2px)}
.sonar-overlay[hidden]{display:none}
.sonar-dialog{width:min(100%,355px);padding:22px 18px;border:3px solid #4e8193;border-radius:21px;background:#fafff5;box-shadow:0 8px 0 #1c42618c;text-align:center}
.sonar-dialog h2{margin:0 0 10px;color:#38667c;font-size:24px}
.sonar-dialog p{margin:0 0 17px;color:#4e6f7c;font-size:15px;line-height:1.6}
.sonar-dialog .button{min-width:145px}
.sonar-game button:focus-visible{outline:3px solid #ef8065;outline-offset:2px}
@media(max-width:480px){.toy-page:has(.sonar-game) .toy-card{padding:14px 11px}.toy-page:has(.sonar-game) .toy-card h1{font-size:22px}.toy-page:has(.sonar-game) .toy-instruction{margin:5px 0 10px;line-height:1.4}.sonar-hud{gap:6px;margin-bottom:8px}.sonar-hud>div{padding:5px 2px}.sonar-hud strong{font-size:16px}.sonar-sea{padding:8px 8px 9px}.sonar-board{gap:2px;padding:4px}.sonar-heading{font-size:12px}.sonar-modes{gap:6px;margin:11px 0 8px}.sonar-modes .button{font-size:12px;min-height:45px}.sonar-clues{gap:4px;padding:5px;font-size:10px}.sonar-clues strong{font-size:13px}.sonar-clues .button{font-size:10px}.sonar-dialog{padding:19px 14px}.sonar-dialog h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){.sonar-cell{transition:none}}