/** * Theme and Arena Styling Convention: * - [data-theme] on controls the user's selected color palette and base visuals. * - [data-arena] on is an optional attribute providing a hook for arena-specific * layered visuals (e.g. background images) without overwriting the user's theme. */ :root { --bg-image: url('../images/bg-light.jpg'); --bg-body: rgba(240, 242, 245, 0.4); --bg-panel: rgba(255, 255, 255, 0.85); /* Slightly translucent to show map background */ --bg-hover: rgba(238, 242, 247, 0.9); --bg-input: rgba(255, 255, 255, 0.9); --text-main: #333333; --text-muted: #7f8c8d; --text-heading: #2c3e50; --border-color: #eee; --accent-primary: #3498db; --accent-hover: #2980b9; --gold: #f1c40f; --btn-free: var(--accent-primary); --border-radius-main: 12px; --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-heading: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --rune: #a07028; /* burnished bronze */ --rune-soft: rgba(160, 112, 40, 0.35); --chip-bg: #f3e9d2; --chip-stroke: var(--text-heading); --control-height: 48px; } [data-theme="dungeon"] { --bg-image: url('../images/bg-dungeon.jpg'); --bg-body: #0a0a0c; --bg-panel: #1a1a1d; --bg-hover: #252529; --bg-input: #121214; --text-main: #d4c4a8; --text-muted: #8b8b93; --text-heading: #d4af37; --border-color: #3f3f46; --accent-primary: #8a1c1c; --accent-hover: #a82222; --gold: #d4af37; --btn-free: #6fa8c7; --border-radius-main: 2px; --font-primary: 'Merriweather', serif; --font-heading: 'Cinzel', serif; --rune: #c9a45c; /* aged brass */ --rune-soft: rgba(201, 164, 92, 0.35); --chip-bg: rgba(212, 175, 55, 0.12); } [data-theme="desert"] { --bg-image: url('../images/bg-desert.jpg'); --bg-body: #1c140d; --bg-panel: #291e14; --bg-hover: #382a1d; --bg-input: #140e09; --text-main: #dcbfa3; --text-muted: #a3886f; --text-heading: #f2c46d; --border-color: #523a24; --accent-primary: #d96c21; --accent-hover: #f2853a; --gold: #f2c46d; --btn-free: #6fa8c7; --border-radius-main: 0px; --font-primary: 'Merriweather', serif; --font-heading: 'Cinzel', serif; --rune: #f0b659; /* sun-bleached gold */ --rune-soft: rgba(240, 182, 89, 0.40); --chip-bg: rgba(242, 196, 109, 0.12); } [data-theme="chimera"] { --bg-image: url('../images/bg-chimera.jpg'); --bg-body: rgba(5, 7, 10, 0.6); --bg-panel: rgba(18, 22, 30, 0.75); /* Slightly translucent to show background */ --bg-hover: #1c2533; --bg-input: rgba(10, 14, 20, 0.85); --text-main: #d1d9e1; --text-muted: #8b9bb0; --text-heading: #7adcfb; /* Lightning Blue */ --border-color: #2d3a4f; --accent-primary: #9b59b6; /* Arcane Purple */ --accent-hover: #7adcfb; /* Lightning Blue */ --gold: #eec373; --btn-free: var(--text-heading); --border-radius-main: 6px; --font-primary: 'Merriweather', serif; --font-heading: 'Cinzel', serif; --rune: #eec373; /* gold — already used on buttons */ --rune-soft: rgba(238, 195, 115, 0.35); --chip-bg: rgba(122, 220, 251, 0.10); } [data-theme="chimera"] button { background-color: transparent; color: var(--btn-free); border: 1px solid var(--btn-free); /* Runic Gold */ box-shadow: 0 0 5px color-mix(in srgb, var(--btn-free) 30%, transparent); } [data-theme="chimera"] button.icon-btn { background: transparent; color: var(--text-muted); border: none; box-shadow: none; } [data-theme="chimera"] button:hover { background-color: color-mix(in srgb, var(--btn-free) 12%, transparent); border-color: var(--btn-free); color: var(--btn-free); box-shadow: 0 0 5px color-mix(in srgb, var(--btn-free) 30%, transparent); } [data-theme="chimera"] button.icon-btn:hover { background-color: transparent; border-color: transparent; color: var(--text-heading); box-shadow: none; } [data-theme="chimera"] button:disabled { background-color: transparent; border-color: color-mix(in srgb, var(--btn-free) 35%, transparent); color: var(--text-muted); box-shadow: none; } [data-theme="chimera"] .tag-locked { color: #ff6b6b; } [data-theme="chimera"] .tag-exit { color: #7adcfb; } /* ───── Ornate scrollbar (global) ───── */ * { scrollbar-width: thin; scrollbar-color: var(--rune) var(--bg-input, rgba(0, 0, 0, 0.25)); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { margin-block: 28px; background: linear-gradient(to right, transparent 0, var(--rune-soft) 4px, transparent 5px, transparent calc(100% - 5px), var(--rune-soft) calc(100% - 4px), transparent 100%), var(--bg-input, rgba(0, 0, 0, 0.25)); border-left: 1px solid var(--border-color); } ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--rune) 0%, color-mix(in oklab, var(--rune) 70%, #000) 50%, var(--rune) 100%); border: 2px solid var(--bg-input, rgba(0, 0, 0, 0.25)); border-radius: 0; box-shadow: 0 0 4px var(--rune-soft) inset; } ::-webkit-scrollbar-thumb:hover { background: var(--rune); } ::-webkit-scrollbar-corner { background: var(--bg-input, rgba(0, 0, 0, 0.25)); } body { font-family: var(--font-primary); background-color: var(--bg-body); background-image: var(--bg-image); background-size: cover; background-attachment: fixed; background-position: center; background-blend-mode: multiply; transition: background-color 0.3s, background-image 0.3s, color 0.3s; color: var(--text-main); margin: 0; padding: 20px; } /* Menu View Styles */ #menu-view { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 90vh; } .auth-container { margin-bottom: 20px; background: var(--bg-panel); padding: 15px 30px; border-radius: var(--border-radius-main); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); display: flex; align-items: center; gap: 15px; } #user-email { font-weight: 600; color: var(--text-heading); margin-right: 10px; } #btn-logout { margin-right: 10px; } .menu-container { background: var(--bg-panel); padding: 40px; border-radius: var(--border-radius-main); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); width: 400px; text-align: center; } .menu-container h1 { color: var(--text-heading); margin-bottom: 20px; font-size: 2.5em; letter-spacing: 2px; } .flavor-text { color: var(--text-muted); font-size: 0.95em; line-height: 1.6; margin-bottom: 30px; text-align: left; font-style: italic; } .form-group { margin-bottom: 30px; text-align: left; } .form-group label { display: block; margin-bottom: 5px; font-size: 0.9em; font-weight: 600; color: var(--text-heading); } .form-group h3 { border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 15px; color: var(--text-muted); } .character-select-row { display: flex; gap: 10px; margin-bottom: 25px; } .character-select-row select { margin-bottom: 0; flex-grow: 1; } .character-select-row button { white-space: nowrap; } input[type="text"], select, textarea { width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid var(--border-color); border-radius: calc(var(--border-radius-main) / 2); box-sizing: border-box; background-color: var(--bg-input); color: var(--text-main); } textarea { resize: none; height: 80px; overflow-y: auto; font-family: inherit; line-height: 1.4; } .load-item { padding: 10px; background: var(--bg-body); border: 1px solid var(--border-color); border-radius: calc(var(--border-radius-main) / 2); margin-bottom: 5px; cursor: pointer; transition: background 0.2s; display: flex; justify-content: space-between; align-items: center; } .load-item:hover { background: var(--bg-hover); } .joined-badge { font-size: 0.75em; padding: 2px 8px; border-radius: 10px; background: var(--bg-hover); color: var(--text-muted); text-transform: uppercase; font-weight: bold; border: 1px solid var(--border-color); } .delete-game-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; } .delete-game-btn:hover { color: #e74c3c; background: transparent; } /* Game View Styles */ #game-view { display: none; } .main-container { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: 20px; max-width: 1700px; margin: 0 auto; box-sizing: border-box; width: 100%; } .sidebar { background: var(--bg-panel); border-radius: var(--border-radius-main); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); position: sticky; top: 20px; text-align: left; flex: 0 1 280px; min-width: 220px; max-height: 90vh; transition: background-color 0.3s, color 0.3s; display: flex; flex-direction: column; } .sidebar-scroll-area { padding: 20px; overflow-y: auto; flex: 1; border-radius: inherit; } .sidebar-close-btn { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: none; background: transparent; font-size: 1.6em; line-height: 1; color: var(--text-main); cursor: pointer; z-index: 3; display: none; } .panel-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 90; } @media (min-width: 1025px) { #sidebar { position: fixed; top: 20px; left: 0; height: calc(100vh - 40px); z-index: 110; transform: translateX(-110%); transition: transform 0.25s ease; display: flex; } #right-sidebar { position: fixed; top: 20px; right: 0; height: calc(100vh - 40px); z-index: 110; transform: translateX(110%); transition: transform 0.25s ease; display: flex; } .main-container[data-active-panel="player"] #sidebar, .main-container[data-active-panel="world"] #right-sidebar { transform: translateX(0); } } h1, h2, h3, .section-header, #room-name { font-family: var(--font-heading); } .sidebar h2 { margin-top: 10px; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; font-size: 1.5em; color: var(--text-heading); text-align: center; } .portrait-container { position: relative; display: block; margin-bottom: 15px; } .player-portrait { width: 100%; height: auto; border-radius: calc(var(--border-radius-main) / 1.5); border: 1px solid var(--border-color); display: block; } .portrait-container .btn-regen-portrait { position: absolute; bottom: 5px; right: 5px; border: 1px solid var(--border-color); background-color: var(--bg-input); padding: 8px; border-radius: 50%; width: 40px; height: 40px; box-sizing: border-box; transition: background-color 0.2s, color 0.2s; display: flex; align-items: center; justify-content: center; color: var(--accent-primary); } .portrait-container .btn-regen-portrait:hover { background-color: var(--accent-primary); color: var(--bg-panel); } .stat-block { margin-bottom: 15px; } .stat-row { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 0.95em; } .stat-label { font-weight: 600; color: var(--text-muted); position: relative; cursor: help; } .section-header { font-size: 1.1em; font-weight: bold; color: var(--text-heading); margin-top: 20px; margin-bottom: 10px; border-bottom: 1px solid var(--border-color); padding-bottom: 5px; position: relative; cursor: help; } .tools-list { list-style: none; padding: 0; margin: 0; } .tools-list li { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; font-size: 0.95em; padding: 8px; background: var(--bg-body); border-radius: calc(var(--border-radius-main) / 3); cursor: help; position: relative; transition: background 0.2s; } .tools-list li:hover { background: var(--bg-hover); } #global-tooltip { background: var(--text-main); color: var(--bg-panel); padding: 8px 12px; border-radius: 4px; font-size: 0.85em; font-family: var(--font-primary); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); max-width: 250px; line-height: 1.4; text-align: center; z-index: 10000; pointer-events: none; } .tool-name { font-weight: 600; color: var(--text-heading); } .book-page { background: var(--bg-panel); width: 100%; max-width: 1000px; padding: 0; border-radius: var(--border-radius-main); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); flex: 1 1 500px; min-width: 400px; transition: background-color 0.3s, color 0.3s; display: flex; flex-direction: column; min-height: 0; } @media (min-width: 1025px) { .book-page { max-height: calc(100vh - 40px); } } .book-scroll-area { overflow: visible; padding-bottom: 40px; border-radius: inherit; display: flex; flex-direction: column; min-height: 0; flex: 1; } .book-content { padding: 0; display: flex; flex-direction: column; min-height: 0; flex: 1; } /* Action Toolbar Styles */ .action-toolbar { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 10px; padding: 0 40px; flex: 0 0 auto; } .action-toolbar .icon-btn { border: 1px solid var(--border-color); background-color: var(--bg-input); padding: 8px; border-radius: 50%; width: 40px; height: 40px; box-sizing: border-box; flex-shrink: 0; transition: background-color 0.2s, color 0.2s, stroke 0.2s; display: flex; align-items: center; justify-content: center; } .action-toolbar .btn-regen { color: var(--accent-primary); } .action-toolbar .btn-regen:hover { background-color: var(--accent-primary); color: var(--bg-panel); } .action-toolbar .btn-undo { color: #e74c3c; } .action-toolbar .btn-undo:hover { background-color: #e74c3c; color: var(--bg-panel); } .narrative { font-size: 18px; line-height: 1.6; text-align: left; flex: 1; min-height: 0; overflow-y: auto; padding: 48px 40px 25px 40px; } .chat-bubble { display: block; list-style: none; margin-bottom: 1.5rem; padding: 0.6rem 0.9rem; max-width: 90%; border-radius: 12px; } .chat-bubble--player { margin-left: auto; background: var(--bg-panel); } .chat-bubble--world { margin-right: auto; background: var(--bg-panel); border-left: 3px solid var(--accent-primary); } .chat-bubble__meta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.25rem; } .chat-bubble__text { line-height: 1.5; white-space: pre-wrap; margin-top: 10px; } .chat-bubble__wait { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.4rem; font-style: italic; } .chat-bubble__img[hidden] + .chat-bubble__audio[hidden] + .chat-bubble__text { margin-top: 0; } .chat-bubble__img { max-width: 100%; border-radius: 8px; display: block; } .chat-bubble__audio { display: block; width: 100%; } .chat-round-sep { display: flex; align-items: center; gap: 0.75rem; list-style: none; margin: 1.5rem 0 0.75rem 0; padding: 0; max-width: 100%; font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .chat-round-sep::before, .chat-round-sep::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--text-muted); opacity: 0.35; } .chat-round-sep > span { flex: 0 0 auto; padding: 0 0.25rem; } .input-area { margin-top: 30px; display: flex; gap: 10px; padding: 0 40px; flex: 0 0 auto; } .wallet-btn-wrapper { position: relative; display: inline-block; } .cost-badge { position: absolute; top: -10px; right: -10px; background-color: var(--gold); color: #2c3e50; /* Dark text */ font-size: 0.75em; font-weight: bold; padding: 2px 6px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 100; pointer-events: none; white-space: nowrap; } #game-input { flex-grow: 1; height: var(--control-height); padding: 0 12px; border: 1px solid var(--border-color); border-radius: calc(var(--border-radius-main) / 2); font-size: 16px; background-color: var(--bg-input); color: var(--text-main); box-sizing: border-box; } .controls { margin-top: 20px; display: flex; justify-content: center; gap: 5px; align-items: center; padding: 0 40px; flex: 0 0 auto; } button { padding: 10px 16px; font-size: 14px; cursor: pointer; background-color: var(--accent-primary); color: white; border: 1px solid var(--border-color); border-radius: max(6px, calc(var(--border-radius-main) / 2)); transition: background-color 0.2s, border-color 0.2s; } button:hover { background-color: var(--accent-hover); } button:disabled { background-color: #bdc3c7; cursor: not-allowed; } [data-theme="dungeon"] button:not(.btn-spend):not(.icon-btn), [data-theme="desert"] button:not(.btn-spend):not(.icon-btn) { background-color: transparent; color: var(--btn-free); border: 1px solid var(--btn-free); } [data-theme="dungeon"] button:not(.btn-spend):not(.icon-btn):hover, [data-theme="desert"] button:not(.btn-spend):not(.icon-btn):hover { background-color: color-mix(in srgb, var(--btn-free) 12%, transparent); border-color: var(--btn-free); } #btn-submit { height: var(--control-height); padding: 0 16px; line-height: 1; box-sizing: border-box; } #page-num { margin: 0 10px; font-weight: bold; color: var(--text-muted); } .meta-info { font-size: 12px; color: var(--text-muted); margin-top: 25px; border-top: 1px solid var(--border-color); padding-top: 15px; text-align: center; padding-left: 40px; padding-right: 40px; flex: 0 0 auto; } .npc-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 8px; background: var(--bg-body); border-radius: calc(var(--border-radius-main) / 1.5); border: 1px solid var(--border-color); } .npc-portrait-wrapper { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); } .npc-portrait { width: 100%; height: 100%; object-fit: cover; z-index: 2; position: absolute; top: 0; left: 0; } .npc-initials { font-size: 1.1em; font-weight: bold; color: var(--text-muted); z-index: 1; text-transform: uppercase; } .npc-name { font-weight: 600; color: var(--text-heading); font-size: 0.95em; } @media (max-width: 1024px) { :root { --control-height: 56px; --book-chrome: 66px; } html, body { height: 100dvh; overflow: hidden; } body { padding: 0; } .main-container { gap: 0; } #sidebar, #right-sidebar { position: fixed !important; inset: 0 !important; margin: auto !important; width: min(92vw, 480px) !important; max-height: 90vh !important; z-index: 110 !important; display: none; transform: none !important; } .main-container[data-active-panel="player"] #sidebar { display: flex; } .main-container[data-active-panel="world"] #right-sidebar { display: flex; } .sidebar-close-btn { display: block; } .menu-container { width: 95%; padding: 20px; box-sizing: border-box; } #game-input, input[type="text"], select, textarea, button { font-size: 16px; } #game-input, #btn-submit { padding: 0 15px; } .book-page { max-height: 100vh; max-height: calc(100dvh - var(--book-chrome, 0px)); min-height: 100vh; min-height: calc(100dvh - var(--book-chrome, 0px)); min-width: 0; flex: 1 1 auto; } .action-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0; } } /* Tag Styles */ .tag-locked { color: #e74c3c; /* Red */ font-size: 0.85em; margin-left: 5px; } .tag-cover { color: #7f8c8d; /* Slate Grey */ font-size: 0.85em; margin-left: 5px; } .tag-state { color: #e67e22; /* Orange */ font-size: 0.85em; margin-left: 5px; } .tag-exit { color: #27ae60; /* Green */ font-size: 0.85em; margin-left: 5px; } .tag-available { color: #27ae60; /* Green */ font-size: 0.85em; margin-left: 5px; } .tag-inaccessible { color: #e67e22; /* Orange */ font-size: 0.85em; margin-left: 5px; } .tag-container { color: var(--accent-primary); /* Blue */ font-size: 0.85em; margin-left: 5px; } .tag-weapon { color: #f1c40f; /* Yellow */ font-size: 0.85em; margin-left: 5px; } .tag-armor { color: #9b59b6; /* Purple */ font-size: 0.85em; margin-left: 5px; } .tag-shield { color: #1abc9c; /* Turquoise */ font-size: 0.85em; margin-left: 5px; } /* New classes for semantic JS rendering */ .text-accent { color: var(--accent-primary); font-family: monospace; } .text-meta { color: var(--text-muted); } .npc-stats { font-size: 0.8em; color: var(--text-muted); } .tool-value { color: var(--accent-hover); font-weight: bold; } .empty-state { color: var(--text-muted); font-style: italic; } /* Restoring visual properties for elements with removed inline styles */ #room-name { font-weight: bold; color: var(--text-heading); font-size: 1.1em; margin-bottom: 5px; } #room-desc { font-size: 0.9em; color: var(--text-main); line-height: 1.4; white-space: pre-wrap; } .top-bar { display: flex; justify-content: flex-end; gap: 15px; max-width: 1700px; margin: 0 auto 10px auto; padding: 0 20px; } .icon-btn { background: transparent; border: none; cursor: pointer; color: var(--text-muted); transition: color 0.2s; } .icon-btn:hover { color: var(--text-heading); background: transparent; } .icon-btn:disabled { opacity: 0.4; cursor: not-allowed; } .audio-toggle-label { display: flex; align-items: center; gap: 5px; color: var(--text-main); font-size: 0.85em; cursor: pointer; } .top-bar .audio-toggle-label { margin: 0; padding: 4px 8px; white-space: nowrap; } #p-equipment { padding-left: 20px; font-size: 0.9em; margin-top: 5px; } .npc-container { margin-bottom: 20px; } .npc-container > .section-header { margin-top: 8px; margin-bottom: 4px; cursor: pointer; display: flex; align-items: center; } .npc-container > .section-header::before { content: "\25BE"; /* ▾ */ margin-right: 6px; transition: transform 0.15s ease; display: inline-block; } .npc-container.collapsed > .section-header::before { transform: rotate(-90deg); } .npc-container.collapsed > *:not(.section-header) { display: none; } /* Health Bar Styles */ .health-bar-container { background-color: rgba(0, 0, 0, 0.3); height: 20px; position: relative; overflow: hidden; border-radius: 4px; flex-grow: 1; margin-left: 10px; } .health-bar { height: 100%; transition: width 0.3s ease-in-out; } .health-bar.high { background-color: #27ae60; } .health-bar.medium { background-color: #f39c12; } .health-bar.low { background-color: #e74c3c; } .health-bar-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.85em; font-weight: bold; color: white; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.9); pointer-events: none; } /* Modal Styles */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 2000; justify-content: center; align-items: center; } /* ───── Filigree corner ornaments (Option C) ───── */ .has-filigree, .modal-content, .book-page, .landing-panel { position: relative; border: 1px solid var(--border-color); } #sidebar, #right-sidebar { border: 1px solid var(--border-color); } .has-filigree { padding: 28px; border-radius: var(--border-radius-main); box-shadow: 0 0 0 1px var(--rune-soft) inset, 0 12px 36px rgba(0, 0, 0, 0.35); } /* Explicitly apply the inset rune shadow to top-level aliased surfaces without overriding their specific padding or base shadows. */ #sidebar, #right-sidebar { box-shadow: 0 0 0 1px var(--rune-soft) inset, 0 4px 12px rgba(0, 0, 0, 0.1); } .book-page { background: var(--bg-panel); border-radius: var(--border-radius-main); box-shadow: 0 0 0 1px var(--rune-soft) inset, 0 12px 36px rgba(0, 0, 0, 0.35); } .has-filigree::before, .has-filigree::after, .has-filigree > .filigree-tr, .has-filigree > .filigree-bl, .modal-content::before, .modal-content::after, .modal-content > .filigree-tr, .modal-content > .filigree-bl, #sidebar::before, #sidebar::after, #sidebar > .filigree-tr, #sidebar > .filigree-bl, #right-sidebar::before, #right-sidebar::after, #right-sidebar > .filigree-tr, #right-sidebar > .filigree-bl, .book-page::before, .book-page::after, .book-page > .filigree-tr, .book-page > .filigree-bl, .landing-panel::before, .landing-panel::after, .landing-panel > .filigree-tr, .landing-panel > .filigree-bl { content: ""; position: absolute; width: 28px; height: 28px; border: 2px solid var(--rune); pointer-events: none; z-index: 1; } .has-filigree::before, .modal-content::before, #sidebar::before, #right-sidebar::before, .book-page::before, .landing-panel::before { top: -3px; left: -3px; border-right: none; border-bottom: none; border-top-left-radius: var(--border-radius-main); } .has-filigree::after, .modal-content::after, #sidebar::after, #right-sidebar::after, .book-page::after, .landing-panel::after { bottom: -3px; right: -3px; border-left: none; border-top: none; border-bottom-right-radius: var(--border-radius-main); } .has-filigree > .filigree-tr, .modal-content > .filigree-tr, #sidebar > .filigree-tr, #right-sidebar > .filigree-tr, .book-page > .filigree-tr, .landing-panel > .filigree-tr { top: -3px; right: -3px; border-left: none; border-bottom: none; border-top-right-radius: var(--border-radius-main); } .has-filigree > .filigree-bl, .modal-content > .filigree-bl, #sidebar > .filigree-bl, #right-sidebar > .filigree-bl, .book-page > .filigree-bl, .landing-panel > .filigree-bl { bottom: -3px; left: -3px; border-right: none; border-top: none; border-bottom-left-radius: var(--border-radius-main); } .has-filigree > .filigree-dot, .modal-content > .filigree-dot, #sidebar > .filigree-dot, #right-sidebar > .filigree-dot, .book-page > .filigree-dot, .landing-panel > .filigree-dot { position: absolute; width: 6px; height: 6px; background: var(--rune); border-radius: 50%; z-index: 2; pointer-events: none; } .filigree-dot.tl { top: 6px; left: 6px; } .filigree-dot.tr { top: 6px; right: 6px; } .filigree-dot.bl { bottom: 6px; left: 6px; } .filigree-dot.br { bottom: 6px; right: 6px; } .modal-content { background-color: var(--bg-panel); color: var(--text-main); padding: 30px; border-radius: var(--border-radius-main); box-shadow: 0 0 0 1px var(--rune-soft) inset, 0 8px 32px rgba(0, 0, 0, 0.3); width: 90%; max-width: 500px; max-height: 80vh; display: flex; flex-direction: column; } .modal-scroll-area { overflow-y: auto; flex: 1; min-height: 0; padding-right: 15px; margin-right: -15px; } #character-modal .modal-content { max-width: 950px; border: 1px solid var(--border-color); box-shadow: 0 0 0 1px var(--rune-soft) inset, 0 8px 32px rgba(0, 0, 0, 0.3); } #character-modal .modal-content::before, #character-modal .modal-content::after, #character-modal .modal-content > .filigree-tr, #character-modal .modal-content > .filigree-bl, #character-modal .modal-content > .filigree-dot { z-index: 10; } .form-help-text { font-size: 0.85em; opacity: 0.75; margin: 4px 0 8px; line-height: 1.4; min-height: 1.4em; } .form-help-text:empty { margin: 0; } .modal-split-layout { display: flex; gap: 30px; flex-wrap: wrap; } .creation-form { flex: 1; min-width: 300px; } #preview-sidebar { width: 320px; flex-shrink: 0; position: static; max-height: 75vh; overflow-y: auto; padding: 20px; } .highlight-customized { color: var(--accent-hover); font-weight: bold; border-left: 2px solid var(--accent-hover); padding-left: 5px; } .modal-content h2 { margin-top: 0; margin-bottom: 20px; text-align: center; } .flag-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; gap: 15px; } .flag-row label { font-size: 0.9em; font-weight: 600; color: var(--text-muted); word-break: break-all; flex: 1; } .flag-input { width: 200px; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: calc(var(--border-radius-main) / 2); background-color: var(--bg-input); color: var(--text-main); font-family: inherit; font-size: 0.9em; } .flag-select { width: 200px; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: calc(var(--border-radius-main) / 2); background-color: var(--bg-input); color: var(--text-main); font-family: inherit; font-size: 0.9em; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 30px; border-top: 1px solid var(--border-color); padding-top: 20px; } /* Spinner Styles */ .loading-overlay { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; } .loading-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2010; } .loading-panel { background: var(--bg-panel); color: var(--text-main); padding: 30px 40px; border: 1px solid var(--border-color); border-radius: var(--border-radius-main); box-shadow: 0 0 0 1px var(--rune-soft) inset, 0 8px 32px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 260px; max-width: 90vw; } .loading-panel > div + div { margin-top: 20px; } .checkbox-group.scrollable-list { max-height: 150px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: calc(var(--border-radius-main) / 2); padding: 10px; background-color: var(--bg-input); margin-bottom: 15px; } .checkbox-item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; cursor: pointer; font-size: 0.9em; color: var(--text-main); } .customization-name { font-weight: 600; } .checkbox-item .customization-description { flex-basis: 100%; margin-left: 1.6em; margin-top: 2px; } .checkbox-item input[type="checkbox"] { cursor: pointer; width: 18px; height: 18px; } .spinner { border: 4px solid var(--border-color); border-top: 4px solid var(--accent-primary); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin-bottom: 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* === Effect Icons === */ .book-page { position: relative; } .effect-overlay { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: rgba(0, 0, 0, 0.45); border-radius: 6px; z-index: 2; pointer-events: none; } .effect-overlay .effect-icon { pointer-events: auto; } .player-effect-overlay { /* player-specific tweaks reserved */ } /* Effect SVGs are painted via mask-image; author SVGs with stroke="currentColor" and no hardcoded fills. */ .effect-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background: var(--chip-bg); cursor: help; } .effect-icon-img { width: 18px; height: 18px; background-color: var(--chip-stroke); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); } .npc-effects-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; min-height: 0; } /* * .btn-spend — gold rim signaling a button that will spend * player credits when clicked. Selector specificity is tuned * to defeat both the default icon-button rules * (.action-toolbar .icon-btn, .portrait-container .btn-regen-portrait) * and the chimera theme's per-button border/box-shadow * overrides ([data-theme="chimera"] button*). Future * spend-triggering buttons MUST add `btn-spend` to opt in. */ /* Rectangular default buttons (Go, Generate Portrait). */ button.btn-spend { border: 2px solid var(--gold); box-shadow: 0 0 0 1px var(--gold); } button.btn-spend:hover, button.btn-spend:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); } button.btn-spend:disabled { border: 1px solid var(--border-color); box-shadow: none; } /* Round icon buttons in the action toolbar (Regen, Regen+Prompt). */ .action-toolbar .icon-btn.btn-spend { border: 2px solid var(--gold); box-shadow: 0 0 0 1px var(--gold); } .action-toolbar .icon-btn.btn-spend:hover, .action-toolbar .icon-btn.btn-spend:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); } .action-toolbar .icon-btn.btn-spend:disabled { border: 1px solid var(--border-color); box-shadow: none; } /* Round icon button on the portrait (Regen Portrait). */ .portrait-container .btn-regen-portrait.btn-spend { border: 2px solid var(--gold); box-shadow: 0 0 0 1px var(--gold); } .portrait-container .btn-regen-portrait.btn-spend:hover, .portrait-container .btn-regen-portrait.btn-spend:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); } .portrait-container .btn-regen-portrait.btn-spend:disabled { border: 1px solid var(--border-color); box-shadow: none; } /* Chimera overrides — chimera redefines border/box-shadow on button:hover and button:disabled at higher specificity than the bare button.btn-spend rule, so the rim must be re-asserted inside the theme scope. */ [data-theme="chimera"] button.btn-spend, [data-theme="chimera"] button.btn-spend:hover, [data-theme="chimera"] button.btn-spend:focus-visible { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); } [data-theme="chimera"] button.btn-spend:disabled { border-color: var(--border-color); box-shadow: none; } [data-theme="chimera"] .action-toolbar .icon-btn.btn-spend, [data-theme="chimera"] .action-toolbar .icon-btn.btn-spend:hover, [data-theme="chimera"] .portrait-container .btn-regen-portrait.btn-spend, [data-theme="chimera"] .portrait-container .btn-regen-portrait.btn-spend:hover { border: 2px solid var(--gold); box-shadow: 0 0 0 1px var(--gold); } /* === Roster Roster === */ #roster-list { margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; } .roster-card { position: relative; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; cursor: default; } .roster-card.active { border-color: var(--accent-primary); box-shadow: 0 0 8px color-mix(in srgb, var(--accent-primary) 40%, transparent); transform: translateX(5px); } .roster-status-pill { font-size: 0.75em; padding: 2px 8px; border-radius: 10px; background: var(--bg-hover); color: var(--text-muted); text-transform: uppercase; font-weight: bold; border: 1px solid var(--border-color); } .roster-card.active .roster-status-pill { background: var(--accent-primary); color: white; border-color: var(--accent-primary); } .roster-active-marker { position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid var(--accent-primary); display: none; } .roster-card.active .roster-active-marker { display: block; } #btn-next-asker { margin-right: 5px; } .roster-skip { display: flex; align-items: center; gap: 5px; font-size: 0.8em; color: var(--text-muted); margin-top: 8px; cursor: pointer; } .roster-skip input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; margin: 0; }