:root {
    --bg: #100e0c;
    --surface: #1a1713;
    --surface-2: #211d18;
    --surface-3: #2a241d;
    --border: #3a3127;
    --border-light: #514331;
    --text: #eee6d8;
    --muted: #aa9e8c;
    --gold: #c8a15a;
    --gold-light: #e2c17f;
    --green: #6f9d75;
    --red: #b66058;
    --radius: 10px;
    --shadow: 0 20px 60px rgb(0 0 0 / 30%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 80% 0%, rgb(120 82 42 / 10%), transparent 35rem),
        var(--bg);
    color: var(--text);
    font: 15px/1.55 Inter, "Segoe UI", system-ui, sans-serif;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--gold-light); text-decoration: none; }
h1, h2, h3 { margin: 0; color: #f5ecdc; font-family: Cinzel, Georgia, "Times New Roman", serif; line-height: 1.2; }
h1 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
h2 { font-size: 1.15rem; }
p { color: var(--muted); }

.app-shell { display: grid; min-height: 100vh; grid-template-columns: 255px minmax(0, 1fr); }
.sidebar {
    position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; height: 100vh;
    height: 100dvh; min-height: 0; overflow: hidden; padding: 24px 18px max(18px, env(safe-area-inset-bottom)); border-right: 1px solid var(--border); background: rgb(21 18 15 / 94%);
    backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); }
.brand__sigil {
    display: grid; width: 43px; height: 48px; place-items: center; flex: 0 0 auto;
    border: 1px solid var(--gold); color: var(--gold-light); font: 700 23px Cinzel, serif;
    clip-path: polygon(50% 0, 100% 18%, 90% 82%, 50% 100%, 10% 82%, 0 18%);
    background: linear-gradient(145deg, #2c2419, #15110d);
}
.brand strong { display: block; color: var(--gold-light); font: 600 1.25rem Cinzel, serif; letter-spacing: .04em; }
.brand small { display: block; color: var(--muted); font-size: .7rem; }
.brand--center { justify-content: center; margin-bottom: 30px; }
.main-nav {
    display: grid; min-height: 0; align-content: start; flex: 1 1 auto; gap: 6px; overflow-y: auto;
    overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--border-light) transparent;
    margin: 30px -5px 0 0; padding: 0 5px 16px 0;
}
.main-nav::-webkit-scrollbar { width: 6px; }
.main-nav::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--border-light); }
.main-nav a {
    display: grid; grid-template-columns: 28px 1fr auto; align-items: center; padding: 11px 12px;
    border: 1px solid transparent; border-radius: 7px; color: var(--muted);
}
.main-nav a:hover, .main-nav a.is-active { border-color: var(--border); color: var(--text); background: var(--surface-2); }
.main-nav a.is-active { box-shadow: inset 3px 0 var(--gold); }
.main-nav a span { color: var(--gold); font-size: 1.1rem; }
.main-nav a small { font-size: .6rem; opacity: .6; }
.main-nav a.is-disabled { cursor: default; opacity: .55; }
.sidebar__footer { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.user-chip, .player-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-chip strong, .user-chip small, .player-identity strong, .player-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip small, .player-identity small { color: var(--muted); font-size: .72rem; }
.avatar { display: grid; width: 36px; height: 36px; place-items: center; flex: 0 0 auto; border: 1px solid var(--border-light); border-radius: 50%; color: var(--gold-light); background: var(--surface-3); font-family: Cinzel, serif; }
.link-button { padding: 4px; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.link-button:hover { color: var(--gold-light); }

.workspace { min-width: 0; }
.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px;
    padding: 12px clamp(20px, 4vw, 50px); border-bottom: 1px solid var(--border); background: rgb(16 14 12 / 80%); backdrop-filter: blur(12px);
}
.adventure-picker { width: min(340px, 100%); min-width: 0; }
.adventure-picker > span { display: block; color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .14em; }
.adventure-picker__control { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 8px; }
.adventure-picker__control form { width: 100%; min-width: 0; }
.adventure-picker select { width: 100%; padding: 3px 28px 3px 0; border: 0; color: var(--text); background: transparent; font: 600 1rem Cinzel, serif; }
.adventure-picker__add { display: grid; width: 30px; height: 30px; place-items: center; flex: 0 0 auto; border: 1px solid var(--border-light); border-radius: 50%; color: var(--gold-light); background: var(--surface-2); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.adventure-picker__add:hover { border-color: var(--gold); background: var(--surface-3); }
.status-dot { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .8rem; }
.status-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.content { width: min(1500px, 100%); margin: auto; padding: clamp(26px, 4vw, 52px); }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 35px; }
.page-heading p { max-width: 760px; margin: 9px 0 0; }
.eyebrow { display: block; margin-bottom: 7px; color: var(--gold); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; }
.panel { border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, rgb(32 28 23 / 92%), rgb(23 20 17 / 96%)); box-shadow: 0 15px 40px rgb(0 0 0 / 13%); }
.panel__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--border); }
.panel__header a { font-size: .8rem; }

.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 9px 17px; border: 1px solid var(--border-light); border-radius: 6px; color: var(--text); background: var(--surface-2); cursor: pointer; font-weight: 600; }
.button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button--primary { border-color: #9d793d; color: #21180c; background: linear-gradient(135deg, var(--gold-light), #b8893f); box-shadow: 0 5px 20px rgb(200 161 90 / 16%); }
.button--secondary { color: var(--gold-light); }
.button--ghost { border-color: transparent; background: transparent; }
.button--danger { border-color: #75413c; color: #efc1bc; background: rgb(132 62 55 / 17%); }
.button--large { width: 100%; min-height: 50px; }
.icon-button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--surface-2); cursor: pointer; }
.menu-button { display: none; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.stat-card span, .stat-card small { display: block; color: var(--muted); font-size: .75rem; }
.stat-card strong { display: block; margin: 4px 0; color: var(--gold-light); font: 600 2rem Cinzel, serif; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 20px; }
.player-list { padding: 8px 24px 18px; }
.player-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.player-row:last-child { border: 0; }
.player-row strong, .player-row small { display: block; }
.player-row small { color: var(--muted); font-size: .75rem; }
.quick-actions { overflow: hidden; }
.quick-actions > a, .quick-actions > button { display: grid; width: 100%; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: center; padding: 17px 22px; border: 0; border-bottom: 1px solid var(--border); text-align: left; color: var(--text); background: transparent; }
.quick-actions > a:hover { background: var(--surface-3); }
.quick-actions button { opacity: .45; }
.quick-actions span { color: var(--gold); font-size: 1.2rem; }
.quick-actions strong, .quick-actions small { display: block; }
.quick-actions small { color: var(--muted); font-size: .7rem; }
.mini-empty, .empty-state { padding: 48px 25px; text-align: center; }
.empty-state__icon { display: grid; width: 65px; height: 65px; margin: 0 auto 20px; place-items: center; border: 1px solid var(--border-light); border-radius: 50%; color: var(--gold); font: 1.7rem Cinzel, serif; }
.empty-state--small { padding: 60px 20px; }
.compact-form { width: min(520px, 100%); margin: 30px auto 0; text-align: left; }
.archive-panel { margin-top: 20px; overflow: hidden; }
.archive-list { display: grid; }
.archive-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 22px; border-top: 1px solid var(--border); }
.archive-row:first-child { border-top: 0; }
.archive-row strong, .archive-row small { display: block; }
.archive-row small { max-width: 720px; overflow: hidden; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }

