/* Lobby (start menu): obsidian glass, gold line-work, aether glow.
   Two views (#start-menu[data-view], set by UIManager.showLobbyView): "home" offers Solo or PvP, "setup" holds
   everything that one fight needs on a single page that does not scroll.
   Rules are scoped to #start-menu, #top-right-user-area and #start-overlay; the tokens in :root are
   shared with the in-game HUD (ui.css). */

/* Registered so the accent can transition when a faction is picked (see aether_flame.js). */
@property --aether {
    syntax: '<color>';
    inherits: true;
    initial-value: #3fe0d0;
}

:root {
    --gold: #f2c94c;
    --gold-hi: #fff1c1;
    --gold-dim: #cdb87f;
    --line: rgba(242, 201, 76, 0.26);
    --hair: rgba(255, 255, 255, 0.08);
    /* One superfamily: a roman cut with blackletter facets for the UI, its gothic sibling for the wordmark. */
    --font-ui: 'Grenze', Georgia, serif;
    --font-mark: 'Grenze Gotisch', 'Grenze', Georgia, serif;
    /* Console spacing follows viewport height so it fits short laptop screens without scrolling. */
    --gap: clamp(0.45rem, 1.4vh, 0.75rem);
    transition: --aether 1.2s ease;
}

#start-menu {
    /* Visible only when WebGL is unavailable; otherwise the flame canvas covers it. */
    background:
        radial-gradient(90% 70% at 22% 105%, color-mix(in srgb, var(--aether) 34%, transparent), transparent 70%),
        #07080c;
    font-family: var(--font-ui);
    overflow: hidden;
}

#top-right-user-area,
#start-overlay { font-family: var(--font-ui); }

#start-menu ::-webkit-scrollbar-track { background: transparent; }
#start-menu ::-webkit-scrollbar-thumb { background: rgba(242, 201, 76, 0.35); }

#aether-flame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Faction names drifting along the bottom edge, outlined so the flame shows through. The track
   holds the list twice and slides by half its width, which makes the loop seamless. */
.lobby-marquee {
    position: absolute;
    inset: auto 0 -0.1em 0;
    overflow: hidden;
    font-family: var(--font-mark);
    font-size: clamp(5rem, 15vh, 11rem);
    font-weight: 800;
    line-height: 0.8;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--gold) 24%, transparent);
}

.lobby-marquee > div {
    display: flex;
    gap: 0.6em;
    width: max-content;
    padding-right: 0.6em;
    animation: lobby-marquee 70s linear infinite;
}

@keyframes lobby-marquee {
    to { transform: translateX(-50%); }
}

/* ── Shell: wordmark above the stage, or beside it on wide screens. The stage is the home view or the console. ── */

.lobby-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: clamp(0.5rem, 2.5vh, 1.5rem);
    width: 100%;
    max-width: 1640px;
    padding-top: 2.75rem; /* clears the login buttons above the centred wordmark */
}

#start-menu[data-view="home"] .lobby-panel,
#start-menu[data-view="setup"] .lobby-home { display: none; }

.lobby-hero {
    container-type: inline-size;
    width: 100%;
    min-width: 0;
    text-align: center;
}

.lobby-wordmark {
    margin: 0;
    font-family: var(--font-mark);
    font-weight: 800;
    font-size: clamp(2rem, 3.6vw + 1.6vh, 3.75rem);
    line-height: 1;
    white-space: nowrap;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 26px color-mix(in srgb, var(--aether) 60%, transparent));
}

.lobby-wordmark span,
.mode-portal-name {
    display: inline-block;
    background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 42%, #b97f17 68%, #6f4506 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lobby-lore {
    display: none;
    max-width: 30rem;
    margin-top: clamp(1.5rem, 4.5vh, 3rem);
    text-shadow: 0 1px 12px #000, 0 0 2px #000;
}

#lobby-lore-title {
    margin: 0 0 0.6rem;
    font-size: clamp(1.2rem, 6cqw, 1.8rem);
    font-weight: 700;
    line-height: 1.15;
    text-wrap: balance;
    color: var(--gold-hi);
}

#lobby-lore-text {
    margin: 0;
    font-style: italic;
    font-size: clamp(1.05rem, 4.4cqw, 1.3rem);
    line-height: 1.45;
    color: #e6dfcc;
}

/* Lore carousel: arrows step through the factions, the discs overlap like a row of portraits. */
.lore-nav { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.25rem; }

.lore-nav button {
    display: grid;
    place-items: center;
    width: 2.4rem;
    aspect-ratio: 1;
    color: var(--gold-dim);
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: color 0.3s, border-color 0.3s, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lore-nav button:hover { color: var(--gold-hi); border-color: var(--gold); transform: scale(1.08); }
.lore-nav button:focus-visible { outline: 2px solid var(--aether); outline-offset: 2px; }

.lore-dots { display: flex; padding-left: 0.5rem; }

.lore-dots i {
    width: 1.5rem;
    aspect-ratio: 1;
    margin-left: -0.5rem;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7), transparent 46%), var(--flame);
    border: 2px solid #07080c;
    border-radius: 50%;
    opacity: 0.45;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s, box-shadow 0.5s;
}

