:root {
    --arena-primary: #6f42c1;
    --arena-primary-dark: #4f2b96;
    --arena-accent: #15c6d1;
    --arena-bg: #f5f7fb;
    --arena-sidebar: #17152b;
    --arena-text: #20233a;
    --arena-muted: #7d8299;
    --arena-radius: 1.25rem;
}

* { box-sizing: border-box; }
body { color: var(--arena-text); background: var(--arena-bg); }
body, button, input, select, textarea { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { text-decoration: none; }

.app-sidebar {
    width: 270px;
    flex: 0 0 270px;
    min-height: 100vh;
    position: sticky;
    top: 0;
    background:
        radial-gradient(circle at 20% 10%, rgba(111,66,193,.35), transparent 35%),
        linear-gradient(180deg, #17152b 0%, #11101f 100%);
    color: white;
}
.sidebar-brand { display: flex; align-items: center; gap: .85rem; color: white; padding: 1.4rem 1.25rem; }
.sidebar-brand strong, .sidebar-brand small { display: block; }
.sidebar-brand small { color: rgba(255,255,255,.55); font-size: .72rem; }
.brand-mark-sm, .brand-mark {
    display: inline-grid; place-items: center;
    background: linear-gradient(135deg, var(--arena-primary), var(--arena-accent));
    color: white; box-shadow: 0 12px 30px rgba(111,66,193,.35);
}
.brand-mark-sm { width: 44px; height: 44px; border-radius: 14px; }
.brand-mark { width: 72px; height: 72px; border-radius: 22px; font-size: 2rem; }
.app-sidebar .nav-link { color: rgba(255,255,255,.68); border-radius: 14px; padding: .8rem .95rem; display: flex; align-items: center; gap: .8rem; }
.app-sidebar .nav-link:hover, .app-sidebar .nav-link.active { color: white; background: rgba(255,255,255,.1); }
.app-sidebar .nav-link.active { box-shadow: inset 3px 0 0 var(--arena-accent); }
.sidebar-footer { padding: 1rem 1.25rem 1.35rem; border-top: 1px solid rgba(255,255,255,.09); }
.sidebar-footer a { color: white; display: inline-block; margin-top: .5rem; }
.mobile-nav-link { color: rgba(255,255,255,.7); padding: .8rem; border-radius: .8rem; }
.mobile-nav-link.active, .mobile-nav-link:hover { color: white; background: rgba(255,255,255,.12); }

.app-main { min-width: 0; }
.app-topbar { height: 82px; background: rgba(255,255,255,.86); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(20,22,50,.06); position: sticky; top: 0; z-index: 1020; }
.user-avatar { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--arena-primary), var(--arena-accent)); }

.arena-card { border: 0; border-radius: var(--arena-radius); box-shadow: 0 14px 35px rgba(30,33,61,.08); background: white; }
.metric-card { position: relative; overflow: hidden; min-height: 148px; }
.metric-card::after { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; right: -25px; bottom: -35px; background: rgba(111,66,193,.09); }
.metric-icon { width: 48px; height: 48px; border-radius: 15px; display: inline-grid; place-items: center; font-size: 1.25rem; background: rgba(111,66,193,.1); color: var(--arena-primary); }
.metric-value { font-size: 2rem; font-weight: 800; line-height: 1; }

