:root{--background-color: #f0f2f5;--warning-color: #d5352c;--accent-color-blue: #00a4a9;--accent-color-yellow: #c8a700;--text-color: #23242f;--board-border: #333;--cell-size: min(40px, 8vh)}.dark-mode{--background-color: #23242f;--text-color: #f0f2f5}*{box-sizing:border-box}body{margin:0;padding:0;height:100vh;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}main{display:flex;flex-direction:column;height:100vh;width:100vw;background-color:var(--background-color)}#ghost-container{position:absolute;pointer-events:none}#ghost-container div{width:var(--cell-size);height:var(--cell-size);border:1px solid rgba(0,0,0,.05);display:flex;justify-content:center;align-items:center;transition:all 50ms ease;background-color:color-mix(in srgb, var(--accent-color-blue), transparent 70%);border:1px dashed var(--accent-color-blue)}.settings-bar{position:fixed;right:1.5rem;top:1.5rem;display:flex;align-items:center;padding:.6rem 1.2rem;gap:1.2rem;border-radius:30px;background-color:color-mix(in srgb, var(--text-color), transparent 85%);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb, var(--text-color), transparent 90%);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06),inset 0 1px 0 0 hsla(0,0%,100%,.1);transition:all .3s ease}.settings-bar:hover{background-color:color-mix(in srgb, var(--text-color), transparent 80%);transform:translateY(-1px);box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}.settings-bar button{width:2.2rem;height:2.2rem;border-radius:50%;border:none;background-color:color-mix(in srgb, var(--text-color), transparent 90%);padding:0;display:grid;place-items:center;cursor:pointer;transition:all .2s ease}.settings-bar button:hover{background-color:color-mix(in srgb, var(--text-color), transparent 70%);transform:scale(1.1)}.settings-bar button svg{fill:var(--text-color);width:1.2rem;height:1.2rem;transition:fill .3s ease}.settings-bar #theme-toggle svg:first-child{display:block}.settings-bar #theme-toggle svg:last-child{display:none}.settings-bar #sound-toggle svg:first-child{display:block}.settings-bar #sound-toggle svg:last-child{display:none}.dark-mode #theme-toggle svg:first-child{display:none}.dark-mode #theme-toggle svg:last-child{display:block}.unmuted #sound-toggle svg:first-child{display:none}.unmuted #sound-toggle svg:last-child{display:block}.logo{position:fixed;left:1rem;top:1rem;color:var(--text-color);margin:0;padding:0;display:flex;align-items:flex-end;gap:.5rem}.logo h1{margin:0;padding:0}.logo svg{fill:var(--accent-color-yellow);height:150%}.boards-area{flex:0 0 90%;display:flex;justify-content:center;align-items:center;gap:4rem;padding:2rem}.info-area{flex:0 0 10%;background-color:var(--background-color);color:var(--text-color);display:flex;justify-content:center;align-items:center;box-shadow:0 -4px 10px rgba(0,0,0,.1)}.info-area button{background-color:var(--accent-color-blue);font:inherit;border:1px solid rgba(0,0,0,.05);padding:.25rem .5rem;border-radius:4px;color:#f0f2f5}.board-container{background:hsl(from var(--text-color) h s 40%);padding:10px;border-radius:8px;box-shadow:0 12px 24px rgba(0,0,0,.15)}.board-container:has(table.inactive){pointer-events:none;position:relative}.board-container:has(table.inactive)::after{pointer-events:none;position:absolute;top:0;left:0;content:"";width:100%;height:100%;background-color:rgba(134,134,134,.5);border-radius:inherit}table{border-collapse:collapse;border:3px solid var(--board-border);table-layout:fixed}table#table-1 td div.ship{background-color:var(--accent-color-blue);cursor:grab}table#table-1 td div.ship:active{cursor:grabbing}table#table-1 td div.ship.dragged{background-color:hsl(from var(--accent-color-blue) h 30% 70%);cursor:grabbing}table#table-1 td div.ghost-hovered{background-color:color-mix(in srgb, var(--accent-color-blue), #90ee90 60%);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent-color-blue), #28a745 30%)}table#table-2:not(.inactive) td div:hover::before{content:"";position:absolute;inset:-2px;border-left:2px solid #000;border-right:2px solid #000;background:linear-gradient(#000, #000) no-repeat 0 0/8px 2px,linear-gradient(#000, #000) no-repeat 0 100%/8px 2px,linear-gradient(#000, #000) no-repeat 100% 0/8px 2px,linear-gradient(#000, #000) no-repeat 100% 100%/8px 2px;pointer-events:none;animation:target-fade .15s ease-out;z-index:10}@keyframes target-fade{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}table#table-1 td div,table#table-2 td div{position:relative}table#table-1 td div.ship.hit,table#table-2 td div.ship.hit{background-color:var(--warning-color)}table#table-1 td div.ship.hit::after,table#table-2 td div.ship.hit::after{content:""}table#table-1 td div.hit::after,table#table-2 td div.hit::after{content:"⋅";font-size:4rem;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}.board-cell{width:var(--cell-size);height:var(--cell-size);border:1px solid rgba(0,0,0,.05);display:flex;justify-content:center;align-items:center;transition:all 50ms ease}.board-cell{background-color:#e9ecef}