html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* App color variables */
:root {
    --text-primary: #5ba6da;
    --rz-primary-light: #5ba6da !important;
    --rz-danger-light: #D84315 !important;
    --bg-fear: #D84315;
    --rz-info-light: #1B5E20 !important;
    --bg-min-players: #1B5E20;
    --md-bg: #fff;
    --md-text: #1f1f1f;
    --md-muted: #5f6368;
    --md-stroke: #c7c7c7;
    --md-focus: #1a73e8; /* Google blue-ish */
    --md-error: #d93025; /* Material error red */
    --md-radius: 8px;
    --md-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
    --rz-splitbutton-menu-min-width: 0rem;
    /* Tournament-placement stat boxes on the profile. Deliberately not #FFD700, which is
       reserved for the approved-user marker that sits on the same card. */
    --medal-gold: #E3B230;
    --medal-silver: #B9C0C9;
    /* The sticky top bar (ArmadilloNavbar): --ark-nav-bar-h is its bar row, --ark-nav-h the whole
       header - 5px marquee strip + bar + 1px bottom border. Page elements that stick while
       scrolling park at top: var(--ark-nav-h) so they stop just under it instead of behind it. */
    --ark-nav-bar-h: 4rem;
    --ark-nav-h: calc(var(--ark-nav-bar-h) + 6px);
}

@media (max-width: 766.98px) {
    :root {
        --ark-nav-bar-h: 3.25rem;
    }

    /* Here the navbar also shows its ticker strip (1.75rem) under the bar - rendered only while the
       armadillo has a line to say. */
    :root:has(.ark-ticker) {
        --ark-nav-h: calc(var(--ark-nav-bar-h) + 1.75rem + 6px);
    }
}

aside {
    font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    padding-bottom: 7rem;
}

main {
    padding-bottom: 4rem;
}


.card {
    background-color: #CCCED4;
}

/* Terpeca placement watermark on the profile's played-rooms grid (name column). The cell gets
   data-terpeca via the grid's CellRender; it's global here because Radzen renders that <td>
   outside the page's CSS-isolation scope. The trophy is a mask so its color is the medal token,
   and it sits at z-index -1 inside an isolated cell so the room name stays crisp above it. */
td[data-terpeca] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

td[data-terpeca]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* multiply tints the cell's own background (row stripe included) instead of laying a paler
       layer over it, so the trophy reads as part of the cell and the dark name text keeps its contrast */
    mix-blend-mode: multiply;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M280-120v-80h160v-124q-49-11-87.5-41.5T296-442q-75-9-125.5-65.5T120-640v-40q0-33 23.5-56.5T200-760h80v-80h400v80h80q33 0 56.5 23.5T840-680v40q0 76-50.5 132.5T664-442q-18 46-56.5 76.5T520-324v124h160v80H280Zm0-408v-152h-80v40q0 38 22 68.5t58 43.5Zm200 128q50 0 85-35t35-85v-240H360v240q0 50 35 85t85 35Zm200-128q36-13 58-43.5t22-68.5v-40h-80v152Zm-200-52Z'/%3E%3C/svg%3E") no-repeat center / auto 150%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M280-120v-80h160v-124q-49-11-87.5-41.5T296-442q-75-9-125.5-65.5T120-640v-40q0-33 23.5-56.5T200-760h80v-80h400v80h80q33 0 56.5 23.5T840-680v40q0 76-50.5 132.5T664-442q-18 46-56.5 76.5T520-324v124h160v80H280Zm0-408v-152h-80v40q0 38 22 68.5t58 43.5Zm200 128q50 0 85-35t35-85v-240H360v240q0 50 35 85t85 35Zm200-128q36-13 58-43.5t22-68.5v-40h-80v152Zm-200-52Z'/%3E%3C/svg%3E") no-repeat center / auto 150%;
}

/* Silver is already close to the row's own grey, so it needs a little more strength than gold to register. */
td[data-terpeca="winner"]::before {
    background: var(--medal-gold);
    opacity: .2;
}

td[data-terpeca="finalist"]::before {
    background: var(--medal-silver);
    opacity: .32;
}

.bungee-regular {
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    font-style: normal;
}


.fredoka {
    font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e52460;
}

.validation-message {
    color: #e52460;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjhyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


.mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding-left: 4px !important;
    padding-right: 8px !important;
}

.mud-expand-panel .mud-expand-panel-header {
    padding-left: 4px !important;
    padding-right: 4px !important;
}




.md-field {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    min-width: 240px;
    font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* The input (outlined style) */
.md-input {
    width: 100%;
    padding: 4px 4px 4px 4px; /* top padding leaves space for label */
    border: 1px solid var(--md-stroke);
    border-radius: var(--md-radius);
    background: var(--md-bg);
    color: var(--md-text);
    outline: none;
    box-shadow: var(--md-shadow);
    transition: border-color .2s, box-shadow .2s;
    margin-inline-end: 1rem;
}

/* Floating label */
.md-label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 4px;
    color: var(--md-muted);
    background: transparent;
    pointer-events: none;
    transition: transform .18s ease, color .18s ease, font-size .18s ease, top .18s ease, background-color .18s ease;
}

