/* The campaign strip on the landing page, and the campaign cards on the
   archive. Both wear the campaign's own accent, which arrives as --cs-accent
   on the element itself -- so nothing here hard-codes a colour that belongs
   to an event rather than to the site. */

.campaign-strip {
    --cs-accent: #c0392b;
    position: relative;
    width: min(980px, 100%);
    margin: 0 auto 2rem;
    border: 1px solid color-mix(in srgb, var(--cs-accent) 45%, transparent);
    border-radius: 16px;
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 12% -10%,
                        color-mix(in srgb, var(--cs-accent) 26%, transparent) 0%,
                        transparent 62%),
        var(--panel, #14161c);
}

/* A banner, when the campaign has one. Set as an inline background by the
   page, so a campaign without one costs no request. */
.campaign-strip.has-banner { background-size: cover; background-position: center; }
.campaign-strip.has-banner .cs-body {
    background: linear-gradient(to right,
                rgba(8, 9, 12, 0.94) 0%,
                rgba(8, 9, 12, 0.86) 55%,
                rgba(8, 9, 12, 0.55) 100%);
}

.cs-body { padding: 1.5rem 1.6rem 1.4rem; }

.cs-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-accent);
    margin-bottom: 0.45rem;
}

.cs-name {
    margin: 0 0 0.35rem;
    font-size: clamp(1.35rem, 3.4vw, 1.9rem);
    line-height: 1.15;
    text-wrap: balance;
}

.cs-headline {
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: var(--text, #e8e8ea);
}

.cs-story {
    margin: 0 0 0.9rem;
    max-width: 62ch;
    color: var(--muted, #a0a2ab);
    line-height: 1.55;
}

/* ----- the clan bar ---------------------------------------------------- */
.cs-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.9rem;
    max-width: 62ch;
}

.cs-track {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cs-accent) 16%, transparent);
    overflow: hidden;
}

.cs-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--cs-accent);
    transition: width 0.6s ease;
}

.cs-bar-label {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted, #a0a2ab);
    white-space: nowrap;
}

.cs-bar.is-complete .cs-bar-label { color: var(--cs-accent); font-weight: 600; }

/* ----- the doors ------------------------------------------------------- */
.cs-doors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.9rem;
}

.cs-door {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--cs-accent) 35%, transparent);
    border-radius: 10px;
    font-size: 0.82rem;
    background: color-mix(in srgb, var(--cs-accent) 10%, transparent);
}

.cs-door-num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cs-accent);
}

/* A door that has not opened says its number and nothing else -- the whole
   point of an advent calendar is not knowing yet. */
