/* Outfit (SIL Open Font License, fonts/OFL.txt), served by the app: works offline and sends nothing to third parties */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg-primary: #f0f7f6;
    --bg-surface: rgba(255, 255, 255, 0.85);
    --bg-glass: rgba(255, 255, 255, 0.7);
    --border-glass: rgba(255, 255, 255, 0.6);
    --text-main: #2d3748;
    --text-muted: #64748b;
    --accent-blue: #0284c7;
    /* accent-blue has 4.1:1 on white; small text needs 4.5:1 (WCAG AA) */
    --accent-blue-text: #0369a1;
    --news-bg: #f0f9ff;
    --news-border: #bae6fd;
    /* The last hour of the challenge and a task done; text at least 4.5:1 on its background */
    --warn-bg: #fff7ed;
    --warn-border: #fed7aa;
    --warn-text: #9a3412;
    --done-bg: #ecfdf5;
    --done-border: #a7f3d0;
    --done-text: #047857;
    /* The journey: the path walked, a stage won, the stage to play and one still locked */
    --journey-path: #f59e0b;
    --journey-done: #a7f3d0;
    --journey-done-edge: #10b981;
    --journey-current-edge: #0284c7;
    --journey-locked: #e2e8f0;
    --journey-locked-edge: #94a3b8;
    --journey-ink: #0f172a;
    /* Engraved glyphs of the badge medals, the dark tone of each metal (gradients in BadgeGradients.razor) */
    --badge-ink-bronze: #4a2408;
    --badge-ink-silver: #2f3843;
    --badge-ink-gold: #5a3a00;
    --badge-ink-special: #06314f;
    /* Admin map: land without players and five shades of players per country */
    --map-sea: #f0f9ff;
    --map-land: #e2e8f0;
    --map-border: #ffffff;
    --map-1: #bae6fd;
    --map-2: #7dd3fc;
    --map-3: #38bdf8;
    --map-4: #0284c7;
    --map-5: #075985;
    --accent-mint: #10b981;
    --accent-peach: #f97316;
    --accent-gold: #eab308;
    --accent-pink: #ec4899;
    --shadow-soft: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 20px rgba(56, 189, 248, 0.35);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    --gutter: var(--space-4);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

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

* {
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

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

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #e0f2fe 0%, #f0fdf4 50%, #fdf2f8 100%);
    color: var(--text-main);
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    -webkit-appearance: none;
    appearance: none;
}

:focus-visible {
    outline: 3px solid rgba(2, 132, 199, 0.45);
    outline-offset: 2px;
}

/* App shell */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.06);
    /* No backdrop blur: behind it is only the page gradient, and a blur would be redone for every game frame */
    background: rgba(255, 255, 255, 0.4);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(10px + var(--safe-top)) 16px 10px;
    background: var(--bg-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-glass);
    z-index: 10;
}

.brand-title {
    flex: none;
    font-weight: 800;
    font-size: 1.5rem;
    background: linear-gradient(135deg, #0284c7, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
    gap: 6px;
}

.player-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: min(62%, 280px);
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-glass);
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: transform 0.15s ease;
}

.player-badge:active {
    transform: scale(0.96);
}

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

.top-nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    max-width: 72%;
}

.top-nav-actions .player-badge {
    max-width: 100%;
}

.install-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(135deg, #0369a1, #047857);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(2, 132, 199, 0.3);
    animation: installChipIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.install-chip:active {
    transform: scale(0.95);
}

@keyframes installChipIn {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.install-done {
    color: #047857;
    font-weight: 600;
}

.install-steps {
    margin: 0 0 0 1.3em;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.45;
}

.main-content {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* The tab behind a profile page stays mounted; the wrapper adds nothing to the layout */
.tab-content {
    display: contents;
}

.tab-content[hidden] {
    display: none;
}

.bottom-nav {
    display: flex;
    justify-content: space-evenly;
    gap: 4px;
    padding: 8px 8px calc(8px + var(--safe-bottom));
    background: var(--bg-surface);
    border-top: 1px solid var(--border-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10;
}

.nav-tab {
    flex: 1 1 0;
    min-width: 0;
    max-width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 12px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-tab.active {
    color: var(--accent-blue-text);
    background: rgba(2, 132, 199, 0.08);
}

.tab-icon {
    font-size: 1.25rem;
    line-height: 1.2;
    transition: transform 0.2s ease;
}

.nav-tab.active .tab-icon {
    transform: translateY(-1px) scale(1.08);
}

.tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Game view */
.game-viewport {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Field shadow, the rectangle comes from game.js */
.game-viewport::before {
    content: "";
    position: absolute;
    left: var(--field-x, 0px);
    top: var(--field-y, 0px);
    width: var(--field-w, 100%);
    height: var(--field-h, 100%);
    border-radius: var(--field-radius, 0px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

/* game.js sets data-fill when the scene fills the whole view (phones) */
.game-viewport[data-fill]::before {
    display: none;
}

.game-viewport[hidden] {
    display: none;
}

/* Not found and error pages; they have no app shell to hide the loader */
.status-page {
    min-height: 100dvh;
    display: flex;
    padding: 20px;
    text-align: center;
}

.status-page .play-btn {
    text-decoration: none;
}

/* The account confirm button sits in the card like the other buttons */
.status-page form {
    display: contents;
}

.status-page ~ #app-loader {
    display: none;
}

/* Privacy and cookie pages; the body does not scroll, so the page does */
.legal-page {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    padding: calc(var(--space-5) + var(--safe-top)) calc(var(--gutter) + var(--safe-right)) calc(var(--space-6) + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));
}

.legal-page,
.legal-page * {
    user-select: text;
    -webkit-user-select: text;
}

.legal-page ~ #app-loader {
    display: none;
}

/* The page behind a shared link: one result or badge and the way into the game */
.shared-card {
    max-width: 480px;
    text-align: center;
}

.shared-card h1 {
    font-size: 1.5rem;
}

.shared-score,
.shared-medal {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shared-detail {
    color: var(--text-muted);
}

.shared-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f766e;
}

.shared-brand img {
    border-radius: 12px;
}

.shared-invite {
    font-weight: 600;
}

/* Picture of the shared result: drawn in the page, so the buttons wait for it */
.shared-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.shared-actions .share-btn {
    width: 100%;
}

.shared-actions button:disabled {
    opacity: 0.5;
}

.shared-rules {
    align-self: center;
}

.legal-card {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: 24px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
    line-height: 1.55;
}

.legal-card h1 {
    font-size: 1.8rem;
    line-height: 1.2;
    color: #1e293b;
}

.legal-card h2 {
    margin-top: var(--space-3);
    font-size: 1.15rem;
    color: #1e293b;
}

.legal-card ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-left: 1.3em;
}

.legal-card a {
    color: var(--accent-blue-text);
    font-weight: 600;
}
/* FocusOnNavigate focuses the heading for screen readers; it is not interactive */
.legal-card h1:focus {
    outline: none;
}

/* The play button on the info pages is a link; the card's link colour must not win over the button */
.legal-card a.play-btn {
    color: #ffffff;
    text-align: center;
    text-decoration: none;
}

.legal-back {
    align-self: flex-start;
}

.legal-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.legal-table-wrap {
    overflow-x: auto;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.legal-table th,
.legal-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.legal-table code {
    font-size: 0.85em;
    white-space: nowrap;
}

.legal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid #e2e8f0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.legal-footer a[aria-current="page"] {
    color: var(--text-main);
    text-decoration: none;
}

@media (max-width: 440px) {
    .legal-card {
        padding: var(--space-4);
    }
}

/* Admin (Components/Pages/Admin.razor); the body does not scroll, so the page does */
.admin-page {
    height: 100vh;
    height: 100dvh;
    max-width: 1200px;
    margin: 0 auto;
    overflow-y: auto;
    /* The same width with and without a scrollbar, so the header does not wrap differently from tab to tab */
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: calc(var(--space-5) + var(--safe-top)) calc(var(--gutter) + var(--safe-right)) calc(var(--space-6) + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));
}

.admin-page,
.admin-page * {
    user-select: text;
    -webkit-user-select: text;
}

.admin-page ~ #app-loader {
    display: none;
}

.admin-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}

.admin-header h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e293b;
}

/* FocusOnNavigate focuses the heading for screen readers; it is not interactive */
.admin-header h1:focus {
    outline: none;
}

/* Five sections do not fit a phone in German, so the buttons wrap instead of running off the screen */
.admin-header .segmented {
    flex-wrap: wrap;
    max-width: 100%;
}

.admin-user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    color: var(--text-muted);
    font-weight: 600;
}

.admin-subtitle {
    font-size: 1.3rem;
    font-weight: 800;
    color: #1e293b;
    overflow-wrap: anywhere;
}

.admin-page .segmented {
    align-self: flex-start;
    flex-wrap: wrap;
}

.admin-page a.segment-btn {
    display: inline-block;
    text-decoration: none;
}

.admin-table a {
    color: var(--accent-blue-text);
    font-weight: 600;
    text-decoration: none;
}

/* auto-fill keeps empty columns, so tiles are as wide on every tab whether a page has two of them or eight */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: var(--space-3);
}

