/* ============================================================
   LinguaQuest – Global Styles
   Cartoon Sobre | Monochrome B&W
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

/* ─────────────────────────────────────────────────────────────
   RESET & VARIABLES
───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --black:    #0a0a0a;
    --gray-90:  #1a1a1a;
    --gray-80:  #2e2e2e;
    --gray-60:  #555;
    --gray-40:  #888;
    --gray-20:  #ccc;
    --gray-10:  #e8e8e8;
    --gray-05:  #f5f5f5;
    --white:    #fefefe;

    --font-main: 'Nunito', sans-serif;
    --font-mono: 'Space Mono', monospace;

    --border:        2.5px solid var(--black);
    --border-thick:  4px   solid var(--black);
    --border-light:  2px   solid var(--gray-10);

    --radius-sm:   8px;
    --radius-md:   16px;
    --radius-lg:   24px;
    --radius-xl:   36px;
    --radius-pill: 999px;

    --shadow-sm: 3px 3px 0 var(--black);
    --shadow-md: 5px 5px 0 var(--black);
    --shadow-lg: 8px 8px 0 var(--black);

    --topbar-h: 68px;
    --max-w:    860px;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    background: var(--gray-05);
    color: var(--black);
    min-height: 100vh;
    line-height: 1.5;
    font-size: 16px;
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.4rem, 4vw, 2rem); }
h3 { font-size: 1.2rem; }
p  { color: var(--gray-80); }
a  { color: inherit; text-decoration: none; }

/* ─────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    font-family:     var(--font-main);
    font-weight:     800;
    font-size:       1rem;
    padding:         .7rem 1.6rem;
    border-radius:   var(--radius-pill);
    border:          var(--border-thick);
    cursor:          pointer;
    transition:      transform .1s, box-shadow .1s;
    user-select:     none;
    white-space:     nowrap;
    background:      transparent;
}
.btn:active { transform: translate(3px, 3px) !important; box-shadow: none !important; }

.btn-primary  { background: var(--black); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover  { box-shadow: var(--shadow-md); transform: translate(-2px, -2px); }

.btn-secondary { background: var(--white); color: var(--black); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { box-shadow: var(--shadow-md); transform: translate(-2px, -2px); }

.btn-ghost { color: var(--gray-60); border-color: var(--gray-20); box-shadow: none; }
.btn-ghost:hover { border-color: var(--black); color: var(--black); }

.btn-sm { padding: .4rem 1rem;  font-size: .875rem; }
.btn-lg { padding: .9rem 2rem;  font-size: 1.1rem;  }

/* ─────────────────────────────────────────────────────────────
   CARDS
───────────────────────────────────────────────────────── */
.card {
    background:    var(--white);
    border:        var(--border-thick);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-md);
    padding:       1.5rem;
}

/* ─────────────────────────────────────────────────────────────
   FORM INPUTS
───────────────────────────────────────────────────────── */
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-group label { font-weight: 800; font-size: .875rem; }

input[type=text],
input[type=email],
input[type=password],
select,
textarea {
    width:         100%;
    font-family:   var(--font-main);
    font-size:     1rem;
    font-weight:   600;
    padding:       .7rem 1rem;
    border:        var(--border);
    border-radius: var(--radius-md);
    background:    var(--white);
    color:         var(--black);
    outline:       none;
    transition:    border-color .15s, box-shadow .15s;
    appearance:    none;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--black);
    box-shadow:   var(--shadow-sm);
}
input::placeholder { color: var(--gray-40); }

/* ─────────────────────────────────────────────────────────────
   CHIP / LANG PICKER
───────────────────────────────────────────────────────── */
.chip {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       .3rem .8rem;
    border:        var(--border);
    border-radius: var(--radius-pill);
    font-weight:   800;
    font-size:     .8rem;
    background:    var(--white);
    cursor:        pointer;
    transition:    background .1s, color .1s;
    user-select:   none;
}
.chip:hover     { background: var(--gray-05); }
.chip.selected  { background: var(--black); color: var(--white); box-shadow: var(--shadow-sm); }

.lang-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* ─────────────────────────────────────────────────────────────
   TOPBAR  ← slider nav centered here
