/* ReactKing — final cross-page visual normalization. */

.leader-profile-link { color: inherit; text-decoration: none; }
.leader-profile-link:hover, .leader-profile-link:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.tournament-start-times { display: block; }
.tournament-start-times.is-local-only > time { display: none; }
.tournament-local-time { display: block; margin-top: .25rem; color: var(--muted); font: .7rem/1.5 var(--mono); }
.tournament-local-time[hidden] { display: none; }

html {
    background: var(--color-body-background);
    color: var(--color-ghost-white);
}

button, input, textarea, select {
    font-family: var(--font-source-code-pro);
    font-feature-settings: "zero" 1;
}

body {
    background: var(--background-page);
    color: var(--color-ghost-white);
    font-family: var(--font-source-code-pro);
    font-feature-settings: "zero" 1;
    letter-spacing: normal;
    text-transform: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-ghost-white);
    font-family: var(--font-source-code-pro);
    font-weight: 700;
    letter-spacing: 0.065em;
    line-height: 1.2 !important;
    text-transform: uppercase;
}

p, li, label, input, button, a, small, span {
    font-feature-settings: "zero" 1;
}

::selection {
    background: var(--color-kippo-pink);
    color: var(--color-ghost-white);
}

.utility-page {
    width: min(100%, var(--page-max-width));
    min-height: 100vh;
    margin: 0 auto;
    padding: var(--spacing-50) var(--spacing-30);
}

.utility-page > h1:first-child {
    font-size: clamp(2rem, 5vw, var(--text-display));
}

/* Primary navigation destinations share one content rail and one title baseline. */
.primary-section-shell {
    width: min(100%, var(--primary-section-max-width));
    margin-inline: auto;
    padding: var(--spacing-30) 0 var(--spacing-50);
}

.primary-section-header {
    margin-bottom: var(--spacing-25);
}

