/* Lodě: status and announcement on top, the two seas with their players in
   the middle (placing: my sea alone; battle: the enemy sea large, mine small;
   desktop: side by side), the buttons at the bottom. The seas are blue panels
   on the plum cloth; ships are ivory pills, hits cherry crosses. */
.lode{
  position:absolute;inset:0;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr);
  overflow:hidden;
}

/* ── status and announcement ─────────────────────────────────────────── */
.lode-top{display:grid;justify-items:center;gap:2px;padding:6px 10px 2px}
.lode-status{padding:.4em .9em;font-size:.93rem}
.lode-say{
  margin:0;min-height:1.3em;max-width:24rem;
  font-size:.92rem;line-height:1.3;text-align:center;color:var(--mist);
}
.lode-say.big{color:var(--ivory);font-weight:600}
.lode-say.pop{animation:lode-pop .35s var(--ease)}
@keyframes lode-pop{from{transform:scale(.75);opacity:0}}

/* ── the two sides ───────────────────────────────────────────────────── */
.lode-main{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:0;padding:4px 8px;
}
.lode-side{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;max-width:100%}
.lode-head{display:flex;align-items:center;gap:8px;min-height:38px;max-width:100%}
.lode-head .ava{width:34px;height:34px;font-size:1rem;flex:none}
.lode-head .ava .chipico{width:16px;height:16px;right:-4px;bottom:-3px;padding:2px}
.lode-who{display:grid;line-height:1.2;min-width:0}
.lode-who .nm{font-weight:600;font-size:.9rem;max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lode-who .sub{font-size:.74rem;color:var(--mist);white-space:nowrap}
.lode-head.turn .ava{
  box-shadow:0 0 0 2.5px var(--gold),0 0 0 8px rgba(118,176,67,.2);
  animation:pulse 1.7s ease-in-out infinite;
}

/* the little fleet: one row of squares per ship, the sunk ones in cherry */
.lode-fleet{display:grid;grid-template-columns:auto auto;gap:3px 8px;margin-left:6px;align-items:center}
.lode-mini{display:inline-flex;gap:1px}
.lode-mini i{width:7px;height:7px;background:var(--ivory);opacity:.92}
.lode-mini i:first-child{border-radius:4px 0 0 4px}
.lode-mini i:last-child{border-radius:0 4px 4px 0}
.lode-mini.sunk i{background:var(--cherry);opacity:.6}

/* ── a sea ───────────────────────────────────────────────────────────── */
.lode-sea{
  --cell:32px;--lab:16px;
  display:grid;grid-template-columns:var(--lab) auto;grid-template-rows:var(--lab) auto;
}
.lode-cols,.lode-rows{font-size:.66rem;line-height:1;color:var(--mist);text-align:center}
.lode-cols{grid-column:2;display:grid;grid-template-columns:repeat(10,var(--cell));align-items:center}
.lode-rows{grid-row:2;display:grid;grid-template-rows:repeat(10,var(--cell));align-items:center}
.lode-grid{
  position:relative;grid-row:2;grid-column:2;
  display:grid;grid-template-columns:repeat(10,var(--cell));grid-template-rows:repeat(10,var(--cell));
  background-color:#1f4f8f;
  background-image:
    linear-gradient(to right,rgba(244,240,232,.16) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(244,240,232,.16) 1px,transparent 1px),
    radial-gradient(120% 90% at 30% 20%,#2a6ab8,#163f78 70%);
  background-size:var(--cell) var(--cell),var(--cell) var(--cell),100% 100%;
  border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(244,240,232,.35),0 10px 24px -14px rgba(0,0,0,.8);
}
.lode-sea.locked .lode-grid{filter:saturate(.7) brightness(.85)}
.lode-cell{
  position:relative;z-index:2;
  padding:0;border:0;border-radius:0;background:none;
  -webkit-tap-highlight-color:transparent;
}
.lode-cell:focus-visible{outline-offset:-2px}
.lode-cell.miss::after,.lode-cell.water::after{
  content:"";position:absolute;left:50%;top:50%;width:28%;height:28%;translate:-50% -50%;
  border-radius:50%;background:var(--ivory);opacity:.9;
}
.lode-cell.water::after{width:18%;height:18%;opacity:.35}
.lode-cell.hit::after{
  content:"";position:absolute;inset:18%;
  background:
    linear-gradient(45deg,transparent 40%,var(--cherry) 40% 60%,transparent 60%),
    linear-gradient(-45deg,transparent 40%,var(--cherry) 40% 60%,transparent 60%);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
/* the target: a gold ring, with a small cross-hair inside */
.lode-cell.aim{box-shadow:inset 0 0 0 2.5px var(--gold);animation:lode-aim 1.2s ease-in-out infinite}
.lode-cell.aim::before{
  content:"";position:absolute;left:50%;top:50%;width:30%;height:30%;translate:-50% -50%;
  border-radius:50%;border:2px solid var(--gold);
}
@keyframes lode-aim{50%{box-shadow:inset 0 0 0 1.5px var(--gold)}}
.lode-cell.shake{animation:shake .3s}

/* ships lie under the cells, so the marks stay on top */
.lode-ship{
  z-index:1;margin:3px;border-radius:999px;pointer-events:none;
  background:linear-gradient(#f6eedc,#d8ccb2);
  box-shadow:inset 0 -2px 0 rgba(23,23,15,.22),0 2px 4px rgba(0,0,0,.35);
}
.lode-ship.sel{box-shadow:0 0 0 2.5px var(--gold),0 0 0 7px rgba(118,176,67,.2),inset 0 -2px 0 rgba(23,23,15,.22)}
.lode-ship.bad{background:linear-gradient(#ea7089,#c42646);box-shadow:0 0 0 2px rgba(201,42,42,.5),inset 0 -2px 0 rgba(0,0,0,.25)}
.lode-ship.sel.bad{box-shadow:0 0 0 2.5px var(--gold),0 0 0 7px rgba(201,42,42,.3)}
.lode-ship.sunk{background:linear-gradient(#5f2130,#34101a);box-shadow:inset 0 0 0 1px rgba(244,240,232,.25)}
/* the enemy's ships that were never found, shown at the end */
.lode-ship.found{background:linear-gradient(#f6eedc,#d8ccb2);opacity:.85}

/* ── a shot lands ────────────────────────────────────────────────────── */
.lode-cell.fx-miss::before{
  content:"";position:absolute;inset:4%;border-radius:50%;
  border:2px solid var(--ivory);
  animation:lode-splash .7s ease-out both;
}
@keyframes lode-splash{from{transform:scale(.2);opacity:1}to{transform:scale(1.8);opacity:0}}
.lode-cell.fx-hit::before{
  content:"";position:absolute;inset:-12%;border-radius:50%;
  background:radial-gradient(circle,#ffd27a,var(--cherry) 55%,transparent 72%);
  animation:lode-flash .65s ease-out both;
}
@keyframes lode-flash{from{transform:scale(.3);opacity:1}to{transform:scale(1.9);opacity:0}}
.lode-cell.fx-sunk{animation:lode-sink 1s ease-in-out}
@keyframes lode-sink{30%{background:rgba(118,176,67,.55)}}

/* ── hint and buttons ────────────────────────────────────────────────── */
.lode-hint{margin:0;padding:2px 14px 0;min-height:1.3em;text-align:center;font-size:.86rem;line-height:1.3;color:var(--mist)}
.lode-hint.bad{color:var(--gold)}
.lode-bar{display:flex;justify-content:center;align-items:center;gap:8px;padding:6px 10px 10px;min-height:60px}
.lode-bar .btn{min-height:46px;padding:.4em 1.1em;font-size:.98rem;white-space:nowrap}
.lode-fire{min-width:8.5em}

/* ── stages ──────────────────────────────────────────────────────────── */
/* placing: my sea alone; the opponent is just a name under it */
.lode[data-stage=placing] .lode-own{order:1}
.lode[data-stage=placing] .lode-foe{order:2;opacity:.85}
.lode[data-stage=placing] .lode-foe .lode-sea,.lode[data-stage=placing] .lode-foe .lode-fleet{display:none}
.lode[data-stage=placing] .lode-foe .lode-head{min-height:30px}
.lode[data-stage=placing] .lode-foe .ava{width:28px;height:28px;font-size:.85rem}
/* battle on a phone: the enemy sea first and large, my sea small beside my fleet */
.lode:not(.wide):not([data-stage=placing]) .lode-own{flex-direction:row;align-items:center;gap:14px}
.lode:not(.wide):not([data-stage=placing]) .lode-own .lode-head{flex-wrap:wrap;max-width:150px;row-gap:2px}
.lode:not(.wide):not([data-stage=placing]) .lode-own .lode-fleet{margin-left:0;grid-template-columns:auto auto auto}
.lode:not(.wide):not([data-stage=placing]) .lode-own .lode-sea{--lab:0px}
.lode:not(.wide):not([data-stage=placing]) .lode-own .lode-cols,
.lode:not(.wide):not([data-stage=placing]) .lode-own .lode-rows{display:none}
.lode:not(.wide):not([data-stage=placing]) .lode-own .lode-ship{margin:2px}
/* a wide screen: both seas side by side, mine on the left */
.lode.wide .lode-main{flex-direction:row;align-items:flex-start;justify-content:center;gap:40px;padding-top:10px}
.lode.wide .lode-own{order:1}
.lode.wide .lode-foe{order:2}

/* a short screen: everything a little tighter */
@media (max-height:600px){
  .lode-top{padding-top:3px;gap:0}
  .lode-status{padding:.3em .8em;font-size:.86rem}
  .lode-say{font-size:.84rem}
  .lode-main{gap:6px;padding:2px 6px}
  .lode-side{gap:3px}
  .lode-head{min-height:32px}
  .lode-head .ava{width:28px;height:28px;font-size:.85rem}
  .lode-hint{font-size:.8rem}
  .lode-bar{min-height:50px;padding:4px 8px 6px}
  .lode-bar .btn{min-height:42px;font-size:.92rem}
}
/* placing on a phone held sideways: the opponent's name goes beside my sea, not under it (there is no room under it) */
@media (max-height:480px) and (orientation:landscape){
  .lode[data-stage=placing] .lode-main{flex-direction:row;gap:20px}
}

/* placing: a ship follows the finger, so the sea must not scroll or select */
.lode[data-stage=placing] .lode-own .lode-grid{touch-action:none;-webkit-user-select:none;user-select:none}