:root {
  --bg: #0b1e2d;
  --panel: #123145;
  --accent: #2ea6ff;
  --ship: #6b7c8c;
  --miss: #2b4a63;
  --hit: #ff5a3c;
  --sunk: #7a1f10;
  --text: #e8f1f8;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(900px 420px at 50% -12%, rgba(46, 166, 255, .20), transparent 62%),
    radial-gradient(700px 380px at 88% 108%, rgba(46, 166, 255, .10), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#app { max-width: 540px; margin: 0 auto; padding: 12px; }
header { display: flex; justify-content: space-between; align-items: baseline; }
header h1 { font-size: 20px; margin: 4px 0; }
#room-info { font-size: 13px; opacity: .7; }

.screen { display: none; }
.screen.active { display: block; }
.lead { font-size: 14px; opacity: .85; line-height: 1.45; }
.muted { opacity: .6; font-size: .9em; }

/* --- стартовый экран --- */
.hero { text-align: center; padding: 6px 0 12px; }
.hero-logo { width: 76px; height: 76px; filter: drop-shadow(0 8px 18px rgba(46, 166, 255, .35)); }
.hero-title {
  margin: 8px 0 2px; font-size: 36px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(180deg, #d7efff, #2ea6ff);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero-sub {
  margin: 0; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; opacity: .7;
}
.card {
  background: linear-gradient(180deg, rgba(46, 166, 255, .10), rgba(46, 166, 255, .02));
  border: 1px solid rgba(46, 166, 255, .25);
  border-radius: 16px; padding: 14px 16px; margin: 4px 0 6px; text-align: left;
}
.card-rules { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.card-rules li { margin-bottom: 7px; }
.card-rules li:last-child { margin-bottom: 0; }
.primary.big { font-size: 18px; padding: 15px 16px; box-shadow: 0 10px 24px rgba(46, 166, 255, .35); }

button {
  background: #1d3d54; color: var(--text); border: none; border-radius: 12px;
  padding: 12px 16px; font-size: 16px; cursor: pointer;
}
button.primary { background: var(--accent); color: #06222f; font-weight: 700; }
button:disabled { opacity: .4; }

.row { display: flex; gap: 8px; margin-top: 10px; }
.row input {
  flex: 1; background: #12314a; border: 1px solid #24506b; color: var(--text);
  border-radius: 12px; padding: 12px; font-size: 16px; text-transform: uppercase;
}
#btn-quick, #btn-create, #btn-invite { width: 100%; margin-top: 10px; }
#btn-quick { margin-top: 14px; }
.status { margin-top: 14px; min-height: 20px; font-size: 14px; opacity: .8; }

.banner { min-height: 22px; font-size: 15px; font-weight: 600; text-align: center; margin: 6px 0; }

#timer { position: relative; height: 20px; background: #12314a; border-radius: 10px; overflow: hidden; }
#timer-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #2ea6ff, #7ad0ff); }
#timer-text { position: absolute; inset: 0; text-align: center; font-size: 13px; line-height: 20px; }

.board-block { margin: 10px 0 0; }
.board-block h2 { font-size: 13px; opacity: .85; margin: 0 0 6px; text-align: center; letter-spacing: .3px; }
.board-block.own { max-width: 340px; margin: 16px auto 0; }
.board-block h3 { font-size: 12px; opacity: .8; margin: 0 0 6px; text-align: center; }

.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.grid.small { gap: 4px; }
.grid.small .cell { border-radius: 6px; font-size: 12px; }
.cell {
  aspect-ratio: 1 / 1; background: #0f2a3d; border-radius: 8px;
  border: 1px solid #1c3f57; display: flex; align-items: center; justify-content: center;
  font-size: 15px; transition: transform .08s ease, background .15s ease;
}
.cell.ship { background: var(--ship); }
.cell.miss { background: var(--miss); }
.cell.miss::after { content: "•"; opacity: .6; }
.cell.hit { background: var(--hit); }
.cell.hit::after { content: "✸"; color: #fff; }
.cell.sunk { background: var(--sunk); }
.cell.selected { outline: 3px solid var(--accent); background: #1f5b80; }
.cell.your-shot { box-shadow: inset 0 0 0 2px var(--accent); }
.cell.enemy-shot { box-shadow: inset 0 0 0 2px #ffb703; }

@keyframes ripple {
  0% { box-shadow: 0 0 0 0 rgba(122, 208, 255, .8); }
  100% { box-shadow: 0 0 0 16px rgba(122, 208, 255, 0); }
}
@keyframes boom {
  0% { transform: scale(.5); filter: brightness(2.6) saturate(1.4); }
  45% { transform: scale(1.3); filter: brightness(1.6); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes flash {
  0%, 100% { }
  30% { background-color: #ffe08a; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.cell.anim-miss { animation: ripple .5s ease-out; }
.cell.anim-hit { animation: boom .45s ease-out, flash .45s ease-out; }
.cell.anim-sunk { animation: boom .6s ease-out, flash .6s ease-out; }
.grid.shake { animation: shake .34s ease; }

#fire-row { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
#fire-row button { flex: 1; }
#selected-count { font-size: 13px; opacity: .8; min-width: 86px; }
.hint { min-height: 18px; margin-top: 8px; text-align: center; font-size: 13px; font-weight: 600; color: #ffd76a; }

.head-right { display: flex; align-items: center; gap: 8px; }
.icon { background: transparent; border: 1px solid #24506b; border-radius: 10px; padding: 6px 10px; font-size: 15px; }

.overlay {
  position: fixed; inset: 0; background: rgba(4, 14, 22, .88);
  display: none; align-items: center; justify-content: center; z-index: 10;
}
.overlay.active { display: flex; }
.result-card {
  background: var(--panel); border-radius: 18px; padding: 24px;
  text-align: center; width: 82%; max-width: 340px;
}
.result-card h2 { margin: 0 0 8px; }
.result-card p { opacity: .85; margin: 0 0 18px; }

.rules { text-align: left; margin: 0 0 16px; padding-left: 18px; line-height: 1.6; font-size: 14px; }
.rules li { margin-bottom: 4px; }
.lead-rules { margin: 8px 0; font-size: 13.5px; opacity: .9; padding-left: 20px; }
.lead-rules li { margin-bottom: 5px; }

.battle-card {
  background: var(--panel); border-radius: 18px; padding: 18px;
  width: 92%; max-width: 420px; text-align: center;
  transition: box-shadow .25s ease;
  max-height: 92vh; overflow-y: auto;
}
.battle-card h2 {
  margin: 0 0 12px; font-size: 26px; letter-spacing: 1px;
  text-transform: uppercase; font-weight: 800;
}
.battle-card.win { box-shadow: 0 0 0 2px rgba(255, 214, 106, .45), 0 18px 46px rgba(0, 0, 0, .5); }
.battle-card.lose { box-shadow: 0 0 0 2px rgba(255, 90, 58, .45), 0 18px 46px rgba(0, 0, 0, .5); }
.battle-card.draw { box-shadow: 0 0 0 2px rgba(200, 220, 235, .5), 0 18px 46px rgba(0, 0, 0, .5); }

.battle-card.win #battle-title {
  color: #ffd76a; text-shadow: 0 0 20px rgba(255, 214, 106, .65);
}
.battle-card.lose #battle-title {
  color: #ff7a6a; text-shadow: 0 0 20px rgba(255, 90, 58, .6);
}
.battle-card.draw #battle-title {
  color: #dbeaf5;
  text-shadow: 0 0 22px rgba(170, 205, 235, .9), 0 0 40px rgba(120, 170, 210, .6);
}
.banner.draw { color: #dbeaf5; text-shadow: 0 0 14px rgba(170, 205, 235, .75); }
.battle-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.battle-boards h3 { font-size: 12px; opacity: .8; margin: 0 0 6px; }
.grid.small .cell { border-radius: 6px; font-size: 12px; }

.ot-badge { font-size: 42px; line-height: 1; margin-bottom: 8px; filter: drop-shadow(0 6px 16px rgba(255, 183, 3, .4)); }

.legend { display: flex; justify-content: center; gap: 14px; margin: 12px 0 4px; font-size: 12px; opacity: .85; }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.legend .dot.ship { background: var(--ship); }
.legend .dot.hit { background: var(--hit); }
.legend .dot.miss { background: var(--miss); }
.legend .dot.your { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
.legend .dot.enemy { background: transparent; box-shadow: inset 0 0 0 2px #ffb703; }

.stats { font-size: 13px; opacity: .9; margin: 8px 0; line-height: 1.5; }
.count { font-size: 13px; opacity: .7; margin: 6px 0 4px; min-height: 16px; }
.note { font-size: 14px; font-weight: 600; color: #ffd76a; min-height: 18px; margin-bottom: 6px; }

.actions { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.actions .primary { flex: 1; }
.share-btn {
  width: 100%; margin: 6px 0 2px; background: #1d3d54; color: var(--text);
  border: 1px solid #2ea6ff;
}
.ghost {
  background: transparent; color: var(--text); border: 1px solid #2b5a78;
  padding: 12px 16px;
}