:root {
    color-scheme: dark;
    --background: #1a120a;
    --surface: #1a120a;
    --surface-dim: #140d06;
    --surface-low: #221a12;
    --surface-container: #271e16;
    --surface-high: #32281f;
    --surface-highest: #3d332a;
    --outline: #a28d7a;
    --outline-variant: #544434;
    --text: #f0e0d2;
    --muted: #dac2ae;
    --primary: #ffc68b;
    --primary-strong: #ff9f1c;
    --primary-dark: #492900;
    --secondary: #bec7d6;
    --cyan: #90daff;
    --shadow: rgba(0, 0, 0, 0.48);
    --rail: 5rem;
    --gutter: clamp(1rem, 3vw, 3rem);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--background);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(20, 13, 6, 0.98) 0, rgba(26, 18, 10, 0.72) 32rem, rgba(11, 12, 16, 0.78) 100%),
        radial-gradient(circle at 75% 10%, rgba(255, 159, 28, 0.16), transparent 32rem);
    z-index: -2;
}

::selection { background: rgba(255, 159, 28, 0.35); color: var(--text); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--surface-dim); }
::-webkit-scrollbar-thumb { background: var(--surface-highest); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-strong); }

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.app-frame { min-height: 100vh; }

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
    padding: 0 var(--gutter) 0 var(--rail);
    background: rgba(26, 18, 10, 0.78);
    border-bottom: 1px solid rgba(84, 68, 52, 0.55);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(20px);
}

.brand-mark,
.rail-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--primary-strong);
    font-family: "Playfair Display", serif;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0;
}

.brand-mark .material-symbols-outlined,
.rail-brand .material-symbols-outlined { color: var(--primary); }

.brand-mark {
    display: none;
}

.top-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.search-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: min(18rem, 28vw);
    min-height: 2.55rem;
    padding: 0 0.8rem;
    border: 1px solid rgba(84, 68, 52, 0.7);
    border-radius: 0.5rem;
    background: rgba(34, 26, 18, 0.78);
}
.search-pill input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
}
.search-pill input::placeholder { color: rgba(218, 194, 174, 0.72); }

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border: 0;
    border-radius: 999px;
    background: rgba(34, 26, 18, 0.68);
    color: var(--muted);
    cursor: pointer;
}
.icon-button:hover { color: var(--primary); background: rgba(61, 51, 42, 0.88); }

.profile-dot {
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    border: 2px solid var(--primary-strong);
    border-radius: 999px;
    background: linear-gradient(135deg, #3d332a, #14100c);
    color: var(--primary);
    font-weight: 800;
}

.profile-menu {
    position: relative;
}

.profile-menu button.profile-dot {
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
}

.profile-menu-panel {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 40;
    display: none;
    min-width: 12rem;
    padding: 0.5rem;
    border: 1px solid rgba(162, 141, 122, 0.28);
    border-radius: 0.5rem;
    background: rgba(17, 12, 8, 0.96);
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(18px);
}

.profile-menu:hover .profile-menu-panel,
.profile-menu:focus-within .profile-menu-panel {
    display: grid;
    gap: 0.25rem;
}

.profile-menu-header {
    padding: 0.5rem 0.55rem 0.65rem;
    border-bottom: 1px solid rgba(84, 68, 52, 0.5);
    margin-bottom: 0.25rem;
}

.profile-menu-header strong {
    display: block;
    color: var(--text);
    font-size: 0.92rem;
}

.profile-menu-header small {
    color: var(--muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
}

.profile-menu-panel a,
.profile-menu-panel button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.55rem;
    border: 0;
    border-radius: 0.35rem;
    background: none;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font-weight: 700;
    font-family: inherit;
    font-size: 0.88rem;
}

.profile-menu-panel a:hover,
.profile-menu-panel button:hover {
    background: rgba(255, 159, 28, 0.16);
    color: var(--primary);
}

.profile-menu-panel .material-symbols-outlined {
    font-size: 1.15rem;
    color: var(--muted);
}

.auth-loading {
    display: grid;
    place-items: center;
    min-height: 100vh;
    color: var(--primary);
}

.auth-loading .material-symbols-outlined {
    font-size: 3rem;
    animation: auth-pulse 1.4s ease-in-out infinite;
}

@keyframes auth-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.94); }
    50% { opacity: 1; transform: scale(1); }
}

.auth-screen {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
    background-image:
        linear-gradient(to top, var(--background) 0%, transparent 50%, rgba(26, 18, 10, 0.5) 100%),
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url('https://lh3.googleusercontent.com/aida-public/AB6AXuDvNYe4JLO-CcZVCznmm8dojAIi66_uhOfu_xFJHP88X2zzPa7G-fomsw1lNz1uGIyfJ3isC7rg2aHuwFnh_kiXfd4wsnLzgSPeQXSDRcQmdi6T7FjoNELWv-4QgyJPmGTYj0w8YQHe0V318Bou-tAic3Slmzh4UaRVk0neHqtKbzSuZaLtdJYntngx2DSZcLdWZ04fF61f1lwRMFfrQjqZGIyj3fZJYHA3jD82dcTfcn-IytOsnP6PrzQ20itnXp4s-pDDiT-PSz_1');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.auth-card {
    width: 100%;
    max-width: 28rem;
    padding: 3rem;
    border-radius: 0.5rem;
    background: rgba(22, 27, 34, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    color: var(--primary-strong);
    font-family: "Playfair Display", serif;
    font-size: 1.3rem;
    font-weight: 800;
}

.auth-brand .material-symbols-outlined {
    color: var(--primary);
}

.auth-card h1 {
    margin: 0 0 0.5rem;
    font-family: "Playfair Display", serif;
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--primary);
}

.auth-card p.muted {
    margin: 0 0 3.5rem;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
}

.auth-error {
    margin: 0 0 1rem;
    padding: 0.65rem 0.8rem;
    border-radius: 0.4rem;
    background: rgba(220, 60, 50, 0.16);
    border: 1px solid rgba(220, 60, 50, 0.4);
    color: #ff9d90;
    font-size: 0.85rem;
    font-weight: 700;
}

.auth-card form {
    display: grid;
    gap: 1.5rem;
}

.auth-card label {
    display: grid;
    gap: 0.25rem;
    color: var(--text);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    font-weight: 500;
}

.auth-card input {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-bottom: 2px solid rgba(162, 141, 122, 0.3);
    border-radius: 0;
    background: var(--surface-low);
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.auth-card input:focus {
    outline: none;
    border-bottom-color: var(--primary-strong);
}

.auth-card .button {
    margin-top: 0.5rem;
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.settings-page { display: flex; flex-direction: column; gap: 1.5rem; max-width: 34rem; }

.settings-page .section-heading h2 {
    font-family: "Playfair Display", serif;
    font-size: 2.4rem;
    color: var(--primary);
}

.settings-card {
    padding: 2rem;
    border-radius: 0.5rem;
    background: rgba(22, 27, 34, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.settings-card h3 {
    margin: 0 0 0.25rem;
    font-family: "Playfair Display", serif;
    font-size: 1.25rem;
    color: var(--primary);
}

.settings-card > p.muted { margin: 0; }

.settings-card form {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.settings-card label {
    display: grid;
    gap: 0.25rem;
    color: var(--text);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    font-weight: 500;
}

.settings-card input,
.settings-card select {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-bottom: 2px solid rgba(162, 141, 122, 0.3);
    border-radius: 0;
    background: var(--surface-low);
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.settings-card input:focus,
.settings-card select:focus {
    outline: none;
    border-bottom-color: var(--primary-strong);
}

.settings-success {
    margin: 0 0 1rem;
    padding: 0.65rem 0.8rem;
    border-radius: 0.4rem;
    background: rgba(90, 200, 120, 0.16);
    border: 1px solid rgba(90, 200, 120, 0.4);
    color: #9ee8ae;
    font-size: 0.85rem;
    font-weight: 700;
}

.settings-profile-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.settings-avatar {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    border-radius: 999px;
    border: 3px solid var(--primary-strong);
    background: var(--surface-high);
    color: var(--primary);
    font-family: "Playfair Display", serif;
    font-size: 1.6rem;
    font-weight: 700;
}

.settings-profile-info { min-width: 0; }

.settings-profile-name-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.2rem;
}

.settings-profile-name-row h3 { margin: 0; font-size: 1.5rem; }

.settings-role-pill {
    padding: 0.15rem 0.5rem;
    border-radius: 0.3rem;
    background: rgba(255, 159, 28, 0.18);
    color: var(--primary-strong);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.settings-section-heading { margin-top: 0.5rem; }
.settings-section-heading h3 {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: 1.6rem;
    color: var(--primary);
}

.settings-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.settings-pref-row:first-of-type { border-top: none; padding-top: 0.5rem; }

.settings-pref-row h4 { margin: 0; font-size: 0.9rem; color: var(--text); font-weight: 600; }
.settings-pref-row p.muted { margin: 0.15rem 0 0; font-size: 0.78rem; }

.settings-pref-row select {
    width: auto;
    border-bottom: none;
    background: transparent;
    color: var(--primary-strong);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.settings-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}

.settings-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle-track {
    width: 2.5rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(162, 141, 122, 0.3);
    transition: background 0.15s ease;
}

.settings-toggle-track::after {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    margin: 0.17rem;
    border-radius: 999px;
    background: var(--muted);
    transition: transform 0.15s ease, background 0.15s ease;
}

.settings-toggle input:checked + .settings-toggle-track {
    background: var(--primary-strong);
}

.settings-toggle input:checked + .settings-toggle-track::after {
    transform: translateX(1.15rem);
    background: #fff;
}

.settings-user-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.settings-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.settings-user-row:first-child { border-top: none; padding-top: 0; }

.settings-row-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings-row-dot {
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: rgba(218, 194, 174, 0.3);
}

.settings-row-identity { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }

.settings-row-avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(255, 159, 28, 0.18);
    color: var(--primary-strong);
    font-size: 0.68rem;
    font-weight: 800;
}

.settings-you-tag {
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--muted);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.settings-link-action {
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
    color: var(--primary-strong);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.settings-link-action:hover:not(:disabled) { text-decoration: underline; }
.settings-link-action.danger { color: #ff9d90; }
.settings-link-action:disabled { color: rgba(218, 194, 174, 0.25); cursor: not-allowed; }

.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border: 0;
    border-radius: 999px;
    background: rgba(34, 26, 18, 0.68);
    color: var(--text);
    cursor: pointer;
}

.mobile-search-pill {
    display: none;
}

.mobile-drawer {
    display: none;
    position: fixed;
    top: 8.5rem;
    left: 0;
    right: 0;
    z-index: 29;
    padding: 0.6rem;
    gap: 0.25rem;
    background: rgba(17, 12, 8, 0.97);
    border-bottom: 1px solid rgba(84, 68, 52, 0.55);
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(18px);
}

.mobile-drawer a,
.mobile-drawer-logout {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 2.9rem;
    padding: 0 0.9rem;
    border-radius: 0.4rem;
    color: var(--muted);
    font-weight: 700;
}

.mobile-drawer-logout {
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
}

.mobile-drawer a.active,
.mobile-drawer a:hover,
.mobile-drawer-logout:hover {
    color: var(--primary);
    background: rgba(255, 159, 28, 0.12);
}

.bottom-tabs {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    align-items: center;
    justify-content: space-around;
    height: 4.25rem;
    background: rgba(17, 12, 8, 0.96);
    border-top: 1px solid rgba(84, 68, 52, 0.55);
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(18px);
}

.bottom-tabs a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.bottom-tabs a.active,
.bottom-tabs a:hover {
    color: var(--primary);
}

.rail {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 40;
    width: var(--rail);
    overflow: hidden;
    padding: 1.7rem 0;
    background: rgba(20, 13, 6, 0.96);
    border-right: 1px solid rgba(84, 68, 52, 0.55);
    box-shadow: 18px 0 70px rgba(0, 0, 0, 0.34);
    transition: width 240ms ease;
}
.rail:hover { width: 16rem; }
.rail-brand { padding: 0 1.45rem 2.4rem; white-space: nowrap; }
.rail-brand strong { opacity: 0; transition: opacity 180ms ease; }
.rail:hover .rail-brand strong { opacity: 1; }
.rail nav { display: grid; gap: 0.35rem; }
.rail nav a {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    min-height: 3.45rem;
    padding: 0 1.55rem;
    border-left: 4px solid transparent;
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
}
.rail nav a span:last-child { opacity: 0; transition: opacity 180ms ease; }
.rail:hover nav a span:last-child { opacity: 1; }
.rail nav a.active,
.rail nav a:hover {
    color: var(--primary);
    border-left-color: var(--primary-strong);
    background: rgba(255, 159, 28, 0.10);
}

.page-shell {
    min-height: 100vh;
    padding: 5rem 0 4rem var(--rail);
}

.hero-vault {
    position: relative;
    min-height: clamp(34rem, 76vh, 54rem);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.hero-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    filter: saturate(1.05) contrast(1.02);
}
.hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(26, 18, 10, 0.98) 0%, rgba(26, 18, 10, 0.68) 38%, rgba(26, 18, 10, 0.16) 72%),
        linear-gradient(0deg, var(--background) 0%, rgba(26, 18, 10, 0.74) 22%, transparent 70%);
}
.hero-copy {
    position: relative;
    width: min(48rem, calc(100vw - var(--rail) - 2rem));
    padding: 0 var(--gutter) 5rem;
}
.eyebrow {
    margin: 0 0 0.5rem;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(3.2rem, 8vw, 7rem);
    line-height: 0.92;
    letter-spacing: 0;
}
h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2.15rem); letter-spacing: 0; }
h3 { margin: 0; font-size: 1rem; letter-spacing: 0; }
p { color: var(--muted); line-height: 1.55; }
.hero-text { max-width: 42rem; margin: 1.2rem 0 1rem; font-size: 1.08rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1rem 0 1.4rem; }
.hero-meta span, .status-pill, .chips span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(162, 141, 122, 0.35);
    border-radius: 0.35rem;
    background: rgba(20, 13, 6, 0.58);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 800;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.8rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    padding: 0 1rem;
    font-weight: 900;
    cursor: pointer;
}
.button.primary { background: var(--primary-strong); color: #2c1700; }
.button.primary:hover { background: var(--primary); }
.button.secondary { background: rgba(34, 26, 18, 0.72); border-color: rgba(162, 141, 122, 0.28); color: var(--text); }
.button.secondary:hover { border-color: var(--primary-strong); color: var(--primary); }
.button.danger { background: rgba(220, 60, 50, 0.85); color: #fff; }
.button.danger:hover { background: rgba(220, 60, 50, 1); }
.button:disabled { opacity: 0.5; cursor: not-allowed; }

.storage-meter-card {
    padding: 1.25rem 1.5rem;
    border-radius: 0.65rem;
    margin-bottom: 1.5rem;
}

.storage-meter-track {
    height: 0.6rem;
    border-radius: 999px;
    background: rgba(240, 224, 210, 0.18);
    overflow: hidden;
}

.storage-meter-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--primary-strong);
    transition: width 300ms ease;
}

.storage-meter-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.storage-breakdown {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.storage-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 0.65rem;
}

.storage-stat-card > .material-symbols-outlined {
    font-size: 2rem;
    color: var(--primary);
}

.storage-stat-card h3 {
    margin: 0;
    font-size: 1rem;
}

.storage-stat-card p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.storage-stat-card .button {
    margin-left: auto;
    white-space: nowrap;
}

.storage-groups-heading {
    margin: 2rem 0 1rem;
    font-size: 1.1rem;
}

.storage-group-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.storage-group-card {
    border-radius: 0.65rem;
    overflow: hidden;
}

.storage-group-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
}

.storage-group-poster {
    width: 2.6rem;
    height: 3.9rem;
    border-radius: 0.35rem;
    object-fit: cover;
    flex-shrink: 0;
}

.storage-group-poster-fallback {
    display: grid;
    place-items: center;
    background: var(--surface-high);
    color: var(--primary);
}

.storage-group-info {
    flex: 1;
    min-width: 0;
}

.storage-group-info h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.98rem;
}

