:root {
  color-scheme: dark;
  --tg-bg: #101c35;
  --tg-text: #f5f7ff;
  --tg-button: #73e0c1;
  --surface: #172642;
  --surface-raised: #203453;
  --muted: #a7b5ce;
  --line: #334966;
  --sea: #132d4c;
  --sea-cell: #23476a;
  --hit: #ff857a;
  --miss: #a5c8e8;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--tg-bg);
  color: var(--tg-text);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(ellipse at 50% -20%, #28446a 0, transparent 60%), var(--tg-bg); color: var(--tg-text); }
button, input { font: inherit; }
button { min-height: 44px; border: 0; border-radius: 12px; padding: 10px 15px; cursor: pointer; color: var(--tg-text); font-weight: 700; transition: transform .12s ease, opacity .12s ease, background .12s ease; }
button:active:not(:disabled) { transform: scale(.98); }
button:disabled { opacity: .45; cursor: not-allowed; }
.app-shell { width: min(100%, 960px); margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px 20px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(26px, 5vw, 34px); letter-spacing: -.04em; }
h2 { margin-bottom: 7px; font-size: 20px; letter-spacing: -.02em; }
h3 { margin: 16px 0 8px; font-size: 15px; }
.eyebrow { margin: 0 0 4px; color: #9eb4d3; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.connection { padding: 7px 10px; border: 1px solid #3b6b65; border-radius: 999px; color: #a8f0d9; font-size: 11px; white-space: nowrap; }
.connection::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #72dfbd; }
.connection.offline { border-color: #764b5a; color: #ffb6b0; }
.connection.offline::before { background: var(--hit); }
.panel { margin-bottom: 14px; padding: 17px; border: 1px solid rgba(143, 171, 209, .16); border-radius: 20px; background: linear-gradient(145deg, rgba(31, 51, 81, .96), rgba(20, 37, 62, .98)); box-shadow: 0 12px 30px rgba(2, 10, 25, .15); }
.muted { margin-bottom: 14px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.notice, .error { margin: 0 0 12px; padding: 12px 14px; border-radius: 13px; font-size: 13px; }
.notice { border: 1px solid #367967; background: #143d3a; color: #bbf7df; }
.error { border: 1px solid #844d5b; background: #452837; color: #ffd0cc; }
.field-label { display: block; margin-bottom: 7px; color: #dce6f5; font-size: 12px; font-weight: 700; }
.invite-row { display: flex; gap: 8px; }
input { min-width: 0; flex: 1; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; outline: none; background: #101e34; color: var(--tg-text); }
input:focus { border-color: var(--tg-button); box-shadow: 0 0 0 3px rgba(115, 224, 193, .12); }
input::placeholder { color: #73839d; }
.primary { background: var(--tg-button); color: #082c2a; }
.secondary { border: 1px solid #49617f; background: #2a4263; color: #e9f0fa; }
.quiet { background: transparent; color: #c2cee0; }
.danger-text { color: #ffaaa3; }
.wide { width: 100%; margin-top: 13px; }
.invite-list { margin-top: 12px; }
.incoming-invite { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: #14253e; }
.incoming-invite span { flex: 1; font-size: 13px; }
.incoming-invite button { min-height: 38px; padding: 8px 11px; font-size: 12px; }
.game-heading { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; }
.game-heading h2 { margin: 0; }
.status-pill { padding: 8px 11px; border-radius: 999px; background: #29496a; color: #d8f6ed; font-size: 12px; font-weight: 750; }
.turn-message { grid-column: 1 / -1; margin: 9px 0 0; color: #c1d1e8; font-size: 14px; line-height: 1.45; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading .secondary { padding: 8px 10px; font-size: 12px; }
.ship-picker { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.ship-choice { min-height: 38px; padding: 7px 10px; border: 1px solid #405a78; background: #233a59; font-size: 11px; }
.ship-choice.selected { border-color: var(--tg-button); background: #1b524e; color: #cafff0; }
.placement-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.placement-tools button { min-height: 38px; padding: 7px 10px; font-size: 12px; }
.board { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 12px auto 0; padding: 3px; border: 1px solid #365679; border-radius: 12px; background: var(--sea); touch-action: manipulation; }
.cell { display: grid; place-items: center; min-width: 0; min-height: 0; aspect-ratio: 1; padding: 0; border: 1px solid rgba(151, 188, 222, .13); border-radius: 3px; background: var(--sea-cell); color: #f3f7ff; font-size: clamp(10px, 2.5vw, 18px); font-weight: 850; line-height: 1; }
.board-placement .cell { cursor: crosshair; }
.board-placement .cell.ship-cell, .ship-cell { background: #7794ae; border-color: #9bb2c8; }
.hit-cell { background: #8a3845 !important; color: #ffd3cb; }
.miss-cell { background: #193755 !important; color: var(--miss); }
.sunk-cell { background: #602f48 !important; color: #fff; }
.near-cell { background: #1c3552 !important; }
.target-board .cell:not(:disabled):hover { border-color: #aff5dd; background: #337564; }
.boards-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.board-panel { min-width: 0; margin-bottom: 0; padding: 14px; }
.board-caption { max-width: 104px; color: #91a6c2; font-size: 10px; text-align: right; }
.action-row { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.back-link { margin: 2px 0 0; padding-left: 4px; }
.confirm-dialog { width: min(calc(100% - 32px), 380px); padding: 20px; border: 1px solid #4a6383; border-radius: 19px; background: #1b2d49; color: var(--tg-text); box-shadow: 0 25px 80px #0009; }
.confirm-dialog::backdrop { background: #07111dcc; backdrop-filter: blur(3px); }
.confirm-dialog h2 { margin-bottom: 8px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

@media (max-width: 640px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .boards-layout { grid-template-columns: 1fr; }
  .board-panel { padding: 13px; }
  .board { max-width: 440px; gap: 2px; }
  .cell { border-radius: 2px; }
  .invite-row { flex-direction: column; }
  .invite-row button { width: 100%; }
}