:root {
    --bg-base: #050914;
    --bg-soft: #0b1228;
    --surface: rgba(13, 22, 44, 0.9);
    --surface-strong: #131f3d;
    --text-main: #e8efff;
    --text-muted: #9eaed1;
    --line: #24365f;
    --line-strong: #33508a;
    --brand: #32d6ff;
    --brand-bright: #4d7dff;
    --accent: #ff5c8d;
    --accent-soft: #392244;
    --success-soft: #132f2a;
    --danger-soft: #3a1d2a;
    --danger-line: #7f3650;
    --shadow-main: 0 18px 40px rgba(2, 8, 24, 0.65);
    --shadow-soft: 0 10px 24px rgba(4, 10, 28, 0.5);
    --radius-lg: 20px;
    --radius-md: 14px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: "Rubik", "Segoe UI", sans-serif;
    color: var(--text-main);
    background:
        radial-gradient(circle at 15% -5%, rgba(89, 44, 151, 0.22), rgba(89, 44, 151, 0) 42%),
        radial-gradient(circle at 88% 10%, rgba(19, 133, 204, 0.18), rgba(19, 133, 204, 0) 45%),
        linear-gradient(180deg, #050914 0%, #02050f 100%);
}


a {
    color: var(--brand);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.arena-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(55, 86, 139, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(55, 86, 139, 0.14) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 82%);
}

.energy {
    position: absolute;
    border-radius: 999px;
    filter: blur(10px);
    opacity: 0.45;
}

.energy-one {
    width: 360px;
    height: 360px;
    top: -120px;
    left: -100px;
    background: rgba(255, 71, 137, 0.4);
}

.energy-two {
    width: 420px;
    height: 420px;
    right: -160px;
    top: -90px;
    background: rgba(63, 196, 255, 0.35);
}

.energy-three {
    width: 300px;
    height: 300px;
    right: 15%;
    bottom: -120px;
    background: rgba(80, 110, 255, 0.3);
}

.mobile-shell {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: calc(12px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));
}

@media (max-width: 699px) {
    .mobile-shell {
        padding-inline: max(10px, env(safe-area-inset-left));
    }
}

.arena-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    margin-bottom: 14px;
    border-radius: 18px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(7, 14, 31, 0.9);
    border: 1px solid rgba(74, 112, 184, 0.4);
    box-shadow: 0 14px 32px rgba(2, 9, 24, 0.5);
    backdrop-filter: blur(14px);
}

.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    flex: 0 0 auto;
}

.brand-logo {
    width: 100px;
    filter: drop-shadow(0 0 10px rgba(255, 92, 141, 0.35));
}

.topbar-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.topbar-points-pill {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid #3460a4;
    color: #f7fbff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(120deg, #244ebf, #34b7f2);
    box-shadow: 0 6px 12px rgba(27, 87, 201, 0.28);
}

.topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.topbar-auth {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.topbar-auth form {
    margin: 0;
}

.topbar-icon-link {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid #2b4678;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, rgba(16, 31, 65, 0.96), rgba(11, 24, 52, 0.96));
    color: #d8e6ff;
    text-decoration: none;
    transition: filter 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.topbar-icon-link svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.topbar-icon-link:hover {
    text-decoration: none;
    filter: brightness(1.08);
    border-color: #3a5f9a;
    color: #f2f7ff;
}

.topbar-icon-link.active {
    border-color: #4a72b5;
    background: linear-gradient(140deg, rgba(30, 58, 108, 0.98), rgba(17, 38, 79, 0.98));
    color: #f7fbff;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 10px;
    border: 1px solid #2b4678;
    padding: 6px 10px;
    color: #d8e6ff;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    background: linear-gradient(140deg, rgba(16, 31, 65, 0.96), rgba(11, 24, 52, 0.96));
    transition: filter 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.topbar-link:hover {
    text-decoration: none;
    filter: brightness(1.08);
    border-color: #3a5f9a;
    color: #f2f7ff;
}

.topbar-link.active {
    border-color: #4a72b5;
    background: linear-gradient(140deg, rgba(30, 58, 108, 0.98), rgba(17, 38, 79, 0.98));
    color: #f7fbff;
}

.nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid #33548c;
    background: linear-gradient(145deg, #12244b, #0e1d3f);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    min-height: 0;
    cursor: pointer;
}

.nav-toggle span {
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: #d9e7ff;
    transform-origin: center;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

body.nav-open .nav-toggle {
    border-color: #9a4f1b;
    background: rgba(33, 18, 10, 0.9);
}

body.nav-open .nav-toggle span {
    background: #ff8a2a;
}

.mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(2, 8, 20, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, visibility 0.24s ease;
}

.mobile-menu-panel {
    position: fixed;
    left: 14px;
    right: 14px;
    top: calc(76px + env(safe-area-inset-top));
    z-index: 56;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    max-height: min(70vh, 560px);
    overflow: auto;
    border-radius: 16px;
    border: 1px solid #2c4779;
    background: rgba(8, 16, 35, 0.96);
    box-shadow: 0 18px 36px rgba(2, 9, 24, 0.58);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.24s ease, opacity 0.24s ease, visibility 0.24s ease;
}

.mobile-menu-score,
.mobile-menu-logout-form {
    grid-column: 1 / -1;
}

.mobile-menu-panel .nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    border-radius: 12px;
    border: 1px solid #2a2f3a;
    padding: 12px 14px;
    color: #d7dbe3;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: linear-gradient(95deg, rgba(22, 25, 33, 0.96), rgba(16, 18, 24, 0.96));
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
    text-decoration: none;
}

.mobile-menu-panel .nav-link:hover {
    color: #f1f4f8;
    background: linear-gradient(95deg, rgba(27, 31, 41, 0.98), rgba(19, 22, 29, 0.98));
    border-color: #3a414f;
    text-decoration: none;
}

.mobile-menu-panel .nav-link.active {
    color: #ffffff;
    border-color: #4a5263;
    background: linear-gradient(95deg, rgba(34, 39, 50, 0.98), rgba(23, 26, 34, 0.98));
}

.nav-link-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d2d7df;
    flex: 0 0 auto;
}

.nav-link-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.nav-link-label {
    line-height: 1;
}

.mobile-menu-panel .nav-link.active .nav-link-icon {
    color: #f7fbff;
}

.mobile-menu-score {
    display: flex;
    justify-content: flex-start;
}

.mobile-score-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #f6f9ff;
    font-size: 0.8rem;
    font-weight: 700;
    background: linear-gradient(120deg, #2856d9, #3ec6ff);
    box-shadow: 0 10px 20px rgba(27, 87, 201, 0.35);
}

.mobile-menu-logout-form {
    margin: 0;
}

.mobile-menu-logout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    border-radius: 12px;
    border: 1px solid #7a3b45;
    padding: 12px 14px;
    color: #ff6f78;
    background: linear-gradient(95deg, rgba(41, 17, 23, 0.96), rgba(28, 13, 17, 0.96));
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.22s ease, border-color 0.22s ease;
}

.mobile-menu-logout:hover {
    filter: brightness(1.08);
    border-color: #86556f;
}

.mobile-score-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9bffbf;
}

body.nav-open .mobile-menu-backdrop,
body.nav-open .mobile-menu-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.nav-open .mobile-menu-panel {
    transform: translateY(0);
}

body.nav-open {
    overflow: hidden;
}

.flash-message,
.error-box {
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    padding: 12px;
    font-size: 0.95rem;
    box-shadow: var(--shadow-soft);
}

.flash-message {
    border: 1px solid #1e6959;
    background: var(--success-soft);
}

.error-box {
    border: 1px solid var(--danger-line);
    background: var(--danger-soft);
}

.error-box ul {
    margin: 0;
    padding-inline-start: 18px;
}

.floating-toast {
    position: fixed;
    top: 84px;
    right: 14px;
    z-index: 1100;
    width: min(420px, calc(100vw - 20px));
    margin: 0;
    backdrop-filter: blur(4px);
    animation: toastEnter 0.18s ease;
}

@keyframes toastEnter {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 699px) {
    .floating-toast {
        top: 74px;
        left: 10px;
        right: 10px;
        width: auto;
    }
}

.content {
    display: grid;
    gap: 24px;
}

.panel {
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid rgba(50, 79, 132, 0.6);
    box-shadow: var(--shadow-main);
    padding: 16px;
}

.panel h1,
.panel h2 {
    margin: 0;
    line-height: 1.15;
    color: #f6f8ff;
}

.panel h1 {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: clamp(1.45rem, 3.2vw, 2.45rem);
    letter-spacing: 0.02em;
}

.panel h2 {
    font-family: "Oswald", sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.panel p {
    margin: 10px 0 0;
    line-height: 1.56;
    color: var(--text-muted);
}

.hero-panel {
    background:
        linear-gradient(120deg, rgba(51, 25, 75, 0.5), rgba(13, 22, 44, 0.85) 55%),
        radial-gradient(circle at 100% 0%, rgba(86, 214, 255, 0.25), transparent 42%);
    position: relative;
    overflow: hidden;
}

.hero-panel::after {
    content: "";
    position: absolute;
    right: -35px;
    top: -35px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(113, 152, 223, 0.28);
    border-radius: 50%;
    pointer-events: none;
}

.login-shell .content {
    gap: 16px;
}

.login-hero {
    border-color: rgba(117, 169, 255, 0.55);
    background:
        linear-gradient(126deg, rgba(255, 86, 134, 0.28), rgba(18, 27, 52, 0.92) 50%, rgba(53, 202, 255, 0.24)),
        radial-gradient(circle at 8% 8%, rgba(255, 193, 102, 0.18), transparent 40%);
}

.login-hero::after {
    width: 210px;
    height: 210px;
    border-color: rgba(166, 202, 255, 0.4);
}

.login-fun-tags {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.login-fun-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(169, 204, 255, 0.45);
    padding: 5px 11px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f3f7ff;
    background: rgba(11, 25, 54, 0.8);
    animation: loginTagFloat 4.4s ease-in-out infinite;
}

.login-fun-tags span:nth-child(2) {
    animation-delay: 0.32s;
}

.login-fun-tags span:nth-child(3) {
    animation-delay: 0.64s;
}

.login-card {
    border-color: rgba(96, 132, 194, 0.62);
    background:
        linear-gradient(160deg, rgba(20, 34, 68, 0.95), rgba(9, 16, 36, 0.95)),
        radial-gradient(circle at 100% 0%, rgba(82, 158, 255, 0.2), transparent 42%);
}

.login-form {
    gap: 12px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    border-color: #31508a;
    background: linear-gradient(180deg, rgba(12, 28, 59, 0.96), rgba(9, 20, 45, 0.96));
}
.daily-popup-panel .btn-primary,
.dashboard-actions .btn-primary,
.login-form .btn-primary {
    margin-top: 4px;
    min-height: 48px;
    border: 2px solid #1a120f;
    border-radius: 4px;
    color: #111216;
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-shadow: 1px 1px 0 rgba(255, 220, 150, 0.55);
    background:
        linear-gradient(180deg, rgba(255, 223, 156, 0.34), rgba(255, 223, 156, 0)),
        repeating-linear-gradient(
            90deg,
            #f0ab4f 0,
            #f0ab4f 14px,
            #e69b3f 14px,
            #e69b3f 24px,
            #f4b55c 24px,
            #f4b55c 36px
        ),
        linear-gradient(180deg, #ffc868 0%, #ffae45 58%, #f0912f 100%);
    box-shadow: 0 0 0 2px #000, 0 5px 0 #5a321b, 0 12px 24px rgba(18, 8, 5, 0.45);
    transition: transform 0.08s steps(2, end), filter 0.12s ease, box-shadow 0.08s steps(2, end);
}

.login-form .btn-primary:hover {
    filter: brightness(1.06) saturate(1.08);
    transform: translateY(-1px);
}

.login-form .btn-primary:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 2px #000, 0 2px 0 #5a321b, 0 7px 14px rgba(18, 8, 5, 0.38);
}

.login-signup-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.login-signup {
    margin: 0;
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 0.62rem;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #d8e8ff;
    text-shadow: 0 0 8px rgba(135, 193, 255, 0.45);
}

.login-signup-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 4px;
    border: 2px solid #120f1e;
    background:
        linear-gradient(180deg, rgba(255, 225, 156, 0.32), rgba(255, 225, 156, 0)),
        repeating-linear-gradient(
            90deg,
            #4f8fff 0,
            #4f8fff 12px,
            #3f74de 12px,
            #3f74de 22px,
            #6ba6ff 22px,
            #6ba6ff 34px
        ),
        linear-gradient(180deg, #7ac2ff 0%, #4f8fff 55%, #3a70d1 100%);
    box-shadow: 0 0 0 2px #000, 0 4px 0 #1f3f78, 0 10px 20px rgba(4, 16, 42, 0.5);
    color: #081023;
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(199, 231, 255, 0.7);
    text-decoration: none;
    transition: transform 0.08s steps(2, end), filter 0.12s ease, box-shadow 0.08s steps(2, end);
    animation: loginSignupPulse 1.6s steps(2, end) infinite;
}

.login-signup-link:hover {
    filter: brightness(1.06) saturate(1.08);
    transform: translateY(-1px);
    text-decoration: none;
}

.login-signup-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #000, 0 0 0 5px rgba(115, 173, 255, 0.45), 0 4px 0 #1f3f78, 0 10px 20px rgba(4, 16, 42, 0.5);
    text-decoration: none;
}