.lore-dots i.on { z-index: 1; opacity: 1; transform: scale(1.3); box-shadow: 0 0 18px 1px var(--flame); }

/* ── Home: two portals, Solo and PvP ── */

.lobby-home {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    width: 100%;
    max-width: 1100px;
    min-height: 0;
}

#start-menu .mode-portal {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "icon icon" "name go" "text go";
    align-items: end;
    gap: 0.35rem 1rem;
    min-height: clamp(12rem, 44vh, 26rem);
    padding: clamp(1rem, 2.4vw, 2rem);
    text-align: left;
    color: #f3ead0;
    background: linear-gradient(180deg, rgba(22, 23, 32, 0.78), rgba(8, 9, 13, 0.94));
    border: 1px solid var(--line);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 90px -40px #000, 0 0 120px -50px var(--flame);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s, box-shadow 0.5s;
    animation: lobby-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards;
}

#start-menu .mode-portal + .mode-portal { animation-delay: 0.32s; }

/* The portal's own fire, banked low until it is hovered. */
#start-menu .mode-portal::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 85% at 82% 118%, color-mix(in srgb, var(--flame) 62%, transparent), transparent 70%),
        radial-gradient(60% 50% at 0% 0%, color-mix(in srgb, var(--flame) 14%, transparent), transparent 70%);
    opacity: 0.6;
    transform-origin: bottom right;
    transition: opacity 0.5s, transform 0.7s ease-out;
}

#start-menu .mode-portal:hover { border-color: var(--gold); transform: translateY(-3px); }
#start-menu .mode-portal:hover::before { opacity: 1; transform: scale(1.05); }
#start-menu .mode-portal:active { transform: scale(0.985); }
#start-menu .mode-portal:focus-visible { outline: 2px solid var(--aether); outline-offset: 2px; }

.mode-portal-icon {
    grid-area: icon;
    align-self: start;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--flame);
    filter: drop-shadow(0 0 14px var(--flame));
}

.mode-portal-name {
    grid-area: name;
    width: fit-content;
    font-family: var(--font-mark);
    font-size: clamp(2.75rem, 5vw + 2vh, 5.5rem);
    font-weight: 800;
    line-height: 0.95;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.9));
}

.mode-portal-text {
    grid-area: text;
    max-width: 24rem;
    font-style: italic;
    font-size: clamp(1rem, 1vw + 0.6vh, 1.3rem);
    line-height: 1.3;
    text-wrap: balance;
    color: #e6dfcc;
}

.mode-portal-go {
    grid-area: go;
    display: grid;
    place-items: center;
    width: 2.75rem;
    aspect-ratio: 1;
    font-size: 1.1rem;
    color: var(--gold-dim);
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: color 0.3s, border-color 0.3s, background-color 0.3s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mode-portal:hover .mode-portal-go { color: #1b1202; background: var(--gold); border-color: var(--gold-hi); transform: translateX(4px); }

.lobby-home-foot {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    animation: lobby-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.44s backwards;
}

.lobby-home-foot .game-btn { display: inline-flex; align-items: center; gap: 0.5rem; }

/* ── Console frame ── */

.lobby-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    min-height: 0;
    max-height: calc(100vh - 8rem);
    max-height: calc(100dvh - 8rem);
    background: linear-gradient(180deg, rgba(17, 19, 28, 0.72), rgba(7, 8, 12, 0.9));
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    border: 1px solid var(--line);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 40px 90px -30px #000,
        0 0 120px -40px var(--aether);
}

/* Gold corner brackets just outside the frame. */
.lobby-panel::before {
    content: '';
    position: absolute;
    inset: -7px;
    pointer-events: none;
    --b: linear-gradient(var(--gold), var(--gold));
    background:
        var(--b) top left / 22px 1px, var(--b) top left / 1px 22px,
        var(--b) top right / 22px 1px, var(--b) top right / 1px 22px,
        var(--b) bottom left / 22px 1px, var(--b) bottom left / 1px 22px,
        var(--b) bottom right / 22px 1px, var(--b) bottom right / 1px 22px;
    background-repeat: no-repeat;
}

/* The page is laid out to fit; it only scrolls on a screen too short for even the smallest layout. */
.lobby-scroll {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-height: 0;
    padding: clamp(0.75rem, 1.6vw, 1.5rem);
    overflow-y: auto;
}

/* Back to the home view, and which fight this page sets up. */
.lobby-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: var(--gap);
    border-bottom: 1px solid var(--hair);
}

#btn-lobby-back { display: inline-flex; align-items: center; gap: 0.35rem; padding-left: 0.4rem; }

.lobby-title {
    margin: 0;
    font-family: var(--font-mark);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--gold-hi);
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--aether) 60%, transparent));
}

/* ── Console grid: named areas, every row is full. One fight, one page: the cells of the other way to play
   are not there (UIManager.selectMode sets data-mode). ── */

