/* ============================================================
   Score7 — the product layer.

   The token files and the Fluent re-skin used to arrive here by
   @import. They are linked from App.razor instead, in the order
   they were imported in, so that every one of them is
   fingerprinted: @import hides a file from the asset manifest,
   and a stale token file next to fresh component CSS resolves
   every var() to nothing.
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--text-strong);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
}

p {
    margin: 0;
}

/* Orbitron is display only — score figures, card values, wordmark,
   banner eyebrows. Never running text. */
.s7-display {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
}

.s7-eyebrow {
    font-family: var(--font-sans);
    font-weight: var(--weight-semibold);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ---- Entry animation ----------------------------------------
   Fade with an 8-16px rise, once. No decorative loops anywhere. */
@keyframes s7-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.s7-enter {
    animation: s7-enter var(--duration-base) var(--ease-out) both;
}

/* Bar links. They live in pages rather than in TopBar itself, so they are styled
   globally: scoped component CSS would not reach them. */
.s7-topbar__link {
    font-size: 11.5px;
    font-weight: var(--weight-medium);
    color: var(--game-ink-soft);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.s7-topbar__link:hover {
    color: var(--text-strong);
}

.s7-topbar__note {
    font-size: 11px;
    color: var(--text-subtle);
}

/* ---- Bare messages: the 404 and the error page ---------------- */
/* Two pages, so global rather than scoped — the same reason the bar links are. */
.s7-message {
    max-width: var(--container-sm);
    margin: auto;
    padding: 40px 24px;
    text-align: center;
}

.s7-message__title {
    font-size: 18px;
    color: var(--game-ink);
}

.s7-message__body {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--neutral-600);
}

.s7-message__home {
    display: inline-block;
    margin-top: 20px;
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: var(--text-link);
}

.s7-message__home:hover {
    color: var(--text-link-hover);
}

/* ---- Layout -------------------------------------------------- */
/* One screen tall, always: the bar and the banner stay put and the body scrolls under them.
   A tablet flat on the table has no scrollbar to grab, so the chrome must not move. */
.s7-app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: var(--surface-page);
}

.s7-app__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    /* Spelled out, because leaving it at visible does not mean visible: a box that scrolls on
       one axis computes the other to auto. The body would then be a sideways scroller of its
       own, which the overflow-x on html and body below cannot reach into. */
    overflow-x: hidden;
    /* The end of a scroll is the home indicator's line, not the screen's. Screens that pin
       something to the bottom instead take this back and carry the inset there, so their own
       surface is what runs under it. */
    padding-bottom: var(--safe-bottom);
}

/* The app fills the screen, notch included, so the sides are given back in landscape — the
   blunt way, on the shell. A thin band of page colour beside a notch is what a phone does
   anyway; a number tile hidden under one is not. */
@media (orientation: landscape) {
    .s7-app {
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-toast);
    padding: 12px 20px calc(12px + var(--safe-bottom));
    background: var(--near-target-bg);
    border-top: 1px solid var(--warning-100);
    color: var(--near-target-text);
    font-size: 13px;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 8px;
    right: 12px;
    cursor: pointer;
}


/* ---- Tablet ---------------------------------------------------- */
/* The bar now carries the navigation, and between the phone rules and the desktop there was a
   band where it carried everything and fitted none of it: on an iPad in portrait the history's
   « Enregistré sur votre compte » ran to three lines and « Se déconnecter » to two.
   Both are the widest things on the bar and the two it can most afford to lose — the note is
   prose the banner underneath repeats, and signing out lives on « Mon compte », which the
   navigation reaches. Only where the navigation took the room. */
@media (max-width: 1023px) {
    .s7-topbar:has(.s7-topbar__nav) .s7-topbar__note,
    .s7-topbar:has(.s7-topbar__nav) .s7-account-pill form {
        display: none;
    }
}

/* ---- Phone ---------------------------------------------------- */
/* Nothing may push the document wider than the screen: a phone flat on the table has no
   sideways scroll to discover, so an overflow is simply a piece of the app you cannot reach. */
@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
    }

    .s7-app {
        max-width: 100vw;
    }

    /* One row was right while the bar carried a subtitle and at most one action. It now
       carries the way to every other screen, and four links plus the account pill plus the
       flag do not fit across a phone — they simply ran off the right edge, taking the pill
       and the flag with them. So the navigation drops to a row of its own, full width, and
       the bar above it keeps the lockup, the identity and the language. */
    .s7-topbar {
        flex-wrap: wrap;
        min-width: 0;
        row-gap: 10px;
    }

    .s7-topbar:has(.s7-topbar__nav) .s7-topbar__nav {
        order: 10;
        flex-basis: 100%;
        justify-content: space-between;
    }

    /* Prose, and the one thing here a phone can do without: the banner directly underneath
       says the same in more words, and the subtitle is the screen's own name repeated. Only
       where the navigation took the room — the round's bar keeps its subtitle, because there
       the subtitle is the round number and there is no navigation to make way for. */
    .s7-topbar:has(.s7-topbar__nav) .s7-topbar__subtitle {
        display: none;
    }

    .s7-topbar__subtitle {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Everything the thumb aims at, at the size a thumb needs. */
    .s7-topbar__link {
        display: inline-grid;
        place-items: center;
        min-height: 44px;
    }

    /* A pill is nowrap text, and min-width on a flex item defaults to auto, so a long one cannot
       shrink: it pushes whatever follows it clean off the right of a 375px screen. That is how
       "DONNEUR : JEAN-BAPTISTE" took Annuler — the way back from a mistyped card — with it. The
       dealer wears a mark now and no longer asks for the room, but any pill put up here would
       ask the same, and the bar sits outside the body that clips everything else.
       Unscoped because the pill is a component of its own and no page's scope reaches it. */
    .s7-topbar span.s7-pill {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;

        /* Block rather than the pill's own inline-flex: an ellipsis is a thing a block container
           does to inline content, and a flex container simply clips. The element selector is
           what carries this past the component's own scoped rule. */
        display: inline-block;
        line-height: 1.7;
    }
}

/* Ending a round: in the bar on a wide screen, in the body on a phone. Never both.
   Unscoped because both sit on a Fluent component, which never carries a page's scope. */
.s7-round__endround {
    display: none;
}

@media (max-width: 767px) {
    .s7-round__endround {
        display: block;
        width: 100%;
        margin-top: 10px;
    }

    .s7-bar__endround {
        display: none;
    }
}