label { display: grid; gap: 7px; color: #d5cbbb; font-size: .8rem; font-weight: 600; }
label small { color: var(--muted); font-weight: 400; }
input, select, textarea {
    width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: 6px;
    outline: 0; color: var(--text); background: #13110f;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(200 161 90 / 10%); }
.form-stack { display: grid; gap: 17px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
fieldset { display: grid; gap: 15px; margin: 0; padding: 18px; border: 1px solid var(--border); border-radius: 8px; }
legend { padding: 0 8px; color: var(--gold-light); font: 600 .9rem Cinzel, serif; }

.guest-body { display: grid; place-items: center; padding: 35px 18px; }
.guest-shell { width: min(720px, 100%); }
.auth-card { width: min(460px, 100%); margin: auto; padding: clamp(25px, 5vw, 42px); border: 1px solid var(--border-light); border-radius: 12px; background: linear-gradient(145deg, #211c17, #15120f); box-shadow: var(--shadow); }
.auth-card--wide { width: min(720px, 100%); }
.auth-card header { margin-bottom: 28px; text-align: center; }
.auth-card header p { margin-bottom: 0; }
.login-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.login-option { min-width: 0; padding: 4px 28px 4px 0; }
.login-option + .login-option { padding-right: 0; padding-left: 28px; border-left: 1px solid var(--border); }
.login-option h2 { margin-bottom: 8px; }
.login-option > p { min-height: 47px; margin: 0 0 20px; font-size: .82rem; }
.flash { margin-bottom: 18px; padding: 12px 15px; border: 1px solid var(--border); border-radius: 6px; }
.flash--error { border-color: #75413c; color: #efc1bc; background: rgb(132 62 55 / 17%); }
.flash--success { border-color: #426447; color: #c2e0c5; background: rgb(67 107 72 / 17%); }

.access-card { display: grid; grid-template-columns: 1fr minmax(230px, .75fr) minmax(180px, .45fr) 180px; gap: 22px; align-items: end; margin-bottom: 20px; padding: 22px; border-color: #715d38; }
.access-card h2 { margin-bottom: 5px; }
.access-card p { margin: 0; font-size: .8rem; }
.copy-field { display: flex; }
.copy-field input { border-radius: 6px 0 0 6px; }
.copy-field button { border: 1px solid var(--border-light); border-left: 0; border-radius: 0 6px 6px 0; color: var(--gold-light); background: var(--surface-3); cursor: pointer; }
.qr-access { display: grid; justify-items: center; gap: 7px; color: var(--muted); text-align: center; }
.qr-access [data-qr-code] { padding: 8px; border-radius: 6px; background: #fff; }
.qr-access img, .qr-access canvas { display: block; max-width: 100%; height: auto; }
.search-field { display: flex; width: min(280px, 100%); align-items: center; gap: 5px; padding-left: 10px; border: 1px solid var(--border); border-radius: 6px; background: #13110f; }
.search-field input { min-height: 37px; border: 0; background: transparent; }
.player-table__head, .player-table__row { display: grid; grid-template-columns: minmax(220px, 1.5fr) .65fr .65fr .6fr; gap: 15px; align-items: center; padding: 14px 24px; }
.player-table__head { color: var(--muted); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.player-table__row { border-top: 1px solid var(--border); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 100px; font-size: .68rem; }
.badge::before { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); content: ''; }
.badge--active { color: #b9d8bd; background: rgb(75 112 79 / 15%); }
.badge--active::before { background: var(--green); }
.badge--inactive { color: #d7c6a6; }
.badge--inactive::before { background: var(--gold); }
.badge--archived { opacity: .6; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.row-actions form { padding: 0; }
.row-actions .link-button { font-size: .66rem; }
.row-actions select { min-height: 35px; padding: 5px 8px; }
.player-current-access { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(280px, 1.5fr) minmax(180px, .55fr) auto; gap: 10px 14px; align-items: end; padding: 15px; border: 1px solid #51452f; border-radius: 8px; background: linear-gradient(135deg, rgb(200 161 90 / 7%), rgb(255 255 255 / 2%)); }
.player-current-access > header { display: flex; grid-column: 1 / -1; align-items: start; justify-content: space-between; gap: 15px; }
.player-current-access > header strong, .player-current-access > header small { display: block; }
.player-current-access > header strong { color: var(--gold-light); font-size: .78rem; }
.player-current-access > header small { max-width: 780px; margin-top: 3px; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.player-current-access > header > span { flex: 0 0 auto; color: var(--muted); font-size: .62rem; }
.player-current-access > label { min-width: 0; color: var(--muted); font-size: .62rem; }
.player-current-access .copy-field { margin-top: 5px; }
.player-current-access .copy-field input { min-width: 0; font-size: .72rem; }
.player-current-access .player-access-code { color: var(--gold-light); font-weight: 800; letter-spacing: .12em; }
.player-current-access > form { padding: 0; }
.player-current-access > form .button { min-height: 39px; white-space: nowrap; }
.player-current-access.is-disabled { grid-template-columns: 1fr; opacity: .68; }
.mobile-label { display: none; }

.dialog { width: min(520px, calc(100% - 30px)); padding: 0; border: 1px solid var(--border-light); border-radius: 10px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.dialog::backdrop { background: rgb(0 0 0 / 65%); backdrop-filter: blur(4px); }
.dialog form { padding: 25px; }
.dialog__header, .dialog__actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.dialog__actions { justify-content: flex-end; margin-top: 5px; }
.code-input { text-transform: uppercase; letter-spacing: .2em; font-size: 1.1rem; }

.player-body { padding-bottom: 80px; }
.player-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px clamp(20px, 5vw, 60px); border-bottom: 1px solid var(--border); background: var(--surface); }
.player-topbar__brand-group { display: flex; min-width: 0; align-items: center; gap: 9px; }
.player-topbar__icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 7px; color: var(--ink); background: rgb(255 255 255 / 3.5%); cursor: pointer; text-decoration: none; font: inherit; }
.player-topbar__icon:hover, .player-topbar__icon:focus-visible, .player-topbar__icon.is-active { border-color: var(--gold); color: var(--gold-light); background: rgb(200 161 90 / 9%); }
.player-topbar__icon span { line-height: 1; }
.player-topbar__actions { display: flex; align-items: center; gap: 16px; }
.player-topbar__link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 7px; color: var(--ink); text-decoration: none; background: rgb(255 255 255 / 3.5%); }
.player-topbar__link:hover, .player-topbar__link:focus-visible { border-color: var(--gold); color: var(--gold-light); }
.player-content { width: min(1100px, 100%); margin: auto; padding: clamp(30px, 5vw, 60px) clamp(18px, 4vw, 40px); }
.player-module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.feature-card { padding: 25px; }
.feature-card > span { color: var(--gold); font-size: 1.5rem; }
.feature-card h2 { margin-top: 14px; }
.feature-card small { color: var(--muted); }
.mobile-nav { display: none; }
.sidebar-backdrop { display: none; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.media-card, .scene-card { overflow: hidden; }
.media-preview { display: grid; height: 132px; place-items: center; overflow: hidden; border-bottom: 1px solid var(--border); color: var(--gold); background: #100e0c; font: 600 1.15rem Cinzel, serif; }
.media-preview img { width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.media-card__body { padding: 13px 14px; }
.media-card__body h2 { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.media-card__body p { display: -webkit-box; min-height: 0; margin: 5px 0; overflow: hidden; font-size: .73rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.media-card__body small { color: var(--muted); }
.media-card__actions { display: flex; justify-content: space-between; gap: 6px; padding: 0 14px 13px; }
.media-card__actions .button { min-height: 34px; padding: 5px 10px; font-size: .72rem; }
.media-card audio { width: calc(100% - 36px); height: 38px; margin: 12px 18px 0; }
.material-search { margin: -15px 0 22px auto; }
.grant-summary { margin-top: 8px; color: var(--gold-light); font-size: .66rem; }
.check-row { display: flex; align-items: center; gap: 9px; }
.check-row input { width: auto; min-height: auto; accent-color: var(--gold); }
.check-list { display: grid; gap: 9px; max-height: 220px; overflow: auto; padding: 14px; border: 1px solid var(--border); border-radius: 6px; }
.message-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, .48fr); gap: 14px; }
.chat-panel { min-height: 350px; overflow: hidden; }
.message-stream { display: flex; max-height: 520px; flex-direction: column; gap: 8px; overflow: auto; padding: 15px; }
.message-bubble { max-width: 76%; align-self: flex-start; padding: 9px 12px; border: 1px solid var(--border); border-radius: 4px 10px 10px 10px; background: var(--surface-3); }
.message-bubble.is-own { align-self: flex-end; border-color: #6a5532; border-radius: 12px 4px 12px 12px; background: #30271b; }
.message-bubble.is-important { box-shadow: inset 3px 0 var(--gold); }
.message-bubble header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--gold-light); font-size: .72rem; }
.message-bubble header span { color: var(--muted); }
.message-bubble p { margin: 5px 0 0; color: var(--text); }
.message-reply { margin-top: 7px; padding: 2px 0; border: 0; color: var(--gold-light); background: transparent; cursor: pointer; font-size: .7rem; }
.compose-panel { align-self: start; padding: 16px; }
.compose-panel h2 { margin-bottom: 13px; font-size: 1rem; }
.compose-panel .form-stack { gap: 11px; }
.compose-panel input, .compose-panel select { min-height: 36px; padding: 7px 9px; }
.compose-panel textarea { min-height: 82px; padding: 8px 9px; }
.active-scene { margin-bottom: 18px; padding: 16px; border-color: #80683c; text-align: center; }
.active-scene img { display: block; width: min(720px, 100%); max-height: 320px; margin: 10px auto 14px; border-radius: 6px; object-fit: contain; }
.scene-card img { display: block; width: 100%; height: 135px; padding: 6px; object-fit: contain; background: #100e0c; }
.scene-card > div { padding: 13px 14px; }
.scene-card > div h2 { font-size: 1rem; }
.scene-card > div p { display: -webkit-box; margin: 5px 0; overflow: hidden; font-size: .75rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.scene-card form { padding: 0 14px 13px; }
.scene-card form .button { width: 100%; min-height: 34px; padding: 5px 9px; font-size: .72rem; }
.scene-card.is-active { border-color: var(--gold); box-shadow: 0 0 25px rgb(200 161 90 / 12%); }
.scene-card__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scene-card .scene-audience { display: block; margin-top: 7px; color: var(--gold-light); }
.scene-card > .scene-card__actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding-top: 0; }
.scene-card__actions > .button { width: 100%; min-height: 34px; padding: 5px 9px; font-size: .72rem; }
.scene-card__actions form { padding: 0; }
.active-scenes { margin-bottom: 18px; overflow: hidden; border-color: #80683c; }
.active-scenes__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--border); }
.active-scenes__list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--surface); }
.active-scenes__list strong, .active-scenes__list small { display: block; }
.active-scenes__list small { color: var(--muted); font-size: .7rem; }
.player-scenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 35px; }
.player-scene { margin-bottom: 35px; overflow: hidden; border-color: var(--gold); line-height: 0; background: #090807; }
.player-scenes .player-scene { margin-bottom: 0; }
.player-scene img { width: 100%; max-height: 65vh; object-fit: contain; background: #090807; }
.section-tabs { display: flex; gap: 5px; margin-bottom: 18px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.section-tabs button { padding: 11px 17px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; cursor: pointer; white-space: nowrap; }
.section-tabs button.is-active { border-color: var(--gold); color: var(--gold-light); }
.portal-section[hidden] { display: none; }
.group-panel { overflow: hidden; }
.group-member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; padding: 18px; }
.group-member-card { display: grid; min-width: 0; grid-template-columns: 76px minmax(0, 1fr); gap: 13px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.group-member-card.is-self { border-color: #715d38; }
.group-member-card.is-inactive { opacity: .65; }
.group-member-card__image { display: grid; width: 76px; height: 88px; place-items: center; overflow: hidden; border: 1px solid var(--border-light); border-radius: 8px; color: var(--gold-light); background: #100e0c; font: 600 1.6rem Cinzel, serif; }
.group-member-card__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.group-member-card__body { min-width: 0; }
.group-member-card__body .eyebrow { margin-bottom: 3px; font-size: .58rem; }
.group-member-card__body h3 { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.group-member-card__body p { margin: 5px 0 0; overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.group-member-card > .button, .group-member-card > .badge { grid-column: 1 / -1; width: 100%; }
.inventory-list { padding: 8px 22px 20px; }
.inventory-row { display: grid; grid-template-columns: 1fr .6fr auto; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.inventory-row span { color: var(--muted); }
.inventory-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .62fr); gap: 18px; align-items: start; }
.inventory-panel { min-width: 0; overflow: hidden; }
.inventory-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(130px, .42fr) minmax(135px, .42fr) auto; gap: 10px; align-items: end; padding: 14px 18px; border-bottom: 1px solid var(--border); background: rgb(15 13 11 / 24%); }
.inventory-toolbar > label:not(.search-field) > span { display: block; margin: 0 0 5px; color: var(--muted); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.inventory-toolbar select { min-height: 42px; }
.inventory-toolbar > small { align-self: center; padding-top: 17px; color: var(--muted); white-space: nowrap; }
.inventory-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; padding: 18px; }
.inventory-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); transition: border-color .15s ease, transform .15s ease; }
.inventory-card:hover { transform: translateY(-2px); border-color: var(--gold); }
.inventory-card__open { display: flex; width: 100%; height: 100%; min-width: 0; flex-direction: column; padding: 0; border: 0; text-align: left; color: var(--text); background: transparent; cursor: pointer; }
.inventory-card__preview { position: relative; display: grid; width: 100%; height: 125px; place-items: center; overflow: hidden; border-bottom: 1px solid var(--border); color: var(--gold); background: #100e0c; font: 600 2.2rem Cinzel, serif; }
.inventory-card__preview img { width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.inventory-card__quantity { position: absolute; right: 8px; bottom: 8px; min-width: 34px; padding: 4px 7px; border: 1px solid #80683c; border-radius: 20px; color: var(--gold-light); background: rgb(16 14 12 / 90%); font: 700 .68rem Inter, sans-serif; text-align: center; }
.inventory-card__body { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; padding: 12px 13px 13px; }
.inventory-card__body strong { display: block; width: 100%; overflow: hidden; font: 600 .96rem Cinzel, serif; text-overflow: ellipsis; white-space: nowrap; }
.inventory-card__body small { display: -webkit-box; width: 100%; min-height: 34px; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: .68rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.inventory-card__body em { margin-top: auto; padding-top: 8px; color: #b9d8bd; font-size: .65rem; font-style: normal; font-weight: 700; }
.inventory-empty { grid-column: 1 / -1; }
.inventory-filter-empty { grid-column: 1 / -1; }
.inventory-add-panel { position: sticky; top: 20px; overflow: hidden; }
.inventory-add-panel__header { padding: 20px 20px 4px; }
.inventory-add-panel__header p { margin: 7px 0 0; font-size: .76rem; }
.inventory-add-form { padding: 16px 20px 20px; }
.inventory-material-search { width: 100%; }
.inventory-material-picker { display: grid; height: min(420px, 48vh); min-height: 230px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(145px, max-content); align-content: start; gap: 8px; overflow-y: auto; overscroll-behavior: contain; padding: 2px 7px 2px 2px; scrollbar-gutter: stable; }
.inventory-material-option { position: relative; display: grid; min-width: 0; min-height: 145px; grid-template-rows: minmax(88px, 1fr) auto; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: #171410; cursor: pointer; }
.inventory-material-option:hover, .inventory-material-option:has(input:checked), .inventory-material-option:focus-within { border-color: var(--gold); background: #30271b; box-shadow: 0 0 0 2px rgb(200 161 90 / 9%); }
.inventory-material-option input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; pointer-events: none; }
.inventory-material-option__preview { display: grid; min-height: 88px; place-items: center; overflow: hidden; border-bottom: 1px solid var(--border); color: var(--gold); background: #100e0c; font: 600 1.45rem Cinzel, serif; }
.inventory-material-option__preview img { width: 100%; height: 100%; padding: 3px; object-fit: contain; }
.inventory-material-option__body { min-width: 0; padding: 8px 9px; }
.inventory-material-option__body strong, .inventory-material-option__body small { display: block; overflow: hidden; text-overflow: ellipsis; }
.inventory-material-option__body strong { min-height: 2.1em; font-size: .72rem; line-height: 1.05; white-space: normal; }
.inventory-material-option__body small { color: var(--muted); font-size: .58rem; }
.inventory-material-option:has(input:checked)::after { position: absolute; top: 6px; right: 6px; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #21180c; background: var(--gold-light); content: '✓'; font-size: .72rem; font-weight: 900; }
.inventory-material-no-results { grid-column: 1 / -1; padding: 20px 8px; text-align: center; }
.inventory-selection-status { margin: -4px 0 0; color: var(--muted); font-size: .68rem; }
.inventory-selection-status.has-selection { color: var(--gold-light); }
.inventory-add-form .button:disabled { cursor: default; opacity: .42; transform: none; filter: none; }
.inventory-add-confirm-dialog { width: min(430px, calc(100% - 30px)); padding: 0; }
.inventory-add-confirm { display: grid; gap: 15px; padding: 22px; }
.inventory-add-confirm__preview { display: grid; width: min(230px, 100%); height: 190px; place-items: center; justify-self: center; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; color: var(--gold); background: #100e0c; font: 600 2.5rem Cinzel, serif; }
.inventory-add-confirm__preview img { width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.inventory-add-confirm > p { margin: 0; color: var(--text); text-align: center; }
.inventory-add-confirm > label { width: min(150px, 100%); justify-self: center; text-align: center; }
.inventory-detail-dialog { width: min(820px, calc(100% - 30px)); max-height: calc(100vh - 30px); }
.inventory-detail-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
.inventory-detail-preview { display: grid; height: 220px; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; color: var(--gold); background: #100e0c; font: 600 3rem Cinzel, serif; }
.inventory-detail-preview img { width: 100%; height: 100%; object-fit: contain; }
.inventory-detail-content { min-width: 0; }
.inventory-detail-content > p { margin-top: 0; }
.inventory-material-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 14px 0 0; }
.inventory-material-facts div { padding: 8px 9px; border: 1px solid var(--border); border-radius: 6px; background: rgb(15 13 11 / 32%); }
.inventory-material-facts dt { color: var(--gold-light); font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.inventory-material-facts dd { margin: 2px 0 0; font-size: .68rem; white-space: normal; }
.inventory-personal-fields { padding-top: 16px; border-top: 1px solid var(--border); }
.inventory-personal-fields h3 { margin-bottom: 11px; color: var(--gold-light); font-size: .85rem; }
.inventory-personal-fields > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 11px; align-items: end; }
.inventory-personal-fields .inventory-personal-note { grid-row: span 2; }
.inventory-personal-fields .check-row { align-self: center; }
.inventory-assignment-dialog { width: min(700px, calc(100% - 30px)); max-height: calc(100vh - 30px); }
.inventory-assignment-dialog--materials { width: min(920px, calc(100% - 30px)); }
.inventory-assignment-dialog--materials > form { max-height: calc(100vh - 30px); grid-template-rows: auto auto minmax(230px, 1fr) auto; overflow: hidden; }
.assignment-player-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; max-height: 285px; overflow-y: auto; }
.assignment-player-option { display: grid; min-width: 0; grid-template-columns: auto 38px minmax(0, 1fr); gap: 9px; align-items: center; padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); cursor: pointer; }
.assignment-player-option:hover, .assignment-player-option:has(input:checked) { border-color: var(--gold); background: #30271b; }
.assignment-player-option input { width: auto; min-height: auto; accent-color: var(--gold); }
.assignment-player-option .avatar { width: 38px; height: 38px; }
.assignment-player-option > span:last-child { min-width: 0; }
.assignment-player-option strong, .assignment-player-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-player-option small { color: var(--muted); font-size: .64rem; }
.assignment-details-grid { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 11px; align-items: end; }
.assignment-material-search { width: 100%; }
.assignment-material-picker { height: min(510px, 58vh); min-height: 230px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.character-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 25px; }
.character-detail .character-section-heading h3 { margin: 0; }
.character-section-heading .button { min-height: 34px; padding: 5px 10px; font-size: .7rem; }
.link-button--danger { color: #d79589; }
.notes-grid { display: grid; gap: 15px; }
.note-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.note-card p.note-card__content { white-space: pre-wrap; }
.note-card { padding: 20px; }
.note-card p { color: var(--text); white-space: normal; }
.popup-content { padding: 30px; text-align: center; }
.popup-content p { color: var(--text); font-size: 1.05rem; }
.rules-toc { display: flex; gap: 7px; margin-bottom: 18px; padding: 12px; overflow-x: auto; }
.rules-toc a { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: .7rem; }
.rules-toc a:hover { border-color: var(--gold); color: var(--gold-light); background: var(--surface-2); }
.rules-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.rules-pages { display: flex; gap: 8px; margin: 0 0 18px; padding: 7px; overflow-x: auto; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.rules-pages a { padding: 9px 15px; border-radius: 6px; color: var(--muted); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.rules-pages a:hover, .rules-pages a.is-active { color: #1b150c; background: var(--gold-light); }
.character-power-panel { margin-top: 18px; overflow: hidden; }
.character-power-overview { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(130px, .45fr)); gap: 1px; margin-bottom: 16px; background: var(--border); }
.character-power-overview > div { min-width: 0; padding: 12px 20px; background: linear-gradient(135deg, rgb(111 76 145 / 13%), var(--surface)); }
.character-power-overview span, .character-spell-rolls span { display: block; color: var(--muted); font-size: .57rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.character-power-overview strong, .character-spell-rolls strong { display: block; margin-top: 3px; color: var(--gold-light); font-size: .82rem; }
.character-power-group { padding: 0 20px 18px; }
.character-power-group > h3 { margin: 4px 0 11px; color: var(--gold-light); font-size: .82rem; }
.character-power-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.character-power-card { display: grid; min-width: 0; grid-template-rows: 92px auto auto; padding: 0 0 10px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-align: left; background: var(--surface-2); cursor: pointer; }
.character-power-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.character-power-card > span { display: grid; place-items: center; overflow: hidden; color: var(--gold); background: #100e0c; font: 600 1.8rem Cinzel, serif; }
.character-power-card > span img { width: 100%; height: 100%; object-fit: cover; }
.character-power-card > strong, .character-power-card > small, .character-power-card > form { margin: 8px 9px 0; overflow: hidden; text-overflow: ellipsis; }
.character-power-card > strong { font-size: .72rem; white-space: nowrap; }
.character-power-card > small { margin-top: 2px; color: var(--muted); font-size: .58rem; white-space: nowrap; }
.character-power-card--static { cursor: default; }
.character-power-card--static > form { padding: 0; }
.character-power-dialog { width: min(760px, calc(100% - 30px)); }
.character-power-detail { padding: 22px; }
.character-power-detail__body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.character-power-detail__body > img { width: 190px; height: 190px; object-fit: cover; border: 1px solid var(--border); border-radius: 8px; }
.character-power-detail__body p { margin-top: 0; }
.character-spell-rolls { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(100px, .5fr)); gap: 7px; margin-bottom: 14px; }
.character-spell-rolls > div { min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; background: rgb(111 76 145 / 10%); }
.character-power-admin { margin-top: 18px; }
.character-power-admin__players { display: grid; gap: 18px; padding: 20px; }
.character-power-admin__player { padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.character-power-admin__player:last-child { padding-bottom: 0; border-bottom: 0; }
.character-power-admin__player .character-section-heading { padding: 0 0 12px; }
.character-power-admin__player .character-section-heading small { display: block; margin-top: 3px; color: var(--muted); }
.character-power-grid--gm { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.power-assignment-dialog { width: min(900px, calc(100% - 30px)); }
.power-assignment-dialog > form { max-height: calc(100vh - 30px); overflow: hidden; }
.power-assignment-grid { display: grid; min-height: 230px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(145px, max-content); align-content: start; gap: 9px; overflow-y: auto; padding: 2px 7px 2px 2px; scrollbar-gutter: stable; }
.rules-section { padding: clamp(20px, 3vw, 30px); scroll-margin-top: 85px; }
.rules-section:nth-child(2), .rules-section:nth-child(5) { grid-column: 1 / -1; }
.rules-section h2 { margin-bottom: 14px; }
.rules-section h3 { margin: 18px 0 8px; color: var(--gold-light); font-size: .9rem; }
.rules-section p { margin: 10px 0 0; color: #c8bdad; font-size: .82rem; }
.rules-section ul { margin: 12px 0 0; padding-left: 20px; color: #c8bdad; font-size: .8rem; }
.rules-section li + li { margin-top: 5px; }
.rule-formula { margin: 10px 0; padding: 11px 13px; border: 1px solid #715d38; border-radius: 7px; color: var(--gold-light); background: rgb(200 161 90 / 7%); font: 600 .8rem Cinzel, serif; }
.rules-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 16px; }
.rules-scale span { padding: 9px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); text-align: center; font-size: .64rem; }
.rules-scale b { display: block; color: var(--gold-light); font: 600 1rem Cinzel, serif; }
.table-scroll { overflow-x: auto; }
.rules-table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: .7rem; }
.rules-table th, .rules-table td { padding: 8px 9px; border: 1px solid var(--border); text-align: center; }
.rules-table th { color: var(--gold-light); background: var(--surface-2); }
.rules-attribute-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 17px 0 0; }
.rules-attribute-grid div, .rules-damage-grid div { padding: 10px 11px; border: 1px solid var(--border); border-radius: 6px; background: rgb(15 13 11 / 28%); }
.rules-attribute-grid dt { color: var(--gold-light); font-size: .72rem; font-weight: 700; }
.rules-attribute-grid dd { margin: 2px 0 0; color: var(--muted); font-size: .66rem; }
.rules-formula-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.rules-formula-grid > div { min-width: 0; }
.rules-damage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.rules-damage-grid b, .rules-damage-grid span { display: block; }
.rules-damage-grid b { color: var(--gold-light); font-size: .74rem; }
.rules-damage-grid span { margin-top: 3px; color: var(--muted); font-size: .64rem; }
.rules-section--pending { border-style: dashed; opacity: .78; }
.character-sheet { overflow: hidden; }
.character-sheet > .panel__header { margin-bottom: 0; }
.character-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 24px; }
.character-fields .field-wide { grid-column: 1 / -1; }
.character-section { grid-column: 1 / -1; margin-top: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--border); color: var(--gold-light); font-size: 1rem; }
.character-portrait { display: flex; align-items: center; gap: 15px; padding: 15px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.character-portrait img, .portrait-placeholder { width: 90px; height: 110px; object-fit: contain; border: 1px solid var(--border-light); border-radius: 6px; background: #100e0c; }
.portrait-placeholder { display: grid; place-items: center; color: var(--gold); font-size: 2rem; }
.character-portrait div { flex: 1; }
.character-portrait strong, .character-portrait small { display: block; }
.character-portrait small { color: var(--muted); }
.avatar--image { object-fit: contain; background: #100e0c; }
.inventory-name { padding: 0; border: 0; text-align: left; color: var(--text); background: transparent; cursor: pointer; }
.inventory-name strong, .inventory-name small { display: block; }
.inventory-name small { color: var(--muted); }
.dialog .danger-form { padding: 0 25px 20px; text-align: right; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.character-detail { padding: 25px; }
.character-detail h3 { margin: 25px 0 12px; color: var(--gold-light); font-size: .9rem; }
.character-detail dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--border); }
.character-detail dl div { padding: 10px 12px; background: var(--surface); }
.character-detail dl h4 { display: flex; grid-column: 1 / -1; align-items: center; gap: 7px; margin: 0; padding: 10px 12px; color: var(--gold-light); background: var(--surface-3); }
.character-detail dl h4 span { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--border-light); border-radius: 50%; color: var(--gold); font: 700 .65rem Inter, sans-serif; }
.character-detail dt { color: var(--muted); font-size: .68rem; }
.character-detail dd { margin: 3px 0 0; }
.gm-character-images { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.gm-character-images > div { min-width: 0; text-align: center; }
.gm-character-images > div > span:first-child { display: block; margin-bottom: 5px; color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.gm-character-images img, .gm-character-images .portrait-placeholder { display: block; width: 100%; height: 145px; object-fit: contain; border: 1px solid var(--border); border-radius: 7px; background: #100e0c; }
.character-summary { overflow: hidden; }
.character-summary__body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 18px; }
.character-summary__images { display: grid; align-content: start; gap: 10px; }
.character-summary__portrait img, .character-summary__portrait .portrait-placeholder { width: 100%; height: 165px; object-fit: contain; border: 1px solid var(--border); border-radius: 7px; background: #100e0c; }
.character-summary__images .character-summary__portrait img, .character-summary__images .character-summary__portrait .portrait-placeholder { height: 120px; }
.character-summary__portrait small { display: block; margin-top: 3px; color: var(--muted); text-align: center; font-size: .65rem; }
.character-summary__sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.character-summary__section { padding: 12px; border: 1px solid var(--border); border-radius: 7px; background: rgb(15 13 11 / 35%); }
.character-summary__section--attributes { grid-column: 1 / -1; }
.character-summary__section h3 { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; color: var(--gold-light); font-size: .83rem; }
.character-summary__section h3 > span { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--gold); background: var(--surface-2); font: 700 .68rem Inter, sans-serif; }
.character-name-editor { display: grid; grid-template-columns: minmax(170px, 1fr) 34px; max-width: min(520px, 70vw); margin-top: 3px; }
.character-name-editor input { min-height: 38px; padding: 2px 8px 2px 0; border-color: transparent; color: #f5ecdc; background: transparent; font: 600 1.15rem Cinzel, Georgia, serif; }
.character-name-editor.is-editing input { padding-left: 8px; border-color: var(--gold); background: #13110f; }
.character-name-editor > small { grid-column: 1 / -1; min-height: 14px; color: var(--green); font-size: .58rem; }
.character-name-editor.has-error > small { color: #e09b8f; }
.character-autosave-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .68rem; }
.character-autosave-hint b { color: var(--green); }
.character-combat { margin-top: 16px; overflow: hidden; }
.character-combat--compact { margin-top: 22px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: rgb(15 13 11 / 45%); }
.character-combat__header { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.character-combat--compact .character-combat__header { padding: 0 0 13px; }
.character-combat__header h2 { margin: 2px 0 0; font-size: 1.15rem; }
.character-combat__header > small { max-width: 330px; color: var(--muted); text-align: right; font-size: .66rem; }
.character-combat__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.character-combat__stats article { position: relative; min-width: 0; padding: 13px 15px 13px 37px; background: var(--surface); }
.character-combat__stats article > i { position: absolute; top: 14px; left: 14px; color: var(--gold); font-size: .82rem; font-style: normal; }
.character-combat__stats span, .character-attack span { display: block; color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.character-combat__stats strong { display: block; margin-top: 4px; color: var(--gold-light); font-size: 1rem; white-space: nowrap; }
.character-combat__armor, .character-combat__weapons { padding: 17px 20px; }
.character-combat__armor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr); gap: 20px; border-bottom: 1px solid var(--border); }
.character-combat__armor h3, .character-combat__weapons h3 { margin: 0 0 10px; color: var(--gold-light); font-size: .82rem; }
.character-combat__armor-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.character-combat__armor-values span { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); background: var(--surface-2); font-size: .67rem; }
.character-combat__armor-values b { color: var(--text); font-size: 1rem; }
.character-combat__armor details { align-self: start; font-size: .7rem; }
.character-combat__armor summary { color: var(--gold-light); cursor: pointer; }
.character-combat__armor ul { display: grid; gap: 5px; margin: 9px 0 0; padding-left: 17px; }
.character-combat__armor li small { color: var(--muted); }
.character-attack-list { display: grid; gap: 8px; }
.character-attack { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(90px, .55fr) minmax(150px, 1fr) minmax(80px, .5fr); gap: 12px; align-items: center; padding: 11px 13px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.character-attack--interactive { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.character-attack--interactive:hover, .character-attack--interactive:focus-visible { border-color: var(--gold); background: rgb(200 161 90 / 8%); }
.character-attack > div { min-width: 0; }
.character-attack > div:first-child strong, .character-attack > div:first-child small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-attack small { color: var(--muted); font-size: .62rem; }
.character-attack b { display: block; margin-top: 3px; font-size: .76rem; }
.character-combat__warning { grid-column: 1 / -1; margin: 5px 0 0; color: #e0a395; font-size: .67rem; }
.character-combat__spell { display: grid; grid-template-columns: minmax(210px, 1fr) repeat(2, minmax(130px, .4fr)); gap: 10px; align-items: stretch; padding: 15px 20px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, rgb(111 76 145 / 12%), transparent); }
.character-combat__spell > div:first-child { align-self: center; }
.character-combat__spell h3 { margin: 2px 0; color: var(--gold-light); font-size: .86rem; }
.character-combat__spell small { color: var(--muted); font-size: .65rem; }
.character-combat__spell article { padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.character-combat__spell article span { display: block; color: var(--muted); font-size: .58rem; text-transform: uppercase; }
.character-combat__spell article strong { display: block; margin-top: 3px; color: var(--gold-light); font-size: .88rem; }
.rule-info-button { display: inline-grid !important; width: 18px; height: 18px; min-height: 18px; margin-left: 4px; padding: 0; place-items: center; border: 1px solid var(--border-light); border-radius: 50%; color: var(--gold-light); background: rgb(200 161 90 / 8%); text-decoration: none; vertical-align: middle; cursor: pointer; font: 800 .58rem/1 Inter, sans-serif; text-transform: none; letter-spacing: 0; }
.rule-info-button:hover, .rule-info-button:focus-visible { border-color: var(--gold); color: #1b150e; background: var(--gold-light); outline: none; }
.character-fields input[readonly] { color: var(--gold-light); background: var(--surface-3); cursor: default; }
.character-fields label > small { display: block; margin-top: 5px; color: var(--muted); font-size: .64rem; }
.character-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.character-summary__section--attributes .character-values { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.character-inline-field { min-width: 0; }
.character-inline-field.is-wide { grid-column: 1 / -1; }
.character-inline-field > span { display: block; margin-bottom: 3px; color: var(--muted); font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.character-inline-field > div { display: grid; grid-template-columns: minmax(0, 1fr) 30px; }
.character-inline-field input, .character-inline-field textarea { min-height: 34px; padding: 6px 8px; border-color: transparent; background: rgb(19 17 15 / 38%); }
.character-inline-field textarea { resize: vertical; }
.character-inline-field input[readonly], .character-inline-field textarea[readonly] { cursor: default; }
.character-inline-field.is-editing input, .character-inline-field.is-editing textarea { border-color: var(--gold); background: #13110f; }
.character-inline-field .edit-field-button { width: 30px; }
.character-inline-field.is-attribute input { color: var(--gold-light); text-align: center; font-size: 1.05rem; font-weight: 700; }
.character-inline-field.is-computed > div { grid-template-columns: 1fr; }
.character-inline-field > small { display: block; min-height: 13px; margin-top: 1px; color: var(--green); font-size: .54rem; }
.character-inline-field.is-computed > small { color: var(--muted); }
.character-inline-field.has-error > small { color: #e09b8f; }
.character-media-panel { margin-top: 18px; overflow: hidden; }
.character-primary-images { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; border-bottom: 1px solid var(--border); }
.character-image-editor { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.character-image-editor [data-character-image] img, .character-image-editor .portrait-placeholder { display: block; width: 82px; height: 82px; object-fit: contain; border: 1px solid var(--border-light); border-radius: 7px; background: #100e0c; }
.character-image-editor strong, .character-image-editor small { display: block; }
.character-image-editor small { color: var(--muted); font-size: .72rem; }
.character-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 18px; }
.character-portfolio-grid > .mini-empty { grid-column: 1 / -1; padding: 25px; }
.portfolio-image { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.portfolio-image > a { display: grid; height: 130px; place-items: center; background: #100e0c; }
.portfolio-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.portfolio-image > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; }
.portfolio-image strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-image form { flex: 0 0 auto; }
.character-portfolio-grid--gm { padding: 0; }
.character-portfolio-grid--gm .portfolio-image { display: grid; grid-template-rows: 110px auto; color: var(--text); }
.character-portfolio-grid--gm .portfolio-image img { height: 110px; }
.character-portfolio-grid--gm .portfolio-image strong { padding: 8px 10px; }
.character-portfolio-grid--gm > p { grid-column: 1 / -1; }
.live-toast { position: fixed; right: 22px; bottom: 22px; z-index: 100; display: grid; width: min(390px, calc(100% - 30px)); grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--gold); border-radius: 9px; background: #211d18; box-shadow: var(--shadow); }
.live-toast strong, .live-toast span { display: block; }
.live-toast span { max-width: 250px; overflow: hidden; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.live-toast button { border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 1.2rem; }
.player-body .live-toast { grid-template-columns: 1fr auto; }

.material-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) 190px auto; gap: 14px; align-items: end; margin: -12px 0 22px; padding: 14px; }
.material-toolbar .search-field { width: 100%; }
.material-toolbar > label:not(.search-field) { gap: 4px; color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .07em; }
.material-toolbar select { min-height: 39px; padding: 7px 9px; }
.material-toolbar > span { align-self: center; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.material-card { display: flex; min-width: 0; flex-direction: column; }
.material-card__open, .material-card__body { width: 100%; border: 0; color: inherit; cursor: pointer; }
.material-card__body { flex: 1; text-align: left; background: transparent; }
.material-card__body:hover h2, .material-card__body:focus-visible h2 { color: var(--gold-light); }
.material-card .media-card__actions { justify-content: flex-end; }
.material-type-icon { color: var(--gold); font-size: 2.5rem; }
.material-type-badge { display: inline-flex; margin-bottom: 7px; padding: 3px 7px; border: 1px solid var(--border); border-radius: 30px; color: var(--gold-light); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; }
.material-tags { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-detail-dialog { width: min(1050px, calc(100% - 30px)); max-height: calc(100vh - 30px); }
.material-detail-dialog form { padding: 0; }
.material-detail { padding: 24px; }
.material-detail > .dialog__header { margin-bottom: 20px; }
.material-detail__layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
.material-detail__aside { display: flex; align-self: start; flex-direction: column; gap: 9px; position: sticky; top: 0; }
.material-detail__preview { display: grid; height: 220px; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; color: var(--gold); background: #100e0c; font: 600 3rem Cinzel, serif; }
.material-detail__preview img { width: 100%; height: 100%; object-fit: contain; }
.material-detail__aside .button { width: 100%; text-align: center; }
.material-detail__content { display: grid; min-width: 0; gap: 18px; }
.material-section { padding: 17px; border: 1px solid var(--border); border-radius: 8px; background: rgb(15 13 11 / 32%); }
.material-section > h3 { margin-bottom: 13px; color: var(--gold-light); font-size: .9rem; }
.material-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.material-fields--attributes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.editable-field { min-width: 0; }
.editable-field.is-wide { grid-column: 1 / -1; }
.editable-field > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.editable-field > div { display: grid; grid-template-columns: minmax(0, 1fr) 34px; }
.editable-field input, .editable-field textarea, .editable-field select { width: 100%; min-height: 38px; border-radius: 6px 0 0 6px; background: rgb(19 17 15 / 55%); }
.editable-field textarea { resize: vertical; }
.editable-field input[readonly], .editable-field textarea[readonly], .editable-field select:disabled { border-color: transparent; color: var(--text); opacity: 1; cursor: default; }
.editable-field.is-editing input, .editable-field.is-editing textarea, .editable-field.is-editing select { border-color: var(--gold); background: #13110f; }
.edit-field-button { width: 34px; border: 1px solid transparent; border-left-color: var(--border); border-radius: 0 6px 6px 0; color: var(--muted); background: var(--surface-3); cursor: pointer; }
.edit-field-button:hover, .edit-field-button:focus-visible, .editable-field.is-editing .edit-field-button { color: var(--gold-light); border-color: var(--gold); }
.editable-field > small { display: block; min-height: 15px; margin-top: 2px; color: var(--green); font-size: .58rem; }
.editable-field.has-error > small { color: #e09b8f; }
.material-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.material-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.material-link > button, .material-link > a { min-width: 0; padding: 10px; border: 0; text-align: left; color: var(--text); background: transparent; cursor: pointer; }
.material-link > button span, .material-link > button strong, .material-link > button small, .material-link > a span, .material-link > a strong, .material-link > a small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-link > button span, .material-link > a span { color: var(--gold-light); font-size: .58rem; text-transform: uppercase; }
.material-link > button small, .material-link > a small { color: var(--muted); font-size: .65rem; }
.material-link > form { display: grid; padding: 5px; place-items: center; }
.material-link-form { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) auto; gap: 8px; align-items: end; margin-top: 12px; }
.material-link-form .button { min-height: 40px; }
.material-danger-zone { padding-top: 5px; text-align: right; }
.material-danger-zone .link-button { color: #d79589; }
.scene-dialog-preview { width: 100%; max-height: 240px; object-fit: contain; border: 1px solid var(--border); border-radius: 7px; background: #100e0c; }
.scene-history-section + .scene-history-section { margin-top: 32px; padding-top: 27px; border-top: 1px solid var(--border); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.section-heading h2 { font-size: 1.15rem; }
.scene-card__actions:has(> .button:only-child) { grid-template-columns: 1fr; }
.form-hint { color: var(--muted); font-size: .7rem; }
.player-material-details { display: grid; gap: 5px; max-height: 170px; margin: 10px 0; overflow: auto; }
.player-material-details div { padding-top: 5px; border-top: 1px solid var(--border); }
.player-material-details dt { color: var(--muted); font-size: .58rem; text-transform: uppercase; }
.player-material-details dd { margin: 2px 0 0; font-size: .7rem; white-space: pre-wrap; }

.board-layout { display: grid; gap: 22px; align-items: start; }
.board-sidebar { overflow: hidden; }
.board-sidebar__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.board-sidebar__header h2 { font-size: 1rem; }
.board-sidebar__header .eyebrow { margin-bottom: 4px; }
.board-list { display: flex; gap: 9px; overflow-x: auto; padding: 11px 14px 14px; }
.board-list__item { display: flex; min-width: 205px; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: rgb(15 13 11 / 30%); }
.board-list__item:hover { background: var(--surface-2); }
.board-list__item.is-active { border-color: #80683c; background: #30271b; box-shadow: inset 3px 0 var(--gold); }
.board-list__item span { min-width: 0; }
.board-list__item strong, .board-list__item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list__item small { color: var(--muted); font-size: .66rem; }
.board-list__item b { color: var(--gold); font-size: 1.2rem; }
.board-workspace { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: rgb(15 13 11 / 22%); }
.board-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 20px 22px; }
.board-heading > div:first-child { min-width: 0; }
.board-heading h2 { font-size: 1.35rem; }
.board-heading p { max-width: 750px; margin: 6px 0 0; }
.board-empty { padding: 65px 25px; }
.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; padding: 11px 13px; }
.board-toolbar .search-field { width: min(430px, 100%); }
.board-toolbar > span { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.board-card { position: relative; min-width: 0; }
.board-card .media-preview { height: 112px; }
.board-card .media-card__body { padding: 10px 12px; }
.board-card .media-card__body h2 { font-size: .9rem; }
.board-card .media-card__body p { min-height: 32px; margin: 4px 0; font-size: .67rem; }
.board-card .material-type-badge { margin-bottom: 5px; padding: 2px 6px; font-size: .53rem; }
.board-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px; padding: 9px 10px 10px; border-top: 1px solid var(--border); }
.board-card__actions form { padding: 0; }
.board-card__order { display: flex; align-items: center; gap: 5px; }
.board-card__order .icon-button, .board-card__remove { width: 30px; height: 30px; font-size: .76rem; }
.board-card__order span { min-width: 22px; color: var(--muted); text-align: center; font-size: .65rem; }
.board-card__order .icon-button:disabled { cursor: default; opacity: .28; }
.board-card__tools { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.board-card__scene { min-height: 30px; padding: 4px 9px; font-size: .65rem; }
.board-card__remove { color: #d79589; }
.board-material-dialog { width: min(790px, calc(100% - 30px)); max-height: calc(100vh - 24px); }
.board-material-detail { padding: 17px 18px; }
.board-material-detail > .dialog__header { margin-bottom: 12px; }
.board-material-detail > .dialog__header h2 { font-size: 1.15rem; }
.board-material-detail > .dialog__header .eyebrow { margin-bottom: 3px; font-size: .6rem; }
.board-material-detail__layout { display: grid; grid-template-columns: 175px minmax(0, 1fr); gap: 16px; }
.board-material-detail__preview { display: grid; height: 175px; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; color: var(--gold); background: #100e0c; font: 600 2.4rem Cinzel, serif; }
.board-material-detail__preview img { width: 100%; height: 100%; object-fit: contain; }
.board-material-detail__content { min-width: 0; }
.board-material-detail__content > p { max-height: 68px; margin: 0 0 8px; overflow-y: auto; font-size: .72rem; line-height: 1.42; white-space: normal; }
.board-material-detail__content > .material-tags { font-size: .62rem; }
.board-material-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: min(335px, 47vh); margin: 11px 0; overflow-y: auto; padding-right: 2px; }
.board-material-facts div { min-width: 0; padding: 7px 8px; border: 1px solid var(--border); border-radius: 5px; background: rgb(15 13 11 / 32%); }
.board-material-facts div.is-wide { grid-column: 1 / -1; }
.board-material-facts dt { color: var(--gold-light); font-size: .52rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.board-material-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; color: var(--text); font-size: .65rem; line-height: 1.38; white-space: normal; }
.board-material-detail__content .dialog__actions { margin-top: 9px; }
.board-material-detail__content .button { min-height: 34px; padding: 6px 11px; font-size: .68rem; }
.board-scene-dialog { width: min(680px, calc(100% - 30px)); }
.board-scene-dialog__layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; }
.board-scene-dialog .scene-dialog-preview { height: 190px; max-height: none; }
.board-scene-dialog textarea { min-height: 76px; }
.board-scene-audience { gap: 9px; padding: 12px 14px; }
.board-scene-audience__choices { display: flex; flex-wrap: wrap; gap: 18px; }
.board-scene-audience__players { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 115px; }
.board-picker-dialog { width: min(720px, calc(100% - 30px)); }
.board-picker-dialog form { max-height: calc(100vh - 30px); }
.board-picker-search { width: 100%; }
.board-material-picker { display: grid; gap: 7px; max-height: min(440px, 48vh); overflow-y: auto; padding-right: 3px; }
.board-material-option { display: grid; grid-template-columns: auto 52px minmax(0, 1fr); gap: 11px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); cursor: pointer; }
.board-material-option:hover, .board-material-option:has(input:checked) { border-color: var(--gold); background: #30271b; }
.board-material-option input { width: auto; min-height: auto; accent-color: var(--gold); }
.board-material-option__preview { display: grid; width: 52px; height: 43px; place-items: center; overflow: hidden; border-radius: 5px; color: var(--gold); background: #100e0c; font: 600 1.2rem Cinzel, serif; }
.board-material-option__preview img { width: 100%; height: 100%; object-fit: contain; }
.board-material-option > span:last-child { min-width: 0; }
.board-material-option strong, .board-material-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-material-option small { color: var(--muted); font-size: .66rem; }
.board-picker-count { margin-right: auto; color: var(--muted); font-size: .72rem; }
.board-picker-no-results { padding: 20px; text-align: center; }
.board-picker-empty { padding: 25px 10px 8px; }

@media (max-width: 760px) {
    .material-toolbar { grid-template-columns: 1fr; }
    .material-detail { padding: 17px; }
    .material-detail__layout { grid-template-columns: 1fr; }
    .material-detail__aside { position: static; }
    .material-detail__preview { height: 190px; }
    .material-fields, .material-fields--attributes { grid-template-columns: 1fr 1fr; }
    .material-link-form { grid-template-columns: 1fr; }
    .board-list__item { min-width: 190px; }
    .board-workspace { padding: 14px; }
    .board-toolbar { align-items: stretch; flex-direction: column; }
    .board-toolbar .search-field { width: 100%; }
    .board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .board-heading { align-items: stretch; flex-direction: column; }
    .board-heading .heading-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .board-material-detail { padding: 14px; }
    .board-material-detail__layout { grid-template-columns: 1fr; }
    .board-material-detail__preview { height: 130px; }
    .board-material-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .board-scene-dialog__layout { grid-template-columns: 1fr; }
    .board-scene-dialog .scene-dialog-preview { height: 145px; }
}

@media (max-width: 480px) {
    .material-fields, .material-fields--attributes { grid-template-columns: 1fr; }
    .board-workspace { padding: 8px; }
    .board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .board-material-facts { grid-template-columns: 1fr; }
    .board-card .media-preview { height: 82px; }
    .board-card .media-card__body { padding: 7px; }
    .board-card .media-card__body h2 { font-size: .68rem; }
    .board-card .media-card__body p { min-height: 27px; font-size: .55rem; -webkit-line-clamp: 2; }
    .board-card .material-tags { display: none; }
    .board-card .material-type-badge { max-width: 100%; overflow: hidden; font-size: .45rem; text-overflow: ellipsis; white-space: nowrap; }
    .board-card__actions { display: grid; gap: 5px; padding: 6px; }
    .board-card__order, .board-card__tools { width: 100%; justify-content: space-between; margin: 0; }
    .board-card__order .icon-button, .board-card__remove { width: 25px; height: 25px; min-height: 25px; }
    .board-card__scene { min-height: 25px; padding: 3px 6px; font-size: .52rem; }
    .board-scene-audience__choices { display: grid; gap: 8px; }
    .board-scene-audience__players { grid-template-columns: 1fr; }
    .board-picker-dialog .dialog__actions { align-items: stretch; flex-direction: column; }
    .board-picker-count { margin: 0; text-align: center; }
}

.catalog-admin-layout { display: grid; grid-template-columns: minmax(260px, .38fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.catalog-admin-list { position: sticky; top: 84px; max-height: calc(100vh - 105px); overflow: hidden; }
.catalog-admin-list > header, .catalog-admin-create { padding: 16px; border-bottom: 1px solid var(--border); }
.catalog-admin-list nav { max-height: calc(100vh - 245px); overflow: auto; }
.catalog-admin-list nav h3 { margin: 0; padding: 12px 15px 5px; color: var(--muted); font-size: .58rem; text-transform: uppercase; letter-spacing: .09em; }
.catalog-admin-list nav a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 14px; color: var(--text); text-decoration: none; border-left: 3px solid transparent; }
.catalog-admin-list nav a:hover, .catalog-admin-list nav a.is-active { background: rgb(200 161 90 / 8%); border-left-color: var(--gold); }
.catalog-admin-list nav a.is-archived { opacity: .48; }
.catalog-admin-list nav a > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 7px; color: var(--gold-light); background: var(--surface-3); }
.catalog-admin-list nav strong, .catalog-admin-list nav small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-admin-list nav small { color: var(--muted); font-size: .58rem; }
.catalog-admin-create { border-top: 1px solid var(--border); border-bottom: 0; }
.catalog-admin-editor { overflow: hidden; }
.character-option-form { padding: 20px; }
.catalog-editor-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.catalog-editor-heading p { max-width: 680px; margin: 5px 0 0; color: var(--muted); }
.form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .is-wide { grid-column: 1 / -1; }
.option-editor-section { padding: 18px 0; border-top: 1px solid var(--border); }
.option-editor-section > h3 { margin-bottom: 5px; }
.attribute-admin-grid { display: grid; grid-template-columns: repeat(6, minmax(80px, 1fr)); gap: 8px; margin-top: 12px; }
.attribute-admin-grid label { padding: 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.attribute-admin-grid label span { display: block; overflow: hidden; margin-bottom: 4px; color: var(--muted); font-size: .56rem; text-overflow: ellipsis; }
.attribute-admin-grid input { text-align: center; }
.option-skill-columns { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-top: 14px; }
.option-skill-columns > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 4px 12px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.option-skill-columns h4 { grid-column: 1 / -1; margin-bottom: 7px; }
.starter-gear-editor { margin: 12px 0 0; padding: 14px; border: 1px solid var(--border); border-radius: 8px; }
.starter-gear-editor legend { padding: 0 7px; color: var(--gold-light); font-weight: 700; }

@media (max-width: 1020px) {
    .catalog-admin-layout { grid-template-columns: 1fr; }
    .catalog-admin-list { position: static; max-height: none; }
    .catalog-admin-list nav { max-height: 330px; }
    .attribute-admin-grid { grid-template-columns: repeat(4, minmax(80px, 1fr)); }
}
@media (max-width: 700px) {
    .form-grid--three, .option-skill-columns { grid-template-columns: 1fr; }
    .attribute-admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .option-skill-columns > div { grid-template-columns: 1fr; }
}

/* Gemeinsame Fertigkeitsansicht für Spieler und Spielleitung */
.character-skills-panel { margin-top: 22px; padding-top: 21px; border-top: 1px solid var(--line, var(--border)); }
.character-skills-heading { align-items: center; margin-bottom: 12px; }
.character-skills-summary { display: flex; align-items: center; gap: 7px; }
.character-skills-summary > span { padding: 6px 9px; border: 1px solid var(--line, var(--border)); border-radius: 100px; color: var(--muted); font-size: .55rem; white-space: nowrap; }
.character-skills-summary > span b { color: var(--gold-light, var(--gold)); }
.character-skill-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.character-skill-legend span { color: var(--muted); font-size: .55rem; }
.character-skill-legend i { display: inline-grid; min-width: 29px; height: 22px; place-items: center; margin-right: 3px; border: 1px solid var(--line, var(--border)); border-radius: 5px; color: var(--text, var(--ink)); font-style: normal; font-weight: 800; }
.character-skill-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.character-skill-group { min-width: 0; overflow: hidden; border: 1px solid var(--line, var(--border)); border-radius: 9px; background: var(--surface-2, rgb(255 255 255 / 2%)); }
.character-skill-group > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line, var(--border)); background: rgb(200 161 90 / 4%); }
.character-skill-group > header h3 { color: var(--gold-light, var(--gold)); font-size: .67rem; }
.character-skill-group > header span { color: var(--muted); font-size: .5rem; }
.character-skill-list { display: grid; }
.character-skill-row { display: grid; width: 100%; min-width: 0; grid-template-columns: 31px minmax(0, 1fr) 48px; gap: 9px; align-items: start; padding: 10px 12px; border: 0; border-top: 1px solid rgb(200 161 90 / 8%); color: inherit; background: transparent; font: inherit; text-align: left; }
button.character-skill-row { cursor: pointer; }
button.character-skill-row:hover { background: rgb(200 161 90 / 7%); }
.character-skill-row:first-child { border-top: 0; }
.character-skill-row.is-trained { background: linear-gradient(90deg, rgb(97 139 101 / 10%), transparent 70%); box-shadow: inset 3px 0 #668b6c; }
.character-skill-icon { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--line, var(--border)); border-radius: 50%; color: var(--gold-light, var(--gold)); font-size: .72rem; }
.character-skill-row strong, .character-skill-row small, .character-skill-row p { display: block; }
.character-skill-row strong { color: var(--text, var(--ink)); font-size: .65rem; }
.character-skill-row small { margin-top: 2px; color: var(--gold, #c8a15a); font-size: .48rem; }
.character-skill-row p { margin: 4px 0 0; color: var(--muted); font-size: .53rem; line-height: 1.45; }
.character-skill-rank { color: var(--muted); font: 700 .8rem Cinzel, Georgia, serif; text-align: right; }
.character-skill-row.is-trained .character-skill-rank { color: #b9d6bd; }
.character-skill-rank small { color: inherit; font: 700 .43rem Inter, sans-serif; text-transform: uppercase; }
.character-skill-specializations { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.character-skill-specializations span { padding: 3px 6px; border-radius: 100px; color: #e7c981; background: rgb(200 161 90 / 11%); font-size: .47rem; font-weight: 700; }
.character-all-skills { margin-top: 13px; border: 1px solid var(--line, var(--border)); border-radius: 9px; background: rgb(0 0 0 / 8%); }
.character-all-skills > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; color: var(--gold-light, var(--gold)); cursor: pointer; font-size: .64rem; font-weight: 800; list-style: none; }
.character-all-skills > summary::-webkit-details-marker { display: none; }
.character-all-skills > summary::before { content: '＋'; }
.character-all-skills[open] > summary::before { content: '−'; }
.character-all-skills > summary span { margin-left: auto; padding: 3px 7px; border-radius: 100px; color: var(--muted); background: var(--surface-3, rgb(255 255 255 / 5%)); font-size: .5rem; }
.character-all-skills > p { margin: 0; padding: 0 14px 12px; color: var(--muted); font-size: .57rem; }
.character-all-skills > .character-skill-groups { padding: 0 12px 12px; }

@media (max-width: 760px) {
    .character-skills-heading { align-items: flex-start; }
    .character-skills-summary { flex-wrap: wrap; }
    .character-skill-groups { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .character-skill-row { grid-template-columns: 27px minmax(0, 1fr) 42px; gap: 7px; padding: 9px; }
    .character-skill-row p { font-size: .51rem; }
}

/* Spielleiterzentrale und gemeinsame V1-Kataloge */
.gm-v1-heading { align-items: flex-end; }
.gm-command-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.gm-command-stats > a { display: grid; min-width: 0; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; padding: 15px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: linear-gradient(145deg, var(--surface-2), #17130f); text-decoration: none; }
.gm-command-stats > a:hover { border-color: var(--gold); transform: translateY(-1px); }
.gm-command-stats > a > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 9px; color: var(--gold-light); background: rgb(200 161 90 / 10%); font-size: 1.25rem; }
.gm-command-stats small, .gm-command-stats p { display: block; overflow: hidden; color: var(--muted); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.gm-command-stats strong { display: block; margin: 2px 0; font: 700 1.25rem Cinzel, serif; }
.gm-command-stats p { margin: 0; }
.gm-dashboard-v1 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, .7fr); gap: 18px; margin-bottom: 18px; }
.gm-dashboard-v1--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gm-dashboard-roster, .gm-note-stream, .gm-recent-list { display: grid; }
.gm-dashboard-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.gm-dashboard-hero:hover { background: rgb(200 161 90 / 5%); }
.gm-dashboard-hero small, .gm-dashboard-resources span { display: block; color: var(--muted); font-size: .62rem; }
.gm-dashboard-resources { display: flex; gap: 10px; color: var(--gold-light); }
.gm-dashboard-hero.is-incomplete { opacity: .72; }
.gm-session-actions > a, .gm-recent-list > a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 13px 17px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.gm-session-actions > a:hover, .gm-recent-list > a:hover { background: rgb(200 161 90 / 6%); }
.gm-session-actions > a > span, .gm-recent-list > a > span { color: var(--gold); font-size: 1.15rem; }
.gm-session-actions small, .gm-recent-list small { display: block; margin-top: 2px; color: var(--muted); font-size: .6rem; }
.gm-note-stream article { padding: 14px 18px; border-top: 1px solid var(--border); }
.gm-note-stream article span { color: var(--gold); font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.gm-note-stream article strong { display: block; margin: 4px 0; }
.gm-note-stream article p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.55; }

.gm-catalog-summary { display: flex; gap: 10px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 2px; }
.gm-catalog-summary article { display: grid; min-width: 145px; grid-template-columns: 32px auto; gap: 0 9px; align-items: center; padding: 11px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.gm-catalog-summary article > span { display: grid; grid-row: 1 / span 2; width: 31px; height: 31px; place-items: center; border-radius: 7px; color: var(--gold-light); background: rgb(200 161 90 / 9%); }
.gm-catalog-summary strong { font-size: 1rem; }
.gm-catalog-summary small { color: var(--muted); font-size: .55rem; }
.gm-catalog-summary article.is-complete { border-color: rgb(111 157 117 / 48%); }
.gm-master-detail-layout { display: grid; grid-template-columns: minmax(280px, .36fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.gm-master-list { position: sticky; top: 82px; max-height: calc(100vh - 108px); overflow: hidden; }
.gm-catalog-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .42fr); gap: 8px; padding: 13px; border-bottom: 1px solid var(--border); }
.gm-catalog-tools .search-field { min-width: 0; }
.gm-rule-list { max-height: calc(100vh - 186px); overflow: auto; }
.gm-rule-list__item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.gm-rule-list__item:hover, .gm-rule-list__item.is-active { background: rgb(200 161 90 / 8%); }
.gm-rule-list__item.is-active { box-shadow: inset 3px 0 var(--gold); }
.gm-rule-list__item.is-archived { opacity: .48; }
.gm-rule-list__item > span { display: grid; width: 36px; height: 36px; place-items: center; overflow: hidden; border-radius: 7px; color: var(--gold-light); background: var(--surface-3); font-size: 1.05rem; }
.gm-rule-list__item > span img { width: 100%; height: 100%; object-fit: contain; }
.gm-rule-list__item strong, .gm-rule-list__item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-rule-list__item small, .gm-rule-list__item > i { color: var(--muted); font-size: .56rem; font-style: normal; }
.gm-detail-workspace { min-width: 0; padding: 20px; }
.gm-rule-detail-head { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.gm-rule-detail-head > span { display: grid; width: 68px; height: 68px; place-items: center; overflow: hidden; border-radius: 10px; color: var(--gold-light); background: linear-gradient(145deg, var(--surface-3), #100d0a); font-size: 1.8rem; }
.gm-rule-list__item > span[data-lazy-portrait], .gm-rule-detail-head > span[data-lazy-portrait] { background-position: center; background-size: cover; background-repeat: no-repeat; }
.gm-rule-detail-head > span img { width: 100%; height: 100%; object-fit: contain; }
.gm-rule-detail-head small { color: var(--gold); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.gm-rule-detail-head h2 { margin: 3px 0 5px; }
.gm-rule-detail-head p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.gm-rule-head-actions { display: grid; gap: 7px; justify-items: stretch; text-align: center; }
.gm-rule-facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; }
.gm-rule-facts > div { min-width: 105px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; background: rgb(15 13 11 / 28%); }
.gm-rule-facts span, .gm-rule-facts strong { display: block; }
.gm-rule-facts span { color: var(--muted); font-size: .52rem; text-transform: uppercase; letter-spacing: .06em; }
.gm-rule-facts strong { margin-top: 3px; font-size: .7rem; }
.gm-rule-text { padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: rgb(200 161 90 / 4%); }
.gm-rule-text p, .gm-detail-columns p { color: var(--muted); font-size: .72rem; line-height: 1.65; }
.gm-detail-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.gm-detail-columns > section { min-width: 0; }
.gm-requirement-list, .gm-assignment-list { display: grid; margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.gm-requirement-list article, .gm-assignment-list article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border); }
.gm-requirement-list article:first-child, .gm-assignment-list article:first-child { border-top: 0; }
.gm-requirement-list article > span { padding: 4px 7px; border-radius: 15px; color: var(--gold-light); background: var(--surface-3); font-size: .5rem; }
.gm-requirement-list small, .gm-assignment-list small { display: block; color: var(--muted); font-size: .55rem; }
.gm-editor-dialog { width: min(820px, calc(100% - 26px)); max-height: calc(100vh - 26px); overflow: auto; }
.gm-editor-dialog > form, .gm-editor-dialog > .form-stack { padding: 20px; }
.gm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gm-form-grid .is-wide { grid-column: 1 / -1; }
.gm-form-grid .gm-form-grid__wide { grid-column: 1 / -1; }
.gm-form-grid [hidden] { display: none; }
.gm-catalog-status-form { display: flex; align-items: center; gap: 12px; margin: 0 20px 20px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.gm-catalog-status-form small { color: var(--muted); }
.gm-catalog-sync-note { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 12px 16px; border-color: rgb(90 166 118 / 38%); background: rgb(90 166 118 / 8%); }
.gm-catalog-sync-note strong { color: #9bd3ac; }
.gm-catalog-sync-note span { color: var(--muted); font-size: .68rem; }
.gm-inline-fields { display: grid; grid-template-columns: 120px minmax(160px, 1fr) auto; gap: 10px; align-items: end; }
.gm-pack-list { display: grid; gap: 8px; }
.gm-pack-list article { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--border); border-radius: 8px; }
.gm-pack-list small { display: block; color: var(--muted); font-size: .58rem; }
.gm-equipment-preview { width: 86px !important; height: 86px !important; }
.gm-equipment-assign { margin-top: 20px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; }
.gm-enemy-vitals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 18px 0; }
.gm-enemy-vitals article { padding: 10px; border: 1px solid var(--border); border-radius: 7px; text-align: center; background: var(--surface-3); }
.gm-enemy-vitals span, .gm-enemy-vitals strong { display: block; }
.gm-enemy-vitals span { color: var(--muted); font-size: .53rem; }
.gm-enemy-vitals strong { margin-top: 3px; color: var(--gold-light); font-size: .82rem; }
.gm-enemy-attack { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 14px; border: 1px solid rgb(200 161 90 / 34%); border-radius: 8px; background: rgb(200 161 90 / 6%); }

/* Neue Spielleiter-Charakteransicht */
.gm-character-v1-layout { display: grid; grid-template-columns: minmax(260px, .3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.gm-character-v1-list { position: sticky; top: 82px; max-height: calc(100vh - 108px); overflow: auto; }
.gm-character-v1-list__item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.gm-character-v1-list__item:hover, .gm-character-v1-list__item.is-active { background: rgb(200 161 90 / 8%); }
.gm-character-v1-list__item.is-active { box-shadow: inset 3px 0 var(--gold); }
.gm-character-v1-list__item > img, .gm-character-v1-list__item > span { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.gm-character-v1-list__item > span { display: grid; place-items: center; color: var(--gold-light); background: var(--surface-3); }
.gm-character-v1-list__item strong, .gm-character-v1-list__item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-character-v1-list__item small, .gm-character-v1-list__item > i { color: var(--muted); font-size: .55rem; font-style: normal; }
.gm-character-v1-list__item.is-empty { opacity: .6; }
.gm-character-v1-detail { display: grid; min-width: 0; gap: 16px; }
.gm-character-v1-hero { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(300px, .65fr); gap: 18px; align-items: center; padding: 18px; }
.gm-character-v1-portrait, .gm-character-v1-portrait img { width: 88px; height: 88px; border-radius: 12px; }
.gm-character-v1-portrait { display: grid; place-items: center; overflow: hidden; color: var(--gold-light); background: var(--surface-3); font-size: 2rem; }
.gm-character-v1-portrait img { object-fit: cover; }
.gm-character-v1-identity h2 { margin: 3px 0; font-size: 1.45rem; }
.gm-character-v1-identity p { margin: 0 0 8px; color: var(--gold-light); }
.gm-character-v1-identity > div { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-character-v1-identity > div span { padding: 4px 7px; border-radius: 15px; color: var(--muted); background: var(--surface-3); font-size: .55rem; }
.gm-character-v1-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.gm-character-v1-progress label { color: var(--muted); font-size: .53rem; }
.gm-character-v1-progress input { margin-top: 3px; }
.gm-character-v1-progress button { grid-column: 1 / -1; }
.gm-character-v1-resources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gm-character-v1-resources article { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; }
.gm-character-v1-resources article > span { color: var(--gold-light); font-size: 1.5rem; }
.gm-character-v1-resources small, .gm-character-v1-resources strong { display: block; }
.gm-character-v1-resources small { color: var(--muted); font-size: .55rem; }
.gm-character-v1-resources i { position: relative; display: block; height: 3px; margin-top: 5px; overflow: hidden; border-radius: 3px; background: var(--surface-3); }
.gm-character-v1-resources i::after { position: absolute; inset: 0 auto 0 0; width: var(--resource-width); background: var(--gold); content: ''; }
.gm-character-v1-resources form { display: flex; gap: 5px; }
.gm-character-v1-resources button { width: 31px; height: 31px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--surface-3); cursor: pointer; }
.gm-character-v1-columns { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 16px; }
.gm-character-v1-values, .gm-character-v1-notes, .gm-character-v1-rules, .gm-character-v1-equipment { padding: 18px; }
.gm-character-v1-values > section + section { margin-top: 16px; }
.gm-character-v1-values h3, .gm-character-v1-rules > section > h3, .gm-character-v1-equipment > section > h3 { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--gold-light); font-size: .7rem; }
.gm-character-v1-values dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--border); }
.gm-character-v1-values dl div { padding: 9px 11px; background: var(--surface-2); }
.gm-character-v1-values dt { color: var(--muted); font-size: .52rem; }
.gm-character-v1-values dd { margin: 3px 0 0; font-size: .7rem; }
.gm-character-v1-notes article { padding: 12px 0; border-top: 1px solid var(--border); }
.gm-character-v1-notes article small { color: var(--gold); font-size: .53rem; }
.gm-character-v1-notes article h3 { margin: 3px 0 5px; }
.gm-character-v1-notes article p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.gm-character-v1-rules > section, .gm-character-v1-equipment > section { margin-top: 16px; }
.gm-character-v1-rules > section > div, .gm-character-v1-equipment > section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gm-character-v1-rules article, .gm-character-v1-equipment article { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.gm-character-v1-rules article > span, .gm-character-v1-equipment article > span { color: var(--gold-light); font-size: 1rem; }
.gm-character-v1-rules article small, .gm-character-v1-rules article i, .gm-character-v1-equipment article small { display: block; color: var(--muted); font-size: .55rem; font-style: normal; }
.gm-player-character-shell { --line: var(--border); --gold-bright: var(--gold-light); --ink: var(--text); min-width: 0; }
.gm-player-character-hero { grid-template-columns: 90px minmax(0, 1fr) minmax(210px, 280px); }
.gm-player-character-emblem { overflow: hidden; }
.gm-player-character-emblem img { width: 100%; height: 100%; object-fit: cover; }
.gm-player-manage-button { grid-column: 1 / -1; justify-self: start; margin-top: 8px; padding: 6px 9px; border: 1px solid var(--border-light); border-radius: 5px; color: var(--gold-light); background: rgb(200 161 90 / 7%); cursor: pointer; font-size: .55rem; font-weight: 750; }
.gm-player-character-tabs button { min-width: 105px; }
.gm-player-character-shell [data-gm-character-pane] { padding-top: 16px; }
.gm-player-character-shell .character-surface { background: var(--surface); }
.gm-player-character-shell .vital-card, .gm-player-character-shell .attribute-group, .gm-player-character-shell .derived-row div { background: var(--surface-2); }
.gm-player-character-shell .gm-character-v1-resources { margin-bottom: 16px; }
.gm-player-additional-values { margin-top: 24px; padding-top: 21px; border-top: 1px solid var(--border); }
.gm-player-additional-values > section + section { margin-top: 16px; }
.gm-player-additional-values > section > h3 { margin-bottom: 8px; color: var(--gold-light); font-size: .72rem; }
.gm-player-additional-values dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--border); }
.gm-player-additional-values dl div { padding: 9px 11px; background: var(--surface-2); }
.gm-player-additional-values dt { color: var(--muted); font-size: .52rem; }
.gm-player-additional-values dd { margin: 3px 0 0; font-size: .7rem; }
.gm-player-rule-card { display: flex; min-width: 0; min-height: 245px; flex-direction: column; cursor: default; }
.gm-player-rule-card h3 a { color: inherit; }
.gm-player-rule-card h3 a:hover { color: var(--gold-light); }
.gm-player-rule-card footer { flex-wrap: wrap; }
.gm-player-rule-card form { z-index: 2; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--border); }
.gm-player-rule-card form button { padding: 0; font-size: .55rem; }
.gm-player-equipment-card > a { display: grid; min-width: 0; min-height: 140px; grid-template-columns: 75px minmax(0, 1fr); gap: 13px; align-items: center; padding: 13px; color: inherit; }
.gm-player-equipment-card > a > span { display: grid; width: 72px; height: 82px; place-items: center; overflow: hidden; border: 1px solid var(--border-light); border-radius: 8px; color: var(--gold-light); background: var(--surface-3); font-size: 1.7rem; }
.gm-player-equipment-card > a > span img { width: 100%; height: 100%; object-fit: contain; }
.gm-player-equipment-card > footer { margin-top: auto; padding: 8px 13px; border-top: 1px solid var(--border); color: var(--muted); background: rgb(200 161 90 / 4%); font-size: .55rem; }
.gm-player-character-shell .gm-character-v1-notes { padding: 22px; }
.gm-v1-assignment-picker { display: grid; max-height: 52vh; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: auto; }
.gm-v1-assignment-picker > label { display: grid; grid-template-columns: auto 32px minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; }
.gm-v1-assignment-picker > label:has(input:checked) { border-color: var(--gold); background: rgb(200 161 90 / 7%); }
.gm-v1-assignment-picker > label > span { color: var(--gold-light); font-size: 1rem; }
.gm-v1-assignment-picker small, .gm-v1-assignment-picker p { display: block; margin: 2px 0 0; color: var(--muted); font-size: .55rem; }

/* Ausrüstungskatalog im Spielerportal */
.equipment-catalog-v1 { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--v1-border, var(--border)); }
.equipment-catalog-v1 > header { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: 12px; }
.equipment-catalog-v1 > header span { color: var(--gold); font-size: .55rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.equipment-catalog-v1 > header h3 { margin: 2px 0; }
.equipment-catalog-v1 > header p { margin: 0; color: var(--muted); font-size: .64rem; }
.equipment-catalog-v1 > header b { display: grid; min-width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--surface-3); }
.player-equipment-search { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; margin-bottom: 10px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 7px; }
.player-equipment-search input { border: 0; background: transparent; }
.player-equipment-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; max-height: 480px; overflow: auto; }
.player-equipment-catalog-grid article { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.player-equipment-catalog-open { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-column: 1 / -1; gap: 9px; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.player-equipment-catalog-open > span { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; border-radius: 6px; color: var(--gold-light); background: var(--surface-3); }
.player-equipment-catalog-open > span img { width: 100%; height: 100%; object-fit: contain; }
.player-equipment-catalog-grid article small, .player-equipment-catalog-grid article strong { display: block; }
.player-equipment-catalog-grid article small { color: var(--muted); font-size: .5rem; }
.player-equipment-catalog-grid article p { margin: 3px 0 0; color: var(--muted); font-size: .56rem; line-height: 1.35; }
.player-equipment-catalog-grid form { grid-column: 1 / -1; }
.player-equipment-catalog-grid form button { width: 100%; min-height: 31px; border: 1px solid var(--border); border-radius: 6px; color: var(--gold-light); background: rgb(200 161 90 / 5%); cursor: pointer; font-size: .58rem; font-weight: 800; }

@media (max-width: 1180px) {
    .gm-command-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gm-character-v1-hero { grid-template-columns: 76px minmax(0, 1fr); }
    .gm-player-character-hero { grid-template-columns: 76px minmax(0, 1fr); }
    .gm-player-character-hero .character-level { grid-column: 1 / -1; }
    .gm-character-v1-progress { grid-column: 1 / -1; }
    .gm-enemy-vitals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .player-equipment-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .gm-dashboard-v1, .gm-dashboard-v1--secondary, .gm-master-detail-layout, .gm-character-v1-layout { grid-template-columns: 1fr; }
    .gm-master-list, .gm-character-v1-list { position: static; max-height: 430px; }
    .gm-rule-list { max-height: 340px; }
    .gm-character-v1-list { display: block; }
    .gm-character-v1-list > [data-v1-catalog-list] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
    .gm-v1-heading { align-items: stretch; }
    .gm-command-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gm-command-stats > a { grid-template-columns: 34px minmax(0, 1fr); padding: 11px; }
    .gm-command-stats > a > span { width: 32px; height: 32px; }
    .gm-catalog-tools, .gm-detail-columns, .gm-character-v1-columns, .gm-character-v1-rules > section > div, .gm-character-v1-equipment > section > div, .gm-v1-assignment-picker { grid-template-columns: 1fr; }
    .gm-rule-detail-head { grid-template-columns: 54px minmax(0, 1fr); }
    .gm-rule-detail-head > span { width: 52px; height: 52px; }
    .gm-rule-detail-head > .button { grid-column: 1 / -1; }
    .gm-character-v1-list > [data-v1-catalog-list] { grid-template-columns: 1fr; }
    .gm-character-v1-hero { grid-template-columns: 58px minmax(0, 1fr); padding: 13px; }
    .gm-character-v1-portrait, .gm-character-v1-portrait img { width: 56px; height: 56px; }
    .gm-character-v1-progress { grid-template-columns: 1fr; }
    .gm-character-v1-progress button { grid-column: auto; }
    .gm-character-v1-resources { grid-template-columns: 1fr; }
    .gm-character-v1-values dl, .player-equipment-catalog-grid { grid-template-columns: 1fr; }
    .gm-player-additional-values dl { grid-template-columns: 1fr; }
    .gm-player-character-tabs { position: sticky; z-index: 15; top: 62px; }
    .gm-player-character-tabs button { min-width: 96px; padding: 12px 8px; font-size: .56rem; }
    .gm-player-character-hero { grid-template-columns: 62px minmax(0, 1fr); padding: 17px; }
    .gm-player-character-emblem { width: 60px; height: 68px; }
    .gm-player-character-hero h1 { font-size: 1.4rem; }
    .gm-player-equipment-card > a { grid-template-columns: 64px minmax(0, 1fr); }
    .gm-player-equipment-card > a > span { width: 62px; height: 72px; }
    .gm-form-grid, .gm-inline-fields { grid-template-columns: 1fr; }
    .gm-form-grid .is-wide, .gm-form-grid .gm-form-grid__wide { grid-column: auto; }
    .gm-catalog-status-form { align-items: stretch; flex-direction: column; }
    .gm-catalog-sync-note { align-items: flex-start; flex-direction: column; }
    .gm-enemy-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page-heading--compact { margin-bottom: 20px; }
.messenger { display: grid; height: min(680px, calc(100vh - 175px)); min-height: 500px; grid-template-columns: 285px minmax(0, 1fr); overflow: hidden; }
.conversation-sidebar { min-width: 0; border-right: 1px solid var(--border); background: #171410; }
.conversation-sidebar > header { display: flex; height: 64px; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--border); }
.conversation-sidebar > header h2 { font-size: 1rem; }
.conversation-sidebar > header span { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: 20px; color: var(--muted); background: var(--surface-3); font-size: .68rem; }
.conversation-sidebar nav { height: calc(100% - 64px); overflow-y: auto; }
.conversation-item { position: relative; display: grid; min-width: 0; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 13px; border-bottom: 1px solid rgb(58 49 39 / 55%); color: var(--text); }
.conversation-item:hover { background: var(--surface-2); }
.conversation-item.is-active { background: #30271b; box-shadow: inset 3px 0 var(--gold); }
.conversation-item.has-unread::after { position: absolute; right: 11px; bottom: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgb(200 161 90 / 45%); content: ''; }
.conversation-item.has-unread time { display: none; }
.conversation-item > span:nth-child(2) { min-width: 0; }
.conversation-item strong, .conversation-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item strong { font-size: .78rem; }
.conversation-item small { color: var(--muted); font-size: .64rem; }
.conversation-item time { align-self: start; color: var(--muted); font-size: .6rem; }
.conversation-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--gold-light); background: var(--surface-3); }
.conversation-avatar--group { border: 1px solid #6a5532; }
.conversation-main { display: grid; min-width: 0; grid-template-rows: 64px minmax(0, 1fr) auto; background: radial-gradient(circle at 50% 30%, rgb(200 161 90 / 4%), transparent 28rem), #100e0c; }
.conversation-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
.conversation-header h2 { font-size: 1rem; }
.conversation-header .eyebrow { margin-bottom: 2px; }
.conversation-header > small { color: var(--muted); }
.conversation-messages { max-height: none; padding: 18px clamp(14px, 3vw, 35px); }
.conversation-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 9px; align-items: end; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.conversation-compose textarea { min-height: 42px; max-height: 110px; padding: 10px 12px; resize: vertical; }
.conversation-compose .button { min-height: 42px; }
.popup-toggle { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--border-light); border-radius: 6px; color: var(--gold-light); background: var(--surface-2); cursor: pointer; font-size: 1rem; }
.popup-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.popup-toggle:has(input:checked) { border-color: var(--gold); color: #21180c; background: var(--gold); }
.conversation-disabled { padding: 14px; border-top: 1px solid var(--border); color: var(--muted); background: var(--surface); text-align: center; font-size: .75rem; }

@media (max-width: 1000px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .inventory-layout { grid-template-columns: 1fr; }
    .inventory-add-panel { position: static; }
    .access-card { grid-template-columns: 1fr 1fr; }
    .access-card > div { grid-column: 1 / -1; }
    .message-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .login-options { grid-template-columns: 1fr; gap: 28px; }
    .login-option { padding: 0; }
    .login-option + .login-option { padding: 28px 0 0; border-top: 1px solid var(--border); border-left: 0; }
    .login-option > p { min-height: 0; }
    .app-shell { display: block; }
    .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: 270px; transition: transform .2s ease; }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar.is-open + .workspace + .sidebar-backdrop, .sidebar-backdrop.is-open { display: block; position: fixed; inset: 0; z-index: 10; background: rgb(0 0 0 / 60%); }
    .menu-button { display: grid; }
    .topbar { position: sticky; top: 0; z-index: 9; min-height: 64px; padding: 10px 15px; }
    .topbar__actions { display: none; }
    .content { padding: 28px 16px; }
    .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 25px; }
    .page-heading .button { width: 100%; }
    .archive-row { align-items: stretch; flex-direction: column; }
    .archive-row .button { width: 100%; }
    .panel__header { align-items: flex-start; flex-direction: column; padding: 18px; }
    .search-field { width: 100%; }
    .player-table__head { display: none; }
    .player-table__row { grid-template-columns: 1fr auto; padding: 17px; }
    .player-table__row > div:nth-child(3) { grid-column: 1; color: var(--muted); font-size: .75rem; }
    .row-actions { grid-column: 2; grid-row: 1 / span 2; }
    .player-current-access { grid-template-columns: 1fr; }
    .player-current-access > header { grid-column: 1; }
    .player-current-access > form .button { width: 100%; }
    .mobile-label { display: inline; }
    .access-card, .form-grid { grid-template-columns: 1fr; }
    .access-card > div { grid-column: auto; }
    .player-module-grid { grid-template-columns: 1fr; }
    .character-fields { grid-template-columns: 1fr; }
    .character-fields .field-wide { grid-column: auto; }
    .character-summary__body { grid-template-columns: 90px minmax(0, 1fr); }
    .character-summary__portrait img, .character-summary__portrait .portrait-placeholder { height: 115px; }
    .character-summary__sections { grid-template-columns: 1fr; }
    .character-combat__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .character-combat__armor { grid-template-columns: 1fr; }
    .character-combat__spell, .character-power-overview { grid-template-columns: minmax(190px, 1fr) repeat(2, minmax(105px, .55fr)); }
    .character-attack { grid-template-columns: minmax(130px, 1fr) repeat(3, minmax(80px, .55fr)); overflow-x: auto; }
    .character-primary-images { grid-template-columns: 1fr; }
    .rules-layout { grid-template-columns: 1fr; }
    .rules-section:nth-child(2), .rules-section:nth-child(5) { grid-column: auto; }
    .character-power-grid, .character-power-grid--gm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .character-power-card { grid-template-rows: 70px auto auto; }
    .character-power-card > strong, .character-power-card > small, .character-power-card > form { margin-right: 6px; margin-left: 6px; }
    .character-power-detail__body { grid-template-columns: 1fr; }
    .character-power-detail__body > img { width: 100%; height: 180px; object-fit: contain; }
    .power-assignment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .inventory-detail-layout { grid-template-columns: 1fr; }
    .inventory-detail-preview { height: 190px; }
    .inventory-toolbar { grid-template-columns: minmax(0, 1fr) minmax(125px, .45fr) minmax(125px, .45fr); }
    .inventory-toolbar > small { grid-column: 1 / -1; padding-top: 0; }
    .player-body .section-tabs { display: none; }
    .mobile-nav { position: fixed; z-index: 20; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 6px 4px; border: 1px solid var(--border-light); border-radius: 12px; background: rgb(26 23 19 / 96%); box-shadow: var(--shadow); }
    .mobile-nav button { display: grid; min-width: 0; min-height: 48px; place-items: center; padding: 3px 1px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: clamp(.5rem, 2.3vw, .62rem); }
    .mobile-nav span { font-size: 1rem; }
    .mobile-nav button.is-active { color: var(--gold-light); background: rgb(200 161 90 / 9%); }
    .messenger { height: auto; min-height: 620px; grid-template-columns: 1fr; grid-template-rows: auto minmax(500px, 70vh); }
    .conversation-sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
    .conversation-sidebar > header { height: 48px; }
    .conversation-sidebar nav { display: flex; height: auto; overflow-x: auto; overflow-y: hidden; }
    .conversation-item { min-width: 190px; border-right: 1px solid var(--border); border-bottom: 0; }
    .conversation-item.is-active { box-shadow: inset 0 -3px var(--gold); }
    .conversation-main { grid-template-rows: 58px minmax(0, 1fr) auto; }
    .conversation-compose { grid-template-columns: minmax(0, 1fr) auto; }
    .conversation-compose .popup-toggle { display: none; }
}

@media (max-width: 480px) {
    .player-topbar { gap: 8px; padding: 10px 12px; }
    .player-topbar .brand small { display: none; }
    .player-topbar__brand-group { gap: 6px; }
    .player-topbar__icon { width: 32px; height: 32px; flex-basis: 32px; }
    .player-topbar__actions { gap: 7px; }
    .player-topbar__link { padding: 6px 8px; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 15px; }
    .stat-card strong { font-size: 1.6rem; }
    .adventure-picker { min-width: 0; }
    .adventure-picker select { width: 100%; }
    .player-table__row { grid-template-columns: 1fr; }
    .row-actions { grid-column: 1; grid-row: auto; }
    .player-current-access > header { align-items: flex-start; flex-direction: column; gap: 5px; }
    .player-current-access .copy-field button { padding: 7px; font-size: .62rem; }
    .inventory-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
    .inventory-toolbar .search-field { grid-column: 1 / -1; }
    .inventory-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 10px; }
    .inventory-card__preview { height: 88px; }
    .inventory-card__preview img { padding: 2px; }
    .inventory-card__quantity { right: 5px; bottom: 5px; min-width: 27px; padding: 3px 5px; font-size: .58rem; }
    .inventory-card__body { padding: 8px 7px 9px; }
    .inventory-card__body .material-type-badge { max-width: 100%; overflow: hidden; font-size: .48rem; text-overflow: ellipsis; white-space: nowrap; }
    .inventory-card__body strong { font-size: .7rem; }
    .inventory-card__body small { min-height: 28px; font-size: .56rem; }
    .inventory-card__body em { font-size: .54rem; }
    .inventory-personal-fields > div { grid-template-columns: 1fr; }
    .inventory-personal-fields .inventory-personal-note { grid-row: auto; }
    .inventory-material-facts { grid-template-columns: 1fr; }
    .assignment-player-grid { grid-template-columns: 1fr; }
    .assignment-material-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .assignment-details-grid { grid-template-columns: 1fr; }
    .rules-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rules-attribute-grid, .rules-formula-grid { grid-template-columns: 1fr; }
    .character-section-heading { align-items: stretch; flex-direction: column; }
    .character-summary__body { grid-template-columns: 1fr; }
    .character-summary__images { grid-template-columns: 1fr 1fr; }
    .character-summary__portrait { width: 110px; }
    .character-name-editor { width: 100%; max-width: none; }
    .character-autosave-hint { font-size: .61rem; }
    .character-summary__section--attributes .character-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .character-combat__header { align-items: flex-start; flex-direction: column; }
    .character-combat__header > small { text-align: left; }
    .character-combat__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .character-combat__armor, .character-combat__weapons { padding: 14px; }
    .character-combat__spell, .character-power-overview, .character-spell-rolls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .character-combat__spell > div:first-child, .character-power-overview > div:first-child, .character-spell-rolls > div:first-child { grid-column: 1 / -1; }
    .character-attack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .character-attack > div:first-child { grid-column: 1 / -1; }
    .character-attack b { font-size: .68rem; }
    .live-toast { right: 15px; bottom: 82px; left: 15px; width: auto; }
    .conversation-compose { padding: 9px; }
    .conversation-compose .button { padding-right: 12px; padding-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Universal content UI · V1 */
.content-panel-header { align-items: center; }
.content-view-switch { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: #100e0c; }
.content-view-switch button { min-height: 32px; padding: 5px 12px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; cursor: pointer; font-size: .7rem; font-weight: 700; }
.content-view-switch button.is-active { color: #21180c; background: var(--gold-light); }
.universal-content-grid { padding: 18px; }
.universal-content-card { grid-template-rows: 92px auto auto auto; }
.universal-content-card > .material-type-badge { justify-self: start; margin: 8px 9px 0; font: 700 .5rem Inter, sans-serif; }
.universal-content-card > strong { margin-top: 5px; }
.rule-tree { display: flex; gap: 22px; overflow-x: auto; padding: 20px; background: linear-gradient(90deg, rgb(200 161 90 / 3%), transparent); }
.rule-tree-level { position: relative; min-width: 210px; flex: 1 0 210px; }
.rule-tree-level + .rule-tree-level::before { position: absolute; top: 50px; bottom: 15px; left: -12px; width: 1px; background: linear-gradient(transparent, var(--gold), transparent); content: ''; opacity: .55; }
.rule-tree-level > header { margin-bottom: 10px; color: var(--gold-light); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.rule-tree-level > div { display: grid; gap: 9px; align-content: start; }
.rule-tree-node { display: grid; min-width: 0; grid-template-columns: 30px minmax(0, 1fr); gap: 1px 9px; padding: 11px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-align: left; background: var(--surface-2); cursor: pointer; }
.rule-tree-node:hover { border-color: var(--gold); }
.rule-tree-node > span { display: grid; grid-row: 1 / span 3; place-items: center; color: var(--gold-light); font-size: 1.2rem; }
.rule-tree-node strong, .rule-tree-node small { overflow: hidden; text-overflow: ellipsis; }
.rule-tree-node strong { font-size: .72rem; white-space: nowrap; }
.rule-tree-node small { color: var(--muted); font-size: .56rem; line-height: 1.35; }
.rule-tree-node em { grid-column: 2; margin-top: 5px; color: #b9d8bd; font-size: .54rem; font-style: normal; font-weight: 700; }
.rule-tree-node.is-locked { opacity: .66; filter: saturate(.45); }
.rule-tree-node.is-locked em { color: var(--muted); }
.universal-content-dialog { width: min(820px, calc(100% - 28px)); max-height: calc(100vh - 28px); }
.universal-content-dialog[aria-busy="true"] .universal-content-layout,
.universal-content-dialog[aria-busy="true"] .content-dialog-actions { opacity: .38; pointer-events: none; }
.universal-content-detail { padding: 22px; }
.universal-content-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 19px; margin-top: 17px; }
.universal-content-preview { display: grid; width: 190px; height: 190px; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; color: var(--gold); background: #100e0c; font: 600 2.5rem Cinzel, serif; }
.universal-content-preview img { width: 100%; height: 100%; object-fit: contain; }
.universal-content-body { min-width: 0; }
.universal-content-body > p { margin: 0 0 12px; white-space: pre-line; }
.content-link-section { margin-top: 13px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 7px; background: rgb(15 13 11 / 32%); }
.content-link-section--unlocks { border-color: rgb(111 157 117 / 55%); background: rgb(111 157 117 / 8%); }
.content-link-section h3 { margin-bottom: 6px; font-size: .72rem; }
.content-link-section ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.content-link-section li { padding: 4px 8px; border-radius: 20px; color: var(--gold-light); background: var(--surface-3); font-size: .64rem; }
.inventory-toolbar { grid-template-columns: minmax(180px, 1fr) minmax(130px, .42fr) auto; }
.inventory-state-group + .inventory-state-group { border-top: 1px solid var(--border); }
.inventory-state-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 0; }
.inventory-state-heading span { color: var(--muted); font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.inventory-state-heading h3 { margin-top: 2px; font-size: .9rem; }
.inventory-state-heading b { display: grid; min-width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--gold-light); background: var(--surface-3); font-size: .68rem; }
.inventory-card { display: flex; flex-direction: column; }
.inventory-card__open { height: auto; flex: 1; }
.inventory-quick-action { padding: 0; border-top: 1px solid var(--border); }
.inventory-quick-action button { width: 100%; min-height: 34px; border: 0; color: var(--gold-light); background: rgb(200 161 90 / 5%); cursor: pointer; font-size: .64rem; font-weight: 800; }
.inventory-quick-action button:hover { background: rgb(200 161 90 / 13%); }

@media (max-width: 760px) {
    .universal-content-layout { grid-template-columns: 1fr; }
    .universal-content-preview { width: 100%; height: 165px; }
    .rule-tree { padding: 14px; }
    .inventory-toolbar { grid-template-columns: minmax(0, 1fr) minmax(125px, .45fr); }
}

@media (max-width: 480px) {
    .content-panel-header { align-items: stretch; }
    .content-view-switch { width: 100%; }
    .content-view-switch button { flex: 1; }
    .universal-content-detail { padding: 15px; }
    .universal-content-preview { height: 135px; }
}