/* Float when focused or has value (placeholder=" " trick) */
.md-input:focus + .md-label,
.md-input:not(:placeholder-shown) + .md-label {
    top: 0;
    transform: translateY(-50%) scale(.90);
    font-size: 12px;
    color: var(--md-focus);
    background: var(--md-bg); /* creates a �cutout� effect over border */
    margin-left: 2px;
    margin-right: 2px;
}

/* Focus ring */
.md-input:focus {
    border-color: var(--md-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-focus) 20%, transparent);
}

/* Supporting (helper/error) text */
.md-supporting {
    font-size: 12px;
    color: var(--md-muted);
    padding-left: 4px;
}

/* Error state */
.md-field.error .md-input {
    border-color: var(--md-error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-error) 16%, transparent);
}

.md-field.error .md-label,
.md-field.error .md-supporting {
    color: var(--md-error);
}

/* Disabled state */
.md-input:disabled {
    background: #f6f6f6;
    color: #8d8d8d;
    border-color: #e3e3e3;
    box-shadow: none;
    cursor: not-allowed;
}

.rz-fieldset-content {
    padding: 8px !important;
}

.mud-expand-panel .mud-expand-panel-header {
    padding: 4px !important;
}

.sticky-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 0.85rem;
    color: #333;
}

.footer-links a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s;
}

    .footer-links a:hover {
        color: #0056b3;
        text-decoration: underline;
    }




.clear-filters {
    transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.4s;
    transform: translateX(500px);
    opacity: 0;
    pointer-events: none;
    position: relative;
    z-index: 2;
    display: inline-flex;
}

    .clear-filters.slide-in {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
        transition-delay: 0.25s; /* Delay before animation starts */
    }

/* Divider between each region panel title */
.region-panels {
    border-bottom: 1px inset rgba(0,0,0,.33);
}


.mud-popover {
    --mud-palette-surface: #1877F2!important; /* your desired color */
}





/* Hide on desktop, show on mobile */
.mobile-only {
    display: none;
}

/* Show on desktop, hide on mobile */
.desktop-only {
    display: block;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none !important;
    }
}



@media (max-width: 767px) {
    .desktop-only {
        display: none;
    }

    div.sticky-top span {
        font-size: 0.75rem;
    }

    div.mud-expand-panel-text {
        font-size: 0.75rem;
    }

    .city-name {
        font-size: 0.7rem !important;
    }

    aside {
        padding-bottom: 1rem;
    }

    .footer-content {
        max-width: 800px;
  
    }
}


.rz-grid-table {
    width: unset !important;
}







/* Animated full-screen backdrop */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    pointer-events: all;
    background: linear-gradient(120deg, #f5f7fa, #e9eef5, #f5f7fa);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* Frosted glass card */
.loading-card {
    position: relative;
    min-width: min(92vw, 560px);
    padding: 2rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px) saturate(120%);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    text-align: center;
}

/* Spinner + glow wrapper */
.loading-ring {
    position: relative;
    display: inline-grid;
    place-items: center;
    margin-inline: auto;
}

/* Make spinner much bigger */
.overlay-spinner {
    transform: scale(2.6);
    transform-origin: center;
}

/* Optional: explicit size if you prefer instead of transform
.overlay-spinner .mud-progress-circular-svg {
    width: 160px !important;
    height: 160px !important;
}
*/

/* Soft animated glow behind spinner */
.spinner-glow {
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(99,102,241,0.35), transparent 70%);
    filter: blur(8px);
    animation: glowPulse 2.2s ease-in-out infinite;
    z-index: -1;
}

/* Shimmering headline */
.loading-text {
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: .02em;
    color: #1f2937;
}

.shimmer {
    background: linear-gradient(90deg, rgba(31,41,55,0.25), rgba(31,41,55,0.85), rgba(31,41,55,0.25));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmerMove 2.5s linear infinite;
}

/* Bouncing dots under text */
.loading-dots {
    display: inline-flex;
    gap: 8px;
    margin-top: .35rem;
}

    .loading-dots span {
        width: 10px;
        height: 10px;
        background: #6366f1; /* indigo */
        border-radius: 50%;
        display: inline-block;
        animation: bounce 1.2s ease-in-out infinite;
    }

        .loading-dots span:nth-child(2) {
            animation-delay: .15s;
        }

        .loading-dots span:nth-child(3) {
            animation-delay: .3s;
        }

/* Animations */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes shimmerMove {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes glowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: .9;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .9;
    }

    40% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* Fade-in animation for no-results */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Centers the "no rooms" scene in the height the page has below the navbar before it would scroll -
   10.25rem being the page's own margins above and below the column. Only where the filters sit
   beside the list (xl); stacked under them, the scene simply follows them. */
