:root {
    --bg: #0b1a2b;
    --bg-2: #10263d;
    --ink: #e8eef5;
    --muted: #93a7bd;
    --accent: #f2c14e;
    --danger: #e5484d;

    /* The plastic game case */
    --case: #2f5d8a;
    --case-dark: #1f4266;
    --case-edge: #173350;
    --lid-grid: #13253a;
    --ocean-grid: #1d6fa5;
    --hole: rgba(0, 0, 0, .45);

    --ship: #9aa3ad;
    --ship-dark: #6c757f;

    --peg-red: #e0312f;
    --peg-white: #f4f4f0;

    --cell: clamp(22px, calc((100vw - 64px) / 11), 34px);
}
/* Wide enough for both boards side by side: size cells to fit two. */
@media (min-width: 700px) {
    :root { --cell: clamp(22px, calc((100vw - 170px) / 22), 34px); }
}

* { box-sizing: border-box; }

html, body { margin: 0; }
html { background: var(--bg); }

body {
    min-height: 100vh;
    background: radial-gradient(ellipse at top, var(--bg-2), var(--bg) 70%) fixed;
    color: var(--ink);
    font: 16px/1.5 Inter, system-ui, -apple-system, Segoe UI, sans-serif;
}

a { color: var(--accent); }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.brand {
    font-family: 'Black Ops One', Impact, sans-serif;
    font-size: 1.5rem;
    letter-spacing: .04em;
    color: var(--ink);
    text-decoration: none;
}

.topbar-code { color: var(--muted); }
.topbar-code strong, .code { font-family: ui-monospace, Menlo, monospace; letter-spacing: .12em; color: var(--accent); }

.page { max-width: 1100px; margin: 0 auto; padding: 1rem; }

/* ------------------------------------------------------------ home & forms */

.hero { text-align: center; padding: 2rem 0 1rem; }
.hero h1 { font-family: 'Black Ops One', Impact, sans-serif; font-weight: 400; font-size: clamp(2rem, 6vw, 3.25rem); margin: 0 0 .5rem; }
.hero p { color: var(--muted); max-width: 32rem; margin: 0 auto; }

.cards { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: flex-start; padding: 1.5rem 0; }

.card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(100%, 340px);
    padding: 1.5rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
}
.card h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.card label { font-size: .85rem; color: var(--muted); }

input {
    font: inherit;
    padding: .6rem .75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .25);
    color: var(--ink);
    width: 100%;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.code-input { text-transform: uppercase; letter-spacing: .15em; font-family: ui-monospace, Menlo, monospace; }

.choices { border: 0; padding: 0; margin: .5rem 0 0; display: grid; gap: .4rem; }
.choices legend { font-size: .85rem; color: var(--muted); padding: 0; margin-bottom: .4rem; }
.choice {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .5rem .65rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--accent); background: rgba(242, 193, 78, .1); }
.choice input { width: auto; margin: .25rem 0 0; accent-color: var(--accent); }
.choice span { display: grid; color: var(--ink); font-size: .95rem; }
.choice small { color: var(--muted); font-size: .8rem; }

.error { color: var(--danger); margin: 0; font-size: .9rem; }
.muted { color: var(--muted); margin: 0; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font: inherit;
    font-weight: 600;
    padding: .6rem 1rem;
    margin-top: .5rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .08);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: rgba(255, 255, 255, .14); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #1b1300; }
