/* Design tokens. Palette follows the teal-to-navy look of the reference
   player (see analyze-bob/ANALYSIS.md); [data-theme] swaps only the accents. */
:root {
    --bg: #000;
    --bg-raised: #111;
    --row: #1d1d1d;
    --pill: rgba(40, 39, 40, .81);
    --border: #3c3c3c;
    --border-active: #65b4bf;
    --accent: #0c8798;
    --accent-bright: #1ec5ea;
    --grad-from: #26bfd4;
    --grad-to: #0a2058;
    --card-gradient: linear-gradient(206deg, var(--grad-from), var(--grad-to));
    --text: #fff;
    --text-2: #ddd;
    --text-3: #8b8b8b;
    --on: #1e7c11;
    --warn: #ff0;
    --danger: #e5484d;
    --key-red: #f00;
    --key-green: #0f0;
    --key-yellow: #ff0;
    --key-blue: #00f;
    --r-sm: 1rem;
    --r-lg: 2rem;
    --r-pill: 3.5rem;
    --r-round: 64rem;
}

:root[data-theme="blue"] {
    --accent: #2a5fd0; --accent-bright: #6aa0ff; --grad-from: #4f8bff; --grad-to: #0b1a4a; --border-active: #8fb2ff;
}
:root[data-theme="violet"] {
    --accent: #7a3fc4; --accent-bright: #b98cff; --grad-from: #a06bf0; --grad-to: #24104a; --border-active: #c9a8ff;
}
:root[data-theme="amber"] {
    --accent: #b8710d; --accent-bright: #ffb733; --grad-from: #f3a11f; --grad-to: #4a2504; --border-active: #ffd07a;
}

* {
    box-sizing: border-box;
}

/* 1rem = 16px at 1920px wide; everything scales with the panel. */
html {
    font-size: calc(100vw / 120);
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: Arial, sans-serif;
    font-size: 1.5rem;
    overflow: hidden;
}

h1, h2, h3, p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hidden {
    display: none !important;
}

.dim {
    color: var(--text-3);
}

.error-text {
    color: var(--danger);
}

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
}

img {
    display: block;
}

#app {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.screen {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

/* Transitions are gated so the very first paint/focus doesn't animate. */
body:not(.allow-transition) *,
body:not(.allow-transition) *::before,
body:not(.allow-transition) *::after {
    transition: none !important;
}

.screen-title {
    font-size: 2.6rem;
    font-weight: 700;
}

.screen-title.center {
    text-align: center;
}

.ic {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

.ic-wrap {
    display: inline-flex;
}

/* ---- brand mark (original) ---- */
.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    letter-spacing: .1rem;
}

.brand-mark {
    width: 3rem;
    height: 3rem;
    border-radius: .8rem;
    background: var(--card-gradient);
    position: relative;
    flex-shrink: 0;
}

.brand-mark::after {
    content: '';
    position: absolute;
    left: 1.15rem;
    top: .85rem;
    border-left: 1.1rem solid #fff;
    border-top: .65rem solid transparent;
    border-bottom: .65rem solid transparent;
}

.brand-word {
    font-size: 2.6rem;
}

.brand-sub {
    font-size: 1rem;
    color: var(--accent-bright);
    letter-spacing: .3rem;
    align-self: flex-end;
    margin-bottom: .5rem;
}

.brand-lg {
    transform: scale(1.6);
    margin-bottom: 4rem;
}

/* ---- loader ---- */
#screen-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader-spinner {
    width: 5rem;
    height: 5rem;
    border: .6rem solid #1d1d1d;
    border-top-color: var(--accent-bright);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 2rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}