/* ============================================
   HOLYHUB - Shared Styles
   Deep Theme — grandiose · atmospheric · experimental
   coded · deep dark blue · faint light · mysterious
   ============================================ */

:root {
    /* Luminous blue accent (a point of light in the dark) */
    --primary: #5a8cff;
    --primary-dark: #2f63d6;
    --primary-glow: rgba(90, 140, 255, 0.45);
    --primary-faint: rgba(90, 140, 255, 0.08);

    /* Deep dark-blue surfaces */
    --bg: #060912;
    --bg-alt: #090e1c;
    --surface: #0d1426;
    --surface-alt: #121b32;
    --border: #1d2942;
    --text: #c3d0e8;
    --text-dim: #6d7d9e;
    --text-bright: #eaf1ff;
    --code-bg: #070b16;

    /* atmosphere extras (perf: single small shadow, opaque surfaces) */
    --halo: rgba(90, 140, 255, 0.45);
    --glass-bg: #0d1426;
    --glass-border: rgba(120, 160, 255, 0.16);
    --glass-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);

    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
}

/* Light toggle kept in the same deep atmosphere */
[data-theme="light"] {
    --primary: #5a8cff;
    --primary-dark: #2f63d6;
    --primary-glow: rgba(90, 140, 255, 0.45);
    --primary-faint: rgba(90, 140, 255, 0.08);
    --bg: #060912;
    --bg-alt: #090e1c;
    --surface: #0d1426;
    --surface-alt: #121b32;
    --border: #1d2942;
    --text: #c3d0e8;
    --text-dim: #6d7d9e;
    --text-bright: #eaf1ff;
    --code-bg: #070b16;
}

/* Game-specific palettes (apply via body class) */
body.game-castlerun  { --primary: #E14444; --primary-dark: #b32d2d; --primary-glow: rgba(225, 68, 68, 0.4); --primary-faint: rgba(225, 68, 68, 0.08); }
body.game-minetrick  { --primary: #5DEDEE; --primary-dark: #34c5c6; --primary-glow: rgba(93, 237, 238, 0.4); --primary-faint: rgba(93, 237, 238, 0.08); }
body.game-minotaur   { --primary: #FFB627; --primary-dark: #d6951b; --primary-glow: rgba(255, 182, 39, 0.4); --primary-faint: rgba(255, 182, 39, 0.08); }
body.game-poisson    { --primary: #44E1D7; --primary-dark: #2db8af; --primary-glow: rgba(68, 225, 215, 0.4); --primary-faint: rgba(68, 225, 215, 0.08); }
body.game-elytrarace { --primary: #44A7E1; --primary-dark: #2a87bd; --primary-glow: rgba(68, 167, 225, 0.4); --primary-faint: rgba(68, 167, 225, 0.08); }
body.game-holymusic  { --primary: #7b9ab7; --primary-dark: #5a7a94; --primary-glow: rgba(123, 154, 183, 0.4); --primary-faint: rgba(123, 154, 183, 0.08); }
body.game-liveconsole{ --primary: #5865F2; --primary-dark: #404eb6; --primary-glow: rgba(88, 101, 242, 0.4); --primary-faint: rgba(88, 101, 242, 0.08); }

/* ============================================
   Reset & Base
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    /* Deep atmosphere — single static gradient, no fixed attachment, no filters.
       Radial gradients are cheap when static: the softness is baked in. */
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(60, 110, 230, 0.16) 0%, rgba(6, 9, 18, 0) 55%),
        linear-gradient(180deg, #070b16 0%, #060912 45%, #04060e 100%);
    background-color: #060912;
    color: var(--text);
    line-height: 1.7;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Perf: no body::before / body::after layers, no full-screen blur,
   no infinite animations, no animated grid — atmosphere lives in the
   body gradient above. */
body::before, body::after { content: none; }

/* Code-rain canvas disabled — constant canvas repaints are expensive */
#matrix-rain { display: none !important; }

main, section, footer, nav { position: relative; z-index: 1; }

a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary-dark); }

img { max-width: 100%; display: block; }

::selection { background: var(--primary); color: var(--bg); }

/* Global button reset for consistent appearance across browsers/OS */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4 {
    font-family: var(--font-mono);
    color: var(--text-bright);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }

.mono { font-family: var(--font-mono); }
.dim  { color: var(--text-dim); }
.accent { color: var(--primary); }

.terminal-prompt::before {
    content: "> ";
    color: var(--primary);
    font-family: var(--font-mono);
}

/* ============================================
   Layout
   ============================================ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 80px 0;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    color: var(--text-bright);
}

.section-title::before {
    content: none;
}

/* ============================================
   Navigation
   ============================================ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 14, 20, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

[data-theme="light"] .navbar {
    background: rgba(245, 247, 250, 0.85);
}

.nav-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 14px 24px;
    max-width: 1400px;
    margin: 0 auto;
    gap: 24px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text-bright);
    font-size: 0.7rem;
    justify-self: start;
}

.nav-logo .bracket { color: var(--primary); }

.nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-self: start;
}

.nav-links a {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 8px 0;
    border: 1px solid transparent;
    transition: all 0.2s;
    text-align: center;
    min-width:150px;
    display: inline-block;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-faint);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}

.nav-user-link,
.nav-pill {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 7px 12px;
    border: 1px solid var(--border);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 96px;
    justify-content: center;
}

.nav-user-link:hover,
.nav-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.nav-cta {
    background: var(--primary);
    color: var(--bg) !important;
    padding: 7px 14px;
    border: 1px solid var(--primary);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    min-width: 110px;
    text-align: center;
    transition: opacity 0.2s;
}
.nav-cta:hover { opacity: 0.85; }

.nav-avatar {
    width: 22px;
    height: 22px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.nav-icon-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 38px;
    height: 38px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-icon-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    font-family: var(--font-mono);
    transition: all 0.2s;
}

.theme-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* (legacy floating controls — no longer rendered, kept for safety) */
.floating-controls { display: none !important; }

.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    transition: all 0.2s ease;
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    outline: none;
}

/* Auth & lang elements in nav (legacy — overridden above) */
.nav-user a { display: inline-flex; align-items: center; gap: 8px; }

.lang-switch {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border: 1px solid var(--border);
    padding: 4px 8px;
    color: var(--text-dim) !important;
}
.lang-switch:hover { color: var(--primary) !important; border-color: var(--primary); }

/* ============================================
   Holy server section (always blue, even on game-coloured pages)
   ============================================ */
.holy-section {
    --primary: #44A7E1;
    --primary-dark: #2a87bd;
    --primary-glow: rgba(68, 167, 225, 0.4);
    --primary-faint: rgba(68, 167, 225, 0.1);
    background: linear-gradient(180deg, var(--bg) 0%, var(--primary-faint) 100%);
    border-top: 1px solid var(--primary);
    border-bottom: 1px solid var(--primary);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}
.holy-section::before {
    content: "";
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent 0 39px, var(--primary-faint) 39px 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, var(--primary-faint) 39px 40px);
    opacity: 0.4;
    pointer-events: none;
}
.holy-inner { position: relative; z-index: 1; }

.holy-brand {
    font-family: var(--font-mono);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 12px;
    text-shadow: 0 0 30px var(--primary-glow);
}

.holy-subtitle {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 1rem;
    margin-bottom: 30px;
}

.holy-ip-box {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--primary);
    margin: 20px 0 30px;
    background: var(--surface);
}
.holy-ip-box code {
    padding: 14px 22px;
    font-size: 1.15rem;
    color: var(--primary);
    font-weight: 600;
    background: transparent;
}
.holy-ip-box button {
    background: var(--primary);
    color: var(--bg);
    border: 0;
    padding: 0 18px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.05em;
}
.holy-ip-box button:hover { background: var(--primary-dark); }
.holy-ip-box button.copied { background: #4caf50; }

.holy-versions {
    display: inline-block;
    border: 1px dashed var(--primary);
    padding: 6px 12px;
    margin-left: 12px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-dim);
}

.holy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin: 40px 0;
}
.holy-feature {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 20px;
    transition: all 0.25s;
}
.holy-feature:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
}
.holy-feature h4 {
    color: var(--primary);
    font-family: var(--font-mono);
    margin-bottom: 8px;
    font-size: 1rem;
}
.holy-feature p {
    color: var(--text-dim);
    font-size: 0.9rem;
}

/* ============================================
   Edits gallery
   ============================================ */
.edits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.edit-card {
    display: block;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    transition: all 0.25s;
    position: relative;
}
.edit-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.edit-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: filter 0.25s;
}
.edit-card-info {
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    background-color: rgb(4, 4, 15);
}
.edit-card-info .label { color: var(--text-bright); }
.edit-card-info .arrow { color: var(--primary); }

/* ============================================
   Auth forms
   ============================================ */
.auth-shell {
    max-width: 480px;
    margin: 60px auto;
    padding: 0 20px;
    min-height: 700px;
}
.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 36px 32px;
}
.auth-card h1 {
    font-size: 1.6rem;
    margin-bottom: 6px;
}
.auth-card .subtitle {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    margin-bottom: 28px;
}

.form-row { margin-bottom: 18px; }
.form-row label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row textarea,
.form-row select {
    width: 100%;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 12px 14px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    transition: border-color 0.2s;
}
.form-row input[type="url"] {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 10px 14px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.88rem;
    transition: all 0.2s;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}
.form-row input[type="url"]:focus {
    background: var(--primary-faint);
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}
.form-row .hint {
    color: var(--text-dim);
    font-size: 0.75rem;
    margin-top: 4px;
    font-family: var(--font-mono);
}
.form-row.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-row.checkbox label {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    color: var(--text);
    font-size: 0.9rem;
}

