.naval,.naval *,.naval *:before,.naval *:after{box-sizing:border-box}.naval{--ink: #eaf3ff;--ink-dim: #9fb6d6;--panel: rgba(20, 36, 60, .7);--panel-brd: rgba(255, 255, 255, .1);--water: #12405f;--water2: #0d3149;--accent: #38bdf8;position:relative;color-scheme:dark;width:100%;min-width:0;max-width:400px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(6px,1.6vmin,12px);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none}.naval__hud{display:grid;grid-template-columns:minmax(0,auto) 1fr auto;align-items:center;gap:clamp(6px,1.6vmin,12px);min-width:0;margin-bottom:2px}.naval__brand{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden}.naval__logo{width:clamp(28px,6.5vmin,38px);height:clamp(28px,6.5vmin,38px);flex-shrink:0;border-radius:11px;background:linear-gradient(160deg,#38bdf8,#1f6dd8);box-shadow:inset 0 1px #fff6,0 0 14px -3px #38bdf899}.naval__title{display:flex;flex-direction:column;line-height:1;min-width:0}.naval__name{font-weight:800;font-size:clamp(15px,3.8vmin,20px);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.naval__tag{font-size:clamp(8px,2vmin,11px);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.naval__scores{display:flex;justify-content:center;gap:clamp(4px,1.2vmin,8px);min-width:0}.naval__stat{min-width:0;padding:clamp(3px,1.1vmin,7px) clamp(6px,1.6vmin,10px);border-radius:11px;background:var(--panel);border:1px solid var(--panel-brd);display:flex;flex-direction:column;align-items:center;line-height:1}.naval__stat-label{font-size:clamp(7px,1.7vmin,9px);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim);margin-bottom:4px}.naval__stat-value{font-weight:800;font-variant-numeric:tabular-nums;font-size:clamp(14px,3.8vmin,19px)}.naval__controls{display:flex;gap:5px;flex-shrink:0}.nbtn{width:clamp(30px,7vmin,38px);height:clamp(30px,7vmin,38px);display:grid;place-items:center;border-radius:11px;border:1px solid var(--panel-brd);background:var(--panel);color:var(--ink);cursor:pointer;transition:transform .12s ease}.nbtn svg{width:58%;height:58%}.nbtn:active{transform:scale(.92)}.nbtn--accent{background:linear-gradient(160deg,#6bd0ff,#2b8fff);border-color:transparent;color:#04203a;box-shadow:0 5px 16px -5px #38bdf8cc}.naval__label{margin:2px 0 0;font-size:clamp(9px,2.2vmin,11px);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);font-weight:700}.naval__label--you{margin-top:6px}.ngrid{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:3px;padding:4px;border-radius:clamp(8px,2.2vmin,14px);background:#00000040;box-shadow:inset 0 0 0 1px #ffffff0d}.ngrid--mine{max-width:66%;margin:0 auto}.ncell{border:none;border-radius:4px;background:linear-gradient(160deg,var(--water),var(--water2));display:grid;place-items:center;cursor:pointer;padding:0;transition:filter .1s ease}.ncell:not(:disabled):hover{filter:brightness(1.2)}.ncell:disabled{cursor:default}.ncell.mine{cursor:default}.ncell.has-ship{background:linear-gradient(160deg,#6b7a99,#414d68);box-shadow:inset 0 1px #ffffff40}.ncell.is-hit{background:radial-gradient(circle,#ff8a3c,#a83308 90%)}.ncell.is-sunk{background:#5a1414}.splash{width:26%;height:26%;border-radius:50%;background:#ffffff8c}.naval__overlay{position:absolute;inset:0;display:grid;place-items:center;background:#08121eb8;backdrop-filter:blur(3px);border-radius:16px}.naval__card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.naval__result{margin:0;font-weight:900;font-size:clamp(20px,6vmin,28px)}.naval__result.is-win{background:linear-gradient(92deg,#7fffb0,#7fdcff);-webkit-background-clip:text;background-clip:text;color:transparent}.naval__result.is-lose{color:#ff8a5c}.start{border:none;border-radius:999px;padding:clamp(11px,2.8vmin,15px) clamp(26px,7vmin,36px);font:inherit;font-weight:800;font-size:clamp(14px,3.8vmin,18px);color:#04203a;background:linear-gradient(160deg,#6bd0ff,#2b8fff);box-shadow:0 8px 24px -8px #38bdf8e6;cursor:pointer;transition:transform .12s ease}.start:active{transform:scale(.94)}.naval-atrium{box-sizing:border-box;min-height:100%;width:100%;display:flex;align-items:center;justify-content:center;padding:clamp(8px,2vmin,20px);background:radial-gradient(85% 55% at 50% 0%,#0f2c46 0%,transparent 55%),radial-gradient(90% 60% at 50% 100%,#081d30 0%,transparent 60%),#06131f}