/* Timefeud's board: one picture of rings, the AM and PM tabs, and the strip of steps below it.
   Only the site kit's tokens; you in blue, the opponent in red. */

.timefeud { display: grid; gap: var(--space-medium); }

/* The clock takes all the room the arena has, leaving the tabs in view below it. */
.table:has(.timefeud) { width: 100%; }
.clock-stage { position: relative; width: min(100%, calc(100dvh - 170px)); margin: 0 auto; }
.clock-board { display: block; width: 100%; aspect-ratio: 1; overflow: visible; }

/* -- The players: pills above the clock, each a presence ring and a name -- */

.players { display: flex; justify-content: space-between; gap: var(--space-medium); }
.player {
    display: inline-flex;
    align-items: center;
    gap: var(--space-small);
    padding: var(--space-small) var(--space-medium) var(--space-small) var(--space-small);
    border-radius: calc(var(--size-badge) / 2 + var(--space-small));
    background: var(--gray-2);
    font-weight: 600;
    opacity: var(--opacity-medium);
    transition: opacity var(--duration-fade) ease-out;
}
/* The side owing a move. */
.player.is-owed { opacity: 1; }
.player--you .player__name { color: var(--blue); }
.player--opponent .player__name { color: var(--red); }
.presence { width: var(--size-badge); height: var(--size-badge); }
.presence__track, .presence__fill { fill: none; stroke-width: 3; }
.presence__track { stroke: var(--gray-4); }
.player--you .presence__fill { stroke: var(--blue); }
.player--opponent .presence__fill { stroke: var(--red); }

/* -- A selected moment's orders: slices of a pie in the middle -- */

.order-slice { cursor: pointer; }
.order-slice__shape { fill: var(--gray-3); transition: fill var(--duration-quick) ease-out; }
.order-slice:hover .order-slice__shape { fill: var(--gray-4); }
.order-slice.is-chosen .order-slice__shape { fill: var(--blue); }
.order-slice.is-locked { cursor: default; opacity: var(--opacity-medium); }
.order-slice__label-path { fill: none; stroke: none; }
.order-slice__label { fill: var(--gray-5); font-size: 2.3px; text-anchor: middle; dominant-baseline: alphabetic; pointer-events: none; }
.order-slice__emoji { font-size: 5px; text-anchor: middle; dominant-baseline: alphabetic; pointer-events: none; }
.order-slice__destination { fill: var(--gray-6); font-size: 2.3px; text-anchor: middle; dominant-baseline: alphabetic; pointer-events: none; }
.order-slice.is-chosen .order-slice__label, .order-slice.is-chosen .order-slice__destination { fill: var(--white); }
.order-pie__title { fill: var(--gray-6); font-size: 2.2px; text-anchor: middle; dominant-baseline: alphabetic; pointer-events: none; }

/* A trip's one order, sabotage, centered in the clock over its middle. */
.actions { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-small); pointer-events: none; }
.actions[hidden] { display: none; }
.action { pointer-events: auto; }
.action--sabotage {
    width: calc(var(--size-avatar) * 3);
    height: calc(var(--size-avatar) * 3);
    border: 0;
    border-radius: 50%;
    background: var(--gray-3);
    color: var(--red);
    font-weight: 600;
}
.action--sabotage:hover { background: var(--gray-4); }
.action--sabotage.is-chosen { background: var(--red); color: var(--white); }
.action:disabled { opacity: var(--opacity-medium); }

/* -- The selected city in the middle -- */

.road { fill: none; stroke: var(--gray-4); stroke-width: 1; stroke-linecap: round; }
/* A POI is its emoji, centered on its place on the ring. */
.poi { font-size: 5px; text-anchor: middle; dominant-baseline: alphabetic; }
.road__length { fill: var(--gray-5); font-size: 2.2px; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--gray-1); stroke-width: 1.2px; }
.marker--you { fill: var(--blue); opacity: var(--opacity-strong); }
.marker--you.is-selected { opacity: 1; }
.marker--opponent { fill: var(--red); }

/* -- The ring of steps, open at the top where time starts and ends -- */

.clock-step { cursor: pointer; }
.clock-step__segment { fill: var(--gray-2); transition: fill var(--duration-quick) ease-out; }
.clock-step:hover .clock-step__segment { fill: var(--gray-3); }
/* Selected, an hour or a city is lighter: no border, so nothing shifts. */
.clock-step.is-selected .clock-step__segment { fill: var(--gray-4); }
.clock-step.is-selected .clock-step__number { fill: var(--gray-6); }
.clock-step__number { fill: var(--gray-5); font-size: 2.6px; text-anchor: middle; dominant-baseline: alphabetic; pointer-events: none; font-variant-numeric: tabular-nums; }
.clock-step__path { fill: none; stroke: none; }
.clock-step.is-ordered .clock-step__segment { fill: var(--blue); }
.clock-step.is-rewritten .clock-step__segment { animation: rewritten var(--duration-move) ease-out; }

/* -- Your path on lanes outside the ring -- */

