*{box-sizing:border-box}:root{--cell-size-sm:1.8rem;--cell-size-md:2.1rem;--cell-size:var(--cell-size-sm);--font-size-xs:.8rem;--font-size-sm:1.2rem;--font-size-md:1.6rem;--font-size-lg:2rem;--font-size-xl:2.4rem;--grn-border:1px solid #0f6;--blue-border:2px solid #00bfff;--white-border:1px solid #e8f1f2;--red-border:2px solid #e60039;--border-rad-sm:.75rem;--border-rad-md:1rem;--border-rad-lg:1.25rem;--space0:.25rem;--space1:.5rem;--space2:1rem;--space3:1.5rem;--space4:2rem;--space5:2.5rem;--space6:3rem;--grn-text:#0f6;--blue-text:#00bfff;--white-text:#e8f1f2;--red-text:#e60039;--blk-bground:#000;--dark-grn-bground:#002814e6;--dark-blue-bground:#001428e6}@keyframes pulseNeon{0%{box-shadow:0 0 6px #00ff6659,0 0 12px #00ff6640}50%{box-shadow:0 0 14px #00ff66e6,0 0 28px #0f69,0 0 45px #00ff6659}to{box-shadow:0 0 6px #00ff6659,0 0 12px #00ff6640}}input,button,.placement-header,.ship-info,.place-ship-form label,.level-msg,.battleship-link{font-family:inherit}body{background-color:var(--blk-bground);min-height:100svh;margin:0;font-family:Orbitron,sans-serif}body:before{content:"";z-index:-1;background-color:var(--blk-bground);background-image:url(/images/battleship-background.jpeg);background-position:50%;background-repeat:no-repeat;background-size:cover;position:fixed;inset:0}.start-screen-container{justify-content:center;align-items:center;gap:var(--space2);flex-direction:column;min-height:100svh;display:flex}@media (width>=74rem),(orientation:landscape){.start-screen-container{align-items:center;column-gap:var(--space3);row-gap:var(--space2);padding:var(--space1);grid-template-rows:auto auto auto;grid-template-columns:auto auto;display:grid}.player-input{grid-area:1/1}.difficulty-options{grid-area:2/1}.battleship-link{grid-area:3/1}.start-game-controls{grid-area:1/2/span 3}}@media (orientation:landscape){.start-screen-container{min-height:100dvh}}.difficulty-options{gap:var(--space1);flex-direction:column;align-items:center;width:clamp(6rem,10vw,10rem);display:flex}.difficulty-options>button{box-sizing:border-box;white-space:normal;width:100%}.difficulty-options>label{text-align:center;box-sizing:border-box;width:100%}.place-ship-container{gap:var(--space1);width:100%;margin-left:var(--space1);flex-direction:column;display:flex}.ship-icons{gap:clamp(.1rem, 1vw, var(--space3));width:100%;margin-top:var(--space2);display:flex}.place-ship-form{gap:var(--space4);margin:var(--space3);display:flex}.ship-option{gap:var(--space1);flex-direction:column;display:flex}.placement-visuals{gap:var(--space0);display:flex}.attack-layout{box-sizing:border-box;grid-template-columns:minmax(6.25rem,1fr) minmax(0,3fr);grid-template-areas:"message computer""message player";width:100%;min-width:0;display:grid}.computer-side,.player-side{flex-direction:column;align-items:flex-start;display:flex}.game-messaging{gap:var(--space2);padding:var(--space1);margin:var(--space1);background-color:var(--dark-blue-bground);border:var(--blue-border);border-radius:var(--border-rad-lg);flex-direction:column;grid-area:message;max-height:20rem;display:flex;box-shadow:0 0 12px #00ff6638,inset 0 0 12px #00ff6614}.computer-side{gap:var(--space1);grid-area:computer}.player-side{gap:var(--space1);grid-area:player}@media (orientation:landscape) and (height<=600px){.attack-layout{gap:var(--space1);grid-template-columns:minmax(2.5rem,.4fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"message computer player"}}@media (width>=975px){.attack-layout{gap:var(--space2);grid-template-columns:14rem minmax(0,1fr) minmax(0,1fr);grid-template-areas:"message computer player"}}@media (width>=1200px){:root{--cell-size:var(--cell-size-md)}.attack-layout{gap:var(--space3);grid-template-columns:20rem minmax(0,1fr) minmax(0,1fr)}}.computer-ships-sunk,.player-ships-sunk{align-items:flex-start;gap:var(--space2);padding:var(--space0);background-color:var(--dark-blue-bground);border-radius:.25rem;display:flex}.computer-ships-sunk ul,.player-ships-sunk ul{gap:var(--space1);line-height:.9;font-size:clamp(var(--font-size-xs), 2vw, var(--font-size-sm));color:var(--blue-text);flex-direction:column;margin:0;padding:0;text-decoration:underline;list-style:none;display:flex}.start-game-btn,.new-game-btn{background:var(--blk-bground);border:var(--grn-border);border-radius:var(--border-rad-md);padding:var(--space2);color:var(--grn-text);cursor:pointer;transition:transform .15s,box-shadow .15s;animation:1.8s infinite pulseNeon}@media (width<=63.99rem){.start-game-btn{padding:var(--space2);font-size:var(--font-size-sm);border-radius:var(--border-rad-sm)}}@media (width>=53rem) and (width<=63.99rem){.start-game-btn{padding:var(--space2) var(--space3);font-size:var(--font-size-sm);border-radius:var(--border-rad-md)}}@media (width>=64rem){.start-game-btn{padding:var(--space2) var(--space3);font-size:var(--font-size-lg);border-radius:var(--border-rad-lg)}}.battleship-link{color:var(--grn-text);background-color:var(--dark-grn-bground);border:var(--grn-border);border-radius:var(--border-rad-md);padding:var(--space2);font-size:clamp(1rem, 2vw, var(--font-size-sm))}.start-game-btn:hover,.new-game-btn:hover{color:#0f6;border-color:#0f6;transform:scale(1.05);box-shadow:0 0 10px #00ff66b3,0 0 25px #0f66,0 0 40px #0f63}.placement-header{color:var(--grn-text);background-color:var(--dark-grn-bground);font-size:clamp(var(--font-size-sm), 5vw, var(--font-size-xl));text-align:center;width:fit-content;padding:var(--space1);margin:var(--space1) auto 0;border-radius:var(--border-rad-lg);font-weight:600;box-shadow:0 0 12px #00ff6638,inset 0 0 12px #00ff6614}.placement-help{color:var(--grn-text);background-color:var(--dark-grn-bground);font-size:clamp(var(--font-size-xs), 2vw, var(--font-size-sm));box-sizing:border-box;width:min(90vw,45rem);padding:var(--space1);border-radius:var(--border-rad-lg);margin-top:.2rem;font-weight:200;line-height:2;box-shadow:0 0 12px #00ff6638,inset 0 0 12px #00ff6614}.ship-btn{background:var(--blk-bground);border:var(--white-border);color:var(--white-text);border-radius:var(--border-rad-sm);cursor:pointer;line-height:2.5;font-size:clamp(.8rem, 2vw, var(--font-size-sm));padding:.35rem .6rem;transition:color .15s,background-color .15s,border-color .15s,box-shadow .15s,transform .15s}.ship-info{color:var(--white-text);background:var(--dark-grn-bground);font-size:clamp(.75rem, 2vw, var(--font-size-sm));border:var(--white-border);border-radius:var(--border-rad-sm);padding:.2rem;font-weight:300;line-height:2.5}@media (orientation:landscape) and (width<=50rem){.placement-header{font-size:var(--font-size-xs);padding:var(--space0) var(--space1);margin-top:var(--space0)}.placement-help{width:fit-content;font-size:var(--font-size-xs);padding:var(--space0);margin-top:0;line-height:1.2}.ship-info{padding:var(--space0);line-height:1.2}.ship-btn{line-height:1.2}.place-ship-form{gap:var(--space1);margin:var(--space1)}}.ui-information-display{color:var(--grn-text);width:clamp(6rem,20vw,13rem);min-height:16rem;padding:var(--space3);margin:var(--space2);background-color:var(--dark-blue-bground);border:var(--blue-border);border-radius:var(--border-rad-lg);flex-direction:column;justify-content:flex-start;align-items:center;display:flex;box-shadow:0 0 12px #00ff6638,inset 0 0 12px #00ff6614}.ship-error-msg{color:#e60039;text-align:center;min-height:24px;margin-bottom:8px;font-size:1.05rem;font-weight:700}.ship-error-msg.placement-complete{color:var(--grn-text)}.ui-information-display ul{text-align:center;margin:0;padding:0;list-style:none}.ui-information-display li{color:var(--blue-text);font-size:clamp(var(--font-size-xs), 2vw, var(--font-size-sm));line-height:1.4;text-decoration:none}.ships-placed{color:var(--blue-text);font-size:clamp(var(--font-size-xs), 2vw, var(--font-size-sm));text-align:center;margin:0 0 10px;font-weight:700;text-decoration:underline}.grid-container{justify-content:center;align-items:center;display:flex}.grid{grid-area:2/2/span 10/span 10;grid-template-columns:repeat(10, var(--cell-size));grid-template-rows:repeat(10, var(--cell-size));display:grid}.computer-grid .cell:hover{outline-offset:-2px;cursor:pointer;outline:5px solid #0f6;transform:scale(.95)}.board,.computer-board,.player-board{grid-template-columns:40px repeat(10, var(--cell-size));grid-template-rows:40px repeat(10, var(--cell-size));display:grid}.board .top-labels,.computer-board .computer-top-labels,.player-board .player-top-labels{margin-top:var(--space1);grid-area:1/2/auto/span 10}.board .left-labels,.computer-board .computer-left-labels,.player-board .player-left-labels{margin-left:var(--space1);grid-area:2/1/span 10}.board .grid,.computer-board .computer-grid,.player-board .player-grid{grid-area:2/2/span 10/span 10}.board .corner{grid-area:1/1}.top-labels,.computer-top-labels,.player-top-labels{grid-template-columns:repeat(10, var(--cell-size));display:grid}.left-labels,.computer-left-labels,.player-left-labels{grid-template-rows:repeat(10, var(--cell-size));display:grid}.top-labels div,.computer-top-labels div,.left-labels div,.computer-left-labels div,.player-top-labels div,.player-left-labels div{padding-right:var(--space1);justify-content:center;align-items:center;display:flex;transform:translateY(1px)}.top-labels,.computer-top-labels,.computer-left-labels,.player-top-labels,.player-left-labels,.left-labels{background-color:var(--dark-grn-bground);border:var(--grn-border);color:var(--grn-text)}.corner{grid-area:1/1}.cell{width:var(--cell-size);height:var(--cell-size);background-color:var(--dark-grn-bground);border:var(--grn-border);cursor:pointer}.ship-btn:hover:not(:disabled),.ship-btn.selected{color:var(--grn-text);background-color:var(--dark-grn-bground);border:var(--grn-border);transform:translateY(-2px)scale(1.03);box-shadow:0 0 6px #00ff66b3,0 0 18px #00ff6680,inset 0 0 10px #00ff6626}.ship-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none}.ship-info p{margin:0}.place-ship-btn{background:var(--blk-bground);border:var(--red-border);border-radius:var(--border-rad-md);padding:var(--space0);color:var(--red-text);cursor:pointer}.cell.selected{background:linear-gradient(135deg,#08306b 0%,#2171b5 30%,#4292c6 60%,#1c7ed6 100%);box-shadow:inset 0 0 10px #ffffff1f,inset 0 0 14px #00003259}.ship{color:#fff;cursor:pointer;background-color:#c68a2d;justify-content:center;align-items:center;font-size:.9rem;font-weight:600;display:flex}.start-attack-btn{background:var(--blk-bground);border:var(--red-border);color:var(--red-text);padding:clamp(var(--space0), var(--space1), var(--space2));border-radius:var(--border-rad-md);cursor:pointer;font-size:clamp(var(--font-size-sm), 3vw, var(--font-size-md));transition:color .15s,background-color .15s,border-color .15s,box-shadow .15s,transform .15s}.start-attack-btn:hover,.new-game-btn:hover{transform:translateY(-2px)scale(1.03);box-shadow:0 0 6px #00ff66b3,0 0 18px #00ff6680,inset 0 0 10px #00ff6626}.game-message{color:var(--blue-text);font-size:clamp(var(--font-size-xs), 2vw, var(--font-size-sm));text-align:center;font-weight:500}.level-msg{color:var(--grn-text);font-weight:400;font-size:clamp(var(--font-size-xs), 2vw, var(--font-size-sm));text-align:center;margin-top:auto}.computer-side h3,.player-side h3{color:var(--blue-text);font-size:clamp(var(--font-size-xs), 2vw, var(--font-size-sm));margin:0;font-weight:500}.good-news{color:var(--grn-text);font-size:clamp(.75rem, 2vw, var(--font-size-sm));text-align:center}.bad-news{color:var(--red-text);font-size:clamp(.75rem, 2vw, var(--font-size-sm));text-align:center}.miss{background:linear-gradient(135deg,#08306b 0%,#2171b5 30%,#4292c6 60%,#1c7ed6 100%);box-shadow:inset 0 0 10px #ffffff1f,inset 0 0 14px #00003259}.hit{background:linear-gradient(135deg,#32130a 0%,#6f2d14 20%,#a94f1c 45%,#d66a24 70%,#f3b15c 100%);box-shadow:inset 0 0 10px #ffbe6e2e,inset 0 0 14px #46140073}.sunk{background-color:#ff3d00}.difficulty-options label{background-color:var(--blk-bground);color:var(--grn-text);padding:var(--space2) var(--space3);margin-bottom:var(--space1);border-radius:var(--space2);cursor:pointer;width:min(50dvw,20rem);font-size:clamp(1rem, 2vw, var(--font-size-sm));display:block;position:relative}.difficulty-options input[type=radio]{transform:scale(1.35)}.difficulty-options label:after{content:attr(data-description);opacity:0;transition:opacity .2s .3s}.difficulty-options label:hover:after{opacity:1}#player-name{font-size:var(--font-size-md);padding:var(--space2);margin-bottom:var(--space2);border-radius:var(--border-rad-md);background-color:var(--blk-bground);border:var(--grn-border);width:min(50dvw,25rem);color:var(--grn-text);outline:none}#player-name:-webkit-autofill{-webkit-text-fill-color:var(--grn-text);-webkit-box-shadow:0 0 0 1000px var(--blk-bground) inset}#player-name::placeholder,.place-ship-form label{color:var(--grn-text)}.place-ship-form input[type=radio]{transform:scale(1.35)}