.storage-group-info p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.storage-active-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 159, 28, 0.18);
    color: var(--primary);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.storage-group-chevron {
    color: var(--muted);
}

.storage-group-row .button {
    min-height: 2.2rem;
    padding: 0 0.85rem;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.storage-episode-list {
    border-top: 1px solid rgba(84, 68, 52, 0.5);
    padding: 0.4rem 1.1rem 0.6rem;
}

.storage-episode-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(84, 68, 52, 0.28);
}

.storage-episode-row:last-child {
    border-bottom: 0;
}

.storage-episode-row > div:first-child {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.storage-episode-row .button {
    min-height: 2.2rem;
    padding: 0 0.75rem;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.content-band { padding: 1.25rem var(--gutter) 2rem; }
.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.section-heading.compact { align-items: start; }
.section-heading a, .muted { color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.section-heading a:hover { color: var(--primary); }

.continue-row, .poster-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(18rem, 24rem);
    gap: 1rem;
    overflow-x: auto;
    padding: 0.25rem 0 1rem;
    scrollbar-width: none;
}
.poster-row { grid-auto-columns: minmax(12rem, 15rem); }
.continue-row::-webkit-scrollbar, .poster-row::-webkit-scrollbar { display: none; }

.poster-row.wrap-grid {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    overflow-x: visible;
}

.wide-card, .poster-card, .glass-panel, .addon-card, .stream-card, .empty-vault {
    border: 1px solid rgba(84, 68, 52, 0.72);
    background: rgba(34, 26, 18, 0.7);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(20px);
}
.wide-card {
    position: relative;
    overflow: hidden;
    min-height: 13rem;
    border-radius: 0.5rem;
}
.wide-card img { width: 100%; height: 100%; min-height: 13rem; object-fit: cover; display: block; }
.wide-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,12,16,0.94), transparent 58%); }
.wide-card-body { position: absolute; inset: auto 1rem 1rem; z-index: 1; }
.wide-card-body p { margin: 0 0 0.25rem; color: var(--primary); font-weight: 800; }
.progress-track { height: 0.25rem; margin-top: 0.8rem; border-radius: 999px; background: rgba(240, 224, 210, 0.18); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--primary-strong); }

.poster-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2 / 3;
    border-radius: 0.5rem;
    transition: transform 260ms ease, box-shadow 260ms ease;
}
.poster-card:hover { transform: translateY(-0.45rem) scale(1.035); box-shadow: 0 20px 60px rgba(255, 159, 28, 0.2); }
.poster-card img, .poster-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-fallback { display: grid; place-items: center; background: var(--surface-high); color: var(--primary); }
.poster-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,12,16,0.95) 0%, transparent 52%); }
.poster-info { position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.85rem; }
.poster-info p { margin: 0.25rem 0 0; color: var(--primary); font-size: 0.78rem; font-weight: 800; }

.poster-hover-actions {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    display: flex;
    gap: 0.4rem;
    opacity: 0;
    transform: translateY(-0.3rem);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
}
.poster-card:hover .poster-hover-actions,
.poster-card:focus-within .poster-hover-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.poster-action-button {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    border: 1px solid rgba(240, 224, 210, 0.28);
    background: rgba(10, 8, 6, 0.72);
    backdrop-filter: blur(12px);
    color: var(--text);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.poster-action-button .material-symbols-outlined { font-size: 1.15rem; }
.poster-action-button:hover { transform: scale(1.08); }
.poster-action-button.play { background: var(--primary); color: #1a1206; border-color: transparent; }
.poster-action-button.play:hover { background: var(--primary-strong); }
.poster-action-button.remove:hover { background: rgba(220, 60, 50, 0.85); border-color: transparent; }

.poster-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 0.2rem;
    overflow: hidden;
    background: rgba(240, 224, 210, 0.22);
}
.poster-progress i {
    display: block;
    height: 100%;
    background: var(--primary-strong);
    box-shadow: 0 0 10px rgba(255, 159, 28, 0.5);
}

.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
.poster-skeleton { aspect-ratio: 2 / 3; border-radius: 0.5rem; background: linear-gradient(90deg, var(--surface-low), var(--surface-high), var(--surface-low)); background-size: 240% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -240% 0; } }

.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.feature-panel { padding: 1.25rem; border-radius: 0.5rem; }
.panel-icon { color: var(--primary-strong); font-size: 2rem; margin-bottom: 0.75rem; }

.torrentio-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
    gap: 1rem;
    align-items: end;
    min-height: 26rem;
    padding: 7rem var(--gutter) 2rem;
    background:
        linear-gradient(90deg, rgba(26, 18, 10, 0.95), rgba(26, 18, 10, 0.55)),
        url('https://torrentio.strem.fun/images/background_v1.jpg') center / cover;
}
.torrentio-hero h1 { font-size: clamp(4rem, 10vw, 8rem); }
.hero-stat-card {
    min-height: 12rem;
    display: grid;
    align-content: center;
    gap: 0.5rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 159, 28, 0.28);
    border-radius: 0.5rem;
    background: rgba(20, 13, 6, 0.72);
    backdrop-filter: blur(18px);
}
.hero-stat-card .material-symbols-outlined { color: var(--primary-strong); font-size: 2.8rem; }
.hero-stat-card strong { font-size: 1.8rem; }
.hero-stat-card small { color: var(--muted); font-weight: 800; }

