:root{
  --ce: 32px;   /* enemy board cell */
  --le: 19px;   /* enemy board ruler */
  --cy: 20px;   /* our own board cell */
  --ly: 12px;
  --cp: 34px;   /* deployment board cell */
  --lp: 20px;

  --deep:#14395a;
  --deep2:#1d5076;
  --water:#266b96;
  --line:rgba(170,220,250,.30);
  --line2:rgba(180,225,252,.50);
  --gold:#f0bf5a;
  --gold-d:#a67c22;
  --fire:#ff7a3c;
  --blood:#e03d2a;
  --steel:#8fa5b5;
  --ink:#dceaf5;
  --dim:#b3cee0;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
body{
  background:var(--deep);
  color:var(--ink);
  font-family:"Segoe UI Semibold","Helvetica Neue",Arial,system-ui,sans-serif;
  font-size:14px;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}

#app{
  position:relative;
  width:100%;height:100dvh;height:100vh;
  display:flex;flex-direction:column;
  padding:max(6px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));
  overflow:hidden;
  overflow:clip;
}
@supports (height:100dvh){#app{height:100dvh}}

/* ---------- background: the sea ---------- */
.sea{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -20%, #3a86b4 0%, transparent 60%),
    radial-gradient(90% 60% at 10% 110%, #23628c 0%, transparent 60%),
    linear-gradient(#1b4670 0%, #14395a 60%, #102e4a 100%);
}
.sea::after{
  content:"";position:absolute;inset:-14%;
  background:
    repeating-linear-gradient(186deg, rgba(215,240,255,.075) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(174deg, rgba(215,240,255,.050) 0 1px, transparent 1px 23px);
  animation:drift 30s linear infinite;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(26px,46px,0)}}

/* ---------- the header ---------- */
#hdr{
  position:relative;z-index:2;flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:2px 2px 6px;
}
.brand{display:flex;flex-direction:column;line-height:1.05}
.brand-main{
  font-size:17px;letter-spacing:.16em;font-weight:800;
  color:var(--gold);
  text-shadow:0 0 14px rgba(240,191,90,.35);
}
.brand-sub{font-size:10px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;margin-top:3px}
/* the quit warning caption: the same line, but made visible */
.brand-sub.warn{color:var(--gold);letter-spacing:.04em;font-weight:800}
.hdr-btns{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.hdr-btns .icon-btn[hidden]{display:none}
.icon-btn{
  width:36px;height:36px;flex:0 0 auto;
  border-radius:11px;border:1px solid var(--line);
  background:rgba(38,88,124,.72);color:var(--ink);
  font-size:16px;line-height:1;display:grid;place-items:center;
}
.icon-btn.off{opacity:.45}
/* the button is waiting for a second press to confirm */
.icon-btn.warn{
  border-color:var(--gold);color:var(--gold);
  background:rgba(72,52,12,.75);
  box-shadow:0 0 12px rgba(240,191,90,.45);
}

/* ---------- screens ---------- */
.screen{position:relative;z-index:2;flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.screen[hidden]{display:none}

/* ===== menu ===== */
#screenMenu{align-items:center;justify-content:center;gap:14px;text-align:center;padding-bottom:6px}
.menu-art{flex:1 1 auto;display:grid;place-items:center;min-height:0}
.radar{
  /* by width and by height: larger on a tall screen, shrinking on a short one */
  position:relative;width:min(76vw,36vh,290px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line2);
  background:
    radial-gradient(circle, rgba(34,102,144,.55) 0%, rgba(11,38,62,.85) 70%),
    conic-gradient(from 0deg, transparent 0 90%, rgba(120,255,190,.10) 100%);
  box-shadow:0 0 40px rgba(40,150,200,.22) inset, 0 0 22px rgba(20,90,130,.35);
  overflow:hidden;
}
.radar::before,.radar::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(150,210,245,.30);
  transform:scale(.66);
}
.radar::after{transform:scale(.33)}
.sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(110,255,190,.42) 0deg, rgba(110,255,190,.06) 42deg, transparent 90deg);
  animation:spin 3.4s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.ping{position:absolute;width:7px;height:7px;border-radius:50%;background:#7dffbe;box-shadow:0 0 10px #7dffbe}
.ping.p1{left:32%;top:28%;animation:blip 3.4s linear infinite .5s}
.ping.p2{left:66%;top:54%;animation:blip 3.4s linear infinite 1.7s}
.ping.p3{left:44%;top:71%;animation:blip 3.4s linear infinite 2.6s}
@keyframes blip{0%{opacity:1}45%{opacity:.15}100%{opacity:0}}

.menu-title{
  flex:0 0 auto;
  font-size:15px;font-weight:700;letter-spacing:.05em;line-height:1.45;
  margin:0;color:#cfe4f2;text-transform:uppercase;
}
.diff-block{flex:0 0 auto;width:100%;max-width:330px}
.label{font-size:10px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-bottom:7px}
.seg{display:flex;gap:6px}
.seg button{
  flex:1;padding:11px 4px;border-radius:11px;
  border:1px solid var(--line);background:rgba(36,86,122,.66);
  color:var(--dim);font-size:12.5px;font-weight:700;font-family:inherit;
  transition:.16s;
}
.seg button.on{
  background:linear-gradient(#3a86b4,#245f89);
  color:#eaf5ff;border-color:rgba(160,220,255,.5);
  box-shadow:0 0 14px rgba(60,160,215,.3);
}
.diff-hint{font-size:11.5px;color:var(--dim);margin-top:8px;min-height:2.6em;line-height:1.35}

/* ---------- buttons ---------- */
.btn{
  flex:0 0 auto;
  width:100%;max-width:330px;margin:0 auto;
  padding:13px 16px;border-radius:13px;
  border:1px solid var(--line);
  background:rgba(40,92,128,.75);
  color:var(--ink);font-family:inherit;font-size:14px;font-weight:700;
  letter-spacing:.06em;
  transition:transform .08s, filter .15s;
}
.btn:active{transform:scale(.975)}
.btn.primary{
  background:linear-gradient(#f3c765,#c8922c);
  border-color:#f8dc9a;color:#241703;
  box-shadow:0 5px 0 #77551a, 0 8px 20px rgba(240,191,90,.24);
  text-transform:uppercase;
}
.btn.primary:active{box-shadow:0 2px 0 #77551a;transform:translateY(2px) scale(.99)}
.btn.primary:disabled{
  background:linear-gradient(#4b5a66,#39454f);border-color:#5c6b77;
  color:#8b98a3;box-shadow:0 4px 0 #232c33;
}
.btn.big{padding:16px;font-size:16px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--dim);font-weight:600;padding:9px}
.row-btns{flex:0 0 auto;display:flex;gap:6px;max-width:330px;width:100%;margin:0 auto 7px}
.row-btns .btn{flex:1 1 0;min-width:0;width:auto;max-width:none;margin:0;padding:11px 4px;font-size:12.5px;letter-spacing:.02em}

/* ---------- the status line ---------- */
.status{
  flex:0 0 auto;
  margin:0 auto 7px;padding:8px 12px;border-radius:10px;
  background:rgba(34,84,120,.8);border:1px solid var(--line);
  font-size:13px;font-weight:700;text-align:center;letter-spacing:.03em;
  align-self:stretch;width:auto;min-width:0;
  min-height:34px;display:flex;align-items:center;justify-content:center;
}
.status.you{color:#9ee8ff;border-color:rgba(120,220,255,.45);box-shadow:0 0 16px rgba(60,180,235,.18)}
.status.foe{color:#ffb59a;border-color:rgba(255,140,100,.4)}
.status.good{color:#8dffc0;border-color:rgba(120,255,180,.45)}
.status.bad{color:#ffd0d0;border-color:rgba(255,120,120,.4)}
.status.flash{animation:statFlash .45s ease-out}
@keyframes statFlash{0%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ---------- the board ---------- */
.panel{flex:0 0 auto;display:flex;flex-direction:column;min-height:0}
.caption{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 2px 4px;height:18px;
}
.side-name{font-size:9.5px;letter-spacing:.15em;color:var(--dim);font-weight:800}
.fleet-strip{display:flex;gap:3px;align-items:center}
.fs{
  height:7px;border-radius:2px;
  background:linear-gradient(#b8ccd9,#77909f);
  box-shadow:0 0 4px rgba(180,215,235,.3);
  transition:.3s;
}
.fs.s4{width:17px}.fs.s3{width:13px}.fs.s2{width:9px}.fs.s1{width:5px}
.fs.dead{background:#4a2320;box-shadow:none;opacity:.75}

.board-holder{display:flex;justify-content:center}
/* on deployment the board is limited by the screen width and cannot grow, so
   the spare height is handed downwards: the dock and the buttons sit at the
   bottom, under the thumb. margin-top:auto is safe: with no spare height it is
   simply zero. */
#screenPlace .dock{margin-top:auto}
/* the tips fill that emptiness with something useful: the two rules people trip over */
.place-tips{flex:0 0 auto;max-width:330px;margin:13px auto 0;padding:0 4px;text-align:center}
/* the spare height is split between two gaps, not one: with a single auto
   margin at the dock the whole surplus collected in one band under the tips and
   read as unfinished. Flexbox divides two auto margins evenly, which puts the
   tips in the middle of the emptiness. */
#screenPlace .place-tips{margin-top:auto}
.place-tips p{margin:0 0 6px;font-size:11.5px;line-height:1.4;color:var(--dim)}
.place-tips b{color:#a8c6da;font-weight:800}
@media (max-height:700px){.place-tips{display:none}}   /* height is dearer on a short screen */
.board{
  position:relative;
  display:grid;
  background:rgba(22,60,92,.55);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 0 0 1px var(--line), 0 6px 22px rgba(0,0,0,.45);
}
.board.enemy{grid-template-columns:var(--le) repeat(10,var(--ce));grid-template-rows:var(--le) repeat(10,var(--ce))}
.board.own{grid-template-columns:var(--ly) repeat(10,var(--cy));grid-template-rows:var(--ly) repeat(10,var(--cy))}
.board.place{grid-template-columns:var(--lp) repeat(10,var(--cp));grid-template-rows:var(--lp) repeat(10,var(--cp))}

.lb{
  display:grid;place-items:center;
  font-size:9px;font-weight:800;color:var(--dim);letter-spacing:0;
  background:rgba(28,72,106,.6);
}
.board.enemy .lb,.board.place .lb{font-size:10px}
.board.own .lb{font-size:8.5px}

.cell{
  position:relative;
  border-right:1px solid rgba(180,225,250,.20);
  border-bottom:1px solid rgba(180,225,250,.20);
  background:rgba(70,140,185,.22);
}
.cell.c9{border-right:none}
.cell.r9{border-bottom:none}

/* the sonar sweep across the enemy board */
.sweep-line{
  position:absolute;left:0;right:0;height:26%;top:-26%;
  background:linear-gradient(rgba(120,255,200,0),rgba(120,255,200,.075));
  pointer-events:none;z-index:1;
  animation:scanDown 4.2s linear infinite;
}
@keyframes scanDown{to{top:100%}}

/* the marks */
.cell.miss::after{
  content:"";position:absolute;left:50%;top:50%;
  width:24%;height:24%;border-radius:50%;
  background:#a8cde4;transform:translate(-50%,-50%);
  box-shadow:0 0 5px rgba(168,205,228,.55);
}
.cell.auto::after{background:rgba(14,42,68,.55);box-shadow:none;width:16%;height:16%}
.cell.hit{background:radial-gradient(circle at 50% 45%, #ff9a4d 0%, #d63a1c 55%, #6d1608 100%)}
.cell.hit::after{
  content:"✕";position:absolute;inset:0;display:grid;place-items:center;
  font-size:calc(var(--mk,var(--ce)) * .62);font-weight:900;color:#3b0d04;
}
.cell.dead{background:radial-gradient(circle at 50% 45%, #8f3324 0%, #4a1108 70%)}
.cell.dead::after{color:#1d0703}
.cell.aim{box-shadow:inset 0 0 0 2px var(--gold)}

.cell.pop{animation:pop .34s ease-out}
@keyframes pop{0%{transform:scale(1.5);filter:brightness(2.2)}100%{transform:scale(1);filter:none}}

/* splash / explosion */
.burst{position:absolute;pointer-events:none;z-index:6;transform:translate(-50%,-50%);border-radius:50%}
.burst.m{border:2px solid rgba(190,225,245,.9);animation:ring .5s ease-out forwards}
.burst.h{background:radial-gradient(circle,#fff6cf 0%,#ffab3d 30%,#ff5a1e 55%,rgba(255,60,10,0) 72%);animation:boom .5s ease-out forwards}
@keyframes ring{0%{width:6px;height:6px;opacity:1}100%{width:var(--sz);height:var(--sz);opacity:0}}
@keyframes boom{0%{width:8px;height:8px;opacity:1}100%{width:var(--sz);height:var(--sz);opacity:0}}

/* ships (the overlay) */
.ship{
  position:absolute;z-index:3;pointer-events:none;
  border-radius:5px;
  background:linear-gradient(160deg,#b9cad6 0%,#8298a8 42%,#5d7280 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 3px rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.45);
  border:1px solid #43555f;
}
.ship::before{
  content:"";position:absolute;inset:22% 8%;
  background:repeating-linear-gradient(90deg, rgba(60,80,92,.5) 0 1px, transparent 1px 6px);
  border-radius:2px;opacity:.55;
}
.ship.v::before{background:repeating-linear-gradient(0deg, rgba(60,80,92,.5) 0 1px, transparent 1px 6px)}
.ship.sel{
  background:linear-gradient(160deg,#ffe8a8 0%,#e2b356 45%,#a97c25 100%);
  border-color:#fff0c4;box-shadow:0 0 0 2px rgba(255,224,150,.7), 0 0 16px rgba(240,191,90,.5);
}
.ship.gone{
  background:linear-gradient(160deg,#6b3a30 0%,#48231c 60%,#2a1209 100%);
  border-color:#301410;filter:saturate(.6);
}
.ship.pick{pointer-events:auto}

/* ---------- the deployment dock ---------- */
.dock{
  flex:0 0 auto;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:5px;padding:7px 4px;margin:7px auto;
  border-radius:12px;background:rgba(28,74,108,.6);border:1px solid var(--line);
  max-width:100%;
}
.dk{
  position:relative;
  display:flex;align-items:center;gap:4px;
  padding:5px 7px 5px 5px;border-radius:9px;
  border:1px solid rgba(170,220,250,.28);background:rgba(44,98,136,.55);
  transition:.15s;
}
.dk .mini{display:flex;gap:1px}
.dk .mini i{
  width:8px;height:8px;border-radius:1.5px;
  background:linear-gradient(#c2d3de,#7b93a2);border:.5px solid #465964;
}
.dk .n{font-size:11px;font-weight:800;color:var(--dim);min-width:14px;text-align:center}
.dk.on{border-color:var(--gold);background:rgba(72,52,12,.7);box-shadow:0 0 12px rgba(240,191,90,.35)}
.dk.on .n{color:var(--gold)}
.dk.done{opacity:.42}
.dk.done .n{color:#8fadc1}

.shake{animation:shk .3s}
@keyframes shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.jolt{animation:jlt .32s}
@keyframes jlt{0%,100%{transform:translate(0,0)}15%{transform:translate(-3px,2px)}35%{transform:translate(4px,-2px)}55%{transform:translate(-2px,-3px)}75%{transform:translate(2px,2px)}}

/* ---------- modals ---------- */
.modal{
  position:fixed;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(12,38,62,.72);backdrop-filter:blur(4px);
  animation:fade .25s;
}
.modal[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  width:100%;max-width:330px;text-align:center;
  padding:20px 18px;border-radius:18px;
  background:linear-gradient(#275f8a,#1a4a6e);
  border:1px solid rgba(150,215,250,.3);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  animation:rise .3s cubic-bezier(.2,1.3,.4,1);
  max-height:100%;overflow:auto;
}
@keyframes rise{from{transform:translateY(22px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.sheet h2{margin:2px 0 8px;font-size:21px;letter-spacing:.05em;color:var(--gold)}
.sheet p{margin:0 0 12px;font-size:13px;line-height:1.5;color:#c3dbea}
.over-icon{
  font-size:44px;line-height:1;margin-bottom:4px;
  color:var(--gold);text-shadow:0 0 18px rgba(240,191,90,.45);
}
.over-icon.lost{color:var(--blood);text-shadow:0 0 18px rgba(224,61,42,.45)}
.stats{
  display:flex;justify-content:space-around;gap:6px;
  margin:0 0 16px;padding:11px 6px;border-radius:11px;
  background:rgba(24,64,96,.5);border:1px solid var(--line);
}
.stats div{display:flex;flex-direction:column;gap:3px}
.stats b{font-size:17px;color:var(--gold)}
.stats span{font-size:9px;letter-spacing:.09em;color:var(--dim);text-transform:uppercase}
.rules{text-align:left;margin-bottom:14px}
.rules p{font-size:12.5px;margin-bottom:9px;color:#bcd6e8}
.rules b{color:var(--gold)}
.sheet .btn{margin-bottom:4px}

/* ===== the lobby: play with a friend ===== */
#screenLobby{
  align-items:center; justify-content:center; gap:12px; text-align:center;
  overflow:auto; padding-bottom:6px;
}
#screenLobby .lobby-art{flex:0 1 auto;display:grid;place-items:center;min-height:0}
#screenLobby .radar{width:min(52vw,22vh,190px)}
.lobby-sub{flex:0 0 auto;margin:0;max-width:330px;font-size:12.5px;line-height:1.45;color:var(--dim)}
.lobby-setup,.lobby-room{flex:0 0 auto;width:100%;max-width:330px}
.lobby-hint{font-size:11.5px;line-height:1.4;color:var(--dim);margin:9px 0 0}
#lobbyHint{flex:0 0 auto;max-width:330px;margin:0;min-height:1.4em}
#lobbyHint:empty{min-height:0}
.lobby-setup .btn+.btn{margin-top:8px}
.link-row{display:flex;gap:6px;align-items:stretch}
.link-field{
  flex:1 1 0;min-width:0;padding:11px 10px;border-radius:11px;
  border:1px solid var(--line);background:rgba(20,56,86,.75);color:var(--ink);
  font-family:inherit;font-size:11.5px;
}
.copy-btn{flex:0 0 auto;width:auto;max-width:none;margin:0;padding:0 14px;font-size:12px}
.seat-list{
  display:flex;flex-direction:column;gap:6px;margin:11px 0 0;
  padding:9px 10px;border-radius:12px;
  background:rgba(28,74,108,.5);border:1px solid var(--line);
}
.seat-row{display:flex;align-items:center;gap:8px;font-size:12.5px;text-align:left}
.seat-row .dot{width:8px;height:8px;border-radius:50%;background:#4a6b82;flex:0 0 auto}
.seat-row.here .dot{background:#6fe39a;box-shadow:0 0 7px #6fe39a}
.seat-row.away .dot{background:var(--gold)}
.seat-row .who{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat-row .tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.lobby-btns{margin-top:10px}
@media (max-height:560px){#screenLobby .lobby-art{display:none}}

/* ---------- the phone turned on its side ----------
   The page is declared portrait and the game will be played upright. But nobody
   can be stopped from turning the phone, and stacked on a wide screen the two
   boards came out at 15px a cell: the screen was mostly empty at the sides and
   the lower board did not fit at all. On the side the boards stand next to each
   other, so the width finally works and both come out the same size and three
   times as large. The status line stays at the top, full width: flex-wrap plus
   flex-basis of 100% gives it a row of its own, so the HTML needed no change. */
@media (orientation: landscape){
  #screenGame{
    flex-direction:row; flex-wrap:wrap;
    align-content:flex-start; justify-content:center;
    column-gap:18px;
  }
  #screenGame > .status{flex:0 0 100%}
  #screenGame .panel{flex:0 0 auto}
}

/* On the side deployment did not fit at all: header, status, board, dock, three
   buttons and "Open fire!" stacked is 460px against a screen height of 360, and
   the "Open fire!" button ended up OFF the screen, which meant the game could
   not be started at all. The board goes on the left and all the controls in a
   column on the right. The markup is unchanged: grid-template-areas places the
   existing children. */
@media (orientation: landscape){
  #screenPlace{
    display:grid;
    grid-template-columns:auto minmax(190px,1fr);
    grid-template-rows:auto auto auto 1fr;
    grid-template-areas:
      "status status"
      "board  dock"
      "board  btns"
      "board  fight";
    align-items:start; column-gap:16px;
  }
  /* display:grid on an ID outweighs .screen[hidden]{display:none}, so the
     deployment screen kept taking up room above the battle and ate 204px of
     height. Hiding is restored at the same selector weight. */
  #screenPlace[hidden]{display:none}
  #screenPlace .status{grid-area:status}
  #screenPlace .board-holder{grid-area:board; align-self:center}
  #screenPlace .place-tips{display:none}
  #screenPlace .dock{grid-area:dock; margin-top:0}
  #screenPlace .row-btns{grid-area:btns}
  #screenPlace #btnFight{grid-area:fight; align-self:end}
}