.lobby-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "factions" "mode" "launch";
}

#lobby-selection[data-mode="pvp"] { grid-template-areas: "factions" "rooms" "launch"; }
#lobby-selection[data-mode="solo"] .lobby-rooms,
#lobby-selection[data-mode="pvp"] .lobby-mode { display: none; }

.lobby-factions { grid-area: factions; }
.lobby-mode { grid-area: mode; }
.lobby-rooms { grid-area: rooms; }
.lobby-launch { grid-area: launch; }

.lobby-cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(0.55rem, 1.6vh, 1.1rem) clamp(0.7rem, 1.8cqw, 1.1rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--hair);
}

.lobby-cell h2,
.lobby-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 var(--gap);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gold-dim);
}

.lobby-cell h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line), transparent);
}

/* The five flames, set into the heading (.type-pill, ui.css). */
.lobby-cell h2 .type-pill { margin: 0 0.3em; vertical-align: 0.02em; }

.lobby-launch {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    background: none;
    border: 0;
}

@container (min-width: 680px) {
    .lobby-grid .lobby-launch { flex-direction: row; } /* outranks the base rule above */
    #lobby-readiness-panel { width: 20rem; }
}

/* ── Buttons ── */

#start-menu .game-btn,
:is(#top-right-user-area, #start-overlay) .game-btn {
    position: relative;
    overflow: hidden;
    min-height: 2.4rem;
    padding: 0.55rem 0.9rem;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e9dcb4;
    text-shadow: none;
    background: linear-gradient(180deg, rgba(42, 44, 58, 0.9), rgba(15, 16, 23, 0.92));
    border: 1px solid rgba(242, 201, 76, 0.3);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s, color 0.3s, box-shadow 0.4s;
}

/* Sheen that sweeps across on hover. */
#start-menu .game-btn::after,
:is(#top-right-user-area, #start-overlay) .game-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 0.7s ease;
    pointer-events: none;
}

#start-menu .game-btn:hover,
:is(#top-right-user-area, #start-overlay) .game-btn:hover {
    color: #fff8de;
    border-color: var(--gold);
    transform: translateY(-1px);
    filter: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 22px -10px var(--aether);
}

#start-menu .game-btn:hover::after,
:is(#top-right-user-area, #start-overlay) .game-btn:hover::after {
    transform: translateX(120%);
}

#start-menu .game-btn:active,
:is(#top-right-user-area, #start-overlay) .game-btn:active {
    transform: translateY(1px);
    border-style: solid;
}

#start-menu .game-btn.active {
    color: #fff;
    border: 1px solid var(--gold) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--aether) 30%, #171922), #0b0c11) !important;
    filter: none;
    box-shadow: inset 0 0 0 1px rgba(242, 201, 76, 0.3), 0 0 26px -8px var(--aether);
}

#start-menu .game-btn:focus-visible,
#start-menu .faction-card:focus-visible,
:is(#top-right-user-area, #start-overlay) .game-btn:focus-visible {
    outline: 2px solid var(--aether);
    outline-offset: 2px;
}

#start-menu .game-btn-ghost {
    background: none;
    border-color: transparent;
    box-shadow: none;
    color: var(--gold-dim);
}

#start-menu #btn-toggle-ready[class*="bg-emerald"] {
    background: linear-gradient(180deg, #10b981, #047857);
    border-color: #6ee7b7;
}

/* The one filled element on the page. */
#start-menu #btn-start-match {
    flex: 1;
    min-height: clamp(2.9rem, 7.5vh, 3.6rem);
    padding: 0 1.5rem;
    font-size: clamp(1.05rem, 2.7cqw, 1.5rem);
    font-weight: 600;
    letter-spacing: 0.24em;
    color: #1b1202;
    background: linear-gradient(180deg, #fff0bd 0%, #f3cb5b 30%, #d79f25 62%, #9c6a0d 100%);
    border: 1px solid #ffe9a6;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -10px 18px -10px rgba(90, 50, 0, 0.65),
        0 0 0 1px rgba(0, 0, 0, 0.6),
        0 16px 44px -14px var(--aether);
    animation: lobby-breathe 3.4s ease-in-out infinite;
}

#start-menu #btn-start-match:hover {
    color: #1b1202;
    filter: brightness(1.08);
    transform: translateY(-2px);
}

#start-menu #btn-start-match:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.9) brightness(0.75);
    transform: none;
    animation: none;
}

@keyframes lobby-breathe {
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.7),
            inset 0 -10px 18px -10px rgba(90, 50, 0, 0.65),
            0 0 0 1px rgba(0, 0, 0, 0.6),
            0 16px 60px -8px var(--aether);
    }
}

/* ── Faction picker: slices that open sideways ── */

/* The heading row also holds the random pick (solo only); the line after the title stops short of it. */
.lobby-factions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: var(--gap);
    align-items: center;
}

.lobby-cell.lobby-factions h2 { margin-bottom: 0; }
.lobby-factions .faction-row { grid-column: 1 / -1; align-self: stretch; }