.torrentio-grid { display: grid; grid-template-columns: minmax(20rem, 0.9fr) minmax(20rem, 1.1fr); gap: 1rem; padding: 1.25rem var(--gutter); }
.lookup-card { padding: 1.25rem; border-radius: 0.5rem; }
.field-stack { display: grid; gap: 0.45rem; margin: 1rem 0; color: var(--muted); font-weight: 700; }
input, select {
    min-height: 2.85rem;
    width: 100%;
    border: 1px solid rgba(84, 68, 52, 0.78);
    border-radius: 0.35rem;
    background: rgba(20, 13, 6, 0.88);
    color: var(--text);
    padding: 0 0.8rem;
    outline: none;
}
input:focus, select:focus { border-color: var(--primary-strong); box-shadow: 0 0 0 3px rgba(255, 159, 28, 0.12); }
input[type="checkbox"] { width: 1rem; min-height: auto; accent-color: var(--primary-strong); }
.toggle-list { display: grid; gap: 0.7rem; margin: 1rem 0; }
.check-row { display: flex; align-items: center; gap: 0.65rem; color: var(--muted); }
.lookup-row { display: grid; grid-template-columns: 10rem minmax(12rem, 1fr) auto; gap: 0.7rem; align-items: center; }
.message {
    margin: 0.75rem 0;
    padding: 0.65rem 0.85rem;
    border-radius: 0.4rem;
    background: rgba(255, 159, 28, 0.1);
    border: 1px solid rgba(255, 159, 28, 0.28);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.4;
}
.addon-card { display: grid; grid-template-columns: 5.2rem 1fr; gap: 1rem; padding: 1rem; border-radius: 0.5rem; }
.addon-card img { width: 5.2rem; height: 5.2rem; object-fit: contain; border-radius: 0.5rem; background: #050806; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.streams-band { padding-top: 0; }
.empty-vault { display: grid; place-items: center; min-height: 16rem; text-align: center; border-radius: 0.5rem; padding: 2rem; }
.empty-vault .material-symbols-outlined { color: var(--primary-strong); font-size: 3rem; }
.empty-vault h3 { font-size: 1.35rem; }
.stream-list { display: grid; gap: 0.65rem; }
.stream-card { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr auto; gap: 1rem; align-items: center; padding: 0.8rem; border-radius: 0.5rem; }
.stream-quality { color: var(--primary); font-weight: 900; }
.stream-copy p { margin: 0.2rem 0 0; font-size: 0.85rem; }
code { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; color: var(--secondary); font-size: 0.78rem; }

@media (max-width: 980px) {
    .search-pill { display: none; }
    .rail { display: none; }
    .mobile-menu-toggle { display: inline-flex; }
    .brand-mark { display: inline-flex; }
    .mobile-drawer { display: grid; }
    .bottom-tabs { display: flex; }
    .mobile-search-pill {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        min-height: 2.55rem;
        margin-top: 0.75rem;
        padding: 0 0.8rem;
        border: 1px solid rgba(84, 68, 52, 0.7);
        border-radius: 0.5rem;
        background: rgba(34, 26, 18, 0.78);
    }
    .mobile-search-pill input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--text);
    }
    .mobile-search-pill input::placeholder { color: rgba(218, 194, 174, 0.72); }
    .topbar {
        height: auto;
        flex-wrap: wrap;
        padding: 0.85rem var(--gutter);
    }
    .page-shell { padding-left: 0; padding-top: 8.5rem; padding-bottom: 6rem; }
    .hero-copy { width: 100%; }
    .two-column, .torrentio-grid, .torrentio-hero { grid-template-columns: 1fr; }
    .torrentio-hero { padding-top: 6rem; }
    .lookup-row { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .brand-mark strong { font-size: 1rem; }
    .top-actions .icon-button { display: none; }
    .hero-vault { min-height: 38rem; }
    .hero-copy { padding-bottom: 3rem; }
    h1 { font-size: clamp(2.7rem, 15vw, 4.5rem); }
    .continue-row { grid-auto-columns: minmax(16rem, 84vw); }
    .poster-row { grid-auto-columns: minmax(10rem, 44vw); }
    .stream-card, .addon-card { grid-template-columns: 1fr; }
}


.hero-search {
    display: grid;
    grid-template-columns: auto minmax(14rem, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    width: min(44rem, 100%);
    margin: 1.35rem 0 0.9rem;
    padding: 0.55rem;
    border: 1px solid rgba(162, 141, 122, 0.32);
    border-radius: 0.55rem;
    background: rgba(20, 13, 6, 0.68);
    backdrop-filter: blur(18px);
}

.hero-search .material-symbols-outlined {
    margin-left: 0.35rem;
    color: var(--primary);
}

.hero-search input {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.hero-search.compact-search {
    grid-template-columns: auto minmax(12rem, 1fr) 9rem auto;
    width: min(58rem, 100%);
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 1rem;
}

.result-card {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 1rem;
    min-height: 12rem;
    padding: 0.8rem;
    border: 1px solid rgba(84, 68, 52, 0.72);
    border-radius: 0.5rem;
    background: rgba(34, 26, 18, 0.72);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
}

.clickable-result {
    cursor: pointer;
}

.clickable-result:hover {
    border-color: rgba(255, 159, 28, 0.58);
    background: rgba(39, 30, 22, 0.9);
}

.title-expansion-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    overflow: hidden;
    background: var(--background);
    animation: expandIn 520ms cubic-bezier(0.2, 0, 0.2, 1);
}

.expansion-shader {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background:
        radial-gradient(circle at 22% 16%, rgba(255, 159, 28, 0.18), transparent 24rem),
        radial-gradient(circle at 80% 18%, rgba(144, 218, 255, 0.10), transparent 26rem),
        linear-gradient(135deg, rgba(20, 13, 6, 0.76), rgba(5, 5, 5, 0.52));
}

.expansion-backdrop {
    position: fixed;
    inset: 0 0 auto;
    height: min(62vh, 42rem);
    background-position: center 20%;
    background-size: cover;
    filter: saturate(1.08) contrast(1.05);
    transform: scale(1.04);
}

.expansion-backdrop-gradient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(26, 18, 10, 0.96), rgba(26, 18, 10, 0.46) 48%, rgba(26, 18, 10, 0.82)),
        linear-gradient(to bottom, rgba(26, 18, 10, 0.06), var(--background) 62vh);
}

.expansion-close {
    position: fixed;
    top: 1.2rem;
    left: calc(var(--rail) + 1.2rem);
    z-index: 3;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(162, 141, 122, 0.28);
    border-radius: 0.5rem;
    background: rgba(20, 13, 6, 0.64);
    color: var(--text);
    cursor: pointer;
    backdrop-filter: blur(16px);
}

.expansion-close:hover {
    color: var(--primary);
    border-color: rgba(255, 159, 28, 0.56);
}

.expansion-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(34rem, 1fr) minmax(20rem, 24rem);
    align-items: start;
    gap: clamp(1.25rem, 3vw, 3rem);
    height: 100vh;
    padding: clamp(5.8rem, 9vh, 7rem) var(--gutter) clamp(1rem, 3vh, 2rem);
}

.expansion-primary {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: calc(100vh - clamp(5.8rem, 9vh, 7rem) - clamp(1rem, 3vh, 2rem));
    max-width: 58rem;
    animation: slideUp 620ms 120ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

/* Movies have no episode list, so there's nothing to put in the side column - collapse
   it entirely instead of leaving an empty pane and a large dead space next to the player. */
.expansion-content.expansion-content-solo {
    grid-template-columns: 1fr;
}

.expansion-content.expansion-content-solo .expansion-primary {
    max-width: 72rem;
}

.expansion-primary h1 {
    margin: 0.2rem 0 0.35rem;
    font-size: clamp(2.5rem, 5.5vw, 4.9rem);
    line-height: 0.88;
}

.expansion-description {
    max-width: 48rem;
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.92rem;
    line-height: 1.45;
}

.expansion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0.9rem 0;
}

.expansion-side {
    display: grid;
    gap: 1rem;
    max-width: 24rem;
    height: calc(100vh - clamp(5.8rem, 9vh, 7rem) - clamp(1rem, 3vh, 2rem));
    min-height: 0;
    animation: slideUp 620ms 220ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

.expansion-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1rem;
    border: 1px solid rgba(84, 68, 52, 0.72);
    border-radius: 0.5rem;
    background: rgba(20, 13, 6, 0.74);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(22px);
}

.episode-list {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.episode-row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    width: 100%;
    min-height: 4rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    padding: 0.45rem;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.episode-row:hover,
.episode-row.active {
    border-color: rgba(255, 159, 28, 0.42);
    background: rgba(61, 51, 42, 0.54);
}

.episode-thumb {
    position: relative;
    display: grid;
    place-items: center;
    width: 6.5rem;
    height: 3.65rem;
    overflow: hidden;
    border-radius: 0.35rem;
    background:
        linear-gradient(135deg, rgba(255, 159, 28, 0.28), rgba(0, 0, 0, 0.5)),
        var(--surface-high);
    color: var(--primary);
}

.episode-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.episode-thumb .material-symbols-outlined {
    position: relative;
    z-index: 1;
    opacity: 0.85;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
}

.episode-row:hover .episode-thumb .material-symbols-outlined,
.episode-row.active .episode-thumb .material-symbols-outlined {
    opacity: 1;
}

.episode-row strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
}

.episode-row small {
    color: var(--muted);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
}

.episode-row-unreleased {
    cursor: default;
}

.episode-row-unreleased:hover {
    border-color: transparent;
    background: transparent;
}

.episode-row-unreleased .episode-thumb {
    filter: grayscale(1) brightness(0.7);
}

.episode-row-unreleased .episode-thumb .material-symbols-outlined {
    opacity: 0.7;
}

.episode-row-unreleased strong,
.episode-row-unreleased small {
    opacity: 0.62;
}