@media (max-width: 440px) {
    /* Two tiles side by side on a phone, also inside a panel, where two of the minimum width do not fit */
    .admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.admin-stats .stat-box {
    background: var(--bg-surface);
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    padding: var(--space-2);
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.admin-table td {
    padding: var(--space-2);
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
}

/* A cell with a sentence wraps instead of widening the table */
.admin-table td.admin-wrap {
    white-space: normal;
    min-width: 220px;
}

.admin-muted {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.admin-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.admin-nickname {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-row-flagged {
    background: #fef2f2;
}

/* Trends (Components/Pages/AdminTrends.razor); bars are sized in percent, so the chart follows the panel width */
.range-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

.range-form label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.range-form input[type="date"] {
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 0.9rem;
    color: var(--text-main);
}

.range-form .play-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
}

a.stat-box {
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.stat-box.active {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

.chart {
    margin: var(--space-4) 0 0;
}

.chart-body {
    display: flex;
    gap: var(--space-3);
}

.chart-scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    min-width: 46px;
    height: 240px;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.chart-plot {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 240px;
    padding-bottom: 1px;
    border-bottom: 1px solid #e2e8f0;
    background-image: repeating-linear-gradient(to top, #edf2f7 0 1px, transparent 1px 25%);
}

.chart-col {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    min-width: 3px;
}

.chart-bar {
    width: 100%;
    max-width: 38px;
    min-height: 2px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, #38bdf8, var(--accent-blue));
}

.chart-bar-empty {
    min-height: 0;
    background: none;
}

.chart-labels {
    display: flex;
    gap: 2px;
    margin-left: calc(46px + var(--space-3));
    padding-top: var(--space-2);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.chart-labels span {
    flex: 1;
    min-width: 3px;
    text-align: center;
    white-space: nowrap;
}

.chart-label-hidden {
    visibility: hidden;
}

.admin-details {
    margin-top: var(--space-4);
}

.admin-details summary {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .chart-scale,
    .chart-plot {
        height: 180px;
    }
}

.admin-key {
    align-self: center;
    padding: var(--space-2) var(--space-3);
    border-radius: 10px;
    background: #f1f5f9;
    font-size: 1rem;
    user-select: all;
    -webkit-user-select: all;
}

/* Rename and delete forms of the admin pages */
.admin-manage {
    gap: var(--space-4);
}

.admin-email {
    font-size: 0.9rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* Percentile of the task targets: label, number and button in one row */
.admin-percentile {
    align-items: center;
    flex-wrap: wrap;
}

.admin-percentile input.text-input {
    flex: 0 0 6rem;
}

/* The tasks read as sentences, so they wrap instead of widening the table */
.admin-task-table th[scope="row"] {
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

/* Download links of the statistics export */
.admin-export {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.admin-export a {
    text-decoration: none;
}

/* World map of the countries players open the app in */
.admin-map-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.world-map-wrap {
    position: relative;
}

/* Zoom buttons over the map, shown by js/admin-map.js */
.map-controls {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    gap: var(--space-1);
}

.map-controls[hidden] {
    display: none;
}

.map-controls .icon-btn {
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
    font-size: 1.25rem;
    font-weight: 700;
}

/* The page does not scroll or zoom under a finger that pans the map */
.world-map.zoomable {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.world-map.dragging {
    cursor: grabbing;
}

.world-map {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    background: var(--map-sea);
}

.map-land {
    fill: var(--map-land);
    stroke: var(--map-border);
    stroke-width: 0.5px;
    vector-effect: non-scaling-stroke;
}

.map-dot {
    stroke: var(--map-border);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.map-level-1 { fill: var(--map-1); background: var(--map-1); }
.map-level-2 { fill: var(--map-2); background: var(--map-2); }
.map-level-3 { fill: var(--map-3); background: var(--map-3); }
.map-level-4 { fill: var(--map-4); background: var(--map-4); }
.map-level-5 { fill: var(--map-5); background: var(--map-5); }

.world-map a:focus-visible {
    outline: none;
}

.world-map a:focus-visible > * {
    stroke: var(--text-main);
    stroke-width: 1.5px;
}

@media (hover: hover) and (pointer: fine) {
    .world-map a:hover > * {
        stroke: var(--text-main);
        stroke-width: 1.5px;
    }
}

.map-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.map-swatch {
    width: 20px;
    height: 10px;
    border-radius: 3px;
}

.map-code {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* The row a click on the map jumps to */
.map-row:target > * {
    background: var(--news-bg);
}

/* Address, language of the e-mail and the button: on a phone the address gets a row of its own */
.admin-email-form {
    flex-wrap: wrap;
}

.admin-email-form input.text-input {
    flex: 1 1 16rem;
}

.admin-email-form select.language-select {
    flex: 0 0 auto;
    max-width: none;
}

.admin-danger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid #fee2e2;
}

.admin-row-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.admin-confirm {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--text-main);
}

.admin-confirm input {
    margin-top: 3px;
}

.danger-btn {
    flex: none;
    padding: 10px 18px;
    border: none;
    border-radius: 14px;
    background: #b91c1c;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.danger-btn.compact {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.game-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: pointer;
}

/* Just below the HUD, left of the wind indicator; --hud-bottom comes from game.js */
.pause-btn {
    position: absolute;
    left: calc(var(--field-x, 0px) + 12px);
    top: calc(var(--field-y, 0px) + var(--hud-bottom, 60px) + 8px);
    z-index: 4;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.85);
    color: #37474f;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -1px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    -webkit-tap-highlight-color: transparent;
}

.pause-btn:active {
    transform: scale(0.94);
}

.pause-overlay {
    animation: fadeIn 0.15s ease;
}

.pause-score {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    border-radius: 18px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
}

.pause-score span {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pause-score strong {
    font-size: 2rem;
    font-weight: 800;
    color: #0284c7;
    font-variant-numeric: tabular-nums;
}

.game-start-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 5;
    padding: 20px;
    text-align: center;
}

/* margin: auto keeps a tall card scrollable */
.play-card {
    margin: auto;
    background: #ffffff;
    border-radius: 28px;
    padding: var(--space-6) var(--space-5);
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-glass);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.play-card-intro,
.play-card-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.play-card-intro {
    gap: var(--space-2);
}

.play-card h1,
.play-card h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.15;
}

/* FocusOnNavigate focuses the heading for screen readers; it is not interactive */
.play-card h1:focus {
    outline: none;
}

/* Release note on the start card; it does not block the play button */
.news-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    background: var(--news-bg);
    border: 1px solid var(--news-border);
    border-radius: 14px;
    color: var(--text-main);
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: left;
}

/* Text and its action; where both do not fit beside each other (a narrow phone, a long language) the action goes
   under the text, so the close button stays inside the banner */
.news-banner-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-3);
}

.news-banner-body p {
    flex: 1 1 10rem;
    min-width: 0;
}

.news-banner-body .link-btn {
    text-align: left;
}

/* Badges in the profile */
.badges-count {
    color: var(--text-muted);
    font-weight: 700;
}

.badges-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--news-bg);
    border: 1px solid var(--news-border);
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.badge-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: var(--space-2);
}

.badge-tile {
    width: 100%;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-1);
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
}

.badge-tile.selected {
    background: var(--news-bg);
    border-color: var(--news-border);
}

.badge-name {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.badge-icon {
    flex: none;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.25));
}

.badge-gradients {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.tier-bronze { color: var(--badge-ink-bronze); }
.tier-silver { color: var(--badge-ink-silver); }
.tier-gold { color: var(--badge-ink-gold); }
.tier-special { color: var(--badge-ink-special); }

.badge-glyph-edge {
    color: rgba(255, 255, 255, 0.55);
}

/* Not earned (yet): faded grey metal with a lock, so it is not mistaken for silver */
.badge-locked {
    filter: grayscale(1) brightness(1.1);
    opacity: 0.55;
}

.badge-detail {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: 14px;
    background: #f8fafc;
}

.badge-share {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.badge-detail-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 0.9rem;
    line-height: 1.4;
}

.badge-earned,
.badge-progress-value {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.badge-waiting {
    color: var(--accent-blue-text);
    font-weight: 600;
    font-size: 0.85rem;
}

.badge-progress {
    height: 8px;
    border-radius: 9999px;
    background: #e2e8f0;
    overflow: hidden;
}

.badge-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--accent-blue);
}

.badge-count {
    margin-left: var(--space-1);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.mode-badge {
    align-self: center;
    background: #ecfdf5;
    color: #047857;
    padding: 6px 14px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.rules-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.init-error {
    color: #dc2626;
}

.play-btn {
    background: linear-gradient(135deg, #0369a1, #0277b6);
    color: #ffffff;
    border: none;
    padding: 16px 28px;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.play-btn:active {
    transform: scale(0.97);
}

.play-btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.play-btn.block {
    width: 100%;
}

/* A link that looks like the button */
a.support-btn {
    display: block;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
}

.play-btn.compact {
    flex: none;
    padding: 10px 18px;
    font-size: 0.95rem;
    border-radius: 14px;
    white-space: nowrap;
}

.back-btn {
    width: 100%;
}

.submit-status {
    min-height: 1.2em;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 20;
    padding: 16px;
    animation: fadeIn 0.2s ease;
}

.game-over-dialog {
    margin: auto;
    background: #ffffff;
    width: 100%;
    max-width: 400px;
    border-radius: 28px;
    padding: var(--space-6) var(--space-5);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    animation: scaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* For a moment after the round a tap falls through to the backdrop, which does not close anything */
.game-over-dialog.locked {
    pointer-events: none;
}

.game-over-summary,
.game-over-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.game-over-dialog h3 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
}

.score-display-box {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 20px;
    padding: var(--space-4);
    border: 1px solid rgba(186, 230, 253, 0.6);
}

.score-number {
    font-size: 3rem;
    font-weight: 800;
    color: #0284c7;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.score-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.new-record-badge {
    align-self: center;
    padding: 8px 18px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #fde68a, #fbbf24);
    color: #78350f;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
    animation: recordPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes recordPop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Badges revealed after a round and when the app opens: they pop in one by one with a ring, a shine and sparkles */
.round-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: 16px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1px solid #fde68a;
}

.badge-reveal-title {
    color: #92400e;
    font-weight: 700;
    font-size: 0.95rem;
}

.badge-reveal-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-4);
}

.badge-reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    max-width: 96px;
    opacity: 0;
    animation: badgeIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(var(--i) * 0.22s + 0.15s);
}

.badge-reveal-name {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--text-main);
}

.badge-reveal-medal {
    position: relative;
    display: block;
}

.badge-reveal-medal::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid rgba(251, 191, 36, 0.85);
    opacity: 0;
    animation: badgeRing 0.9s ease-out forwards;
    animation-delay: calc(var(--i) * 0.22s + 0.4s);
}

.badge-reveal-shine {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.9) 50%, transparent 62%) no-repeat;
    background-size: 260% 100%;
    background-position: 160% 0;
    animation: badgeShine 0.9s ease-out forwards;
    animation-delay: calc(var(--i) * 0.22s + 0.55s);
    pointer-events: none;
}

.badge-reveal-medal i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px;
    border-radius: 50%;
    background: #fbbf24;
    opacity: 0;
    animation: badgeSparkle 0.8s ease-out forwards;
    animation-delay: calc(var(--i) * 0.22s + 0.4s);
}