#start-menu .faction-random {
    display: none;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.7rem;
    margin-left: 0.75rem;
    padding: 0.2rem 0.7rem;
    font-size: 0.72rem;
}

#lobby-selection[data-mode="solo"] .faction-random { display: inline-flex; }

.faction-random i { font-size: 1.15em; }

@container (max-width: 420px) {
    .faction-random .btn-label { display: none; }
}

.faction-row {
    display: flex;
    gap: 0.5rem;
    height: clamp(5rem, 13vh, 9rem);
}

#start-menu .faction-card {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    padding: 0.6rem 0.15rem;
    color: #f3ead0;
    text-shadow: 0 1px 4px #000;
    background: linear-gradient(180deg, rgba(22, 23, 32, 0.9), rgba(8, 9, 13, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    transition: flex-grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s, box-shadow 0.5s;
}

/* Each faction's own fire, banked low until hovered or chosen. */
#start-menu .faction-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(130% 75% at 50% 112%, color-mix(in srgb, var(--flame) 60%, transparent), transparent 70%);
    opacity: 0.4;
    transform-origin: bottom;
    transition: opacity 0.5s, transform 0.7s ease-out;
}

#start-menu .faction-card:hover,
#start-menu .faction-card.active {
    flex-grow: 2.1;
    filter: none;
}

#start-menu .faction-row:hover .faction-card.active:not(:hover) {
    flex-grow: 1;
}

#start-menu .faction-card:hover { border-color: rgba(242, 201, 76, 0.6); }

#start-menu .faction-card:hover::before,
#start-menu .faction-card.active::before {
    opacity: 1;
    transform: scale(1.05);
}

#start-menu .faction-card.active {
    border: 1px solid var(--gold) !important;
    background: linear-gradient(180deg, rgba(22, 23, 32, 0.9), rgba(8, 9, 13, 0.96)) !important;
    box-shadow: inset 0 0 0 1px rgba(242, 201, 76, 0.3), 0 0 34px -8px var(--flame);
}

.faction-gem {
    flex: none;
    width: 1.35rem;
    aspect-ratio: 1;
    margin-bottom: 0.35rem;
    transform: rotate(45deg);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.75), transparent 46%), var(--f);
    border: 1px solid color-mix(in srgb, var(--flame) 70%, #fff);
    box-shadow: 0 0 0 2px #050608, 0 0 18px 1px var(--flame);
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faction-card:hover .faction-gem,
.faction-card.active .faction-gem {
    transform: rotate(225deg) scale(1.15);
}

.faction-name {
    max-width: 100%;
    font-size: clamp(0.56rem, 2.35cqw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.faction-epithet {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--gold-hi);
    transition: max-height 0.5s, opacity 0.4s;
}

@container (min-width: 520px) {
    .faction-card:hover .faction-epithet,
    .faction-card.active .faction-epithet {
        max-height: 1.2em;
        opacity: 1;
    }
}

/* What the chosen faction is and what its spell does (filled by aether_flame.js). Each paragraph is cut to a
   number of lines, so the page keeps its height whatever a faction has to say. */
.faction-brief { grid-column: 1 / -1; min-width: 0; font-size: 1rem; line-height: 1.35; }

.faction-brief p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    text-wrap: pretty;
}

#lobby-selection[data-mode="pvp"] .faction-brief { display: none; } /* the room browser needs the height */
#faction-brief-text { font-style: italic; color: #e6dfcc; }
#faction-brief-spell { margin-top: 0.3rem; font-weight: 500; color: var(--gold-hi); }
#faction-brief-spell:empty { display: none; }

/* ── Solo: side, rounds and AI level, each a row of segments. The side is a pair of buttons, the other two
   are radio groups; #match-options is transparent so all three share the cell's grid. ── */

.lobby-mode {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-content: center;
    gap: var(--gap) 0.5rem;
}

.match-options { display: contents; }

.seg {
    grid-column: span 2;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.seg-side { grid-column: span 3; }
.seg-wide { grid-column: 1 / -1; }

@container (min-width: 600px) {
    .lobby-mode { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .seg-side { grid-column: span 2; }
    .seg-wide { grid-column: span 3; }
}

/* Spelregels: the further game modes, behind one button in a native dialog. */
#start-menu .rules-btn { grid-column: 1 / -1; justify-self: start; }

.match-rules {
    width: min(92vw, 28rem);
    max-height: 88dvh;
    padding: 1rem 1.1rem;
    overflow-y: auto;
    font-family: var(--font-ui);
    color: #f3ead0;
    background: #12131a;
    border: 1px solid var(--line);
    border-radius: 3px;
}

.match-rules::backdrop { background: rgba(0, 0, 0, 0.65); }
.match-rules form { display: grid; gap: 0.8rem; }
.match-rules .seg { grid-column: auto; }
.match-rules h2 { margin: 0; font-size: 1.3rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.match-rules .rules-note { margin: 0; font-size: 0.9rem; font-style: italic; color: var(--gold-dim); }
.match-rules .game-btn { justify-self: end; min-height: 2.75rem; padding: 0 1.4rem; }

.seg legend,
.seg-legend {
    display: block;
    margin-bottom: 0.3rem;
    padding: 0;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gold-dim);
}

.seg-track { display: flex; }

.seg label {
    position: relative;
    flex: 1 1 0;
}

/* The native radio stays on top, invisible, so clicks and keyboard focus land on it. */
.seg input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.seg label span,
#start-menu .seg-btn {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 0.45rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: #e9dcb4;
    background: linear-gradient(180deg, rgba(42, 44, 58, 0.9), rgba(15, 16, 23, 0.92));
    border: 1px solid rgba(242, 201, 76, 0.3);
    border-radius: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
    transition: border-color 0.3s, color 0.3s, box-shadow 0.4s;
}

#start-menu .seg-btn { flex: 1 1 0; }
#start-menu .seg-btn:hover { z-index: 1; transform: none; }
#start-menu .seg-btn.active { z-index: 1; }

/* Neighbouring segments share one hairline. */
.seg label + label span,
#start-menu .seg-btn + .seg-btn { margin-left: -1px; }
.seg label:first-child span,
#start-menu .seg-btn:first-child { border-radius: 2px 0 0 2px; }
.seg label:last-child span,
#start-menu .seg-btn:last-child { border-radius: 0 2px 2px 0; }

.seg label:hover span {
    z-index: 1;
    color: #fff8de;
    border-color: var(--gold);
}

.seg input:checked + span {
    z-index: 1;
    color: #fff;
    border-color: var(--gold);
    background: linear-gradient(180deg, color-mix(in srgb, var(--aether) 30%, #171922), #0b0c11);
    box-shadow: inset 0 0 0 1px rgba(242, 201, 76, 0.3), 0 0 26px -8px var(--aether);
}

.seg input:focus-visible + span {
    z-index: 2;
    outline: 2px solid var(--aether);
    outline-offset: 2px;
}

/* ── PvP: browse the open rooms, make one or enter a code. Once the player sits in a room (data-room,
   UIManager.enterRoom) the browser makes way for that room's code. ── */

.cell-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: var(--gap); }
.lobby-cell .cell-head h2 { flex: 1; min-width: 0; margin: 0; }
#start-menu #btn-refresh-lobbies { min-height: 1.7rem; padding: 0.2rem 0.6rem; font-size: 1rem; }

/* Shown to a visitor who is not signed in (main.js): a line of its own under the heading, or part of it where there is width. */
#auth-warning {
    order: 1;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    font-style: italic;
    font-size: 1rem;
    color: #e6dfcc;
}

.room-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    margin-top: var(--gap);
}

#btn-create-lobby { grid-column: 1 / -1; }

@container (min-width: 480px) {
    .room-actions { grid-template-columns: auto minmax(0, 1fr) auto; }
    #btn-create-lobby { grid-column: auto; }
}

/* The room's code, to read out to the rival, over the two things to do with it. */
#current-room-display {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.75rem;
}