.form-error {
    background: rgba(225, 68, 68, 0.1);
    border: 1px solid #E14444;
    color: #ff7070;
    padding: 12px 14px;
    margin-bottom: 20px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}
.form-success {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid #4caf50;
    color: #6fd672;
    padding: 12px 14px;
    margin-bottom: 20px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.btn-block {
    width: 100%;
    background: var(--primary);
    color: var(--bg);
    border: 0;
    padding: 14px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: opacity 0.2s;
}
.btn-block:hover { opacity: 0.85; }

.btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: transparent;
    color: var(--text-bright);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    margin-top: 25px;
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

.auth-foot {
    margin-top: 24px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.9rem;
}
.auth-foot a { color: var(--primary); }

/* ============================================
   Hero
   ============================================ */
.hero {
    padding: 100px 0 80px;
    text-align: center;
    position: relative;
}

.hero-tag {
    display: inline-block;
    font-family: var(--font-mono);
    color: var(--primary);
    font-size: 0.85rem;
    border: 1px solid var(--primary);
    padding: 6px 14px;
    margin-bottom: 24px;
    background: var(--primary-faint);
}

.hero h1 {
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero h1 .accent {
    color: var(--primary);
    text-shadow: 0 0 30px var(--primary-glow);
}

.hero-subtitle {
    color: var(--text-dim);
    font-size: 1.1rem;
    max-width: 640px;
    margin: 0 auto 36px;
    font-family: var(--font-mono);
}

.hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    border-radius: 0;
    min-width: 200px;
    width: 100%;
}

.btn:hover {
    background: var(--primary);
    color: var(--bg);
    box-shadow: 0 0 20px var(--primary-glow);
}

.btn-primary {
    background: var(--primary);
    color: var(--bg);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--bg);
}

.btn-ghost {
    border-color: var(--border);
    color: var(--text);
}

.btn-ghost:hover {
    border-color: var(--primary);
    background: transparent;
    color: var(--primary);
    box-shadow: none;
}

.btn-disabled,
.btn-disabled:hover {
    border-color: var(--border);
    color: var(--text-dim);
    background: transparent;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
    opacity: 0.7;
}

/* ============================================
   Cards / Grid
   ============================================ */
.grid {
    display: grid;
    gap: 20px;
    grid-auto-rows: 1fr;
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 24px;
    transition: all 0.2s;
    position: relative;
}

.card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.2);
}

.card-tag {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    display: block;
}

.card h3 {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.card p {
    color: var(--text-dim);
    font-size: 0.95rem;
}

/* Game card on hub */
.game-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0;
    overflow: hidden;
    color: var(--text);
    transition: all 0.25s;
    position: relative;
}

.game-card:hover {
    border-color: var(--game-color, var(--primary));
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.game-card-banner {
    height: 160px;
    background: linear-gradient(135deg, var(--game-color, var(--primary)) 0%, var(--bg-alt) 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.game-card-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

.game-card-name {
    font-family: var(--font-mono);
    font-size: 1.8rem;
    font-weight: 800;
    color: white;
    letter-spacing: -0.02em;
    z-index: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.game-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.game-card-body p {
    flex: 1;
}

.game-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.game-card-actions a {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    border: 1px solid var(--border);
    color: var(--text-dim);
    transition: all 0.2s;
}

.game-card-actions a:hover {
    border-color: var(--game-color, var(--primary));
    color: var(--game-color, var(--primary));
}

.game-card-actions a.primary {
    background: var(--game-color, var(--primary));
    color: var(--bg);
    border-color: var(--game-color, var(--primary));
}

.game-card-actions a.primary:hover {
    opacity: 0.85;
    color: var(--bg);
}

.game-card-actions a.disabled {
    color: var(--text-dim);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
}

.game-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 10px;
}

.game-card-arrow {
    color: var(--game-color, var(--primary));
    font-family: var(--font-mono);
    margin-top: 10px;
    font-size: 0.9rem;
    display: inline-block;
    transition: transform 0.2s;
}

.game-card:hover .game-card-arrow {
    transform: translateX(6px);
}

/* ============================================
   Code blocks / Command lists
   ============================================ */
pre, code {
    font-family: var(--font-mono);
    background: var(--code-bg);
    color: var(--text-bright);
    border: 1px solid var(--border);
}

code {
    padding: 2px 6px;
    font-size: 0.9em;
    color: var(--primary);
}

pre {
    padding: 18px 20px;
    overflow-x: auto;
    font-size: 0.88rem;
    line-height: 1.6;
}

pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-bright);
}

.cmd-list {
    list-style: none;
    border: 1px solid var(--border);
    background: var(--code-bg);
}

.cmd-list li {
    display: grid;
    grid-template-columns: minmax(220px, auto) 1fr;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    align-items: baseline;
}

.cmd-list li:last-child { border-bottom: none; }

.cmd-list .cmd {
    color: var(--primary);
    white-space: nowrap;
    overflow-x: auto;
}

.cmd-list .desc {
    color: var(--text-dim);
}

/* Permissions */
.perm-list { list-style: none; }
.perm-list li {
    padding: 10px 14px;
    border-left: 2px solid var(--primary);
    background: var(--surface);
    margin-bottom: 6px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}
.perm-list .perm { color: var(--primary); font-weight: 600; }
.perm-list .default { color: var(--text-dim); margin-left: 10px; font-size: 0.8em; }

/* Feature list */
.feat-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.feat-list li {
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    font-size: 0.95rem;
}

.feat-list b { color: var(--text-bright); display: block; margin-bottom: 4px; font-family: var(--font-mono); }
.feat-list span { color: var(--text-dim); font-size: 0.9rem; }

/* ============================================
   Maps list
   ============================================ */
.map-list { display: flex; flex-direction: column; gap: 16px; }

.map-row {
    display: grid;
    grid-template-columns: 200px 1fr auto auto;
    gap: 24px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 16px;
    transition: all 0.2s;
}

.map-row:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.map-row img {
    width: 200px;
    height: 112px;
    object-fit: cover;
    background: var(--bg-alt);
    border: 1px solid var(--border);
}

.map-row h3 {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.map-row p { color: var(--text-dim); font-size: 0.9rem; }

.map-price {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    color: var(--primary);
    font-weight: 700;
    min-width: 80px;
    text-align: right;
}

/* ============================================
   Footer
   ============================================ */
.footer {
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
    padding: 40px 0 24px;
    margin-top: 80px;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.6fr repeat(5, 1fr);
    gap: 32px;
    margin-bottom: 32px;
}

@media (max-width: 1100px) {
    .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
}

.footer h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 12px;
    font-family: var(--font-mono);
}

.footer ul { list-style: none; }
.footer li { margin-bottom: 6px; font-size: 0.9rem; }
.footer a { color: var(--text-dim); }
.footer a:hover { color: var(--primary); }

.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    text-align: center;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

.footer-bottom .accent { color: var(--primary); }

/* ============================================
   Misc
   ============================================ */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 20px;
}

.video-card {
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.video-card:hover { border-color: var(--primary); }

.video-wrapper {
    position: relative;
    aspect-ratio: 16/9;
}

.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-info { padding: 16px 18px; }
.video-info h3 { font-size: 1.05rem; margin-bottom: 4px; }
.video-info p { color: var(--text-dim); font-size: 0.88rem; }

.contact-form {
    display: grid;
    gap: 14px;
    max-width: 600px;
}

.contact-form input,
.contact-form textarea {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 14px;
    font-family: var(--font-mono);
    font-size: 0.95rem;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-faint);
}

.contact-form textarea { min-height: 140px; resize: vertical; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 860px) {
    .footer-inner { grid-template-columns: 1fr; }
    .map-row {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .map-row img { width: 100%; height: auto; aspect-ratio: 16/9; }
    .map-price { text-align: center; }
}

@media (max-width: 960px) {
    .nav-inner { grid-template-columns: auto 1fr auto; padding: 12px 16px; }
    .nav-links a { min-width: 0; padding: 8px 10px; font-size: 0.8rem; }
    .nav-user-link, .nav-pill, .nav-cta { min-width: 0; padding: 6px 10px; font-size: 0.75rem; }
}

@media (max-width: 720px) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .nav-inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-auto-rows: auto;
        align-items: center;
        position: relative;
        row-gap: 0;
    }
    /* Lock the toggle to column 3 in BOTH states so it never shifts */
    .nav-inner > .nav-logo   { grid-column: 1; grid-row: 1; }
    .nav-inner > .nav-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
    /* Default: hide links and right panel, show toggle */
    .nav-links { display: none; }
    .nav-right { display: none; }

    /* When menu is open: panels stack below row 1 */
    .nav-inner.menu-open {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-auto-rows: auto;
        align-items: center;
        row-gap: 0;
    }
    .nav-inner.menu-open .nav-links,
    .nav-inner.menu-open .nav-right {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        width: 100%;
        grid-column: 1 / -1;
        padding: 12px 14px;
        background: var(--bg-alt, rgba(15,18,24,0.96));
        border-top: 1px dashed var(--border);
    }
    .nav-inner.menu-open .nav-links {
        grid-row: 2;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .nav-inner.menu-open .nav-links li { width: 100%; }
    .nav-inner.menu-open .nav-links a {
        display: block;
        min-width: 0;
        width: 100%;
        text-align: left;
        padding: 12px 14px;
        font-size: 0.9rem;
    }
    .nav-inner.menu-open .nav-right {
        grid-row: 3;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        border-bottom: 1px solid var(--border);
    }
    .nav-inner.menu-open .nav-user-link,
    .nav-inner.menu-open .nav-pill,
    .nav-inner.menu-open .nav-cta,
    .nav-inner.menu-open .nav-icon-btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        min-height: 40px;
    }

    .section { padding: 50px 0; }
    .hero { padding: 60px 0 40px; }
    .cmd-list li { grid-template-columns: 1fr; gap: 4px; }
    .btn { min-width: 0 !important; }
}