.btn-primary { --bs-btn-bg: var(--arena-primary); --bs-btn-border-color: var(--arena-primary); --bs-btn-hover-bg: var(--arena-primary-dark); --bs-btn-hover-border-color: var(--arena-primary-dark); }
.btn-soft-primary { background: rgba(111,66,193,.1); color: var(--arena-primary); border: 0; }
.btn-soft-primary:hover { background: rgba(111,66,193,.18); color: var(--arena-primary-dark); }
.form-control, .form-select { border-radius: .85rem; padding: .7rem .9rem; border-color: #e4e7ef; }
.form-control:focus, .form-select:focus { border-color: rgba(111,66,193,.5); box-shadow: 0 0 0 .25rem rgba(111,66,193,.12); }
.modal-content { border: 0; border-radius: 1.25rem; overflow: hidden; }
.modal-header { background: #faf9ff; }
.table > :not(caption) > * > * { padding: .9rem .8rem; }
.table thead th { color: var(--arena-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; border-bottom-width: 1px; }
.avatar-team { width: 44px; height: 44px; border-radius: 14px; display: inline-grid; place-items: center; color: white; overflow: hidden; font-size: 1.15rem; }
.avatar-team img { width: 100%; height: 100%; object-fit: cover; }
.copy-field { background: #f7f7fb; border: 1px solid #e8e9f1; border-radius: .9rem; padding: .75rem; font-size: .82rem; word-break: break-all; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.event-hero { background: linear-gradient(135deg, #17152b 0%, #2d1c5d 55%, #176d79 100%); color: white; border-radius: 1.5rem; position: relative; overflow: hidden; }
.event-hero::before, .event-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.event-hero::before { width: 220px; height: 220px; right: -50px; top: -80px; }
.event-hero::after { width: 120px; height: 120px; left: 40%; bottom: -70px; }

.public-body { min-height: 100vh; color: white; background: radial-gradient(circle at 50% 0%, #32205f 0%, #17152b 45%, #0f0f1c 100%); overflow-x: hidden; }
.public-shell { min-height: 100vh; display: flex; flex-direction: column; }
.public-brand { font-size: 1.1rem; font-weight: 800; letter-spacing: .04em; }
.public-panel { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(18px); border-radius: 1.5rem; }
.display-title { font-size: clamp(2.2rem, 6vw, 6rem); font-weight: 900; line-height: .95; }
.display-subtitle { font-size: clamp(1rem, 2vw, 1.5rem); color: rgba(255,255,255,.7); }
.timer-circle { width: min(45vw, 300px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--arena-accent) var(--timer-progress, 100%), rgba(255,255,255,.12) 0); position: relative; }
.timer-circle::before { content: ""; position: absolute; inset: 15px; background: #17152b; border-radius: 50%; }
.timer-value { position: relative; z-index: 2; font-size: clamp(3rem, 10vw, 7rem); font-weight: 900; }
.leaderboard-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 120px; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: rgba(255,255,255,.08); border-radius: 1rem; }
.leaderboard-rank { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.12); font-size: 1.25rem; font-weight: 800; }
.coordinator-toolbar { position: sticky; bottom: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); border-top: 1px solid rgba(0,0,0,.07); z-index: 1010; }
.game-chip { border-radius: 999px; padding: .55rem .85rem; background: #f1effa; color: #4f2b96; display: inline-flex; align-items: center; gap: .4rem; }

.installer-body { min-height: 100vh; background: radial-gradient(circle at top, #ece7ff 0%, #f7f8fc 50%, #eef7f7 100%); }
.empty-state { text-align: center; padding: 3.5rem 1.5rem; }
.empty-state i { font-size: 3rem; color: #c7c9d6; }

@media (max-width: 767.98px) {
    .app-topbar { height: 70px; }
    .leaderboard-row { grid-template-columns: 50px minmax(0, 1fr) 80px; gap: .6rem; padding: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Phase 2 real-time interface */
.tabular-numbers { font-variant-numeric: tabular-nums; }
.live-accent { position:absolute; inset:0 auto 0 0; width:5px; background:linear-gradient(180deg,var(--bs-success),var(--bs-info)); }
.score-control-row { display:grid; grid-template-columns:36px 42px minmax(0,1fr) auto auto; gap:.75rem; align-items:center; padding:.75rem; border:1px solid var(--bs-border-color); border-radius:1rem; background:var(--bs-body-bg); }
.presence-list { max-height:360px; overflow:auto; }
.presence-row { display:flex; align-items:center; gap:.75rem; padding:.7rem 0; border-bottom:1px solid var(--bs-border-color); }
.presence-row:last-child { border-bottom:0; }
.presence-dot { width:10px; height:10px; border-radius:50%; flex:0 0 10px; }
.presence-dot.online { background:var(--bs-success); box-shadow:0 0 0 5px rgba(25,135,84,.12); }
.presence-dot.offline { background:var(--bs-secondary); opacity:.45; }
.public-background-shape { position:fixed; border-radius:50%; filter:blur(4px); opacity:.16; pointer-events:none; }
.public-background-shape.shape-one { width:34vw; height:34vw; background:var(--event-color,#6f42c1); top:-12vw; right:-8vw; animation:arenaFloat 8s ease-in-out infinite alternate; }
.public-background-shape.shape-two { width:28vw; height:28vw; background:#0dcaf0; bottom:-10vw; left:-7vw; animation:arenaFloat 10s ease-in-out infinite alternate-reverse; }
.display-title-sm { font-size:clamp(2.5rem,6vw,5.5rem)!important; }
.winner-trophy { font-size:clamp(5rem,12vw,9rem); filter:drop-shadow(0 12px 30px rgba(255,193,7,.28)); }
.leaderboard-winner-row { border-color:rgba(255,193,7,.65)!important; box-shadow:0 0 30px rgba(255,193,7,.12); }
.countdown-pulse { animation:countdownPulse .8s ease-in-out infinite alternate; }
.coordinator-page { padding-bottom:74px; }

@keyframes countdownPulse { from { transform:scale(.97); } to { transform:scale(1.03); } }
@keyframes arenaFloat { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(2vw,2vh,0) scale(1.08); } }

@media (max-width:767.98px) {
    .score-control-row { grid-template-columns:32px 38px minmax(0,1fr) auto; }
    .score-control-row .btn-group { grid-column:3/5; justify-self:end; }
    .coordinator-toolbar { font-size:.75rem; }
    .public-avatar { border-radius:20px; }
}