/* ═══════════════════════════════════════════════════════════ DUAL THEME SYSTEM — Admin vs Pixel Usage: → clean dark editor UI → retro pixel-art game UI Each theme defines its own CSS variables for fonts, colors, borders, and rendering mode. ═══════════════════════════════════════════════════════════ */ /* ── Fonts ── */ @font-face { font-family: 'Kyrou7Wide'; src: url('/assets/fonts/Kyrou7Wide.ttf'); font-display: swap; } @font-face { font-family: 'Kyrou7WideBold'; src: url('/assets/fonts/Kyrou7WideBold.ttf'); font-display: swap; } @font-face { font-family: 'ManaSeedTitle'; src: url('/assets/fonts/ManaSeedTitle.ttf'); font-display: swap; } @font-face { font-family: 'ManaSeedBody'; src: url('/assets/fonts/ManaSeedBody.ttf'); font-display: swap; } /* ═══════════════════════════════════════════════════════════ THEME: ADMIN — Clean dark editor UI Used by: manual.html, editor_chargen.html, ui_editor.html, cell_reference.html, platform_login.html ═══════════════════════════════════════════════════════════ */ .theme-admin { --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif; --font-title: 'Segoe UI', system-ui, sans-serif; --font-mono: 'Consolas', 'Fira Code', monospace; --font-size: 12px; --bg: #1a1520; --bg-dark: #0d0a14; --panel: #231e2e; --panel-alt: #1e1928; --surface: #2a2438; --border: #3a3248; --border-hi: #4e4560; --gold: #c78539; --accent: #e8a525; --green: #7e9432; --red: #b74132; --blue: #4a9eff; --text: #d4c9a8; --text-hi: #f0e8d0; --dim: #8a7f6a; --muted: #5a5248; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--font-size); line-height: 1.5; -webkit-font-smoothing: antialiased; } .theme-admin h1, .theme-admin h2, .theme-admin h3 { font-family: var(--font-title); color: var(--accent); } .theme-admin input, .theme-admin select, .theme-admin textarea { background: var(--bg-dark); border: 1px solid var(--border); color: var(--text-hi); font-family: var(--font-mono); font-size: 11px; padding: 4px 6px; border-radius: 3px; outline: none; } .theme-admin input:focus, .theme-admin select:focus { border-color: var(--accent); } .theme-admin button, .theme-admin .btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font-body); font-size: 11px; padding: 4px 10px; border-radius: 3px; cursor: pointer; transition: all 0.12s; } .theme-admin button:hover, .theme-admin .btn:hover { border-color: var(--accent); color: var(--accent); } /* ═══════════════════════════════════════════════════════════ THEME: PIXEL — Retro pixel-art game UI Used by: chargen.html, index.html, game overlays ═══════════════════════════════════════════════════════════ */ .theme-pixel { --font-body: 'ManaSeedBody', 'Segoe UI', system-ui, sans-serif; --font-title: 'ManaSeedTitle', serif; --font-size: 12px; --bg: #0a0812; --panel-fill: #e5d6a1; /* parchment */ --panel-frame: #704a2a; /* brown frame */ --panel-border: #3e1f1d; /* dark border */ --panel-dark: #140f0a; /* dark panel fill */ --text-dark: #3a2a1a; /* text on parchment */ --text-light: #d4c9a8; /* text on dark */ --gold: #c78539; --accent: #e8a525; --green-btn: #4a8a3a; background: var(--bg); color: var(--text-dark); font-family: var(--font-body); font-size: var(--font-size); image-rendering: pixelated; image-rendering: -moz-crisp-edges; -ms-interpolation-mode: nearest-neighbor; } .theme-pixel *, .theme-pixel *::before, .theme-pixel *::after { image-rendering: pixelated; } .theme-pixel h1, .theme-pixel h2 { font-family: var(--font-title); color: var(--gold); } /* ── Pixel Panel (9-slice) ── */ .theme-pixel .pixel-panel { border: 2px solid #72583E; background: none; padding: 8px 12px; color: var(--text-dark); } .theme-pixel .pixel-panel-dark { border: 2px solid #72583E; background: none; padding: 6px 10px; color: var(--text-light); } /* ── Pixel Button ── */ .theme-pixel .pixel-btn { display: inline-flex; align-items: center; justify-content: center; border: 2px solid #72583E; background: none; color: #1a3a1a; font-family: var(--font-title); font-size: 11px; padding: 4px 12px; cursor: pointer; outline: none; min-height: 32px; transition: transform 0.05s; } .theme-pixel .pixel-btn:hover { } .theme-pixel .pixel-btn:active, .theme-pixel .pixel-btn.active { transform: translateY(2px); } .theme-pixel .pixel-btn-sm { display: inline-flex; align-items: center; justify-content: center; border: 2px solid #72583E; background: none; color: #1a3a1a; font-family: var(--font-body); font-size: 9px; padding: 2px 8px; cursor: pointer; outline: none; } .theme-pixel .pixel-btn-sm:hover { } .theme-pixel .pixel-btn-sm:active, .theme-pixel .pixel-btn-sm.active { transform: translateY(1px); } /* ── Pixel Input ── */ .theme-pixel .pixel-input, .theme-pixel .pixel-select { border: 2px solid #72583E; background: none; color: var(--text-light); font-family: var(--font-body); font-size: 11px; padding: 4px 8px; outline: none; width: 100%; } .theme-pixel .pixel-input:focus, .theme-pixel .pixel-select:focus { outline: 2px solid #c78539; outline-offset: -3px; }