/* ============================================
   Mystic hero (home page only)
   ============================================ */
.mystic-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    overflow: hidden;
    margin-top: -5px;
    font-size: 15px;
}

.mystic-title {
    font-family: var(--font-mono);
    font-size: clamp(5rem, 18vw, 14rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    margin: 0;
    line-height: 1;
    color: var(--text-bright);
    user-select: none;
    display: inline-flex;
    gap: 0.05em;
}

.mystic-letter {
    display: inline-block;
    color: var(--primary);
    text-shadow:
        0 0 12px rgba(68,167,225,0.5),
        0 0 28px rgba(68,167,225,0.25);
    transition: color 0.5s, text-shadow 0.5s;
}
.mystic-letter.settled {
    color: var(--text-bright);
    text-shadow:
        0 0 18px rgba(255,255,255,0.35),
        0 0 38px rgba(68,167,225,0.4);
    animation: mystic-pulse 4s ease-in-out infinite;
}

@keyframes mystic-pulse {
    0%,100% { text-shadow: 0 0 18px rgba(255,255,255,0.35), 0 0 38px rgba(68,167,225,0.4); }
    50%     { text-shadow: 0 0 28px rgba(255,255,255,0.55), 0 0 60px rgba(68,167,225,0.7); }
}

.mystic-sub {
    font-family: var(--font-mono);
    font-size: 1.45rem;
    color: var(--text-dim);
    letter-spacing: 0.4em;
    opacity: 0.7;
    animation: mystic-blink 2.5s ease-in-out infinite;
}
@keyframes mystic-blink {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.9; }
}
/* ============================================
   2026-05 additions
   ============================================ */

/* Light mode: pure blue theme */
[data-theme="light"] {
    --bg: #b9d6f2;
    --bg-alt: #a4c6ea;
    --surface: #cce0f5;
    --surface-alt: #b0cdec;
    --border: #6c9bcc;
    --text: #0b1d33;
    --text-dim: #2d4762;
    --text-bright: #021b3d;
    --code-bg: #a4c6ea;
    --primary-faint: rgba(11, 71, 145, 0.18);
}
[data-theme="light"] body::before {
    background-image:
        linear-gradient(rgba(11,71,145,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11,71,145,0.10) 1px, transparent 1px);
}

/* ============================================
   Reusable mystic title animation (no size change)
   Usage: <h1 class="mystic-anim"><span data-c="V">V</span>...</h1>
   ============================================ */
.mystic-anim {
    /* keep the parent heading style — no font-size override */
    user-select: none;
    display: inline-flex;
    flex-wrap: wrap;
}
.mystic-anim .mystic-letter {
    display: inline-block;
    color: var(--primary);
    transition: color 0.5s ease;
}
.mystic-anim .mystic-letter.settled {
    color: inherit;
}

/* ============================================
   Mystic-hero scroll-down arrow
   ============================================ */
.scroll-down {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    color: var(--primary);
    cursor: pointer;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scroll-down-bounce 2s ease-in-out infinite;
    text-decoration: none;
    font-size: 0;
}
.scroll-down svg { width: 32px; height: 32px; display: block; }
.scroll-down:hover { color: var(--primary-dark); }

@keyframes scroll-down-bounce {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
    50%      { transform: translate(-50%, 8px); opacity: 1; }
}

/* ============================================
   Index.php: nav fade-in from top (only when body has .nav-fadein)
   ============================================ */
body.nav-fadein .navbar {
    animation: nav-drop 0.9s ease-out 0.05s both;
}
@keyframes nav-drop {
    0%   { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}

/* ============================================
   Language change overlay (mystic-style fade)
   ============================================ */
.lang-fade-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
}
.lang-fade-overlay.show { opacity: 1; pointer-events: auto; }
.lang-fade-overlay-text {
    font-family: var(--font-mono);
    font-size: clamp(2.5rem, 8vw, 5rem);
    color: var(--primary);
    letter-spacing: 0.08em;
    text-shadow: 0 0 24px var(--primary-glow);
    user-select: none;
}

/* ============================================
   Forum: like button + post rows
   ============================================ */
.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}
.like-btn:hover { border-color: var(--primary); color: var(--primary); }
.like-btn.liked {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-faint);
}
.like-btn .check {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid currentColor;
    position: relative;
}
.like-btn.liked .check::after {
    content: "✓";
    position: absolute;
    inset: -2px 0 0 0;
    text-align: center;
    line-height: 14px;
    font-size: 14px;
    color: var(--primary);
}

.post-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.2s;
    margin-bottom: 8px;
}
.post-row:hover { border-color: var(--primary); }
.post-row .pr-rank {
    font-family: var(--font-mono);
    color: var(--primary);
    font-weight: 700;
    width: 24px;
}
.post-row .pr-title { font-weight: 600; color: var(--text-bright); }
.post-row .pr-meta  { font-size: 0.8rem; color: var(--text-dim); font-family: var(--font-mono); }
.post-row .pr-likes { font-family: var(--font-mono); color: var(--primary); font-size: 0.9rem; }

/* ============================================
   Video lightbox (edits page)
   ============================================ */
.video-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 20px;
}
.video-modal.open { display: flex; }
.video-modal-inner {
    width: min(100%, calc((100vh - 100px) * 16 / 9));
    max-width: 1280px;
    aspect-ratio: 16/9;
    background: #000;
    position: relative;
    border: 1px solid var(--primary);
}
.video-modal-inner iframe,
.video-modal-inner video {
    width: 100%; height: 100%; border: 0; display: block;
}
.video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 6px 14px;
    font-family: var(--font-mono);
    cursor: pointer;
}

/* ============================================
   Commission / payment form
   ============================================ */
.commission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 30px 0;
}
.commission-pack {
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 22px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.2s;
}
.commission-pack:hover,
.commission-pack.selected {
    border-color: var(--primary);
    background: var(--primary-faint);
}
.commission-pack h3 { color: var(--primary); }
.commission-pack .price {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    color: var(--text-bright);
    font-weight: 700;
}
.commission-pack .price .strike {
    text-decoration: line-through;
    color: var(--text-dim);
    font-size: 1.1rem;
    font-weight: 400;
    margin-right: 8px;
}
.commission-pack .save-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: var(--primary);
    color: var(--bg);
    padding: 2px 8px;
}

.discount-banner {
    border: 1px dashed var(--primary);
    padding: 14px 18px;
    background: var(--primary-faint);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    margin: 20px 0;
}

.chat-thread {
    border: 1px solid var(--border);
    background: var(--surface);
    height: 480px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    scroll-behavior: smooth;
}
.chat-msg {
    max-width: 78%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    word-wrap: break-word;
}
.chat-msg.me { align-self: flex-end; border-color: var(--primary); background: var(--primary-faint); }
.chat-msg .meta { display: block; font-size: 0.7rem; color: var(--text-dim); margin-bottom: 4px; font-family: var(--font-mono); }
.chat-msg .chat-meta { display: block; font-size: 0.72rem; color: var(--text-dim); margin-bottom: 6px; font-family: var(--font-mono); }
.chat-msg .chat-body { white-space: pre-wrap; line-height: 1.55; }
.chat-msg-new { animation: chatMsgIn 0.3s ease-out; }
@keyframes chatMsgIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.form-error,
.form-success {
    padding: 12px 14px;
    border: 1px solid currentColor;
    margin-bottom: 16px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}