@keyframes loginSignupPulse {
    0%,
    100% {
        box-shadow: 0 0 0 2px #000, 0 4px 0 #1f3f78, 0 10px 20px rgba(4, 16, 42, 0.5);
    }
    50% {
        box-shadow: 0 0 0 2px #000, 0 4px 0 #1f3f78, 0 10px 20px rgba(4, 16, 42, 0.5), 0 0 18px rgba(92, 164, 255, 0.45);
    }
}

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

.panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.panel-title-row .btn {
    margin-left: auto;
}

.eyebrow {
    margin: 0 0 10px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: #8ba2d1;
}

.small-copy {
    font-size: 0.91rem;
    color: var(--text-muted);
}

.stack-form {
    margin-top: 10px;
    display: grid;
    gap: 9px;
}

.stack-form.compact {
    margin-top: 10px;
}

label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9cb0d9;
    font-weight: 600;
}

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

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 12px;
    color: #eef4ff;
    background: #0b1733;
}

/* Keep dropdown choices readable on browsers that render option lists with a light menu background. */
select option,
select optgroup {
    color: #101426;
    background: #ffffff;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: #4f8dff;
    box-shadow: 0 0 0 4px rgba(59, 105, 214, 0.23);
}

textarea {
    resize: vertical;
    min-height: 92px;
}

input[type="file"]::file-selector-button {
    margin-right: 10px;
    border: 0;
    border-radius: 9px;
    padding: 8px 12px;
    font-weight: 700;
    background: linear-gradient(120deg, #284fbc, #2c95de);
    color: #ffffff;
    cursor: pointer;
}

.checkbox-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #afbee1;
}

.checkbox-line input {
    width: 16px;
    height: 16px;
    accent-color: #4f8dff;
}

.row-line {
    display: flex;
    gap: 8px;
    align-items: center;
}

.row-line select {
    flex: 1;
}

