/* =====================================================
   FYROS GAMES STUDIO — GLOBAL THEME SYSTEM
   Dark is the default (premium, untouched). Light is an
   opt-in, high-readability layer applied via [data-theme].
   ===================================================== */

/* ---- Theme toggle control (shared, both themes) ---- */
.theme-toggle {
    position: fixed;
    bottom: 28px;
    left: 28px;
    z-index: 1002;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(10, 10, 12, 0.92);
    border: 1px solid rgba(255, 180, 0, 0.5);
    color: #ffb400;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    padding: 0;
}

.theme-toggle:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 0 22px rgba(255, 180, 0, 0.45);
    border-color: #ffb400;
}

.theme-toggle:focus-visible {
    outline: 2px solid #ffb400;
    outline-offset: 3px;
}

.theme-toggle svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    pointer-events: none;
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

html[data-theme="light"] .theme-toggle {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(176, 116, 0, 0.6);
    color: #b07400;
    box-shadow: 0 6px 20px rgba(40, 35, 20, 0.18);
}

html[data-theme="light"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

@media (max-width: 600px) {
    .theme-toggle { width: 44px; height: 44px; bottom: 20px; left: 20px; }
}

/* =====================================================
   LIGHT THEME
   A warm, paper-toned light mode tuned for readability
   while preserving the studio's amber identity.
   Uses !important to layer reliably over per-page inline
   styles. Dark mode adds none of this, so it is untouched.
   ===================================================== */
html[data-theme="light"] {
    --primary-amber: #b07400;   /* darker gold for AA text contrast on light */
    --bg-black: #f4f2ec;
    --panel-bg: rgba(255, 255, 255, 0.94);
    --border-dim: #ddd9cd;
    color-scheme: light;
}

html[data-theme="light"] body {
    background-color: transparent !important;
    color: #2a2823 !important;
}

/* Headings & body text */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
    color: #16140f !important;
}

html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] dd,
html[data-theme="light"] dt,
html[data-theme="light"] td,
html[data-theme="light"] th,
html[data-theme="light"] blockquote,
html[data-theme="light"] figcaption,
html[data-theme="light"] label,
html[data-theme="light"] .lead,
html[data-theme="light"] .breadcrumb {
    color: #33302a !important;
}

html[data-theme="light"] .lead {
    color: #4a463d !important;
}

/* Accent text / links resolve to readable dark gold */
html[data-theme="light"] a {
    color: #8a5e00;
}

html[data-theme="light"] .breadcrumb a,
html[data-theme="light"] .nav-links a,
html[data-theme="light"] .nav-item {
    color: #6b6557 !important;
}

html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .breadcrumb a:hover {
    color: #b07400 !important;
}

/* Navigation chrome */
html[data-theme="light"] .top-nav {
    background: rgba(248, 246, 240, 0.96) !important;
    border-bottom-color: #e2dfd4 !important;
}

html[data-theme="light"] .nav-logo span {
    color: #16140f !important;
}

/* Generic surfaces: cards / panels / boxes / HUD shells.
   Substring class matching catches the many bespoke variants
   used across pages without enumerating every one. */
html[data-theme="light"] [class*="card"],
html[data-theme="light"] [class*="panel"],
html[data-theme="light"] [class*="-box"],
html[data-theme="light"] [class*="tile"],
html[data-theme="light"] [class*="module"] {
    background: #ffffff !important;
    border-color: #e4e1d6 !important;
    box-shadow: 0 2px 14px rgba(40, 35, 20, 0.06) !important;
}

/* Footer */
html[data-theme="light"] footer {
    background: #efece4 !important;
    border-top-color: #e2dfd4 !important;
    color: #33302a !important;
}

/* Soften the dark-mode CRT/scanline overlays on light */
html[data-theme="light"] .scanlines,
html[data-theme="light"] .vignette,
html[data-theme="light"] .grid-overlay,
html[data-theme="light"] .noise {
    opacity: 0.08 !important;
}