.cs-door.is-shut {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--muted, #a0a2ab) 40%, transparent);
    background: none;
    color: var(--muted, #a0a2ab);
}

.cs-door.is-shut .cs-door-num { color: var(--muted, #a0a2ab); }

.cs-when {
    margin: 0 0 0.9rem;
    font-size: 0.85rem;
    color: var(--muted, #a0a2ab);
}

.cs-go {
    display: inline-block;
    padding: 0.55rem 1.05rem;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    color: #0b0c10;
    background: var(--cs-accent);
}

.cs-go:hover { filter: brightness(1.1); }
.cs-go:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 3px; }

@media (max-width: 640px) {
    .cs-body { padding: 1.2rem 1.1rem; }
    .campaign-strip.has-banner .cs-body {
        background: linear-gradient(to bottom,
                    rgba(8, 9, 12, 0.9) 0%, rgba(8, 9, 12, 0.94) 100%);
    }
}

/* ===========================================================================
   The campaign page: the board somebody actually plays on.
   The strip above is the same component the landing page uses; everything
   below is this page's own.
   ======================================================================== */

.campaign-main {
    width: min(1040px, 100% - 2rem);
    margin: 0 auto;
    padding: 2rem 0 4rem;
}

.campaign-main .cs-name { font-size: clamp(1.6rem, 4.5vw, 2.2rem); }

/* The whole story, not the one line the landing strip shows. */
.campaign-main .cs-story { max-width: 68ch; white-space: pre-wrap; }

.signed-out { margin: 0 0 1.5rem; }

/* ----- your team, your score, your rerolls ----------------------------- */
.yours {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}

.yours-team {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
}

.yours-team::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--team, transparent);
}

/* ----- the board ------------------------------------------------------- */
.tile-board { display: grid; gap: 0.6rem; margin-bottom: 1rem; }

.tile-board.is-grid {
    grid-template-columns: repeat(var(--across, 5), minmax(0, 1fr));
}

.tile-board.is-list {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-height: 7.5rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--line, #262a33);
    border-radius: 12px;
    background: var(--panel, #14161c);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.tile:hover { border-color: var(--cs-accent, #c0392b); transform: translateY(-2px); }
.tile:focus-visible { outline: 2px solid var(--cs-accent, #c0392b); outline-offset: 2px; }

/* A square with nothing on it. Still drawn, so the grid keeps its shape. */
.tile.is-empty {
    border-style: dashed;
    background: none;
    cursor: default;
    min-height: 7.5rem;
}

.tile.is-done {
    border-color: color-mix(in srgb, #3aa655 60%, transparent);
    background: linear-gradient(color-mix(in srgb, #3aa655 12%, transparent),
                                transparent) var(--panel, #14161c);
}

.tile.is-part { border-color: color-mix(in srgb, #e8b64c 55%, transparent); }

.tile.is-shut { opacity: 0.55; cursor: default; }

.tile.is-rerolled {
    opacity: 0.5;
    border-style: dashed;
}

.tile.is-rerolled .tile-title { text-decoration: line-through; }

.tile-emoji { font-size: 1.25rem; line-height: 1; }
.tile-emoji img { width: 1.25rem; height: 1.25rem; vertical-align: -0.2em; }

.tile-title { font-weight: 600; line-height: 1.25; }

.tile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: auto;
}

.tile-why { font-size: 0.78rem; color: var(--muted, #a0a2ab); }

/* ----- what you have sent in ------------------------------------------- */
.my-entries { display: flex; flex-direction: column; gap: 0.35rem; }

.my-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--line, #262a33);
    border-left-width: 3px;
    border-radius: 10px;
    background: var(--panel, #14161c);
}

.my-entry.is-pending { border-left-color: #e8b64c; }
.my-entry.is-approved { border-left-color: #3aa655; }
.my-entry.is-denied { border-left-color: #c0392b; }

.my-what { font-weight: 600; }
.my-status { margin-left: auto; font-size: 0.85rem; color: var(--muted, #a0a2ab); }
.my-note { flex-basis: 100%; font-size: 0.85rem; color: var(--muted, #a0a2ab); }

.standing.is-mine { border-color: color-mix(in srgb, var(--cs-accent, #c0392b) 60%, transparent); }

/* The screenshot, once it has gone up. */
.te-preview { max-width: 100%; border-radius: 10px; margin: 0.5rem 0; }

/* ===========================================================================
   The advent calendar.

   A Christmas campaign is not a board with tiles on it. Each activity is a
   door: shut until its day, swung open with a click, and drawn open ever
   after because the opening is written against the person's Discord id.

   The flap is a real element rotated in 3D over the task behind it; the
   pattern on the paper is dealt by day number, so a door keeps its colour
   however the grid wraps.
   ======================================================================== */

.advent {
    display: grid;
    /* Fixed columns, set by the page: the door count and the spans are
       chosen so the cells divide these exactly, and the calendar hangs as a
       full rectangle rather than trailing off. */
    grid-template-columns: repeat(var(--across, 6), minmax(0, 1fr));
    grid-auto-rows: 106px;
    grid-auto-flow: dense;
    gap: 0.6rem;
    margin-bottom: 1rem;
    perspective: 1400px;
}

.advent-door {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    perspective: 640px;
    animation: door-in 0.4s ease backwards;
    animation-delay: calc(var(--i, 0) * 25ms);
}

@keyframes door-in { from { opacity: 0; transform: translateY(8px); } }

.advent-door:focus-visible {
    outline: 2px solid var(--cs-accent, #c0392b);
    outline-offset: 3px;
    border-radius: 14px;
}

.advent-door.is-wide { grid-column: span 2; }
.advent-door.is-tall { grid-row: span 2; }
.advent-door.is-big { grid-column: span 2; grid-row: span 2; }

/* A tall door has headroom a single does not, so its face grows into it. */
.advent-door.is-tall .door-gift { font-size: 2rem; }
.advent-door.is-tall .door-task { max-height: 3.6em; }

/* ----- what is behind the flap ----------------------------------------- */
/* Still a door once it is open: the frame keeps the wrap's colour and the
   day number stays in the corner, so an opened calendar reads as a calendar
   rather than as a wall of plain tiles. */
.door-inside {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--paper, #444) 60%, var(--line, #262a33));
    border-radius: 14px;
    background:
        linear-gradient(color-mix(in srgb, var(--paper, #c0392b) 18%, transparent),
                        transparent 75%),
        var(--panel, #14161c);
    text-align: center;
    overflow: hidden;
}

.door-day {
    position: absolute;
    top: 0.25rem;
    left: 0.45rem;
    font-size: 0.85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--paper, #888) 65%, #fff);
}

.door-gift { font-size: 1.5rem; line-height: 1; }
.door-gift img { width: 1.5rem; height: 1.5rem; vertical-align: -0.2em; }

.door-task {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
}

.door-meta { font-size: 0.7rem; color: var(--muted, #a0a2ab); }

.door-won {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #3aa655;
}

.advent-door.is-big .door-gift { font-size: 2.2rem; }
.advent-door.is-big .door-task { font-size: 0.95rem; max-height: 3.6em; }

/* ----- the flap itself -------------------------------------------------- */
.door-flap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    border-radius: 14px;
    transform-origin: left center;
    backface-visibility: hidden;
    transition: transform 0.85s cubic-bezier(0.32, 0, 0.18, 1);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.14),
        0 2px 8px rgba(0, 0, 0, 0.35);
    color: #fff;
}

.door-num {
    font-size: 1.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.advent-door.is-big .door-num { font-size: 2.6rem; }

.door-merry {
    font-size: 0.9rem;
    font-weight: 800;
    transform: rotate(-5deg);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* The paper: six festive wraps, dealt by day number. --paper is the wrap's
   base colour, and the inside borrows it so an opened door keeps its place
   in the pattern. */
.advent-door.v0 { --paper: #a4262f; }
.advent-door.v0 .door-flap {
    background:
        radial-gradient(rgba(255, 255, 255, 0.26) 2px, transparent 2.6px)
        0 0 / 18px 18px, var(--paper);
}
.advent-door.v1 { --paper: #1e5a38; }
.advent-door.v1 .door-flap {
    background:
        radial-gradient(rgba(255, 255, 255, 0.18) 1.6px, transparent 2.1px)
        0 0 / 14px 14px, var(--paper);
}
.advent-door.v2 { --paper: #b3a37e; }
.advent-door.v2 .door-flap {
    background:
        repeating-linear-gradient(45deg,
            rgba(164, 38, 47, 0.18) 0 10px, transparent 10px 22px), #e6d7bb;
    color: #57241f;
}
.advent-door.v2 .door-num,
.advent-door.v2 .door-merry { text-shadow: none; }
.advent-door.v3 { --paper: #7f1d24; }
.advent-door.v3 .door-flap {
    background:
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.1) 0 8px, transparent 8px 20px), var(--paper);
}
.advent-door.v4 { --paper: #24463a; }
.advent-door.v4 .door-flap {
    background:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.07) 0 12px, transparent 12px 26px), var(--paper);
}
.advent-door.v5 { --paper: #b3372f; }
.advent-door.v5 .door-flap {
    background:
        repeating-linear-gradient(60deg,
            rgba(255, 255, 255, 0.2) 0 9px, transparent 9px 24px), var(--paper);
}

/* ----- the states -------------------------------------------------------- */
/* Not its day yet: the wrap goes dull, and a click only rattles it. */
.advent-door.is-shut .door-flap { filter: saturate(0.3) brightness(0.62); }
.advent-door.is-shut { cursor: default; }

.advent-door.is-ready:hover .door-flap { transform: rotateY(-12deg); }

/* Mid-swing it opens right out; opened, it settles ajar -- flap still there
   at an angle, number still on it, so the calendar keeps looking like one. */
.advent-door.is-opening,
.advent-door.is-ready:hover { z-index: 2; }

.advent-door.is-opening .door-flap {
    transform: rotateY(-110deg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.advent-door.is-opened .door-flap {
    transform: rotateY(-64deg);
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    /* Quicker than the opening swing: a peek should follow the pointer. */
    transition-duration: 0.3s;
}

/* A closer look without a click: hovering an opened door swings the flap
   right out of the way, and the pin above the calendar holds every opened
   door that wide for reading the whole thing at once. */
.advent-door.is-opened:hover { z-index: 2; }

.advent-door.is-opened:hover .door-flap,
.advent.is-held .advent-door.is-opened .door-flap {
    transform: rotateY(-108deg);
}

.advent-door.is-opened:hover .door-inside {
    border-color: color-mix(in srgb, var(--paper, #c0392b) 90%, #fff);
}

/* The pin, riding on the section heading. */
.advent-hold {
    margin-left: 0.75rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--line, #262a33);
    border-radius: 999px;
    background: none;
    color: var(--muted, #a0a2ab);
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
    cursor: pointer;
}

.advent-hold:hover {
    border-color: var(--cs-accent, #c0392b);
    color: var(--text, #e8e8ea);
}

.advent-hold.is-on {
    border-color: var(--cs-accent, #c0392b);
    color: var(--cs-accent, #c0392b);
}

.advent-door.is-shaking { animation: door-shake 0.4s; }

@keyframes door-shake {
    20% { transform: translateX(-4px) rotate(-1.2deg); }
    40% { transform: translateX(4px) rotate(1.2deg); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.advent-note { margin: -0.4rem 0 1rem; font-size: 0.85rem; color: var(--muted, #a0a2ab); }

@media (max-width: 700px) {
    /* The rectangle holds on a phone too: the same columns, smaller cells.
       The task titles go -- a tap opens the door's own panel, and an emoji
       with a number reads better at this size than three lines of clipped
       text. */
    .advent { grid-auto-rows: 64px; gap: 0.35rem; }
    .door-num { font-size: 1.1rem; }
    .advent-door.is-big .door-num { font-size: 1.7rem; }
    .door-gift { font-size: 1.1rem; }
    .advent-door.is-big .door-gift { font-size: 1.5rem; }
    .door-task,
    .door-meta { display: none; }
    .advent-door.is-big .door-task { display: block; font-size: 0.75rem; }
    .door-day { font-size: 0.7rem; }
    .door-merry { font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .advent-door { animation: none; }
    .door-flap { transition-duration: 0.01s; }
    .advent-door.is-shaking { animation: none; }
}

/* ----- one bar per team ------------------------------------------------- */
.cs-teambars {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 0 0.9rem;
    max-width: 62ch;
}

.cs-teambar { display: flex; align-items: center; gap: 0.75rem; }

.cs-teambar-name {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 6.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.cs-teambar-name::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--team, #888);
}

.cs-teambar .cs-track { flex: 1; }
.cs-teambar .cs-fill { background: var(--team, var(--cs-accent, #c0392b)); }

/* ----- December: the calendar is the page -------------------------------- */
/* The hero strip belongs to the landing page. Here it shrinks to the spirit
   meter -- the shared bar in candy stripes -- and the calendar takes the top
   of the page with its heading centred over it. */

.cs-spirit .cs-body { padding: 1rem 1.4rem 0.9rem; text-align: center; }

.cs-spirit .cs-kicker {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
}

.cs-spirit .cs-bar,
.cs-spirit .cs-teambars {
    max-width: 560px;
    margin: 0 auto 0.4rem;
}

.cs-spirit .cs-track { height: 14px; }

/* Candy-striped, because it is December. */
.cs-spirit .cs-fill {
    background: repeating-linear-gradient(45deg,
        var(--cs-accent) 0 12px,
        color-mix(in srgb, var(--cs-accent) 45%, #fff) 12px 24px);
}

.cs-spirit .cs-when { margin: 0.3rem 0 0; }

/* The heading, centred over the calendar with its pin beside it. */
.is-christmas #board-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
}

/* What sits between the meter and the calendar keeps to the centre line. */
.is-christmas .yours,
.is-christmas .signed-out { justify-content: center; }

/* ----- signing in, two ways --------------------------------------------- */
.signed-out {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.signed-out .ghost {
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--line, #262a33);
    border-radius: 10px;
    background: none;
    color: var(--muted, #a0a2ab);
    font: inherit;
    cursor: pointer;
}

.signed-out .ghost:hover {
    color: var(--text, #e8e8ea);
    border-color: var(--cs-accent, #c0392b);
}

@media (max-width: 700px) {
    /* A five-wide grid on a phone is five unreadable columns. */
    .tile-board.is-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ===========================================================================
   The games played over the tiles.

   Battleship, the race and territory war reuse the tile grid; each dresses
   it in its own colours so the page says at a glance which game is on.
   ======================================================================== */

/* ----- mystery tiles ----------------------------------------------------- */
/* Face down: the day, a question mark, and nothing to read into. */
.tile.is-mystery {
    border-style: dashed;
    background:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.04) 0 10px, transparent 10px 20px),
        #14161d;
}

.tile-mystery-mark {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0.7;
}

/* ----- battleship --------------------------------------------------------- */
/* The grid as a sea chart: deep water, faint plotting lines, and the marks
   of the war over it. */
.bs-board {
    padding: 0.8rem;
    border-radius: 14px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px)
            0 0 / 100% 34px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px)
            0 0 / 34px 100%,
        radial-gradient(ellipse at 30% 15%, #0d2b45, #081826 75%);
}

.bs-status {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* Sunk ships in the tally: still there, but greyed and struck. */
.bs-count s { opacity: 0.35; text-decoration: none; filter: grayscale(1); }

.bs-verdict { width: 100%; text-align: center; font-weight: 700; }
.bs-verdict.is-won { color: #3aa655; }
.bs-verdict.is-lost { color: #e05252; }

.bs-cell { position: relative; }
.bs-cell .bs-mark { position: absolute; z-index: 1; font-size: 1rem; }
.bs-mark.bs-hit, .bs-mark.bs-miss { top: 0.3rem; right: 0.35rem; }
.bs-mark.bs-miss { opacity: 0.8; }
.bs-mark.bs-anchor { bottom: 0.3rem; right: 0.35rem; }

/* Your own hull under this square, marked so a glance reads the danger. */
.bs-cell.bs-own { box-shadow: inset 0 0 0 2px rgba(122, 178, 255, 0.35); }

/* ----- the tile race ------------------------------------------------------ */
.race-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6rem;
}

.race-banner {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cs-accent, #c0392b) 14%, transparent);
    font-weight: 600;
}

/* Stones you are not standing on are part of the scenery. */
.race-stone { position: relative; padding-top: 1.7rem; }
.race-stone:not(.is-here):not(.race-finish) { opacity: 0.72; cursor: default; }
.race-stone.is-here {
    opacity: 1;
    outline: 2px solid var(--cs-accent, #c0392b);
    outline-offset: 2px;
}

.race-num {
    position: absolute;
    top: 0.35rem;
    left: 0.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.race-slide {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
}
.race-slide.is-ladder { color: #3aa655; }
.race-slide.is-snake { color: #e05252; }

.race-pawns {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    min-height: 1rem;
}
.race-pawn { color: var(--team, #888); font-size: 1rem; line-height: 1; }
.race-pawn.is-me {
    color: var(--cs-accent, #c0392b);
    text-shadow: 0 0 6px currentColor;
}
.race-others { font-size: 0.75rem; color: var(--muted, #a0a2ab); }

.race-finish {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 2px dashed color-mix(in srgb, var(--cs-accent, #c0392b) 55%, transparent);
    border-radius: 12px;
    font-weight: 700;
}

/* ----- territory war ------------------------------------------------------ */
.tw-status {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 0.4rem;
}

.tw-total {
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--team, #888);
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--team, #888) 25%, transparent);
    font-size: 0.85rem;
}

.tw-domination { width: 100%; text-align: center; font-weight: 700; }

/* Held land wears its holder's colour; contested land stays plain. */
.tw-cell { position: relative; }
.tw-cell.tw-owned {
    box-shadow: inset 0 0 0 3px var(--owner);
    background:
        linear-gradient(color-mix(in srgb, var(--owner) 15%, transparent),
                        color-mix(in srgb, var(--owner) 15%, transparent)),
        #14161d;
}
.tw-cell.tw-mine {
    box-shadow: inset 0 0 0 3px var(--owner),
                0 0 10px color-mix(in srgb, var(--owner) 45%, transparent);
}

.tw-flag {
    position: absolute;
    top: 0.3rem;
    right: 0.4rem;
    filter: drop-shadow(0 1px 2px #000);
}

.tw-held, .tw-take { font-size: 0.72rem; color: var(--muted, #a0a2ab); }
.tw-held { color: var(--owner); font-weight: 600; }

/* A hunt's places behind a door, shown one to a page like a catalogue. The
   arrows go round; the count says how many are left rather than how many
   there are, because the ones already found are not pages any more. */
.spots { display: grid; gap: 0.55rem; margin: 0.7rem 0 0.4rem; }
.spots-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.spots-nav .ghost { padding: 0.3rem 0.8rem; font-size: 1.1rem; line-height: 1; }
.spots-image {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
}
.spots-clue { margin: 0; font-size: 1.05rem; line-height: 1.45; }