/* ===========================================================================
 * Shared chrome for the daily games.
 *
 * The four games ship one stylesheet each and share no CSS, so anything common
 * would otherwise be pasted four times and drift. This file is the shared half:
 * it is loaded by legami, connessioni, lemmia and cifretto through extra_css.
 *
 * It deliberately does NOT live in public.css: that bundle is 14 bytes away
 * from the 16 KB gzip budget enforced by gate check 7, and these rules only
 * matter on five pages out of sixty-six.
 * =========================================================================== */

/* --- Above-the-fold game switcher ----------------------------------------
 * One row, directly above the board. It scrolls sideways instead of wrapping:
 * wrapping would cost a second or third row on a phone and push the game out
 * of the first screen, which is the exact problem this component exists to fix.
 */

.tools-game-switcher {
    display: flex;
    gap: var(--s-2);
    margin: 0 0 var(--s-4);
    padding-bottom: var(--s-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    /* `width: 0` plus `min-width: 100%` instead of the plain `width: auto` the
     * row would get by default. The shell lays the page out in a grid whose
     * content track is `1fr`, so its minimum is the min-content width of what it
     * holds: six chips that never wrap come to ~684px, and the whole document
     * would pick up a horizontal scrollbar on a phone. Measured on a 390px
     * viewport: 716px of page width before, 390px after. Zeroing the preferred
     * width takes the row out of that calculation, and the min-width puts it
     * back to the width of the container it actually sits in, so the overflow
     * stays inside the strip, which is where it is wanted. */
    width: 0;
    min-width: 100%;
}

.tools-game-switcher-item {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    background: var(--c-bg-card);
    color: var(--c-ink-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    scroll-snap-align: start;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tools-game-switcher-item svg {
    flex: 0 0 auto;
    opacity: 0.7;
}

a.tools-game-switcher-item:hover,
a.tools-game-switcher-item:focus-visible {
    border-color: var(--c-blue);
    color: var(--c-blue);
}

a.tools-game-switcher-item:hover svg,
a.tools-game-switcher-item:focus-visible svg {
    opacity: 1;
}

/* The page you are on: filled, and not a link. */
.tools-game-switcher-item[aria-current="page"] {
    border-color: var(--c-blue);
    background: var(--c-blue);
    color: #fff;
    cursor: default;
}

.tools-game-switcher-item[aria-current="page"] svg {
    opacity: 1;
}

.tools-game-switcher-hub {
    border-style: dashed;
}

/* --- End-of-game cross promo ---------------------------------------------
 * Rendered inside the stats modal, which is what opens when the daily puzzle
 * is over. Sits below the statistics, so it reads as "what now?" and not as an
 * advert competing with the result.
 */

.tools-cross-promo {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-line);
}

/* The block used to open on a single muted line, which read as a caption of the
 * statistics above rather than as a section of its own: players finished the
 * puzzle without registering that four other games existed. A real heading, in
 * ink and with the category icon, is what makes it a destination.
 */
.tools-cross-promo-heading {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0 0 var(--s-1);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-ink);
}

.tools-cross-promo-heading svg {
    flex: 0 0 auto;
    color: var(--c-blue);
}

.tools-cross-promo-title {
    margin: 0 0 var(--s-3);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--c-ink-mute);
}

/* One row per game, full width: in a modal a wrapped row of pills hides the
 * last entries below the fold of the box, and these are navigation targets,
 * not tags.
 */
.tools-cross-promo-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.tools-cross-promo-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    font-size: 0.875rem;
    line-height: 1.3;
    text-decoration: none;
    color: var(--c-ink);
    background: var(--c-bg-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tools-cross-promo-item:hover,
.tools-cross-promo-item:focus-visible {
    border-color: var(--c-blue);
    box-shadow: var(--shadow-sm);
}

.tools-cross-promo-item svg {
    flex: 0 0 auto;
    color: var(--c-blue);
}

.tools-cross-promo-item svg:last-child {
    margin-left: auto;
    color: var(--c-ink-mute);
}

.tools-cross-promo-name {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.tools-cross-promo-name strong {
    font-weight: 700;
}

.tools-cross-promo-name small {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--c-ink-mute);
}

/* --- End-of-round "what now" -----------------------------------------------
 * Sits under the result, inside the review on legami and inside the modal that
 * opens by itself on the others. The order is deliberate: another day of the
 * same game first, the other games after, because the player was enjoying the
 * one they just finished.
 */

.tools-endgame-next {
    margin-top: var(--s-5);
    /* Sudoku centres the body of its win modal, and the promo rows inherited it:
     * a list of navigation targets reads as a column, not as centred copy. The
     * block states its own alignment so it looks the same in all five games. */
    text-align: left;
}

.tools-endgame-again {
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-line);
}

.tools-endgame-again-text {
    margin: 0 0 var(--s-3);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--c-ink-mute);
}

.tools-endgame-again-btn {
    width: 100%;
    justify-content: center;
}

/* The promo already draws its own rule; a second one right above it would read
 * as an empty band between the two halves.
 */
.tools-endgame-again + .tools-cross-promo {
    margin-top: var(--s-4);
}

/* Archive picker, inside its own modal. Deliberately not a page of its own: the
 * archive is there for whoever finished today's puzzle and wants to keep
 * playing, not to create indexable surface.
 */
.tools-archive-sub {
    margin: 0 0 var(--s-3);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--c-ink-mute);
}

.tools-archive-row {
    display: flex;
    align-items: flex-end;
    gap: var(--s-3);
}

.tools-archive-row .tools-field {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* Shortcuts for the days a player is most likely to want. The date picker stays
 * the general answer; these cover the common case in one tap.
 */
.tools-archive-quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-3);
}

@media (max-width: 768px) {
    .tools-archive-row {
        flex-direction: column;
        align-items: stretch;
    }
}