.form-error   { color: #e1404e; background: rgba(225,64,78,0.08); }
.form-success { color: #4caf50; background: rgba(76,175,80,0.08); }
/* ============================================
   Plugin sub-nav (below main navbar)
   ============================================ */
.subnav {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 80;
}
.subnav-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 6px 0;
}
.subnav-links li { list-style: none; }
.subnav-links a {
    display: inline-block;
    padding: 8px 14px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: color .15s, border-color .15s;
}
.subnav-links a:hover { color: var(--primary); border-color: var(--border); }
.subnav-links a.active {
    color: var(--primary);
    border-color: var(--primary);
}
@media (max-width: 720px) {
    .subnav-links { gap: 2px; padding: 4px 0; overflow-x: auto; flex-wrap: nowrap; }
    .subnav-links a { padding: 6px 10px; font-size: 0.78rem; white-space: nowrap; }
    .section-title { font-size: 1.0rem; }
}

/* ============================================
   Edit-card meta + video detail page (comments)
   ============================================ */
.edit-card { position: relative; }
.edit-card-meta {
    position: absolute;
    top: 8px; right: 8px;
    display: flex; gap: 6px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    border-radius: 3px;
    pointer-events: none;
}
.video-frame {
    width: 100%;
    max-width: 1280px;
    margin: 24px auto;
    aspect-ratio: 16/9;
    background: #000;
    border: 1px solid var(--border);
}
.video-frame iframe, .video-frame video {
    width: 100%; height: 100%; border: 0; display: block;
}
.video-frame-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--bg-alt);
    color: var(--text-dim);
    text-align: center;
}
.video-frame-placeholder img { max-width: 320px; max-height: 60%; object-fit: contain; }
.video-actions { display: flex; align-items: center; gap: 12px; margin: 12px 0 30px; }
.vc-form {
    display: flex; flex-direction: column; gap: 8px;
    margin: 16px 0 24px;
}
.vc-form textarea {
    width: 100%;
    background: var(--bg-alt);
    color: var(--text);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    padding: 10px;
    resize: vertical;
}
.vc-form button { align-self: flex-start; }
.vc-list { display: flex; flex-direction: column; gap: 14px; }
.vc-comment {
    background: var(--bg-alt);
    border-left: 3px solid var(--primary);
    padding: 10px 14px;
}
.vc-reply { border-left-color: var(--text-dim); }
.vc-head { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.vc-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.vc-author { font-weight: 600; color: var(--text-bright); }
.vc-date { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.75rem; margin-left: auto; }
.vc-body { margin: 8px 0; line-height: 1.5; word-wrap: break-word; }
.vc-deleted { color: var(--text-dim); font-style: italic; }
.vc-actions { display: flex; gap: 6px; align-items: center; }
.vc-action {
    background: none;
    border: 1px solid transparent;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 3px 8px;
    cursor: pointer;
}
.vc-action:hover { color: var(--primary); border-color: var(--border); }
.vc-action.active { color: var(--primary); border-color: var(--primary); }
.vc-del:hover { color: #c83e3e; border-color: #c83e3e; }
.vc-inline-form { display: inline; margin: 0; padding: 0; }
.vc-children { margin-top: 10px; padding-left: 14px; border-left: 1px dashed var(--border); display: flex; flex-direction: column; gap: 10px; }
.vc-reply-form { margin-top: 8px; }

/* ============================================
   Game card banner images
   ============================================ */
.game-card-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ============================================
   2026-05 — Left sidebar layout + deeper light theme
   ============================================ */

/* --- Light theme: deeper navy blue, bluer menu --- */
[data-theme="light"] {
    --bg: #b9d2ee;
    --bg-alt: #9ec0e4;
    --surface: #cadcf2;
    --surface-alt: #abc8e8;
    --border: #2f63a6;
    --text: #04122b;
    --text-dim: #163d72;
    --text-bright: #00102a;
    --code-bg: #a6c5e8;
    --primary: #0b3d91;
    --primary-dark: #062561;
    --primary-glow: rgba(11, 61, 145, 0.42);
    --primary-faint: rgba(11, 61, 145, 0.14);
}
[data-theme="light"] body.game-elytrarace { --primary: #0b3d91; --primary-dark: #062561; --primary-glow: rgba(11,61,145,0.42); --primary-faint: rgba(11,61,145,0.14); }
[data-theme="light"] .navbar,
[data-theme="light"] body.layout-sidebar .navbar {
    background: linear-gradient(180deg, #3593cc 0%, #2477ad 100%);
    border-color: #1d6396;
}
[data-theme="light"] .navbar .nav-logo,
[data-theme="light"] .navbar .nav-links a,
[data-theme="light"] .navbar .nav-pill,
[data-theme="light"] .navbar .nav-user-link,
[data-theme="light"] .navbar .nav-icon-btn {
    color: #d8e6f5;
}
[data-theme="light"] .navbar .nav-links a:hover,
[data-theme="light"] .navbar .nav-links a.active {
    color: #ffffff;
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.40);
}
[data-theme="light"] .navbar .nav-pill,
[data-theme="light"] .navbar .nav-user-link,
[data-theme="light"] .navbar .nav-icon-btn {
    border-color: rgba(255,255,255,0.30);
}
[data-theme="light"] .navbar .nav-pill:hover,
[data-theme="light"] .navbar .nav-user-link:hover,
[data-theme="light"] .navbar .nav-icon-btn:hover {
    color: #ffffff;
    border-color: #ffffff;
}
[data-theme="light"] .navbar .nav-cta {
    background: #ffffff;
    color: #2477ad !important;
    border-color: #ffffff;
}

/* --- Left-sidebar layout (always-on for Holyseb) ----------------------- */
body.layout-sidebar {
    padding-left: 220px;
}
body.layout-sidebar .navbar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 220px;
    z-index: 200;
    border-right: 1px solid var(--border);
    border-bottom: none;
    background: rgba(8, 12, 18, 0.96);
    overflow-y: auto;
}
body.layout-sidebar .nav-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 22px 16px 22px;
    gap: 14px;
    max-width: none;
    height: 100%;
}
body.layout-sidebar .nav-logo {
    justify-self: stretch;
    font-size: 1.2rem;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
body.layout-sidebar .nav-links {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    justify-self: stretch;
    gap: 4px;
    width: 100%;
}
body.layout-sidebar .nav-links a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    min-width: 0;
    border-left: 2px solid transparent;
    border-top: none;
    border-right: none;
    border-bottom: none;
}
body.layout-sidebar .nav-links a:hover,
body.layout-sidebar .nav-links a.active {
    border-color: var(--primary);
    border-left-width: 2px;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    background: var(--primary-faint);
}
body.layout-sidebar .nav-right {
    flex-direction: column;
    align-items: stretch;
    justify-self: stretch;
    margin-top: auto;
    gap: 6px;
    width: 100%;
}
body.layout-sidebar .nav-right > * {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
}
body.layout-sidebar .nav-right .nav-icon-btn {
    width: 100%;
    height: 36px;
}
body.layout-sidebar .nav-right .nav-pill,
body.layout-sidebar .nav-right .nav-user-link,
body.layout-sidebar .nav-right .nav-cta {
    text-align: left;
    padding: 8px 12px;
}
body.layout-sidebar .subnav {
    position: sticky;
    top: 0;
    margin-left: 0;
}
body.layout-sidebar .footer { margin-left: 0; }

/* Mobile: sidebar collapses to slide-in drawer */
@media (max-width: 900px) {
    body.layout-sidebar { padding-left: 0; }
    body.layout-sidebar .navbar {
        position: fixed;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 240px;
        box-shadow: 4px 0 24px rgba(0,0,0,0.4);
    }
    body.layout-sidebar.nav-open .navbar { transform: translateX(0); }
    body.layout-sidebar .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 220;
        background: var(--bg);
    }
    .mystic-hero {
        margin-top: -25px;
    }
    .mystic-sub{
        font-size: 0.7rem;
    }
}

[data-theme="light"] body.layout-sidebar .navbar {
    background: linear-gradient(180deg, #1d3a72 0%, #0e2752 100%);
}

/* --- Clickable game-card banner / name --- */
.game-card-banner.is-link,
.game-card-name.is-link {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: filter 0.2s, transform 0.2s;
}
.game-card-banner.is-link { display: flex; }
.game-card-banner.is-link:hover { filter: brightness(1.08); }
.game-card:hover .game-card-banner.is-link img { transform: scale(1.04); }
.game-card-banner.is-link img { transition: transform 0.4s ease; }
.game-card-name.is-link:hover { color: #fff; }

/* --- Plugin video card with like / comment counts --- */
.plugin-video-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s;
}
.plugin-video-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}
.plugin-video-card .video-wrapper { aspect-ratio: 16 / 9; }
.plugin-video-card .video-wrapper iframe,
.plugin-video-card .video-wrapper video,
.plugin-video-card .video-wrapper img {
    width: 100%; height: 100%; border: 0; display: block; object-fit: cover;
}
.plugin-video-card .pv-info {
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.plugin-video-card .pv-info h3 { font-size: 1rem; }
.plugin-video-card .pv-info p { color: var(--text-dim); font-size: 0.85rem; margin: 0; }
.plugin-video-card .pv-meta {
    display: flex; gap: 14px;
    padding: 8px 16px 14px;
    font-family: var(--font-mono); font-size: 0.78rem;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    align-items: center;
    flex-wrap: wrap;
}
.plugin-video-card .pv-meta a { color: var(--text-dim); }
.plugin-video-card .pv-meta a.pv-open {
    margin-left: auto;
    color: var(--primary);
    border: 1px solid var(--border);
    padding: 4px 10px;
}
.plugin-video-card .pv-meta a.pv-open:hover { border-color: var(--primary); }



/* ============================================
   2026-07 � Profile redesign + community videos + matrix player
   ============================================ */

/* ---- Profile hero / card ---- */
.profile-back-link {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-dim);
    border: 1px solid var(--border);
    padding: 4px 10px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.profile-back-link:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-faint);
}
.profile-hero {
    padding: 40px 0 30px;
    position: relative;
    z-index: 1;
}
.profile-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 36px;
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-alt) 100%);
    border: 1px solid var(--border);
    padding: 30px;
    position: relative;
    overflow: hidden;
}
.profile-card::before {
    content: '';
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(0deg, var(--primary-faint) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, var(--primary-faint) 0 1px, transparent 1px 24px);
    pointer-events: none;
    opacity: 0.45;
    mask-image: radial-gradient(ellipse at 30% 50%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black 30%, transparent 75%);
}
.profile-card > * { position: relative; z-index: 1; }

.profile-avatar-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    aspect-ratio: 1/1;
    margin: 0 auto;
    align-self: start;
    flex-shrink: 0;
}
.profile-avatar-big {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--primary);
    background: var(--bg-alt);
    box-shadow:
        0 0 0 1px var(--primary-faint) inset,
        0 0 30px var(--primary-glow),
        0 0 60px var(--primary-faint);
    display: block;
}
.profile-avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 6rem;
    color: var(--primary);
    background: var(--bg);
}
.profile-avatar-corners span {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--primary);
    box-shadow: 0 0 8px var(--primary-glow);
}
.profile-avatar-corners span:nth-child(1) { top: -3px; left: -3px;  border-right: 0; border-bottom: 0; }
.profile-avatar-corners span:nth-child(2) { top: -3px; right: -3px; border-left: 0;  border-bottom: 0; }
.profile-avatar-corners span:nth-child(3) { bottom: -3px; left: -3px;  border-right: 0; border-top: 0; }
.profile-avatar-corners span:nth-child(4) { bottom: -3px; right: -3px; border-left: 0;  border-top: 0; }