.btn-primary:hover { background: #ffd36b; }
.btn-small { padding: .35rem .7rem; font-size: .85rem; margin: 0; }

/* ------------------------------------------------------------ game layout */

.banner {
    text-align: center;
    padding: .7rem 1rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    font-weight: 600;
}
.banner.turn { background: rgba(242, 193, 78, .18); color: var(--accent); }
.banner.win { background: rgba(70, 200, 120, .2); color: #7ee2a8; }
.banner.lose, .banner.error { background: rgba(229, 72, 77, .18); color: #ff9a9d; }
.banner .btn { margin-left: .5rem; vertical-align: middle; }
.inline-form { display: inline; }

.table { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; align-items: flex-start; }
.column { display: flex; flex-direction: column; gap: .75rem; }

.share-panel { max-width: 420px; margin: 0 auto 1rem; }

/* ------------------------------------------------------------ the boards */

.lid, .tray {
    background: linear-gradient(180deg, var(--case), var(--case-dark));
    border: 3px solid var(--case-edge);
    padding: .6rem .75rem .9rem;
    border-radius: 14px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15), 0 12px 24px rgba(0, 0, 0, .35);
}

.plate {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: 'Black Ops One', Impact, sans-serif;
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    padding: 0 .25rem .45rem;
}
.plate span:last-child { color: var(--accent); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ grids */

.grid {
    display: grid;
    grid-template-columns: repeat(11, var(--cell));
    grid-template-rows: repeat(11, var(--cell));
    padding: 4px;
    border-radius: 6px;
    position: relative;
}
.grid.target { background: var(--lid-grid); }
.grid.ocean {
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .04) 0 6px, transparent 6px 14px),
        var(--ocean-grid);
}

.label {
    display: grid;
    place-items: center;
    font-size: calc(var(--cell) * .38);
    font-weight: 700;
    color: rgba(255, 255, 255, .7);
    user-select: none;
}

.cell {
    border: 0;
    padding: 0;
    margin: 0;
    background: radial-gradient(circle, var(--hole) 0 18%, transparent 21%);
    border-right: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    cursor: default;
    z-index: 1;
}

.grid.target.armed .cell.open { cursor: crosshair; }
.grid.target.armed .cell.open:hover,
.grid.target.armed .cell.open:focus-visible {
    background:
        radial-gradient(circle, var(--accent) 0 14%, transparent 17%),
        rgba(242, 193, 78, .22);
    outline: none;
}
.game.your-turn .lid { box-shadow: 0 0 0 3px var(--accent), 0 12px 24px rgba(0, 0, 0, .35); }

.grid.ocean.placing .cell { cursor: pointer; }
.cell.preview { background: rgba(255, 255, 255, .35); }
.cell.preview-bad { background: rgba(229, 72, 77, .55); }

/* ------------------------------------------------------------ ships */

.ship {
    z-index: 2;
    margin: 3px;
    pointer-events: none;
    background:
        radial-gradient(circle, rgba(0, 0, 0, .45) 0 15%, transparent 18%) 0 0 / var(--cell) var(--cell),
        linear-gradient(var(--ship), var(--ship-dark));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 4px rgba(0, 0, 0, .4);
}
/* Hull: rounded stern, pointed bow. Peg holes line up with the grid cells. */
.ship-h {
    border-radius: 35% 60% 60% 35% / 50%;
    background-position: -3px -3px, 0 0;
}
.ship-v {
    border-radius: 50% / 35% 35% 60% 60%;
    background:
        radial-gradient(circle, rgba(0, 0, 0, .45) 0 15%, transparent 18%) -3px -3px / var(--cell) var(--cell),
        linear-gradient(90deg, var(--ship), var(--ship-dark));
}
.ship.movable { pointer-events: auto; cursor: grab; }
.ship.movable:hover { filter: brightness(1.15); }
.ship.sunk { filter: grayscale(.4) brightness(.7) sepia(.4); }
.ship.ghost { opacity: .55; }
.grid.target .ship { opacity: .8; }

/* ------------------------------------------------------------ pegs */

.peg {
    z-index: 3;
    pointer-events: none;
    place-self: center;
    width: calc(var(--cell) * .48);
    height: calc(var(--cell) * .48);
    border-radius: 50%;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .5), inset 0 -2px 2px rgba(0, 0, 0, .25);
}
.peg.hit { background: radial-gradient(circle at 35% 30%, #ff8a80 0 15%, var(--peg-red) 45%, #8f1414 100%); }
.peg.miss { background: radial-gradient(circle at 35% 30%, #fff 0 20%, var(--peg-white) 50%, #b9b9b0 100%); }

.peg.drop { animation: drop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.peg.drop.hit { animation: drop .45s cubic-bezier(.3, 1.6, .5, 1) both, pulse 1.2s .45s ease-out 2; }

@keyframes drop {
    from { transform: translateY(-40px) scale(1.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(224, 49, 47, .8); }
    100% { box-shadow: 0 0 0 calc(var(--cell) * .5) rgba(224, 49, 47, 0); }
}

/* ------------------------------------------------------------ dock (ship placement, under the ocean grid) */

.dock {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: calc(var(--cell) * 11 + 8px);
    margin-top: .75rem;
    padding: .6rem;
    background: rgba(0, 0, 0, .18);
    border-radius: 6px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}

.dock[hidden] { display: none; }
.dock-ships { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem; }
.dock-ship {
    display: flex;
    align-items: center;
    gap: .6rem;
    font: inherit;
    font-size: .85rem;
    text-align: left;
    padding: .35rem .5rem;
    border-radius: 6px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, .05);
    color: var(--ink);
    cursor: pointer;
}
.dock-ship.selected { border-color: var(--accent); background: rgba(242, 193, 78, .15); }
.dock-ship.placed { opacity: .45; }
.dock-controls { display: flex; flex-wrap: wrap; gap: .35rem; }
.deploy { width: 100%; margin: 0; }

.mini-ship {
    display: inline-block;
    flex: none;
    width: calc(var(--len) * 12px);
    height: 10px;
    border-radius: 35% 60% 60% 35% / 50%;
    background: linear-gradient(var(--ship), var(--ship-dark));
}

/* ------------------------------------------------------------ panels */

.panel {
    padding: .9rem 1rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
}
.panel h3 { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.panel p { font-size: .9rem; margin-bottom: .6rem; }

.share { display: flex; gap: .4rem; }
.share input { font-size: .8rem; padding: .35rem .5rem; }

.fleet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.fleet-list li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.fleet-list li.sunk { color: var(--muted); text-decoration: line-through; }
.fleet-list li.sunk .mini-ship { background: linear-gradient(#8a5a4a, #5a3a30); }
.tag { margin-left: auto; font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--peg-red); text-decoration: none; }

.legend { display: flex; gap: 1.25rem; margin-top: .75rem; padding-top: .6rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: .4rem; }
.legend .peg { width: 14px; height: 14px; display: inline-block; }