#current-room-display .seg-legend { margin: 0; }

#current-room-code-badge {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.22em;
    text-align: right;
    color: var(--gold-hi);
}

.room-buttons { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }

@container (min-width: 480px) {
    #current-room-display { grid-template-columns: auto minmax(0, 1fr) auto; }
    #current-room-code-badge { text-align: left; }
    .room-buttons { grid-column: auto; }
}

#lobby-selection[data-room] :is(#lobby-list, .room-actions, .cell-head) { display: none; }

/* With the width for it, the list stands beside its controls. */
@container (min-width: 680px) {
    .lobby-rooms {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        grid-template-rows: auto minmax(0, 1fr);
        column-gap: var(--gap);
    }
    .lobby-rooms > .cell-head,
    .lobby-rooms > #current-room-display { grid-column: 1 / -1; }
    .lobby-rooms > .room-actions { grid-template-columns: minmax(0, 1fr) auto; align-content: start; margin-top: 0; }
    .lobby-rooms #btn-create-lobby { grid-column: 1 / -1; }
    #auth-warning { order: 0; flex: none; }
}

/* The ready check: both sides, then the player's own switch. */
#lobby-readiness-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
}

.ready-chip {
    padding: 0.3rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    color: #8b8fa3;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--hair);
}

.ready-chip.text-emerald-400 { color: #34d399; border-color: rgba(52, 211, 153, 0.45); }

/* ── Wells, inputs, chips ── */

.lobby-well {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--hair);
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.7);
}

#lobby-list {
    flex: 1 1 auto;
    min-height: clamp(3.75rem, 11vh, 10rem);
    padding: 0.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#lobby-list > p,
#leaderboard-list > p {
    font-size: 1rem;
    color: #a8976a !important;
}

#leaderboard-modal .lobby-heading {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold-hi);
}

#leaderboard-modal {
    background: rgba(7, 8, 12, 0.97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.lobby-input {
    min-width: 0;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-hi);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 2px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.lobby-input::placeholder { color: #7d7458; }

.lobby-input:focus {
    outline: none;
    border-color: var(--aether);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aether) 22%, transparent);
}