.badge-reveal-medal i:nth-of-type(1) { --dx: -38px; --dy: -30px; }
.badge-reveal-medal i:nth-of-type(2) { --dx: 40px; --dy: -26px; background: #f472b6; }
.badge-reveal-medal i:nth-of-type(3) { --dx: -34px; --dy: 34px; background: #38bdf8; }
.badge-reveal-medal i:nth-of-type(4) { --dx: 36px; --dy: 32px; background: #34d399; }

@keyframes badgeIn {
    0% { opacity: 0; transform: scale(0.2) rotate(-25deg); }
    60% { opacity: 1; transform: scale(1.15) rotate(6deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes badgeRing {
    0% { opacity: 0.9; transform: scale(0.7); }
    100% { opacity: 0; transform: scale(1.6); }
}

@keyframes badgeShine {
    to { background-position: -60% 0; }
}

@keyframes badgeSparkle {
    0% { opacity: 1; transform: translate(0, 0) scale(0.3); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}

.best-compare {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
}

.rival-compare-badge {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
    padding: 10px 16px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* The reminder to save the account in the result of a round: a warning to read, not a wall before "Again" */
.save-offer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: 14px;
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--warn-text);
    font-size: 0.88rem;
    line-height: 1.4;
    text-align: left;
}

.save-offer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.round-losses {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* An invitation, not a warning */
.save-offer.install-offer {
    background: var(--news-bg);
    border-color: var(--news-border);
    color: var(--text-main);
}

.install-offer .icon-btn {
    margin-left: auto;
}

/* Without a button the text and the cross share one row */
.save-offer.install-offer.inline {
    flex-direction: row;
    align-items: center;
}

.install-offer.inline p {
    flex: 1;
    min-width: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.stat-box {
    background: #f8fafc;
    border-radius: 14px;
    padding: var(--space-3);
    border: 1px solid #e2e8f0;
    min-width: 0;
}

.stat-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    overflow-wrap: anywhere;
}

.stat-lbl {
    font-size: 0.75rem;
    color: #64748b;
}

.action-buttons-row {
    display: flex;
    gap: var(--space-3);
}

.restart-btn,
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.restart-btn {
    flex: 2;
    min-width: 0;
    background: linear-gradient(135deg, #059669, #047857);
    color: #ffffff;
    border: none;
    padding: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.35);
    transition: transform 0.15s ease;
}

.restart-btn:active {
    transform: scale(0.96);
}

.share-btn {
    flex: 1;
    min-width: 0;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.share-btn:active {
    transform: scale(0.97);
}

.share-btn.compact {
    flex: none;
    padding: 8px 16px;
    white-space: nowrap;
}

/* Share dialog (ShareDialog.razor) */
.share-dialog {
    max-width: 360px;
}

.share-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Player profile (ProfileStatsView on PlayerProfilePage and on the shared page): a board of panels that wraps into
   columns as the width allows */
.profile-page {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.profile-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}

.profile-page-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
}

.profile-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-4);
    align-items: start;
    text-align: left;
}

.profile-hero,
.profile-highlights,
.profile-wide {
    grid-column: 1 / -1;
}

/* Avatar beside the name and the chips; on a narrow phone the chips take the whole width under both */
.profile-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "avatar name" "avatar chips";
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-5);
    border-radius: 24px;
    background: linear-gradient(135deg, #e0f2fe 0%, #f0fdf4 55%, #fce7f3 100%);
    border: 1px solid #ffffff;
    box-shadow: var(--shadow-soft);
}

.profile-avatar {
    grid-area: avatar;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, #ffffff 0 10%, transparent 11%), linear-gradient(135deg, #38bdf8, #10b981);
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    text-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.3), inset 0 -4px 10px rgba(15, 23, 42, 0.12);
}

.profile-hero-name {
    grid-area: name;
    align-self: end;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.15;
    color: #0f172a;
    overflow-wrap: anywhere;
}

.profile-chips {
    grid-area: chips;
    align-self: start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    color: #334155;
}

.profile-chip strong {
    color: #0f172a;
}

/* The owner's box on a statistic: ticked, others see it. A private statistic fades out like a disabled one, the box
   stays sharp. */
.profile-check {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
    cursor: pointer;
}

/* A finger gets at least 44 x 44 px */
.profile-check::after {
    content: "";
    position: absolute;
    inset: -7px;
}

.profile-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent-blue-text);
    cursor: pointer;
}

.profile-chip .profile-check {
    position: relative;
    top: auto;
    right: auto;
    width: 22px;
    height: 22px;
    box-shadow: none;
    background: none;
}

.profile-highlight,
.profile-mini,
.profile-bubble-item,
.profile-medallion,
.profile-panel {
    position: relative;
}

/* With a box a small tile needs more room; in a narrow panel they go one under another */
.editable .profile-minis {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}

.editable .profile-mini {
    padding-right: 34px;
}

.profile-mini .profile-check {
    top: 50%;
    right: 6px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
}

.profile-mini .profile-check::after {
    inset: -10px;
}

.editable .profile-bubble-item,
.editable .profile-medallion {
    padding-top: 8px;
}

.is-private > :not(.profile-check) {
    opacity: 0.4;
    filter: grayscale(1);
}

.profile-board :is(.profile-highlight, .profile-mini, .profile-chip, .profile-bubble-item, .profile-medallion, .profile-panel) > :not(.profile-check) {
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.profile-highlight.is-private,
.profile-mini.is-private,
.profile-chip.is-private {
    background: #eef2f6;
    box-shadow: none;
}

.profile-highlight.is-private {
    color: #334155;
}

.profile-editing {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.profile-bulk {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* The viewer's own number beside another player's: an arrow and a label carry who leads, the colour only repeats it */
.profile-versus {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.profile-versus.lead { background: var(--done-bg); color: var(--done-text); }
.profile-versus.behind { background: var(--warn-bg); color: var(--warn-text); }
.profile-versus.even { background: #f1f5f9; color: #334155; }

.profile-mini .profile-versus {
    grid-column: 2;
}

.profile-bubble-item .profile-versus,
.profile-medallion .profile-versus {
    align-self: center;
}

/* The rival after a round and the winners on the challenge card open their profiles */
.rival-link {
    width: 100%;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}

.link-line {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
    .rival-link:hover,
    .link-line:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

.profile-locked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* The four numbers a player is known by */
.profile-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: var(--space-3);
}

.profile-highlight {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-4);
    border-radius: 20px;
    min-width: 0;
    box-shadow: var(--shadow-soft);
}

.profile-highlight-icon {
    font-size: 1.5rem;
}

.profile-highlight-value {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.profile-highlight-label {
    font-size: 0.82rem;
    font-weight: 600;
}

.tone-blue { background: linear-gradient(135deg, #e0f2fe, #bae6fd); color: #0c4a6e; }
.tone-peach { background: linear-gradient(135deg, #ffedd5, #fed7aa); color: #7c2d12; }
.tone-pink { background: linear-gradient(135deg, #fce7f3, #fbcfe8); color: #831843; }
.tone-mint { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #064e3b; }
.tone-violet { background: linear-gradient(135deg, #ede9fe, #c4b5fd); color: #3b0764; }

.profile-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #eef2f7;
    box-shadow: var(--shadow-soft);
    min-width: 0;
}

.profile-panel-title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

/* Small numbers of a panel, two or more side by side */
.profile-minis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
    gap: var(--space-2);
}

.profile-mini {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon value" "icon label";
    align-items: center;
    column-gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: 14px;
    background: #f8fafc;
    min-width: 0;
}

.profile-mini-icon {
    grid-area: icon;
    font-size: 1.3rem;
}

.profile-mini-value {
    grid-area: value;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.profile-mini-label {
    grid-area: label;
    font-size: 0.75rem;
    line-height: 1.25;
    color: #475569;
}

/* Bubbles as large as their count, drawn like the ones in the game */
.profile-bubbles {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-end;
    gap: var(--space-3);
}

.profile-bubble-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    max-width: 120px;
    text-align: center;
}

.profile-bubble {
    width: var(--size);
    height: var(--size);
    display: grid;
    place-items: center;
    padding: 6px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    box-shadow: inset -6px -8px 14px rgba(15, 23, 42, 0.12), 0 6px 14px rgba(15, 23, 42, 0.1);
}

.bubble-standard { background: radial-gradient(circle at 32% 28%, #ffffff 0 9%, #e0f2fe 10%, #7dd3fc 70%, #38bdf8); color: #0c4a6e; }
.bubble-golden { background: radial-gradient(circle at 32% 28%, #ffffff 0 9%, #fef9c3 10%, #fde047 65%, #eab308); color: #713f12; }
.bubble-bomb { background: radial-gradient(circle at 32% 28%, #cbd5e1 0 9%, #64748b 10%, #334155 70%, #1e293b); color: #ffffff; }
.bubble-fever { background: radial-gradient(circle at 32% 28%, #ffffff 0 9%, #fce7f3 10%, #f9a8d4 65%, #f472b6); color: #500724; }

.profile-bubble-label {
    font-size: 0.75rem;
    line-height: 1.25;
    color: #475569;
}

/* Daily challenge: the best place as a medal */
.profile-daily {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: var(--space-4);
}

.profile-medallion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    max-width: 140px;
    text-align: center;
}

.profile-medallion-value {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.profile-medallion-value {
    background: linear-gradient(135deg, #e0f2fe, #7dd3fc);
    color: #0c4a6e;
    border: 4px solid #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.profile-medallion.place-1 .profile-medallion-value { background: linear-gradient(135deg, #fef3c7, #f59e0b); color: #5a3a00; }
.profile-medallion.place-2 .profile-medallion-value { background: linear-gradient(135deg, #f1f5f9, #94a3b8); color: #1e293b; }
.profile-medallion.place-3 .profile-medallion-value { background: linear-gradient(135deg, #ffedd5, #ea580c); color: #431407; }
.profile-medallion.place-0 .profile-medallion-value { background: #f1f5f9; color: #64748b; }

.profile-medallion-label {
    font-size: 0.78rem;
    line-height: 1.25;
    color: #475569;
}

.profile-badges {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: var(--space-3);
    list-style: none;
    padding: 0;
}

.profile-badges li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.profile-badge-name {
    font-size: 0.72rem;
    line-height: 1.2;
    color: #475569;
    overflow-wrap: anywhere;
}

/* On the shared page the board sits in the page's card, whose lists are indented bullet lists */
.shared-card.shared-profile-card {
    max-width: 820px;
}

.shared-profile-card .profile-badges {
    display: grid;
    padding-left: 0;
}

@media (max-width: 440px) {
    .profile-hero {
        grid-template-areas: "avatar name" "chips chips";
        padding: var(--space-4);
    }

    .profile-avatar {
        width: 56px;
        height: 56px;
        font-size: 1.6rem;
    }

    .profile-hero-name {
        align-self: center;
        font-size: 1.45rem;
    }
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Content screens */
.scroll-view {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.card-panel {
    background: var(--bg-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: var(--space-5);
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-soft);
    min-width: 0;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
}

.panel-title {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
    min-width: 0;
    overflow-wrap: anywhere;
}

.panel-desc {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.empty-state {
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-5) var(--space-2);
}

.segmented {
    display: inline-flex;
    flex: none;
    gap: var(--space-1);
    padding: var(--space-1);
    background: #f1f5f9;
    border-radius: 12px;
}

.segment-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.segment-btn.active {
    background: #ffffff;
    color: var(--accent-blue-text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.daily-card {
    gap: var(--space-3);
    text-align: center;
}

.daily-date {
    font-size: 1.8rem;
    line-height: 1.2;
}

.daily-countdown {
    background: #f8fafc;
    border-radius: 14px;
    padding: var(--space-3);
    font-weight: 600;
    color: #475569;
}

.daily-countdown.closing {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--warn-text);
}

/* A round of this challenge waits to be continued */
.daily-paused {
    margin: 0;
    padding: var(--space-3);
    background: var(--news-bg);
    border: 1px solid var(--news-border);
    border-radius: 14px;
    font-weight: 600;
    color: var(--text-main);
}

/* Two cards on the left of the split screen, stacked like the rest on a phone */
.split-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.daily-rules {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
}

.daily-rule {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: 14px;
    background: var(--news-bg);
    border: 1px solid var(--news-border);
    min-width: 0;
}

.daily-rule > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.daily-rule-icon {
    font-size: 1.4rem;
    line-height: 1.2;
    flex: none;
}

.daily-rule-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-blue-text);
}

.daily-rule-desc {
    font-size: 0.88rem;
    color: #475569;
}

.daily-task.done {
    background: var(--done-bg);
    border-color: var(--done-border);
}

.daily-task.done .daily-rule-label,
.daily-task.done .daily-rule-desc {
    color: var(--done-text);
}

.daily-rules.compact .daily-rule {
    padding: var(--space-2) var(--space-3);
    font-size: 0.9rem;
}

.daily-rules.compact .daily-rule-icon {
    font-size: 1.15rem;
}

.daily-you {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1) var(--space-3);
    font-size: 0.92rem;
    color: #475569;
}

.daily-you strong {
    flex-basis: 100%;
    color: var(--text-main);
}

/* The share button under the result, on a line of its own */
.daily-you span {
    flex-basis: 100%;
    text-align: center;
}

.daily-yesterday {
    gap: var(--space-2);
}

.daily-yesterday > p,
.daily-last-week > p {
    overflow-wrap: anywhere;
}

.daily-yesterday-rule {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.daily-yesterday-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.daily-last-week {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: var(--space-3);
    border-top: 1px solid #f1f5f9;
    font-size: 0.92rem;
    color: #475569;
}

.daily-task-result.done {
    background: var(--done-bg);
    border-color: var(--done-border);
    color: var(--done-text);
}

p.daily-task-result.done {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--done-border);
    border-radius: 12px;
    font-weight: 600;
}

/* Four boards share the row instead of pushing the card wider on a phone */
.segmented.wide {
    display: flex;
    width: 100%;
}

.segmented.wide .segment-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--space-1);
    overflow-wrap: anywhere;
}

.retry-btn {
    align-self: center;
}

.field-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.form-error {
    color: #dc2626;
}

.form-message {
    font-size: 0.85rem;
    color: var(--accent-blue-text);
}

.form-success {
    font-size: 0.8rem;
    color: #047857;
}

.form-failure {
    font-size: 0.8rem;
    font-weight: 600;
    color: #dc2626;
}

.input-row {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.input-row .text-input {
    flex: 1 1 auto;
    min-width: 0;
}

.code-input {
    text-transform: uppercase;
    letter-spacing: 1px;
}

.code-input::placeholder {
    text-transform: none;
    letter-spacing: normal;
}

.create-league summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--accent-blue-text);
    padding: var(--space-1) 0;
}

.create-league .input-row {
    margin-top: var(--space-3);
}

.league-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.league-code {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.invite-btn {
    align-self: flex-start;
    margin-top: var(--space-1);
}

.my-leagues {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Leaving a league: a quiet link under the table, the question takes its place */
.link-btn.leave-btn {
    align-self: flex-start;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.leave-confirm {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 14px;
    color: #92400e;
    font-size: 0.9rem;
    line-height: 1.4;
}

.leave-confirm-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.my-leagues-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-1);
    background: #f1f5f9;
    border-radius: 12px;
}

.profile-nickname {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.info-note {
    padding: var(--space-3) var(--space-4);
    background: #f8fafc;
    border-radius: 14px;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.45;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    font-weight: 600;
}

.app-version {
    margin-top: auto;
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    user-select: text;
}

.app-version a,
.field-note a {
    color: var(--accent-blue-text);
    font-weight: 600;
}

/* A button among the links of the version line looks like them */
.app-version .link-btn {
    padding: 0;
}

.field-note {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.rival-inline {
    font-size: 0.9rem;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.leaderboard-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.leaderboard-table td {
    padding: 10px;
    font-size: 0.95rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.leaderboard-table .col-rank {
    width: 48px;
}

.leaderboard-table .col-combo {
    width: 72px;
    color: #64748b;
}

.leaderboard-table td.col-combo {
    font-size: 0.85rem;
}

.leaderboard-table .col-days {
    width: 56px;
    color: #64748b;
}

.leaderboard-table td.col-days {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.leaderboard-table .col-score {
    width: 96px;
    text-align: right;
    white-space: nowrap;
}

.leaderboard-table td.col-score {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.leaderboard-table tr.current-player {
    background: #e0f2fe;
    font-weight: 700;
}

.player-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* The name cell opens the player's profile; the whole cell is the target, so a finger finds it without the row
   growing taller */
.leaderboard-table td.col-player {
    position: relative;
}

.player-cell-btn {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.player-cell-btn:not(:disabled)::after {
    content: '';
    position: absolute;
    inset: 0;
}

.player-cell-btn:disabled {
    cursor: default;
}

.player-cell-btn:not(:disabled) .player-cell-name {
    text-decoration: underline;
    text-decoration-color: rgba(100, 116, 139, 0.45);
    text-underline-offset: 3px;
}

.player-cell-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-cell-combo {
    display: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.you-tag {
    flex: none;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-blue-text);
    background: rgba(2, 132, 199, 0.1);
    padding: 2px 7px;
    border-radius: 999px;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
}

.rank-1 { background: #fef08a; color: #854d0e; }
.rank-2 { background: #e2e8f0; color: #475569; }
.rank-3 { background: #fed7aa; color: #9a3412; }

.text-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-family: inherit;
    /* iOS zooms into inputs below 16px */
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    user-select: text;
    -webkit-user-select: text;
}

.text-input:focus {
    border-color: var(--accent-blue-text);
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.12);
}

.language-select {
    width: auto;
    min-width: 0;
    max-width: 60%;
    padding: 8px 12px;
    cursor: pointer;
}

.language-select.compact {
    max-width: 100%;
    padding: 6px 10px;
    border-color: transparent;
    background-color: #f1f5f9;
    color: #475569;
}

/* The one reason to play now, under the play button; opens the challenge or the profile */
.start-goal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--news-border);
    border-radius: 14px;
    background: var(--news-bg);
    color: var(--text-main);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

/* Rules link and language picker under the play button of the start card */
.start-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1) var(--space-4);
}


/* Links to the info pages under the start card (server pages, full page load) */
.start-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--space-3);
    font-size: 0.85rem;
}.start-language {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-muted);
}

.link-btn {
    position: relative;
    border: none;
    background: none;
    padding: 6px 4px;
    color: var(--accent-blue-text);
    font-weight: 600;
    cursor: pointer;
}

/* The link stays small in the text, but a finger gets at least 44 x 44 px around it */
.link-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
}

/* Native modal dialog; the browser keeps focus inside and makes the rest of the app inert */
.modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: calc(var(--space-4) + var(--safe-top)) calc(var(--space-4) + var(--safe-right)) calc(var(--space-4) + var(--safe-bottom)) calc(var(--space-4) + var(--safe-left));
    border: none;
    background: transparent;
    color: inherit;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-dialog[open] {
    display: flex;
}

.modal-dialog::backdrop {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: fadeIn 0.2s ease;
}

/* Rules dialog (RulesDialog.razor) */
.rules-dialog {
    margin: auto;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    text-align: left;
    animation: scaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}

.rules-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rules-header h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
}

.icon-btn {
    flex: none;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: #f1f5f9;
    color: #475569;
    font-size: 1rem;
    cursor: pointer;
}

.rules-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.45;
}

.rules-section h4 {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-blue-text);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.rules-list {
    margin: 0 0 0 1.2em;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bubble-legend {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bubble-legend li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bubble-legend strong {
    display: block;
    color: #1e293b;
}

.bubble-icon {
    flex: none;
    width: 48px;
    height: 48px;
}
/* The badge list on /badges reuses the legend layout; the medal keeps its size next to long texts */
.badge-legend svg {
    flex: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media (hover: hover) and (pointer: fine) {
    .play-btn:not(:disabled):hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(2, 132, 199, 0.45);
    }

    .nav-tab:not(.active):hover,
    .segment-btn:not(.active):hover {
        color: var(--accent-blue-text);
    }

    .share-btn:hover {
        background: #e2e8f0;
    }

    .player-badge:hover {
        transform: translateY(-1px);
    }

    .badge-tile:not(.selected):hover {
        background: #f8fafc;
    }

    .icon-btn:hover {
        background: #e2e8f0;
    }

    .link-btn:hover {
        text-decoration: underline;
    }

    a.stat-box:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-soft);
    }
}

/* Tabs, segments and small buttons give way under a finger or a click, like the play and share buttons */
.nav-tab,
.segment-btn,
.icon-btn,
.badge-tile {
    transition: transform 0.12s ease, background-color 0.2s ease, color 0.2s ease;
}

.nav-tab:active,
.segment-btn:active,
.icon-btn:active,
.badge-tile:active {
    transform: scale(0.94);
}

/* Cards of a tab slide in one after another when it opens */
.scroll-view > .card-panel {
    animation: cardIn 0.35s ease-out both;
}

.scroll-view > .card-panel:nth-child(2) { animation-delay: 0.05s; }
.scroll-view > .card-panel:nth-child(3) { animation-delay: 0.1s; }
.scroll-view > .card-panel:nth-child(n + 4) { animation-delay: 0.15s; }

@keyframes cardIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* Confetti for a new record (js/fx.js), above everything and never in the way */
.confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2000;
}

.nickname-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
}

.nickname-field label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

.nickname-input {
    font-weight: 600;
    text-align: center;
    font-size: 1.1rem;
    background: #f8fafc;
}

.nickname-field.compact {
    gap: var(--space-1);
}

.nickname-field.compact .nickname-input {
    padding: 9px 14px;
    font-size: 1rem;
}

.nickname-field.has-error .nickname-input {
    border-color: #f87171;
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15);
    animation: nicknameShake 0.35s ease;
}

.nickname-error {
    font-size: 0.78rem;
    color: #dc2626;
    font-weight: 600;
}

@keyframes nicknameShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

/* Loader (markup in App.razor) */
#app-loader {
    position: fixed;
    inset: 0;
    z-index: 900; /* under #blazor-error-ui */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 15%, rgba(186, 230, 253, 0.8), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(251, 207, 232, 0.7), transparent 45%),
        linear-gradient(135deg, #e0f2fe 0%, #f0fdf4 50%, #fdf2f8 100%);
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.app-container.app-ready ~ #app-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-container.app-ready ~ #app-loader .loader-card {
    transform: scale(1.06);
}

.app-container.app-ready ~ #app-loader *,
.app-container.app-ready ~ #app-loader *::before,
.app-container.app-ready ~ #app-loader *::after {
    animation-play-state: paused;
}

.app-container.app-ready ~ #app-loader .loader-slow {
    display: none;
}

.loader-sky span {
    position: absolute;
    left: var(--x);
    bottom: calc(var(--s) * -1.5);
    width: var(--s);
    height: var(--s);
    animation: loaderRise var(--d) linear var(--delay) infinite;
}

.loader-sky i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.95) 0 14%, transparent 16%),
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.9), rgba(129, 212, 250, 0.45) 60%, rgba(3, 155, 229, 0.55) 100%);
    box-shadow: inset 0 0 0 1.5px rgba(3, 155, 229, 0.35), 0 4px 12px rgba(2, 132, 199, 0.12);
    animation: loaderSway calc(var(--d) / 3) ease-in-out var(--delay) infinite alternate;
}

.loader-sky span:nth-child(3n) i {
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.95) 0 14%, transparent 16%),
        radial-gradient(circle at 35% 35%, #fffde7, rgba(253, 216, 53, 0.55) 60%, rgba(245, 127, 23, 0.55) 100%);
    box-shadow: inset 0 0 0 1.5px rgba(245, 127, 23, 0.35), 0 0 16px rgba(255, 215, 0, 0.35);
}

.loader-sky span:nth-child(4n+2) i {
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.95) 0 14%, transparent 16%),
        radial-gradient(circle at 35% 35%, #e0f2f1, rgba(128, 203, 196, 0.5) 60%, rgba(0, 137, 123, 0.5) 100%);
    box-shadow: inset 0 0 0 1.5px rgba(0, 137, 123, 0.3);
}

@keyframes loaderRise {
    0% { transform: translateY(0) scale(0.9); opacity: 0; }
    8% { opacity: 1; }
    82% { transform: translateY(calc(-100vh - 40px)) scale(1); opacity: 1; }
    90% { transform: translateY(calc(-100vh - 60px)) scale(1.35); opacity: 0.6; }
    100% { transform: translateY(calc(-100vh - 70px)) scale(1.6); opacity: 0; }
}

@keyframes loaderSway {
    from { transform: translateX(calc(var(--drift) * -1)) rotate(-6deg); }
    to { transform: translateX(var(--drift)) rotate(6deg); }
}

.loader-card {
    position: relative;
    width: min(340px, 100%);
    padding: 34px 28px 28px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 30px 60px -20px rgba(2, 132, 199, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
    animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.5s ease;
}

.loader-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.loader-bubble {
    position: relative;
    width: 86px;
    height: 86px;
    animation: loaderBob 2.4s ease-in-out infinite;
}

.loader-bubble i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 26%, #ffffff 0 12%, transparent 14%),
        radial-gradient(circle at 70% 72%, rgba(255, 255, 255, 0.7) 0 5%, transparent 6%),
        conic-gradient(from 0deg, rgba(255, 182, 193, 0.55), rgba(255, 245, 157, 0.55), rgba(165, 214, 167, 0.5), rgba(129, 212, 250, 0.6), rgba(206, 147, 216, 0.55), rgba(255, 182, 193, 0.55)),
        #bae6fd;
    box-shadow: inset 0 0 0 2px rgba(3, 155, 229, 0.35), inset -8px -10px 20px rgba(2, 132, 199, 0.25), 0 12px 30px rgba(2, 132, 199, 0.25);
    animation: loaderJelly 2.4s ease-in-out infinite;
}

.loader-bubble::before,
.loader-bubble::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(56, 189, 248, 0.55);
    animation: loaderRing 2.4s ease-out infinite;
}

.loader-bubble::after {
    animation-delay: 1.2s;
}

.loader-title {
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1;
    background: linear-gradient(135deg, #0284c7, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes loaderBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes loaderJelly {
    0%, 100% { transform: scale(1, 1) rotate(0deg); }
    25% { transform: scale(1.06, 0.95) rotate(90deg); }
    50% { transform: scale(0.96, 1.05) rotate(180deg); }
    75% { transform: scale(1.04, 0.97) rotate(270deg); }
}

@keyframes loaderRing {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.9); opacity: 0; }
}

.loader-progress {
    position: relative;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    overflow: hidden;
}

.loader-progress-bar {
    position: relative;
    height: 100%;
    width: max(8%, var(--blazor-load-percentage, 0%));
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #10b981);
    transition: width 0.3s ease;
    overflow: hidden;
}

.loader-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    transform: translateX(-100%);
    animation: loaderShimmer 1.4s ease-in-out infinite;
}

@keyframes loaderShimmer {
    to { transform: translateX(100%); }
}

.loader-text {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-weight: 600;
    color: #475569;
    font-size: 0.95rem;
}

.loader-dots::after {
    content: "";
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: loaderDots 1.5s steps(4, end) infinite;
}

@keyframes loaderDots {
    0% { content: ""; }
    25% { content: "."; }
    50% { content: ".."; }
    75%, 100% { content: "..."; }
}

.loader-starting,
.loader-is-starting .loader-downloading,
.loader-is-starting .loader-percent {
    display: none;
}

.loader-is-starting .loader-starting {
    display: inline;
}

.loader-percent {
    font-variant-numeric: tabular-nums;
    color: var(--accent-blue-text);
    font-weight: 800;
}

.loader-percent::after {
    content: var(--blazor-load-percentage-text, "");
}

.loader-slow {
    font-size: 0.8rem;
    color: #64748b;
    opacity: 0;
    max-height: 0;
    margin-top: -22px;
    animation: loaderSlow 0.5s ease 15s forwards;
}

.loader-slow a {
    color: var(--accent-blue-text);
    font-weight: 700;
}

@keyframes loaderSlow {
    to { opacity: 1; max-height: 3em; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .loader-sky span,
    .loader-sky i,
    .loader-bubble,
    .loader-bubble i,
    .loader-bubble::before,
    .loader-bubble::after,
    .loader-progress-bar::after {
        animation: none;
    }

    .loader-sky span {
        bottom: auto;
        top: var(--y, 50%);
        opacity: 0.7;
    }
}


/* Small phones */
/* ===== The journey ===== */

/* The start screen of the game holds two cards: the round that can be played at any time and, apart from it,
   the journey. Different colours, an own sign and an own button tell them apart at first sight. */
.start-stack {
    margin: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.start-stack > .play-card {
    margin: 0;
}

.journey-home {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-radius: 24px;
    border: 2px solid #fcd34d;
    background: linear-gradient(165deg, #fffbeb 0%, #fef3c7 55%, #dcfce7 100%);
    box-shadow: 0 14px 30px rgba(180, 83, 9, 0.14);
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.journey-home:active {
    transform: scale(0.985);
}

.journey-home-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.mode-badge.journey {
    align-self: auto;
    background: #fde68a;
    color: #78350f;
}

.journey-home-note {
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #92400e;
    text-align: right;
}

.journey-track {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Dotted ahead, drawn where the player has walked */
.jt-line {
    fill: none;
    stroke: #d6b98a;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 0.1 9;
}

.jt-line.walked {
    stroke: var(--journey-path, #f59e0b);
    stroke-dasharray: none;
}

.jt-disc {
    fill: #ffffff;
    stroke: #cbd5e1;
    stroke-width: 2;
}

.jt-node.done .jt-disc {
    fill: #34d399;
    stroke: #059669;
}

.jt-node.current .jt-disc {
    fill: #7dd3fc;
    stroke: #0284c7;
}

.jt-check {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jt-pulse {
    fill: none;
    stroke: #f59e0b;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: jmPulse 2.2s ease-out infinite;
}

.journey-home-btn {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #b45309, #9a3412);
    color: #ffffff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(154, 52, 18, 0.3);
}

@media (hover: hover) and (pointer: fine) {
    .journey-home:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 34px rgba(180, 83, 9, 0.2);
    }
}

/* A page over the tabs: the map scrolls, the card of the chosen stage stays under it */
.journey-screen {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.journey-screen[hidden] {
    display: none;
}

.journey-count {
    padding: var(--space-1) var(--space-3);
    border-radius: 9999px;
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

.journey-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Reversed, so the map opens at its bottom, where the journey starts */
.journey-map-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 22px;
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-soft);
    background: #e7f6ce;
}

.jm {
    flex: none;
    display: block;
    width: 100%;
    height: auto;
}

.jm-seg {
    fill: none;
    stroke: #ffffff;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 1 17;
    opacity: 0.95;
}

.jm-seg.walked {
    stroke: var(--journey-path);
    stroke-dasharray: none;
    opacity: 1;
}

/* The path beyond the stage just won draws itself */
.jm-seg.walked.fresh {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: jmDraw 1.1s 0.5s ease-out forwards;
}

.jm-node {
    cursor: pointer;
    outline: none;
}

.jm-disc {
    fill: var(--journey-locked);
    stroke: var(--journey-locked-edge);
    stroke-width: 3;
}

.jm-node.done .jm-disc {
    fill: var(--journey-done);
    stroke: var(--journey-done-edge);
}

.jm-node.current .jm-disc {
    fill: #ffffff;
    stroke: var(--journey-current-edge);
    stroke-width: 4;
}

.jm-num {
    font-family: inherit;
    font-size: 22px;
    font-weight: 800;
    fill: var(--journey-ink);
}

.jm-node.locked .jm-num {
    fill: #64748b;
}

/* A boss ahead is a grey shape; it gets its colours once the player stands before it */
.jm-node.boss.locked .jm-king,
.jm-node.boss.locked .jm-gale {
    filter: grayscale(1);
    opacity: 0.55;
}

.jm-ring {
    fill: none;
    stroke: var(--journey-current-edge);
    stroke-width: 3;
    stroke-dasharray: 6 6;
    opacity: 0;
}

.jm-node.selected .jm-ring,
.jm-node:focus-visible .jm-ring {
    opacity: 1;
    animation: jmSpin 9s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.jm-pulse {
    fill: none;
    stroke: var(--journey-current-edge);
    stroke-width: 3;
    transform-box: fill-box;
    transform-origin: center;
    animation: jmPulse 2.2s ease-out infinite;
}

.jm-node.current .jm-bob,
.jm-node.boss .jm-bob {
    animation: jmBob 2.6s ease-in-out infinite;
}

.jm-node.boss.locked .jm-bob {
    animation: none;
}

.jm-node.fresh .jm-mark {
    transform-box: fill-box;
    transform-origin: center;
    animation: jmPop 0.6s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.jm-crown {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: jmCrown 2.6s ease-in-out infinite;
}

.jm-swirl {
    transform-box: fill-box;
    transform-origin: center;
    animation: jmSpin 5s linear infinite reverse;
}

.jm-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: jmBlink 4.2s infinite;
}

.jm-cloud {
    animation: jmDrift 26s ease-in-out infinite alternate;
}

.jm-cloud.slow {
    animation-duration: 38s;
    animation-direction: alternate-reverse;
}

.jm-bolt {
    animation: jmFlash 5.5s infinite;
}

.jm-wind path {
    stroke-dasharray: 10 8;
    animation: jmWind 2.4s linear infinite;
}

.jm-rain path {
    animation: jmRain 1.6s linear infinite;
}

.jm-rain path:nth-child(2n) {
    animation-delay: -0.8s;
}

.jm-grass {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: jmSway 3.4s ease-in-out infinite alternate;
}

.jm-floaters circle {
    animation: jmRise 16s linear infinite;
}

.jm-floaters .f2 { animation-duration: 21s; animation-delay: -6s; }
.jm-floaters .f3 { animation-duration: 18s; animation-delay: -11s; }
.jm-floaters .f4 { animation-duration: 24s; animation-delay: -3s; }
.jm-floaters .f5 { animation-duration: 19s; animation-delay: -14s; }
.jm-floaters .f6 { animation-duration: 22s; animation-delay: -9s; }

@keyframes jmDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes jmSpin {
    to { transform: rotate(360deg); }
}

@keyframes jmPulse {
    0% { transform: scale(0.85); opacity: 0.9; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes jmBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes jmPop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

@keyframes jmCrown {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(5deg) translateY(-1.5px); }
}

@keyframes jmBlink {
    0%, 94%, 100% { transform: scaleY(1); }
    97% { transform: scaleY(0.1); }
}

@keyframes jmDrift {
    from { transform: translateX(-14px); }
    to { transform: translateX(18px); }
}

@keyframes jmFlash {
    0%, 86%, 92%, 100% { opacity: 0; }
    88%, 90% { opacity: 1; }
}

@keyframes jmWind {
    to { stroke-dashoffset: -36; }
}

@keyframes jmRain {
    from { transform: translateY(-10px); opacity: 0; }
    30% { opacity: 1; }
    to { transform: translateY(26px); opacity: 0; }
}

@keyframes jmSway {
    from { transform: skewX(-5deg); }
    to { transform: skewX(6deg); }
}

@keyframes jmRise {
    from { transform: translate(0, 0); opacity: 0; }
    8% { opacity: 1; }
    50% { transform: translate(14px, -560px); }
    92% { opacity: 1; }
    to { transform: translate(-8px, -1130px); opacity: 0; }
}

/* ----- Scenes of the map (JourneyScenes): short jokes in a loop, each with a rest, none in the way of a tap.
   A transform set here replaces the transform attribute of the element, so every moving part sits in a group
   that places it; scales and turns then go around the origin of that group. What only flashes by is jm-fx:
   unseen until its animation shows it, and so unseen when motion is reduced. ----- */
.jm-scenes,
.jm-traveller {
    pointer-events: none;
}

.jm-fx {
    opacity: 0;
}

/* Meadow */
.jm-snail {
    transform: translateX(150px);
    animation: jmCrawl 80s linear infinite;
}

.jm-stalks {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: jmNod 1.6s ease-in-out infinite alternate;
}

.jm-bee {
    animation: jmBee 10s ease-in-out infinite;
}

.jm-wing {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: jmFlap 0.16s ease-in-out infinite alternate;
}

.jm-bee-bubble {
    animation: jmBeeBubble 10s ease-in-out infinite;
}

.jm-bee-pop {
    animation: jmBeePop 10s ease-out infinite;
}

/* Pond */
.jm-gum {
    animation: jmGum 8s ease-in-out infinite;
}

.jm-gum-pop {
    animation: jmGumPop 8s ease-out infinite;
}

.jm-frog-eyes {
    transform-box: fill-box;
    transform-origin: 50% 80%;
    animation: jmFrogEyes 8s ease-in-out infinite;
}

.jm-fish {
    animation: jmFish 9s linear infinite;
}

.jm-splash {
    transform-box: fill-box;
    transform-origin: center;
}

.jm-splash.a { animation: jmSplashA 9s ease-out infinite; }
.jm-splash.b { animation: jmSplashB 9s ease-out infinite; }

/* Frozen creek */
/* Where it rests when nothing moves: clear of the path */
.jm-slide {
    transform: translateX(78px);
    animation: jmSlide 5s ease-in-out infinite alternate;
}

.jm-facing {
    animation: jmFacing 10s steps(1) infinite;
}

.jm-flipper {
    transform-box: fill-box;
    transform-origin: 100% 50%;
    animation: jmWave 0.5s ease-in-out infinite alternate;
}

.jm-bonk.r { animation: jmBonkR 10s ease-out infinite; }
.jm-bonk.l { animation: jmBonkL 10s ease-out infinite; }

/* Thicket */
.jm-peek {
    animation: jmPeek 9s ease-in-out infinite;
}

.jm-peek.late {
    animation-delay: -4.5s;
}

.jm-look {
    animation: jmLook 2.4s steps(1) infinite;
}

/* Ridge */
.jm-cling {
    animation: jmCling 0.55s ease-in-out infinite alternate;
}

.jm-chase {
    transform: translateX(226px);
    animation: jmChase 13s linear infinite;
}

.jm-tumble {
    animation: jmSpin 1.3s linear infinite;
}

.jm-hop {
    animation: jmHop 0.42s ease-in-out infinite alternate;
}

/* Gorge */
.jm-nervous {
    animation: jmNervous 8s linear infinite;
}

.jm-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: jmSpark 0.35s ease-in-out infinite alternate;
}

.jm-sparks .jm-spark:nth-child(2) { animation-delay: -0.12s; }
.jm-sparks .jm-spark:nth-child(3) { animation-delay: -0.23s; }

.jm-sweat {
    animation: jmSweat 8s linear infinite;
}

.jm-puff {
    animation: jmPuff 8s ease-out infinite;
}

/* Crowd */
.jm-crowd circle {
    animation: jmJostle 2.8s ease-in-out infinite alternate;
}

.jm-crowd circle:nth-child(2n) { animation-delay: -0.9s; }
.jm-crowd circle:nth-child(3n) { animation-delay: -1.7s; }
.jm-crowd.late circle { animation-duration: 3.4s; }

.jm-squeeze.l { animation: jmSqueezeL 6s ease-in-out infinite; }
.jm-squeeze.r { animation: jmSqueezeR 6s ease-in-out infinite; }

.jm-squeezed {
    animation: jmSqueezed 6s ease-in-out infinite;
}

.jm-eyes-open { animation: jmEyesOpen 6s steps(1) infinite; }
.jm-eyes-shut { animation: jmEyesShut 6s steps(1) infinite; }

/* Peak */
.jm-climb {
    animation: jmClimb 14s linear infinite;
}

.jm-blow {
    animation: jmBlow 14s ease-out infinite;
}

/* The traveller beside the stage to play */
.jm-walk.walks {
    animation: jmWalk 1.5s 0.35s ease-in-out backwards;
}

.jm-traveller.home .jm-hop {
    animation: jmCheer 0.6s ease-out infinite alternate;
}

.jm-flag {
    transform-box: fill-box;
    transform-origin: 0 50%;
    animation: jmWave 0.4s ease-in-out infinite alternate;
}

@keyframes jmCrawl {
    from { transform: translateX(-40px); }
    to { transform: translateX(400px); }
}

@keyframes jmNod {
    from { transform: rotate(-7deg); }
    to { transform: rotate(7deg); }
}

@keyframes jmFlap {
    from { transform: scaleY(1); }
    to { transform: scaleY(0.35); }
}

/* Flies up to the bubble, bumps into it, spins down dizzy and goes home */
@keyframes jmBee {
    0% { transform: translate(0, 0) rotate(0); }
    30% { transform: translate(40px, -36px) rotate(0); }
    33% { transform: translate(35px, -32px) rotate(0); }
    56%, 64% { transform: translate(33px, -12px) rotate(720deg); }
    100% { transform: translate(0, 0) rotate(720deg); }
}

@keyframes jmBeeBubble {
    0%, 29% { transform: scale(1); opacity: 1; }
    31% { transform: scale(1.3); opacity: 1; }
    33%, 78% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes jmBeePop {
    0%, 30% { transform: scale(0.3); opacity: 0; }
    33% { transform: scale(1); opacity: 1; }
    41%, 100% { transform: scale(1.5); opacity: 0; }
}

@keyframes jmGum {
    0%, 12% { transform: scale(0); opacity: 1; }
    58% { transform: scale(1); opacity: 1; }
    61% { transform: scale(1.25); opacity: 1; }
    62%, 100% { transform: scale(1.25); opacity: 0; }
}

@keyframes jmGumPop {
    0%, 60% { transform: scale(0.3); opacity: 0; }
    63% { transform: scale(1); opacity: 1; }
    71%, 100% { transform: scale(1.5); opacity: 0; }
}

@keyframes jmFrogEyes {
    0%, 60% { transform: scale(1); }
    63%, 76% { transform: scale(1.4); }
    82%, 100% { transform: scale(1); }
}

@keyframes jmFish {
    0%, 68% { transform: translate(0, 4px) rotate(-70deg); opacity: 0; }
    70% { transform: translate(0, 0) rotate(-70deg); opacity: 1; }
    78% { transform: translate(15px, -24px) rotate(0); opacity: 1; }
    86% { transform: translate(30px, 0) rotate(70deg); opacity: 1; }
    88%, 100% { transform: translate(30px, 4px) rotate(70deg); opacity: 0; }
}

@keyframes jmSplashA {
    0%, 68% { transform: scale(0.3); opacity: 0; }
    71% { transform: scale(1); opacity: 0.9; }
    80%, 100% { transform: scale(1.9); opacity: 0; }
}

@keyframes jmSplashB {
    0%, 84% { transform: scale(0.3); opacity: 0; }
    87% { transform: scale(1); opacity: 0.9; }
    96%, 100% { transform: scale(1.9); opacity: 0; }
}

@keyframes jmSlide {
    from { transform: translateX(0); }
    to { transform: translateX(98px); }
}

/* The slide takes 5 s each way: the penguin looks where it goes */
@keyframes jmFacing {
    0% { transform: scaleX(1); }
    50% { transform: scaleX(-1); }
}

@keyframes jmWave {
    from { transform: rotate(-22deg); }
    to { transform: rotate(14deg); }
}

@keyframes jmBonkR {
    0%, 46% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1); opacity: 1; }
    57%, 100% { transform: scale(1.5); opacity: 0; }
}

@keyframes jmBonkL {
    0%, 100% { transform: scale(1); opacity: 1; }
    7% { transform: scale(1.5); opacity: 0; }
    96% { transform: scale(0.3); opacity: 0; }
}

@keyframes jmPeek {
    0%, 18% { transform: translateY(0); }
    26%, 52% { transform: translateY(-24px); }
    60%, 100% { transform: translateY(0); }
}

@keyframes jmLook {
    0% { transform: translateX(-1.2px); }
    50% { transform: translateX(1.2px); }
}

@keyframes jmCling {
    from { transform: rotate(-9deg); }
    to { transform: rotate(7deg); }
}

@keyframes jmChase {
    0% { transform: translateX(-70px); }
    45%, 100% { transform: translateX(430px); }
}

@keyframes jmHop {
    from { transform: translateY(0); }
    to { transform: translateY(-4px); }
}

/* Calm, then trembling more and more, swollen, and nothing happens */
@keyframes jmNervous {
    0%, 45% { transform: translateX(0) scale(1); }
    48% { transform: translateX(-1px) scale(1); }
    51% { transform: translateX(1px) scale(1); }
    54% { transform: translateX(-1.5px) scale(1.05); }
    57% { transform: translateX(1.5px) scale(1.1); }
    60% { transform: translateX(-1.5px) scale(1.15); }
    63% { transform: translateX(1.5px) scale(1.2); }
    66% { transform: translateX(-1.5px) scale(1.25); }
    70% { transform: translateX(0) scale(1.3); }
    73% { transform: translateX(0) scale(0.92); }
    77%, 100% { transform: translateX(0) scale(1); }
}

@keyframes jmSpark {
    from { transform: scale(0.6); }
    to { transform: scale(1.3); }
}

@keyframes jmSweat {
    0%, 46% { transform: translateY(0); opacity: 0; }
    50% { transform: translateY(0); opacity: 1; }
    68% { transform: translateY(6px); opacity: 1; }
    70%, 100% { transform: translateY(6px); opacity: 0; }
}

@keyframes jmPuff {
    0%, 70% { transform: translateY(0) scale(0.4); opacity: 0; }
    74% { transform: translateY(-2px) scale(1); opacity: 0.95; }
    92%, 100% { transform: translateY(-16px) scale(1.5); opacity: 0; }
}

@keyframes jmJostle {
    from { transform: translate(0, 0); }
    to { transform: translate(2px, -4px); }
}

@keyframes jmSqueezeL {
    0%, 30% { transform: translateX(0); }
    44%, 60% { transform: translateX(6px); }
    72%, 100% { transform: translateX(0); }
}

@keyframes jmSqueezeR {
    0%, 30% { transform: translateX(0); }
    44%, 60% { transform: translateX(-6px); }
    72%, 100% { transform: translateX(0); }
}

@keyframes jmSqueezed {
    0%, 30% { transform: translateY(0) scale(1, 1); }
    44%, 60% { transform: translateY(0) scale(0.66, 1.28); }
    68% { transform: translateY(-9px) scale(1.12, 0.9); }
    80%, 100% { transform: translateY(0) scale(1, 1); }
}

@keyframes jmEyesOpen {
    0% { opacity: 1; }
    40% { opacity: 0; }
    62% { opacity: 1; }
}

@keyframes jmEyesShut {
    0% { opacity: 0; }
    40% { opacity: 1; }
    62% { opacity: 0; }
}

/* Up in small steps, a moment at the top, then down head over heels */
@keyframes jmClimb {
    0% { transform: translate(0, 0) rotate(0); animation-timing-function: steps(16); }
    66% { transform: translate(-44px, -98px) rotate(0); }
    75% { transform: translate(-44px, -98px) rotate(0); animation-timing-function: ease-in; }
    86%, 100% { transform: translate(0, 0) rotate(720deg); }
}

@keyframes jmBlow {
    0%, 70% { transform: translate(-6px, -4px); opacity: 0; }
    74% { transform: translate(0, 0); opacity: 1; }
    80% { transform: translate(8px, 5px); opacity: 1; }
    84%, 100% { transform: translate(12px, 8px); opacity: 0; }
}

@keyframes jmWalk {
    from { transform: translate(var(--fx), var(--fy)); }
    to { transform: translate(0, 0); }
}

@keyframes jmCheer {
    from { transform: translateY(0); }
    to { transform: translateY(-9px); }
}

/* The card of the chosen stage */
.journey-card {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
}

/* A card longer than its place scrolls; nothing in it is squeezed */
.journey-card > * {
    flex: none;
}

.journey-card.boss {
    border-color: #fcd34d;
}

.journey-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.journey-card-icon {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--news-bg);
    border: 1px solid var(--news-border);
    font-size: 1.5rem;
}

.journey-card-title {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--journey-ink);
}

.journey-rule {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.journey-story {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-main);
}

.journey-goal {
    margin: 0;
    font-weight: 700;
    color: var(--journey-ink);
}

.journey-locked {
    margin: 0;
    padding: var(--space-3);
    border-radius: 14px;
    background: #f1f5f9;
    font-weight: 600;
    color: #475569;
}

.journey-done {
    margin: 0;
    padding: var(--space-3);
    border-radius: 14px;
    background: var(--done-bg);
    border: 1px solid var(--done-border);
    font-weight: 700;
    color: var(--done-text);
}

/* The result of a stage */
.journey-result-stage {
    margin: 0;
    font-weight: 700;
    color: var(--text-muted);
}

.journey-progress {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--journey-ink);
}

.journey-result.won h3 {
    color: var(--done-text);
}

/* Rays turning behind the sign of a won stage */
.journey-burst {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

.journey-burst-rays {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(#fde68a 0 12deg, transparent 12deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 34%, #000 36%, #000 68%, transparent 70%);
    mask: radial-gradient(circle, transparent 34%, #000 36%, #000 68%, transparent 70%);
    animation: jmSpin 12s linear infinite;
}

.journey-burst-sign {
    position: relative;
    font-size: 2.8rem;
    line-height: 1;
    animation: jmPop 0.55s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* While a stage is played the tabs step aside: a slip of the finger must not end the round */
.journey-playing .bottom-nav {
    display: none;
}

@media (max-width: 360px) {
    :root {
        --gutter: var(--space-3);
    }

    .top-nav {
        padding-left: 12px;
        padding-right: 12px;
    }

    .brand-title {
        font-size: 1.3rem;
    }

    .player-badge {
        padding: 5px 10px;
        font-size: 0.82rem;
    }

    .bottom-nav {
        gap: 2px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .nav-tab {
        font-size: 0.68rem;
        padding: 5px 2px;
    }

    .tab-icon {
        font-size: 1.15rem;
    }

    .card-panel {
        padding: var(--space-4);
        border-radius: 18px;
    }

    .panel-title {
        font-size: 1.15rem;
    }

    .daily-date {
        font-size: 1.45rem;
    }

    .leaderboard-table .col-rank {
        width: 38px;
    }

    .leaderboard-table .col-score {
        width: 80px;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 8px 6px;
    }

    .play-card {
        padding: var(--space-5) var(--space-4);
        gap: var(--space-3);
        border-radius: 24px;
    }

    .play-card h1,
    .play-card h2 {
        font-size: 1.7rem;
    }

    .game-over-dialog {
        padding: var(--space-5) var(--space-4);
        gap: var(--space-3);
        border-radius: 24px;
    }

    .score-number {
        font-size: 2.4rem;
    }

    .stat-box {
        padding: var(--space-2);
    }

    .action-buttons-row {
        gap: var(--space-2);
    }

    .restart-btn {
        flex: 1.4;
        font-size: 1.05rem;
    }

    .share-btn {
        font-size: 0.92rem;
        padding: 12px 8px;
    }
}

@media (max-width: 440px) {
    /* The combo moves under the name so long nicknames stay readable */
    .leaderboard-table .col-combo {
        display: none;
    }

    .player-cell-combo {
        display: block;
    }

    .install-chip {
        padding: 6px 9px;
    }

    .install-chip-label {
        display: none;
    }
}

/* Short portrait screens */
/* A phone in a browser with its bars: both start cards tighter, so the journey under the game is in sight */
@media (orientation: portrait) and (max-height: 720px) {
    .game-start-overlay {
        padding: var(--space-3);
    }

    .start-stack {
        gap: var(--space-2);
    }

    .start-stack > .play-card {
        gap: var(--space-3);
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .start-stack .play-card-intro {
        gap: var(--space-1);
    }

    .start-stack .play-card-form {
        gap: var(--space-2);
    }

    .start-stack .play-btn {
        padding: 13px 22px;
    }

    .start-stack .rules-hint {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .journey-home {
        gap: var(--space-1);
        padding: var(--space-2) var(--space-3) var(--space-3);
    }

    .journey-home-btn {
        padding: 10px 14px;
        font-size: 1rem;
    }
}

@media (orientation: portrait) and (max-height: 660px) {
    .game-start-overlay {
        padding: var(--space-3);
    }

    .play-card {
        gap: var(--space-3);
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .play-card-intro {
        gap: var(--space-1);
    }

    .play-card h1,
    .play-card h2 {
        font-size: 1.5rem;
    }

    .rules-hint {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .play-btn {
        padding: 13px 22px;
        font-size: 1.15rem;
    }

    .modal-backdrop,
    .modal-dialog {
        padding: var(--space-2);
    }

    .game-over-dialog {
        gap: var(--space-2);
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .game-over-summary,
    .game-over-actions {
        gap: var(--space-2);
    }

    .game-over-dialog h3 {
        font-size: 1.35rem;
    }

    .score-display-box {
        padding: var(--space-2);
    }

    .score-number {
        font-size: 2.2rem;
    }

    .restart-btn,
    .share-btn {
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

/* Tablets and larger; phones in landscape keep their compact layout (see below) */
@media (min-width: 768px) and (min-height: 541px) {
    :root {
        --gutter: var(--space-6);
    }

    .app-container {
        max-width: 720px;
    }

    .top-nav {
        padding-left: 24px;
        padding-right: 24px;
    }

    .brand-title {
        font-size: 1.75rem;
    }

    .player-badge {
        font-size: 1rem;
        padding: 8px 18px;
    }

    .bottom-nav {
        padding-top: 10px;
    }

    .nav-tab {
        max-width: 120px;
        padding: 8px 6px;
        font-size: 0.85rem;
    }

    .tab-icon {
        font-size: 1.5rem;
    }

    .game-start-overlay {
        padding: var(--space-6);
    }

    .play-card {
        max-width: 440px;
        padding: calc(var(--space-6) + var(--space-3)) var(--space-6);
        gap: var(--space-5);
    }

    .start-stack {
        gap: var(--space-4);
    }

    .journey-home {
        max-width: 440px;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-6) var(--space-5);
    }

    .play-card h1,
    .play-card h2 {
        font-size: 2.3rem;
    }

    .rules-hint {
        font-size: 0.95rem;
    }

    .game-over-dialog {
        max-width: 460px;
        padding: calc(var(--space-6) + var(--space-3)) var(--space-6);
    }

    .scroll-view {
        gap: var(--space-5);
    }

    .card-panel {
        padding: var(--space-6);
        border-radius: 24px;
    }

    .panel-title {
        font-size: 1.5rem;
    }

    .segment-btn {
        padding: 8px 18px;
        font-size: 0.95rem;
    }

    .leaderboard-table th {
        padding: 10px 14px;
        font-size: 0.78rem;
    }

    .leaderboard-table td {
        padding: 12px 14px;
        font-size: 1.05rem;
    }

    .leaderboard-table .col-rank {
        width: 60px;
    }

    .leaderboard-table .col-combo {
        width: 96px;
    }

    .leaderboard-table .col-score {
        width: 130px;
    }
}

@media (min-width: 1200px) {
    /* A laptop or desktop screen is read from further away: a larger base and no text under 13 px */
    html {
        font-size: 17px;
    }

    .app-container {
        max-width: 760px;
    }

    .nav-tab,
    .stat-lbl,
    .app-version,
    .leaderboard-table th,
    .player-cell-combo,
    .you-tag,
    .nickname-error,
    .admin-table th,
    .range-form label,
    .chart-scale,
    .chart-labels {
        font-size: 0.8rem;
    }
}

/* Landscape phones and wide screens: side rail instead of header and tab bar */
@media (orientation: landscape) and (max-height: 540px), (orientation: landscape) and (min-width: 900px) {
    .app-container {
        max-width: none;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas:
            "brand main"
            "nav main";
        padding-left: 0;
        padding-right: var(--safe-right);
    }

    .top-nav {
        grid-area: brand;
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
        padding: calc(8px + var(--safe-top)) 8px 6px calc(8px + var(--safe-left));
        border-bottom: none;
        border-right: 1px solid var(--border-glass);
    }

    .brand-name,
    .player-name,
    .install-chip-label {
        display: none;
    }

    .top-nav-actions {
        flex-direction: column;
        max-width: none;
        gap: 6px;
    }

    .install-chip {
        padding: 6px 9px;
    }

    .player-badge {
        justify-content: center;
        max-width: none;
        padding: 6px 10px;
    }

    .main-content {
        grid-area: main;
    }

    .bottom-nav {
        grid-area: nav;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 2px;
        min-height: 0;
        padding: 4px 6px calc(6px + var(--safe-bottom)) calc(6px + var(--safe-left));
        border-top: none;
        border-right: 1px solid var(--border-glass);
    }

    .nav-tab {
        max-width: none;
        min-height: 0;
    }
}

/* Phones in landscape */
@media (orientation: landscape) and (max-height: 540px) {
    :root {
        --gutter: var(--space-3);
    }

    .nav-tab {
        padding: 2px 8px;
        gap: 1px;
        font-size: 0.62rem;
    }

    .tab-icon {
        font-size: 1.1rem;
        line-height: 1.1;
    }

    .game-start-overlay,
    .modal-backdrop,
    .modal-dialog {
        padding: var(--space-2);
    }

    .play-card {
        max-width: 580px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3) var(--space-5);
        padding: var(--space-4) var(--space-5);
        border-radius: 24px;
    }

    /* The news and yesterday's result go above the two columns, not beside them */
    .play-card > .news-banner {
        flex-basis: 100%;
    }

    /* The journey stands beside the start card, not under it */
    .start-stack {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: var(--space-3);
    }

    .start-stack > .play-card {
        flex: 1 1 0;
        min-width: 0;
    }

    .journey-home {
        flex: 0 0 200px;
        max-width: 200px;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .journey-home-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .journey-home-note {
        text-align: left;
    }

    .journey-home-btn {
        padding: 10px 12px;
        font-size: 0.95rem;
        white-space: normal;
    }

    .play-card-intro,
    .play-card-form {
        flex: 1 1 0;
        min-width: 0;
    }

    .play-card-intro {
        gap: var(--space-1);
    }

    .play-card-form {
        gap: var(--space-2);
    }

    .play-card h1,
    .play-card h2 {
        font-size: 1.6rem;
    }

    .rules-hint {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .play-btn {
        padding: 12px 20px;
        font-size: 1.1rem;
    }

    .game-over-dialog {
        max-width: 660px;
        flex-direction: row;
        align-items: center;
        gap: var(--space-5);
        padding: var(--space-4) var(--space-5);
        border-radius: 24px;
    }

    .game-over-summary,
    .game-over-actions {
        flex: 1 1 0;
        min-width: 0;
        gap: var(--space-2);
    }

    .game-over-dialog h3 {
        font-size: 1.3rem;
    }

    .score-display-box {
        padding: var(--space-2);
    }

    .score-number {
        font-size: 2.1rem;
    }

    .stat-box {
        padding: var(--space-2);
    }

    .restart-btn,
    .share-btn {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .scroll-view {
        gap: var(--space-3);
    }

    .card-panel {
        padding: var(--space-4);
        gap: var(--space-3);
    }

    .loader-card {
        gap: 14px;
        padding: 20px 26px;
    }

    .loader-logo {
        gap: 8px;
    }

    .loader-bubble {
        width: 60px;
        height: 60px;
    }

    .loader-title {
        font-size: 1.9rem;
    }
}

/* Wide landscape screens (laptops, desktops, tablets): the rail gives the game field the full height */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 541px) {
    .top-nav {
        gap: 14px;
        padding: calc(16px + var(--safe-top)) 12px 12px calc(12px + var(--safe-left));
    }

    .brand-title {
        flex-direction: column;
        gap: 0;
        font-size: 1.2rem;
    }

    .brand-icon {
        font-size: 1.75rem;
    }

    .brand-name {
        display: inline;
    }

    .bottom-nav {
        justify-content: flex-start;
        gap: 6px;
        padding: 4px 12px calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));
    }

    .nav-tab {
        flex: none;
        padding: 10px 8px;
    }
}

/* Content screens side by side once the rail leaves enough width */
@media (orientation: landscape) and (min-width: 900px), (orientation: landscape) and (max-height: 540px) and (min-width: 780px) {
    .journey-layout {
        flex-direction: row;
        align-items: stretch;
    }

    .journey-map-wrap {
        flex: 1 1 0;
        max-width: 440px;
    }

    .journey-card {
        flex: 1 1 0;
        align-self: flex-start;
        max-height: 100%;
        overflow-y: auto;
    }

    /* The button to play stays in sight on a low screen, where the card scrolls */
    .journey-card > .block {
        position: sticky;
        bottom: 0;
    }

    .scroll-view {
        padding-inline: max(var(--gutter), calc((100% - 960px) / 2));
    }

    .scroll-view.split {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        align-content: start;
        padding-inline: max(var(--gutter), calc((100% - 1200px) / 2));
    }

    .scroll-view.split > .app-version {
        grid-column: 1 / -1;
    }

    .scroll-view.split > :only-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(100%, 960px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop,
    .modal-dialog::backdrop,
    .game-over-dialog,
    .rules-dialog,
    .loader-card {
        animation: none;
    }

    .nav-tab.active .tab-icon {
        transform: none;
    }

    .install-chip {
        animation: none;
    }

    .scroll-view > .card-panel {
        animation: none;
    }

    .nav-tab:active,
    .segment-btn:active,
    .icon-btn:active,
    .badge-tile:active {
        transform: none;
    }

    /* Badges just appear */
    .badge-reveal {
        animation: fadeIn 0.3s forwards;
        animation-delay: 0s;
    }

    .badge-reveal-medal::before,
    .badge-reveal-shine,
    .badge-reveal-medal i {
        display: none;
    }

    .journey-burst-rays,
    .journey-burst-sign {
        animation: none !important;
    }

    /* The map keeps its small movements on the spot: a blink, a wave, a nod, a hop, a spark. Many people turn
       system animations off for speed alone and would get a dead picture. Whatever travels across the map, spins,
       shakes or flashes stands still. */
    .jm *:not(.jm-eye):not(.jm-crown):not(.jm-wing):not(.jm-stalks):not(.jm-flipper):not(.jm-flag):not(.jm-look):not(.jm-cling):not(.jm-hop):not(.jm-bob):not(.jm-spark):not(.jm-grass):not(.jm-peek):not(.jm-squeeze):not(.jm-squeezed):not(.jm-eyes-open):not(.jm-eyes-shut) {
        animation: none !important;
    }

    /* Slower where the movement is quick */
    .jm-wing {
        animation-duration: 0.45s;
    }

    .jm-spark {
        animation-duration: 0.9s;
    }

    .jm-seg.walked.fresh {
        stroke-dashoffset: 0;
    }

    .jm-pulse,
    .jt-pulse,
    .jm-bolt {
        display: none;
    }

    .journey-home {
        transition: none;
    }
}