.primary-section-header h1 {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.season-label {
    color: var(--color-ghost-white);
    font-family: var(--font-source-code-pro);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.eyebrow {
    color: var(--muted);
    font-family: var(--font-source-code-pro);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-15);
}

.text-button, .account-switch, .text-link-light {
    color: var(--muted);
    font-family: var(--font-source-code-pro);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.text-button:hover, .account-switch:hover, .text-link-light:hover {
    border-color: var(--color-kippo-pink);
    color: var(--color-kippo-pink);
}

.icon-button {
    border-color: var(--color-ghost-white);
    border-radius: var(--radius-icons);
    background: transparent;
}

.icon-button:hover {
    border-color: var(--color-ghost-white);
    background: var(--color-carbon);
    color: var(--color-ghost-white);
    transform: none;
}

.validation-message, .challenge-error {
    color: var(--color-feedback-error);
}

.form-error {
    color: var(--color-feedback-error);
    border: 1px solid color-mix(in srgb, var(--color-feedback-error) 40%, transparent);
    border-radius: var(--radius-buttons);
    background: color-mix(in srgb, var(--color-feedback-error) 6%, var(--color-surface-raised));
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.rank {
    font-family: var(--font-source-code-pro);
}

.positive { color: var(--color-feedback-success); }
.negative { color: var(--color-feedback-error); }

.loading-pulse {
    border: 1px solid var(--color-kippo-pink);
}

.game-card-heading {
    display: flex;
    align-items: center;
    gap: var(--spacing-10);
    min-height: 2.5rem;
}

.game-card-heading > :is(h2, h3) {
    min-width: 0;
    margin: 0;
}

.game-icon {
    --game-icon-accent: var(--color-kippo-pink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.375rem;
    border: 1px solid color-mix(in srgb, var(--game-icon-accent) 34%, var(--color-border-subtle));
    border-radius: 0.625rem;
    background: var(--color-surface-emphasis);
    color: var(--color-ghost-white);
}

.game-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.game-icon-accent { stroke: var(--game-icon-accent); }

.game-icon-reaction { --game-icon-accent: #7dff42; }
.game-icon-jukeschool { --game-icon-accent: #60e5d2; }
.game-icon-rocketriot { --game-icon-accent: #ff9d52; }
.game-icon-gauntlet { --game-icon-accent: #b77aff; }
.game-icon-patternrecall { --game-icon-accent: #62a8ff; }
.game-icon-pong { --game-icon-accent: #60e5d2; }

.lobby-game .game-icon {
    flex-basis: 2rem;
    width: 2rem;
    height: 2rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
}

:is(.lobby-game, .more-game-card, .tournament-card) {
    position: relative;
    border-color: var(--color-border-subtle);
    background: var(--color-surface-raised);
    box-shadow: 0 0.75rem 2rem rgba(1, 5, 12, 0.08);
    transition: border-color 120ms ease, background-color 120ms ease,
        box-shadow 160ms ease, transform 160ms ease;
}

:is(.lobby-game, .more-game-card, .tournament-card)::before {
    position: absolute;
    top: 0;
    left: var(--spacing-25);
    width: 3rem;
    height: 2px;
    background: var(--color-kippo-pink);
    content: "";
    opacity: 0.65;
    transition: width 160ms ease, opacity 160ms ease;
}

:is(.lobby-game, .more-game-card, .tournament-card):hover::before,
:is(.lobby-game, .more-game-card, .tournament-card):focus-within::before {
    width: 4.5rem;
    opacity: 1;
}

.lobby-game-link:hover,
.lobby-game-link:focus-within {
    border-color: var(--color-border-strong);
    background: var(--color-surface-emphasis, #1a2431);
    box-shadow: 0 1rem 2.5rem rgba(1, 5, 12, 0.14);
    transform: translateY(-2px);
}

.more-game-card:hover,
.more-game-card:focus-within {
    border-color: color-mix(in srgb, var(--color-kippo-pink) 42%, var(--color-border-subtle));
    background: var(--color-surface-raised);
    box-shadow: 0 0.75rem 2rem rgba(1, 5, 12, 0.08),
                inset 0 0 0 1px rgba(238, 31, 102, 0.1);
    transform: none;
}

@keyframes interactive-text-pulse {
    from {
        scale: 1;
        translate: 0 0;
        text-shadow: 0 0 0.648rem rgba(139, 124, 255, 0.576);
    }

    to {
        scale: 1.042;
        translate: 0 -1.2px;
        text-shadow: 0 0 1.152rem rgba(139, 124, 255, 1);
    }
}

.tournament-card-inprogress,
.tournament-card-inprogress:hover,
.tournament-card-inprogress:focus-within {
    border-color: var(--color-kippo-pink);
}

.pattern-recall-shell {
    max-width: 44rem;
    margin: 0 auto;
    padding: var(--spacing-30) 0 var(--spacing-50);
}

.more-game-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.more-game-intro h1 { margin: 0.35rem 0 0; font-size: 2em; }
.more-game-intro div > p:last-child { max-width: 32rem; color: var(--muted); line-height: 1.67; }
.pattern-recall-entry, .pattern-recall-match { border: 1px solid var(--color-ash); background: var(--color-surface-raised); padding: clamp(1rem, 3vw, 2rem); border-radius: var(--radius-cards); }
.pattern-recall-entry h2 { margin-top: 0; }
.pattern-recall-entry p { color: var(--muted); }
.pattern-recall-entry-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.pattern-recall-scoreboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.pattern-recall-scoreboard > div { display: flex; flex-direction: column; gap: 0.35rem; border-bottom: 1px solid var(--color-ash); padding-bottom: 0.75rem; }
.pattern-recall-scoreboard span, .pattern-recall-scoreboard small { color: var(--muted); font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; }
.pattern-recall-scoreboard strong { color: var(--color-ghost-white); font: 700 1.8rem var(--mono); }
.pattern-recall-status { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; color: var(--muted); font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; }
.pattern-recall-status strong { color: #62a8ff; }
.pattern-recall-phase-watch { color: #b9dbff; }
.pattern-recall-phase-input { color: #7dff42; }
.pattern-recall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; max-width: 22rem; margin: 0 auto; }
.pattern-recall-board { position: relative; isolation: isolate; }
.pattern-recall-countdown { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; background: #03060be6; color: var(--color-ghost-white); }
.pattern-recall-countdown span { font: 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.12em; }
.pattern-recall-countdown[hidden] { display: none; }
.pattern-recall-countdown strong { font: 800 clamp(4rem, 16vw, 7rem)/1 var(--mono); color: #b9dbff; font-variant-numeric: tabular-nums; }
.pattern-recall-tile { aspect-ratio: 1; border: 1px solid #273346; background: #0c111a; cursor: pointer; transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease; }
.pattern-recall-tile:not(:disabled):hover, .pattern-recall-tile:not(:disabled):focus-visible { border-color: #8fc4ff; background: #17253a; }
.pattern-recall-tile[data-playback-lit="true"] { border-color: #b9dbff; background: #4c91db; box-shadow: 0 0 1.25rem rgba(98, 168, 255, 0.65); }
.pattern-recall-tile:disabled { cursor: default; }
.blazor-error-boundary {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-buttons);
    background: var(--color-carbon);
    color: var(--color-ghost-white);
}

/* Consistent actions for game entry, invitations and results. */
.button.game-action-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-width: 0;
    min-height: 44px;
    max-width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-buttons);
    background: #ffffff06;
    color: var(--color-ghost-white);
    font: 700 .7rem/1.4 var(--font-source-code-pro);
    letter-spacing: .07em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: normal;
    transition: border-color 160ms ease, background-color 160ms ease,
                background-size 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.button.game-action-button:hover:not(:disabled) {
    border-color: var(--color-kippo-pink);
    background-color: var(--color-action-tint);
    color: var(--color-ghost-white);
}
.button.game-action-button > span[aria-hidden="true"] {
    color: var(--color-kippo-pink);
    transition: transform 160ms ease;
}
.button.game-action-button:hover:not(:disabled) > span[aria-hidden="true"] { transform: translateY(-2px); }
.button.game-action-button:active:not(:disabled) { background-color: var(--color-action-pressed); }
.button.game-action-button.game-action-primary {
    border-color: var(--color-action-background);
    background-color: var(--color-action-background);
    background-image: linear-gradient(90deg, var(--color-action-hover), var(--color-action-hover));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0 100%;
}
.button.game-action-button.game-action-primary:is(:hover, :focus-visible, :active):not(:disabled) {
    border-color: var(--color-action-hover);
    background-color: var(--color-action-background);
    background-size: 100% 100%;
}
.button.game-action-button.game-action-primary > span[aria-hidden="true"] { color: inherit; }
.button.game-action-button:focus-visible {
    outline: 2px solid var(--color-kippo-pink);
    outline-offset: 3px;
}
.button.game-action-button:disabled { opacity: .4; cursor: default; }
.button.game-action-button[hidden] { display: none; }

@media (max-width: 600px) {
    .more-game-intro { flex-direction: column; align-items: flex-start; gap: .75rem; margin-bottom: 1.5rem; }
    .more-game-intro div > p:last-child { margin-bottom: 0; }
    .pattern-recall-entry h2 { font-size: 1.1rem; }
    .pattern-recall-entry-actions { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .button.game-action-button,
    .button.game-action-button > span[aria-hidden="true"] { transition: none; }
    .button.game-action-button:hover:not(:disabled) > span[aria-hidden="true"] { transform: none; }
}

/* The shop's most exclusive title keeps its royal treatment in every title slot. */
.title-reactking {
    --title-rarity-accent: #fff0b2;
    --title-rarity-bg: #160f03;
    display: inline-flex;
    position: relative;
    isolation: isolate;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.15rem;
    padding: 0.38rem 0.95rem 0.34rem;
    border: 1px solid transparent;
    border-radius: 0.18rem;
    outline: 1px solid rgba(255, 223, 131, 0.55);
    outline-offset: 3px;
    background-image:
        linear-gradient(108deg, transparent 30%, rgba(255, 253, 226, 0.46) 47%, transparent 63%),
        radial-gradient(circle at 50% 120%, rgba(255, 23, 100, 0.2), transparent 48%),
        linear-gradient(135deg, #0c0802, #352207 48%, #130c02) padding-box,
        linear-gradient(115deg, #8b5b13, #ffe9a0 24%, #c68921 48%, #fff3be 72%, #8b5b13) border-box;
    background-position: 120% 0, 0 0, 0 0, 0 0;
    background-size: 280% 100%, 100% 100%, 100% 100%, 100% 100%;
    box-shadow:
        0 0 0 1px rgba(73, 45, 5, 0.9),
        0 0 0.45rem rgba(255, 211, 104, 0.72),
        0 0 1.2rem rgba(255, 187, 54, 0.28),
        inset 0 0 0.65rem rgba(255, 225, 145, 0.2);
    color: #fff4c9 !important;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-shadow:
        0 1px 0 #6c430b,
        0 0 0.4rem rgba(255, 228, 151, 0.85),
        0 0 0.9rem rgba(255, 191, 58, 0.4);
    text-transform: uppercase;
    animation: reactking-title-shine 6s ease-in-out infinite;
}

.title-reactking::before {
    position: absolute;
    top: -0.72rem;
    left: 50%;
    z-index: 2;
    width: 1.35rem;
    height: 0.7rem;
    background:
        radial-gradient(circle at 50% 72%, #ff1764 0 9%, #ff8bb2 10% 14%, transparent 15%),
        linear-gradient(180deg, #fff5c5, #d99b2b 70%, #704407);
    clip-path: polygon(0 100%, 6% 34%, 30% 68%, 50% 0, 70% 68%, 94% 34%, 100% 100%);
    content: "";
    filter: drop-shadow(0 0 0.22rem rgba(255, 218, 121, 0.85));
    pointer-events: none;
    transform: translateX(-50%);
    animation: reactking-crown-glow 3s ease-in-out infinite;
}

.title-reactking::after {
    position: absolute;
    top: -0.2rem;
    right: 8%;
    z-index: 2;
    width: 0.52rem;
    height: 0.52rem;
    background: #fffbe0;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    content: "";
    filter: drop-shadow(0 0 0.28rem #ffe08a);
    opacity: 0;
    pointer-events: none;
    animation: reactking-title-glint 3.4s ease-out infinite;
}

@keyframes reactking-title-shine {
    0%, 100% {
        background-position: 120% 0, 0 0, 0 0, 0 0;
        box-shadow: 0 0 0 1px rgba(73, 45, 5, 0.9),
            0 0 0.42rem rgba(255, 211, 104, 0.65),
            0 0 1rem rgba(255, 187, 54, 0.22),
            inset 0 0 0.55rem rgba(255, 225, 145, 0.18);
    }
    50% {
        background-position: -20% 0, 0 0, 0 0, 0 0;
        box-shadow: 0 0 0 1px rgba(106, 67, 7, 0.95),
            0 0 0.72rem rgba(255, 232, 162, 0.9),
            0 0 1.6rem rgba(255, 194, 66, 0.42),
            inset 0 0 0.8rem rgba(255, 239, 189, 0.3);
    }
}

@keyframes reactking-title-glint {
    0%, 62%, 100% { opacity: 0; transform: scale(0.25) rotate(0deg); }
    12%, 22% { opacity: 1; transform: scale(1) rotate(45deg); }
    36% { opacity: 0; transform: scale(0.35) rotate(90deg); }
}

@keyframes reactking-crown-glow {
    0%, 100% { filter: drop-shadow(0 0 0.18rem rgba(255, 205, 93, 0.72)); transform: translateX(-50%) translateY(0); }
    50% { filter: drop-shadow(0 0 0.38rem rgba(255, 235, 173, 0.95)); transform: translateX(-50%) translateY(-0.04rem); }
}

@media (prefers-reduced-motion: reduce) {
    .title-reactking,
    .title-reactking::before,
    .title-reactking::after { animation: none; }
    .title-reactking::before { opacity: 1; transform: translateX(-50%); }
    .title-reactking::after { opacity: 0.45; }
}