:root {
    --color-background: white;
    --color-on-background: black;
    --color-background-hover: #eee;
    --color-on-background-hover: black;
    --color-primary: #0066ff;
    --color-on-primary: white;
    --color-error: #de0000;
    --color-on-error: white;

    --panel-bg: rgba(0,0,0,0.08);
    --panel-bg-hover: rgba(0,0,0,0.12);
    --border-radius: 1rem;
}

/* =========================
   GLOBAL TRANSITIONS
========================= */

* {
    transition: all 0.15s ease;
}

/* =========================
   DARK MODE (GLOBAL FIX)
========================= */

.dark {
    color-scheme: dark;

    --color-background: #1c1b1f;
    --color-on-background: white;
    --color-background-hover: #27262c;
    --color-on-background-hover: white;
    --color-primary: #283593;
    --color-primary-disabled: #1f213c;
    --color-on-primary: white;
    --color-error: #de0000;
    --color-on-error: white;

    --panel-bg: rgba(255,255,255,0.04);
    --panel-bg-hover: rgba(255,255,255,0.08);
}

/* =========================
   BASE LAYOUT
========================= */

html,
body {
    height: 100%;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-background);
    color: var(--color-on-background);
    overflow-x: hidden;
}

/* =========================
   HEADER
========================= */

header {
    display: flex;
    align-items: center;
    padding-inline: 6rem;
    height: 4.5rem;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* =========================
   AREDL APP SHELL
========================= */

.app-shell {
    display: grid;

    /* UPDATED WIDTHS:
       left bigger, right smaller */
    grid-template-columns: 22rem 1fr 18rem;

    gap: 2rem;

    height: calc(100vh - 4.5rem);
    padding: 2rem;
    box-sizing: border-box;

    overflow: hidden;
}

/* =========================
   CARD SYSTEM
========================= */

.app-sidebar,
.app-main,
.app-right {
    background: var(--panel-bg);
    border-radius: var(--border-radius);
    padding: 1.5rem;

    display: flex;
    flex-direction: column;
    align-items: center;

    overflow-y: auto;
    min-width: 0;
}

/* prevent overflow issues */
.app-sidebar > *,
.app-main > *,
.app-right > * {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* =========================
   LEFT SIDEBAR FIX
========================= */

.app-sidebar {
    overflow-x: hidden;
}

.app-sidebar * {
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* =========================
   MIDDLE PANEL (AREDL CORE)
========================= */

.app-main {
    display: flex;
    flex-direction: column;
    align-items: center;

    justify-content: flex-start;
    text-align: center;

    padding-top: 1rem;
}

/* LEVEL WRAPPER */
.app-main .level {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 1.25rem;

    width: 100%;
    max-width: 68rem;

    margin: 0 auto;
}

/* =========================
   VIDEO (MAIN FOCUS)
========================= */

.app-main .video,
.app-main iframe.video {
    width: 100%;
    aspect-ratio: 16 / 9;

    max-height: 70vh;

    border-radius: var(--border-radius);
    background: black;

    box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.25);
}

/* =========================
   STATS ROW
========================= */

.app-main .stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    width: 100%;
}

/* =========================
   VICTORS
========================= */

.app-main .victors {
    margin: 0 auto;
    text-align: center;
}

/* =========================
   HEADINGS
========================= */

.app-main h1,
.app-main h2,
.app-right h2 {
    text-align: center;
}

/* =========================
   TABLE FIX
========================= */

table {
    width: 100%;
    margin: 0 auto;
}

/* =========================
   EMPTY STATES
========================= */

.app-main:empty,
.app-right:empty {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================
   SPINNER
========================= */

.spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: span 3;
}