/* ===================================================================
   TRADE BOY - LIGHT & DARK THEMES
   These themes only change COLOURS (backgrounds, text, borders,
   shadows). Shapes, rounded corners, fonts, sizes, spacing and
   positions all come from the original Glass design, so every page
   keeps exactly the same layout in all three themes.
   Switched on/off by theme-switcher.js (Glass = this file disabled).
   =================================================================== */

:root {
    --ink: #111111;          /* main text, solid buttons */
    --ink-soft: #333333;
    --muted: #6f6f6f;
    --line: #e2e2e2;         /* borders */
    --paper: #ffffff;        /* cards and panels */
    --page: #f4f4f4;         /* page background */
    --soft: #efefef;         /* subtle fills */
    --shadow: rgba(0, 0, 0, 0.12);
    --on-ink: #ffffff;       /* text on solid ink (buttons, active tabs) */
    --ink-hover: #2a2a2a;
    --veil: rgba(255, 255, 255, 0.92);

    /* Tournament page variables */
    --tour-bg: #f4f4f4;
    --tour-card-bg: #ffffff;
    --tour-card-border: #e2e2e2;
    --tour-green: #111111;
    --tour-green-glow: rgba(0, 0, 0, 0.08);
    --tour-gold: #111111;
    --tour-gold-glow: rgba(0, 0, 0, 0.08);
    --tour-red: #555555;
    --tour-blue: #111111;
    --tour-text: #111111;
    --tour-text-muted: #6f6f6f;
}

/* Dark mode: same design, colours flipped */
html[data-theme="dark"] {
    --ink: #f2f2f2;
    --ink-soft: #d0d0d0;
    --muted: #949494;
    --line: #2c2c2c;
    --paper: #161616;
    --page: #0b0b0b;
    --soft: #1f1f1f;
    --shadow: rgba(0, 0, 0, 0.6);
    --on-ink: #111111;
    --ink-hover: #d9d9d9;
    --veil: rgba(10, 10, 10, 0.92);

    --tour-bg: #0b0b0b;
    --tour-card-bg: #161616;
    --tour-card-border: #2c2c2c;
    --tour-green: #f2f2f2;
    --tour-gold: #f2f2f2;
    --tour-red: #a0a0a0;
    --tour-blue: #f2f2f2;
    --tour-text: #f2f2f2;
    --tour-text-muted: #949494;
    color-scheme: dark;
}

/* ---------- Base ---------- */
html body {
    background: var(--page) none !important;
    color: var(--ink) !important;
}

/* The Glass buttons use a black outline text effect; flat colours don't need it */
body, body * {
    text-shadow: none !important;
}

h1, h2, h3, h4, .page-title, .card-title, .logo, .footer-logo-text,
.tour-title, .lobby-tour-name, .entrance-card-title, .champion-heading {
    color: var(--ink) !important;
}

a { color: var(--ink); }

::selection { background: var(--ink); color: var(--on-ink); }

/* ---------- Header ---------- */
.top-nav {
    background: var(--paper) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: var(--line) !important;
    box-shadow: 0 1px 6px var(--shadow) !important;
}

.logo svg { stroke: var(--ink) !important; }

.search-bar {
    background: var(--soft) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

.search-bar::placeholder { color: var(--muted); }
.search-bar:focus { border-color: var(--ink) !important; }

#user-display { color: var(--ink) !important; }
#user-avatar { border-color: var(--ink) !important; }
#profile-btn:hover { background: var(--soft) !important; }

/* ---------- Buttons ----------
   Primary: solid ink with light text. Size, shape and font stay as in Glass. */
.logout-btn, .nav-icon-btn, .hero-btn, .action-btn, .select-btn, .ok-btn,
.save-btn, .affiliate-cta-btn, button.btn-primary,
.login-container button, #save-avatar-btn, .patron-submit-btn {
    background: var(--ink) !important;
    color: var(--on-ink) !important;
    border-color: var(--ink) !important;
    box-shadow: 0 3px 8px var(--shadow) !important;
    filter: none !important;
}

.logout-btn:hover, .nav-icon-btn:hover, .hero-btn:hover, .action-btn:hover,
.select-btn:hover:not(:disabled), .ok-btn:hover, .save-btn:hover, .affiliate-cta-btn:hover,
.login-container button:hover, #save-avatar-btn:hover, .patron-submit-btn:hover:not(:disabled) {
    background: var(--ink-hover) !important;
    color: var(--on-ink) !important;
}

.select-btn:disabled, .patron-submit-btn:disabled {
    background: #bdbdbd !important;
    border-color: #bdbdbd !important;
    box-shadow: none !important;
    color: #fff !important;
}

