.battleship-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(11rem,15rem);gap:1.25rem;align-items:start;width:min(100%,58rem);margin:0 auto}.battleship-board-wrap{overflow:auto;padding:.4rem}.battleship-grid{--battle-cell:min(6.7vw,3rem);display:grid;grid-template-columns:2rem repeat(var(--battle-size),var(--battle-cell));grid-auto-rows:var(--battle-cell);gap:2px;justify-content:center;min-width:max-content}.battle-corner,.battle-clue{display:grid;place-items:center;font-weight:800;color:var(--muted-foreground,#64748b);font-variant-numeric:tabular-nums}.battle-corner{font-size:1.1rem}.battle-clue{border-radius:.55rem;background:color-mix(in srgb,var(--game-accent,#2563eb) 8%,transparent);transition:background-color .16s ease,color .16s ease,transform .16s ease}.battle-clue.is-complete{color:var(--game-accent,#2563eb);background:color-mix(in srgb,var(--game-accent,#2563eb) 17%,transparent)}.battle-clue.is-over{color:#b91c1c;background:color-mix(in srgb,#ef4444 16%,transparent);transform:scale(1.04)}.battle-cell{position:relative;display:grid;place-items:center;width:var(--battle-cell);height:var(--battle-cell);padding:0;border:1px solid color-mix(in srgb,var(--border,#cbd5e1) 84%,transparent);border-radius:.45rem;background:color-mix(in srgb,var(--surface,#fff) 95%,var(--game-accent,#2563eb) 5%);color:inherit;cursor:pointer;touch-action:manipulation;transition:transform .12s ease,border-color .12s ease,background-color .12s ease,box-shadow .12s ease}.battle-cell:hover:not(.is-given){border-color:color-mix(in srgb,var(--game-accent,#2563eb) 58%,var(--border,#cbd5e1));background:color-mix(in srgb,var(--surface,#fff) 88%,var(--game-accent,#2563eb) 12%)}.battle-cell:focus-visible{outline:3px solid color-mix(in srgb,var(--game-accent-2,#38bdf8) 70%,transparent);outline-offset:1px;z-index:2}.battle-cell.is-given{cursor:default;border-color:color-mix(in srgb,var(--game-accent,#2563eb) 48%,var(--border,#cbd5e1));background:color-mix(in srgb,var(--surface,#fff) 82%,var(--game-accent,#2563eb) 18%)}.battle-cell[data-state="1"]{background:linear-gradient(145deg,color-mix(in srgb,var(--game-accent,#2563eb) 82%,#0f172a),color-mix(in srgb,var(--game-accent-2,#38bdf8) 74%,#0f172a));border-color:color-mix(in srgb,var(--game-accent,#2563eb) 75%,#0f172a);box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 24%,transparent)}.battle-cell[data-state="1"].is-given{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--game-accent,#2563eb) 86%,#0f172a) 0 6px,color-mix(in srgb,var(--game-accent-2,#38bdf8) 72%,#0f172a) 6px 12px)}.battle-cell.is-solved .battle-ship{animation:battle-pop .32s ease}.battle-ship{width:62%;height:62%;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 0 0 2px rgba(15,23,42,.2),inset 0 0 0 2px rgba(15,23,42,.12)}.battle-water{font-size:clamp(1rem,calc(var(--battle-cell)*.52),1.45rem);font-weight:900;line-height:1;color:color-mix(in srgb,var(--game-accent,#2563eb) 45%,var(--muted-foreground,#64748b))}.battle-side{display:grid;gap:.8rem;padding:1rem;border:1px solid color-mix(in srgb,var(--border,#cbd5e1) 80%,transparent);border-radius:1rem;background:color-mix(in srgb,var(--surface,#fff) 94%,var(--game-accent,#2563eb) 6%);box-shadow:0 10px 30px rgba(15,23,42,.06)}.battle-side>strong{font-size:1rem}.battle-side p{margin:0;color:var(--muted-foreground,#64748b);font-size:.88rem;line-height:1.45}.battle-side small{color:var(--muted-foreground,#64748b);font-size:.78rem}.battle-fleet{display:grid;gap:.55rem}.battle-fleet-item{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.5rem .6rem;border-radius:.65rem;background:color-mix(in srgb,var(--surface,#fff) 86%,var(--game-accent,#2563eb) 14%);font-weight:700;font-variant-numeric:tabular-nums}.battle-fleet-ship{display:flex;gap:2px}.battle-fleet-ship i{display:block;width:1.15rem;height:.72rem;border-radius:.3rem;background:linear-gradient(135deg,var(--game-accent,#2563eb),var(--game-accent-2,#38bdf8));box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}@keyframes battle-pop{0%{transform:scale(.55)}70%{transform:scale(1.18)}100%{transform:scale(1)}}@media(max-width:760px){.battleship-wrap{grid-template-columns:1fr}.battle-side{width:min(100%,32rem);margin:0 auto}.battle-fleet{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.battleship-grid{--battle-cell:min(8vw,2.45rem);grid-template-columns:1.65rem repeat(var(--battle-size),var(--battle-cell));gap:1px}.battle-clue{font-size:.78rem;border-radius:.35rem}.battle-cell{border-radius:.3rem}.battle-side{padding:.85rem}.battle-fleet-item{padding:.45rem}.battle-fleet-ship i{width:.9rem}}@media(prefers-reduced-motion:reduce){.battle-cell,.battle-clue{transition:none}.battle-cell.is-solved .battle-ship{animation:none}}