:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
    --page: #10100f;
    --surface: #191916;
    --surface-raised: #21211d;
    --line: rgba(255, 255, 255, 0.11);
    --text: #f4f2eb;
    --muted: #a8a69d;
    --coffee: #f0ab4c;
    --coffee-dark: #2b1907;
    --success: #7ed6a8;
    --font-display: "Share Tech Mono", "SFMono-Regular", Consolas, monospace;

    /* One place to read the participant app's stacking order in, instead of a
       scattering of magic z-index numbers. Low to high; everything fixed/floating in
       the mobile shell uses a token from here.

       The level-up celebration is deliberately the highest layer: while it plays it
       owns the screen, above the notification toasts. It additionally promotes itself
       into the browser's top layer via the popover API where that is supported, which
       is the only way to also clear a native <dialog> - z-index alone cannot. */
    --layer-top-shell: 40;
    --layer-ticker: 45;
    --layer-nav: 50;
    --layer-undo-snackbar: 55;
    --layer-toasts: 70;
    --layer-levelup: 80;
}

/* Compact participant profile. */
.profile-form,
.profile-section {
    display: grid;
    gap: .75rem;
}

.profile-section {
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid #ffffff1f;
    border-radius: .7rem;
    background: #111522cc;
}

.profile-section legend,
.profile-section > label,
.profile-label-row > label {
    font-weight: 800;
    letter-spacing: .04em;
}

.profile-label-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.profile-help,
.profile-status {
    margin: 0;
    color: #aaaec1;
    font-size: .82rem;
}

.profile-status {
    margin-bottom: 1rem;
    color: #9bf6c7;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
    gap: .55rem;
}

.avatar-choice {
    display: grid;
    place-items: center;
    gap: .25rem;
    min-width: 0;
    padding: .45rem .25rem;
    border: 1px solid #ffffff24;
    border-radius: .55rem;
    background: #080b13;
    cursor: pointer;
}

.avatar-choice:has(input:checked) {
    border-color: var(--mobile-cyan);
    box-shadow: 0 0 .8rem rgba(99, 230, 255, .25);
}

.avatar-choice img {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
}

.avatar-choice small {
    width: 100%;
    overflow: hidden;
    color: #c6cada;
    font-size: .62rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.avatar-choice--none > span,
.avatar-choice > span {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px dashed #ffffff32;
    color: #777e94;
    font-size: 1.4rem;
}

.avatar-choice--occupied {
    opacity: .28;
    cursor: not-allowed;
}

.profile-weight {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.profile-weight input {
    width: min(12rem, 100%);
}

.participant-avatar-image {
    image-rendering: pixelated;
}

.participant-avatar,
.standings-row__avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: .35rem;
    image-rendering: pixelated;
}

.participant-title-with-avatar {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.standings-row__identity {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--page);
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 20% -10%, rgba(240, 171, 76, 0.12), transparent 34rem),
        var(--page);
}

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

button,
summary,
select {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

.entry-shell {
    width: min(100%, 32rem);
    min-height: 100dvh;
    margin-inline: auto;
    padding: max(2rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
}

.entry-header {
    margin-bottom: 2.25rem;
}

.eyebrow {
    margin: 0;
    color: var(--coffee);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.17em;
}

.entry-header h1 {
    margin: 0.2rem 0 0;
    font-size: clamp(2.8rem, 14vw, 4.6rem);
    font-weight: 820;
    letter-spacing: -0.065em;
    line-height: 0.98;
}

.entry-intro {
    max-width: 24rem;
    margin: 0.9rem 0 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
}

.status-message,
.validation-summary {
    margin: 0 0 1.25rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.92rem;
}

.status-message--success {
    color: var(--success);
    border-color: rgba(126, 214, 168, 0.22);
}

.validation-summary:empty,
.validation-summary-valid {
    display: none;
}

.validation-summary ul {
    margin: 0;
    padding-left: 1.15rem;
}

.entry-section {
    padding-top: 1.15rem;
    border-top: 1px solid var(--line);
}

.entry-section--borderless {
    padding-top: 0;
    border-top: 0;
}

.section-heading {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin-bottom: 0.8rem;
}

.section-heading h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 680;
}

.field-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 620;
}

.select-wrap {
    position: relative;
}

.select-wrap::after {
    content: "⌄";
    position: absolute;
    top: 50%;
    right: 1rem;
    translate: 0 -56%;
    color: var(--coffee);
    font-size: 1.2rem;
    pointer-events: none;
}

