:root {
    --bg: #050608;
    --panel: rgba(10, 12, 17, 0.84);
    --line: rgba(255, 191, 92, 0.2);
    --text: #f4ede0;
    --muted: #c9bca5;
    --gold: #ffca72;
    --orange: #ff7a1a;
    --orange-strong: #d04a00;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.52);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(3, 5, 8, 0.12), rgba(3, 5, 8, 0.22)),
        url('/assets/images/backgrounds/webbg.png') center top / cover no-repeat fixed,
        var(--bg);
    font-family: 'Barlow', sans-serif;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.front-shell--locked,
.front-shell--locked body {
    overflow: hidden;
}

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

.loader-screen,
.arena-page {
    min-height: 100vh;
    width: min(100% - 24px, 1180px);
    margin: 0 auto;
    display: grid;
    place-items: center;
}

.loader-card,
.arena-hero {
    width: min(100%, 640px);
    padding: 32px 28px;
    border: 1px solid var(--line);
    border-radius: 32px;
    background: rgba(7, 10, 16, 0.18);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
    text-align: center;
}

.loader-title{
    display:grid;
    gap:6px;
    justify-items:center;
    margin:0 auto 18px;
    padding:20px 16px 8px;
    perspective:900px;
}

.loader-title__line{
    display:block;
    font-family:'Teko', sans-serif;
    font-size:clamp(4rem, 12vw, 6.8rem);
    line-height:.82;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#ffe3b0;
    transform:skewX(-8deg) rotateX(18deg);
    text-shadow:
        0 1px 0 #fff1d0,
        0 2px 0 #f2b45a,
        0 3px 0 #dd7a16,
        0 4px 0 #a84404,
        0 18px 30px rgba(0, 0, 0, .42);
    animation:loader-title-float 2.6s ease-in-out infinite;
}

.loader-title__line--accent{
    color:#ffb347;
    animation-delay:.18s;
}

.loader-card__progress {
    width: min(100%, 360px);
    height: 12px;
    margin: 26px auto 14px;
    padding: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 183, 86, 0.16);
    overflow: hidden;
}

.loader-card__bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffb347, #ff7a1a 55%, #ffd777);
    box-shadow: 0 0 18px rgba(255, 122, 26, 0.7);
    animation: arena-progress 3s linear forwards;
}

.loader-card__status,
.arena-hero p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
}

.arena-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(100%, 320px);
    min-height: 62px;
    margin-top: 26px;
    padding: 0 28px;
    border-radius: 18px;
    font-family: 'Teko', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform .28s ease, box-shadow .28s ease, opacity .28s ease;
}

.arena-button.is-locked {
    pointer-events: none;
    opacity: .55;
    color: #2a1704;
    background: linear-gradient(135deg, rgba(255, 170, 82, 0.68), rgba(117, 48, 7, 0.9));
    box-shadow: inset 0 0 0 1px rgba(255, 224, 177, 0.14);
}

.arena-button.is-ready,
.arena-button--solid {
    color: #281402;
    background: linear-gradient(135deg, #ffca72, #ff7a1a 58%, #ffbf5b);
    box-shadow:
        0 18px 40px rgba(255, 106, 0, 0.25),
        0 0 32px rgba(255, 127, 36, 0.28);
    animation: arena-pulse 1.9s ease-in-out infinite;
}

.arena-button--ghost {
    color: var(--text);
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
}

.arena-hero__eyebrow {
    display: inline-flex;
    margin-top: 18px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--gold);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .76rem;
}

.arena-hero h1 {
    margin: 18px 0 12px;
    font-family: 'Teko', sans-serif;
    font-size: clamp(2.9rem, 6vw, 4.8rem);
    line-height: .9;
    letter-spacing: .04em;
}

.arena-hero__actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.arena-hero--empty {
    max-width: 560px;
}

.arena-hero--event {
    max-width: 620px;
}

.arena-hero__meta {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.arena-hero__meta span {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 202, 114, 0.18);
    background: rgba(255, 255, 255, 0.015);
    color: var(--text);
    font-size: .92rem;
}

@keyframes arena-progress {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes loader-title-float {
    0%, 100% { transform: skewX(-8deg) rotateX(18deg) translateY(0); }
    50% { transform: skewX(-8deg) rotateX(18deg) translateY(-4px); }
}

@keyframes arena-pulse {
    0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 18px 40px rgba(255, 106, 0, 0.25), 0 0 32px rgba(255, 127, 36, 0.28); }
    50% { transform: translateY(-2px) scale(1.02); box-shadow: 0 24px 48px rgba(255, 106, 0, 0.34), 0 0 38px rgba(255, 144, 39, 0.4); }
}