/* Takeover — one robot each, two flags, plain cells.
   Stage, strip, board and end panel are Lines 98's, so the games read as
   one family. */

body {
    font-family: 'Roboto', sans-serif;
}

.tk-stage {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 14px 12px 10px;
    background: transparent;
    border: 1px solid var(--accent-gold);
    border-radius: 14px;
    box-sizing: border-box;
    /* games/layout.css makes .container a centering flex column, so its
       children shrink-wrap. Stretch, or the board never fills the screen. */
    align-self: stretch;
}

/* ── Strip: each side's robot count either side of the name ── */
.tk-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
    padding: 10px 12px;
    background: var(--bg-footer);
    border: 1px solid var(--accent-gold);
    border-radius: 10px;
}

.tk-side {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.tk-side--foe { text-align: right; }

.tk-side-num {
    font-size: 1.9rem;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
    color: var(--surface);
}

.tk-side-label,
.tk-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

.tk-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    color: var(--surface);
}

/* The level sits under the name, in the side labels' gold. */
.tk-level {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--accent-gold);
}

/* ── Board ── */
.tk-board {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
    background: #0e1218;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.tk-cell {
    aspect-ratio: 1 / 1;
    /* Grid items default to min-width:auto, which with aspect-ratio refuses
       to shrink and pushes the columns past the board. */
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #1b222c;
    border: 1.5px solid #8a7534;
    border-radius: 4px;
    font-size: clamp(14px, 4.6vw, 22px);
    line-height: 1;
    cursor: pointer;
}

/* Walls and bases are raised blocks: a light top-left edge, a dark
   bottom-right one. */
.tk-cell.is-wall {
    background: rgb(212, 175, 55);
    border-color: var(--bg-footer);
    box-shadow: inset 3px 3px 0 #f0d77f, inset -3px -3px 0 #9a7d1e;
    cursor: default;
}

/* A base is a whole cell in its side's colour, a white flag on it. */
.tk-cell.is-flag-you {
    background: rgb(25, 150, 25);
    border-color: var(--bg-footer);
    box-shadow: inset 3px 3px 0 #5cc85c, inset -3px -3px 0 #0e6a0e;
}

.tk-cell.is-flag-foe {
    background: rgb(204, 0, 0);
    border-color: var(--bg-footer);
    box-shadow: inset 3px 3px 0 #ff5252, inset -3px -3px 0 #850000;
}

.tk-flag {
    display: block;
    width: 62%;
    height: 62%;
}

/* The picked robot's firing lanes beyond where it can walk: dark gold. */
.tk-cell.is-lane { background: #4a4020; border-color: var(--accent-gold); }

/* Where it can walk in its next move: the plain cell, outlined in a teal
   bright enough to read on the dark board. */
.tk-cell.is-walk { border-color: #19b3b3; box-shadow: inset 0 0 0 1px #19b3b3; }

/* A base being taken blinks white, twice a second. */
.tk-cell.is-blink { background: var(--surface); border-color: var(--surface); box-shadow: none; }

.tk-cell.is-goal { border: 2px dashed var(--accent-gold); }

.tk-cell { position: relative; }

.tk-cell.has-you,
.tk-cell.has-foe { border-color: transparent; }

/* A robot fills its cell: a thick gold slab on the front, where it is
   strong and the only way it fires, thin gold sides, and an open, rounded
   back. Drawn facing up, turned with the robot. */
.tk-bot {
    position: absolute;
    inset: -1.5px;
    overflow: hidden;
    box-sizing: border-box;
    background: rgb(25, 150, 25);
    border-left: 1.5px solid var(--bg-primary);
    border-right: 1.5px solid var(--bg-primary);
    border-radius: 3px 3px 50% 50% / 3px 3px 42% 42%;
}

.tk-cell.has-foe .tk-bot { background: rgb(204, 0, 0); }

.tk-bot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 22%;
    background: var(--bg-primary);
}

.tk-bot::after {
    content: '';
    position: absolute;
    top: 32%;
    left: 50%;
    width: 50%;
    height: 36%;
    transform: translateX(-50%);
    background: #fff;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.tk-cell.face-right .tk-bot { transform: rotate(90deg); }
.tk-cell.face-down .tk-bot  { transform: rotate(180deg); }
.tk-cell.face-left .tk-bot  { transform: rotate(270deg); }

/* A hit flashes the robot white. */
.tk-cell.is-hit .tk-bot { background: var(--surface); }

/* Health floats just above the robot, as in Z: green for points left,
   pink for points lost. It overhangs the cell above. */
.tk-hp {
    position: absolute;
    top: -10px;
    left: -2px;
    right: -2px;
    z-index: 2;
    display: flex;
    gap: 1px;
    height: 9px;
    padding: 1px;
    box-sizing: border-box;
    background: #1a1a1a;
    border: 1px solid var(--bg-primary);
    border-radius: 3px;
    pointer-events: none;
}

.tk-hp i {
    flex: 1;
    border-radius: 1px;
    background: var(--accent-pink);
}

.tk-hp i.on { background: var(--accent-activity); }

/* A bullet in flight: a small dot in the shooter's colour, gold-edged so
   it reads on the dark cells. */
.tk-cell.shot-you::after,
.tk-cell.shot-foe::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 30%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgb(25, 150, 25);
    box-shadow: 0 0 0 2px var(--bg-primary);
}

.tk-cell.shot-foe::after { background: rgb(204, 0, 0); }

/* The picked robot: a gold ring around it, a dark gap between. */
.tk-cell.is-picked .tk-bot {
    z-index: 1;
    box-shadow: 0 0 0 2px #1b222c, 0 0 0 4px var(--accent-gold);
}

.tk-cell.is-hit { background: var(--surface); }

.tk-cell.is-dead { background: #5a1a1a; }

/* ── The line under the board: what your robot is doing ── */
.tk-say {
    margin: 10px 0 0;
    min-height: 1.4em;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    text-align: center;
}

/* ── End of game ── */
.tk-over {
    margin: 10px 0;
    padding: 16px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--accent-gold);
    border-radius: 10px;
    text-align: center;
}

.tk-over-label {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-teal);
}

.tk-over.is-lost .tk-over-label { color: var(--danger); }

/* A guest who won Level 1: the next level is for members. The button is
   Lines 98's New game. */
.tk-join-say {
    margin: 12px 0 0;
    font-size: 1rem;
    color: var(--text-main);
}

.tk-join {
    display: block;
    width: 100%;
    margin: 12px 0 10px;
    padding: 12px 0;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--surface);
    background: var(--accent-teal);
    border: 2px solid var(--accent-teal);
    border-radius: 999px;
    box-sizing: border-box;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.tk-join:hover {
    background: #006666;
    border-color: #006666;
    color: var(--surface);
}

.tk-links {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin: 10px 0 4px;
}

.tk-link {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-teal);
}

@media (max-width: 600px) {
    .tk-stage {
        max-width: none;
        padding: 0 2px;
    }
}

@media (max-width: 480px) {
    .container { padding: 2px; }

    .tk-stage { padding: 6px 2px 10px; }

    .tk-board {
        gap: 2px;
        padding: 2px;
    }

    .tk-cell { border-radius: 3px; }

    .tk-strip {
        margin: 0 0 8px;
        padding: 8px;
        gap: 6px;
    }

    .tk-side-num { font-size: 1.6rem; }

    .tk-over { padding: 14px 8px; }
}