in a .
Without the wrapper the table still looks great; you only lose the gold
top-rule and outer glow.
─────────────────────────────────────────────────────────────────────────── */
.entities-grid-frame[b-kby0h0h0xd] {
position: relative;
border: 1px solid #c8b890;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(184,146,12,0.18);
}
/* Gold top rule */
.entities-grid-frame[b-kby0h0h0xd]::before {
content: '';
display: block;
height: 3px;
background: linear-gradient( to right, transparent 0%, #b8920c 15%, #e8d080 50%, #b8920c 85%, transparent 100% );
}
/* ── MudDataGrid overrides ────────────────────────────────────────────────── */
/* Root element — remove MudBlazor elevation */
[b-kby0h0h0xd] .entities-grid.mud-table {
background: #fdf8f0 !important;
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
}
/* When NOT using .entities-grid-frame wrapper, add the border here */
[b-kby0h0h0xd] .entities-grid {
border: 1px solid #c8b890;
border-radius: 4px;
overflow: hidden;
}
/* Header cells */
[b-kby0h0h0xd] .entities-grid .mud-table-head .mud-table-row .mud-table-cell,
[b-kby0h0h0xd] .entities-grid .mud-table-head .mud-table-head-row .mud-table-cell {
font-family: 'Cinzel', Georgia, serif !important;
font-size: 0.65rem !important;
font-weight: 600 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
color: #7a6a50 !important;
background: linear-gradient(to bottom, #e8ddc4, #ddd0b0) !important;
border-bottom: 2px solid rgba(184,146,12,0.35) !important;
padding: 10px 14px !important;
white-space: nowrap;
}
/* Sort icon — gold */
[b-kby0h0h0xd] .entities-grid .mud-table-sort-label .mud-icon-root,
[b-kby0h0h0xd] .entities-grid .mud-sort-direction-icon {
color: #b8920c !important;
font-size: 1rem !important;
}
/* Body cells — base */
[b-kby0h0h0xd] .entities-grid .mud-table-body .mud-table-row .mud-table-cell {
font-family: 'Lora', Georgia, serif !important;
font-size: 0.875rem !important;
color: #1a1209 !important;
border-bottom: 1px solid #d8caa8 !important;
padding: 11px 14px !important;
vertical-align: middle !important;
}
/* Striped — odd rows (white) */
[b-kby0h0h0xd] .entities-grid.mud-table-striped .mud-table-body .mud-table-row:nth-child(odd) .mud-table-cell {
background-color: #fdf8f0 !important;
}
/* Striped — even rows (light parchment) */
[b-kby0h0h0xd] .entities-grid.mud-table-striped .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell {
background-color: #f0e8d4 !important;
}
/* Row hover */
[b-kby0h0h0xd] .entities-grid.mud-table-hover .mud-table-body .mud-table-row:hover .mud-table-cell {
background-color: #e8dfc8 !important;
cursor: pointer;
}
/* Selected row */
[b-kby0h0h0xd] .entities-grid .mud-table-body .mud-table-row.entities-grid__row--selected .mud-table-cell {
background-color: #f5ebe8 !important;
border-left: 3px solid #730000 !important;
}
/* Name column — Cinzel, heavier weight */
[b-kby0h0h0xd] .entities-grid .mud-table-body .mud-table-row .mud-table-cell strong {
font-family: 'Cinzel', Georgia, serif !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
color: #1a1209 !important;
letter-spacing: 0.02em !important;
}
/* Campaign name — small Cinzel in crimson */
[b-kby0h0h0xd] .entities-grid .mud-table-body .mud-table-row .mud-table-cell .mud-typography-body2 {
font-family: 'Lora', serif !important;
font-size: 0.82rem !important;
color: #7a6a50 !important;
}
/* Description text */
.entities-grid__desc[b-kby0h0h0xd] {
font-family: 'Lora', Georgia, serif !important;
font-style: italic !important;
font-size: 0.82rem !important;
color: #7a6a50 !important;
line-height: 1.45 !important;
}
/* Check column — narrow */
[b-kby0h0h0xd] .entities-grid__check-col {
width: 42px !important;
padding: 0 8px !important;
}
/* Checkboxes — crimson accent */
[b-kby0h0h0xd] .entities-grid .mud-checkbox .mud-button-root {
color: #730000 !important;
}
[b-kby0h0h0xd] .entities-grid .mud-checkbox.mud-checked .mud-button-root {
color: #730000 !important;
}
/* Open-in-new icon button */
[b-kby0h0h0xd] .entities-grid .mud-table-body .mud-icon-button .mud-icon-root {
color: #b8920c !important;
font-size: 1.1rem !important;
transition: color 0.15s ease;
}
[b-kby0h0h0xd] .entities-grid .mud-table-body .mud-icon-button:hover .mud-icon-root {
color: #730000 !important;
}
/* ── Pagination ────────────────────────────────────────────────────────────── */
[b-kby0h0h0xd] .entities-grid .mud-table-pagination,
[b-kby0h0h0xd] .entities-grid .mud-table-pagination-toolbar {
background: #e8ddc4 !important;
border-top: 1px solid #c8b890 !important;
font-family: 'Lora', serif !important;
font-size: 0.8rem !important;
color: #7a6a50 !important;
}
[b-kby0h0h0xd] .entities-grid .mud-table-pagination p,
[b-kby0h0h0xd] .entities-grid .mud-table-pagination .mud-typography {
font-family: 'Lora', serif !important;
font-size: 0.8rem !important;
color: #7a6a50 !important;
}
[b-kby0h0h0xd] .entities-grid .mud-table-pagination-actions .mud-icon-button {
color: #b8920c !important;
}
[b-kby0h0h0xd] .entities-grid .mud-table-pagination-actions .mud-icon-button:disabled {
color: #c8b890 !important;
}
[b-kby0h0h0xd] .entities-grid .mud-table-pagination .mud-select-input,
[b-kby0h0h0xd] .entities-grid .mud-table-pagination .mud-input-slot {
font-family: 'Lora', serif !important;
font-size: 0.8rem !important;
color: #7a6a50 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
Entities.razor.css — GALLERY MODE ADDITIONS
APPEND the entire contents of this file to the existing Entities.razor.css
═══════════════════════════════════════════════════════════════════════════ */
/* ── View mode toggle ─────────────────────────────────────────────────────── */
.entities-view-toggle[b-kby0h0h0xd] {
display: flex;
align-items: center;
gap: 2px;
background: #e8ddc4;
border: 1px solid #c8b890;
border-radius: 4px;
padding: 3px;
}
.entities-view-toggle__btn[b-kby0h0h0xd] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 3px;
border: none;
background: transparent;
color: #7a6a50;
font-family: 'Cinzel', Georgia, serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.entities-view-toggle__btn svg[b-kby0h0h0xd] {
flex-shrink: 0;
}
.entities-view-toggle__btn:hover[b-kby0h0h0xd] {
background: rgba(255,255,255,0.6);
color: #1a1209;
}
.entities-view-toggle__btn--active[b-kby0h0h0xd] {
background: #fdf8f0;
color: #730000;
font-weight: 700;
box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
.entities-view-toggle__btn--active:hover[b-kby0h0h0xd] {
background: #fdf8f0;
color: #730000;
}
/* ── Gallery grid ─────────────────────────────────────────────────────────── */
.entities-gallery[b-kby0h0h0xd] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-bottom: 1.25rem;
}
@media (max-width: 1100px) {
.entities-gallery[b-kby0h0h0xd] {
grid-template-columns: 1fr;
}
}
/* ── Gallery card shell ───────────────────────────────────────────────────── */
.entity-gallery-card[b-kby0h0h0xd] {
display: flex;
background: #fdf8f0;
border: 1px solid #c8b890;
border-radius: 5px;
overflow: hidden;
position: relative;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.entity-gallery-card:hover[b-kby0h0h0xd] {
box-shadow: 0 6px 24px rgba(0,0,0,0.12), 0 0 0 1.5px #b8920c;
transform: translateY(-2px);
}
/* Corner ornament — top left only, pure CSS */
.entity-gallery-card[b-kby0h0h0xd]::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 14px; height: 14px;
border-top: 1.5px solid rgba(184,146,12,0.45);
border-left: 1.5px solid rgba(184,146,12,0.45);
pointer-events: none;
z-index: 2;
}
/* Corner ornament — bottom right */
.entity-gallery-card[b-kby0h0h0xd]::after {
content: '';
position: absolute;
bottom: 0; right: 0;
width: 14px; height: 14px;
border-bottom: 1.5px solid rgba(184,146,12,0.45);
border-right: 1.5px solid rgba(184,146,12,0.45);
pointer-events: none;
z-index: 2;
}
/* ── Portrait zone ────────────────────────────────────────────────────────── */
.entity-gallery-card__portrait[b-kby0h0h0xd] {
width: 86px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
/* top and bottom accent lines */
background: #e0dbd0;
}
/* Thin horizontal rules top and bottom of portrait zone */
.entity-gallery-card__portrait[b-kby0h0h0xd]::before,
.entity-gallery-card__portrait[b-kby0h0h0xd]::after {
content: '';
position: absolute;
left: 8px; right: 8px;
height: 1px;
}
.entity-gallery-card__portrait[b-kby0h0h0xd]::before { top: 8px; }
.entity-gallery-card__portrait[b-kby0h0h0xd]::after { bottom: 8px; }
/* Type-tinted portrait backgrounds */
.entity-gallery-card__portrait--npc[b-kby0h0h0xd] { background: linear-gradient(160deg, #c5d8f520, #3a6ec540); }
.entity-gallery-card__portrait--city[b-kby0h0h0xd] { background: linear-gradient(160deg, #b8f0c820, #2a9e4a40); }
.entity-gallery-card__portrait--location[b-kby0h0h0xd] { background: linear-gradient(160deg, #b8ede820, #1a8a7a40); }
.entity-gallery-card__portrait--item[b-kby0h0h0xd] { background: linear-gradient(160deg, #fde8b020, #c8702040); }
.entity-gallery-card__portrait--monster[b-kby0h0h0xd] { background: linear-gradient(160deg, #f5c5c520, #c0202040); }
.entity-gallery-card__portrait--faction[b-kby0h0h0xd] { background: linear-gradient(160deg, #dcc5f520, #7a3ac040); }
.entity-gallery-card__portrait--event[b-kby0h0h0xd] { background: linear-gradient(160deg, #f5e0b020, #c0802040); }
.entity-gallery-card__portrait--inn[b-kby0h0h0xd] { background: linear-gradient(160deg, #fde0c020, #c8602040); }
.entity-gallery-card__portrait--temple[b-kby0h0h0xd] { background: linear-gradient(160deg, #e8e0f020, #7060b040); }
.entity-gallery-card__portrait--store[b-kby0h0h0xd] { background: linear-gradient(160deg, #ede0cc20, #a0704040); }
.entity-gallery-card__portrait--other[b-kby0h0h0xd],
.entity-gallery-card__portrait--generic[b-kby0h0h0xd] { background: linear-gradient(160deg, #e0e0e020, #88888840); }
/* Portrait accent lines — coloured per type */
.entity-gallery-card__portrait--npc[b-kby0h0h0xd]::before,
.entity-gallery-card__portrait--npc[b-kby0h0h0xd]::after { background: linear-gradient(to right, transparent, #3a6ec560, transparent); }
.entity-gallery-card__portrait--city[b-kby0h0h0xd]::before,
.entity-gallery-card__portrait--city[b-kby0h0h0xd]::after { background: linear-gradient(to right, transparent, #2a9e4a60, transparent); }
.entity-gallery-card__portrait--location[b-kby0h0h0xd]::before,
.entity-gallery-card__portrait--location[b-kby0h0h0xd]::after { background: linear-gradient(to right, transparent, #1a8a7a60, transparent); }
.entity-gallery-card__portrait--item[b-kby0h0h0xd]::before,
.entity-gallery-card__portrait--item[b-kby0h0h0xd]::after { background: linear-gradient(to right, transparent, #c8702060, transparent); }
.entity-gallery-card__portrait--monster[b-kby0h0h0xd]::before,
.entity-gallery-card__portrait--monster[b-kby0h0h0xd]::after { background: linear-gradient(to right, transparent, #c0202060, transparent); }
.entity-gallery-card__portrait--faction[b-kby0h0h0xd]::before,
.entity-gallery-card__portrait--faction[b-kby0h0h0xd]::after { background: linear-gradient(to right, transparent, #7a3ac060, transparent); }
.entity-gallery-card__portrait--event[b-kby0h0h0xd]::before,
.entity-gallery-card__portrait--event[b-kby0h0h0xd]::after { background: linear-gradient(to right, transparent, #c0802060, transparent); }
.entity-gallery-card__portrait--inn[b-kby0h0h0xd]::before,
.entity-gallery-card__portrait--inn[b-kby0h0h0xd]::after { background: linear-gradient(to right, transparent, #c8602060, transparent); }
.entity-gallery-card__portrait--temple[b-kby0h0h0xd]::before,
.entity-gallery-card__portrait--temple[b-kby0h0h0xd]::after { background: linear-gradient(to right, transparent, #7060b060, transparent); }
.entity-gallery-card__portrait--store[b-kby0h0h0xd]::before,
.entity-gallery-card__portrait--store[b-kby0h0h0xd]::after { background: linear-gradient(to right, transparent, #a0704060, transparent); }
/* Portrait image (when a real portrait is uploaded) */
.entity-gallery-card__portrait-img[b-kby0h0h0xd] {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* Portrait placeholder SVG */
.entity-gallery-card__portrait-placeholder[b-kby0h0h0xd] {
width: 46px;
height: 58px;
color: #a09880;
}
/* ── Info panel ───────────────────────────────────────────────────────────── */
.entity-gallery-card__info[b-kby0h0h0xd] {
flex: 1;
padding: 11px 14px;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.entity-gallery-card__meta[b-kby0h0h0xd] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-bottom: 2px;
}
.entity-gallery-card__date[b-kby0h0h0xd] {
font-family: 'Lora', Georgia, serif;
font-style: italic;
font-size: 0.75rem;
color: #b8b0a0;
white-space: nowrap;
}
.entity-gallery-card__name[b-kby0h0h0xd] {
font-family: 'Cinzel', Georgia, serif;
font-size: 1rem;
font-weight: 600;
color: #1a1209;
letter-spacing: 0.02em;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.entity-gallery-card__campaign[b-kby0h0h0xd] {
font-family: 'Cinzel', Georgia, serif;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.06em;
color: #730000;
text-transform: uppercase;
opacity: 0.8;
}
/* Thin gold divider rule */
.entity-gallery-card__rule[b-kby0h0h0xd] {
height: 1px;
background: linear-gradient(to right, #b8920c50, transparent);
margin: 4px 0;
}
.entity-gallery-card__desc[b-kby0h0h0xd] {
font-family: 'Lora', Georgia, serif;
font-size: 0.82rem;
font-style: italic;
color: #7a6a50;
line-height: 1.5;
flex: 1;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.entity-gallery-card__desc em[b-kby0h0h0xd] {
color: #c8baa8;
}
.entity-gallery-card__actions[b-kby0h0h0xd] {
margin-top: 8px;
}
[b-kby0h0h0xd] .entity-gallery-card__open-btn {
font-family: 'Cinzel', Georgia, serif !important;
font-size: 0.68rem !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
border-radius: 2px !important;
padding: 0 14px !important;
height: 28px !important;
min-width: 0 !important;
border: 1px solid #b8920c !important;
}
/* ── Gallery loading / empty states ──────────────────────────────────────── */
.entities-gallery-loading[b-kby0h0h0xd] {
display: flex;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
}
.entities-gallery-empty[b-kby0h0h0xd] {
display: flex;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
background: #fdf8f0;
border: 1px dashed #c8b890;
border-radius: 5px;
}
.entities-gallery-empty__text[b-kby0h0h0xd] {
font-family: 'Lora', Georgia, serif !important;
font-style: italic !important;
color: #b8b0a0 !important;
}
/* ── Gallery pagination ───────────────────────────────────────────────────── */
.entities-gallery-pagination[b-kby0h0h0xd] {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 0.6rem 0;
}
.entities-gallery-pagination__info[b-kby0h0h0xd] {
font-family: 'Lora', Georgia, serif;
font-style: italic;
font-size: 0.82rem;
color: #7a6a50;
}
[b-kby0h0h0xd] .entities-gallery-pagination .mud-icon-button .mud-icon-root {
color: #b8920c !important;
}
[b-kby0h0h0xd] .entities-gallery-pagination .mud-icon-button:disabled .mud-icon-root {
color: #c8b890 !important;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Phase 0 Sub-phase H — adaptive Home: first-run onboarding hub + returning-user "jump back in". */
.home-page[b-ux69rph6fc] {
max-width: 1400px;
margin: 0 auto;
}
/* First-run onboarding: centre the welcome + path cards as one block with generous breathing
room, rather than letting them hug the top-left of the content area. */
.home-page:has(.home-welcome)[b-ux69rph6fc] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 70vh;
padding: 2rem 1.5rem;
}
.home-loading[b-ux69rph6fc] {
display: flex;
justify-content: center;
padding: 5rem 0;
}
/* ── First-run welcome ───────────────────────────────────────────────────── */
.home-welcome[b-ux69rph6fc] {
text-align: center;
margin: 0 auto 2.5rem;
max-width: 720px;
}
/* MudText / MudPaper render as child components, so their roots don't carry this component's
scope marker — these rules must go through ::deep to match. */
[b-ux69rph6fc] .home-welcome__title {
font-weight: 300 !important;
color: #1a1a2e !important;
}
[b-ux69rph6fc] .home-welcome__subtitle {
color: #55557a !important;
margin-top: 0.5rem;
}
/* ── Two onboarding paths ────────────────────────────────────────────────── */
.home-paths[b-ux69rph6fc] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
width: 100%;
max-width: 860px;
margin: 0 auto;
}
[b-ux69rph6fc] .home-path {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2.5rem 1.75rem;
border-radius: 12px;
height: 100%;
}
[b-ux69rph6fc] .home-path__icon {
font-size: 3rem !important;
color: rgba(115, 0, 0, 0.35) !important;
margin-bottom: 0.75rem;
}
[b-ux69rph6fc] .home-path__title {
color: #1a1a2e !important;
font-weight: 500 !important;
}
[b-ux69rph6fc] .home-path__text {
color: #55557a !important;
margin-top: 0.5rem;
flex-grow: 1;
}
[b-ux69rph6fc] .home-path__btn {
margin-top: 1.5rem;
border-radius: 3em !important;
}
/* ════════════════════════════════════════════════════════════════════════════
Returning-user dashboard — Direction B2 (resume band + two role columns).
Plain HTML elements carry this component's scope marker directly, so these
rules need no ::deep (unlike the MudBlazor first-run cards above).
════════════════════════════════════════════════════════════════════════════ */
/* ── Page head ───────────────────────────────────────────────────────────── */
.home-head[b-ux69rph6fc] {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 22px;
}
.home-head__title[b-ux69rph6fc] {
font-family: 'Cinzel', Georgia, serif;
font-size: 30px;
font-weight: 700;
color: #1a1209;
letter-spacing: 0.03em;
line-height: 1.1;
margin: 0;
}
.home-head__subtitle[b-ux69rph6fc] {
font-family: 'Lora', Georgia, serif;
font-size: 13.5px;
font-style: italic;
color: #7a6a50;
margin-top: 4px;
}
.home-head__all[b-ux69rph6fc] {
font-family: 'Cinzel', Georgia, serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
color: #730000;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
.home-head__all:hover[b-ux69rph6fc] {
text-decoration: underline;
}
/* ── Resume band ─────────────────────────────────────────────────────────── */
.home-resume[b-ux69rph6fc] {
display: flex;
align-items: stretch;
background: #fdf8f0;
border: 1px solid rgba(0, 0, 0, 0.10);
border-left: 3px solid #b8920c;
border-radius: 5px;
overflow: hidden;
margin-bottom: 24px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}
.home-resume__art[b-ux69rph6fc] {
width: 150px;
flex-shrink: 0;
background-size: cover;
background-position: center;
}
.home-resume__body[b-ux69rph6fc] {
flex: 1;
padding: 14px 20px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.home-resume__kicker-line[b-ux69rph6fc] {
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
margin-bottom: 5px;
}
.home-resume__kicker[b-ux69rph6fc] {
font-family: 'Cinzel', Georgia, serif;
font-size: 8.5px;
letter-spacing: 0.14em;
color: #9a7a1e;
text-transform: uppercase;
}
.home-resume__when[b-ux69rph6fc] {
font-family: 'Lora', Georgia, serif;
font-size: 10.5px;
font-style: italic;
color: #7a6a50;
}
.home-resume__title[b-ux69rph6fc] {
font-family: 'Cinzel', Georgia, serif;
font-size: 19px;
font-weight: 700;
color: #1a1209;
margin: 0 0 3px;
}
.home-resume__desc[b-ux69rph6fc] {
font-family: 'Lora', Georgia, serif;
font-size: 12px;
color: #3a2214;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.home-resume__cta[b-ux69rph6fc] {
display: flex;
align-items: center;
padding: 0 20px;
flex-shrink: 0;
}
.home-resume__btn[b-ux69rph6fc] {
padding: 10px 24px;
background: #730000;
color: #fff;
border-radius: 3px;
font-family: 'Cinzel', Georgia, serif;
font-size: 11px;
letter-spacing: 0.07em;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.15s ease;
}
.home-resume__btn:hover[b-ux69rph6fc] {
background: #5c0000;
}
/* ── Role badges (resume band) ───────────────────────────────────────────── */
.home-resume__badge[b-ux69rph6fc] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 6px;
border-radius: 2px;
font-family: 'Cinzel', Georgia, serif;
font-size: 7.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
}
.home-resume__badge--dm[b-ux69rph6fc] {
background: rgba(115, 0, 0, 0.10);
border: 1px solid rgba(115, 0, 0, 0.35);
color: #730000;
}
.home-resume__badge--player[b-ux69rph6fc] {
background: rgba(58, 80, 104, 0.12);
border: 1px solid rgba(58, 80, 104, 0.34);
color: #3a5068;
}
/* ── Themed "what's new" notice ──────────────────────────────────────────── */
.home-notice[b-ux69rph6fc] {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
background: linear-gradient(to right, rgba(184, 146, 12, 0.10), rgba(184, 146, 12, 0.04));
border: 1px solid rgba(184, 146, 12, 0.32);
border-left: 3px solid #b8920c;
border-radius: 3px;
margin-bottom: 24px;
}
.home-notice__orn[b-ux69rph6fc] {
font-family: 'Cinzel', Georgia, serif;
font-size: 14px;
color: #b8920c;
}
.home-notice__text[b-ux69rph6fc] {
flex: 1;
font-family: 'Lora', Georgia, serif;
font-size: 12.5px;
color: #3a2214;
}
.home-notice__tag[b-ux69rph6fc] {
font-family: 'Cinzel', Georgia, serif;
font-size: 10px;
letter-spacing: 0.08em;
color: #8a6a1e;
text-transform: uppercase;
margin-right: 6px;
}
.home-notice__link[b-ux69rph6fc] {
color: #730000;
text-decoration: underline;
text-decoration-color: rgba(115, 0, 0, 0.3);
}
.home-notice__close[b-ux69rph6fc] {
font-family: 'Lora', Georgia, serif;
font-size: 16px;
color: #7a6a50;
line-height: 1;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
/* Two role columns + column headers + new-campaign tile + empty state are shared
with the Campaigns page → defined globally as `.cmp-*` in app.css. */
/* ── Responsive: wrap the resume button below the text ───────────────────── */
@media (max-width: 960px) {
.home-resume[b-ux69rph6fc] {
flex-wrap: wrap;
}
.home-resume__art[b-ux69rph6fc] {
width: 100%;
height: 120px;
}
.home-resume__body[b-ux69rph6fc] {
flex: 1 1 100%;
}
.home-resume__cta[b-ux69rph6fc] {
flex: 1 1 100%;
padding: 0 20px 16px;
}
}
/* /Components/Shared/CampaignCard.razor.rz.scp.css */
/* ── Card shell ──────────────────────────────────────────────────────────── */
.campaign-card[b-ugj1aojjwh] {
display: flex;
flex-direction: column;
width: 100%;
border-radius: 10px !important;
border: 1px solid rgba(0,0,0,0.07) !important;
transition: transform 0.18s ease, box-shadow 0.18s ease !important;
overflow: hidden !important;
}
.campaign-card:hover[b-ugj1aojjwh] {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(115, 0, 0, 0.14) !important;
}
/* ── Header band ─────────────────────────────────────────────────────────── */
.campaign-card__header[b-ugj1aojjwh] {
position: relative;
min-height: 120px;
display: flex;
align-items: flex-end;
padding: 1rem 1.25rem 0.85rem;
background: linear-gradient(135deg, #730000 0%, #a01010 100%);
overflow: hidden;
border-radius: 10px 10px 0 0;
}
/* When an image is present, use it as a cover background */
.campaign-card__header--image[b-ugj1aojjwh] {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Dark gradient overlay — keeps title readable over any image colour */
.campaign-card__header-overlay[b-ugj1aojjwh] {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.08) 0%,
rgba(0, 0, 0, 0.55) 100%
);
pointer-events: none;
}
/* Title sits above the overlay */
[b-ugj1aojjwh] .campaign-card__title {
position: relative;
z-index: 1;
color: #ffffff !important;
font-weight: 600 !important;
line-height: 1.3 !important;
word-break: break-word;
/* Stroke-style shadow for legibility on bright backgrounds */
text-shadow:
0 0 3px rgba(0,0,0,0.8),
0 1px 4px rgba(0,0,0,0.6),
-1px -1px 0 rgba(0,0,0,0.4),
1px -1px 0 rgba(0,0,0,0.4),
-1px 1px 0 rgba(0,0,0,0.4),
1px 1px 0 rgba(0,0,0,0.4);
}
/* ── Card content ────────────────────────────────────────────────────────── */
.campaign-card__content[b-ugj1aojjwh] {
flex: 1;
padding: 1rem 1.25rem 0.5rem !important;
}
/* ── Meta row ────────────────────────────────────────────────────────────── */
.campaign-card__meta[b-ugj1aojjwh] {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.5rem;
margin-bottom: 0.75rem;
}
.campaign-card__meta-item[b-ugj1aojjwh] {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8rem;
color: #55557a;
font-weight: 500;
}
[b-ugj1aojjwh] .campaign-card__meta-icon {
font-size: 1rem !important;
color: #730000 !important;
flex-shrink: 0;
}
/* ── Divider ─────────────────────────────────────────────────────────────── */
.campaign-card__divider[b-ugj1aojjwh] {
margin: 0.5rem 0 0.75rem !important;
}
/* ── Description ─────────────────────────────────────────────────────────── */
.campaign-card__description[b-ugj1aojjwh] {
color: #3a3a5c !important;
line-height: 1.6 !important;
font-size: 0.875rem !important;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Actions ─────────────────────────────────────────────────────────────── */
.campaign-card__actions[b-ugj1aojjwh] {
padding: 0.5rem 1.25rem 1rem !important;
justify-content: flex-end;
}
[b-ugj1aojjwh] .campaign-card__open-btn {
font-size: 0.7rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
border-radius: 3em !important;
padding: 0 1.25rem !important;
border-color: #730000 !important;
color: #730000 !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
[b-ugj1aojjwh] .campaign-card__open-btn:hover {
background-color: #730000 !important;
color: #ffffff !important;
}
/* /Components/Shared/CampaignRow.razor.rz.scp.css */
/* Direction B2 — horizontal campaign row used on the Home dashboard. */
.camp-row[b-wzgs95izeb] {
display: flex;
background: #fdf8f0;
border: 1px solid rgba(0, 0, 0, 0.10);
border-radius: 5px;
overflow: hidden;
margin-bottom: 12px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.15s ease;
position: relative;
min-height: 150px;
}
.camp-row:hover[b-wzgs95izeb] {
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
}
/* Most-recently-opened row — gold left stripe */
.camp-row--resume[b-wzgs95izeb]::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 3px;
background: #b8920c;
}
.camp-row__art[b-wzgs95izeb] {
width: 108px;
flex-shrink: 0;
background-size: cover;
background-position: center;
}
.camp-row__body[b-wzgs95izeb] {
flex: 1;
padding: 13px 16px;
display: flex;
flex-direction: column;
min-width: 0;
}
.camp-row__title-line[b-wzgs95izeb] {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 5px;
}
.camp-row__title[b-wzgs95izeb] {
font-family: 'Cinzel', Georgia, serif;
font-size: 15px;
font-weight: 700;
color: #1a1209;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.camp-row__opened[b-wzgs95izeb] {
flex-shrink: 0;
font-family: 'Lora', Georgia, serif;
font-size: 10px;
font-style: italic;
color: #9a7a1e;
}
.camp-row__meta[b-wzgs95izeb] {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-family: 'Lora', Georgia, serif;
font-size: 11px;
color: #7a6a50;
margin-bottom: 7px;
}
.camp-row__desc[b-wzgs95izeb] {
font-family: 'Lora', Georgia, serif;
font-size: 12px;
color: #3a2214;
line-height: 1.55;
/* No flex:1 — flex-stretching the box let a 3rd line bleed past the clamp and get chopped.
Natural height keeps -webkit-line-clamp clean. */
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
padding-bottom: 2px;
}
.camp-row__actions[b-wzgs95izeb] {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding: 12px 14px;
border-left: 1px solid rgba(0, 0, 0, 0.07);
flex-shrink: 0;
}
.camp-row__btn[b-wzgs95izeb] {
padding: 7px 16px;
border-radius: 3px;
font-family: 'Cinzel', Georgia, serif;
font-size: 9.5px;
letter-spacing: 0.06em;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.camp-row__btn--open[b-wzgs95izeb] {
background: #730000;
color: #fff;
border: none;
transition: background-color 0.15s ease;
}
.camp-row__btn--open:hover[b-wzgs95izeb] {
background: #5c0000;
}
.camp-row__btn--edit[b-wzgs95izeb] {
background: transparent;
color: #3a2214;
border: 1px solid rgba(0, 0, 0, 0.10);
transition: border-color 0.15s ease;
}
.camp-row__btn--edit:hover[b-wzgs95izeb] {
border-color: rgba(0, 0, 0, 0.25);
}
.camp-row__btn--plan[b-wzgs95izeb] {
background: transparent;
color: #730000;
border: 1px solid rgba(115, 0, 0, 0.30);
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.camp-row__btn--plan:hover[b-wzgs95izeb] {
border-color: rgba(115, 0, 0, 0.55);
background: rgba(115, 0, 0, 0.05);
}
.camp-row__btn--invite[b-wzgs95izeb] {
background: transparent;
color: #b8920c;
border: 1px solid rgba(184, 146, 12, 0.45);
font: inherit;
font-family: 'Cinzel', Georgia, serif;
font-size: 9.5px;
letter-spacing: 0.06em;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.camp-row__btn--invite:hover[b-wzgs95izeb] {
border-color: rgba(184, 146, 12, 0.8);
background: rgba(184, 146, 12, 0.08);
}
/* /Components/Shared/CampaignSettingsForm.razor.rz.scp.css */
.cd-loading[b-lg8wu1wp89] {
padding: 2rem 0;
}
/* ── Image panel ─────────────────────────────────────────────────────────── */
.cd-image-panel[b-lg8wu1wp89] {
display: flex;
flex-direction: column;
}
/* Drop zone wraps the preview + invisible file input overlay */
.cd-image-panel__dropzone[b-lg8wu1wp89] {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
}
.cd-image-panel__dropzone:hover .cd-image-panel__preview--empty[b-lg8wu1wp89] {
border-color: rgba(115, 0, 0, 0.5);
background: #f5eded;
}
/* Preview fills the dropzone */
.cd-image-panel__preview[b-lg8wu1wp89] {
width: 100%;
height: 100%;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(135deg, #730000 0%, #a01010 100%);
display: flex;
align-items: center;
justify-content: center;
}
.cd-image-panel__preview--empty[b-lg8wu1wp89] {
border: 2px dashed rgba(115, 0, 0, 0.3);
background: #faf5f5;
transition: border-color 0.15s ease, background 0.15s ease;
}
.cd-image-panel__img[b-lg8wu1wp89] {
width: 100%;
height: 100%;
object-fit: cover;
}
.cd-image-panel__placeholder[b-lg8wu1wp89] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
pointer-events: none;
}
[b-lg8wu1wp89] .cd-image-panel__placeholder-icon {
font-size: 2.5rem !important;
color: rgba(115, 0, 0, 0.3) !important;
}
.cd-image-panel__placeholder-text[b-lg8wu1wp89] {
font-size: 0.75rem;
color: rgba(115, 0, 0, 0.4);
font-weight: 500;
text-align: center;
letter-spacing: 0.03em;
}
/* Invisible InputFile covers the entire dropzone — handles click + drag-drop */
[b-lg8wu1wp89] .cd-image-panel__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 2;
}
/* Uploading overlay */
.cd-image-panel__overlay[b-lg8wu1wp89] {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
border-radius: 12px;
}
.cd-image-panel__hint[b-lg8wu1wp89] {
color: #aaa !important;
font-size: 0.7rem !important;
}
/* ── Form panel ──────────────────────────────────────────────────────────── */
[b-lg8wu1wp89] .cd-form-panel {
border-radius: 12px !important;
}
.cd-form-body[b-lg8wu1wp89] {
padding: 2rem 2.5rem;
}
.cd-form__field[b-lg8wu1wp89] {
width: 100%;
}
.cd-form__actions[b-lg8wu1wp89] {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
}
[b-lg8wu1wp89] .cd-form__save-btn {
border-radius: 3em !important;
padding: 0 1.75rem !important;
font-size: 0.75rem !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* Phase 0 Sub-phase H — shared empty / first-run state. Mirrors the original .campaigns-empty look. */
.empty-state[b-1cck68p60t] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
text-align: center;
background: #ffffff;
border-radius: 12px;
border: 1px dashed rgba(115, 0, 0, 0.2);
margin-top: 1rem;
}
.empty-state--dense[b-1cck68p60t] {
padding: 2.25rem 1.5rem;
background: transparent;
border: none;
margin-top: 0;
}
[b-1cck68p60t] .empty-state__icon {
font-size: 4rem !important;
color: rgba(115, 0, 0, 0.2) !important;
margin-bottom: 1rem;
}
.empty-state--dense[b-1cck68p60t] .empty-state__icon {
font-size: 3rem !important;
}
.empty-state__title[b-1cck68p60t] {
color: #1a1a2e !important;
font-weight: 500 !important;
}
.empty-state__message[b-1cck68p60t] {
color: #55557a !important;
margin-top: 0.4rem;
max-width: 30rem;
}
.empty-state__actions[b-1cck68p60t] {
margin-top: 1.5rem;
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
}
/* /Components/Shared/EntityCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
EntityCard.razor.css — scoped styles for the shared gallery card.
Container / page-level rules (.entities-gallery, pagination, etc.) live in
Entities.razor.css. The card visual lives here so the component is self-
contained and Blazor scoped-CSS attributes are applied correctly.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Gallery card shell ───────────────────────────────────────────────────── */
.entity-gallery-card[b-cl0i2ui0iw] {
display: flex;
background: #fdf8f0;
border: 1px solid #c8b890;
border-radius: 5px;
overflow: hidden;
position: relative;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.entity-gallery-card:hover[b-cl0i2ui0iw] {
box-shadow: 0 6px 24px rgba(0,0,0,0.12), 0 0 0 1.5px #b8920c;
transform: translateY(-2px);
}
/* Corner ornament — top left only, pure CSS */
.entity-gallery-card[b-cl0i2ui0iw]::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 14px; height: 14px;
border-top: 1.5px solid rgba(184,146,12,0.45);
border-left: 1.5px solid rgba(184,146,12,0.45);
pointer-events: none;
z-index: 2;
}
/* Corner ornament — bottom right */
.entity-gallery-card[b-cl0i2ui0iw]::after {
content: '';
position: absolute;
bottom: 0; right: 0;
width: 14px; height: 14px;
border-bottom: 1.5px solid rgba(184,146,12,0.45);
border-right: 1.5px solid rgba(184,146,12,0.45);
pointer-events: none;
z-index: 2;
}
/* ── Portrait zone ────────────────────────────────────────────────────────── */
.entity-gallery-card__portrait[b-cl0i2ui0iw] {
width: 86px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: #e0dbd0;
}
/* Thin horizontal rules top and bottom of portrait zone */
.entity-gallery-card__portrait[b-cl0i2ui0iw]::before,
.entity-gallery-card__portrait[b-cl0i2ui0iw]::after {
content: '';
position: absolute;
left: 8px; right: 8px;
height: 1px;
}
.entity-gallery-card__portrait[b-cl0i2ui0iw]::before { top: 8px; }
.entity-gallery-card__portrait[b-cl0i2ui0iw]::after { bottom: 8px; }
/* Type-tinted portrait backgrounds */
.entity-gallery-card__portrait--npc[b-cl0i2ui0iw] { background: linear-gradient(160deg, #c5d8f520, #3a6ec540); }
.entity-gallery-card__portrait--city[b-cl0i2ui0iw] { background: linear-gradient(160deg, #b8f0c820, #2a9e4a40); }
.entity-gallery-card__portrait--location[b-cl0i2ui0iw] { background: linear-gradient(160deg, #b8ede820, #1a8a7a40); }
.entity-gallery-card__portrait--item[b-cl0i2ui0iw] { background: linear-gradient(160deg, #fde8b020, #c8702040); }
.entity-gallery-card__portrait--monster[b-cl0i2ui0iw] { background: linear-gradient(160deg, #f5c5c520, #c0202040); }
.entity-gallery-card__portrait--faction[b-cl0i2ui0iw] { background: linear-gradient(160deg, #dcc5f520, #7a3ac040); }
.entity-gallery-card__portrait--event[b-cl0i2ui0iw] { background: linear-gradient(160deg, #f5e0b020, #c0802040); }
.entity-gallery-card__portrait--inn[b-cl0i2ui0iw] { background: linear-gradient(160deg, #fde0c020, #c8602040); }
.entity-gallery-card__portrait--temple[b-cl0i2ui0iw] { background: linear-gradient(160deg, #e8e0f020, #7060b040); }
.entity-gallery-card__portrait--store[b-cl0i2ui0iw] { background: linear-gradient(160deg, #ede0cc20, #a0704040); }
.entity-gallery-card__portrait--other[b-cl0i2ui0iw],
.entity-gallery-card__portrait--generic[b-cl0i2ui0iw] { background: linear-gradient(160deg, #e0e0e020, #88888840); }
.entity-gallery-card__portrait--handout[b-cl0i2ui0iw] { background: linear-gradient(160deg, #d1efe920, #0d3f3a40); }
/* Portrait accent lines — coloured per type */
.entity-gallery-card__portrait--npc[b-cl0i2ui0iw]::before,
.entity-gallery-card__portrait--npc[b-cl0i2ui0iw]::after { background: linear-gradient(to right, transparent, #3a6ec560, transparent); }
.entity-gallery-card__portrait--city[b-cl0i2ui0iw]::before,
.entity-gallery-card__portrait--city[b-cl0i2ui0iw]::after { background: linear-gradient(to right, transparent, #2a9e4a60, transparent); }
.entity-gallery-card__portrait--location[b-cl0i2ui0iw]::before,
.entity-gallery-card__portrait--location[b-cl0i2ui0iw]::after { background: linear-gradient(to right, transparent, #1a8a7a60, transparent); }
.entity-gallery-card__portrait--item[b-cl0i2ui0iw]::before,
.entity-gallery-card__portrait--item[b-cl0i2ui0iw]::after { background: linear-gradient(to right, transparent, #c8702060, transparent); }
.entity-gallery-card__portrait--monster[b-cl0i2ui0iw]::before,
.entity-gallery-card__portrait--monster[b-cl0i2ui0iw]::after { background: linear-gradient(to right, transparent, #c0202060, transparent); }
.entity-gallery-card__portrait--faction[b-cl0i2ui0iw]::before,
.entity-gallery-card__portrait--faction[b-cl0i2ui0iw]::after { background: linear-gradient(to right, transparent, #7a3ac060, transparent); }
.entity-gallery-card__portrait--event[b-cl0i2ui0iw]::before,
.entity-gallery-card__portrait--event[b-cl0i2ui0iw]::after { background: linear-gradient(to right, transparent, #c0802060, transparent); }
.entity-gallery-card__portrait--inn[b-cl0i2ui0iw]::before,
.entity-gallery-card__portrait--inn[b-cl0i2ui0iw]::after { background: linear-gradient(to right, transparent, #c8602060, transparent); }
.entity-gallery-card__portrait--temple[b-cl0i2ui0iw]::before,
.entity-gallery-card__portrait--temple[b-cl0i2ui0iw]::after { background: linear-gradient(to right, transparent, #7060b060, transparent); }
.entity-gallery-card__portrait--store[b-cl0i2ui0iw]::before,
.entity-gallery-card__portrait--store[b-cl0i2ui0iw]::after { background: linear-gradient(to right, transparent, #a0704060, transparent); }
/* Portrait image (when a real portrait is uploaded) */
.entity-gallery-card__portrait-img[b-cl0i2ui0iw] {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* Portrait placeholder SVG */
.entity-gallery-card__portrait-placeholder[b-cl0i2ui0iw] {
width: 46px;
height: 58px;
color: #a09880;
}
/* ── Info panel ───────────────────────────────────────────────────────────── */
.entity-gallery-card__info[b-cl0i2ui0iw] {
flex: 1;
padding: 11px 14px;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.entity-gallery-card__meta[b-cl0i2ui0iw] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-bottom: 2px;
}
.entity-gallery-card__date[b-cl0i2ui0iw] {
font-family: 'Lora', Georgia, serif;
font-style: italic;
font-size: 0.75rem;
color: #b8b0a0;
white-space: nowrap;
}
.entity-gallery-card__name[b-cl0i2ui0iw] {
font-family: 'Cinzel', Georgia, serif;
font-size: 1rem;
font-weight: 600;
color: #1a1209;
letter-spacing: 0.02em;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.entity-gallery-card__campaign[b-cl0i2ui0iw] {
font-family: 'Cinzel', Georgia, serif;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.06em;
color: #730000;
text-transform: uppercase;
opacity: 0.8;
}
/* Thin gold divider rule */
.entity-gallery-card__rule[b-cl0i2ui0iw] {
height: 1px;
background: linear-gradient(to right, #b8920c50, transparent);
margin: 4px 0;
}
.entity-gallery-card__desc[b-cl0i2ui0iw] {
font-family: 'Lora', Georgia, serif;
font-size: 0.82rem;
font-style: italic;
color: #7a6a50;
line-height: 1.5;
flex: 1;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.entity-gallery-card__desc em[b-cl0i2ui0iw] {
color: #c8baa8;
}
.entity-gallery-card__actions[b-cl0i2ui0iw] {
margin-top: 8px;
}
[b-cl0i2ui0iw] .entity-gallery-card__open-btn {
font-family: 'Cinzel', Georgia, serif !important;
font-size: 0.68rem !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
border-radius: 2px !important;
padding: 0 14px !important;
height: 28px !important;
min-width: 0 !important;
border: 1px solid #b8920c !important;
}
/* ── Type chip colors (carried over so they apply to chips inside the card) ── */
[b-cl0i2ui0iw] .entity-type-chip.mud-chip {
font-family: 'Cinzel', Georgia, serif !important;
font-size: 0.6rem !important;
font-weight: 600 !important;
letter-spacing: 0.05em !important;
border-radius: 2px !important;
height: 20px !important;
margin: 0 !important;
text-transform: none !important;
}
[b-cl0i2ui0iw] .entity-type-chip .mud-chip-label {
padding: 0 7px !important;
}
[b-cl0i2ui0iw] .entity-type-chip--npc.mud-chip {
background-color: #dae6f8 !important;
color: #1a3a7a !important;
border: 1px solid #a8c0e8 !important;
box-shadow: none !important;
}
[b-cl0i2ui0iw] .entity-type-chip--city.mud-chip {
background-color: #d0f0da !important;
color: #1a5e2a !important;
border: 1px solid #90d0a0 !important;
box-shadow: none !important;
}
[b-cl0i2ui0iw] .entity-type-chip--location.mud-chip {
background-color: #c8ede8 !important;
color: #155249 !important;
border: 1px solid #80d0c0 !important;
box-shadow: none !important;
}
[b-cl0i2ui0iw] .entity-type-chip--item.mud-chip {
background-color: #fbe8b0 !important;
color: #5e3000 !important;
border: 1px solid #e0b860 !important;
box-shadow: none !important;
}
[b-cl0i2ui0iw] .entity-type-chip--monster.mud-chip {
background-color: #f5cece !important;
color: #6e0000 !important;
border: 1px solid #e09090 !important;
box-shadow: none !important;
}
[b-cl0i2ui0iw] .entity-type-chip--faction.mud-chip {
background-color: #e0cef8 !important;
color: #3d1a7a !important;
border: 1px solid #c0a0e8 !important;
box-shadow: none !important;
}
[b-cl0i2ui0iw] .entity-type-chip--event.mud-chip {
background-color: #f5e4b8 !important;
color: #6e4a00 !important;
border: 1px solid #e0c070 !important;
box-shadow: none !important;
}
[b-cl0i2ui0iw] .entity-type-chip--inn.mud-chip {
background-color: #fde0c0 !important;
color: #6e2a00 !important;
border: 1px solid #e0a060 !important;
box-shadow: none !important;
}
[b-cl0i2ui0iw] .entity-type-chip--temple.mud-chip {
background-color: #e8e0f0 !important;
color: #3a2060 !important;
border: 1px solid #c0b0d8 !important;
box-shadow: none !important;
}
[b-cl0i2ui0iw] .entity-type-chip--store.mud-chip {
background-color: #ede0cc !important;
color: #4a2800 !important;
border: 1px solid #c8a878 !important;
box-shadow: none !important;
}
[b-cl0i2ui0iw] .entity-type-chip--generic.mud-chip,
[b-cl0i2ui0iw] .entity-type-chip--other.mud-chip {
background-color: #e8e4da !important;
color: #4a4a44 !important;
border: 1px solid #c0bab0 !important;
box-shadow: none !important;
}
[b-cl0i2ui0iw] .entity-type-chip--handout.mud-chip {
background-color: #d1efe9 !important;
color: #0d3f3a !important;
border: 1px solid #6cbab0 !important;
box-shadow: none !important;
}
/* /Components/Shared/LoginDisplay.razor.rz.scp.css */
/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.login-display[b-ypftqrqtr0] {
display: flex;
align-items: center;
gap: 0.625rem;
}
/* ── Avatar ──────────────────────────────────────────────────────────────── */
.login-display__avatar[b-ypftqrqtr0] {
width: 32px !important;
height: 32px !important;
font-size: 0.8rem !important;
}
/* ── Display name ────────────────────────────────────────────────────────── */
.login-display__name[b-ypftqrqtr0] {
font-size: 0.875rem;
font-weight: 500;
color: #2c2c2c;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Logout button ───────────────────────────────────────────────────────── */
[b-ypftqrqtr0] .login-display__logout-btn {
font-size: 0.6rem !important;
letter-spacing: 0.125em !important;
text-transform: uppercase !important;
border-radius: 3.325em !important;
padding: 0 1.25rem !important;
height: 2rem !important;
border-color: rgba(0, 0, 0, 0.2) !important;
color: #2c2c2c !important;
background: transparent !important;
transition: border-color 0.15s ease, color 0.15s ease !important;
}
[b-ypftqrqtr0] .login-display__logout-btn:hover {
border-color: #730000 !important;
color: #730000 !important;
background: transparent !important;
}
/* ── Sign In button ──────────────────────────────────────────────────────── */
[b-ypftqrqtr0] .login-display__login-btn {
font-size: 0.6rem !important;
letter-spacing: 0.125em !important;
text-transform: uppercase !important;
border-radius: 3.325em !important;
padding: 0 1.25rem !important;
height: 2rem !important;
border-color: rgba(0, 0, 0, 0.2) !important;
color: #2c2c2c !important;
background: transparent !important;
transition: border-color 0.15s ease, color 0.15s ease !important;
}
[b-ypftqrqtr0] .login-display__login-btn:hover {
border-color: #730000 !important;
color: #730000 !important;
background: transparent !important;
}