.profile-meta { display: flex; flex-direction: column; gap: 8px; padding-left: 24px; }
.profile-tag {
    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.profile-name {
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    line-height: 1.1;
    margin: 0;
    color: var(--text-bright);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}
.profile-handle {
    font-family: var(--font-mono);
    color: var(--text-dim);
    font-size: 0.95rem;
}
.profile-role {
    display: inline-block;
    align-self: flex-start;
    padding: 2px 8px;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 5px;
    margin-left: 8px;
    vertical-align: middle;
}
.profile-role-admin     { color: #ff1f1f; border-color: #ff1f1f; box-shadow: 0 0 12px rgba(255,31,31,0.1); }
.profile-role-moderator { color: #ffb066; border-color: #ffb066; box-shadow: 0 0 10px rgba(255,176,102,0.1); }
.profile-info {
    display: flex; flex-wrap: wrap; gap: 14px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text);
    margin-top: 8px;
}
.profile-info .dim { color: var(--text-dim); }
.profile-bio {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--bg);
    border-left: 2px solid var(--primary);
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 720px;
}
.profile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
    max-width: 560px;
}
.profile-stats > div {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 7px 10px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border);
}
.profile-stats strong {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    color: var(--primary);
    line-height: 1;
}
.profile-stats span {
    margin-top: 4px;
    color: var(--text-dim);
    font-size: 0.68rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.profile-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.85rem;
    min-width: 0;
    background: var(--surface);
    color: var(--text-dim);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.profile-action-btn:hover {
    background: var(--primary-faint);
    color: var(--primary);
    border-color: var(--primary);
}

@media (max-width: 820px) {
    .profile-card { grid-template-columns: 1fr; }
    .profile-avatar-wrap {
        width: 95%;
        height: auto;
        max-width: 500px;
    }
    .profile-meta { padding-left: 0; }
    .profile-stats { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

@media (max-width: 720px) {
    .profile-card { padding: 20px 16px; gap: 20px; }
    .profile-avatar-wrap {
        width: 95%;
        max-width: 550px;
    }
    .profile-stats { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 6px;
        max-width: 100%;
    }
    .profile-stats > div { padding: 6px 8px; }
}

/* ---- Profile tabs ---- */
.profile-tabs-section { padding-top: 0px; }
.profile-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    overflow-x: auto;
}
.profile-tab {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 0;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 10px 16px;
    cursor: pointer;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.profile-tab:hover { color: var(--primary); }
.profile-tab.active {
    color: var(--primary);
    background: var(--surface);
    border-color: var(--border);
    border-bottom: 1px solid var(--surface);
    margin-bottom: -1px;
}
.profile-panel { display: none; animation: panelFade 0.25s ease-out; }
.profile-panel.active { display: block; }
@keyframes panelFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.profile-post-list { display: flex; flex-direction: column; gap: 8px; }
.profile-post-row {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 14px;
    padding: 12px 14px;
    background: var(--bg-alt);
    border-left: 2px solid var(--primary);
    color: var(--text);
    transition: background 0.15s, transform 0.15s;
}
.profile-post-row:hover { background: var(--surface); transform: translateX(3px); color: var(--text-bright); }
.profile-post-cat {
    font-family: var(--font-mono);
    color: var(--primary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.profile-post-title { font-weight: 600; }
.profile-post-meta { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.78rem; }
@media (max-width: 720px) {
    .profile-post-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- Settings panel ---- */
.settings-shell { max-width: none; width: 100%; }
.settings-title {
    font-family: var(--font-mono);
    color: var(--primary);
    margin-bottom: 18px;
}
.settings-group {
    margin-bottom: 28px;
    padding: 18px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
}
.settings-group h3 {
    font-family: var(--font-mono);
    color: var(--primary);
    margin-bottom: 14px;
    font-size: 0.95rem;
    letter-spacing: 1px;
}
.settings-avatar-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.settings-avatar-row img {
    width: 96px; height: 96px;
    object-fit: cover;
    border: 1px solid var(--primary);
}

/* ---- Users directory grid ---- */
.users-search {
    display: flex; gap: 8px;
    margin-top: 16px;
    max-width: 520px;
}
.users-search input {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-mono);
}
.users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.user-card {
    display: flex; flex-direction: column; align-items: center;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 18px 12px 14px;
    text-align: center;
    color: var(--text);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    position: relative;
}
.user-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 24px var(--primary-faint);
    color: var(--text-bright);
}
.user-card-avatar-wrap { 
    width: 88px; 
    height: 88px; 
    margin-bottom: 10px;
    position: relative;
}
.user-card .profile-role {
    position: absolute;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.58rem;
    padding: 1px 6px;
    margin: 0;
    z-index: 2;
    width: 90%;
    background-color: #111;
}
.user-card-avatar {
    width: 88px; height: 88px;
    object-fit: cover;
    border: 1px solid var(--primary);
}
.user-card-avatar-empty {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 2rem;
    color: var(--primary);
    background: var(--bg);
}
.user-card-name { font-weight: 600; color: var(--text-bright); margin-top: 2px; }
.user-card-handle { font-family: var(--font-mono); color: var(--text-dim); font-size: 0.78rem; }
.user-card-stats {
    display: flex; gap: 10px;
    margin-top: 8px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

/* ---- User-video cards (community videos grid additions) ---- */
.uv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.uv-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 24px var(--primary-faint);
}
.uv-card .uv-card-link {
    display: flex;
    flex-direction: column;
    color: var(--text);
    text-decoration: none;
    flex: 1;
}
.uv-card .uv-card-link:hover { color: var(--text-bright); }
.uv-card-author {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 4px 9px;
    border: 1px solid rgba(68, 167, 225, 0.4);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.uv-card-author:hover {
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.92);
    color: var(--primary);
    transform: translateX(2px);
}
.uv-card-author img {
    width: 18px; height: 18px;
    object-fit: cover;
    border: 1px solid var(--primary);
}
.uv-thumb-fallback {
    width: 100%; padding-top: 56.25%;
    background: var(--bg-alt);
    position: relative;
}
.uv-thumb-fallback span {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
    font-size: 3rem;
}

/* ---- Simple YouTube embed (default, when USE_CUSTOM_PLAYER = false) ---- */
.video-embed {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 24px auto;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    background: var(--bg-alt);
    border: 2px solid var(--primary);
    box-shadow: 
        0 0 20px rgba(68, 167, 225, 0.3),
        inset 0 0 20px rgba(68, 167, 225, 0.05);
    overflow: hidden;
}
.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-embed:hover {
    border-color: var(--text-bright);
    box-shadow: 
        0 0 30px rgba(68, 167, 225, 0.5),
        inset 0 0 20px rgba(68, 167, 225, 0.08);
}

/* ---- Matrix-styled custom YouTube player ---- */
.matrix-player {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 24px auto;
    padding: 14px;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
        repeating-linear-gradient(
            to bottom,
            rgba(68,167,225,0.05) 0,
            rgba(68,167,225,0.05) 1px,
            transparent 1px,
            transparent 3px
        );
    border: 1px solid var(--primary);
    box-shadow:
        0 0 0 1px var(--primary-faint) inset,
        0 0 40px var(--primary-glow),
        0 8px 60px rgba(0,0,0,0.5);
}
.matrix-player::before,
.matrix-player::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary-glow);
    opacity: 0.55;
}
.matrix-player::before { top: 0; }
.matrix-player::after  { bottom: 0; }

.matrix-player-frame {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    border: 1px solid var(--border);
    overflow: hidden;
}
.matrix-player-frame iframe {
    width: 100%; height: 100%; border: 0; display: block;
}

.matrix-player-corners {
    position: absolute;
    inset: 4px;
    pointer-events: none;
    z-index: 2;
}
.matrix-player-corners span {
    position: absolute;
    width: 22px; height: 22px;
    border: 2px solid var(--primary);
    box-shadow: 0 0 12px var(--primary-glow);
}
.matrix-player-corners span:nth-child(1) { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.matrix-player-corners span:nth-child(2) { top: 0; right: 0; border-left: 0;  border-bottom: 0; }
.matrix-player-corners span:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.matrix-player-corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

.matrix-player-readout {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.85;
}

/* ---- Owner toolbar under the matrix player ---- */
.uv-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 18px 0 10px;
    padding: 12px 14px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
}
.uv-owner {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
}
.uv-owner img {
    width: 44px; height: 44px;
    object-fit: cover;
    border: 1px solid var(--primary);
}
.uv-owner span { display: flex; flex-direction: column; line-height: 1.2; }
.uv-owner strong { color: var(--text-bright); }
.uv-owner small { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.78rem; }
.uv-toolbar-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-height: 60px;}
.uv-toolbar-right .btn-secondary,
.uv-toolbar-right .like-btn {
    min-height: 50px;
    padding: 10px 16px;
    margin: 0;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .uv-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .uv-toolbar-right {
        width: 100%;
        justify-content: flex-start;
    }
}
.uv-description {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--bg);
    border-left: 2px solid var(--primary);
    color: var(--text);
    line-height: 1.55;
    white-space: pre-wrap;
}

/* Activate state for like-btn used in user videos */
.like-btn.active { color: var(--primary); border-color: var(--primary); background: var(--primary-faint); }

/* ============================================
   Custom YouTube player controls (matrix style)
   ============================================ */
.matrix-player-frame { position: relative; }
.matrix-player-frame #ytPlayer,
.matrix-player-frame #ytPlayer iframe {
    width: 100% !important;
    height: 100% !important;
    position: absolute; inset: 0;
    border: 0; display: block;
}

/* Title bar overlay (top) */
.mp-titlebar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 4;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    font-family: var(--font-mono);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mp-titlebar .mp-title-tag {
    color: var(--primary);
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-shadow: 0 0 8px var(--primary-glow);
}