.coming-soon-badge {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    text-align: center;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1a1206;
    background: linear-gradient(90deg, var(--primary), #ffcf7a);
    padding: 0.12rem 0.2rem;
}

.overlay-quality-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.compact-quality {
    min-height: 5.4rem;
    padding: 0.75rem;
}

.compact-quality .material-symbols-outlined {
    font-size: 1.5rem;
}

.compact-quality strong {
    font-size: 1.05rem;
}

@keyframes expandIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(1.5rem);
        border-radius: 1rem;
    }
    to {
        opacity: 1;
        transform: none;
        border-radius: 0;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(1.2rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.result-card img,
.result-card .poster-fallback {
    width: 100%;
    height: 100%;
    min-height: 11rem;
    object-fit: cover;
    border-radius: 0.35rem;
}

.result-copy {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
}

.result-copy p:not(.eyebrow) {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.25rem;
}

.slim-empty {
    min-height: 10rem;
}

.openable-stream:hover {
    border-color: rgba(255, 159, 28, 0.58);
    background: rgba(39, 30, 22, 0.95);
}

@media (max-width: 760px) {
    .expansion-content {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
        padding-top: 6rem;
    }

    .title-expansion-overlay {
        overflow-y: auto;
    }

    .expansion-primary,
    .expansion-side {
        height: auto;
    }

    .expansion-side {
        max-width: none;
    }

    .title-expansion-overlay .cinematic-player-shell {
        flex: none;
        width: 100%;
        /* aspect-ratio gives a definite height for the video's height:100% to resolve against
           (percentage heights collapse to nothing against an ancestor sized only by min-height).
           min-height stops it going too short to fit the compact control chrome below on very
           narrow phones; max-height stops it going too tall relative to the viewport on taller
           "mobile" widths (tablets in this bucket, landscape handled separately below). */
        aspect-ratio: 16 / 9;
        min-height: 14rem;
        max-height: 70vh;
    }

    .title-expansion-overlay .cinematic-player-shell:fullscreen {
        aspect-ratio: unset;
        min-height: 0;
        max-height: none;
        height: 100vh;
    }

    /* Player chrome: compact and clamp()-sized so header, progress bar, and controls never
       overlap even in the shortest boxes above, with iPhone safe-area insets respected. */
    .cinematic-player-top {
        padding: clamp(0.4rem, 2vw, 0.75rem);
        padding-top: max(clamp(0.4rem, 2vw, 0.75rem), env(safe-area-inset-top));
    }

    .player-exit-button {
        gap: 0.4rem;
    }

    .player-exit-button .material-symbols-outlined {
        font-size: clamp(1.1rem, 4vw, 1.35rem);
    }

    .player-exit-button small {
        font-size: clamp(0.55rem, 2vw, 0.65rem);
    }

    .player-exit-button strong {
        max-width: 42vw;
        font-size: clamp(0.72rem, 3vw, 0.88rem);
    }

    .cinematic-controls {
        left: max(0.5rem, env(safe-area-inset-left));
        right: max(0.5rem, env(safe-area-inset-right));
        bottom: max(0.5rem, env(safe-area-inset-bottom));
    }

    .player-progress {
        gap: 0.3rem;
        margin-bottom: 0.4rem;
    }

    .progress-bar {
        height: 0.2rem;
    }

    .player-progress div {
        font-size: clamp(0.62rem, 2.5vw, 0.72rem);
    }

    .player-toolbar {
        flex-wrap: nowrap;
        gap: 0.35rem;
    }

    .control-cluster button {
        min-width: 2.35rem;
        min-height: 2.35rem;
        padding: 0.35rem;
    }

    /* Touch devices have no persistent :hover state, so the desktop hover-to-reveal slider
       would otherwise stay permanently collapsed - show a small fixed-width slider instead. */
    .volume-slider {
        width: 2.6rem !important;
        opacity: 1 !important;
        margin-left: 0.3rem !important;
    }

    /* Small landscape phones still match max-width:760px (portrait width), but in landscape
       their WIDTH is the larger dimension - a width-driven 16:9 box would come out taller than
       the actual viewport. Drive sizing from viewport height instead in that orientation. */
    @media (orientation: landscape) {
        .title-expansion-overlay .cinematic-player-shell {
            aspect-ratio: unset;
            width: auto;
            max-width: 100%;
            height: 88vh;
            max-height: 88vh;
            min-height: 0;
            margin: 0 auto;
        }
    }

    .expansion-close {
        left: 1rem;
    }

    .hero-search,
    .hero-search.compact-search {
        grid-template-columns: 1fr;
    }

    .hero-search .material-symbols-outlined {
        display: none;
    }

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

    .result-card {
        grid-template-columns: 6.5rem minmax(0, 1fr);
    }
}


.search-page-hero {
    padding: 8rem var(--gutter) 2rem;
    min-height: 20rem;
    background:
        linear-gradient(90deg, rgba(26, 18, 10, 0.98), rgba(26, 18, 10, 0.72)),
        radial-gradient(circle at 78% 20%, rgba(255, 159, 28, 0.18), transparent 24rem);
}

.search-page-hero h1 {
    font-size: clamp(3rem, 7vw, 6rem);
}

.type-filter {
    width: auto;
    min-width: 10rem;
}

.clean-hero-copy {
    padding-bottom: 7rem;
}

.provider-hero {
    min-height: 30rem;
}

.provider-band {
    padding-top: 2rem;
}

.large-addon-card {
    grid-template-columns: 6.5rem 1fr;
    padding: 1.25rem;
}

.large-addon-card img,
.provider-logo-fallback {
    width: 6.5rem;
    height: 6.5rem;
}

.provider-logo-fallback {
    display: grid;
    place-items: center;
    border-radius: 0.5rem;
    background: #050806;
    color: var(--primary-strong);
}

.provider-logo-fallback .material-symbols-outlined {
    font-size: 3rem;
}

.player-page {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    background: #050505;
    color: var(--text);
}

.player-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(11, 12, 16, 0.86), transparent 28%, rgba(11, 12, 16, 0.94) 100%),
        radial-gradient(circle at center, rgba(255, 159, 28, 0.12), transparent 34rem),
        #050505;
}

.player-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 2.5rem);
    background: linear-gradient(to bottom, rgba(11, 12, 16, 0.82), transparent);
}

.player-back {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.player-back .material-symbols-outlined {
    font-size: 2rem;
}

.player-back small,
.player-badge small {
    display: block;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.player-back strong {
    display: block;
    max-width: min(42rem, 68vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.25rem;
}

.player-badge {
    text-align: right;
}

.player-stage {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 1rem;
}

.cinestream-video {
    width: min(100%, 1280px);
    max-height: 74vh;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    background: #000;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.magnet-panel {
    display: grid;
    justify-items: center;
    gap: 1rem;
    width: min(44rem, 92vw);
    padding: 2rem;
    border: 1px solid rgba(162, 141, 122, 0.32);
    border-radius: 0.5rem;
    background: rgba(22, 27, 34, 0.72);
    text-align: center;
    backdrop-filter: blur(20px);
}

.magnet-panel .material-symbols-outlined {
    color: var(--primary-strong);
    font-size: 3.5rem;
}

.magnet-panel h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

.magnet-panel code {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--secondary);
}

.player-controls-gradient {
    position: relative;
    z-index: 2;
    padding: 5rem clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem);
    background: linear-gradient(to top, rgba(11, 12, 16, 0.96), rgba(11, 12, 16, 0.58), transparent);
}

.player-control-row {
    display: grid;
    grid-template-columns: auto auto minmax(10rem, 1fr) auto auto;
    gap: 0.8rem;
    align-items: center;
}

.round-control {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgba(162, 141, 122, 0.28);
    border-radius: 999px;
    background: rgba(22, 27, 34, 0.62);
    color: var(--text);
    cursor: pointer;
}

.round-control.main {
    width: 3.4rem;
    height: 3.4rem;
    background: var(--primary-strong);
    color: var(--primary-dark);
}

.player-timeline {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.7rem;
    align-items: center;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.player-timeline div {
    height: 0.32rem;
    border-radius: 999px;
    background: rgba(240, 224, 210, 0.22);
}

.player-timeline div span {
    display: block;
    width: 18%;
    height: 100%;
    border-radius: inherit;
    background: var(--primary-strong);
}

@media (max-width: 760px) {
    .player-control-row {
        grid-template-columns: auto auto 1fr;
    }

    .player-control-row .round-control:nth-last-child(-n+2) {
        display: none;
    }

    .player-badge {
        display: none;
    }

    .episode-picker {
        grid-template-columns: 1fr;
    }
}


.quality-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
}

.episode-picker {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) minmax(16rem, 1fr);
    gap: 0.8rem;
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid rgba(84, 68, 52, 0.72);
    border-radius: 0.5rem;
    background: rgba(34, 26, 18, 0.7);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
}