───────────────────────────────────────────────────────── */
.topbar {
    position:       sticky;
    top:            0;
    z-index:        100;
    background:     var(--white);
    border-bottom:  var(--border-thick);
    height:         var(--topbar-h);
    padding:        0 1.25rem;

    /* Three equal columns: logo | nav-slider | user-info */
    display:               grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:           center;
    gap:                   1rem;
}

/* Left: logo */
.topbar-logo {
    font-size:       1.2rem;
    font-weight:     900;
    letter-spacing:  -0.05em;
    display:         flex;
    align-items:     center;
    gap:             8px;
    justify-self:    start;
}
.logo-icon {
    width:         34px;
    height:        34px;
    border:        var(--border-thick);
    border-radius: var(--radius-sm);
    background:    var(--black);
    color:         var(--white);
    display:       grid;
    place-items:   center;
    flex-shrink:   0;
}

/* ── Center: slider nav pill ─────────────────────────────── */
.topbar-nav {
    /* pill container */
    position:      relative;
    display:       flex;
    align-items:   center;
    background:    var(--gray-05);
    border:        var(--border-thick);
    border-radius: var(--radius-pill);
    padding:       4px;
    gap:           0;
    /* fixed width so it doesn't stretch */
    width:         320px;
}

/* The black sliding indicator */
.topbar-nav-slider {
    position:      absolute;
    top:           4px;
    left:          4px;
    height:        calc(100% - 8px);
    /* width = 1/3 of inner track */
    width:         calc((320px - 8px) / 3);
    background:    var(--black);
    border-radius: var(--radius-pill);
    transition:    transform .3s cubic-bezier(.4, 0, .2, 1);
    z-index:       0;
    /* pointer events: none so clicks pass through */
    pointer-events: none;
}

/* Individual nav buttons */
.topbar-nav-btn {
    position:        relative;
    z-index:         1;
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    height:          36px;
    padding:         0 .5rem;
    background:      transparent;
    border:          none;
    border-radius:   var(--radius-pill);
    cursor:          pointer;
    font-family:     var(--font-main);
    font-weight:     800;
    font-size:       .82rem;
    color:           var(--gray-40);
    transition:      color .25s;
    white-space:     nowrap;
}
.topbar-nav-btn svg { flex-shrink: 0; transition: stroke .25s; }

/* Active state: text + icon turn white (pill is behind them) */
.topbar-nav-btn.active          { color: var(--white); }
.topbar-nav-btn.active svg      { stroke: var(--white); }

/* Right: user stats */
.topbar-stats {
    display:        flex;
    align-items:    center;
    gap:            .6rem;
    justify-self:   end;
    font-weight:    700;
    font-size:      .85rem;
}
.stat-badge {
    display:       flex;
    align-items:   center;
    gap:           5px;
    padding:       .28rem .7rem;
    border:        var(--border);
    border-radius: var(--radius-pill);
    background:    var(--gray-05);
    font-weight:   800;
    white-space:   nowrap;
}

/* ─────────────────────────────────────────────────────────────
   LAYOUT (sidebar only on very wide screens now that nav is in topbar)
───────────────────────────────────────────────────────── */
.layout-with-sidebar {
    display:               grid;
    grid-template-columns: 1fr;          /* no sidebar by default */
    max-width:             var(--max-w);
    margin:                0 auto;
    padding:               2rem 1.5rem;
    width:                 100%;
}

/* Keep sidebar hidden — topbar nav replaces it */
.sidebar { display: none !important; }

/* Pages */
main  { flex: 1; min-width: 0; }
.page { display: none; animation: fadeSlide .25s ease; }
.page.active { display: block; }

@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   BOTTOM NAV  (kept for very small screens as fallback)
   Hidden on ≥ 480px because topbar slider handles navigation
───────────────────────────────────────────────────────── */
.bottom-nav { display: none; }   /* always hidden — topbar handles it */