.lane-piece { cursor: pointer; }
/* Every moment alike: one width, ending square where its hours' segments end, in your blue. */
.lane-piece__line, .lane-piece__seen { fill: none; stroke: var(--blue); stroke-width: 0.9; stroke-linecap: butt; opacity: var(--opacity-strong); transition: opacity var(--duration-quick) ease-out; }
/* Where you saw the opponent: an arc like yours just outside it, in red. */
.lane-piece__seen { stroke: var(--red); pointer-events: none; }
.lane-piece.is-selected .lane-piece__seen, .lane-piece.has-order .lane-piece__seen { opacity: 1; }
.lane-piece__target { fill: transparent; stroke: none; }
/* A drive has no moment: a thin line across the hours on the road. */
.lane-piece--drive { pointer-events: none; }
.lane-piece--drive .lane-piece__line { stroke-width: 0.4; }
/* A car is private: a fainter line. */
.lane-piece.is-private .lane-piece__line { opacity: var(--opacity-dim); }
/* The selected moment is a lighter blue at full strength; its width stays. */
.lane-piece.is-selected .lane-piece__line { opacity: 1; stroke: color-mix(in srgb, var(--blue) 50%, var(--white)); }
/* A moment with an order of yours: at full strength, like the selected one. */
.lane-piece.has-order .lane-piece__line { opacity: 1; }
.lane-piece.is-selected.has-order .lane-piece__line { stroke: color-mix(in srgb, var(--blue) 50%, var(--white)); }
.lane-piece__label-path { fill: none; stroke: none; }
.lane-piece__label-text { fill: var(--gray-5); font-size: 2px; text-anchor: middle; dominant-baseline: alphabetic; pointer-events: none; }
.lane-piece.is-selected .lane-piece__label-text, .lane-piece.has-order .lane-piece__label-text { fill: var(--gray-6); }
.lane-piece.is-ordered .lane-piece__line { opacity: 1; stroke: var(--white); }
.lane-piece.is-rewritten .lane-piece__line { animation: rewritten-line var(--duration-move) ease-out; }

/* -- The wavefront's hand during a replay -- */

.clock-hand__line { stroke: var(--gray-6); stroke-width: 0.4; stroke-linecap: round; opacity: var(--opacity-strong); }

@keyframes rewritten {
    from { fill: var(--gray-6); }
}
@keyframes rewritten-line {
    from { stroke: var(--gray-6); opacity: 1; }
}

/* -- The cities ring, inside the hours -- */

.clock-city { cursor: pointer; }
.clock-city__segment { fill: var(--gray-2); transition: fill var(--duration-quick) ease-out; }
.clock-city:hover .clock-city__segment { fill: var(--gray-3); }
.clock-city.is-selected .clock-city__segment { fill: var(--gray-4); }
.clock-city__name { fill: var(--gray-5); font-size: 2.3px; text-anchor: middle; dominant-baseline: alphabetic; pointer-events: none; }
.clock-city__path { fill: none; stroke: none; }
.clock-city.is-selected .clock-city__name { fill: var(--gray-6); }

/* -- AM and PM, the two halves of the timeline -- */

/* The tabs with send beside them. */
.timebar { display: flex; align-items: center; justify-content: center; gap: var(--space-large); }

/* A tab bar: the two tabs meet square in the middle and round off at the ends. */
.faces { display: flex; justify-content: center; }
.face {
    min-width: calc(var(--size-avatar) * 2);
    padding: var(--space-small) var(--space-medium);
    border: 0;
    border-radius: 0;
    background: var(--gray-2);
    color: var(--gray-5);
    font-size: var(--text-small);
    font-weight: 600;
}
.face:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.face:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.face.is-selected { background: var(--gray-4); color: var(--gray-6); }


/* -- Send, next to the tabs: sends your orders -- */

.send {
    display: grid;
    place-items: center;
    width: var(--size-avatar);
    height: var(--size-avatar);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--blue);
}
.send:hover:not(:disabled) { background: color-mix(in srgb, var(--blue) 80%, var(--white)); }
.send__symbol { width: var(--space-large); height: var(--space-large); fill: var(--white); }
.send:disabled { background: var(--gray-3); }
.send:disabled .send__symbol { fill: var(--gray-5); }
.clock-board__map.is-hidden { visibility: hidden; }

/* -- Every trip under way at the selected hour, between the cities -- */

.trip-line { fill: none; stroke: var(--gray-5); stroke-width: 0.5; stroke-linecap: round; }
/* Docked, waiting to leave: fainter, the emoji at its start. */
.trip-line--docked { opacity: var(--opacity-medium); }
.trip-line--own { stroke: var(--blue); stroke-width: 0.8; opacity: 1; }
.trip-arrow { fill: var(--gray-5); stroke: none; }
.trip-arrow.trip-line--own { fill: var(--blue); }
.trip-vehicle { font-size: 3.4px; text-anchor: middle; dominant-baseline: alphabetic; pointer-events: none; }

/* -- Where the selection is, over the middle inside the cities -- */

.location { fill: var(--gray-6); font-size: 2.2px; text-anchor: middle; dominant-baseline: alphabetic; pointer-events: none; }