/* Inputs */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background: #ffffff !important;
    color: #1f1d18 !important;
    border-color: #cfccbf !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #8a8575 !important;
}

/* Code / mono blocks */
html[data-theme="light"] pre,
html[data-theme="light"] code,
html[data-theme="light"] [class*="code"],
html[data-theme="light"] [class*="terminal"] {
    background: #1d1b16 !important;
    color: #f0ede4 !important;
    border-color: #c9c5b6 !important;
}

/* Horizontal rules / dividers */
html[data-theme="light"] hr {
    border-color: #ddd9cd !important;
}

/* Honor users who prefer reduced motion for the toggle */
@media (prefers-reduced-motion: reduce) {
    .theme-toggle { transition: none; }
}

/* =====================================================
   PREMIUM GLOBAL BACKGROUND
   A single, modern background lives on the root element so
   every page shares the same refined surface. Bodies are made
   transparent so this layer shows through consistently — this
   also fixes light mode, where per-page dark bodies previously
   stayed dark even after switching themes.
   ===================================================== */
html {
    background-color: #08090d;
    background-image:
        radial-gradient(1100px 760px at 12% -8%, rgba(255, 180, 0, 0.07), transparent 58%),
        radial-gradient(1000px 720px at 92% 4%, rgba(90, 120, 200, 0.06), transparent 55%),
        radial-gradient(900px 900px at 50% 120%, rgba(255, 110, 30, 0.05), transparent 60%),
        linear-gradient(165deg, #14151c 0%, #0d0e14 42%, #08090d 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    scroll-behavior: smooth;
}

/* Let the root background show through every page's body. */
body {
    background-color: transparent !important;
}

html[data-theme="light"] {
    background-color: #f4f2ec;
    background-image:
        radial-gradient(1100px 760px at 14% -8%, rgba(255, 180, 0, 0.10), transparent 55%),
        radial-gradient(1000px 720px at 92% 2%, rgba(150, 170, 210, 0.10), transparent 52%),
        linear-gradient(165deg, #fcfbf7 0%, #f4f2ea 48%, #ece9df 100%);
}

/* Index ships its own fixed dark gradient/grid overlays via body::before
   and body::after. Hide them on light mode so the light surface wins. */
html[data-theme="light"] body::before,
html[data-theme="light"] body::after {
    display: none !important;
}

/* =====================================================
   PREMIUM POLISH (shared, both themes)
   Subtle, site-wide refinements that lift the perceived
   quality without altering page structure.
   ===================================================== */

/* Refined text selection */
::selection {
    background: rgba(255, 180, 0, 0.28);
    color: #fff;
}
html[data-theme="light"] ::selection {
    background: rgba(176, 116, 0, 0.22);
    color: #16140f;
}

/* Premium custom scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 180, 0, 0.45) transparent;
}
::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 180, 0, 0.55), rgba(255, 110, 0, 0.45));
    border-radius: 7px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 196, 40, 0.85), rgba(255, 130, 20, 0.7));
    background-clip: padding-box;
}
html[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(40, 35, 20, 0.04);
}

/* Smoother, more tactile cards/panels */
.section-box,
[class*="card"],
[class*="panel"] {
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.section-box:hover {
    border-color: rgba(255, 180, 0, 0.4);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 180, 0, 0.06);
}
html[data-theme="light"] .section-box:hover {
    box-shadow: 0 16px 40px rgba(40, 35, 20, 0.12) !important;
    border-color: rgba(176, 116, 0, 0.35) !important;
}

/* Consistent, accessible focus ring across interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary-amber, #ffb400);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Crisper type rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .section-box,
    [class*="card"],
    [class*="panel"] { transition: none; }
}

/* =====================================================
   TOP NAV / LOGIN ALIGNMENT
   The auth login pill is fixed to the top-right. Reserve
   room at the end of the full-width top nav bar so its
   items never slide underneath the pill.
   ===================================================== */
.side-hud {
    padding-right: 150px !important;
}

@media (max-width: 600px) {
    .side-hud {
        padding-right: 92px !important;
    }
}