/* ─────────────────────────────────────────────────────────────
   AUTH PAGES
───────────────────────────────────────────────────────── */
.auth-wrap {
    min-height:  100vh;
    display:     grid;
    place-items: center;
    padding:     2rem 1rem;
    background:  var(--gray-05);
}
.auth-card {
    width:         100%;
    max-width:     440px;
    background:    var(--white);
    border:        var(--border-thick);
    border-radius: var(--radius-xl);
    box-shadow:    var(--shadow-lg);
    padding:       2.25rem;
}
.auth-logo {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    font-size:       1.3rem;
    font-weight:     900;
    margin-bottom:   1.5rem;
}

/* Auth tabs */
.auth-tabs {
    display:       flex;
    margin-bottom: 1.5rem;
    border:        var(--border-thick);
    border-radius: var(--radius-pill);
    overflow:      hidden;
}
.auth-tab {
    flex:        1;
    padding:     .6rem 1rem;
    font-family: var(--font-main);
    font-weight: 800;
    font-size:   .9rem;
    border:      none;
    cursor:      pointer;
    background:  transparent;
    color:       var(--gray-60);
    transition:  background .15s, color .15s;
}
.auth-tab.active { background: var(--black); color: var(--white); }

.auth-form-inner { display: flex; flex-direction: column; gap: 1rem; }

/* ─────────────────────────────────────────────────────────────
   MULTI-STEP REGISTER
───────────────────────────────────────────────────────── */
.reg-steps {
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   1.5rem;
}

.reg-step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
}

.reg-step-dot {
    width:         32px;
    height:        32px;
    border-radius: 50%;
    border:        var(--border-thick);
    background:    var(--white);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-family:   var(--font-mono);
    font-weight:   700;
    font-size:     .85rem;
    color:         var(--gray-40);
    transition:    all .2s;
}
.reg-step.active .reg-step-dot {
    background:  var(--black);
    color:       var(--white);
    border-color: var(--black);
    box-shadow:  var(--shadow-sm);
}
.reg-step.done .reg-step-dot {
    background:  var(--black);
    color:       var(--white);
    border-color: var(--black);
}

.reg-step-lbl {
    font-size:      .63rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--gray-40);
}
.reg-step.active .reg-step-lbl { color: var(--black); }
.reg-step.done   .reg-step-lbl { color: var(--gray-60); }

.reg-step-line {
    width:         48px;
    height:        3px;
    background:    var(--gray-10);
    border-radius: 2px;
    margin:        0 4px 20px;  /* push down to align with dots */
    transition:    background .3s;
}
.reg-step-line.done { background: var(--black); }

.reg-step-title              { margin-bottom: 1rem; }
.reg-step-title h3           { font-size: 1.2rem; margin-bottom: 2px; }
.reg-step-title p            { font-size: .875rem; color: var(--gray-40); }

/* ─────────────────────────────────────────────────────────────
   DASHBOARD
───────────────────────────────────────────────────────── */
.dashboard-hero {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   2rem;
    flex-wrap:       wrap;
}

.stats-row {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1rem;
    margin-bottom:         2rem;
}

.stat-card {
    background:    var(--white);
    border:        var(--border-thick);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-sm);
    padding:       1.25rem;
    display:       flex;
    flex-direction: column;
    gap:           6px;
}
.stat-card .stat-label {
    font-size:      .75rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:          var(--gray-40);
}
.stat-card .stat-value { font-size: 2rem; font-weight: 900; line-height: 1; }
.stat-card .stat-icon  { color: var(--black); }

.daily-bar-wrap { margin-bottom: 2rem; }

.progress-track { display: flex; gap: 8px; }
.prog-dot {
    flex:          1;
    height:        12px;
    border:        var(--border);
    border-radius: var(--radius-pill);
    background:    var(--gray-10);
    transition:    background .3s;
}
.prog-dot.done { background: var(--black); }

/* ─────────────────────────────────────────────────────────────
   GEAR LESSON MAP
───────────────────────────────────────────────────────── */
.gear-map-header { margin-bottom: 2rem; }

.gear-map {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    padding-bottom: 2rem;
}

/* Each row positions the gear via --offset custom prop */
.gear-row {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    padding-left:   calc(50% - 55px + var(--offset, 0px));
    transition:     padding-left .3s;
}

/* The clickable gear widget */
.gear-node {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    width:          110px;
    cursor:         default;
}
.gear-node.gear-available,
.gear-node.gear-completed { cursor: pointer; }

