* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0f0f1a;
    color: #e0e0e0;
    min-height: 100vh;
}

main {
    max-width: 860px;
    margin: 0 auto;
    padding: 1rem;
}

.breadcrumb { font-size: 0.85rem; color: #888; margin-bottom: 0.75rem; }
.breadcrumb a { color: #4ecca3; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

h1 { text-align: center; color: #4ecca3; font-size: 1.75rem; margin-bottom: 1rem; }

/* ── Screens ────────────────────────────────────────── */

.screen { margin-bottom: 2rem; }
.screen.hidden { display: none; }
.screen-title { text-align: center; color: #4ecca3; font-size: 1.25rem; margin-bottom: 1.25rem; }

/* ── Mode select ────────────────────────────────────── */

.mode-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.5rem 2rem;
    background: #1a1a2e;
    border: 2px solid #2a2a4e;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-width: 140px;
    color: #e0e0e0;
}

.mode-btn:hover { border-color: #4ecca3; background: #1e1e38; }

.mode-icon { font-size: 2rem; }
.mode-name { font-size: 1rem; font-weight: 700; }
.mode-desc { font-size: 0.8rem; color: #888; }

/* ── Online screen ──────────────────────────────────── */

.online-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
}

.online-card {
    background: #1a1a2e;
    border: 1px solid #2a2a4e;
    border-radius: 10px;
    padding: 1.25rem;
    min-width: 220px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.online-card h3 { color: #4ecca3; font-size: 1rem; }
.online-card p  { color: #aaa; font-size: 0.9rem; }

.online-card input {
    padding: 0.5rem 0.75rem;
    background: #0f0f1a;
    border: 1px solid #3a3a5e;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    width: 100%;
}
.online-card input:focus { outline: 2px solid #4ecca3; border-color: transparent; }

.online-status {
    background: #1a1a2e;
    border: 1px solid #2a2a4e;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    text-align: center;
}
.online-status.hidden { display: none; }
.online-status.code-display { border-color: #4ecca3; color: #4ecca3; font-size: 1.1rem; font-weight: 700; }
.online-status.waiting { color: #f0a000; }
.online-status.error   { color: #e94560; border-color: #e94560; }

.back-btn { margin-top: 0.5rem; }

/* ── Room code display (in game) ────────────────────── */

.room-code-display {
    text-align: center;
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 0.75rem;
}
.room-code-display span { color: #4ecca3; font-weight: 700; letter-spacing: 0.1em; }

/* ── Placement screen ───────────────────────────────── */

.placement-controls {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.placement-ship-list {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
}

.ship-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #aaa;
    padding: 0.4rem;
    border: 1px solid #2a2a4e;
    border-radius: 6px;
    min-width: 64px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.ship-item.active   { border-color: #4ecca3; color: #4ecca3; }
.ship-item.placed   { border-color: #1a6a1a; color: #4a9a4a; }
.ship-item .ship-cells { display: flex; gap: 2px; }
.ship-cell-preview {
    width: 10px; height: 10px;
    background: #4ecca3;
    border-radius: 2px;
}
.ship-item.placed .ship-cell-preview { background: #2a6a2a; }

.hint { text-align: center; font-size: 0.9rem; color: #888; margin-top: 0.75rem; }

/* ── Grids ──────────────────────────────────────────── */

.grids-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.grid-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.grid-label {
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
    background: #0a1628;
    border: 2px solid #1a2a4a;
    border-radius: 6px;
    padding: 4px;
    width: min(320px, calc(100vw - 2rem));
    aspect-ratio: 1;
}

.cell {
    background: #0d1e3a;
    border-radius: 2px;
    cursor: default;
    position: relative;
    transition: background 0.1s;
}

.cell.ship    { background: #2a4a6a; }
.cell.hit     { background: #e94560; }
.cell.miss    { background: #3a3a5a; }
.cell.miss::after {
    content: '';
    position: absolute;
    inset: 25%;
    background: #888;
    border-radius: 50%;
}
.cell.sunk    { background: #8b0000; }

.cell.hover   { background: #1a3a5a; }
.cell.ship-preview   { background: #3a6a3a; }
.cell.invalid-preview { background: #6a2a2a; }

.enemy-grid .cell { cursor: crosshair; }
.enemy-grid .cell:hover:not(.hit):not(.miss):not(.sunk) { background: #1a3a5a; }

/* ── Game status bar ────────────────────────────────── */

.game-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #1a1a2e;
    border-radius: 8px;
    border: 1px solid #2a2a4e;
}

.status-text { font-weight: 700; font-size: 1rem; color: #4ecca3; }

/* ── Buttons ────────────────────────────────────────── */

.action-btn {
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    border: 2px solid;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.action-btn.primary  { background: #4ecca3; color: #0f0f1a; border-color: #4ecca3; }
.action-btn.primary:hover:not(:disabled) { background: #3db892; border-color: #3db892; }
.action-btn.primary:disabled { opacity: 0.4; cursor: not-allowed; }
.action-btn.secondary { background: transparent; color: #e0e0e0; border-color: #4a4a6e; }
.action-btn.secondary:hover { background: #2a2a4e; }
.action-btn.small { padding: 0.35rem 0.75rem; font-size: 0.85rem; }

/* ── Game over overlay ──────────────────────────────── */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 200;
}
.overlay.hidden { display: none; }

.over-title { font-size: 2.5rem; font-weight: 700; color: #4ecca3; }
.over-sub   { font-size: 1.1rem; color: #e0e0e0; }

/* ── SEO content ────────────────────────────────────── */

.content { padding-top: 1.5rem; border-top: 1px solid #2a2a4e; }
.last-updated { font-size: 0.8rem; color: #555; margin-bottom: 0.75rem; }
.content h2 { color: #4ecca3; font-size: 1.25rem; margin: 1.5rem 0 0.75rem; }
.content h2:first-of-type { margin-top: 1rem; }
.content p  { margin-bottom: 0.75rem; color: #c0c0c0; }
.content ul { margin: 0.5rem 0 1rem 1.5rem; color: #c0c0c0; }
.content li { margin-bottom: 0.5rem; }
.faq { margin: 0.5rem 0 1.5rem; }
.faq dt { font-weight: 700; color: #e0e0e0; margin-top: 1rem; }
.faq dd { color: #aaa; margin-left: 0; margin-top: 0.25rem; }
.related-games { margin-top: 1.5rem; }
.related-games h3 { color: #4ecca3; font-size: 1rem; margin-bottom: 0.75rem; }
.game-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.game-links a {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    background: #1a1a2e;
    color: #4ecca3;
    border: 1px solid #2a2a4e;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s, border-color 0.2s;
}
.game-links a:hover { background: #2a2a4e; border-color: #4ecca3; }

/* ── Responsive ─────────────────────────────────────── */

@media (min-width: 640px) {
    main { padding: 2rem; }
    h1 { font-size: 2rem; }
}

@media (max-width: 480px) {
    .grids-row.two-grids { gap: 0.75rem; }
    .grid { width: min(calc(50vw - 1rem), 200px); }
}