:root{--color-white: #ffffff;--color-text: #213547;--color-text-basic: #213547;--color-text-subtle: lightgray;--color-text-muted: #666;--color-text-error: #ff3e00;--color-text-success: #4ade80;--color-accent: #2196f3;--color-accent-hover: #1976d2;--color-accent-active: #0059ffff;--color-bg-primary: #f2f2f2;--color-bg-secondary: #e8e8e8;--color-bg-tertiary: #d0d0d0;--color-border: #c0c0c0;--color-border-light: #ccc;--color-grid-bg: #ddd;--color-boat: var(--color-accent);--color-boat-sunk: #666;--color-hit: var(--color-text-error);--color-hit-explosion: #ff6600;--color-hit-secondary: #ff3300;--color-hit-tertiary: #cc0000;--color-hit-quaternary: #990000;--color-miss: var(--color-white);--spacing-xs: .5rem;--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--border-radius-sm: 2px;--border-radius-md: 4px;--border-radius-lg: 8px;--border-radius-xl: 24px;--grid-gap-mobile: 2px;--grid-gap-desktop: 1px;--grid-padding-mobile: 2px;--grid-padding-desktop: 1px;--grid-max-width: 360px;--grid-cell-min-height: 32px;--touch-target-min: 44px;--transition-fast: .1s;--transition-normal: .2s;--transition-slow: .3s;--animation-shooting: .3s;--animation-explosion: .8s;--animation-splash: .6s;--animation-sinking: 1.2s;--animation-pulse: 1s;--z-index-floating: 1000;--breakpoint-sm: 480px;--breakpoint-md: 640px;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--color-text-basic);background-color:var(--color-white);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100dvh;justify-content:center;text-align:center;padding:0;overflow-x:hidden}@media(max-width:480px){body{padding:0;place-items:stretch}}#app{width:100%;max-width:480px;background:var(--color-bg-primary);border-radius:var(--border-radius-xl);box-shadow:0 10px 40px var(--color-text-subtle);min-height:50vh;display:flex;flex-direction:column;margin:var(--spacing-md)}@media(max-width:480px){#app{max-width:100%;margin:0;border-radius:0;min-height:100dvh;box-shadow:none}}#app>header{padding:var(--spacing-md) var(--spacing-xl) 0;margin-bottom:var(--spacing-md)}@media(max-width:480px){#app>header{padding:var(--spacing-md) var(--spacing-md) 0;margin-bottom:var(--spacing-sm)}}#app>main{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:0 var(--spacing-xl);overflow-y:auto;overflow-x:hidden}@media(max-width:480px){#app>main{padding:0 var(--spacing-md)}}#app>footer{margin-top:var(--spacing-md);padding:0 var(--spacing-md) var(--spacing-md)}@media(max-width:480px){#app>footer{padding:0 var(--spacing-md) var(--spacing-md)}}button{width:100%;min-height:var(--touch-target-min);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-accent-active);border-radius:var(--border-radius-xl);background:var(--color-accent);color:#fff;font-size:1rem;font-weight:500;cursor:pointer;transition:background var(--transition-normal);touch-action:manipulation}@media(max-width:480px){button{font-size:1.05rem}}@media(hover:hover)and (pointer:fine){button:hover:not(:disabled){background:var(--color-accent-active)}}button:active:not(:disabled){background:var(--color-accent-active);transform:scale(.98)}button:disabled{opacity:.5;cursor:not-allowed}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}button.alternative{background:none;border:none;color:var(--color-text-subtle);font-style:italic;transition:all var(--transition-normal) ease;margin-top:var(--spacing-sm);min-height:var(--touch-target-min);font-size:.95rem}@media(min-width:640px){button.alternative{margin-top:var(--spacing-xs);min-height:auto;font-size:inherit}}@media(hover:hover)and (pointer:fine){button.alternative:hover:not(:disabled){text-decoration:underline}}button.alternative:disabled{opacity:.5;cursor:not-allowed}button.action-btn{display:flex;align-items:center;justify-content:center;padding:0 1.25rem;font-size:1.1rem}@media(min-width:640px){button.action-btn{height:32px;min-height:32px;padding:0 1rem;font-size:1rem}}@media(hover:hover)and (pointer:fine){button.action-btn.delete:hover:not(:disabled){background:var(--color-text-error);border-color:var(--color-text-error)}}input{padding:var(--spacing-sm);min-height:var(--touch-target-min);border:1px solid var(--color-white);border-radius:var(--border-radius-md);background:var(--color-white);color:inherit;font-size:1rem;touch-action:manipulation}@media(max-width:480px){input{font-size:16px}}input:focus,input:active{border:1px solid var(--color-accent-active);outline:none}input:disabled{opacity:.5;cursor:not-allowed}.grid{display:grid;grid-template-columns:repeat(9,1fr);gap:var(--grid-gap-mobile);background:var(--color-grid-bg);padding:var(--grid-padding-mobile);border-radius:var(--border-radius-md);width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}@media(min-width:640px){.grid{max-width:var(--grid-max-width);gap:var(--grid-gap-desktop);padding:var(--grid-padding-desktop);border-radius:var(--border-radius-sm)}}.cell{aspect-ratio:1;width:100%;background:var(--color-white);border:none;display:flex;align-items:center;justify-content:center;padding:0;min-height:var(--grid-cell-min-height)}@media(min-width:640px){.cell{min-height:auto}}.cell.boat{background:var(--color-boat)}.cell.sunk{background:var(--color-boat-sunk)}.cell.hit{background:var(--color-hit);position:relative}.cell.hit:after{content:"×";font-size:1.8rem;font-weight:700;color:#fff;line-height:1}@media(min-width:640px){.cell.hit:after{font-size:1.5rem}}.cell.miss{background:var(--color-miss);position:relative}.cell.miss:after{content:"•";font-size:1.8rem;color:var(--color-text-subtle);line-height:1}@media(min-width:640px){.cell.miss:after{font-size:1.5rem}}.cell.sunk:before{content:"☠";font-size:1.5rem;color:#fff;line-height:1}@media(min-width:640px){.cell.sunk:before{font-size:1.2rem}}.cell.animating-shooting{animation:shooting var(--animation-shooting) ease-out}.cell.animating-hit{animation:explosion var(--animation-explosion) ease-out}.cell.animating-miss{animation:splash var(--animation-splash) ease-out}.cell.animating-sunk{animation:sinking var(--animation-sinking) ease-out}@keyframes shooting{0%{transform:scale(1);box-shadow:0 0 #ff0000b3}50%{transform:scale(1.1);box-shadow:0 0 20px 10px #ff00004d}to{transform:scale(1);box-shadow:0 0 #f000}}@keyframes explosion{0%{transform:scale(1);background:var(--color-hit)}25%{transform:scale(1.3);background:var(--color-hit-explosion);box-shadow:0 0 30px 15px #ff6400cc}50%{transform:scale(1.2);background:var(--color-hit-secondary)}75%{transform:scale(1.1);background:var(--color-hit)}to{transform:scale(1);background:var(--color-hit)}}@keyframes splash{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-5px) scale(1.15);box-shadow:0 0 20px 10px #6496ff80}60%{transform:translateY(0) scale(1.05)}to{transform:translateY(0) scale(1)}}@keyframes sinking{0%{transform:scale(1) rotate(0);background:var(--color-hit)}20%{transform:scale(1.3) rotate(0);background:var(--color-hit-secondary);box-shadow:0 0 40px 20px #ff3200e6}40%{transform:scale(1.1) rotate(-5deg);background:var(--color-hit-tertiary)}60%{transform:scale(1.05) rotate(5deg);background:var(--color-hit-quaternary)}80%{transform:scale(.95) rotate(-3deg);background:var(--color-boat-sunk)}to{transform:scale(1) rotate(0);background:var(--color-boat-sunk)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes borderGrow{0%{border-radius:0}to{border-radius:var(--border-radius-xl)}}.loading,.error{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:var(--spacing-xl)}.loading p{color:var(--color-text-subtle);font-size:1.2rem}.error p{color:var(--color-text-error);font-size:1.2rem}.status-message{font-size:1.2rem;font-weight:600;margin:0;padding:0 var(--spacing-xs)}@media(min-width:640px){.status-message{font-size:1.1rem;font-weight:500;padding:0}}.status-message.your-turn{color:var(--color-text-success)}.status-message.opponent-turn{color:var(--color-accent)}.player{text-decoration:underline;text-decoration-color:var(--color-text-success)}form.svelte-jlz8ya{max-width:400px;margin:0 auto;padding:var(--spacing-md);border-radius:var(--border-radius-lg);width:100%}@media(min-width:640px){form.svelte-jlz8ya{padding:var(--spacing-xl)}}.form-group.svelte-jlz8ya{margin-bottom:1.25rem}@media(min-width:640px){.form-group.svelte-jlz8ya{margin-bottom:var(--spacing-md)}}label.svelte-jlz8ya{display:block;margin-bottom:.6rem;font-weight:500;font-size:1rem}@media(min-width:640px){label.svelte-jlz8ya{margin-bottom:var(--spacing-xs);font-size:inherit}}button.svelte-jlz8ya{width:100%}.error.svelte-jlz8ya{color:var(--color-text-error);margin:.6rem 0 0;font-size:.95rem;min-height:0}@media(min-width:640px){.error.svelte-jlz8ya{margin:var(--spacing-xs) 0 0 0;font-size:.9rem}}.error.general.svelte-jlz8ya{margin-top:1.25rem}@media(min-width:640px){.error.general.svelte-jlz8ya{margin-top:var(--spacing-md)}}header.svelte-dula5{display:flex;justify-content:space-between;margin-bottom:var(--spacing-sm);gap:var(--spacing-xs)}@media(min-width:640px){header.svelte-dula5{margin-bottom:var(--spacing-xs)}}p.subtle.svelte-dula5{font-size:.85em;color:var(--color-text-subtle);margin:0;padding:0 var(--spacing-xs)}@media(min-width:640px){p.subtle.svelte-dula5{font-size:.7em;padding:0}}footer.svelte-dula5{margin-top:var(--spacing-md)}@media(min-width:640px){footer.svelte-dula5{margin-top:var(--spacing-xs)}}input[readonly].svelte-dula5{background:var(--color-bg-primary);border:1px solid var(--color-border-light);border-radius:var(--border-radius-lg);padding:.75em 1em;font-size:1em;outline:none;transition:border-color var(--transition-normal),box-shadow var(--transition-normal);caret-color:transparent;width:100%;text-align:center}@media(min-width:640px){input[readonly].svelte-dula5{border-radius:var(--border-radius-md);padding:.4em .7em;min-height:auto;text-align:left}}@media(hover:hover)and (pointer:fine){input[readonly].svelte-dula5:hover{border-color:var(--color-text-muted);box-shadow:0 0 0 2px var(--color-bg-secondary)}}input[readonly].svelte-dula5:focus{border-color:var(--color-text-muted);box-shadow:0 0 0 2px var(--color-bg-secondary);cursor:pointer}input[readonly].svelte-dula5:active{border-color:var(--color-accent);box-shadow:0 0 0 2px #2196f333}input.copied.svelte-dula5{color:var(--color-text-success);border-color:var(--color-text-success);background:var(--color-bg-secondary)}.grid.svelte-1rf8qk8{touch-action:none;-webkit-user-select:none;user-select:none}.cell.svelte-1rf8qk8{transition:background var(--transition-fast);cursor:pointer;touch-action:none}.cell.draggable.svelte-1rf8qk8{cursor:grab}.cell.draggable.svelte-1rf8qk8:active{cursor:grabbing}.cell.selected.svelte-1rf8qk8{animation:pulse var(--animation-pulse) ease-in-out infinite;background:var(--color-boat)!important;box-shadow:0 0 4px var(--color-boat)}.cell.preview.svelte-1rf8qk8{opacity:.5}.cell.valid-drop.svelte-1rf8qk8{background:var(--color-boat);opacity:.5}.cell.invalid-drop.svelte-1rf8qk8{background:var(--color-text-error);opacity:.7}header.svelte-15c41jh{display:flex;justify-content:space-between;margin-bottom:var(--spacing-xs)}header.svelte-15c41jh h3:where(.svelte-15c41jh){margin:0;font-size:1rem}.container.svelte-15c41jh{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%;align-items:center}@media(min-width:640px){.container.svelte-15c41jh{flex-direction:row;align-items:flex-start}}.controls-section.svelte-15c41jh{display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%;max-width:400px}@media(min-width:640px){.controls-section.svelte-15c41jh{min-width:140px;max-width:160px}}.grid-section.svelte-15c41jh{flex:1;display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%}.boat-stock.svelte-15c41jh{display:flex;flex-direction:column;gap:var(--spacing-xs)}.boat-stock.svelte-15c41jh h5:where(.svelte-15c41jh){margin:0 0 var(--spacing-xs) 0;font-size:.9rem;font-weight:600;text-align:center}@media(min-width:640px){.boat-stock.svelte-15c41jh h5:where(.svelte-15c41jh){font-size:.85rem;text-align:left}}.stock-item.svelte-15c41jh{display:flex;align-items:center;gap:var(--spacing-xs);padding:.6rem var(--spacing-sm);border:1px solid var(--color-accent);border-radius:var(--border-radius-lg);background:#fff;transition:opacity var(--transition-normal)}@media(min-width:640px){.stock-item.svelte-15c41jh{gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-xs);border-radius:var(--border-radius-md);min-height:auto}}.stock-item.depleted.svelte-15c41jh{opacity:.3;border-color:var(--color-border-light)}.boat-visual.svelte-15c41jh{display:flex;gap:1px;flex:1;-webkit-user-select:none;user-select:none;transition:all var(--transition-normal);touch-action:none}.boat-visual.draggable.svelte-15c41jh{cursor:grab}@media(hover:hover)and (pointer:fine){.boat-visual.draggable.svelte-15c41jh:hover{animation:pulse var(--animation-pulse) ease-in-out infinite}}.boat-visual.depleted.svelte-15c41jh{cursor:not-allowed}.boat-visual.draggable.svelte-15c41jh:active{cursor:grabbing}.boat-segment.svelte-15c41jh{width:20px;height:20px;background:var(--color-boat)}@media(min-width:640px){.boat-segment.svelte-15c41jh{width:16px;height:16px}}.stock-info.svelte-15c41jh{display:flex;flex-direction:column;align-items:flex-end}.boat-count.svelte-15c41jh{font-size:.75rem;opacity:.6;line-height:1}@media(min-width:640px){.boat-count.svelte-15c41jh{font-size:.65rem}}.selected-boat-actions.svelte-15c41jh{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin:var(--spacing-sm) 0}@media(min-width:640px){.selected-boat-actions.svelte-15c41jh{gap:var(--spacing-xs);margin:var(--spacing-xs) 0;min-height:32px}}.status-message.svelte-15c41jh{color:var(--color-text-muted, #666);font-style:italic}footer.svelte-15c41jh{margin-top:var(--spacing-md);text-align:center}.ready-button.svelte-15c41jh{padding:var(--spacing-sm) var(--spacing-md);font-size:1.05rem;font-weight:600;transition:all var(--transition-normal);min-height:52px}@media(min-width:640px){.ready-button.svelte-15c41jh{padding:var(--spacing-xs) var(--spacing-md);font-size:1rem}}.ready-button.svelte-15c41jh:disabled{opacity:.6;cursor:not-allowed}.floating-boat.svelte-15c41jh{position:fixed;display:flex;gap:1px;pointer-events:none;transform:translate(-50%,-50%);z-index:var(--z-index-floating);opacity:.8;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.floating-boat.horizontal.svelte-15c41jh{flex-direction:row}.floating-boat.vertical.svelte-15c41jh{flex-direction:column}.floating-boat-segment.svelte-15c41jh{width:24px;height:24px;background:var(--color-boat);border:1px solid rgba(0,0,0,.1)}@media(min-width:640px){.floating-boat-segment.svelte-15c41jh{width:20px;height:20px}}.cell.svelte-wh98vl{border-radius:0;transition:all var(--transition-fast);cursor:pointer;touch-action:manipulation}@media(hover:hover)and (pointer:fine){.cell.svelte-wh98vl:not(:disabled):hover{position:relative;background:var(--color-white);animation:borderGrow var(--transition-normal) ease-out forwards}.cell.svelte-wh98vl:not(:disabled):hover:before{content:"";position:absolute;inset:0;border:2px solid red;border-radius:0;animation:borderGrow var(--transition-normal) ease-out forwards}.cell.svelte-wh98vl:not(:disabled):hover:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;background:linear-gradient(to bottom,red 0%,red 48%,transparent 48%,transparent 52%,red 52%,red 100%),linear-gradient(to right,red 0%,red 48%,transparent 48%,transparent 52%,red 52%,red 100%),red;clip-path:polygon(48% 0,52% 0,52% 48%,100% 48%,100% 52%,52% 52%,52% 100%,48% 100%,48% 52%,0 52%,0 48%,48% 48%);animation:svelte-wh98vl-crosshairExpand .4s ease-out forwards}}.cell.svelte-wh98vl:not(:disabled):active{transform:scale(.95)}@keyframes svelte-wh98vl-crosshairExpand{0%{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%)}to{clip-path:polygon(48% 0,52% 0,52% 48%,100% 48%,100% 52%,52% 52%,52% 100%,48% 100%,48% 52%,0 52%,0 48%,48% 48%)}}.cell.svelte-wh98vl:disabled{cursor:default}.cell.svelte-vo3wwp{transition:background var(--transition-fast)}header.svelte-z0gfs4{display:flex;justify-content:space-between;margin-bottom:var(--spacing-sm);gap:var(--spacing-xs)}header.svelte-z0gfs4 h3:where(.svelte-z0gfs4){margin:0;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:640px){header.svelte-z0gfs4{margin-bottom:var(--spacing-xs)}header.svelte-z0gfs4 h3:where(.svelte-z0gfs4){font-size:1rem}}.turn-view.svelte-z0gfs4{display:flex;flex-direction:column;align-items:center;gap:1.25rem;width:100%}@media(min-width:640px){.turn-view.svelte-z0gfs4{gap:var(--spacing-md)}}.loading.svelte-z0gfs4{display:flex;justify-content:center;align-items:center;padding:var(--spacing-xl);color:var(--color-text-subtle)}.grid-container.svelte-z0gfs4{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);width:100%}@media(min-width:640px){.grid-container.svelte-z0gfs4{gap:var(--spacing-xs)}}footer.svelte-z0gfs4{margin-top:var(--spacing-md);text-align:center}.game-over.svelte-z0gfs4{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xl);padding:var(--spacing-lg) var(--spacing-md)}@media(min-width:640px){.game-over.svelte-z0gfs4{padding:var(--spacing-xl)}}.game-over.svelte-z0gfs4 h1:where(.svelte-z0gfs4){font-size:2.2rem;margin:0;text-align:center}@media(min-width:640px){.game-over.svelte-z0gfs4 h1:where(.svelte-z0gfs4){font-size:2.5rem}}.new-game-button.svelte-z0gfs4{padding:var(--spacing-md) var(--spacing-lg);font-size:1.1rem;font-weight:600;color:#fff;background-color:var(--color-accent);border:none;border-radius:var(--border-radius-lg);cursor:pointer;transition:all var(--transition-normal) ease;min-height:52px;width:100%;max-width:300px}@media(min-width:640px){.new-game-button.svelte-z0gfs4{padding:var(--spacing-md) var(--spacing-xl);font-size:1.2rem;min-height:auto;width:auto}}@media(hover:hover)and (pointer:fine){.new-game-button.svelte-z0gfs4:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}}.new-game-button.svelte-z0gfs4:active{transform:scale(.98)}.waiting-message.svelte-z0gfs4{font-size:1rem;color:var(--color-text-subtle);margin:0;text-align:center;padding:0 var(--spacing-md)}@media(min-width:640px){.waiting-message.svelte-z0gfs4{font-size:1.1rem;padding:0}}