:root {
    --brand-red: #e50914;
    --brand-red-hover: #b81d24;
    --brand-font-family: 'Bebas Neue', sans-serif;
    --content-font-family: 'Inter', sans-serif;
    --text-main: #ffffff;
    --text-muted: #a3a3a3;

    --bg-groovy-green: rgb(28, 168, 28);

    --bg-black: #050505;
    --bg-black-flat: #2a2a2a;
    --bg-black-85: rgba(0, 0, 0, 0.85);
    --bg-black-70: rgba(0, 0, 0, 0.7);
    --bg-dark-panel: #101010;
    --bg-side-bar: #000000;

    --bg-row-dark-gradient: linear-gradient(180deg, var(--bg-dark-panel) 0%, var(--bg-black) 100%);
    --bg-row-light-gradient: linear-gradient(180deg, var(--hover-overlay) 0%, var(--text-muted) 100%);
    --bg-gradient-black-70: linear-gradient(to bottom, var(--bg-black-70) 0%, var(--bg-side-bar) 100%);
    --border-color: #333;

    --glass-bg: rgba(20, 20, 20, 0.85);
    --glass-bg-light: rgba(255, 255, 255, 0.15);
    --glass-bg-white: rgba(255, 255, 255, 0.75);
    --glass-bg-frosted: rgba(255, 255, 255, 0.4);
    --glass-bg-brand: rgba(229, 9, 20, 0.3);
    --glass-bg-brand-hover: rgba(184, 29, 36, 0.3);

    --hover-overlay: rgba(255, 255, 255, 0.1);



    --font-heading: var(--brand-font-family);
    --font-body: var(--content-font-family);

    --bg-scrollbar-track: transparent;
    --bg-scrollbar-controls: ;
    --bg-scrollbar-controls-hover: var(--hover-overlay);



    /* Theme Control */
    --bg-color: var(--bg-black);
    --sidebar-bg: var(--bg-side-bar);
    --card-bg: var(--bg-dark-panel);
    --text-primary: var(--text-main);
    --text-secondary: var(--text-muted);
    --accent-color: var(--brand-red);
    --accent-color-hover: var(--brand-red-hover);
    --accent-hover: var(--brand-red-hover);
    --modal-overlay: var(--glass-bg);
    --modal-bg: var(--bg-black-85);

    /* Side Bar List Item */
    --sbl-bg: var(--bg-black-flat);
    --sbl-bg-hover: var(--glass-bg-light);
    --sbl-tab: var(--brand-red);
    --sbl-tab-hover: var(--bg-groovy-green);


    /* Dimensions & Spacing */
    --gap-size: 1.5rem;
    --gap-inner-controls: 10px;
    --container-padding: 2rem;
    --border-radius: 4px;
    --sidebar-width: 250px;

    /* Typography */
    --font-family: var(--font-body);
    --font-size-base: 16px;
    --font-size-md: 1.1rem;
    --font-size-lg: 1.5rem;
    --font-size-xl: 2.1rem;
    --font-size-sm: 0.9rem;

    /* effects */
    --fx-filter-blur: blur(5px);
    --fx-btn-box-shadow-size: 0 10px 20px;
    --fx-transition-all: all 0.3s ease-in-out;

}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    cursor: default;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
textarea {
    cursor: text;
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar,
::-webkit-scrollbar {
    cursor: grab;
}

::-webkit-scrollbar-button:active,
::-webkit-scrollbar-thumb:active {
    cursor: grabbing;
}

.action-btn,
.action-btn *,
.btn,
.btn *,
.btn-large,
.btn-large *,
.close-btn,
.closeBtn,
.episode-card,
.episode-card *,
.exercise-item,
.fa-xmark,
.hero-badge,
.hero-badge *,
.inline-btn,
.modal-close,
.modal-footer a,
.mobile-menu-btn,
.nav-item,
.nav-item *,
.nav-link,
.nav-link *,
.option,
.question-card,
.question-card *,
.quiz-btn,
.series-card,
.series-card *,
.series-card div,
.series-card img,
.series-grid,
.start-btn,
.startBtn,
.startButton,
.strip-card,
.strip-card *,
.submit-btn,
.word-chip,
#modal-play-button,
#modal-play-button *,
#series-modal .close-btn,
::-webkit-scrollbar,
::-webkit-scrollbar-button,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
a,
a *,
a span,
button,
button *,
button *,
select {
    cursor: pointer;
}

.word-chip.used {
    pointer-events: none;
}

.quiz-btn:disabled {
    cursor: default;
}


.hidden {
    display: none !important;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    overflow-x: hidden;
    line-height: 1.6;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
}

h2{
    font-size: clamp(var(--font-size-lg), 1vw, var(--font-size-xl));
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

h3 {
    font-size: clamp(var(--font-size-base), 4vw, var(--font-size-md));
    
}

strong{
    display:block;
    font-weight: 750;
    font-size: var(--font-size-sm);
    padding:4px 0;
    transition:all 1.5s ease-in-out;
}

strong:hover{
    font-weight:900;
}

p {
    font-size: var(--font-size-base);
    font-family: var(--font-body);
}


::-webkit-scrollbar,
::-webkit-scrollbar-buttn,
::-webkit-scrollbar-thumb {
    box-sizing: border-box;
    height: 20px;
    width: 20px;
    transition: all 1s ease-in-out;
    opacity: 0.5;
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-thumb {
    border-right: 8px solid var(--bg-color);
    border-left: 6px solid var(--bg-color);
    background-color: var(--glass-bg-brand-hover);
    backdrop-filter: var(--fx-filter-blur);
}

::-webkit-scrollbar-button:hover,
::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-red-hover);
    opacity: 1;
}


.nav-list ::-webkit-scrollbar,
.nav-list ::-webkit-scrollbar-button,
.nav-list ::-webkit-scrollbar-thumb {
    width: 16px;
}

.nav-list ::-webkit-scrollbar-button,
.nav-list ::-webkit-scrollbar-thumb {
    border: unset;
    border-right: 5px solid var(--sidebar-bg);
    border-left: 5px solid var(--sidebar-bg);
}


.category-row ::-webkit-scrollbar {
    height: 36px;
}

.category-row ::-webkit-scrollbar-button,
.category-row ::-webkit-scrollbar-thumb {
    border: unset;
    border-bottom: 18px solid var(--bg-color);
    border-top: 12px solid var(--bg-color);
}

.category-row ::-webkit-scrollbar-button:hover,
.category-row ::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-red-hover);
    opacity: 1;
}