.gear-node.gear-available:hover .gear-svg,
.gear-node.gear-completed:hover .gear-svg { transform: rotate(36deg); }

.gear-node.gear-locked { opacity: .55; }

.gear-svg { transition: transform .55s ease; display: block; }

.gear-label {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            2px;
    text-align:     center;
    max-width:      110px;
}
.gear-num {
    font-family: var(--font-mono);
    font-size:   .7rem;
    font-weight: 700;
    color:       var(--gray-40);
}
.gear-title {
    font-weight: 800;
    font-size:   .78rem;
    line-height: 1.2;
    color:       var(--black);
}
.gear-node.gear-locked .gear-title { color: var(--gray-40); }

/* Vertical connector line between gears */
.gear-connector-line {
    width:         3px;
    height:        36px;
    background:    var(--gray-20);
    border-radius: 2px;
    margin:        4px 0 4px 52px;  /* 52 = half of 110px gear width - 1px */
}

/* ─────────────────────────────────────────────────────────────
   EXERCISE SCREEN
───────────────────────────────────────────────────────── */
.exercise-screen { max-width: 560px; margin: 0 auto; }

.ex-progress {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    margin-bottom: 2rem;
}
.ex-progress-bar {
    flex:          1;
    height:        10px;
    background:    var(--gray-10);
    border:        var(--border);
    border-radius: var(--radius-pill);
    overflow:      hidden;
}
.ex-progress-fill {
    height:        100%;
    background:    var(--black);
    border-radius: var(--radius-pill);
    transition:    width .4s cubic-bezier(.4, 0, .2, 1);
}
.ex-close-btn {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       var(--gray-40);
    transition:  color .1s;
    padding:     4px;
    display:     flex;
    align-items: center;
}
.ex-close-btn:hover { color: var(--black); }

.ex-card {
    background:    var(--white);
    border:        var(--border-thick);
    border-radius: var(--radius-xl);
    box-shadow:    var(--shadow-md);
    padding:       2rem;
    margin-bottom: 1.5rem;
}
.ex-type-badge {
    display:        inline-block;
    font-size:      .7rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding:        .2rem .6rem;
    border:         var(--border);
    border-radius:  var(--radius-pill);
    margin-bottom:  1rem;
    color:          var(--gray-60);
}
.ex-prompt {
    font-size:     1.4rem;
    font-weight:   900;
    margin-bottom: 1.5rem;
    line-height:   1.3;
}

/* Multiple choice */
.mcq-options { display: flex; flex-direction: column; gap: .75rem; }
.mcq-option {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       1rem;
    border:        var(--border-thick);
    border-radius: var(--radius-lg);
    cursor:        pointer;
    font-weight:   700;
    background:    var(--white);
    transition:    background .1s, box-shadow .1s, transform .1s;
}
.mcq-option:hover    { background: var(--gray-05); transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); }
.mcq-option.selected { background: var(--black); color: var(--white); box-shadow: var(--shadow-sm); transform: translate(-2px,-2px); }
.mcq-option.correct  { background: var(--black); color: var(--white); }
.mcq-option.wrong    { background: var(--gray-80); color: var(--white); opacity: .7; }

.mcq-letter {
    width:         32px;
    height:        32px;
    border:        2px solid currentColor;
    border-radius: var(--radius-sm);
    display:       grid;
    place-items:   center;
    font-family:   var(--font-mono);
    font-size:     .8rem;
    font-weight:   700;
    flex-shrink:   0;
}

/* Fill blank / translation */
.fill-blank-input {
    font-size:     1.3rem;
    font-weight:   900;
    text-align:    center;
    letter-spacing: .05em;
    padding:       1rem;
    border-radius: var(--radius-lg);
}
.fill-blank-input.correct { border-color: var(--black); background: var(--gray-05); }
.fill-blank-input.wrong   { border-color: var(--gray-40); }

