*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}button,input{font:inherit}button{border:0;cursor:pointer}.app-shell{min-height:100svh;display:grid;place-items:center;padding:28px 18px}.welcome{width:min(520px,100%);text-align:center}.brand{display:flex;align-items:center;justify-content:center;gap:12px;font-weight:900;letter-spacing:.13em}.logo{width:46px;height:46px;border-radius:50%;display:grid;place-items:center}.logo.small{width:34px;height:34px}.radar,.sonar{margin:34px auto 22px;width:120px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative}.radar span,.sonar span{position:absolute;inset:0;border-radius:50%;animation:spin 3s linear infinite}.radar b,.sonar b{font-size:38px}@keyframes spin{to{transform:rotate(360deg)}}.eyebrow{font-size:12px;letter-spacing:.22em;font-weight:800}.welcome h1{font-size:clamp(38px,8vw,64px);line-height:.98;margin:14px 0 18px;letter-spacing:-.045em}.welcome h1 em{font-style:normal}.lead{line-height:1.6}.welcome form{padding:18px;border-radius:20px;display:grid;gap:12px}.welcome input{height:52px;border-radius:12px;padding:0 16px}.primary,.join button{height:52px;border-radius:12px;font-weight:900}.or{display:flex;gap:12px;align-items:center;font-size:12px}.or span{height:1px;flex:1}.join{display:grid;grid-template-columns:1fr 1.35fr;gap:10px}.join input{text-align:center;letter-spacing:.2em}.rules{font-size:11px;letter-spacing:.13em}.game{min-height:100svh;padding-bottom:50px}.game header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100% - 1080px)/2))}.game header .brand{justify-content:flex-start;font-size:13px}.room{font-size:11px;letter-spacing:.12em;display:flex;align-items:center;gap:9px}.room b{font-size:16px}.room button{background:none}.waiting{text-align:center;padding:65px 20px}.waiting h2{font-size:30px;margin:20px 0 8px}.waiting .primary{padding:0 20px}.sonar{width:150px}.battle{max-width:1080px;margin:auto;padding:42px 24px;display:grid;grid-template-columns:1fr 1fr;gap:70px}.title{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px;padding-left:28px}.title p{margin:0;font-size:10px;font-weight:900;letter-spacing:.18em}.title h2{margin:3px 0 0;font-size:20px}.title>span{font-size:28px}#shuffle{background:none;font-size:12px;font-weight:800}.board-viewport{position:relative}.board{display:grid;grid-template-columns:28px repeat(10,1fr);grid-template-rows:28px repeat(10,1fr);aspect-ratio:1}.board>b{display:grid;place-items:center;font-size:10px}.cell{border:1px solid transparent;font-size:23px;padding:0}.ready{width:calc(100% - 28px);margin:18px 0 0 28px}.hint{text-align:center;font-size:12px;margin-left:28px}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);padding:12px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:10}#toast.show{opacity:1;transform:translate(-50%,0)}.board.editable{touch-action:none;user-select:none}.board.editable .cell.ship{cursor:grab}.board.editable.dragging .cell.ship,.board.editable.dragging{cursor:grabbing}.fleet-help{text-align:center;font-size:12px;margin:10px 0 -8px 28px}.ready:disabled{cursor:not-allowed;opacity:.48}#leave-room{display:flex;align-items:center;gap:5px;margin-left:4px;padding:6px 9px!important;border-radius:8px;font-size:11px;letter-spacing:.02em;transition:.15s}#leave-room em{font-style:normal}.leave-modal[hidden]{display:none}.result-modal[hidden]{display:none}.leave-modal,.result-modal{position:fixed;inset:0;display:grid;place-items:center;padding:20px}.leave-modal{z-index:20}.result-modal{z-index:22}.leave-dialog{width:min(430px,100%);padding:24px;border-radius:18px}.leave-dialog h2{margin:0 0 10px;font-size:23px}.leave-dialog p{margin:0;line-height:1.5}.leave-dialog>div{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.leave-dialog button{min-height:44px;padding:0 15px;border-radius:10px;font-weight:800}.leave-dialog button:disabled{cursor:wait;opacity:.65}#toast.dismissible{display:flex;align-items:center;gap:14px;max-width:min(520px,calc(100vw - 28px));pointer-events:auto}#toast.dismissible button{flex:0 0 auto;background:none;font-size:20px;padding:0}.result-dialog{width:min(460px,100%);padding:28px 24px;border-radius:20px;text-align:center}.result-icon{font-size:72px;line-height:1;margin-bottom:12px}.result-dialog h2{margin:0 0 10px;font-size:30px}.result-dialog p{margin:0 auto;line-height:1.55;max-width:350px}.result-dialog>div:last-child{display:flex;justify-content:center;gap:10px;margin-top:24px}.result-dialog button{min-height:46px;padding:0 18px;border-radius:11px;font-weight:900}.result-dialog .primary{height:46px}.turn-banner{width:min(1080px,calc(100% - 48px));min-height:72px;margin:22px auto 0;padding:14px 22px;border-radius:16px;display:flex;align-items:center;justify-content:center;text-align:center}.turn-banner b{font-size:clamp(18px,2.3vw,25px);line-height:1.25}.cell.target{cursor:crosshair}.turn-attention,.field-pulse{animation:turn-pulse .65s ease-out 1}@keyframes turn-pulse{0%{transform:scale(.985);filter:brightness(1)}45%{transform:scale(1.012);filter:brightness(1.08)}100%{transform:scale(1);filter:brightness(1)}}
@media(max-width:760px){.battle{grid-template-columns:1fr;gap:48px;padding:28px 14px;max-width:520px}.game header .brand span:last-child{display:none}.cell{font-size:18px}#leave-room em{display:none}#leave-room{padding:7px 9px!important}.room{gap:6px}.leave-dialog>div{flex-direction:column-reverse}.leave-dialog button{width:100%}.result-icon{font-size:62px}.result-dialog>div:last-child{flex-direction:column}.result-dialog button{width:100%}.turn-banner{position:sticky;top:env(safe-area-inset-top,0px);z-index:8;width:calc(100% - 20px);min-height:64px;margin:10px auto 0;padding:10px 12px;border-radius:13px}.turn-banner b{font-size:clamp(16px,4.6vw,20px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.game{overflow-x:hidden}}
@media(prefers-reduced-motion:reduce){.turn-attention,.field-pulse{animation:none}}