/*
 * MAXIMA brand tokens for every player-facing screen.
 *
 * Source of truth: BrandGuide_MAXIMA LT final, version 3.0 (2022-01).
 *   p.13  primary colours   MAXIMA blue PANTONE 280 C = rgb(0,73,144)
 *                           MAXIMA red  PANTONE 485 C = rgb(223,26,34)
 *   p.14  supplementary palette, explicitly allowed "spaudoje bei
 *         skaitmeniniuose kanaluose", which is what this file is
 *   p.15  typefaces: web and mobile use Proxima Nova and Cronos Pro
 *   p.19  CTA button: pill shape, 50 px tall, Proxima Nova Bold 16 px,
 *         fill #df1a22 or #18478b, filled preferred over outlined
 *   p.28  on any non-white background the logo keeps a WHITE clear space
 *         on all four sides, hence the white .mx-bar
 *
 * Every screen used to carry its own copy of these seven variables, and the
 * copies had already drifted (#00498F, #DE1A21) plus an OZI yellow that is
 * not a MAXIMA colour at all. One file, one set of values.
 */

@font-face {
    font-family: "Cronos";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/cronos-display.woff2") format("woff2");
}

@font-face {
    font-family: "Cronos";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/cronos-bold.woff2") format("woff2");
}

@font-face {
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/proximanova-bold.woff2") format("woff2");
}

:root {
    /* Primary */
    --mx-blue: #004990;
    --mx-red: #DF1A22;

    /* Supplementary */
    --mx-dark: #001E3C;
    --mx-intens: #0B379A;
    --mx-azure: #0996D5;
    --mx-sky: #7BCCDF;

    /* The CTA fills are their own values in the guide, not the primaries. */
    --mx-cta-blue: #18478B;

    /* LED siena (/tablo, /tablo/piesinys). Renginio organizatoriai savo LED
       skydeliams naudoja tamsų mėlyną gradientą ir šviesią juostą antraštei
       (Soninis_Programa.mp4, Zemelapis_16x9.mp4, 2026-08-19). Jų kadruose
       nuskaitytos reikšmės suvestos į guide paletę, o ne paliktos kaip buvo:
         gradiento šviesuma  #1E4278 -> --mx-cta-blue  (dE 8.8, guide p.19)
         gradiento vidurys   #12294B -> --mx-dark      (dE 6.0, guide p.14)
         taškų žydra         #7ED6F5 -> --mx-sky       (dE 7.4, guide p.14)
       Dvi reikšmės guide'e neegzistuoja ir yra išvestos iš jo:
         --mx-sky-tint  = --mx-sky, praskiesta baltu iki 35 % (organizatorių juosta)
         --mx-wall-edge = --mx-dark, patamsinta; guide fono spalvų nevardija,
                          o be vinjetės 2432 px siena atrodo plokščia. */
    --mx-sky-tint: #D0ECF8;
    --mx-wall-edge: #00162C;

    /* Lygų spalvos yra MŪSŲ, ne brandbook'o (projekto CLAUDE.md). Čia jos
       kanoninės; ekranuose jos pašviesinamos arba patamsinamos pagal foną,
       ant kurio guli, nes ant tamsiai mėlynos #6B7C8C tiesiog nesimato. */
    --mx-gold: #C9992B;
    --mx-silver: #6B7C8C;
    --mx-bronze: #A9713F;

    /* Neutrals. Not in the guide, which names only white as a background
       colour, so these stay quiet and never compete with the brand blues. */
    --mx-panel: #F4F7FA;
    --mx-line: #DCE5EE;
    --mx-soft: #5A6B7D;
    --mx-ok: #1A7F37;

    --mx-font: "Cronos", "Segoe UI", Roboto, Arial, sans-serif;
    --mx-font-cta: "Proxima Nova", "Cronos", "Segoe UI", Roboto, Arial, sans-serif;

    /* Short aliases kept because the per-screen rules are written against
       them. Same names as before, corrected values. */
    --blue: var(--mx-blue);
    --dark: var(--mx-dark);
    --red: var(--mx-red);
    --sky: var(--mx-sky);
    --azure: var(--mx-azure);
    --soft: var(--mx-soft);
    --line: var(--mx-line);
    --panel: var(--mx-panel);
    --ok: var(--mx-ok);
}

/* White bar with the logo. This is the clear space the guide requires
   whenever the logo sits on anything other than white, and it is also how
   the client's own event site is built. */
.mx-bar {
    background: #fff;
    color: var(--mx-blue);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--mx-line);
}

.mx-bar img {
    height: 24px;
    width: auto;
    display: block;
    flex: none;
}

/* The title takes the slack, so any number of chips stack against the right
   edge with an even gap instead of each claiming its own auto margin.

   It is also the part that gives way when the row runs out of room. The chip
   says which team, which subgroup and which block, and it is set `nowrap`; on
   a 390 px phone the header used to grow past the screen and the whole page
   could be dragged sideways, cutting the order card off at both edges
   (Saulius, 2026-08-21). A flex item only shrinks below its content once
   `min-width` stops being `auto`. */
.mx-bar b {
    margin-right: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mx-font-cta);
    font-size: 15px;
    color: var(--mx-blue);
    line-height: 1.2;
}

/* Way back to the activity list.
   Until 2026-08-16 an activity screen had no exit at all: the only way out was
   the block clock reaching zero, so a subgroup that opened its station early
   sat trapped for twenty minutes (Saulius). The arrow sits left of the logo
   because that is where a thumb looks for it, and the word drops away on
   narrow phones so the station name keeps the room. */
.mx-bar .back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    margin-left: -4px;
    padding: 5px 9px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--mx-blue);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.mx-bar .back:active {
    background: var(--mx-panel);
}

.mx-bar .back .arrow {
    font-size: 19px;
    line-height: 1;
}

@media (max-width: 400px) {
    .mx-bar .back .label {
        display: none;
    }
}

/* The block clock chip is empty before the stage starts. An empty pill would
   just be a blue smudge next to the logo. */
.mx-bar .chip:empty {
    display: none;
}

/* Paskutinė atsarga: jei net ir sutrumpinta antraštė netelpa, juosta persilaužia
   į dvi eilutes. Horizontaliai puslapis nepasislenka niekada. */
.mx-bar {
    flex-wrap: wrap;
}

.mx-bar .chip {
    background: var(--mx-sky);
    color: var(--mx-dark);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* CTA. Shape and type are fixed by the guide; the width is ours, because a
   phone screen wants a full-width target. Padding stays at the specified
   36 px so a hug-content button still measures right. */
.mx-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 36px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--mx-cta-blue);
    color: #fff;
    font: 700 16px/1.2 var(--mx-font-cta);
    cursor: pointer;
}

.mx-cta--block {
    display: flex;
    width: 100%;
}

.mx-cta--red {
    background: var(--mx-red);
    color: #fff;
}

/* Outlined variant. The guide allows it but prefers the filled one, so it
   is only for the secondary action next to a filled button. */
.mx-cta--ghost {
    background: transparent;
    border-color: var(--mx-cta-blue);
    color: var(--mx-cta-blue);
}

/* On a dark background the guide shows red or white fills only. */
.mx-cta--onDark {
    background: #fff;
    color: var(--mx-cta-blue);
}

.mx-cta:disabled {
    opacity: .4;
}

/* A note the player must not miss: light blue band, dark text.
   Named -band, not -note: the login page already owns .mx-note. */
.mx-band {
    background: var(--mx-sky);
    color: var(--mx-dark);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 14px;
}