/* ============================================================
   UNIFIED ACTION BUTTONS (CTA + admin + forum + iOS friendly)
   ============================================================ */

/* Reset iOS default styling globally for buttons/links to make
   tap highlight transparent and ensure consistent rendering. */
.btn-cta-action,
.action-btn,
.profile-action-btn,
.nav-icon-btn,
.nav-pill,
.nav-cta,
.btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* ---- .btn-cta-action : main CTA used on server.php / plugins.php / forum / index ---- */
.btn-cta-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 12px 22px;
    min-height: 44px;
    color: var(--bg);
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 0 rgba(68,167,225,0);
    white-space: nowrap;
    user-select: none;
}
.btn-cta-action:hover,
.btn-cta-action:focus-visible {
    background: var(--text-bright);
    border-color: var(--text-bright);
    color: var(--bg);
    box-shadow: 0 0 18px rgba(68,167,225,0.45);
    outline: none;
}
.btn-cta-action:active { transform: translateY(1px); }

.btn-cta-action.is-ghost {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.btn-cta-action.is-ghost:hover,
.btn-cta-action.is-ghost:focus-visible {
    background: var(--primary-faint, rgba(68,167,225,0.12));
    color: var(--text-bright);
    border-color: var(--text-bright);
}

.btn-cta-action.is-block { display: inline-flex; }
.btn-cta-action.is-success {
    background: #1f9d55;
    border-color: #1f9d55;
    color: #fff;
}

/* ---- Action button container (admin + forum) ---- */
.action-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* ---- .action-btn : admin/forum smaller actions ---- */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 8px 12px;
    min-height: 36px;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.action-btn:hover,
.action-btn:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-faint, rgba(68,167,225,0.08));
    outline: none;
}
.action-btn:active { transform: translateY(1px); }

.action-btn.is-primary {
    color: var(--bg);
    background: var(--primary);
    border-color: var(--primary);
}
.action-btn.is-primary:hover,
.action-btn.is-primary:focus-visible {
    background: var(--text-bright);
    border-color: var(--text-bright);
    color: var(--bg);
}
.action-btn.is-warn {
    color: #f0b429;
    border-color: rgba(240,180,41,0.4);
}
.action-btn.is-warn:hover,
.action-btn.is-warn:focus-visible {
    background: rgba(240,180,41,0.1);
    border-color: #f0b429;
    color: #f0b429;
}
.action-btn.is-danger {
    color: #ef4444;
    border-color: rgba(239,68,68,0.4);
}
.action-btn.is-danger:hover,
.action-btn.is-danger:focus-visible {
    background: rgba(239,68,68,0.1);
    border-color: #ef4444;
    color: #ef4444;
}

/* ---- Forum mod toolbar ---- */
.mod-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 0 0 14px;
    border: 1px dashed var(--border);
    background: var(--bg-alt, rgba(255,255,255,0.02));
    font-family: var(--font-mono);
}
.mod-toolbar.is-inline {
    margin: 8px 0 4px;
    padding: 6px 8px;
}
.mod-toolbar-tag {
    font-size: 0.72rem;
    color: var(--primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-right: 6px;
}
.mod-toolbar form,
.mod-toolbar .action-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ---- Admin tables ---- */
.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    background: var(--bg-alt, rgba(255,255,255,0.02));
    -webkit-overflow-scrolling: touch;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    min-width: 640px;
}
.admin-table thead th {
    text-align: left;
    padding: 12px 14px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    background: rgba(0,0,0,0.15);
    white-space: nowrap;
}
.admin-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}
.admin-table tbody tr:hover { background: var(--primary-faint, rgba(68,167,225,0.05)); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .admin-cell-actions { width: 1%; white-space: nowrap; }
.admin-table .action-cell { width: 1%; white-space: nowrap; }

/* Admin table responsive: card mode on small screens */
@media (max-width: 720px) {
    .admin-table-wrap { border: 0; background: transparent; overflow: visible; }
    .admin-table { min-width: 0; display: block; }
    .admin-table thead { display: none; }
    .admin-table tbody, .admin-table tr { display: block; }
    .admin-table tr {
        margin-bottom: 12px;
        background: var(--bg-alt, rgba(255,255,255,0.03));
        border: 1px solid var(--border);
        padding: 10px 12px;
    }
    .admin-table td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border: 0 !important;
        padding: 6px 0;
        font-size: 0.85rem;
    }
    .admin-table td::before {
        content: attr(data-label);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-dim);
        flex: 0 0 auto;
    }
    .admin-table td.admin-cell-actions,
    .admin-table td.action-cell {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-table td.admin-cell-actions::before,
    .admin-table td.action-cell::before { margin-bottom: 6px; }
    .admin-table .action-btns {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .admin-table .action-btns > form,
    .admin-table .action-btns form {
        display: contents;
    }
    .admin-table .action-btn {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 0.82rem;
        width: 100%;
    }
    /* Selects (e.g. role dropdown in admin/users.php) full width on mobile */
    .admin-table select,
    .admin-table input[type="text"] {
        width: 100%;
        min-height: 44px;
        padding: 8px 10px;
        font-size: 16px; /* prevents iOS zoom */
        background: var(--bg);
        color: var(--text);
        border: 1px solid var(--border);
        font-family: var(--font-mono);
    }
}

/* ============================================================
   RESPONSIVE FIXES — narrow-desktop nav menu, mobile buttons
   ============================================================ */

/* Override the legacy .btn min-width:400px which broke mobile.
   Makes "see all videos", forum buttons, etc. fit on phones. */
@media (max-width: 720px) {
    .btn { min-width: 0 !important; width: auto; max-width: 100%; }
    .btn-cta-action { width: 100%; max-width: 480px; }
    .btn-cta-action.is-block { width: 100%; max-width: none; }
    .hero-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
    .hero-actions .btn-cta-action { margin-right: 0 !important; }

    /* "See all videos" / forum CTAs: full width like the cards above */
    .edits-grid + p .btn-cta-action,
    .edits-grid ~ p .btn-cta-action {
        display: flex;
        width: 100%;
        max-width: none;
        padding: 16px 22px;
        font-size: 0.95rem;
        min-height: 52px;
    }
}

/* Map modal — also style the plugins.php variant + iPhone tweaks */
.map-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.9);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: env(safe-area-inset-top, 12px) env(safe-area-inset-right, 12px)
             env(safe-area-inset-bottom, 12px) env(safe-area-inset-left, 12px);
}
.map-modal.active { display: flex; opacity: 1; }
.map-modal-content {
    position: relative;
    max-width: min(95vw, 1400px);
    max-height: 95vh;
    animation: modalZoom 0.25s ease-out;
}
.map-modal img {
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    -webkit-user-select: none;
    user-select: none;
}

/* ============================================================
   USER PROFILE: progressive video reveal on mobile (4 by 4)
   ============================================================ */
@media (max-width: 720px) {
    .profile-panel[data-panel="videos"] .edits-grid > .edit-card.is-hidden { display: none; }
}
.uv-load-more-wrap {
    display: none;
    margin: 18px 0 4px;
    text-align: center;
}
@media (max-width: 720px) {
    .uv-load-more-wrap.is-active { display: block; }
}
.uv-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 12px 22px;
    min-height: 44px;
    width: 100%;
    max-width: 320px;
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}
.uv-load-more-btn:hover,
.uv-load-more-btn:focus-visible {
    background: var(--primary-faint, rgba(68,167,225,0.12));
    color: var(--text-bright);
    border-color: var(--text-bright);
    outline: none;
}

/* ============================================================
   iOS / iPhone safe-area + form input fixes
   ============================================================ */
@supports (-webkit-touch-callout: none) {
    /* Prevent iOS auto-zoom on input focus by ensuring 16px font */
    input, select, textarea { font-size: 16px; }
    /* Ensure bottom buttons aren't hidden under home indicator */
    .navbar { padding-top: env(safe-area-inset-top, 0); }
}
.mp-titlebar .mp-title-text {
    font-size: 0.95rem;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Click overlay above the iframe (lets us catch click/dblclick) */
.mp-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 56px;
    z-index: 2;
    cursor: pointer;
    background: transparent;
}

/* Bottom controls bar */
.mp-controls {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0) 100%);
    color: #fff;
    font-family: var(--font-mono);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.matrix-player:hover .mp-controls,
.matrix-player:hover .mp-titlebar,
.matrix-player:focus-within .mp-controls,
.matrix-player:focus-within .mp-titlebar {
    opacity: 1;
}

.mp-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--primary);
    font-size: 1rem;
    padding: 4px 10px;
    cursor: pointer;
    font-family: var(--font-mono);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mp-btn:hover {
    background: rgba(68, 167, 225, 0.15);
    border-color: var(--primary);
    color: #fff;
}
.mp-time {
    font-size: 0.78rem;
    color: var(--text-bright);
    min-width: 42px;
    text-align: center;
    text-shadow: 0 0 6px var(--primary-glow);
}

/* Seek bar */
.mp-seek {
    position: relative;
    flex: 1;
    height: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.mp-seek::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.mp-seek-fill {
    position: absolute;
    left: 0;
    top: 50%; transform: translateY(-50%);
    height: 4px;
    width: 0%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary-glow);
    pointer-events: none;
}
.mp-seek-thumb {
    position: absolute;
    left: 0%;
    top: 50%;
    width: 12px; height: 12px;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: transform 0.1s ease;
}
.mp-seek:hover .mp-seek-thumb { transform: translate(-50%, -50%) scale(1.3); }

/* Volume */
.mp-vol {
    position: relative;
    width: 70px; height: 14px;
    cursor: pointer;
    display: flex; align-items: center;
}
.mp-vol::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
}
.mp-vol-fill {
    position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    height: 3px;
    width: 80%;
    background: var(--primary);
    box-shadow: 0 0 6px var(--primary-glow);
    pointer-events: none;
}

