:root{font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#173d4c;background:#dff5f0;font-synthesis:none;--ink: #173d4c;--deep: #176b78;--ocean: #21a7bb;--foam: #f9f8ee;--mint: #75d7c3;--yellow: #f7ca55;--coral: #f26d61;--line: rgba(23, 83, 96, .18)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{color:inherit}.app{min-height:100vh;background:radial-gradient(circle at 8% 18%,rgba(255,255,255,.6) 0 2px,transparent 3px),radial-gradient(circle at 84% 75%,rgba(255,255,255,.45) 0 1px,transparent 2px),linear-gradient(180deg,#eafaf4,#d7f3ef 58%,#bfe9e6);background-size:60px 60px,42px 42px,auto;position:relative;overflow:hidden}.app:after{content:"";position:fixed;inset:auto -10% -110px;height:210px;opacity:.35;background:repeating-radial-gradient(ellipse at 50% 0,transparent 0 32px,#37afba 34px 37px,transparent 39px 64px);pointer-events:none}.site-header{height:76px;padding:0 42px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(28,103,113,.12);background:#f8fbf0c7;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:relative;z-index:5}.wordmark{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-weight:900;font-size:22px;letter-spacing:.08em}.wordmark i{color:#4ebf8e;font-size:25px;transform:rotate(-25deg)}.sun-mark{color:var(--yellow);font-size:29px;filter:drop-shadow(0 2px 0 rgba(202,137,43,.15))}.header-actions{display:flex;align-items:center;gap:18px;font-size:13px;font-weight:700}.connection-pill{border-radius:20px;padding:7px 11px;background:#23707b14;display:flex;gap:7px;align-items:center}.connection-pill i{width:8px;height:8px;border-radius:50%;background:#d09a45}.connection-pill.online i{background:#39b984;box-shadow:0 0 0 4px #39b9841f}.setting-toggle{cursor:pointer;display:flex;gap:6px;align-items:center;color:#446773}.setting-toggle input{position:absolute;opacity:0;pointer-events:none}.setting-toggle span{width:30px;height:30px;display:grid;place-items:center;background:#23707b14;border-radius:50%;font-size:17px}.setting-toggle:has(input:focus-visible) span{outline:3px solid rgba(33,167,187,.28)}.page-shell{position:relative;z-index:1;min-height:calc(100vh - 76px);padding:46px 6vw 58px}.paper-panel{background:var(--foam);border:1px solid rgba(30,100,108,.13);border-radius:28px;box-shadow:0 18px 50px #26666c21,0 2px #fffc inset}.home-layout{max-width:1180px;min-height:560px;margin:0 auto;display:grid;grid-template-columns:1fr 500px;align-items:center;gap:92px}.eyebrow{color:#198e83;font-weight:900;font-size:13px;letter-spacing:.16em;text-transform:uppercase}.hero-copy h1{font-size:clamp(44px,4.1vw,64px);line-height:1.14;margin:17px 0 22px;letter-spacing:-.045em;color:#174957}.hero-copy>p{font-size:18px;line-height:1.8;max-width:570px;color:#52727b}.nickname-field{display:block;margin-top:30px;max-width:380px}.nickname-field>span{font-size:13px;font-weight:800;display:block;margin:0 0 8px 5px}.nickname-field>div{height:54px;display:flex;align-items:center;background:#ffffffd1;border:2px solid rgba(27,111,121,.18);border-radius:16px;padding:0 14px;transition:.2s}.nickname-field>div:focus-within{border-color:var(--ocean);box-shadow:0 0 0 4px #21a7bb1f}.nickname-field input{border:0;outline:0;background:transparent;width:100%;color:var(--ink);font-size:17px;font-weight:700}.nickname-field small{color:#83a0a6}.nickname-field em{font-size:12px;color:#599184;margin:7px 5px 0;display:block;font-style:normal}.nickname-field.compact{margin:25px auto 18px;text-align:left}.game-card{padding:14px;transform:rotate(1deg);position:relative}.game-art{height:230px;overflow:hidden;border-radius:20px;position:relative;background:linear-gradient(#8ce0dc 0 54%,#35b9c5 55% 100%)}.game-art:before{content:"";position:absolute;width:92px;height:92px;border-radius:50%;background:var(--yellow);right:40px;top:25px;box-shadow:0 0 0 13px #f7ca552e}.cloud{position:absolute;color:#ffffffd9;font-size:74px;letter-spacing:-30px;text-shadow:25px 5px 0 rgba(255,255,255,.85),48px -2px 0 rgba(255,255,255,.85)}.cloud-one{top:13px;left:30px;transform:scale(.55)}.cloud-two{top:64px;right:74px;transform:scale(.35)}.boat{position:absolute;left:135px;bottom:47px;color:#f4685e;font-size:94px;transform:skew(-8deg);text-shadow:0 8px 0 rgba(14,110,125,.19)}.boat i{position:absolute;font-style:normal;color:#fff8dc;font-size:64px;left:41px;bottom:43px;transform:skew(8deg)}.wave{position:absolute;color:#ffffffbf;font-size:70px;bottom:-24px;letter-spacing:-10px}.wave-one{left:18px}.wave-two{right:8px;bottom:-37px}.game-card-copy{padding:24px 20px 17px}.available-tag{color:#147f70;background:#d8f2df;border-radius:16px;padding:6px 11px;font-size:11px;font-weight:900}.game-card h2{font-size:33px;margin:18px 0 9px}.game-card p{color:#56757c;line-height:1.7;margin:0}.game-meta{display:flex;gap:20px;margin:17px 0;font-size:12px;color:#68878d;font-weight:700}.game-meta span:before{content:"•";color:var(--coral);margin-right:7px}.primary-button{border:0;cursor:pointer;border-radius:16px;background:var(--coral);color:#fff;min-height:53px;padding:0 20px;font-weight:900;letter-spacing:.03em;box-shadow:0 7px #cf554d,0 12px 23px #e0524833;transition:transform .15s,box-shadow .15s}.primary-button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 9px #cf554d,0 14px 25px #e0524838}.primary-button:not(:disabled):active{transform:translateY(5px);box-shadow:0 2px #cf554d}.primary-button:disabled{opacity:.5;cursor:not-allowed}.game-card .primary-button{width:100%;display:flex;align-items:center;justify-content:space-between}.primary-button b{font-size:20px}.center-stage{min-height:570px;display:grid;place-items:center}.invite-card{width:min(540px,90vw);padding:48px;text-align:center;position:relative}.invite-card h1{font-size:39px;margin:16px 0}.invite-card>p{color:#5b7880;line-height:1.7}.invite-card .primary-button{width:100%;margin-top:12px}.invite-badge{display:grid;place-items:center;margin:-80px auto 28px;width:70px;height:70px;border-radius:23px;background:var(--yellow);font-size:31px;transform:rotate(-5deg);box-shadow:0 8px #d5a939}.text-link{display:inline-block;color:#287882;font-size:13px;font-weight:800;margin-top:24px}.full-message{background:#fee2dd;color:#af4e47;padding:16px;border-radius:14px;font-weight:800}.waiting-layout{max-width:1120px;min-height:570px;margin:0 auto;display:grid;grid-template-columns:470px 1fr;align-items:center;gap:70px}.waiting-card{padding:46px}.waiting-card h1{font-size:43px;line-height:1.16;margin:18px 0}.waiting-card>p{color:#57747d;line-height:1.7}.invite-link{display:block;margin:28px 0 16px}.invite-link>span{font-size:12px;font-weight:900;margin:0 0 8px 4px;display:block}.invite-link>div{display:flex;background:#fff;border:2px solid var(--line);border-radius:15px;overflow:hidden}.invite-link input{min-width:0;flex:1;border:0;padding:0 13px;color:#54727a;outline:0}.invite-link button{border:0;border-left:1px solid var(--line);padding:14px;cursor:pointer;background:#e0f4ed;font-weight:900}.share-button{width:100%;display:flex;justify-content:space-between;align-items:center}.sea-lobby{height:440px;position:relative;display:flex;align-items:center;justify-content:center;gap:22px}.lobby-sun{position:absolute;right:20px;top:12px;color:var(--yellow);font-size:70px;animation:slow-spin 20s linear infinite}.player-island{width:180px;height:180px;border-radius:45% 55% 50% 48%;background:#f7e5a1;box-shadow:0 15px #269fa64d;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1}.player-island span{width:49px;height:49px;display:grid;place-items:center;border-radius:50%;background:#4cc3a1;color:#fff;font-size:24px;margin-bottom:8px}.player-island b{font-size:18px}.player-island small{margin-top:5px;color:#688087}.player-island.waiting{opacity:.68;filter:saturate(.6)}.player-island.waiting span{background:#87a7a9}.dotted-route{color:#4db8b3;font-size:31px;letter-spacing:1px;transform:rotate(-8deg)}.toast{position:fixed;z-index:30;left:50%;top:90px;transform:translate(-50%);background:#fff2ee;color:#a44742;border:1px solid #f2b7ae;box-shadow:0 10px 30px #58312b24;border-radius:15px;min-width:320px;padding:13px 16px;display:flex;align-items:center;gap:11px;font-weight:700}.toast>span{width:24px;height:24px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center}.toast button{margin-left:auto;border:0;background:transparent;cursor:pointer;font-size:22px}.blocking-notice{position:fixed;z-index:50;inset:0;background:#12404bad;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);display:grid;place-items:center}.blocking-card{padding:50px;max-width:480px;text-align:center}.notice-icon{width:65px;height:65px;margin:auto;border-radius:20px;display:grid;place-items:center;font-size:32px;background:var(--yellow)}.blocking-card h2{font-size:32px}.blocking-card p{line-height:1.7;color:#5d777d}.size-warning{display:none;position:fixed;z-index:100;inset:0;background:#dff5f0;color:var(--ink);align-items:center;justify-content:center;flex-direction:column;text-align:center;font-size:26px;font-weight:900}.size-warning small{font-size:14px;margin-top:12px;color:#55747c;font-weight:600}@keyframes slow-spin{to{transform:rotate(360deg)}}.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important}}@media(max-width:1279px),(max-height:719px){.size-warning{display:flex}}.game-room{max-width:1240px;margin:-25px auto 0}.score-header{height:63px;max-width:690px;margin:0 auto 22px;padding:7px 18px;display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;border-radius:20px}.score-player{display:flex;gap:8px;align-items:center;min-width:0}.score-player.opponent{justify-content:flex-end}.score-player b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-player small{background:#d8f0df;color:#27846d;border-radius:9px;padding:2px 6px;font-weight:800}.online-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#a9b7b7}.online-dot.online{background:#3bbc83;box-shadow:0 0 0 4px #3bbc831f}.score-center{text-align:center;display:flex;flex-direction:column}.score-center strong{font-size:24px;letter-spacing:.1em}.score-center strong i{color:#8eaaa9;padding:0 9px;font-style:normal}.score-center span{font-size:10px;color:#6c888d;font-weight:800}.placement-layout{display:grid;grid-template-columns:350px 1fr;gap:34px;align-items:start}.fleet-dock{padding:27px}.fleet-dock h1{margin:9px 0;font-size:27px}.fleet-dock p{color:#617b82;font-size:13px;line-height:1.6;margin:0 0 18px}.ship-list{display:grid;gap:7px}.ship-card{border:2px solid transparent;background:#e8f4ed;border-radius:13px;min-height:57px;padding:7px 10px;cursor:grab;display:grid;grid-template-columns:90px 1fr 42px;align-items:center;text-align:left;transition:.15s}.ship-card:hover,.ship-card.selected{border-color:#54baad;background:#f2fbf4}.ship-card:active{cursor:grabbing}.ship-card>span:nth-child(2){display:flex;flex-direction:column}.ship-card b{font-size:13px}.ship-card small{color:#6c878b;margin-top:3px;font-size:10px}.ship-card em{font-style:normal;font-size:10px;text-align:center;color:#6a8a8e}.ship-card.placed em{color:#269475;font-size:18px;font-weight:900}.mini-ship{display:flex;gap:2px;align-items:center;justify-content:center}.mini-ship.vertical{transform:rotate(90deg)}.mini-ship i{display:block;width:14px;height:19px;background:#387f91;border-radius:4px;border-bottom:4px solid #1f6578}.mini-ship i:first-child{border-radius:10px 4px 4px 10px}.mini-ship i:last-child{border-radius:4px 10px 10px 4px}.dock-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.dock-actions button,.secondary-button{border:1px solid rgba(30,99,108,.18);background:#fffdf4;border-radius:13px;padding:11px;cursor:pointer;font-size:12px;font-weight:800}.dock-actions button:disabled,.secondary-button:disabled{opacity:.45;cursor:not-allowed}.placement-sea{max-width:720px;margin:0 auto}.phase-title{display:flex;justify-content:space-between;align-items:end;margin:0 0 12px}.phase-title h2{margin:5px 0 0;font-size:25px}.ready-status{background:#fff1c8;color:#96701b;padding:8px 12px;border-radius:14px;font-size:11px;font-weight:900}.ready-status.done{background:#d6f0df;color:#277b66}.placement-footer{margin-top:14px;display:flex;justify-content:space-between;align-items:center}.placement-footer>span{font-size:13px;color:#53777d;font-weight:800}.ready-button{min-width:205px;display:flex;justify-content:space-between;align-items:center}.sea-board{--cell: 38px;display:grid;grid-template-columns:23px repeat(10,var(--cell));grid-template-rows:23px repeat(10,var(--cell));width:calc(23px + 10 * var(--cell));border-radius:15px;padding:9px;background:#e9faf5;border:1px solid rgba(29,100,112,.16);box-shadow:0 12px 32px #257a8026;-webkit-user-select:none;user-select:none}.placement-sea .sea-board{--cell: 43px;margin:auto}.sea-board.compact{--cell: 29px;padding:7px;grid-template-columns:20px repeat(10,var(--cell));grid-template-rows:20px repeat(10,var(--cell));width:calc(20px + 10 * var(--cell))}.board-row{display:contents}.axis{display:grid;place-items:center;color:#5c8990;font-size:10px;font-weight:900}.axis.corner{grid-column:1}.sea-cell{width:var(--cell);height:var(--cell);padding:0;border:1px solid rgba(255,255,255,.68);background:#63cad1;position:relative;cursor:crosshair;display:grid;place-items:center;overflow:visible;transition:transform .12s,filter .12s,background .12s}.sea-cell:nth-child(2){border-radius:6px 0 0}.sea-cell:not(:disabled):hover{z-index:2;transform:scale(1.08);filter:brightness(1.08)}.sea-cell:disabled{cursor:default}.sea-cell.ship{background:#347f91;box-shadow:inset 0 -5px #226577}.sea-cell.ship:before{content:"";position:absolute;inset:19% 10%;border-radius:40%;border-top:2px solid rgba(255,255,255,.35)}.sea-cell.targeted{z-index:3;background:#f7cf5c;box-shadow:0 0 0 4px #f7cf5c5c,inset 0 0 0 2px #fff4ae}.sea-cell span{position:relative;z-index:4;font-size:calc(var(--cell) * .55);font-weight:900;line-height:1}.sea-cell.miss span{color:#fff;text-shadow:0 1px 1px #268b98}.sea-cell.hit,.sea-cell.sunk{background:#ef776a}.sea-cell.hit span{color:#fff28d;animation:hit-pop .45s ease-out}.sea-cell.sunk{background:#ca4d48;box-shadow:inset 0 -4px #9a3835}.sea-cell.sunk span{color:#fff;animation:sunk-pulse 1.1s ease-out}.turn-banner{min-height:56px;width:520px;margin:0 auto 16px;border-radius:20px;background:#fff0c8;color:#8c6b23;display:flex;align-items:center;justify-content:center;gap:14px;box-shadow:0 7px 20px #5c67431a}.turn-banner b{font-size:18px}.turn-banner span{font-size:11px;font-weight:700}.turn-banner.your-turn{background:#d7f2df;color:#1d7864}.battle-boards{display:grid;grid-template-columns:auto auto 220px;justify-content:center;align-items:start;gap:25px}.board-column{transition:opacity .2s}.board-column.subdued{opacity:.85}.board-column.active .sea-board{box-shadow:0 0 0 4px #f7ca555c,0 16px 35px #257a802e}.board-heading{display:flex;justify-content:space-between;align-items:center;min-height:38px}.board-heading h2{font-size:17px;margin:0}.board-heading span{font-size:10px;color:#68858a;font-weight:800}.battle-controls{padding:22px;margin-top:38px}.battle-controls h2{font-size:25px;margin:8px 0 14px}.target-preview{height:88px;border:2px dashed #b6d7d1;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#78989a;background:#f0f8f2}.target-preview.has-target{border:2px solid #e6bd48;background:#fff4c9;color:#956f18}.target-preview i{font-style:normal;font-size:25px}.target-preview b{font-size:22px}.target-preview small{font-size:10px}.battle-controls .primary-button{width:100%;margin:15px 0;display:flex;justify-content:space-between;align-items:center}.shot-legend{display:grid;gap:7px;font-size:10px;font-weight:800;color:#5e7a80}.shot-legend span{display:flex;gap:7px;align-items:center}.shot-legend i{width:10px;height:10px;border-radius:50%}.shot-legend i.miss{border:2px solid #55bbc5}.shot-legend i.hit{background:#f4876e}.shot-legend i.sunk{background:#a94543;border-radius:2px}.danger-link{width:100%;margin-top:16px;border:0;background:transparent;text-decoration:underline;color:#a04f4a;cursor:pointer;font-size:11px}.danger-link:disabled{opacity:.4;cursor:not-allowed}.modal-backdrop{position:fixed;z-index:40;inset:0;background:#133e4894;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:grid;place-items:center}.confirm-dialog{width:430px;padding:36px;text-align:center}.confirm-dialog>span{width:60px;height:60px;margin:auto;background:#fee0d9;color:#c45149;border-radius:20px;display:grid;place-items:center;font-size:27px}.confirm-dialog h2{font-size:26px}.confirm-dialog p{color:#657d82;line-height:1.6}.confirm-dialog>div{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.confirm-dialog .primary-button{box-shadow:none;min-height:44px}.shot-effect{position:fixed;z-index:35;left:50%;top:46%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:#1c8b9aeb;pointer-events:none;animation:effect-burst 1.1s ease-out both;box-shadow:0 0 0 18px #ffffff4d}.shot-effect.hit{background:#ea6353f0}.shot-effect.sunk{background:#913738f2}.shot-effect i{font-style:normal;font-size:51px}.shot-effect b{font-size:20px}.result-banner{max-width:1050px;min-height:105px;margin:0 auto 18px;padding:17px 28px;border-radius:25px;background:#fff4cf;display:grid;grid-template-columns:65px 1fr 130px;align-items:center;gap:18px;box-shadow:0 12px 28px #25676c1c}.result-banner>span{width:60px;height:60px;border-radius:20px;background:var(--yellow);display:grid;place-items:center;font-size:31px}.result-banner h1{margin:3px 0;font-size:27px}.result-banner p{margin:0;color:#6e7d78;font-size:11px}.result-banner>strong{font-size:36px;text-align:right}.result-banner>strong i{color:#b09b6d;padding:0 9px;font-style:normal}.result-banner.lost{background:#e3f3ef}.result-banner.lost>span{background:#72c7b3;color:#fff}.result-content{display:grid;grid-template-columns:1fr 280px;gap:25px;max-width:1050px;margin:auto}.revealed-boards{display:grid;grid-template-columns:1fr 1fr;gap:26px}.result-sidebar{padding:20px}.shot-log{padding:0;margin:12px 0;list-style:none;max-height:175px;overflow:auto}.shot-log li{display:grid;grid-template-columns:24px 1fr auto;gap:7px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(28,91,99,.1)}.shot-log li>span{width:22px;height:22px;border-radius:50%;background:#e4f1eb;display:grid;place-items:center;font-size:9px;font-weight:900}.shot-log li div{display:flex;flex-direction:column;font-size:10px}.shot-log li small{color:#758b8f}.shot-log em{font-style:normal;font-size:9px;font-weight:900}.shot-log em.miss{color:#3294a1}.shot-log em.hit{color:#e26a59}.shot-log em.sunk{color:#a23e3c}.empty-log{padding:30px 0;color:#82999c;font-size:11px;text-align:center}.rematch-box{border-top:1px solid rgba(28,91,99,.14);padding-top:13px}.rematch-box h3{margin:0 0 5px}.rematch-box p{font-size:10px;color:#6e878b;line-height:1.5;min-height:30px}.rematch-box button{width:100%;min-height:43px;box-shadow:none;display:flex;justify-content:space-between;align-items:center}.rematch-votes{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:10px}.rematch-votes span{background:#e7eeea;color:#7f9190;border-radius:10px;text-align:center;padding:5px;font-size:9px;font-weight:900}.rematch-votes span.done{background:#d7f1df;color:#278068}@keyframes hit-pop{50%{transform:scale(1.7) rotate(25deg)}}@keyframes sunk-pulse{35%{transform:scale(1.8)}70%{transform:scale(.8)}}@keyframes effect-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}.sea-board{--board-axis: 23px;--board-pad: 9px;width:max-content;position:relative}.sea-board.compact{--board-axis: 20px;--board-pad: 7px;width:max-content}.sea-cell.ship:not(.hit):not(.sunk){background:#63cad1;box-shadow:none}.sea-cell.ship:before{display:none}.sea-cell.hit,.sea-cell.sunk{z-index:3}.ship-sprite{z-index:2;pointer-events:none;position:absolute;display:grid;place-items:center;overflow:visible;width:var(--cell);height:var(--cell)}.ship-sprite.column-0{left:calc(var(--board-pad) + var(--board-axis))}.ship-sprite.column-1{left:calc(var(--board-pad) + var(--board-axis) + var(--cell))}.ship-sprite.column-2{left:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell))}.ship-sprite.column-3{left:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.column-4{left:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.column-5{left:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.column-6{left:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.column-7{left:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.column-8{left:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.column-9{left:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.row-0{top:calc(var(--board-pad) + var(--board-axis))}.ship-sprite.row-1{top:calc(var(--board-pad) + var(--board-axis) + var(--cell))}.ship-sprite.row-2{top:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell))}.ship-sprite.row-3{top:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.row-4{top:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.row-5{top:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.row-6{top:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.row-7{top:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.row-8{top:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.row-9{top:calc(var(--board-pad) + var(--board-axis) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.horizontal.length-2{width:calc(var(--cell) + var(--cell))}.ship-sprite.horizontal.length-3{width:calc(var(--cell) + var(--cell) + var(--cell))}.ship-sprite.horizontal.length-4{width:calc(var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.horizontal.length-5{width:calc(var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.vertical.length-2{height:calc(var(--cell) + var(--cell))}.ship-sprite.vertical.length-3{height:calc(var(--cell) + var(--cell) + var(--cell))}.ship-sprite.vertical.length-4{height:calc(var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite.vertical.length-5{height:calc(var(--cell) + var(--cell) + var(--cell) + var(--cell) + var(--cell))}.ship-sprite img{width:100%;height:88%;object-fit:contain;filter:drop-shadow(0 3px 1px rgba(16,88,99,.2))}.ship-sprite.vertical img{max-width:none;transform:rotate(90deg)}.ship-sprite.vertical.length-5 img{width:500%;height:17.6%}.ship-sprite.vertical.length-4 img{width:400%;height:22%}.ship-sprite.vertical.length-3 img{width:300%;height:29.333%}.ship-sprite.vertical.length-2 img{width:200%;height:44%}.mini-ship{height:30px;overflow:visible}.ship-sprite.sunk{z-index:4;border-radius:8px;background:#97343561;box-shadow:inset 0 0 0 2px #ffe2b880}.ship-sprite.sunk img{position:relative;z-index:1;opacity:.88;filter:saturate(.72) brightness(.86) drop-shadow(0 3px 1px rgba(75,27,29,.3))}.mini-ship img{display:block;width:82px;height:27px;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(16,88,99,.16))}.mini-ship.vertical{transform:none}.mini-ship.vertical img{width:48px;height:20px;transform:rotate(90deg)}