/* Small solid buttons that have no border in Glass (no border added, so sizes stay the same) */
.promo-copy-btn, .article-card > a {
    background: var(--ink) !important;
    color: var(--on-ink) !important;
}

.promo-copy-btn:hover, .article-card > a:hover { background: var(--ink-hover) !important; color: var(--on-ink) !important; }

/* Secondary: paper with ink outline (these already have borders in Glass) */
#cancel-avatar-btn, .tab-btn, .limit-btn, .mode-card,
.copy-btn, .secondary-btn, .patron-btn-close, .patron-btn-remove {
    background: var(--paper) !important;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
    box-shadow: none !important;
}

#cancel-avatar-btn:hover, .tab-btn:hover, .limit-btn:hover, .mode-card:hover {
    background: var(--soft) !important;
    color: var(--ink) !important;
}

.patron-btn-close:hover, .patron-btn-remove:hover { background: var(--ink) !important; color: var(--on-ink) !important; }

.tab-btn.active, .limit-btn.active, .limit-btn.selected, .mode-card.active, .mode-card.selected {
    background: var(--ink) !important;
    color: var(--on-ink) !important;
}

.tab-btn.active::after { border-left-color: var(--ink) !important; }

/* Language / theme dropdown */
.lang-dropdown {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 6px 18px var(--shadow) !important;
}

.lang-option { color: var(--ink) !important; }
.lang-option:hover, .lang-option.active { background: var(--soft) !important; color: var(--ink) !important; }

/* ---------- Page containers ---------- */
.main-content, .blog-container, .legal-container, .policy-container, .tour-card-panel {
    background: var(--paper) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--line) !important;
    box-shadow: 0 4px 18px var(--shadow) !important;
    color: var(--ink) !important;
}

.blog-container h1, .legal-container h1, .policy-container h1 { border-bottom-color: var(--line) !important; }
.blog-container h3, .legal-container h3, .policy-container h3 { color: var(--ink-soft) !important; }
.blog-container, .legal-container, .policy-container { color: var(--ink-soft) !important; }

/* Text links inside article text only (not buttons) */
.blog-container p a, .blog-container li a,
.legal-container p a, .legal-container li a,
.policy-container p a, .policy-container li a { color: var(--ink) !important; text-decoration: underline; }
.article-card > a { text-decoration: none !important; }

/* Inner panels: post detail, SEO text boxes, results, pools, builders */
.post-detail, .seo-content, .team-result, .pool-container, .draft-header,
.hero-builder-container, .draft-card, .entrance-card, .tier-list-container,
.hero-pool, .slot-card, .duel-player-box, .bracket-match-node, .modal-content,
.affiliate-banner-container, .affiliate-card, .team-showcase {
    background: var(--paper) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
}

.team-showcase:hover, .draft-card:hover, .entrance-card:hover { border-color: var(--ink) !important; }

/* ---------- Home grid ---------- */
.card {
    background: var(--paper) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
}

.card:hover {
    border-color: var(--ink) !important;
    box-shadow: 0 10px 20px var(--shadow) !important;
}

.thumbnail { border-bottom-color: var(--line) !important; }
.card-title { color: var(--ink) !important; }
.card-excerpt { color: var(--muted) !important; }

/* ---------- Article cards (Blog) ---------- */
.article-card {
    background: var(--soft) !important;
    border-left-color: var(--ink) !important;
}

.article-card:hover { background: var(--paper) !important; box-shadow: 0 4px 14px var(--shadow); }
.article-card h2, .article-card h2 a { color: var(--ink) !important; }
.article-card p { color: var(--ink-soft) !important; }

/* ---------- Starter pack banner ---------- */
.affiliate-banner-container { border-color: var(--line) !important; }
.affiliate-badge, .affiliate-step, .rewards-label { color: var(--muted) !important; }
.affiliate-card { border-color: var(--line) !important; }
.affiliate-banner-container .affiliate-title { color: var(--ink) !important; }
.promo-code-box { border-color: var(--ink) !important; background: var(--paper) !important; }
.promo-code-text { color: var(--ink) !important; }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--paper) !important;
    color: var(--ink) !important;
    border-top-color: var(--line) !important;
}

.site-footer *, .site-footer a { color: var(--ink-soft) !important; }
.footer-logo-text { color: var(--ink) !important; }
.footer-slogan, .footer-copyright, .footer-disclaimer { color: var(--muted) !important; }
.footer-links a:hover { color: var(--ink) !important; }
.social-icon:hover { color: var(--ink) !important; }

/* ---------- Inline-style overrides ----------
   Many elements carry inline dark-theme colours; map them to the palette. */

