@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Press+Start+2P&family=VT323&display=swap'); :root { --snes-blue-top: #15102a; --snes-blue-bottom: #090615; --snes-gold: #e5b73b; --snes-gold-dim: #a87e1c; --snes-white: #f5f2eb; --snes-grey: #c5c0cc; --snes-black: #000000; --snes-red: #ef4444; --snes-green: #34d399; --snes-cyan: #38bdf8; --snes-purple: #a78bfa; --snes-purple-dark: #44268a; --snes-border-width: 4px; --font-pixel: 'Press Start 2P', monospace; --font-retro-narrow: 'VT323', monospace; --font-fantasy-header: 'Cinzel', serif; --font-fantasy-body: 'Lora', serif; /* Structural backgrounds β€” kept as separate tokens (rather than reusing --snes-white/ grey/gold, which are text/accent colors) so the light theme below can retheme large chrome surfaces without touching every gradient declaration individually. */ --app-bg: #0d0a15; --window-bg-1: #181124; --window-bg-2: #0a0712; --topbar-bg-1: #150f24; --topbar-bg-2: #08050e; --game-container-bg: #18181c; --overlay-backdrop: rgba(0, 0, 0, 0.75); } /* Light theme β€” a warm parchment/ink palette, so it reads as a deliberate in-universe variant rather than a generic inverted light mode. Toggled via Settings > πŸŒ— Tema; the viewer's choice is stamped as data-theme on (see main.js applyTheme()). Known scope limit: many inner panels use hardcoded rgba(0,0,0,...) backgrounds inline (not these tokens) and keep a dark translucent look even in light mode. */ :root[data-theme="light"] { --app-bg: #ede0c0; --window-bg-1: #fbf3df; --window-bg-2: #efe0bd; --topbar-bg-1: #e6d3a3; --topbar-bg-2: #d8c186; --game-container-bg: #c9b587; --overlay-backdrop: rgba(60, 45, 20, 0.45); --snes-white: #2b1b10; --snes-grey: #5c4a38; --snes-gold: #8a5a1c; --snes-gold-dim: #6b4515; --snes-cyan: #0e6ba8; --snes-green: #157a4a; --snes-red: #a83030; --snes-purple: #6b46a8; } /* The dark theme's text-shadow on headers/labels (a black drop-shadow tuned to make gold/ white text pop off a near-black background) turns into an illegible dark smear once the background flips to a light parchment tone β€” the shadow color no longer contrasts with anything. Strip it in light mode. */ :root[data-theme="light"] .snes-window, :root[data-theme="light"] .snes-window-header, :root[data-theme="light"] .fantasy-header, :root[data-theme="light"] #logo, :root[data-theme="light"] #left-sidebar, :root[data-theme="light"] #player-hero-name, :root[data-theme="light"] .npc-options-window .snes-window-header, :root[data-theme="light"] .npc-option-item, :root[data-theme="light"] .editor-gm-label, :root[data-theme="light"] #character-sheet-modal .overlay-content, :root[data-theme="light"] #npc-profile-modal .overlay-content, :root[data-theme="light"] #character-sheet-modal .overlay-content .snes-window-header, :root[data-theme="light"] #npc-profile-modal .overlay-content .snes-window-header { text-shadow: none !important; } * { box-sizing: border-box; margin: 0; padding: 0; } canvas, img, .pixelated, .palette-tile canvas, .left-sidebar-backpack-slot span { image-rendering: pixelated; image-rendering: crisp-edges; } body { background-color: var(--app-bg); color: var(--snes-white); font-family: var(--font-fantasy-body); font-size: 14px; line-height: 1.5; height: 100vh; overflow: hidden; user-select: none; } /* Retro SNES Window Container (High Fantasy Obsidian & Gold Style) */ .snes-window { background: linear-gradient(135deg, var(--window-bg-1) 0%, var(--window-bg-2) 100%); border: 2px solid var(--snes-gold-dim); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 16px rgba(229, 183, 59, 0.1); border-radius: 6px; padding: 16px; color: var(--snes-white); position: relative; text-shadow: 1px 1px 2px #000000; } .snes-window.gold-border { border-color: var(--snes-gold); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 20px rgba(229, 183, 59, 0.15); } .snes-window-header { font-family: var(--font-fantasy-header); font-size: 16px; font-weight: 700; letter-spacing: 0.5px; color: var(--snes-gold); border-bottom: 2px dashed var(--snes-gold-dim); padding-bottom: 8px; margin-bottom: 12px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); display: flex; justify-content: space-between; align-items: center; } /* Ancient Parchment Scroll Theme β€” the character sheet & NPC profile's light-theme skin. Scoped under [data-theme="light"] with higher specificity than the dark defaults below, so it only wins when the app is actually in light mode; dark mode is untouched. */ :root[data-theme="light"] #character-sheet-modal .overlay-content, :root[data-theme="light"] #npc-profile-modal .overlay-content { background: radial-gradient(ellipse at center, #fbf7eb 0%, #e8dcbf 100%) !important; color: #2b1b10 !important; border: 4px double #7c5e43 !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(139, 90, 43, 0.2), inset 0 0 4px rgba(92, 64, 40, 0.3) !important; text-shadow: none !important; border-radius: 4px; } :root[data-theme="light"] #character-sheet-modal .overlay-content .snes-window-header, :root[data-theme="light"] #npc-profile-modal .overlay-content .snes-window-header { color: #7a1c1c !important; border-bottom: 2px dashed #7c5e43 !important; text-shadow: none !important; } :root[data-theme="light"] #character-sheet-modal label, :root[data-theme="light"] #npc-profile-modal label { color: #5c4028 !important; font-weight: bold; } :root[data-theme="light"] #character-sheet-modal input, :root[data-theme="light"] #character-sheet-modal select, :root[data-theme="light"] #character-sheet-modal textarea, :root[data-theme="light"] #npc-profile-modal input, :root[data-theme="light"] #npc-profile-modal select, :root[data-theme="light"] #npc-profile-modal textarea { background-color: #faf6ee !important; border: 1px solid #7c5e43 !important; color: #2b1b10 !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important; text-shadow: none !important; } :root[data-theme="light"] #character-sheet-modal input:focus, :root[data-theme="light"] #character-sheet-modal select:focus, :root[data-theme="light"] #character-sheet-modal textarea:focus, :root[data-theme="light"] #npc-profile-modal input:focus, :root[data-theme="light"] #npc-profile-modal select:focus, :root[data-theme="light"] #npc-profile-modal textarea:focus { border-color: #7a1c1c !important; outline: none; } /* Character sheet and NPC profile: keep SNES dark aesthetic (not parchment) */ #character-sheet-modal .overlay-content, #npc-profile-modal .overlay-content { background: linear-gradient(160deg, #181124 0%, #0a0712 100%) !important; color: var(--snes-white) !important; border: 3px solid var(--snes-gold) !important; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 28px rgba(229, 183, 59, 0.12) !important; text-shadow: 1px 1px 2px #000 !important; border-radius: 6px; } #character-sheet-modal .overlay-content .snes-window-header, #npc-profile-modal .overlay-content .snes-window-header { color: var(--snes-gold) !important; border-bottom: 2px dashed var(--snes-gold-dim) !important; text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important; } /* Inside the sheet: restore SNES label and input colors (parchment class is removed from HTML) */ #character-sheet-modal label, #npc-profile-modal label { color: var(--snes-grey) !important; } #character-sheet-modal input, #character-sheet-modal select, #character-sheet-modal textarea, #npc-profile-modal input, #npc-profile-modal select, #npc-profile-modal textarea { background-color: rgba(0,0,0,0.5) !important; border: 1px solid var(--snes-gold-dim) !important; color: var(--snes-white) !important; text-shadow: none !important; } /* SNES Buttons (High Fantasy Runic & Engraved Style) */ .snes-btn { background: linear-gradient(to bottom, #261b35, #110c18); border: 1px solid #a87e1c; box-shadow: 0 4px 0 #08060c, inset 0 1px 0 rgba(255, 255, 255, 0.08); border-radius: 4px; color: #e5b73b; font-family: var(--font-fantasy-header); font-size: 13px; font-weight: 700; padding: 8px 14px; cursor: pointer; outline: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-shadow: 1px 1px 0 #000; transform: translateY(0); transition: transform 0.05s, box-shadow 0.05s, background 0.15s, border-color 0.15s; } .snes-btn:hover { background: linear-gradient(to bottom, #39284f, #191225); border-color: #e5b73b; color: #ffffff; box-shadow: 0 4px 0 #08060c, 0 0 10px rgba(229, 183, 59, 0.4); } .snes-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #08060c, inset 0 2px 4px rgba(0,0,0,0.5); } .snes-btn.blue { background: linear-gradient(to bottom, #1d2a44, #0f1624); border-color: #3182ce; color: #ebf8ff; } .snes-btn.blue:hover { background: linear-gradient(to bottom, #2b3e64, #172237); color: #ffffff; box-shadow: 0 4px 0 #08060c, 0 0 10px rgba(49, 130, 206, 0.5); } .snes-btn.red { background: linear-gradient(to bottom, #741b25, #440e14); border-color: #e53e3e; color: #fff5f5; } .snes-btn.red:hover { background: linear-gradient(to bottom, #9b2c3a, #5f141d); color: #ffffff; box-shadow: 0 4px 0 #08060c, 0 0 10px rgba(229, 62, 62, 0.5); } .snes-btn.green { background: linear-gradient(to bottom, #22543d, #143525); border-color: #38a169; color: #f0fff4; } .snes-btn.green:hover { background: linear-gradient(to bottom, #2f7555, #1c4b34); color: #ffffff; box-shadow: 0 4px 0 #08060c, 0 0 10px rgba(56, 161, 105, 0.5); } .snes-btn.gold { background: linear-gradient(to bottom, var(--snes-gold), var(--snes-gold-dim)); border-color: #fff7d9; color: #1a1202; text-shadow: none; font-weight: bold; } .snes-btn.gold:hover { background: linear-gradient(to bottom, #ffd15c, #d1a126); color: #000000; box-shadow: 0 4px 0 #08060c, 0 0 12px rgba(229, 183, 59, 0.7); } .snes-btn:disabled, .snes-btn.disabled { background: linear-gradient(to bottom, #252427, #151416) !important; color: #59565d !important; border-color: #3d3b3e !important; box-shadow: 0 4px 0 #08060c !important; cursor: not-allowed; transform: none !important; text-shadow: none !important; pointer-events: none; } /* Main Layout Grid */ #app-layout { display: grid; grid-template-columns: 1fr 340px; grid-template-rows: 50px 1fr auto; /* Explicit row 3 for GM editor panel */ height: 100vh; width: 100vw; overflow: hidden; } #app-layout.player-layout { grid-template-columns: 336px 1fr 340px; grid-template-rows: 50px 1fr auto; /* Row 3: #player-bottom-bar (status/spells/cameras) */ } /* Top bar navigation */ #top-navbar { grid-column: 1 / -1; background: linear-gradient(to right, var(--topbar-bg-1), var(--topbar-bg-2)); border-bottom: 2px solid var(--snes-gold-dim); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.5); } #logo { font-size: 16px; color: var(--snes-gold); text-shadow: 2px 2px 0 #000; display: flex; align-items: center; gap: 10px; } #lobby-controls { display: flex; gap: 8px; align-items: center; } /* Left Workspace: Game Canvas & Overlays */ #game-container { position: relative; overflow: hidden; background-color: var(--game-container-bg); display: flex; align-items: center; justify-content: center; grid-row: 2; grid-column: 1; /* Default GM column 1 */ height: 100%; } #app-layout.player-layout #game-container { grid-column: 2; /* Player layout column 2 */ } #game-canvas { box-shadow: 0 0 20px rgba(0,0,0,0.8); display: block; } /* Overlay Menu systems */ .overlay-panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-backdrop); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(4px); } .overlay-content { width: 90%; max-width: 650px; max-height: 85%; overflow-y: auto; } .hidden { display: none !important; } /* Right Sidebar: Chat, Active Players, Controls */ #sidebar { background: linear-gradient(to bottom, var(--topbar-bg-1) 0%, var(--topbar-bg-2) 100%); border-left: 2px solid var(--snes-gold-dim); display: flex; flex-direction: column; height: 100%; overflow: hidden; grid-row: 2; grid-column: 2; /* Default GM column 2 */ box-shadow: 0 0 0 1px #000000, inset 1px 0 0 1px rgba(255, 255, 255, 0.05), inset 4px 0 16px rgba(229, 183, 59, 0.08), -4px 0 10px rgba(0,0,0,0.6); } #app-layout.player-layout #sidebar { grid-column: 3; /* Player layout column 3 */ /* Same reasoning as #left-sidebar: stretch through row 3 too, so there's no empty gap under it once #player-bottom-bar stops at column 3 instead of running underneath it. Scoped to player-layout only β€” in GM/DEV layout, row 3 is #editor-panel/#dev-panel spanning every column, and this sidebar's base rule (grid-row: 2) must stay put there. */ grid-row: 2 / -1; } .sidebar-section { padding: 10px; border-bottom: 1.5px dashed rgba(255, 255, 255, 0.1); } .sidebar-section.fill { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 200px; } /* Chat Component */ #chat-log { flex-grow: 1; overflow-y: auto; border: 1px solid var(--snes-gold-dim); background-color: var(--window-bg-2); padding: 10px; margin-bottom: 8px; font-family: var(--font-fantasy-body); font-size: 13.5px; line-height: 1.4; list-style: none; border-radius: 4px; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8); } #sidebar.has-stats #chat-log { max-height: 200px; } .chat-entry { margin-bottom: 6px; word-wrap: break-word; } .chat-entry .sender { color: var(--snes-gold); font-weight: bold; } .chat-entry.whisper { color: var(--snes-cyan); font-style: italic; } .chat-entry.system { color: var(--snes-grey); } .chat-entry.roll { background-color: rgba(47, 133, 90, 0.15) !important; border-left: 3px solid var(--snes-green) !important; color: #d1fae5 !important; padding: 6px 8px !important; border-radius: 4px !important; margin: 6px 0 !important; font-family: var(--font-fantasy-body) !important; box-shadow: inset 0 0 4px rgba(0,0,0,0.4) !important; } /* This entry's own background is a translucent GREEN tint (not black), so unlike the fixed-dark-background cases elsewhere it genuinely does lighten in light theme β€” a 15% green wash over #chat-log's light parchment background is still a pale, light color overall. The fixed near-white #d1fae5 above was tuned for a dark background and reads as barely-visible pale-on-pale here. */ :root[data-theme="light"] .chat-entry.roll { color: #0f4a30 !important; } /* .chat-entry.system's own color (style.css ~3931) is a pale translucent grey (rgba(197,192,204,0.6)) tuned for a dark chat-log background β€” reads as near-invisible pale-on-pale against the light parchment background here. */ :root[data-theme="light"] .chat-entry.system { color: #5c4028 !important; } #chat-input-container { display: flex; gap: 6px; } .snes-input { background-color: var(--window-bg-2); border: 1.5px solid var(--snes-gold-dim); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8); border-radius: 4px; color: var(--snes-white); font-family: var(--font-fantasy-body); font-size: 13px; padding: 8px 12px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .snes-input:focus { border-color: var(--snes-gold); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(229, 183, 59, 0.4); } #chat-input { flex-grow: 1; } /* User lists */ #user-list { list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; } .user-item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; background-color: var(--window-bg-1); padding: 6px; border: 1px solid #282830; border-radius: 3px; transition: background-color 0.2s, border-color 0.2s; } .user-item[style*="cursor: pointer"]:hover { background-color: #2b2b35; border-color: var(--snes-cyan); } .user-item.gm-user { border-color: var(--snes-gold); } .user-item.dev-user { border-color: var(--snes-purple); } .user-name-tag { display: flex; align-items: center; gap: 4px; } .user-mic-status { width: 12px; height: 12px; display: inline-block; background-color: var(--snes-grey); border-radius: 50%; } .user-mic-status.speaking { background-color: var(--snes-green); box-shadow: 0 0 5px var(--snes-green); } .user-mic-status.muted { background-color: var(--snes-red); } /* Character Creator Design */ .creator-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-top: 10px; } .creator-preview-pane { background-color: #000000; border: 2px solid var(--snes-white); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; height: 100%; min-height: 200px; } .preview-canvas-container { width: 96px; height: 96px; border: 2px dashed var(--snes-grey); display: flex; align-items: center; justify-content: center; background-color: #111; margin-bottom: 12px; } .creator-form-section { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 380px; padding-right: 4px; } .form-group { display: flex; flex-direction: column; gap: 4px; } .form-group label { font-size: 13px; color: var(--snes-gold); } .form-row { display: flex; gap: 8px; } .form-row > * { flex: 1; } /* Custom stats editor */ .stats-editor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } .stat-box { background: linear-gradient(to bottom, #1a1535, #0d0a1a); border: 2px solid var(--snes-gold-dim); border-radius: 4px; text-align: center; padding: 8px 4px 6px; box-shadow: inset 0 0 8px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.4); transition: border-color 0.15s; } .stat-box:hover { border-color: var(--snes-gold); } /* This dark navy gradient is fixed on purpose (unlike the translucent-black boxes fixed elsewhere, it never blends with what's behind it), so the fixed bright cyan/gold text below reads fine against it in EITHER theme. But sitting six of them in a row against an otherwise light parchment creator screen just looks like an unstyled dark-mode leftover, so give light theme its own warm parchment treatment instead. */ :root[data-theme="light"] .stat-box { background: #ecdcb9; border-color: #8c6a46; box-shadow: inset 0 1px 3px rgba(0,0,0,0.15); } :root[data-theme="light"] .stat-box:hover { border-color: #7a1c1c; } .stat-val { font-size: 22px; font-weight: bold; font-family: var(--font-pixel); /* Fixed, not var(--snes-cyan) β€” .stat-box's dark navy gradient background never changes with theme, but the token does (goes to a muted #0e6ba8 in light theme, meant for parchment backgrounds), making these numbers nearly illegible. */ color: #38bdf8; margin: 4px 0 2px; line-height: 1; text-shadow: 0 0 6px rgba(56,189,248,0.5); } .stat-box label { font-family: var(--font-pixel) !important; font-size: 12px !important; /* Fixed, not var(--snes-gold) β€” same fixed-dark-background reasoning as .stat-val. */ color: #e5b73b !important; letter-spacing: 0.5px; } .stat-box .snes-btn.stat-adjust { padding: 1px 6px !important; font-size: 14px !important; line-height: 1 !important; border-radius: 2px !important; min-width: 22px; } /* Character Sheet Tabs Ò€” SNES selector style */ .char-sheet-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--snes-gold-dim); margin-bottom: 12px; } .char-sheet-tab { background: linear-gradient(to bottom, #13102a, #0a0615); border: 2px solid #2a2040; border-bottom: none; border-radius: 4px 4px 0 0; color: #5a5470; padding: 6px 16px; font-family: var(--font-pixel); font-size: 12px; cursor: pointer; transform: translateY(2px); transition: all 0.1s; letter-spacing: 0.5px; } .char-sheet-tab:hover:not(.active) { color: var(--snes-grey); border-color: var(--snes-gold-dim); } .char-sheet-tab.active { background: linear-gradient(to bottom, #1e1640, #15102a); border: 2px solid var(--snes-gold); border-bottom: 2px solid #15102a; color: var(--snes-gold); text-shadow: 0 0 6px rgba(229,183,59,0.5); transform: translateY(0); z-index: 1; position: relative; } /* Same fixed-dark-crystal-tab treatment as .wizard-step-indicator (character creator) β€” fine on the dark theme's own dark modal, but reads as an unstyled dark-mode leftover once the modal around it goes light parchment. Same light-theme swap. */ :root[data-theme="light"] .char-sheet-tab { background: rgba(124, 94, 67, 0.14) !important; border-color: rgba(124, 94, 67, 0.35) !important; color: #7c5e43 !important; } :root[data-theme="light"] .char-sheet-tab:hover:not(.active) { border-color: #7a1c1c !important; color: #5c4028 !important; } :root[data-theme="light"] .char-sheet-tab.active { background: rgba(122, 28, 28, 0.10) !important; border-color: #7a1c1c !important; border-bottom-color: #ecdcb9 !important; color: #7a1c1c !important; text-shadow: none !important; } .tab-pane { display: none; min-height: 250px; } .tab-pane.active { display: block; } /* Stats view inside character sheet */ .sheet-main-stats { display: flex; justify-content: space-around; margin-bottom: 12px; background-color: rgba(0,0,0,0.3); padding: 8px; border-radius: 4px; } .sheet-stat-bubble { text-align: center; } .sheet-stat-bubble label { font-size: 13px; color: var(--snes-grey); } .sheet-stat-bubble div { font-size: 14px; font-weight: bold; color: var(--snes-white); } .ability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ability-row { display: flex; justify-content: space-between; align-items: center; background-color: rgba(0,0,0,0.2); padding: 6px 10px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.1); } .ability-name { font-size: 13px; text-transform: uppercase; } .ability-scores-container { display: flex; align-items: center; gap: 8px; } .ability-score { font-size: 13px; font-weight: bold; } .ability-mod { font-size: 13px; color: var(--snes-gold); background-color: rgba(0,0,0,0.6); padding: 2px 4px; border-radius: 2px; } /* Lists like Inventory and Spells */ .sheet-list { list-style: none; max-height: 200px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.2); background-color: rgba(0,0,0,0.4); border-radius: 4px; margin-bottom: 8px; } .sheet-list-item { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; } .sheet-list-item:last-child { border-bottom: none; } /* .sheet-list's fixed rgba(0,0,0,0.4) background/border assume a permanently-dark container β€” fine in dark theme, but the panels it sits in (spells, inventory-era handout viewer, shop, initiative) correctly go light parchment in light theme, leaving this translucent-black box as a muddy gray-brown leftover. Same warm-brown swap already used for .char-sheet-tab and friends. */ :root[data-theme="light"] .sheet-list { background-color: rgba(124, 94, 67, 0.14) !important; border-color: rgba(124, 94, 67, 0.35) !important; } :root[data-theme="light"] .sheet-list-item { border-bottom-color: rgba(124, 94, 67, 0.25) !important; } .slot-trackers { display: flex; gap: 10px; margin-bottom: 10px; } .slot-tracker { background-color: rgba(0,0,0,0.3); padding: 6px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.1); text-align: center; font-size: 13px; } /* Same fixed-dark-background reasoning as .sheet-list above β€” this box assumes a permanently-dark surroundings and reads as a muddy grey-brown card once the spells tab goes light parchment in light theme. */ :root[data-theme="light"] .slot-tracker { background-color: rgba(124, 94, 67, 0.14) !important; border-color: rgba(124, 94, 67, 0.35) !important; } .slot-check { width: 12px; height: 12px; border: 1px solid var(--snes-white); display: inline-block; margin: 2px; cursor: pointer; background-color: transparent; } .slot-check.checked { background-color: var(--snes-cyan); box-shadow: inset 0 0 2px var(--snes-black); } /* Spell list β€” bigger text, and the list itself grows to fill the tab instead of sitting at a fixed 200px with a huge empty pane below it (see .sheet-list). */ #character-sheet-modal #tab-spells #sheet-spells-list { max-height: none !important; flex-grow: 1 !important; } .spell-list-item { display: flex !important; flex-direction: column; align-items: stretch; gap: 4px; cursor: pointer; } .spell-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; } .spell-row-left { display: flex; align-items: center; gap: 8px; } .spell-prepare-checkbox { width: 15px; height: 15px; cursor: pointer; accent-color: var(--snes-cyan); flex-shrink: 0; } .spell-detail-panel { font-size: 14px; line-height: 1.6; color: var(--snes-grey); background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 3px; padding: 8px 10px; margin-top: 2px; } .spell-detail-panel.hidden { display: none; } :root[data-theme="light"] .spell-detail-panel { background: rgba(124, 94, 67, 0.10) !important; border-color: rgba(124, 94, 67, 0.28) !important; color: #5c4028 !important; } /* Dice Roller Section */ #dice-panel-sidebar { display: flex; flex-direction: column; gap: 8px; } .dice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .dice-btn { background-color: var(--window-bg-1); border: 2px solid var(--snes-white); border-radius: 3px; color: var(--snes-white); font-family: var(--font-pixel); font-size: 13px; padding: 6px; cursor: pointer; text-align: center; } .dice-btn:hover { border-color: var(--snes-gold); background-color: var(--window-bg-2); } /* Wraps each die button so a hover-revealed roll-count stepper can be positioned above it (replaces the old [data-tooltip] hover text for these specific buttons β€” a stepper needs real interactive children, which a ::after tooltip can't contain). */ .dice-btn-wrap { position: relative; display: flex; } .dice-btn-wrap .dice-btn { width: 100%; } .dice-count-popover { position: absolute; /* Flush against the button β€” bottom: 100% with zero gap, unlike the small offset this had before. A visual gap here is dead space no element owns: the mouse briefly hovers nothing while crossing it, .dice-btn-wrap:hover drops, and the popover (opacity/visibility/ pointer-events all gated on that hover) disappears before the cursor arrives. Touching the button keeps the hoverable area continuous. */ bottom: 100%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; background: var(--window-bg-1); border: 1px solid var(--snes-gold); border-radius: 4px; padding: 3px 6px; white-space: nowrap; z-index: 50; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease; } .dice-btn-wrap:hover .dice-count-popover { opacity: 1; visibility: visible; pointer-events: auto; } .dice-count-btn { background: var(--window-bg-2); border: 1px solid var(--snes-gold-dim); border-radius: 3px; color: var(--snes-gold); font-family: var(--font-pixel); font-size: 12px; line-height: 1; padding: 3px 6px; cursor: pointer; } .dice-count-btn:hover { border-color: var(--snes-gold); } .dice-count-value { min-width: 14px; text-align: center; font-family: var(--font-pixel); font-size: 12px; color: var(--snes-white); } /* Map Editor Panel (GM Only) */ #editor-panel { background: linear-gradient(to bottom, var(--topbar-bg-1) 0%, var(--topbar-bg-2) 100%) !important; border-top: 2px solid var(--snes-gold-dim) !important; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 4px 16px rgba(229, 183, 59, 0.05) !important; grid-row: 3; grid-column: 1 / -1; display: flex; flex-direction: column; padding: 8px 14px; gap: 8px; z-index: 5; } /* Dev bottom panel (Dev Only) */ #dev-panel { background: linear-gradient(to bottom, var(--topbar-bg-1) 0%, var(--topbar-bg-2) 100%) !important; border-top: 2px solid var(--snes-purple) !important; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 4px 16px rgba(107, 70, 193, 0.05) !important; grid-row: 3; /* Explicit row 3 at bottom */ grid-column: 1 / -1; /* Stretch across entire viewport width */ display: flex; flex-direction: column; padding: 16px 20px; gap: 12px; z-index: 5; --snes-purple: #c3b4fc; /* Redefine purple to a light lilac for high contrast */ } #dev-panel .dev-panel-content { grid-template-columns: 420px 1fr !important; gap: 20px; } #dev-panel .snes-input, #dev-panel .snes-select, #dev-panel .snes-btn { font-size: 13px !important; padding: 6px 10px !important; height: auto !important; } #dev-panel label { font-size: 13px !important; color: var(--snes-purple) !important; font-weight: bold; } #dev-panel span, #dev-panel strong { font-size: 13px !important; } /* Hide native number input spinners in dev panel to make text visible in small fields */ #dev-panel input[type="number"]::-webkit-outer-spin-button, #dev-panel input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #dev-panel input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .dev-palette-item { border: 2px solid #5a5a5a; background-color: #2c2c35; padding: 6px 12px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 4px; border-radius: 3px; transition: all 0.1s ease; user-select: none; } .dev-palette-item:hover { background-color: #3e3e4a; border-color: var(--snes-purple); } .dev-palette-item.selected { border-color: var(--snes-gold); background-color: #1f1f2e; box-shadow: 0 0 6px rgba(245, 203, 92, 0.4); } #dev-panel #dev-tab-items, #dev-panel #dev-tab-npcs, #dev-panel #dev-goto-editor-btn { font-size: 13px !important; padding: 6px 12px !important; } #dev-panel #dev-npc-coords-btn { font-size: 13px !important; padding: 4px 8px !important; } /* Tarjetas de NPCs organizadas en cuadrícula horizontal */ #dev-npcs-palette { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 10px !important; align-content: flex-start !important; } #dev-npcs-palette .dev-palette-item { width: calc(33.33% - 8px) !important; min-width: 280px !important; box-sizing: border-box !important; margin: 0 !important; } /* legacy Ò€” kept for any stale references */ .editor-tools { display: flex; align-items: center; gap: 10px; } /* Category Tab Buttons */ .palette-tab-btn { transition: all 0.2s ease; } .palette-tab-btn:hover { background-color: #3b3b47 !important; border-color: var(--snes-gold) !important; } .palette-tab-btn.active { background-color: #1f3ca6 !important; border-color: var(--snes-gold) !important; color: var(--snes-white) !important; box-shadow: 0 0 6px var(--snes-gold) !important; } .tile-palette { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; overflow-y: auto; background-color: rgba(0, 0, 0, 0.4); padding: 8px; border-radius: 4px; border: 2px solid var(--snes-gold-dim); flex: 1; min-width: 0; box-sizing: border-box; } .palette-tile { width: 36px; height: 36px; border: 2px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; image-rendering: pixelated; transition: transform 0.1s ease; } .palette-tile:hover { transform: scale(1.1); } .palette-tile.active { border-color: var(--snes-gold); box-shadow: 0 0 8px var(--snes-gold); background-color: rgba(255, 255, 255, 0.1); } /* Floating dialog window for dialogue & actions */ #dialogue-window { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 780px; z-index: 50; cursor: pointer; } .dialogue-text { font-size: 13px; line-height: 1.8; margin-top: 4px; min-height: 40px; } /* #npc-dialog-text (the face-to-face NPC dialog's text box, index.html's #npc-dialog-fullscreen) sits in a box with a fixed background:#0a0a1a β€” unlike #dialogue-text-box's own box, which just inherits the theme-aware .snes-window background. .dialogue-text itself has no color of its own, so it falls back to body's color: var(--snes-white), which light theme redefines to a dark ink (#2b1b10) for the (correctly) lightened surroundings β€” dark ink on this box's still-black background reads as nearly invisible. */ :root[data-theme="light"] #npc-dialog-text { color: #f5f2eb !important; } .dialogue-indicator { position: absolute; bottom: 8px; right: 12px; font-size: 13px; color: var(--snes-gold); animation: snes-bounce 0.6s infinite alternate; } @keyframes snes-bounce { from { transform: translateY(0); } to { transform: translateY(3px); } } /* Interactive NPC Options Popovers */ .npc-options-window { position: absolute; z-index: 60; min-width: 140px; } .npc-options-list { list-style: none; } .npc-option-item { padding: 8px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.1); } .npc-option-item:last-child { border-bottom: none; } .npc-option-item:hover { background-color: rgba(255,255,255,0.1); color: var(--snes-gold); } /* Collapsible "Estados" list in the conditions menu */ .conditions-details { margin-top: 4px; } .conditions-details summary.npc-option-item { display: flex; align-items: center; gap: 8px; border-bottom: none; list-style: none; padding: 5px 8px; /* match .conditions-patrol-section items so "Estados" lines up with "Controlar"/"Patrullar" */ } .conditions-details summary.npc-option-item::-webkit-details-marker { display: none; } .conditions-details summary.npc-option-item::after { content: '\25B8'; /* β–Έ */ margin-left: 6px; font-size: 12px; transition: transform 0.1s; display: inline-block; } .conditions-details[open] summary.npc-option-item::after { transform: rotate(90deg); } .conditions-count-badge { margin-left: auto; background: var(--snes-gold); color: #1a1228; font-size: 12px; font-weight: bold; border-radius: 999px; padding: 1px 6px; min-width: 16px; text-align: center; } /* Dice roll visual effect screen */ #dice-overlay-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; display: flex; align-items: center; justify-content: center; } .rolling-die-container { display: flex; flex-direction: column; align-items: center; justify-content: center; } .rolling-die-sprite { width: 64px; height: 64px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.7)); transform: rotate(0deg); animation: roll-spin 0.15s infinite linear; } .rolling-die-sprite.settled { animation: none; transform: scale(1.15); filter: drop-shadow(0 0 10px var(--snes-gold)); transition: transform 0.25s, filter 0.25s; } .rolling-die-label { margin-top: 10px; background-color: rgba(0,0,0,0.85); color: #f5f2eb; border: 1px solid #f5f2eb; padding: 4px 8px; font-size: 13px; border-radius: 4px; } /* Flat-modifier badge (dice.js's createModifierBadge) β€” sits in the dice row, to the right of the dice themselves, instead of the modifier being baked into (and shrinking) each individual die's own number. */ .dice-modifier-badge { align-self: center; min-width: 40px; height: 40px; padding: 0 6px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-family: 'Press Start 2P', monospace; font-size: 16px; font-weight: bold; color: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.7); animation: dice-modifier-badge-pop 0.3s ease-out; } .dice-modifier-badge.positive { background: #1f7d2f; border: 3px solid #4cd964; } .dice-modifier-badge.negative { background: #7a1c1c; border: 3px solid #ff6b6b; } @keyframes dice-modifier-badge-pop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* "Tirar DaΓ±o" button β€” appears below a successful weapon-attack roll (dice.js's maybeShowRollDamageButton), letting the player trigger the damage roll on their own timing instead of it auto-continuing on a fixed delay. */ .roll-damage-btn { margin-top: 10px; font-family: var(--font-pixel); font-size: 13px; letter-spacing: 1px; padding: 6px 14px; background: linear-gradient(to bottom, #7a1c1c, #4a1010); color: #fff2d9; border: 2px solid #e5b73b; border-radius: 4px; cursor: pointer; box-shadow: 0 0 10px rgba(229, 183, 59, 0.4); animation: roll-damage-btn-pulse 1.1s ease-in-out infinite; /* #dice-overlay-screen (its ancestor) is pointer-events:none so the roll animation never blocks clicks through to the map/canvas underneath β€” this is the one element inside it that needs to actually be clickable, so it has to opt back in explicitly. */ pointer-events: auto; } .roll-damage-btn:hover { filter: brightness(1.25); } .roll-damage-btn:disabled { cursor: default; opacity: 0.6; animation: none; filter: none; } @keyframes roll-damage-btn-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(229, 183, 59, 0.35); } 50% { box-shadow: 0 0 16px rgba(229, 183, 59, 0.75); } } @keyframes roll-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes die-bounce { 0% { transform: scale(1.15); } 45% { transform: scale(1.4); filter: drop-shadow(0 0 18px var(--snes-gold)); } 100% { transform: scale(1.15); } } .rolling-die-sprite.modifier-pop { animation: die-bounce 0.3s ease-out; } /* Shield-break flourish β€” appended by dice.js's maybeTriggerShieldBreakFx onto a weapon-attack roll's own .rolling-die-container (already position:absolute, set inline) the moment the roll reveals a hit against the target's AC. */ .shield-break-fx { position: absolute; top: -10px; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 10; } .shield-break-fx .shield-break-icon { display: inline-block; font-size: 32px; animation: shield-break-shake 0.12s ease-in-out 3, shield-break-shatter 0.55s ease-in 0.2s forwards; } .shield-break-fx .shield-break-crack { position: absolute; top: 2px; left: 0; font-size: 26px; opacity: 0; animation: shield-break-flash 0.6s ease-out forwards; } @keyframes shield-break-shake { 0%, 100% { transform: translateX(0) rotate(0deg); } 50% { transform: translateX(3px) rotate(-6deg); } } @keyframes shield-break-shatter { 0% { transform: scale(1) rotate(0deg); opacity: 1; } 100% { transform: scale(1.8) rotate(30deg); opacity: 0; filter: blur(3px); } } @keyframes shield-break-flash { 0% { opacity: 0; transform: scale(0.4); } 35% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(2); } } .die-value-text.nat-value { fill: var(--snes-grey) !important; opacity: 0.85; } .die-value-text.mod-value.positive { fill: var(--snes-cyan) !important; } .die-value-text.mod-value.negative { fill: var(--snes-red) !important; } /* Form input styling refinements */ .snes-select { background-color: var(--window-bg-2); border: 2px solid #ffffff; box-shadow: 0 0 0 1px #000000, inset 0 0 5px rgba(0, 0, 0, 0.8); border-radius: 3px; color: var(--snes-white); font-family: var(--font-pixel); font-size: 13px; padding: 8px; outline: none; cursor: pointer; width: 100%; } .snes-select:focus { border-color: var(--snes-gold); } /* Scrollbar customizations */ ::-webkit-scrollbar { width: 8px; height: 8px; background-color: #0d0a15; } ::-webkit-scrollbar-thumb { background-color: var(--snes-gold-dim); border: 1px solid #000; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--snes-gold); } :root[data-theme="light"] #character-sheet-modal .overlay-content::-webkit-scrollbar, :root[data-theme="light"] #npc-profile-modal .overlay-content::-webkit-scrollbar { width: 8px; background-color: #e2d4bd; border-left: 1px solid #c8b99e; } :root[data-theme="light"] #character-sheet-modal .overlay-content::-webkit-scrollbar-thumb, :root[data-theme="light"] #npc-profile-modal .overlay-content::-webkit-scrollbar-thumb { background-color: #8c6a46; border: 1px solid #f2ebdb; border-radius: 4px; } :root[data-theme="light"] #character-sheet-modal .overlay-content::-webkit-scrollbar-thumb:hover, :root[data-theme="light"] #npc-profile-modal .overlay-content::-webkit-scrollbar-thumb:hover { background-color: #5c4028; } #character-sheet-modal .overlay-content { max-width: 900px; } /* GM Map Config Panel */ .gm-config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } /* Sound volume control styles */ #volume-control-container { display: flex; align-items: center; gap: 8px; font-size: 13px; } .snes-slider { -webkit-appearance: none; appearance: none; background: #282830; height: 8px; border: 1px solid var(--snes-white); outline: none; } .snes-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: var(--snes-gold); border: 1px solid var(--snes-white); cursor: pointer; } /* Music panel track button active state */ .music-track-btn.active { background: var(--snes-cyan) !important; color: #04030a !important; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.5), 2px 2px 0 #000; } /* Minecraft-style inventory layout */ .minecraft-inventory-container { display: grid; grid-template-columns: 210px 1fr; gap: 16px; background-color: var(--window-bg-1); border: 4px solid #1a1a1a; border-top-color: #5a5a5a; border-left-color: #5a5a5a; padding: 16px; border-radius: 4px; color: var(--snes-white); text-shadow: 1px 1px 0px #000; } /* Paper Doll Layout in Minecraft style */ .paper-doll-container { display: flex; flex-direction: column; align-items: center; border: 4px solid #1a1a1a; border-top-color: #5a5a5a; border-left-color: #5a5a5a; background-color: #1a1a1a; padding: 8px; position: relative; height: 250px; border-radius: 2px; } .paper-doll-silhouette { position: absolute; top: 54px; left: 73px; width: 64px; height: 96px; background-color: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(255,255,255,0.2); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; /* Fixed (not the theme-flipping --snes-grey) β€” this sits inside .paper-doll-container's permanently dark shadow-box background, which doesn't flip with the theme either. */ color: #a0a0a8; } .paper-doll-slot { position: absolute; width: 42px; height: 42px; background-color: #8b8b8b; border: 2px solid #373737; border-right-color: #ffffff; border-bottom-color: #ffffff; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; border-radius: 2px; } .paper-doll-slot:hover { background-color: #9c9c9c; } .paper-doll-slot.selected { outline: 2px solid #ffffff; outline-offset: -2px; box-shadow: 0 0 10px #ffffff; z-index: 5; } .paper-doll-slot label { font-size: 13px; color: #c6c6c6; margin-top: 1px; pointer-events: none; font-weight: bold; } .paper-doll-slot .slot-item-name { display: none; /* We use the icon/tooltip now */ } /* Positions for slots around silhouette (9 slots layout) */ .slot-head { top: 10px; left: 15px; } .slot-neck { top: 62px; left: 15px; } .slot-chest { top: 114px; left: 15px; } .slot-legs { top: 166px; left: 15px; } .slot-feet { top: 218px; left: 15px; } .slot-arms { top: 10px; left: 177px; } .slot-hands { top: 62px; left: 177px; } .slot-weapon { top: 114px; left: 177px; } .slot-shield { top: 166px; left: 177px; } /* Grid layout for 36 items */ .inventory-grid-container { display: flex; flex-direction: column; gap: 8px; } .inventory-grid-header { font-size: 13px; color: var(--snes-gold); border-bottom: 2px solid rgba(255,255,255,0.1); padding-bottom: 4px; font-weight: bold; } .mc-inventory-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; background-color: #1a1a1a; padding: 6px; border-radius: 4px; border: 2px solid #5a5a5a; } .mc-hotbar-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; background-color: #1a1a1a; padding: 6px; border-radius: 4px; border: 2px solid #5a5a5a; } /* Inventory grid layout β€” WoW-style fixed grid of icon tiles (36 slots, 6 per row β€” narrower/taller than the original 9-per-row so the wider avatar-centered paperdoll on the left has room). Rows are NOT a fixed px height β€” each tile is square via aspect-ratio on .mc-slot (below), so row height simply follows column width. */ #mc-inventory-list { display: grid; grid-template-columns: repeat(6, 1fr); align-content: start; gap: 6px; overflow-y: auto; max-height: 195px; padding: 6px; border-radius: 4px; box-sizing: border-box; } .mc-list-row { display: flex; align-items: center; justify-content: space-between; background-color: #8b8b8b; border: 2px solid #373737; border-right-color: #ffffff; border-bottom-color: #ffffff; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4); border-radius: 3px; padding: 6px 10px; margin-bottom: 2px; color: #fff; transition: background-color 0.1s, transform 0.05s; } .mc-list-row:hover { background-color: #9c9c9c; transform: translateY(-1px); } :root[data-theme="light"] #character-sheet-modal .mc-list-row { background-color: #dfcfad !important; border: 2px solid #8c6a46 !important; border-right-color: #faf6ee !important; border-bottom-color: #faf6ee !important; color: #2b1b10 !important; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.05) !important; } :root[data-theme="light"] #character-sheet-modal .mc-list-row:hover { background-color: #faf6ee !important; } #character-sheet-modal .mc-list-row { background-color: #f5eedc !important; border: 2px solid #5c3e24 !important; border-right-color: #ffffff !important; border-bottom-color: #ffffff !important; color: #0c0805 !important; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.05) !important; } #character-sheet-modal .mc-list-row:hover { background-color: #ffffff !important; } .mc-slot { width: 44px; height: 44px; background-color: #8b8b8b; border: 2px solid #373737; border-right-color: #ffffff; border-bottom-color: #ffffff; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; transition: background-color 0.1s; } /* Grid tiles fill their track exactly rather than using the standalone fixed size above (which stays as-is for the trash slot, sitting outside the grid). */ #mc-inventory-list .mc-slot { width: 100%; height: auto; aspect-ratio: 1 / 1; } .mc-slot:hover { background-color: #9c9c9c; } .mc-slot.selected { outline: 2px solid #ffffff; outline-offset: -2px; box-shadow: 0 0 10px #ffffff; z-index: 5; } /* Rarity-colored borders on filled backpack tiles β€” same colors as the .item-rarity-* tooltip text, so a tile's border matches its own tooltip's name color at a glance. */ .mc-slot-rarity-common { border-color: #ffffff; } .mc-slot-rarity-uncommon { border-color: #4cd964; } .mc-slot-rarity-rare { border-color: #5ac8fa; } .mc-slot-rarity-very_rare { border-color: #b099ff; } .mc-slot-rarity-legendary { border-color: #f5cb5c; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4), 0 0 6px rgba(245, 203, 92, 0.6); } /* "USAR" overlay button shown on a selected, usable (consumable) backpack tile */ .mc-slot-use-btn { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-family: var(--font-pixel); font-size: 10px; font-weight: bold; padding: 2px 6px; background-color: #2f6b3a; color: #fff; border: 1px solid #1c4423; border-radius: 3px; cursor: pointer; white-space: nowrap; z-index: 6; } .mc-slot-use-btn:hover { background-color: #3d8a4a; } .mc-item-icon { font-size: 22px; pointer-events: none; } /* Backpack tiles are now bigger/square β€” scale the icon image up with the tile instead of leaving it at the fixed 32px attribute size set in getItemIcon(). The plain inline .mc-item-icon span has no definite box for the img's percentage sizing to resolve against, so give it one (filling the tile) before sizing the img as a percentage of it. */ #mc-inventory-list .mc-slot .mc-item-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } #mc-inventory-list .mc-slot .mc-item-icon img { width: 70%; height: 70%; } /* Item tooltip β€” a single shared element appended to and positioned via JS (getBoundingClientRect), NOT nested inside the slot/tile it describes. The old approach nested this span inside .mc-slot/.paper-doll-slot with position:absolute, shown via a :hover selector β€” that silently clipped whenever the slot sat inside a scrolling ancestor (the backpack grid's overflow-y:auto), so only the browser's native `title` tooltip was ever visible there. position:fixed + JS show/hide never has that problem regardless of which container the anchor sits in. */ .mc-item-tooltip { visibility: hidden; background-color: #0b0b0f; color: #fff; text-align: center; border-radius: 4px; padding: 6px 10px; z-index: 9999; opacity: 0; transition: opacity 0.15s; font-size: 13px; white-space: nowrap; border: 2px solid var(--snes-gold); pointer-events: none; box-shadow: 0 4px 8px rgba(0,0,0,0.5); font-family: var(--font-pixel); } .mc-item-tooltip.floating { position: fixed; /* top/left are set inline by showItemTooltip() in character.js */ } .mc-item-tooltip.floating.visible { visibility: visible; opacity: 1; } /* Rarity Colors */ .item-rarity-common { color: #ffffff !important; text-shadow: 1px 1px 0 #000; } .item-rarity-uncommon { color: #4cd964 !important; text-shadow: 1px 1px 0 #000; } .item-rarity-rare { color: #5ac8fa !important; text-shadow: 1px 1px 0 #000; } .item-rarity-very_rare { color: #b099ff !important; text-shadow: 1px 1px 0 #000; } .item-rarity-legendary { color: #f5cb5c !important; text-shadow: 1px 1px 0 #000; font-weight: bold; } /* Rich tooltip formatting */ .mc-item-tooltip.rich-tooltip { white-space: normal !important; width: 340px !important; line-height: 1.4 !important; text-align: left !important; } /* Trash slot styling */ .mc-slot.mc-trash { border-color: #4a1212; border-right-color: #ff6b6b; border-bottom-color: #ff6b6b; background-color: #7a1f1f; } .mc-slot.mc-trash:hover { background-color: #9d2c2c; } /* ========================================================================== JRPG FANTASY THEME & LEFT SIDEBAR FOR PLAYERS ========================================================================== */ #left-sidebar { /* Spans rows 2-3 (not just row 2) β€” reaches all the way to the bottom of the viewport instead of stopping above #player-bottom-bar (row 3, columns 2-3), which used to leave an empty gap under column 1. Only ever shown for players (GM/DEV keep it .hidden), so it never competes with #editor-panel/#dev-panel, which occupy row 3 for those roles. */ grid-row: 2 / -1; grid-column: 1; background: linear-gradient(to bottom, var(--topbar-bg-1) 0%, var(--topbar-bg-2) 100%); border-right: 2px solid var(--snes-gold-dim); box-shadow: 0 0 0 1px #000000, inset -1px 0 0 1px rgba(255, 255, 255, 0.05), inset -4px 0 16px rgba(229, 183, 59, 0.08), 4px 0 10px rgba(0,0,0,0.6); display: flex; flex-direction: column; height: 100%; overflow: hidden; color: var(--snes-white); padding: 8px; font-family: var(--font-fantasy-body); text-shadow: 1px 1px 0px #000000; z-index: 5; gap: 2px; } #left-sidebar .sidebar-section { padding: 3px 4px; border-bottom: 2px solid rgba(255, 255, 255, 0.1); } /* Legible typography scaling */ .fantasy-header { font-family: var(--font-fantasy-header); font-size: 14px; color: var(--snes-gold); text-align: center; margin-bottom: 6px; text-shadow: 1px 1px 0px #000000; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: bold; } .fantasy-header::before, .fantasy-header::after { content: ''; flex-grow: 1; height: 2px; background-color: var(--snes-gold-dim); box-shadow: 0 1px 0 #000; } #hero-switcher-row { margin-bottom: 2px; } #player-hero-name { font-family: var(--font-fantasy-header); font-size: 19px; font-weight: bold; color: var(--snes-gold); text-shadow: 2px 2px 0px #000000; } #player-hero-details { font-family: var(--font-fantasy-body); font-size: 14px; color: var(--snes-grey); text-align: center; text-transform: uppercase; letter-spacing: 0.5px; } /* Stat grid overrides */ .left-sidebar-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 3px; } .left-sidebar-stat-card { background-color: rgba(0, 0, 0, 0.4); border: 1px solid var(--snes-gold-dim); border-radius: 4px; padding: 3px 2px; text-align: center; box-shadow: inset 0 0 5px #000; transition: border-color 0.15s, transform 0.05s; } .left-sidebar-stat-card:hover { border-color: var(--snes-gold); } /* #left-sidebar's own background correctly flips to a warm tan gradient in light theme (it uses --topbar-bg-1/2, same as the top navbar) β€” but this card's rgba(0,0,0,0.4) was written assuming it always sits on something dark, so it no longer "stays dark": composited over the light tan sidebar it reads as a muddy olive-brown. Same fix pattern as the rest of this session β€” light-theme-specific warm parchment treatment, and the fixed bright label/value/mod colors below become dark ink to match. */ :root[data-theme="light"] .left-sidebar-stat-card { background-color: rgba(124, 94, 67, 0.30); border-color: rgba(92, 64, 40, 0.55); box-shadow: inset 0 1px 3px rgba(0,0,0,0.15); } :root[data-theme="light"] .left-sidebar-stat-label { color: #5c4028; } :root[data-theme="light"] .left-sidebar-stat-value { color: #2b1b10; } :root[data-theme="light"] .left-sidebar-stat-mod { color: #7a1c1c; } .left-sidebar-stat-label { font-family: var(--font-fantasy-header); font-size: 12px; /* Fixed, not var(--snes-grey)/--snes-white/--snes-gold below β€” .left-sidebar-stat-card's rgba(0,0,0,0.4) background stays dark-ish regardless of theme, but these tokens flip to dark/muted values in light theme (meant for parchment backgrounds). */ color: #c5c0cc; text-transform: uppercase; } /* Value + modifier share one line ("13 -1") instead of stacking on their own lines β€” cuts a full text row off every card, matching the already-compact 2-line save cards right below (ATRIBUTOS was the one section eating extra vertical space for no real information gain over that). */ .left-sidebar-stat-value { font-family: var(--font-retro-narrow); font-size: 19px; font-weight: bold; color: #f5f2eb; line-height: 1.1; } .left-sidebar-stat-mod { font-size: 13px; color: #e5b73b; font-weight: bold; } /* Saves grids */ .left-sidebar-save-card { background-color: rgba(0, 0, 0, 0.4); border: 1px solid #282830; border-radius: 4px; padding: 3px 2px; text-align: center; box-shadow: inset 0 0 5px #000; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; } .left-sidebar-save-card:hover { border-color: var(--snes-cyan); background-color: rgba(90, 200, 250, 0.05); } .left-sidebar-save-card.proficient { border-color: var(--snes-gold); background-color: rgba(229, 183, 59, 0.08); } .left-sidebar-save-card.proficient:hover { background-color: rgba(245, 203, 92, 0.15); } /* Same "invisible at 8% opacity on light parchment" fix as .left-sidebar-skill-btn.proficient. */ :root[data-theme="light"] .left-sidebar-save-card.proficient { background-color: rgba(229, 183, 59, 0.25); } .left-sidebar-save-label { font-family: var(--font-fantasy-header); font-size: 13px; /* Fixed, not var(--snes-grey)/--snes-white below β€” same fixed-dark-card reasoning as .left-sidebar-stat-label above. The .proficient variant sits on a light gold-tinted background instead (rgba(229,183,59,0.08)) so its theme-aware cyan is left as-is. */ color: #c5c0cc; margin-bottom: 1px; } .left-sidebar-save-label.proficient { /* Theme-aware, unlike the base label above β€” .proficient's rgba(229,183,59,0.08) background REPLACES the fixed dark one rather than layering over it, so it actually does lighten in light theme, and needs the token's light-theme (dark gold) value to stay readable there, matching .left-sidebar-save-value.proficient below. A fixed bright gold here was backwards: fine on dark, unreadable on light. */ color: var(--snes-gold); } .left-sidebar-save-value { font-family: var(--font-retro-narrow); font-size: 20px; font-weight: bold; color: #f5f2eb; } .left-sidebar-save-value.proficient { color: var(--snes-cyan); } /* Same fix as .left-sidebar-stat-card above β€” only the base (non-proficient) card needs it; .proficient's gold-tinted background already lightens correctly in light theme (see the comment on .left-sidebar-save-label.proficient above) and stays untouched. */ :root[data-theme="light"] .left-sidebar-save-card { background-color: rgba(124, 94, 67, 0.30); box-shadow: inset 0 1px 3px rgba(0,0,0,0.15); } :root[data-theme="light"] .left-sidebar-save-label { color: #5c4028; } :root[data-theme="light"] .left-sidebar-save-value { color: #2b1b10; } #player-hero-skills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; } /* Skills grid */ .left-sidebar-skill-btn { display: flex; justify-content: space-between; align-items: center; background-color: rgba(0, 0, 0, 0.4); border: 1px solid #282830; border-radius: 4px; padding: 4px 8px; cursor: pointer; box-shadow: inset 0 0 4px #000; transition: border-color 0.15s, background-color 0.15s; } .left-sidebar-skill-btn:hover { border-color: var(--snes-gold); background-color: rgba(255, 255, 255, 0.08); } .left-sidebar-skill-btn.proficient { border-color: var(--snes-gold); background-color: rgba(229, 183, 59, 0.08); } .left-sidebar-skill-btn.proficient:hover { background-color: rgba(229, 183, 59, 0.15); } /* Same fix as .left-sidebar-stat-card above β€” the skill name/value colors already use theme tokens (var(--snes-white/gold/grey/cyan)), so they already go dark automatically in light theme; only this base background needed the explicit swap. */ :root[data-theme="light"] .left-sidebar-skill-btn { background-color: rgba(124, 94, 67, 0.30); box-shadow: inset 0 1px 3px rgba(0,0,0,0.15); } /* .proficient's rgba(229,183,59,0.08) gold tint (shared with .left-sidebar-save-card below) is a highlight meant to stand out against a dark card β€” at 8% opacity over the light parchment sidebar it barely reads at all, so the "this skill is proficient" cue was effectively invisible in light theme. Strengthen just the tint, the token-based text color already goes dark-gold correctly on its own. */ :root[data-theme="light"] .left-sidebar-skill-btn.proficient { background-color: rgba(229, 183, 59, 0.25); } .left-sidebar-skill-name { font-family: var(--font-fantasy-body); font-size: 14px; color: var(--snes-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .left-sidebar-skill-name.proficient { color: var(--snes-gold); font-weight: bold; } .left-sidebar-skill-val { font-family: var(--font-retro-narrow); font-size: 17px; font-weight: bold; color: var(--snes-grey); } .left-sidebar-skill-val.proficient { color: var(--snes-cyan); } /* Quick Actions β€” one full-width clickable row per thing the player can actually do (currently: weapon/unarmed attack), replacing the old 3-column ARMA/ESCUDO/PECHO grid that overflowed the sidebar and mostly showed non-actionable items. */ #player-hero-actions-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .left-sidebar-action-row { background-color: rgba(0, 0, 0, 0.4); border: 1px solid var(--snes-gold); border-radius: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; padding: 6px 8px; box-shadow: inset 0 0 5px rgba(0,0,0,0.8); transition: border-color 0.15s, background-color 0.15s, transform 0.05s; } .left-sidebar-action-row:hover { border-color: var(--snes-cyan); background-color: rgba(255, 255, 255, 0.05); } .left-sidebar-action-row:active { transform: scale(0.97); } :root[data-theme="light"] .left-sidebar-action-row { background: #ecdcb9; box-shadow: inset 0 0 0 1px #8c6a46, inset 0 0 0 2px rgba(229, 183, 59, 0.3); } .left-sidebar-action-name { font-family: var(--font-fantasy-header); font-size: 13px; font-weight: bold; color: #e5b73b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-theme="light"] .left-sidebar-action-name { color: #8a5a1c; } .left-sidebar-action-detail { font-family: var(--font-retro-narrow); font-size: 15px; color: #f5f2eb; white-space: nowrap; flex-shrink: 0; } :root[data-theme="light"] .left-sidebar-action-detail { color: #2b1b10; } /* Backpack quick grid */ #left-sidebar-backpack-title { font-family: var(--font-fantasy-header); font-size: 14px; color: var(--snes-gold); margin-top: 8px; margin-bottom: 4px; text-transform: uppercase; text-align: center; letter-spacing: 0.5px; font-weight: bold; } #left-sidebar-backpack-grid { display: flex; flex-direction: column; gap: 5px; } .left-sidebar-backpack-slot { background-color: rgba(0, 0, 0, 0.4); border: 1px solid var(--snes-gold-dim); border-radius: 4px; width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-family: var(--font-retro-narrow); font-size: 13px; font-weight: bold; cursor: pointer; box-shadow: inset 0 0 4px #000; transition: border-color 0.15s, background-color 0.15s, transform 0.05s; } .left-sidebar-backpack-slot.empty-hint { cursor: default; color: var(--snes-grey); font-size: 12px; font-weight: normal; justify-content: center; font-family: var(--font-fantasy-header); } .left-sidebar-backpack-slot:hover { border-color: var(--snes-gold); background-color: rgba(255, 255, 255, 0.05); } .left-sidebar-backpack-slot:active { transform: scale(0.9); } .left-sidebar-backpack-slot.filled { border-color: var(--snes-cyan); color: var(--snes-white); background-color: rgba(43, 108, 176, 0.15); } :root[data-theme="light"] .left-sidebar-backpack-slot { background-color: rgba(124, 94, 67, 0.30); box-shadow: inset 0 1px 3px rgba(0,0,0,0.15); } /* Needs its own selector, not just a shared one with the base slot above β€” the base light-theme override (higher specificity than .filled alone: an extra :root/attribute selector beats one extra class) was flattening every filled slot back down to the plain empty-slot tan, losing the cyan "this one has a spell" distinction entirely. */ :root[data-theme="light"] .left-sidebar-backpack-slot.filled { background-color: rgba(14, 107, 168, 0.14); } .left-sidebar-backpack-slot.filled:hover { background-color: rgba(43, 108, 176, 0.25); border-color: var(--snes-gold); } .left-sidebar-backpack-slot-number { font-family: var(--font-pixel); font-size: 12px; color: rgba(255, 255, 255, 0.4); pointer-events: none; flex-shrink: 0; width: 14px; text-align: center; } /* Fixed white-at-40%-opacity was written for a permanently-dark slot β€” against the light parchment sidebar's tan card it's nearly invisible (very light on light). */ :root[data-theme="light"] .left-sidebar-backpack-slot-number { color: rgba(43, 27, 16, 0.45); } .left-sidebar-backpack-slot-spell { font-family: var(--font-retro-narrow); font-size: 14px; letter-spacing: 0.3px; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Player bottom bar β€” status/spell-slots/camera strip, row 3 of the player grid (shares that row with #editor-panel/#dev-panel, which only ever show for GM/DEV β€” never visible at the same time as this). */ #player-bottom-bar { grid-row: 3; /* Spans exactly column 2 (the game view) β€” starts where the left sidebar ends and stops where the right sidebar begins, instead of running underneath either of them (both now stretch down through this row on their own, see #left-sidebar/#sidebar). */ grid-column: 2 / 3; background: linear-gradient(to right, var(--topbar-bg-1) 0%, var(--topbar-bg-2) 100%); border-top: 2px solid var(--snes-gold-dim); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); color: var(--snes-white); display: flex; align-items: stretch; gap: 14px; padding: 6px 14px; z-index: 5; overflow: hidden; } #player-bottom-bar.hidden { display: none; } :root[data-theme="light"] #player-bottom-bar { text-shadow: none !important; } .bottombar-section { display: flex; flex-direction: column; justify-content: flex-start; /* Not justify-content: center β€” each section's content column is a different height (the camera strip has just its header when nothing's connected, vs. two lines for status/spells), so centering independently made "β—† CÁMARAS β—†" sit lower than the other two headers instead of lining up with them. */ padding-top: 4px; } .bottombar-status, .bottombar-spells { flex-shrink: 0; } .bottombar-cameras { flex-grow: 1; min-width: 0; } .bottombar-divider { width: 2px; align-self: stretch; margin: 4px 0; background-color: rgba(255, 255, 255, 0.1); flex-shrink: 0; } /* Spell slot trackers reuse .slot-tracker/.slot-check (character sheet) β€” .slot-trackers is already a horizontal flex row, so no layout changes needed here, just let it sit inline instead of stacking under a list like it does in the sheet. */ .bottombar-spells .slot-trackers { margin-bottom: 0; } /* Camera strip β€” sized so ~5 tiles show at once (5 * 96px tile + 4 * 6px gap β‰ˆ 504px), with horizontal scroll for anything beyond that rather than shrinking tiles further. */ #player-bottom-bar #video-tiles-container { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; max-width: 504px; height: 100%; align-items: center; } #player-bottom-bar .peer-video-tile { width: 96px; height: 68px; flex-shrink: 0; } /* Typography general overhaul for legibility */ .form-group label { font-size: 13px; } .stat-box label { font-size: 13px; } .char-sheet-tab { font-size: 13px; } .sheet-stat-bubble label { font-size: 13px; } .sheet-stat-bubble div { font-size: 17px; } .ability-name { font-size: 13px; } .ability-score { font-size: 16px; } .ability-mod { font-size: 14px; } .sheet-list-item { font-size: 13px; } .dice-btn { font-size: 13px; padding: 8px; } .palette-tile { font-size: 13px; } .dialogue-text { font-size: 15px; } .npc-option-item { font-size: 13px; } .rolling-die-label { font-size: 13px; } .snes-select { font-size: 13px; } #volume-control-container { font-size: 13px; } .inventory-grid-header { font-size: 13px; } .inventory-grid-slot.empty { font-size: 13px; } .inventory-grid-slot .slot-number { font-size: 13px; } .inventory-grid-slot .item-name { font-size: 13px; } #inventory-action-panel { font-size: 13px; } #character-creator-screen .overlay-content { max-width: 880px !important; width: 95% !important; height: 88vh !important; max-height: 88vh !important; overflow-y: auto !important; } /* Wizard step display */ .creator-step-pane.hidden { display: none !important; } .creator-step-pane { display: block; } /* Quick Fill Suggestions Chips */ .suggest-chip { background: rgba(255, 255, 255, 0.05) !important; border-color: #444 !important; color: var(--snes-grey) !important; text-shadow: none !important; font-weight: normal !important; width: 100%; text-transform: none; } .suggest-chip:hover { background: rgba(90, 200, 250, 0.1) !important; border-color: var(--snes-cyan) !important; color: var(--snes-cyan) !important; } /* 5e redesigned sheets stats tab elements */ .ability-card-5e { background: linear-gradient(to bottom, #16122a, #0c091a) !important; border: 2px solid #2a2040 !important; box-shadow: inset 0 0 6px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.4); transition: border-color 0.15s, box-shadow 0.15s; } .ability-card-5e:hover { border-color: var(--snes-gold) !important; box-shadow: inset 0 0 6px rgba(0,0,0,0.8), 0 0 8px rgba(229,183,59,0.2) !important; } /* Stat-specific accent colors for ability cards */ .ability-card-5e[data-stat="str"] { border-left: 3px solid #ef4444 !important; } .ability-card-5e[data-stat="dex"] { border-left: 3px solid #34d399 !important; } .ability-card-5e[data-stat="con"] { border-left: 3px solid #f97316 !important; } .ability-card-5e[data-stat="int"] { border-left: 3px solid #38bdf8 !important; } .ability-card-5e[data-stat="wis"] { border-left: 3px solid #a78bfa !important; } .ability-card-5e[data-stat="cha"] { border-left: 3px solid #ec4899 !important; } .ability-card-5e .ability-mod { font-family: var(--font-pixel) !important; font-size: 18px !important; line-height: 1 !important; } .ability-card-5e .ability-score { font-family: var(--font-pixel) !important; font-size: 12px !important; background: rgba(0,0,0,0.5) !important; padding: 2px 6px !important; border: 1px solid #2a2040 !important; border-radius: 2px !important; } .ability-card-5e span:first-child { font-family: var(--font-pixel) !important; font-size: 12px !important; letter-spacing: 0.5px; } .sheet-section-title { font-family: var(--font-pixel); font-size: 13px; color: var(--snes-gold); border-bottom: 1px solid #444; padding-bottom: 2px; margin-bottom: 4px; text-transform: uppercase; font-weight: bold; } .combat-stat-card { background: rgba(0,0,0,0.5); border: 2px solid #5a5a5a; border-radius: 4px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .combat-stat-card label { font-size: 13px; color: var(--snes-grey); font-weight: bold; } /* Sheet list roll buttons style */ .sheet-roll-btn { background: linear-gradient(to bottom, #2c2c35, #1c1c22); border: 1px solid #5a5a5a; color: #fff; font-size: 13px; padding: 4px 6px; cursor: pointer; border-radius: 3px; display: flex; justify-content: space-between; align-items: center; width: 100%; text-shadow: 1px 1px 0 #000; } .sheet-roll-btn:hover { border-color: var(--snes-gold); background: linear-gradient(to bottom, #3b3b47, #2c2c35); } /* Quick Attacks list is reference-only (no click-to-roll) β€” same look, no hover affordance since there's nothing to click. */ .sheet-roll-btn.readonly-info { cursor: default; } .sheet-roll-btn.readonly-info:hover { border-color: #5a5a5a; background: linear-gradient(to bottom, #2c2c35, #1c1c22); } .sheet-saves-entry, .sheet-skills-entry { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; border-radius: 2px; cursor: pointer; } .sheet-saves-entry:hover, .sheet-skills-entry:hover { background: rgba(255, 255, 255, 0.05); } .sheet-saves-entry.proficient, .sheet-skills-entry.proficient { color: var(--snes-gold); font-weight: bold; } /* ═══ SNES Equipment Grid – Category System ═══ */ .nes-equip-panel { box-sizing: border-box; background: #04080f; background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 4px 4px; border: 4px solid #e5b73b; box-shadow: 0 0 0 2px #000, 0 0 0 4px #7a5a18, 0 0 0 6px #000, inset 0 0 0 2px #7a5a18, inset 0 0 0 4px #000; padding: 10px 8px 8px; gap: 8px; } .nes-equip-title { font-family: var(--font-pixel) !important; font-size: 12px !important; color: #e5b73b !important; text-shadow: 1px 1px 0 #000, 2px 2px 0 #7a5a18 !important; letter-spacing: 2px !important; text-transform: uppercase !important; text-align: center !important; padding-bottom: 6px !important; margin-bottom: 0 !important; border-bottom: 2px solid #2a1f08 !important; width: 100% !important; flex-shrink: 0 !important; } .nes-equip-grid { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(4, 56px); gap: 3px; background: #000; border: 2px solid #000; flex-shrink: 0; } /* ── Base cell reset ── */ .nes-equip-grid .paper-doll-slot, .nes-equip-grid .nes-equip-cell { position: relative !important; top: auto !important; left: auto !important; width: 56px !important; height: 56px !important; border: none !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; border-radius: 0 !important; transition: filter 0.07s ease !important; overflow: hidden !important; background-color: #0c1929 !important; } /* ── ARMOR β€” dark steel blue + cyan top stripe ── */ .nes-equip-grid .equip-armor { background-color: #0c1929 !important; border-top: 2px solid #1a5a78 !important; box-shadow: inset 2px 2px 0 0 #1e3d5c, inset -2px -2px 0 0 #040c14 !important; } .nes-equip-grid .equip-armor:hover { filter: brightness(1.5) !important; } /* ── WEAPON / SHIELD β€” deep blood crimson + red top stripe ── */ .nes-equip-grid .equip-weapon { background-color: #1c0c0c !important; border-top: 2px solid #7a1c1c !important; box-shadow: inset 2px 2px 0 0 #3d1818, inset -2px -2px 0 0 #080202 !important; } .nes-equip-grid .equip-weapon:hover { filter: brightness(1.5) !important; } /* ── ACCESSORY β€” arcane violet + gold top stripe ── */ .nes-equip-grid .equip-accessory { background-color: #110a1e !important; border-top: 2px solid #7a5a18 !important; box-shadow: inset 2px 2px 0 0 #251548, inset -2px -2px 0 0 #060110 !important; } .nes-equip-grid .equip-accessory:hover { filter: brightness(1.5) !important; } /* ── Centered character avatar (replaces the old decorative "eye" cell) ── */ .nes-equip-avatar-cell { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #080514; border: 2px solid var(--snes-gold); border-radius: 4px; box-shadow: inset 0 0 10px #000, 0 0 10px rgba(229, 183, 59, 0.25); box-sizing: border-box; } /* ── Selected state ── */ .nes-equip-grid .paper-doll-slot.selected { outline: 2px solid #e5b73b !important; outline-offset: -2px !important; filter: brightness(1.6) !important; z-index: 5 !important; } /* ── Labels β€” bottom-anchored, category-colored ── */ .nes-equip-grid .paper-doll-slot label { font-family: 'Press Start 2P', monospace !important; font-size: 12px !important; position: absolute !important; bottom: 3px !important; top: auto !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; text-align: center !important; pointer-events: none !important; text-transform: uppercase !important; text-shadow: 1px 1px 0 #000 !important; font-weight: normal !important; letter-spacing: 0 !important; margin: 0 !important; padding: 0 1px !important; box-sizing: border-box !important; } .nes-equip-grid .equip-armor label { color: #3a8aaa !important; } .nes-equip-grid .equip-weapon label { color: #a04848 !important; } .nes-equip-grid .equip-accessory label { color: #9068c8 !important; } /* Active Script Running Banner (GM & Players) */ #script-running-banner { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #0c1446 0%, #030617 100%); border: 2px solid #ffffff; box-shadow: 0 0 0 1px #000000, inset 0 0 0 1px #000000, inset 0 0 0 3px #1f3ca6, inset 0 0 0 4px #000000, 0 4px 8px rgba(0,0,0,0.6); border-radius: 4px; padding: 10px 18px; /* Fixed white, not the theme-flipping --snes-white β€” this banner's blue gradient background is deliberately always-dark regardless of app theme. */ color: #fff; display: flex; align-items: center; gap: 12px; z-index: 80; text-shadow: 1px 1px 0px #000000; pointer-events: auto; } #script-running-title { color: var(--snes-gold); font-size: 13px; font-weight: bold; letter-spacing: 1px; } #script-running-info { font-size: 13px; color: #ffffff; } #script-stop-btn { margin-left: 10px; padding: 4px 8px !important; font-size: 13px !important; line-height: 1 !important; } /* Event Scripting Visual Cards inside Modal */ .script-step-card { margin-top: 6px; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 4px !important; box-shadow: inset 0 0 6px rgba(0,0,0,0.7) !important; } .script-step-card select, .script-step-card input { margin-top: 2px; } /* ========================================================================== HIGH FANTASY THEME OVERRIDES (LOBBY, CREATOR, SCROLLS, MENU & FORMS) ========================================================================== */ /* Connection Lobby (High Fantasy Castle/Mystery Backdrop) */ #lobby-screen { background: radial-gradient(circle at center, rgba(25, 18, 42, 0.96) 0%, rgba(6, 4, 12, 0.99) 100%) !important; backdrop-filter: blur(10px) !important; } #lobby-screen .snes-window { border-width: 3px !important; border-color: var(--snes-gold) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 30px rgba(229, 183, 59, 0.2) !important; } .wizard-step-tabs-row { display: flex; gap: 3px; padding: 8px 10px 0; background: rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Same fixed-dark-strip reasoning as .wizard-step-indicator above it β€” this bar reads as a muddy grey smear once the window around it goes light parchment instead of its own dark crystal theme. */ :root[data-theme="light"] .wizard-step-tabs-row { background: rgba(124, 94, 67, 0.10) !important; border-bottom-color: rgba(124, 94, 67, 0.25) !important; } /* Wizard Steps Indicators Ò€” SNES dark crystal style */ .wizard-step-indicator { flex: 1; text-align: center !important; padding: 7px 4px !important; border: 2px solid #2a2040 !important; background: linear-gradient(to bottom, #13102a, #0a0615) !important; /* Fixed, brighter β€” this background is always the same dark gradient regardless of theme, but the original #5a5470 was too dim against it even on its own terms (not a theme-flip bug, just low contrast from the start). */ color: #9490ac !important; border-radius: 3px !important; font-family: var(--font-pixel) !important; font-size: 12px !important; font-weight: 400 !important; text-shadow: none !important; box-shadow: inset 0 0 8px rgba(0,0,0,0.6) !important; transition: all 0.15s ease !important; cursor: pointer !important; letter-spacing: 0px !important; } .wizard-step-indicator.active { border: 2px solid var(--snes-gold) !important; background: linear-gradient(to bottom, #1e1640, #15102a) !important; /* Fixed, not var(--snes-gold) β€” same fixed-dark-background reasoning as the base state above; the token goes muted/dark in light theme (meant for parchment backgrounds), which nearly disappears here. */ color: #e5b73b !important; font-weight: 400 !important; text-shadow: 0 0 8px rgba(229,183,59,0.6) !important; box-shadow: 0 0 0 1px rgba(229,183,59,0.3), inset 0 0 12px rgba(229, 183, 59, 0.15) !important; } .wizard-step-indicator.completed { border-color: var(--snes-gold-dim) !important; color: #c99a3a !important; } .wizard-step-indicator:hover:not(.active) { border-color: var(--snes-gold-dim) !important; color: #c5c0cc !important; } /* This whole crystal-tab look is a fixed near-black gradient by design (see the comment above) β€” fine sitting on the dark theme's own dark window, but it clashes visually and loses contrast once the window around it turns into light parchment. Give it a light- theme-specific warm parchment treatment instead, same palette as the rest of this session's light-theme fixes. */ :root[data-theme="light"] .wizard-step-indicator { background: rgba(124, 94, 67, 0.14) !important; border-color: rgba(124, 94, 67, 0.35) !important; color: #7c5e43 !important; box-shadow: none !important; } :root[data-theme="light"] .wizard-step-indicator.active { background: rgba(122, 28, 28, 0.10) !important; border-color: #7a1c1c !important; color: #7a1c1c !important; text-shadow: none !important; } :root[data-theme="light"] .wizard-step-indicator.completed { border-color: #8c6a46 !important; color: #8c6a46 !important; } :root[data-theme="light"] .wizard-step-indicator:hover:not(.active) { border-color: #7a1c1c !important; color: #5c4028 !important; } /* Classic JRPG Blue Dialogue Window (Suikoden/Golden Sun style) */ #dialogue-window { background: linear-gradient(180deg, #2a4a8f 0%, #16295c 100%) !important; color: #ffffff !important; border: 4px solid #7fb8f0 !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), inset 0 0 0 2px #16295c, inset 0 0 24px rgba(127, 184, 240, 0.15) !important; border-radius: 14px !important; text-shadow: none !important; padding: 12px 18px !important; } #dialogue-window .snes-window-header { color: #ffffff !important; border-bottom: none !important; text-shadow: none !important; font-family: var(--font-pixel) !important; font-weight: normal !important; font-size: 16px !important; letter-spacing: 0.5px !important; } /* Decorative close button β€” clicks bubble up to #dialogue-window's own click handler (main.js), which already dismisses the box, so no new JS is needed for it to work. */ .dialogue-close-btn { position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; border-radius: 50%; background: #c0392b; border: 2px solid #ffffff; color: #ffffff; font-size: 15px; font-weight: bold; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); pointer-events: none; /* purely decorative β€” the whole window is already clickable */ } #dialogue-portrait-container { border: 3px solid #c0392b !important; background-color: #ffffff !important; box-shadow: inset 0 0 0 2px #ffffff, 0 2px 6px rgba(0, 0, 0, 0.3) !important; border-radius: 8px !important; } #dialogue-text-box { color: #ffffff !important; font-family: var(--font-retro-narrow) !important; font-size: 28px !important; line-height: 1.35 !important; text-shadow: none !important; } .dialogue-indicator { color: #ffffff !important; font-size: 18px !important; text-shadow: none !important; } /* Obsidian Slate Context Menus */ .npc-options-window.snes-window { background: linear-gradient(135deg, var(--window-bg-1) 0%, var(--window-bg-2) 100%) !important; border: 2px solid var(--snes-gold) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95), 0 0 15px rgba(229, 183, 59, 0.3), inset 0 0 12px rgba(229, 183, 59, 0.15) !important; border-radius: 4px !important; padding: 8px !important; } .npc-options-window .snes-window-header { color: var(--snes-gold) !important; font-family: var(--font-fantasy-header) !important; font-size: 13px !important; border-bottom: 1px dashed var(--snes-gold-dim) !important; margin-bottom: 6px !important; padding-bottom: 4px !important; text-shadow: 1px 1px 2px #000 !important; } .npc-option-item { font-family: var(--font-fantasy-header) !important; font-size: 13px !important; color: var(--snes-white) !important; padding: 8px 12px !important; border-bottom: 1px solid rgba(229, 183, 59, 0.15) !important; transition: all 0.15s ease !important; text-shadow: 1px 1px 2px #000 !important; } .npc-option-item:hover { background: linear-gradient(90deg, rgba(43, 108, 176, 0.3) 0%, rgba(43, 108, 176, 0) 100%) !important; color: #ffffff !important; border-left: 3px solid var(--snes-cyan) !important; padding-left: 14px !important; } #npc-menu-cancel-btn, #object-menu-cancel-btn { color: var(--snes-grey) !important; font-family: var(--font-fantasy-body) !important; } #npc-menu-cancel-btn:hover, #object-menu-cancel-btn:hover { color: #ffffff !important; background: none !important; border-left: none !important; padding-left: 12px !important; } /* Suggestion Chips Style Polish (Handwritten Tags / Small Parchment Scrolls) */ .suggest-chip { background: #ecdcb9 !important; border: 1px solid #8c6a46 !important; color: #2b1b10 !important; font-family: var(--font-fantasy-body) !important; font-size: 13px !important; padding: 5px 10px !important; border-radius: 4px !important; cursor: pointer !important; text-shadow: none !important; box-shadow: 1px 2px 4px rgba(0,0,0,0.12) !important; transition: all 0.15s ease !important; } .suggest-chip:hover { background: #faf6ee !important; border-color: #7a1c1c !important; color: #7a1c1c !important; box-shadow: 2px 3px 6px rgba(0,0,0,0.2) !important; } /* Select Form Dropdown Redesign */ .snes-select { background-color: var(--window-bg-2) !important; border: 1.5px solid var(--snes-gold-dim) !important; color: var(--snes-white) !important; font-family: var(--font-fantasy-body) !important; font-size: 13.5px !important; padding: 6px 12px !important; border-radius: 4px !important; transition: border-color 0.15s, box-shadow 0.15s !important; } .snes-select:focus { border-color: var(--snes-gold) !important; box-shadow: 0 0 8px rgba(229, 183, 59, 0.45) !important; } /* The generic .snes-select rule above forces font-size:13.5px + padding:6px 12px via !important, which fought this select's own inline height:22px β€” 12px of vertical padding barely left room for a 13.5px line, squeezing the option text down to near-invisible and throwing off vertical alignment against its sibling input. An ID selector's specificity beats the plain-class rule even though both use !important. */ #sheet-currency-type-select { font-size: 12px !important; padding: 2px 4px !important; height: 22px !important; box-sizing: border-box !important; } /* Top Navbar (Wrought Iron & Gold Inlay) */ #top-navbar { background: linear-gradient(to bottom, var(--topbar-bg-1) 0%, var(--topbar-bg-2) 100%) !important; border-bottom: 2px solid var(--snes-gold) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65) !important; } #logo { font-family: var(--font-fantasy-header) !important; font-weight: 800 !important; letter-spacing: 1px !important; } /* Sheet Sections Title (Improve sheet headers readability) */ .sheet-section-title { font-family: var(--font-fantasy-header) !important; font-size: 13px !important; color: var(--snes-gold) !important; border-bottom: 1px solid var(--snes-gold-dim) !important; padding-bottom: 4px !important; margin-bottom: 6px !important; letter-spacing: 0.5px !important; } /* Light-theme sub-element overrides for the character sheet (replaces dark/minecraft boxes with warm paper/leather). Scoped under [data-theme="light"] #character-sheet-modal so dark theme is untouched β€” see the modal-shell rules near the top of this file for the same pattern. */ :root[data-theme="light"] #character-sheet-modal .ability-card-5e, :root[data-theme="light"] #character-sheet-modal .combat-stat-card, :root[data-theme="light"] #character-sheet-modal .sheet-section-box { background: #ecdcb9 !important; border: 2px solid #8c6a46 !important; color: #2b1b10 !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important; border-radius: 4px !important; text-shadow: none !important; } :root[data-theme="light"] #character-sheet-modal .ability-card-5e span, :root[data-theme="light"] #character-sheet-modal .combat-stat-card label, :root[data-theme="light"] #character-sheet-modal .sheet-section-box div, :root[data-theme="light"] #character-sheet-modal .sheet-section-box span, :root[data-theme="light"] #character-sheet-modal .sheet-section-box label, :root[data-theme="light"] #character-sheet-modal .sheet-section-box p { color: #5c4028 !important; text-shadow: none !important; } /* These three sub-panels weren't covered by the block above β€” same fixed rgba(0,0,0,X) background, but a class of their own (or none at all, for the combat-stat/passive boxes) rather than .sheet-section-box, so they were still showing the pre-fix muddy look reported live. */ :root[data-theme="light"] #character-sheet-modal .sheet-5e-header { background: #ecdcb9 !important; border-color: #8c6a46 !important; } :root[data-theme="light"] #character-sheet-modal .sheet-5e-header .sheet-header-field span { color: #5c4028 !important; } :root[data-theme="light"] #character-sheet-modal #sheet-race-class, :root[data-theme="light"] #character-sheet-modal #sheet-background, :root[data-theme="light"] #character-sheet-modal #sheet-alignment, :root[data-theme="light"] #character-sheet-modal #sheet-xp { color: #2b1b10 !important; } :root[data-theme="light"] #character-sheet-modal .sheet-combat-stat-box { background: #ecdcb9 !important; border-color: #8c6a46 !important; } :root[data-theme="light"] #character-sheet-modal #sheet-speed { color: #2b1b10 !important; } :root[data-theme="light"] #character-sheet-modal .sheet-passive-box { background: #ecdcb9 !important; border-color: #0e6ba8 !important; color: #5c4028 !important; } :root[data-theme="light"] #character-sheet-modal #sheet-passive-perception { color: #0e6ba8 !important; } :root[data-theme="light"] #character-sheet-modal span.ability-mod { /* .ability-mod has its OWN rgba(0,0,0,0.6) background chip, separate from the .ability-card-5e card around it β€” only the text color was fixed for light theme before, leaving fixed dark-red text sitting on a still-dark chip (dark-on-dark). Same #faf6ee treatment as .ability-score right below it, for a matching pair look. Selector needs the "span" element type to out-specificity the earlier generic ".ability-card-5e span { color: #5c4028 }" rule, which otherwise still wins here. */ background: #faf6ee !important; color: #7a1c1c !important; } :root[data-theme="light"] #character-sheet-modal .ability-score { background: #faf6ee !important; color: #2b1b10 !important; border: 1px solid #8c6a46 !important; box-shadow: none !important; } :root[data-theme="light"] #character-sheet-modal .sheet-roll-btn { background: linear-gradient(to bottom, #faf6ee, #ecdcb9) !important; border: 1px solid #8c6a46 !important; color: #2b1b10 !important; text-shadow: none !important; box-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important; } :root[data-theme="light"] #character-sheet-modal .sheet-roll-btn:hover { background: #faf6ee !important; border-color: #7a1c1c !important; color: #7a1c1c !important; } :root[data-theme="light"] #character-sheet-modal .sheet-roll-btn.readonly-info:hover { background: linear-gradient(to bottom, #faf6ee, #ecdcb9) !important; border-color: #8c6a46 !important; color: #2b1b10 !important; } /* Currency row colors were tuned for the dark theme's own dark modal background β€” silver and platinum especially (#c0c0c0/#a8b4bd) are too pale to read against the light parchment modal. Gold uses var(--snes-gold), already theme-aware, so it's untouched. */ :root[data-theme="light"] #sheet-copper-display { color: #8b5a2b !important; } :root[data-theme="light"] #sheet-silver-display { color: #5c5c5c !important; } :root[data-theme="light"] #sheet-electrum-display { color: #8a6a1c !important; } :root[data-theme="light"] #sheet-platinum-display { color: #5a6570 !important; } :root[data-theme="light"] #character-sheet-modal .sheet-saves-entry, :root[data-theme="light"] #character-sheet-modal .sheet-skills-entry { color: #2b1b10 !important; } :root[data-theme="light"] #character-sheet-modal .sheet-saves-entry.proficient, :root[data-theme="light"] #character-sheet-modal .sheet-skills-entry.proficient { color: #7a1c1c !important; font-weight: bold !important; } :root[data-theme="light"] #character-sheet-modal .sheet-section-title { color: #7a1c1c !important; border-bottom: 2px solid #8c6a46 !important; } :root[data-theme="light"] #character-sheet-modal .sheet-main-stats { background-color: #dfcfad !important; border: 1px solid #8c6a46 !important; } :root[data-theme="light"] #character-sheet-modal .sheet-stat-bubble label { color: #5c4028 !important; } :root[data-theme="light"] #character-sheet-modal .sheet-stat-bubble div { color: #7a1c1c !important; } :root[data-theme="light"] #character-sheet-modal .minecraft-inventory-container { background-color: #f7f1e1 !important; border: 4px solid #7c5e43 !important; color: #2b1b10 !important; text-shadow: none !important; box-shadow: inset 0 0 15px rgba(139, 90, 43, 0.2) !important; } :root[data-theme="light"] #character-sheet-modal .nes-equip-panel { background-color: #faf6ee !important; border: 4px double #7c5e43 !important; box-shadow: inset 0 0 8px rgba(0,0,0,0.05) !important; } :root[data-theme="light"] #character-sheet-modal .nes-equip-title { color: #7a1c1c !important; text-shadow: none !important; font-family: var(--font-fantasy-header) !important; font-weight: bold !important; } :root[data-theme="light"] #character-sheet-modal .nes-equip-grid { background-color: #8c6a46 !important; border: 3px solid #8c6a46 !important; } :root[data-theme="light"] #character-sheet-modal .nes-equip-grid .paper-doll-slot, :root[data-theme="light"] #character-sheet-modal .nes-equip-grid .nes-equip-cell { background-color: #dfcfad !important; color: #2b1b10 !important; } :root[data-theme="light"] #character-sheet-modal .nes-equip-grid .paper-doll-slot:hover, :root[data-theme="light"] #character-sheet-modal .nes-equip-grid .nes-equip-cell:hover { background-color: #faf6ee !important; } :root[data-theme="light"] #character-sheet-modal .nes-equip-grid .paper-doll-slot.selected { outline: 2px solid #7a1c1c !important; box-shadow: 0 0 8px #7a1c1c !important; } :root[data-theme="light"] #character-sheet-modal .nes-equip-grid .paper-doll-slot label { color: #7c5e43 !important; text-shadow: none !important; } :root[data-theme="light"] #character-sheet-modal .mc-inventory-grid, :root[data-theme="light"] #character-sheet-modal .mc-hotbar-grid { background-color: #8c6a46 !important; border: 2px solid #8c6a46 !important; } :root[data-theme="light"] #character-sheet-modal .mc-slot { background-color: #dfcfad !important; border: 2px solid #8c6a46 !important; border-right-color: #faf6ee !important; border-bottom-color: #faf6ee !important; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.05) !important; } :root[data-theme="light"] #character-sheet-modal .mc-slot:hover { background-color: #faf6ee !important; } :root[data-theme="light"] #character-sheet-modal .mc-slot.selected { outline: 2px solid #7a1c1c !important; box-shadow: 0 0 8px #7a1c1c !important; } :root[data-theme="light"] #character-sheet-modal .mc-slot.mc-trash { background-color: #e53e3e !important; border-color: #9b2c3a !important; } /* The base .mc-slot light-theme override above flattens every tile's border to the same tan β€” restore the rarity-colored border on top of it for filled backpack tiles. */ :root[data-theme="light"] #character-sheet-modal .mc-slot-rarity-common { border-color: #6b6b6b !important; } :root[data-theme="light"] #character-sheet-modal .mc-slot-rarity-uncommon { border-color: #2f8f4a !important; } :root[data-theme="light"] #character-sheet-modal .mc-slot-rarity-rare { border-color: #1f7ab0 !important; } :root[data-theme="light"] #character-sheet-modal .mc-slot-rarity-very_rare { border-color: #7c5cd6 !important; } :root[data-theme="light"] #character-sheet-modal .mc-slot-rarity-legendary { border-color: #b8860b !important; } :root[data-theme="light"] #character-sheet-modal .inventory-grid-header { color: #7a1c1c !important; border-bottom: 2px solid #8c6a46 !important; text-shadow: none !important; } /* ========================================================================== CHARACTER CREATOR MODAL SCALE & LEGIBILITY ENHANCEMENTS ========================================================================== */ #character-creator-screen .overlay-content { max-width: 1280px !important; width: 92% !important; height: 88vh !important; max-height: 88vh !important; overflow-y: auto !important; padding: 24px !important; } #character-creator-screen .snes-window-header { font-size: 19px !important; } #character-creator-screen .wizard-progress-bar-container { margin-bottom: 20px !important; padding: 10px !important; } #character-creator-screen .wizard-progress-bar-steps { font-size: 13.5px !important; gap: 8px !important; } #character-creator-screen .wizard-step-indicator { font-size: 13.5px !important; padding: 10px 8px !important; } #character-creator-screen label { font-size: 17px !important; } #character-creator-screen .snes-input, #character-creator-screen .snes-select { font-size: 19px !important; padding: 14px 18px !important; } #character-creator-screen textarea.snes-input { font-size: 17px !important; height: 140px !important; } #character-creator-screen .stat-val { font-size: 26px !important; } #character-creator-screen .stat-box label { font-size: 14px !important; } #character-creator-screen .suggest-chip { font-size: 14px !important; padding: 7px 13px !important; } #character-creator-screen p { font-size: 15px !important; } #character-creator-screen .creator-skill { transform: scale(1.2) !important; margin-right: 6px !important; } #character-creator-screen .creator-form-section label { font-size: 16px !important; } #character-creator-screen h2 { font-size: 20px !important; } #character-creator-screen h3 { font-size: 17px !important; } #character-creator-screen .snes-btn { font-size: 15px !important; padding: 12px 24px !important; } /* Spread the form out a bit more than the shared .form-group/.form-row defaults β€” combined with the bigger outer gap on each step's wrapper div (index.html), this is what actually spreads the fields down the pane instead of leaving them clustered at the top with a big empty area below. */ #character-creator-screen .form-group { gap: 10px !important; } #character-creator-screen .form-row { gap: 24px !important; } #character-creator-screen .preview-canvas-container { width: 160px !important; height: 220px !important; } #character-creator-screen #creator-preview-canvas { width: 128px !important; height: 192px !important; } #character-creator-screen #creator-summary-canvas { width: 110px !important; height: 165px !important; } #character-creator-screen div[style*="120px 1fr"] { grid-template-columns: 160px 1fr !important; } #character-creator-screen div[style*="height: 160px"] { height: 210px !important; } #character-creator-screen #creator-step-5 div[style*="font-size: 13px"] { font-size: 13.5px !important; line-height: 1.6 !important; } #character-creator-screen #creator-step-5 strong { font-size: 13.5px !important; } #character-creator-screen #creator-step-5 span { font-size: 13.5px !important; } #character-creator-screen .stats-editor { gap: 12px !important; } #character-creator-screen .stat-box { padding: 10px !important; } /* Skill checkboxes' labels have no explicit color in the markup, so they were inheriting the theme's regular ink color (dark in light theme, meant for the parchment page background) against this box's fixed rgba(0,0,0,0.35) background β€” nearly unreadable. Fixed, not a theme token, for the same reason as elsewhere. */ #creator-skills-grid label { color: #c5c0cc !important; } /* Same fixed-dark-background-in-a-light-window issue as elsewhere β€” the grid's own rgba(0,0,0,0.35) inline background turns muddy gray-brown on the light parchment window, and the light-gray label color above (correct for a genuinely dark box) loses contrast against it. Both need a light-theme-specific swap. */ :root[data-theme="light"] #creator-skills-grid { background: rgba(124, 94, 67, 0.14) !important; border-color: rgba(124, 94, 67, 0.35) !important; } :root[data-theme="light"] #creator-skills-grid label { color: #5c4028 !important; } /* Character creator's left sprite-preview column: same fixed-dark-on-light-window issue. The name/class/species lines already use theme tokens (var(--snes-gold) etc.), which correctly go dark/muted in light theme β€” they were only unreadable because the boxes behind them stayed muddy gray-brown instead of turning genuinely light. Fixing just the backgrounds is enough; the token-based text already does the right thing once it does. */ :root[data-theme="light"] #creator-preview-sidebar { background: rgba(124, 94, 67, 0.10) !important; border-right-color: rgba(124, 94, 67, 0.3) !important; } :root[data-theme="light"] #creator-preview-summary { background: rgba(124, 94, 67, 0.16) !important; border-color: rgba(124, 94, 67, 0.4) !important; } /* ========================================================================== CHARACTER SHEET MODAL Ò€” SNES DARK THEME (replaces parchment overrides) ========================================================================== */ #character-sheet-modal .overlay-content { max-width: 1400px !important; width: 95% !important; height: 88vh !important; min-height: 840px !important; max-height: 94vh !important; padding: 20px !important; display: flex !important; flex-direction: column !important; } /* Sheet layout */ /* Sizing and Layout expansion to eliminate internal scrolls */ #character-sheet-modal .tab-pane.active { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; height: calc(100% - 60px) !important; } #character-sheet-modal .sheet-5e-grid { display: grid !important; grid-template-columns: 280px 280px 1fr !important; gap: 16px !important; flex-grow: 1 !important; height: calc(100% - 50px) !important; } #character-sheet-modal .sheet-col { display: flex !important; flex-direction: column !important; height: 100% !important; justify-content: flex-start !important; } /* Expand the lists inside containers to prevent scrolls */ #character-sheet-modal #sheet-skills-list-container { max-height: 500px !important; flex-grow: 1 !important; } #character-sheet-modal .sheet-section-box:has(#sheet-skills-list-container) { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; } #character-sheet-modal #sheet-quick-attacks-container { max-height: 280px !important; flex-grow: 1 !important; } #character-sheet-modal .sheet-section-box:has(#sheet-quick-attacks-container) { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; } #character-sheet-modal .sheet-section-box:has(#sheet-features-list) { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; max-height: 320px !important; /* Force override of the inline max-height: 90px */ } #character-sheet-modal #sheet-features-list { max-height: none !important; flex-grow: 1 !important; } #character-sheet-modal .sheet-section-box:has(#sheet-bio-description) { max-height: 120px !important; } /* Ensure HP adjustment input and buttons align cleanly without wrapping */ #character-sheet-modal #sheet-hp-adjust-val { min-width: 60px !important; width: 70px !important; flex-grow: 1 !important; font-size: 13px !important; } #character-sheet-modal #sheet-hp-heal-btn, #character-sheet-modal #sheet-hp-damage-btn { padding: 4px 10px !important; font-size: 13px !important; height: 28px !important; line-height: 1 !important; min-width: 65px !important; text-align: center !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* ── Inventory tab: fill the full modal height ────────────────────────────── */ /* Container stretches to fill the active tab pane. Left column is wider than before β€” the paperdoll is now 3 columns (worn armor | avatar | weapon/rings) instead of a plain 3Γ—4 grid. */ #character-sheet-modal #tab-inventory .minecraft-inventory-container { height: 100% !important; grid-auto-rows: 1fr !important; align-items: stretch !important; grid-template-columns: 380px 1fr !important; box-sizing: border-box; overflow: hidden; } /* Equipment panel: content-height, top-aligned */ #character-sheet-modal #tab-inventory .nes-equip-panel { width: 380px !important; height: auto !important; min-height: 0 !important; align-self: start !important; align-items: center !important; } /* Equipment grid: left/right slot columns flank the centered avatar column; 6 rows tall (left column has 6 slots, right has 5). Cells bumped to 92Γ—92 (from 80Γ—80) so equipped items read clearly at a glance. */ #character-sheet-modal #tab-inventory .nes-equip-grid { grid-template-columns: 92px 150px 92px !important; grid-template-rows: repeat(6, 92px) !important; flex-shrink: 0 !important; margin: 0 auto !important; align-self: flex-start !important; } #character-sheet-modal #tab-inventory .nes-equip-grid .paper-doll-slot { width: 92px !important; height: 92px !important; } /* Inventory right column stretches */ #character-sheet-modal #tab-inventory .inventory-grid-container { height: 100% !important; min-height: 360px; overflow: hidden; } /* Item list grows to fill remaining column space and scrolls */ #character-sheet-modal #tab-inventory #mc-inventory-list { flex-grow: 1 !important; max-height: none !important; overflow-y: auto !important; min-height: 0 !important; } /* ── ASPECTO tab (LPC appearance form): the compact 12px picker grid leaves a lot of unused vertical space in the modal β€” bump text/control size throughout. Every row sets its own inline font-size/padding, so this targets them via an attribute selector (matches the literal inline style substring) rather than editing each of the ~20 picker rows individually. ── */ #tab-appearance [style*="font-size:12px"] { font-size: 15px !important; } #tab-appearance select[style*="padding:2px"] { padding: 6px 8px !important; } #tab-appearance label { margin-bottom: 4px !important; } #tab-appearance #lpc-appearance-title { font-size: 19px !important; margin-bottom: 4px; } /* A little extra breathing room between picker rows now that the text is bigger. */ #tab-appearance [style*="display:flex;gap:6px"], #tab-appearance [style*="display:grid;grid-template-columns:1fr 1fr;gap:6px"] { gap: 10px !important; margin-bottom: 4px; } /* Initiative Tracker styles */ .initiative-combatant { display: flex; flex-direction: column; align-items: stretch; padding: 6px 8px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; margin-bottom: 4px; font-size: 13px; font-family: var(--font-pixel); transition: all 0.2s ease; position: relative; } .initiative-combatant-top-row { display: flex; justify-content: space-between; align-items: center; } .initiative-status-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-left: 4px; } .initiative-condition-chips { display: flex; flex-wrap: wrap; gap: 3px; } .initiative-condition-chip { font-size: 12px; padding: 1px 5px; border-radius: 3px; background: rgba(239, 68, 68, 0.18); border: 1px solid var(--snes-red); color: var(--snes-red); text-transform: uppercase; letter-spacing: 0.3px; } .initiative-combatant.active-turn { border-color: var(--snes-gold); background: rgba(245, 203, 92, 0.15); box-shadow: 0 0 8px rgba(245, 203, 92, 0.4); } .initiative-pointer { color: var(--snes-gold); font-size: 13px; position: absolute; left: -14px; animation: pointer-bounce 0.5s infinite alternate ease-in-out; } @keyframes pointer-bounce { from { transform: translateX(0); } to { transform: translateX(-4px); } } .initiative-remove-btn { background: none; border: none; color: var(--snes-red); cursor: pointer; font-size: 13px; padding: 0 4px; } .initiative-remove-btn:hover { color: var(--snes-white); text-shadow: 0 0 2px var(--snes-red); } .initiative-badge { font-size: 13px; /* Slightly larger badge font */ padding: 2px 4px; border-radius: 2px; text-transform: uppercase; font-weight: bold; } .initiative-badge.npc { background-color: var(--snes-purple); color: white; } .initiative-badge.player { background-color: var(--snes-blue); color: white; } #map-resize-modal input[type="number"] { width: 100%; } /* ========================================================================== UI/UX IMPROVEMENTS Ò€” CHIPTUNE VTT PREMIUM POLISH ========================================================================== */ /* ---- 1. GLOBAL CSS TOOLTIP SYSTEM ---- */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(0.85); background: linear-gradient(135deg, var(--window-bg-1) 0%, var(--window-bg-2) 100%); color: var(--snes-white); border: 1.5px solid var(--snes-gold-dim); border-radius: 4px; padding: 5px 10px; font-family: var(--font-fantasy-header); font-size: 12px; white-space: nowrap; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 8px rgba(229, 183, 59, 0.25); letter-spacing: 0.3px; /* Otherwise inherits the anchor button's own text-shadow (tuned for the button's background, not the tooltip's), which reads as a muddy blur here. */ text-shadow: none !important; } [data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) scale(1); } /* Tooltips default to appearing above the anchor, which clips off-screen for anything in the top navbar (there's no room above it). Flip those specifically to appear below. */ #top-navbar [data-tooltip]::after { bottom: auto; top: calc(100% + 8px); } /* The palette tab rail sits flush against the panel's left edge β€” a centered tooltip would clip off-screen to the left. Anchor it to the button's left edge instead. */ .palette-tabs [data-tooltip]::after { left: 0; transform: scale(0.85); } .palette-tabs [data-tooltip]:hover::after { transform: scale(1); } /* ---- 2. LOBBY SCREEN ENHANCEMENTS ---- */ /* Floating particle orbs */ #lobby-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; } .lobby-orb { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(229,183,59,0.35) 0%, transparent 70%); animation: orb-float linear infinite; pointer-events: none; } @keyframes orb-float { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 0.6; } 100% { transform: translateY(-10vh) scale(1.2); opacity: 0; } } /* Lobby panel fade-in */ #lobby-screen .snes-window { animation: lobby-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes lobby-appear { 0% { opacity: 0; transform: translateY(20px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Gold shimmer on lobby title */ #lobby-title-shimmer { background: linear-gradient(90deg, var(--snes-gold) 0%, #fff9e0 45%, var(--snes-gold) 55%, var(--snes-gold-dim) 100%); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 3s linear infinite; display: inline-block; } @keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } /* Pulsing gold border on lobby panel */ #lobby-screen .snes-window.gold-border { animation: lobby-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, lobby-pulse-border 3s ease-in-out 0.5s infinite; } @keyframes lobby-pulse-border { 0%, 100% { box-shadow: 0 16px 48px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 30px rgba(229, 183, 59, 0.2); } 50% { box-shadow: 0 16px 48px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 40px rgba(229, 183, 59, 0.35), 0 0 20px rgba(229, 183, 59, 0.15); } } /* Role buttons improved selected state β€” only the selected role is bright, the other two stay dim so the selected one actually reads as the chosen one at a glance. :not(.role-btn-selected) instead of relying on source order/specificity against the rule below, so which one wins never depends on where either rule sits in the file. */ .lobby-role-btns .snes-btn:not(.role-btn-selected) { color: #7a6339 !important; border-color: #6b4515 !important; } .role-btn-selected { border-color: var(--snes-gold) !important; box-shadow: 0 0 12px rgba(229, 183, 59, 0.5), 0 4px 0 #08060c !important; /* Fixed, not var(--snes-gold) β€” .snes-btn's background is always the same fixed dark gradient regardless of theme, but the token flips to a muted dark brown in light theme (meant for parchment backgrounds), making the SELECTED role look duller than the unselected ones instead of brighter. */ color: #e5b73b !important; } /* ---- 3. TOP NAVBAR IMPROVEMENTS ---- */ /* Toolbar group separator */ .toolbar-divider { display: inline-block; width: 1px; height: 22px; background: linear-gradient(to bottom, transparent, var(--snes-gold-dim), transparent); margin: 0 6px; opacity: 0.6; flex-shrink: 0; align-self: center; } /* Logo badge improvement */ #logo { gap: 10px; } #logo #room-code-display { font-family: var(--font-fantasy-header) !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.5px; background: rgba(229, 183, 59, 0.08); border: 1px solid rgba(229, 183, 59, 0.3); border-radius: 4px; padding: 2px 10px; } /* Connection status dot */ #connection-dot { width: 9px; height: 9px; border-radius: 50%; background-color: var(--snes-green); display: inline-block; box-shadow: 0 0 6px var(--snes-green); animation: dot-pulse 2s ease-in-out infinite; flex-shrink: 0; } @keyframes dot-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--snes-green); } 50% { opacity: 0.6; box-shadow: 0 0 12px var(--snes-green); } } /* Navbar button uniform height */ #lobby-controls .snes-btn { height: 32px; display: inline-flex; align-items: center; justify-content: center; padding-left: 10px; padding-right: 10px; white-space: nowrap; } #top-navbar #volume-control-container { display: flex; align-items: center; gap: 6px; } /* ---- 4. CANVAS BACKGROUND PATTERN ---- */ #game-container { background-color: var(--game-container-bg); background-image: radial-gradient(circle, rgba(229, 183, 59, 0.04) 1px, transparent 1px); background-size: 32px 32px; } /* Subtle vignette over the canvas area */ #game-container::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%); pointer-events: none; z-index: 1; } #game-canvas { position: relative; z-index: 2; } /* ---- 5. SIDEBAR VISUAL HIERARCHY ---- */ /* Players list header with icon */ #sidebar .snes-window-header { font-size: 12px !important; letter-spacing: 1px; text-transform: uppercase; } /* Online user enhanced indicator */ .user-mic-status.online { background-color: var(--snes-green); animation: dot-pulse 2s ease-in-out infinite; } .user-mic-status.offline { background-color: #3a3a44; box-shadow: none; } /* Per-player connection latency badge */ .user-latency { font-size: 12px; font-family: inherit; letter-spacing: 0.5px; padding: 1px 4px; border-radius: 3px; background: rgba(0,0,0,0.25); font-variant-numeric: tabular-nums; } .user-latency.good { color: var(--snes-green); } .user-latency.warn { color: var(--snes-gold); } .user-latency.bad { color: var(--snes-red); } .user-latency.unknown { color: var(--snes-grey); } /* Player stats bar under user item */ .user-hp-bar-container { width: 100%; height: 3px; background: rgba(0,0,0,0.4); border-radius: 2px; margin-top: 3px; overflow: hidden; } .user-hp-bar { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--snes-green), #4ade80); transition: width 0.4s ease; } .user-hp-bar.low { background: linear-gradient(90deg, #ef4444, #f87171); } .user-hp-bar.critical { background: linear-gradient(90deg, #7f1d1d, #ef4444); animation: bar-critical-pulse 0.8s ease-in-out infinite; } @keyframes bar-critical-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* User item hover with subtle scale */ .user-item { transition: background-color 0.15s, border-color 0.15s, transform 0.1s; } .user-item:hover { transform: translateX(2px); } /* Initiative inactive state - smaller and subtle */ #initiative-inactive-view > div:first-child { font-size: 12px !important; font-family: var(--font-fantasy-body) !important; color: rgba(197, 192, 204, 0.5) !important; font-style: italic; text-align: center; padding: 4px 0; } /* Active turn combat pulse */ .initiative-combatant.active-turn { animation: turn-glow 1.5s ease-in-out infinite; } @keyframes turn-glow { 0%, 100% { box-shadow: 0 0 8px rgba(245, 203, 92, 0.4), inset 0 0 0 1px rgba(245, 203, 92, 0.2); } 50% { box-shadow: 0 0 18px rgba(245, 203, 92, 0.7), inset 0 0 0 1px rgba(245, 203, 92, 0.4); } } /* Chat section enhancements */ .chat-entry.system { font-style: italic; color: rgba(197, 192, 204, 0.6) !important; font-size: 12px !important; padding: 2px 4px; border-left: 2px solid rgba(255,255,255,0.1); margin-left: 2px; } .chat-entry.system::before { content: 'βš™ '; font-style: normal; opacity: 0.5; } /* Chat new message flash */ @keyframes chat-flash { 0% { background: rgba(229, 183, 59, 0.15); } 100% { background: transparent; } } .chat-entry.new { animation: chat-flash 1.2s ease-out forwards; } /* Chat send button improved */ #chat-send-btn { font-size: 16px !important; padding: 6px 10px !important; min-width: 36px; } /* Dice buttons improved hover with shake effect */ .dice-btn { font-family: var(--font-pixel) !important; transition: transform 0.1s, border-color 0.15s, background-color 0.15s, box-shadow 0.15s !important; border-radius: 4px !important; } .dice-btn:hover { border-color: var(--snes-gold) !important; background-color: #3b3b47 !important; transform: translateY(-2px) scale(1.08) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.4), 0 0 8px rgba(229, 183, 59, 0.3) !important; color: var(--snes-gold) !important; } .dice-btn:active { animation: dice-shake 0.2s ease-in-out; transform: scale(0.95) !important; } @keyframes dice-shake { 0%, 100% { transform: rotate(0deg) scale(0.95); } 25% { transform: rotate(-8deg) scale(0.95); } 75% { transform: rotate(8deg) scale(0.95); } } /* Section headers uniform style */ .sidebar-section .snes-window-header { position: relative; padding-bottom: 4px; margin-bottom: 8px; } .sidebar-section .snes-window-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, var(--snes-gold-dim), transparent); } /* ---- 6. EDITOR PANEL ---- */ /* Ò”€ Toolbar row Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€ */ .editor-toolbar { display: flex; align-items: center; gap: 8px; width: 100%; flex-shrink: 0; } /* Left cluster: mode/tool buttons */ .editor-tool-group { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } /* Right cluster: global controls */ .editor-ctrl-group { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; } /* Mode tool buttons */ .editor-tool-btn { padding: 4px 9px !important; font-size: 12px !important; white-space: nowrap; } /* Active (current mode) Ò€” gold glow */ .editor-tool-btn.active-tool { background: linear-gradient(to bottom, #1f3ca6 0%, #0f1f5c 100%) !important; border-color: var(--snes-gold) !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(229, 183, 59, 0.5), 0 4px 0 #08060c !important; } /* Erase toggle, pressed state β€” brighter red glow instead of the blue "active mode" look, since this is a modifier within Pincel, not a mode of its own. */ #editor-erase-toggle-btn.active-erase { background: linear-gradient(to bottom, #a83030 0%, #5c1010 100%) !important; border-color: #fff !important; color: #fff !important; box-shadow: 0 0 10px rgba(232, 64, 64, 0.6), 0 4px 0 #08060c !important; } /* NPC template card β€” selected for placement */ .npc-template-card.active-tool { border-color: var(--snes-gold) !important; box-shadow: 0 0 8px rgba(229, 183, 59, 0.6) !important; } .npc-template-card:hover { border-color: var(--snes-cyan); cursor: pointer; } /* Global action buttons */ .editor-ctrl-btn { padding: 4px 9px !important; font-size: 12px !important; white-space: nowrap; } /* Stack fog + darkness toggles vertically to save horizontal space */ .editor-fog-toggle-stack { display: flex; flex-direction: column; gap: 2px; } /* Fog-master toggle label */ .editor-fog-master-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--snes-white); font-family: var(--font-pixel); white-space: nowrap; cursor: pointer; user-select: none; } /* Vertical rule between toolbar clusters */ .editor-toolbar .toolbar-divider { display: inline-block; width: 1px; height: 24px; background: rgba(255, 255, 255, 0.12); flex-shrink: 0; } /* Ò”€ Palette section (PINCEL mode) Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€Ò”€ */ #editor-palette-section { display: flex; flex-direction: column; gap: 6px; } /* Palette header: tabs + optional layer selector */ .editor-palette-header { display: flex; align-items: center; justify-content: flex-start; gap: 16px; } /* Tabs + tile grid side by side, tabs as a vertical rail on the left */ .palette-body { display: flex; gap: 8px; /* flex-start, not stretch: the picker's height is driven by JS to match the tabs rail's own natural height (see applyLayoutHeight in editor.js). With stretch (the default), the rail's rendered height would itself depend on the picker's height via cross-axis stretch β€” a circular dependency where each measurement feeds back into the other and compounds every resize tick. */ align-items: flex-start; min-height: 0; } /* Tab strip β€” vertical rail to the left of the tile grid */ .palette-tabs { display: flex; flex-direction: column; align-items: stretch; gap: 3px; flex-wrap: nowrap; flex-shrink: 0; width: 92px; } /* Visual group labels between tab groups */ .palette-group-label { font-size: 12px; font-family: var(--font-pixel); color: rgba(229, 183, 59, 0.55); letter-spacing: 0.5px; padding: 0 4px; flex-shrink: 0; white-space: nowrap; align-self: center; } .palette-group-label--atlas { color: rgba(140, 210, 255, 0.7); } .palette-group-label--multi { color: rgba(190, 150, 255, 0.7); } /* Palette tab buttons */ .palette-tab-btn { padding: 5px 4px !important; font-size: 12px !important; white-space: normal; text-align: center; width: 100%; box-sizing: border-box; flex-shrink: 0; transition: all 0.15s ease; } .palette-tab-btn:hover { background-color: #3b3b47 !important; border-color: var(--snes-gold) !important; } .palette-tab-btn.active { background: linear-gradient(to bottom, #1f3ca6 0%, #0f1f5c 100%) !important; border-color: var(--snes-gold) !important; color: #ffffff !important; box-shadow: 0 0 8px rgba(229, 183, 59, 0.4) !important; } /* Layer selector (shown only for atlas tabs) */ #atlas-layer-selector { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .layer-sel-label { font-size: 12px; font-family: var(--font-pixel); color: var(--snes-grey); white-space: nowrap; } .atlas-layer-btn { padding: 3px 8px !important; font-size: 12px !important; white-space: nowrap; } .atlas-layer-btn.active-layer-btn { background: linear-gradient(to bottom, #1a5c1a 0%, #0a2e0a 100%) !important; border-color: #6fcf6f !important; color: #b8ffb8 !important; box-shadow: 0 0 6px rgba(111, 207, 111, 0.35) !important; } /* Tile palette grid */ .tile-palette { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; overflow-y: auto; background: rgba(0, 0, 0, 0.5); padding: 8px; border-radius: 5px; border: 1.5px solid var(--snes-gold-dim); flex: 1; min-width: 0; box-sizing: border-box; } /* Individual tile items */ .palette-tile { width: 36px; height: 36px; border: 2px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; image-rendering: pixelated; transition: transform 0.1s ease; } .palette-tile:hover { transform: scale(1.15) !important; box-shadow: 0 0 6px rgba(229, 183, 59, 0.5); z-index: 10; position: relative; } .palette-tile.active { border-color: var(--snes-gold); box-shadow: 0 0 8px var(--snes-gold); background-color: rgba(255, 255, 255, 0.1); } /* Ò”€ Contextual alt sections (fog / mode-hint) Ò”€Ò”€Ò”€Ò”€Ò”€ */ .editor-context-alt { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 6px; min-height: 52px; } .context-hint-icon { font-size: 22px; flex-shrink: 0; } .context-hint-text { font-size: 12px; font-family: var(--font-pixel); color: rgba(255, 255, 255, 0.6); } /* Fog reveal / hide buttons */ .fog-mode-btn { padding: 6px 16px !important; font-size: 13px !important; flex-shrink: 0; } .fog-mode-btn.active-fog-mode { background: linear-gradient(to bottom, #1f3ca6 0%, #0f1f5c 100%) !important; border-color: #6aaeff !important; color: #c0e0ff !important; box-shadow: 0 0 10px rgba(100, 170, 255, 0.45) !important; } /* Legacy label kept for any old refs */ .editor-gm-label { font-family: var(--font-pixel); font-size: 12px; color: var(--snes-gold); background: rgba(229, 183, 59, 0.1); border: 1px solid rgba(229, 183, 59, 0.3); border-radius: 3px; padding: 2px 6px; font-weight: bold; text-shadow: 1px 1px 0 #000; letter-spacing: 0.5px; align-self: center; flex-shrink: 0; } /* ---- 7. MICROANIMATIONS & GLOBAL TRANSITIONS ---- */ /* App layout fade in after connecting */ #app-layout:not(.hidden) { animation: app-fadein 0.4s ease-out forwards; } @keyframes app-fadein { from { opacity: 0; } to { opacity: 1; } } /* Overlay appear */ .overlay-panel:not(.hidden) { animation: overlay-fadein 0.25s ease-out forwards; } /* Guarantee visibility when animation stalls (prefers-reduced-motion shrinks duration to 0.01ms, leaving the element stuck at the 'from' keyframe opacity:0 forever). */ @media (prefers-reduced-motion: reduce) { .overlay-panel:not(.hidden) { opacity: 1 !important; animation: none !important; } #app-layout:not(.hidden) { opacity: 1 !important; animation: none !important; } } @keyframes overlay-fadein { from { opacity: 0; } to { opacity: 1; } } /* Modal content slide up */ .overlay-panel:not(.hidden) .overlay-content, .overlay-panel:not(.hidden) .snes-window { animation: modal-slidein 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes modal-slidein { from { transform: translateY(16px) scale(0.97); opacity: 0.5; } to { transform: translateY(0) scale(1); opacity: 1; } } /* Smooth button active feedback */ .snes-btn { transition: transform 0.05s, box-shadow 0.05s, background 0.15s, border-color 0.15s, color 0.15s !important; } .snes-btn:active { transform: translateY(3px) scale(0.98) !important; } /* Rolling die bounce improved */ .rolling-die-sprite.settled { animation: die-land 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important; } @keyframes die-land { 0% { transform: scale(1.5) rotate(15deg); } 60% { transform: scale(1.25) rotate(-5deg); } 100% { transform: scale(1.15) rotate(0deg); } } /* Focus visible for accessibility */ *:focus-visible { outline: 2px solid var(--snes-gold); outline-offset: 2px; border-radius: 2px; } /* Reduce motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---- 8. SIDEBAR SECTION SEPARATOR HEADERS ---- */ .sidebar-header { display: flex; align-items: center; gap: 6px; font-family: var(--font-fantasy-header); font-size: 12px; font-weight: 700; color: var(--snes-gold); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; } .sidebar-header::before, .sidebar-header::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(229, 183, 59, 0.3)); } .sidebar-header::before { background: linear-gradient(to left, transparent, rgba(229, 183, 59, 0.3)); } .sidebar-header .header-icon { opacity: 0.8; font-size: 13px; } /* ---- 9. IMPROVED SCROLLBAR ---- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 3px; } ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--snes-gold-dim), rgba(168, 126, 28, 0.5)); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--snes-gold); } /* ---- 10. CHAT SEND BUTTON IMPROVED ---- */ #chat-send-btn { background: linear-gradient(to bottom, #1d2a44, #0f1624) !important; border-color: var(--snes-cyan) !important; transition: all 0.15s ease !important; } #chat-send-btn:hover { background: linear-gradient(to bottom, #2b3e64, #172237) !important; box-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important; color: #fff !important; } /* ---- 11. CANVAS LOADING STATE ---- */ #game-container.loading::before { content: 'βš” CARGANDO MESA...'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-pixel); font-size: 13px; color: rgba(229, 183, 59, 0.4); animation: loading-pulse 1.5s ease-in-out infinite; z-index: 3; letter-spacing: 2px; text-shadow: 0 0 10px rgba(229, 183, 59, 0.3); pointer-events: none; } @keyframes loading-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } /* ---- 12. IMPROVED SNES-SELECT in SIDEBAR ---- */ #chat-whisper-target { background-color: var(--window-bg-2) !important; border: 1.5px solid var(--snes-gold-dim) !important; color: var(--snes-white) !important; font-family: var(--font-fantasy-body) !important; font-size: 12px !important; padding: 4px 6px !important; border-radius: 4px !important; width: auto !important; min-width: 72px; } /* ---- 13. EDITOR PANEL SECTION GROUPS ---- */ .editor-group-label { font-family: var(--font-pixel); font-size: 12px; color: rgba(229, 183, 59, 0.5); text-transform: uppercase; letter-spacing: 1px; align-self: flex-end; margin-bottom: 2px; flex-shrink: 0; line-height: 1; } /* Fog checkbox improved */ #editor-toggle-fog-checkbox { width: 14px; height: 14px; accent-color: var(--snes-gold); cursor: pointer; } /* Undo button improved disabled state */ #editor-undo-btn.disabled, #editor-undo-btn:disabled { background: rgba(0,0,0,0.3) !important; border-color: rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.45) !important; pointer-events: none !important; } /* ---- 14. NPC OPTIONS MENU ANIMATION ---- */ .npc-options-window { animation: menu-popin 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; transform-origin: top left; } @keyframes menu-popin { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } } .npc-option-item { transition: background 0.1s, padding-left 0.1s, border-left 0.1s !important; } /* ---- 15. INITIATIVE TRACKER POLISH ---- */ #initiative-section { position: relative; } #initiative-section::before { content: 'βš”'; position: absolute; top: 10px; right: 10px; font-size: 13px; opacity: 0.15; pointer-events: none; } .initiative-combatant { transition: all 0.25s ease !important; } /* ---- 16. LOBBY ROLE BUTTON ICON SIZING ---- */ #role-player-btn, #role-gm-btn, #role-dev-btn { gap: 6px; font-size: 12px !important; transition: all 0.15s ease !important; } #role-player-btn:hover, #role-gm-btn:hover, #role-dev-btn:hover { transform: translateY(-2px) !important; } /* ---- 17. CONDITIONS MENU ANIMATION ---- */ #conditions-overlay { animation: overlay-fadein 0.2s ease-out forwards; } /* ---- 18. DICE OVERLAY BACKGROUND ---- */ #dice-overlay-screen { background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, transparent 70%); pointer-events: none; } /* ---- 19. IMPROVED USER LIST ITEM ---- */ .user-item { border-radius: 6px; overflow: hidden; } .user-item.online-user { border-left: 3px solid var(--snes-green); } .user-item.offline-user { opacity: 0.55; border-left: 3px solid transparent; } /* ---- 20. SNES BUTTON MICRO FEEDBACK (universal) ---- */ .snes-btn:not(:disabled):hover { filter: brightness(1.05); } /* ---- 21. NPC CONFIG MODAL IMPROVEMENTS ---- */ /* Remove dark inner background from NPC modal form Ò€” the modal window is already dark */ #npc-config-modal .creator-form-section { background: transparent; margin-bottom: 0; overflow: visible; } /* NPC modal overlay sizing β€” grows to fit content, no scroll */ #npc-config-modal .overlay-content { max-width: 960px !important; max-height: none !important; overflow: visible !important; padding-bottom: 0 !important; } /* Form section: show all content, no internal scroll. The base .creator-form-section rule caps max-height at 380px (fine for the shorter character-creator form) β€” the NPC grid is taller, so without this override the box reports 380px for layout purposes while its real content spills past that, and everything after it (DescripciΓ³n, footer buttons) gets positioned assuming the shorter box and overlaps the grid. */ #npc-config-modal .creator-form-section { overflow: visible !important; max-height: none !important; padding-bottom: 6px !important; } /* Footer buttons separator */ #npc-config-modal .overlay-content > div:last-child { padding: 10px 0 4px !important; border-top: 1px solid rgba(229,183,59,0.15) !important; margin-top: 0 !important; } /* Portrait box: larger and more prominent */ #npc-preview-portrait { width: 72px !important; height: 72px !important; } /* Compact header + padding in NPC modal to minimise scroll */ #npc-config-modal .snes-window-header { margin-bottom: 8px !important; padding-bottom: 6px !important; } #npc-config-modal.overlay-panel .overlay-content, #npc-config-modal .overlay-content.snes-window { padding: 12px 16px 0 16px !important; } /* Form labels inside NPC modal: slightly more visible */ #npc-config-modal label { font-size: 12px; letter-spacing: 0.3px; } /* Column separator lines in 3-col NPC grid */ #npc-config-modal .creator-form-section > div > div:nth-child(2), #npc-config-modal .creator-form-section > div > div:nth-child(3) { border-left: 1px solid rgba(229, 183, 59, 0.12); padding-left: 14px; } /* ---- 22. EDITOR PANEL TILE PALETTE ROW ---- */ /* Make the tile preview strip at the very bottom more visible */ .tile-palette { min-height: 52px; } /* Tile preview images in the palette */ .tile-palette canvas, .tile-palette img { image-rendering: pixelated; border: 1px solid rgba(229, 183, 59, 0.2); border-radius: 2px; } /* ---- 23. SIDEBAR SECTION LEGIBILITY ---- */ /* Slightly larger section headers in sidebar */ #sidebar .snes-window-header { font-size: 13px !important; padding: 8px 10px !important; } /* Chat log minimum height to avoid collapse when empty */ #chat-log { min-height: 80px; } /* Dice section: compact row layout */ #dice-section .dice-row { display: flex; gap: 4px; flex-wrap: wrap; } /* ---- 24. TOP HEADER BAR POLISH ---- */ /* Room code badge */ #room-code-display { font-size: 13px !important; letter-spacing: 1.5px; } /* ---- 25. GENERAL LEGIBILITY ---- */ /* Ensure form group labels are consistently visible */ .form-group label { font-size: 12px; color: var(--snes-gold); font-family: var(--font-fantasy-header); letter-spacing: 0.5px; display: block; margin-bottom: 3px; } /* snes-input consistent sizing */ .snes-input { font-size: 13px; padding: 6px 10px; } /* Select elements consistent sizing */ .snes-select { font-size: 13px; } /* ---- 26. DEV PANEL MAP OBJECTS TAB ---- */ /* Atlas picker wrapper: crosshair cursor on hover */ #dev-atlas-wrapper { cursor: crosshair; user-select: none; } /* Map object cards in the DEV list */ .dev-mapobj-card { transition: background 0.1s; } .dev-mapobj-card:hover { background: rgba(255,255,255,0.05) !important; } /* Atlas scroll area scrollbar */ #dev-atlas-scroll::-webkit-scrollbar { width: 6px; height: 6px; } #dev-atlas-scroll::-webkit-scrollbar-track { background: #111; } #dev-atlas-scroll::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; } /* ============================================================ LOBBY REDESIGN β€” 16-bit title screen ============================================================ */ /* CRT scanline veil */ #lobby-scanlines { position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.10) 3px, rgba(0, 0, 0, 0.10) 4px ); pointer-events: none; z-index: 0; } /* Square corners on lobby panel β€” no border-radius in 16-bit */ #lobby-screen .snes-window { border-radius: 0 !important; } /* ── Logo block ── */ #lobby-logo-block { text-align: center; padding: 6px 0 20px; user-select: none; } /* Signature: hard 4px black pixel-shadow β€” classic 16-bit logo technique */ #lobby-logo-title { font-family: var(--font-pixel); font-size: 26px; color: var(--snes-gold); letter-spacing: 5px; text-shadow: 4px 4px 0 #000, -1px -1px 0 rgba(0, 0, 0, 0.9), 0 0 28px rgba(229, 183, 59, 0.45), 0 0 70px rgba(229, 183, 59, 0.15); display: block; line-height: 1; margin-bottom: 12px; } #lobby-logo-rule { width: 100%; height: 1px; background: linear-gradient(to right, transparent 0%, var(--snes-gold-dim) 30%, var(--snes-gold-dim) 70%, transparent 100%); margin: 8px 0; } #lobby-logo-sub { font-family: var(--font-pixel); font-size: 12px; letter-spacing: 2px; margin: 8px 0 5px; line-height: 1.4; } #lobby-tagline { font-family: var(--font-fantasy-header); font-size: 12px; color: var(--snes-grey); letter-spacing: 3px; text-transform: uppercase; opacity: 0.50; margin: 0; } /* ── JRPG dialog box form ── */ #lobby-menu-box { background: rgba(0, 0, 0, 0.38); border: 1px solid rgba(229, 183, 59, 0.22); border-radius: 0; padding: 0 14px; margin-bottom: 14px; } /* This box sits directly on .snes-window's own background, which itself flips with the theme (dark navy gradient / light parchment gradient) β€” so a translucent BLACK overlay here doesn't "stay dark" the way it does elsewhere in this file; blended over the light gradient it reads as a muddy gray-brown that clashes with the parchment look and washes out the gold labels sitting on it. Swap it for a translucent warm leather tint instead, consistent with the rest of the light theme's palette. */ :root[data-theme="light"] #lobby-menu-box { background: rgba(124, 94, 67, 0.14); border-color: rgba(124, 94, 67, 0.35); } .lobby-menu-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; } .lobby-menu-divider { height: 1px; background: linear-gradient(to right, transparent, rgba(229, 183, 59, 0.18), transparent); margin: 0; } .lobby-row-label { font-family: var(--font-pixel); font-size: 12px; color: var(--snes-gold); /* Widened from 56px β€” the app-wide 12px minimum font size no longer fits "CLAVE GM" (the longest label, ~104px wide at this size and font on one line) in the old column width, causing it to wrap onto two lines and crowd the input next to it. */ width: 112px; flex-shrink: 0; letter-spacing: 1px; text-align: right; } /* Underline-only inputs β€” like FF6 name entry screens */ .lobby-input { flex: 1; background: transparent !important; border: none !important; border-bottom: 1px solid rgba(229, 183, 59, 0.40) !important; border-radius: 0 !important; color: var(--snes-white); font-family: var(--font-pixel); font-size: 12px; line-height: 1.6; padding: 6px 4px 5px; outline: none; box-shadow: none !important; transition: border-color 0.15s, color 0.15s; } .lobby-input::placeholder { color: rgba(197, 192, 204, 0.28); font-size: 12px; } /* Fixed near-black background regardless of theme β€” placeholder needs a fixed, non-theme-flipping color to stay legible against it (was falling back to the browser's default dark placeholder color, invisible on a near-black input). Solid color, not alpha-blended gold β€” at low alpha the blend against the near-black background collapses toward black instead of reading as "dim gold". */ #editor-npc-search::placeholder { color: #a8863f; opacity: 1; } .lobby-input:focus { border-bottom-color: var(--snes-cyan) !important; color: var(--snes-cyan); } /* Role buttons β€” all identical until selected */ .lobby-role-btns { display: flex; gap: 6px; flex: 1; } .lobby-role-btns .snes-btn { flex: 1; font-family: var(--font-pixel) !important; font-size: 12px !important; padding: 8px 2px !important; border-radius: 0 !important; letter-spacing: 0.5px; } /* Connect button: pixel-art square + light sweep */ #lobby-connect-btn { border-radius: 0 !important; font-family: var(--font-pixel) !important; font-size: 12px !important; letter-spacing: 3px !important; padding: 14px !important; overflow: hidden; position: relative; } #lobby-connect-btn::after { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.10) 50%, transparent 100%); animation: btn-sweep 2.8s linear infinite; } @keyframes btn-sweep { 0% { transform: translateX(-80px); } 100% { transform: translateX(580px); } } /* Version tag */ #lobby-version-tag { text-align: center; font-family: var(--font-pixel); font-size: 12px; color: rgba(197, 192, 204, 0.25); margin-top: 14px; letter-spacing: 2px; } /* ============================================================ 16-BIT MAXIMIZATION β€” Pixel-art global overrides ============================================================ */ :root { --pixel-shadow: 3px 3px 0 #000; --pixel-shadow-sm: 2px 2px 0 #000; --pixel-shadow-gold: 3px 3px 0 var(--snes-gold-dim); } /* ── Square corners on all panels ── */ .snes-window, .overlay-content, .snes-input, #character-sheet-modal .overlay-content, #npc-profile-modal .overlay-content, #character-creator-screen .overlay-content { border-radius: 0 !important; } /* ── Hard 4px pixel shadows replace blurred ones ── */ .snes-window { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.85) !important; } .snes-window.gold-border { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.85), inset 0 0 20px rgba(229, 183, 59, 0.06) !important; } /* ── Flat buttons + physical pixel press mechanic ── */ /* Signature: translate(3px,3px) on active sinks the button exactly the size of its shadow β€” making it feel like a real SNES button press */ .snes-btn { background: #1a1228 !important; box-shadow: 3px 3px 0 #000 !important; border-radius: 0 !important; transition: transform 40ms steps(1), box-shadow 40ms steps(1) !important; } .snes-btn:not(:disabled):hover { background: #2b1e42 !important; transform: translate(-1px, -1px) !important; box-shadow: 4px 4px 0 #000 !important; color: #fff !important; } .snes-btn:not(:disabled):active { transform: translate(3px, 3px) !important; box-shadow: 0 0 0 transparent !important; } .snes-btn.green { background: #0f3d23 !important; border-color: #38a169 !important; } .snes-btn.green:not(:disabled):hover { background: #175733 !important; } .snes-btn.red { background: #3d0f15 !important; border-color: #e53e3e !important; } .snes-btn.red:not(:disabled):hover { background: #571620 !important; } .snes-btn.blue { background: #0f1d3d !important; border-color: #3182ce !important; } .snes-btn.blue:not(:disabled):hover { background: #172d57 !important; } .snes-btn.gold { background: #3d2e0a !important; border-color: #e5b73b !important; color: #e5b73b !important; } .snes-btn.gold:not(:disabled):hover { background: #5a4412 !important; color: #fff !important; } .snes-btn:disabled, .snes-btn.disabled { background: #16131c !important; border-color: #3d3948 !important; color: #6b6773 !important; box-shadow: 1px 1px 0 #000 !important; } /* ── HP bars: solid color blocks, step-width transition ── */ .user-hp-bar-container { border-radius: 0 !important; height: 4px !important; } .user-hp-bar { border-radius: 0 !important; background: #22c55e !important; background-image: none !important; transition: width 0.3s steps(8, end) !important; } .user-hp-bar.low { background: #f5c518 !important; background-image: none !important; } .user-hp-bar.critical { background: #e53e3e !important; background-image: none !important; animation: hp-critical-blink 0.6s steps(1) infinite !important; } @keyframes hp-critical-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ── Pixel scrollbars ── */ * { scrollbar-width: thin; scrollbar-color: #4a3a12 #07050f; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #07050f; border-left: 1px solid #1a1535; } ::-webkit-scrollbar-thumb { background: #4a3a12; border-radius: 0 !important; border: 1px solid var(--snes-gold-dim); } ::-webkit-scrollbar-thumb:hover { background: var(--snes-gold-dim); } /* ── Chat entry pixel decoration ── */ .chat-entry.roll { border-left: 3px solid var(--snes-gold-dim) !important; border-radius: 0 !important; } .chat-entry.system { border-left: 3px solid var(--snes-cyan) !important; border-radius: 0 !important; } /* ── Window header crisp divider ── */ .snes-window-header { border-bottom: 2px solid var(--snes-gold-dim) !important; padding-bottom: 10px !important; } /* ── Pixel divider utility ── */ .pixel-divider { height: 1px; background: linear-gradient(to right, transparent 0%, var(--snes-gold-dim) 20%, var(--snes-gold-dim) 80%, transparent 100%); margin: 10px 0; border: none; } /* ============================================================ ROOM BROWSER + WAITING LOBBY screens ============================================================ */ #room-browser-screen, #room-waiting-screen { background: radial-gradient(circle at center, rgba(22, 16, 38, 0.97) 0%, rgba(5, 4, 11, 0.99) 100%); } /* Room list box */ #room-list-box { background: rgba(0, 0, 0, 0.38); border: 1px solid rgba(229, 183, 59, 0.22); margin-bottom: 12px; min-height: 100px; } /* Same fix as #lobby-menu-box above β€” sits on .snes-window's own theme-flipping background, so it needs a light-theme-specific tint instead of a translucent black. */ :root[data-theme="light"] #room-list-box { background: rgba(124, 94, 67, 0.14); border-color: rgba(124, 94, 67, 0.35); } #room-list-empty { padding: 24px 12px; text-align: center; font-family: var(--font-pixel); font-size: 12px; color: rgba(197, 192, 204, 0.32); letter-spacing: 1px; } .room-list-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid rgba(229, 183, 59, 0.07); font-family: var(--font-pixel); font-size: 12px; transition: background 40ms steps(1); } .room-list-item:hover { background: rgba(229, 183, 59, 0.07); } .room-list-item:last-child { border-bottom: none; } .room-list-cursor { color: var(--snes-gold); width: 10px; flex-shrink: 0; opacity: 0; } .room-list-item:hover .room-list-cursor { opacity: 1; } .room-list-item.selected .room-list-cursor { opacity: 1; } .room-list-code { color: var(--snes-white); flex: 1; letter-spacing: 2px; } .room-list-count { font-size: 12px; color: var(--snes-grey); } .room-list-state { font-size: 12px; padding: 2px 5px; border: 1px solid; letter-spacing: 1px; } .room-list-state.active { color: var(--snes-cyan); border-color: rgba(56,189,248,0.5); } .room-list-state.waiting { color: var(--snes-gold); border-color: var(--snes-gold-dim); } .room-list-state.started { color: var(--snes-grey); border-color: rgba(197,192,204,0.3); } /* Waiting lobby */ #waiting-player-list-box { background: rgba(0, 0, 0, 0.38); border: 1px solid rgba(229, 183, 59, 0.22); margin-bottom: 12px; min-height: 70px; } /* Same fix as #lobby-menu-box above. */ :root[data-theme="light"] #waiting-player-list-box { background: rgba(124, 94, 67, 0.14); border-color: rgba(124, 94, 67, 0.35); } #waiting-player-list-header { font-family: var(--font-pixel); font-size: 12px; color: var(--snes-gold-dim); letter-spacing: 2px; padding: 6px 12px; border-bottom: 1px solid rgba(229, 183, 59, 0.12); } .waiting-player-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid rgba(229, 183, 59, 0.05); font-family: var(--font-pixel); font-size: 12px; } .waiting-player-row:last-child { border-bottom: none; } .waiting-player-cursor { color: var(--snes-gold); width: 10px; flex-shrink: 0; } .waiting-player-name { flex: 1; color: var(--snes-white); letter-spacing: 1px; } .waiting-player-role { font-size: 12px; padding: 2px 5px; border: 1px solid; letter-spacing: 1px; } .waiting-player-role.gm { color: var(--snes-gold); border-color: var(--snes-gold-dim); } .waiting-player-role.player { color: var(--snes-cyan); border-color: rgba(56,189,248,0.4); } .waiting-player-role.dev { color: var(--snes-grey); border-color: rgba(197,192,204,0.3); } #waiting-role-badge { font-family: var(--font-pixel); font-size: 12px; padding: 2px 6px; border: 1px solid; letter-spacing: 1px; } #waiting-role-badge.gm { color: var(--snes-gold); border-color: var(--snes-gold-dim); } #waiting-role-badge.player { color: var(--snes-cyan); border-color: rgba(56,189,248,0.4); } #waiting-role-badge.dev { color: var(--snes-grey); border-color: rgba(197,192,204,0.3); } #waiting-status-msg { text-align: center; font-family: var(--font-pixel); font-size: 12px; color: var(--snes-grey); letter-spacing: 1px; padding: 14px; animation: waiting-blink 1.4s steps(1) infinite; } @keyframes waiting-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* ── SETTINGS MODAL ─────────────────────────────────────────────────────── */ .settings-section { margin-bottom: 4px; } .settings-section-title { font-family: var(--font-pixel); font-size: 12px; color: var(--snes-gold); letter-spacing: 2px; margin-bottom: 10px; } .settings-option-group { display: flex; flex-direction: column; gap: 8px; } .settings-radio-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 8px 10px; border: 1px solid transparent; transition: border-color 80ms steps(1), background 80ms steps(1); } .settings-radio-row:hover { border-color: rgba(229,183,59,0.2); background: rgba(229,183,59,0.04); } .settings-radio-row input[type="radio"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--snes-gold); } .settings-radio-row input[type="radio"]:checked + .settings-radio-label .settings-opt-name { color: var(--snes-gold); } .settings-radio-label { display: flex; flex-direction: column; gap: 3px; } .settings-opt-name { font-family: var(--font-pixel); font-size: 12px; color: var(--snes-white); letter-spacing: 1px; } .settings-opt-desc { font-size: 12px; color: var(--snes-grey); line-height: 1.4; } .settings-divider { height: 1px; background: linear-gradient(to right, transparent, rgba(229,183,59,0.2), transparent); margin: 12px 0; } /* GM move-approval cards */ .move-request-card { background: rgba(10,8,22,0.96); border: 1px solid var(--snes-gold-dim); box-shadow: 3px 3px 0 #000; padding: 8px 10px; font-family: var(--font-pixel); } .move-request-card .move-req-name { font-size: 12px; color: var(--snes-cyan); margin-bottom: 4px; letter-spacing: 1px; } .move-request-card .move-req-pos { font-size: 12px; color: var(--snes-grey); margin-bottom: 8px; } .move-request-card .move-req-btns { display: flex; gap: 6px; } /* Turn banner pulse */ #turn-banner.your-turn .snes-window { border-color: var(--snes-cyan) !important; } #turn-banner-name.your-turn { color: var(--snes-gold) !important; animation: waiting-blink 0.8s steps(1) infinite; } /* ── End Settings ────────────────────────────────────────────────────────── */ /* Override lobby-pulse-border: pixel-art border pulse (no blurred shadow) */ @keyframes lobby-pulse-border { 0%, 100% { box-shadow: 4px 4px 0 rgba(0,0,0,0.85), inset 0 0 0 1px rgba(229,183,59,0.18); } 50% { box-shadow: 4px 4px 0 rgba(0,0,0,0.85), inset 0 0 0 1px rgba(229,183,59,0.55); } } /* ── Tileset Palette Props ─────────────────────────────────── */ .tile-prop-btn { display: flex; flex-direction: column; /* stretch, not center β€” center lets the label span grow to its own natural content width instead of being constrained to the button's actual (grid-limited) width, which defeats overflow-wrap below: nothing forces a mid-word break if the span is always exactly as wide as its unbroken text wants to be. Was only ever a problem for longer labels ("OVERHEAD") at larger font sizes β€” invisible at the smaller size this was originally written for. */ align-items: stretch; justify-content: center; gap: 3px; padding: 5px 4px; border: 2px solid #2a2a3a; background: rgba(0,0,0,0.55); color: #c5c0cc; cursor: pointer; font-size: 12px; font-family: 'Press Start 2P', monospace; user-select: none; transition: color 0.05s, background 0.05s, border-color 0.05s; white-space: normal; line-height: 1.2; min-width: 0; text-align: center; overflow-wrap: break-word; } .tile-prop-btn > span { min-width: 0; } .tile-prop-btn .prop-icon { font-size: 12px; line-height: 1; } .tile-prop-btn:hover { border-color: #777; color: #fff; } .tile-prop-btn.active-solid { background: rgba(160,20,20,0.55); border-color: #e84040; color: #ffaaaa; box-shadow: 0 0 6px rgba(232,64,64,0.5), inset 0 0 0 1px rgba(255,255,255,0.08); } .tile-prop-btn.active-overhead { background: rgba(100,80,0,0.55); border-color: #e5b73b; color: #ffe680; box-shadow: 0 0 6px rgba(229,183,59,0.4), inset 0 0 0 1px rgba(255,255,255,0.08); } .tile-prop-btn.active-roof { background: rgba(0,60,100,0.55); border-color: #38bdf8; color: #aae4ff; box-shadow: 0 0 6px rgba(56,189,248,0.4), inset 0 0 0 1px rgba(255,255,255,0.08); } .tile-prop-btn.active-qcover { background: rgba(20,80,20,0.55); border-color: #4caf50; color: #a8e6aa; box-shadow: 0 0 6px rgba(76,175,80,0.4), inset 0 0 0 1px rgba(255,255,255,0.08); } .tile-prop-btn.active-hcover { background: rgba(100,50,0,0.55); border-color: #ff9800; color: #ffd580; box-shadow: 0 0 6px rgba(255,152,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.08); } .tile-prop-btn.active-difficult { background: rgba(90,60,20,0.55); border-color: #b58642; color: #e2c592; box-shadow: 0 0 6px rgba(181,134,66,0.45), inset 0 0 0 1px rgba(255,255,255,0.08); } .tileset-preview-area { /* Widened from 180px β€” the app-wide 12px minimum font size no longer fits "OVERHEAD" (96px at this size) inside its ~75px column, forcing an awkward mid-word break ("OVERH-EAD"). 260px gives each of the 2 columns enough room for the longest label on one line. */ width: 260px; flex-shrink: 0; align-self: flex-start; height: auto; display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.45); border: 2px solid #2a2a3a; padding: 10px; box-sizing: border-box; } .tileset-preview-canvas-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; } .tileset-prop-label { color: #e5b73b; font-size: 12px; font-family: "Press Start 2P", monospace; letter-spacing: 1px; text-align: center; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); } .tileset-prop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; } .tileset-prop-grid .tile-prop-btn.span2 { grid-column: span 2; } .tile-prop-light-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; border: 2px solid #2a2a3a; background: rgba(0,0,0,0.55); color: #c5c0cc; font-size: 11px; font-family: 'Press Start 2P', monospace; } .tile-prop-light-input { width: 44px; background: #111; border: 1px solid #555; color: #ffe680; font-family: 'Press Start 2P', monospace; font-size: 11px; padding: 3px; text-align: center; } .tile-prop-light-input:focus { outline: none; border-color: #e5b73b; } /* Optional video chat tiles β€” dynamically created per connected peer with a live camera track (see VoiceChat.attachRemoteVideo in voice.js) */ .peer-video-tile { width: 120px; height: 90px; object-fit: cover; border: 2px solid var(--snes-cyan); border-radius: 4px; background: #000; pointer-events: all; } /* ========================================================================== BASELINE RESPONSIVE / TOUCH LAYOUT The app's normal layout is a fixed-column desktop grid (side panels pinned by grid-column/row, canvas sized in JS). Below this breakpoint the three columns are stacked into a single scrollable column instead β€” the map first, then the right sidebar (chat/dice/initiative), then the left player-stats sidebar β€” so the app stays usable on a tablet/phone. This is a functional baseline, not a full mobile redesign: nothing here changes individual panel/modal internals, which still assume a reasonably wide screen and may feel cramped. Touch input itself (tap/pan/pinch-zoom on the canvas) is handled in game.js. ========================================================================== */ @media (max-width: 900px) { body { overflow-y: auto; height: auto; min-height: 100vh; } #app-layout, #app-layout.player-layout { display: flex; flex-direction: column; height: auto; min-height: 100vh; width: 100vw; overflow: visible; } #top-navbar { flex-wrap: wrap; height: auto; padding: 6px 10px; gap: 6px; } #lobby-controls { flex-wrap: wrap; row-gap: 4px; } #game-container, #app-layout.player-layout #game-container { grid-row: auto; grid-column: auto; width: 100%; height: min(70vh, 420px); flex-shrink: 0; } #game-canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; } #sidebar, #app-layout.player-layout #sidebar, #left-sidebar { grid-row: auto; grid-column: auto; width: 100%; height: auto; max-height: 60vh; border-left: none; border-right: none; border-top: 2px solid var(--snes-gold-dim); } /* Panels/modals still center over the viewport but shrink to fit narrow screens */ .overlay-content { width: 96vw; max-height: 90vh; } }