select,
input,
textarea {
    width: 100%;
    min-height: 3.55rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    outline: none;
    color: var(--text);
    background: var(--surface);
    font-size: 1rem;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

select {
    appearance: none;
    padding: 0.8rem 3rem 0.8rem 1rem;
}

input {
    padding: 0.8rem 1rem;
}

textarea {
    min-height: 5rem;
    padding: 0.8rem 1rem;
    resize: vertical;
}

select:focus,
input:focus,
textarea:focus {
    border-color: rgba(240, 171, 76, 0.7);
    box-shadow: 0 0 0 0.22rem rgba(240, 171, 76, 0.12);
    background: var(--surface-raised);
}

/* Text that exists only for assistive technology: the level-up celebration is a
   decorative canvas, so its announcement lives in a hidden live region instead
   (see participant-realtime.js). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.field-error {
    display: block;
    min-height: 1.3rem;
    padding-top: 0.35rem;
    color: #ff9e91;
    font-size: 0.82rem;
}

.field-error:empty {
    visibility: hidden;
}

.registration-header {
    margin-bottom: 1.5rem;
}

.registration-brand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.participant-name {
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 660;
    text-align: right;
}

/* Logga is built for density: the most used registration controls should fit
   within one normal phone viewport as far as the decided structure allows, so
   every bit of vertical padding here has to earn its place. */
.registration-category {
    padding: 0.7rem 0 0.75rem;
    border-top: 1px solid var(--line);
}

.registration-category--first {
    padding-top: 0.25rem;
    border-top: 0;
}

.registration-category .section-heading {
    margin-bottom: 0.45rem;
}

.registration-category .section-heading h2 {
    font-size: 1.02rem;
    letter-spacing: -0.015em;
}

/* A low strip rather than a card. Icon, activity and elapsed time on one line,
   with any stop action trailing on the same row. */
.current-activity {
    min-height: 2.35rem;
    margin-bottom: 0.5rem;
    padding: 0.35rem 0.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    border-left: 0.18rem solid #70cfa9;
    border-radius: 0 0.6rem 0.6rem 0;
    background: linear-gradient(90deg, rgba(46, 126, 95, 0.13), transparent);
}

.current-activity__icon {
    font-size: 1.05rem;
}

.current-activity strong {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    font-size: 0.86rem;
}

.current-activity__elapsed {
    color: var(--muted);
    font-size: 0.7rem;
    white-space: nowrap;
}

.current-activity__action {
    flex: 0 0 auto;
}

.current-activity__action button {
    padding: 0;
    border: 0;
    color: var(--muted);
    background: transparent;
    font-size: 0.72rem;
    text-decoration: underline;
    text-underline-offset: 0.18rem;
    cursor: pointer;
}

.activity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.activity-action {
    width: 100%;
    /* ~44px: still a comfortable touch target, but a third lower than before. */
    min-height: 2.75rem;
    padding: 0.4rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    color: var(--text);
    background: rgba(255, 255, 255, 0.025);
    font-size: 0.82rem;
    font-weight: 720;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.activity-action:hover {
    border-color: rgba(112, 207, 169, 0.32);
}

.activity-action:active {
    transform: scale(0.98);
}

.activity-action--active {
    border-color: rgba(112, 207, 169, 0.48);
    background: rgba(46, 126, 95, 0.18);
    box-shadow: inset 0 0 0 1px rgba(112, 207, 169, 0.08);
}

.active-meal {
    margin: 0.1rem 0 1rem;
    padding: 0.85rem;
    display: grid;
    gap: 0.75rem;
    border: 1px solid rgba(240, 171, 76, 0.3);
    border-radius: 0.95rem;
    background: linear-gradient(135deg, rgba(240, 171, 76, 0.1), rgba(188, 80, 167, 0.055));
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.1);
}

.active-meal__copy {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.active-meal__copy > span {
    font-size: 1.5rem;
}

.active-meal__copy div {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.active-meal__copy strong {
    font-size: 0.92rem;
}

.active-meal__copy small {
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 0.72rem;
}

.active-meal button {
    width: 100%;
    min-height: 3.35rem;
    border: 0;
    border-radius: 0.8rem;
    color: var(--coffee-dark);
    background: var(--coffee);
    font-size: 0.88rem;
    font-weight: 780;
    cursor: pointer;
}

.active-meal__done {
    color: var(--success);
    font-size: 0.8rem;
    font-weight: 690;
}

.event-grid {
    display: grid;
    gap: 0.4rem;
}

.event-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.event-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-form {
    min-width: 0;
    margin: 0;
    transition: opacity 120ms ease;
}

.event-form--submitting {
    opacity: 0.58;
    pointer-events: none;
}

.event-action {
    width: 100%;
    min-height: 7.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 1.05rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 0.65rem 1.5rem rgba(0, 0, 0, 0.12);
    font-size: 1rem;
    font-weight: 760;
    line-height: 1.15;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 120ms ease, border-color 120ms ease, filter 120ms ease;
}

.event-action:hover {
    border-color: rgba(255, 255, 255, 0.22);
    filter: brightness(1.08);
}

.event-action:active {
    transform: scale(0.975);
}

.event-action:focus-visible,
.quick-option-grid button:focus-visible {
    outline: 0.18rem solid var(--coffee);
    outline-offset: 0.16rem;
}

.event-action__icon {
    font-size: 2rem;
    line-height: 1;
}

.event-action--compact {
    min-height: 6.2rem;
    padding: 0.75rem;
    font-size: 0.88rem;
}

.event-action--compact .event-action__icon {
    font-size: 1.7rem;
}

/* The dense registration buttons on Logga: icon and text on ONE line, roughly
   half the height of the old stacked cards. A touch target below ~44px starts to
   feel cramped, so that - not a literal third of the old height - is the floor. */
.event-action--row {
    min-height: 2.9rem;
    padding: 0.4rem 0.7rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    border-radius: 0.7rem;
    box-shadow: none;
    font-size: 0.88rem;
}

.event-action--row .event-action__icon {
    font-size: 1.15rem;
}

.event-action--row > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Three-up variants (the six remaining drinks, Godis/Snacks/Snus, the meals). */
.event-action--tight {
    min-height: 2.75rem;
    padding: 0.35rem 0.5rem;
    gap: 0.35rem;
    font-size: 0.8rem;
}

.event-action--tight .event-action__icon {
    font-size: 1.05rem;
}

.consumption-grid--secondary {
    margin-top: 0.4rem;
}

.event-action--coffee {
    border-color: transparent;
    color: var(--coffee-dark);
    background: var(--coffee);
}

.event-action--water {
    border-color: rgba(110, 184, 225, 0.24);
    background: linear-gradient(145deg, rgba(58, 117, 151, 0.23), var(--surface) 72%);
}

.event-action--beer {
    border-color: rgba(240, 171, 76, 0.28);
    background: linear-gradient(145deg, rgba(170, 104, 27, 0.22), var(--surface) 72%);
}

.event-action--cider {
    border-color: rgba(218, 151, 71, 0.22);
    background: linear-gradient(145deg, rgba(144, 88, 31, 0.18), var(--surface) 72%);
}

.event-action--wine {
    border-color: rgba(177, 85, 122, 0.24);
    background: linear-gradient(145deg, rgba(116, 39, 70, 0.2), var(--surface) 72%);
}

.event-action--shot,
.event-action--liqueur,
.event-action--mixed {
    border-color: rgba(215, 151, 104, 0.18);
}

.event-action--energy {
    border-color: rgba(211, 229, 92, 0.22);
    background: linear-gradient(145deg, rgba(116, 134, 31, 0.17), var(--surface) 72%);
}

.event-action--soft-drink {
    border-color: rgba(206, 109, 163, 0.2);
}

.event-action--nicotine {
    border-color: rgba(173, 177, 164, 0.18);
    background: linear-gradient(145deg, rgba(91, 96, 86, 0.14), var(--surface) 72%);
}

.event-action--snack {
    border-color: rgba(226, 150, 103, 0.2);
    background: linear-gradient(145deg, rgba(139, 77, 40, 0.14), var(--surface) 72%);
}

.event-action--wide {
    min-height: 5.4rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
}

.event-action--wide small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.event-action--candy {
    border-color: rgba(224, 121, 173, 0.25);
    background: linear-gradient(145deg, rgba(155, 65, 111, 0.2), var(--surface) 68%);
}

.event-action--text {
    min-height: 6.6rem;
    font-size: 0.9rem;
    line-height: 1.3;
}

.event-action--sleep {
    border-color: rgba(137, 125, 205, 0.24);
    background: linear-gradient(145deg, rgba(73, 62, 137, 0.2), var(--surface) 72%);
}

.event-action--wake {
    border-color: rgba(235, 190, 86, 0.2);
}

.event-action--gaming {
    border-color: rgba(112, 207, 169, 0.22);
    background: linear-gradient(145deg, rgba(46, 126, 95, 0.18), var(--surface) 72%);
}

.event-action--pause {
    border-color: rgba(255, 255, 255, 0.14);
}

.quick-options {
    margin-top: 0.45rem;
    padding: 0.55rem;
    border: 1px solid rgba(240, 171, 76, 0.18);
    border-radius: 0.95rem;
    background: rgba(240, 171, 76, 0.045);
    animation: options-enter 160ms ease both;
}

.log-groups {
    margin-top: 0.45rem;
    display: grid;
    gap: 0.4rem;
}

.log-group {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.018);
}

.log-group summary {
    min-height: 2.75rem;
    padding: 0.45rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #d4d1c8;
    font-size: 0.86rem;
    font-weight: 690;
    list-style: none;
    cursor: pointer;
}

.log-group summary::-webkit-details-marker {
    display: none;
}

.log-group__chevron {
    color: var(--coffee);
    font-size: 1.1rem;
    transition: transform 150ms ease;
}

.log-group[open] .log-group__chevron {
    transform: rotate(180deg);
}

.log-group__content {
    padding: 0 0.45rem 0.45rem;
    animation: options-enter 160ms ease both;
}

.log-group--nicotine {
    border-style: dashed;
    opacity: 0.86;
}

.greeting-section {
    padding: 0.15rem 0 0.4rem;
}

/* Reporting a bug borrows the greeting composer's shape but stays deliberately
   quieter than the registration surfaces around it: it must be findable in one
   tap without competing with logging a beer. */
.bug-report-section {
    padding: 0.15rem 0 0.4rem;
}

.bug-report-composer {
    overflow: hidden;
    border: 1px solid rgba(148, 170, 255, 0.18);
    border-radius: 0.95rem;
    background: rgba(12, 15, 34, 0.5);
}

.bug-report-composer summary {
    min-height: 3.1rem;
    padding: 0.7rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #c3c9dc;
    font-size: 0.84rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.bug-report-composer summary::-webkit-details-marker {
    display: none;
}

.bug-report-form {
    padding: 0 0.75rem 0.75rem;
}

.bug-report-form__help {
    margin: 0 0 0.5rem;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.bug-report-form textarea {
    min-height: 5.4rem;
    border-color: rgba(148, 170, 255, 0.2);
}

.bug-report-form__actions {
    margin-top: 0.55rem;
    display: flex;
    justify-content: flex-end;
}

.bug-report-form__actions button {
    min-width: 7rem;
    min-height: 2.9rem;
}

.greeting-composer {
    overflow: hidden;
    border: 1px solid rgba(199, 93, 207, 0.24);
    border-radius: 0.95rem;
    background: linear-gradient(135deg, rgba(119, 45, 137, 0.09), rgba(42, 30, 68, 0.04));
}

.greeting-composer summary {
    min-height: 3.65rem;
    padding: 0.8rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #e4cce8;
    font-size: 0.88rem;
    font-weight: 720;
    list-style: none;
    cursor: pointer;
}

.greeting-composer summary::-webkit-details-marker {
    display: none;
}

.greeting-form {
    padding: 0 0.75rem 0.75rem;
}

.greeting-form textarea {
    min-height: 5.4rem;
    border-color: rgba(199, 93, 207, 0.2);
}

.greeting-form__actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(5.5rem, auto);
    align-items: center;
    gap: 0.55rem;
}

.greeting-form__actions label {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 680;
}

.greeting-form__actions select {
    min-height: 3.1rem;
    padding-block: 0.55rem;
    border-radius: 0.75rem;
    font-size: 0.84rem;
}

.greeting-form__actions button {
    min-height: 3.1rem;
    padding-inline: 1rem;
    border: 1px solid rgba(199, 93, 207, 0.36);
    border-radius: 0.75rem;
    color: #f4ddf7;
    background: rgba(154, 64, 174, 0.2);
    font-weight: 760;
    cursor: pointer;
}

.quick-options[hidden] {
    display: none;
}

.quick-options > p {
    margin: 0 0 0.6rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.quick-option-grid {
    display: grid;
    gap: 0.45rem;
}

.quick-option-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quick-option-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quick-option-grid--games {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-option-grid button {
    min-height: 3.25rem;
    padding: 0.5rem 0.35rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    color: var(--text);
    background: var(--surface-raised);
    font-size: 0.82rem;
    font-weight: 720;
    cursor: pointer;
    touch-action: manipulation;
}

.quick-option-grid button:hover {
    border-color: rgba(240, 171, 76, 0.42);
}

.quick-options__error {
    min-height: 0;
}

.current-game {
    margin-bottom: 0.65rem;
    padding: 0.8rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(112, 207, 169, 0.22);
    border-radius: 0.9rem;
    background: rgba(46, 126, 95, 0.08);
}

.current-game span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.current-game strong {
    overflow-wrap: anywhere;
    color: #8eddbd;
    font-size: 0.95rem;
    text-align: right;
}

.current-activity--sleep {
    border-color: rgba(137, 125, 205, 0.26);
    background: rgba(73, 62, 137, 0.1);
}

.current-activity--sleep strong {
    color: #b9afea;
}

.quick-options__divider {
    margin: 0.8rem 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quick-options__divider::before,
.quick-options__divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--line);
}

.empty-games {
    margin-bottom: 0;
}

.game-input-action button {
    max-width: 7.4rem;
    padding-inline: 0.7rem;
    font-size: 0.78rem;
    line-height: 1.2;
}

@keyframes options-enter {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.forget-button {
    padding: 0.65rem 0;
    border: 0;
    color: #c6c3b9;
    background: transparent;
    font-size: 0.8rem;
    text-decoration: underline;
    text-decoration-color: rgba(198, 195, 185, 0.35);
    text-underline-offset: 0.22rem;
    cursor: pointer;
}

.forget-button:hover {
    color: var(--text);
}

.input-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
}

.input-action button {
    min-height: 3.55rem;
    padding-inline: 1rem;
    border: 1px solid rgba(240, 171, 76, 0.35);
    border-radius: 0.9rem;
    color: var(--coffee);
    background: rgba(240, 171, 76, 0.08);
    font-weight: 720;
    cursor: pointer;
}

.onboarding-form {
    margin: 0;
}

.continue-button {
    width: 100%;
    min-height: 3.55rem;
    border: 0;
    border-radius: 0.9rem;
    color: var(--coffee-dark);
    background: var(--coffee);
    font-weight: 780;
    cursor: pointer;
}

.continue-button:hover {
    filter: brightness(1.06);
}

.empty-participants {
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px dashed var(--line);
    border-radius: 0.9rem;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.choice-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.25rem 0;
    color: var(--muted);
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.choice-divider::before,
.choice-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--line);
}

.input-action button:focus-visible,
.continue-button:focus-visible,
.activity-action:focus-visible,
.current-activity__action button:focus-visible,
.log-group summary:focus-visible,
.greeting-composer summary:focus-visible,
.greeting-form__actions button:focus-visible,
.forget-button:focus-visible,
.entry-footer a:focus-visible {
    outline: 0.18rem solid var(--coffee);
    outline-offset: 0.16rem;
}

.entry-footer {
    margin-top: auto;
    padding-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.76rem;
}

.entry-footer a {
    color: var(--coffee);
    text-underline-offset: 0.2rem;
}

.subtle-link {
    color: var(--muted);
    font-size: 0.76rem;
    text-underline-offset: 0.2rem;
}

.schedule-admin-shell {
    width: min(100%, 46rem);
}

.schedule-admin-header {
    margin-bottom: 1.4rem;
}

.schedule-admin-list {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.55rem;
}

.schedule-editor {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.018);
}

.schedule-editor--new {
    border-color: rgba(240, 171, 76, 0.26);
    background: rgba(240, 171, 76, 0.035);
}

.schedule-editor > summary {
    min-height: 3.7rem;
    padding: 0.8rem 0.9rem;
    display: grid;
    grid-template-columns: minmax(7.4rem, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    list-style: none;
    cursor: pointer;
}

.schedule-editor > summary::-webkit-details-marker {
    display: none;
}

.schedule-editor--new > summary {
    display: flex;
    color: var(--coffee);
    font-weight: 720;
}

.schedule-editor > summary time {
    color: var(--muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    text-transform: capitalize;
}

.schedule-editor > summary strong {
    overflow: hidden;
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-highlight {
    padding: 0.25rem 0.4rem;
    border: 1px solid rgba(240, 171, 76, 0.25);
    border-radius: 999px;
    color: var(--coffee);
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.schedule-form {
    padding: 0.8rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    border-top: 1px solid var(--line);
}

.schedule-field--wide,
.schedule-save {
    grid-column: 1 / -1;
}

.schedule-field label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 680;
}

.schedule-field label span {
    font-weight: 500;
}

.schedule-field input,
.schedule-field select,
.schedule-field textarea {
    min-height: 3rem;
    border-radius: 0.72rem;
    font-size: 0.86rem;
}

.schedule-check {
    min-height: 2.7rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #d2cfc6;
    font-size: 0.82rem;
    cursor: pointer;
}

.schedule-check input {
    width: 1.15rem;
    min-height: 1.15rem;
    accent-color: var(--coffee);
}

.schedule-save {
    min-height: 3.15rem;
    border: 1px solid rgba(240, 171, 76, 0.35);
    border-radius: 0.75rem;
    color: var(--coffee-dark);
    background: var(--coffee);
    font-weight: 760;
    cursor: pointer;
}

.schedule-delete-form {
    padding: 0 0.8rem 0.8rem;
}

.schedule-delete-form button {
    padding: 0.45rem 0;
    border: 0;
    color: #d68e84;
    background: transparent;
    font-size: 0.72rem;
    text-decoration: underline;
    text-underline-offset: 0.18rem;
    cursor: pointer;
}

.schedule-editor > summary:focus-visible,
.schedule-save:focus-visible,
.schedule-delete-form button:focus-visible,
.subtle-link:focus-visible {
    outline: 0.18rem solid var(--coffee);
    outline-offset: 0.14rem;
}

@media (max-width: 34rem) {
    .schedule-form {
        grid-template-columns: 1fr;
    }

    .schedule-field--wide,
    .schedule-save {
        grid-column: 1;
    }

    .schedule-editor > summary {
        grid-template-columns: 1fr auto;
    }

    .schedule-editor > summary time {
        grid-column: 1 / -1;
    }
}

@media (min-width: 42rem) {
    .entry-shell {
        padding-top: 4rem;
        padding-bottom: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

.final-result { gap: .9rem; }
.final-result__hero { border-color: rgba(255, 226, 154, .28); background: linear-gradient(125deg, rgba(96, 70, 22, .24), rgba(21, 20, 45, .84)); }
.final-result__hero .eyebrow { color: #ffe29a; }
.final-result__xp { grid-column: 1 / -1; margin: .35rem 0 0; color: #f7f8ff; font-size: clamp(1.8rem, 10vw, 3rem); font-weight: 850; letter-spacing: -.04em; }
.final-result__achievements { max-height: none; }
.final-result__standings { margin-top: .65rem; }
.final-result__standings-link { margin: 0; }

.lan-finalization {
    margin: 1rem 0;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(255, 92, 92, 0.28);
    border-radius: 1rem;
    background: rgba(74, 10, 15, 0.22);
}

.lan-finalization h2 { margin: 0.2rem 0 0; }

.lan-end-button {
    width: 8.5rem;
    aspect-ratio: 1;
    flex: 0 0 auto;
    border: 0.35rem solid #ffb2b2;
    border-radius: 50%;
    background: #c72032;
    box-shadow: 0 0 0 0.3rem rgba(199, 32, 50, 0.25), 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    cursor: pointer;
}

.lan-end-button:hover { background: #e02a3d; }
.lan-end-button--start {
    border-color: #b6f5cd;
    background: #1f9d55;
    box-shadow: 0 0 0 0.3rem rgba(31, 157, 85, 0.25), 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
}
.lan-end-button--start:hover { background: #26b864; }
.lan-ended-state { margin: 0; color: #ffb2b2; font-weight: 800; }

.lan-end-dialog {
    width: min(32rem, calc(100vw - 2rem));
    padding: 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    background: #171821;
    color: #f6f6fa;
}

.lan-end-dialog::backdrop { background: rgba(0, 0, 0, 0.76); }
.lan-end-dialog h2 { margin-top: 0; }
.lan-end-dialog__actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; }
.lan-end-dialog__actions button { padding: 0.7rem 1rem; border-radius: 0.6rem; }
.lan-end-confirm { border-color: #f35b68; background: #c72032; color: white; font-weight: 800; }
.lan-end-confirm--start { border-color: #5bd68c; background: #1f9d55; }

@media (max-width: 600px) {
    .lan-finalization { align-items: flex-start; }
    .lan-end-button { width: 7rem; font-size: 0.85rem; }
}
:root .stats-shell { max-width: 70rem; }
.stats-participant { padding: 1rem; margin-block: 1rem; overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.stats-table th, .stats-table td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid #ffffff18; overflow-wrap: anywhere; }
.stats-table th { font-weight: 500; }

/* Registry and standings reuse the mobile/admin page surfaces. */
.tournament-person { display: inline-flex; align-items: center; gap: .4rem; margin: .4rem .8rem .4rem 0; }
.tournament-results { display: grid; gap: .8rem; margin: 1rem 0; }
.tournament-results fieldset { display: flex; flex-wrap: wrap; gap: .6rem; padding: .8rem; border: 1px solid #ffffff30; }
.tournament-results label { display: grid; gap: .3rem; flex: 1 1 130px; }
.tournament-results input { width: 100%; min-width: 0; }
.standings-scroll { overflow-x: auto; }
.standings-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.standings-table th, .standings-table td { padding: .65rem .45rem; text-align: left; border-bottom: 1px solid #ffffff20; }
.standings-table td:last-child { white-space: nowrap; color: #ffe29a; font-weight: 750; }

.drink-shell { max-width: 38rem; }
.drink-shell h1 { font-size: 1.8rem; }

.drink-form fieldset { border: 0; margin: 1.1rem 0; padding: 0; }
.drink-form legend { margin-bottom: .6rem; font-size: 1.15rem; font-weight: 700; }
.drink-form legend small { font-size: .8rem; color: #9ca9b3; }
.drink-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.drink-presets label { position: relative; }
.drink-presets input { position: absolute; opacity: 0; }
.drink-presets span { min-height: 52px; display: grid; place-items: center; padding: .7rem; border: 1px solid #87949977; border-radius: .7rem; }
.drink-presets input:checked + span { background: #20514b; border-color: #7bddc9; color: #fff; }
.drink-presets input:focus-visible + span { outline: 3px solid #b7ebff; outline-offset: 2px; }
/* The free-text field only belongs on screen once "Annat" is actually chosen -
   otherwise every registration showed an empty "Egen storlek i cl" nobody was
   meant to fill in. The value is deliberately left in the DOM when it hides, so
   switching away from Annat and back keeps what was typed (and the server only
   reads it when Annat is the selected option). */
.drink-custom { display: none; grid-template-columns: 1fr 7rem; align-items: center; gap: .7rem; margin-top: .6rem; }
.drink-form fieldset:has(input[value="custom"]:checked) .drink-custom { display: grid; }
/* Without :has() support the field simply stays visible, as it always was. */
@supports not selector(:has(*)) {
    .drink-custom { display: grid; }
}
.drink-custom input { width: 100%; min-height: 48px; }
.drink-form > button { width: 100%; min-height: 56px; }
a.event-action { text-decoration: none; text-align: center; }

/* Participant mobile shell */
body.mobile-page {
    /* The fixed bottom chrome, composed once instead of being re-guessed as a
       magic number per page: navigation, the Senaste ticker above it and the
       device's own safe-area inset. Everything that has to clear the bottom of
       the screen - the scroll shell's padding, the ticker's own offset - derives
       from these, so changing the navigation's height can never leave a page's
       last row hidden behind it. */
    /* The navigation's own height ABOVE its safe-area padding: 0.38rem of top
       padding plus the icon/label rows. Measured, not guessed - the ticker sits
       flush on top of it and the scroll shell reserves exactly this much. */
    --mobile-nav-block: 3.68rem;
    --mobile-ticker-height: 1.7rem;
    --mobile-safe-bottom: max(0.38rem, env(safe-area-inset-bottom, 0px));
    --mobile-bottom-chrome: calc(
        var(--mobile-nav-block) + var(--mobile-ticker-height) + var(--mobile-safe-bottom));
    --mobile-cyan: #63e6ff;
    --mobile-magenta: #ea73dd;
    --mobile-purple: #8d70ff;
    --mobile-glass: rgba(12, 15, 34, 0.76);
    --mobile-glass-strong: rgba(14, 18, 40, 0.9);
    --mobile-line: rgba(148, 170, 255, 0.16);
    --mobile-card-radius: 1.05rem;
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    background: #080a16;
}

body.mobile-page::before,
body.mobile-page::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    filter: blur(2.5rem);
    opacity: 0.42;
}

body.mobile-page::before {
    width: 34rem;
    height: 34rem;
    top: -17rem;
    left: -15rem;
    background:
        radial-gradient(circle at 64% 60%, rgba(65, 218, 255, 0.28), transparent 45%),
        radial-gradient(circle at 38% 42%, rgba(142, 84, 255, 0.3), transparent 54%);
    animation: mobile-ambient-a 72s ease-in-out infinite alternate;
}

body.mobile-page::after {
    width: 30rem;
    height: 38rem;
    right: -17rem;
    bottom: -21rem;
    background:
        radial-gradient(circle at 34% 30%, rgba(241, 79, 203, 0.24), transparent 46%),
        radial-gradient(circle at 52% 58%, rgba(69, 191, 255, 0.18), transparent 58%);
    animation: mobile-ambient-b 86s ease-in-out infinite alternate;
}

@keyframes mobile-ambient-a {
    from { transform: translate3d(0, 0, 0) scale(0.98) rotate(-2deg); }
    to { transform: translate3d(4vw, 4vh, 0) scale(1.04) rotate(3deg); }
}

@keyframes mobile-ambient-b {
    from { transform: translate3d(0, 0, 0) scale(1.03) rotate(2deg); }
    to { transform: translate3d(-4vw, -3vh, 0) scale(0.98) rotate(-3deg); }
}

.mobile-top-shell {
    position: sticky;
    top: 0;
    z-index: var(--layer-top-shell);
    padding-top: env(safe-area-inset-top);
    background: linear-gradient(180deg, rgba(8, 10, 22, 0.94) 78%, rgba(8, 10, 22, 0.7));
    backdrop-filter: blur(0.9rem);
    -webkit-backdrop-filter: blur(0.9rem);
    box-shadow: 0 0.65rem 1.4rem -0.6rem rgba(0, 0, 0, 0.55);
}

.mobile-brand {
    width: min(100%, 38rem);
    margin-inline: auto;
    padding: .55rem max(1.25rem, env(safe-area-inset-right)) .15rem max(1.25rem, env(safe-area-inset-left));
    text-align: center;
}

.mobile-brand a {
    display: inline-block;
    text-decoration: none;
}

.mobile-brand img {
    width: clamp(8.5rem, 36vw, 11rem);
    height: auto;
    aspect-ratio: 3 / 1;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 .55rem rgba(99, 230, 255, .25));
}

.mobile-brand a:focus-visible { outline: .16rem solid var(--mobile-cyan); outline-offset: .15rem; }

.mobile-page .entry-shell {
    width: min(100%, 38rem);
    min-height: calc(100dvh - 3.55rem);
    padding-top: .65rem;
    /* Clears the navigation, the ticker and the safe-area inset, plus a breath of
       space so the last row is readable rather than flush against the ticker. */
    padding-bottom: calc(var(--mobile-bottom-chrome) + 1.15rem);
}

.mobile-page--onboarding .entry-shell {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.mobile-page .entry-header {
    margin-bottom: 1rem;
}

.mobile-page .entry-header h1,
.mobile-page-header h1 {
    margin: 0.15rem 0 0;
    font-size: clamp(2rem, 10vw, 3.2rem);
    font-weight: 820;
    letter-spacing: -0.055em;
    line-height: 1;
}

.mobile-page .entry-header h1,
.mobile-page-header h1,
.mobile-page .section-heading h2,
.mobile-page .hud-metric-heading h2 {
    font-family: var(--font-display);
}

.mobile-page .eyebrow {
    color: var(--mobile-cyan);
    font-family: var(--font-display);
    text-shadow: 0 0 0.8rem rgba(99, 230, 255, 0.28);
}

.mobile-page .entry-intro,
.mobile-page-header > p:last-child {
    margin: 0.55rem 0 0;
    color: #aaaec1;
    font-size: 0.88rem;
    line-height: 1.45;
}

.mobile-page-header {
    margin-bottom: 1.15rem;
}

.mobile-back {
    align-self: flex-start;
    margin-bottom: 1rem;
    color: #b8bfd2;
    font-size: 0.82rem;
    text-decoration: none;
}

.mobile-page .registration-category,
.mobile-page .drink-form,
.achievement-card,
.mobile-empty-state {
    border: 1px solid var(--mobile-line);
    border-radius: var(--mobile-card-radius);
    background: var(--mobile-glass);
    box-shadow: 0 0.9rem 2.2rem rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(1rem);
}

.mobile-page .registration-category {
    margin-bottom: 0.75rem;
    padding: 0.9rem;
}

.mobile-page .registration-category .section-heading h2,
.mobile-page .section-heading h2 {
    color: #f7f8ff;
    font-size: 1.08rem;
    font-weight: 790;
}

.mobile-page .current-activity {
    border: 1px solid rgba(99, 230, 255, 0.14);
    border-left: 0.18rem solid var(--mobile-cyan);
    border-radius: 0.75rem;
    background: rgba(47, 151, 180, 0.09);
}

.mobile-page .current-activity__action button {
    min-height: 2.35rem;
    padding: .38rem .62rem;
    border: 1px solid rgba(255, 133, 154, .3);
    border-radius: .65rem;
    color: #ffc3cd;
    background: rgba(142, 43, 66, .16);
    font-weight: 740;
    text-decoration: none;
}

/* All nine activity choices in one 3 x 3 grid, down to the narrowest phones:
   three across still fits at 320px without clipping a label or scrolling
   sideways, and no cell is allowed a row of its own. */
.mobile-page .activity-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mobile-page .activity-action {
    min-height: 3.25rem;
    justify-content: center;
    border-color: rgba(155, 174, 230, 0.18);
    background: rgba(255, 255, 255, 0.035);
    text-align: center;
}

/* Three distinct states, one vocabulary:

   neutral   - an action you could take
   current   - what you ARE doing (filled, the app's cyan "state" colour)
   expanded  - what you are choosing right NOW, with its options panel open

   Current and expanded are genuinely different facts and can both be true, so
   the fill says "this is your activity" and the ring says "this panel belongs
   to me". Without the ring, an open "Vilket spel?" looked like it might belong
   to whichever button happened to be filled. */
.mobile-page .activity-action--active {
    border-color: rgba(99, 230, 255, 0.48);
    background: rgba(50, 151, 182, 0.2);
    box-shadow: 0 0 1rem rgba(99, 230, 255, 0.08);
}

/* After --active so the ring wins when an action is both. */
.mobile-page .activity-action[aria-expanded="true"] {
    border-color: rgba(174, 239, 255, 0.62);
    box-shadow: 0 0 0 1px rgba(174, 239, 255, 0.34), 0 0.35rem 0.9rem rgba(0, 0, 0, 0.28);
}

/* Godis/Snacks open the same kind of panel, so they speak the same language. */
.mobile-page .event-action[aria-expanded="true"] {
    border-color: rgba(174, 239, 255, 0.62);
    box-shadow: 0 0 0 1px rgba(174, 239, 255, 0.34), 0 0.35rem 0.9rem rgba(0, 0, 0, 0.28);
}

/* The open panel is visually attached to the action that opened it. */
.mobile-page .quick-options:not([hidden]) {
    border-color: rgba(174, 239, 255, 0.28);
}

.mobile-page .quick-options,
.mobile-page .log-group,
.mobile-page .greeting-composer {
    border-color: rgba(153, 168, 223, 0.17);
    background: rgba(8, 11, 27, 0.54);
}

.consumption-grid--primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-page .consumption-grid--primary .event-action {
    min-height: 4.85rem;
    border-color: rgba(99, 230, 255, .24);
    background-color: rgba(38, 120, 148, .09);
}

.mobile-page .event-action--compact {
    min-height: 4.6rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem;
    border-color: rgba(148, 170, 255, 0.17);
    background-color: rgba(255, 255, 255, 0.035);
    box-shadow: none;
    font-size: 0.86rem;
    text-align: center;
}

.mobile-page .event-action--compact .event-action__icon {
    font-size: 1.35rem;
}

.mobile-page .event-action--coffee {
    color: var(--text);
    border-color: rgba(240, 171, 76, 0.25);
    background: linear-gradient(145deg, rgba(167, 102, 31, 0.19), rgba(255, 255, 255, 0.035) 72%);
}

.secondary-button {
    min-height: 2.9rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0.75rem;
    color: #b6b8c4;
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.78rem;
    font-weight: 760;
    white-space: nowrap;
}

.mobile-page .active-meal {
    border-color: rgba(234, 115, 221, 0.28);
    background: linear-gradient(135deg, rgba(234, 115, 221, 0.12), rgba(68, 188, 221, 0.07));
}

.mobile-page .greeting-section {
    margin-bottom: 0.75rem;
}

.mobile-page .drink-form {
    padding: 0.9rem;
}

.mobile-page .drink-form fieldset {
    margin: 0 0 1rem;
}

/* Shared participant status header card - Logga/Statistik/Schema/Prestationer (not Jag, which keeps its own hero). */
.participant-status-header-wrap {
    width: min(100%, 38rem);
    margin-inline: auto;
    padding: 0 max(1.25rem, env(safe-area-inset-right)) 0.6rem max(1.25rem, env(safe-area-inset-left));
}

.participant-status-header {
    display: block;
    width: 100%;
    padding: 0.65rem 0.85rem 0.75rem;
    border: 1px solid var(--mobile-line);
    border-radius: var(--mobile-card-radius);
    background: var(--mobile-glass);
    box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.045);
    /* The whole card is the account-menu trigger - see participant-account-menu.js. */
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.participant-status-header:hover { border-color: var(--mobile-cyan); }
.participant-status-header:focus-visible { outline: .16rem solid var(--mobile-cyan); outline-offset: .15rem; }
.participant-status-header:active { background: var(--mobile-glass-strong); }

.participant-status-header__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* LAN JUST NU on /statistik uses the same LAN-FORM module as /jag, followed by
   the projector's compact grouped-current-activity readout. */
.lan-now {
    margin-bottom: 1rem;
}

.lan-now__activities {
    margin: 0.45rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
}

.lan-now__activity {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--mobile-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    font-size: 0.78rem;
    font-weight: 660;
}

.lan-now__activity--idle {
    color: var(--muted);
    opacity: 0.85;
}

/* Initials fallback for a participant without an avatar. Exactly the avatar's own
   footprint, so a real avatar always wins without any layout shift, and the tone is
   deterministic per participant (see ParticipantAvatarFallback). */
.participant-initials {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: #0a0d1c;
    font-size: 0.82em;
    font-weight: 820;
    letter-spacing: 0.01em;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}

.participant-initials--0 { background: linear-gradient(140deg, #7fe7ff, #4aa7d8); }
.participant-initials--1 { background: linear-gradient(140deg, #f5b5ea, #c06bb4); }
.participant-initials--2 { background: linear-gradient(140deg, #ffd79a, #e09a4c); }
.participant-initials--3 { background: linear-gradient(140deg, #a8f0c6, #55b487); }
.participant-initials--4 { background: linear-gradient(140deg, #c3b9ff, #7f6fe0); }
.participant-initials--5 { background: linear-gradient(140deg, #ffb3ab, #d9695f); }

.participant-status-header__avatar {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(148, 170, 255, 0.28);
}

.participant-status-header__identity {
    flex: 1 1 auto;
    min-width: 0;
}

.participant-status-header__name {
    display: block;
    padding: 0;
    border: 0;
    border-bottom: 1px dashed var(--mobile-line);
    color: #f7f8ff;
    background: none;
    font: inherit;
    font-weight: 800;
    font-size: 0.98rem;
    text-decoration: none;
    text-align: left;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.participant-status-header__name:focus-visible { outline: .16rem solid var(--mobile-cyan); outline-offset: .15rem; }

.participant-status-header__meta {
    margin: 0.1rem 0 0;
    color: #aeb4c9;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.participant-status-header__lanform {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 170, 255, 0.22);
    background: rgba(255, 255, 255, 0.045);
    font-weight: 740;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

.participant-status-header__lanform--green { border-color: rgba(84, 214, 140, .4); color: #9df3bf; }
.participant-status-header__lanform--yellow { border-color: rgba(234, 196, 74, .4); color: #f4e08f; }
.participant-status-header__lanform--orange { border-color: rgba(240, 150, 74, .4); color: #f7c393; }
.participant-status-header__lanform--red { border-color: rgba(240, 90, 90, .45); color: #f8a3a3; }

.participant-status-header__progress-track {
    height: 0.22rem;
    margin-top: 0.55rem;
    border-radius: 999px;
    background: rgba(144, 153, 190, 0.16);
    overflow: hidden;
}

.participant-status-header__progress-fill {
    height: 100%;
    width: var(--value, 0%);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mobile-cyan), var(--mobile-purple));
    transition: width 400ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .participant-status-header__progress-fill { transition: none; }
}

.mobile-page-header--tight {
    margin-bottom: 0.75rem;
}




.recent-logs {
    margin-top: 1.1rem;
}

.recent-logs .participant-log-list {
    margin-bottom: 0.6rem;
}

.recent-logs__more {
    display: inline-block;
    color: var(--mobile-cyan);
    font-size: 0.82rem;
    text-decoration: none;
}

/* Participant notification toast layer - ordinary/achievement feedback. Fixed and
   pointer-events:none on the layer so it never blocks bottom-nav taps except where a
   toast is actually showing; sits above the sticky header/bottom nav but below any
   native <dialog> (browser top-layer, unaffected by z-index). */
.participant-toast-layer {
    position: fixed;
    z-index: var(--layer-toasts);
    /* Sensible fallback for the instant before JS measures the actual sticky
       header/bottom-nav heights and sets these inline (see positionToastLayer
       in participant-realtime.js) - the stack must sit under the header and
       above the bottom navigation, never over either. */
    top: 4.5rem;
    bottom: 4.5rem;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
    overflow: hidden;
    pointer-events: none;
}

.participant-toast {
    width: min(100%, 34rem);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.8rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 170, 255, 0.22);
    background: var(--mobile-glass-strong);
    box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(1rem);
    pointer-events: auto;
    animation: participant-toast-in 220ms ease both;
}

.participant-toast--leaving {
    animation: participant-toast-out 200ms ease both;
}

.participant-toast--achievement {
    border-color: rgba(255, 214, 122, 0.45);
    background: linear-gradient(135deg, rgba(255, 196, 87, 0.16), var(--mobile-glass-strong) 65%);
}

/* This stack deliberately has no level-up variant any more: a level-up is presented
   ONLY by the celebration stage (see .participant-levelup-stage). The card that used
   to sit here showed the same event a second time, at the same time, and is gone on
   purpose - the toast stack carries ordinary +XP feedback and achievements only. */

.participant-toast__icon { flex-shrink: 0; font-size: 1.5rem; }

.participant-toast__body { flex: 1 1 auto; min-width: 0; }

.participant-toast__eyebrow {
    margin: 0;
    color: #ffd67a;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.participant-toast__title {
    margin: 0;
    color: #f7f8ff;
    font-weight: 760;
    font-size: 0.9rem;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.2;
}

.participant-toast__detail {
    margin: 0.1rem 0 0;
    color: #b7bdd2;
    font-size: 0.76rem;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.3;
}

.participant-toast__xp {
    flex-shrink: 0;
    color: #bdefff;
    font-weight: 760;
    font-size: 0.82rem;
    white-space: nowrap;
}

.participant-toast__close {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    border-radius: 999px;
    color: #b7bdd2;
    background: rgba(255, 255, 255, 0.06);
    line-height: 1;
    font-size: 1rem;
}

@keyframes participant-toast-in {
    from { opacity: 0; transform: translateY(-0.6rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes participant-toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-0.4rem); }
}

@media (prefers-reduced-motion: reduce) {
    .participant-toast,
    .participant-toast--leaving { animation: none; }
}

/* Level-up celebration stage. A purely decorative layer that plays for 2-4 s on top
   of whatever page the participant is on and then removes itself completely (see
   wwwroot/js/participant-levelup-overlay.js).

   - pointer-events:none: the app underneath stays fully tappable the whole time, so
     this is a celebration, not a modal - there is nothing to dismiss.
   - :empty collapses the layer entirely: an earlier fullscreen level-up overlay was
     retired because it could be left hanging over the app, so a stage without content
     must not be able to render anything at all.
   - position:fixed + overflow:hidden + contain: no layout shift, no scroll movement
     and no horizontal page scroll from particles flying past the edge.
   - --layer-levelup is the top of the participant app's layering scale (see :root),
     above the toast stack, because while the celebration plays it is the ONLY
     presentation of the level-up. The renderer additionally opens it as a popover so
     it also clears a native <dialog>, which lives in the browser's top layer where no
     z-index can reach; the UA popover box styles are reset below.

   Visibility is driven purely by content: the stage is display:none until the
   renderer puts a celebration in it, which is what makes a leftover layer over the
   app impossible. Do not replace that with a state class. */
.participant-levelup-stage {
    position: fixed;
    inset: 0;
    z-index: var(--layer-levelup);
    display: none;
    place-items: center;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint;
}

.participant-levelup-stage:not(:empty) { display: grid; }

/* Reset the UA popover box (fit-content size, auto margins, border, padding, canvas
   background, overflow:auto) so opening the stage in the top layer looks identical to
   the fixed-position fallback used where popover is unsupported. */
.participant-levelup-stage[popover] {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    padding: 0;
    color: inherit;
    background: transparent;
}

.participant-levelup-stage::backdrop { background: transparent; }

.participant-levelup-stage--leaving { animation: participant-levelup-stage-out 320ms ease both; }

.participant-levelup-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.participant-levelup-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%,
        rgba(99, 230, 255, 0.2), rgba(141, 112, 255, 0.12) 36%, rgba(8, 10, 22, 0) 68%);
    animation: participant-levelup-glow-pulse 1.4s ease-out both;
}

/* The card keeps its own soft dark scrim, so the level number stays readable no
   matter which effect is raining behind it. Safe-area insets are margins, not
   padding, so the canvas behind stays full-bleed into the notch area. */
.participant-levelup-card {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.05rem;
    max-width: min(92vw, 26rem);
    margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    text-align: center;
    animation: participant-levelup-card-in 380ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

.participant-levelup-card::before {
    content: "";
    position: absolute;
    inset: -1.6rem -2rem;
    border-radius: 2.6rem;
    background: radial-gradient(ellipse at center,
        rgba(8, 10, 22, 0.95) 0 58%, rgba(8, 10, 22, 0.6) 82%, rgba(8, 10, 22, 0) 100%);
    z-index: -1;
}

.participant-levelup-card__eyebrow {
    margin: 0;
    color: #ffd67a;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 6.5vw, 1.9rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-shadow: 0 0 1.2rem rgba(255, 196, 87, 0.55), 0 0.15rem 0.6rem rgba(0, 0, 0, 0.8);
}

.participant-levelup-card__label {
    margin: 0.35rem 0 0;
    color: #b7bdd2;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
}

.participant-levelup-card__level {
    margin: 0;
    color: #f7f8ff;
    font-family: var(--font-display);
    font-size: clamp(3.6rem, 26vw, 7.5rem);
    font-weight: 800;
    line-height: 0.95;
    text-shadow: 0 0 1.8rem rgba(99, 230, 255, 0.6), 0 0.2rem 0.9rem rgba(0, 0, 0, 0.85);
}

.participant-levelup-card__gained {
    margin: 0.35rem 0 0;
    color: var(--mobile-cyan);
    font-weight: 800;
    font-size: clamp(0.85rem, 4.2vw, 1.05rem);
    letter-spacing: 0.1em;
    text-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.8);
}

.participant-levelup-card__rank {
    margin: 0.3rem 0 0;
    color: #d8dcf0;
    font-size: clamp(0.8rem, 3.8vw, 0.95rem);
    overflow-wrap: anywhere;
    text-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.85);
}

/* Milestone/major only scale the celebration up - they never change what it says. */
.participant-levelup-stage--milestone .participant-levelup-card__level { font-size: clamp(4.2rem, 30vw, 8.6rem); }

.participant-levelup-stage--major .participant-levelup-card__level {
    font-size: clamp(4.6rem, 33vw, 9.4rem);
    animation: participant-levelup-major-pulse 900ms ease-in-out 2 alternate;
}

.participant-levelup-stage--major .participant-levelup-glow {
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 196, 87, 0.3), rgba(234, 115, 221, 0.16) 38%, rgba(8, 10, 22, 0) 70%);
}

/* CRT/glitch: scanlines and a short RGB split on the number itself. The offsets stay
   tiny on purpose - the effect must read as interference, not make the level
   unreadable, and the flash is a single short pulse rather than a strobe. */
.participant-levelup-stage--glitch .participant-levelup-glow {
    background: repeating-linear-gradient(to bottom,
        rgba(0, 0, 0, 0.4) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
    animation: participant-levelup-scanlines 2.4s linear infinite;
}

.participant-levelup-stage--glitch .participant-levelup-card__level {
    animation: participant-levelup-rgb-split 280ms steps(2, end) infinite;
}

.participant-levelup-stage--glitch::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #dfe7ff;
    mix-blend-mode: screen;
    animation: participant-levelup-flash 420ms ease-out both;
}

@keyframes participant-levelup-card-in {
    from { opacity: 0; transform: scale(0.72); }
    60% { opacity: 1; }
    to { opacity: 1; transform: scale(1); }
}

@keyframes participant-levelup-glow-pulse {
    from { opacity: 0; transform: scale(0.85); }
    35% { opacity: 1; }
    to { opacity: 0.75; transform: scale(1); }
}

@keyframes participant-levelup-stage-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes participant-levelup-major-pulse {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

@keyframes participant-levelup-scanlines {
    from { background-position-y: 0; }
    to { background-position-y: 3rem; }
}

@keyframes participant-levelup-rgb-split {
    0% { text-shadow: 0 0 1.8rem rgba(99, 230, 255, 0.6), 0.04em 0 rgba(255, 60, 120, 0.8), -0.04em 0 rgba(90, 230, 255, 0.8); }
    50% { text-shadow: 0 0 1.8rem rgba(99, 230, 255, 0.6), -0.05em 0 rgba(255, 60, 120, 0.8), 0.05em 0 rgba(90, 230, 255, 0.8); }
    100% { text-shadow: 0 0 1.8rem rgba(99, 230, 255, 0.6), 0.02em 0 rgba(255, 60, 120, 0.7), -0.02em 0 rgba(90, 230, 255, 0.7); }
}

@keyframes participant-levelup-flash {
    from { opacity: 0.32; }
    to { opacity: 0; }
}

/* Reduced motion keeps the level-up clearly visible, but as a calm fade/scale/glow.
   The renderer additionally skips the canvas entirely in this mode, so no particle,
   scanline or glitch animation is ever created in the first place. */
@media (prefers-reduced-motion: reduce) {
    .participant-levelup-card { animation: participant-levelup-card-calm 240ms ease both; }
    .participant-levelup-card__level,
    .participant-levelup-glow,
    .participant-levelup-stage--major .participant-levelup-card__level,
    .participant-levelup-stage--glitch .participant-levelup-glow,
    .participant-levelup-stage--glitch .participant-levelup-card__level { animation: none; }
    .participant-levelup-stage--glitch::after { display: none; }
    .participant-levelup-stage--glitch .participant-levelup-glow {
        background: radial-gradient(circle at 50% 50%,
            rgba(99, 230, 255, 0.2), rgba(141, 112, 255, 0.12) 36%, rgba(8, 10, 22, 0) 68%);
    }
}

@keyframes participant-levelup-card-calm {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

.mobile-page .drink-form legend {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 760;
}

.mobile-page .drink-presets span {
    min-height: 3.1rem;
    border-color: rgba(153, 168, 223, 0.23);
    background: rgba(255, 255, 255, 0.025);
}

.mobile-page .drink-presets input:checked + span {
    border-color: rgba(99, 230, 255, 0.65);
    color: #f5feff;
    background: rgba(43, 152, 181, 0.24);
    box-shadow: 0 0 1rem rgba(99, 230, 255, 0.09);
}

/* The registration detail view must fit a normal phone viewport without scrolling
   for the standard short case: heading, drink, size, strength/sugar and
   Registrera. The vertical rhythm is therefore deliberately tight - longer
   content may still scroll, and Tillbaka/Registrera stay full touch targets. */
.mobile-page .drink-shell h1 { font-size: 1.32rem; }
.mobile-page .drink-shell .mobile-page-header { margin-bottom: 0.45rem; }
.mobile-page .drink-form { padding: 0.6rem 0.7rem; }
.mobile-page .drink-form fieldset { margin: 0 0 0.55rem; }
.mobile-page .drink-form legend { margin-bottom: 0.3rem; font-size: 0.84rem; }
.mobile-page .drink-presets { gap: 0.4rem; }
.mobile-page .drink-presets span { min-height: 2.6rem; padding: 0.4rem; font-size: 0.85rem; }
.mobile-page .drink-custom { margin-top: 0.4rem; gap: 0.5rem; font-size: 0.78rem; }
.mobile-page .drink-custom input { min-height: 2.6rem; }
.mobile-page .drink-form > button { min-height: 3rem; margin-top: 0.15rem; }

.mobile-page .continue-button {
    color: #08131b;
    background: linear-gradient(100deg, #69e8ff, #b49aff);
}

/* Post-registration confirmation with Ångra. Fixed just above the bottom
   navigation so it never shifts the page content, and never wide enough to make
   the registration buttons harder to reach. */
.undo-snackbar {
    position: fixed;
    z-index: var(--layer-undo-snackbar);
    right: max(0.6rem, env(safe-area-inset-right));
    /* Above both the bottom navigation and the Senaste ticker - from the same
       tokens, so it can never drift out of the stack. */
    bottom: calc(var(--mobile-bottom-chrome) + 0.2rem);
    left: max(0.6rem, env(safe-area-inset-left));
    width: min(100% - 1.2rem, 26rem);
    margin-inline: auto;
    padding: 0.4rem 0.5rem 0.4rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    border: 1px solid rgba(112, 207, 169, 0.32);
    border-radius: 0.75rem;
    background: rgba(12, 28, 24, 0.94);
    box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(0.8rem);
    animation: undo-snackbar-enter 180ms ease both;
}

.undo-snackbar__text {
    min-width: 0;
    overflow: hidden;
    color: #e7f6ef;
    font-size: 0.82rem;
    font-weight: 690;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.undo-snackbar__action {
    min-height: 2.2rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(112, 207, 169, 0.4);
    border-radius: 0.6rem;
    color: #b9f3dc;
    background: rgba(46, 126, 95, 0.24);
    font-size: 0.8rem;
    font-weight: 760;
    white-space: nowrap;
    cursor: pointer;
}

.undo-snackbar--leaving {
    opacity: 0;
    transition: opacity 260ms ease;
}

@keyframes undo-snackbar-enter {
    from { opacity: 0; transform: translateY(0.4rem); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .undo-snackbar { animation: none; }
    .undo-snackbar--leaving { transition: none; }
}

/* The shared low Senaste ticker. Fixed directly above the bottom navigation with a
   FIXED height at every width, so it never moves page content, never makes the
   registration buttons harder to reach and never causes horizontal page scroll. */
.feed-ticker {
    position: fixed;
    z-index: var(--layer-ticker);
    right: 0;
    /* Sits directly on top of the navigation - same tokens the scroll shell
       reserves space with. */
    bottom: calc(var(--mobile-nav-block) + var(--mobile-safe-bottom));
    left: 0;
    height: var(--mobile-ticker-height);
    display: flex;
    align-items: center;
    overflow: hidden;
    border-top: 1px solid var(--mobile-line);
    background: rgba(7, 9, 22, 0.86);
    backdrop-filter: blur(0.6rem);
    color: #b9c3e6;
    font-size: 0.72rem;
    line-height: 1;
    pointer-events: auto;
}

.feed-ticker__viewport {
    width: 100%;
    /* Only an initial inset so the first event is not glued to the screen edge.
       Clipping happens at the padding box, so the marquee still uses the full
       width once it is moving - and the inset is on the viewport, never on the
       track, whose width is what the -50% loop is measured against. */
    padding-left: max(0.6rem, env(safe-area-inset-left));
    overflow: hidden;
    white-space: nowrap;
}

.feed-ticker__track {
    display: inline-block;
    /* No leading viewport-wide padding: the first event must be readable the
       instant the page appears, not scroll in from the right. The track holds two
       identical halves and the animation moves exactly one of them (see
       participant-feed-ticker-dom.js). */
    white-space: pre;
    will-change: transform;
    animation: feed-ticker-scroll var(--ticker-duration, 30s) linear infinite;
}

.feed-ticker--paused .feed-ticker__track {
    animation-play-state: paused;
}

/* The timestamp before each event: present but clearly secondary to the event
   text itself. */
.feed-ticker__time {
    color: #7b8296;
    font-variant-numeric: tabular-nums;
}

/* One event is one visual group; the divider between two of them is wider and
   quieter than anything inside an event, so the stream reads as events first. */
.feed-ticker__entry { white-space: pre; }

.feed-ticker__between {
    margin-inline: 1.15rem;
    color: rgba(148, 170, 255, 0.34);
}

.feed-ticker__static {
    width: 100%;
    margin: 0;
    padding: 0 max(0.6rem, env(safe-area-inset-left));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes feed-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .feed-ticker__track { animation: none; }
}

.mobile-nav {
    position: fixed;
    z-index: var(--layer-nav);
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0.38rem max(0.45rem, env(safe-area-inset-right)) max(0.38rem, env(safe-area-inset-bottom)) max(0.45rem, env(safe-area-inset-left));
    border-top: 1px solid rgba(146, 175, 255, 0.18);
    background: rgba(7, 9, 22, 0.9);
    box-shadow: 0 -0.8rem 2.2rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(1.25rem) saturate(135%);
}

.mobile-nav__inner {
    width: min(100%, 40rem);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.18rem;
}

.mobile-nav__inner--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mobile-nav__item {
    min-width: 0;
    min-height: 3.25rem;
    padding: 0.35rem 0.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    color: #9298aa;
    font-size: 0.65rem;
    font-weight: 680;
    line-height: 1;
    text-decoration: none;
    touch-action: manipulation;
}

.mobile-nav__icon {
    min-height: 1.05rem;
    color: #b2b9cc;
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1;
}

.mobile-nav__item[aria-current="page"] {
    border-color: rgba(99, 230, 255, 0.2);
    color: #f6fdff;
    background: linear-gradient(140deg, rgba(53, 190, 220, 0.17), rgba(145, 88, 211, 0.13));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 0 1rem rgba(99, 230, 255, 0.06);
    position: relative;
}

.mobile-nav__item[aria-current="page"]::after {
    content: "";
    position: absolute;
    right: 28%;
    bottom: .12rem;
    left: 28%;
    height: 2px;
    border-radius: 999px;
    background: var(--mobile-cyan);
    box-shadow: 0 0 .55rem rgba(99, 230, 255, .7);
}

.mobile-nav__item[aria-current="page"] .mobile-nav__icon {
    color: var(--mobile-cyan);
    text-shadow: 0 0 0.75rem rgba(99, 230, 255, 0.65);
}

.mobile-nav__item--disabled {
    opacity: 0.4;
}

.mobile-nav__item:focus-visible,
.mobile-back:focus-visible {
    outline: 0.16rem solid var(--mobile-cyan);
    outline-offset: 0.08rem;
}

.schedule-mobile-shell { gap: 0; }

.schedule-now-next {
    margin-bottom: 0.9rem;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 0.55rem;
}

.schedule-focus {
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid rgba(148, 170, 255, 0.18);
    border-radius: 1rem;
    background: var(--mobile-glass-strong);
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.2);
}

.schedule-focus--now {
    border-color: rgba(99, 230, 255, 0.42);
    background: linear-gradient(145deg, rgba(38, 142, 171, 0.23), rgba(18, 22, 48, 0.92));
}

.schedule-focus--next { border-color: rgba(234, 115, 221, 0.28); }

.schedule-focus__label {
    margin: 0 0 0.45rem;
    color: var(--mobile-cyan);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.14em;
}

.schedule-focus--next .schedule-focus__label { color: var(--mobile-magenta); }

.schedule-focus__heading {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    line-height: 1.2;
}

.schedule-focus__heading strong,
.schedule-focus__empty {
    color: #f7f8ff;
    font-size: 0.92rem;
}

.schedule-focus__meta,
.schedule-focus__detail {
    margin: 0.4rem 0 0;
    color: #b6bdd0;
    font-size: 0.72rem;
    line-height: 1.35;
}

.schedule-focus__detail { color: #9299ad; }

.schedule-day-tabs {
    margin-bottom: 0.85rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.3rem;
}

.schedule-day-tabs a {
    min-width: 0;
    padding: 0.55rem 0.15rem;
    border: 1px solid rgba(148, 170, 255, 0.16);
    border-radius: 0.65rem;
    color: #969daf;
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.64rem;
    font-weight: 780;
    letter-spacing: 0.025em;
    text-align: center;
    text-decoration: none;
}

.schedule-day-tabs a[aria-current="page"] {
    border-color: rgba(99, 230, 255, 0.48);
    color: #effdff;
    background: rgba(45, 156, 183, 0.2);
    box-shadow: 0 0 0.8rem rgba(99, 230, 255, 0.08);
}

.schedule-day-tabs a:focus-visible {
    outline: 0.16rem solid var(--mobile-cyan);
    outline-offset: 0.08rem;
}

.schedule-day h2 {
    margin: 0 0 0.55rem;
    color: #c3c9d8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.schedule-day__list {
    max-height: min(48dvh, 31rem);
    margin: 0;
    padding: 0.25rem;
    display: grid;
    gap: 0.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    list-style: none;
}

.schedule-day__item {
    min-height: 3.4rem;
    padding: 0.62rem 0.62rem 0.62rem 0.4rem;
    display: grid;
    grid-template-columns: 1rem 5.65rem minmax(0, 1fr);
    align-items: start;
    gap: 0.35rem;
    border: 1px solid rgba(148, 170, 255, 0.13);
    border-radius: 0.75rem;
    color: #e8ebf5;
    background: rgba(255, 255, 255, 0.03);
}

.schedule-day__item > time {
    padding-top: 0.05rem;
    color: #aeb6ca;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.schedule-day__marker {
    color: #72798b;
    font-size: 0.72rem;
    text-align: center;
}

.schedule-day__content {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.schedule-day__content strong {
    font-size: 0.82rem;
    line-height: 1.25;
}

.schedule-day__content small {
    color: #969daf;
    font-size: 0.7rem;
    line-height: 1.3;
}

.schedule-day__item--completed {
    opacity: 0.54;
    background: rgba(255, 255, 255, 0.015);
}

.schedule-day__item--current {
    border-color: rgba(99, 230, 255, 0.5);
    background: linear-gradient(105deg, rgba(42, 153, 181, 0.23), rgba(119, 73, 167, 0.12));
    box-shadow: 0 0 1.1rem rgba(99, 230, 255, 0.08);
}

.schedule-day__item--current .schedule-day__marker,
.schedule-day__item--current > time { color: var(--mobile-cyan); }

.participant-log-filters {
    margin: 0 0 0.9rem;
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.participant-log-filters::-webkit-scrollbar { display: none; }

.participant-log-filter {
    padding: 0.5rem 0.65rem;
    flex: 0 0 auto;
    border: 1px solid rgba(148, 170, 255, 0.16);
    border-radius: 999px;
    color: #aeb4c5;
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.75rem;
    font-weight: 720;
    text-decoration: none;
}

.participant-log-filter[aria-current="page"] {
    border-color: rgba(99, 230, 255, 0.38);
    color: #f4fdff;
    background: rgba(53, 190, 220, 0.16);
}

.participant-log-list {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(148, 170, 255, 0.14);
    border-radius: 1rem;
    background: rgba(8, 11, 27, 0.5);
    list-style: none;
}

.participant-log-row {
    min-width: 0;
    min-height: 3.35rem;
    padding: 0.65rem 0.75rem;
    display: grid;
    grid-template-columns: 4.3rem 1.45rem minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem;
    border-bottom: 1px solid rgba(148, 170, 255, 0.1);
}

.participant-log-row:last-child { border-bottom: 0; }

.participant-log-row time {
    color: #858ca0;
    font-size: 0.69rem;
    font-variant-numeric: tabular-nums;
    text-transform: capitalize;
    white-space: nowrap;
}

.participant-log-row__icon {
    font-size: 1rem;
    text-align: center;
}

.participant-log-row__text {
    min-width: 0;
    color: #dce0ed;
    font-size: 0.8rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* An achievement row carries three levels (title / description / XP) and is
   deliberately taller than the compact one-line rows around it - log rows do not
   all have to be the same height. The timestamp keeps its own column and stays
   top-aligned against the taller body. */
.participant-log-row--rich {
    grid-template-columns: 4.3rem minmax(0, 1fr);
    align-items: start;
    padding-block: 0.7rem;
}

.participant-log-row--rich time { padding-top: 0.1rem; }

/* The shared three-level achievement presentation (Pages/Shared/_AchievementLine
   .cshtml): icon, then title + XP on one line, the description under it and an
   optional timestamp last. */
.achievement-line {
    min-width: 0;
    display: grid;
    grid-template-columns: 1.45rem minmax(0, 1fr);
    align-items: start;
    gap: 0.45rem;
}

.achievement-line__icon {
    font-size: 1rem;
    line-height: 1.3;
    text-align: center;
}

.achievement-line__body {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.achievement-line__headline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.achievement-line__title {
    min-width: 0;
    color: #dce0ed;
    font-size: 0.8rem;
    font-weight: 740;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.achievement-line__xp {
    flex-shrink: 0;
    color: #bdefff;
    font-size: 0.74rem;
    font-weight: 760;
    white-space: nowrap;
}

/* The explanation the cryptic title needs - wraps freely rather than being cut. */
.achievement-line__description {
    margin: 0;
    color: #9096ab;
    font-size: 0.72rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.achievement-line__time {
    color: #858ca0;
    font-size: 0.69rem;
    font-variant-numeric: tabular-nums;
}

.participant-log-row--achievement { box-shadow: inset 0.13rem 0 rgba(175, 125, 255, 0.58); }
.participant-log-row--activity { box-shadow: inset 0.13rem 0 rgba(99, 230, 255, 0.48); }
.participant-log-row--food-drink { box-shadow: inset 0.13rem 0 rgba(255, 199, 73, 0.5); }

.participant-log-more {
    min-height: 3rem;
    margin-top: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(99, 230, 255, 0.25);
    border-radius: 0.85rem;
    color: #eafcff;
    background: rgba(42, 147, 174, 0.13);
    font-size: 0.82rem;
    font-weight: 760;
    text-decoration: none;
}

.participant-log-empty {
    padding: 1rem;
}

.participant-log-filter:focus-visible,
.participant-log-more:focus-visible {
    outline: 0.16rem solid var(--mobile-cyan);
    outline-offset: 0.08rem;
}

.standings-shell {
    width: min(100%, 44rem) !important;
}

.standings-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    list-style: none;
}

.standings-row {
    min-width: 0;
    min-height: 4.4rem;
    padding: 0.7rem 0.75rem;
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid rgba(147, 166, 220, 0.15);
    border-radius: 0.95rem;
    background: rgba(12, 15, 34, 0.7);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(0.8rem);
}

.standings-row__rank {
    color: #9299ad;
    font-size: 1rem;
    font-weight: 780;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.standings-row--place-1,
.standings-row--place-2,
.standings-row--place-3 {
    border-color: rgba(204, 186, 255, 0.23);
    background: linear-gradient(110deg, rgba(71, 52, 118, 0.2), rgba(12, 15, 34, 0.76) 46%);
}

.standings-row--place-1 .standings-row__rank,
.standings-row--place-2 .standings-row__rank,
.standings-row--place-3 .standings-row__rank {
    font-size: 1.25rem;
}

.standings-row--current {
    border-color: rgba(99, 230, 255, 0.55);
    background: linear-gradient(100deg, rgba(42, 151, 181, 0.2), rgba(105, 65, 147, 0.16));
    box-shadow: inset 0.18rem 0 var(--mobile-cyan), 0 0 1.2rem rgba(99, 230, 255, 0.08);
}

.standings-row__person {
    min-width: 0;
}

.standings-row__name {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.standings-row__name strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.98rem;
}

.standings-row__you {
    flex: none;
    padding: 0.17rem 0.32rem;
    border: 1px solid rgba(99, 230, 255, 0.4);
    border-radius: 999px;
    color: #a9f3ff;
    font-size: 0.52rem;
    font-weight: 820;
    letter-spacing: 0.08em;
}

.standings-row__person small {
    display: block;
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
    color: #989eb0;
    font-size: 0.7rem;
    line-height: 1.25;
}

.standings-row__total {
    color: #f7f8ff;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.standings-row__total span {
    color: #9fa5b6;
    font-size: 0.68em;
    font-weight: 650;
}

.realtime-state {
    margin: 0 0 0.45rem;
    color: #a6abba;
    font-size: 0.72rem;
}

.realtime-state:empty {
    display: none;
    margin: 0;
}

.achievements-shell {
    width: min(100%, 70rem) !important;
    gap: 1rem;
}

.achievements-header {
    margin-bottom: 0;
}

.achievement-summary {
    margin-top: 0.85rem;
    padding: 0.7rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(151, 171, 238, 0.17);
    border-radius: 0.9rem;
    background: rgba(11, 14, 33, 0.68);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(0.8rem);
    font-size: 0.8rem;
}

.achievement-summary > strong:first-child { color: #c8cddd; }
.achievement-summary > strong:first-child > span { color: #f7f9ff; font-size: 1.05rem; }
.achievement-summary__progression { display: grid; justify-items: end; gap: 0.08rem; white-space: nowrap; }
.achievement-summary__progression > strong { color: #d5c4ff; font-size: 1.05rem; }
.achievement-summary__rank-icon { color: var(--mobile-cyan); font-size: 0.9em; }
.achievement-summary__progression > span { color: #999fb1; font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.achievement-summary__progression b { color: #bdefff; font-weight: 820; letter-spacing: 0.05em; }

.achievement-filter {
    width: fit-content;
    margin-top: 0.65rem;
    padding: 0.16rem;
    display: flex;
    gap: 0.12rem;
    border: 1px solid rgba(151, 171, 238, 0.17);
    border-radius: 999px;
    background: rgba(11, 14, 33, 0.68);
}

.achievement-filter__option {
    min-height: 1.9rem;
    padding: 0.3rem 0.72rem;
    border: 0;
    border-radius: 999px;
    color: #929aad;
    background: transparent;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 760;
    touch-action: manipulation;
}

.achievement-filter__option.is-selected {
    color: #edfaff;
    background: rgba(71, 198, 225, 0.2);
    box-shadow: inset 0 0 0 1px rgba(99, 230, 255, 0.3);
}

.achievement-filter__option:focus-visible {
    outline: 0.14rem solid var(--mobile-cyan);
    outline-offset: 0.08rem;
}

[data-achievement-overview-only][hidden],
[data-achievement-category-item][hidden] {
    display: none;
}

.achievement-overview-summary {
    margin: 0.5rem 0 1.1rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(151, 171, 238, 0.17);
    border-radius: 0.9rem;
    background: rgba(11, 14, 33, 0.68);
    backdrop-filter: blur(0.8rem);
}

.achievement-overview-summary > strong { color: #f7f9ff; font-size: 1.05rem; }

.achievement-overview-summary__heading { margin-bottom: 0.35rem; }
.achievement-overview-summary__heading h2 { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }

.achievement-overview-summary__bar {
    margin-top: 0.5rem;
    height: 0.35rem;
    border-radius: 999px;
    background: rgba(144, 153, 190, 0.14);
    overflow: hidden;
}

.achievement-overview-summary__fill {
    height: 100%;
    width: var(--value, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #56dffb, #9a7dff);
}

.achievement-overview-section {
    margin-bottom: 1.15rem;
}

.achievement-highlight-list {
    display: grid;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.achievement-highlight {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--mobile-line);
    border-radius: var(--mobile-card-radius);
    background: var(--mobile-glass);
}

.achievement-highlight__icon { margin-top: 0.15rem; font-size: 1.4rem; }

.achievement-highlight__body {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.achievement-highlight__body strong { color: #f0f2fb; }
.achievement-highlight__body small { color: #9aa1b8; font-size: 0.72rem; }
.achievement-highlight__body progress { width: 100%; height: 0.3rem; }

/* On the achievements page the participant has come specifically to READ the
   achievements, so the description wraps to as many lines as it needs rather
   than being cut at two for the sake of equal-height cards. The clamp is kept
   only as a backstop against an absurdly long definition. */
.achievement-highlight__description {
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow-wrap: anywhere;
    color: #8e94a8;
    font-size: 0.7rem;
    line-height: 1.25;
}

.achievement-highlight__xp {
    flex-shrink: 0;
    color: #bdefff;
    font-size: 0.76rem;
    font-weight: 760;
    white-space: nowrap;
}

.achievement-category-rows {
    display: grid;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.achievement-category-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--mobile-line);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    color: #e5e8f5;
    font: inherit;
    text-align: left;
}

.achievement-category-row__name { flex: 1 1 auto; font-weight: 720; }
.achievement-category-row__count { color: #969bad; font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.achievement-category-row__chevron {
    display: inline-block;
    color: #969bad;
    transition: transform 160ms ease;
}

.achievement-category-row[aria-expanded="true"] .achievement-category-row__chevron {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .achievement-category-row__chevron { transition: none; }
}

.achievement-category-panel {
    margin: 0.4rem 0 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--mobile-line);
    border-radius: 0.8rem;
    background: rgba(8, 11, 27, 0.5);
}

.achievement-category-panel[hidden] { display: none; }

.achievement-row-list {
    display: grid;
    gap: 0.35rem;
}

.achievement-row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.45rem 0.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.82rem;
}

.achievement-row:last-child { border-bottom: 0; }
.achievement-row[hidden] { display: none; }

.achievement-row__icon { flex-shrink: 0; margin-top: 0.1rem; font-size: 1.05rem; }

.achievement-row__body { flex: 1 1 auto; min-width: 0; }

.achievement-row__name {
    display: block;
    min-width: 0;
    color: #e8eaf6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.achievement-row__description {
    margin: 0.1rem 0 0;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
    color: #8e94a8;
    font-size: 0.72rem;
    line-height: 1.25;
}

.achievement-row__footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.achievement-row__status { flex-shrink: 0; color: #9aa1b8; font-size: 0.76rem; white-space: nowrap; }
.achievement-row__xp { flex-shrink: 0; color: #bdefff; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }

.achievement-row--unlocked .achievement-row__status { color: #8cefcf; font-weight: 700; }
.achievement-row--locked { opacity: 0.7; }
.achievement-row--locked .achievement-row__icon { filter: grayscale(1); }

.achievement-category-row__hidden {
    margin-left: 0.35rem;
    color: #aa92cf;
}

.mobile-empty-state { margin: 0; padding: 1rem; color: #a9adba; }

@media (max-width: 23rem) {
    .mobile-page .entry-shell {
        padding-inline: max(0.8rem, env(safe-area-inset-left));
    }

    .mobile-nav__item {
        font-size: 0.58rem;
    }

    .standings-row {
        grid-template-columns: 1.8rem minmax(0, 1fr) auto;
        gap: 0.45rem;
        padding-inline: 0.55rem;
    }

    .standings-row__person small { font-size: 0.64rem; }
    .standings-row__total { font-size: 1rem; }
}

@media (min-width: 48rem) {
    .mobile-page .entry-shell {
        padding-top: 1rem;
    }

    .standings-row {
        padding-inline: 1rem;
    }

    .participant-help-dialog {
        margin: auto;
        border-radius: 1.25rem;
    }
}

/* Contextual "i" help buttons + their shared dialog */
.help-button {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 1px solid rgba(151, 171, 238, 0.3);
    border-radius: 50%;
    color: var(--mobile-cyan, #63e6ff);
    background: rgba(11, 14, 33, 0.5);
    font-size: 0.85rem;
    line-height: 1;
}

/* Groups a heading/label with its contextual help button as a single visual unit, so a
   parent row that also lays out a value with `justify-content: space-between` (e.g.
   .hud-metric-heading, .hud-submetric-heading) never spreads the button out into the middle
   of the row - it stays glued to the text it explains. Shrinks together with its heading
   text rather than the value on narrow screens. */
.heading-with-help {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

.participant-help-dialog {
    width: min(calc(100% - 1rem), 30rem);
    max-height: min(78dvh, 34rem);
    margin: auto auto 0;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(145, 175, 255, 0.28);
    border-radius: 1.25rem 1.25rem 0 0;
    color: #edf0fa;
    background: rgba(9, 12, 29, 0.97);
    box-shadow: 0 -1rem 4rem rgba(0, 0, 0, 0.55), 0 0 2rem rgba(107, 84, 190, 0.1);
    backdrop-filter: blur(1.25rem) saturate(130%);
}

.participant-help-dialog::backdrop { background: rgba(3, 5, 15, 0.72); backdrop-filter: blur(0.2rem); }
.participant-help-dialog__close { position: absolute; z-index: 1; top: 0.55rem; right: 0.55rem; margin: 0; }
.participant-help-dialog__close button { width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; color: #d6d9e4; background: rgba(255, 255, 255, 0.055); font-size: 1.45rem; line-height: 1; }
.participant-help-dialog [data-help-dialog-content] { max-height: min(78dvh, 34rem); overflow-y: auto; }

.help-detail { padding: 1.2rem 1.1rem calc(1.35rem + env(safe-area-inset-bottom)); }
.help-detail h2 { margin: 0 0 0.6rem; padding-right: 2.2rem; font-size: 1.1rem; }
.help-detail p { margin: 0 0 0.9rem; color: #bcc1d0; font-size: 0.9rem; line-height: 1.5; }
.help-detail__more { color: var(--mobile-cyan, #63e6ff); font-size: 0.85rem; font-weight: 700; }

/* Participant account/device menu - opened from the header name or "Byt deltagare /
   enhetsinställningar" (see participant-account-menu.js). Same native <dialog> pattern as
   .participant-help-dialog: a translucent (not blurred-out) backdrop, X/backdrop-click/Escape
   all close it, and it never resizes the page behind it. */
.participant-account-menu {
    width: min(calc(100% - 1rem), 26rem);
    max-height: min(78dvh, 32rem);
    margin: auto auto 0;
    padding: 1.1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    border: 1px solid rgba(145, 175, 255, 0.28);
    border-radius: 1.25rem 1.25rem 0 0;
    color: #edf0fa;
    background: rgba(9, 12, 29, 0.97);
    box-shadow: 0 -1rem 4rem rgba(0, 0, 0, 0.55), 0 0 2rem rgba(107, 84, 190, 0.1);
    backdrop-filter: blur(1.25rem) saturate(130%);
}

.participant-account-menu::backdrop { background: rgba(3, 5, 15, 0.55); }
.participant-account-menu__close { position: absolute; z-index: 1; top: 0.55rem; right: 0.55rem; margin: 0; }
.participant-account-menu__close button { width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; color: #d6d9e4; background: rgba(255, 255, 255, 0.055); font-size: 1.45rem; line-height: 1; }

.participant-account-menu__links {
    margin-top: 0.4rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
}

.participant-account-menu__links a {
    min-height: 2.65rem;
    padding: .55rem .65rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid rgba(148, 170, 255, .12);
    border-radius: .7rem;
    color: #aeb5c8;
    background: rgba(255, 255, 255, .025);
    font-size: .82rem;
    text-decoration: none;
}

.participant-account-menu__links a span { color: var(--mobile-cyan, #63e6ff); }
.participant-account-menu__links a:focus-visible { outline: .16rem solid var(--mobile-cyan, #63e6ff); outline-offset: .08rem; }

.participant-account-menu__device {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.participant-account-menu__device h3 {
    margin: 0 0 0.5rem;
    color: #858ca0;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.participant-account-menu__device p {
    margin: 0 0 0.7rem;
    color: #bcc1d0;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Development-only level-up animation preview (see _ParticipantAccountMenu.cshtml).
   Never rendered outside Development, so this block simply has no markup in production. */
.participant-account-menu__dev {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.participant-account-menu__dev h3 {
    margin: 0 0 0.5rem;
    color: #858ca0;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.participant-account-menu__dev p {
    margin: 0 0 0.7rem;
    color: #bcc1d0;
    font-size: 0.78rem;
    line-height: 1.45;
}

.participant-account-menu__dev-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.4rem;
}

.participant-account-menu__dev-buttons button {
    min-height: 2.4rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba(148, 170, 255, .16);
    border-radius: .6rem;
    color: #d3d8e8;
    background: rgba(255, 255, 255, .03);
    font-size: .76rem;
}

/* Visually separated and de-emphasized on purpose - leaving the LAN is a deliberate,
   infrequent action, not a primary navigation item (see AGENTS.md "Deltagarnärvaro"). */
.participant-account-menu__leave {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.leave-lan-button {
    padding: 0.65rem 0;
    border: 0;
    color: #c6c3b9;
    background: transparent;
    font-size: 0.8rem;
    text-decoration: underline;
    text-decoration-color: rgba(198, 195, 185, 0.35);
    text-underline-offset: 0.22rem;
    cursor: pointer;
}

.leave-lan-button:hover { color: var(--text); }
.leave-lan-button:focus-visible { outline: 0.18rem solid var(--coffee); outline-offset: 0.16rem; }

@media (min-width: 48rem) {
    .participant-account-menu {
        margin: auto;
        border-radius: 1.25rem;
    }
}

/* /info page */
.info-intro { margin: 0 0 1.1rem; color: #a9adba; font-size: 0.88rem; line-height: 1.5; }
.info-category {
    margin-bottom: 0.7rem;
    border: 1px solid rgba(151, 171, 238, 0.16);
    border-radius: 0.9rem;
    background: rgba(11, 14, 33, 0.5);
}
.info-category__heading {
    padding: 0.85rem 1rem;
    color: #f5f7ff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
}
.info-category__body { padding: 0 1rem 1rem; display: grid; gap: 1.1rem; }
.info-topic h2 { margin: 0 0 0.35rem; font-size: 0.95rem; color: #e7eaf6; }
.info-topic p { margin: 0; color: #bcc1d0; font-size: 0.87rem; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
    body.mobile-page::before,
    body.mobile-page::after {
        animation: none;
    }

}

/* Participant status HUD */
.participant-hud {
    gap: 0.7rem;
}

.hud-surface {
    border: 1px solid var(--mobile-line);
    border-radius: var(--mobile-card-radius);
    background: rgba(11, 14, 33, 0.8);
    box-shadow: 0 0.9rem 2.2rem rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(1rem);
}

.participant-hud__header {
    padding: 0.95rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.35rem 0.75rem;
}

.participant-hud__header h1 {
    margin: 0.16rem 0 0;
    overflow-wrap: anywhere;
    font-size: clamp(1.45rem, 7vw, 2rem);
    line-height: 1;
    letter-spacing: -0.035em;
}

.participant-hud__standing {
    align-self: center;
    color: #d8dcef;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.participant-hud__progression {
    margin: 0.42rem 0 0;
    overflow: hidden;
    color: #c9b9ef;
    font-size: 0.72rem;
    font-weight: 760;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-hud__progression span { margin-right: 0.18rem; color: var(--mobile-cyan); }

.participant-hud__activity {
    grid-column: 1 / -1;
    margin: 0.25rem 0 0;
    color: #b7bdd0;
    font-size: 0.82rem;
    line-height: 1.35;
}

.hud-section {
    padding: 0.9rem;
}

.hud-section--primary {
    border-color: rgba(99, 230, 255, 0.3);
    box-shadow: 0 0 1.4rem rgba(99, 230, 255, 0.07), inset 0 1px rgba(255, 255, 255, 0.05);
}

.hud-metric-heading,
.hud-submetric-heading {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.3rem 0.8rem;
}

.hud-metric-heading h2 {
    margin: 0;
    color: #f5f7ff;
    font-size: 0.78rem;
    font-weight: 830;
    letter-spacing: 0.11em;
}

.hud-metric-heading > strong {
    color: #e7eaf6;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.hud-metric-heading > strong span {
    color: #858ca0;
    font-size: 0.72rem;
    font-weight: 650;
}

.hud-metric-heading--small {
    margin-bottom: 0.55rem;
}

.hud-bar,
.hud-segmented {
    position: relative;
    height: 1rem;
    margin-top: 0.55rem;
    overflow: hidden;
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(2, 4, 13, 0.78);
    box-shadow: inset 0 0.16rem 0.35rem rgba(0, 0, 0, 0.38);
}

.hud-bar__fill,
.hud-segment {
    width: var(--value, 0%);
    min-width: 0;
    display: block;
    transition: width 260ms ease;
}

.hud-bar__fill {
    height: 100%;
    border-radius: inherit;
    background: var(--hud-bar-color);
    box-shadow: 0 0 0.8rem var(--hud-bar-glow);
}

/* LAN-FORM state colors mirror the projector's aggregate LAN-STATUS panel and
   participant card (OverallLanStatusPresenter.ColorState / ParticipantHudDto.
   LanFormColorToken) - one shared green->yellow->orange->red language instead
   of a fixed decorative gradient, so the same score always reads the same way
   whether you're looking at your phone or the projector. */
.hud-section--primary-great { --lan-form-color: #4ce68a; --lan-form-color-soft: #8ef0b0; --lan-form-glow: rgba(76, 230, 138, .42); }
.hud-section--primary-good { --lan-form-color: #b6e64c; --lan-form-color-soft: #ddf28f; --lan-form-glow: rgba(182, 230, 76, .38); }
.hud-section--primary-ok { --lan-form-color: #ffd35b; --lan-form-color-soft: #ffe38a; --lan-form-glow: rgba(255, 211, 91, .4); }
.hud-section--primary-low { --lan-form-color: #ff9d4d; --lan-form-color-soft: #ffbd85; --lan-form-glow: rgba(255, 157, 77, .4); }
.hud-section--primary-critical { --lan-form-color: #ff4d6d; --lan-form-color-soft: #ff8095; --lan-form-glow: rgba(255, 77, 109, .42); }

.hud-bar--form {
    --hud-bar-color: linear-gradient(90deg, var(--lan-form-color, #4edcf8), var(--lan-form-color-soft, #a783ff));
    --hud-bar-glow: var(--lan-form-glow, rgba(108, 222, 255, 0.42));
    height: 1.85rem;
    margin-top: 0.75rem;
}

.hud-section--primary .hud-metric-heading > strong {
    color: var(--lan-form-color, #e7eaf6);
    font-size: 1.35rem;
    font-weight: 800;
}

.hud-status-label {
    display: block;
    margin-top: 0.62rem;
    color: var(--lan-form-color-soft, #b9f4ff);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hud-summary {
    margin: 0.28rem 0 0;
    color: #a7adbf;
    font-size: 0.78rem;
    line-height: 1.4;
}

.hud-divider {
    height: 1px;
    margin: 0.9rem 0;
    background: rgba(255, 255, 255, 0.09);
}

.hud-segment--sleep { background: #a878ff; box-shadow: 0 0 0.75rem rgba(168, 120, 255, 0.45); }
.hud-segment--awake { background: #3fc8e8; box-shadow: 0 0 0.75rem rgba(63, 200, 232, 0.35); }

.hud-bar-caption,
.point-legend {
    margin: 0.45rem 0 0;
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    color: #8f96aa;
    font-size: 0.68rem;
    line-height: 1.25;
}

.hud-bar-caption strong {
    color: #ccb8ff;
    font-weight: 700;
}

.hud-secondary,
.hud-rank,
.hud-empty {
    margin: 0.38rem 0 0;
    color: #858ca0;
    font-size: 0.68rem;
    line-height: 1.35;
}

.hud-rank {
    margin-top: 0.12rem;
    color: #b4b9c9;
}

.hud-empty {
    padding-top: 0.25rem;
}

.hud-bar--gaming {
    --hud-bar-color: linear-gradient(90deg, #48e79a, #55ddcf);
    --hud-bar-glow: rgba(72, 231, 154, 0.35);
}

.hud-submetric-heading {
    margin-top: 0.85rem;
    color: #c8ccda;
    font-size: 0.78rem;
}

.hud-submetric-heading strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.hud-submetric-heading span {
    color: #9ca2b5;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hud-game-breakdown {
    height: 1.05rem;
    margin-top: .8rem;
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: rgba(2, 4, 13, .78);
    box-shadow: inset 0 .16rem .35rem rgba(0, 0, 0, .38);
}

.hud-game-segment {
    width: var(--value, 0%);
    min-width: 0;
    display: block;
    transition: width 260ms ease;
}

.hud-game-list {
    margin: .65rem 0 0;
    padding: 0;
    display: grid;
    gap: .28rem;
    list-style: none;
}

.hud-game-list li {
    min-width: 0;
    display: grid;
    grid-template-columns: .62rem minmax(0, 1fr) auto 2.8rem;
    align-items: baseline;
    gap: .45rem;
    color: #9299ad;
    font-size: .72rem;
}

.hud-game-list strong { min-width: 0; overflow: hidden; color: #e5e8f3; text-overflow: ellipsis; white-space: nowrap; }
.hud-game-list span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud-game-list b { color: #c8cde0; font-variant-numeric: tabular-nums; text-align: right; }
.hud-game-swatch { width: .55rem; height: .55rem; border-radius: .15rem; }
.hud-game-segment--0, .hud-game-swatch--0 { background: #48e79a; }
.hud-game-segment--1, .hud-game-swatch--1 { background: #57d7ff; }
.hud-game-segment--2, .hud-game-swatch--2 { background: #ad7dff; }
.hud-game-segment--3, .hud-game-swatch--3 { background: #ffbd52; }
.hud-game-segment--4, .hud-game-swatch--4 { background: #ea73dd; }
.hud-game-segment--5, .hud-game-swatch--5 { background: #7f8da8; }

.hud-metrics {
    display: grid;
    gap: 1.1rem;
}

.hud-metric + .hud-metric {
    padding-top: 0.1rem;
}

.hud-bar--bladder {
    --hud-bar-color: linear-gradient(90deg, #38b8ff, #5be5ff);
    --hud-bar-glow: rgba(56, 184, 255, 0.4);
    overflow: visible;
}

.hud-bar--fluid {
    --hud-bar-color: linear-gradient(90deg, #287be8, #46d7f0);
    --hud-bar-glow: rgba(70, 215, 240, 0.34);
}

.hud-bar--bladder .hud-bar__fill {
    overflow: hidden;
}

.hud-bar__marker {
    position: absolute;
    z-index: 2;
    top: -0.22rem;
    bottom: -0.22rem;
    left: var(--marker, 66.667%);
    width: 2px;
    border-radius: 2px;
    background: #f5f7ff;
    box-shadow: 0 0 0.45rem rgba(255, 255, 255, 0.7);
}

.hud-bar__marker small {
    position: absolute;
    top: 1.35rem;
    left: 50%;
    translate: -50% 0;
    color: #99a1b3;
    font-size: 0.6rem;
    white-space: nowrap;
}

.hud-bar--bladder + .hud-secondary {
    margin-top: 1.45rem;
}

.hud-bar--caffeine {
    --hud-bar-color: linear-gradient(90deg, #ffd35b, #ff9d4d);
    --hud-bar-glow: rgba(255, 199, 73, 0.36);
}

.hud-bar--promille {
    --hud-bar-color: linear-gradient(90deg, #ff6f91, #e46fdb);
    --hud-bar-glow: rgba(255, 91, 143, 0.34);
    overflow: visible;
}

.hud-bar__marker--reference { opacity: 0.55; }

.hud-bar--promille + .hud-secondary { margin-top: 1.45rem; }

.hud-bar--nicotine {
    --hud-bar-color: linear-gradient(90deg, #8bd17e, #4fae7a);
    --hud-bar-glow: rgba(111, 207, 151, 0.36);
}

.hud-bar--satiety {
    --hud-bar-color: linear-gradient(90deg, #f2777b, #ffc85b, #5ee39a);
    --hud-bar-glow: rgba(94, 227, 154, 0.3);
    border: 0;
    background: var(--hud-bar-color);
    box-shadow: inset 0 0.16rem 0.35rem rgba(0, 0, 0, 0.25);
}

.hud-bar--satiety .hud-bar__fill {
    z-index: 2;
    width: var(--value, 0%);
    background: transparent;
    box-shadow: none;
}

.hud-bar--satiety::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 0 0 var(--value, 0%);
    background: rgba(2, 4, 13, 0.94);
    transition: left 260ms ease;
}

.hud-bar--satiety-middle { --hud-bar-glow: rgba(255, 200, 91, 0.32); }
.hud-bar--satiety-hungry,
.hud-bar--satiety-unknown { --hud-bar-glow: rgba(242, 119, 123, 0.32); }
.hud-bar--satiety-unknown {
    background: repeating-linear-gradient(135deg, #242838 0 0.45rem, #34394d 0.45rem 0.9rem);
    box-shadow: none;
}
.hud-bar--satiety-unknown::after { display: none; }

.satiety-scale {
    margin-top: 0.45rem;
    display: flex;
    justify-content: space-between;
    color: #9097a9;
    font-size: 0.65rem;
}

.satiety-scale span {
    display: grid;
    gap: 0.08rem;
}

.satiety-scale span:last-child { text-align: right; }
.satiety-scale strong { color: #b8bdca; font-weight: 700; }

.hud-submetric-heading--total {
    margin-top: 0;
    font-size: 0.86rem;
}

.drink-totals,
.hud-achievements {
    margin: 0.55rem 0 0;
    padding: 0;
    list-style: none;
}

.drink-totals li {
    min-width: 0;
    padding: 0.48rem 0;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.48rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
    color: #b8bece;
    font-size: 0.76rem;
}

.drink-totals li:last-child { border-bottom: 0; }
.drink-totals__icon { font-size: 1rem; text-align: center; }
.drink-totals div { min-width: 0; display: grid; gap: 0.1rem; }
.drink-totals strong { color: #e0e3ee; }
.drink-totals small { overflow-wrap: anywhere; color: #767e91; font-size: 0.62rem; }
.drink-totals li > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

.hud-segmented--points {
    height: 1.05rem;
}

.hud-segment--tournament { background: #ffbd52; box-shadow: 0 0 0.7rem rgba(255, 189, 82, 0.35); }
.hud-segment--achievement { background: #ad7dff; box-shadow: 0 0 0.7rem rgba(173, 125, 255, 0.38); }
.hud-segment--daily-award { background: #4ed9c0; box-shadow: 0 0 0.7rem rgba(78, 217, 192, 0.35); }
.hud-segment--log-xp { background: #63e6ff; box-shadow: 0 0 0.7rem rgba(99, 230, 255, 0.35); }
.hud-bar--empty { height: 1.05rem; }

.point-legend {
    flex-wrap: wrap;
}

.point-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
}

.point-legend i {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}

.point-legend__tournament { background: #ffbd52; }
.point-legend__achievement { background: #ad7dff; }
.point-legend__daily-award { background: #4ed9c0; }
.point-legend__log-xp { background: #63e6ff; }

.hud-facts {
    margin: 0.6rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.hud-facts div {
    min-width: 0;
    padding: 0.62rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.025);
}

.hud-facts dt {
    color: #858ca0;
    font-size: 0.65rem;
}

.hud-facts dd {
    margin: 0.2rem 0 0;
    overflow-wrap: anywhere;
    color: #e3e6f0;
    font-size: 0.86rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.hud-achievements li {
    padding: 0.5rem 0;
    display: grid;
    grid-template-columns: 1.3rem minmax(0, 1fr) auto;
    /* Top-aligned: the name/description pair is taller than the icon and the XP. */
    align-items: start;
    gap: 0.45rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
    font-size: 0.76rem;
}

.hud-achievements li:last-child { border-bottom: 0; }
.hud-achievements li > div { min-width: 0; display: grid; gap: 0.1rem; }
.hud-achievements strong { min-width: 0; overflow-wrap: anywhere; color: #dfe2ee; }

/* The explanation the cryptic title needs - deliberately quiet, so the list
   stays scannable. */
.hud-achievements small {
    overflow-wrap: anywhere;
    color: #8b91a5;
    font-size: 0.66rem;
    line-height: 1.3;
}
.hud-achievements li > span:last-child { color: #c3a4ff; font-variant-numeric: tabular-nums; white-space: nowrap; }

.hud-more-link {
    margin-top: 0.7rem;
    display: block;
    color: #aeefff;
    font-size: 0.72rem;
    text-align: right;
    text-decoration: none;
}

.hud-standings-link {
    margin-top: .18rem;
    text-align: left;
}

.participant-utilities {
    padding: .75rem .15rem .1rem;
}

.participant-utilities h2,
.lan-statistics-section-title {
    margin: 0 0 .55rem;
    color: #858ca0;
    font-family: var(--font-display);
    font-size: .68rem;
    letter-spacing: .12em;
}

.participant-utilities nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
}

.participant-utilities a,
.participant-utilities button {
    min-width: 0;
    min-height: 2.65rem;
    width: 100%;
    padding: .55rem .65rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid rgba(148, 170, 255, .12);
    border-radius: .7rem;
    color: #aeb5c8;
    background: rgba(255, 255, 255, .025);
    font: inherit;
    font-size: .7rem;
    line-height: 1.25;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.participant-utilities a:last-child,
.participant-utilities button:last-child { grid-column: 1 / -1; }
.participant-utilities a span,
.participant-utilities button span { color: var(--mobile-cyan); }
.participant-utilities a:focus-visible,
.participant-utilities button:focus-visible,
.lan-statistics-standings-link:focus-visible { outline: .16rem solid var(--mobile-cyan); outline-offset: .08rem; }

.lan-statistics-shell { gap: .75rem; }

.lan-statistics-header h1 {
    max-width: 19rem;
    font-size: clamp(1.8rem, 8vw, 2.65rem);
    line-height: 1.04;
}

.lan-statistics-featured,
.lan-statistics-metrics > div,
.lan-statistics-records,
.lan-statistics-standings-link {
    border: 1px solid var(--mobile-line);
    border-radius: var(--mobile-card-radius);
    background: var(--mobile-glass);
    box-shadow: 0 .9rem 2.2rem rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .04);
    backdrop-filter: blur(1rem);
}

.lan-statistics-featured {
    padding: 1rem;
    display: grid;
    grid-template-columns: 2.3rem minmax(0, 1fr);
    gap: .75rem;
    border-color: rgba(99, 230, 255, .28);
    background: linear-gradient(135deg, rgba(46, 174, 205, .14), rgba(132, 75, 188, .12));
}

.lan-statistics-featured__icon { font-size: 1.75rem; }
.lan-statistics-featured h2 { margin: 0; color: var(--mobile-cyan); font: 700 .67rem/1.2 var(--font-display); letter-spacing: .1em; }
.lan-statistics-featured strong { margin-top: .22rem; display: block; overflow-wrap: anywhere; color: #f5f7ff; font-size: 1.3rem; }
.lan-statistics-featured p { margin: .2rem 0 0; color: #c9b9ef; font: 700 .9rem/1.2 var(--font-display); }

.lan-statistics-metrics {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.lan-statistics-metrics > div { min-width: 0; padding: .75rem; }
.lan-statistics-metrics dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; color: #9299ad; font: 700 .63rem/1.25 var(--font-display); letter-spacing: .06em; }
.lan-statistics-item-icon { letter-spacing: normal; font-size: 1em; }
.lan-statistics-metrics dd { margin: .45rem 0 0; overflow-wrap: anywhere; color: #f3f5ff; font: 760 1rem/1.15 var(--font-display); }
.lan-statistics-metrics dd small { display: block; margin-top: .2rem; color: #9299ad; font: 700 .62rem/1.2 var(--font-display); letter-spacing: .03em; }
.lan-statistics-family-title {
    margin: 1rem 0 .4rem;
    color: #c9b9ef;
    font: 700 .66rem/1.2 var(--font-display);
    letter-spacing: .1em;
}
.lan-statistics-family-title:first-of-type { margin-top: .2rem; }
.lan-statistics-estimated {
    padding: .1rem .35rem;
    border-radius: .3rem;
    color: #d6b8ff;
    background: rgba(180, 130, 255, .16);
    font-size: .56rem;
    letter-spacing: .04em;
}
.lan-statistics-item-description {
    margin: .3rem 0 0;
    color: #858ca0;
    font-size: .68rem;
    line-height: 1.35;
}

.lan-statistics-records { margin: 0; padding: .3rem .8rem; list-style: none; }
.lan-statistics-records li { min-width: 0; padding: .62rem 0; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.lan-statistics-records li:last-child { border-bottom: 0; }
.lan-statistics-records__icon { font-size: 1.05rem; }
.lan-statistics-records small { display: block; color: #858ca0; font: 700 .58rem/1.2 var(--font-display); letter-spacing: .07em; }
.lan-statistics-records strong { margin-top: .15rem; display: block; overflow-wrap: anywhere; color: #e8eaf4; font-size: .78rem; }
.lan-statistics-records li > span:last-child { color: #c8b4f2; font: 700 .7rem/1.2 var(--font-display); text-align: right; }

.lan-statistics-standings-link {
    min-height: 3.1rem;
    padding: .75rem .9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #b9f4ff;
    font-size: .78rem;
    font-weight: 760;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .hud-bar__fill,
    .hud-segment,
    .hud-game-segment,
    .hud-bar--satiety::after {
        transition: none;
    }
}

/* The LAN vote board on Logga. A shared board rather than a form: every option is
   one big tap target, the people who voted are shown under it, and nothing needs a
   separate "submit". */
.poll-panel {
    margin: 0.15rem 0 0.9rem;
    padding: 0.85rem 0.9rem 0.75rem;
    border: 1px solid rgba(99, 230, 255, 0.28);
    border-radius: var(--mobile-card-radius, 0.95rem);
    background: linear-gradient(135deg, rgba(50, 151, 182, 0.12), rgba(12, 15, 34, 0.6));
}

.poll-panel--closed {
    border-color: rgba(148, 170, 255, 0.18);
    background: rgba(12, 15, 34, 0.55);
}

.poll-panel__head h2 {
    margin: 0.1rem 0 0;
    color: #f0f2fb;
    font-size: 1.02rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* Says "several answers are fine" without an instruction from the admin. */
.poll-panel__hint {
    margin: 0.3rem 0 0;
    color: #9aa1b8;
    font-size: 0.74rem;
    line-height: 1.35;
}

.poll-options {
    margin: 0.7rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    list-style: none;
}

.poll-option {
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(148, 170, 255, 0.16);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.03);
}

/* Chosen is unmistakable at arm's length, and toggling back is obviously possible. */
.poll-option--voted {
    border-color: rgba(99, 230, 255, 0.5);
    background: rgba(50, 151, 182, 0.18);
}

.poll-option__toggle {
    width: 100%;
    /* A real thumb target even with three lines of option text. */
    min-height: 2.9rem;
    padding: 0.2rem 0;
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    background: none;
    color: #dce0ed;
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.poll-option__toggle[disabled] { cursor: default; opacity: 0.85; }
.poll-option__mark { font-size: 1.05rem; text-align: center; }
.poll-option__text { min-width: 0; overflow-wrap: anywhere; }

.poll-option__count {
    color: #bdefff;
    font-size: 0.86rem;
    font-weight: 780;
    font-variant-numeric: tabular-nums;
}

/* Fifteen voters on one option must wrap, never overflow or overlap. */
.poll-voters {
    margin-top: 0.35rem;
    padding-left: 1.95rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.poll-voter { display: inline-flex; }

.poll-voter__avatar {
    width: 32px;
    height: 32px;
    border-radius: 0.45rem;
    image-rendering: pixelated;
}

.poll-suggest { margin-top: 0.7rem; }

.poll-suggest summary {
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    color: #aeefff;
    font-size: 0.82rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.poll-suggest summary::-webkit-details-marker { display: none; }
.poll-suggest__form { padding-top: 0.2rem; }
.poll-suggest__form .field-error[hidden] { display: none; }
.poll-panel__error[hidden] { display: none; }
.poll-panel__error { margin: 0.35rem 0 0; }

.poll-panel__note,
.poll-panel__summary {
    margin: 0.6rem 0 0;
    color: #858ca0;
    font-size: 0.72rem;
}

/* Pre-arrival: the one primary action before the ordinary participant app appears. */
.pre-arrival p { margin: 0.4rem 0 0.9rem; }
.pre-arrival__form { margin: 0.6rem 0 1rem; }
.pre-arrival__button {
    width: 100%;
    min-height: 3.6rem;
    border: 0;
    border-radius: 1rem;
    background: #1f9d55;
    color: #fff;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    cursor: pointer;
}
.pre-arrival__button:hover { background: #26b864; }
.pre-arrival__links { font-size: 0.9rem; }