.strip-container::-webkit-scrollbar {
    height: 5px;
}

.strip-container::-webkit-scrollbar-thumb {
    background: var(--brand-red);
    border-radius: 10px;
}



.scroll-container{
    overflow:hidden;
    width:fit-content;
    height:100%;
    min-width:125px;
    min-height:125px;
    padding:0;
    margin:0;
    overflow: hidden;
    display: flex;
    gap: var(--gap-size);
    padding-bottom: 1rem;
    scroll-behavior: smooth;
    flex-wrap:nowrap;

}


.scroll-container.vert{
    
    width:100%!important;


}


.scroll-container.horz,
.category-row>.row-canvas>.scroll-container{
    overflow-x:auto!important;
    
}





button,
.button,
.btn {
    padding: 12px 30px;
    border-radius: var(--border-radius);
    font-weight: 600;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-inner-controls);
    backdrop-filter: var(--fx-filter-blur);
    transition: all 0.3s;
}

button:hover,
.button:hover,
.btn:hover {
    transform: translateY(2px);
    box-shadow: var(--fx-btn-box-shadow-size) var(--glass-bg-white);
    text-shadow: var(--fx-btn-box-shadow-size) var(--glass-white);
    color: var(--text-primary);
}

.btn-lg {
    padding: 15px 40px;
    font-size: var(--font-size-md);
}

.btn-sm {
    padding: 8px 15px;
    font-size: var(--font-size-sm);
}


.btn-red {
    background: var(--brand-red);
    color: var(--text-main);
}


.btn-red:hover {
    background: var(--brand-red-hover);

}


.btn-glass {
    background: var(--glass-bg-white);
}

.btn-glass:hover {
    background: var(--glass-bg-frosted);
}


.deck-list{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    row-gap:var(--gap-inner-controls);
}



.deck-list>p.muted{
    width:100%;
}


.deck-list-item {
    padding: 6px 4px;
    width:100%;
    line-height:8px;
    background-color: var(--sbl-bg);
    color: var(--text-secondary);
    border-left: 3px solid var(--sbl-tab);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    row-gap: var(--gap-inner-controls);
    font-size: 10px;
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: all 1.5s ease-in-out;
    justify-content: left;
    align-items: left;
}

.deck-list-item:active,
.deck-list-item:hover {
    background-color: var(--sbl-bg-hover);
    color: var(--text-main);
    border-left: 12px solid var(--sbl-tab-hover);
    border-right: 12px solid var(--bg-groovy-green);
    padding-right: 1px;
}

/* 3-2 — a row that OPENS something instead of going somewhere.
   The two vocabulary options (Vocab, Vocab Practice) are rows in this column
   like every other row, but they have no URL: they raise a dialog over the page
   they are already on. An <a> with no href gets no pointer from the browser, so
   the one thing that differs from a link is put back by hand. Everything else
   about it — the fill, the tab, the hover — is deliberately identical, because
   the owner asked for "2 options similar to the other columns". */
.deck-list-item.is-action {
    cursor: pointer;
}

.deck-list-item.is-action:focus-visible {
    outline: 2px solid var(--accent-color, #e50914);
    outline-offset: 1px;
}



.deck-list.learning-list{
    width:100%;
    min-width:220px;
    max-height:140px;
    overflow-x: hidden;
    overflow-y:auto;

}