/* Matching */
.matching-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.match-item {
    padding:       .8rem;
    border:        var(--border-thick);
    border-radius: var(--radius-lg);
    text-align:    center;
    font-weight:   800;
    cursor:        pointer;
    background:    var(--white);
    transition:    all .1s;
}
.match-item:hover    { background: var(--gray-05); }
.match-item.selected { background: var(--black);   color: var(--white); }
.match-item.matched  { background: var(--gray-80); color: var(--white); opacity: .8; pointer-events: none; }
.match-item.wrong    { animation: shake .3s ease; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

/* Result feedback bar */
.ex-result-bar {
    padding:       1.5rem;
    border:        var(--border-thick);
    border-radius: var(--radius-xl);
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           1rem;
    flex-wrap:     wrap;
    transition:    background .3s;
}
.ex-result-bar.correct-bar { background: var(--black); color: var(--white); }
.ex-result-bar.wrong-bar   { background: var(--gray-10); }

.ex-result-label { font-size: 1.1rem; font-weight: 900; }
.ex-result-sub   { font-size: .875rem; opacity: .8; margin-top: 2px; }
.xp-pop { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; }

/* ─────────────────────────────────────────────────────────────
   LEADERBOARD
───────────────────────────────────────────────────────── */
.leaderboard-list { display: flex; flex-direction: column; gap: .75rem; }

.lb-row {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    padding:       1rem 1.25rem;
    background:    var(--white);
    border:        var(--border-thick);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-sm);
    transition:    transform .1s, box-shadow .1s;
}
.lb-row:hover  { transform: translate(-2px,-2px); box-shadow: var(--shadow-md); }
.lb-row.me-row { background: var(--black); color: var(--white); }

.lb-rank   { width: 36px; font-family: var(--font-mono); font-weight: 700; text-align: center; flex-shrink: 0; }
.lb-pseudo { flex: 1; font-weight: 800; }
.lb-streak { font-size: .75rem; opacity: .7; }
.lb-xp     { font-family: var(--font-mono); font-weight: 700; text-align: right; }

/* ─────────────────────────────────────────────────────────────
   TOAST NOTIFICATIONS
───────────────────────────────────────────────────────── */
#toast-container {
    position:   fixed;
    bottom:     2rem;
    left:       50%;
    transform:  translateX(-50%);
    z-index:    9999;
    display:    flex;
    flex-direction: column;
    align-items:    center;
    gap:            .5rem;
    pointer-events: none;
}
.toast {
    background:    var(--black);
    color:         var(--white);
    padding:       .75rem 1.5rem;
    border-radius: var(--radius-pill);
    font-weight:   800;
    font-size:     .9rem;
    box-shadow:    var(--shadow-md);
    white-space:   nowrap;
    animation:     toastIn .25s ease, toastOut .3s ease 2.5s forwards;
}
.toast.error { background: var(--gray-80); }

@keyframes toastIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────── */

/* Medium screens: shrink topbar nav */
@media (max-width: 860px) {
    .topbar { padding: 0 1rem; gap: .75rem; }
    .topbar-nav { width: 270px; }
    .topbar-nav-slider { width: calc((270px - 8px) / 3); }
    .topbar-nav-btn { font-size: .78rem; gap: 4px; }
    .topbar-nav-btn svg { width: 16px; height: 16px; }
    .layout-with-sidebar { padding: 1.5rem 1rem; }
}

/* Small screens: hide label text in nav, keep icons */
@media (max-width: 600px) {
    .topbar { grid-template-columns: auto auto auto; padding: 0 .75rem; gap: .5rem; }
    .topbar-nav { width: 168px; }
    .topbar-nav-slider { width: calc((168px - 8px) / 3); }
    .topbar-nav-btn span { display: none; }          /* hide text, keep icon */
    .topbar-nav-btn { padding: 0 .25rem; }
    .topbar-logo span { display: none; }             /* hide "LinguaQuest" text */
    .stat-badge:last-child { display: none; }        /* hide pseudo badge */
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .layout-with-sidebar { padding: 1rem .75rem; }
    .ex-prompt { font-size: 1.1rem; }
    .gear-row  { padding-left: calc(50% - 55px + var(--offset, 0px) * 0.6); }
    .auth-card { padding: 1.5rem; }
}

@media (max-width: 420px) {
    .stats-row { grid-template-columns: 1fr; }
    .reg-step-line { width: 28px; }
    .topbar-nav { width: 148px; }
    .topbar-nav-slider { width: calc((148px - 8px) / 3); }
}