@import url('/style-guide.css');

/* ── sizing ─────────────────────────────────────────────────────────────────── */

:root {
    --gs: clamp(1.75rem, calc((100vw - 2.5rem) / 10), 3.25rem);
}

@media (min-width: 560px) {
    :root { --gs: clamp(1.5rem, calc((100vw - 5rem) / 21), 3.25rem); }
}

/* ── board layout ────────────────────────────────────────────────────────────── */

#board-wrap {
    flex-direction: column;
    gap: .75em;
    overflow-y: auto;
}

#view-tabs {
    display: none;
}

#board {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25em;
    justify-content: center;
    align-items: flex-start;
}

.board-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4em;
}

.board-label {
    color: var(--color-text-on-deep-soft);
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ── mobile: one grid at a time, tab switcher ────────────────────────────────── */

@media (max-width: 559px) {
    #view-tabs {
        display: flex;
        gap: .4em;
        width: 100%;
        max-width: calc(10 * var(--gs));
    }

    .view-tab {
        background: var(--color-bg);
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-md);
        color: var(--color-text-soft);
        cursor: pointer;
        flex: 1;
        font-family: var(--font);
        font-size: .85em;
        font-weight: 600;
        padding: .45em .5em;
        touch-action: manipulation;
        transition: background .12s, color .12s, border-color .12s;
    }

    .view-tab.active {
        background: var(--color-blue);
        border-color: var(--color-blue-dark);
        color: #fff;
    }

    #col-enemy,
    #col-player       { display: none; }
    #col-enemy.active,
    #col-player.active { display: flex; }
}

/* ── grid ────────────────────────────────────────────────────────────────────── */

.grid {
    background: rgba(10,28,46,.35);
    border: 2px solid rgba(255,255,255,.30);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: repeat(10, var(--gs));
    grid-template-rows: repeat(10, var(--gs));
    overflow: hidden;
}

.cell {
    border-bottom: 1px solid rgba(255,255,255,.10);
    border-right:  1px solid rgba(255,255,255,.10);
    position: relative;
    transition: background .08s;
}

/* ── cell states ─────────────────────────────────────────────────────────────── */

.cell--ship {
    background: linear-gradient(150deg, #5b9fd4 0%, #3a78ae 100%);
    border-color: rgba(255,255,255,.18);
}

.cell--hit  { background: var(--color-loss) !important; }
.cell--miss { background: rgba(255,255,255,.06); }
.cell--sunk { background: #7a1e1e !important; }

.cell--hit::after,
.cell--miss::after,
.cell--sunk::after {
    align-items: center;
    display: flex;
    font-family: var(--font-symbols);
    font-weight: 700;
    inset: 0;
    justify-content: center;
    position: absolute;
}

.cell--hit::after  { color: rgba(255,255,255,.9); content: '✕'; font-size: calc(var(--gs) * .48); }
.cell--sunk::after { color: rgba(255,255,255,.5); content: '✕'; font-size: calc(var(--gs) * .48); }
.cell--miss::after { color: rgba(255,255,255,.55); content: '·'; font-size: calc(var(--gs) * .9);  line-height: calc(var(--gs) * .7); }

/* ── enemy grid ──────────────────────────────────────────────────────────────── */

.cell--shootable            { cursor: crosshair; }
.cell--shootable:hover      { background: rgba(59,136,195,.22); }

/* ── placement preview ───────────────────────────────────────────────────────── */

.cell--preview-ok  { background: rgba(40,167,69,.4)  !important; cursor: crosshair;   }
.cell--preview-bad { background: rgba(217,64,64,.35) !important; cursor: not-allowed; }

/* ── shot feedback ───────────────────────────────────────────────────────────── */

.cell--splash::before {
    animation: splash .55s ease-out forwards;
    border: 3px solid rgba(59,136,195,.65);
    border-radius: 50%;
    content: '';
    inset: 12%;
    pointer-events: none;
    position: absolute;
}

@keyframes splash {
    from { opacity: 1; transform: scale(.25); }
    to   { opacity: 0; transform: scale(1.35); }
}

.cell--boom { animation: boom .35s ease; }

/* .shake alone would override the boom animation shorthand */
.cell--boom.shake { animation: boom .35s ease, shake .4s ease; }

@keyframes boom {
    0%   { filter: brightness(1.9); transform: scale(.55); }
    60%  { transform: scale(1.18); }
    100% { filter: none; transform: scale(1); }
}

/* whole-ship reveal: shake + red flare (filter, since --sunk bg is !important) */
.cell--sunk-anim { animation: sunk-reveal .6s ease; }

@keyframes sunk-reveal {
    0%   { filter: brightness(2.1) saturate(1.6); transform: scale(.85); }
    25%  { transform: translateX(-4px); }
    45%  { transform: translateX(4px); }
    65%  { transform: translateX(-3px); }
    82%  { transform: translateX(2px); }
    100% { filter: none; transform: none; }
}

/* enemy targeting marker shown during the "aiming…" pause */
.cell--aim::before {
    animation: aim-pulse .45s ease-in-out infinite alternate;
    border: 2px dashed var(--color-loss);
    border-radius: 50%;
    content: '';
    inset: 18%;
    pointer-events: none;
    position: absolute;
}

@keyframes aim-pulse {
    from { opacity: .45; transform: scale(.75); }
    to   { opacity: 1;   transform: scale(1.05); }
}

/* ── toast ───────────────────────────────────────────────────────────────────── */

#toast {
    border-radius: 999px;
    box-shadow: var(--shadow-md);
    color: #fff;
    font-size: .9em;
    font-weight: 700;
    left: 50%;
    opacity: 0;
    padding: .55em 1.3em;
    pointer-events: none;
    position: fixed;
    top: 3.4em;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 60;
}

#toast.toast--win  { background: linear-gradient(160deg, var(--color-win)  0%, var(--color-win-dark)  100%); }
#toast.toast--loss { background: linear-gradient(160deg, var(--color-loss) 0%, var(--color-loss-dark) 100%); }

#toast.show { animation: toast-in 1.7s ease forwards; }

@keyframes toast-in {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.9); }
    12%  { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1.05); }
    20%  { transform: translateX(-50%) scale(1); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

/* ── status line ─────────────────────────────────────────────────────────────── */

#status {
    color: var(--color-text-on-deep-soft);
    font-size: .86em;
    font-weight: 600;
    min-height: 1.3em;
    text-align: center;
}

/* ── hud ─────────────────────────────────────────────────────────────────────── */

/* inline-block so the .pop scale transform applies */
.hud-item b { display: inline-block; }

/* ── result panel ────────────────────────────────────────────────────────────── */

#result.visible { transform: none; }

/* [hidden] loses to the class's display:flex without this */
.stat-card[hidden],
.result__sub[hidden] { display: none; }