/* Stream Racers - the cup calendar as a poster wall. Chrome comes from
   lab/lab.css; this is the board itself. Vice '91 identity (owner,
   2026-10-01; designed on preview/vapor/): every cup is a poster with its
   venue's sign on top, so a week reads as a wall of nights out rather than a
   table of fixtures. The old .cal-* rows in lab.css are no longer drawn here. */

/* ===== the masthead ===== */
.news-head { margin-top: 22px; }
.news-head h2 { font-size: 44px; letter-spacing: 4px; line-height: 1; }
/* the week's count as a readout, not a footnote */
.news-head .tank-note {
    padding: 3px 12px 4px;
    background: var(--ink-2);
    border: 3px solid var(--stroke);
    border-radius: 10px;
    color: #c9bce3;
}
.news-head .live-now { font-weight: normal; color: #ff2d95; }
.live-now::before {
    content: ''; display: inline-block;
    width: 9px; height: 9px; margin-right: 7px;
    border-radius: 50%; background: #ff2d95;
    box-shadow: 0 0 8px #ff2d95;
    vertical-align: 1px;
    animation: news-pulse 1.4s ease-in-out infinite;
}
@keyframes news-pulse { 50% { opacity: .35; } }

.news-note { max-width: 860px; }

/* ===== the week bar =====
   One plate holding everything that changes what is on the wall. Every part of
   it has a fixed footprint - the label a set width, the chip counts a set
   width - so paging through weeks never walks the arrows out from under the
   pointer. */
.week-nav {
    gap: 10px 12px;
    padding: 9px 12px;
    background: var(--ink-2);
    border: 3px solid var(--stroke);
    border-radius: 14px;
}
.week-step { display: flex; align-items: center; gap: 8px; }
.week-nav .week-step .btn { margin-left: 0; width: 44px; padding: 4px 0; text-align: center; }
.week-label { min-width: 0; width: 262px; text-align: center; line-height: 1.05; }
.week-label b { font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-label span { font-size: 15px; color: #22e4ff; }
.week-nav #week-now { margin-left: 0; font-size: 18px; padding: 4px 14px; }
.week-nav .filter-row { margin-left: auto; }
.week-nav .filter-label { flex: 0 0 auto; }
.week-nav .filter-row .chip { letter-spacing: 1px; padding: 2px 10px; }
/* the selected filter is "where am I", which in this identity is cyan */
#filter-class .chip.on { background: #22e4ff; border-color: #22e4ff; color: #10101a; }
#filter-class .chip i {
    display: inline-block; min-width: 2ch;
    font-style: normal; text-align: right;
    font-variant-numeric: tabular-nums;
    color: #ffd23f;
}
#filter-class .chip.on i { color: #10101a; }

/* ===== a day ===== */
.day-block { margin-bottom: 22px; }
.day-head .tally { white-space: nowrap; }
.day-head h3 { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.day-head h3 small { font-size: 19px; letter-spacing: 2px; color: var(--dim); }
/* today stays gold even with nothing on it: it is where the reader is */
.day-block.today .day-head h3,
.day-block.today.quiet .day-head h3 { color: #ffd23f; text-shadow: 0 0 12px rgba(255, 210, 63, .45); }
.day-block.today .day-head h3 small { color: #ffd23f; }
.day-block.today .day-head .rule { background: linear-gradient(90deg, #ffd23f, var(--line) 60%); }
.today-tag {
    align-self: center;
    font-style: normal; font-size: 14px; letter-spacing: 2px;
    padding: 1px 8px 2px;
    background: #ffd23f; color: #170e2e;
    border: 2px solid var(--stroke); border-radius: 6px;
    text-shadow: none;
}
/* A past day used to fade as a whole. The posters on it now say "OVER" and
   grey their own signs, which is clearer than a block at half strength - and a
   whole day of faded posters read as broken art. */
.day-block.past { opacity: 1; }
.day-block.past .day-head h3 { color: #6f6390; }
.day-block.quiet .day-head h3 small { color: #4e4278; }
/* an empty space on the wall, not a sentence */
.day-none {
    padding: 7px 14px 8px;
    border: 2px dashed #2f2350;
    border-radius: 12px;
    color: #5e4e8c;
}

/* ===== the wall ===== */
.cup-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.cup {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0;
    padding: 8px 8px 10px;
    background: linear-gradient(180deg, #261845, var(--ink-2) 46%);
    border: 3px solid var(--stroke);
    border-radius: 16px;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
}
/* No hover on the poster itself: the card is not a link, only its crate and
   its button are, and a lit border promised a click that did nothing. */
/* the one worth acting on right now: same stroke, lit */
.cup.live {
    border-color: #ff2d95;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 22px rgba(255, 45, 149, .42);
}

/* The sign. container-type lets the sky chip below be sized in the SVG's own
   units (cqw = 1% of the sign's width), so it matches the chip the plate draws
   for itself at every width the wall is shown at. */
.cup-art { position: relative; container-type: inline-size; }
.cup-art svg { display: block; width: 100%; height: auto; }
.cup-sky {
    position: absolute;
    /* plate units: right edge at 308 of 320, top at 10 of 112, 20 tall */
    right: 12px; top: 10px; height: 22px; padding: 0 8px;
    right: 3.75cqw; top: 3.125cqw; height: 6.25cqw; padding: 0 2.5cqw;
    display: flex; align-items: center;
    font-size: 14px; font-size: 4.375cqw;
    letter-spacing: 1px; letter-spacing: .3125cqw;
    line-height: 1; white-space: nowrap;
    background: rgba(11, 7, 22, .82); color: #fff;
    border-radius: 6px; border-radius: 1.875cqw;
    pointer-events: none;
}

.cup-when { display: flex; align-items: baseline; gap: 7px; padding: 2px 4px 0; line-height: 1; }
.cup-when b { font-size: 27px; font-weight: normal; letter-spacing: 1px; color: #ffd23f; }
.cup-when span { font-size: 18px; letter-spacing: 1px; color: var(--dim); }
.cup-state {
    margin-left: auto; align-self: center;
    font-style: normal; font-size: 15px; letter-spacing: 2px;
    color: var(--dim); white-space: nowrap;
}
.cup.live .cup-state {
    padding: 1px 8px 2px;
    background: #ff2d95; color: #fff;
    border: 2px solid var(--stroke); border-radius: 6px;
}
.cup.live .cup-state::before {
    content: ''; display: inline-block;
    width: 7px; height: 7px; margin-right: 6px;
    border-radius: 50%; background: #fff;
    vertical-align: 1px;
    animation: news-pulse 1.4s ease-in-out infinite;
}

.cup-chan {
    padding: 0 4px;
    font-size: 25px; letter-spacing: 1px; line-height: 1.05; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cup-terms { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 4px; }
.cup-terms span {
    padding: 1px 7px 2px;
    font-size: 14px; letter-spacing: 1px; color: #c9bce3;
    background: var(--ink-3);
    border: 1px solid var(--line); border-radius: 6px;
}

/* the ticket stub: what it pays, and the way in */
.cup-foot {
    display: flex; align-items: center; gap: 10px;
    margin-top: auto;
    padding: 9px 4px 0;
    border-top: 2px dashed var(--line);
}
.cup-prize {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: 9px;
    padding: 0; margin: 0;
    background: none; border: 0; border-radius: 6px;
    font: inherit; color: inherit; text-align: left;
}
button.cup-prize { cursor: pointer; }
.cup-crate {
    flex: 0 0 auto; width: 72px; height: auto;
    image-rendering: auto;          /* 452px of anti-aliased art, fitted */
    border: 2px solid #000; border-radius: 5px;
}
.cup-prize-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.cup-prize-text b {
    font-size: 18px; font-weight: normal; letter-spacing: 1px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cup-prize-text span {
    font-size: 13px; letter-spacing: 1px; color: #8f80b5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
button.cup-prize:hover .cup-prize-text b { color: #22e4ff; }
button.cup-prize:hover .cup-crate { border-color: #22e4ff; }
.cup-prize.won .cup-prize-text b { color: #8bd427; }
.cup-prize.won .cup-prize-text span { color: #6f9e4a; }

.cup-go {
    flex: 0 0 auto;
    padding: 3px 14px 4px;
    font-size: 18px; letter-spacing: 2px; line-height: 1.1;
    border: 2px solid #ff2d95; border-radius: 9px;
    color: #ff7ac8;
}
.cup-go:hover { background: rgba(255, 45, 149, .14); color: #fff; }
/* live, it is THE button on the wall: the house call to action */
.cup.live .cup-go {
    border: 3px solid var(--stroke);
    background: linear-gradient(180deg, #ff4fa6, #d61a7a 55%, #a3106a);
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 45, 149, .45);
}
.cup.live .cup-go:hover { filter: brightness(1.14); }

.cup-champ { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; max-width: 45%; }
.cup-champ span { font-size: 12px; letter-spacing: 2px; color: #7c6ea0; }
.cup-champ b {
    max-width: 100%;
    font-size: 18px; font-weight: normal; letter-spacing: 1px; color: #8bd427;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cup-prize:focus-visible, .cup-go:focus-visible { outline: 2px solid #22e4ff; outline-offset: 3px; }

/* over: the sign greys and the stub steps back, the result stays readable */
.cup.past { background: var(--ink-2); box-shadow: none; }
/* on the whole sign, so the CLEAR / ANY SKY chip laid over it greys with it
   the way the plate's own chips do */
.cup.past .cup-art { filter: saturate(.3) brightness(.72); }
.cup.past .cup-when b { color: #9d8fc0; }
.cup.past .cup-chan { color: #c9bce3; }
.cup.past .cup-terms, .cup.past .cup-prize { opacity: .65; }

/* ===== a phone ===== */
@media (max-width: 760px) {
    .news-head { flex-wrap: wrap; row-gap: 8px; }
    .news-head h2 { flex: 1 0 100%; font-size: 36px; letter-spacing: 3px; }
    .news-head .rule { display: none; }
    .news-head .tank-note { font-size: 17px; }

    /* the arrows and the week on one line, then the class filter under its
       label, with the way back to this week opposite the label */
    .week-nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "step step" "label now" "chips chips";
        gap: 8px 10px;
        padding: 9px 10px 11px;
    }
    .week-step { grid-area: step; }
    /* width from the row, never from the text, so the arrows hold still */
    .week-label { flex: 1 1 0; width: auto; }
    .week-label b { font-size: 19px; letter-spacing: 1px; }
    .week-nav #week-now { grid-area: now; font-size: 16px; padding: 2px 12px; }
    .week-nav .filter-row { display: contents; }
    .week-nav .filter-label { grid-area: label; align-self: end; }
    .week-nav .chips { grid-area: chips; gap: 6px; }

    .day-head h3 { font-size: 22px; }
    .day-head h3 small { font-size: 17px; }
    .cup-wall { grid-template-columns: minmax(0, 1fr); gap: 14px; }

    /* The crate sheet (crates.js, lab.css) was laid out for the studio on a
       desk. Opened from a poster on a phone, its one-line head squeezed the
       blurb into a word per line and pushed CLOSE off the edge: here the
       blurb takes a line of its own under the name. */
    #crate-sheet { padding: 12px; }
    #crate-sheet .sheet-head { flex-wrap: wrap; gap: 6px 10px; }
    #crate-sheet .sheet-head img { width: 96px; }
    #crate-sheet .sheet-head b { font-size: 22px; }
    #crate-sheet .sheet-head span { order: 3; flex: 1 0 100%; font-size: 15px; }
}

/* The small phones (360 and under). At 390 everything fits; below it the
   week's range lost its end to an ellipsis and a long day heading pushed its
   count onto two lines. Tighter type rather than wrapping, so a week whose
   label is longer than the last one still cannot change the bar's height. */
@media (max-width: 380px) {
    .week-nav .week-step .btn { width: 36px; }
    .week-label b { font-size: 16px; letter-spacing: 0; }
    .day-head { gap: 8px; }
    .day-head h3 { font-size: 20px; letter-spacing: 2px; gap: 6px; }
    .day-head h3 small { font-size: 15px; letter-spacing: 1px; }
    .day-head .tally { font-size: 15px; letter-spacing: 1px; }
    .today-tag { font-size: 12px; padding: 0 6px 1px; }
    .cup-crate { width: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    .live-now::before, .cup.live .cup-state::before { animation: none; }
}