.episode-picker label {
    display: grid;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.episode-picker span {
    color: var(--primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quality-card {
    display: grid;
    justify-items: start;
    gap: 0.45rem;
    min-height: 8.5rem;
    padding: 1rem;
    border: 1px solid rgba(84, 68, 52, 0.72);
    border-radius: 0.5rem;
    background: rgba(34, 26, 18, 0.74);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
}

.quality-card:hover {
    border-color: rgba(255, 159, 28, 0.65);
    transform: translateY(-0.2rem);
}

.quality-card .material-symbols-outlined {
    color: var(--primary-strong);
    font-size: 2rem;
}

.quality-card strong {
    font-size: 1.3rem;
}

.quality-card small {
    color: var(--muted);
    font-weight: 800;
}

.cinematic-player-shell {
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(84, 68, 52, 0.72);
    border-radius: 0.5rem;
    background: #050505;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

.title-expansion-overlay .cinematic-player-shell {
    flex: 1;
    min-height: 0;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.cinematic-player-shell:fullscreen {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #000;
}

.cinematic-video {
    display: block;
    width: 100%;
    height: min(72vh, 48rem);
    aspect-ratio: 16 / 9;
    background: #000;
    object-fit: contain;
}

.cinematic-video::cue {
    background-color: rgba(10, 7, 4, 0.78);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.cine-pause-frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background: #000 center / contain no-repeat;
    transition: opacity 120ms ease;
}

.cinematic-player-shell.pause-frame-visible .cine-pause-frame {
    opacity: 1;
}

/* Shown while the video has no decodable frame yet (readyState < 2) - most visibly during
   transcode startup, where the server needs a moment to generate the first HLS segments and
   the box would otherwise look like a bare black rectangle with no indication anything is
   happening. Purely JS/CSS driven (toggled in cinestream-video.js's update()), no Blazor
   round-trip needed. */
.cine-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1.5rem;
    text-align: center;
    pointer-events: none;
    background: rgba(5, 5, 5, 0.55);
}

.cinematic-player-shell.cine-preparing .cine-loading-overlay {
    display: flex;
}

.cine-loading-overlay p {
    margin: 0;
    max-width: 22rem;
    color: var(--text);
    font-size: clamp(0.78rem, 3vw, 0.92rem);
    font-weight: 700;
}

.cine-loading-spinner {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    border: 0.22rem solid rgba(240, 224, 210, 0.22);
    border-top-color: var(--primary-strong);
    animation: cine-spin 800ms linear infinite;
}

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

.player-tap-zone {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

.cine-play-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 5.5rem;
    height: 5.5rem;
    margin: -2.75rem 0 0 -2.75rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(22, 27, 34, 0.6);
    backdrop-filter: blur(20px);
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}

.cine-play-flash.visible {
    opacity: 1;
    transform: scale(1);
}

.cine-play-flash .material-symbols-outlined {
    font-size: 2.75rem;
    color: var(--primary);
}

.title-expansion-overlay .cinematic-video {
    height: 100%;
    max-height: none;
}

.cinematic-player-shell:fullscreen .cinematic-video {
    height: 100vh;
    max-height: none;
}

.player-scrim {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

.player-scrim.top {
    top: 0;
    height: 12rem;
    background: linear-gradient(to bottom, rgba(5, 5, 5, 0.84), transparent);
}

.player-scrim.bottom {
    bottom: 0;
    height: 18rem;
    background: linear-gradient(to top, rgba(5, 5, 5, 0.96), rgba(5, 5, 5, 0.58), transparent);
}

.cinematic-player-top,
.cinematic-controls,
.up-next-panel,
.skip-intro-button,
.skip-mark-panel {
    position: absolute;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.cinematic-player-shell.controls-visible .cinematic-player-top,
.cinematic-player-shell.controls-visible .cinematic-controls,
.cinematic-player-shell:focus-within .cinematic-player-top,
.cinematic-player-shell:focus-within .cinematic-controls {
    opacity: 1;
    pointer-events: auto;
}

.cinematic-player-shell.controls-visible .skip-mark-panel,
.cinematic-player-shell:focus-within .skip-mark-panel {
    opacity: 1;
    pointer-events: auto;
}

.cinematic-player-shell.show-skip-intro.controls-visible .skip-intro-button,
.cinematic-player-shell.show-skip-intro:focus-within .skip-intro-button {
    opacity: 1;
    pointer-events: auto;
}

.cinematic-player-shell.show-up-next.controls-visible .up-next-panel,
.cinematic-player-shell.show-up-next:focus-within .up-next-panel {
    opacity: 1;
    pointer-events: auto;
}

.cinematic-player-top {
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 2.5vw, 2rem);
}

.player-exit-button,
.player-episode-label,
.player-toolbar,
.control-cluster,
.up-next-panel {
    display: flex;
    align-items: center;
}

.player-exit-button {
    gap: 0.7rem;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.player-exit-button:hover,
.control-cluster button:hover,
.player-episode-label small {
    color: var(--primary);
}

.player-exit-button .material-symbols-outlined {
    font-size: 1.8rem;
}

.player-exit-button small,
.player-episode-label small,
.up-next-panel small {
    display: block;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.player-exit-button strong,
.player-episode-label strong {
    display: block;
    max-width: min(34rem, 52vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.05rem;
    color: var(--text);
}

.player-episode-label {
    justify-content: flex-end;
    gap: 0.9rem;
    text-align: right;
}

.player-top-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.player-fullscreen-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    border-radius: 0.45rem;
    background: rgba(20, 13, 6, 0.55);
    color: var(--text);
    cursor: pointer;
}

.player-fullscreen-button:hover {
    color: var(--primary);
}

.player-fullscreen-button .material-symbols-outlined {
    font-size: 1.5rem;
}

.player-avatar {
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border: 2px solid var(--primary-strong);
    border-radius: 0.5rem;
    background: rgba(20, 13, 6, 0.8);
    color: var(--primary);
    font-weight: 900;
}

.cinematic-controls {
    left: clamp(1rem, 2.5vw, 2rem);
    right: clamp(1rem, 2.5vw, 2rem);
    bottom: clamp(1rem, 2.5vw, 2rem);
}

.player-progress {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.8rem;
}

.progress-bar,
.mini-progress {
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(240, 224, 210, 0.18);
}

.progress-bar {
    height: 0.28rem;
}

.progress-button {
    width: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
}

.progress-bar i,
.mini-progress i {
    display: block;
    height: 100%;
    background: var(--primary-strong);
    box-shadow: 0 0 16px rgba(255, 159, 28, 0.45);
}

.progress-bar i {
    width: 0%;
}

.player-progress div {
    display: flex;
    justify-content: space-between;
    color: rgba(240, 224, 210, 0.72);
    font-size: 0.76rem;
    font-weight: 800;
}

.player-toolbar {
    justify-content: space-between;
    gap: 1rem;
}

.control-cluster {
    gap: clamp(0.65rem, 2vw, 1.4rem);
}

.control-cluster button,
.up-next-panel button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.control-cluster button .material-symbols-outlined {
    font-size: 1.9rem;
}

.control-cluster button strong {
    font-size: 0.82rem;
}

.volume-control {
    display: flex;
    align-items: center;
}

.volume-slider {
    /* Native accent-color fill doesn't reliably paint all the way to the thumb at max value
       in every browser, which looks like there's still room left even when maxed out - drive
       the fill explicitly from --volume-fill (set in JS) instead. */
    --volume-fill: 100%;
    width: 0;
    height: 0.9rem;
    margin-left: 0;
    opacity: 0;
    overflow: visible;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
    transition: width 220ms ease, opacity 220ms ease, margin-left 220ms ease;
}

.volume-control:hover .volume-slider,
.volume-control:focus-within .volume-slider {
    width: 6rem;
    opacity: 1;
    margin-left: 0.6rem;
}

.volume-slider::-webkit-slider-runnable-track {
    height: 0.18rem;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--primary-strong) var(--volume-fill),
        rgba(240, 224, 210, 0.22) var(--volume-fill)
    );
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0.62rem;
    height: 0.62rem;
    margin-top: -0.22rem;
    border-radius: 999px;
    background: #fff8f0;
    border: 2px solid var(--primary-strong);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.volume-slider::-moz-range-track {
    height: 0.18rem;
    border-radius: 999px;
    background: rgba(240, 224, 210, 0.22);
}

.volume-slider::-moz-range-progress {
    height: 0.18rem;
    border-radius: 999px;
    background: var(--primary-strong);
}

.volume-slider::-moz-range-thumb {
    width: 0.62rem;
    height: 0.62rem;
    border: 2px solid var(--primary-strong);
    border-radius: 999px;
    background: #fff8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.player-settings {
    position: relative;
}

.player-settings-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.65rem);
    display: none;
    min-width: 9rem;
    max-height: min(22rem, 60vh);
    overflow-y: auto;
    padding: 0.45rem;
    border: 1px solid rgba(162, 141, 122, 0.28);
    border-radius: 0.5rem;
    background: rgba(17, 12, 8, 0.94);
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(18px);
}

.player-settings-menu::-webkit-scrollbar { width: 0.4rem; }
.player-settings-menu::-webkit-scrollbar-thumb { background: rgba(240, 224, 210, 0.28); border-radius: 999px; }
.player-settings-menu::-webkit-scrollbar-track { background: transparent; }

.player-settings:hover .player-settings-menu,
.player-settings:focus-within .player-settings-menu {
    display: grid;
    gap: 0.25rem;
}

.player-settings-menu.subtitles-menu {
    min-width: 16rem;
    grid-template-columns: repeat(2, 1fr);
}

.player-settings-menu.subtitles-menu .subtitle-off-option {
    grid-column: 1 / -1;
}

.player-settings-menu button {
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.55rem;
    border-radius: 0.35rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-settings-menu button.active,
.player-settings-menu button:hover {
    background: rgba(255, 159, 28, 0.16);
    color: var(--primary);
}

.player-settings-menu small {
    color: var(--muted);
    font-weight: 900;
}

.quality-menu-row {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    width: 100%;
    padding: 0.2rem;
    border-radius: 0.35rem;
    color: var(--text);
}

.quality-menu-row.active,
.quality-menu-row:hover {
    background: rgba(255, 159, 28, 0.16);
    color: var(--primary);
}

.quality-menu-play {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.35rem;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.quality-menu-download {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    border-radius: 0.3rem;
    color: inherit;
}

.quality-menu-download:hover {
    background: rgba(255, 159, 28, 0.3);
}

.quality-menu-download .material-symbols-outlined {
    font-size: 1.1rem;
}

.main-play-button {
    width: 3.7rem;
    height: 3.7rem;
    border-radius: 0.55rem;
    background: var(--primary) !important;
    color: var(--primary-dark) !important;
    box-shadow: 0 12px 32px rgba(255, 159, 28, 0.28);
}

/* Browsers block autoplay-with-sound when it isn't triggered by a recent click (e.g. a
   stream that only became ready via background polling) - make it unmistakable that a
   single tap on this button is all that's needed. */
.autoplay-blocked .main-play-button {
    animation: cine-autoplay-pulse 1.4s ease-in-out infinite;
}

@keyframes cine-autoplay-pulse {
    0%, 100% { box-shadow: 0 12px 32px rgba(255, 159, 28, 0.28), 0 0 0 0 rgba(255, 159, 28, 0.55); }
    50% { box-shadow: 0 12px 32px rgba(255, 159, 28, 0.28), 0 0 0 0.85rem rgba(255, 159, 28, 0); }
}

.autoplay-blocked .cinematic-player-top,
.autoplay-blocked .cinematic-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.main-play-button .material-symbols-outlined {
    font-size: 2.3rem !important;
}

.up-next-panel {
    right: clamp(1rem, 2.5vw, 2rem);
    bottom: clamp(6.6rem, 13vw, 9.5rem);
    gap: 0.8rem;
    max-width: min(22rem, calc(100% - 2rem));
    padding: 0.8rem;
    border: 1px solid rgba(162, 141, 122, 0.24);
    border-radius: 0.5rem;
    background: rgba(20, 24, 30, 0.74);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(20px);
}

.skip-intro-button {
    right: clamp(1rem, 2.5vw, 2rem);
    bottom: clamp(6.6rem, 13vw, 9.5rem);
    padding: 0.85rem 1.4rem;
    border: 1px solid rgba(162, 141, 122, 0.24);
    border-radius: 0.5rem;
    background: rgba(20, 24, 30, 0.74);
    backdrop-filter: blur(20px);
    color: var(--text);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.skip-intro-button:hover {
    background: var(--primary);
    color: var(--primary-dark);
    border-color: transparent;
}

.skip-mark-panel {
    left: clamp(1rem, 2.5vw, 2rem);
    bottom: clamp(6.6rem, 13vw, 9.5rem);
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(20rem, calc(100% - 2rem));
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(162, 141, 122, 0.24);
    border-radius: 0.5rem;
    background: rgba(20, 24, 30, 0.74);
    backdrop-filter: blur(20px);
}

.skip-mark-panel small {
    color: var(--muted);
    font-size: 0.72rem;
}

.skip-mark-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.skip-mark-buttons .button {
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
}

.title-expansion-overlay .up-next-panel {
    max-width: min(19rem, calc(100% - 2rem));
}

.up-next-thumb {
    display: grid;
    place-items: center;
    width: 5.8rem;
    height: 3.4rem;
    flex: 0 0 auto;
    border-radius: 0.35rem;
    background:
        linear-gradient(135deg, rgba(255, 159, 28, 0.35), rgba(0, 0, 0, 0.55)),
        var(--surface-high);
    color: var(--primary);
}

.up-next-panel strong {
    display: block;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
}

.up-next-countdown {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.45rem;
}

.mini-progress {
    width: 7rem;
    height: 0.24rem;
    margin-top: 0;
}

.mini-progress i {
    width: 0%;
    transition: width 400ms linear;
}

.up-next-countdown small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.up-next-panel button {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.6rem;
    background: var(--primary-strong);
    color: var(--primary-dark);
}

.cinematic-player-shell:fullscreen .cinematic-player-top,
.cinematic-player-shell:fullscreen .cinematic-controls,
.cinematic-player-shell:fullscreen .up-next-panel,
.cinematic-player-shell:fullscreen .skip-intro-button,
.cinematic-player-shell:fullscreen .skip-mark-panel {
    position: fixed;
}

@media (max-width: 760px) {
    .cinematic-player-top {
        align-items: flex-start;
    }

    .player-episode-label {
        display: none;
    }

    .player-top-right {
        gap: 0.5rem;
    }

    .control-cluster.right button strong {
        display: none;
    }

    /* These duplicate the property names from the base (non-mobile) rules above rather than
       only appearing in the earlier max-width:760px block - CSS gives the later declaration
       the win when specificity is equal, regardless of which one is behind a matching media
       query, so a mobile override placed before its base counterpart would be silently ignored. */
    .control-cluster {
        gap: clamp(0.25rem, 1.2vw, 0.4rem);
    }

    .control-cluster button .material-symbols-outlined {
        font-size: clamp(1.05rem, 3.6vw, 1.3rem);
    }

    .main-play-button {
        width: 2.35rem;
        height: 2.35rem;
    }

    .main-play-button .material-symbols-outlined {
        font-size: clamp(1.15rem, 4vw, 1.4rem) !important;
    }

    .player-fullscreen-button {
        width: 2.15rem;
        height: 2.15rem;
    }

    .player-fullscreen-button .material-symbols-outlined {
        font-size: clamp(1.05rem, 3.6vw, 1.25rem);
    }

    .up-next-panel {
        display: none;
    }

    /* Standalone (non-overlay) player only - the title-expansion-overlay version has its own
       aspect-ratio/min-height/max-height sizing and control chrome defined further up. */
    .cinematic-video {
        height: 62vh;
    }
}

.torrent-status {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    gap: 0.8rem;
    align-items: center;
    padding: 0.9rem;
    border: 1px solid rgba(162, 141, 122, 0.3);
    border-radius: 0.5rem;
    background: rgba(11, 12, 16, 0.72);
    backdrop-filter: blur(18px);
}

.torrent-status .material-symbols-outlined {
    color: var(--primary-strong);
}

.torrent-status p {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
}

.games-hero {
    background-image:
        linear-gradient(90deg, rgba(26, 18, 10, 0.96) 0%, rgba(26, 18, 10, 0.74) 42%, rgba(26, 18, 10, 0.22) 100%),
        linear-gradient(0deg, var(--background) 0%, rgba(26, 18, 10, 0.1) 45%),
        url('https://images.unsplash.com/photo-1522778119026-d647f0596c20?auto=format&fit=crop&w=1800&q=80');
    background-size: cover;
    background-position: center;
}

.games-hero-inner,
.games-container,
.game-watch-container {
    width: min(112rem, calc(100vw - var(--rail) - clamp(2rem, 6vw, 6rem)));
    max-width: 100%;
    margin: 0 auto;
}

.games-hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(5rem, 12vw, 10rem) 0 clamp(3rem, 7vw, 5rem);
}

.games-page {
    display: grid;
    gap: 1.25rem;
    padding-top: 1.5rem;
    padding-bottom: 4rem;
}

.games-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.games-filter-row,
.games-sports-strip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.games-filter-button,
.games-chip {
    min-height: 2.35rem;
    flex: 0 0 auto;
    border: 1px solid rgba(162, 141, 122, 0.3);
    border-radius: 0.45rem;
    background: rgba(34, 26, 18, 0.72);
    color: var(--muted);
    padding: 0 0.85rem;
    font-weight: 900;
    cursor: pointer;
}

.games-filter-button:hover,
.games-filter-button.active,
.games-chip:hover,
.games-chip.active {
    border-color: rgba(255, 159, 28, 0.72);
    background: rgba(255, 159, 28, 0.16);
    color: var(--primary);
}

.games-chip.muted-chip,
.games-chip.error-chip {
    cursor: default;
}

.games-chip.error-chip {
    color: #ffb5aa;
    border-color: rgba(220, 60, 50, 0.42);
    background: rgba(220, 60, 50, 0.14);
}

.games-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: min(28rem, 40vw);
    min-height: 2.55rem;
    padding: 0 0.85rem;
    border: 1px solid rgba(84, 68, 52, 0.72);
    border-radius: 0.5rem;
    background: rgba(20, 13, 6, 0.72);
}

.games-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
}

.game-card,
.game-skeleton {
    min-height: 21rem;
    border: 1px solid rgba(84, 68, 52, 0.72);
    border-radius: 0.5rem;
    overflow: hidden;
    background: rgba(34, 26, 18, 0.72);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.game-card {
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.game-card:hover {
    transform: translateY(-0.35rem);
    border-color: rgba(255, 159, 28, 0.7);
    box-shadow: 0 22px 70px rgba(255, 159, 28, 0.15);
}

.game-card-media {
    position: relative;
    height: 11rem;
    background: rgba(20, 13, 6, 0.85);
}

.game-card-media > img,
.game-card-media .game-team-badges {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.game-card-media > img {
    object-fit: cover;
    display: block;
    z-index: 1;
}

.game-team-badges,
.game-modal-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, rgba(255, 159, 28, 0.16), rgba(144, 218, 255, 0.08)),
        rgba(20, 13, 6, 0.9);
}

.game-team-badges img,
.game-modal-badges img,
.game-team-badges span,
.game-modal-badges span {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 159, 28, 0.38);
    background: rgba(20, 13, 6, 0.72);
    color: var(--primary);
    font-weight: 900;
    object-fit: contain;
}

.game-popular {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    min-height: 1.8rem;
    display: inline-flex;
    align-items: center;
    padding: 0 0.55rem;
    border-radius: 0.35rem;
    background: var(--primary-strong);
    color: var(--primary-dark);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.game-card-body {
    display: grid;
    gap: 0.6rem;
    padding: 1rem;
}

.game-card-meta,
.game-source-line,
.game-stream-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-card h3 {
    font-size: 1.15rem;
    line-height: 1.2;
}

.game-card p {
    min-height: 2.8rem;
    margin: 0;
    font-size: 0.9rem;
}

.game-source-line {
    color: var(--muted);
    letter-spacing: 0;
    text-transform: none;
}

.game-source-line .material-symbols-outlined {
    color: var(--primary-strong);
    font-size: 1.15rem;
}

.game-skeleton {
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent),
        rgba(34, 26, 18, 0.72);
    background-size: 200% 100%;
    animation: cine-skeleton 1.3s ease-in-out infinite;
}

@keyframes cine-skeleton {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.game-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 2rem);
    background: rgba(5, 5, 5, 0.72);
    backdrop-filter: blur(18px);
}

.game-modal {
    position: relative;
    width: min(74rem, 100%);
    max-height: min(48rem, calc(100vh - 2rem));
    overflow: auto;
    border: 1px solid rgba(162, 141, 122, 0.3);
    border-radius: 0.65rem;
    background:
        linear-gradient(135deg, rgba(34, 26, 18, 0.98), rgba(13, 10, 8, 0.98)),
        var(--surface-low);
    box-shadow: 0 35px 110px rgba(0, 0, 0, 0.62);
}

.game-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border: 1px solid rgba(162, 141, 122, 0.32);
    border-radius: 0.45rem;
    background: rgba(20, 13, 6, 0.82);
    color: var(--text);
    cursor: pointer;
}

.game-modal-hero {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) 1fr;
    gap: 1.25rem;
    align-items: end;
    padding: clamp(1.2rem, 3vw, 2rem);
    border-bottom: 1px solid rgba(84, 68, 52, 0.55);
}

.game-modal-hero > img,
.game-modal-badges {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0.5rem;
    object-fit: cover;
    background: rgba(20, 13, 6, 0.86);
}

.game-modal-hero h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 0.96;
}