/* Fullscreen tweaks */
.matrix-player:fullscreen {
    padding: 0;
    max-width: none;
    width: 100vw; height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    background: #000;
}
.matrix-player:fullscreen .matrix-player-frame { flex: 1; aspect-ratio: auto; height: 100vh; }
.matrix-player:fullscreen .matrix-player-readout,
.matrix-player:fullscreen .matrix-player-corners { display: none; }

@media (max-width: 600px) {
    .mp-controls { gap: 6px; padding: 8px; flex-wrap: wrap; }
    .mp-vol { display: none; }
    .mp-titlebar .mp-title-text { font-size: 0.82rem; }
}
.map-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.map-modal.active {
  display: flex;
  opacity: 1;
}
.map-modal-content {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  animation: modalZoom 0.25s ease-out;
}
.map-modal img {
  width: 100%;
  height: auto;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 8px;
}
@keyframes modalZoom {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .map-modal-content {
    max-width: 98vw;
    max-height: 90vh;
  }
}

/* ============================================
   HOLY SHOP  ·  Matrix garment store
   ============================================ */
.shop-hero { position: relative; overflow: hidden; }
.shop-matrix {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none; opacity: 0.45;
    mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.shop-title { position: relative; z-index: 2; }

/* category chips */
.shop-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.shop-chip {
    font-family: var(--font-mono); font-size: 0.78rem;
    padding: 6px 14px; border: 1px solid var(--border);
    color: var(--text-dim); background: var(--bg-alt);
    transition: all 0.18s; white-space: nowrap;
}
.shop-chip:hover { color: var(--text-bright); border-color: var(--primary); }
.shop-chip.active { color: var(--bg); background: var(--primary); border-color: var(--primary); }

/* product grid */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.shop-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--border); background: var(--bg-alt);
    color: var(--text); transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.shop-card:hover {
    transform: translateY(-4px); border-color: var(--primary);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 0 1px var(--primary-faint);
}
.shop-card-media {
    position: relative; aspect-ratio: 1 / 1.15; overflow: hidden;
    background:
        radial-gradient(120% 80% at 50% 0%, var(--swatch, #1f2733) 0%, transparent 70%),
        var(--code-bg);
}
.shop-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-card-ph {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
}
.shop-card-ph-glyph {
    font-family: var(--font-mono); font-weight: 700; font-size: 3.4rem;
    color: var(--text-bright); opacity: 0.9; line-height: 1;
}
.shop-card-ph-tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); }
.shop-badge {
    position: absolute; top: 10px; left: 10px;
    font-family: var(--font-mono); font-size: 0.68rem;
    padding: 3px 8px; background: var(--primary); color: var(--bg);
}
.shop-card-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.shop-card-name { margin: 0; font-size: 1rem; color: var(--text-bright); }
.shop-card-sub { margin: 0; font-size: 0.8rem; }
.shop-card-price {
    margin-top: 4px; font-family: var(--font-mono); font-weight: 700;
    color: var(--primary); font-size: 1rem;
}

