/* Battle Barge — Reference drawer ================================================================ A slide-up sheet (sibling of the More drawer) that overlays the current screen with a rules quick-reference. Opening it never routes, so an in-progress battle stays mounted underneath. The Reference tab is universe-scoped: only shown in 40k for now. ================================================================ */ /* ---------------------------------------------------------------- Tab gating — hidden by default, revealed only in the 40k universe. ---------------------------------------------------------------- */ .bb-tab-reference { display: none; } html[data-universe="40k"] .bb-tab-reference { display: flex; } /* ---------------------------------------------------------------- Backdrop + sheet. Sits at the same layer as the More drawer. ---------------------------------------------------------------- */ .bb-reference-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity var(--bb-transition-base); } .bb-reference-backdrop.is-open { opacity: 1; pointer-events: auto; } .bb-reference-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-direction: column; /* Tall sheet — this is reading material, not a nav grid. Cap the height and let the body scroll; reserve room for the bottom nav and the iOS home indicator so nothing is clipped. */ max-height: 85vh; background: var(--bb-bg-surface); border-top: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg) var(--bb-radius-lg) 0 0; transform: translateY(100%); transition: transform var(--bb-transition-base); box-shadow: var(--bb-shadow-lg); } .bb-reference-drawer.is-open { transform: translateY(0); } .bb-reference-handle { width: 40px; height: 4px; background: var(--bb-border); border-radius: var(--bb-radius-full); margin: var(--bb-space-3) auto var(--bb-space-2); flex: none; } .bb-reference-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--bb-space-4) var(--bb-space-2); flex: none; } .bb-reference-title { margin: 0; font-family: var(--bb-font-display, var(--bb-font-body)); font-size: var(--bb-text-lg); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bb-text-primary); } .bb-reference-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--bb-radius-full); color: var(--bb-text-muted); font-size: 1.6rem; line-height: 1; cursor: pointer; } .bb-reference-close:hover, .bb-reference-close:focus-visible { color: var(--bb-text-primary); background: var(--bb-bg-elevated); outline: none; } .bb-reference-content { /* Re-declare the 40k component vars (normally only set on .fk-screen) so the .fk-* cards/tables render themed inside the shared drawer. data-universe="40k" on supplies the --fk-* source values; the hard fallbacks keep it readable even outside that scope. */ --c-surface: var(--fk-surface, #15171c); --c-surface-2: var(--fk-surface-2, #1d2027); --c-line: var(--fk-line, #2b2f38); --c-text: var(--fk-text, #e8e6df); --c-muted: var(--fk-muted, #8b9099); --c-accent: var(--fk-accent, #c9a227); --c-radius: var(--fk-radius, 10px); flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 var(--bb-space-4); padding-bottom: calc(var(--bb-space-6) + 60px + env(safe-area-inset-bottom, 0px)); color: var(--c-text); } /* ---------------------------------------------------------------- Reference content (rendered by /static/40k/js/reference.js). .fk-card / .fk-muted come from 40k.css; the .fk-ref-* classes below are specific to this quick-reference layout. ---------------------------------------------------------------- */ .bb-reference-content .fk-ref-lead { font-size: 0.85rem; margin: var(--bb-space-2) 0 0; } .bb-reference-content .fk-ref-section { margin: var(--bb-space-3) 0; } .bb-reference-content .fk-ref-h { margin: 0 0 var(--bb-space-2); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; color: var(--c-accent); } /* Sub-heading within a section (e.g. "Identical attacks" under Saves). Top border + spacing separate it cleanly from the preceding list, and it uses readable text rather than the muted keyword-label grey. */ .bb-reference-content .fk-ref-subh { margin: var(--bb-space-4) 0 var(--bb-space-2); padding-top: var(--bb-space-3); border-top: 1px solid var(--c-line); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; color: var(--c-text); } .bb-reference-content p, .bb-reference-content li { font-size: 0.92rem; line-height: 1.45; } .bb-reference-content .fk-ref-steps, .bb-reference-content .fk-ref-notes { margin: var(--bb-space-2) 0 0; padding-left: 1.1em; } .bb-reference-content .fk-ref-notes li + li { margin-top: 4px; } .bb-reference-content .fk-ref-table { width: 100%; border-collapse: collapse; margin: var(--bb-space-2) 0; font-size: 0.92rem; } .bb-reference-content .fk-ref-table th, .bb-reference-content .fk-ref-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--c-line); } .bb-reference-content .fk-ref-table thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); } .bb-reference-content .fk-ref-roll { width: 3.5em; text-align: center; font-weight: 700; color: var(--c-accent); } .bb-reference-content .fk-ref-kwgroup { margin-top: var(--bb-space-3); } .bb-reference-content .fk-ref-kwhead { margin: 0 0 8px; font-size: 0.98rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-accent); } .bb-reference-content .fk-ref-kwlist { margin: 0; display: grid; grid-template-columns: 1fr; gap: 6px 0; } .bb-reference-content .fk-ref-kwlist dt { font-weight: 700; color: var(--c-text); font-size: 0.86rem; letter-spacing: 0.02em; } .bb-reference-content .fk-ref-kwlist dd { margin: 1px 0 0; color: var(--c-muted); font-size: 0.86rem; line-height: 1.4; }