@media (min-width: 1200px) {
    .no-results-stage {
        min-height: calc(100dvh - var(--ark-nav-h) - 10.25rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* The "no rooms" scene at the picture's own proportions (1408x736): as wide as the column allows up
   to a modest cap, and never so tall the page has to scroll - it stays clear of the navbar, the
   page's margins and the fixed footer (13rem covers the margins and footer). The caption scales
   with the picture (cqw), keeping its spot on the back wall under the bulb. */
.no-results {
    position: relative;
    container-type: inline-size;
    width: min(100%, 50rem, calc((100dvh - var(--ark-nav-h) - 13rem) * 1408 / 736));
    aspect-ratio: 1408 / 736;
    margin-inline: auto;
    border-radius: var(--md-radius);
    display: flex;
    align-items: start;
    justify-content: center;
    color: #fff;
    background: url('/images/no_rooms.png') center/cover no-repeat;
    font-family: 'Playpen Sans Hebrew', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    animation: fade-in 0.9s cubic-bezier(.33,.99,.48,1.01);
}



.no-results-text {
    text-align: center;
    padding: 13cqw 1rem 0;
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
    font-size: 4.6cqw;
    font-family: 'Playpen Sans Hebrew', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


.rz-button-box {
    padding-inline: 0.25rem !important;
}

/* Give the RadzenSwitch knob a springy overshoot instead of Radzen's flat linear
   slide, so the filter panel's toggles match the site's playful motion language.
   !important is needed because Radzen's own stylesheet loads after app.css. */
.rz-switch-circle:before {
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
    .rz-switch-circle:before {
        transition: none !important;
    }
}

/* Shared "loading rooms" panel look (LoadingRoomsPanel.razor), reused both as a
   small peek behind the door on Home and as the full-screen navigation cover in
   MainLayout - global because it's rendered by two different components. */
.tx-loading-backdrop {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(120deg, #f5f7fa, #e9eef5, #f5f7fa);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* Same look as .loading-card above, but sized relative to its container instead
   of the viewport - .loading-card's `min-width: min(92vw,560px)` would blow right
   past the small door-sized peek and show only an off-center slice of it. */
.tx-loading-card {
    position: relative;
    box-sizing: border-box;
    width: min(92%, 560px);
    max-width: calc(100% - 1rem);
    padding: clamp(.75rem, 8%, 2rem);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px) saturate(120%);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .tx-loading-backdrop {
        animation: none;
    }

    /* .shimmer and .loading-dots live on the same LoadingRoomsPanel as .tx-loading-backdrop
       above but were missed when that gate was added - same panel, same rule should apply. */
    .shimmer {
        animation: none;
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        color: #1f2937; /* the shimmer's own base ink color, since the animated gradient-text fill is switched off */
    }

    .loading-dots span {
        animation: none;
    }
}

/* Room-name ribbon - global because it's now used both on the main room card
   (View.razor) and the suggestion card (User.razor). Solid color + heavy text
   outline reads reliably regardless of what's behind it in the background image. */
.room-ribbon {
    position: absolute;
    top: 15px;
    right: -13px; /* exceed a bit outside */
    background: var(--text-primary);
    color: #fff;
    padding: .35rem .75rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: .25rem;
    box-shadow: 0 4px 10px rgba(0,0,0,.5);
    font-weight: 700;
    z-index: 100;
    /* No will-change here: it kept one compositor layer alive per card at rest. The hover
       shake is a transform animation, which the browser promotes on its own while it runs. */
}

.room-ribbon::after {
    content: "";
    position: absolute;
    left: -9px;
    top: 1;
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-right: 10px solid var(--text-primary);
}

.room-ribbon-text {
    white-space: nowrap;
    font-size: 1.1rem;
    z-index: 110;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Ribbon shake on hover */
@keyframes ribbon-shake {
    0% {
        transform: translate3d(0,0,0) rotate(0deg);
    }

    15% {
        transform: translate3d(-1px, 0, 0) rotate(-1deg);
    }

    30% {
        transform: translate3d(1px, 0, 0) rotate(1deg);
    }

    45% {
        transform: translate3d(-1px, 0, 0) rotate(-0.8deg);
    }

    60% {
        transform: translate3d(1px, 0, 0) rotate(0.8deg);
    }

    75% {
        transform: translate3d(-0.6px, 0, 0) rotate(-0.6deg);
    }

    100% {
        transform: translate3d(0,0,0) rotate(0deg);
    }
}

.card:hover .room-ribbon,
.room-card:hover ~ .room-ribbon {
    animation: ribbon-shake .6s ease-in-out both;
}

@media (prefers-reduced-motion: reduce) {
    .card:hover .room-ribbon,
    .room-card:hover ~ .room-ribbon {
        animation: none;
    }
}


/* A link inside an armadillo speech bubble (BubbleLineView): keeps the bubble's own Vivid Blue voice,
   marked as clickable by the underline alone. Global because it renders in its own component. */
.bubble-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .bubble-link:hover {
        text-decoration-thickness: 2px;
    }