/* flash messages */
.shop-flash {
    border: 1px solid var(--primary); background: var(--primary-faint);
    color: var(--text-bright); padding: 10px 14px; margin-bottom: 18px;
    font-family: var(--font-mono); font-size: 0.85rem;
}
.shop-flash.is-err { border-color: #E14444; background: rgba(225,68,68,0.08); }

/* ---- product detail ---- */
.product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.product-media-main {
    aspect-ratio: 1 / 1.15; border: 1px solid var(--border); overflow: hidden;
    background:
        radial-gradient(120% 80% at 50% 0%, var(--swatch, #1f2733) 0%, transparent 70%),
        var(--code-bg);
}
.product-media-main img { width: 100%; height: 100%; object-fit: cover; }
.product-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.product-thumb {
    width: 60px; height: 68px; padding: 0; border: 1px solid var(--border);
    background: var(--bg-alt); cursor: pointer; overflow: hidden;
}
.product-thumb.active { border-color: var(--primary); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-name { margin: 8px 0 4px; color: var(--text-bright); }
.product-sub { margin: 0 0 10px; font-size: 0.95rem; }
.product-price { font-family: var(--font-mono); font-weight: 700; font-size: 1.5rem; color: var(--primary); margin: 6px 0 16px; }
.product-desc { color: var(--text); line-height: 1.6; margin-bottom: 20px; }
.product-label { display: block; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); margin: 14px 0 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.size-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.size-opt { position: relative; }
.size-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.size-opt span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 46px; padding: 8px 12px; border: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 0.85rem; color: var(--text); background: var(--bg-alt);
    transition: all 0.15s;
}
.size-opt input:checked + span { border-color: var(--primary); color: var(--primary); background: var(--primary-faint); }
.size-opt.is-out span { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.qty-row { display: inline-flex; align-items: stretch; border: 1px solid var(--border); width: fit-content; }
.qty-row input { width: 56px; text-align: center; background: var(--bg-alt); border: none; color: var(--text-bright); font-family: var(--font-mono); }
.qty-btn { width: 40px; background: var(--bg-alt); border: none; color: var(--text-bright); font-size: 1.2rem; cursor: pointer; }
.qty-btn:hover { background: var(--primary); color: var(--bg); }

/* ---- cart ---- */
.cart-table { display: flex; flex-direction: column; gap: 2px; }
.cart-row {
    display: grid;
    grid-template-columns: 72px minmax(0,1fr) 80px 100px 32px;
    gap: 12px; align-items: center;
    padding: 12px; border: 1px solid var(--border); background: var(--bg-alt);
}
.cart-row-media {
    width: 72px; height: 82px; overflow: hidden; border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 80% at 50% 0%, var(--swatch, #1f2733) 0%, transparent 70%), var(--code-bg);
}
.cart-row-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-row-ph { font-family: var(--font-mono); font-weight: 700; font-size: 1.6rem; color: var(--text-bright); }
.cart-row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-row-name { color: var(--text-bright); font-weight: 600; }
.cart-row-unit { font-family: var(--font-mono); font-size: 0.78rem; }
.cart-row-qty input { width: 64px; text-align: center; padding: 6px; background: var(--bg); border: 1px solid var(--border); color: var(--text-bright); font-family: var(--font-mono); }
.cart-row-line { font-family: var(--font-mono); font-weight: 700; color: var(--text-bright); text-align: right; }
.cart-row-rm { background: none; border: 1px solid var(--border); color: var(--text-dim); width: 30px; height: 30px; cursor: pointer; transition: all 0.15s; }
.cart-row-rm:hover { border-color: #E14444; color: #E14444; }
.cart-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.cart-total { display: flex; gap: 12px; align-items: baseline; font-size: 1.2rem; }
.cart-total strong { font-family: var(--font-mono); color: var(--primary); }

/* ---- checkout ---- */
.checkout-form .form-grid, .form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.form-grid label { display: flex; flex-direction: column; gap: 6px; }
.form-grid label.span2 { grid-column: 1 / -1; }
.form-grid label span { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.form-grid input, .form-grid textarea, .form-grid select {
    padding: 10px 12px; background: var(--bg-alt); border: 1px solid var(--border);
    color: var(--text-bright); font-family: var(--font-sans); font-size: 0.92rem;
}
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus {
    outline: none; border-color: var(--primary);
}
.checkout-line { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.92rem; }
.checkout-line-total { border-bottom: none; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 1.1rem; }
.checkout-line-total strong { font-family: var(--font-mono); color: var(--primary); }
.checkout-done { text-align: center; padding: 30px 0; }

/* ---- 3D showroom ---- */
.showroom-section { padding: 30px 0 60px; }
.showroom-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.showroom-stage {
    position: relative; width: 100%; height: 62vh; min-height: 420px; max-height: 640px;
    border: 1px solid var(--border);
    background:
        radial-gradient(80% 60% at 50% 30%, rgba(68,167,225,0.06) 0%, transparent 70%),
        var(--code-bg);
    overflow: hidden; touch-action: pan-y;
}
.showroom-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.showroom-stage canvas:active { cursor: grabbing; }
.showroom-label {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-bright);
    background: rgba(10,14,20,0.8); border: 1px solid var(--primary);
    padding: 6px 14px; opacity: 0; transition: opacity 0.2s; pointer-events: none; white-space: nowrap;
}
.showroom-label.show { opacity: 1; }

/* ---- shop admin ---- */
.admin-block { border: 1px solid var(--border); background: var(--bg-alt); padding: 16px; margin-top: 20px; }
.admin-block > summary { cursor: pointer; font-family: var(--font-mono); color: var(--text-bright); }
.admin-sizes { margin-top: 14px; }
.admin-sizes-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.admin-size { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border); padding: 8px; background: var(--bg); }
.admin-size span { font-family: var(--font-mono); font-size: 0.8rem; }
.admin-size input[type=number] { width: 64px; padding: 4px 6px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-bright); }
.admin-thumb {
    width: 60px; height: 68px; flex: none; overflow: hidden; border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 80% at 50% 0%, var(--swatch, #1f2733) 0%, transparent 70%), var(--code-bg);
    font-family: var(--font-mono); font-weight: 700; color: var(--text-bright);
}
.admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-product input, .admin-product select { background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-bright); padding: 5px 7px; font-family: var(--font-mono); font-size: 0.82rem; }
.admin-vstock { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-dim); display: inline-flex; gap: 4px; align-items: center; }
.admin-vstock input { width: 56px; }
.admin-orders { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.admin-orders th, .admin-orders td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-orders th { font-family: var(--font-mono); color: var(--text-dim); font-size: 0.74rem; text-transform: uppercase; }
.order-status { font-family: var(--font-mono); font-size: 0.72rem; padding: 2px 8px; border: 1px solid var(--border); }
.order-pending { color: #FFB627; border-color: #FFB627; }
.order-paid, .order-shipped { color: #44E1D7; border-color: #44E1D7; }
.order-cancelled, .order-refunded { color: #E14444; border-color: #E14444; }

@media (max-width: 760px) {
    .product-layout { grid-template-columns: 1fr; gap: 20px; }
    .form-grid { grid-template-columns: 1fr; }
    .cart-row { grid-template-columns: 56px minmax(0,1fr) 70px; grid-template-areas: "media info rm" "media qty line"; row-gap: 8px; }
    .cart-row-media { grid-area: media; }
    .cart-row-info { grid-area: info; }
    .cart-row-qty { grid-area: qty; }
    .cart-row-line { grid-area: line; align-self: center; }
    .cart-row-rm { grid-area: rm; justify-self: end; }
    .showroom-stage { height: 56vh; min-height: 360px; }
}

/* =====================================================================
   DEEP ATMOSPHERIC OVERRIDE LAYER  (end of file → wins the cascade)
   grandiose · atmospheric · experimental · coded · deep blue · mysterious
   ===================================================================== */

/* 1. Re-assert deep tokens for every theme state (beats earlier light blocks). */
:root,
[data-theme="light"],
[data-theme="dark"] {
    --primary: #5a8cff;
    --primary-dark: #2f63d6;
    --primary-glow: rgba(90, 140, 255, 0.45);
    --primary-faint: rgba(90, 140, 255, 0.08);
    --bg: #060912;
    --bg-alt: #090e1c;
    --surface: #0d1426;
    --surface-alt: #121b32;
    --border: #1d2942;
    --text: #c3d0e8;
    --text-dim: #6d7d9e;
    --text-bright: #eaf1ff;
    --code-bg: #070b16;
    --glass-bg: #0d1426;
    --glass-border: rgba(120, 160, 255, 0.16);
    --glass-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Perf: background pseudo layers stay disabled in every theme state. */
body::before, body::after,
[data-theme="light"] body::before, [data-theme="light"] body::after,
[data-theme="dark"] body::before, [data-theme="dark"] body::after { content: none !important; }

::selection { background: var(--primary); color: #fff; }

/* 2. Headings — grandiose, mono, luminous */
h1, h2, h3, h4, h5, h6,
.hero h1, .hero h1 .accent, .section-title {
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    color: var(--text-bright);
}
.hero h1 {
    font-size: clamp(2.2rem, 6vw, 4.6rem);
    line-height: 1.04;
    text-shadow: 0 0 24px rgba(90,140,255,0.35);
}
.hero h1 .accent { color: var(--primary); }
.section-title { text-shadow: none; }
/* Center the grand titles */
.hero, .section-title, .hero h1, .hero .hero-subtitle { text-align: center; }
.section-title { display: block; }

/* 3. Navbar — deep frosted glass with a line of light */
.navbar,
[data-theme="light"] .navbar,
[data-theme="dark"] .navbar,
[data-theme="light"] body.layout-sidebar .navbar {
    /* Perf: opaque background, no backdrop-filter, hairline only */
    background: #0a101f !important;
    border-bottom: 1px solid var(--glass-border);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.nav-logo { color: var(--text-bright); letter-spacing: 0.06em; }
.nav-logo .bracket { color: var(--primary); }
.nav-links a { color: var(--text-dim); border-radius: 4px; transition: color .15s, background .15s; }
.nav-links a:hover, .nav-links a.active {
    color: var(--text-bright);
    background: rgba(90,140,255,0.10);
    box-shadow: inset 0 0 0 1px rgba(90,140,255,0.30);
}

/* 4. Deep glass panels — cards, modals, footer */
.card,
.game-card,
.footer,
.modal-card, .bp-modal-card,
.commission-pack,
.shop-card, .product-card,
.forum-card, .post-card {
    /* Perf: opaque surface, no backdrop-filter, one small shadow */
    background: var(--surface) !important;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.card:hover, .game-card:hover {
    border-color: rgba(90,140,255,0.35);
}

/* 5. Buttons — luminous deep blue */
.btn, .btn-primary, .nav-cta,
button.btn, a.btn, .btn-block,
.btn-cta-action:not(.is-ghost),
.commission-pack.selected {
    background: linear-gradient(180deg, #5a8cff 0%, #2f63d6 100%) !important;
    color: #ffffff !important;
    border: 1px solid #2f63d6;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(20,50,140,0.4);
    transition: transform .15s;
}
.btn:hover, .btn-primary:hover, .nav-cta:hover, a.btn:hover, .btn-block:hover {
    transform: translateY(-2px);
    color: #fff !important;
}
.btn-secondary, .nav-pill, .nav-user-link, .btn-ghost, .btn-cta-action.is-ghost {
    background: rgba(90,140,255,0.06) !important;
    color: var(--text) !important;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.btn-secondary:hover, .nav-pill:hover, .nav-user-link:hover, .btn-ghost:hover {
    border-color: var(--primary);
    color: var(--text-bright) !important;
    background: rgba(90,140,255,0.14) !important;
}

/* 6. Form controls — dark navy fields */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], textarea, select {
    background: rgba(6, 10, 20, 0.7);
    color: var(--text-bright);
    border: 1px solid var(--border);
    border-radius: 6px;
}
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(90,140,255,0.25);
}
::placeholder { color: #51607e; }

/* 7. Code / pre */
pre, code, .code-bg { background: var(--code-bg) !important; color: var(--text-bright); border-radius: 8px; }

/* 8. Scrollbar */
::-webkit-scrollbar-track { background: #070b16; }
::-webkit-scrollbar-thumb { background: #1d2942; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* 9. Tidy color leftovers */
.section-title::before { content: none; }
.footer, .footer a { color: var(--text-dim); }
.footer a:hover { color: var(--primary); }
.hero-subtitle { color: var(--text-dim); }
.game-card-name { color: var(--text-bright); }
.game-card-name.is-link:hover { color: var(--primary); }

/* =====================================================================
   PLUGIN PAGES + CODE — experimental · coded · deep · mysterious
   ===================================================================== */

/* ---- Plugin sub-navigation: deep glass pills ---- */
.subnav {
    background: #0a101f !important;
    border-bottom: 1px solid var(--glass-border);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.subnav-links { padding: 9px 0; }
.subnav-links a { border-radius: 4px; letter-spacing: 0.08em; color: var(--text-dim); border-color: transparent; }
.subnav-links a:hover { color: var(--text-bright); background: rgba(90,140,255,0.10); border-color: transparent; }
.subnav-links a.active {
    color: #fff;
    background: linear-gradient(180deg, #5a8cff, #2f63d6);
    border-color: #2f63d6;
}

/* ---- Mystical plugin hero: luminous accent (single soft glow) ---- */
.hero h1 .accent { text-shadow: 0 0 24px rgba(90,140,255,0.4); }

/* ---- Code panels: deep terminal with a window header ---- */
pre {
    position: relative;
    background: var(--code-bg) !important;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: var(--glass-shadow);
    padding: 42px 22px 22px !important;
    overflow: auto;
}
pre::before {                 /* top window strip */
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 32px;
    background: rgba(90,140,255,0.07);
    border-bottom: 1px solid var(--glass-border);
}
pre::after {                  /* three light dots */
    content: "";
    position: absolute; top: 12px; left: 18px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #2f63d6;
    box-shadow: 15px 0 0 #3d74e0, 30px 0 0 #5a8cff;
}
pre code { color: #d7e3ff; }

/* Inline code chips */
:not(pre) > code {
    background: rgba(90,140,255,0.10);
    color: #9bb8ff;
    border: 1px solid var(--glass-border);
    border-radius: 5px;
    padding: 2px 7px;
}

/* ---- Command reference: code-forward rows ---- */
.cmd-list {
    border: 1px solid var(--glass-border) !important;
    border-radius: 10px;
    background: var(--surface) !important;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}
.cmd-list li { border-bottom: 1px solid var(--border); transition: background .15s; }
.cmd-list li:hover { background: rgba(90,140,255,0.07); }
.cmd-list .cmd { color: #9bb8ff; font-weight: 600; }
.cmd-list .cmd::before { content: "› "; color: var(--primary); opacity: .7; }
.cmd-list .desc { color: var(--text-dim); }

/* ---- Permissions: token rows ---- */
.perm-list li {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--primary);
    border-radius: 6px;
}
.perm-list .perm { color: #9bb8ff; }
.perm-list .default {
    color: var(--text-dim);
    background: rgba(90,140,255,0.10);
    border-radius: 999px;
    padding: 1px 9px;
}

/* ---- Feature cards: deep glass ---- */
.feat-list li {
    background: var(--surface) !important;
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--primary);
    border-radius: 10px;
    box-shadow: var(--glass-shadow);
    transition: border-color .15s;
}
.feat-list li:hover {
    border-color: rgba(90,140,255,0.4);
}
.feat-list b { color: var(--text-bright); }
.feat-list span { color: var(--text-dim); }

/* ---- Plugin video card: deep glass ---- */
.plugin-video-card {
    background: var(--surface) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}
.plugin-video-card:hover { border-color: rgba(90,140,255,0.4); }

/* ---- Plugin section titles ---- */
.section-title { color: var(--text-bright); }
.hero-subtitle { color: var(--text-dim); }

/* =====================================================================
   PERF LAYER — kill continuous repaints kept from older themes
   ===================================================================== */
/* Animated text-shadow on every title letter = full repaint each frame */
.mystic-letter.settled {
    animation: none;
    text-shadow: 0 0 18px rgba(90,140,255,0.35);
}