.lobby-chip {
    padding: 0.4rem 0.6rem;
    background: rgba(10, 11, 16, 0.75);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ── Start dialog: loading and errors while a match starts ── */

#start-overlay {
    background: rgba(4, 5, 8, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Two classes, so the phone rule that stretches .lobby-panel over the screen leaves the dialog at its content. */
.lobby-panel.start-dialog {
    flex: none;
    align-items: center;
    gap: 1rem;
    width: auto;
    max-width: min(30rem, 100%);
    padding: 2rem 2.25rem;
    text-align: center;
}

.start-dialog .lobby-heading {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: 0.16em;
    white-space: normal;
    color: var(--gold-hi);
}

#start-overlay-message {
    margin: 0;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.4;
    color: #e6dfcc;
}

.start-spinner {
    width: 2.75rem;
    aspect-ratio: 1;
    border: 3px solid color-mix(in srgb, var(--aether) 25%, transparent);
    border-top-color: var(--aether);
    border-radius: 50%;
    animation: start-spin 0.9s linear infinite;
}

@keyframes start-spin {
    to { transform: rotate(360deg); }
}

#start-overlay.is-error .start-spinner,
#start-overlay:not(.is-error) #btn-close-start-overlay {
    display: none;
}

#start-overlay.is-error .lobby-heading { color: #ff9c8a; }

/* ── Entrance, and the change of view ── */

@keyframes lobby-rise {
    from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
}

/* Cells settle in place, one after the other: a translate would briefly add scroll overflow inside the console. */
@keyframes lobby-settle {
    from { opacity: 0; transform: scale(0.97); filter: blur(6px); }
}

