/* ========================================================= */
/* 1. BASE STYLES                                            */
/* ========================================================= */

.gauge-segment {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease, stroke-dashoffset 0.6s ease;
}
.gauge-segment.segment-bg { opacity: 0.2; }

/* Slider */
.slider-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
    outline: none;
}
.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #4f46e5;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4);
    transition: transform 0.15s ease;
}
.slider-input::-webkit-slider-thumb:hover { transform: scale(1.15); }

.slider-tooltip {
    position: absolute;
    top: -24px;
    transform: translateX(-50%);
    background: #4f46e5;
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    pointer-events: none;
    white-space: nowrap;
}

/* Animations */
@keyframes moveCar { 0% { left: -10%; } 100% { left: 100%; } }
.anim-car {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
    animation: moveCar linear infinite;
}

@keyframes confettiFall {
    0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate3d(var(--drift, 0px), 110vh, 0) rotate(720deg); opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn { animation: fadeIn 0.3s ease forwards; }


/* ========================================================= */
/* 2. DARK MODE — GLOBAL + GAME                              */
/* ========================================================= */

body.dark-mode {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* Header + top navigation */
body.dark-mode header {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-mode .dark-logo-text { color: #f8fafc !important; }

body.dark-mode nav a:not(#premium-btn),
body.dark-mode nav button,
body.dark-mode nav > div {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}
body.dark-mode nav a:not(#premium-btn):hover,
body.dark-mode nav button:hover {
    background-color: #475569 !important;
}

body.dark-mode #premium-btn {
    color: #ffffff !important;
    background: linear-gradient(to right, #fbbf24, #eab308) !important;
    border-color: transparent !important;
}

body.dark-mode #language-select {
    color: #f8fafc !important;
    background-color: transparent !important;
}
body.dark-mode #language-select option {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Cards */
body.dark-mode .bg-white {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* Headings */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4,
body.dark-mode span.text-slate-800, body.dark-mode span.text-slate-900,
body.dark-mode div.text-slate-800, body.dark-mode div.text-slate-900 {
    color: #f8fafc !important;
}

/* Muted text */
body.dark-mode p.text-slate-600,
body.dark-mode p.text-slate-500,
body.dark-mode span.text-slate-500,
body.dark-mode span.text-slate-400,
body.dark-mode .text-slate-400 {
    color: #cbd5e1 !important;
}

/* System boxes */
body.dark-mode .system1-box,
body.dark-mode .system2-box {
    background-color: #334155 !important;
    border-color: #475569 !important;
}
body.dark-mode .system1-box *,
body.dark-mode .system2-box * { background-color: transparent; }
body.dark-mode .system1-box h4,
body.dark-mode .system2-box h4 { color: #f8fafc !important; }
body.dark-mode .system1-box p,
body.dark-mode .system2-box p { color: #cbd5e1 !important; }

/* Pillar boxes */
body.dark-mode section .grid .bg-slate-50 {
    background-color: #334155 !important;
    border-color: #475569 !important;
}
body.dark-mode section .grid .bg-slate-50 p { color: #cbd5e1 !important; }

/* Category sidebar */
body.dark-mode .cat-link { color: #cbd5e1 !important; }
body.dark-mode .cat-link:hover {
    background-color: #334155 !important;
    color: #f8fafc !important;
}
body.dark-mode .cat-link.bg-indigo-50 {
    background-color: #312e81 !important;
    color: #c7d2fe !important;
}

/* Game screen inner boxes */
body.dark-mode #center-challenge-box div.bg-slate-50,
body.dark-mode #center-challenge-box div.bg-white {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

/* Achievements modal */
body.dark-mode #achievements-modal .bg-white,
body.dark-mode #achievements-modal .bg-slate-50\/50 {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-mode .ach-card-unlocked {
    background-color: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
}
body.dark-mode .ach-card-locked {
    background-color: #334155 !important;
    border-color: #475569 !important;
}
body.dark-mode .ach-card-locked h4 { color: #f8fafc !important; }
body.dark-mode .ach-card-locked p { color: #cbd5e1 !important; }

/* Analytics modal */
body.dark-mode #analytics-modal .bg-white,
body.dark-mode #analytics-modal .bg-slate-50\/50 {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Inputs */
body.dark-mode input[type="number"],
body.dark-mode input[type="text"],
body.dark-mode input[type="range"] {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

/* SVG score text */
body.dark-mode #today-score-text { fill: #f8fafc !important; }

/* Ad boxes */
body.dark-mode .ad-box {
    background: linear-gradient(to bottom right, #334155, #1e293b) !important;
    border-color: #475569 !important;
}
body.dark-mode .ad-inner {
    background-color: rgba(15, 23, 42, 0.85) !important;
}

/* Intuition tip card */
body.dark-mode .intuition-tip-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-mode .intuition-tip-card .text-indigo-950 { color: #f8fafc !important; }
body.dark-mode .intuition-tip-card .text-slate-600 { color: #cbd5e1 !important; }

/* Dark-mode fixes for in-game friction / time blocks */
body.dark-mode .dark-fix-box-a {
    background-color: #312e81 !important;
    border-color: #4338ca !important;
    color: #e0e7ff !important;
}
body.dark-mode .dark-fix-box-b {
    background-color: #881337 !important;
    border-color: #be123c !important;
    color: #ffe4e6 !important;
}
body.dark-mode .dark-fix-text { color: #f1f5f9 !important; }
body.dark-mode .dark-fix-muted { color: #cbd5e1 !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
body.dark-mode ::-webkit-scrollbar-thumb { background: #475569; }


/* ========================================================= */
/* 3. CONTENT NAVIGATION                                     */
/* ========================================================= */

.content-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
}
body.dark-mode .content-nav {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: #334155 !important;
}
body.dark-mode .content-nav a { color: #cbd5e1 !important; }
body.dark-mode .content-nav a:hover { color: #a5b4fc !important; }


/* ========================================================= */
/* 4. INTEGRATED CONTENT SECTIONS + STANDALONE PAGES         */
/* ========================================================= */

/* The .content-section / .content-h2 / .content-h3 / .content-list /
   .content-meta classes are used BOTH on the homepage (inside the
   main grid as col-span-12 blocks) and on the standalone pages
   (privacy.html, terms.html, about.html, contact.html).
   This keeps the visual language identical across the whole site. */

.content-section {
    background: #ffffff;
    border-radius: 1.5rem;
    border: 1px solid #e2e8f0;
    padding: 2rem;
    scroll-margin-top: 80px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.content-h2 {
    font-size: 1.5rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
}

.content-h3 {
    font-size: 1rem;
    font-weight: 800;
    color: #1e293b;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.content-section p {
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.75;
    margin-bottom: 0.9rem;
}

/* Lead paragraph at top of each section */
.content-section > p:first-of-type {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.content-section strong { color: #1e293b; font-weight: 700; }
.content-section em { color: #475569; }

.content-list {
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0 1.25rem 0;
}
.content-list li {
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.7;
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    border-bottom: 1px dashed #e2e8f0;
}
.content-list li:last-child { border-bottom: none; }
.content-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0.5rem;
    color: #6366f1;
    font-weight: 900;
}
.content-list a {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 700;
}
.content-list a:hover { text-decoration: underline; }

.content-section code {
    background: #f1f5f9;
    color: #1e293b;
    padding: 0.15rem 0.4rem;
    border-radius: 0.35rem;
    font-size: 0.8em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.content-meta {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Grid of the 5 test preview cards */
.test-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0 1.5rem 0;
}
@media (min-width: 640px) {
    .test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .test-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.test-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1rem;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.test-card:hover {
    border-color: #c7d2fe;
    background: #f5f7ff;
    transform: translateY(-2px);
}
.test-card-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 0.55rem;
}
.test-card-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.35rem;
    line-height: 1.3;
}
.test-card-text {
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
}


/* ========================================================= */
/* 5. DARK MODE — CONTENT SECTIONS                           */
/* ========================================================= */

body.dark-mode .content-section {
    background: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-mode .content-h2 { color: #f8fafc !important; }
body.dark-mode .content-h3 { color: #e2e8f0 !important; }
body.dark-mode .content-section p,
body.dark-mode .content-list li { color: #cbd5e1 !important; }
body.dark-mode .content-section > p:first-of-type { color: #94a3b8 !important; }
body.dark-mode .content-section strong { color: #f8fafc !important; }
body.dark-mode .content-list li { border-bottom-color: #334155 !important; }
body.dark-mode .content-list li::before { color: #a5b4fc !important; }
body.dark-mode .content-list a { color: #a5b4fc !important; }
body.dark-mode .content-section code {
    background: #0f172a !important;
    color: #f8fafc !important;
}
body.dark-mode .content-meta {
    color: #64748b !important;
    border-top-color: #334155 !important;
}

/* Test cards */
body.dark-mode .test-card {
    background: #0f172a !important;
    border-color: #334155 !important;
}
body.dark-mode .test-card:hover {
    border-color: #6366f1 !important;
    background: #1e293b !important;
}
body.dark-mode .test-card-title { color: #f8fafc !important; }
body.dark-mode .test-card-text { color: #cbd5e1 !important; }


/* ========================================================= */
/* 6. RESPONSIVE TYPOGRAPHY                                  */
/* ========================================================= */

@media (min-width: 768px) {
    .content-h2 { font-size: 1.75rem; }
    .content-h3 { font-size: 1.05rem; }
    .content-section p,
    .content-list li { font-size: 0.95rem; }
}


/* ========================================================= */
/* 7. RTL (ARABISCH) + CJK / CYRILLIC FONT SUPPORT           */
/* ========================================================= */

html[lang="zh"] body {
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}
html[lang="ru"] body {
    font-family: 'Segoe UI', 'Noto Sans', 'PT Sans', 'Arial', sans-serif;
}
html[dir="rtl"] body {
    font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Arial', sans-serif;
}
html[dir="rtl"] .text-left { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }
html[dir="rtl"] nav { flex-direction: row-reverse; }
html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
html[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }
html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
html[dir="rtl"] .space-x-1 > * + * { margin-left: 0; margin-right: 0.25rem; }
html[dir="rtl"] .space-x-2 > * + * { margin-left: 0; margin-right: 0.5rem; }
html[dir="rtl"] .space-x-3 > * + * { margin-left: 0; margin-right: 0.75rem; }
html[dir="rtl"] .space-x-6 > * + * { margin-left: 0; margin-right: 1.5rem; }

/* Numbers in RTL stay LTR */
html[dir="rtl"] #level-timer-badge,
html[dir="rtl"] #countdown-timer,
html[dir="rtl"] #today-score-text,
html[dir="rtl"] #overall-score-display,
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="range"],
html[dir="rtl"] .text-2xl.font-black {
    direction: ltr;
    unicode-bidi: embed;
}


/* ========================================================= */
/* 8. LOGO STYLING                                           */
/* ========================================================= */

header img[alt*="logo"] {
    display: block;
    max-width: 100%;
}
body.dark-mode header img[alt*="logo"] { border-radius: 12px; }
body:not(.dark-mode) header img[alt*="logo"][src*="logo.png"]:not([src*="logo-light"]) {
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
body.dark-mode .light-logo { display: none !important; }
body.dark-mode .dark-logo { display: block !important; }
body:not(.dark-mode) .light-logo { display: block !important; }
body:not(.dark-mode) .dark-logo { display: none !important; }