/* Kappal Sandai — two 8×8 seas, ships, splashes and blasts. Shared look: ../shared/tnz.css */
.kp-head { display: flex; gap: 10px; align-items: center; width: min(100%, 420px); margin-bottom: 4px; }
.kp-head b { display: block; font-size: 18px; }
.kp-head small { color: var(--muted); font-size: 12px; }
.kp-logo { font-size: 30px; animation: kp-bob 3s ease-in-out infinite; }
@keyframes kp-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
.kp-turn { font-weight: 700; min-height: 24px; margin: 4px 0 6px; text-align: center; }
.kp-sea-wrap { width: min(100%, 360px); margin-bottom: 8px; }
.kp-sea-wrap.small { width: min(56%, 220px); }
.kp-label { font-size: 13px; color: var(--muted); margin: 0 0 4px; font-weight: 700; display: flex; justify-content: space-between; }
.kp-sea {
  aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 5px; border-radius: 12px;
  background: linear-gradient(160deg, #0b4f7a, #082f4d); box-shadow: 0 8px 22px #0008, inset 0 2px 0 #ffffff22;
  touch-action: manipulation; position: relative; overflow: hidden;
}
.kp-sea::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .25;
  background: repeating-linear-gradient(115deg, transparent 0 14px, #ffffff22 14px 16px); animation: kp-waves 8s linear infinite; }
@keyframes kp-waves { to { background-position: 120px 0; } }
.kp-c { position: relative; border-radius: 4px; background: #ffffff10; display: flex; align-items: center; justify-content: center; font-size: clamp(12px, 4vw, 20px); }
.kp-sea.enemy.live .kp-c.u { cursor: crosshair; }
.kp-sea.enemy.live .kp-c.u:active { background: #ffffff30; }
.kp-c.ship { background: linear-gradient(160deg, #9aa7b8, #5d6b7d); box-shadow: inset 0 -2px 0 #0005; }
.kp-c.ship.sel { background: linear-gradient(160deg, #ffd166, #e09f1f); }
.kp-c.ship.h-start { border-radius: 40% 4px 4px 40%; } .kp-c.ship.h-end { border-radius: 4px 40% 40% 4px; }
.kp-c.ship.v-start { border-radius: 40% 40% 4px 4px; } .kp-c.ship.v-end { border-radius: 4px 4px 40% 40%; }
.kp-c.miss::after { content: ''; width: 26%; height: 26%; border-radius: 50%; background: #cfe8ff; opacity: .8; }
.kp-c.hit { background: radial-gradient(circle, #ff8a3d, #c0262b); }
.kp-c.hit::after { content: '🔥'; }
.kp-c.sunk { background: radial-gradient(circle, #5a1d1d, #2b0d0d); }
.kp-c.sunk::after { content: '☠️'; font-size: 80%; }
.kp-c.ship.hit, .kp-c.ship.sunk { background: radial-gradient(circle, #ff8a3d, #8a1b1f); }
.kp-c.splash::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; border: 3px solid #cfe8ff; animation: kp-ripple .7s ease-out both; }
@keyframes kp-ripple { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.kp-c.boom { animation: kp-boom .6s ease-out both; z-index: 2; }
@keyframes kp-boom { 0% { transform: scale(1.8); filter: brightness(2.2); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.kp-sea.shake { animation: kp-shake .4s ease both; }
@keyframes kp-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.kp-c.hint { box-shadow: 0 0 0 3px var(--gold), 0 0 16px 4px #ffc533aa; animation: kp-hint 1s ease-in-out 3; z-index: 1; }
@keyframes kp-hint { 50% { transform: scale(1.15); } }
.kp-tools { display: flex; gap: 10px; justify-content: center; margin: 6px 0; min-height: 40px; flex-wrap: wrap; }
.kp-tools .tnz-btn { min-height: 40px; padding: 0 16px; font-size: 15px; }
.kp-fleet { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--muted); min-height: 18px; }
.kp-fleet span { background: var(--card); border-radius: 999px; padding: 2px 8px; }
.kp-fleet span.gone { text-decoration: line-through; opacity: .5; }
.kp-sea-wrap.hide { display: none; }