/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Several sticky rows (.dash-tabs, .dash-subnav, .hero-subnav, DM tab
bars, etc.) intentionally scroll horizontally within themselves on
mobile via their own overflow-x:auto — but nothing here ever capped
the outer page itself, so any one of them (or anything else) coming
in even 1px wider than the viewport — an extra badge, a longer
label, a role-conditional tab — drags the whole along for
the ride and leaves it horizontally scrollable, showing blank space
past the right edge of the real content. Reported as "top buttons
make the screen longer and leave a blank bar on the right side."
This is a standard, safe hardening rule: it doesn't affect any of
the intentional inner overflow-x:auto regions, which still scroll
exactly as designed — it only stops that overflow from leaking out
to the page itself. */
html, body { overflow-x: hidden; max-width: 100vw; }
:root {
/* player.html's opts into viewport-fit=cover
(edge-to-edge rendering), so on a notched/punch-hole phone the
topbar and every sticky bar stacked below it (dash-tabs,
dash-subnav/hero-subnav, vitals-bar, wealth-sticky-summary,
research-active-training) need this added to their hand-tuned
top:/height: pixel math, or they render partly under the status
bar / camera cutout. One shared var so every one of those rules
references the same value instead of repeating env() by hand.
Resolves to 0px on devices/browsers without a safe area. */
--sat: env(safe-area-inset-top, 0px);
/* Dark purple / greyer-purple background ladder (2026-07-27,
replaced the near-black/grey originals) — same brightness
steps as before, hue shifted to purple. bg0/bg1 read as a
clear dark purple; bg2-bg4 (cards/panels/borders) are a more
desaturated "greyer purple" so text stays easy to read on them. */
--bg0: #130d1c;
--bg1: #1a1322;
--bg2: #221c2c;
--bg3: #2b2434;
--bg4: #342c3e;
--gold: #ffd700;
--gold-dim: #b8960c;
/* Heraldic scarlet — vibrant red used for critical-state callouts
and gold/scarlet pairs (heading bars, topbar accent, etc.).
Distinct from --red (muted danger) so urgent things actually
pop without lighting up every error message at the same volume. */
--scarlet: #e63946;
--scarlet-dim: #8b1d27;
--text: #e8e8f0;
--text2: #9898b0;
--red: #e05555;
--green: #4caf50;
--blue: #5b9bd5;
--purple: #9b59b6;
/* Formalized 2026-07-20 — #ff6b35 was already in real use across
the app (Cost of Living's chart line/points, the Conditions
button) as an ad-hoc informal "orange," never given a real
token. Housing/lifestyle-themed cards (Cost of Living, Lifestyle
Reimbursement) now use it via a real .card-orange class instead
of repeating the raw hex inline. */
--orange: #ff6b35;
--radius: 10px;
/* Display face for the wordmark + section headers (guild-charter
formality); body face for everyday UI text (bureaucratic-courier
legibility). Loaded via Google Fonts link in each page's . */
--font-display: 'Cinzel', Georgia, serif;
--font-body: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
}
html, body { height: 100%; font-family: var(--font-body); background: var(--bg0); color: var(--text); }
@media (prefers-reduced-motion: reduce) {
.login-card { animation: none !important; }
.login-logo { animation: none !important; }
.login-title { animation: none !important; }
}
@keyframes rw-card-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Login hero — round 2 of the deferred "taller/richer hero" item
(VISUAL_CHECKLIST.md). Scale + polish of the SAME three existing
elements (icon/wordmark/subtitle), no new content added — the
earlier two-column attempt got reverted for creating a second
competing focal point, so this round deliberately stays within
"make the one thing bigger and better," not "add more things." */
@keyframes rw-logo-breathe {
0%, 100% { filter: drop-shadow(0 0 14px rgba(255,215,0,0.32)); }
50% { filter: drop-shadow(0 0 26px rgba(255,215,0,0.52)); }
}
@keyframes rw-title-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* ── Screens ── */
.screen { display: none; min-height: 100dvh; }
.screen.active { display: flex; }
/* ── Login Screen ── */
#screen-login {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,215,0,0.07) 0%, transparent 70%),
repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 46px),
var(--bg0);
}
.login-logo {
font-size: 4.5rem;
color: var(--gold);
margin-bottom: 0.6rem;
animation: rw-logo-breathe 4s ease-in-out infinite;
}
.login-title {
font-family: var(--font-display);
font-size: clamp(2.2rem, 8vw, 3.2rem);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 0.4rem;
background: linear-gradient(100deg, var(--gold) 40%, #fff3cf 50%, var(--gold) 60%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: rw-title-shimmer 6s linear infinite;
}
.login-subtitle {
font-size: 0.92rem;
color: var(--text2);
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 3.2rem;
}
.legal-footer {
margin-top: 2.5rem;
max-width: 480px;
text-align: center;
font-size: 0.7rem;
color: var(--text2);
line-height: 1.6;
opacity: 0.8;
}
.legal-footer a {
color: var(--gold);
text-decoration: underline;
cursor: pointer;
background: none;
border: none;
font-size: inherit;
font-family: inherit;
padding: 0;
}
.legal-footer a:hover { opacity: 0.8; }
.ogl-modal-body {
max-height: 60dvh;
overflow-y: auto;
font-size: 0.78rem;
line-height: 1.7;
color: var(--text1);
white-space: pre-wrap;
padding-right: 0.5rem;
}
.ogl-modal-body h3 {
color: var(--gold);
font-size: 0.85rem;
margin: 1.2rem 0 0.4rem;
}
.login-card {
background: var(--bg1);
border: 1px solid rgba(255,215,0,0.18);
border-radius: 14px;
padding: 2rem;
width: 100%;
max-width: 420px;
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,215,0,0.04);
animation: rw-card-rise 0.45s ease-out both;
}
#soft-entry-cta.login-card { animation-delay: 0.08s; }
#new-player-cta.login-card { animation-delay: 0.16s; }
.auth-wrap {
flex: 1; display: flex; align-items: flex-start; justify-content: center;
padding: 2rem 1rem; overflow-y: auto;
}
.auth-card {
background: var(--bg1); border: 1px solid rgba(255,215,0,0.15);
border-radius: 14px; padding: 2rem; width: 100%;
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.role-tabs {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.role-tab {
padding: 0.75rem;
border: 1px solid var(--bg4);
border-radius: 8px;
background: var(--bg2);
color: var(--text2);
cursor: pointer;
text-align: center;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.05em;
transition: all 0.15s;
}
.role-tab:hover { border-color: var(--gold-dim); color: var(--text); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,215,0,0.1); }
.role-tab.active { background: rgba(255,215,0,0.12); border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 1px rgba(255,215,0,0.22), 0 4px 16px rgba(255,215,0,0.12); }
.role-tab i { display: block; font-size: 1.4rem; margin-bottom: 0.35rem; }
/* Player login sub-mode toggle */
.player-mode-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.1rem; }
.ptab {
flex: 1; padding: 0.45rem 0.5rem; border: 1px solid var(--bg4);
border-radius: 6px; background: var(--bg2); color: var(--text2);
cursor: pointer; font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.04em; text-align: center; transition: all 0.15s;
font-family: inherit;
}
.ptab i { margin-right: 0.3rem; }
.ptab:hover { border-color: var(--gold-dim); color: var(--text); }
.ptab.active { background: rgba(255,215,0,0.1); border-color: var(--gold); color: var(--gold); }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.72rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.35rem; }
.form-input {
width: 100%; padding: 0.6rem 0.8rem;
background: var(--bg2); border: 1px solid var(--bg4);
border-radius: 8px; color: var(--text); font-size: 0.92rem;
font-family: inherit; transition: border-color 0.15s;
}
.form-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,215,0,0.12); }
.form-input::placeholder { color: var(--bg4); }
.btn {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.6rem 1.2rem; border: none; border-radius: 8px;
font-family: inherit; font-size: 0.88rem; font-weight: 600;
cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.btn-gold { background: var(--gold); color: #1a0a00; box-shadow: 0 2px 10px rgba(255,215,0,0.15); }
.btn-gold:hover { background: #ffe44d; box-shadow: 0 4px 18px rgba(255,215,0,0.3); transform: translateY(-1px); }
.btn-gold:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(255,215,0,0.2); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { filter: brightness(1.15); }
/* Default gold instead of neutral grey (2026-07-27) — buttons that
explicitly set their own border-color/color inline (danger red,
money green, lore purple, etc.) are untouched: an inline style
always wins over this class rule, so only genuinely uncolored
"plain" outline buttons pick up gold from this change. */
.btn-outline { background: transparent; border: 1px solid var(--gold-dim); color: var(--gold); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 1px rgba(255,215,0,0.15); background: rgba(255,215,0,0.08); }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--text2); }
.btn-ghost:hover { color: var(--text); }
.btn-danger { background: rgba(224,85,85,0.15); border: 1px solid var(--red); color: var(--red); }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.78rem; }
.btn-full { width: 100%; justify-content: center; }
.login-error { color: var(--red); font-size: 0.8rem; margin-top: 0.5rem; min-height: 1.2em; }
.login-help { font-size: 0.75rem; color: var(--text2); text-align: center; margin-top: 1.25rem; }
/* ── Wizard Step Indicator ── */
.wiz-steps-bar { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 1.5rem; }
.wiz-sdot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bg4); background: var(--bg2); color: var(--text2); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; transition: all 0.2s; }
.wiz-sdot.active { border-color: var(--gold); background: rgba(255,215,0,0.15); color: var(--gold); }
.wiz-sdot.done { border-color: var(--green); background: rgba(76,175,80,0.12); color: var(--green); }
.wiz-sline { flex: 1; height: 2px; background: var(--bg4); max-width: 36px; transition: background 0.2s; }
.wiz-sline.done { background: var(--green); }
.wiz-step-label-row { display: flex; justify-content: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.wiz-step-lbl { font-size: 0.68rem; color: var(--text2); text-align: center; min-width: 60px; }
.wiz-step-lbl.active { color: var(--gold); font-weight: 700; }
.wiz-body { min-height: 260px; }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; padding-top: 0.85rem; border-top: 1px solid var(--bg3); }
.login-help a { color: var(--gold); cursor: pointer; text-decoration: none; }
.login-help a:hover { text-decoration: underline; }
.divider { border: none; border-top: 1px solid var(--bg3); margin: 1.25rem 0; }
/* ── Player: peer-card grids (desktop only) ──
Several panels are just a single-column stack of same-weight,
independent cards even on a wide monitor, wasting the 1100px
.dashboard-body width on one narrow column. These are genuine
peers (unlike Login's hero/auth split, which competed for the
same attention) so laying them out side by side on desktop just
lets them breathe — mobile keeps the exact single-column stack
it has today, unchanged, since this whole block is gated by the
media query. ID selectors + .active so this only ever applies to
the currently-visible panel (matches how switchPlayerTab toggles
visibility via the .active class, not inline style). */
@media (min-width: 900px) {
#ppanel-scheduling.active,
#ppanel-hr.active,
#ppanel-world.active {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
align-items: start;
}
#ppanel-quest.active {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
align-items: start;
}
/* Full-width exceptions: the shift banner, the downtime-activities
box, and the active-downtime tracker all read better spanning
the full row rather than being squeezed into one column. */
#ppanel-quest.active > #p-work-today-card,
#ppanel-quest.active > .quest-downtime-activities,
#ppanel-quest.active > #downtime-active-card {
grid-column: 1 / -1;
}
#ppanel-party.active {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
align-items: start;
}
/* The friends/chat hub stays full width; only Contact Info / Peer
Review / NPC Companions become peers. (.party-quick-actions
moved out of #ppanel-party entirely 2026-07-23, renamed
.guild-quick-actions — this selector no longer applies to it.) */
#ppanel-party.active > #party-social-wrap {
grid-column: 1 / -1;
}
/* .card's own margin-bottom would double up with the grid gap
above — neutralize it only inside these grid panels so vertical
spacing between rows matches the horizontal gap between columns.
(#ppanel-hr / #ppanel-world dropped 2026-07-23 — both retired to
floating modals, no longer exist as elements.) */
#ppanel-scheduling.active > .card,
#ppanel-quest.active > .card,
#ppanel-party.active > .card,
#ppanel-quest.active > #p-work-today-card,
#ppanel-quest.active > .quest-downtime-activities,
#ppanel-party.active > #party-social-wrap {
margin-bottom: 0;
}
/* Hero → Stats: two-column split. Left = "what you're about to do"
(vitals card, death saves, actions/rest quick-actions), right =
"what you know" (Proficiencies). Unlike Login's reverted split,
these aren't competing for the same action — nobody chooses
between checking HP and checking skills, they're just two
different modes of reading the same sheet — so side by side
doesn't fracture focus the way Login's hero/auth columns did.
No sticky positioning here (kept simple on purpose after the
Login lesson — can revisit if it turns out to want it). */
.hero-subpanel[data-hero-sub="stats"] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
gap: 1rem;
align-items: start;
}
/* Left column left on grid auto-flow (only grid-column pinned, no
explicit grid-row) deliberately — #p-death-saves-card is
display:none most of the time (only shows at 0 HP). Auto-flow
means a hidden item generates no grid track at all, so the other
two items sit flush with a single normal gap between them instead
of leaving a collapsed-but-still-gapped empty row behind it. */
.hero-subpanel[data-hero-sub="stats"] > #player-profile-card,
.hero-subpanel[data-hero-sub="stats"] > #p-death-saves-card,
.hero-subpanel[data-hero-sub="stats"] > .hero-quick-actions {
grid-column: 1;
}
.hero-subpanel[data-hero-sub="stats"] > .card.card-purple {
grid-column: 2;
grid-row: 1 / -1;
}
.hero-subpanel[data-hero-sub="stats"] > #player-profile-card,
.hero-subpanel[data-hero-sub="stats"] > #p-death-saves-card {
margin-bottom: 0;
}
}
/* ── App Shell (Player & DM dashboards) ── */
#screen-player, #screen-dm {
flex-direction: column;
background: var(--bg0);
}
.topbar {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; gap: 1rem;
/* viewport-fit=cover (player.html's ) opts into
edge-to-edge rendering, so on a notched/punch-hole phone the top
of the page can render under the status bar / camera cutout
unless something reserves that space. Every other safe-area
handling in this file (bottom nav, portrait bottom inset) already
accounts for env(safe-area-inset-bottom) — this was the one
missing top-side case, and it's what made the topbar look
"cut off" at the top on some phones. Growing height (not just
padding) keeps the actual icon row its normal 52px regardless of
inset size — the extra space is pure buffer above the content,
not squeezed content. env() resolves to 0 on devices/browsers
without a safe area, so this is a no-op there. */
padding: var(--sat) 1.5rem 0;
height: calc(52px + var(--sat));
background: var(--bg1); border-bottom: 1px solid rgba(255,215,0,0.1);
box-shadow: 0 2px 8px -2px rgba(0,0,0,0.4);
}
/* Gold → scarlet heraldic accent at the bottom of the topbar.
Pinned at bottom: 0 (inside the topbar's box) so it can't bleed
into the first 2 px of the tab bar — the previous bottom: -2px
made the gradient draw on top of the tab strip's leading edge,
which read like a hairline gap between the two banners. */
.topbar::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; pointer-events: none;
background: linear-gradient(90deg, transparent 0%, var(--gold) 18%, var(--scarlet) 50%, var(--gold) 82%, transparent 100%);
opacity: 0.55;
}
.topbar-logo { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.08em; color: var(--gold); text-transform: uppercase; }
.topbar-role { font-size: 0.7rem; color: var(--text2); border: 1px solid var(--bg4); border-radius: 20px; padding: 0.15rem 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; }
/* Character switcher button — replaces the static .topbar-role.
Pill with an avatar icon, vertically-stacked char name + sub
line (player name on mobile, campaign on desktop), and an
always-visible gold chevron so the dropdown affordance is
obvious. The button takes flex:1 inside the topbar so it
grows to fill the empty space between the logo and the
right-side icons rather than crowding into a fixed pill. */
#char-switcher-btn {
/* Default to visible so the switcher renders the moment the
player dashboard mounts. Previous default was display:none
on the assumption that JS would always flip it to flex —
when refreshCharSwitcher errored or never reached the
display:flex line, the button stayed invisible and the
topbar showed an empty void between the logo and the
right-side icons (the reported mobile bug). The button
only exists inside #screen-player, so being visible by
default doesn't bleed into login / no-character screens.
JS still flips it to display:none on logout / no-profile. */
display: flex;
align-items: center;
gap: 0.4rem;
background: var(--bg2);
border: 1px solid var(--bg3);
border-radius: 18px;
padding: 0.3rem 0.7rem 0.3rem 0.55rem;
cursor: pointer;
font: inherit;
color: var(--text);
/* Sized to content. Originally tried flex:99 to stretch the
button to fill the topbar's free space — but with
left-aligned text inside, that left an awkward void
between the text and the chevron. The natural layout
(compact pill hugging the logo, spacer takes the empty
space between switcher and right icons) reads better. */
flex: 0 0 auto;
min-width: 0;
max-width: 360px;
-webkit-tap-highlight-color: transparent;
transition: background 0.1s, border-color 0.1s;
}
#char-switcher-btn:hover { background: var(--bg3); border-color: rgba(255,215,0,0.35); }
#char-switcher-btn:active { transform: scale(0.99); }
#char-switcher-btn .csb-text {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.1;
min-width: 0; flex: 1;
}
#char-switcher-btn .csb-name {
font-size: 0.82rem;
font-weight: 700;
color: var(--gold);
letter-spacing: 0.02em;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#char-switcher-btn .csb-sub {
font-size: 0.62rem;
color: var(--text2);
font-weight: 500;
letter-spacing: 0.02em;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 600px) {
/* Hide the "RealmWatch" wordmark on phones — keep just the
dungeon icon. Frees ~100px of horizontal space for the
switcher button to fill. */
.topbar-logo-text { display: none; }
/* Tighten the topbar's gap + padding so the switcher gets
every pixel possible. */
.topbar { gap: 0.35rem; padding: 0 0.45rem; }
/* Switcher sits right next to the logo on the left — the
spacer (flex:1, default) eats the empty space between the
switcher and the right-side icons, pushing those icons to
the right edge. No auto-margin centering: the user wants
the switcher anchored beside the logo. */
#char-switcher-btn {
max-width: 220px;
padding: 0.4rem 0.55rem 0.4rem 0.45rem;
gap: 0.3rem;
}
#char-switcher-btn .csb-name { font-size: 0.82rem; }
#char-switcher-btn .csb-sub { font-size: 0.6rem; }
/* Slim right-side icons. Default btn-sm padding eats ~16px
per side with gaps; bringing them down to a tighter
footprint frees ~40-60px combined for the switcher to
actually show the character name without ellipsing it
to "Sy...". Inline styles on individual buttons override
padding rules; use !important sparingly here so the
per-button color/badge styling stays intact. */
.topbar > .btn.btn-ghost.btn-sm { padding: 0.28rem 0.4rem !important; }
.topbar > .rwhub-mail-btn { font-size: 0.95rem !important; padding: 0.28rem 0.45rem !important; }
/* Help icon (spider search). Restored on mobile — the index
now spiders the player's inventory / spellbook / contacts /
factions / quests, not just static tab shortcuts, so it's
the fastest way to jump to a thing by name on a small
screen. Slim padding inherited from the .btn-ghost.btn-sm
rule above. */
.topbar-help-btn { font-size: 0.95rem; }
}
.topbar-spacer { flex: 1; }
.topbar-user { font-size: 0.82rem; color: var(--text2); }
.topbar-user strong { color: var(--text); }
.dashboard-body { flex: 1; padding: 0 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0)); max-width: 1100px; margin: 0 auto; width: 100%; }
.dash-panel:not(:has(> .hero-subnav)) { padding-top: 1.5rem; }
.page-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--gold); margin-bottom: 1.5rem; }
/* ── Cards ── */
.card {
background: var(--bg1); border: 1px solid var(--bg3);
border-radius: var(--radius); padding: 1.25rem;
margin-bottom: 1rem;
/* Light touch on purpose — this rule repeats dozens of times per
screen, so it only needs to take the edge off pure-flat, not
read as a raised hero element the way .login-card does. */
box-shadow: 0 4px 14px -10px rgba(0,0,0,0.6);
}
.card-gold { border-color: rgba(255,215,0,0.35); box-shadow: 0 0 0 1px rgba(255,215,0,0.05) inset, 0 8px 18px -16px rgba(255,215,0,0.35); }
/* Blue/green/purple card variants — same recipe as .card-gold/.card-scarlet
(tinted border, subtle inset+drop shadow, colored heading bar). Used to
give visually-identical stacked cards (e.g. Scheduling, HR) a distinct,
semantically-meaningful accent instead of one flat repeated gray box. */
.card-blue { border-color: rgba(91,155,213,0.35); box-shadow: 0 0 0 1px rgba(91,155,213,0.05) inset, 0 8px 18px -16px rgba(91,155,213,0.4); }
.card-green { border-color: rgba(76,175,80,0.35); box-shadow: 0 0 0 1px rgba(76,175,80,0.05) inset, 0 8px 18px -16px rgba(76,175,80,0.4); }
.card-purple { border-color: rgba(155,89,182,0.35); box-shadow: 0 0 0 1px rgba(155,89,182,0.05) inset, 0 8px 18px -16px rgba(155,89,182,0.4); }
/* Orange variant (2026-07-20) — see the --orange token comment above
for why this exists as a real class now. */
.card-orange { border-color: rgba(255,107,53,0.35); box-shadow: 0 0 0 1px rgba(255,107,53,0.05) inset, 0 8px 18px -16px rgba(255,107,53,0.4); }
.card-blue h3 { color: var(--blue); border-left-color: var(--blue); text-shadow: 0 0 8px rgba(91,155,213,0.22); }
.card-green h3 { color: var(--green); border-left-color: var(--green); text-shadow: 0 0 8px rgba(76,175,80,0.22); }
.card-purple h3 { color: var(--purple); border-left-color: var(--purple); text-shadow: 0 0 8px rgba(155,89,182,0.22); }
.card-orange h3 { color: var(--orange); border-left-color: var(--orange); text-shadow: 0 0 8px rgba(255,107,53,0.22); }
/* Forge's "no proficiency" locked-station message — was a bare inline
style repeated ~17 times (one per crafting station). One shared class
so it reads as an intentional "locked toolbox slot" card instead of
plain centered text floating on the background, and so any future
tweak only needs to happen once. */
.noprof-msg {
text-align: center; padding: 2.25rem 1.25rem; color: var(--text2);
font-size: 0.8rem; line-height: 1.5;
background: var(--bg2); border: 1px dashed var(--bg4); border-radius: 10px;
}
.noprof-msg i { margin-bottom: 0.75rem !important; }
/* Vivarium's "bare row card" — the same flat inline recipe
(bg2/bg3/8px/~0.6rem padding, no accent) was repeated verbatim
across Your Reports, Storage items, Pet/Plant Shop cards, and both
DM admin lists (Species Library, Capture Requests) — same
"repeats N times, one class fixes all of them" precedent as
.noprof-msg above. Base class carries the shared shape; a
per-context left-accent modifier (matching the existing
var(--blue)/--green/--purple/--gold tokens) gives each list its
own identity instead of one undifferentiated gray box repeated
everywhere. */
.viv-row-card {
display: flex; align-items: center; gap: 0.6rem;
background: var(--bg2); border: 1px solid var(--bg3); border-left: 3px solid var(--bg4);
border-radius: 8px; padding: 0.6rem 0.75rem; margin-bottom: 0.4rem;
}
.viv-row-card--blue { border-left-color: var(--blue); }
.viv-row-card--green { border-left-color: var(--green); }
.viv-row-card--purple { border-left-color: var(--purple); }
.viv-row-card--gold { border-left-color: var(--gold); }
/* Vivarium's section micro-label ("Your Reports", "Give Care",
"Suspects", "Habitat Items", etc.) — same uppercase/tracked-out
label repeated across the feature with only tiny, likely-accidental
variations (some bold, some not; 0.68-0.72rem). Standardizes on the
majority style (bold, 0.7rem) rather than preserving that
inconsistency; per-site margin overrides stay inline where a
specific spot genuinely needs a different one. */
.viv-section-label {
font-size: 0.7rem; font-weight: 700; color: var(--text2);
text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem;
}
/* ── Shop item cards — same skeleton (icon/title/meta/description,
divider, price+actions row) across all 4 Shop tabs, but each tab
gets its own texture so they still feel like different places.
Only the outer card container + action row use these classes —
the info content inside (item stats, descriptions, etc.) is
untouched so nothing that already worked changes shape. */
.shop-card { border-radius: 8px; padding: 0.7rem 0.85rem; margin-bottom: 0.5rem; position: relative; }
.shop-card-actions {
margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px solid var(--bg3);
display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}
/* Dashercoin — warm gold-foil sheen, like a coin catalog page */
.shop-card--catalog {
background: linear-gradient(135deg, rgba(255,215,0,0.10) 0%, rgba(255,215,0,0.02) 45%, var(--bg2) 100%);
border: 1px solid rgba(255,215,0,0.3);
}
/* Online — shipping-label corner fold + dashed edge */
.shop-card--online {
background: var(--bg2);
border: 1px dashed rgba(255,153,0,0.35);
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
/* Company Store — stamped requisition slip: double-ruled top/bottom */
.shop-card--merchant {
background: var(--bg2);
border-top: 2px solid rgba(76,175,80,0.45);
border-bottom: 2px solid rgba(76,175,80,0.45);
border-left: 1px solid rgba(76,175,80,0.2);
border-right: 1px solid rgba(76,175,80,0.2);
}
/* Components — faceted crystal, cut corners */
.shop-card--components {
background: linear-gradient(160deg, rgba(180,130,255,0.09), var(--bg2));
border: 1px solid rgba(180,130,255,0.3);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
/* Grocery — fresh produce-crate green, dashed like a farm-stand tag */
.shop-card--grocery {
background: linear-gradient(135deg, rgba(112,200,64,0.09) 0%, rgba(112,200,64,0.02) 45%, var(--bg2) 100%);
border: 1px dashed rgba(112,200,64,0.35);
}
/* Scarlet high-priority card — for urgent/danger sections (Initiative
Tracker, HP critical alerts, etc.). Brighter than --red so the
"this needs attention" cards out-shout normal cards without
slamming the whole UI with hot color. */
.card-scarlet { border-color: rgba(230,57,70,0.4); box-shadow: 0 0 0 1px rgba(230,57,70,0.06) inset, 0 8px 18px -16px rgba(230,57,70,0.4); background: linear-gradient(135deg, rgba(230,57,70,0.04), transparent), var(--bg1); }
/* Heading flag-bar: a small gold tick mark on the left edge of every
card heading, plus a faint gold underline glow. Reads as a
heraldic banner without crowding out the heading text. */
.card h3 { font-size: 0.95rem; color: var(--gold); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; padding-left: 0.6rem; border-left: 3px solid var(--gold); line-height: 1.3; text-shadow: 0 0 8px rgba(255,215,0,0.18); }
/* Scarlet variant for the same heading bar — used by .card-scarlet
sections so the bar matches the card's accent color. */
.card-scarlet h3 { color: var(--scarlet); border-left-color: var(--scarlet); text-shadow: 0 0 8px rgba(230,57,70,0.22); }
/* ── Stat Grid ── */
.stat-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stat-box {
flex: 1; min-width: 70px;
background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px;
padding: 0.5rem 0.4rem; text-align: center;
}
.stat-box .stat-label { font-size: 0.58rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.1em; }
.stat-box .stat-value { font-size: 1.1rem; font-weight: 700; color: var(--gold); }
.stat-box .stat-mod { font-size: 0.65rem; color: var(--text2); }
/* Ability score grid: explicit 3 columns × 2 rows. .stat-row is
flex-wrap which broke into 2/2/2 or 3/3 depending on width;
fixing the grid keeps the six classic abilities in a clean
block on every screen size. */
#p-ability-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
#p-ability-scores .stat-box { min-width: 0; flex: unset; border-left-width: 3px; border-left-style: solid; }
/* Per-ability accent stripe + matching label/value colors so the
text follows the color coding instead of every box reading
gold. Common D&D-fanart palette: STR=scarlet, DEX=green,
CON=orange, INT=blue, WIS=purple, CHA=gold. */
#p-ability-scores .stat-box[data-ab="str"] { border-left-color: var(--scarlet); }
#p-ability-scores .stat-box[data-ab="dex"] { border-left-color: #4caf50; }
#p-ability-scores .stat-box[data-ab="con"] { border-left-color: #e89c44; }
#p-ability-scores .stat-box[data-ab="int"] { border-left-color: var(--blue); }
#p-ability-scores .stat-box[data-ab="wis"] { border-left-color: var(--purple); }
#p-ability-scores .stat-box[data-ab="cha"] { border-left-color: var(--gold); }
#p-ability-scores .stat-box[data-ab="str"] .stat-value,
#p-ability-scores .stat-box[data-ab="str"] .stat-label { color: var(--scarlet); }
#p-ability-scores .stat-box[data-ab="dex"] .stat-value,
#p-ability-scores .stat-box[data-ab="dex"] .stat-label { color: #4caf50; }
#p-ability-scores .stat-box[data-ab="con"] .stat-value,
#p-ability-scores .stat-box[data-ab="con"] .stat-label { color: #e89c44; }
#p-ability-scores .stat-box[data-ab="int"] .stat-value,
#p-ability-scores .stat-box[data-ab="int"] .stat-label { color: var(--blue); }
#p-ability-scores .stat-box[data-ab="wis"] .stat-value,
#p-ability-scores .stat-box[data-ab="wis"] .stat-label { color: var(--purple); }
#p-ability-scores .stat-box[data-ab="cha"] .stat-value,
#p-ability-scores .stat-box[data-ab="cha"] .stat-label { color: var(--gold); }
/* Combat stats (AC/Init/Speed/Prof) moved onto the identity row in the
vitals bar 2026-07-19, sized up a bit since they're standalone there
rather than packed in a dense grid — scoped to #p-combat-stats
specifically so the Abilities score grid (same .stat-box class,
shares the base rule above) is untouched.
flex-grow bumped 0→1 (2026-07-24): this row grew from the original
4 tiles (AC/Init/Speed/Prof) to 7 (added Weapon Atk/Spell Atk/Save
DC), and on narrow mobile widths that wraps 3-per-line with a lone
7th tile on its own row — with grow:0 that tile stayed its natural
content width, leaving a wide dead strip of empty background next
to it. Growing lets each wrapped line's tiles fill 100% of that
line's width, whatever the count, instead of leaving a gap. */
/* Fluid (clamp()) 2026-07-25 — scales the 7 tiles' size continuously
with viewport width instead of one fixed size for every screen
above the 640px mobile breakpoint. Scoped to #p-combat-stats only,
so #p-ability-scores' shared .stat-box base rule is untouched.
Sizes trimmed further 2026-07-26 — Save DC (the 7th tile) was
wrapping onto its own full-width row since the first 6 already
filled the available line at the old sizes; shrinking each tile a
little lets all 7 sit on one row instead. */
#p-combat-stats.stat-row { gap: clamp(0.25rem, 0.2rem + 0.25vw, 0.4rem); margin-bottom: 0; }
#p-combat-stats .stat-box { flex: 1 0 auto; min-width: clamp(44px, 38px + 2vw, 60px); padding: clamp(0.3rem, 0.25rem + 0.2vw, 0.42rem) clamp(0.3rem, 0.25rem + 0.3vw, 0.5rem); }
#p-combat-stats .stat-box .stat-label { font-size: clamp(0.52rem, 0.48rem + 0.1vw, 0.62rem); }
#p-combat-stats .stat-box .stat-value { font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.2rem); }
#p-combat-stats .stat-box .stat-mod { font-size: clamp(0.56rem, 0.52rem + 0.1vw, 0.66rem); }
/* Modifier coloring — positive green, negative scarlet, zero stays
muted. Uses :where so specificity stays low for the active
gold-on-positive override below. */
.stat-box .stat-mod.pos { color: #4caf50; font-weight: 600; }
.stat-box .stat-mod.neg { color: var(--scarlet); font-weight: 600; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
@media (max-width: 500px) { .info-grid { grid-template-columns: 1fr; } }
.info-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.83rem; padding: 0.3rem 0; border-bottom: 1px solid var(--bg3); }
.info-row:last-child { border-bottom: none; }
.info-row .label { color: var(--text2); }
.info-row .value { color: var(--text); font-weight: 600; }
/* ── Finance Cards ── */
.finance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
@media (max-width: 500px) { .finance-grid { grid-template-columns: 1fr; } }
.finance-box { background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px; padding: 0.75rem; text-align: center; }
.finance-box .f-label { font-size: 0.65rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.25rem; }
.finance-box .f-value { font-size: 1.25rem; font-weight: 700; }
.f-debt { color: var(--red); }
.f-earn { color: var(--green); }
.f-net { color: var(--gold); }
/* ── Sessions list ── */
.session-item {
display: flex; align-items: flex-start; gap: 0.75rem;
padding: 0.75rem 0; border-bottom: 1px solid var(--bg3);
}
.session-item:last-child { border-bottom: none; }
.session-date-box {
background: var(--bg2); border-radius: 8px; padding: 0.4rem 0.6rem;
text-align: center; min-width: 46px; flex-shrink: 0;
}
.session-date-box .s-month { font-size: 0.6rem; text-transform: uppercase; color: var(--text2); }
.session-date-box .s-day { font-size: 1.1rem; font-weight: 700; color: var(--gold); line-height: 1; }
.session-info { flex: 1; }
.session-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.15rem; }
.session-meta { font-size: 0.75rem; color: var(--text2); }
.badge {
display: inline-block; padding: 0.15rem 0.5rem; border-radius: 20px;
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.badge-green { background: rgba(76,175,80,0.15); color: var(--green); border: 1px solid rgba(76,175,80,0.3); }
.badge-gold { background: rgba(255,215,0,0.12); color: var(--gold); border: 1px solid rgba(255,215,0,0.3); }
.badge-gray { background: rgba(150,150,180,0.1); color: var(--text2); border: 1px solid var(--bg4); }
.badge-blue { background: rgba(91,155,213,0.15); color: var(--blue); border: 1px solid rgba(91,155,213,0.3); }
.badge-red { background: rgba(224,85,85,0.15); color: var(--red); border: 1px solid rgba(224,85,85,0.3); }
/* Legacy v1 badge tiers */
.badge-bronze { background: rgba(205,127,50,0.15); color: #cd7f32; border: 1px solid rgba(205,127,50,0.35); }
.badge-silver { background: rgba(192,192,192,0.15); color: #c0c0c0; border: 1px solid rgba(192,192,192,0.35); }
.badge-purple { background: rgba(180,140,255,0.15); color: var(--purple); border: 1px solid rgba(180,140,255,0.35); }
/* ── Player Table (DM view) ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
th { text-align: left; padding: 0.5rem 0.75rem; color: var(--text2); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--bg3); }
td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--bg2); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg2); }
/* ── Stats Overview (DM) ── */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
@media (max-width: 640px) { .kpi-grid { grid-template-columns: 1fr 1fr; } }
.kpi-box { background: var(--bg1); border: 1px solid var(--bg3); border-radius: 10px; padding: 1rem; text-align: center; }
.kpi-box .kpi-value { font-size: 1.8rem; font-weight: 800; color: var(--gold); }
.kpi-box .kpi-label { font-size: 0.68rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.2rem; }
/* ── Activity Feed ── */
.activity-item { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.45rem 0; border-bottom: 1px solid var(--bg2); font-size: 0.8rem; }
.activity-item:last-child { border-bottom: none; }
.activity-icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.05rem; }
.activity-text { color: var(--text); flex: 1; }
.activity-time { color: var(--text2); font-size: 0.7rem; flex-shrink: 0; }
/* ── DM Reg Modal ── */
.modal-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,0.75);
z-index: 9999; display: none; align-items: center; justify-content: center; padding: 1rem;
}
/* The inbox is itself a modal-backdrop, and dialogs are launched from
inside it (e.g. the Session Wizard / session edit via the inbox's
Sessions tab). Sit the inbox one layer below the standard modal
z-index so any modal opened on top of it actually renders above it,
instead of behind it. Still above all non-modal page content. */
#modal-inbox, #modal-player-inbox { z-index: 9990; }
/* Vivarium minigames (Compost/Play/Tend) are launched from a button
inside the instance modal (#viv-instance-dlg), which is dynamically
created and appended to on open — always last in the DOM,
so at the same default z-index it would stack on top of these
static modals regardless of open order. Bump above it explicitly,
same fix pattern as the inbox exception above but in the opposite
direction (these need to win the stacking tie, not lose it). */
#modal-compost, #modal-play-pet, #modal-tend-plant { z-index: 10000; }
.modal-backdrop.open { display: flex; }
.modal {
background: var(--bg1); border: 1px solid rgba(255,215,0,0.2);
border-radius: 14px; padding: 1.75rem; width: 100%; max-width: 420px;
box-shadow: 0 12px 60px rgba(0,0,0,0.6);
/* Tall modals (multiclass level-up wizard, etc) need to scroll
when their content exceeds the viewport. The backdrop has
1rem padding on each side, so subtract 2rem from 100dvh.
dvh (dynamic viewport height) shrinks when the mobile browser
chrome (address bar, tab bar) appears, keeping the modal
fully visible without content hiding under the chrome. */
max-height: calc(100dvh - 2rem);
overflow-y: auto;
overscroll-behavior: contain;
/* Reserves the scrollbar's width permanently instead of only when
content overflows — without this, a minigame whose content height
changes mid-play (canvas resize, status bar wrapping, etc.) toggles
the scrollbar on/off, and each toggle shifts the modal's content
width sideways ("screen moves during minigames"). */
scrollbar-gutter: stable;
}
.modal h2 { font-size: 1.1rem; color: var(--gold); margin-bottom: 0.25rem; }
.modal p { font-size: 0.8rem; color: var(--text2); margin-bottom: 1rem; }
.modal-footer { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.25rem; }
/* ── Encounter Builder modal ── responsive layout + tap targets */
.enc-bldr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; flex: 1; min-height: 0; }
.enc-bldr-pane { display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px; padding: 0.5rem; min-height: 0; }
.enc-bldr-filters { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.45rem; align-items: center; }
.enc-bldr-filters .form-input { font-size: 0.8rem; padding: 0.3rem 0.45rem; }
.enc-bldr-filters .filter-q { flex: 1; min-width: 140px; }
.enc-bldr-filters .filter-cr { width: 96px; }
.enc-bldr-filters .filter-type{ min-width: 130px; flex: 1; }
.enc-bldr-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 0.4rem; align-items: center; padding: 0.4rem 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
.enc-bldr-row .name-col { min-width: 0; }
.enc-bldr-row .name-line { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc-bldr-row .meta-line { font-size: 0.66rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc-bldr-row .stat-col { font-size: 0.7rem; color: var(--text2); text-align: right; white-space: nowrap; line-height: 1.15; }
.enc-bldr-row .stat-col .sub { font-size: 0.62rem; }
.enc-bldr-tap { min-width: 38px; min-height: 38px; padding: 0.32rem 0.55rem; display: inline-flex; align-items: center; justify-content: center; }
.enc-bldr-count { width: 56px; min-height: 38px; font-size: 0.92rem; text-align: center; padding: 0.25rem; background: var(--bg2); border: 1px solid var(--bg3); border-radius: 4px; color: var(--text); }
.enc-lib-card { padding: 0.65rem; display: flex; justify-content: space-between; gap: 0.5rem; align-items: flex-start; }
.enc-lib-actions { display: flex; flex-direction: column; gap: 0.3rem; flex-shrink: 0; }
.enc-lib-actions .btn { min-height: 36px; }
@media (max-width: 720px) {
/* Stack the two-pane builder vertically; cap catalog so the encounter pane stays visible. */
.enc-bldr-grid { grid-template-columns: 1fr; }
.enc-bldr-pane.catalog { max-height: 42dvh; }
}
@media (max-width: 480px) {
.enc-bldr-filters .filter-q,
.enc-bldr-filters .filter-cr,
.enc-bldr-filters .filter-type { flex: 1 1 100%; min-width: 0; width: auto; }
.enc-bldr-row { grid-template-columns: 1fr auto auto; gap: 0.3rem; }
.enc-bldr-row .stat-col.hp-ac { display: none; } /* drop HP/AC on the catalog row to keep the + button reachable */
.enc-lib-card { flex-direction: column; }
.enc-lib-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
.enc-lib-actions .btn { flex: 1 1 calc(50% - 0.15rem); }
}
/* ── DM Registration Wizard ── */
.dmwiz-step-dot { color: var(--text2); background: var(--bg2); border-right: 1px solid var(--bg3); }
.dmwiz-step-dot:last-child { border-right: none; }
.dmwiz-step-dot.active { background: rgba(255,215,0,0.18); color: var(--gold); }
.dmwiz-step-dot.done { background: rgba(76,175,80,0.12); color: var(--green); }
/* ── Inbox modal ── */
/* dvh = dynamic viewport height; shrinks when the on-screen
keyboard opens so the compose bar stays visible. vh fallback
for browsers without dvh support (pre-2023) — those still get
the previous behavior (input may sit under keyboard). */
.inbox-modal { max-width: 680px !important; max-height: 82vh !important; max-height: 82dvh !important; padding: 0 !important; display: flex !important; flex-direction: column; overflow: hidden; }
.inbox-panel { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.inbox-thread-list { width: 200px; flex-shrink: 0; border-right: 1px solid var(--bg3); overflow-y: auto; padding: 0.5rem; background: var(--bg0); }
.inbox-thread-item { padding: 0.5rem 0.6rem; border-radius: 7px; cursor: pointer; margin-bottom: 0.25rem; transition: background 0.1s; }
.inbox-thread-item:hover { background: var(--bg3); }
.inbox-thread-item.active { background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.2); }
/* .inbox-view is itself a flex-column with .inbox-messages inside.
Both min-width:0 AND min-height:0 are needed: the panel above
this is row-direction on desktop (min-width matters, prevents
horizontal overflow squeezing) and column-direction on mobile
(min-height matters, lets this view shrink below its content
size so the inner overflow-y:auto on .inbox-messages can engage).
Forgetting min-height:0 here was the real reason mobile scroll
didn't work — the height-zero fix on .inbox-messages was
inert because this parent grew to fit content anyway. */
.inbox-view {
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* min-height:0 is the magic line for flex-column scroll containers
— without it, the default min-height:auto refuses to shrink the
container below its content size, which means flex:1 doesn't
actually constrain the height and overflow-y:auto never engages.
-webkit-overflow-scrolling:touch enables smooth momentum scroll
on older iOS. touch-action:pan-y tells the browser explicitly
that this element handles vertical pans (prevents iOS from
trying to capture the touch for some other gesture, like
rubber-band on the modal backdrop). overscroll-behavior:contain
stops the scroll from chaining to parent elements when you hit
the top/bottom. */
.inbox-messages {
flex: 1; min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
overscroll-behavior: contain;
padding: 0.75rem;
display: flex; flex-direction: column; gap: 0.4rem;
}
.inbox-msg { max-width: 78%; padding: 0.55rem 0.9rem; border-radius: 14px; font-size: 0.82rem; word-break: break-word; line-height: 1.45; }
.inbox-msg.mine { align-self: flex-end; border-radius: 14px 4px 14px 14px;
background: linear-gradient(135deg, rgba(212,175,55,0.28), rgba(180,130,20,0.1));
border: 1px solid rgba(212,175,55,0.45); }
.inbox-msg.theirs { align-self: flex-start; border-radius: 4px 14px 14px 14px;
background: linear-gradient(135deg, rgba(90,100,220,0.18), rgba(59,100,200,0.07));
border: 1px solid rgba(99,102,241,0.3);
border-left: 3px solid rgba(99,102,241,0.55); }
.inbox-compose-bar { border-top: 1px solid var(--bg3); padding: 0.6rem 0.75rem; display: flex; gap: 0.5rem; flex-shrink: 0; }
/* ── Party Chat Card (pinned group chat button) ────────────── */
#party-chat-card {
display:flex; align-items:center; gap:0.6rem;
padding:0.5rem 0.65rem; margin:0.4rem 0.4rem 0;
background:linear-gradient(135deg,rgba(255,215,0,0.1),rgba(255,215,0,0.04));
border:1px solid rgba(255,215,0,0.3); border-radius:9px;
cursor:pointer; transition:background 0.12s, border-color 0.12s;
flex-shrink:0;
}
#party-chat-card:hover { background:rgba(255,215,0,0.16); border-color:var(--gold); }
#party-chat-card.active { background:rgba(255,215,0,0.18); border-color:var(--gold); box-shadow:0 0 0 1px rgba(255,215,0,0.2); }
#party-chat-card .pc-icon { width:32px;height:32px;border-radius:50%;background:rgba(255,215,0,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.9rem;color:var(--gold); }
#party-chat-card .pc-label { flex:1;min-width:0; }
#party-chat-card .pc-name { font-size:0.8rem;font-weight:700;color:var(--text); }
#party-chat-card .pc-sub { font-size:0.62rem;color:var(--text2); }
#party-chat-unread { background:var(--scarlet);color:#fff;border-radius:999px;padding:0.05rem 0.38rem;font-size:0.6rem;font-weight:700;display:none; }
/* Group chat bubble — wider than DM, shows sender name above */
.inbox-msg.group { max-width:88%; }
.inbox-msg.group .msg-sender-row { display:flex; align-items:center; gap:0.35rem; margin-bottom:0.2rem; cursor:pointer; width:fit-content; }
.inbox-msg.group .msg-sender-row:hover .msg-sender-name { text-decoration:underline; }
.msg-sender-avatar { width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.5rem;flex-shrink:0; }
.msg-sender-name { font-size:0.65rem;font-weight:700;color:var(--text2); }
/* Name-click popover */
#player-name-popover {
position:fixed; z-index:10000;
background:var(--bg2); border:1px solid var(--bg3); border-radius:10px;
box-shadow:0 8px 32px rgba(0,0,0,0.45); padding:0.5rem;
min-width:160px; display:none; flex-direction:column; gap:0.2rem;
}
#player-name-popover.open { display:flex; }
.popover-header { display:flex; align-items:center; gap:0.5rem; padding:0.35rem 0.5rem 0.55rem; border-bottom:1px solid var(--bg3); margin-bottom:0.2rem; }
.popover-avatar { width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;flex-shrink:0; }
.popover-name { font-size:0.82rem;font-weight:700;color:var(--text); }
.popover-class { font-size:0.63rem;color:var(--text2); }
.popover-btn { display:flex;align-items:center;gap:0.5rem;padding:0.38rem 0.55rem;border-radius:7px;font-size:0.78rem;color:var(--text);cursor:pointer;transition:background 0.1s;border:none;background:none;width:100%;text-align:left; }
.popover-btn:hover { background:var(--bg3); }
.popover-btn i { width:14px;text-align:center;color:var(--text2);font-size:0.72rem; }
.popover-btn.danger { color:var(--scarlet); }
.popover-btn.danger i { color:var(--scarlet); }
.popover-btn.report { color:#f97316; }
.popover-btn.report i { color:#f97316; }
/* Report modal */
#modal-report-player .modal-box { max-width:370px; }
#report-target-banner { font-size:0.78rem; color:var(--text2); background:var(--bg2); border:1px solid var(--bg3); border-radius:8px; padding:0.45rem 0.7rem; margin-bottom:0.85rem; }
#report-target-banner strong { color:var(--text); }
#report-reason { width:100%; padding:0.42rem 0.6rem; background:var(--bg2); border:1.5px solid var(--bg3); color:var(--text); border-radius:7px; font-size:0.82rem; margin-bottom:0.6rem; }
#report-details { width:100%; padding:0.42rem 0.6rem; background:var(--bg2); border:1.5px solid var(--bg3); color:var(--text); border-radius:7px; font-size:0.82rem; resize:vertical; min-height:80px; font-family:inherit; }
#report-details::placeholder { color:var(--text3); }
/* ── Social Handle Picker ─────────────────────────────────── */
.handle-input-row { display:flex; gap:0.45rem; align-items:center; }
.handle-prefix { font-size:1rem; font-weight:700; color:var(--gold); flex-shrink:0; }
#handle-input { flex:1; min-width:0; font-size:0.92rem; padding:0.4rem 0.6rem; background:var(--bg2); border:1.5px solid var(--bg3); color:var(--text); border-radius:7px; transition:border-color 0.15s; }
#handle-input.ok { border-color:#4ade80; }
#handle-input.bad { border-color:var(--scarlet); }
#handle-status { font-size:0.7rem; min-height:1.1em; margin-top:0.2rem; }
#handle-status.ok { color:#4ade80; }
#handle-status.bad { color:var(--scarlet); }
#handle-status.idle { color:var(--text2); }
.share-link-bar { display:flex; gap:0.4rem; align-items:center; margin-top:0.55rem; }
.share-link-url { flex:1; font-size:0.72rem; font-family:monospace; color:var(--gold); background:var(--bg2); border:1px solid var(--bg3); border-radius:6px; padding:0.3rem 0.5rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
/* ── Party Social Hub ──────────────────────────────────────── */
#party-social-wrap { display:flex; gap:0.75rem; height:500px; margin-bottom:0.75rem; }
#party-friends-col { width:210px; flex-shrink:0; display:flex; flex-direction:column; background:var(--bg1); border:1px solid var(--bg3); border-radius:12px; overflow:hidden; }
#party-friends-col-header { padding:0.55rem 0.65rem; border-bottom:1px solid var(--bg3); background:var(--bg2); flex-shrink:0; }
#party-friends-col-header h4 { margin:0; font-size:0.78rem; letter-spacing:0.06em; color:var(--text); display:flex; align-items:center; gap:0.4rem; }
#party-add-friend-bar { display:flex; gap:0.3rem; margin-top:0.4rem; }
#party-friend-input { flex:1; font-size:0.72rem; padding:0.28rem 0.5rem; border:1px solid var(--bg3); border-radius:6px; background:var(--bg0); color:var(--text); min-width:0; }
#party-friend-input:focus { outline:none; border-color:var(--gold); }
#party-friends-list { flex:1; overflow-y:auto; padding:0.4rem 0.4rem 0.6rem; }
#party-friends-col .rwhub-contact-row { padding:0.4rem 0.5rem; margin-bottom:0.22rem; border-radius:8px; }
#party-friends-col .rwhub-contact-avatar { width:32px; height:32px; font-size:0.82rem; }
#party-friends-col .rwhub-contact-text { gap:0; }
#party-friends-col .rwhub-contact-name { font-size:0.78rem; }
#party-friends-col .rwhub-contact-sub { font-size:0.62rem; }
#party-friends-col .rwhub-contact-activity { font-size:0.6rem; margin-top:0.06rem; }
#party-friends-col .rwhub-contact-msg-btn { display:none; } /* no msg btn in compact list */
#party-friends-col .rwhub-section-label { font-size:0.58rem; padding:0.35rem 0.4rem 0.15rem; }
/* Chat panel */
#party-chat-panel { flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg1); border:1px solid var(--bg3); border-radius:12px; overflow:hidden; }
#party-chat-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.75rem; color:var(--text3); text-align:center; padding:2rem; }
#party-chat-empty i { font-size:2.2rem; opacity:0.35; }
#party-chat-empty p { font-size:0.8rem; margin:0; }
#party-chat-view { display:none; flex:1; flex-direction:column; overflow:hidden; }
#party-chat-view.active { display:flex; }
#party-chat-header { display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0.8rem; border-bottom:1px solid var(--bg3); background:var(--bg2); flex-shrink:0; }
#party-chat-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; border:2px solid var(--bg3); }
#party-chat-info { flex:1; min-width:0; }
#party-chat-title { font-size:0.88rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#party-chat-subtitle { font-size:0.63rem; color:var(--text2); margin-top:0.05rem; }
#party-chat-messages { flex:1; overflow-y:auto; padding:0.75rem; display:flex; flex-direction:column; gap:0.4rem; }
#party-chat-compose { display:flex; gap:0.45rem; padding:0.5rem 0.65rem; border-top:1px solid var(--bg3); background:var(--bg2); flex-shrink:0; align-items:flex-end; }
#party-chat-input { flex:1; background:var(--bg0); border:1px solid var(--bg3); border-radius:8px; color:var(--text); font-size:0.82rem; padding:0.42rem 0.65rem; resize:none; min-height:34px; max-height:90px; font-family:inherit; line-height:1.4; overflow-y:auto; }
#party-chat-input:focus { outline:none; border-color:var(--gold); }
@media (max-width:599px) {
/* Friends list takes natural height; no fixed max so the list breathes */
#party-social-wrap { flex-direction:column; height:auto; gap:0.5rem; }
#party-friends-col { width:100%; max-height:none; }
#party-friends-col .rwhub-contact-avatar { width:28px; height:28px; font-size:0.75rem; }
/* Chat panel slides in over the full screen on mobile */
#party-chat-panel {
position:fixed; inset:0; z-index:600;
border-radius:0; border:none;
height:100dvh; height:100vh; /* dvh fallback */
transform:translateX(100%);
transition:transform 0.22s cubic-bezier(0.4,0,0.2,1);
display:flex; /* always in DOM, transform controls visibility */
flex-direction:column;
}
#party-chat-panel.mobile-open { transform:translateX(0); }
/* Back button visible only on mobile */
#party-chat-back-btn { display:flex !important; }
/* Bigger touch targets in compose area */
#party-chat-compose { padding:0.65rem 0.75rem; gap:0.5rem; }
#party-chat-input { font-size:1rem; min-height:44px; padding:0.6rem 0.75rem; }
#party-chat-compose .btn { padding:0.55rem 0.9rem; font-size:1rem; }
/* Message bubbles use more width on mobile */
.inbox-msg { max-width:92% !important; }
.inbox-msg.group { max-width:96% !important; }
}
/* Back button hidden on desktop */
#party-chat-back-btn { display:none; }
/* ── RealmHub shell (mobile-first social hub) ──
Phase 1 of the inbox redesign. The shell uses a stack model:
on mobile, only one view is visible at a time and tapping a
thread row slides the message pane in from the right. On
desktop ≥720px the root + thread views flow side-by-side. */
.rwhub-modal {
/* Widened from 760 → 1100 so the desktop side-by-side layout
(thread list at left, conversation at right) has real
breathing room — the previous 760 was so narrow that the
conversation pane was only ~520 wide, which felt like a
cramped mobile single-pane view even on a 1920-wide monitor.
Narrow windows still cap to 100%. */
max-width: 1100px !important;
max-height: 92dvh !important;
width: 100%;
padding: 0 !important;
display: flex !important;
flex-direction: column;
overflow: hidden;
position: relative;
}
.rwhub-topbar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.85rem;
border-bottom: 1px solid var(--bg3);
background: linear-gradient(135deg, rgba(255,215,0,0.08), transparent);
flex-shrink: 0;
min-height: 50px;
}
.rwhub-back {
background: var(--bg2);
border: 1px solid var(--bg3);
color: var(--gold);
width: 34px; height: 34px;
border-radius: 50%;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem;
transition: background 0.15s, transform 0.1s;
flex-shrink: 0;
}
.rwhub-back:active { transform: scale(0.94); background: var(--bg3); }
.rwhub-title-wrap { flex: 1; min-width: 0; }
.rwhub-filters {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.55rem 0.4rem;
border-right: 1px solid var(--bg3);
background: var(--bg1);
overflow-y: auto;
flex-shrink: 0;
width: 108px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.rwhub-filters::-webkit-scrollbar { width: 4px; }
/* Mobile: flip inbox to a column layout — horizontal scrolling
chip strip on top, thread list below. The previous "shrink the
sidebar to 56px" trick clipped chip labels (most chips have no
icon to fall back to), and a 56px column ate too much width
for the thread list to breathe. */
@media (max-width: 600px) {
.rwhub-tab-pane[data-pane="inbox"] {
flex-direction: column !important;
min-height: 0;
}
.rwhub-filters {
width: 100%;
flex-direction: row;
gap: 0.35rem;
padding: 0.5rem 0.55rem;
border-right: none;
border-bottom: 1px solid var(--bg3);
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap;
flex-shrink: 0;
}
.rwhub-chip {
width: auto;
white-space: nowrap;
text-align: center;
border-radius: 999px;
font-size: 0.7rem;
padding: 0.32rem 0.7rem;
}
}
.rwhub-chip {
flex-shrink: 0;
font-size: 0.74rem;
padding: 0.4rem 0.7rem;
border-radius: 8px;
background: var(--bg2);
border: 1px solid var(--bg3);
color: var(--text2);
cursor: pointer;
font-weight: 600;
letter-spacing: 0.02em;
text-align: left;
width: 100%;
transition: background 0.1s, border-color 0.1s, color 0.1s;
-webkit-tap-highlight-color: transparent;
}
.rwhub-chip.active {
background: rgba(255,215,0,0.15);
border-color: var(--gold);
color: var(--gold);
}
.rwhub-chip:active { transform: scale(0.96); }
.rwhub-stack {
flex: 1;
display: flex;
min-height: 0;
position: relative;
overflow: hidden;
}
.rwhub-view {
display: flex;
flex-direction: column;
min-height: 0;
transition: transform 0.25s ease;
will-change: transform;
}
.rwhub-view-root {
flex: 1;
width: 100%;
overflow: hidden;
}
.rwhub-view-thread {
position: absolute;
inset: 0;
transform: translateX(100%);
background: var(--bg1);
z-index: 5;
}
/* When the stack is at "thread", slide the thread view in. */
[data-stack="thread"] .rwhub-view-thread { transform: translateX(0); }
/* On desktop, both root and thread are visible side-by-side
(Slack / Discord / Gmail layout). 280px sidebar gives the
thread-list rows room for label + snippet + timestamp on one
line. The back arrow in the topbar is also redundant here
(the list never leaves the screen) so we hide it. */
@media (min-width: 720px) {
.rwhub-view-root { flex: 0 0 280px; border-right: 1px solid var(--bg3); }
.rwhub-view-thread { position: static; transform: none !important; flex: 1; z-index: auto; }
.rwhub-back { display: none !important; }
}
.rwhub-tab-pane { flex: 1; overflow-y: auto; min-height: 0; }
.rwhub-tabbar {
display: flex;
border-top: 1px solid var(--bg3);
background: var(--bg1);
flex-shrink: 0;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.rwhub-tab {
flex: 1;
background: none;
border: none;
padding: 0.55rem 0.3rem 0.5rem;
cursor: pointer;
color: var(--text3);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.18rem;
font-size: 0.62rem;
letter-spacing: 0.04em;
font-weight: 600;
position: relative;
-webkit-tap-highlight-color: transparent;
transition: color 0.15s;
}
.rwhub-tab i { font-size: 1.05rem; }
.rwhub-tab.active { color: var(--gold); }
.rwhub-tab.active::before {
content: '';
position: absolute; top: 0; left: 25%; right: 25%;
height: 2px;
background: linear-gradient(90deg, var(--gold), var(--scarlet));
border-radius: 0 0 2px 2px;
}
.rwhub-tab:active { transform: scale(0.97); }
.rwhub-tab-badge {
position: absolute;
top: 5px; right: calc(50% - 16px);
background: var(--scarlet);
color: #fff;
border-radius: 999px;
width: 8px; height: 8px;
font-size: 0;
}
.rwhub-fab {
position: absolute;
right: 0.85rem;
bottom: calc(60px + env(safe-area-inset-bottom, 0) + 0.55rem);
width: 50px; height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), #d4a200);
color: #1a1a1a;
border: none;
box-shadow: 0 4px 14px -2px rgba(0,0,0,0.45), 0 0 0 2px rgba(255,215,0,0.18);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 1.05rem;
z-index: 10;
-webkit-tap-highlight-color: transparent;
transition: transform 0.12s, box-shadow 0.15s;
}
.rwhub-fab:active { transform: scale(0.92); }
.rwhub-fab:hover { box-shadow: 0 6px 18px -2px rgba(0,0,0,0.55), 0 0 0 2px rgba(255,215,0,0.32); }
/* Hide the compose FAB while a thread is open — its position
collides with the reply bar's Send button on mobile, and the
reply bar already gives you a way to write. */
.rwhub-modal[data-stack="thread"] .rwhub-fab { display: none; }
/* Role-aware visibility on the unified inbox modal.
_applyInboxRoleVisibility toggles this class on every
[data-inbox-tab-role] element when the modal opens. */
.inbox-role-hidden { display: none !important; }
/* Hide the inbox tabstrip's native scrollbar — wraps long tab
lists on mobile but the chrome is noisy. */
.inbox-tabstrip::-webkit-scrollbar { display: none; }
.rwhub-more-row {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.65rem 0.75rem;
background: var(--bg2);
border: 1px solid var(--bg3);
border-radius: 8px;
color: var(--text);
font-size: 0.82rem;
cursor: pointer;
width: 100%;
text-align: left;
-webkit-tap-highlight-color: transparent;
transition: background 0.1s;
}
.rwhub-more-row:hover { background: var(--bg3); }
.rwhub-more-row > i:first-child { width: 18px; text-align: center; }
.rwhub-more-row > span:not(:last-child) { flex: 1; }
/* ── Calendar (Phase 4) ── */
.rwhub-cal-header {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.6rem;
border-bottom: 1px solid var(--bg3);
background: var(--bg1);
flex-shrink: 0;
}
.rwhub-cal-nav {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--bg2);
border: 1px solid var(--bg3);
color: var(--gold);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 0.7rem;
-webkit-tap-highlight-color: transparent;
}
.rwhub-cal-nav:active { transform: scale(0.94); background: var(--bg3); }
.rwhub-cal-title {
flex: 1;
background: none;
border: none;
color: var(--text);
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
text-align: center;
padding: 0 0.3rem;
-webkit-tap-highlight-color: transparent;
}
.rwhub-cal-toggles {
display: flex;
gap: 0.2rem;
background: var(--bg2);
border: 1px solid var(--bg3);
border-radius: 999px;
padding: 2px;
}
.rwhub-cal-toggle {
background: none;
border: none;
color: var(--text2);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.2rem 0.55rem;
border-radius: 999px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.rwhub-cal-toggle.active {
background: linear-gradient(135deg, var(--gold), #d4a200);
color: #1a1a1a;
}
.rwhub-cal-body { flex: 1; overflow-y: auto; padding: 0.4rem; }
.rwhub-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
background: var(--bg3);
border-radius: 8px;
overflow: hidden;
}
.rwhub-cal-dow,
.rwhub-cal-day {
background: var(--bg1);
min-height: 0;
}
.rwhub-cal-dow {
text-align: center;
font-size: 0.6rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
color: var(--text3);
padding: 0.35rem 0;
}
.rwhub-cal-day {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0.25rem 0.3rem;
cursor: pointer;
min-height: 52px;
-webkit-tap-highlight-color: transparent;
transition: background 0.1s;
position: relative;
}
.rwhub-cal-day.muted { opacity: 0.42; }
.rwhub-cal-day:hover { background: var(--bg2); }
.rwhub-cal-day.today { background: rgba(230,57,70,0.07); }
.rwhub-cal-day.today .rwhub-cal-daynum {
background: var(--scarlet); color: #fff;
width: 22px; height: 22px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800;
}
.rwhub-cal-daynum {
font-size: 0.72rem;
font-weight: 700;
color: var(--text);
line-height: 1;
margin-bottom: 0.2rem;
}
.rwhub-cal-dots {
display: flex; flex-wrap: wrap;
gap: 2px;
margin-top: auto;
}
.rwhub-cal-dot {
width: 6px; height: 6px; border-radius: 50%;
}
.rwhub-cal-dot.session { background: var(--gold); }
.rwhub-cal-dot.session-request { background: linear-gradient(135deg, var(--gold), var(--scarlet)); }
.rwhub-cal-dot.deadline { background: var(--scarlet); }
.rwhub-cal-dot.did { background: var(--blue); }
.rwhub-cal-dot.lr { background: #4caf50; }
.rwhub-cal-dot.recurring { background: var(--purple, #b079e6); }
.rwhub-cal-agenda { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.2rem; }
.rwhub-cal-agenda-row {
display: flex; align-items: center; gap: 0.6rem;
padding: 0.45rem 0.6rem;
background: var(--bg2);
border: 1px solid var(--bg3);
border-left: 3px solid var(--bg4);
border-radius: 6px;
font-size: 0.78rem;
}
.rwhub-cal-agenda-row.k-session { border-left-color: var(--gold); }
.rwhub-cal-agenda-row.k-session-request { border-left-color: var(--gold); }
.rwhub-cal-agenda-row.k-deadline { border-left-color: var(--scarlet); }
.rwhub-cal-agenda-row.k-did { border-left-color: var(--blue); }
.rwhub-cal-agenda-row.k-lr { border-left-color: #4caf50; }
.rwhub-cal-agenda-time {
font-size: 0.66rem; color: var(--text2);
font-variant-numeric: tabular-nums;
min-width: 56px;
}
.rwhub-cal-agenda-title { flex: 1; font-weight: 600; color: var(--text); }
.rwhub-cal-agenda-meta { font-size: 0.66rem; color: var(--text3); }
.rwhub-cal-agenda-section-label {
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text3);
font-weight: 700;
padding: 0.5rem 0.4rem 0.2rem;
}
/* ── Quick Actions strip (Inbox tab) ── */
.rwhub-quickbar {
display: flex;
gap: 0.4rem;
padding: 0.55rem 0.6rem;
background: linear-gradient(135deg, rgba(255,215,0,0.05), transparent);
border-bottom: 1px solid var(--bg3);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
flex-shrink: 0;
}
.rwhub-quickbar::-webkit-scrollbar { height: 4px; }
.rwhub-qa {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.7rem;
background: var(--bg2);
border: 1px solid var(--bg3);
border-radius: 999px;
color: var(--text);
font-size: 0.74rem;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.02em;
-webkit-tap-highlight-color: transparent;
transition: background 0.1s, transform 0.1s, border-color 0.1s;
}
.rwhub-qa:active { transform: scale(0.96); }
.rwhub-qa:hover { background: var(--bg3); }
.rwhub-qa i { font-size: 0.78rem; opacity: 0.85; }
.rwhub-qa-primary {
background: linear-gradient(135deg, var(--gold), #d4a200);
color: #1a1a1a;
border-color: var(--gold);
font-weight: 700;
}
.rwhub-qa-primary:hover { background: linear-gradient(135deg, #ffe14d, #d4a200); }
.rwhub-qa-primary i { opacity: 1; }
/* ── Contacts list ── */
/* ── Friends List (game-style) ─────────────────────────────── */
.rwhub-contact-section { margin-bottom: 0.75rem; }
.rwhub-section-label {
font-size: 0.6rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text3);
font-weight: 800;
padding: 0.5rem 0.5rem 0.2rem;
display: flex; align-items: center; gap: 0.4rem;
}
.rwhub-section-count {
background: var(--bg3);
color: var(--text3);
border-radius: 999px;
padding: 0.05rem 0.38rem;
font-size: 0.58rem;
font-weight: 700;
}
.rwhub-contact-row {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.6rem 0.65rem;
background: linear-gradient(135deg, var(--bg2), var(--bg1));
border: 1px solid var(--bg3);
border-radius: 10px;
color: var(--text);
cursor: pointer;
width: 100%;
text-align: left;
margin-bottom: 0.3rem;
-webkit-tap-highlight-color: transparent;
transition: background 0.12s, border-color 0.12s, transform 0.1s;
}
.rwhub-contact-row.online {
border-color: rgba(80,200,120,0.28);
background: linear-gradient(135deg, rgba(80,200,120,0.06), var(--bg2));
}
.rwhub-contact-row:hover { background: var(--bg3); border-color: var(--gold); }
.rwhub-contact-row:active { transform: scale(0.985); }
/* Avatar: colored circle with class icon + presence dot */
.rwhub-contact-avatar {
position: relative;
width: 42px; height: 42px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 1.05rem;
border: 2px solid var(--bg3);
}
.rwhub-contact-avatar.online { border-color: rgba(80,200,120,0.5); }
.rwhub-presence-dot {
position: absolute;
bottom: -1px; right: -1px;
width: 11px; height: 11px;
border-radius: 50%;
border: 2px solid var(--bg0);
background: var(--bg3);
}
.rwhub-presence-dot.online { background: #50c878; }
.rwhub-contact-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rwhub-contact-name {
font-size: 0.87rem;
font-weight: 700;
color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
display: flex; align-items: center; gap: 0.35rem;
}
.rwhub-contact-sub {
font-size: 0.67rem;
color: var(--text2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
margin-top: 0.05rem;
}
.rwhub-contact-activity {
font-size: 0.65rem;
margin-top: 0.1rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rwhub-contact-activity.active { color: #50c878; }
.rwhub-contact-activity.idle { color: var(--text3); }
/* Inline message button shown on the right */
.rwhub-contact-msg-btn {
flex-shrink: 0;
background: none;
border: 1px solid var(--bg3);
border-radius: 7px;
color: var(--text2);
padding: 0.28rem 0.55rem;
font-size: 0.72rem;
cursor: pointer;
transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.rwhub-contact-msg-btn:hover { background: rgba(255,215,0,0.12); border-color: var(--gold); color: var(--gold); }
/* On mobile (≤599px) make the modal full-screen so it feels like
a native app. The existing inbox-modal mobile rule already
does max-width:100% / max-height:94dvh; we go a bit further. */
@media (max-width: 599px) {
#modal-player-inbox.open { padding: 0; align-items: stretch; }
.rwhub-modal {
max-width: 100% !important;
max-height: 100% !important;
height: 100dvh !important;
border-radius: 0 !important;
}
}
/* ── Misc ── */
.text-muted { color: var(--text2); }
.text-sm { font-size: 0.8rem; }
.mt-1 { margin-top: 0.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text2); font-size: 0.85rem; }
.empty-state i { font-size: 2rem; opacity: 0.3; display: block; margin-bottom: 0.5rem; }
/* Sizes below are fluid (clamp()) rather than fixed px/rem, 2026-07-25
— this is the Hero vitals bar's own identity block (single use,
confirmed via grep before touching), so scaling it doesn't affect
any other profile-header/-avatar instance elsewhere in the app.
Interpolates roughly between a 360px phone and a 1440px desktop;
.vitals-grid's 640px column-collapse (structural, not a size) is
unrelated and stays a hard breakpoint. */
.profile-header {
display: flex; align-items: center; gap: clamp(0.6rem, 0.4rem + 1vw, 1.2rem); margin-bottom: clamp(0.6rem, 0.5rem + 0.6vw, 1rem);
}
.profile-avatar {
width: clamp(44px, 38px + 2.5vw, 64px); height: clamp(44px, 38px + 2.5vw, 64px); border-radius: 50%;
background: rgba(255,215,0,0.1); border: 2px solid rgba(255,215,0,0.3);
display: flex; align-items: center; justify-content: center;
font-size: clamp(1.15rem, 1rem + 0.6vw, 1.7rem); color: var(--gold); flex-shrink: 0; overflow: hidden;
}
.profile-name { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.4rem); font-weight: 700; }
.profile-meta { font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.88rem); color: var(--text2); margin-top: 0.15rem; }
.section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .section-grid { grid-template-columns: 1fr; } }
.id-badge { font-family: monospace; background: var(--bg2); border: 1px solid var(--bg4); border-radius: 6px; padding: 0.15rem 0.5rem; font-size: 0.75rem; color: var(--text2); }
/* ── Toast ── */
#toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 99999; display: flex; flex-direction: column; gap: 0.5rem; transition: bottom 0.15s; }
/* When the combat modal is open its footer (Roll d20 /
Advantage / Disadvantage / d20 result) sits at the bottom of
the centered dialog — which on smaller screens overlaps the
default toast-container bottom. Lift the toasts above the
footer so action-pick confirmations don't block the roller.
openCombatRefModal toggles body.combat-modal-open as a
JS-side fallback for browsers without :has() support. */
body:has(#modal-combat-ref.open) #toast-container,
body.combat-modal-open #toast-container { bottom: 5.5rem; }
.toast { background: var(--bg2); border: 1px solid var(--bg4); border-radius: 8px; padding: 0.6rem 1rem; font-size: 0.82rem; color: var(--text); box-shadow: 0 4px 20px rgba(0,0,0,0.4); animation: fadeUp 0.25s ease; max-width: 340px; position: relative; overflow: hidden; cursor: pointer; }
.toast .toast-progress { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--gold); animation: toastTimer linear forwards; }
.toast.success { border-color: rgba(76,175,80,0.5); }
.toast.success .toast-progress { background: rgba(76,175,80,0.7); }
.toast.warn { border-color: rgba(255,193,7,0.5); }
.toast.warn .toast-progress { background: rgba(255,193,7,0.7); }
.toast.error { border-color: rgba(224,85,85,0.5); }
.toast.error .toast-progress { background: rgba(224,85,85,0.7); }
.toast.fadeOut { animation: fadeOut 0.3s ease forwards; }
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-8px); } }
@keyframes toastTimer { from { width: 100%; } to { width: 0%; } }
/* Skeleton loading placeholders */
.skeleton { background: var(--bg3); border-radius: 6px; position: relative; overflow: hidden; }
.skeleton::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent); animation: skeletonShimmer 1.5s infinite; }
@keyframes skeletonShimmer { to { left: 100%; } }
.skeleton-card { height: 72px; margin-bottom: 0.5rem; }
.skeleton-line { height: 14px; margin-bottom: 0.4rem; }
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 65%; }
.skeleton-line.long { width: 90%; }
.skills-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.skill-tag { background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.2); border-radius: 20px; padding: 0.15rem 0.55rem; font-size: 0.72rem; color: var(--gold); cursor: help; }
.skill-tag.dim { background: rgba(255,255,255,0.03); border: 1px solid var(--bg3); color: var(--text2); }
.skill-tag.prof { background: rgba(255,215,0,0.15); border: 1px solid var(--gold); color: var(--gold); font-weight: 600; }
.skill-tag.exp { background: linear-gradient(135deg, rgba(255,215,0,0.22), rgba(255,140,0,0.18)); border: 1px solid #ffb84d; color: #ffe066; font-weight: 700; box-shadow: 0 0 8px rgba(255,180,60,0.25); }
.skill-tag .skill-mod { opacity: 0.75; margin-left: 0.3rem; font-variant-numeric: tabular-nums; }
.skill-tag.prof .skill-mod, .skill-tag.exp .skill-mod { opacity: 1; }
/* Passive perception / investigation tiles. Color coded by their
driving ability per the same palette as ability scores +
skills: WIS=purple (Perception), INT=blue (Investigation). */
.passive-tile { flex: 1; min-width: 120px; background: var(--bg2); border: 1px solid var(--bg3); border-left: 3px solid var(--bg4); border-radius: 8px; padding: 0.45rem 0.6rem; cursor: help; transition: border-color 0.15s; }
.passive-tile .passive-label { font-size: 0.6rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.08em; }
.passive-tile .passive-val { font-size: 1.15rem; font-weight: 700; color: var(--gold); margin-top: 0.15rem; font-variant-numeric: tabular-nums; }
.passive-tile[data-ab="wis"] { border-left-color: var(--purple); }
.passive-tile[data-ab="wis"] .passive-label,
.passive-tile[data-ab="wis"] .passive-val { color: var(--purple); }
.passive-tile[data-ab="int"] { border-left-color: var(--blue); }
.passive-tile[data-ab="int"] .passive-label,
.passive-tile[data-ab="int"] .passive-val { color: var(--blue); }
.passive-tile[data-ab="str"] { border-left-color: var(--scarlet); }
.passive-tile[data-ab="str"] .passive-label,
.passive-tile[data-ab="str"] .passive-val { color: var(--scarlet); }
/* Saving throw tiles */
/* Save tiles — same heraldic palette as ability scores + skills.
Each tile is tagged with data-ab="str|dex|…" so its left
border, label, and value all read in the matching tone (STR=
scarlet, DEX=green, CON=orange, INT=blue, WIS=purple, CHA=
gold). The .prof state still wins the visual hierarchy: a
brighter tinted background + the PROF badge so proficient
saves are unambiguously "the strong ones." */
/* Sized to match #p-combat-stats .stat-box (2026-07-22) — save-tile
now lives on the vitals-bar right next to those combat stats, so
it should read as a peer, not a smaller chip. Only render site is
#p-saves-list (renderSaves() in rw-core.js), so safe to resize
without affecting anything else. */
.save-tile { display: flex; flex-direction: column; align-items: center; padding: 0.45rem 0.6rem; background: var(--bg2); border: 1px solid var(--bg3); border-left: 3px solid var(--bg4); border-radius: 6px; min-width: 60px; cursor: help; }
.save-tile.prof { background: rgba(255,215,0,0.1); }
.save-tile .save-label { font-size: 0.64rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.08em; }
.save-tile .save-val { font-size: 1.3rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.save-tile .save-flag { font-size: 0.58rem; color: var(--gold); opacity: 0; }
.save-tile.prof .save-flag { opacity: 1; }
/* Per-ability accent — applies whether or not the save is
proficient, so even a non-prof save is visually grouped with
its driving stat. Proficiency adds a tinted background +
PROF badge on top of the per-ability color. */
.save-tile[data-ab="str"] { border-left-color: var(--scarlet); }
.save-tile[data-ab="dex"] { border-left-color: #4caf50; }
.save-tile[data-ab="con"] { border-left-color: #e89c44; }
.save-tile[data-ab="int"] { border-left-color: var(--blue); }
.save-tile[data-ab="wis"] { border-left-color: var(--purple); }
.save-tile[data-ab="cha"] { border-left-color: var(--gold); }
.save-tile[data-ab="str"] .save-label,
.save-tile[data-ab="str"] .save-val { color: var(--scarlet); }
.save-tile[data-ab="dex"] .save-label,
.save-tile[data-ab="dex"] .save-val { color: #4caf50; }
.save-tile[data-ab="con"] .save-label,
.save-tile[data-ab="con"] .save-val { color: #e89c44; }
.save-tile[data-ab="int"] .save-label,
.save-tile[data-ab="int"] .save-val { color: var(--blue); }
.save-tile[data-ab="wis"] .save-label,
.save-tile[data-ab="wis"] .save-val { color: var(--purple); }
.save-tile[data-ab="cha"] .save-label,
.save-tile[data-ab="cha"] .save-val { color: var(--gold); }
/* Skills grouped by governing ability */
.skills-group { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.3rem 0 0.3rem 0.55rem; border-bottom: 1px dashed var(--bg3); border-left: 3px solid transparent; transition: border-color 0.15s; }
.skills-group:last-child { border-bottom: none; }
.skills-group-label { flex: 0 0 2.4rem; font-size: 0.68rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; padding-top: 0.25rem; }
/* Per-ability accent stripe + label color, matching the ability
score boxes above. STR / DEX / CON / INT / WIS / CHA each get
a distinct heraldic tone so the player can scan the skill list
by ability without reading every label. */
.skills-group[data-ab="str"] { border-left-color: var(--scarlet); }
.skills-group[data-ab="dex"] { border-left-color: #4caf50; }
.skills-group[data-ab="con"] { border-left-color: #e89c44; }
.skills-group[data-ab="int"] { border-left-color: var(--blue); }
.skills-group[data-ab="wis"] { border-left-color: var(--purple); }
.skills-group[data-ab="cha"] { border-left-color: var(--gold); }
.skills-group[data-ab="str"] .skills-group-label { color: var(--scarlet); }
.skills-group[data-ab="dex"] .skills-group-label { color: #4caf50; }
.skills-group[data-ab="con"] .skills-group-label { color: #e89c44; }
.skills-group[data-ab="int"] .skills-group-label { color: var(--blue); }
.skills-group[data-ab="wis"] .skills-group-label { color: var(--purple); }
.skills-group[data-ab="cha"] .skills-group-label { color: var(--gold); }
.skills-group-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; flex: 1; }
.no-data-note { font-size: 0.75rem; color: var(--text2); font-style: italic; margin-top: 0.5rem; }
.blurred { filter: blur(5px); cursor: pointer; user-select: none; transition: filter 0.2s; }
.blurred:hover { filter: blur(3px); }
.blurred.revealed { filter: none; cursor: default; }
/* ── Push notification badge ── */
.notif-badge { display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:#fff;border-radius:50%;width:18px;height:18px;font-size:0.65rem;font-weight:700;margin-left:0.3rem;vertical-align:middle; }
.incoming-row { display:flex;align-items:center;gap:0.75rem;padding:0.65rem 0;border-bottom:1px solid var(--bg2);flex-wrap:wrap; }
.incoming-row:last-child { border-bottom:none; }
.incoming-row .i-name { font-weight:600;font-size:0.88rem;flex:1; }
.incoming-row .i-meta { font-size:0.75rem;color:var(--text2); }
.incoming-row.unseen { background:rgba(255,215,0,0.04);border-radius:6px;padding:0.65rem 0.5rem; }
/* ── Admin styles ── */
#screen-admin { flex-direction: column; background: var(--bg0); }
.admin-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; border-bottom: 1px solid var(--bg3); padding-bottom: 0.75rem; }
.admin-tab-sep { display: inline-block; width: 1px; height: 1.4rem; background: var(--bg3); margin: 0 0.15rem; align-self: center; }
.admin-tab-group-label { display: inline-block; font-size: 0.6rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 0.2rem; opacity: 0.7; }
/* ── Mobile admin nav (drawer + sticky header) ─────────────── */
.admin-mobile-header { display: none; }
.admin-drawer-backdrop { display: none; }
.admin-drawer { display: none; }
@media (max-width: 900px) {
.admin-tabs { display: none !important; }
.admin-mobile-header {
display: flex; align-items: center; gap: 0.6rem;
background: var(--bg1); border: 1px solid var(--bg3); border-radius: 10px;
padding: 0.55rem 0.75rem; margin-bottom: 0.75rem;
position: sticky; top: 0.5rem; z-index: 40;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.admin-mobile-header .hamburger {
background: transparent; border: 0; color: var(--gold); font-size: 1.15rem;
padding: 0.25rem 0.45rem; cursor: pointer;
}
.admin-mobile-header .current-tab-label {
font-size: 0.92rem; font-weight: 700; color: var(--text1);
display: flex; align-items: center; gap: 0.45rem;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-drawer-backdrop {
display: block; position: fixed; inset: 0;
background: rgba(0,0,0,0.55); z-index: 998;
opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.admin-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.admin-drawer {
display: flex; flex-direction: column;
position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px;
background: var(--bg1); border-right: 1px solid var(--bg3);
z-index: 999; transform: translateX(-105%);
transition: transform 0.22s ease-out;
box-shadow: 6px 0 24px rgba(0,0,0,0.45);
overflow-y: auto;
}
.admin-drawer.open { transform: translateX(0); }
.admin-drawer-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0.9rem 1rem 0.65rem; border-bottom: 1px solid var(--bg3);
}
.admin-drawer-header strong { font-size: 0.95rem; color: var(--gold); }
.admin-drawer-header .close {
background: transparent; border: 0; color: var(--text2);
font-size: 1.1rem; padding: 0.2rem 0.45rem; cursor: pointer;
}
.admin-drawer-group { padding: 0.65rem 0.6rem 0.3rem; }
.admin-drawer-group-label {
font-size: 0.62rem; color: var(--text2); text-transform: uppercase;
letter-spacing: 0.09em; padding: 0 0.5rem; margin-bottom: 0.3rem;
}
.admin-drawer-btn {
display: flex; align-items: center; gap: 0.55rem;
width: 100%; padding: 0.7rem 0.85rem; margin-bottom: 0.25rem;
background: transparent; border: 1px solid transparent; border-radius: 8px;
color: var(--text1); font-size: 0.88rem; text-align: left; cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.admin-drawer-btn:active, .admin-drawer-btn:hover {
background: rgba(255,215,0,0.08); border-color: rgba(255,215,0,0.35);
}
.admin-drawer-btn.active {
background: rgba(255,215,0,0.14); border-color: var(--gold); color: var(--gold); font-weight: 700;
}
.admin-drawer-btn i { width: 18px; text-align: center; color: var(--text2); }
.admin-drawer-btn.active i { color: var(--gold); }
/* Tighten card and form padding on narrow screens */
#screen-admin .card { padding: 0.75rem 0.85rem; }
#screen-admin .form-group { margin-bottom: 0.55rem; }
#screen-admin h2 { font-size: 1rem; }
#screen-admin h3 { font-size: 0.9rem; }
#screen-admin .page-title { font-size: 1rem; margin-bottom: 0.6rem; }
.dashboard-body { padding: 0 0.5rem 0.75rem !important; }
.dash-panel:not(:has(> .hero-subnav)) { padding-top: 0.75rem !important; }
}
.admin-tab { background: var(--bg2); border: 1px solid var(--bg3); color: var(--text2); border-radius: 8px; padding: 0.4rem 0.9rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.admin-tab:hover { border-color: var(--gold); color: var(--gold); }
.admin-tab.active { background: rgba(255,215,0,0.1); border-color: var(--gold); color: var(--gold); }
.admin-section { display: none; }
.admin-section.active { display: block; }
/* ── Admin inbox ── */
.inbox-chip {
background: var(--bg2); border: 1px solid var(--bg3); color: var(--text2);
border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.78rem;
font-weight: 600; cursor: pointer; transition: all 0.15s;
display: inline-flex; align-items: center; gap: 0.35rem;
min-height: 36px;
}
.inbox-chip:hover { border-color: var(--gold); color: var(--gold); }
.inbox-chip.active { background: var(--gold); border-color: var(--gold); color: #3a2400; }
.inbox-chip-count {
background: var(--bg3); color: var(--text1); font-size: 0.68rem;
border-radius: 999px; padding: 0.05rem 0.45rem; font-weight: 700;
min-width: 1.3em; text-align: center;
}
.inbox-chip.active .inbox-chip-count { background: rgba(0,0,0,0.2); color: #3a2400; }
.inbox-chip-count:empty { display: none; }
.inbox-list { display: flex; flex-direction: column; gap: 0.3rem; }
.inbox-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.55rem;
padding: 0.65rem 0.75rem;
background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px;
cursor: pointer; transition: all 0.15s; align-items: start;
}
.inbox-row:hover { border-color: var(--gold); background: var(--bg3); }
.inbox-row.unread { border-left: 3px solid var(--gold); }
.inbox-row.unread .inbox-row-subject { font-weight: 700; }
.inbox-row-icon {
width: 38px; height: 38px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 1rem; flex-shrink: 0;
}
.inbox-row-icon.type-password { background: rgba(107,160,255,0.15); color: #6ba0ff; }
.inbox-row-icon.type-session { background: rgba(76,175,80,0.15); color: #4caf50; }
.inbox-row-icon.type-card { background: rgba(212,175,55,0.15); color: var(--gold); }
.inbox-row-icon.type-bug { background: rgba(224,85,85,0.15); color: var(--red); }
.inbox-row-main { min-width: 0; }
.inbox-row-header {
display: flex; justify-content: space-between; gap: 0.5rem;
font-size: 0.8rem; margin-bottom: 2px;
}
.inbox-row-from { font-weight: 600; color: var(--text1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row-time { color: var(--text2); font-size: 0.7rem; flex-shrink: 0; white-space: nowrap; }
.inbox-row-subject { font-size: 0.82rem; color: var(--text1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-row-snippet { font-size: 0.72rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.inbox-row-actions {
display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-end;
flex-shrink: 0;
}
.inbox-row-status {
font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
padding: 2px 8px; border-radius: 999px; font-weight: 700; white-space: nowrap;
}
@media (max-width: 640px) {
.inbox-row { grid-template-columns: auto 1fr; }
.inbox-row-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
}
/* ── Shared mail (company_emails) styles. Used by both the
player HR-tab inbox card and the DM Mail tab. The same
row markup ships in both places so the visual hierarchy +
click affordance stay identical. ─────────────────────── */
.mail-filters {
display: flex; gap: 0.4rem; padding: 0.5rem 0.1rem 0.7rem;
flex-wrap: wrap; overflow-x: auto;
}
.mail-filters::-webkit-scrollbar { display: none; }
.mail-filter-chip {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.35rem 0.7rem; font-size: 0.74rem;
background: var(--bg2); border: 1px solid var(--bg3); color: var(--text);
border-radius: 999px; cursor: pointer; white-space: nowrap;
transition: all 0.15s; font-weight: 500;
}
.mail-filter-chip:hover { border-color: var(--gold); }
.mail-filter-chip.active {
background: var(--gold); color: #3a2400; border-color: var(--gold); font-weight: 700;
}
.mail-filter-chip-count {
font-size: 0.62rem; background: var(--bg3); color: var(--text2);
border-radius: 999px; padding: 0.05rem 0.4rem; font-weight: 700; min-width: 1.2em; text-align: center;
}
.mail-filter-chip.active .mail-filter-chip-count { background: rgba(0,0,0,0.18); color: #3a2400; }
.mail-filter-chip-count:empty { display: none; }
.mail-list { display: flex; flex-direction: column; gap: 0.4rem; }
.mail-card {
display: flex; align-items: stretch; gap: 0.6rem;
padding: 0.65rem 0.8rem;
background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px;
cursor: pointer; transition: all 0.15s;
width: 100%; text-align: left; color: var(--text); font: inherit;
}
.mail-card:hover { border-color: var(--gold); background: var(--bg3); }
.mail-card:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.mail-card.unread { border-left: 3px solid var(--gold); }
.mail-card.unread .mail-card-subject { font-weight: 700; }
.mail-card.read { opacity: 0.85; }
.mail-card-icon {
width: 32px; height: 32px; border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem; flex-shrink: 0;
background: rgba(218,165,32,0.12); color: var(--gold);
}
.mail-card-icon.form { background: rgba(218,165,32,0.18); color: var(--gold); }
.mail-card-icon.sent { background: rgba(106,164,224,0.15); color: var(--blue); }
.mail-card-icon.plain { background: rgba(255,255,255,0.06); color: var(--text2); }
.mail-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.mail-card-row {
display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
}
.mail-card-from {
font-size: 0.82rem; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.mail-card-time {
font-size: 0.66rem; color: var(--text3); flex-shrink: 0; white-space: nowrap;
}
.mail-card-subject {
font-size: 0.78rem; color: var(--text2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-card-tags { display: flex; gap: 0.3rem; margin-top: 0.2rem; flex-wrap: wrap; }
.mail-tag {
font-size: 0.6rem; padding: 0.05rem 0.4rem; border-radius: 4px;
letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
}
.mail-tag.form { background: rgba(218,165,32,0.18); color: var(--gold); }
.mail-tag.broadcast { background: rgba(106,164,224,0.15); color: var(--blue); }
.mail-tag.sent { background: rgba(255,255,255,0.06); color: var(--text2); }
.mail-tag.unread { background: var(--gold); color: #3a2400; }
.mail-empty {
text-align: center; color: var(--text2); font-size: 0.82rem;
padding: 1.5rem 0.75rem; background: var(--bg2);
border: 1px dashed var(--bg3); border-radius: 8px;
}
.data-store-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--bg2); flex-wrap: wrap; }
.data-store-row:last-child { border-bottom: none; }
.ds-key { font-family: monospace; font-size: 0.8rem; color: var(--gold); min-width: 160px; }
.ds-count { font-size: 0.75rem; color: var(--text2); min-width: 80px; }
.ds-actions { display: flex; gap: 0.4rem; margin-left: auto; }
.upload-zone { border: 2px dashed var(--bg4); border-radius: 10px; padding: 2rem; text-align: center; color: var(--text2); font-size: 0.85rem; cursor: pointer; transition: border-color 0.15s; }
.upload-zone:hover { border-color: var(--gold); color: var(--gold); }
.upload-zone i { font-size: 2rem; display: block; margin-bottom: 0.5rem; opacity: 0.5; }
.json-preview { background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px; padding: 0.75rem; font-family: monospace; font-size: 0.72rem; color: var(--text2); max-height: 260px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; margin-top: 0.75rem; }
.agreement-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.75rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--bg2); font-size: 0.82rem; }
.agreement-row:last-child { border-bottom: none; }
/* ── Character Creator Wizard ── */
#screen-wizard { flex-direction: column; background: var(--bg0); }
.wiz-progress-bar { height: 3px; background: var(--bg3); }
.wiz-progress-fill { height: 100%; background: var(--gold); transition: width 0.3s; }
.wiz-step-label { font-size: 0.72rem; color: var(--text2); text-align: center; padding: 0.4rem 0 0; text-transform: uppercase; letter-spacing: 0.1em; }
.wiz-step { display: none; }
.wiz-step.active { display: block; }
.wiz-step-title { font-size: 1.1rem; font-weight: 700; color: var(--gold); margin-bottom: 0.25rem; }
.wiz-step-sub { font-size: 0.8rem; color: var(--text2); margin-bottom: 1.25rem; }
/* ── World Map modal layout ────────────────────────────────────
Default: two-column (map left, 240px side panel right). On
narrow viewports (< 720px) collapses to a vertical stack and
reveals the "Show / Hide List" toggle so the map can claim the
full width while the side panel slides up from the bottom on
demand. Stays mobile-touch-friendly by tightening padding +
hiding non-critical button labels. */
.wm-body { display: flex; gap: 0.6rem; flex: 1; min-height: 0; overflow: hidden; }
.wm-map-wrap { flex: 1; min-width: 0; background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px; overflow: hidden; position: relative; }
.wm-side-panel { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.4rem; overflow-y: auto; max-height: 100%; }
.wm-list-toggle { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1000; background: rgba(26, 26, 46, 0.92); border: 1px solid rgba(180, 140, 255, 0.5); color: #b48cff; font-size: 0.72rem; padding: 0.3rem 0.55rem; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.wm-list-toggle:hover { background: rgba(180, 140, 255, 0.18); }
@media (max-width: 720px) {
.wm-body { flex-direction: column; gap: 0.4rem; }
.wm-map-wrap { flex: 1; min-height: 50dvh; }
.wm-side-panel { width: 100%; max-height: 40dvh; border-top: 1px solid var(--bg3); padding-top: 0.4rem; }
.wm-list-toggle { display: inline-flex !important; align-items: center; gap: 0.3rem; }
/* When the side panel is collapsed on mobile, hide it and give
the map the full modal height. JS toggles .wm-list-collapsed
on the .wm-body wrapper. */
.wm-body.wm-list-collapsed .wm-side-panel { display: none; }
.wm-body.wm-list-collapsed .wm-map-wrap { min-height: 70dvh; }
/* Tighten toolbar buttons; the dropdown carries the verbose
labels, but the mode buttons can drop their text. */
#modal-world-map .modal { padding: 0.5rem 0.6rem; }
}
.wiz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.wiz-grid-2 { grid-template-columns: repeat(2, 1fr); }
.wiz-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) { .wiz-grid { grid-template-columns: repeat(2, 1fr); } .wiz-grid-4 { grid-template-columns: repeat(3, 1fr); } }
.wiz-item-btn {
background: var(--bg2); border: 2px solid var(--bg3); border-radius: 10px;
padding: 0.6rem 0.4rem; cursor: pointer; text-align: center; transition: all 0.15s;
font-family: inherit; color: var(--text);
}
.wiz-item-btn:hover { border-color: var(--gold-dim); }
.wiz-item-btn.wiz-selected { border-color: var(--gold); background: rgba(255,215,0,0.1); }
/* Inline-expansion details — appear ONLY on the selected card.
Selected card spans the full row so the detail has room without
breaking the grid into uneven heights. */
.wiz-item-btn.wiz-selected { grid-column: 1 / -1; padding: 0.9rem 1rem; }
.wiz-item-btn .wi-detail { display: none; }
.wiz-item-btn.wiz-selected .wi-detail {
display: block; margin-top: 0.55rem; padding-top: 0.55rem;
border-top: 1px solid rgba(255,215,0,0.25);
text-align: left; font-size: 0.74rem; line-height: 1.5; color: var(--text);
}
.wi-detail .wi-row { margin: 0.28rem 0; }
.wi-detail .wi-row b { color: var(--gold); font-weight: 700; }
.wi-detail .wi-traits { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.2rem 0; }
.wi-detail .wi-trait { font-size: 0.71rem; padding: 0.2rem 0; border-top: 1px dashed var(--bg3); }
.wi-detail .wi-trait:first-child { border-top: none; }
.wi-detail .wi-trait b { color: var(--gold-dim); }
.wiz-item-btn .wi-emoji { font-size: 1.4rem; display: block; margin-bottom: 0.2rem; }
.wiz-item-btn .wi-name { font-size: 0.78rem; font-weight: 700; display: block; }
.wiz-item-btn .wi-sub { font-size: 0.62rem; color: var(--text2); display: block; margin-top: 0.1rem; }
.wiz-item-btn .wi-debt { font-size: 0.6rem; color: var(--bg0); display: block; margin-top: 0.1rem; background: var(--bg0); } /* hidden — matches bg */
.wiz-ab-method-tabs { display: flex; gap: 0.35rem; margin-bottom: 1rem; flex-wrap: wrap; }
.wiz-ab-tab { padding: 0.4rem 0.85rem; border: 1px solid var(--bg3); border-radius: 20px; background: var(--bg2); color: var(--text2); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.wiz-ab-tab:hover { border-color: var(--gold-dim); color: var(--text); }
.wiz-ab-tab.active { border-color: var(--gold); background: rgba(255,215,0,0.1); color: var(--gold); }
.wiz-ab-panel { display: none; }
.wiz-ab-panel.active { display: block; }
.wiz-score-pool { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; min-height: 44px; }
.wiz-pool-chip {
padding: 0.4rem 0.75rem; border: 2px solid var(--bg4); border-radius: 8px;
background: var(--bg2); font-weight: 700; font-size: 1rem; cursor: pointer;
transition: all 0.15s; font-family: inherit; color: var(--text);
}
.wiz-pool-chip:hover { border-color: var(--gold-dim); }
.wiz-pool-chip.selected { border-color: var(--gold); background: rgba(255,215,0,0.15); color: var(--gold); }
.wiz-pool-chip.used { display: none; }
.wiz-stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; margin-bottom: 0.75rem; }
@media (max-width: 480px) { .wiz-stats-grid { grid-template-columns: repeat(3, 1fr); } }
.wiz-stat-slot {
background: var(--bg2); border: 2px solid var(--bg3); border-radius: 8px;
padding: 0.5rem 0.25rem; text-align: center; cursor: pointer; transition: all 0.15s;
}
.wiz-stat-slot:hover { border-color: var(--gold-dim); }
.wiz-stat-slot.ready { border-color: var(--gold); }
.wiz-stat-slot.assigned { border-color: var(--green); }
.wiz-stat-slot .ss-label { font-size: 0.58rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.1em; }
.wiz-stat-slot .ss-val { font-size: 1.15rem; font-weight: 700; color: var(--gold); line-height: 1.1; }
.wiz-stat-slot .ss-final { font-size: 0.7rem; color: var(--green); font-weight: 600; }
.wiz-debt-card { background: rgba(224,85,85,0.08); border: 1px solid rgba(224,85,85,0.3); border-radius: 10px; padding: 0.75rem 1rem; margin-top: 0.75rem; display: none; }
.wiz-debt-card .dc-amount { font-size: 1.4rem; font-weight: 800; color: var(--red); }
.wiz-debt-card .dc-note { font-size: 0.75rem; color: var(--text2); margin-top: 0.15rem; }
.wiz-bg-select { width: 100%; padding: 0.6rem 0.8rem; background: var(--bg2); border: 1px solid var(--bg4); border-radius: 8px; color: var(--text); font-size: 0.92rem; font-family: inherit; margin-bottom: 0.75rem; }
.wiz-bg-feature { background: rgba(255,215,0,0.06); border: 1px solid rgba(255,215,0,0.15); border-radius: 8px; padding: 0.65rem 0.8rem; font-size: 0.8rem; color: var(--text2); margin-bottom: 0.75rem; min-height: 2.5rem; }
.wiz-skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
.wiz-skill-item { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.45rem; border-radius: 6px; cursor: pointer; font-size: 0.8rem; transition: background 0.1s; }
.wiz-skill-item:hover { background: var(--bg2); }
.wiz-skill-item input { accent-color: var(--gold); }
.wiz-skill-item.bg-skill { color: var(--gold); }
.wiz-skill-item.locked { opacity: 0.5; pointer-events: none; }
.wiz-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }
@media (max-width: 500px) { .wiz-review-grid { grid-template-columns: 1fr; } }
.wiz-review-block { background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px; padding: 0.75rem; }
.wiz-review-block h4 { font-size: 0.7rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.wiz-scores-display { display: grid; grid-template-columns: repeat(6,1fr); gap: 0.3rem; margin-top: 0.3rem; }
.wiz-score-cell { text-align: center; background: var(--bg3); border-radius: 6px; padding: 0.3rem; }
.wiz-score-cell .sc-label { font-size: 0.55rem; color: var(--text2); text-transform: uppercase; }
.wiz-score-cell .sc-val { font-size: 0.95rem; font-weight: 700; color: var(--gold); }
.wiz-score-cell .sc-mod { font-size: 0.62rem; color: var(--text2); }
.wiz-nav { display: flex; gap: 0.75rem; justify-content: flex-end; padding: 1.5rem 0 0.5rem; }
.wiz-reroll-info { font-size: 0.72rem; color: var(--text2); margin-bottom: 0.5rem; }
.wiz-reroll-cost { color: var(--bg0); font-size: 0.7rem; background: var(--bg0); } /* hidden */
.wiz-pb-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 0.4rem; margin-bottom: 0.5rem; }
@media (max-width: 480px) { .wiz-pb-grid { grid-template-columns: repeat(3,1fr); } }
.wiz-pb-cell { background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px; padding: 0.5rem 0.25rem; text-align: center; }
.wiz-pb-cell .pb-label { font-size: 0.58rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25rem; }
.wiz-pb-adj { display: flex; align-items: center; justify-content: center; gap: 0.3rem; }
.wiz-pb-adj button { width: 22px; height: 22px; border: 1px solid var(--bg4); border-radius: 4px; background: var(--bg3); color: var(--text); font-size: 0.9rem; font-weight: 700; cursor: pointer; line-height: 1; font-family: inherit; }
.wiz-pb-adj button:hover { border-color: var(--gold); }
.wiz-pb-val { font-size: 1.05rem; font-weight: 700; min-width: 22px; text-align: center; }
.wiz-pb-final { font-size: 0.68rem; color: var(--green); font-weight: 600; margin-top: 0.15rem; min-height: 1em; }
.wiz-pb-points { font-size: 0.82rem; color: var(--text2); margin-bottom: 0.5rem; }
.wiz-sa-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 0.4rem; margin-bottom: 0.5rem; }
@media (max-width: 480px) { .wiz-sa-grid { grid-template-columns: repeat(3,1fr); } }
.wiz-sa-cell { background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px; padding: 0.5rem 0.25rem; text-align: center; }
.wiz-sa-cell .sa-label { font-size: 0.58rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25rem; }
.wiz-sa-cell select { background: var(--bg3); border: 1px solid var(--bg4); border-radius: 4px; color: var(--text); font-size: 0.85rem; width: 100%; text-align: center; font-family: inherit; }
.wiz-sa-final { font-size: 0.68rem; color: var(--green); font-weight: 600; margin-top: 0.15rem; min-height: 1em; }
.wiz-man-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 0.4rem; margin-bottom: 0.5rem; }
@media (max-width: 480px) { .wiz-man-grid { grid-template-columns: repeat(3,1fr); } }
.wiz-man-cell { background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px; padding: 0.5rem 0.25rem; text-align: center; }
.wiz-man-cell .man-label { font-size: 0.58rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25rem; }
.wiz-man-cell input { background: var(--bg3); border: 1px solid var(--bg4); border-radius: 4px; color: var(--text); font-size: 0.9rem; font-weight: 700; width: 100%; text-align: center; padding: 0.2rem; font-family: inherit; }
.wiz-man-final { font-size: 0.68rem; color: var(--green); font-weight: 600; margin-top: 0.15rem; min-height: 1em; }
.wiz-combat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin-bottom: 0.75rem; }
.wiz-note { font-size: 0.72rem; color: var(--text2); font-style: italic; margin-top: 0.5rem; }
.wiz-asi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.5rem; }
.wiz-asi-row select { background: var(--bg2); border: 1px solid var(--bg4); border-radius: 8px; color: var(--text); padding: 0.45rem 0.6rem; font-size: 0.85rem; font-family: inherit; width: 100%; }
/* ── Fae Contract (parchment) ──────────────────────────────── */
.fae-contract { background:#f4e4c1; color:#2c1810; padding:28px 22px; position:relative; border:6px double #8b4513; font-family:Georgia,serif; font-size:0.81rem; line-height:1.85; }
.fae-contract::before { content:""; position:absolute; top:8px; left:8px; right:8px; bottom:8px; border:1px solid rgba(139,69,19,0.3); pointer-events:none; }
.fae-title { font-size:1.35rem; color:#4a0e0e; text-transform:uppercase; letter-spacing:3px; font-weight:bold; text-align:center; margin-bottom:0.2rem; }
.fae-subtitle { font-style:italic; color:#6b4423; font-size:0.82rem; text-align:center; }
.fae-hdr-rule { border:none; border-bottom:3px double #8b4513; margin:0.7rem 0 1.1rem; }
.fae-drop-cap { float:left; font-size:3.4em; line-height:0.78; padding-right:7px; color:#4a0e0e; font-weight:bold; font-family:'Times New Roman',serif; }
.fae-body p { margin-bottom:14px; text-indent:32px; }
.fae-body p:first-of-type { text-indent:0; }
.fae-ambig { border-bottom:1px dotted #8b4513; cursor:help; position:relative; }
.fae-ambig:hover { color:#8b0000; }
.fae-ambig::after { content:attr(data-h); position:absolute; bottom:110%; left:0; background:#2c1810; color:#f4e4c1; padding:4px 9px; font-size:0.75em; white-space:nowrap; opacity:0; transition:opacity 0.25s; pointer-events:none; border:1px solid #8b4513; z-index:20; border-radius:4px; }
.fae-ambig:hover::after { opacity:1; }
.fae-mirror { display:inline-block; transform:scaleX(-1); color:#8b4513; font-style:italic; }
.fae-updown { display:inline-block; transform:rotate(180deg); font-size:0.9em; color:#5d4037; }
.fae-fade { background:linear-gradient(to right,#2c1810 0%,transparent 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.fae-fl { color:#8b0000; font-weight:bold; }
.fae-hidden-p { color:#f4e4c1; }
.fae-maze { border:2px solid #8b4513; padding:14px; margin:18px 0; background:repeating-linear-gradient(0deg,transparent,transparent 23px,rgba(139,69,19,0.07) 24px); position:relative; }
.fae-maze::before { content:"FIND THE PATH"; position:absolute; top:-10px; left:14px; background:#f4e4c1; padding:0 8px; font-size:0.72em; color:#8b4513; }
.fae-mp { background:rgba(139,0,0,0.14); font-weight:bold; color:#4a0e0e; }
.fae-ws { display:inline-grid; grid-template-columns:repeat(7,1.55em); gap:1px; font-family:monospace; font-size:0.8em; line-height:1.45; color:#5d4037; padding:11px; background:rgba(139,69,19,0.05); border:1px dashed #8b4513; text-align:center; }
.fae-ws .wh { background:rgba(139,0,0,0.17); font-weight:bold; color:#8b0000; }
.fae-tbl { width:100%; border-collapse:collapse; margin:16px 0; font-size:0.82em; }
.fae-tbl th { background:#4a0e0e; color:#f4e4c1; padding:9px 11px; text-align:left; font-weight:normal; text-transform:uppercase; letter-spacing:1.5px; }
.fae-tbl td { padding:9px 11px; border-bottom:1px solid rgba(139,69,19,0.22); vertical-align:top; }
.fae-tbl tr:nth-child(even) td { background:rgba(139,69,19,0.04); }
.fae-tbl .fa { text-align:right; font-family:monospace; color:#4a0e0e; font-weight:bold; }
.fae-tbl .fm { font-size:0.7em; color:#6b4423; display:block; font-style:italic; margin-top:2px; }
.fae-tbl .ftr td { background:#4a0e0e; color:#f4e4c1; font-weight:bold; }
.fae-tbl .ftr .fa { color:#f4e4c1; }
.fae-sig { margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.fae-sig-box { border:2px solid #8b4513; padding:14px; position:relative; min-height:80px; }
.fae-sig-box::before { content:attr(data-label); position:absolute; top:-10px; left:10px; background:#f4e4c1; padding:0 7px; font-size:0.68em; color:#8b4513; }
.fae-sig-line { border-bottom:2px solid #4a0e0e; height:32px; margin-top:18px; position:relative; }
.fae-sig-line::after { content:attr(data-trap); position:absolute; bottom:-15px; left:0; font-size:0.58em; color:rgba(74,14,14,0.38); font-style:italic; }
.fae-notary { margin-top:18px; text-align:center; font-size:0.62em; color:rgba(139,69,19,0.4); }
.fae-footer-c { margin-top:20px; text-align:center; font-size:0.75em; color:#6b4423; border-top:1px solid rgba(139,69,19,0.3); padding-top:14px; }
/* old helpers kept for non-fae use */
.contract-initial { font-size:1.25em; font-weight:800; color:var(--gold); font-family:serif; line-height:1; display:inline; }
.hidden-cost { color:var(--bg0); }
.contract-line { display:block; margin-bottom:0.5rem; line-height:1.6; font-size:0.79rem; color:var(--text2); }
.contract-line .contract-initial { margin-right:1px; }
.wiz-ddid-reveal { font-family: monospace; font-size: 1.4rem; font-weight: 800; color: var(--gold); background: var(--bg2); border: 1px solid rgba(255,215,0,0.3); border-radius: 10px; padding: 1rem; text-align: center; letter-spacing: 0.12em; margin: 0.75rem 0; }
/* ═══════════════════════════════════════════════════════════
NEW FEATURES CSS
═══════════════════════════════════════════════════════════ */
/* ── Parchment Theme for D&D Flavor ── */
.parchment {
background: linear-gradient(135deg, #f4e4c1 0%, #e8d4a8 100%);
border: 3px double #8b4513;
border-radius: 8px;
color: #2c1810;
position: relative;
}
.parchment::before {
content: "";
position: absolute;
top: 6px; left: 6px; right: 6px; bottom: 6px;
border: 1px solid rgba(139,69,19,0.3);
pointer-events: none;
border-radius: 4px;
}
.parchment-title {
font-family: Georgia, serif;
color: #4a0e0e;
text-transform: uppercase;
letter-spacing: 2px;
border-bottom: 2px solid #8b4513;
padding-bottom: 0.5rem;
}
/* ── Magic Item Rarities ── */
.item-common { border-color: #9e9e9e; box-shadow: 0 0 5px rgba(158,158,158,0.3); }
.item-uncommon { border-color: #4caf50; box-shadow: 0 0 8px rgba(76,175,80,0.4); }
.item-rare { border-color: #2196f3; box-shadow: 0 0 12px rgba(33,150,243,0.5); }
.item-very-rare { border-color: #9c27b0; box-shadow: 0 0 15px rgba(156,39,176,0.5); }
.item-legendary { border-color: #ff9800; box-shadow: 0 0 20px rgba(255,152,0,0.6); animation: legendary-pulse 2s infinite; }
.item-artifact { border-color: #f44336; box-shadow: 0 0 25px rgba(244,67,54,0.7); animation: artifact-glow 1.5s infinite; }
@keyframes legendary-pulse {
0%, 100% { box-shadow: 0 0 20px rgba(255,152,0,0.6); }
50% { box-shadow: 0 0 30px rgba(255,152,0,0.9); }
}
@keyframes artifact-glow {
0%, 100% { box-shadow: 0 0 25px rgba(244,67,54,0.7); }
50% { box-shadow: 0 0 40px rgba(244,67,54,1); }
}
/* ── Inventory Grid ── */
.inventory-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 0.5rem;
padding: 0.75rem;
background: var(--bg2);
border-radius: 8px;
min-height: 200px;
}
.inv-slot {
aspect-ratio: 1;
background: var(--bg3);
border: 2px solid var(--bg4);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
position: relative;
font-size: 1.5rem;
}
.inv-slot:hover { border-color: var(--gold); transform: scale(1.05); }
.inv-slot .item-qty {
position: absolute;
bottom: 2px;
right: 4px;
font-size: 0.65rem;
font-weight: 700;
background: var(--bg0);
padding: 0 4px;
border-radius: 4px;
}
.inv-slot .item-weight {
position: absolute;
top: 2px;
left: 4px;
font-size: 0.55rem;
color: var(--text2);
}
.inv-equipped {
position: absolute;
top: -4px;
right: -4px;
background: var(--gold);
color: var(--bg0);
font-size: 0.6rem;
padding: 2px 4px;
border-radius: 4px;
font-weight: 700;
}
.encumbrance-bar {
height: 6px;
background: var(--bg3);
border-radius: 3px;
overflow: hidden;
margin-top: 0.5rem;
}
.encumbrance-fill {
height: 100%;
background: var(--green);
transition: width 0.3s, background 0.3s;
}
.enc-tick {
position: absolute;
top: 0;
width: 1px;
height: 100%;
background: var(--bg1);
opacity: 0.7;
pointer-events: auto;
}
/* ── Spellbook ── */
.spell-slot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid var(--bg4);
background: var(--bg2);
cursor: pointer;
transition: all 0.15s;
font-size: 0.7rem;
}
.spell-slot.filled {
background: var(--blue);
border-color: var(--blue);
color: var(--bg0);
}
.spell-slot.used {
background: transparent;
border-color: var(--red);
color: var(--red);
text-decoration: line-through;
}
.spell-card {
background: var(--bg2);
border: 1px solid var(--bg3);
border-radius: 8px;
padding: 0.75rem;
margin-bottom: 0.5rem;
cursor: pointer;
transition: all 0.15s;
}
.spell-card:hover { border-color: var(--blue); }
.spell-card.prepared {
border-color: var(--blue);
background: rgba(91,155,213,0.1);
}
.spell-level-group {
margin-bottom: 1rem;
}
.spell-level-header {
font-size: 0.75rem;
color: var(--text2);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* ── Death Saves ── */
.death-save-box {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
background: rgba(224,85,85,0.1);
border: 1px solid rgba(224,85,85,0.3);
border-radius: 8px;
margin-bottom: 0.75rem;
}
.death-save-title {
font-size: 0.8rem;
color: var(--red);
font-weight: 700;
text-transform: uppercase;
}
.death-save-track {
display: flex;
gap: 0.35rem;
}
.death-dot {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--bg4);
cursor: pointer;
transition: all 0.15s;
}
.death-dot.success { background: var(--green); border-color: var(--green); }
.death-dot.fail { background: var(--red); border-color: var(--red); }
.death-dot:hover { transform: scale(1.2); }
/* ── Inspiration ── */
/* Padding/icon size fluid (clamp()) 2026-07-25, same pass as
.profile-header — single-use class (confirmed via grep), safe to
scale in isolation. */
.inspiration-toggle {
display: inline-flex;
align-items: center;
gap: clamp(0.4rem, 0.35rem + 0.3vw, 0.6rem);
padding: clamp(0.3rem, 0.25rem + 0.3vw, 0.5rem) clamp(0.55rem, 0.45rem + 0.5vw, 0.9rem);
background: var(--bg2);
border: 2px solid var(--bg4);
border-radius: 20px;
cursor: pointer;
transition: all 0.2s;
/* .vitals-grid sits Inspiration in the same grid row as the stat-
box column (#p-combat-stats) — that column grew from 4 tiles to
7 and now wraps 3 lines tall, so the row track itself is much
taller than Inspiration's own compact content. .vitals-grid uses
align-items:start (so the taller/shorter columns don't stretch),
which leaves Inspiration pinned to the top of that tall row with
empty space below it. Centering it in its own cell instead reads
as intentional placement rather than a gap. */
align-self: center;
}
.inspiration-toggle.active {
background: rgba(255,215,0,0.15);
border-color: var(--gold);
box-shadow: 0 0 15px rgba(255,215,0,0.4);
}
.inspiration-toggle i {
font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.3rem);
color: var(--text2);
transition: all 0.2s;
}
.inspiration-toggle.active i {
color: var(--gold);
transform: scale(1.2);
}
/* ── Conditions ── */
.conditions-bar {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.5rem;
}
.condition-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.72rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.condition-blinded { background: rgba(100,100,100,0.3); border: 1px solid #666; }
.condition-charmed { background: rgba(255,105,180,0.2); border: 1px solid #ff69b4; }
.condition-deafened { background: rgba(150,150,150,0.3); border: 1px solid #999; }
.condition-frightened { background: rgba(128,0,128,0.2); border: 1px solid #800080; }
.condition-grappled { background: rgba(139,69,19,0.2); border: 1px solid #8b4513; }
.condition-incapacitated { background: rgba(128,128,128,0.3); border: 1px solid #808080; }
.condition-invisible { background: rgba(173,216,230,0.2); border: 1px solid #add8e6; }
.condition-paralyzed { background: rgba(255,255,0,0.2); border: 1px solid #ffff00; }
.condition-petrified { background: rgba(128,128,128,0.4); border: 1px solid #696969; }
.condition-poisoned { background: rgba(0,128,0,0.2); border: 1px solid #008000; }
.condition-prone { background: rgba(210,180,140,0.2); border: 1px solid #d2b48c; }
.condition-restrained { background: rgba(139,0,0,0.2); border: 1px solid #8b0000; }
.condition-stunned { background: rgba(255,165,0,0.2); border: 1px solid #ffa500; }
.condition-unconscious { background: rgba(0,0,0,0.3); border: 1px solid #000; }
/* Active/Glowing Conditions */
.condition-active {
box-shadow: 0 0 12px currentColor, 0 0 20px currentColor;
transform: scale(1.05);
font-weight: 700;
}
/* Conditions modal cards are full-width tiles with a rules blurb,
not the compact Hero pills. The .condition-active glow + 1.05
scale made the active cards overlap their neighbors and cover
neighbor text. Strip the scale and halo when the class is also
a .condition-card; use a clean inset border as the active cue
instead. Per-condition background tints still apply so each
card keeps its accent color. */
.condition-card.condition-active {
transform: none !important;
box-shadow: inset 0 0 0 2px currentColor !important;
font-weight: 600;
}
/* Conditions modal tiles pick up their accent color and border
from the per-condition class (.condition-blinded, etc.). The
previous rule added its own border, which took specificity
precedence over the per-condition borders and flattened every
tile to the same grey. Keep only transition + interaction
polish here and let .condition-X own the visual. */
.condition-card.condition-blinded,
.condition-card.condition-charmed,
.condition-card.condition-deafened,
.condition-card.condition-frightened,
.condition-card.condition-grappled,
.condition-card.condition-incapacitated,
.condition-card.condition-invisible,
.condition-card.condition-paralyzed,
.condition-card.condition-petrified,
.condition-card.condition-poisoned,
.condition-card.condition-prone,
.condition-card.condition-restrained,
.condition-card.condition-stunned,
.condition-card.condition-unconscious {
color: var(--text);
transition: transform 0.1s, filter 0.15s, box-shadow 0.15s, opacity 0.15s;
}
/* Was button.condition-card — the tile became a 2026-07-20 so
it could host a real nested