body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
.darktheme #Html1
{
   filter: invert(100%);
}
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Rajdhani:wght@400;600;700&display=swap');
:root{
  --bg:#0b0f0e;--panel:#111815;--border:#1e3a2a;
  --green:#00ff88;--gdim:#005533;
  --red:#ff4444;--rdim:#550000;
  --blue:#0088ff;--yellow:#ffcc00;
  --text:#7ab89a;--bright:#c8eed8;
  --cell-bg:#0d1a14;--cell-line:#224433;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Rajdhani',sans-serif;background:transparent;}

/* ROOT WRAPPER — guarantees black bg always */
#root{min-height:100vh;width:100%;background:#0b0f0e;color:var(--bright);display:flex;flex-direction:column;}

/* HEADER */
.hdr{background:#0d1612;border-bottom:2px solid var(--gdim);padding:10px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.logo{font-family:'VT323',monospace;font-size:30px;color:var(--green);letter-spacing:4px;text-shadow:0 0 14px rgba(0,255,136,.5);}
.logo em{color:var(--text);font-style:normal;font-size:20px;letter-spacing:2px;}
#connBadge{font-family:'VT323',monospace;font-size:16px;letter-spacing:2px;padding:3px 12px;border:1px solid var(--gdim);border-radius:2px;color:var(--text);}
#connBadge.on{color:var(--green);border-color:var(--green);text-shadow:0 0 6px var(--green);}

/* SCREENS */
.screen{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;background:#0b0f0e;}
.screen.active{display:flex;}

/* LOBBY */
.lbox{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:32px 36px;max-width:420px;width:100%;text-align:center;}
.lbox h2{font-family:'VT323',monospace;font-size:28px;color:var(--green);letter-spacing:3px;margin-bottom:6px;}
.lbox p{font-size:13px;color:var(--text);margin-bottom:28px;letter-spacing:.5px;}
hr.div{border:none;border-top:1px solid var(--border);margin:22px 0;}
.lbl{font-size:11px;letter-spacing:2px;color:var(--text);opacity:.6;text-transform:uppercase;margin-bottom:6px;text-align:left;}
.code-box{background:#060e09;border:1px solid var(--gdim);border-radius:3px;padding:12px;margin-bottom:12px;font-family:'VT323',monospace;font-size:38px;letter-spacing:8px;color:var(--green);text-shadow:0 0 10px rgba(0,255,136,.4);text-align:center;}
.inp{width:100%;background:#060e09;border:1px solid var(--border);border-radius:3px;padding:9px 12px;color:var(--bright);font-family:'VT323',monospace;font-size:24px;letter-spacing:3px;text-align:center;outline:none;margin-bottom:8px;text-transform:uppercase;}
.inp:focus{border-color:var(--gdim);}

/* BUTTONS */
.btn{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase;padding:10px 20px;border-radius:3px;border:2px solid;cursor:pointer;transition:all .13s;width:100%;}
.btn-g{background:rgba(0,255,136,.07);border-color:var(--gdim);color:var(--green);}
.btn-g:hover:not(:disabled){background:rgba(0,255,136,.16);border-color:var(--green);box-shadow:0 0 14px rgba(0,255,136,.2);}
.btn-r{background:rgba(255,68,68,.07);border-color:var(--rdim);color:var(--red);}
.btn-r:hover:not(:disabled){background:rgba(255,68,68,.16);border-color:var(--red);}
.btn-b{background:rgba(0,136,255,.07);border-color:#004488;color:var(--blue);}
.btn-b:hover:not(:disabled){background:rgba(0,136,255,.16);border-color:var(--blue);}
.btn-y{background:rgba(255,204,0,.07);border-color:#665500;color:var(--yellow);}
.btn-y:hover:not(:disabled){background:rgba(255,204,0,.16);border-color:var(--yellow);}
.btn-sm{width:auto;padding:8px 16px;font-size:13px;}
.btn:disabled{opacity:.3;cursor:not-allowed;}

.waitrow{background:rgba(0,255,136,.04);border:1px dashed var(--gdim);border-radius:3px;padding:14px;font-family:'VT323',monospace;font-size:19px;letter-spacing:2px;color:var(--text);text-align:center;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.blink{animation:blink 1.2s ease-in-out infinite;}
.err{color:var(--red);font-size:12px;margin-top:10px;letter-spacing:1px;text-align:center;}

/* ═══ GRID ═══ */
.grid-wrap{display:inline-flex;flex-direction:column;}
.col-hdrs{display:flex;padding-left:28px;gap:0;margin-bottom:0;}
.col-hdrs span{width:36px;text-align:center;font-family:'VT323',monospace;font-size:15px;color:var(--green);opacity:.7;}
.grow{display:flex;align-items:center;gap:0;}
.rlabel{width:26px;font-family:'VT323',monospace;font-size:15px;color:var(--green);opacity:.7;text-align:right;padding-right:4px;flex-shrink:0;}

/* Cells — visible grid lines */
.cell{
  width:36px;height:36px;
  background:var(--cell-bg);
  border-right:1px solid var(--cell-line);
  border-bottom:1px solid var(--cell-line);
  cursor:default;position:relative;flex-shrink:0;
  transition:background .08s,border-color .08s;
}
/* Left and top borders only on edge cells — use row/wrap borders instead */
.grow:first-of-type .cell{border-top:1px solid var(--cell-line);}
.cell:first-of-type{border-left:1px solid var(--cell-line);}

/* Ship */
.cell.ship{background:#1b4d2e;border-color:#267a42 !important;}

/* Target hover */
.cell.target{cursor:crosshair;}
.cell.target:hover{background:rgba(255,68,68,.18);border-color:rgba(255,68,68,.7) !important;}

/* Placement hover */
.cell.hov-ok{background:rgba(0,255,136,.18);border-color:rgba(0,255,136,.7) !important;}
.cell.hov-bad{background:rgba(255,68,68,.18);border-color:rgba(255,68,68,.7) !important;}

/* Miss — blue dot */
.cell.miss{background:#081825;}
.cell.miss::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#1a5a8a;box-shadow:0 0 4px #1a5a8a;}

/* Hit — red X */
.cell.hit{background:#3a0000;}
.cell.hit::before,.cell.hit::after{content:'';position:absolute;top:50%;left:50%;width:60%;height:2px;background:var(--red);border-radius:1px;box-shadow:0 0 4px var(--red);}
.cell.hit::before{transform:translate(-50%,-50%) rotate(45deg);}
.cell.hit::after{transform:translate(-50%,-50%) rotate(-45deg);}

/* Sunk */
.cell.sunk{background:#1a0000;}
.cell.sunk::before,.cell.sunk::after{content:'';position:absolute;top:50%;left:50%;width:60%;height:2px;background:#cc0000;border-radius:1px;opacity:.6;}
.cell.sunk::before{transform:translate(-50%,-50%) rotate(45deg);}
.cell.sunk::after{transform:translate(-50%,-50%) rotate(-45deg);}

/* Safe (surrounding sunk ship) — same style as miss */
.cell.safe{background:#081825;}
.cell.safe::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#1a5a8a;box-shadow:0 0 4px #1a5a8a;}

@keyframes flashCell{0%{filter:brightness(3.5)}100%{filter:brightness(1)}}
.cell.flash{animation:flashCell .35s ease-out;}

/* AI thinking overlay on enemy grid */
.thinking-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  font-family:'VT323',monospace;font-size:18px;color:var(--yellow);
  letter-spacing:2px;pointer-events:none;z-index:5;border-radius:2px;
}

/* PLACEMENT */
#placeScreen{gap:16px;}
.place-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:720px;}
.ship-rack{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:12px 16px;width:100%;}
.ship-chip{background:#060e09;border:1px solid var(--border);border-radius:3px;padding:6px 11px;cursor:pointer;color:var(--text);font-family:'Rajdhani',sans-serif;font-weight:600;font-size:13px;letter-spacing:1px;transition:all .12s;display:flex;align-items:center;gap:7px;}
.ship-chip:hover:not(.placed){border-color:var(--gdim);color:var(--bright);}
.ship-chip.active{border-color:var(--green);color:var(--green);background:rgba(0,255,136,.07);}
.ship-chip.placed{border-color:#0d2a1a;color:var(--gdim);cursor:default;opacity:.4;}
.sdots{display:flex;gap:2px;}
.sdot{width:9px;height:9px;background:currentColor;border-radius:1px;}

.ctrl-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.glabel{font-family:'VT323',monospace;font-size:20px;letter-spacing:3px;text-transform:uppercase;}
.glabel.my{color:var(--green);}.glabel.en{color:var(--red);}

/* STATUS */
.status{background:var(--panel);border:1px solid var(--border);border-radius:3px;padding:9px 22px;font-family:'VT323',monospace;font-size:21px;letter-spacing:2px;color:var(--bright);text-align:center;min-width:260px;}
.status.my{color:var(--green);border-color:var(--gdim);}
.status.en{color:var(--red);border-color:var(--rdim);}
.status.hit{color:var(--yellow);border-color:#665500;}
.status.warn{color:var(--yellow);border-color:#665500;}

/* BATTLE */
#battleScreen{padding:14px 16px;}
.battle-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:920px;}
.grids-row{display:flex;gap:36px;flex-wrap:wrap;justify-content:center;}
.grid-sec{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;}

/* FLEET BARS */
.fleet-bars{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;width:100%;}
.fbar{background:var(--panel);border:1px solid var(--border);border-radius:3px;padding:10px 14px;flex:1;min-width:190px;max-width:320px;}
.fbar-title{font-family:'VT323',monospace;font-size:17px;letter-spacing:2px;margin-bottom:8px;opacity:.8;}
.fbar-title.my{color:var(--green);}.fbar-title.en{color:var(--red);}
.ship-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(26,48,40,.4);font-size:12px;letter-spacing:.5px;}
.ship-row:last-child{border-bottom:none;}
.ship-row.sunk{opacity:.3;text-decoration:line-through;}
.pips{display:flex;gap:2px;}
.pip{width:9px;height:9px;border-radius:1px;background:#1b4d2e;border:1px solid #267a42;}
.pip.gone{background:var(--rdim);border-color:var(--red);}

/* OVERLAY */
.overlay{position:fixed;inset:0;background:rgba(5,10,8,.93);display:none;align-items:center;justify-content:center;z-index:999;}
.overlay.show{display:flex;}
.ocard{background:var(--panel);border:2px solid var(--gdim);border-radius:6px;padding:44px;text-align:center;max-width:340px;width:90%;}
.ocard.def{border-color:var(--rdim);}
.otitle{font-family:'VT323',monospace;font-size:52px;letter-spacing:5px;color:var(--green);text-shadow:0 0 18px rgba(0,255,136,.45);line-height:1;margin-bottom:10px;}
.otitle.l{color:var(--red);text-shadow:0 0 18px rgba(255,68,68,.45);}
.obody{font-size:14px;color:var(--text);margin-bottom:24px;line-height:1.6;}
.hidden{display:none!important;}