/* Sea Battle: the home screen, the two seas, the ships and the shots. */
:root{--water-a:#E4F0FA;--water-b:#CFE3F5;--line:rgba(47,111,222,.13);--hull-a:#7D8C9E;--hull-b:#4F5E70;--hit:#FF6A45}

/* home */
.home{align-items:center;justify-content:center;text-align:center;padding:16px}
.home-in{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(30em,100%)}
.logo{width:132px;height:auto;border-radius:16px;box-shadow:0 6px 18px rgba(47,111,222,.22)}
.home .title{font-size:clamp(2.3em,10vw,3.6em)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.05em}
#levels .choice{min-width:5em;position:relative}
#levels .choice[data-won]::after{content:"✓";position:absolute;top:-.55em;right:-.4em;width:1.35em;height:1.35em;line-height:1.35em;border-radius:50%;
  background:#2E9E5B;color:#fff;font-size:.75em;font-weight:800;box-shadow:0 0 0 2px var(--paper)}
.go{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}
.links{display:flex;gap:.2em;flex-wrap:wrap;justify-content:center}
@media (max-height:520px){.logo{display:none}}
@media (max-height:430px){.tagline{display:none}.home-in{gap:8px}.home .title{font-size:2.3em}.foot{display:none}}

/* the game: arranged by data-layout (set in game.js from the window's size) */
#game{align-items:center;justify-content:center;gap:10px;padding:12px;overflow:hidden;
  padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
.panel{display:flex;flex-direction:column;gap:10px;min-width:0}
.bar{display:flex;align-items:center;gap:10px;min-height:52px}
.status{flex:1;min-width:0;margin:0;font-weight:700;font-size:1.05em;line-height:1.25;color:var(--ink)}
.tabs{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--paper-hi);border:1px solid var(--hair)}
.tab{flex:1;border:0;background:none;border-radius:10px;min-height:42px;font-weight:700;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;gap:.4em}
.tab[aria-selected=true]{background:var(--accent);color:#fff}
.tab i{font-style:normal;font-size:.8em;min-width:1.6em;padding:0 .35em;border-radius:999px;background:var(--accent-soft);color:var(--accent-lo)}
.tab i:empty{display:none}
.tab:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.dock{display:flex;flex-direction:column;gap:10px}
.tray{display:flex;flex-wrap:wrap;gap:6px;min-height:94px;align-content:center;justify-content:center}
.tray .note{margin:0;align-self:center}
.tray-ship{min-height:44px;padding:0 10px;border-radius:12px;border:1.5px solid var(--hair);background:var(--paper-hi);touch-action:none;display:grid;place-items:center}
.tray-ship[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tray-ship:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mini{display:block;width:calc(var(--len) * 19px);height:15px;border-radius:999px;background:linear-gradient(180deg,var(--hull-a),var(--hull-b));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.dock-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.dock-btns .choice{padding:.3em .4em}
.dock-btns .pill{padding:.4em .8em;min-height:46px;font-size:1.05em}
.dock-btns .pill:disabled{opacity:.45;cursor:default;box-shadow:none}
.choice:disabled{opacity:.45;cursor:default}
.seas{display:flex;gap:10px}
.sea{display:flex;flex-direction:column}
.sea-head{height:32px;width:var(--bs);display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.95em;padding:0 2px}
.pips{display:flex;gap:4px;align-items:center}
.pip{display:block;width:calc(var(--len) * 7px);height:8px;border-radius:999px;background:var(--hull-b)}
.pip.gone{background:var(--hit);opacity:.35}

#game[data-layout=stack]{flex-direction:column}
#game[data-layout=stack] .panel{display:contents}
#game[data-layout=stack] .bar,#game[data-layout=stack] .tabs,#game[data-layout=stack] .dock{width:min(100%,max(var(--bs),360px))}
#game[data-layout=stack] .bar{order:1}
#game[data-layout=stack] .tabs{order:2}
#game[data-layout=stack] .seas{order:3}
#game[data-layout=stack] .dock{order:4}
#game[data-layout=side]{flex-direction:row}
#game[data-layout=side] .panel{width:228px;flex:none;max-height:100%}
#game[data-layout=side] .dock-btns{grid-template-columns:1fr 1fr}
#game[data-layout=side] .tray{min-height:0}
#game[data-layout^=two]{flex-direction:column}
#game[data-layout=two-row] .panel{width:calc(2 * var(--bs) + 10px)}
#game[data-layout=two-col] .panel{width:var(--bs)}
#game[data-layout=two-col] .seas{flex-direction:column}
#game[data-layout^=two] .tabs{display:none}

#game[data-phase=place] .tabs,#game[data-phase=battle] .dock,#game[data-phase=place] #sea-them{display:none}
#game:not([data-layout^=two])[data-view=me] #sea-them,#game:not([data-layout^=two])[data-view=them] #sea-me{display:none}

/* a sea: 100 buttons, a layer of ships over them, the shot marks over the ships */
.grid{position:relative;isolation:isolate;width:var(--bs);height:var(--bs);display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);
  background:linear-gradient(160deg,var(--water-a),var(--water-b));border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(47,111,222,.2),0 8px 24px rgba(30,70,120,.12)}
.cell{position:relative;border:0;padding:0;margin:0;background:transparent;box-shadow:inset -1px -1px 0 var(--line);touch-action:manipulation;cursor:pointer}
#grid-me{touch-action:none}
#grid-me .cell{cursor:default}
#game[data-phase=place] #grid-me .cell{cursor:pointer}
#game.wait #grid-them .cell,#grid-them .cell.fired{cursor:default}
.cell:focus{outline:none}
.cell:focus-visible::after{content:"";position:absolute;inset:1px;border-radius:5px;box-shadow:inset 0 0 0 3px #F2B632;z-index:4}
@media (hover:hover){
  #game:not(.wait) #grid-them .cell:not(.fired):hover::before{content:"";position:absolute;inset:14%;border-radius:50%;border:2.5px solid rgba(47,111,222,.6);z-index:3}
}
.cell.shake{animation:shake .28s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.mk{position:absolute;inset:0;z-index:2;pointer-events:none}
.mk.miss::before{content:"";position:absolute;inset:37%;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #8FB3DA}
.mk.hit::before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 38% 32%,#FFB199,var(--hit) 55%,#D9472A);
  box-shadow:0 1px 3px rgba(120,30,10,.35)}
.mk.hit::after{content:"";position:absolute;inset:41%;border-radius:50%;background:#fff;opacity:.9}
.mk.sunk::before{background:radial-gradient(circle at 38% 32%,#E99A86,#C24A30 60%,#8E3020)}
.mk.new::before{animation:pop .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.1);opacity:0}}
.fx{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:50%}
.fx.splash{border:2.5px solid rgba(255,255,255,.95);animation:ring .7s ease-out forwards}
.fx.splash::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(127,169,218,.9);animation:ring .7s .12s ease-out both}
.fx.boom{background:radial-gradient(circle,rgba(255,220,130,.95),rgba(255,122,89,.65) 45%,transparent 70%);animation:boom .6s ease-out forwards}
@keyframes ring{from{transform:scale(.2);opacity:1}to{transform:scale(1.7);opacity:0}}
@keyframes boom{0%{transform:scale(.2);opacity:1}60%{opacity:.9}100%{transform:scale(2.3);opacity:0}}

.fleet{position:absolute;inset:0;z-index:1;pointer-events:none}
.ship{position:absolute;left:calc(var(--c) * 10%);top:calc(var(--r) * 10%);width:calc(var(--len) * 10%);height:10%;transition:left .12s,top .12s}
.ship.v{width:10%;height:calc(var(--len) * 10%)}
.ship::before{content:"";position:absolute;inset:calc(var(--bs) * .009);border-radius:999px;background:linear-gradient(180deg,var(--hull-a),var(--hull-b));
  box-shadow:0 2px 5px rgba(20,40,70,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.ship.v::before{background:linear-gradient(90deg,var(--hull-a),var(--hull-b))}
.ship::after{content:"";position:absolute;top:45%;bottom:45%;left:calc(var(--bs) * .035);right:calc(var(--bs) * .035);border-radius:999px;background:rgba(255,255,255,.4)}
.ship.v::after{top:calc(var(--bs) * .035);bottom:calc(var(--bs) * .035);left:45%;right:45%}
.ship.sunk::before{background:linear-gradient(180deg,#A4948F,#6E5E5C)}
.ship.ghosted::before{background:rgba(91,107,126,.12);border:2px dashed var(--hull-b);box-shadow:none}
.ship.ghosted::after{display:none}
.ship.ghost{transition:none;opacity:.75;z-index:5}
.ship.ghost.bad::before{background:#E5533D}
.ship.lifted{opacity:.25}
.ship.shake{animation:shake .28s}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}

/* cards */
.result .stats{margin-bottom:.2em}
.how li{margin:.25em 0}
.how ul{padding-left:1.1em;margin:.2em 0}
.card .choices{margin-bottom:.6em}
@media (max-height:520px){
  .card{padding:.8em 1.1em .8em}
  .card h2{margin-bottom:.35em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .pill{padding:.55em 1.4em}
  .status{font-size:.98em}
}
.result .game-name{margin:-.3em 0 .5em;font-weight:600}
#game[data-layout=side] .tab{font-size:.9em;white-space:nowrap;gap:.3em}