/* Sink Ships - modern, minimal UI */
:root {
  --bg: #0f172a;
  --panel: #111827;
  --accent: #22d3ee;
  --accent-2: #a78bfa;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --hit: #ef4444;
  --miss: #3b82f6;
  --ship: #10b981;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg, #0b1020, var(--bg));
  color: var(--text);
}

.app-header, .app-footer { padding: 16px; background: rgba(17,24,39,0.8); backdrop-filter: blur(6px); }
.app-header h1 { margin: 0 0 8px; font-size: 20px; }
.user-row { display: flex; gap: 8px; align-items: center; }
.user-row input { flex: 0 0 200px; padding: 8px 10px; border-radius: 8px; border: 1px solid #334155; background: #0b1324; color: var(--text); }
.user-row button { padding: 8px 12px; border-radius: 8px; background: var(--accent); color: #042b33; border: none; font-weight: 700; cursor: pointer; }
.user-row .muted { color: var(--muted); }

.app-main { padding: 16px; display: grid; gap: 16px; }
.mode-tabs { display: flex; gap: 8px; }
.tab-btn { padding: 10px 12px; border-radius: 10px; background: #0b1324; color: var(--text); border: 1px solid #334155; cursor: pointer; }
.tab-btn.active { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #06202a; font-weight: 700; }

.tab-panel { display: none; padding: 16px; border-radius: 12px; background: rgba(17,24,39,0.7); border: 1px solid #334155; }
.tab-panel.active { display: block; }

.controls { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.controls button { padding: 8px 12px; border-radius: 8px; background: var(--accent); color: #042b33; border: none; font-weight: 700; cursor: pointer; }
.controls button[disabled] { opacity: 0.5; cursor: not-allowed; }
.controls button#hostChatSendBtn,
.controls button#joinChatSendBtn,
.controls button#spectateChatSendBtn { margin-left: 8px; }

.list#hostChatLog,
.list#joinChatLog,
.list#spectateChatLog { max-height: 160px; overflow: auto; }
.status { margin-left: auto; color: var(--muted); }

.boards { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 16px; }
.board-wrap h3 { margin: 8px 0; font-size: 16px; color: var(--muted); }
.board { width: 100%; max-width: 420px; aspect-ratio: 1; display: grid; grid-template-columns: repeat(10, 1fr); border: 1px solid #334155; border-radius: 12px; overflow: hidden; }
.board.disabled { pointer-events: none; opacity: 0.7; filter: grayscale(0.4); }
.cell { border: 1px solid #1f2937; position: relative; background: #0b1324; }
/* Fallback sizing for environments that don't support aspect-ratio: make cells square so the grid has height */
.cell::before { content: ""; display: block; padding-top: 100%; }
.cell:hover { outline: 1px solid var(--accent); cursor: pointer; }
.cell.ship { background: var(--ship); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35); }
.cell.hit { background: var(--hit); }
.cell.miss { background: var(--miss); }
.cell.ship::after { content: "🚢"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; opacity: 0.95; pointer-events: none; }
.rtc { display: grid; gap: 8px; margin-top: 12px; }
.rtc-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.rtc textarea { min-height: 80px; padding: 8px 10px; border-radius: 8px; background: #0b1324; color: var(--text); border: 1px solid #334155; }
.rtc button { padding: 8px 12px; border-radius: 8px; background: var(--accent-2); color: #1e1b4b; border: none; font-weight: 700; cursor: pointer; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 6px 8px; border-bottom: 1px solid #334155; color: var(--muted); }

.app-footer { font-size: 12px; color: var(--muted); }

@media (max-width: 780px) {
  .boards { grid-template-columns: 1fr; }
}