:root { --bg-dark: #2d2d2d; --bg-darker: #252525; --card-bg: #fff; --grey-border: #ddd; --grey-dark: #6b6b6b; --ink: #1a1a1a; --ink-muted: #555; --accent: #c41e3a; --accent-light: #e63950; --accent-dark: #9e1830; --accent-rgb: 196, 30, 58; --danger: #b91c1c; --success: #15803d; --shadow: rgba(0, 0, 0, 0.15); --radius: 4px; --font-display: 'Cinzel', Georgia, serif; --font-body: 'Source Sans 3', -apple-system, sans-serif; /* Banner/surface text (dark theme) */ --banner-text: #fff; --banner-text-muted: rgba(255, 255, 255, 0.75); --banner-text-dim: rgba(255, 255, 255, 0.6); --banner-border: rgba(255, 255, 255, 0.08); --xp-track-bg: rgba(0, 0, 0, 0.3); --btn-ghost-banner: rgba(255, 255, 255, 0.8); --btn-ghost-banner-border: rgba(255, 255, 255, 0.2); } [data-theme="light"] { --bg-dark: #eaeaea; --bg-darker: #d4d4d4; --card-bg: #fff; --grey-border: #ccc; --shadow: rgba(0, 0, 0, 0.08); --banner-text: #1a1a1a; --banner-text-muted: #444; --banner-text-dim: #555; --banner-border: rgba(0, 0, 0, 0.08); --xp-track-bg: rgba(0, 0, 0, 0.12); --btn-ghost-banner: #333; --btn-ghost-banner-border: rgba(0, 0, 0, 0.2); } [data-theme="light"] .btn-banner:hover { background: rgba(var(--accent-rgb), 0.12); } [data-theme="light"] .char-banner-actions .btn-ghost:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); border-color: var(--accent); } /* Theme + Scene wrapper (stack theme toggle above Change Scene) */ .banner-theme-scene-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .btn-theme-toggle { padding: 0.35rem 0.6rem; font-size: 1.1rem; line-height: 1; min-width: 2rem; } .btn-change-scene { font-size: 0.8rem; padding: 0.35rem 0.5rem; white-space: nowrap; } /* Scene picker modal */ .scene-modal .modal-content { max-width: 380px; } .scene-options { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .scene-option { padding: 0.5rem 0.75rem; border: 2px solid var(--grey-border); border-radius: var(--radius); background: var(--card-bg); cursor: pointer; font-family: var(--font-body); font-size: 0.9rem; transition: border-color 0.2s, background 0.2s; } .scene-option:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); } .scene-option[data-active="true"] { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); color: var(--accent); font-weight: 600; } .scene-custom-wrap { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--grey-border); display: flex; flex-direction: column; gap: 0.5rem; } .scene-custom-url-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .scene-custom-url-label { font-size: 0.85rem; color: var(--ink-muted); flex: 0 0 100%; } .scene-bg-url-input { flex: 1; min-width: 0; padding: 0.4rem 0.5rem; border: 1px solid var(--grey-border); border-radius: var(--radius); font-size: 0.9rem; font-family: var(--font-body); } .scene-custom-use-url { flex-shrink: 0; } .scene-custom-remove { font-size: 0.85rem; } .scene-custom-remove.hidden { display: none; } /* Scene color schemes (data-scene on ) */ [data-scene="forest"] { --accent: #2d6a2d; --accent-light: #3d8b3d; --accent-dark: #1e4a1e; --accent-rgb: 45, 106, 45; --bg-dark: #3d3228; --bg-darker: #2d251e; --card-bg: #f5f0e8; --grey-border: #c4b8a8; } [data-scene="ocean"] { --accent: #1e5a8a; --accent-light: #2a7ab8; --accent-dark: #143d5c; --accent-rgb: 30, 90, 138; --bg-dark: #252d35; --bg-darker: #1a2229; --card-bg: #e8eef4; --grey-border: #a8b8c4; } [data-scene="royal"] { --accent: #5c2d8a; --accent-light: #7b3db8; --accent-dark: #3d1e5c; --accent-rgb: 92, 45, 138; --bg-dark: #2a2435; --bg-darker: #1e1a29; --card-bg: #f0e8f5; --grey-border: #c4a8b8; } [data-scene="ember"] { --accent: #c45c1e; --accent-light: #e67a3a; --accent-dark: #9e4018; --accent-rgb: 196, 92, 30; --bg-dark: #352a25; --bg-darker: #291e1a; --card-bg: #f5efe8; --grey-border: #c4b0a8; } /* Light theme + scene: lighter backgrounds, keep contrast */ [data-theme="light"][data-scene="forest"] { --bg-dark: #e8e2d6; --bg-darker: #d6cfc0; --card-bg: #fdfbf7; --grey-border: #c4b8a8; } [data-theme="light"][data-scene="ocean"] { --bg-dark: #dce4ec; --bg-darker: #c8d4e0; --card-bg: #f4f8fc; --grey-border: #a8b8c4; } [data-theme="light"][data-scene="royal"] { --bg-dark: #e6e0ef; --bg-darker: #d4cce0; --card-bg: #faf8fc; --grey-border: #c4a8b8; } [data-theme="light"][data-scene="ember"] { --bg-dark: #efe8e0; --bg-darker: #e0d6c8; --card-bg: #fdfaf7; --grey-border: #c4b0a8; } /* Custom image background (image set via --scene-bg-image in JS) */ [data-scene="custom"] body { background-image: var(--scene-bg-image, none); background-size: cover; background-repeat: no-repeat; background-position: center; } * { box-sizing: border-box; } .backdoor-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 10000; } .backdoor-overlay.hidden { display: none; } .backdoor-box { background: var(--card-bg); padding: 1.5rem; border-radius: var(--radius); box-shadow: 0 4px 20px rgba(0,0,0,0.3); min-width: 260px; } .backdoor-box label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--ink-muted); } .backdoor-box input { width: 100%; padding: 0.5rem; margin-top: 0.25rem; border: 1px solid var(--grey-border); border-radius: 4px; } .backdoor-box .btn { width: 100%; margin-top: 0.5rem; } .backdoor-error { margin-top: 0.75rem; font-size: 0.85rem; color: var(--danger); } .backdoor-error.hidden { display: none; } .hidden { display: none !important; } /* Landing page (when not logged in, until "Start now" or log in) */ .landing-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; position: relative; } .landing-theme-btn { position: absolute; top: 1rem; right: 1rem; padding: 0.35rem 0.6rem; font-size: 1.1rem; } .landing-inner { text-align: center; max-width: 420px; } .landing-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--banner-text); margin: 0 0 0.25rem; letter-spacing: 0.02em; } .landing-rules-note { font-size: 0.8rem; color: var(--banner-text-dim); margin: 0 0 0.5rem; } .landing-subtitle { color: var(--banner-text-muted); font-size: 1rem; margin: 0 0 2rem; } .btn-landing-cta { display: inline-block; padding: 0.85rem 2rem; font-size: 1.1rem; margin-bottom: 2rem; } .landing-auth-links { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } .landing-auth-links .btn { font-size: 0.95rem; } /* Admin panel (only visible at #admin when logged in as admin) */ .admin-panel { min-height: 100vh; padding: 1.5rem; } .admin-panel-inner { max-width: 900px; margin: 0 auto; } .admin-title { font-family: var(--font-display); color: #fff; margin: 0 0 0.5rem; } .admin-link { color: var(--accent-light); font-size: 0.95rem; margin-bottom: 1.5rem; display: inline-block; } .admin-link:hover { text-decoration: underline; } .admin-view-banner { background: rgba(var(--accent-rgb), 0.15); color: var(--ink); padding: 0.5rem 1rem; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .admin-view-banner .admin-link { margin: 0; margin-left: 0.25rem; } .admin-section { background: var(--card-bg); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; border: 1px solid var(--grey-border); } .admin-section h2 { font-size: 1.1rem; margin: 0 0 0.75rem; color: var(--ink); } .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .admin-table th, .admin-table td { padding: 0.4rem 0.6rem; text-align: left; border-bottom: 1px solid var(--grey-border); } .admin-table th { font-weight: 600; color: var(--ink-muted); } .admin-table code { font-size: 0.8rem; background: rgba(0,0,0,0.06); padding: 0.15rem 0.35rem; border-radius: 3px; } .admin-empty { color: var(--ink-muted); margin: 0; font-size: 0.9rem; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--font-body); font-size: clamp(14px, 2.5vw, 15px); line-height: 1.4; background-color: var(--bg-dark); /* Birch-bark texture: subtle horizontal striations */ background-image: repeating-linear-gradient( 180deg, transparent 0, transparent 1px, rgba(0, 0, 0, 0.04) 1px, rgba(0, 0, 0, 0.04) 2px ), repeating-linear-gradient( 180deg, transparent 0, transparent 6px, rgba(255, 255, 255, 0.015) 6px, rgba(255, 255, 255, 0.015) 7px ), repeating-linear-gradient( 180deg, transparent 0, transparent 14px, rgba(0, 0, 0, 0.02) 14px, rgba(0, 0, 0, 0.02) 15px ); background-size: 100% 100%; } .app { max-width: 1200px; margin: 0 auto; padding: 0; } /* Character banner */ .char-banner { background: var(--bg-darker); padding: 1rem 1.25rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--banner-border); } .char-banner-main { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .char-banner-left { display: flex; align-items: center; gap: 1rem; } .char-portrait-wrap { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius); overflow: hidden; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--banner-border); display: flex; align-items: center; justify-content: center; } .char-portrait { width: 100%; height: 100%; object-fit: cover; } .char-portrait-wrap--clickable { cursor: pointer; } .char-portrait-placeholder { font-size: 0.65rem; color: var(--banner-text-dim); text-align: center; padding: 0.25rem; line-height: 1.1; } .char-identity { flex: 1; } .char-name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--banner-text); margin: 0 0 0.15rem; letter-spacing: 0.02em; } .char-subtitle { font-size: 0.85rem; color: var(--banner-text-muted); margin: 0; } .char-banner-right { display: flex; align-items: center; gap: 0.5rem; } .btn-banner { background: transparent; color: var(--accent); border: 1px solid var(--accent); font-size: 0.8rem; padding: 0.35rem 0.75rem; letter-spacing: 0.05em; } .btn-banner:hover { background: rgba(var(--accent-rgb), 0.15); } a.btn-banner { text-decoration: none; } .char-banner-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .xp-label, .xp-next { font-size: 0.75rem; color: var(--banner-text-dim); } .xp-progress { flex: 1; height: 6px; background: var(--xp-track-bg); border-radius: 3px; overflow: hidden; } .xp-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.2s; } .char-banner-actions { display: flex; gap: 0.5rem; align-items: center; } .char-banner-actions .btn-ghost { color: var(--btn-ghost-banner); border-color: var(--btn-ghost-banner-border); } .char-banner-actions .btn-ghost:hover { color: var(--banner-text); border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); } .save-status { font-size: 0.8rem; color: var(--banner-text-dim); margin-left: 0.25rem; } .save-status.saved { color: var(--success); } .save-status.error { color: var(--danger); } .auth-status, .auth-user { display: flex; align-items: center; gap: 0.5rem; } .auth-user span { font-size: 0.9rem; color: var(--banner-text); } .btn-gated-by-auth:disabled { opacity: 0.6; cursor: not-allowed; } /* Auth modal */ .auth-modal-content { max-width: 360px; } .settings-modal-content { max-width: 320px; } .settings-modal-content h3 { margin-top: 0; margin-bottom: 1rem; } .settings-modal-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .settings-modal-actions .btn { justify-content: center; } .auth-modal-content label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--ink-muted); } .auth-modal-content input { width: 100%; padding: 0.5rem 0.6rem; margin-top: 0.25rem; border: 1px solid var(--grey-border); border-radius: 4px; font-size: 1rem; box-sizing: border-box; } .password-input-wrap { position: relative; display: block; margin-top: 0.25rem; } .password-input-wrap input { margin-top: 0; padding-right: 4.25rem; } .password-toggle { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); padding: 0.25rem 0.5rem; font-size: 0.8rem; color: var(--ink-muted); background: transparent; border: none; cursor: pointer; border-radius: 4px; } .password-toggle:hover { color: var(--accent); background: rgba(var(--accent-rgb), 0.08); } .auth-error { padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; background: rgba(185, 28, 28, 0.1); color: var(--danger); border-radius: 4px; font-size: 0.9rem; } .auth-form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .btn { font-family: var(--font-body); font-size: 0.95rem; padding: 0.5rem 1rem; border-radius: var(--radius); cursor: pointer; border: 1px solid transparent; transition: background 0.2s, color 0.2s; } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent-dark); } .btn-primary:hover { background: var(--accent-light); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--grey-border); } .btn-ghost:hover { background: rgba(var(--accent-rgb), 0.08); border-color: var(--accent); color: var(--accent); } /* Main sheet layout: left (stats/skills) | right (combat/tabs) */ .sheet { display: grid; grid-template-columns: 320px 1fr; gap: 0.75rem; padding: 0 1rem 1rem; align-items: start; } .sheet-left { display: flex; flex-direction: column; gap: 0.5rem; } .sheet-right { display: flex; flex-direction: column; gap: 0.5rem; } @media (max-width: 900px) { .sheet { grid-template-columns: 1fr; } } .card { background: var(--card-bg); border-radius: var(--radius); padding: 0.65rem 0.9rem; box-shadow: 0 2px 8px var(--shadow); border: 1px solid var(--grey-border); } /* Compact cards for small content */ .card-saves, .card-abilities, .card-dice, .card-combat, .card-notepad { padding: 0.5rem 0.85rem; } .card-saves h2, .card-abilities h2, .card-dice h2, .card-combat h2, .card-notepad h2 { margin-bottom: 0.35rem; } .card-notepad .notepad-search-row { margin-bottom: 0.5rem; } .card-notepad textarea { display: block; width: 100%; } /* Tighter spacing in compact cards */ .card-saves .saves-list { gap: 0.2rem; } .card-combat .combat-grid { gap: 0.4rem 0.75rem; } .card-combat .death-saves { margin-top: 0.5rem; padding-top: 0.5rem; } /* Senses */ .card-senses h2 { margin-bottom: 0.35rem; } .card-senses { padding: 0.5rem 0.85rem; } .senses-list { display: flex; flex-direction: column; gap: 0.25rem; } .sense-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; } .sense-label { color: var(--ink-muted); } .sense-value { font-weight: 600; color: var(--accent); } /* Tools & Languages */ .card-tools-langs { padding: 0.5rem 0.85rem; } .card-tools-langs h2 { margin-bottom: 0.35rem; } .tools-langs-list { display: flex; flex-direction: column; gap: 0.4rem; } .tl-row { display: flex; flex-direction: column; gap: 0.15rem; } .tl-label { font-size: 0.75rem; font-weight: 600; color: var(--ink-muted); } .tl-row input { padding: 0.3rem 0.5rem; border: 1px solid var(--grey-border); border-radius: 4px; background: var(--card-bg); font-size: 0.85rem; font-family: var(--font-body); } /* Quick stats (Proficiency, Speed, Inspiration) */ .card-quick-stats { padding: 0.5rem 0.85rem; } .card-quick-stats h2 { margin-bottom: 0.35rem; } .quick-stats-grid { display: flex; flex-direction: column; gap: 0.5rem; } .quick-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.15rem; } .quick-stat label { display: block; font-size: 0.7rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; } .quick-stat .stat-value { font-weight: 700; font-size: 1rem; color: var(--accent); } .quick-stat .stat-input { width: 3rem; padding: 0.25rem; text-align: center; font-size: 0.9rem; border: 1px solid var(--grey-border); } .quick-stat .stat-input--checkbox { width: auto; cursor: pointer; accent-color: var(--accent, #0d9488); border-radius: 4px; } .quick-stat-inline { display: inline-flex; align-items: center; gap: 0.25rem; } /* Tabbed content */ .card-tabs .tabs-nav { display: flex; gap: 0; border-bottom: 2px solid var(--grey-border); margin: -0.65rem -0.9rem 0.65rem; padding: 0 0.65rem; } .tab-btn { background: none; border: none; padding: 0.5rem 1rem; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.2s, border-color 0.2s; } .tab-btn:hover { color: var(--accent); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-pane.hidden { display: none; } .inventory-toolbar { margin-bottom: 0.5rem; } .inventory-toolbar .btn-sm { font-size: 0.9rem; padding: 0.4rem 0.75rem; } /* Actions tab – notepad and search */ .actions-notepad-wrap { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .actions-notepad-label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink); } .actions-notepad-wrap textarea { min-height: 6em; } .notepad-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .notepad-search-label { font-size: 0.85rem; color: var(--ink-muted); flex: 0 0 auto; } .notepad-search-input { flex: 1; min-width: 8rem; padding: 0.4rem 0.5rem; border: 1px solid var(--grey-border); border-radius: var(--radius); font-size: 0.9rem; font-family: var(--font-body); } /* Notes tab sections */ .notes-sections { display: flex; flex-direction: column; gap: 0.75rem; } .notes-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: -0.25rem; } /* Spells tab */ .spells-hint { color: var(--ink-muted); font-size: 0.95rem; margin: 0 0 1rem; } .spells-limit-display { font-size: 0.9rem; font-weight: 600; color: var(--ink-muted); margin: 0 0 0.5rem; } .spells-limit-display.spells-limit-over { color: var(--danger); } .spells-tab-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .spells-slots-display { font-size: 0.9rem; font-weight: 600; color: var(--ink-muted); margin: 0; } .spell-slots-counter-wrap { padding: 0.5rem 0; margin-bottom: 0.5rem; border-top: 1px solid var(--grey-border); } .spell-slots-counter-title { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin: 0 0 0.25rem 0; } .spell-slots-counter-hint { font-size: 0.8rem; color: var(--ink-muted); margin: 0 0 0.5rem 0; } .spell-slots-counter-list { display: flex; flex-direction: column; gap: 0.35rem; } .spell-slots-counter-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .spell-slots-counter-label { font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); min-width: 4.5rem; } .spell-slots-counter-boxes { display: inline-flex; align-items: center; gap: 0.2rem; } .spell-slots-counter-boxes .spell-slot-cb { width: 1.1rem; height: 1.1rem; cursor: pointer; accent-color: var(--accent); } .spell-slots-counter-summary { font-size: 0.8rem; color: var(--ink-muted); margin-left: 0.25rem; } .spells-panel-wrap { display: flex; flex-direction: column; gap: 0.5rem; } .spells-panel-wrap-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } .spells-collapsible { display: flex; flex-direction: column; gap: 0.35rem; } .spells-collapse-btn { display: flex; align-items: center; gap: 0.35rem; width: 100%; padding: 0.4rem 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--ink-muted); background: rgba(0, 0, 0, 0.04); border: 1px solid var(--grey-border); border-radius: var(--radius); cursor: pointer; font-family: var(--font-body); text-align: left; } .spells-collapse-btn:hover { color: var(--accent); border-color: var(--accent); } .spells-collapse-icon { font-size: 0.7rem; flex-shrink: 0; } .spells-collapse-body { overflow: hidden; } .spells-collapse-body.spells-collapse-closed { display: none; } @media (max-width: 700px) { .spells-panel-wrap-inner { grid-template-columns: 1fr; } } .spells-panel { display: flex; flex-direction: column; gap: 0.5rem; } .spells-panel-title { font-size: 0.9rem; font-weight: 600; color: var(--ink-muted); margin: 0 0 0.25rem; } .spells-search { padding: 0.4rem 0.6rem; border: 1px solid var(--grey-border); border-radius: var(--radius); font-size: 0.9rem; } .spells-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--grey-border); border-radius: var(--radius); padding: 0.35rem; background: var(--card-bg); } .spells-list-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; font-size: 0.9rem; border-radius: 3px; } .spells-list-row:hover { background: rgba(0, 0, 0, 0.04); } .spells-list-row .spell-level-tag { flex-shrink: 0; font-size: 0.75rem; color: var(--ink-muted); } .spells-list-row .btn { margin-left: auto; } .spell-add-btn--at-limit { opacity: 0.45; cursor: not-allowed; } .spell-add-btn--at-limit:hover { opacity: 0.5; } .spells-known-list .spells-list-row { justify-content: space-between; } .spell-granted-tag { font-size: 0.85em; color: var(--text-muted, #666); font-style: italic; } .spells-known-granted .spell-granted-tag { margin-left: auto; } .spell-tooltip-trigger { cursor: help; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; } .spell-tooltip-trigger:hover { color: var(--accent); } /* Background tab */ .background-subnav { display: flex; gap: 0.25rem; margin-bottom: 1rem; } .bg-sub-btn { padding: 0.35rem 0.75rem; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--grey-border); border-radius: 4px; background: var(--card-bg); color: var(--ink-muted); cursor: pointer; font-family: var(--font-body); transition: background 0.2s, color 0.2s, border-color 0.2s; } .bg-sub-btn:hover { color: var(--accent); border-color: var(--accent); } .bg-sub-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .bg-section { margin-bottom: 1.25rem; } .bg-section.hidden-by-filter { display: none; } .bg-section-heading { font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.5rem; padding-bottom: 0.25rem; } .background-display { font-size: 0.95rem; line-height: 1.5; } .background-display .bg-name { font-weight: 700; font-size: 1.1rem; color: var(--ink); margin-bottom: 0.25rem; } .background-display .bg-features { color: var(--ink-muted); white-space: pre-line; } .characteristics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1.5rem; } .characteristics-grid label { display: flex; flex-direction: column; gap: 0.15rem; } .char-label { font-size: 0.75rem; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; } .characteristics-grid input { padding: 0.35rem 0.5rem; border: 1px solid var(--grey-border); border-radius: 4px; background: var(--card-bg); font-size: 0.9rem; } .personality-fields { display: flex; flex-direction: column; gap: 0.75rem; } .personality-label { font-size: 0.8rem; font-weight: 600; color: var(--ink); margin-bottom: -0.2rem; } .personality-fields textarea { min-height: 3em; } /* Manage modal */ .manage-modal-content { max-width: 520px; } .portrait-choose { margin-bottom: 1rem; } .portrait-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); margin-bottom: 0.35rem; } .portrait-row { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; } .portrait-preview-wrap { width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--radius); overflow: hidden; background: rgba(0, 0, 0, 0.06); border: 1px solid var(--grey-border); display: flex; align-items: center; justify-content: center; } .portrait-preview { width: 100%; height: 100%; object-fit: cover; } .portrait-preview-placeholder { font-size: 0.75rem; color: var(--ink-muted); padding: 0.25rem; text-align: center; } .portrait-inputs { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 0.5rem; } .portrait-file { font-size: 0.85rem; } .portrait-inputs label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--ink-muted); } .portrait-inputs label input { padding: 0.35rem 0.5rem; border: 1px solid var(--grey-border); border-radius: 4px; font-size: 0.9rem; } .scene-choose { margin-bottom: 1rem; } .scene-choose-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); margin-bottom: 0.35rem; } .manage-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--grey-border); } .btn-danger { color: var(--danger); border-color: var(--danger); } .btn-danger:hover { background: rgba(185, 28, 28, 0.1); border-color: var(--danger); } /* Reference database modal */ .reference-modal-content { max-width: 1100px; max-height: 85vh; display: flex; flex-direction: column; } .reference-modal-content h3 { margin-bottom: 0.75rem; } .reference-subnav { display: flex; gap: 0.25rem; margin-bottom: 0.5rem; } .ref-sub-btn { padding: 0.35rem 0.75rem; font-size: 0.85rem; font-weight: 600; border: 1px solid var(--grey-border); border-radius: 4px; background: var(--card-bg); color: var(--ink-muted); cursor: pointer; font-family: var(--font-body); } .ref-sub-btn:hover { color: var(--accent); border-color: var(--accent); } .ref-sub-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .reference-search input { width: 100%; padding: 0.4rem 0.6rem; margin-bottom: 0.75rem; border: 1px solid var(--grey-border); border-radius: 4px; font-size: 0.9rem; } .reference-content { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; min-height: 320px; overflow: hidden; } .ref-list { overflow-y: auto; border: 1px solid var(--grey-border); border-radius: 4px; padding: 0.25rem; } .ref-list-item { padding: 0.4rem 0.5rem; font-size: 0.9rem; cursor: pointer; border-radius: 3px; } .ref-list-item:hover { background: rgba(var(--accent-rgb), 0.1); } .ref-list-item.selected { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); font-weight: 600; } .ref-list-item .spell-level-tag { font-size: 0.75rem; color: var(--ink-muted); margin-right: 0.35rem; } .ref-list-item.selected .spell-level-tag { color: var(--accent); opacity: 0.9; } .ref-loading { padding: 1rem; color: var(--ink-muted); font-size: 0.9rem; } .ref-loading.ref-error { color: var(--danger); } .ref-detail { overflow-y: auto; padding: 0.75rem; background: rgba(0,0,0,0.03); border-radius: 4px; font-size: 0.9rem; line-height: 1.5; } .ref-detail h4 { margin: 0 0 0.5rem; color: var(--accent); font-size: 1rem; } .ref-detail .ref-meta { font-size: 0.8rem; color: var(--ink-muted); margin-bottom: 0.5rem; } .ref-detail .ref-desc { white-space: pre-line; } /* Collapsible sections in rules detail (by ### headings) */ .ref-detail-section { margin-top: 0.5rem; border: 1px solid var(--grey-border); border-radius: 4px; overflow: hidden; } .ref-detail-section-header { width: 100%; display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.65rem; text-align: left; font-size: 0.95rem; font-weight: 600; color: var(--ink); background: rgba(0,0,0,0.04); border: none; cursor: pointer; font-family: var(--font-body); } .ref-detail-section-header:hover { background: rgba(0,0,0,0.07); } .ref-detail-section-chevron { display: inline-block; font-size: 0.65rem; color: var(--ink-muted); transition: transform 0.2s ease; } .ref-detail-section--collapsed .ref-detail-section-chevron { transform: rotate(-90deg); } .ref-detail-section-title { flex: 1; } .ref-detail-section-body { padding: 0.5rem 0.75rem; background: var(--card-bg); border-top: 1px solid var(--grey-border); max-height: 500px; overflow: hidden; transition: max-height 0.25s ease; } .ref-detail-section--collapsed .ref-detail-section-body { max-height: 0; padding-top: 0; padding-bottom: 0; border-top: none; overflow: hidden; visibility: hidden; } .ref-detail-section-body .ref-desc { margin: 0; white-space: pre-line; } .reference-credit { margin-top: 0.75rem; font-size: 0.8rem; color: var(--ink-muted); } .reference-credit a { color: var(--accent); } @media (max-width: 600px) { .reference-content { grid-template-columns: 1fr; } } /* Spells tab */ .spell-filters { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; } .spell-filters label { display: flex; flex-direction: column; gap: 0.25rem; } .spell-filter-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; } .spell-filters select { padding: 0.4rem 0.6rem; min-width: 140px; border: 1px solid var(--grey-border); border-radius: 4px; background: var(--card-bg); font-size: 0.9rem; } .spell-list-container { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; min-height: 360px; } .spell-list-pane { overflow-y: auto; border: 1px solid var(--grey-border); border-radius: 4px; padding: 0.25rem; } .spell-list-item { padding: 0.4rem 0.5rem; font-size: 0.9rem; cursor: pointer; border-radius: 3px; } .spell-list-item:hover { background: rgba(var(--accent-rgb), 0.1); } .spell-list-item.selected { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); font-weight: 600; } .spell-list-item .spell-level-tag { font-size: 0.75rem; color: var(--ink-muted); margin-right: 0.35rem; } .spell-detail-pane { overflow-y: auto; padding: 1rem; background: rgba(0,0,0,0.03); border-radius: 4px; font-size: 0.9rem; line-height: 1.5; } .spell-detail-pane h4 { margin: 0 0 0.5rem; color: var(--accent); font-size: 1.1rem; } .spell-detail-pane .spell-meta { font-size: 0.8rem; color: var(--ink-muted); margin-bottom: 0.75rem; } .spell-detail-pane .spell-desc { white-space: pre-line; } @media (max-width: 600px) { .spell-list-container { grid-template-columns: 1fr; } } .card h2 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 0.25rem; letter-spacing: 0.05em; } /* Info grid */ .info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.45rem 0.75rem; } .info-grid label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--ink-muted); } .info-grid input, .info-grid select { padding: 0.35rem 0.5rem; border: 1px solid var(--grey-border); border-radius: 4px; background: var(--card-bg); font-family: var(--font-body); font-size: 0.9rem; } .info-grid .custom-input { margin-top: 0.25rem; } .info-grid .custom-input.hidden { display: none; } /* Features auto block */ .features-auto { padding: 0.5rem 0.65rem; margin-bottom: 0.5rem; background: rgba(0, 0, 0, 0.04); border-radius: 4px; border-left: 3px solid var(--accent); font-size: 0.875rem; white-space: pre-line; min-height: 1.25rem; } .features-auto:empty { display: none; } .features-custom-label { display: block; font-size: 0.8rem; color: var(--ink-muted); margin-bottom: 0.25rem; } .feature-choices-btn { margin-bottom: 0.5rem; } .feature-choices-modal-content { max-width: 480px; } .feature-choices-hint { font-size: 0.9rem; color: var(--ink-muted); margin: 0 0 1rem; } .feature-choices-empty { font-size: 0.95rem; color: var(--ink-muted); margin: 0 0 1rem; } .feature-choices-section { border: 1px solid var(--grey-border); border-radius: 6px; margin-bottom: 0.75rem; overflow: hidden; } .feature-choices-section-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6rem 0.75rem; font-weight: 600; font-size: 0.95rem; text-align: left; background: var(--grey-bg); border: none; cursor: pointer; color: inherit; } .feature-choices-section-header:hover { background: var(--grey-border); } .feature-choices-section-chevron { font-size: 0.75rem; opacity: 0.8; } .feature-choices-section-body { padding: 0.75rem 1rem; background: #fff; } .feature-choices-section-body.collapsed { display: none; } .feature-choice-block { margin-bottom: 1rem; } .feature-choice-block:last-child { margin-bottom: 0; } .feature-choices-subclass { margin-top: 0.5rem; margin-bottom: 0.75rem; margin-left: 0.5rem; border: 1px solid var(--grey-border); border-radius: 4px; overflow: hidden; border-left: 3px solid var(--primary, #2563eb); } .feature-choices-subclass-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.45rem 0.6rem; font-weight: 600; font-size: 0.9rem; text-align: left; background: var(--grey-bg); border: none; cursor: pointer; color: inherit; } .feature-choices-subclass-header:hover { background: var(--grey-border); } .feature-choices-subclass-chevron { font-size: 0.7rem; opacity: 0.8; } .feature-choices-subclass-body { padding: 0.5rem 0.75rem; background: #fff; } .feature-choices-subclass-body.collapsed { display: none; } .feature-choices-family { margin-bottom: 0.75rem; border: 1px solid var(--grey-border); border-radius: 4px; overflow: hidden; } .feature-choices-family:last-child { margin-bottom: 0; } .feature-choices-family-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.45rem 0.6rem; font-weight: 600; font-size: 0.9rem; text-align: left; background: var(--grey-bg); border: none; cursor: pointer; color: inherit; } .feature-choices-family-header:hover { background: var(--grey-border); } .feature-choices-family-chevron { font-size: 0.7rem; opacity: 0.8; } .feature-choices-family-body { padding: 0.5rem 0.75rem; background: #fff; } .feature-choices-family-body.collapsed { display: none; } .feature-choice-label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.95rem; } .feature-choice-block select { width: 100%; padding: 0.5rem; border: 1px solid var(--grey-border); border-radius: 4px; background: #fff; font-family: var(--font-body); font-size: 0.9rem; } /* Abilities */ .abilities-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; } @media (max-width: 700px) { .abilities-grid { grid-template-columns: repeat(3, 1fr); } } .ability-block { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 0; } .ability-label { font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; } .ability-score { width: 100%; max-width: 2.75rem; min-width: 0; text-align: center; padding: 0.2rem 0.25rem; border: 1px solid var(--grey-border); border-radius: 4px; background: var(--card-bg); font-size: 0.85rem; color: var(--ink-muted); box-sizing: border-box; } .ability-mod { font-weight: 700; font-size: 1.1rem; color: var(--accent); min-height: 1.25rem; } .roll-btn, .skill-roll { font-size: 0.75rem; padding: 0.2rem 0.4rem; background: var(--accent); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-family: var(--font-body); } .roll-btn:hover, .skill-roll:hover { background: var(--accent-light); } /* Saves */ .saves-list, .skills-list { display: flex; flex-direction: column; gap: 0.25rem; } .save-row, .skill-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; cursor: pointer; } .save-row span, .skill-row span:not(.skill-ability) { min-width: 2rem; font-weight: 600; color: var(--accent); } .skill-ability { font-size: 0.8rem; color: var(--ink-muted); margin-left: 0.25rem; } .skill-roll { margin-left: auto; } /* Combat */ .combat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.5rem 0.75rem; } .combat-field label { display: block; font-size: 0.75rem; color: var(--ink-muted); margin-bottom: 0.15rem; } .combat-field input { width: 100%; padding: 0.35rem; border: 1px solid var(--grey-border); border-radius: 4px; background: var(--card-bg); font-size: 0.9rem; } .combat-saves-row { display: flex; gap: 0.75rem; align-items: stretch; flex-wrap: wrap; } .combat-saves-row .card-combat { max-width: 280px; flex-shrink: 0; } .combat-saves-stack { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; flex: 0 0 auto; } .combat-saves-stack .card-saves { max-width: 160px; flex-shrink: 0; flex: 1; min-height: 0; padding: 0.4rem 0.6rem; } .combat-saves-stack .card-saves h2 { margin-bottom: 0.25rem; } .combat-saves-stack .card-saves .saves-list { gap: 0.1rem; } .combat-saves-stack .card-quick-stats { flex-shrink: 0; padding: 0.35rem 0.6rem; } .combat-saves-stack .card-quick-stats .quick-stats-grid { gap: 0.3rem; } .combat-saves-stack .card-quick-stats .quick-stat { gap: 0.05rem; } .combat-saves-stack .card-quick-stats .quick-stat label { margin-bottom: 0; font-size: 0.65rem; } /* PB/Speed/Inspiration below Dice Roller (horizontal strip) */ .card-quick-stats--below-dice { padding: 0.4rem 0.75rem; } .card-quick-stats--below-dice .quick-stats-grid { flex-direction: row; flex-wrap: wrap; gap: 1rem; justify-content: flex-start; } .card-quick-stats--below-dice .quick-stat { flex-direction: column; align-items: center; } /* Dice roller in top row (compact, fills space to the right of Saving Throws) */ .combat-saves-row .card-dice--compact { flex: 1; min-width: 0; padding: 0.4rem 0.65rem; } .combat-saves-row .card-dice--compact h2 { margin-bottom: 0.25rem; } .combat-saves-row .card-dice--compact .dice-controls { margin-bottom: 0.35rem; } .combat-saves-row .card-dice--compact .dice-row { margin-bottom: 0.25rem; gap: 0.25rem; } .combat-saves-row .card-dice--compact .dice-row input, .combat-saves-row .card-dice--compact .dice-row select { padding: 0.25rem 0.3rem; font-size: 0.85rem; } .combat-saves-row .card-dice--compact .dice-row input[type="number"] { width: 2.75rem; } .combat-saves-row .card-dice--compact .quick-dice { gap: 0.25rem; } .combat-saves-row .card-dice--compact .quick-roll { padding: 0.2rem 0.4rem; font-size: 0.75rem; } .combat-saves-row .card-dice--compact .mixed-dice { margin-top: 0.5rem; padding-top: 0.5rem; } .combat-saves-row .card-dice--compact .mixed-dice-header { margin-bottom: 0.25rem; } .combat-saves-row .card-dice--compact .mixed-dice-title, .combat-saves-row .card-dice--compact .roll-history-title { font-size: 0.85rem; } .combat-saves-row .card-dice--compact .mixed-dice-hint, .combat-saves-row .card-dice--compact .mixed-dice-add-label { font-size: 0.75rem; } .combat-saves-row .card-dice--compact .mixed-add-die { padding: 0.15rem 0.35rem; font-size: 0.75rem; } .combat-saves-row .card-dice--compact .roll-history-header { margin-bottom: 0.25rem; } .combat-saves-row .card-dice--compact .dice-result { font-size: 0.9rem; margin-top: 0.35rem; } .card-combat { border-left: 3px solid var(--accent); } .death-saves { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--grey-border); } .death-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .death-row input { width: 2.5rem; text-align: center; padding: 0.25rem; } /* Dice roller */ .dice-controls { margin-bottom: 0.5rem; } .dice-row { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.4rem; } .dice-row input, .dice-row select { padding: 0.35rem; border: 1px solid var(--grey-border); border-radius: 4px; background: var(--card-bg); font-size: 0.9rem; } .dice-row input[type="number"] { width: 3.5rem; } .quick-dice { display: flex; flex-wrap: wrap; gap: 0.35rem; } .quick-roll { padding: 0.3rem 0.6rem; font-size: 0.85rem; background: var(--card-bg); color: var(--ink); border: 1px solid var(--grey-border); border-radius: 4px; cursor: pointer; font-family: var(--font-body); } .quick-roll:hover { background: var(--accent); color: #fff; border-color: var(--accent); } /* Mixed dice (multiple types in one roll) */ .mixed-dice { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--grey-border); } .mixed-dice-header { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem; } .mixed-dice.mixed-dice--collapsed .mixed-dice-header { margin-bottom: 0; } .mixed-dice-toggle { padding: 0.2rem; background: none; border: none; cursor: pointer; color: var(--ink-muted); font-size: 0.7rem; line-height: 1; border-radius: 3px; } .mixed-dice-toggle:hover { color: var(--accent); } .mixed-dice-chevron { display: inline-block; transition: transform 0.2s ease; } .mixed-dice.mixed-dice--collapsed .mixed-dice-chevron { transform: rotate(-90deg); } .mixed-dice-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--ink); flex: 1; cursor: pointer; } .mixed-dice-body { max-height: 30rem; overflow: hidden; transition: max-height 0.25s ease; } .mixed-dice.mixed-dice--collapsed .mixed-dice-body { max-height: 0; margin: 0; padding: 0; overflow: hidden; visibility: hidden; } .mixed-dice-hint { margin: 0 0 0.4rem 0; font-size: 0.8rem; color: var(--ink-muted); } .mixed-pool-list { min-height: 2rem; padding: 0.4rem 0; margin-bottom: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .mixed-pool-empty { font-size: 0.85rem; color: var(--ink-muted); font-style: italic; } .mixed-pool-chip { padding: 0.2rem 0.45rem; font-size: 0.8rem; background: var(--card-bg); border: 1px solid var(--grey-border); border-radius: 4px; cursor: pointer; color: var(--ink); font-family: var(--font-body); } .mixed-pool-chip:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .mixed-dice-actions { display: flex; flex-direction: column; gap: 0.5rem; } .mixed-dice-add { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; } .mixed-dice-add-label { font-size: 0.85rem; color: var(--ink-muted); margin-right: 0.2rem; } .mixed-add-die { padding: 0.25rem 0.5rem; font-size: 0.82rem; background: var(--card-bg); color: var(--ink); border: 1px solid var(--grey-border); border-radius: 4px; cursor: pointer; font-family: var(--font-body); } .mixed-add-die:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .mixed-dice-roll-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .mixed-modifier-label { font-size: 0.9rem; color: var(--ink); display: flex; align-items: center; gap: 0.35rem; } .mixed-modifier-input { width: 3rem; padding: 0.3rem; border: 1px solid var(--grey-border); border-radius: 4px; background: var(--card-bg); font-size: 0.9rem; } .dice-result { min-height: 2rem; padding: 0.5rem; background: rgba(0,0,0,0.04); border-radius: 4px; border-left: 3px solid var(--accent); font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); } .dice-result .roll-detail { font-size: 0.85rem; color: var(--ink-muted); margin-top: 0.25rem; } /* Roll result toast (corner popup, max 5s) */ #roll-toast-container { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 9999; pointer-events: none; transition: opacity 0.4s ease; } @media print { #roll-toast-container { display: none !important; } } #roll-toast-container.roll-toast-hidden { opacity: 0; } .roll-toast { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; padding: 0.75rem 1rem; background: var(--card-bg); border: 1px solid var(--grey-border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); font-family: var(--font-display); } .roll-toast-label { font-size: 0.8rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; } .roll-toast-total { font-size: 1.75rem; font-weight: 700; color: var(--ink); line-height: 1.2; } .roll-history { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--grey-border); } .roll-history-header { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem; } .roll-history.roll-history--collapsed .roll-history-header { margin-bottom: 0; } .roll-history-toggle { padding: 0.2rem; background: none; border: none; cursor: pointer; color: var(--ink-muted); font-size: 0.7rem; line-height: 1; border-radius: 3px; } .roll-history-toggle:hover { color: var(--accent); } .roll-history-chevron { display: inline-block; transition: transform 0.2s ease; } .roll-history.roll-history--collapsed .roll-history-chevron { transform: rotate(-90deg); } .roll-history-title { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink); flex: 1; cursor: pointer; } .roll-history-body { max-height: 20rem; overflow: hidden; transition: max-height 0.25s ease; } .roll-history.roll-history--collapsed .roll-history-body { max-height: 0; margin: 0; padding: 0; overflow: hidden; visibility: hidden; } .roll-history-list { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: var(--ink); } .roll-history-list li { padding: 0.25rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; } .roll-history-list li:last-child { border-bottom: none; } .roll-history-label { font-weight: 600; color: var(--accent); min-width: 5rem; } .roll-history-detail { color: var(--ink-muted); font-size: 0.8rem; } .roll-history-empty { color: var(--ink-muted); font-style: italic; } /* Textareas */ textarea { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--grey-border); border-radius: 4px; background: var(--card-bg); font-family: var(--font-body); font-size: 0.875rem; line-height: 1.4; resize: vertical; min-height: 4.5em; } /* Modal */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; } .modal.hidden { display: none; } .portrait-lightbox { background: rgba(0, 0, 0, 0.85); cursor: pointer; } .portrait-lightbox-img { max-width: 90vw; max-height: 85vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); cursor: default; } .portrait-lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; padding: 0; font-size: 1.75rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, 0.15); border: none; border-radius: var(--radius); cursor: pointer; z-index: 101; display: flex; align-items: center; justify-content: center; } .portrait-lightbox-close:hover { background: rgba(255, 255, 255, 0.25); } .inventory-add-modal-content { max-width: 480px; } .inventory-add-hint { font-size: 0.9rem; color: var(--ink-muted); margin: 0 0 0.75rem; } .inventory-add-search { width: 100%; padding: 0.5rem 0.65rem; margin-bottom: 0.75rem; border: 1px solid var(--grey-border); border-radius: var(--radius); font-size: 1rem; } .inventory-add-list { max-height: 50vh; overflow-y: auto; margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.25rem; } .inventory-add-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0.65rem; text-align: left; background: var(--card-bg); border: 1px solid var(--grey-border); border-radius: var(--radius); cursor: pointer; font-family: var(--font-body); font-size: 0.9rem; } .inventory-add-item:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); } .inventory-add-item-name { font-weight: 600; color: var(--ink); } .inventory-add-item-type { font-size: 0.8rem; color: var(--ink-muted); } .inventory-add-loading, .inventory-add-empty { padding: 1rem; text-align: center; color: var(--ink-muted); font-size: 0.95rem; } .inventory-add-loading.ref-error { color: var(--danger); } .modal-content { background: var(--card-bg); padding: 1.5rem; border-radius: var(--radius); max-width: 400px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.35); border: 1px solid var(--accent); } .modal-content.reference-modal-content { max-width: 1100px; } .modal-content h3 { font-family: var(--font-display); margin: 0 0 1rem; color: var(--ink); } #character-list { list-style: none; padding: 0; margin: 0 0 1rem; max-height: 280px; overflow-y: auto; } #character-list li { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--grey-border); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } #character-list li:hover { background: rgba(var(--accent-rgb), 0.08); } #character-list .char-list-empty { cursor: default; } #character-list .char-list-restore { cursor: default; border-bottom: none; } #character-list .char-list-restore:hover { background: transparent; } #character-list .char-list-name { flex: 1; min-width: 0; } #character-list .char-level { font-size: 0.85rem; color: var(--ink-muted); flex-shrink: 0; } #character-list .btn-delete-char { flex-shrink: 0; padding: 0.25rem 0.5rem; font-size: 0.8rem; color: var(--danger); border-color: var(--danger); cursor: pointer; } #character-list .btn-delete-char:hover { background: rgba(185, 28, 28, 0.1); } /* Character Builder */ .builder-modal .builder-content { background: var(--card-bg); border-radius: var(--radius); max-width: 640px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.25); border: 1px solid var(--accent); } .builder-header { padding: 1rem 1.5rem; border-bottom: 2px solid var(--accent); } .builder-header h2 { font-family: var(--font-display); margin: 0 0 0.75rem; font-size: 1.25rem; } .builder-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8rem; color: var(--ink-muted); } .builder-steps .step { padding: 0.2rem 0.5rem; border-radius: 4px; } .builder-steps .step.active { color: var(--accent); font-weight: 600; } .builder-body { padding: 1.5rem; overflow-y: auto; flex: 1; } .builder-step h3 { font-family: var(--font-display); margin: 0 0 0.5rem; font-size: 1.1rem; } .builder-step label { display: block; margin-bottom: 0.75rem; } .builder-step label input { display: block; margin-top: 0.25rem; padding: 0.5rem; width: 100%; max-width: 280px; border: 1px solid var(--grey-border); border-radius: 4px; } .builder-hint { font-size: 0.9rem; color: var(--ink-muted); margin: 0 0 1rem; } .builder-equipment-label { display: block; margin-bottom: 0.25rem; font-weight: 500; } .builder-equipment-textarea { display: block; width: 100%; min-height: 180px; padding: 0.5rem; border: 1px solid var(--grey-border); border-radius: 4px; font-family: inherit; font-size: 0.95rem; resize: vertical; } #builder-equipment-extra.builder-equipment-textarea { min-height: 0; } .builder-equipment-list { margin-bottom: 1rem; max-height: 280px; overflow-y: auto; } .builder-equipment-choice { margin-bottom: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--grey-border); } .builder-equipment-choice:last-child { border-bottom: none; } .builder-equipment-choice-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); margin-bottom: 0.35rem; } .builder-equipment-options { display: flex; flex-direction: column; gap: 0.35rem; } .builder-equipment-option { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; font-size: 0.95rem; } .builder-equipment-option input[type="radio"] { margin-top: 0.2rem; flex-shrink: 0; } .builder-equipment-fixed { font-size: 0.95rem; padding: 0.35rem 0; color: var(--ink); } .builder-option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; } .builder-subrace-wrap { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--grey-border); } .builder-subrace-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem; } .builder-option { padding: 0.75rem; border: 2px solid var(--grey-border); border-radius: var(--radius); cursor: pointer; text-align: center; font-weight: 500; transition: border-color 0.2s, background 0.2s; } .builder-option:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); } .builder-option.selected { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); color: var(--accent); } .ability-method-row { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .method-option { cursor: pointer; font-size: 0.95rem; } .ability-assign-area { margin-top: 1rem; } .ability-instruction { margin: 0 0 0.5rem; font-size: 0.9rem; } .ability-assign-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1rem; margin-bottom: 0.75rem; } .ability-assign-grid label { display: flex; align-items: center; gap: 0.5rem; } .ability-assign-input { width: 3.5rem; padding: 0.35rem; text-align: center; } .ability-method-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.85rem; } .pointbuy-status { margin-top: 0.5rem; font-size: 0.9rem; color: var(--ink-muted); } .builder-summary { background: rgba(0,0,0,0.04); padding: 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.95rem; line-height: 1.6; } .builder-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--grey-border); display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; } /* Feature & skill tooltips */ .feature-tooltip-trigger, .skill-tooltip-trigger { cursor: help; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; } .feature-tooltip-trigger:hover, .skill-tooltip-trigger:hover { color: var(--accent); } .dnd-tooltip { position: fixed; z-index: 1000; max-width: 320px; padding: 0.75rem 1rem; background: var(--ink); color: #f5f5f5; font-size: 0.85rem; line-height: 1.4; white-space: pre-line; border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; } .dnd-tooltip.visible { opacity: 1; visibility: visible; } /* ========== Responsive: maximize UX across screen sizes ========== */ /* Tablet and below: single column already at 900px; tighten spacing and make tabs scrollable */ @media (max-width: 700px) { .app { padding: 0; } .sheet { padding: 0 0.75rem 1rem; } .char-banner { padding: 0.75rem 1rem; } .char-banner-main { flex-wrap: wrap; gap: 0.5rem; } .char-banner-left { flex-wrap: wrap; gap: 0.5rem; } .char-banner-actions { flex-wrap: wrap; } /* Tabs: horizontal scroll on small screens so all tabs are reachable */ .card-tabs .tabs-nav { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; margin-left: -0.5rem; margin-right: -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } .tab-btn { flex-shrink: 0; padding: 0.55rem 0.85rem; font-size: 0.8rem; } /* Combat row: stack vertically on narrow screens for clearer reading */ .combat-saves-row { flex-direction: column; align-items: stretch; } .combat-saves-row .card-combat { max-width: none; } .combat-saves-stack { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .combat-saves-stack .card-saves { max-width: none; flex: 1 1 140px; } .combat-saves-row .card-dice--compact { min-width: 0; } /* Modals: use most of viewport with safe padding */ .modal { padding: 0.75rem; align-items: center; } .modal .modal-content { max-height: calc(100vh - 2rem); overflow-y: auto; } .scene-modal .modal-content { max-width: min(380px, calc(100vw - 1.5rem)); } .feature-choices-modal-content { max-width: min(480px, calc(100vw - 1.5rem)); } /* Notepad card: comfortable on small screens */ .card-notepad textarea { min-height: 5rem; } .notepad-search-row { flex-wrap: wrap; } .notepad-search-input { min-width: 0; } } /* Mobile: touch-friendly targets and tighter layout */ @media (max-width: 600px) { body { font-size: 15px; } .sheet { padding: 0 0.5rem 0.75rem; } .char-banner { padding: 0.6rem 0.75rem; margin-bottom: 0.5rem; } .char-portrait-wrap { width: 40px; height: 40px; } .card { padding: 0.5rem 0.65rem; } .card-saves, .card-abilities, .card-dice, .card-combat, .card-notepad { padding: 0.45rem 0.65rem; } /* Touch-friendly: minimum tap target ~44px where possible */ .btn, .tab-btn { min-height: 2.75rem; padding: 0.5rem 0.85rem; } .tab-btn { min-height: 2.5rem; } .btn-sm { min-height: 2.25rem; padding: 0.45rem 0.7rem; } .quick-roll, .scene-option { min-height: 2.25rem; padding: 0.4rem 0.6rem; } input[type="number"], input[type="text"], input[type="url"], select, textarea { min-height: 2.25rem; font-size: 16px; /* avoids iOS zoom on focus */ } textarea { min-height: 4rem; } .info-grid { grid-template-columns: repeat(2, 1fr); gap: 0.4rem 0.5rem; } .characteristics-grid { grid-template-columns: 1fr 1fr; } .landing-inner { padding: 0 0.5rem; } .landing-title { font-size: 1.5rem; } .btn-landing-cta { padding: 0.75rem 1.5rem; font-size: 1rem; } .dnd-tooltip { max-width: min(320px, calc(100vw - 2rem)); } } /* Very small screens (e.g. narrow phones) */ @media (max-width: 480px) { .sheet { padding: 0 0.4rem 0.6rem; } .abilities-grid { grid-template-columns: repeat(2, 1fr); } .combat-grid { grid-template-columns: repeat(2, 1fr); } .info-grid { grid-template-columns: 1fr; } .characteristics-grid { grid-template-columns: 1fr; } .landing-auth-links { flex-direction: column; width: 100%; } .landing-auth-links .btn { width: 100%; } } /* Touch devices: slightly larger hit areas for controls that are often tapped */ @media (hover: none) and (pointer: coarse) { .save-row, .skill-row { min-height: 2rem; padding: 0.15rem 0; } .ability-roll, .skill-roll { min-height: 2rem; padding: 0.3rem 0.5rem; } .scene-option { min-height: 2.5rem; } .bg-sub-btn { min-height: 2.25rem; } } /* Print / Save as PDF: hide UI chrome, show only the character sheet */ @media print { .no-print, .backdoor-overlay, .admin-panel, .landing-page, .char-banner, .modal, .builder-modal { display: none !important; } body, .app, #main-app { background: #fff; max-width: none; } .sheet { padding: 0; gap: 0.5rem; } .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; } /* Keep card backgrounds when printing (e.g. for readability) */ .card { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Hide dice roller, roll buttons, and in-sheet actions for a cleaner PDF */ .card-dice, .skill-roll, .quick-roll, .ability-roll, .btn-roll-dice, .feature-choices-btn { display: none !important; } /* Show all tab content when printing so nothing is missing */ .tab-pane { display: block !important; } .tab-pane.hidden { display: block !important; } .tabs-nav, .tab-btn, .background-subnav, .bg-sub-btn { display: none !important; } } /* ---------- Profile page ---------- */ .profile-page { min-height: 100vh; background: var(--bg-dark); } .profile-header { background: var(--accent); color: var(--banner-text); padding: 0.75rem 1rem; box-shadow: 0 2px 8px var(--shadow); } .profile-header-inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .profile-logo { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: inherit; text-decoration: none; } .profile-logo:hover { text-decoration: underline; } .profile-header-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .profile-header-right .btn-ghost { color: var(--btn-ghost-banner); border-color: var(--btn-ghost-banner-border); } .profile-header-right .btn-ghost:hover { background: rgba(255, 255, 255, 0.15); color: var(--banner-text); } .profile-username { font-size: 0.95rem; margin-right: 0.25rem; } .profile-main { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem; } .profile-section { margin-bottom: 2rem; } .profile-section-title { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 1rem; color: var(--banner-text); } .profile-info-card { background: var(--bg-darker); border-radius: var(--radius); padding: 1.25rem; border: 1px solid var(--banner-border); } .profile-data { display: flex; flex-direction: column; gap: 0.75rem; } .profile-field { margin: 0; font-size: 0.95rem; color: var(--banner-text-muted); } .profile-field-label { display: inline-block; min-width: 6rem; color: var(--banner-text-dim); font-weight: 600; } .profile-characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.25rem; } .profile-character-card { background: var(--bg-darker); border-radius: var(--radius); padding: 0; border: 1px solid var(--banner-border); display: flex; flex-direction: column; transition: border-color 0.15s, box-shadow 0.15s; overflow: hidden; } .profile-character-card:hover { border-color: var(--accent); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .profile-character-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; min-width: 0; } .profile-character-portrait-wrap { width: 100%; aspect-ratio: 1; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .profile-character-portrait-img { width: 100%; height: 100%; object-fit: cover; display: block; } .profile-character-portrait-placeholder { font-size: 0.8rem; color: var(--banner-text-dim); padding: 0.5rem; text-align: center; } .profile-character-card .profile-character-name, .profile-character-card .profile-character-meta { padding: 0 0.75rem; margin: 0; } .profile-character-card .profile-character-name { padding-top: 0.6rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--banner-border); margin-bottom: 0.25rem; } .profile-character-name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--banner-text); line-height: 1.2; } .profile-character-meta { font-size: 0.8rem; color: var(--banner-text-muted); padding-bottom: 0.75rem; } .profile-character-open { margin: 0 0.75rem 0.75rem; align-self: stretch; text-align: center; text-decoration: none; } .profile-character-updated { font-size: 0.8rem; color: var(--banner-text-dim); margin: 0; margin-top: auto; } .profile-character-open { margin-top: 0.5rem; align-self: flex-start; } .profile-characters-empty { color: var(--banner-text-muted); margin: 0; } .profile-characters-empty a { color: var(--accent-light); } [data-theme="light"] .profile-section-title, [data-theme="light"] .profile-character-name { color: var(--ink); } [data-theme="light"] .profile-field, [data-theme="light"] .profile-character-meta { color: var(--ink-muted); } [data-theme="light"] .profile-field-label, [data-theme="light"] .profile-character-updated { color: var(--ink-muted); } .profile-field-password { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .profile-password-masked { margin-right: 0.5rem; letter-spacing: 0.15em; } .profile-modal .modal-content { max-width: 380px; } .profile-modal-content label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--ink-muted); } .profile-modal-content input { width: 100%; padding: 0.5rem 0.6rem; margin-top: 0.25rem; border: 1px solid var(--grey-border); border-radius: 4px; box-sizing: border-box; } .profile-form-error { color: var(--danger); font-size: 0.9rem; margin-bottom: 0.75rem; } .profile-form-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }