:root {
  color-scheme: dark;
  --ink: #f4f1e8;
  --muted: #aaa89f;
  --bg: #070707;
  --panel: rgba(20, 20, 20, .94);
  --panel-2: #191919;
  --line: #3a3936;
  --yellow: #ffd22f;
  --pink: #ed0061;
  --cyan: #00d6e7;
  --green: #69d56d;
  --red: #ff453f;
  --focus: #8be8ff;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.skill-list { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: .55rem; background: var(--panel); }
.skill-columns, .skill-row > summary { display: grid; grid-template-columns: minmax(0, 1.4fr) 3rem 4rem minmax(0, 1fr) 3rem minmax(0, 1.1fr) minmax(0, .85fr) 1rem; align-items: center; gap: .8rem; padding: .8rem 1rem; }
.skill-columns { color: var(--muted); font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.skill-row + .skill-row { border-top: 1px solid var(--line); }
.skill-row > summary { cursor: pointer; min-height: 3.5rem; list-style: none; }
.skill-row > summary::-webkit-details-marker { display: none; }
.skill-row > summary:hover, .skill-row[open] > summary { background: rgba(0,214,231,.06); }
.skill-row > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.skill-summary-name { color: var(--yellow); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-summary-name small { color: var(--muted); font-weight: normal; }
.skill-summary-rank, .skill-summary-stat { color: var(--cyan); font-variant-numeric: tabular-nums; }
.skill-summary-bonus { color: var(--green); font-variant-numeric: tabular-nums; text-align: center; }
.skill-summary-keys { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.skill-summary-method, .skill-summary-progress { color: var(--muted); line-height: 1.4; }
.spell-summary-cost, .spell-summary-range { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.spell-fields { margin-top: 1.25rem; }
.spell-row textarea { min-height: 6rem; resize: vertical; }
.skill-expand { color: var(--muted); transition: transform .15s ease; }
.skill-row[open] > summary .skill-expand { transform: rotate(180deg); }
.skill-card { min-width: 0; padding: 1.25rem; border-top: 1px solid var(--line); border-left: 3px solid var(--cyan); }
.skill-list-hint { margin-bottom: 0; font-size: .85rem; }
.skill-assignment-panel > summary { cursor: pointer; color: var(--cyan); }
.skill-assignment-panel[open] > summary { margin-bottom: 1rem; }
.skill-tabs { margin-bottom: 1rem; }
.skill-columns > :nth-child(2), .skill-columns > :nth-child(3), .skill-columns > :nth-child(5), .skill-summary-rank, .skill-summary-stat { text-align: center; }
@media (max-width: 700px) {
  .skill-columns, .skill-row > summary { grid-template-columns: minmax(0, 1fr) 2.2rem 3.5rem 2.3rem 1rem; gap: .35rem .5rem; }
  .skill-columns > :nth-child(4), .skill-columns > :nth-child(6), .skill-columns > :nth-child(7) { display: none; }
  .skill-row > summary { grid-template-areas: "name rank bonus stat expand" "keys keys method method method"; }
  .spell-row > summary { grid-template-areas: "name rank bonus stat expand" "keys keys cost range range"; }
  .spell-summary-cost { grid-area: cost; font-size: .68rem; }
  .spell-summary-cost::before { content: "Mana "; }
  .spell-summary-range { grid-area: range; font-size: .68rem; text-align: right; }
  .skill-summary-name { grid-area: name; }
  .skill-summary-rank { grid-area: rank; }
  .skill-summary-bonus { grid-area: bonus; }
  .skill-summary-stat { grid-area: stat; }
  .skill-summary-keys { grid-area: keys; }
  .skill-summary-method { grid-area: method; font-size: .68rem; text-align: right; }
  .skill-summary-progress { display: none; }
  .skill-expand { grid-area: expand; }
}
.skill-card h3 { margin: 0 0 .65rem; font-size: 1.25rem; color: var(--yellow); overflow-wrap: anywhere; }
/* Skills use the available sheet width; spells retain their existing columns. */
.skill-quick-list { container-type: inline-size; border: 0; background: none; overflow: visible; }
.skill-quick-head, .skill-entries { display: grid; gap: .4rem .8rem; align-items: start; }
.skill-quick-columns, .skill-quick-list .skill-row > summary { display: grid; grid-template-columns: minmax(0, 1fr) 6rem 3.4rem 7.4rem 2.75rem 1rem; gap: .4rem; align-items: center; padding: .45rem .65rem; }
.skill-quick-columns { color: var(--muted); font-size: .72rem; text-align: center; }
.skill-quick-columns > :first-child { text-align: left; }
.skill-quick-columns + .skill-quick-columns { display: none; }
.skill-quick-list .skill-row { min-width: 0; border: 1px solid var(--line); border-radius: .4rem; background: var(--panel); }
.skill-quick-list .skill-row > summary { min-height: 3.1rem; border-radius: .4rem; }
.skill-quick-list .skill-card { padding: 1rem; }
.skill-quick-list .skill-quick-label { display: none; }
.skill-quick-field { min-width: 0; }
.skill-stepper { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) 1.7rem; align-items: center; gap: .1rem; }
.skill-stepper :is(button, a:where(.route-link)) { display: grid; place-items: center; min-width: 0; min-height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: .3rem; color: var(--cyan); background: var(--panel-2); font-size: 1rem; line-height: 1; }
.skill-step-value { display: flex; align-items: center; min-width: 0; }
.skill-quick-list .skill-step-value input { min-width: 0; width: 100%; height: 2rem; padding: .15rem 0; text-align: center; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: .2rem; appearance: textfield; font-size: .88rem; font-variant-numeric: tabular-nums; }
.skill-step-value input::-webkit-inner-spin-button, .skill-step-value input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.skill-step-value small { color: var(--muted); font-size: .7rem; white-space: nowrap; padding-right: .15rem; }
.skill-stepper :is(button, a:where(.route-link)):disabled, .skill-stepper:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.skill-stepper:has(input:disabled) :is(button, a:where(.route-link)):disabled { opacity: 1; }
.skill-stepper:has(input:disabled) input { cursor: not-allowed; }
.skill-quick-list .skill-summary-bonus { display: flex; flex-direction: column; align-items: center; }
.skill-quick-advance { position: relative; display: grid; place-items: center; min-width: 0; min-height: 2.5rem; cursor: pointer; margin: 0; }
.skill-quick-advance input { position: absolute; width: 1.35rem; height: 1.35rem; margin: 0; opacity: 0; cursor: inherit; }
.skill-check { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid var(--muted); border-radius: .3rem; background: var(--panel-2); pointer-events: none; }
.skill-check::after { content: ''; opacity: 0; width: .35rem; height: .65rem; border: solid var(--green); border-width: 0 .15rem .15rem 0; transform: translateY(-.08rem) rotate(45deg); }
.skill-quick-advance input:checked + .skill-check { border-color: var(--green); background: #163019; }
.skill-quick-advance input:checked + .skill-check::after { opacity: 1; }
.skill-quick-advance input:focus-visible + .skill-check { outline: 2px solid var(--focus); outline-offset: 3px; }
.skill-quick-advance input:disabled + .skill-check { filter: grayscale(1); opacity: .55; }
.skill-quick-advance:has(input:disabled) { cursor: not-allowed; }
.skill-quick-list .skill-stepper :is(button, a:where(.route-link)):focus-visible, .skill-quick-list .skill-step-value input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@container (min-width: 70rem) {
  .skill-quick-head, .skill-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill-quick-columns + .skill-quick-columns { display: grid; }
}
@container (max-width: 34rem) {
  .skill-quick-head { display: none; }
  .skill-quick-list .skill-row > summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 3.4rem 1rem; grid-template-areas: 'name name bonus expand' 'rank hours adv adv'; gap: .4rem .7rem; padding: .6rem; }
  .skill-quick-list .skill-summary-name { grid-area: name; }
  .skill-quick-list .skill-summary-rank { grid-area: rank; }
  .skill-quick-list .skill-summary-hours { grid-area: hours; }
  .skill-quick-list .skill-summary-bonus { grid-area: bonus; }
  .skill-quick-list .skill-quick-advance { grid-area: adv; }
  .skill-quick-list .skill-expand { grid-area: expand; }
  .skill-quick-list .skill-quick-label { display: block; color: var(--muted); font-size: .68rem; font-weight: normal; margin-bottom: .2rem; }
  .skill-quick-advance { align-self: end; }
  .skill-quick-advance .skill-quick-label { position: absolute; top: -1rem; }
  .skill-stepper :is(button, a:where(.route-link)), .skill-quick-list .skill-step-value input { min-height: 2.75rem; }
  .skill-quick-advance { min-height: 2.75rem; }
}
.skill-card .section-title { align-items: flex-start; gap: 1rem; }
.skill-bonus-total { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1rem; }
.skill-bonus-total output { color: var(--green); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.skill-bonus-total small { color: var(--muted); }
.skill-buffs { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; margin: 1rem 0; }
.skill-buffs h4 { margin: 0; }
.skill-buffs > p { font-size: .85rem; }
.skill-buff-row { display: grid; grid-template-columns: minmax(0, 1fr) 5rem auto; gap: .7rem; align-items: end; margin-top: .65rem; }
.skill-buff-row > * { min-width: 0; }
.skill-buff-row :is(button, a:where(.route-link)) { padding: .6rem; }
.skill-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.skill-tags span { padding: .25rem .55rem; border: 1px solid var(--line); border-radius: .35rem; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.skill-progress { display: flex; align-items: end; flex-wrap: wrap; gap: 1rem; margin: 1.1rem 0; padding: .9rem; border-radius: .4rem; background: var(--panel-2); }
.skill-progress > label { width: 8rem; }
.skill-progress .skill-advance { display: flex; align-items: center; gap: .65rem; width: auto; min-height: 2.6rem; }
.skill-advance input { width: 1.2rem; height: 1.2rem; }
.skill-progress input:disabled { opacity: .35; cursor: not-allowed; }
.skill-advance:has(input:disabled) { color: var(--muted); opacity: .6; }
.skill-description, .skill-upgrade { line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.skill-upgrade { border-left: 2px solid var(--yellow); padding-left: .85rem; }
.skill-upgrade strong { color: var(--yellow); }
.skill-advancement-note { color: var(--muted); line-height: 1.5; font-size: .85rem; white-space: pre-wrap; }
.skill-notes { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: 1rem; }
.skill-notes summary { cursor: pointer; color: var(--cyan); }
.skill-notes label { margin-top: .8rem; }
.compact-sheet .skill-notes textarea { min-height: 6rem; resize: vertical; }
.skill-assignment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 6rem auto; gap: .8rem; align-items: end; }
.skill-assignment > * { min-width: 0; }
.skill-assignment-preview:empty { display: none; }
.skill-assignment-preview { margin-top: 1rem; padding: 1rem; background: var(--panel-2); border-radius: .5rem; }
.custom-skill-dialog { width: min(48rem, calc(100% - 2rem)); max-height: 90vh; overflow-y: auto; }
.custom-skill-dialog textarea { width: 100%; resize: vertical; }
.custom-skill-dialog .form-grid .contact-choice { display: flex; flex-direction: row; align-items: center; gap: .65rem; }
.custom-skill-dialog .contact-choice input { width: 1.2rem; height: 1.2rem; }
.custom-skill-dialog fieldset { display: grid; gap: .8rem; min-width: 0; border: 1px solid var(--line); }
@media (max-width: 900px) { .skill-assignment { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 550px) { .skill-assignment { grid-template-columns: minmax(0, 1fr); } .skill-card .section-title { flex-wrap: wrap; } .skill-progress { gap: .75rem; } }
.campaign-lobby { width: min(80rem, 100%); margin: 0 auto; padding: clamp(1rem, 3vw, 3rem); }
.lobby-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; }
.lobby-header h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
.lobby-actions { margin-bottom: 2rem; }
.campaign-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.campaign-card { display: flex; flex-direction: column; border-top: .3rem solid var(--yellow); }
.campaign-card h2 { margin-top: 1rem; overflow-wrap: anywhere; }
.campaign-card > .inline-actions { margin-top: auto; }
.campaign-card-mark { background: linear-gradient(120deg, #221b0e, #111b20); border-radius: .5rem; padding: 1rem; }
.campaign-card-mark img { width: 3rem; height: 3rem; object-fit: contain; }
#site-results { display: grid; gap: 1rem; margin-top: 1.5rem; }
.site-campaign, .member-edit { min-width: 0; }
.storage-allowance { min-width: 0; display: grid; gap: .8rem; }
.storage-usage { --storage-color: var(--cyan); }
.storage-usage.near { --storage-color: var(--yellow); }
.storage-usage.over { --storage-color: var(--red); }
.storage-usage-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .35rem .75rem; margin-bottom: .5rem; font-size: .8rem; }
.storage-usage-heading > span { color: var(--muted); }
.storage-usage-heading strong { color: var(--storage-color); font-variant-numeric: tabular-nums; }
.storage-usage-track { appearance: none; display: block; width: 100%; height: .7rem; overflow: hidden; border: 1px solid var(--line); border-radius: 99rem; background: #090909; color: var(--storage-color); }
.storage-usage-track::-webkit-progress-bar { background: #090909; border-radius: inherit; }
.storage-usage-track::-webkit-progress-value { background: var(--storage-color); border-radius: inherit; }
.storage-usage-track::-moz-progress-bar { background: var(--storage-color); border-radius: inherit; }
.storage-usage-detail { margin: .45rem 0 0; color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.storage-usage.over .storage-usage-detail { color: #ff8e8b; }
@media (max-width: 700px) { .lobby-header { flex-direction: column; } .topbar-meta { flex-wrap: wrap; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--ink); background:
  radial-gradient(circle at 12% 20%, rgba(237,0,97,.16), transparent 30rem),
  radial-gradient(circle at 83% 70%, rgba(0,214,231,.12), transparent 36rem),
  linear-gradient(rgba(0,0,0,.66), rgba(0,0,0,.9)),
  url('/static/wallpaper.svg') center/cover fixed;
}
body.login-mode { background:
  linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,.42)),
  url('/static/wallpaper.webp') center/cover fixed;
}
:is(button, a:where(.route-link)), input, textarea, select { font: inherit; }
:is(button, a:where(.route-link)), input, textarea, select, summary { outline: none; }
:focus-visible { box-shadow: 0 0 0 3px var(--focus); border-color: var(--focus) !important; }
#password-dialog { max-height:calc(100dvh - 2rem); overflow-y:auto; }
:is(button, a:where(.route-link)) { cursor: pointer; }
a { color: var(--cyan); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .brand-mark, .metric strong { letter-spacing: .025em; }
h1 { font-size: clamp(2rem, 5vw, 4rem); line-height: .95; text-transform: uppercase; }
h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); }
h3 { font-size: 1rem; text-transform: uppercase; color: var(--yellow); }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--yellow); color: #000; padding: .75rem 1rem; font-weight: 800; }
.skip-link:focus { top: 1rem; }
.login-view { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; }
.login-card { width: min(29rem, 100%); border-top: .5rem solid var(--yellow); background: rgba(8,8,8,.92); backdrop-filter: blur(8px); }
.login-icon { display: block; width: 5rem; aspect-ratio: 1; margin: 0 0 1rem; border: 2px solid var(--yellow); border-radius: 1rem; object-fit: cover; }
.login-card h1 { margin-bottom: .5rem; }
.lede { color: var(--pink); font-weight: 800; text-transform: uppercase; }
.eyebrow { color: var(--cyan); text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; font-weight: 800; }
.fine-print, small, .muted { color: var(--muted); }
.panel, .card, .state-card, details.editor { background: var(--panel); border: 1px solid var(--line); border-radius: .75rem; box-shadow: var(--shadow); }
.panel { padding: clamp(1rem, 3vw, 2rem); }
.card { padding: 1rem; }
label { display: grid; gap: .35rem; color: #d8d6ce; font-size: .84rem; font-weight: 700; }
input, textarea, select { width: 100%; min-height: 2.6rem; border: 1px solid #4d4b47; border-radius: .4rem; background: #0f0f0f; color: var(--ink); padding: .62rem .7rem; }
textarea { min-height: 7rem; resize: vertical; }
input[type="checkbox"] { width: 1.2rem; min-height: 1.2rem; accent-color: var(--pink); }
.remember-choice { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; margin: .8rem 0 .6rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: .4rem; background: rgba(255,210,47,.04); cursor: pointer; }
.remember-choice:hover { border-color: var(--yellow); }
.remember-choice input[type="checkbox"] { appearance: none; flex: none; display: grid; place-content: center; width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; padding: 0; border: 2px solid var(--yellow); border-radius: .25rem; background: #090909; cursor: pointer; }
.remember-choice input[type="checkbox"]:checked { background: var(--yellow); }
.remember-choice input[type="checkbox"]:checked::after { content: ''; width: .3rem; height: .6rem; margin-top: -.15rem; border: solid #090909; border-width: 0 .15rem .15rem 0; transform: rotate(45deg); }
@media (forced-colors: active) { .remember-choice input[type="checkbox"] { appearance: auto; } .remember-choice input[type="checkbox"]::after { display: none; } }
:is(button, a:where(.route-link)) { border: 1px solid transparent; border-radius: .4rem; padding: .62rem .9rem; background: #292929; color: var(--ink); font-weight: 800; }
:is(button, a:where(.route-link)):hover { filter: brightness(1.15); }
:is(button, a:where(.route-link)).primary { background: var(--yellow); color: #090909; }
:is(button, a:where(.route-link)).danger { background: var(--red); color: #080808; }
:is(button, a:where(.route-link)).ghost { background: transparent; border-color: var(--line); }
:is(button, a:where(.route-link)).wide { width: 100%; margin-top: .5rem; }
.form-error { color: #ff8e8b; min-height: 1.3rem; margin: .5rem 0 0; }
.topbar { position: sticky; top: 0; z-index: 20; height: 4.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; background: rgba(4,4,4,.95); border-bottom: 1px solid #343434; backdrop-filter: blur(14px); }
.brand { display: flex; gap: .75rem; align-items: center; min-width: 0; }
.brand > span:last-child { min-width: 0; display: grid; }
.brand strong, .brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 3rem; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--yellow); border-radius: .55rem; background: #000; flex: none; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.topbar-meta { display: flex; align-items: center; gap: .65rem; }
.user-badge { border: 1px solid var(--pink); color: #ff77aa; padding: .32rem .55rem; border-radius: 99rem; font-size: .78rem; font-weight: 800; }
.save-status { color: var(--muted); font-size: .78rem; }
.save-status.saving { color: var(--yellow); }
.save-status.saved { color: var(--green); }
.save-status.error { color: #ff8e8b; }
.workspace { display: grid; grid-template-columns: 15rem minmax(0,1fr); min-height: calc(100vh - 4.4rem); }
.sidebar { position: sticky; top: 4.4rem; height: calc(100vh - 4.4rem); padding: 1rem; background: rgba(8,8,8,.96); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: .4rem; }
.nav-button { position: relative; text-align: left; background: transparent; color: #c9c6bd; border-color: transparent; }
.nav-button.active { color: #080808; background: var(--yellow); }
.nav-pip, .inline-pip { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 99rem; background: var(--pink); color: white; font-size: .67rem; font-weight: 1000; }
.nav-pip { float: right; }
.nav-button.active .nav-pip { background: #080808; color: var(--yellow); }
.sidebar-foot { margin-top: auto; padding: .8rem; color: #bbb; font-size: .8rem; line-height: 1.6; }
.signal-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 .8rem var(--green); }
main { min-width: 0; padding: clamp(1rem, 2.5vw, 2rem); }
.view { max-width: 92rem; margin: 0 auto; }
.view-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1rem; }
.view-head p { color: var(--muted); }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric { min-height: 8.5rem; border-top: .3rem solid var(--cyan); }
.metric strong { display: block; font-size: clamp(1.7rem, 4vw, 3rem); color: var(--ink); overflow-wrap: anywhere; }
.metric span { color: var(--muted); text-transform: uppercase; font-size: .73rem; letter-spacing: .12em; }
.metric.alert { border-color: var(--pink); }
.metric.floor { border-color: var(--yellow); }
.world-counters { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 1rem; margin-bottom: 1rem; }
.world-counter { min-width: 0; border-top: .4rem solid var(--pink); padding-block: clamp(1rem, 2vw, 1.5rem); }
.world-counter.crawler-counter { border-top-color: var(--cyan); }
.world-counter-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; font-weight: 900; }
.world-counter-heading small { font-size: .72rem; }
.collapse-view-switch { display: inline-flex; gap: .15rem; padding: .15rem; border: 1px solid var(--line); border-radius: .45rem; background: #0b0b0b; }
.collapse-view-switch :is(button, a:where(.route-link)) { padding: .3rem .55rem; border-radius: .3rem; background: transparent; color: var(--muted); font-size: .73rem; letter-spacing: 0; text-transform: none; }
.collapse-view-switch :is(button, a:where(.route-link))[aria-pressed="true"] { background: var(--yellow); color: #090909; }
.world-counter > strong { display: block; margin: .8rem 0 .25rem; color: var(--yellow); font-size: clamp(2.3rem, 5.5vw, 4.7rem); line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.crawler-counter > strong { color: var(--cyan); }
.world-counter > p { margin: 0; color: var(--muted); font-weight: 700; }
.counter-controls { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.counter-controls summary { width: fit-content; color: var(--yellow); cursor: pointer; font-weight: 800; }
.counter-controls-body { display: grid; gap: .7rem; margin-top: .8rem; }
.collapse-management { margin-top: 1rem; }
.counter-adjust-form { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr); align-items: end; gap: .6rem; }
.counter-adjust-form .inline-actions { display: flex; flex-wrap: wrap; }
.counter-adjust-form :is(button, a:where(.route-link)) { min-height: 2.55rem; }
.counter-set-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .6rem; margin-top: .9rem; }
.counter-controls .counter-set-form { margin-top: 0; }
.counter-controls .inline-actions { flex-wrap: wrap; }
.counter-controls .control-hint { margin: 0; }
.stack { display: grid; gap: 1rem; }
.form-grid { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .8rem; }
.section-title h2, .section-title h3 { margin: 0; }
.visibility { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--line); border-radius: 99rem; padding: .2rem .55rem; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.visibility.gm { border-color: var(--pink); color: #ff75ac; }
.visibility.shared { border-color: var(--cyan); color: var(--cyan); }
.health-bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: .25rem; }
.health-slot { display: grid; place-items: center; aspect-ratio: 1.5; min-width: 0; min-height: 2.4rem; padding: 0; border: 1px solid rgba(255,255,255,.48); border-radius: .22rem; background: #d51d2b; color: white; text-shadow: 0 1px 2px #000; font-size: .82rem; }
.health-slot:nth-child(2) { background: #df3427; }
.health-slot:nth-child(3) { background: #e65424; }
.health-slot:nth-child(4) { background: #e97922; }
.health-slot:nth-child(5) { background: #e99d22; }
.health-slot:nth-child(6) { background: #d7b829; }
.health-slot:nth-child(7) { background: #adc438; }
.health-slot:nth-child(8) { background: #7cbd42; }
.health-slot:nth-child(9) { background: #45b34c; }
.health-slot:nth-child(10) { background: #18a85a; }
.health-slot:hover { filter: brightness(1.2); transform: translateY(-1px); }
.health-slot.lost { background: #241719; border-color: #603139; color: #8f777b; text-shadow: none; }
.health-editor { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 1rem; margin-bottom: 1rem; }
.health-editor strong { display: block; margin-bottom: .45rem; color: var(--yellow); text-transform: uppercase; letter-spacing: .08em; }
.character-card { cursor: pointer; position: relative; overflow: hidden; }
.character-card.active { border-color: var(--yellow); }
.character-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .25rem; background: var(--pink); }
.character-card strong { font-size: 1.2rem; }
.compact-head { margin-bottom: .65rem; }
.play-hero { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: .35rem solid var(--yellow); }
.play-identity { display: grid; grid-template-columns: 6rem minmax(0,1fr); align-items: center; gap: 1rem; }
.play-identity .portrait { min-height: 6rem; height: 6rem; }
.play-identity h1 { margin: .1rem 0; }
.play-identity p { margin: .15rem 0; }
.play-vitals { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.play-health-card { grid-column: 1 / -1; border-top: .35rem solid var(--pink); }
.play-health-card h2 { margin: .15rem 0 0; font-size: clamp(2rem,5vw,3.5rem); }
.play-hero, .play-health-card, .play-stat-card, .play-status, .play-attacks, .play-hotlist-panel, .play-pets { padding-block: clamp(1rem, 2vw, 1.5rem); }
.play-stat-card { min-height: 9rem; display: grid; align-content: center; justify-items: center; gap: .4rem; border-top: .3rem solid var(--yellow); text-align: center; }
.play-stat-card.mana { border-top-color: var(--cyan); }
.play-stat-card small { color: var(--muted); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.play-stat-card > strong { color: var(--yellow); font-size: clamp(2rem,6vw,3.7rem); line-height: 1; }
.play-stat-card.mana > strong { color: var(--cyan); }
.play-stat-card strong span { color: var(--muted); font-size: .42em; }
.play-columns { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 1rem; align-items: start; }
.play-hotlist { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.play-hotlist-item { width: 100%; display: grid; grid-template-columns: 2.3rem minmax(0,1fr) auto; gap: .65rem; align-items: start; padding: .85rem; border: 1px solid var(--line); border-radius: .45rem; background: #0c0c0c; color: var(--ink); text-align: left; font-weight: 400; }
.play-hotlist-item > .hotlist-number { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--yellow); color: #090909; font-weight: 1000; }
.play-hotlist-item .hotlist-copy { min-width: 0; }
.play-hotlist-item strong, .play-hotlist-item small { display: block; }
.play-hotlist-item small { margin-top: .15rem; color: var(--cyan); text-transform: capitalize; }
.play-hotlist-item p { margin: .35rem 0 0; color: var(--muted); }
.hotlist-action { cursor: pointer; }
.hotlist-action:hover { border-color: var(--yellow); filter: brightness(1.08); }
.hotlist-action.insufficient { opacity: .52; cursor: not-allowed; }
.hotlist-action.insufficient:hover { border-color: var(--line); filter: none; }
.cast-cost { align-self: center; padding: .28rem .48rem; border: 1px solid #665717; border-radius: 99rem; color: var(--yellow); font-size: .7rem; font-weight: 900; white-space: nowrap; }
.insufficient .cast-cost { border-color: var(--line); color: var(--muted); }
.control-hint { margin: .55rem 0 0; color: var(--muted); font-size: .75rem; }
.section-title .control-hint { margin-top: .25rem; }
.resource-stepper { display: flex; gap: .35rem; margin-top: .25rem; }
.resource-stepper :is(button, a:where(.route-link)) { min-width: 2.5rem; padding: .35rem .65rem; border-color: #356b75; background: #10282d; color: var(--cyan); }
.play-stat-card.favor .resource-stepper :is(button, a:where(.route-link)) { border-color: #806523; background: #30270e; color: var(--yellow); }
.resource-stepper :is(button, a:where(.route-link)):disabled { opacity: .35; cursor: not-allowed; }
.movement-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.movement-chips span { padding: .35rem .6rem; border: 1px solid #665717; border-radius: .4rem; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.movement-chips strong { margin-left: .25rem; color: var(--yellow); }
.live-attacks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .65rem; margin: 0; padding: 0; list-style: none; }
.live-attack { min-width: 0; padding: .85rem; border: 1px solid #665717; border-left: .25rem solid var(--yellow); border-radius: .45rem; background: #171508; }
.live-attack > strong { display: block; margin-bottom: .5rem; color: var(--yellow); }
.live-attack-rolls { display: grid; gap: .4rem; }
.live-attack-rolls span { overflow-wrap: anywhere; }
.live-attack-rolls small { display: inline-block; min-width: 4rem; margin-right: .5rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.live-attack p { margin: .55rem 0 0; color: var(--muted); font-size: .84rem; }
.dashboard-attack-block { margin: .8rem 0; }
.dashboard-attack-block h4 { margin: 0 0 .5rem; color: var(--yellow); text-transform: uppercase; }
.play-pets { display: grid; gap: .75rem; }
.play-pets > .section-title { margin-bottom: 0; }
.play-pet-card { min-width: 0; padding: 1rem .9rem; border: 1px solid var(--line); border-top: .3rem solid var(--pink); border-radius: .55rem; background: #0c0c0c; }
.play-pet-card .section-title { margin-bottom: .55rem; }
.play-pet-card h3 { margin: .1rem 0; }
.play-pet-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; margin-top: .7rem; }
.play-pet-stats span { display: grid; gap: .1rem; padding: .55rem; border: 1px solid var(--line); border-radius: .35rem; text-align: center; }
.play-pet-stats small { color: var(--muted); }
.status-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.status-chip { display: inline-flex; padding: .35rem .6rem; border: 1px solid var(--cyan); border-radius: 99rem; background: #092127; color: var(--cyan); font-size: .78rem; font-weight: 900; }
.status-chip.danger-text { border-color: #a74161; background: #2b1019; }
.sheet-header { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: stretch; }
.name-with-honors { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem; min-width: 0; }
.name-with-honors h1, .name-with-honors h3 { margin: 0; overflow-wrap: anywhere; }
.honor-marks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.honor-badge { position: relative; display: inline-block; }
.honor-badge > summary { padding: .12rem .3rem; border: 1px solid currentColor; border-radius: .3rem; list-style: none; cursor: pointer; font-size: .95rem; font-weight: 900; line-height: 1.2; letter-spacing: .03em; }
.honor-badge > summary::-webkit-details-marker { display: none; }
.honor-star { color: #ffd24f; }
.honor-skull { color: #e8e3dc; }
.honor-golden-skull { color: #fbd35d; }
.honor-golden-skull > summary { background: #3d2d0a; }
.honor-exact { position: absolute; z-index: 12; top: calc(100% + .35rem); left: 0; min-width: max-content; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: .35rem; background: #101010; color: var(--ink); box-shadow: var(--shadow); font-size: .72rem; font-weight: 800; }
.honor-editor { margin: .8rem 0; padding: .7rem; border: 1px solid #685a2a; border-radius: .45rem; }
.honor-editor legend { padding: 0 .3rem; color: var(--yellow); font-weight: 900; }
.honor-editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .7rem; }
.honor-control { min-width: 0; }
.honor-control input { font-variant-numeric: tabular-nums; }
.honor-stepper { display: flex; gap: .3rem; margin-top: .3rem; }
.honor-stepper :is(button, a:where(.route-link)) { min-width: 2rem; padding: .25rem .45rem; }
.portrait { min-height: 8rem; border: 1px dashed #555; border-radius: .5rem; background: #111; display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait .entity-image { display: block; width: 100%; height: 100%; }
.entity-image:focus-visible, .entity-image-link:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.portrait-upload { display: block; margin-top: .45rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: .4rem; text-align: center; cursor: pointer; }
.portrait-upload input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; pointer-events: none; }
.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.stat-card { padding: .7rem; background: #111; border: 1px solid var(--line); border-radius: .5rem; }
.stat-card h3 { font-size: .75rem; }
.stat-values { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.stat-mod { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; padding: .45rem .55rem; border: 1px solid #555; border-radius: .35rem; color: var(--muted); font-size: .72rem; font-weight: 900; }
.stat-mod output { color: var(--yellow); font-size: 1.05rem; }
.resource-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
.resource-grid.compact { grid-template-columns: repeat(4, 1fr); margin-top: 1rem; }
.mana-strip { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr); gap: .7rem; align-items: stretch; margin: 1rem 0; }
.mana-strip > div { display: grid; grid-template-columns: 1fr auto; gap: .2rem .7rem; align-items: center; padding: .65rem .8rem; border: 1px solid #306c7a; border-radius: .45rem; background: #092229; }
.mana-strip output { grid-row: 1 / 3; grid-column: 2; color: var(--cyan); font-size: 2rem; font-weight: 1000; }
.mana-strip small { align-self: start; }
.defense-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin: 1rem 0; }
.defense-card { padding: 1rem; border: 1px solid #2f8190; border-top: .35rem solid var(--cyan); border-radius: .6rem; background: #0b1719; }
.defense-card.dr { border-color: #825479; border-top-color: var(--pink); background: #1c0d16; }
.defense-card > span { color: var(--muted); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.defense-card > output { display: block; margin: .15rem 0 .3rem; font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 1000; line-height: 1; }
.defense-card p { margin-bottom: .7rem; }
.bonus-editor { padding: .65rem; border: 1px solid var(--line); border-radius: .45rem; background: rgba(0,0,0,.25); }
.bonus-editor summary { cursor: pointer; font-weight: 900; }
.bonus-editor summary span { float: right; color: var(--yellow); }
.bonus-editor .list-section { margin-top: .65rem; padding: .65rem; box-shadow: none; }
.bonus-editor .list-section h2 { font-size: 1rem; }
.list-table { width: 100%; border-collapse: collapse; }
.list-table th { color: var(--muted); font-size: .72rem; text-align: left; text-transform: uppercase; }
.list-table th, .list-table td { border-bottom: 1px solid var(--line); padding: .4rem; vertical-align: top; }
.list-table input, .list-table textarea { min-height: 2.15rem; padding: .4rem; }
.list-table textarea { height: 2.4rem; }
.list-table .row-delete { padding: .4rem .55rem; color: #ff8e8b; }
.reference-tabs :is(button, a:where(.route-link)).active { border-color: var(--yellow); color: var(--yellow); }
.reference-controls { margin: 1rem 0; }
.reference-controls .search-row { margin: 0; align-items: end; }
.reference-controls .search-row > label:first-child { flex: 2 1 18rem; }
.reference-controls #rule-count { margin-bottom: 0; }
.reference-guidance { margin: 1rem 0; }
.reference-guidance summary { cursor: pointer; color: var(--cyan); font-weight: 700; }
.reference-grid { align-items: start; }
.reference-grid .rule-card { padding: 1.25rem; }
.reference-grid .section-title { align-items: start; }
.reference-grid .section-title h2 { font-size: 1.35rem; }
.reference-grid .rule-page { white-space: nowrap; }
.reference-detail { border-top: 1px solid var(--line); padding-top: .75rem; }
.reference-detail > strong { color: var(--cyan); font-size: .85rem; }
.reference-detail p { margin: .4rem 0 0; }
.reference-detail + .reference-detail { margin-top: .9rem; }
.reference-upgrades { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .65rem .8rem; margin: .65rem 0 0; }
.reference-upgrades dt { color: var(--yellow); font-size: .85rem; font-weight: 700; padding-top: .1rem; }
.reference-upgrades dd { margin: 0; overflow-wrap: anywhere; }
.reference-effect, .reference-upgrades dd { white-space: pre-wrap; }
.reference-table-wrap { overflow-x: auto; margin: .85rem 0; border: 1px solid var(--line); border-radius: .4rem; }
.reference-table { width: 100%; border-collapse: collapse; font-size: .9rem; text-align: left; }
.reference-table caption { padding: .5rem .65rem; text-align: left; color: var(--cyan); font-weight: 700; }
.reference-table th, .reference-table td { padding: .55rem .65rem; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.reference-table thead th { color: var(--yellow); background: #080808; }
.reference-table tbody th { font-weight: 600; }
.reference-notes { padding-left: 1.25rem; margin: .85rem 0 0; }
.reference-notes li + li { margin-top: .55rem; }
.reference-method { border: 1px solid var(--line); border-radius: .35rem; padding: .15rem .4rem; }
.reference-method.method-conditional { color: var(--yellow); }
.reference-method.method-special { color: var(--cyan); }
.reference-caution { border-left: .2rem solid var(--yellow); padding-left: .7rem; color: var(--yellow); }
.gear-slots { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.gear-slot { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-top: .25rem solid var(--yellow); border-radius: .55rem; background: #101010; }
.gear-slot h3 { margin: 0; }
.gear-equipped-row { display: grid; gap: .5rem; padding-top: .8rem; min-width: 0; }
.gear-equipped-row + .gear-equipped-row { border-top: 1px solid var(--line); margin-top: .8rem; }
.gear-item-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.gear-options { display: grid; gap: .3rem; max-height: 16rem; overflow-y: auto; padding: .5rem; border: 1px solid var(--cyan); border-radius: .4rem; background: #080f10; }
.gear-options[hidden] { display: none; }
.gear-options :is(button, a:where(.route-link)) { display: grid; gap: .3rem; width: 100%; text-align: left; background: #142022; border: 1px solid var(--line); }
.gear-options :is(button, a:where(.route-link)):hover, .gear-options :is(button, a:where(.route-link)):focus-visible { border-color: var(--yellow); background: #29250a; }
.gear-options small { color: var(--muted); font-weight: normal; }
.gear-options strong { overflow-wrap: anywhere; }
.gear-accessories, .gear-hands { grid-column: 1 / -1; }
.gear-hand-slots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.gear-hand-slots > .gear-equipped-row + .gear-equipped-row { border-top: 0; margin-top: 0; }
@media (max-width: 900px) { .gear-hand-slots { grid-template-columns: 1fr; } }
.gear-hand-blocked { margin-top: .8rem; padding: .8rem; border: 1px dashed var(--line); border-radius: .4rem; color: var(--muted); }
.gear-hand-blocked p { margin-bottom: 0; }
.gear-two-handed { display: flex; align-items: center; gap: .6rem; }
.gear-two-handed input { width: 1.2rem; height: 1.2rem; flex: none; accent-color: var(--yellow); }
.hotlist-table th:first-child, .hotlist-table td:first-child { width: 4rem; text-align: center; }
.tab-row { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0; }
.tab-row :is(button, a:where(.route-link)).active { background: var(--cyan); color: #000; }
.sheet-identity { border-top: .35rem solid var(--yellow); }
.sheet-identity h1 { margin-bottom: .25rem; }
.sheet-tabs { position: sticky; top: 4.4rem; z-index: 12; display: flex; gap: .35rem; overflow-x: auto; padding: .6rem; background: rgba(5,5,5,.96); border: 1px solid var(--line); border-radius: .65rem; box-shadow: var(--shadow); scrollbar-width: thin; }
.sheet-tab { flex: 0 0 auto; border-color: #4b4942; background: #151515; white-space: nowrap; }
.sheet-tab.active { background: var(--yellow); color: #080808; border-color: var(--yellow); }
.sheet-page { display: grid; gap: 1rem; }
.compact-sheet { gap: .75rem; }
.compact-sheet > .panel, .compact-sheet .sheet-page > .panel, .compact-sheet .sheet-page > .list-section { padding: clamp(.85rem, 1.7vw, 1.25rem); }
.compact-sheet .sheet-header { grid-template-columns: 6rem minmax(0,1fr); }
.compact-sheet .portrait { min-height: 6rem; height: 6rem; }
.compact-sheet .sheet-identity h1 { font-size: clamp(1.8rem, 4vw, 3.2rem); }
.compact-sheet .sheet-tabs { padding: .45rem; }
.compact-sheet .sheet-tab { padding: .5rem .7rem; }
.compact-sheet .sheet-page { gap: .75rem; }
.module-switches { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin: 1rem 0 0; padding: .75rem; border: 1px solid #5d3850; border-radius: .5rem; }
.module-switches legend { padding: 0 .35rem; color: #ff77aa; font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.module-switches label { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: .35rem; }
.essentials-panel { border-top: .35rem solid var(--pink); }
.level-grinding { display: grid; grid-template-columns: minmax(8rem, .35fr) minmax(12rem, 1fr); gap: .8rem; margin-bottom: 1rem; padding: .85rem; border: 1px solid #725c18; border-radius: .55rem; background: #1b1808; }
.level-grinding label:first-child { color: var(--yellow); font-size: 1rem; }
.level-grinding label:first-child input { min-height: 3.5rem; font-size: 2rem; font-weight: 1000; color: var(--yellow); }
.level-grinding small { color: var(--muted); }
.scratch-pad textarea { min-height: 32rem; font-family: inherit; line-height: 1.55; }
.scratch-pad .gm-note-field { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #6b2421; }
.optional-placeholder { min-height: 25rem; align-content: start; }
.crawler-admin-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.delete-crawler { margin: 0; }
.message-access { border-top: .35rem solid var(--cyan); }
.message-access #access-refresh { white-space: nowrap; }
.messaging-tabs { margin: 0 0 1rem; }
.access-player-label { max-width: 30rem; margin: 1rem 0 1.25rem; }
.access-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.access-columns > div { min-width: 0; }
.access-columns h3 { margin-bottom: .75rem; }
.access-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.access-person, .access-result { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; padding: .75rem; border: 1px solid var(--line); border-radius: .5rem; background: #111; }
.access-person strong, .access-result strong { display: block; overflow-wrap: anywhere; }
.access-person small, .access-result small { display: block; margin-top: .15rem; }
.access-person :is(button, a:where(.route-link)) { flex: none; }
.access-results { display: grid; gap: .5rem; margin-top: .7rem; }
.access-results p { margin: 0; }
.access-result { width: 100%; text-align: left; border-color: #386466; }
.access-result:hover, .access-result:focus-visible { background: #17383a; }
.access-result > span:last-child { flex: none; color: var(--cyan); font-size: .78rem; font-weight: 900; }
.combatant-card { align-content: start; }
.combatant-create-dialog { width: min(70rem, calc(100% - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; }
.combatant-create-dialog > .section-title { align-items: start; }
.combatant-create-dialog h2 { margin-bottom: .5rem; }
.combatant-identity { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.combatant-extra > summary { color: var(--muted); cursor: pointer; font-weight: 700; }
.combatant-extra > .stack { margin-top: .8rem; }
.combatant-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: .6rem; margin: .8rem 0; }
.combatant-metrics p { margin: 0; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: .4rem; background: #111; }
.combatant-metrics small { display: block; margin-bottom: .15rem; color: var(--muted); }
.combatant-metrics strong { display: block; }
.dashboard-debuff, .dashboard-pet-debuff { padding-top: .7rem; border-top: 1px solid var(--line); }
.dashboard-debuff label, .dashboard-pet-debuff label { flex: 1 1 9rem; }
.pet-combatant { border-top: .3rem solid var(--pink); }
.pet-manager { position: sticky; top: 8.9rem; z-index: 8; padding-block: .85rem; }
.pet-manager .section-title { margin: 0; }
.pet-card { border-top: .35rem solid var(--pink); }
.pet-health { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 4rem; justify-content: start; width: 100%; max-width: 42rem; overflow-x: auto; }
.pet-health .health-slot { width: 4rem; min-width: 4rem; min-height: 2.65rem; aspect-ratio: 1.5; }
.pet-health-heading { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--yellow); }
.pet-speed { padding: .65rem .8rem; border: 1px solid #356f78; border-radius: .4rem; background: #0b2024; color: var(--muted); }
.pet-speed strong { color: var(--cyan); }
.pet-stats { margin: 1rem 0; }
.pet-stats small { color: var(--yellow); }
.pet-gear { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: .5rem; }
.pet-gear-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .5rem; margin-top: .5rem; }
.pet-attacks { border-color: #775d19; }
.attack-editor { display: grid; gap: .55rem; padding: .75rem; border: 1px solid var(--line); border-radius: .45rem; background: #0c0c0c; }
.attack-editor + .attack-editor { margin-top: .7rem; }
.attack-editor-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; align-items: start; }
.attack-editor-fields label:first-child, .attack-editor-fields label:last-child { grid-column: span 2; }
.attack-preview { display: flex; justify-content: space-between; align-items: center; gap: .7rem; padding: .55rem .65rem; border-left: .25rem solid var(--yellow); background: #1a170a; }
.attack-summary-row td { padding-top: 0; color: var(--muted); background: #0b0b0b; }
.attack-notes { margin-top: .5rem; border-top: 1px solid var(--line); padding-top: .45rem; }
.attack-notes > summary { width: fit-content; color: var(--cyan); cursor: pointer; font-weight: 800; }
.attack-notes label { display: block; margin-top: .6rem; }
.attack-notes textarea { width: 100%; min-height: 5rem; }
[data-list-section="skills"], [data-list-section="spells"] { min-width: 0; }
.progress-table-scroll { max-width: 100%; overflow-x: auto; }
.progress-table { table-layout: fixed; min-width: 50rem; }
[data-list-section="spells"] .progress-table { min-width: 58rem; }
.progress-table [data-list-column="rank"] { width: 6rem; }
.progress-table [data-list-column="stat"] { width: 6.5rem; }
.progress-table [data-list-column="check_type"] { width: 8rem; }
.progress-table [data-list-column="grinding_hours"] { width: 5rem; }
.progress-table [data-list-column="marked_for_advancement"] { width: 3.5rem; text-align: center; }
.progress-table [data-list-column="remove"] { width: 4.5rem; }
.progress-table select { padding: .4rem; }
.progress-table [data-list-key="grinding_hours"] { font-variant-numeric: tabular-nums; }
.advance-check { display: flex; align-items: center; justify-content: center; min-height: 2.6rem; }
.list-table .advance-check input { min-height: 1.2rem; margin: 0; }
.dashboard-attacks { margin: .7rem 0; padding: .6rem .6rem .6rem 1.7rem; border: 1px solid #5f501c; border-radius: .4rem; background: #171508; }
.list-section + .list-section { margin-top: 0; }
.messaging-layout { display: grid; grid-template-columns: minmax(17rem, 23rem) minmax(0, 1fr); gap: 1rem; min-height: 65vh; }
.message-sidebar { display: grid; align-content: start; gap: .8rem; min-width: 0; }
.new-chat { background: rgba(20,20,20,.96); }
.people-picker { position: relative; }
.people-picker input { width: 100%; }
.people-results { display: grid; gap: .15rem; max-height: 15rem; overflow-y: auto; padding: .35rem; border: 1px solid var(--cyan); border-radius: .4rem; background: #111; box-shadow: 0 .55rem 1.2rem #000a; }
.people-results[hidden] { display: none; }
.people-results :is(button, a:where(.route-link)) { width: 100%; text-align: left; border: 0; border-radius: .25rem; background: transparent; }
.people-results :is(button, a:where(.route-link)):hover, .people-results :is(button, a:where(.route-link)):focus-visible { background: #17383a; }
.people-selected { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2.2rem; align-items: center; }
.people-selected p { margin: 0; }
.person-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .3rem .2rem .6rem; border: 1px solid var(--cyan); border-radius: 999px; background: #0c2b2e; font-size: .82rem; }
.person-chip :is(button, a:where(.route-link)) { min-height: 1.4rem; padding: 0 .35rem; border: 0; background: transparent; font-size: 1rem; }
.conversation-list { display: grid; gap: .45rem; }
.conversation-card { display: grid; gap: .2rem; width: 100%; min-width: 0; text-align: left; border-color: var(--line); background: #111; }
.conversation-card.active { border-color: var(--cyan); box-shadow: inset .25rem 0 var(--cyan); }
.conversation-card span { color: var(--cyan); font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.conversation-card .closed-label { color: #c3bdb1; }
.conversation-card small { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.message-thread { display: grid; grid-template-rows: auto minmax(18rem, 1fr) auto; min-width: 0; padding: 0; overflow: hidden; }
.thread-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.thread-head h2 { margin: .15rem 0; }
.message-stream { display: flex; flex-direction: column; gap: .75rem; overflow-y: auto; padding: 1.2rem; background: rgba(4,4,4,.6); }
.message-bubble { align-self: flex-start; max-width: min(80%, 42rem); padding: .7rem .85rem; border: 1px solid #4a4945; border-radius: .2rem .75rem .75rem .75rem; background: #191919; }
.message-bubble.mine { align-self: flex-end; border-color: #1b7f87; border-radius: .75rem .2rem .75rem .75rem; background: #0c2b2e; }
.message-bubble.npc { border-color: var(--pink); background: #2b0d1c; }
.message-bubble.system { border-color: var(--yellow); background: #29240b; }
.message-bubble header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; color: var(--yellow); font-size: .76rem; font-weight: 900; }
.message-bubble time { color: var(--muted); font-weight: 500; }
.message-bubble p { margin: .35rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-controls { display: flex; justify-content: flex-end; gap: .35rem; margin-top: .55rem; }
.message-controls :is(button, a:where(.route-link)) { padding: .25rem .45rem; font-size: .7rem; }
.danger-text { color: #ff8e8b; }
.message-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .7rem; padding: 1rem; border-top: 1px solid var(--line); }
.message-compose textarea { min-height: 4rem; max-height: 12rem; }
.compose-hint { grid-column: 1 / -1; font-size: .75rem; }
.closed-chat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .7rem; padding: 1rem; border-top: 1px solid var(--line); background: #171717; }
.closed-chat p { grid-column: 1 / -1; margin: 0; color: var(--muted); }
.closed-chat textarea { min-height: 4rem; resize: none; }
.closed-chat textarea:disabled, .closed-chat :is(button, a:where(.route-link)):disabled { border-color: #393939; background: #242424; color: #777; cursor: not-allowed; opacity: 1; }
.message-send-as { grid-column: 1 / -1; display: flex; align-items: center; gap: .7rem; }
.message-send-as select { max-width: 18rem; }
.archived-chats { margin-top: .8rem; border-color: #6a4f25; }
.archived-notice { padding: 1rem; border-top: 1px solid var(--line); color: var(--yellow); text-align: center; }
.record-card { border-left: .3rem solid var(--pink); }
.record-card.shared { border-left-color: var(--cyan); }
.record-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--muted); font-size: .75rem; }
.floor-workspace { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.floor-rail { position: sticky; top: 5.4rem; display: grid; gap: .7rem; max-height: calc(100vh - 6.4rem); overflow-y: auto; padding: .85rem; border: 1px solid var(--line); border-radius: .75rem; background: #111; }
.floor-rail-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; color: var(--yellow); text-transform: uppercase; font-size: .78rem; }
.floor-rail-head span { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.floor-rail-list { display: grid; gap: .45rem; }
.floor-rail-item { display: grid; grid-template-columns: 2.4rem minmax(0,1fr); align-items: center; gap: .45rem; width: 100%; padding: .5rem; text-align: left; border: 1px solid var(--line); background: #191919; }
.floor-rail-item.active { border-color: var(--yellow); background: #302808; }
.floor-rail-number { color: var(--yellow); font-size: 1.25rem; font-weight: 1000; }
.floor-rail-item strong, .floor-rail-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.floor-rail-item small { font-weight: 500; }
.floor-live-dot { grid-column: 2; color: var(--green); font-size: .65rem; letter-spacing: .13em; }
.floor-new { box-shadow: none !important; }
.floor-main { min-width: 0; }
.floor-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: .35rem solid var(--yellow); }
.floor-header h2 { margin: 0 0 .25rem; font-size: clamp(1.45rem,3vw,2.25rem); text-transform: uppercase; }
.floor-header p:last-child { margin: 0; color: var(--muted); }
.floor-live-label { padding: .4rem .7rem; border: 1px solid var(--green); border-radius: 99rem; color: var(--green); font-size: .75rem; font-weight: 900; white-space: nowrap; }
.floor-tabs { position: sticky; top: 4.4rem; z-index: 9; display: flex; gap: .25rem; overflow-x: auto; margin: .75rem 0 1rem; padding: .35rem; border: 1px solid var(--line); border-radius: .6rem; background: #101010; }
.floor-tabs :is(button, a:where(.route-link)) { flex: 0 0 auto; background: transparent; color: #c4c1b7; white-space: nowrap; }
.floor-tabs :is(button, a:where(.route-link)).active { background: var(--yellow); color: #111; }
.floor-content { min-width: 0; }
.floor-overview-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(14rem,.8fr); gap: 1rem; align-items: start; }
.floor-brief { border-top: .3rem solid var(--cyan); }
.floor-brief textarea[name="gm_notes"] { min-height: 12rem; }
.save-hint { color: var(--muted); font-size: .75rem; }
.floor-overview-side { display: grid; gap: 1rem; }
.floor-summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.floor-summary-card { display: grid; align-content: center; justify-items: start; min-height: 6rem; padding: .8rem; border: 1px solid var(--line); border-top: .2rem solid var(--pink); background: #171717; text-align: left; }
.floor-summary-card small { color: var(--ink); font-size: .75rem; }
.floor-summary-card strong { font-size: 1.55rem; color: var(--yellow); }
.floor-summary-card span { color: var(--muted); font-size: .7rem; }
.floor-peek { padding: 1rem; }
.floor-peek .section-title { align-items: baseline; }
.floor-peek .section-title h2 { font-size: 1.15rem; }
.floor-quick-list { margin: 0; padding: 0; list-style: none; }
.floor-quick-list li { display: grid; grid-template-columns: 5rem minmax(0,1fr); gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.floor-quick-list span { color: var(--cyan); font-size: .75rem; text-transform: uppercase; }
.floor-quick-list :is(button, a:where(.route-link)) { padding: 0; background: transparent; text-align: left; }
.floor-quick-list :is(button, a:where(.route-link)):hover { color: var(--yellow); }
.floor-map-peek { width: 100%; max-height: 12rem; object-fit: contain; border: 1px solid var(--line); background: #080808; }
.atlas-workspace { display: grid; grid-template-columns: minmax(14rem,.38fr) minmax(0,1fr); gap: 1rem; align-items: start; }
.atlas-sidebar { position: sticky; top: 8.8rem; max-height: calc(100vh - 9.5rem); overflow-y: auto; }
.atlas-sidebar .panel { padding: 1rem; }
.atlas-sidebar .section-title span, .atlas-detail-grid .section-title span { color: var(--muted); font-size: .75rem; }
.atlas-tree { display: grid; gap: .3rem; margin: .75rem 0 1rem; }
.atlas-tree-item { display: flex; align-items: center; gap: .4rem; width: 100%; padding: .52rem .6rem; border: 1px solid transparent; background: #191919; text-align: left; }
.atlas-tree-item span { color: var(--cyan); }
.atlas-tree-item strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlas-tree-item.active { border-color: var(--yellow); color: var(--yellow); background: #2c260f; }
.atlas-sidebar details.editor { margin-top: .5rem; box-shadow: none; }
.atlas-ideas { border-top: .25rem solid var(--pink); }
.atlas-idea-list { display: grid; gap: .4rem; margin-top: .85rem; }
.atlas-idea { padding: .65rem !important; box-shadow: none !important; }
.atlas-idea summary { overflow-wrap: anywhere; font-size: .82rem; }
.atlas-idea.resolved { opacity: .65; }
.atlas-main { min-width: 0; }
.atlas-view-toggle { display: inline-flex; gap: .25rem; margin-bottom: .75rem; padding: .25rem; border: 1px solid var(--line); border-radius: .55rem; background: #111; }
.atlas-view-toggle :is(button, a:where(.route-link)) { background: transparent; }
.atlas-view-toggle :is(button, a:where(.route-link)).active { background: var(--yellow); color: #101010; }
.atlas-place-detail .empty-state { margin: 0; }
.atlas-place-hero { border-top: .3rem solid var(--cyan); }
.atlas-place-hero h2 { margin: 0; }
.atlas-cover { width: 100%; max-height: 19rem; margin-bottom: 1rem; object-fit: cover; border-radius: .4rem; }
.atlas-summary { color: var(--ink); font-size: 1.05rem; font-weight: 650; }
.atlas-place-hero details.editor { margin-top: 1rem; box-shadow: none; }
.atlas-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; align-items: start; }
.atlas-detail-grid .panel { padding: 1rem; }
.atlas-detail-grid details.editor { margin-top: .7rem; box-shadow: none; }
.atlas-connection { display: flex; justify-content: space-between; align-items: start; gap: .5rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.atlas-connection > div { min-width: 0; }
.atlas-connection small, .atlas-connection strong { display: block; }
.atlas-connection small { color: var(--cyan); text-transform: uppercase; font-size: .68rem; }
.atlas-connection strong { margin: .18rem 0; overflow-wrap: anywhere; }
.atlas-connection p { margin: .3rem 0 0; color: var(--muted); white-space: pre-wrap; font-size: .82rem; }
.atlas-connection img { float: left; width: 4rem; height: 3rem; margin-right: .6rem; object-fit: cover; border-radius: .2rem; }
.atlas-connection :is(button, a:where(.route-link)) { flex: 0 0 auto; padding: .25rem .5rem; }
.atlas-inbound, .atlas-backlink { display: block; width: 100%; margin: .3rem 0; border: 1px solid var(--line); color: var(--cyan); background: #102024; text-align: left; font-size: .8rem; }
.atlas-backlinks { margin: .7rem 0; }
.atlas-backlinks > strong { display: block; margin-bottom: .4rem; font-size: .8rem; }
@media (max-width: 900px) { .atlas-detail-grid { grid-template-columns: 1fr; } }
.floor-directory-tools, .floor-map-tools { display: grid; grid-template-columns: minmax(10rem,1fr) repeat(2,minmax(10rem,1fr)); gap: .65rem; align-items: start; margin-bottom: 1rem; }
.floor-map-tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
.floor-add { box-shadow: none !important; }
.floor-add summary { color: var(--yellow); }
.floor-add form { padding-top: .3rem; }
.floor-add .inline-actions label { flex: 1 1 9rem; }
.floor-entry-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; align-items: start; }
.combatant-directory .floor-entry-list { grid-template-columns: 1fr; }
.grid.two > .combatant-record { grid-column: 1 / -1; }
.floor-entry { min-width: 0; border-left: .25rem solid var(--pink) !important; }
.floor-entry summary { display: flex; align-items: center; gap: .6rem; }
.floor-entry-kind { flex: 0 0 auto; padding: .2rem .35rem; border-radius: .25rem; background: #29210a; color: var(--yellow); font-size: .67rem; text-transform: uppercase; }
.floor-entry-summary { margin: .65rem 0; font-weight: 700; }
.floor-entry-details { white-space: pre-wrap; color: var(--muted); }
.floor-entry .record-edit { margin: 1rem 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.combatant-sheet { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-left: .25rem solid var(--yellow); border-radius: .5rem; background: #0d0e0e; }
.combatant-display { display: grid; grid-template-columns: minmax(8rem,.38fr) minmax(0,1fr); gap: 1rem; align-items: start; }
.combatant-image { display: block; background: #070707; border: 1px solid var(--line); border-radius: .35rem; overflow: hidden; }
.combatant-image img { display: block; width: 100%; max-height: 26rem; object-fit: contain; }
.combatant-image-placeholder { display: grid; place-items: center; min-height: 8rem; border: 1px dashed var(--line); color: var(--muted); }
.combatant-stat-block h3 { margin: .1rem 0; font-size: 1.3rem; }
.combatant-stat-block .section-title { align-items: start; }
.combatant-health { display: grid; grid-template-columns: repeat(10, minmax(1.5rem, 2rem)); gap: .18rem; overflow-x: auto; padding: .4rem 0 .65rem; }
.combatant-health-slot { display: grid; place-items: center; min-height: 1.75rem; border-radius: .2rem; background: #d51d2b; color: white; font-size: .72rem; font-weight: 900; }
.combatant-health-slot.tone-1 { background: #df3427; }
.combatant-health-slot.tone-2 { background: #e65424; }
.combatant-health-slot.tone-3 { background: #e97922; }
.combatant-health-slot.tone-4 { background: #e99d22; }
.combatant-health-slot.tone-5 { background: #d7b829; }
.combatant-health-slot.tone-6 { background: #adc438; }
.combatant-health-slot.tone-7 { background: #7cbd42; }
.combatant-health-slot.tone-8 { background: #45b34c; }
.combatant-health-slot.tone-9 { background: #18a85a; }
.combatant-health-slot.lost { background: #312428; color: #a38b91; }
.combatant-stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-top: 1px solid var(--line); }
.combatant-stats span { display: grid; gap: .15rem; min-width: 0; padding: .5rem .2rem; text-align: center; overflow-wrap: anywhere; }
.combatant-stats small { color: var(--muted); font-weight: 900; }
.combatant-attacks { margin: .4rem 0; padding-left: 1.2rem; }
.combatant-attacks li { padding: .45rem 0; border-top: 1px solid var(--line); }
.combatant-attacks p, .combatant-notes, .combatant-examine, .combatant-boss-notes p { margin: .3rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.combatant-examine { padding: .7rem; border-left: .2rem solid var(--cyan); background: #0a1b1e; }
.combatant-boss-notes { margin-top: .7rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.combatant-editor { margin-top: 1rem; }
.combatant-editor .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.combatant-editor label :is(button, a:where(.route-link)) { margin-top: .45rem; }
.combatant-stat-inputs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .5rem; }
.combatant-edit > .section-title { margin-top: .5rem; }
.combatant-edit [data-combatant-attacks] { display: grid; gap: .65rem; }
.floor-map-peek-link { display: block; }
.floor-map-peek-link img { width: 100%; max-height: 12rem; object-fit: contain; border: 1px solid var(--line); background: #080808; }
.atlas-cover-link { display: block; margin-bottom: 1rem; }
.atlas-cover-link img { width: 100%; max-height: 19rem; object-fit: cover; border-radius: .4rem; }
.atlas-linked-image { float: left; width: 4rem; height: 3rem; margin-right: .6rem; }
.atlas-linked-image img { width: 100%; height: 100%; object-fit: cover; border-radius: .2rem; }
.floor-unlink { width: 100%; color: #ff9a97; }
.floor-map-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .65rem; }
.floor-map-tab { display: grid; gap: .15rem; text-align: left; background: #1b1b1b; border-color: var(--line); }
.floor-map-tab.active { color: #111; background: var(--yellow); }
.floor-map-tab.active small { color: #333; }
.floor-map-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(15rem,.7fr); gap: 1rem; align-items: start; }
.floor-map-stage { position: relative; width: 100%; overflow: hidden; border: 2px solid var(--line); border-radius: .65rem; background: #090909; cursor: crosshair; }
.floor-map-stage img { display: block; width: 100%; height: auto; }
.map-pin { position: absolute; z-index: 2; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 2px solid #111; border-radius: 50%; background: var(--yellow); color: #111; transform: translate(-50%,-50%); box-shadow: 0 2px 12px #000; }
.map-pin.active { background: var(--cyan); }
.map-instruction { margin: .5rem 0 1rem; font-size: .8rem; }
.floor-pin-panel { padding: 1rem; }
.floor-pin-panel h3 { margin: 0; }
.floor-pin-list { display: grid; gap: .35rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.floor-pin-list :is(button, a:where(.route-link)) { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; border: 1px solid var(--line); background: #191919; }
.floor-pin-list :is(button, a:where(.route-link)).active { border-color: var(--cyan); }
.floor-pin-list span { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--yellow); color: #111; font-size: .7rem; }
.pin-record-preview { max-height: 22rem; overflow-y: auto; margin: .75rem 0; padding: .85rem; border: 1px solid var(--cyan); border-radius: .4rem; background: #0a1a1d; }
.pin-record-preview h4 { margin: .2rem 0 .65rem; color: var(--yellow); }
.pin-record-preview p { margin: .5rem 0; white-space: pre-wrap; }
#floor-pin-create, #floor-pin-edit { padding-top: .8rem; border-top: 1px solid var(--line); }
#floor-map-edit { margin-top: 1rem; padding: 1rem; }
.tag { background: #262626; padding: .15rem .4rem; border-radius: .25rem; }
details.editor { padding: .85rem; }
details.editor summary { cursor: pointer; font-weight: 900; }
details.editor[open] summary { margin-bottom: 1rem; }
.rule-card { border-top: .25rem solid var(--yellow); }
.rule-page { color: var(--yellow); font-weight: 900; }
.search-row { display: grid; grid-template-columns: minmax(0,1fr) 13rem; gap: .6rem; margin-bottom: 1rem; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.media-card { overflow: hidden; padding: 0; }
.media-card > a { display: block; aspect-ratio: 16/10; background: #111; }
.media-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-card .media-body { padding: .85rem; }
.drop-zone { border: 2px dashed #5d5b54; padding: 1rem; border-radius: .6rem; }
.empty-state, .state-card { min-height: 12rem; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 2rem; }
.spinner { width: 2rem; height: 2rem; border: .22rem solid #3b3b3b; border-top-color: var(--yellow); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast-region { position: fixed; z-index: 100; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; width: min(24rem, calc(100% - 2rem)); }
.toast { background: #181818; border: 1px solid var(--line); border-left: .35rem solid var(--green); border-radius: .5rem; box-shadow: var(--shadow); padding: .8rem 1rem; }
.toast.error { border-left-color: var(--red); }
.battle-control { display: grid; gap: 1rem; margin-bottom: 1rem; border-top: .35rem solid var(--yellow); }
.battle-title-row { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(9rem, .36fr) auto; gap: 1rem; align-items: end; }
.battle-round { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.battle-round > small { color: var(--muted); text-transform: uppercase; font-weight: 900; letter-spacing: .1em; }
.battle-round > strong { color: var(--yellow); font-size: 2.5rem; line-height: 1; }
.battle-round > div { display: flex; gap: .35rem; }
.battle-phase { display: flex; flex-wrap: wrap; gap: .35rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.battle-phase :is(button, a:where(.route-link)) { padding: .48rem .7rem; border: 1px solid var(--line); background: #101010; font-size: .78rem; }
.battle-phase :is(button, a:where(.route-link)).active { border-color: var(--cyan); background: #0a3740; color: #a6f8ff; }
.battle-effect-strip { display: none; align-items: center; flex-wrap: wrap; gap: .45rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.battle-effect-strip > strong { color: var(--yellow); font-size: .76rem; text-transform: uppercase; }
.battle-effect-strip > span { display: flex; flex: 1; flex-wrap: wrap; gap: .35rem; }
.battle-effect-strip .status-chip { font-size: .68rem; }
.battle-effect-strip :is(button, a:where(.route-link)) { margin-left: auto; font-size: .7rem; }
.battle-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem); gap: 1rem; align-items: start; }
.battle-main, .battle-sidebar { min-width: 0; display: grid; align-content: start; gap: 1rem; }
.battle-sidebar { position: sticky; top: 5.4rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
.battle-sidebar .panel { padding: 1rem; }
.battle-add { padding: 1rem; }
.battle-add .section-title { align-items: start; }
.battle-add .section-title p { margin: .2rem 0 0; }
.battle-add-form { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(5rem, .2fr) minmax(8rem, .35fr) auto; gap: .6rem; align-items: end; }
.battle-add-form [data-battle-custom-name]:not([hidden]) { grid-column: 1 / -1; }
.battle-group { display: grid; gap: .6rem; }
.battle-group > .section-title { margin: 0; padding: .15rem .2rem; }
.battle-count { display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.7rem; border: 1px solid var(--line); border-radius: 99rem; font-size: .78rem; color: var(--yellow); }
.battle-group-empty { margin: 0; padding: 1rem; border: 1px dashed var(--line); border-radius: .55rem; color: var(--muted); }
.battle-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); gap: .7rem; align-items: start; }
.battle-card { min-width: 0; display: grid; gap: .7rem; padding: 1rem; border-top: .25rem solid var(--pink); }
.battle-group.party .battle-card { border-top-color: var(--cyan); }
.battle-group.neutral .battle-card { border-top-color: var(--yellow); }
.battle-card.down { border-color: #773138; opacity: .82; }
.battle-card-head { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.battle-card-head > div:nth-child(1), .battle-card-head > div:nth-child(2) { min-width: 0; }
.battle-card-head .eyebrow { margin: 0 0 .15rem; font-size: .61rem; overflow-wrap: anywhere; }
.battle-card-head h3 { margin: 0; overflow-wrap: anywhere; }
.battle-open-stats { margin-left: auto; flex: none; padding: .42rem .55rem; font-size: .72rem; }
.battle-portrait { width: 3rem; height: 3rem; flex: none; overflow: hidden; border-radius: .35rem; border: 1px solid var(--line); }
.battle-portrait .entity-image, .battle-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.battle-resource { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.battle-resource > span { font-size: .8rem; font-weight: 900; }
.battle-resource small { display: block; color: var(--muted); font-weight: 500; }
.battle-stepper { display: flex; align-items: center; gap: .3rem; }
.battle-stepper :is(button, a:where(.route-link)) { display: grid; place-items: center; min-width: 2.4rem; min-height: 2.4rem; padding: 0; border: 1px solid var(--line); background: #242424; font-size: 1.25rem; }
.battle-stepper strong { min-width: 4.6rem; text-align: center; color: var(--yellow); font-size: .9rem; }
.battle-stepper :is(button, a:where(.route-link)):disabled, .battle-effect-actions :is(button, a:where(.route-link)):disabled { opacity: .35; cursor: not-allowed; }
.battle-hp-progress { display: block; width: 100%; height: .55rem; border: 0; border-radius: 99rem; overflow: hidden; accent-color: var(--green); }
.battle-hp-progress::-webkit-progress-bar { background: #4c2229; }
.battle-hp-progress::-webkit-progress-value { background: linear-gradient(90deg, #df3427, #d7b829, #18a85a); }
.battle-hp-progress::-moz-progress-bar { background: #69d56d; }
.battle-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
.battle-metrics span { display: grid; align-content: center; gap: .15rem; min-width: 0; padding: .4rem .25rem; border: 1px solid var(--line); border-radius: .3rem; text-align: center; }
.battle-metrics small { color: var(--muted); font-size: .62rem; text-transform: uppercase; }
.battle-metrics strong { font-size: .77rem; overflow-wrap: anywhere; }
.battle-attacks { border-top: 1px solid var(--line); padding-top: .55rem; font-size: .77rem; }
.battle-attacks > strong { color: var(--yellow); text-transform: uppercase; font-size: .68rem; letter-spacing: .1em; }
.battle-attacks ul { padding-left: 1rem; margin: .35rem 0 0; }
.battle-attacks li { margin-bottom: .3rem; line-height: 1.35; }
.battle-attacks li small { display: block; color: var(--muted); }
.battle-attacks details { margin-top: .3rem; }
.battle-attacks summary { color: var(--cyan); cursor: pointer; }
.battle-card .status-chips { margin: 0; }
.battle-more { border-top: 1px solid var(--line); padding-top: .5rem; }
.battle-more > summary, .battle-effect-create > summary { color: var(--cyan); cursor: pointer; font-size: .77rem; font-weight: 800; }
.battle-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: .8rem 0; }
.battle-detail-grid .full { grid-column: 1 / -1; }
.battle-detail-grid label { font-size: .7rem; }
.battle-detail-grid textarea { min-height: 4rem; }
.battle-set-resource { display: flex; gap: .35rem; align-items: end; }
.battle-set-resource label { flex: 1; min-width: 0; }
.battle-set-resource input { min-width: 0; }
.battle-set-resource :is(button, a:where(.route-link)) { flex: none; }
.battle-core { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; color: var(--muted); font-size: .72rem; }
.battle-core strong { color: var(--ink); }
.battle-effect-list { display: grid; gap: .5rem; }
.battle-effect { display: flex; justify-content: space-between; gap: .5rem; padding: .65rem; border: 1px solid var(--line); border-radius: .4rem; background: #0e0e0e; }
.battle-effect.expired { border-color: #8b353a; }
.battle-effect strong, .battle-effect small { display: block; }
.battle-effect small { color: var(--muted); font-size: .7rem; margin-top: .2rem; }
.battle-effect p { font-size: .75rem; margin: .4rem 0 0; }
.battle-effect-actions { display: flex; align-items: start; gap: .2rem; flex-wrap: wrap; justify-content: flex-end; }
.battle-effect-actions :is(button, a:where(.route-link)) { padding: .17rem .35rem; min-width: 1.6rem; }
.battle-duration { color: var(--yellow); font-size: .72rem; white-space: nowrap; padding-top: .25rem; }
.battle-effect-create { border-top: 1px solid var(--line); margin-top: .9rem; padding-top: .8rem; }
.battle-effect-create form { margin-top: .8rem; }
.battle-tools { display: grid; gap: .5rem; }
.battle-tools h2 { margin: 0 0 .25rem; }
.battle-tools .control-hint { margin: .3rem 0 0; }
dialog { width: min(30rem, calc(100% - 2rem)); border: 1px solid var(--line); border-top: .4rem solid var(--yellow); border-radius: .7rem; background: #141414; color: var(--ink); padding: 1.5rem; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(0,0,0,.75); backdrop-filter: blur(5px); }
.dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.inline-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.danger-zone { border-color: #6b2421; background: #1b0d0c; }
.mobile-only { display: none; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
@media (max-width: 1050px) {
  .battle-effect-strip { display: flex; }
  .battle-layout { grid-template-columns: 1fr; }
  .battle-sidebar { position: static; max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battle-title-row { grid-template-columns: 1fr 1fr; }
  .battle-round { grid-column: 1 / -1; }
  .floor-overview-grid, .floor-map-layout, .atlas-workspace { grid-template-columns: 1fr; }
  .atlas-sidebar { position: static; max-height: none; }
  .floor-directory-tools { grid-template-columns: 1fr 1fr; }
  .floor-directory-tools > label { grid-column: 1 / -1; }
  .floor-entry-list { grid-template-columns: 1fr; }
  .grid.four { grid-template-columns: repeat(2, 1fr); }
  .grid.three { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .resource-grid { grid-template-columns: repeat(3, 1fr); }
  .gear-slots { grid-template-columns: 1fr; }
  .play-columns { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .world-counters { grid-template-columns: 1fr; }
  .battle-sidebar { grid-template-columns: 1fr; }
  .battle-add-form { grid-template-columns: 1fr 1fr; }
  .battle-add-form > label:first-child { grid-column: 1 / -1; }
  .battle-add .section-title { flex-direction: column; }
  .floor-workspace { grid-template-columns: 1fr; }
  .floor-rail { position: static; max-height: none; }
  .floor-rail-list { display: flex; overflow-x: auto; padding-bottom: .2rem; }
  .floor-rail-item { flex: 0 0 11rem; }
  .floor-rail-head { justify-content: start; }
  .floor-tabs { top: 4.4rem; }
  .floor-map-tools { grid-template-columns: 1fr; }
  body { background-attachment: scroll; }
  .mobile-only { display: inline-flex; }
  .workspace { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 30; top: 4.4rem; left: 0; width: min(18rem, 82vw); transform: translateX(-105%); transition: transform .18s ease; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .topbar-meta .save-status { display: none; }
  .brand strong { font-size: .86rem; }
  .brand-mark { width: 2.4rem; }
  main { padding: 1rem; }
  .grid.two, .grid.three, .grid.four, .form-grid, .search-row, .defense-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .sheet-header { grid-template-columns: 1fr; }
  .portrait { min-height: 12rem; }
  .list-table { display: block; overflow-x: auto; }
  .progress-table { display: table; overflow-x: visible; }
  .view-head { display: grid; }
  .messaging-layout { grid-template-columns: 1fr; }
  .access-columns { grid-template-columns: 1fr; }
  .message-thread { min-height: 38rem; }
  .thread-head { display: grid; }
  .attack-editor-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .play-vitals { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .combatant-display { grid-template-columns: 1fr; }
  .combatant-image img { max-height: 18rem; }
}
@media (max-width: 460px) {
  .counter-set-form { grid-template-columns: 1fr; }
  .battle-title-row, .battle-add-form { grid-template-columns: 1fr; }
  .battle-round, .battle-add-form > label:first-child { grid-column: auto; }
  .battle-phase :is(button, a:where(.route-link)) { flex: 1; }
  .battle-detail-grid { grid-template-columns: 1fr; }
  .battle-detail-grid .full { grid-column: auto; }
  .battle-card-head { flex-wrap: wrap; }
  .battle-open-stats { margin-left: 0; }
  .combatant-editor .form-grid { grid-template-columns: 1fr; }
  .combatant-stat-inputs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .floor-header { align-items: start; flex-direction: column; }
  .floor-directory-tools, .floor-summary-grid, .atlas-detail-grid { grid-template-columns: 1fr; }
  .floor-directory-tools > label { grid-column: auto; }
  .topbar { padding-inline: .5rem; }
  .topbar-meta .user-badge { display: none; }
  .grid.four, .grid.three { grid-template-columns: 1fr; }
  .stat-grid, .resource-grid { grid-template-columns: 1fr 1fr; }
  .health-editor, .message-compose, .closed-chat, .mana-strip { grid-template-columns: 1fr; }
  .health-bar { gap: .12rem; }
  .health-slot { min-height: 2rem; font-size: .68rem; }
  .resource-grid.compact { grid-template-columns: repeat(2, 1fr); }
  .message-bubble { max-width: 92%; }
  .pet-gear-row { grid-template-columns: 1fr auto; }
  .pet-gear-row input:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .level-grinding, .attack-editor-fields { grid-template-columns: 1fr; }
  .attack-editor-fields label:first-child, .attack-editor-fields label:last-child { grid-column: auto; }
  .attack-preview { align-items: start; flex-direction: column; }
  .pet-health { grid-template-columns: none; grid-auto-columns: 2.5rem; }
  .pet-health .health-slot { width: 2.5rem; min-width: 2.5rem; }
  .play-hero { align-items: stretch; flex-direction: column; }
  .play-hero > :is(button, a:where(.route-link)) { width: 100%; }
  .play-identity { grid-template-columns: 4.5rem minmax(0,1fr); }
  .play-identity .portrait { min-height: 4.5rem; height: 4.5rem; }
  .play-stat-card { min-height: 6.5rem; }
  .play-attacks .section-title { align-items: flex-start; flex-direction: column; }
  .play-hotlist-item { grid-template-columns: 2.3rem minmax(0,1fr); }
  .play-hotlist-item .cast-cost { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Inventory and unopened rewards share a compact, table-friendly rhythm. */
.loot-boxes, .inventory-items { display: grid; gap: 1rem; }
.loot-boxes .section-title, .inventory-items .section-title { margin-bottom: 0; }
.inventory-footer { display: flex; justify-content: flex-end; padding-top: .25rem; }
.inventory-balances .section-title { margin-bottom: .5rem; }
.inventory-balances .form-grid { max-width: 42rem; }
.inventory-balances input { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.saferoom-toggle { display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: .5rem; }
.saferoom-toggle input { flex: none; }
.box-list { display: grid; gap: .55rem; }
.box-card, .box-award, .inventory-card { border: 1px solid var(--line); border-radius: .55rem; background: rgba(5,5,5,.45); }
.box-card > summary, .box-award > summary, .inventory-card > summary { cursor: pointer; padding: .8rem 1rem; }
.box-card > summary { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem 1rem; }
.player-box { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; }
.player-box strong { color: var(--yellow); }
.player-box span { color: var(--cyan); font-weight: 800; }
.box-card > summary strong, .inventory-card > summary strong { color: var(--yellow); }
.box-card > summary span, .inventory-card > summary span { color: var(--cyan); font-weight: 800; }
.inventory-columns, .inventory-card > summary { display: grid; grid-template-columns: minmax(0, 2fr) 5rem minmax(0, 3fr) 6rem; gap: .8rem; align-items: center; }
.inventory-list { display: grid; gap: .5rem; }
.inventory-tabs { display: flex; flex-wrap: wrap; gap: .45rem; }
.inventory-tabs .active { background: var(--yellow); color: #080808; border-color: var(--yellow); }
.inventory-tabs span { margin-left: .4rem; opacity: .7; }
.inventory-order-controls { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.inventory-order-controls p { margin: 0; }
.inventory-sort { padding: .4rem .55rem; background: transparent; color: var(--cyan); border: 1px solid var(--line); white-space: nowrap; font-size: .78rem; }
.inventory-sort[aria-pressed="true"] { color: var(--yellow); border-color: var(--yellow); }
.inventory-columns .inventory-sort { justify-self: start; min-height: 2rem; }
.inventory-columns [data-inventory-sort="quantity"] { justify-self: center; }
.inventory-columns [data-inventory-sort="value"] { justify-self: end; }
.inventory-arrange, .inventory-tab-create { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; padding: .7rem 1rem; }
.inventory-arrange { border-top: 1px solid var(--line); background: #121b1c; }
.inventory-arrange > span { align-self: center; color: var(--muted); font-size: .78rem; }
.inventory-arrange :is(button, a:where(.route-link)) { padding: .45rem .7rem; }
.inventory-arrange label { flex: 1; min-width: 10rem; }
.inventory-tab-create label { flex: 1; min-width: 10rem; }
.inventory-drag { padding: .1rem .3rem; border: 1px solid var(--line); cursor: grab; font-size: 1.1rem; }
.inventory-drop-target { outline: 2px solid var(--cyan); }
.inventory-gm-sort { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .65rem; border: 1px solid var(--line); border-radius: .4rem; }
.inventory-gm-sort input { width: 1.2rem; height: 1.2rem; accent-color: var(--yellow); }
.inventory-gm-sort small { color: var(--muted); font-weight: normal; }
.inventory-columns { padding: 0 1rem; color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.inventory-columns span:nth-child(2), .inventory-card [data-inventory-quantity] { text-align: center; font-variant-numeric: tabular-nums; }
.inventory-card > summary > strong, .inventory-card > summary > small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-card > summary > small { color: var(--muted); }
.inventory-actions { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }
.inventory-card > summary .inventory-expand { color: var(--muted); transition: transform .15s ease; }
.inventory-card[open] > summary .inventory-expand { transform: rotate(180deg); }
.inventory-quick-delete { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid #823834; background: #2b1010; color: #ff8e8b; font-size: 1.2rem; line-height: 1; }
.inventory-quick-delete:hover { border-color: #ff8e8b; background: #471718; }
.box-editor, .inventory-detail { display: grid; gap: .8rem; padding: 1rem; border-top: 1px solid var(--line); }
.box-content-list { display: grid; gap: .7rem; }
.box-randomizer { border: 1px solid var(--line); border-radius: .5rem; padding: .75rem; background: rgba(255,210,47,.04); }
.box-randomizer .control-hint { margin: .6rem 0 0; }
.box-junk-toggle { display: flex; align-items: center; gap: .4rem; }
.box-junk-toggle input { flex: none; }
.box-reward-summary { margin: 0; color: var(--muted); line-height: 1.5; }
.box-content-row { display: grid; gap: .65rem; padding: .85rem; border: 1px solid var(--line); border-radius: .5rem; }
.box-content-main { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .65rem; }
.box-extra-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .65rem; }
.box-content-main input[readonly] { color: var(--muted); background: #1b1b1b; }
.box-item-advanced { border-top: 1px solid var(--line); padding-top: .5rem; }
.box-item-advanced > summary { color: var(--cyan); cursor: pointer; font-weight: 800; }
.box-extra-grid { margin-top: .7rem; }
.box-extra-grid label:nth-child(1), .box-extra-grid label:nth-child(2) { grid-column: span 2; }
.box-extra-grid textarea { min-height: 4rem; }
.box-content-row [data-remove-box-content] { justify-self: end; }
.open-boxes { min-height: 3.5rem; width: 100%; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .08em; }
.open-boxes:disabled { opacity: .48; cursor: not-allowed; }
.loot-reveal-dialog { width: min(38rem, calc(100% - 2rem)); max-height: min(85vh, 50rem); overflow-y: auto; }
.loot-reveal-dialog .eyebrow { color: var(--yellow); }
.loot-reveal-contents { margin-top: 1.2rem; }
.loot-reward-list { display: grid; gap: .65rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.loot-reward { padding: .85rem 1rem; border: 1px solid var(--line); border-left: .25rem solid var(--yellow); border-radius: .4rem; background: rgba(255,210,47,.06); }
.loot-reward > div { display: flex; justify-content: space-between; gap: 1rem; }
.loot-reward strong { color: var(--yellow); }
.loot-reward span { color: var(--cyan); font-weight: 900; font-variant-numeric: tabular-nums; }
.loot-reward p { margin: .45rem 0 0; color: var(--muted); line-height: 1.5; }
.gm-value { border: 1px solid var(--pink); border-radius: .5rem; padding: .75rem; max-width: 18rem; }
@media (max-width: 900px) { .box-content-main, .box-extra-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .box-content-main, .box-extra-grid { grid-template-columns: 1fr; } .box-extra-grid label:nth-child(1), .box-extra-grid label:nth-child(2) { grid-column: auto; } .inventory-columns, .inventory-card > summary { grid-template-columns: minmax(0, 1.4fr) 3rem minmax(0, 1.2fr) 5rem; gap: .35rem; } .inventory-actions { gap: .1rem; } .inventory-drag { padding: .1rem; } .inventory-order-controls { align-items: start; } .counter-adjust-form { grid-template-columns: 1fr; } }

.spell-definition { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(0, 3fr); gap: .45rem .8rem; margin: 1rem 0; }
.spell-definition dt { color: var(--cyan); font-weight: 700; }
.spell-definition dd { margin: 0; overflow-wrap: anywhere; }

/* Links retain the existing control treatment and native browser link actions. */
a.route-link { text-decoration: none; }
a.route-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
#navigation-error { margin: 2rem; }

.route-selected { outline: 1px solid var(--cyan); outline-offset: 2px; }