/* DM Companion — design system Fonts: Cinzel (headings), Spectral (body), JetBrains Mono (stats/numbers) Palette: parchment tan / iron grey / oxblood red / brass gold Two variants on : .dmc-bright (Play Mode / Help — kid-friendly) and .dmc-gamebook (Rules Reference / Run Adventure — moodier). */ :root { --dmc-parchment: #f3e6c8; --dmc-parchment-dark: #e6d3a3; --dmc-iron: #3a3a3e; --dmc-iron-dark: #232326; --dmc-oxblood: #6e1f1f; --dmc-oxblood-bright: #8c2a2a; --dmc-brass: #b8863b; --dmc-brass-bright: #d4a75a; --dmc-ink: #2a2420; --dmc-white: #fffaf0; --dmc-font-heading: 'Cinzel', Georgia, serif; --dmc-font-body: 'Spectral', Georgia, serif; --dmc-font-mono: 'JetBrains Mono', 'Courier New', monospace; --dmc-radius: 12px; --dmc-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } .dmc-body { font-family: var(--dmc-font-body); color: var(--dmc-ink); line-height: 1.5; min-height: 100vh; } /* --- Bright variant: Play Mode, Adventures, Help (kid-friendly) --- */ .dmc-bright { background: var(--dmc-parchment); --dmc-accent: var(--dmc-oxblood-bright); --dmc-accent-2: var(--dmc-brass-bright); --dmc-surface: var(--dmc-white); --dmc-surface-border: var(--dmc-parchment-dark); } /* --- Gamebook variant: Rules Reference, Run Adventure (moodier) --- */ .dmc-gamebook { background: var(--dmc-iron-dark); color: var(--dmc-parchment); --dmc-accent: var(--dmc-oxblood); --dmc-accent-2: var(--dmc-brass); --dmc-surface: var(--dmc-iron); --dmc-surface-border: #4a4a50; } .dmc-app { display: flex; flex-direction: column; min-height: 100vh; } /* --- Top bar / nav --- */ .dmc-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--dmc-accent); color: var(--dmc-white); box-shadow: var(--dmc-shadow); position: sticky; top: 0; z-index: 20; } .dmc-brand { display: flex; align-items: center; gap: 0.5rem; color: var(--dmc-white); text-decoration: none; font-family: var(--dmc-font-heading); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; } .dmc-brand-icon { font-size: 1.3rem; } .dmc-nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; padding: 0.4rem; cursor: pointer; } .dmc-nav-toggle span { width: 22px; height: 2px; background: var(--dmc-white); display: block; } .dmc-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; } .dmc-nav-link { color: var(--dmc-white); text-decoration: none; padding: 0.4rem 0.75rem; border-radius: 8px; font-size: 0.95rem; opacity: 0.85; } .dmc-nav-link:hover { opacity: 1; background: rgba(255,255,255,0.12); } .dmc-nav-link.is-active { opacity: 1; background: rgba(255,255,255,0.22); font-weight: 600; } .dmc-search-form { display: flex; align-items: center; margin-left: 0.4rem; } .dmc-search-input { font-family: var(--dmc-font-body); font-size: 0.85rem; padding: 0.4rem 0.6rem; border-radius: 6px 0 0 6px; border: 1px solid transparent; background: rgba(255,255,255,0.15); color: var(--dmc-white); width: 140px; } .dmc-search-input::placeholder { color: rgba(255,255,255,0.7); } .dmc-search-input:focus { outline: none; background: rgba(255,255,255,0.25); } .dmc-search-submit { background: rgba(255,255,255,0.15); border: 1px solid transparent; border-radius: 0 6px 6px 0; color: var(--dmc-white); padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.85rem; } @media (max-width: 720px) { .dmc-search-form { margin: 0.5rem 0.75rem 0; } .dmc-search-input { flex: 1; width: auto; } .dmc-nav-toggle { display: flex; } .dmc-nav { display: none; width: 100%; flex-direction: column; order: 3; } .dmc-nav.is-open { display: flex; } .dmc-nav-link { padding: 0.6rem 0.75rem; } } /* --- Main content --- */ .dmc-main { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 1.25rem 1rem 5rem; } .dmc-page-title { font-family: var(--dmc-font-heading); font-weight: 700; color: var(--dmc-accent); margin: 0.25rem 0 1rem; font-size: 1.6rem; } .dmc-lede { font-size: 1.05rem; opacity: 0.85; margin-bottom: 1rem; } .dmc-note { font-size: 0.95rem; opacity: 0.75; border-left: 3px solid var(--dmc-accent-2); padding: 0.5rem 0.85rem; background: rgba(184, 134, 59, 0.08); border-radius: 0 8px 8px 0; } /* --- Cards --- */ .dmc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .dmc-card { background: var(--dmc-surface); border: 1px solid var(--dmc-surface-border); border-radius: var(--dmc-radius); padding: 1rem 1.1rem; box-shadow: var(--dmc-shadow); } .dmc-card-link { text-decoration: none; color: inherit; display: block; transition: transform 0.12s ease; } .dmc-card-link:hover { transform: translateY(-2px); } .dmc-card h2 { font-family: var(--dmc-font-heading); font-size: 1.05rem; margin: 0 0 0.35rem; color: var(--dmc-accent); } .dmc-card p { margin: 0; font-size: 0.92rem; opacity: 0.85; } .dmc-card-icon { font-size: 1.4rem; display: block; margin-bottom: 0.35rem; } /* --- Buttons / toolbar --- */ .dmc-toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .dmc-btn { font-family: var(--dmc-font-body); font-size: 0.95rem; padding: 0.55rem 1rem; border-radius: 8px; border: 1px solid var(--dmc-surface-border); background: var(--dmc-surface); color: var(--dmc-ink); text-decoration: none; cursor: pointer; } .dmc-gamebook .dmc-btn { color: var(--dmc-parchment); } .dmc-btn-primary { background: var(--dmc-accent); border-color: var(--dmc-accent); color: var(--dmc-white); } /* --- Numbers / stats --- */ .dmc-stat, .dmc-mono { font-family: var(--dmc-font-mono); } .dmc-section-heading { font-family: var(--dmc-font-heading); color: var(--dmc-accent); font-size: 1.15rem; margin: 1.75rem 0 0.75rem; } /* --- Flash messages --- */ .dmc-flash { padding: 0.6rem 0.9rem; border-radius: 8px; margin-bottom: 1rem; background: rgba(184, 134, 59, 0.15); } .dmc-flash-success { background: rgba(74, 140, 74, 0.18); } .dmc-flash-error { background: rgba(140, 42, 42, 0.15); } .dmc-flash-error ul { margin: 0; padding-left: 1.1rem; } /* --- Character type cards (Play Mode index) --- */ .dmc-type-card .dmc-type-blurb { margin-bottom: 0.6rem; } .dmc-ability-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .dmc-ability-list li { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.9rem; } .dmc-ability-list strong { color: var(--dmc-accent); } .dmc-ability-list span { opacity: 0.85; } .dmc-ability-list-compact { margin-top: 0.5rem; } .dmc-ability-list-compact li { font-size: 0.85rem; } .dmc-tag { display: inline-block; font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--dmc-accent); color: var(--dmc-white); width: fit-content; } .dmc-tag-muted { background: var(--dmc-surface-border); color: var(--dmc-ink); } .dmc-gamebook .dmc-tag-muted { color: var(--dmc-parchment); } /* --- Tables (Quick Reference Card) --- */ .dmc-quickref-heading { font-family: var(--dmc-font-heading); font-size: 1.05rem; color: var(--dmc-accent); margin: 1.25rem 0 0.5rem; } .dmc-quickref-heading:first-child { margin-top: 0; } .dmc-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .dmc-table th, .dmc-table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--dmc-surface-border); } .dmc-table th { font-family: var(--dmc-font-heading); font-size: 0.85rem; opacity: 0.8; } /* --- Build-a-Character form --- */ .dmc-build-form-card { margin-bottom: 1rem; } .dmc-build-form { display: flex; flex-direction: column; gap: 1rem; } .dmc-field { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; } .dmc-field-label { font-family: var(--dmc-font-heading); font-size: 0.9rem; color: var(--dmc-accent); padding: 0; } .dmc-build-form input[type="text"], .dmc-build-form input[type="number"] { font-family: var(--dmc-font-body); font-size: 1rem; padding: 0.5rem 0.65rem; border-radius: 8px; border: 1px solid var(--dmc-surface-border); background: var(--dmc-white); color: var(--dmc-ink); max-width: 320px; } .dmc-type-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; } .dmc-type-option { cursor: pointer; } .dmc-type-option input { position: absolute; opacity: 0; } .dmc-type-option-body { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; border: 2px solid var(--dmc-surface-border); border-radius: 8px; background: var(--dmc-white); } .dmc-type-option input:checked + .dmc-type-option-body { border-color: var(--dmc-accent); background: rgba(140, 42, 42, 0.08); } .dmc-type-option input:focus-visible + .dmc-type-option-body { outline: 2px solid var(--dmc-accent); } .dmc-stat-inputs { display: flex; gap: 0.75rem; flex-wrap: wrap; } .dmc-stat-input { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; } .dmc-stat-input input { width: 80px; } .dmc-btn-danger { background: transparent; border-color: var(--dmc-oxblood); color: var(--dmc-oxblood); } .dmc-gamebook .dmc-btn-danger { color: var(--dmc-oxblood-bright); border-color: var(--dmc-oxblood-bright); } .dmc-character-card .dmc-stat-readout { list-style: none; margin: 0.4rem 0; padding: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.85rem; } .dmc-inline-form { margin-top: 0.6rem; } /* ====================================================================== Rules Reference — tabs, search, expandable cards, tooltips, portraits, resource trackers, stat blocks. Used on every /dm/rules/* page. ====================================================================== */ .dmc-rules-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.75rem; } .dmc-rules-tab { font-family: var(--dmc-font-heading); font-weight: 600; font-size: 0.85rem; background: var(--dmc-surface); border: 1px solid var(--dmc-surface-border); color: inherit; padding: 0.5rem 0.9rem; border-radius: 6px; cursor: pointer; } .dmc-rules-tab .dmc-tab-count { font-family: var(--dmc-font-mono); font-size: 0.7rem; opacity: 0.7; margin-left: 0.3rem; } .dmc-rules-tab.is-active { background: var(--dmc-accent); border-color: var(--dmc-accent); color: var(--dmc-white); } .dmc-rules-controls { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .dmc-search-box, .dmc-select { font-family: var(--dmc-font-body); font-size: 0.95rem; padding: 0.55rem 0.75rem; border-radius: 8px; border: 1px solid var(--dmc-surface-border); background: var(--dmc-surface); color: inherit; } .dmc-search-box { flex: 1; min-width: 200px; } .dmc-result-count { font-family: var(--dmc-font-mono); font-size: 0.75rem; opacity: 0.65; margin: 0.3rem 0 0.9rem; } .dmc-legend { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; background: rgba(184, 134, 59, 0.1); border: 1px dashed var(--dmc-surface-border); border-radius: 6px; padding: 0.6rem 0.8rem; margin: 0 0 1.1rem; opacity: 0.9; } /* --- Expandable reference cards --- */ .dmc-rules-card { background: var(--dmc-surface); border: 1px solid var(--dmc-surface-border); border-radius: var(--dmc-radius); padding: 0.9rem 1rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.4rem; } .dmc-rules-card.is-open { border-color: var(--dmc-accent); } .dmc-rules-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .dmc-rules-card-name { font-family: var(--dmc-font-heading); font-weight: 700; font-size: 1rem; } .dmc-rules-card-sub { font-family: var(--dmc-font-mono); font-size: 0.72rem; opacity: 0.65; } .dmc-rules-card-summary { font-size: 0.85rem; font-style: italic; opacity: 0.85; border-top: 1px dashed var(--dmc-surface-border); padding-top: 0.5rem; } .dmc-rules-card-chevron { font-family: var(--dmc-font-mono); font-size: 0.7rem; color: var(--dmc-accent-2); } .dmc-rules-card-detail { display: none; font-size: 0.88rem; line-height: 1.55; padding-top: 0.2rem; } .dmc-rules-card.is-open .dmc-rules-card-detail { display: block; } .dmc-rules-card-detail ul { margin: 0; padding-left: 1.1rem; } .dmc-rules-card-detail li { margin-bottom: 0.3rem; } .dmc-rules-card-detail p { margin: 0 0 0.5rem; } .dmc-rules-card-detail p:last-child { margin-bottom: 0; } .dmc-stat-line { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: 0.78rem; opacity: 0.85; } .dmc-stat-line .v { font-family: var(--dmc-font-mono); opacity: 1; } .dmc-no-results { text-align: center; font-style: italic; opacity: 0.7; padding: 2rem 0; grid-column: 1 / -1; } /* --- Glossary term + tooltip (shared singleton element, appended to body by JS) --- */ .dmc-term { text-decoration: underline dotted var(--dmc-accent-2); text-underline-offset: 2px; cursor: help; } .dmc-term:hover, .dmc-term:focus { color: var(--dmc-accent); outline: none; } #dmc-tooltip { position: absolute; z-index: 100; max-width: 260px; background: var(--dmc-iron-dark); color: var(--dmc-parchment); font-family: var(--dmc-font-body); font-size: 0.85rem; line-height: 1.45; padding: 0.6rem 0.75rem; border-radius: 6px; border: 1px solid var(--dmc-brass); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); display: none; } #dmc-tooltip.show { display: block; } .dmc-tooltip-label { display: block; font-family: var(--dmc-font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dmc-brass-bright); margin-bottom: 0.25rem; } /* --- Class portraits --- */ .dmc-portrait-row { display: flex; gap: 0.6rem; } .dmc-portrait-single { position: relative; } .dmc-portrait-img { width: 110px; height: 150px; object-fit: cover; border-radius: 6px; border: 1px solid var(--dmc-surface-border); display: block; } .dmc-portrait-tag { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.6); color: var(--dmc-white); font-family: var(--dmc-font-mono); font-size: 0.6rem; padding: 0.1rem 0.35rem; border-radius: 4px; } /* --- Resource trackers (pips / dice / numbers) --- */ .dmc-tracker-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 0.5rem; } .dmc-tracker-table th, .dmc-tracker-table td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--dmc-surface-border); } .dmc-pips { display: inline-flex; gap: 2px; } .dmc-pip { width: 9px; height: 9px; border-radius: 50%; background: var(--dmc-accent-2); display: inline-block; } .dmc-pip.is-empty { background: var(--dmc-surface-border); } /* --- Class nav / tier nav / subclass tabs --- */ .dmc-class-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; } .dmc-class-nav button { font-family: var(--dmc-font-heading); font-size: 0.85rem; font-weight: 600; background: var(--dmc-surface); border: 1px solid var(--dmc-surface-border); color: inherit; padding: 0.45rem 0.8rem; border-radius: 6px; cursor: pointer; } .dmc-class-nav button.is-active { background: var(--dmc-accent); border-color: var(--dmc-accent); color: var(--dmc-white); } .dmc-class-banner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .dmc-class-banner h2 { font-family: var(--dmc-font-heading); color: var(--dmc-accent); margin: 0 0 0.35rem; } .dmc-class-traits { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; font-size: 0.82rem; } .dmc-class-traits b { font-family: var(--dmc-font-mono); font-weight: 600; opacity: 0.75; margin-right: 0.3rem; } .dmc-level-card { border-bottom: 1px dashed var(--dmc-surface-border); padding: 0.6rem 0; } .dmc-level-card:last-child { border-bottom: none; } .dmc-level-label { font-family: var(--dmc-font-mono); font-size: 0.8rem; color: var(--dmc-accent-2); margin-bottom: 0.3rem; } .dmc-level-feat { margin-bottom: 0.35rem; font-size: 0.88rem; } .dmc-level-feat b { color: var(--dmc-accent); } .dmc-subclass-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.25rem 0 0.75rem; } /* --- Monster stat blocks --- */ .dmc-statblock-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; text-align: center; margin: 0.6rem 0; font-size: 0.8rem; } .dmc-statblock-grid div { background: rgba(184, 134, 59, 0.08); border-radius: 6px; padding: 0.35rem 0.2rem; } .dmc-statblock-grid b { display: block; font-family: var(--dmc-font-mono); font-size: 0.68rem; opacity: 0.65; } @media (max-width: 640px) { .dmc-statblock-grid { grid-template-columns: repeat(3, 1fr); } .dmc-portrait-img { width: 84px; height: 115px; } } /* ====================================================================== Adventures — format help, import preview, manual builder, Run Adventure screen (scene card, dice roller, initiative tracker, session log). ====================================================================== */ .dmc-format-example { background: rgba(0, 0, 0, 0.06); border: 1px solid var(--dmc-surface-border); border-radius: 8px; padding: 0.9rem 1rem; font-family: var(--dmc-font-mono); font-size: 0.8rem; line-height: 1.6; overflow-x: auto; white-space: pre; } .dmc-gamebook .dmc-format-example { background: rgba(0, 0, 0, 0.25); } .dmc-textarea { font-family: var(--dmc-font-body); font-size: 0.95rem; padding: 0.6rem 0.75rem; border-radius: 8px; border: 1px solid var(--dmc-surface-border); background: var(--dmc-white); color: var(--dmc-ink); width: 100%; resize: vertical; } /* --- Import preview --- */ .dmc-scene-preview { border-top: 1px dashed var(--dmc-surface-border); padding: 0.75rem 0; } .dmc-scene-preview h3 { font-family: var(--dmc-font-heading); font-size: 0.95rem; color: var(--dmc-accent); margin: 0 0 0.3rem; } .dmc-option-preview-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .dmc-option-preview-list li { font-size: 0.88rem; display: flex; flex-direction: column; gap: 0.15rem; } .dmc-option-outcome { opacity: 0.85; font-size: 0.88rem; } /* --- Manual scene builder --- */ .dmc-scene-editor { margin-bottom: 1rem; } .dmc-scene-editor-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .dmc-scene-editor-top h3 { font-family: var(--dmc-font-heading); font-size: 1rem; margin: 0; } .dmc-option-list { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.6rem 0; } .dmc-option-editor { border: 1px dashed var(--dmc-surface-border); border-radius: 8px; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; } .dmc-option-editor input[type="text"], .dmc-option-editor input[type="number"] { font-family: var(--dmc-font-body); font-size: 0.9rem; padding: 0.45rem 0.6rem; border-radius: 6px; border: 1px solid var(--dmc-surface-border); background: var(--dmc-white); color: var(--dmc-ink); } .dmc-option-editor-row { display: flex; gap: 0.4rem; flex-wrap: wrap; } .dmc-option-editor-row input { flex: 1; min-width: 120px; } /* --- Run Adventure: scene card --- */ .dmc-scene-card { margin-bottom: 1rem; } .dmc-scene-text { margin: 0.5rem 0 1rem; } .dmc-option-cards { display: flex; flex-direction: column; gap: 0.6rem; } .dmc-option-card { border: 1px solid var(--dmc-surface-border); border-radius: 8px; padding: 0.7rem 0.85rem; } .dmc-option-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.3rem; } .dmc-roll-option-btn { font-size: 0.8rem; } .dmc-scene-nav { margin: 1rem 0; } .dmc-scene-nav select { max-width: 260px; } .dmc-inline-roller { margin-top: 0.75rem; } .dmc-dice-widget { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .dmc-dice-select { padding: 0.5rem 0.6rem; border-radius: 6px; border: 1px solid var(--dmc-surface-border); background: var(--dmc-surface); color: inherit; } .dmc-dice-mod { width: 70px; padding: 0.5rem 0.6rem; border-radius: 6px; border: 1px solid var(--dmc-surface-border); background: var(--dmc-surface); color: inherit; } .dmc-dice-result { font-family: var(--dmc-font-mono); font-size: 1rem; } .dmc-dice-pulse { animation: dmc-pulse 0.3s ease; } @keyframes dmc-pulse { from { opacity: 0.3; } to { opacity: 1; } } .dmc-roll-verdict { font-family: var(--dmc-font-heading); font-weight: 700; margin-top: 0.4rem; } .dmc-roll-success { color: #4c8a4c; } .dmc-roll-fail { color: var(--dmc-oxblood-bright); } /* --- Party quick reference --- */ .dmc-party-ref summary { cursor: pointer; font-family: var(--dmc-font-heading); font-weight: 600; } .dmc-party-ref .dmc-card-grid { margin-top: 0.75rem; } .dmc-party-ref .dmc-character-card { background: rgba(184, 134, 59, 0.08); border-radius: 8px; padding: 0.7rem 0.85rem; display: flex; flex-direction: column; gap: 0.2rem; } /* --- Initiative tracker --- */ :root { --dmc-tracker-green: #4c7a4c; --dmc-tracker-amber: #b08a2e; } .dmc-tracker-banner { display: flex; justify-content: flex-end; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; } .dmc-round-label { font-family: var(--dmc-font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; } .dmc-round-num { font-family: var(--dmc-font-heading); font-weight: 900; font-size: 1.6rem; color: var(--dmc-accent); } .dmc-tracker-add-form { display: grid; grid-template-columns: 1.4fr 0.7fr 0.7fr 0.6fr 0.9fr auto; gap: 0.5rem; align-items: center; margin-bottom: 1rem; } .dmc-tracker-add-form input, .dmc-tracker-add-form select { font-family: var(--dmc-font-body); font-size: 0.85rem; padding: 0.5rem 0.55rem; border-radius: 6px; border: 1px solid var(--dmc-surface-border); background: var(--dmc-surface); color: inherit; width: 100%; } @media (max-width: 640px) { .dmc-tracker-add-form { grid-template-columns: 1fr 1fr; } } .dmc-combatant-list { display: flex; flex-direction: column; gap: 0.75rem; } .dmc-ccard { background: var(--dmc-surface); border: 1px solid var(--dmc-surface-border); border-radius: var(--dmc-radius); padding: 0.8rem 0.95rem; } .dmc-ccard.is-active { border-color: var(--dmc-accent); } .dmc-ccard.is-down { opacity: 0.6; } .dmc-ccard-top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .dmc-init-badge { font-family: var(--dmc-font-heading); font-weight: 900; font-size: 1.05rem; color: var(--dmc-white); background: var(--dmc-iron); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dmc-cname { font-family: var(--dmc-font-heading); font-weight: 700; font-size: 1rem; flex: 1; min-width: 90px; } .dmc-type-tag { font-family: var(--dmc-font-mono); font-size: 0.65rem; text-transform: uppercase; padding: 0.15rem 0.4rem; border-radius: 4px; border: 1px solid var(--dmc-surface-border); } .dmc-type-pc { color: var(--dmc-tracker-green); border-color: var(--dmc-tracker-green); } .dmc-type-enemy { color: var(--dmc-oxblood-bright); border-color: var(--dmc-oxblood-bright); } .dmc-ac-badge { font-size: 0.75rem; opacity: 0.75; } .dmc-remove-btn { margin-left: auto; background: none; border: none; color: inherit; opacity: 0.6; font-size: 1rem; cursor: pointer; } .dmc-remove-btn:hover { opacity: 1; color: var(--dmc-oxblood-bright); } .dmc-hp-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; } .dmc-hp-btn { width: 26px; height: 26px; border-radius: 4px; border: 1px solid var(--dmc-surface-border); background: var(--dmc-surface); font-family: var(--dmc-font-mono); font-weight: 600; cursor: pointer; flex-shrink: 0; } .dmc-hp-track { flex: 1; min-width: 60px; } .dmc-hp-numbers { display: flex; gap: 0.4rem; font-family: var(--dmc-font-mono); font-size: 0.72rem; margin-bottom: 0.2rem; } .dmc-hp-bar-bg { height: 8px; background: var(--dmc-surface-border); border-radius: 4px; overflow: hidden; } .dmc-hp-bar-fill { height: 100%; transition: width 0.2s ease; } .dmc-hp-delta { width: 52px; font-family: var(--dmc-font-mono); font-size: 0.8rem; padding: 0.3rem; border-radius: 4px; border: 1px solid var(--dmc-surface-border); text-align: center; } .dmc-hp-apply { font-family: var(--dmc-font-mono); font-size: 0.7rem; padding: 0.3rem 0.5rem; border-radius: 4px; border: 1px solid var(--dmc-surface-border); background: var(--dmc-surface); cursor: pointer; } .dmc-bloodied-tag { font-size: 0.62rem; font-family: var(--dmc-font-mono); color: var(--dmc-oxblood-bright); letter-spacing: 0.05em; margin-left: 0.4rem; } .dmc-cond-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; } .dmc-cond-pill { font-family: var(--dmc-font-mono); font-size: 0.68rem; background: var(--dmc-iron); color: var(--dmc-parchment); padding: 0.2rem 0.5rem; border-radius: 10px; cursor: help; display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; } .dmc-cond-x { cursor: pointer; opacity: 0.7; } .dmc-cond-x:hover { opacity: 1; } .dmc-add-cond-select { font-family: var(--dmc-font-body); font-size: 0.75rem; padding: 0.2rem 0.4rem; border: 1px dashed var(--dmc-surface-border); border-radius: 10px; background: transparent; color: inherit; } .dmc-notes-row { margin-top: 0.6rem; } .dmc-notes-input { width: 100%; font-family: var(--dmc-font-body); font-style: italic; font-size: 0.8rem; padding: 0.4rem 0.55rem; border: 1px dashed var(--dmc-surface-border); border-radius: 4px; background: transparent; color: inherit; resize: vertical; min-height: 32px; } /* --- Session log --- */ .dmc-log-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.88rem; } .dmc-log-time { opacity: 0.6; margin-right: 0.4rem; } #dmc-log-form input[type="text"] { flex: 1; min-width: 180px; } /* ====================================================================== Help & Glossary: article accordions, dice explainer, search results. ====================================================================== */ .dmc-help-article-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; } .dmc-help-article summary { cursor: pointer; font-family: var(--dmc-font-heading); font-weight: 600; font-size: 1rem; color: var(--dmc-accent); } .dmc-help-article p { margin: 0.6rem 0 0; } .dmc-help-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.6rem !important; } .dmc-dice-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .dmc-dice-step { position: relative; padding-top: 2.2rem; } .dmc-dice-step-num { position: absolute; top: -14px; left: 1rem; width: 32px; height: 32px; border-radius: 50%; background: var(--dmc-accent); color: var(--dmc-white); font-family: var(--dmc-font-heading); font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: var(--dmc-shadow); } .dmc-dice-step h2 { font-size: 1.05rem; margin: 0 0 0.4rem; } .dmc-dice-example, .dmc-dice-try { margin-bottom: 1rem; } /* ====================================================================== Floating dice roller — available on every page. ====================================================================== */ .dmc-fab-wrap { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; } .dmc-fab { width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--dmc-oxblood-bright); color: var(--dmc-white); font-size: 1.5rem; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); cursor: pointer; flex-shrink: 0; } .dmc-fab:hover { background: var(--dmc-oxblood); } .dmc-fab:active { transform: scale(0.95); } .dmc-dice-panel { width: min(300px, calc(100vw - 2rem)); background: var(--dmc-white); color: var(--dmc-ink); border-radius: var(--dmc-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); border: 1px solid var(--dmc-parchment-dark); padding: 0.85rem 1rem 1rem; } .dmc-dice-panel[hidden] { display: none; } .dmc-dice-panel-header { display: flex; align-items: center; justify-content: space-between; font-family: var(--dmc-font-heading); font-weight: 700; color: var(--dmc-oxblood-bright); margin-bottom: 0.6rem; } .dmc-dice-panel-close { background: none; border: none; cursor: pointer; font-size: 1rem; color: inherit; opacity: 0.6; padding: 0.2rem 0.4rem; } .dmc-dice-panel-close:hover { opacity: 1; } .dmc-dice-panel .dmc-dice-widget { flex-wrap: nowrap; } .dmc-dice-panel .dmc-dice-select, .dmc-dice-panel .dmc-dice-mod { background: var(--dmc-parchment); color: var(--dmc-ink); border-color: var(--dmc-parchment-dark); } .dmc-dice-history { list-style: none; margin: 0.75rem 0 0; padding: 0.5rem 0 0; border-top: 1px dashed var(--dmc-parchment-dark); display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--dmc-font-mono); font-size: 0.78rem; max-height: 140px; overflow-y: auto; } .dmc-dice-history-empty { opacity: 0.6; font-style: italic; font-family: var(--dmc-font-body); } .dmc-shortcode-dice { display: inline-block; } /* Slightly smaller FAB on phones to leave more room for the panel. */ @media (max-width: 480px) { .dmc-fab { width: 50px; height: 50px; font-size: 1.3rem; } }