.game-modal-grid {
    display: grid;
    grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
    gap: 1rem;
    padding: clamp(1rem, 3vw, 2rem);
}

.game-modal-side,
.game-video-shell {
    border: 1px solid rgba(84, 68, 52, 0.72);
    border-radius: 0.5rem;
    background: rgba(20, 13, 6, 0.62);
}

.game-modal-side {
    padding: 1rem;
}

.game-source-selector,
.game-stream-options {
    display: grid;
    gap: 0.55rem;
}

.game-source-button,
.game-stream-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.65rem;
    align-items: center;
    width: 100%;
    min-height: 3.6rem;
    border: 1px solid rgba(84, 68, 52, 0.7);
    border-radius: 0.45rem;
    background: rgba(34, 26, 18, 0.72);
    color: var(--text);
    padding: 0.55rem;
    text-align: left;
    cursor: pointer;
}

.game-source-button .material-symbols-outlined,
.game-stream-option .material-symbols-outlined {
    grid-row: span 2;
    color: var(--primary-strong);
}

.game-source-button small,
.game-stream-option small {
    color: var(--muted);
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-source-button.active,
.game-source-button:hover,
.game-stream-option.active,
.game-stream-option:hover {
    border-color: rgba(255, 159, 28, 0.72);
    background: rgba(255, 159, 28, 0.14);
}

.game-video-shell {
    overflow: hidden;
}

.game-video-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(84, 68, 52, 0.55);
}

.game-video-top h3 {
    font-size: 1.1rem;
}

.game-stream-meta span {
    min-height: 1.85rem;
    display: inline-flex;
    align-items: center;
    padding: 0 0.55rem;
    border: 1px solid rgba(162, 141, 122, 0.32);
    border-radius: 0.35rem;
    color: var(--text);
}

.game-video-frame {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(18rem, 48vw, 32rem);
    background: #000;
}

.game-video-frame iframe {
    width: 100%;
    height: 100%;
    min-height: clamp(18rem, 48vw, 32rem);
    border: 0;
    display: block;
    background: #000;
}

.game-watch-page {
    min-height: 100vh;
    padding: 6.25rem 0 4rem;
    background:
        linear-gradient(180deg, rgba(26, 18, 10, 0.2), var(--background) 24rem),
        var(--background);
}

.game-watch-container {
    display: grid;
    gap: 1.25rem;
}

.game-watch-back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.45rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(162, 141, 122, 0.32);
    border-radius: 0.45rem;
    background: rgba(20, 13, 6, 0.72);
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
}