.lobby-wordmark span,
.lobby-lore,
.lobby-panel {
    animation: lobby-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.lobby-cell {
    animation: lobby-settle 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.start-dialog { animation-duration: 0.35s; animation-delay: 0s; }
.lobby-wordmark span:last-child { animation-delay: 0.12s; }
.lobby-lore { animation-delay: 0.32s; }
.lobby-factions { animation-delay: 0.1s; }
.lobby-mode,
.lobby-rooms { animation-delay: 0.2s; }
.lobby-launch { animation-delay: 0.3s; }

/* Where the browser can animate between two states of the page (document.startViewTransition in
   UIManager.showLobbyView), the chosen portal opens into the console and closes back into it, and the
   wordmark holds still while the stage beside it changes. */
.lobby-hero { view-transition-name: lobby-hero; }
.mode-portal.chosen,
#start-menu .lobby-panel { view-transition-name: lobby-stage; }

::view-transition-group(lobby-stage) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ── Wide screens: wordmark and lore left, the stage right ── */

@media (min-width: 1280px) and (min-height: 600px) {
    .lobby-shell {
        grid-template-columns: minmax(0, 5fr) minmax(0, 10fr);
        align-items: center;
        justify-items: stretch;
        gap: clamp(2rem, 4vw, 5rem);
        padding: 0 clamp(0.5rem, 2vw, 3rem);
    }
    .lobby-hero { text-align: left; }
    .lobby-lore { display: block; }
    .lobby-panel {
        max-height: calc(100vh - 7rem);
        max-height: calc(100dvh - 7rem);
    }
    #start-menu .mode-portal { min-height: clamp(16rem, 58vh, 34rem); }
    .faction-row { height: clamp(7rem, 22vh, 14rem); }
    #faction-brief-text { display: none; } /* the hero beside the console tells the same story */
}

/* ── The lockup, wherever a 4.5rem blackletter line fits: beside the stage on wide screens, above it on upright phones ── */

@media (min-width: 1280px) and (min-height: 600px), (max-width: 640px) and (min-height: 521px) {
    /* Blackletter "Aether" over a tracked "Clash" held between two rules. */
    .lobby-wordmark {
        width: fit-content;
        font-size: clamp(4.5rem, 30cqw, 9.5rem);
        line-height: 0.92;
    }
    .lobby-wordmark span { display: block; }
    .lobby-wordmark span:last-child {
        display: flex;
        align-items: center;
        gap: 0.8em;
        margin-top: 0.55em;
        font-family: var(--font-ui);
        font-size: 0.2em;
        font-weight: 600;
        letter-spacing: 0.6em;
        text-transform: uppercase;
        color: var(--gold-hi);
        background: none;
    }
    /* Each rule is one shape: a hairline that swells into a diamond beside the word. */
    .lobby-wordmark span:last-child::before,
    .lobby-wordmark span:last-child::after {
        content: '';
        flex: 1;
        height: 9px;
        background: linear-gradient(90deg, transparent, var(--gold) 75%);
        clip-path: polygon(0 4px, calc(100% - 9px) 4px, calc(100% - 4.5px) 0, 100% 4.5px,
                           calc(100% - 4.5px) 100%, calc(100% - 9px) 5px, 0 5px);
    }
    .lobby-wordmark span:last-child::after {
        margin-left: -0.6em; /* cancels the trailing letter-spacing */
        transform: scaleX(-1);
    }
}

/* ── Phones, upright or on their side: the setup page takes the whole screen, and the faction slices hang
   as banners. A closed banner carries its name down its length, the chosen one opens to show it level. ── */

@media (max-height: 520px), (max-width: 640px) {
    #top-right-user-area[data-view="setup"] { display: none; } /* the page needs the corner; PvP asks for a name in place */

    #start-menu[data-view="setup"] .lobby-hero { display: none; }
    .lobby-shell { display: flex; flex-direction: column; height: 100%; gap: 0; padding-top: 0; }
    .lobby-panel { flex: 1; max-width: none; max-height: none; }
    .lobby-scroll { flex: 1; }
    .lobby-grid { flex: 1 0 auto; }
    .lobby-title { font-size: 1.6rem; }

    .faction-row { height: auto; min-height: 7.5rem; gap: 5px; }
    #start-menu .faction-card { justify-content: flex-start; gap: 0.5rem; padding: 0.7rem 0.15rem; }
    #start-menu .faction-card:hover { flex-grow: 1; }
    #start-menu .faction-card.active,
    #start-menu .faction-row:hover .faction-card.active:not(:hover) { flex-grow: 3.4; justify-content: center; }
    .faction-gem { width: 0.95rem; margin: 0.15rem 0 0.2rem; }
    .faction-card:not(.active) .faction-name { writing-mode: vertical-rl; font-size: 0.66rem; letter-spacing: 0.16em; }
    .faction-card.active .faction-name { font-size: 0.95rem; letter-spacing: 0.1em; }
    .faction-card:not(.active) .faction-epithet { display: none; }
    .faction-card.active .faction-epithet { max-height: none; opacity: 1; padding: 0 0.3rem; font-size: 0.85rem; white-space: normal; text-align: center; text-wrap: balance; }
    .faction-brief { display: none; } /* upright phones with the height for it bring it back, below */
}

/* ── Landscape phones: wordmark over two portals; on the setup page the banners stand left of the choices ── */

@media (max-height: 520px) {
    #start-menu { padding: 6px max(10px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); }
    .lobby-marquee { display: none; }
    .lobby-shell { gap: 6px; }
    .lobby-hero { display: grid; place-items: center; min-height: 2.75rem; } /* as tall as the login buttons in the corner beside it */
    .lobby-wordmark { font-size: 1.7rem; }

    .lobby-home { flex: 1; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; max-width: none; }
    #start-menu .mode-portal { min-height: 0; padding: 0.75rem 1rem; }
    .mode-portal-name { font-size: clamp(2.5rem, 16vh, 4rem); }
    .mode-portal-text { font-size: 1rem; }
    .mode-portal-go { width: 2.4rem; }

    .lobby-panel {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(9, 10, 15, 0.9);
    }
    .lobby-scroll { padding: 6px 10px 8px; gap: 6px; }
    .lobby-bar { padding-bottom: 4px; }
    .lobby-title { font-size: 1.35rem; }
    .lobby-grid { gap: 6px; }
    .lobby-cell { padding: 6px 8px; }
    .lobby-cell h2 { margin-bottom: 6px; font-size: 0.7rem; }
    .cell-head { margin-bottom: 6px; }
    .lobby-launch { gap: 6px; padding: 0; }
    .lobby-factions { row-gap: 6px; }
    .faction-row { min-height: 6rem; }
    #start-menu .faction-card.active,
    #start-menu .faction-row:hover .faction-card.active:not(:hover) { flex-grow: 2.6; } /* the closed banners keep a thumb's width */
    .faction-card.active .faction-name { font-size: 0.85rem; }
    #lobby-list { min-height: 2.75rem; }
    #start-menu .game-btn,
    :is(#top-right-user-area, #start-overlay) .game-btn { min-height: 2.5rem; padding: 0.3rem 0.6rem; font-size: 0.72rem; }
    #start-menu #btn-start-match { min-height: 2.75rem; padding: 0.4rem 1rem; font-size: 1rem; }
    #start-menu .faction-random,
    #start-menu #btn-refresh-lobbies { min-width: 2.75rem; min-height: 2.25rem; padding: 0.1rem 0.5rem; justify-content: center; }
    #start-menu .faction-random { margin-left: 8px; font-size: 0.66rem; }
    .lobby-mode { gap: 6px 8px; }
    .room-actions { margin-top: 6px; }
    .seg legend,
    .seg-legend { margin-bottom: 2px; font-size: 0.6rem; line-height: 1.1; }
    .seg label span,
    #start-menu .seg-btn { min-height: 2.75rem; padding: 0.15rem 0.4rem; font-size: 0.68rem; }
    #lobby-readiness-panel { width: auto; }

    @container (min-width: 520px) {
        .lobby-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: minmax(0, 1fr) auto;
            grid-template-areas: "factions mode" "factions launch";
        }
        #lobby-selection[data-mode="pvp"] { grid-template-areas: "factions rooms" "factions launch"; }
        .lobby-grid .lobby-launch { flex-direction: column; }
        /* The choices have half the page here, not all of it: side and rounds over the AI level, as on an upright phone. */
        .lobby-mode { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        .seg-side { grid-column: span 3; }
        .seg-wide { grid-column: 1 / -1; }
        /* The same goes for the room browser: the list over one row of controls. */
        .lobby-rooms { display: flex; }
        .lobby-rooms > .room-actions { grid-template-columns: auto minmax(0, 1fr) auto; margin-top: 6px; }
        .lobby-rooms #btn-create-lobby { grid-column: auto; }
        #auth-warning { order: 1; flex: 1 1 100%; }
    }
}

/* ── Upright phones: the wordmark over the flame, the two portals under the thumb.
   Same breakpoint as the in-game deck in ui.css. ── */

@media (max-width: 640px) and (min-height: 521px) {
    #start-menu { justify-content: flex-start; padding: 0; }
    #top-right-user-area { top: max(0.5rem, env(safe-area-inset-top, 0px)); }

    /* The faction names drift behind the wordmark. */
    .lobby-marquee { inset: calc(env(safe-area-inset-top, 0px) + 3.6rem) 0 auto 0; font-size: 6.5rem; }

    .lobby-hero { flex: none; padding: calc(env(safe-area-inset-top, 0px) + 3.75rem) 1rem 1.1rem; }
    .lobby-wordmark { margin-inline: auto; font-size: clamp(3.5rem, min(28cqw, 11vh), 6.5rem); } /* by height too, so short phones keep room for the portals */

    /* One line of lore under the wordmark; it follows the chosen faction (aether_flame.js). */
    .lobby-lore { display: block; max-width: none; margin-top: 0.9rem; }
    #lobby-lore-title { margin: 0; font-size: clamp(1.05rem, 5cqw, 1.3rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #lobby-lore-text,
    .lore-nav { display: none; }

    /* Home: the portals share what the wordmark leaves, one over the other. */
    .lobby-home {
        flex: 1;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
        gap: 0.6rem;
        padding: 0 0.75rem max(0.6rem, env(safe-area-inset-bottom, 0px));
    }
    #start-menu .mode-portal { min-height: 0; padding: 1rem 1.1rem; }
    .mode-portal-name { font-size: clamp(2.75rem, 8.5vh, 4.5rem); }
    .lobby-home-foot .game-btn { min-height: 2.75rem; }

    /* Setup: an edge-to-edge page, one bright rule along the top instead of four corner brackets. The
       banners take whatever height the choices and the launch button leave. */
    .lobby-panel { border-width: 0; }
    .lobby-panel::before { display: none; }
    .lobby-scroll { gap: 0.6rem; padding: max(0.5rem, env(safe-area-inset-top, 0px)) 0.75rem max(0.75rem, env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
    .lobby-bar { padding-bottom: 0.5rem; }
    .lobby-grid { display: flex; flex-direction: column; gap: 0.6rem; }
    .lobby-cell { flex: none; padding: 0.6rem 0.65rem; }
    .lobby-cell.lobby-launch { padding: 0; }
    .lobby-cell.lobby-factions { flex: 1 1 0; min-height: 10rem; }
    .lobby-cell.lobby-rooms { flex: 1.3 1 auto; } /* never smaller than what it holds: on a screen too short the page scrolls instead */
    #lobby-selection[data-room] .lobby-rooms { flex: none; } /* only the room's code is left in it */
    #lobby-list { flex-basis: 2.75rem; min-height: 2.75rem; }

    #start-menu .game-btn { min-height: 2.75rem; }
    #start-menu .faction-random,
    #start-menu #btn-refresh-lobbies { min-width: 2.75rem; min-height: 2.5rem; justify-content: center; }
    #start-menu .faction-card:active { transform: scale(0.985); }
    .seg label span,
    #start-menu .seg-btn { min-height: 2.75rem; }
    #start-menu #btn-start-match { flex: none; min-height: 3.5rem; }
}

/* Upright and tall enough: on the Solo page the banners stop at a comfortable height and the chosen faction's
   brief takes the room under them, a little more of it with every step in height. */
@media (max-width: 640px) and (min-height: 660px) {
    #lobby-selection[data-mode="solo"] .lobby-factions { grid-template-rows: auto minmax(7.5rem, 15rem) auto; align-content: start; }
    #lobby-selection[data-mode="solo"] .faction-brief { display: block; }
    #faction-brief-spell { display: none; }
}

@media (max-width: 640px) and (min-height: 740px) {
    .faction-brief p { -webkit-line-clamp: 3; }
    #faction-brief-spell { display: -webkit-box; -webkit-line-clamp: 2; }
}

@media (max-width: 640px) and (min-height: 800px) {
    .faction-brief p { -webkit-line-clamp: 5; }
    #faction-brief-spell { -webkit-line-clamp: 3; }
}

@media (prefers-reduced-motion: reduce) {
    #start-menu *,
    #start-menu *::before,
    #start-menu *::after,
    #top-right-user-area *,
    #start-overlay * {
        animation: none !important;
        transition: none !important;
    }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}