.mini-link {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.btn {
    border: 0;
    border-radius: 12px;
    min-height: 44px;
    padding: 10px 14px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.btn-primary {
    color: #ffffff;
    background: linear-gradient(120deg, #ff4f89, #ff8c50);
    box-shadow: 0 12px 24px rgba(177, 65, 97, 0.4);
}

.btn-soft {
    color: #dbe9ff;
    background: linear-gradient(120deg, #21355e, #2a4477);
}

.btn-start-game {
    color: #ecfff3;
    background: linear-gradient(120deg, #1f8f44, #39b85f);
    box-shadow: 0 10px 22px rgba(37, 148, 78, 0.35);
}

.btn:hover {
    filter: brightness(1.08);
}

.btn:disabled,
.btn.is-busy {
    opacity: 0.75;
    cursor: wait;
    filter: none;
}

.gallery-grid {
    margin-top: 11px;
    display: grid;
    gap: 10px;
}

.gallery-showcase {
    background: linear-gradient(180deg, rgba(11, 20, 40, 0.95), rgba(7, 13, 30, 0.92));
}

.gallery-masonry {
    margin-top: 14px;
    column-count: 1;
    column-gap: 12px;
}

.masonry-item {
    break-inside: avoid;
    margin: 0 0 12px;
    border: 1px solid #223761;
    border-radius: 12px;
    overflow: hidden;
    background: #0c1834;
}

.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: auto;
}

.masonry-meta {
    padding: 8px 10px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #90a4cd;
    border-top: 1px solid #1f3258;
}

.masonry-meta strong {
    color: #edf3ff;
}

.gallery-hero {
    background:
        radial-gradient(circle at 0% 100%, rgba(255, 83, 141, 0.2), rgba(255, 83, 141, 0) 40%),
        radial-gradient(circle at 90% 6%, rgba(56, 185, 255, 0.24), rgba(56, 185, 255, 0) 38%),
        linear-gradient(145deg, #111b34 0%, #0a142d 100%);
}

.gallery-hero-actions {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.gallery-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.upload-rule {
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #93c8ff;
    border: 1px solid #305080;
    background: #112145;
}

.upload-panel {
    border: 1px solid #28477c;
    background:
        radial-gradient(circle at 90% 0%, rgba(63, 164, 255, 0.14), rgba(63, 164, 255, 0) 38%),
        rgba(11, 19, 40, 0.92);
}

.upload-form {
    padding: 12px;
    border: 1px solid #26406f;
    border-radius: 14px;
    background: #0c1a38;
}

.gallery-card {
    border: 1px solid #233963;
    border-radius: 12px;
    overflow: hidden;
    background: #0c1834;
}

.submission-grid {
    margin-top: 11px;
    display: grid;
    gap: 10px;
}

.submission-card {
    border: 1px solid #233963;
    border-radius: 12px;
    overflow: hidden;
    background: #0c1834;
}

.submission-card img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 280px;
}

.admin-list {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.popup-preview-card {
    margin-top: 10px;
    border: 1px solid #2c4b84;
    border-radius: 14px;
    padding: 12px;
    background:
        radial-gradient(circle at 90% 10%, rgba(78, 196, 255, 0.14), rgba(78, 196, 255, 0) 42%),
        #0f1d3d;
}

.popup-preview-card strong {
    color: #f5f8ff;
    font-size: 1rem;
}

.popup-preview-card p {
    margin-top: 8px;
    white-space: pre-line;
}

.popup-admin-card {
    border: 1px solid #2b4678;
    border-radius: 14px;
    background: #0f1d3d;
    padding: 12px;
    display: grid;
    gap: 12px;
}

.popup-admin-meta {
    margin-top: 2px;
}

.popup-admin-layout {
    display: grid;
    gap: 24px;
}

.popup-admin-panel {
    grid-column: 1 / -1;
}


.popup-admin-left-column {
    display: grid;
    gap: 24px;
    align-content: start;
}

.popup-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.popup-admin-actions .btn {
    flex: 1 1 140px;
}

.admin-row {
    display: grid;
    gap: 8px;
    align-items: center;
    border: 1px solid #27406d;
    border-radius: 12px;
    padding: 10px;
    background: #0f1d3d;
}

.ranking-row {
    display: grid;
    gap: 8px;
    align-items: center;
    border: 1px solid #27406d;
    border-radius: 12px;
    padding: 10px;
    background: #0f1d3d;
}

.game-admin-form {
    display: block;
    gap: 8px;
    border: 1px solid #27406d;
    border-radius: 12px;
    padding: 10px;
    background: #0f1d3d;
}

.game-admin-form > input[type="text"] {
    margin-bottom: 8px;
}

.game-rankings {
    margin-top: 0;
}

.game-admin-actions {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.game-admin-actions .checkbox-line {
    margin-top: 0;
}

.game-admin-actions .btn {
    width: auto;
}

.game-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

.game-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #2d4a80;
    border-radius: 16px;
    padding: 14px;
    background:
        radial-gradient(circle at 85% 5%, rgba(86, 214, 255, 0.14), rgba(86, 214, 255, 0) 38%),
        linear-gradient(180deg, #122248, #0e1d3f);
    box-shadow: 0 12px 22px rgba(2, 10, 26, 0.45);
    flex-wrap: wrap;
}

.game-list-main {
    flex: 1 1 320px;
    min-width: 0;
}

.game-list-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

.challenge-type-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.challenge-type-chip.is-upload {
    color: #8cd8ff;
    border: 1px solid #2c5f92;
    background: #122949;
}

.challenge-type-chip.is-position {
    color: #ffcf9f;
    border: 1px solid #865537;
    background: #322113;
}

.game-icon-chip {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffd58f;
    background: linear-gradient(145deg, #3f3154, #2a2f61);
    border: 1px solid #5a67a6;
    box-shadow: 0 8px 18px rgba(21, 31, 69, 0.55);
}

.game-icon-chip svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.game-name {
    font-size: 1.07rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.game-badges {
    margin-top: 8px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.game-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
    color: #d7e7ff;
    border: 1px solid #36578e;
    background: #162a52;
}

.game-badge-inline {
    margin-left: auto;
    padding: 2px 8px;
    font-size: 0.64rem;
    letter-spacing: 0.06em;
}

.game-badge.is-photo {
    border-color: #2f658e;
    background: #123651;
    color: #aee8ff;
}

.game-badge.is-standard {
    border-color: #5f4978;
    background: #34254f;
    color: #e0c8ff;
}

.game-badge.is-active {
    border-color: #2f6f68;
    background: #143a35;
    color: #adf5dd;
}

.game-badge.is-inactive {
    border-color: #6d4f7f;
    background: #3a2945;
    color: #f2d2ff;
}

.game-list-meta {
    margin-top: 6px;
    line-height: 1.45;
}

.game-awards {
    margin-top: 10px;
}

.game-winner-block {
    margin-top: 12px;
}

.game-winner-buttons {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.game-winner-buttons form {
    margin: 0;
}

.btn-winner {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 0.7rem;
}

.meta-icon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    margin-right: 0;
    padding: 2px 8px;
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #ffe4a6;
    border: 1px solid #8a6996;
    background: linear-gradient(145deg, #4a315e, #31214a);
}

.meta-icon svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.reward-pills {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.reward-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff2d0;
    border: 1px solid #876691;
    background: linear-gradient(120deg, #43305e, #2f2448);
}

.reward-pill.reward-rank-1 {
    color: #2a1a00;
    border-color: #d4a73c;
    background: linear-gradient(120deg, #ffd766, #ffbe3f);
}

.reward-pill.reward-rank-2 {
    color: #152238;
    border-color: #8ea5c7;
    background: linear-gradient(120deg, #dbe5f7, #b9c9e4);
}

.reward-pill.reward-rank-3 {
    color: #2f1507;
    border-color: #b26e43;
    background: linear-gradient(120deg, #efb082, #d58657);
}

.reward-pill.reward-rank-4 {
    color: #f0ecff;
    border-color: #6a5eb5;
    background: linear-gradient(120deg, #4b3f92, #3b3376);
}

.reward-pill.reward-rank-5 {
    color: #e9fff8;
    border-color: #3e9a86;
    background: linear-gradient(120deg, #257d73, #1f655e);
}

.reward-pill[class*="reward-rank-"]:not(.reward-rank-1):not(.reward-rank-2):not(.reward-rank-3):not(.reward-rank-4):not(.reward-rank-5) {
    color: #eff2ff;
    border-color: #4f6aa1;
    background: linear-gradient(120deg, #354f85, #2e426f);
}

.game-list-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.game-list-actions form {
    margin: 0;
}

.challenge-arcade {
    position: relative;
    margin-top: 6px;
    padding: 18px 12px 20px;
    border: 2px solid #26325a;
    border-radius: 8px;
    background:
        radial-gradient(circle at 15% 20%, rgba(99, 149, 255, 0.2) 0, rgba(99, 149, 255, 0) 34%),
        radial-gradient(circle at 82% 10%, rgba(255, 125, 43, 0.16) 0, rgba(255, 125, 43, 0) 36%),
        #06080f;
    box-shadow: inset 0 0 0 2px #101733, 0 14px 32px rgba(0, 0, 0, 0.45);
}

.challenge-arcade-header {
    width: min(100%, 640px);
    margin: 0 auto 18px;
    padding: 14px 12px;
    border: 2px solid #4e7df5;
    border-radius: 8px;
    text-align: center;
    background: linear-gradient(180deg, #0e1223 0%, #070a14 100%);
    box-shadow: 0 0 0 2px #1f2c5f, 0 0 22px rgba(70, 122, 255, 0.36);
    display: grid;
    justify-items: center;
    gap: 8px;
}

.challenge-arcade-header h1 {
    margin: 0;
    color: #ffa132;
    text-transform: uppercase;
    letter-spacing: 0.06em !important;
    font-size: clamp(1rem, 3.2vw, 1.35rem) !important;
    text-shadow: 0 0 10px rgba(255, 132, 37, 0.45);
}

.challenge-arcade-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.challenge-arcade-header-actions form {
    margin: 0;
}

.challenge-arcade-date {
    margin: 8px 0 0;
    color: #89a3df;
    letter-spacing: 0.03em !important;
}

.challenge-arcade-gif-row {
    margin: -6px auto 14px;
    width: min(100%, 640px);
    display: flex;
    justify-content: center;
    background: transparent;
}

.challenge-arcade-gif {
    width: clamp(150px, 34vw, 280px);
    height: auto;
    image-rendering: pixelated;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.challenge-arcade-empty {
    margin: 12px 0 0;
    padding: 14px;
    border: 2px dashed #5a6a97;
    border-radius: 8px;
    color: #d8e3ff;
    text-align: center;
    background: rgba(13, 18, 34, 0.75);
}

.challenge-arcade-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.challenge-arcade-item {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    min-height: 120px;
    padding: 12px 10px;
    border: 2px solid #ff7e2f;
    border-radius: 8px;
    background:
        radial-gradient(circle at 90% 0%, rgba(255, 125, 43, 0.16), rgba(255, 125, 43, 0) 42%),
        #080b15;
    box-shadow: 0 0 0 1px #a6400e, 0 0 16px rgba(255, 124, 44, 0.2);
}

.challenge-arcade-item.is-timed-live::after {
    content: "";
    position: absolute;
    inset: -35% -20%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 210, 115, 0.22) 50%,
        rgba(255, 255, 255, 0) 65%
    );
    transform: translateX(-65%);
    animation: challenge-live-scan 3.3s linear infinite;
}

.challenge-arcade-item.is-score-drop {
    animation: timer-card-jolt 240ms steps(2, end);
}

.challenge-arcade-item-left {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    gap: 10px;
}

.challenge-arcade-icon {
    position: relative;
    overflow: hidden;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #b36f1b;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffcb49 0%, #ff8f2a 100%);
    box-shadow: 0 0 0 1px #6a3907, 0 0 12px rgba(255, 174, 62, 0.3);
}

.challenge-arcade-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0,
        rgba(255, 255, 255, 0.12) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.36;
    pointer-events: none;
}

.challenge-arcade-icon.is-coin {
    border-color: #9d6a14;
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 250, 201, 0.75), rgba(255, 250, 201, 0) 36%),
        linear-gradient(180deg, #fff07c 0%, #ffc63f 46%, #ff8a1f 100%);
    box-shadow: 0 0 0 1px #714208, 0 0 14px rgba(255, 176, 62, 0.52), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    animation: coin-icon-arcade-pop 1.8s steps(2, end) infinite;
}

.challenge-arcade-icon.is-coin::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -45%;
    width: 22px;
    height: 130%;
    transform: rotate(22deg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
    opacity: 0;
    pointer-events: none;
    animation: coin-icon-scan 2.4s linear infinite;
}

.challenge-arcade-icon.is-trophy {
    border-color: #89611a;
    background:
        radial-gradient(circle at 72% 20%, rgba(255, 243, 173, 0.7), rgba(255, 243, 173, 0) 38%),
        linear-gradient(180deg, #ffe07f 0%, #ffb84b 50%, #f98c2a 100%);
    box-shadow: 0 0 0 1px #69460e, 0 0 14px rgba(255, 180, 74, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    animation: trophy-icon-arcade-bob 2.1s steps(2, end) infinite;
}

.challenge-arcade-icon.is-trophy::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background: #fff6bf;
    box-shadow: 0 0 8px rgba(255, 241, 153, 0.65);
    opacity: 0;
    animation: trophy-icon-star 2.7s steps(2, end) infinite;
}

.challenge-arcade-icon.is-boss {
    border-color: #7c2d4c;
    background:
        radial-gradient(circle at 30% 18%, rgba(255, 191, 221, 0.42), rgba(255, 191, 221, 0) 40%),
        linear-gradient(180deg, #ff7cb2 0%, #ef4d8a 54%, #c13367 100%);
    box-shadow: 0 0 0 1px #5d1836, 0 0 14px rgba(236, 85, 140, 0.48), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    animation: boss-icon-arcade-pulse 1.4s steps(2, end) infinite;
}

.challenge-arcade-icon.is-boss::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(255, 178, 214, 0.48);
    border-radius: 5px;
    opacity: 0;
    animation: boss-icon-outline 1.4s steps(2, end) infinite;
}

.challenge-arcade-icon svg {
    position: relative;
    z-index: 1;
    width: 25px;
    height: 25px;
    fill: #3c1900;
}

.challenge-arcade-icon.is-coin svg {
    fill: #5a2a00;
    filter: drop-shadow(0 0 4px rgba(255, 248, 167, 0.35));
}

.challenge-arcade-icon.is-trophy svg {
    fill: #4f2600;
    filter: drop-shadow(0 0 4px rgba(255, 241, 153, 0.32));
}

.challenge-arcade-icon.is-boss svg {
    fill: #3d0720;
    filter: drop-shadow(0 0 4px rgba(255, 186, 221, 0.28));
}

.challenge-arcade-meta {
    min-width: 0;
}

.challenge-arcade-meta h2 {
    margin: 0;
    color: #f7fbff;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    font-size: clamp(0.72rem, 2.4vw, 0.9rem) !important;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.challenge-arcade-meta .challenge-arcade-description {
    margin: 6px 0 0;
    font-size: 9px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.05em !important;
}

.challenge-arcade-points {
    margin: 6px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffd765 !important;
    letter-spacing: 0.04em !important;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

.challenge-arcade-coin {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    flex: 0 0 16px;
}

.challenge-arcade-timer-shell {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    padding: 4px 10px;
    border: 2px solid #4f78d2;
    border-radius: 3px;
    color: #f5fbff;
    --timer-ratio: 100%;
    background:
        linear-gradient(180deg, rgba(125, 163, 255, 0.24), rgba(125, 163, 255, 0.05)),
        linear-gradient(180deg, #121b33 0%, #0a1124 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 12px rgba(79, 120, 210, 0.28), 0 2px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
    isolation: isolate;
}

.challenge-arcade-timer-shell::before {
    content: "";
    position: absolute;
    inset: 2px auto 2px 2px;
    width: var(--timer-ratio);
    background: linear-gradient(180deg, #f6ea75 0%, #e7cb42 48%, #b9891f 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 245, 181, 0.42);
    z-index: -1;
    transition: width 0.32s linear;
}

.challenge-arcade-timer-shell::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08) 0,
        rgba(255, 255, 255, 0.08) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: -1;
}

.challenge-arcade-timer-shell.is-live {
    animation: timer-live-pulse 1.6s steps(2, end) infinite;
}

.challenge-arcade-timer-shell.is-score-ticking {
    animation: timer-score-tick 280ms steps(2, end);
}

.challenge-arcade-timer-shell.is-paused {
    border-color: #7a7f90;
    color: #d2d8e4;
    background:
        linear-gradient(180deg, rgba(198, 205, 224, 0.18), rgba(198, 205, 224, 0.03)),
        linear-gradient(180deg, #151826 0%, #0e121b 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.challenge-arcade-timer-shell.is-paused::before {
    background: linear-gradient(180deg, #6f7588 0%, #4f5566 100%);
}

.challenge-arcade-timer-shell.is-warning {
    border-color: #d6973b;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 12px rgba(214, 151, 59, 0.3);
}

.challenge-arcade-timer-shell.is-warning::before {
    background: linear-gradient(180deg, #ffd780 0%, #f1ad33 48%, #b96f10 100%);
}

.challenge-arcade-timer-shell.is-critical {
    border-color: #dd664a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 14px rgba(221, 102, 74, 0.34);
}

.challenge-arcade-timer-shell.is-critical::before {
    background: linear-gradient(180deg, #ffb48f 0%, #f47446 54%, #a7391b 100%);
}

.challenge-arcade-timer-score {
    min-width: 0;
    text-align: right;
    font-weight: 900;
    letter-spacing: 0.08em !important;
    font-size: 0.9rem !important;
    line-height: 1;
    color: #f8fcff !important;
    text-shadow: 0 1px 0 rgba(6, 11, 25, 0.72);
}

.challenge-arcade-timer-score.is-score-changing {
    animation: timer-score-pop 260ms steps(2, end);
}

.challenge-arcade-score-delta {
    position: absolute;
    top: -14px;
    right: -4px;
    padding: 2px 4px;
    border: 1px solid #7f2e20;
    border-radius: 2px;
    color: #ffd7cf !important;
    font-size: 0.54rem !important;
    letter-spacing: 0.04em !important;
    background: linear-gradient(180deg, #d85b3f 0%, #a13625 100%);
    box-shadow: 0 0 0 1px rgba(14, 4, 2, 0.7), 0 0 10px rgba(217, 93, 63, 0.35);
    opacity: 0;
    transform: translateY(0);
    pointer-events: none;
}

.challenge-arcade-score-delta.is-visible {
    animation: timer-score-delta-float 680ms ease-out;
}

.challenge-arcade-timer-divider {
    opacity: 0.9;
    color: #f4faff !important;
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(6, 11, 25, 0.72);
}

.challenge-arcade-timer-max {
    opacity: 0.98;
    font-size: 0.85rem !important;
    line-height: 1;
    letter-spacing: 0.06em !important;
    color: #f4faff !important;
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(6, 11, 25, 0.72);
}

.challenge-arcade-timer-unit {
    color: #98e5ff !important;
    letter-spacing: 0.12em !important;
    text-shadow: 0 0 8px rgba(65, 214, 255, 0.35);
    font-size: 0.68rem !important;
    font-weight: 900;
}

.challenge-arcade-dots {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    width: fit-content;
    border: 1px solid rgba(88, 118, 205, 0.45);
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(97, 136, 245, 0.14) 0%, rgba(16, 24, 48, 0.52) 100%),
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px,
            transparent 3px
        );
    box-shadow: inset 0 0 0 1px rgba(8, 14, 31, 0.85), 0 0 12px rgba(64, 96, 190, 0.25);
}

.challenge-arcade-dots.is-score-drop {
    animation: timer-dots-jolt 250ms steps(2, end);
}

.challenge-arcade-rewards {
    margin-top: 8px;
}

.challenge-arcade-rewards-position {
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    padding: 9px 10px 10px;
    border: 2px solid #4d6ec2;
    border-radius: 4px;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.05) 0,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px,
            transparent 3px
        ),
        linear-gradient(180deg, rgba(118, 154, 255, 0.18), rgba(118, 154, 255, 0)),
        linear-gradient(180deg, #121a31 0%, #0a1021 100%);
    box-shadow: inset 0 0 0 1px #223260, 0 0 14px rgba(84, 116, 220, 0.22);
}

.challenge-arcade-rewards-position::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-left: 2px solid #ffb13b;
    border-bottom: 2px solid #ffb13b;
    opacity: 0.9;
}

.challenge-arcade-rewards-label {
    margin: 0 0 6px;
    color: #ffd765 !important;
    text-transform: uppercase;
    letter-spacing: 0.07em !important;
}

.challenge-arcade-rewards-position .challenge-arcade-rewards-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffe186 !important;
    text-shadow: 0 0 8px rgba(255, 187, 82, 0.28);
}

.challenge-arcade-rewards-position .challenge-arcade-rewards-label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    border: 1px solid #8a6119;
    background: linear-gradient(180deg, #ffd76e 0%, #f0a534 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.challenge-arcade-rewards-position .reward-pills {
    margin-top: 6px;
    gap: 5px;
    display: grid;
    grid-template-columns: 1fr;
}

.challenge-arcade-rewards-position .reward-pill {
    width: 100%;
    justify-content: flex-start;
    border: 2px solid #1b2646;
    box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    font-size: 0.66rem !important;
    padding: 6px 8px;
}

.challenge-arcade-rewards-position .reward-pill.reward-rank-1 {
    color: #2b1a00;
    border-color: #9b6d1f;
    background: linear-gradient(180deg, #ffe182 0%, #ffb53f 100%);
    text-shadow: none;
}

.challenge-arcade-rewards-position .reward-pill.reward-rank-2 {
    color: #18253b;
    border-color: #61779f;
    background: linear-gradient(180deg, #e9effa 0%, #bccbe2 100%);
    text-shadow: none;
}

.challenge-arcade-rewards-position .reward-pill.reward-rank-3 {
    color: #351806;
    border-color: #8d5833;
    background: linear-gradient(180deg, #eebc97 0%, #c7865d 100%);
    text-shadow: none;
}

.challenge-arcade-rewards-position .reward-pill[class*="reward-rank-"]:not(.reward-rank-1):not(.reward-rank-2):not(.reward-rank-3) {
    border-color: #47609a;
    background: linear-gradient(180deg, #45629f 0%, #314773 100%);
}

.challenge-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid #5d4d2b;
    background: linear-gradient(180deg, #b8ab9e 0%, #7a7068 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.challenge-dot::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 3px;
    height: 3px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.55);
    opacity: 0.55;
}

.challenge-dot.is-on {
    border-color: #996a18;
    background: linear-gradient(180deg, #fff07f 0%, #ffcd48 40%, #ff8f1d 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.45),
        0 0 8px rgba(255, 175, 49, 0.7),
        0 0 14px rgba(255, 107, 36, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    animation: challenge-dot-arcade-pulse 1.1s steps(2, end) infinite;
}

.challenge-dot.is-off {
    border-color: #55505a;
    background: linear-gradient(180deg, #5f6273 0%, #3e4358 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    opacity: 0.78;
}

@keyframes challenge-live-scan {
    0% {
        transform: translateX(-65%);
    }
    100% {
        transform: translateX(65%);
    }
}

@keyframes coin-icon-arcade-pop {
    0%,
    100% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
    50% {
        transform: translateY(-1px) scale(1.03);
        filter: brightness(1.08);
    }
}

@keyframes coin-icon-scan {
    0% {
        opacity: 0;
        left: -45%;
    }
    18% {
        opacity: 0.7;
    }
    55% {
        opacity: 0.25;
    }
    100% {
        opacity: 0;
        left: 115%;
    }
}

@keyframes trophy-icon-arcade-bob {
    0%,
    100% {
        transform: translateY(0);
        filter: brightness(1);
    }
    50% {
        transform: translateY(-1px);
        filter: brightness(1.1);
    }
}

@keyframes trophy-icon-star {
    0%,
    65%,
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
    75% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes boss-icon-arcade-pulse {
    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.02);
        filter: brightness(1.14);
    }
}

@keyframes boss-icon-outline {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.65;
    }
    100% {
        opacity: 0;
    }
}

@keyframes challenge-dot-arcade-pulse {
    0%,
    100% {
        transform: translateY(0);
        filter: brightness(1);
    }
    50% {
        transform: translateY(-1px);
        filter: brightness(1.14);
    }
}

@keyframes timer-score-pop {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    55% {
        transform: scale(1.08);
        filter: brightness(1.25);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes timer-card-jolt {
    0% {
        box-shadow: 0 0 0 1px #a6400e, 0 0 16px rgba(255, 124, 44, 0.2);
    }
    50% {
        box-shadow: 0 0 0 1px #c95216, 0 0 20px rgba(255, 139, 63, 0.35);
    }
    100% {
        box-shadow: 0 0 0 1px #a6400e, 0 0 16px rgba(255, 124, 44, 0.2);
    }
}

@keyframes timer-score-tick {
    0% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(-1px);
    }
    60% {
        transform: translateX(1px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes timer-dots-jolt {
    0% {
        transform: translateX(0);
        filter: brightness(1);
    }
    50% {
        transform: translateX(1px);
        filter: brightness(1.22);
    }
    100% {
        transform: translateX(0);
        filter: brightness(1);
    }
}

@keyframes timer-score-delta-float {
    0% {
        opacity: 0;
        transform: translateY(3px);
    }
    15% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .challenge-arcade-item.is-timed-live::after {
        animation: none;
    }

    .challenge-arcade-icon.is-coin,
    .challenge-arcade-icon.is-coin::after,
    .challenge-arcade-icon.is-trophy,
    .challenge-arcade-icon.is-trophy::after,
    .challenge-arcade-icon.is-boss,
    .challenge-arcade-icon.is-boss::after,
    .challenge-arcade-item.is-score-drop,
    .challenge-arcade-timer-shell.is-score-ticking,
    .challenge-arcade-timer-score.is-score-changing,
    .challenge-arcade-score-delta.is-visible,
    .challenge-arcade-dots.is-score-drop {
        animation: none;
    }

    .challenge-dot.is-on {
        animation: none;
    }
}

@keyframes timer-live-pulse {
    0%,
    100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.08);
    }
}

.challenge-arcade-status {
    flex: 0 0 auto;
    text-align: right;
    font-size: 0.72rem !important;
    letter-spacing: 0.05em !important;
}

.challenge-arcade-right {
    position: relative;
    z-index: 1;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    align-self: stretch;
    padding-top: 2px;
    min-width: 0;
    gap: 8px;
}

.challenge-arcade-right .challenge-arcade-cta {
    order: 1;
    margin-top: 0;
}

.challenge-arcade-right .challenge-arcade-status {
    order: 2;
}

.challenge-upload-label {
    margin-top: 8px;
}

.challenge-upload-card {
    width: 100%;
    border: 2px solid #41527a;
    border-radius: 6px;
    padding: 10px;
    background: #101528;
    display: grid;
    gap: 8px;
}

.challenge-upload-preview {
    width: 100%;
    border-radius: 4px;
    border: 2px solid #42527c;
    display: block;
    max-height: 180px;
    object-fit: cover;
}

.challenge-upload-btn {
    width: 100%;
}

.challenge-upload-form {
    display: none;
}

.is-hidden {
    display: none !important;
}

.challenge-hidden-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.challenge-arcade-status.is-complete {
    color: #80ff6a;
    text-shadow: 0 0 10px rgba(86, 243, 83, 0.4);
}

.challenge-arcade-status.is-incomplete {
    color: #ff5e50;
    text-shadow: 0 0 8px rgba(246, 84, 68, 0.35);
}

.challenge-arcade-status.is-pending {
    color: #ffd765;
    text-shadow: 0 0 8px rgba(255, 215, 101, 0.35);
}

.challenge-arcade-status.is-rejected {
    color: #ff9f8d;
    text-shadow: 0 0 8px rgba(255, 137, 114, 0.34);
}

.challenge-arcade-status.is-note {
    color: #a5b8e8;
    text-shadow: 0 0 8px rgba(130, 163, 230, 0.26);
}

.challenge-arcade-cta {
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
}

.challenge-quiz-cta {
    margin-top: 10px;
    margin-bottom: 10px;
}

.challenge-upload-actions {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.challenge-manager-actions {
    display: flex;
    gap: 6px;
    row-gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    order: 99;
    margin-top: auto;
    align-self: flex-end;
}

.challenge-manager-actions form {
    margin: 0;
}

.challenge-manager-actions .challenge-arcade-btn {
    min-width: 74px;
    padding: 8px 10px;
}

.challenge-arcade-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 36px;
    min-width: 88px;
    padding: 8px 14px;
    border: 2px solid #1f3e1f;
    border-radius: 4px;
    color: #c9ffb5;
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 0.58rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em !important;
    text-shadow: 0 0 8px rgba(135, 255, 106, 0.45);
    text-decoration: none;
    background:
        linear-gradient(180deg, rgba(122, 255, 102, 0.16), rgba(122, 255, 102, 0)),
        repeating-linear-gradient(
            90deg,
            #1a2619 0,
            #1a2619 10px,
            #152114 10px,
            #152114 18px
        ),
        linear-gradient(180deg, #243423 0%, #162416 100%);
    box-shadow:
        0 0 0 1px #000,
        0 3px 0 #0f1a0f,
        0 0 12px rgba(95, 220, 83, 0.32);
    transition: transform 0.08s steps(2, end), filter 0.12s ease, box-shadow 0.08s steps(2, end);
}

.challenge-arcade-btn:hover {
    text-decoration: none;
    filter: brightness(1.12) saturate(1.1);
    transform: translateY(-1px);
}

.challenge-arcade-btn:active {
    transform: translateY(2px);
    box-shadow:
        0 0 0 1px #000,
        0 1px 0 #0f1a0f,
        0 0 8px rgba(95, 220, 83, 0.25);
}

.challenge-arcade-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 1px #000,
        0 3px 0 #0f1a0f,
        0 0 0 3px rgba(170, 255, 130, 0.32),
        0 0 12px rgba(95, 220, 83, 0.32);
}

.challenge-arcade-btn-remove {
    min-width: 88px;
    color: #ffe8ea;
    text-shadow: 0 0 8px rgba(255, 150, 154, 0.35);
    border-color: #4e1f27;
    background:
        linear-gradient(180deg, rgba(255, 133, 144, 0.16), rgba(255, 133, 144, 0)),
        repeating-linear-gradient(
            90deg,
            #3c171f 0,
            #3c171f 10px,
            #34131b 10px,
            #34131b 18px
        ),
        linear-gradient(180deg, #55202c 0%, #3b151f 100%);
    box-shadow:
        0 0 0 1px #000,
        0 3px 0 #220d13,
        0 0 12px rgba(255, 104, 124, 0.26);
}

.challenge-arcade-btn-remove:hover {
    filter: brightness(1.12) saturate(1.1);
}

.challenge-arcade-btn-remove:active {
    box-shadow:
        0 0 0 1px #000,
        0 1px 0 #220d13,
        0 0 8px rgba(255, 104, 124, 0.2);
}

.challenge-arcade-btn-remove:focus-visible {
    box-shadow:
        0 0 0 1px #000,
        0 3px 0 #220d13,
        0 0 0 3px rgba(255, 128, 140, 0.3),
        0 0 12px rgba(255, 104, 124, 0.26);
}

.challenge-manager-btn-edit {
    min-height: 28px;
    min-width: 64px;
    padding: 5px 10px;
    font-size: 0.5rem;
    border-color: #1e3d67;
    color: #b7ddff;
    text-shadow: 0 0 8px rgba(116, 184, 255, 0.45);
    background:
        linear-gradient(180deg, rgba(111, 178, 255, 0.16), rgba(111, 178, 255, 0)),
        repeating-linear-gradient(
            90deg,
            #19263a 0,
            #19263a 10px,
            #142033 10px,
            #142033 18px
        ),
        linear-gradient(180deg, #253a56 0%, #192a42 100%);
    box-shadow:
        0 0 0 1px #000,
        0 3px 0 #11253f,
        0 0 12px rgba(87, 153, 237, 0.24);
}

.challenge-manager-btn-edit:hover {
    filter: brightness(1.12) saturate(1.1);
}

.challenge-manager-btn-edit:active {
    box-shadow:
        0 0 0 1px #000,
        0 1px 0 #11253f,
        0 0 8px rgba(87, 153, 237, 0.2);
}

.challenge-manager-btn-edit:focus-visible {
    box-shadow:
        0 0 0 1px #000,
        0 3px 0 #11253f,
        0 0 0 3px rgba(138, 197, 255, 0.32),
        0 0 12px rgba(87, 153, 237, 0.24);
}

.challenge-manager-btn-delete {
    min-height: 28px;
    min-width: 64px;
    padding: 5px 10px;
    font-size: 0.5rem;
    border-color: #5c2b15;
    color: #ffd2bf;
    text-shadow: 0 0 8px rgba(255, 172, 132, 0.38);
    background:
        linear-gradient(180deg, rgba(255, 146, 96, 0.16), rgba(255, 146, 96, 0)),
        repeating-linear-gradient(
            90deg,
            #351d14 0,
            #351d14 10px,
            #2b1811 10px,
            #2b1811 18px
        ),
        linear-gradient(180deg, #4a2a1e 0%, #301d15 100%);
    box-shadow:
        0 0 0 1px #000,
        0 3px 0 #3f1d12,
        0 0 12px rgba(192, 91, 49, 0.2);
}

.challenge-manager-btn-delete:hover {
    filter: brightness(1.12) saturate(1.1);
}

.challenge-manager-btn-delete:active {
    box-shadow:
        0 0 0 1px #000,
        0 1px 0 #3f1d12,
        0 0 8px rgba(192, 91, 49, 0.18);
}

.challenge-manager-btn-delete:focus-visible {
    box-shadow:
        0 0 0 1px #000,
        0 3px 0 #3f1d12,
        0 0 0 3px rgba(255, 182, 145, 0.32),
        0 0 12px rgba(192, 91, 49, 0.2);
}

.challenge-manager-btn-rank {
    min-height: 28px;
    min-width: 84px;
    padding: 5px 10px;
    font-size: 0.5rem;
    border-color: #1c5a51;
    color: #b8fff0;
    text-shadow: 0 0 8px rgba(101, 255, 219, 0.4);
    background:
        linear-gradient(180deg, rgba(92, 240, 204, 0.16), rgba(92, 240, 204, 0)),
        repeating-linear-gradient(
            90deg,
            #173833 0,
            #173833 10px,
            #132f2b 10px,
            #132f2b 18px
        ),
        linear-gradient(180deg, #1f4d47 0%, #163834 100%);
    box-shadow:
        0 0 0 1px #000,
        0 3px 0 #12332f,
        0 0 12px rgba(75, 207, 180, 0.24);
}

.challenge-manager-btn-rank:hover {
    filter: brightness(1.12) saturate(1.1);
}

.challenge-manager-btn-rank:active {
    box-shadow:
        0 0 0 1px #000,
        0 1px 0 #12332f,
        0 0 8px rgba(75, 207, 180, 0.2);
}

.challenge-manager-btn-rank:focus-visible {
    box-shadow:
        0 0 0 1px #000,
        0 3px 0 #12332f,
        0 0 0 3px rgba(131, 255, 228, 0.3),
        0 0 12px rgba(75, 207, 180, 0.24);
}

.challenge-arcade-btn:disabled,
.challenge-arcade-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.7;
    color: #b7c2db;
    text-shadow: none;
    border-color: #3a4968;
    background:
        linear-gradient(180deg, rgba(166, 188, 255, 0.08), rgba(166, 188, 255, 0)),
        repeating-linear-gradient(
            90deg,
            #20283d 0,
            #20283d 10px,
            #1b2337 10px,
            #1b2337 18px
        ),
        linear-gradient(180deg, #2a3248 0%, #1e273c 100%);
    box-shadow:
        0 0 0 1px #000,
        0 2px 0 #131a29;
    transform: none;
}

.btn-arcade-mini {
    min-height: 30px;
    padding: 6px 8px;
    font-size: 0.54rem;
    letter-spacing: 0.04em;
}

.challenge-arcade-status-sub {
    font-size: 0.56rem !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
}

.sr-only-upload-form {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

@media (max-width: 699px) {
    .challenge-arcade-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .challenge-arcade-item-left {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }

    .challenge-arcade-points {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .challenge-arcade-status {
        text-align: left;
    }

    .challenge-arcade-right {
        width: 100%;
        margin-left: 0;
        align-items: stretch;
        justify-content: flex-start;
        align-self: auto;
        min-width: 0;
    }

    .challenge-upload-actions {
        justify-items: stretch;
    }

    .challenge-manager-actions {
        width: 100%;
        align-self: auto;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

    .challenge-manager-actions form {
        flex: 1 1 100%;
    }

    .challenge-manager-actions .challenge-arcade-btn {
        width: 100%;
    }
}

@media (min-width: 960px) {
    .content > .challenge-arcade {
        grid-column: 1 / -1;
    }

    .challenge-arcade-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(2, 8, 20, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.modal-panel {
    width: min(640px, 100%);
    max-height: 90vh;
    overflow: auto;
    border-radius: var(--radius-lg);
    border: 1px solid #305186;
    background: #0c1834;
    box-shadow: 0 20px 44px rgba(2, 9, 24, 0.72);
    padding: 14px;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.modal-head h2 {
    margin: 0;
}

.gallery-card img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.gallery-card-body {
    background: #101f41;
}

.by-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 20px;
    border-radius: 999px;
    background: #1d335f;
    color: #9ec7ff;
    border: 1px solid #385e99;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.empty-copy {
    padding: 12px;
    border: 1px dashed #37598d;
    border-radius: 12px;
    background: #0d1936;
}

.single-photo {
    width: 100%;
    border-radius: 14px;
    border: 1px solid #28426f;
    display: block;
    object-fit: contain;
    background: #0a1630;
}

.card-body {
    padding: 10px;
    display: grid;
    gap: 6px;
}

.user-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.avatar-dot,
.badge {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 auto;
}

.meta-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.83rem;
    color: #91a5cf;
}

.pager {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
}

.pager a,
.pager-disabled {
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.pager a {
    color: #eff4ff;
    background: #274d93;
}

.pager-disabled {
    color: #8599c5;
    background: #172949;
}

.ranking-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.ranking-list li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    border: 1px solid #253d68;
    background: #0f1d3c;
    padding: 10px;
    font-size: 0.92rem;
}

.ranking-list small {
    display: block;
    color: #8ea1c8;
    font-size: 0.75rem;
}

.rank-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    text-align: center;
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0 7px currentColor;
    color: var(--rank-color);
}

.has-rank li {
    --rank-color: #aeb8d4;
    color: var(--rank-color);
}

.has-rank li[data-rank="1"] { --rank-color: #ff2a2a; }
.has-rank li[data-rank="2"] { --rank-color: #e59a17; }
.has-rank li[data-rank="3"] { --rank-color: #c6db2b; }
.has-rank li[data-rank="4"] { --rank-color: #36d84f; }
.has-rank li[data-rank="5"] { --rank-color: #1ab8e8; }

.has-rank .rank-chip {
    color: var(--rank-color) !important;
}

.has-rank li small,
.has-rank li strong,
.has-rank li .rank-chip,
.has-rank li .leaderboard-rank-label,
.has-rank li .leaderboard-rank-label small,
.has-rank li .dashboard-rank-label,
.has-rank li .dashboard-rank-label small,
.has-rank li .dashboard-rank-points,
.has-rank li * {
    color: var(--rank-color);
}


.event-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.event-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #27406e;
    border-radius: 12px;
    padding: 10px;
    font-size: 0.89rem;
    background: #101f3f;
}

.user-admin-list {
    gap: 10px;
}

.team-admin-list {
    gap: 10px;
}

.team-admin-panel {
    grid-column: 1 / -1;
}

/* Keep async management wrappers from collapsing into a single grid column. */
[data-users-management-region],
[data-teams-management-region],
[data-rooms-management-region],
[data-gallery-categories-management-region] {
    grid-column: 1 / -1;
}

.user-admin-card {
    border: 1px solid #27406e;
    border-radius: 12px;
    background: #101f3f;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.team-admin-card {
    border: 1px solid #27406e;
    border-radius: 12px;
    background: #101f3f;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.team-admin-card .small-copy {
    overflow-wrap: anywhere;
}

.team-admin-meta {
    margin-top: 4px;
}

.team-swatch {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    display: inline-block;
    border: 2px solid #0b1226;
    box-shadow:
        0 0 0 1px #4d5f8b,
        0 0 8px rgba(142, 186, 255, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    flex: 0 0 auto;
    image-rendering: pixelated;
}

.user-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.team-admin-card .user-actions {
    width: auto;
    justify-content: flex-end;
    align-self: center;
}

.team-admin-card .user-actions .btn,
.team-admin-card .user-actions form {
    flex: 0 0 auto;
}

.team-admin-card .user-actions form .btn {
    width: auto;
}

.team-admin-card .user-actions .btn {
    min-height: 36px;
    padding: 8px 10px;
}

.user-admin-card-compact {
    position: relative;
    align-items: start;
    gap: 8px;
    padding: 10px;
}

.team-admin-card.user-admin-card-compact {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

.team-admin-card-compact {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    padding: 10px;
}

.team-card-content {
    min-width: 0;
    padding-right: 6px;
}

.team-card-name {
    max-width: calc(100% - 88px);
}

.team-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    font-size: 9px !important;
    line-height: 1.1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #c4fff5;
    border: 2px solid #1c5a51;
    background:
        linear-gradient(180deg, rgba(92, 240, 204, 0.2), rgba(92, 240, 204, 0)),
        repeating-linear-gradient(
            90deg,
            #173833 0,
            #173833 8px,
            #132f2b 8px,
            #132f2b 14px
        ),
        linear-gradient(180deg, #1f4d47 0%, #163834 100%);
    text-shadow: 0 0 8px rgba(101, 255, 219, 0.45);
    box-shadow:
        0 0 0 1px #000,
        0 2px 0 #12332f,
        0 0 10px rgba(75, 207, 180, 0.3);
}

.team-card-detail {
    margin-top: 3px !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
}

.user-admin-name {
    display: block;
    max-width: calc(100% - 88px);
    white-space: nowrap;
}

.user-admin-content {
    min-width: 0;
    padding-right: 6px;
}

.user-admin-detail {
    margin: 1px 0 0 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.user-admin-detail-inline {
    white-space: nowrap;
}

.user-role-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    font-size: 9px !important;
    letter-spacing: 0.03em;
}

.user-actions-compact {
    gap: 6px;
    width: 100%;
    grid-column: 1;
    justify-content: flex-end;
    justify-self: end;
    align-self: end;
    margin-top: 6px;
}

.team-admin-card .user-actions.user-actions-compact {
    align-self: end;
    justify-content: flex-end;
}

.user-actions-compact form {
    margin: 0;
}

.team-admin-card .user-actions-compact .btn-user-secondary {
    min-height: 28px;
    padding: 5px 8px;
    font-size: 10px !important;
}

.team-admin-card .team-actions-compact .btn-user-secondary {
    min-height: 28px;
    padding: 5px 8px;
    font-size: 10px !important;
}

.team-admin-card .team-actions-compact {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}

.team-admin-card .team-actions-compact form {
    display: flex;
    margin: 0;
}

.team-admin-card .team-actions-compact .team-admin-action-btn {
    min-width: 86px !important;
    min-height: 28px !important;
    padding: 5px 10px !important;
    font-size: 10px !important;
    white-space: nowrap;
}

.team-admin-modal .team-admin-modal-btn {
    min-width: 112px !important;
    min-height: 30px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

.team-admin-modal .event-list li form {
    display: flex;
    margin: 0;
}

.team-admin-modal .team-view-actions {
    flex-wrap: nowrap;
}

.user-show-panel {
    position: relative;
}

.user-show-panel .row-line form {
    margin: 0;
}

.user-show-actions {
    margin-top: 12px;
    justify-content: flex-end;
    align-items: flex-end;
}

@media (max-width: 860px) {
    .team-admin-card.user-admin-card-compact {
        grid-template-columns: minmax(0, 1fr);
    }

    .team-admin-card .user-actions.user-actions-compact {
        justify-self: end;
        margin-top: 6px;
    }
}

.assign-team-modal-head {
    align-items: center;
}

.assign-team-modal-title {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 2px solid #1c5a51;
    color: #b8fff0;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(101, 255, 219, 0.4);
    background:
        linear-gradient(180deg, rgba(92, 240, 204, 0.16), rgba(92, 240, 204, 0)),
        repeating-linear-gradient(
            90deg,
            #173833 0,
            #173833 10px,
            #132f2b 10px,
            #132f2b 18px
        ),
        linear-gradient(180deg, #1f4d47 0%, #163834 100%);
    box-shadow:
        0 0 0 1px #000,
        0 3px 0 #12332f,
        0 0 12px rgba(75, 207, 180, 0.24);
}

.assign-team-modal-subtitle {
    margin-top: -2px;
    margin-bottom: 6px;
}

.team-view-actions {
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.team-view-actions form {
    margin: 0;
}

.role-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #e8f4ff;
    background: #284d93;
    border: 1px solid #3a63a6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.role-pill-soft {
    background: #1a2a4d;
    border-color: #2b4578;
    color: #a7bcde;
}

.outreach-text {
    color: hsl(calc(var(--outreach-hue, 160) * 1deg) 92% 76%);
}

.btn-danger {
    background: #5f2440;
    border-color: #8b3a60;
    color: #fdf2f6;
}

.btn-danger:hover {
    background: #733052;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.content > .panel + .panel {
    margin-top: 2px;
}

.stat-grid article {
    border: 1px solid #27406d;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    background: #0f1d3d;
}

.stat-grid small {
    display: block;
    color: #8ea1cb;
}

.stat-grid strong {
    display: block;
    margin-top: 4px;
    font-size: 1rem;
    color: #f3f7ff;
}

.arena-stat-grid {
    margin-top: 14px;
}

@media (min-width: 700px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .admin-row {
        grid-template-columns: 2fr 130px auto auto;
    }

    .ranking-row {
        grid-template-columns: 130px 130px auto;
    }

    .gallery-masonry {
        column-count: 2;
        column-gap: 16px;
    }

    .mobile-menu-panel {
        left: 22px;
        right: 22px;
    }

    .team-admin-card .user-actions {
        width: auto;
        justify-content: flex-end;
    }

    .team-admin-card .user-actions .btn,
    .team-admin-card .user-actions form {
        flex: 0 0 auto;
    }

    .team-admin-card .user-actions form .btn {
        width: auto;
    }

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

    .game-list-actions {
        flex-direction: column;
    }

}

@media (min-width: 960px) {
    .mobile-shell {
        padding-inline: 20px;
    }

    .mobile-menu-panel {
        left: max(20px, calc((100vw - 1120px) / 2 + 20px));
        right: max(20px, calc((100vw - 1120px) / 2 + 20px));
    }

    .content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .hero-panel,
    .gallery-showcase,
    .games-list-panel {
        grid-column: 1 / -1;
    }

    .team-admin-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .login-shell .content {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 20px;
    }

    .login-shell .login-hero {
        grid-column: auto;
    }

    .login-shell .login-card {
        grid-column: auto;
    }

    .login-shell .login-signup {
        grid-column: auto;
    }

    .login-shell .login-signup-link {
        width: auto;
        max-width: none;
    }

    .login-shell .login-signup-row {
        grid-column: 2;
        justify-content: flex-start;
    }

    .popup-admin-layout {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr);
        align-items: start;
        gap: 16px;
    }

    .popup-admin-left-column {
        gap: 12px;
    }
}

@media (max-width: 699px) {
    .mobile-score-pill {
        display: inline-flex;
    }

    .stat-grid {
        grid-template-columns: 1fr;
    }

    .login-signup-row {
        justify-content: center;
    }

    .login-signup-link {
        width: auto;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Retro Arcade Theme Overrides */
:root {
    --bg-base: #07070b;
    --bg-soft: #12131a;
    --surface: #141722;
    --surface-strong: #1c2030;
    --text-main: #f8fbff;
    --text-muted: #d5deef;
    --line: #3c4666;
    --line-strong: #67d7ff;
    --brand: #67d7ff;
    --brand-bright: #ffcd4a;
    --accent: #ff5f87;
    --accent-soft: #2a1c3f;
    --success-soft: #15342a;
    --danger-soft: #3b1f2a;
    --danger-line: #ff6f89;
    --shadow-main: 0 0 0 2px #000, 6px 6px 0 rgba(0, 0, 0, 0.45);
    --shadow-soft: 0 0 0 2px #000, 4px 4px 0 rgba(0, 0, 0, 0.4);
    --radius-lg: 6px;
    --radius-md: 4px;
}

body {
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.65;
    color: var(--text-main);
    background:
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.04) 0,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px,
            transparent 4px
        ),
        radial-gradient(circle at 12% 8%, rgba(103, 215, 255, 0.2), transparent 36%),
        radial-gradient(circle at 88% 0%, rgba(255, 95, 135, 0.18), transparent 32%),
        radial-gradient(circle at 50% 130%, rgba(255, 205, 74, 0.13), transparent 45%),
        linear-gradient(180deg, #06070d 0%, #090a12 58%, #0f0720 100%);
}

.arena-bg {
    z-index: -2;
}

.arena-bg::before,
.arena-bg::after {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
}

.arena-bg::before {
    background:
        radial-gradient(circle at 20% 24%, rgba(53, 237, 255, 0.12), transparent 32%),
        radial-gradient(circle at 76% 18%, rgba(255, 79, 167, 0.12), transparent 36%);
    animation: arcadeGlowFloat 11s ease-in-out infinite alternate;
}

.arena-bg::after {
    background:
        linear-gradient(
            115deg,
            transparent 28%,
            rgba(99, 229, 255, 0.11) 46%,
            rgba(255, 119, 181, 0.08) 56%,
            transparent 74%
        );
    animation: arcadeSweep 14s linear infinite;
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(97, 219, 255, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(97, 219, 255, 0.2) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.55;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 86%);
    animation: arcadeGridDrift 16s linear infinite;
}

.grid-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06) 0,
        rgba(255, 255, 255, 0.06) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.35;
}

.energy {
    border-radius: 999px;
    border: 2px solid rgba(110, 180, 255, 0.24);
    filter: blur(16px);
    opacity: 0.62;
    animation: arcadeOrbPulse 7s ease-in-out infinite;
}

.energy-one {
    background: rgba(255, 71, 137, 0.5);
    animation-delay: 0s;
}

.energy-two {
    background: rgba(63, 196, 255, 0.44);
    animation-delay: 1.2s;
}

.energy-three {
    background: rgba(255, 205, 74, 0.3);
    animation-delay: 2.1s;
}

@keyframes arcadeGridDrift {
    from {
        background-position: 0 0, 0 0;
    }
    to {
        background-position: 0 32px, 32px 0;
    }
}

@keyframes arcadeOrbPulse {
    0%,
    100% {
        transform: scale(1) translateY(0);
        opacity: 0.58;
    }
    50% {
        transform: scale(1.07) translateY(-8px);
        opacity: 0.72;
    }
}

@keyframes arcadeGlowFloat {
    0% {
        transform: translate3d(-1%, 0, 0);
    }
    100% {
        transform: translate3d(1.5%, -1%, 0);
    }
}

@keyframes arcadeSweep {
    0% {
        transform: translate3d(-18%, 0, 0);
        opacity: 0.35;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: translate3d(18%, 0, 0);
        opacity: 0.35;
    }
}

html {
    font-size: 14px;
}

.arena-topbar {
    background: #0d1019;
    border: 2px solid #4a5679;
    box-shadow: var(--shadow-main);
    backdrop-filter: none;
}

.panel,
.gallery-card,
.submission-card,
.team-admin-card,
.user-admin-card,
.popup-admin-card,
.popup-preview-card,
.ranking-list li,
.event-list li,
.admin-row,
.game-list-item,
.masonry-item,
.dashboard-tile,
.upload-modal-frame,
.gallery-lightbox-frame,
.modal-panel {
    border-radius: 6px;
    border-width: 2px;
    border-color: #46557d;
    background: linear-gradient(180deg, #161a28 0%, #101320 100%);
    box-shadow: var(--shadow-main);
}

.panel h1,
.panel h2,
h3,
.btn,
.topbar-link,
.nav-link-label,
label,
.eyebrow,
.upload-rule,
.role-pill,
.role-pill-soft,
.pager a,
.pager-disabled {
    font-family: "Press Start 2P", "Courier New", monospace;
    letter-spacing: 0.06em;
}

.panel h1 {
    font-size: clamp(1rem, 2.1vw, 1.45rem);
    line-height: 1.35;
}

.panel h2 {
    font-size: clamp(0.82rem, 1.7vw, 1rem);
    line-height: 1.35;
    margin-bottom: 10px;
}

.panel p,
.small-copy,
.meta-line,
.masonry-meta,
.ranking-list small,
.event-list li,
.game-list-meta,
.popup-admin-meta,
.dashboard-meta,
.gallery-lightbox-meta {
    font-size: 0.68rem;
    line-height: 1.55;
    color: var(--text-muted);
}

input,
textarea,
select {
    font-size: 0.72rem;
    line-height: 1.4;
    border: 2px solid #46557d;
    border-radius: 4px;
    padding: 10px 12px;
    background: #101426;
    color: #ffffff;
}

/* Arcade treatment for single-select controls across the app. */
select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.35rem;
    border-color: #5f6fa5;
    background-image:
        linear-gradient(180deg, rgba(22, 34, 66, 0.95) 0%, rgba(12, 19, 38, 0.95) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23ffd86a' d='M2 4h10v2H2zM3 6h8v2H3zM4 8h6v2H4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 14px 14px;
    background-position: center, right 12px center;
    box-shadow: inset 0 1px 0 rgba(175, 205, 255, 0.18), 0 0 0 1px rgba(96, 124, 194, 0.2);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

select:not([multiple]):not([size]):hover {
    border-color: #7f96df;
    box-shadow: inset 0 1px 0 rgba(205, 226, 255, 0.24), 0 0 0 1px rgba(117, 145, 218, 0.3);
}

select:not([multiple]):not([size]):focus-visible {
    border-color: #74d4ff;
    box-shadow:
        0 0 0 3px rgba(71, 175, 255, 0.32),
        inset 0 1px 0 rgba(220, 243, 255, 0.28);
    filter: brightness(1.04);
}

textarea {
    min-height: 120px;
}

label {
    font-size: 0.68rem;
    color: #ffcd4a;
    margin-top: 4px;
}

.btn {
    min-height: 44px;
    border-radius: 4px;
    border: 2px solid #000;
    padding: 12px 16px;
    font-size: 0.66rem;
    line-height: 1.4;
    box-shadow: 0 0 0 2px #3a4667, 4px 4px 0 rgba(0, 0, 0, 0.45);
    transition: filter 0.12s ease;
}

.btn-primary {
    color: #101218;
    background: linear-gradient(180deg, #ffcf53 0%, #ff9f2f 100%);
}

.btn-soft {
    color: #f0f7ff;
    background: linear-gradient(180deg, #2b3656 0%, #1d2742 100%);
}

.btn-danger {
    color: #fff6f9;
    border-color: #30131d;
    background: linear-gradient(180deg, #b93e63 0%, #8d2b4a 100%);
}

.btn:hover {
    filter: brightness(1.06);
}

.topbar-link,
.topbar-icon-link,
.nav-toggle,
.mobile-menu-panel .nav-link,
.mobile-menu-logout {
    border-radius: 4px;
    border-width: 2px;
}

.topbar-points-pill,
.mobile-score-pill,
.reward-pill,
.game-badge,
.meta-icon,
.upload-rule,
.role-pill,
.role-pill-soft,
.pager a,
.pager-disabled {
    border-radius: 4px;
}

.empty-copy {
    border-width: 2px;
    border-style: dashed;
    background: #111628;
}

.login-fun-tags span {
    animation: none;
}

.gallery-lightbox-close,
.gallery-lightbox-nav,
.upload-modal-close {
    border-radius: 4px;
    border: 2px solid #4a5679;
    background: #131a31;
}

.mobile-menu-panel .nav-link,
.mobile-menu-logout {
    min-height: 44px;
}

.checkbox-line {
    font-size: 0.72rem;
}

.checkbox-line input {
    width: 20px;
    height: 20px;
}

.topbar-points-pill,
.mobile-score-pill {
    font-size: 0.64rem;
}

.brand-logo {
    width: 120px;
    filter: drop-shadow(0 0 0 transparent);
}

@media (max-width: 699px) {
    html {
        font-size: 13px;
    }

    body {
        font-size: 11px;
    }

    .panel h1 {
        font-size: clamp(0.9rem, 4.2vw, 1.1rem);
    }

    .panel h2 {
        font-size: clamp(0.74rem, 3.4vw, 0.88rem);
    }

    .panel p,
    .small-copy,
    .meta-line,
    .masonry-meta,
    .ranking-list small,
    .event-list li,
    .game-list-meta,
    .popup-admin-meta,
    .dashboard-meta,
    .gallery-lightbox-meta,
    input,
    textarea,
    select,
    .checkbox-line {
        font-size: 0.64rem;
    }

    .btn,
    .topbar-points-pill,
    .mobile-score-pill {
        font-size: 0.6rem;
    }
}

/* Global typography size normalization */
html,
body {
    font-size: 12px !important;
}

h1,
.panel h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
}

h2,
h3,
.panel h2,
.panel h3,
p,
small,
label,
li,
a,
button,
input,
textarea,
select,
.small-copy,
.meta-line,
.masonry-meta,
.ranking-list small,
.event-list li,
.game-list-meta,
.popup-admin-meta,
.dashboard-meta,
.gallery-lightbox-meta,
.checkbox-line,
.topbar-link,
.topbar-points-pill,
.mobile-score-pill,
.nav-link-label,
.btn,
.mini-link {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* Global app background image override */
body {
    background:
        linear-gradient(180deg, rgba(4, 7, 16, 0.72), rgba(4, 7, 16, 0.72)),
        url("https://breadoflifeeu.org/wp-content/uploads/2026/04/connectbread-bg-scaled.webp") center / cover
            no-repeat fixed !important;
    background-color: #050914 !important;
}

/* Remove circular background effects */
.arena-bg::before,
.arena-bg::after,
.energy,
.hero-panel::after,
.login-hero::after {
    display: none !important;
}

/* Arcade Global Menu Refresh */
:root {
    --arcade-ink: #101014;
    --arcade-wood-light: #d6ab73;
    --arcade-wood-mid: #c4925e;
    --arcade-wood-dark: #8f5b3f;
    --arcade-wood-shadow: #5d3326;
    --arcade-gold: #f1bc2f;
}

.nav-toggle {
    border: 2px solid var(--arcade-ink);
    border-radius: 4px;
    background: linear-gradient(180deg, #2b3445 0%, #1f2633 100%);
    box-shadow: 0 4px 0 #141a25;
    transition: transform 0.08s steps(2, end), filter 0.14s ease, box-shadow 0.12s ease;
}

.nav-toggle span {
    background: #dde4f0;
    height: 3px;
    transition: background-color 0.12s ease;
}

.nav-toggle:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 0 #141a25, 0 0 10px rgba(111, 212, 255, 0.3);
}

.nav-toggle:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #141a25, 0 0 8px rgba(111, 212, 255, 0.24);
}

body.nav-open .nav-toggle {
    border-color: var(--arcade-ink);
    background: linear-gradient(180deg, #2b3445 0%, #1f2633 100%);
    box-shadow: 0 4px 0 #141a25;
}

body.nav-open .nav-toggle span {
    background: #dde4f0;
}

.mobile-menu-backdrop {
    background: rgba(10, 14, 24, 0.58);
}

.mobile-score-pill {
    border: 2px solid var(--arcade-ink);
    border-radius: 4px;
    color: #f8f1dc;
    background: linear-gradient(180deg, #25476d 0%, #15283e 100%);
    box-shadow: 0 3px 0 #0c1523;
}

.mobile-menu-panel .nav-link,
.mobile-menu-logout {
    gap: 10px;
    min-height: 48px;
    border: 2px solid var(--arcade-ink);
    border-radius: 4px;
    padding: 12px 14px;
    text-transform: uppercase;
    color: #dde4f0;
    background: linear-gradient(180deg, #2b3445 0%, #1f2633 100%);
    box-shadow: 0 4px 0 var(--arcade-wood-shadow);
    text-shadow: none;
    transition: transform 0.08s steps(2, end), filter 0.14s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.mobile-menu-panel .nav-link:hover,
.mobile-menu-logout:hover {
    color: #dde4f0;
    background: linear-gradient(180deg, #2b3445 0%, #1f2633 100%);
    border-color: var(--arcade-ink);
    box-shadow: 0 4px 0 var(--arcade-wood-shadow), 0 0 10px rgba(111, 212, 255, 0.28);
    text-decoration: none;
}

.mobile-menu-panel .nav-link:active,
.mobile-menu-logout:active {
    color: #dde4f0;
    background: linear-gradient(180deg, #2b3445 0%, #1f2633 100%);
    border-color: var(--arcade-ink);
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--arcade-wood-shadow), 0 0 8px rgba(111, 212, 255, 0.2);
}

.mobile-menu-panel .nav-link.active {
    border-color: var(--arcade-ink);
    color: #dde4f0;
    background: linear-gradient(180deg, #2b3445 0%, #1f2633 100%);
    filter: none;
}

.mobile-menu-panel .nav-link,
.mobile-menu-logout {
    justify-content: center;
    gap: 0;
}

.mobile-menu-panel .nav-link .nav-link-icon,
.mobile-menu-logout .nav-link-icon {
    display: none;
}

.profile-security-actions {
    margin-top: 12px;
}

.profile-team-join-form {
    margin-top: 10px;
}

.profile-team-join-select {
    min-height: 52px;
    font-size: 14px !important;
    line-height: 1.35 !important;
    padding: 12px 14px;
    border-width: 2px;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.profile-team-name {
    --team-color: #4cf2ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border: 2px solid var(--team-color);
    border-radius: 4px;
    color: #f6faff;
    background: #131d34;
    text-shadow: 0 0 6px var(--team-color);
    box-shadow: 0 0 0 1px #000, 0 0 10px rgba(76, 242, 255, 0.2);
}

.panel .profile-team-title {
    font-size: clamp(1.35rem, 3vw, 2rem) !important;
    line-height: 1.15 !important;
}

.profile-team-name--muted {
    border-color: #3b4c70;
    color: #d6e1f7;
    background: #131d34;
    text-shadow: none;
}

.profile-team-description {
    font-size: 8px !important;
    line-height: 1.25 !important;
    margin-top: 4px !important;
    margin-bottom: 6px !important;
}

.profile-team-members-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.profile-team-members-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    border: 2px solid #3f4f73;
    border-radius: 4px;
    background: linear-gradient(180deg, #141d33 0%, #0f1628 100%);
}

.profile-team-member-leader {
    border-color: #1c5a51 !important;
    background:
        linear-gradient(180deg, rgba(92, 240, 204, 0.16), rgba(92, 240, 204, 0)),
        linear-gradient(180deg, #173833 0%, #132f2b 100%);
    box-shadow: 0 0 0 1px #000, 0 0 10px rgba(75, 207, 180, 0.25);
}

.profile-team-member-leader-tag {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 2px 6px;
    border: 2px solid #1c5a51;
    border-radius: 4px;
    background: linear-gradient(180deg, #1f4d47 0%, #163834 100%);
    color: #b8fff0;
    font-size: 8px !important;
    line-height: 1.1 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-team-leader-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.profile-team-leader-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 2px solid #4cf2ff;
    border-radius: 4px;
    background: linear-gradient(180deg, #16213d 0%, #0d152b 100%);
    color: #f6faff;
    text-shadow: 0 0 6px rgba(76, 242, 255, 0.7);
    box-shadow: 0 0 0 1px #000, 0 0 12px rgba(76, 242, 255, 0.28);
}

.profile-team-leader-pill-soft {
    border-color: #6a7ea8;
    text-shadow: 0 0 4px rgba(106, 126, 168, 0.45);
    box-shadow: 0 0 0 1px #000, 0 0 10px rgba(106, 126, 168, 0.2);
}

.profile-password-trigger {
    min-height: 48px;
    border: 2px solid #070a13;
    background:
        linear-gradient(180deg, rgba(255, 232, 146, 0.32) 0%, rgba(255, 232, 146, 0) 46%),
        linear-gradient(180deg, #ffc95d 0%, #f8a635 58%, #e07f22 100%);
    color: #151008;
    box-shadow: 0 0 0 2px #000, 0 5px 0 #5e2d17, 0 12px 20px rgba(11, 8, 4, 0.35);
    text-shadow: 1px 1px 0 rgba(255, 237, 190, 0.45);
}

.profile-password-trigger:hover {
    filter: brightness(1.05) saturate(1.06);
}

.profile-password-trigger:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 2px #000, 0 3px 0 #5e2d17, 0 8px 14px rgba(11, 8, 4, 0.28);
}

.profile-password-modal {
    width: min(520px, 100%);
}

.profile-password-modal .modal-head {
    margin-bottom: 10px;
}

.profile-password-submit {
    margin-top: 4px;
}

/* Global header: current team HUD */
.arena-topbar {
    position: sticky;
    isolation: isolate;
    overflow: hidden;
    border: 2px solid #4d5f88;
    background:
        radial-gradient(circle at 12% 10%, rgba(111, 222, 255, 0.18), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(167, 110, 255, 0.12), transparent 35%),
        linear-gradient(180deg, rgba(20, 27, 46, 0.97) 0%, rgba(12, 18, 33, 0.98) 100%);
    box-shadow: 0 0 0 2px #070b16, 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(133, 182, 255, 0.12);
}

.arena-topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0%, rgba(126, 226, 255, 0.18) 50%, transparent 100%);
    transform: translate3d(-120%, 0, 0);
    will-change: transform, opacity;
    animation: topbarArcadeSweep 11s linear infinite;
    opacity: 0.42;
    z-index: 0;
}

.arena-topbar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05) 0,
        rgba(255, 255, 255, 0.05) 1px,
        transparent 1px,
        transparent 4px
    );
    opacity: 0.26;
    z-index: 0;
}

.arena-topbar > * {
    position: relative;
    z-index: 1;
}

.brand {
    padding: 4px 8px;
    border: 2px solid #091020;
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(25, 39, 67, 0.97) 0%, rgba(13, 22, 40, 0.98) 100%);
    box-shadow:
        0 3px 0 #0a1427,
        0 0 0 1px rgba(121, 177, 255, 0.34),
        inset 0 0 0 1px rgba(124, 214, 255, 0.12);
}

.brand-logo {
    filter: contrast(1.2) saturate(1.12) brightness(1.14) drop-shadow(0 0 7px rgba(118, 214, 255, 0.32));
}

.brand:hover .brand-logo {
    filter: contrast(1.24) saturate(1.16) brightness(1.2) drop-shadow(0 0 10px rgba(142, 229, 255, 0.52));
}

.topbar-team-hud {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 360px;
    min-width: 0;
    width: 100%;
}

.topbar-center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar-left,
.topbar-actions {
    flex: 1 1 0;
}

.topbar-actions {
    justify-content: flex-end;
}

.topbar-icon-link {
    width: 52px;
    height: 52px;
    border: 2px solid #090d17;
    border-radius: 4px;
    background:
        linear-gradient(180deg, #355489 0%, #1f3357 52%, #152644 100%);
    box-shadow: 0 4px 0 #0b1424, 0 0 0 2px rgba(112, 175, 255, 0.18);
    color: #e9f4ff;
    transition: transform 0.08s steps(2, end), filter 0.14s ease, box-shadow 0.12s ease;
}

.topbar-link {
    border: 2px solid #0a0f1a;
    border-radius: 4px;
    color: #eef7ff;
    background: linear-gradient(180deg, #36588f 0%, #1f3359 100%);
    box-shadow: 0 4px 0 #0b1424, 0 0 0 2px rgba(112, 175, 255, 0.18);
    transition: transform 0.08s steps(2, end), filter 0.14s ease, box-shadow 0.12s ease;
}

.topbar-link:hover {
    color: #f8fdff;
    filter: brightness(1.08) saturate(1.05);
    box-shadow: 0 4px 0 #0b1424, 0 0 0 2px rgba(112, 175, 255, 0.32), 0 0 12px rgba(79, 207, 255, 0.35);
}

.topbar-link:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #0b1424, 0 0 0 2px rgba(112, 175, 255, 0.24);
}

.topbar-link.active {
    color: #fffce8;
    background: linear-gradient(180deg, #5875ae 0%, #314f7d 54%, #1c3158 100%);
    box-shadow: 0 4px 0 #0b1424, 0 0 0 2px rgba(251, 202, 87, 0.42), 0 0 14px rgba(251, 202, 87, 0.26);
}

.topbar-icon-link svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    filter: drop-shadow(0 0 5px rgba(118, 214, 255, 0.55));
}

.topbar-icon-link:hover {
    color: #f8fdff;
    filter: brightness(1.08) saturate(1.05);
    box-shadow: 0 4px 0 #0b1424, 0 0 0 2px rgba(112, 175, 255, 0.32), 0 0 12px rgba(79, 207, 255, 0.35);
    text-decoration: none;
}

.topbar-icon-link:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #0b1424, 0 0 0 2px rgba(112, 175, 255, 0.24);
}

.topbar-icon-link:focus-visible {
    outline: none;
    box-shadow: 0 4px 0 #0b1424, 0 0 0 3px rgba(255, 206, 94, 0.45), 0 0 0 5px rgba(11, 17, 32, 0.95);
}

.topbar-icon-link.active {
    color: #fffce8;
    background: linear-gradient(180deg, #5875ae 0%, #314f7d 54%, #1c3158 100%);
    box-shadow: 0 4px 0 #0b1424, 0 0 0 2px rgba(251, 202, 87, 0.42), 0 0 14px rgba(251, 202, 87, 0.26);
}

.topbar-team-points-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 2px solid #0d111c;
    border-radius: 4px;
    padding: 6px 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 3px 0 #0b101a;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.topbar-team-points-pill {
    border-color: #0a1433;
    background:
        linear-gradient(180deg, rgba(7, 26, 74, 0.95) 0%, rgba(3, 10, 32, 0.96) 100%),
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px,
            transparent 3px
        );
    box-shadow: 0 0 0 2px #000, 0 0 12px rgba(54, 196, 255, 0.25), inset 0 0 0 1px rgba(96, 172, 255, 0.35);
}

.arcade-scoreboard {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 170px;
    max-width: 100%;
    padding: 7px 10px 8px;
    overflow: hidden;
}

.arcade-scoreboard-label {
    display: block;
    color: #4cf2ff;
    font-size: 11px !important;
    letter-spacing: 0.1em;
    line-height: 1.1 !important;
    text-shadow: 0 0 8px rgba(76, 242, 255, 0.65);
}

.arcade-scoreboard-value {
    display: block;
    color: #f8fbff;
    font-size: 24px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
    text-overflow: clip;
}

@keyframes topbarArcadeSweep {
    0% {
        transform: translate3d(-120%, 0, 0);
        opacity: 0;
    }
    20% {
        opacity: 0.42;
    }
    80% {
        opacity: 0.42;
    }
    100% {
        transform: translate3d(120%, 0, 0);
        opacity: 0;
    }
}

.mobile-menu-score {
    gap: 8px;
    flex-wrap: wrap;
}

.mobile-team-points-pill {
    border-color: #0a1433;
    background:
        linear-gradient(180deg, rgba(7, 26, 74, 0.95) 0%, rgba(3, 10, 32, 0.96) 100%),
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px,
            transparent 3px
        );
    box-shadow: 0 0 0 2px #000, 0 0 10px rgba(54, 196, 255, 0.22), inset 0 0 0 1px rgba(96, 172, 255, 0.35);
}

@media (max-width: 840px) {
    .topbar-team-hud {
        max-width: 190px;
    }

    .arcade-scoreboard {
        min-width: 128px;
        padding: 5px 8px 6px;
    }

    .arcade-scoreboard-label {
        font-size: 9px !important;
    }

    .arcade-scoreboard-value {
        font-size: 16px !important;
    }
}

@media (max-width: 699px) {
    .arena-topbar {
        flex-wrap: nowrap;
        gap: 6px;
        padding: 6px 8px;
    }

    .brand {
        padding: 3px 6px;
    }

    .brand-logo {
        width: 78px;
    }

    .topbar-left,
    .topbar-actions {
        flex: 0 0 auto;
    }

    .topbar-center {
        display: flex;
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }

    .topbar-team-hud {
        display: inline-flex;
        max-width: 100%;
        min-width: 0;
    }

    .topbar-team-points-pill.arcade-scoreboard {
        min-width: 96px;
        min-height: 24px;
        padding: 3px 6px 4px;
    }

    .topbar-actions {
        gap: 8px;
    }

    .topbar-auth {
        gap: 6px;
    }

    .topbar-points-pill {
        padding: 3px 5px;
        font-size: 9px !important;
        line-height: 1.1 !important;
    }

    .topbar-icon-link,
    .nav-toggle {
        width: 42px;
        height: 42px;
        padding: 0 8px;
    }

    .topbar-icon-link svg {
        width: 18px;
        height: 18px;
    }

    .nav-toggle span {
        height: 2px;
    }

    .nav-toggle {
        gap: 4px;
    }

    .arcade-scoreboard-label {
        font-size: 7px !important;
        letter-spacing: 0.06em;
    }

    .arcade-scoreboard-value {
        font-size: 12px !important;
    }

    .profile-team-join-select {
        min-height: 48px;
        font-size: 13px !important;
    }
}

@media (pointer: coarse) {
    .arena-topbar::before {
        animation-duration: 14s;
        opacity: 0.3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .arena-topbar::before {
        animation: none;
        opacity: 0.24;
    }

    .mobile-menu-panel .nav-link,
    .mobile-menu-logout,
    .nav-toggle {
        transition: none;
    }

    .mobile-menu-panel .nav-link:active,
    .mobile-menu-logout:active,
    .nav-toggle:active {
        transform: none;
    }
}

/* Mobile menu visibility + arcade polish */
:root {
    --mobile-menu-top: 88px;
}

.mobile-menu-panel {
    top: calc(var(--mobile-menu-top) + env(safe-area-inset-top));
    max-height: calc(100dvh - var(--mobile-menu-top) - env(safe-area-inset-top) - 14px);
    border: 2px solid #070a11;
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(9, 15, 30, 0.97) 0%, rgba(5, 10, 20, 0.98) 100%),
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.05) 0,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px,
            transparent 3px
        );
    box-shadow: 0 0 0 2px #000, 0 0 14px rgba(95, 214, 255, 0.25), 0 8px 0 #101a2f;
}

.mobile-menu-panel .nav-link,
.mobile-menu-logout {
    position: relative;
    overflow: hidden;
    justify-content: center;
    gap: 0;
    min-height: 52px;
    color: #e7f3ff;
    border: 2px solid #0b1324;
    border-radius: 4px;
    background:
        linear-gradient(180deg, #3a5e95 0%, #2a436f 48%, #1a2e4f 100%),
        repeating-linear-gradient(
            0deg,
            rgba(178, 220, 255, 0.09) 0,
            rgba(178, 220, 255, 0.09) 2px,
            transparent 2px,
            transparent 12px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 0,
            rgba(255, 255, 255, 0.04) 2px,
            transparent 2px,
            transparent 18px
        );
    box-shadow:
        inset 0 2px 0 rgba(169, 220, 255, 0.24),
        inset 0 -2px 0 rgba(12, 24, 43, 0.9),
        0 5px 0 #101d33,
        0 0 0 1px rgba(126, 184, 255, 0.2);
    transition: transform 0.08s steps(2, end), filter 0.14s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.mobile-menu-panel .nav-link::before,
.mobile-menu-logout::before,
.mobile-menu-panel .nav-link::after,
.mobile-menu-logout::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    pointer-events: none;
}

.mobile-menu-panel .nav-link::before,
.mobile-menu-logout::before {
    left: 0;
    background: linear-gradient(180deg, #294269 0%, #1f3250 100%);
    border-right: 1px solid rgba(13, 25, 42, 0.65);
}

.mobile-menu-panel .nav-link::after,
.mobile-menu-logout::after {
    right: 0;
    background: linear-gradient(180deg, #2a4167 0%, #1d2e4b 100%);
    border-left: 1px solid rgba(13, 25, 42, 0.65);
}

.mobile-menu-panel .nav-link.active {
    color: #f5fcff;
    border-color: #16335f;
    background:
        linear-gradient(180deg, #4f78b8 0%, #33578f 52%, #203c67 100%),
        repeating-linear-gradient(
            0deg,
            rgba(207, 236, 255, 0.14) 0,
            rgba(207, 236, 255, 0.14) 2px,
            transparent 2px,
            transparent 12px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 0,
            rgba(255, 255, 255, 0.08) 2px,
            transparent 2px,
            transparent 18px
        );
    box-shadow:
        inset 0 2px 0 rgba(210, 238, 255, 0.34),
        inset 0 -2px 0 rgba(17, 34, 57, 0.88),
        0 5px 0 #122341,
        0 0 10px rgba(95, 205, 255, 0.28);
    text-shadow: 0 0 7px rgba(170, 233, 255, 0.42);
}

.mobile-menu-panel .nav-link:hover,
.mobile-menu-logout:hover {
    color: #f5fcff;
    filter: brightness(1.08);
    box-shadow:
        inset 0 2px 0 rgba(178, 223, 255, 0.28),
        inset 0 -2px 0 rgba(12, 24, 43, 0.9),
        0 5px 0 #101d33,
        0 0 10px rgba(105, 213, 255, 0.24);
    text-decoration: none;
}

.mobile-menu-panel .nav-link:active,
.mobile-menu-logout:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 0 rgba(178, 223, 255, 0.22),
        inset 0 -2px 0 rgba(12, 24, 43, 0.86),
        0 3px 0 #101d33,
        0 0 8px rgba(105, 213, 255, 0.2);
}

.mobile-menu-panel .nav-link .nav-link-icon,
.mobile-menu-logout .nav-link-icon {
    display: none;
    color: currentColor;
    position: absolute;
    left: 14px;
}

.mobile-menu-panel .nav-link .nav-link-label,
.mobile-menu-logout .nav-link-label {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    text-align: center;
    padding-inline: 18px;
}

@media (max-width: 699px) {
    .mobile-menu-panel {
        left: 10px;
        right: 10px;
        gap: 8px;
        padding: 10px;
        grid-template-columns: 1fr;
    }
}

/* Prevent mobile browsers from auto-zooming focused form controls. */
@media (max-width: 1024px), (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
}

html.intro-lock {
    overflow: hidden;
}

html.intro-lock body {
    overflow: hidden;
}

html.intro-lock .mobile-shell {
    visibility: hidden;
}

.app-intro-screen {
    display: none;
}

html.intro-lock .app-intro-screen {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(4, 8, 18, 0.78), rgba(4, 8, 18, 0.86));
}

html.intro-lock .app-intro-screen::before {
    content: "";
    position: absolute;
    inset: -8%;
    background: url("https://breadoflifeeu.org/wp-content/uploads/2026/04/connectbread-bg-scaled.webp") center / cover
        no-repeat;
    transform: scale(1.1);
    animation: introBackgroundDrift 6s ease-in-out infinite alternate;
    will-change: transform, background-position;
    z-index: 0;
}

html.intro-lock .app-intro-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 8, 18, 0.72), rgba(4, 8, 18, 0.86));
    z-index: 1;
}

.app-intro-screen.is-visible {
    opacity: 1;
}

.app-intro-screen.is-leaving {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.app-intro-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(93, 124, 191, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93, 124, 191, 0.16) 1px, transparent 1px);
    background-size: 34px 34px;
    animation: introGridPulse 1.2s linear infinite;
    z-index: 2;
}

.app-intro-rings {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.app-intro-screen.is-lite .app-intro-grid,
.app-intro-screen.is-lite .app-intro-rings {
    display: none;
}

.app-intro-screen.is-lite::before {
    animation: none;
}

.app-intro-rings span {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(121, 171, 255, 0.45);
    animation: introRingExpand 1.8s ease-out infinite;
}

.app-intro-rings span:nth-child(1) {
    width: 180px;
    height: 180px;
    left: calc(50% - 90px);
    top: calc(50% - 90px);
}

.app-intro-rings span:nth-child(2) {
    width: 280px;
    height: 280px;
    left: calc(50% - 140px);
    top: calc(50% - 140px);
    animation-delay: 0.3s;
}

.app-intro-rings span:nth-child(3) {
    width: 380px;
    height: 380px;
    left: calc(50% - 190px);
    top: calc(50% - 190px);
    animation-delay: 0.6s;
}

.app-intro-card {
    position: relative;
    width: min(560px, 100%);
    text-align: center;
    padding: 20px 16px;
    border: 2px solid #3c5da5;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(8, 15, 33, 0.94) 0%, rgba(5, 9, 22, 0.97) 100%),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 0,
            rgba(255, 255, 255, 0.04) 3px,
            transparent 3px,
            transparent 16px
        );
    box-shadow: 0 0 0 2px #070b18, 0 0 20px rgba(84, 150, 255, 0.38);
    z-index: 4;
}

.app-intro-sigla-logo {
    margin: 0 auto 10px;
    width: fit-content;
    padding: 8px 10px;
    border: 2px solid #0e1527;
    border-radius: 6px;
    background: rgba(8, 15, 33, 0.7);
    box-shadow: 0 0 0 2px rgba(94, 167, 255, 0.2), 0 8px 18px rgba(15, 12, 8, 0.35);
}

.app-intro-sigla-logo-image {
    display: block;
    width: clamp(120px, 28vw, 210px);
    height: auto;
    filter: drop-shadow(0 0 10px rgba(86, 183, 255, 0.36));
}

.app-intro-overline {
    margin: 0 0 8px;
    color: #78b6ff;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    font-size: 0.58rem !important;
}

.app-intro-card h1 {
    margin: 0;
    color: #ffd469;
    font-size: clamp(0.8rem, 2.7vw, 1.05rem) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em !important;
}

.app-intro-card p {
    margin: 10px 0 0;
    color: #c4d9ff;
    font-size: 0.56rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0.04em !important;
}

.app-intro-loader {
    margin: 14px auto 0;
    display: inline-flex;
    gap: 8px;
}

.app-intro-loader span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #0a0f1d;
    background: linear-gradient(180deg, #ffd86f 0%, #ff9d35 100%);
    box-shadow: 0 0 7px rgba(255, 191, 82, 0.35);
    animation: introDotBounce 0.8s ease-in-out infinite;
}

.app-intro-loader span:nth-child(2) {
    animation-delay: 0.12s;
}

.app-intro-loader span:nth-child(3) {
    animation-delay: 0.24s;
}

@keyframes introGridPulse {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 34px, 34px 0;
    }
}

@keyframes introBackgroundDrift {
    0% {
        transform: scale(1.1) translate3d(-3.5%, -2.8%, 0) rotate(-0.35deg);
    }

    100% {
        transform: scale(1.16) translate3d(3.5%, 2.8%, 0) rotate(0.35deg);
    }
}

@keyframes introRingExpand {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    35% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

@keyframes introDotBounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-intro-screen::before,
    .app-intro-screen::after,
    .app-intro-grid,
    .app-intro-rings span,
    .app-intro-loader span {
        animation: none;
    }
}

.outreach-text,
.small-copy.outreach-text,
.event-list .outreach-text {
    color: hsl(calc(var(--outreach-hue, 160) * 1deg) 92% 76%) !important;
}

.team-admin-card.user-admin-card-compact .small-copy.user-admin-detail,
.team-admin-card.team-admin-card-compact .small-copy.user-admin-detail {
    font-size: 9px !important;
    line-height: 1.35 !important;
    white-space: nowrap;
    margin-top: 3px !important;
}

.team-admin-card.team-admin-card-compact .small-copy.user-admin-detail.team-card-detail-description {
    white-space: normal;
    overflow-wrap: anywhere;
}

.team-admin-card.team-admin-card-compact .small-copy.user-admin-detail.team-card-member-list {
    white-space: normal;
    overflow-wrap: anywhere;
    display: block;
}

.team-points-display {
    margin-top: 4px;
}

/* Games page arcade enhancement */
.challenge-arcade {
    border-color: #38539a;
    background:
        radial-gradient(circle at 10% 10%, rgba(111, 224, 255, 0.17) 0, rgba(111, 224, 255, 0) 34%),
        radial-gradient(circle at 90% 8%, rgba(177, 112, 255, 0.13) 0, rgba(177, 112, 255, 0) 36%),
        radial-gradient(circle at 52% 95%, rgba(122, 255, 195, 0.08) 0, rgba(122, 255, 195, 0) 40%),
        #06080f;
    box-shadow: inset 0 0 0 2px #101733, 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 22px rgba(101, 186, 255, 0.14);
}

.challenge-arcade::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(106deg, transparent 0%, rgba(125, 226, 255, 0.16) 50%, transparent 100%);
    transform: translate3d(-120%, 0, 0);
    opacity: 0;
    will-change: transform, opacity;
    animation: gamesArcadeSweep 13s linear infinite;
}

.challenge-arcade-header {
    border-color: #5f8fff;
    background: linear-gradient(180deg, #121935 0%, #090e1d 100%);
    box-shadow: 0 0 0 2px #1f2c5f, 0 0 22px rgba(88, 149, 255, 0.4);
}

.challenge-arcade-header h1 {
    color: #ffd36e;
    text-shadow: 0 0 12px rgba(255, 184, 80, 0.46);
}

.challenge-arcade-header h1::before {
    content: "> ";
    color: #86e7ff;
    text-shadow: 0 0 8px rgba(134, 231, 255, 0.46);
}

.challenge-arcade-item {
    border-color: #4f6dd2;
    background:
        radial-gradient(circle at 88% 0%, rgba(112, 214, 255, 0.16), rgba(112, 214, 255, 0) 42%),
        linear-gradient(160deg, #121a33 0%, #0b1226 60%, #091024 100%);
    box-shadow: 0 0 0 1px rgba(99, 145, 255, 0.45), 0 0 16px rgba(99, 145, 255, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.challenge-arcade-item:hover {
    transform: translateY(-2px);
    border-color: #6a90ff;
    box-shadow: 0 0 0 1px rgba(116, 162, 255, 0.5), 0 0 22px rgba(116, 162, 255, 0.28);
}

.challenge-arcade-item.is-inactive {
    border-color: #5b6380;
    background:
        radial-gradient(circle at 88% 0%, rgba(171, 179, 210, 0.12), rgba(171, 179, 210, 0) 42%),
        linear-gradient(160deg, #1a2033 0%, #131a2a 60%, #101726 100%);
    box-shadow: 0 0 0 1px rgba(125, 138, 176, 0.36), 0 0 12px rgba(130, 148, 198, 0.18);
}

.challenge-arcade-item.is-inactive:hover {
    transform: none;
    border-color: #68739a;
    box-shadow: 0 0 0 1px rgba(132, 147, 190, 0.4), 0 0 14px rgba(130, 148, 198, 0.22);
}

.challenge-arcade-item.is-inactive .challenge-arcade-status.is-note {
    display: inline-flex;
    width: fit-content;
    margin: 4px 0 0;
    padding: 3px 7px;
    border: 1px solid #7482ad;
    border-radius: 3px;
    color: #d9e3ff;
    background: linear-gradient(180deg, rgba(119, 132, 177, 0.28), rgba(74, 84, 116, 0.2));
    text-transform: uppercase;
    letter-spacing: 0.08em !important;
    font-size: 0.58rem !important;
    text-shadow: none;
}

.challenge-arcade-meta h2 {
    color: #f1f8ff;
    text-shadow: 0 0 8px rgba(131, 220, 255, 0.28);
}

.challenge-arcade-rewards-position {
    border-color: rgba(116, 157, 236, 0.7);
    background:
        linear-gradient(180deg, rgba(90, 128, 236, 0.16) 0%, rgba(16, 24, 48, 0.56) 100%),
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.04) 0,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px,
            transparent 3px
        );
}

.challenge-arcade-rewards-position .reward-pill {
    border-color: rgba(113, 165, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(157, 209, 255, 0.16);
}

.challenge-arcade-status {
    letter-spacing: 0.06em !important;
}

.challenge-manager-actions {
    gap: 8px;
}

.challenge-arcade-btn {
    border-color: #214225;
    box-shadow: 0 0 0 1px #000, 0 3px 0 #0f1a0f, 0 0 14px rgba(95, 220, 83, 0.34);
}

.challenge-manager-btn-edit {
    box-shadow: 0 0 0 1px #000, 0 3px 0 #121f36, 0 0 14px rgba(106, 193, 255, 0.3);
}

.challenge-manager-btn-delete {
    box-shadow: 0 0 0 1px #000, 0 3px 0 #28141b, 0 0 14px rgba(255, 120, 145, 0.3);
}

.challenge-manager-btn-rank {
    box-shadow: 0 0 0 1px #000, 0 3px 0 #35250f, 0 0 14px rgba(255, 200, 110, 0.3);
}

@keyframes gamesArcadeSweep {
    0% {
        transform: translate3d(-120%, 0, 0);
        opacity: 0;
    }

    18% {
        opacity: 0.34;
    }

    82% {
        opacity: 0.34;
    }

    100% {
        transform: translate3d(120%, 0, 0);
        opacity: 0;
    }
}

@media (pointer: coarse) {
    .challenge-arcade::before {
        animation-duration: 16s;
        opacity: 0.24;
    }
}

@media (prefers-reduced-motion: reduce) {
    .challenge-arcade::before {
        animation: none;
        opacity: 0.18;
    }
}