.game-watch-back:hover {
    border-color: rgba(255, 159, 28, 0.72);
    color: var(--primary);
}

.game-watch-loading {
    display: grid;
    place-items: center;
    gap: 0.7rem;
    min-height: 22rem;
    border: 1px solid rgba(84, 68, 52, 0.72);
    border-radius: 0.65rem;
    background: rgba(20, 13, 6, 0.62);
    color: var(--muted);
}

.game-watch-loading .material-symbols-outlined {
    color: var(--primary-strong);
    font-size: 3rem;
}

.game-watch-hero {
    display: grid;
    grid-template-columns: minmax(18rem, 30rem) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: stretch;
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid rgba(84, 68, 52, 0.72);
    border-radius: 0.65rem;
    background:
        linear-gradient(135deg, rgba(34, 26, 18, 0.82), rgba(20, 13, 6, 0.62)),
        rgba(20, 13, 6, 0.78);
    box-shadow: 0 26px 90px rgba(0, 0, 0, 0.28);
}

.game-watch-art {
    position: relative;
    overflow: hidden;
    min-height: 18rem;
    border-radius: 0.5rem;
    background: rgba(20, 13, 6, 0.9);
}

.game-watch-art > img,
.game-watch-art .game-modal-badges {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.game-watch-art > img {
    z-index: 1;
    object-fit: cover;
}

.game-watch-details {
    display: grid;
    align-content: center;
    gap: 1rem;
    min-width: 0;
}

.game-watch-details h1 {
    font-size: clamp(3rem, 7vw, 6.5rem);
}

.game-watch-source-panel {
    display: grid;
    gap: 0.8rem;
    max-width: 44rem;
    margin-top: 0.5rem;
}

.game-watch-source-panel .game-source-selector {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.game-watch-player-row {
    min-width: 0;
}

.game-watch-player-row .game-video-frame {
    min-height: clamp(22rem, 48vw, 42rem);
}

.game-watch-player-row .game-video-frame iframe {
    min-height: clamp(22rem, 48vw, 42rem);
}

.game-watch-list {
    display: grid;
    gap: 1rem;
    margin-top: 0.75rem;
}

.compact-games-grid {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.games-search-clear {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(240, 224, 210, 0.08);
    color: var(--muted);
    cursor: pointer;
}

.games-search-clear:hover {
    color: var(--primary);
    background: rgba(255, 159, 28, 0.14);
}

.games-search-clear .material-symbols-outlined {
    font-size: 1.1rem;
}

.game-video-state,
.game-play-gate {
    display: grid;
    place-items: center;
    gap: 0.55rem;
    padding: 1.25rem;
    color: var(--muted);
    text-align: center;
}

.game-video-state .material-symbols-outlined,
.game-play-gate .material-symbols-outlined {
    color: var(--primary-strong);
    font-size: 3rem;
}

.game-video-state.error {
    color: #ffb5aa;
}

.game-play-gate {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.game-play-gate strong {
    color: var(--text);
    font-size: 1.2rem;
}

.game-stream-options {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    padding: 1rem;
}

.game-empty-small {
    padding: 1rem;
    border: 1px solid rgba(84, 68, 52, 0.55);
    border-radius: 0.45rem;
    color: var(--muted);
    font-weight: 700;
}

@media (max-width: 900px) {
    .games-toolbar,
    .game-modal-hero,
    .game-modal-grid,
    .game-watch-hero {
        grid-template-columns: 1fr;
    }

    .games-toolbar {
        display: grid;
    }

    .games-search {
        width: 100%;
    }

    .game-modal {
        max-height: calc(100vh - 1rem);
    }

    .games-hero-inner {
        display: grid;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .games-hero-inner,
    .games-container,
    .game-watch-container {
        width: min(100% - 2rem, 112rem);
    }

    .game-watch-page {
        padding-top: 9rem;
        padding-bottom: 5rem;
    }
}

/* ===== Gallery (/sh26) ===== */

.gallery-page {
    padding: clamp(5.8rem, 9vh, 7rem) var(--gutter) 8rem;
}

.gallery-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gallery-header h1 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}

.gallery-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.gallery-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--outline-variant);
    border-radius: 999px;
    background: var(--surface-container);
    color: var(--muted);
}

.gallery-search input {
    border: 0;
    background: transparent;
    color: var(--text);
    outline: none;
    min-width: 12rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.gallery-skeleton {
    aspect-ratio: 4 / 3;
    border-radius: 0.6rem;
    background: linear-gradient(90deg, var(--surface-low), var(--surface-high), var(--surface-low));
    background-size: 240% 100%;
    animation: shimmer 1.4s infinite;
}

.gallery-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.65rem;
    padding: 0.5rem;
    background: transparent;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.gallery-card:hover {
    background: var(--surface-container);
    border-color: var(--outline-variant);
    transform: translateY(-2px);
}

.gallery-card.selected {
    border-color: var(--primary-strong);
    background: rgba(255, 159, 28, 0.1);
}

.gallery-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--surface-high);
}

.gallery-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 220ms ease;
}

.gallery-card:hover .gallery-card-media img {
    transform: scale(1.04);
}

.gallery-card-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--primary);
}

.gallery-video-badge {
    position: absolute;
    inset: auto auto 0.5rem 0.5rem;
    color: #fff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
    font-size: 1.6rem;
}

.gallery-select-checkbox {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    opacity: 0;
    transition: opacity 150ms ease;
}

.gallery-card:hover .gallery-select-checkbox,
.gallery-select-checkbox.always-visible {
    opacity: 1;
}

.gallery-select-checkbox input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--primary-strong);
    cursor: pointer;
}

.gallery-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    opacity: 0;
    background: rgba(5, 5, 5, 0.42);
    transition: opacity 160ms ease;
}

.gallery-card:hover .gallery-card-overlay {
    opacity: 1;
}

.gallery-card-overlay button {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: 999px;
    background: rgba(20, 13, 6, 0.82);
    color: var(--text);
    cursor: pointer;
}

.gallery-card-overlay button:hover {
    color: var(--primary);
}

.gallery-card-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0 0.15rem;
}

.gallery-card-meta strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}

.gallery-card-meta small {
    color: var(--muted);
    font-size: 0.72rem;
}

.gallery-selection-toolbar {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--outline-variant);
    border-radius: 999px;
    background: rgba(17, 12, 8, 0.94);
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(18px);
    transform: translateX(-50%);
}

.gallery-selection-toolbar button {
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
    font-size: 0.82rem;
}

.gallery-selection-toolbar button:hover {
    color: var(--primary);
}

.gallery-toolbar-cancel {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: var(--surface-high) !important;
}

.gallery-upload-fab {
    position: fixed;
    right: clamp(1rem, 3vw, 2.5rem);
    bottom: clamp(1rem, 3vw, 2.5rem);
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.3rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary-strong);
    color: var(--primary-dark);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 16px 40px rgba(255, 159, 28, 0.35);
}

.gallery-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(5, 5, 5, 0.72);
    backdrop-filter: blur(6px);
}

.gallery-modal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: min(38rem, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: 1.5rem;
    border: 1px solid var(--outline-variant);
    border-radius: 0.75rem;
    background: rgba(20, 15, 10, 0.92);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(24px);
}

.gallery-modal header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gallery-modal header button {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 999px;
    background: var(--surface-high);
    color: var(--text);
    cursor: pointer;
}

.gallery-modal footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.gallery-upload-target {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.gallery-upload-target label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.gallery-dropzone {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: 2rem 1rem;
    border: 2px dashed var(--outline-variant);
    border-radius: 0.6rem;
    text-align: center;
    color: var(--muted);
    transition: border-color 160ms ease, background 160ms ease;
}

.gallery-dropzone.drag-active {
    border-color: var(--primary-strong);
    background: rgba(255, 159, 28, 0.08);
}

.gallery-dropzone .material-symbols-outlined {
    font-size: 2.4rem;
    color: var(--primary);
}

.gallery-upload-summary {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.82rem;
}

.gallery-overall-progress {
    display: grid;
    gap: 0.35rem;
}

.gallery-overall-progress small {
    color: var(--muted);
    font-size: 0.72rem;
}

.gallery-pending-list {
    display: grid;
    gap: 0.6rem;
    max-height: 16rem;
    overflow-y: auto;
}

.gallery-pending-item {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.4rem;
    border-radius: 0.5rem;
    background: var(--surface-container);
}

.gallery-pending-item img,
.gallery-pending-fallback {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.4rem;
    object-fit: cover;
}

.gallery-pending-fallback {
    display: grid;
    place-items: center;
    background: var(--surface-high);
    color: var(--primary);
}

.gallery-pending-info {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.gallery-pending-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
}

.gallery-pending-info small {
    color: var(--muted);
    font-size: 0.7rem;
}

.gallery-status-ok,
.gallery-status-error {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.gallery-status-ok {
    color: #8ee08e;
}

.gallery-status-error {
    color: #ff9b9b;
}

.gallery-status-error button {
    border: 0;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
    font-weight: 700;
}

.gallery-remove-pending {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.gallery-remove-pending:hover {
    color: var(--text);
    background: var(--surface-high);
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: rgba(2, 2, 2, 0.96);
}

.gallery-lightbox-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem clamp(1rem, 3vw, 2rem);
    color: var(--muted);
    font-weight: 700;
}

.gallery-lightbox-top div {
    display: flex;
    gap: 0.6rem;
}

.gallery-lightbox-action {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    cursor: pointer;
}

.gallery-lightbox-action:hover {
    color: var(--primary);
}

.gallery-lightbox-stage {
    position: relative;
    min-height: 0;
    overflow: hidden;
}

/* A grid item sized via width/height:100% under place-items:center still resolved to its own
   content size (the image/video's native resolution) rather than the cell's size, so
   width/height percentages had no definite box to resolve against and media rendered at full
   native resolution, overflowing the viewport by hundreds of pixels. Absolute positioning with
   inset:0 reliably sizes to the nearest positioned ancestor (.gallery-lightbox-stage) regardless
   of that percentage-resolution quirk; object-fit:contain does the actual letterboxed scaling
   within that box. Horizontal breathing room comes from the nav buttons floating on top
   (z-index above the media) rather than padding on the stage, which this sizing approach can't
   otherwise account for. */
.gallery-lightbox-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0.4rem;
    touch-action: pinch-zoom;
}

.gallery-lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    cursor: pointer;
    transform: translateY(-50%);
}

.gallery-lightbox-nav:disabled {
    opacity: 0.25;
    cursor: default;
}

.gallery-lightbox-nav.prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.gallery-lightbox-nav.next { right: clamp(0.5rem, 2vw, 1.5rem); }

.gallery-lightbox-caption {
    padding: 0.8rem clamp(1rem, 3vw, 2rem) 1.2rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
}