/* Dark boxes -> paper boxes */
[style*="background: #222"], [style*="background:#222"],
[style*="background: #1a1a1a"], [style*="background: #111"],
[style*="background: #333"], [style*="background: #444"],
[style*="background: rgba(0,0,0,0.4)"], [style*="background: rgba(0, 0, 0, 0.4)"],
[style*="background: rgba(0,0,0,0.5)"], [style*="background: rgba(0, 0, 0, 0.5)"],
[style*="background: rgba(0,0,0,0.6)"], [style*="background: rgba(0, 0, 0, 0.6)"],
[style*="background: rgba(0,0,0,0.7)"], [style*="background: rgba(0, 0, 0, 0.7)"],
[style*="background: rgba(255,255,255,0.05)"], [style*="background: rgba(255, 255, 255, 0.05)"],
[style*="background: rgba(255, 255, 255, 0.03)"], [style*="background: rgba(0, 0, 0, 0.2)"],
[style*="background: rgba(255,255,255,0.1)"], [style*="background: rgba(255, 255, 255, 0.1)"],
[style*="background: rgba(255,255,255,0.08)"], [style*="background: rgba(255, 255, 255, 0.08)"],
[style*="background: rgba(255,255,255,0.15)"], [style*="background: rgba(255, 255, 255, 0.15)"] {
    background: var(--soft) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

/* Modal overlays keep a dark veil */
#avatar-modal, .modal-overlay, .patron-modal-backdrop,
[style*="position: fixed"][style*="background: rgba(0,0,0,0.8)"] {
    background: rgba(0, 0, 0, 0.55) !important;
}

#avatar-modal > div {
    background: var(--paper) !important;
    border-color: var(--line) !important;
}

/* Light/accent text -> ink */
[style*="color: #fff"], [style*="color:#fff"], [style*="color: white"], [style*="color: #ffffff"],
[style*="color: #ddd"], [style*="color: #ccc"], [style*="color: #e2e8f0"], [style*="color: #cbd5e1"],
[style*="color: #aef649"], [style*="color:#aef649"], [style*="color: #ffeb3b"], [style*="color: #ffd700"],
[style*="color: #fef08a"], [style*="color: #3b82f6"], [style*="color: #60a5fa"],
[style*="color: #e9d5ff"] {
    color: var(--ink) !important;
}

/* Secondary text -> muted grey */
[style*="color: #aaa"], [style*="color: #888"], [style*="color: #9ca3af"], [style*="color: #94a3b8"],
[style*="color: #d8b4fe"], [style*="color: #555"] {
    color: var(--muted) !important;
}

/* Opponent / warning reds -> grey */
[style*="color: #ef4444"], [style*="color: #ff5252"], [style*="color: #ff4444"] {
    color: var(--muted) !important;
}

/* Accent borders -> ink (keep their width) */
[style*="border-left: 4px solid #aef649"], [style*="border-left: 4px solid #ffeb3b"],
[style*="border-left: 4px solid #ffd700"],
[style*="border: 1px solid #aef649"], [style*="border: 2px solid #aef649"],
[style*="border-bottom: 2px solid #aef649"] {
    border-color: var(--ink) !important;
}

/* Coloured action buttons (YouTube red, Facebook blue, green) -> ink */
[style*="background: #e52d27"], [style*="background:#e52d27"],
[style*="background: #aef649"], [style*="linear-gradient(135deg, #aef649"],
[style*="background: linear-gradient(to bottom, #3b82f6"] {
    background: var(--ink) !important;
    color: var(--on-ink) !important;
    border-color: var(--ink) !important;
}

[style*="background: #e52d27"] *, [style*="background: #aef649"] *,
[style*="background: linear-gradient(to bottom, #3b82f6"] * {
    color: var(--on-ink) !important;
}