@media (max-width: 760px) {
    .gallery-header {
        flex-direction: column;
        align-items: stretch;
    }

    .gallery-header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .gallery-search input {
        min-width: 0;
        width: 100%;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
        gap: 0.6rem;
    }

    .gallery-select-checkbox,
    .gallery-card-overlay {
        opacity: 1;
        background: none;
    }

    .gallery-card-overlay {
        align-items: flex-end;
        justify-content: flex-end;
        padding: 0.4rem;
        background: linear-gradient(to top, rgba(5, 5, 5, 0.55), transparent 60%);
    }

    .gallery-upload-fab-label {
        display: none;
    }

    .gallery-upload-fab {
        padding: 0.9rem;
        border-radius: 999px;
    }

    .gallery-lightbox-nav {
        width: 2.4rem;
        height: 2.4rem;
    }
}

/* Latest Games feedback pass: stadium hero + All Games grid */
.games-hero {
    background-image:
        linear-gradient(90deg, rgba(26, 18, 10, 0.97) 0%, rgba(26, 18, 10, 0.78) 42%, rgba(26, 18, 10, 0.42) 100%),
        linear-gradient(0deg, var(--background) 0%, rgba(26, 18, 10, 0.14) 54%),
        url('https://images.unsplash.com/photo-1522778119026-d647f0596c20?auto=format&fit=crop&w=1800&q=80');
    background-size: cover;
    background-position: center;
}

.games-hero-search {
    align-self: end;
    width: min(34rem, 42vw);
    min-height: 3rem;
    background: rgba(17, 12, 8, 0.86);
    backdrop-filter: blur(14px);
}

.games-control-panel {
    display: grid;
    gap: 1rem;
    padding: 0.95rem;
    border: 1px solid rgba(84, 68, 52, 0.72);
    border-radius: 0.55rem;
    background: rgba(24, 17, 11, 0.72);
}

.games-sport-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.games-sport-icon {
    display: inline-grid;
    place-items: center;
    min-width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    color: var(--primary);
    font-size: 0.88rem;
    font-weight: 950;
    line-height: 1;
}

.games-feature-row {
    display: grid;
    gap: 0.85rem;
}

.games-football-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16rem, 19rem);
    gap: 0.9rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 0.45rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 159, 28, 0.42) rgba(84, 68, 52, 0.22);
}

.games-football-row::-webkit-scrollbar,
.games-sports-strip::-webkit-scrollbar,
.games-filter-row::-webkit-scrollbar,
.game-source-selector::-webkit-scrollbar,
.game-stream-options::-webkit-scrollbar,
.streamed-row::-webkit-scrollbar {
    height: 0.38rem;
}

.games-football-row::-webkit-scrollbar-track,
.games-sports-strip::-webkit-scrollbar-track,
.games-filter-row::-webkit-scrollbar-track,
.game-source-selector::-webkit-scrollbar-track,
.game-stream-options::-webkit-scrollbar-track,
.streamed-row::-webkit-scrollbar-track {
    background: rgba(84, 68, 52, 0.18);
    border-radius: 999px;
}

.games-football-row::-webkit-scrollbar-thumb,
.games-sports-strip::-webkit-scrollbar-thumb,
.games-filter-row::-webkit-scrollbar-thumb,
.game-source-selector::-webkit-scrollbar-thumb,
.game-stream-options::-webkit-scrollbar-thumb,
.streamed-row::-webkit-scrollbar-thumb {
    background: rgba(255, 159, 28, 0.42);
    border-radius: 999px;
}

.games-grid {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    align-items: stretch;
}

.games-grid .streamed-game-card,
.games-football-row .streamed-game-card {
    height: 100%;
}

.streamed-card-media .game-team-badges {
    z-index: 0;
}

.streamed-card-media > img {
    z-index: 1;
}

.streamed-card-body .game-source-line {
    margin-top: 0.25rem;
    font-size: 0.8rem;
}

.game-view-count {
    display: none;
}

@media (max-width: 900px) {
    .games-hero-search {
        width: 100%;
    }

    .games-football-row {
        grid-auto-columns: minmax(14.5rem, 76vw);
    }
}

/* Streamed-inspired Games refresh */
.streamed-games-page {
    padding-top: 6.35rem;
    background:
        radial-gradient(circle at 70% 0%, rgba(255, 159, 28, 0.08), transparent 28rem),
        var(--background);
}

.streamed-games-container {
    display: grid;
    gap: 1.45rem;
}

.streamed-games-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 34rem);
    align-items: end;
    gap: 1rem;
    padding-top: 0.75rem;
}

.streamed-games-header h1 {
    font-size: clamp(2.8rem, 6vw, 5rem);
}

.streamed-games-header p:not(.eyebrow) {
    max-width: 42rem;
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: 1rem;
}

.streamed-games-search {
    justify-self: end;
    width: min(32rem, 100%);
    min-height: 3rem;
    background: rgba(17, 12, 8, 0.84);
}

.streamed-filter-panel {
    display: grid;
    gap: 1rem;
    padding: 0.85rem;
    border: 1px solid rgba(84, 68, 52, 0.72);
    border-radius: 0.55rem;
    background: rgba(24, 17, 11, 0.72);
}

.streamed-filter-row {
    gap: 0.65rem;
}

.streamed-filter-row .games-filter-button {
    min-width: 4.4rem;
    min-height: 2.8rem;
    border-radius: 0.35rem;
    background: rgba(20, 13, 6, 0.76);
}

.streamed-sports-strip {
    gap: 0.7rem;
    padding-bottom: 0;
}

.streamed-sport-chip {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border-radius: 0.35rem;
    padding: 0 1rem;
    background: rgba(20, 13, 6, 0.76);
    color: var(--text);
}

.streamed-sport-chip span {
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    color: var(--primary);
}

.streamed-section {
    display: grid;
    gap: 0.8rem;
}

.streamed-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.streamed-section-heading > span {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 800;
}

.streamed-section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 950;
    cursor: pointer;
}

.streamed-section-title .material-symbols-outlined {
    color: var(--primary);
    font-size: 1.25rem;
}

.streamed-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15.5rem, 1fr);
    grid-template-rows: 1fr;
    gap: 0.8rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    padding: 0.1rem 0 0.55rem;
}

.streamed-row > * {
    scroll-snap-align: start;
}

.streamed-game-card,
.streamed-card-skeleton {
    min-height: 0;
    border-radius: 0.45rem;
    background: rgba(23, 17, 12, 0.84);
    box-shadow: none;
}

.streamed-game-card {
    display: grid;
    align-content: start;
}

.streamed-game-card:hover {
    transform: translateY(-0.18rem);
    box-shadow: 0 18px 44px rgba(255, 159, 28, 0.13);
}

.streamed-card-media {
    height: auto;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid rgba(84, 68, 52, 0.44);
}

.streamed-card-media .poster-gradient {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    height: 45%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.54));
    pointer-events: none;
}

.streamed-team-badges {
    gap: clamp(0.65rem, 2vw, 1.2rem);
    background:
        radial-gradient(circle at 30% 35%, rgba(255, 159, 28, 0.14), transparent 9rem),
        linear-gradient(135deg, rgba(47, 82, 93, 0.24), rgba(10, 10, 10, 0.86)),
        rgba(20, 13, 6, 0.82);
}

.streamed-team-badges img,
.streamed-team-badges span:not(.streamed-versus) {
    width: clamp(3.1rem, 5vw, 4.65rem);
    height: clamp(3.1rem, 5vw, 4.65rem);
    font-size: 1rem;
}

.streamed-versus {
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(255, 159, 28, 0.18);
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.game-live-badge,
.game-view-count {
    position: absolute;
    z-index: 3;
    min-height: 1.45rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.game-live-badge {
    top: 0.5rem;
    left: 0.5rem;
    background: #e4362f;
    color: #fff;
}

.game-view-count {
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(11, 12, 16, 0.78);
    color: var(--text);
}

.game-view-count .material-symbols-outlined {
    font-size: 0.85rem;
}

.streamed-card-media .game-popular {
    top: 0.5rem;
    right: 0.5rem;
    min-height: 1.45rem;
    border-radius: 999px;
    font-size: 0.66rem;
}

.streamed-card-body {
    gap: 0.35rem;
    padding: 0.75rem 0.75rem 0.9rem;
}

.streamed-card-body h3 {
    min-height: 2.4rem;
    font-size: 1rem;
    line-height: 1.18;
}

.streamed-card-body p {
    min-height: auto;
    color: var(--muted);
    font-size: 0.86rem;
}

.streamed-card-body p span {
    color: rgba(240, 224, 210, 0.36);
}

.streamed-card-skeleton {
    aspect-ratio: 16 / 12;
}

.streamed-watch-hero {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem);
    align-items: center;
}

.streamed-watch-hero .game-watch-details h1 {
    max-width: 50rem;
    font-size: clamp(2.7rem, 6vw, 5.6rem);
}

.streamed-watch-art {
    min-height: 14rem;
    aspect-ratio: 16 / 10;
}

.streamed-watch-badges {
    gap: 0.8rem;
}

.streamed-watch-source-panel {
    max-width: 100%;
}

.streamed-source-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.streamed-source-pill {
    width: auto;
    min-height: 2.65rem;
    grid-template-columns: auto auto;
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
}

.streamed-source-pill .material-symbols-outlined {
    grid-row: auto;
    font-size: 1.1rem;
}

.streamed-watch-player {
    overflow: hidden;
    border-color: rgba(162, 141, 122, 0.28);
    background: #000;
}

.streamed-video-frame {
    min-height: clamp(24rem, 52vw, 43rem);
    background: #000;
}

.streamed-video-frame iframe {
    min-height: clamp(24rem, 52vw, 43rem);
}

.streamed-player-chrome {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    pointer-events: none;
}

.streamed-player-chrome.top {
    top: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), transparent);
}

.streamed-player-chrome h3 {
    font-size: 1.25rem;
}

.streamed-player-chrome .game-stream-meta {
    justify-content: flex-end;
}

.streamed-stream-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.8rem;
    background: rgba(11, 8, 6, 0.98);
}

.streamed-stream-pill {
    width: auto;
    min-height: 2.75rem;
    grid-template-columns: auto auto;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
}

.streamed-stream-pill .material-symbols-outlined {
    grid-row: span 2;
    font-size: 1.05rem;
}

@media (min-width: 1200px) {
    .streamed-row {
        grid-auto-columns: minmax(14.7rem, 1fr);
    }
}

@media (max-width: 900px) {
    .streamed-games-page {
        padding-top: 8.5rem;
    }

    .streamed-games-header,
    .streamed-watch-hero {
        grid-template-columns: 1fr;
    }

    .streamed-games-search {
        justify-self: stretch;
    }

    .streamed-row {
        grid-auto-columns: minmax(14.5rem, 78vw);
    }
}