/* ---------- Tier lists ---------- */
.page-header { color: var(--ink) !important; }
.page-description { color: var(--muted) !important; }
.tier-row { border-bottom-color: var(--line) !important; }
.tier-label { color: #fff !important; }
.tier-label.s { background: #111 !important; }
.tier-label.a { background: #3a3a3a !important; }
.tier-label.b { background: #616161 !important; }
.tier-label.c { background: #8a8a8a !important; }
.tier-label.d { background: #b0b0b0 !important; color: #111 !important; }
html[data-theme="dark"] .tier-label.s { background: #f2f2f2 !important; color: #111 !important; }
html[data-theme="dark"] .tier-label.a { background: #c4c4c4 !important; color: #111 !important; }
html[data-theme="dark"] .tier-label.b { background: #8f8f8f !important; color: #111 !important; }
html[data-theme="dark"] .tier-label.c { background: #5e5e5e !important; }
html[data-theme="dark"] .tier-label.d { background: #3a3a3a !important; }
.tier-dropzone { background: var(--paper) !important; }
.hero-icon { border-color: var(--line) !important; background: var(--soft) !important; }
.hero-icon:hover { border-color: var(--ink) !important; }
.hero-pool { border-color: var(--line) !important; }
.hero-pool-title { color: var(--ink) !important; }

/* ---------- Draft modes ---------- */
.draft-slot {
    background: var(--soft) !important;
    border-color: var(--line) !important;
    color: var(--muted) !important;
}

.draft-slot.green { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--on-ink) !important; }
.draft-slot.filled { border-color: var(--ink) !important; }
.draft-card img, .team-grid img { border-color: var(--line) !important; }

.timer-container { background: var(--soft) !important; border-color: var(--line) !important; }
.timer-bar, .timer-bar.warning { background: var(--ink) !important; }
.timer-bar.danger { background: #777 !important; }
#timer-text, .timer-container span { color: #fff !important; mix-blend-mode: difference; }

.player-team h3 { color: var(--ink) !important; }
.slot { background: var(--soft) !important; border-color: var(--line) !important; }
.pool-item:hover { border-color: var(--ink) !important; }

#room-input, input[type="text"], input[type="password"], input[type="number"], textarea, select {
    background: var(--soft) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

.hero-with-patron img.main-hero-img, .hero-with-patron .main-hero-img { box-shadow: none !important; }

/* ---------- Team builder ---------- */
.hero-builder-container { border-color: var(--line) !important; }
.hero-grid::-webkit-scrollbar-thumb { background: var(--ink) !important; }
.hero-grid::-webkit-scrollbar-track { background: var(--soft) !important; }
.bottom-bar {
    background: var(--paper) !important;
    backdrop-filter: none !important;
    border-top-color: var(--line) !important;
}
.bottom-bar .slot { background: var(--soft) !important; }
.bottom-bar .slot.pet-slot { border-color: var(--ink) !important; box-shadow: none !important; }
.patron-hero-img, .hero-card.selected { border-color: var(--ink) !important; }
.modal-header { background: var(--paper) !important; border-bottom-color: var(--line) !important; }
.modal-header h3 { color: var(--ink) !important; }
.pet-list-item { background: var(--paper) !important; border-color: var(--line) !important; }
.pet-list-item:hover { border-color: var(--ink) !important; }
.pet-list-name, .pet-list-status.assigned { color: var(--ink) !important; }
.close-btn { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--on-ink) !important; }

/* ---------- Tournament ----------
   The arena was built light-on-dark with hard-coded colours, so text is
   reset to ink first, then the solid buttons get their light text back. */
.tour-main-content, .tour-main-content *:not(img):not(svg):not(path),
.tour-modal-content, .tour-modal-content *:not(img) {
    color: var(--ink) !important;
}

.tour-main-content .tour-subtitle, .tour-main-content .entrance-card-desc,
.tour-main-content [class*="muted"], .tour-main-content [class*="-sub"],
.tour-main-content [class*="hint"], .tour-main-content [class*="label"] {
    color: var(--muted) !important;
}

.entrance-card, .tour-input, .tour-textarea, .tour-id-container, .player-count-display,
.slot-card, .slot-card.filled, .player-waiting-card, .match-group-card,
.match-group-card.completed, .next-mode-btn, .winner-id-num, .host-contact-box,
.platform-selector-group, .player-id-tag, .tour-modal-content, .host-control-card,
.round-advance-card, .winner-id-showcase, .player-defeated-banner, .player-victory-banner,
.combat-duel-container, .arena-header, [class*="arena-"][class*="box"] {
    background: var(--paper) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.tour-input, .tour-textarea, .tour-id-container { background: var(--soft) !important; }
.hero-mini-card { background: var(--soft) !important; border-color: var(--line) !important; }
.countdown-modal, .tour-modal { background: var(--veil) !important; }
.match-group-card.completed, .player-victory-banner { border-color: var(--ink) !important; }

.tour-main-content .tour-btn-primary, .tour-main-content .tour-btn-primary-lg,
.tour-main-content .tour-btn-gold, .tour-main-content .tour-btn-start,
.tour-main-content .tour-btn-danger-sm, .tour-main-content .btn-copy-gold,
.tour-main-content .mode-toggle-btn.active, .tour-main-content .next-mode-btn.active,
.tour-main-content .btn-winner-select.selected, .tour-main-content .platform-btn.active,
.tour-main-content .champion-badge, .tour-modal-content .tour-btn-primary,
.tour-modal-content .tour-btn-gold {
    background: var(--ink) !important;
    color: var(--on-ink) !important;
    border-color: var(--ink) !important;
    box-shadow: 0 3px 8px var(--shadow) !important;
}

.tour-main-content .hero-btn, .tour-main-content .hero-btn *,
.tour-main-content .action-btn, .tour-main-content .select-btn,
.tour-main-content .tour-btn-primary *, .tour-main-content .tour-btn-gold *,
.tour-main-content .tour-btn-start *, .tour-main-content .btn-winner-select.selected *,
.tour-main-content .next-mode-btn.active *, .tour-main-content .mode-toggle-btn.active * {
    color: var(--on-ink) !important;
}

.tour-main-content .platform-btn:not(.active), .tour-main-content .mode-toggle-btn:not(.active),
.tour-main-content .btn-winner-select:not(.selected) {
    background: var(--paper);
    border-color: var(--line) !important;
}

.tour-main-content [class*="badge"]:not(.champion-badge), .tour-main-content .host-pill {
    background: var(--paper) !important;
    border-color: var(--ink) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}

.tour-main-content .timer-bar, .tour-main-content [class*="timer-bar"] { background: var(--ink) !important; }
.tour-main-content [class*="timer-text"] { color: #fff !important; mix-blend-mode: difference; }
.tour-main-content .draft-slot.filled:not([style*="background-image: url"]) { background: var(--ink) !important; color: var(--on-ink) !important; }
.tour-subtitle, .entrance-card-desc { color: var(--muted) !important; }
.countdown-timer { color: var(--ink) !important; }
.bracket-participant.winner { background: var(--soft) !important; }

/* ---------- Login page ---------- */
.background { background: var(--page) none !important; }

.login-container {
    background: var(--paper) !important;
    backdrop-filter: none !important;
    border-color: var(--line) !important;
    box-shadow: 0 8px 28px var(--shadow) !important;
    color: var(--ink) !important;
}

.login-container h2 { background: var(--ink) !important; color: var(--on-ink) !important; }
.login-container p, .login-container p strong { color: var(--ink-soft) !important; }
.input-group input::placeholder { color: var(--muted) !important; }
.input-group .icon, .options, .options a, .toggle-text { color: var(--muted) !important; }
.toggle-text a { color: var(--ink) !important; }
.error-msg { color: #b00020 !important; }
.avatar-option { border-color: var(--line) !important; }
.avatar-option.selected { border-color: var(--ink) !important; box-shadow: 0 0 0 2px var(--ink) !important; }

/* ---------- Patron pet selection (all draft modes) ---------- */
.patron-screen, .patron-modal-box {
    background: var(--paper) !important;
    border-color: var(--line) !important;
    box-shadow: 0 10px 30px var(--shadow) !important;
    color: var(--ink) !important;
}

.patron-title, .patron-modal-title, .patron-modal-target-hero { color: var(--ink) !important; }
.patron-subtitle, .patron-modal-sub { color: var(--muted) !important; }

.patron-timer-container { background: var(--soft) !important; }
.patron-timer-bar, .patron-timer-bar.warning { background: var(--ink) !important; }
.patron-timer-bar.danger { background: #777 !important; }
.patron-timer-text { color: #fff !important; mix-blend-mode: difference; }

.patron-hero-card, .patron-picker-item {
    background: var(--paper) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
}

.patron-hero-card:hover, .patron-picker-item.compatible:hover {
    border-color: var(--ink) !important;
    background: var(--paper) !important;
    box-shadow: 0 6px 16px var(--shadow) !important;
}

.patron-hero-card.has-patron, .patron-picker-item.active { border-color: var(--ink) !important; background: var(--soft) !important; box-shadow: none !important; }
.patron-hero-img, .patron-picker-item img { box-shadow: none !important; }
.patron-hero-name, .patron-picker-name { color: var(--ink) !important; }
.patron-assigned-label { color: var(--muted) !important; }
.patron-hero-card.has-patron .patron-assigned-label { color: var(--ink) !important; }
.patron-slot-badge { background-color: var(--paper) !important; border-color: var(--ink) !important; box-shadow: none !important; }
.patron-slot-badge.assigned { background: var(--paper) !important; }

.hero-with-patron .patron-mini-badge, .hero-patron-badge-wrap .patron-mini-badge {
    background: var(--paper) !important;
    border-color: var(--ink) !important;
    box-shadow: none !important;
}

.patron-picker-tag { background: var(--soft) !important; color: var(--ink-soft) !important; }

/* ---------- Misc ---------- */
hr { border-top-color: var(--line); }