:root {
  color-scheme: dark;
  font-family: "Cascadia Mono", "IBM Plex Mono", Consolas, monospace;
  --ink: #d9e1c9;
  --muted: #7d8d7c;
  --line: #3c4c40;
  --line-hi: #60715e;
  --panel: #0e1712;
  --panel2: #09100c;
  --gold: #d8c86b;
  --cyan: #72c5b2;
  --teal: #3c8f83;
  --rust: #c37a55;
  --danger: #e07964;
  --friendly: #8fd391;
  --neutral: #d9c97d;
  --hostile: #e47764;
  --unknown: #8f85a8;
  background: #060a07;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #060a07; }
body { min-height: 100vh; overflow: hidden; }
button, input { font: inherit; }
button { color: var(--ink); background: #152019; border: 1px solid var(--line-hi); padding: .58rem .78rem; cursor: pointer; }
button:hover, button:focus-visible { border-color: var(--gold); color: #fff4b7; outline: none; }
.hidden { display: none !important; }
.eyebrow { color: var(--gold); letter-spacing: .13em; font-size: .69rem; text-transform: uppercase; }
.eyebrow.subdued { color: var(--muted); margin-top: .1rem; }
.small, .muted { color: var(--muted); font-size: .79rem; }
.boot-card { width: min(760px, calc(100vw - 32px)); margin: 11vh auto 0; padding: 2rem; border: 1px solid var(--line); background: linear-gradient(180deg,#111b15,#09100c); box-shadow: 0 24px 90px #000b, inset 0 1px #ffffff08; }
.boot-card h1 { margin: .45rem 0 .7rem; font-size: clamp(1.75rem,4vw,3.1rem); font-weight: 600; }
.boot-card p { max-width: 65ch; line-height: 1.55; }
.boot-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.35rem 0 .8rem; }
.status-line { margin-top: 1.5rem; color: var(--cyan); }
.game-shell { --hud-width:310px; --chat-height:188px; --hud-panel-opacity:1; height:100vh; display:grid; grid-template-columns:minmax(0,1fr) var(--hud-width); grid-template-rows:62px minmax(0,1fr) var(--chat-height) 34px; grid-template-areas:"top top" "world side" "chat side" "foot foot"; }
.game-shell.sidebar-left { grid-template-columns:var(--hud-width) minmax(0,1fr); grid-template-areas:"top top" "side world" "side chat" "foot foot"; }
.game-shell.sidebar-left .right-panel { border-left:0; border-right:1px solid var(--line); }
.topbar { grid-area: top; display:flex; align-items:center; justify-content:space-between; padding: .62rem 1rem; border-bottom:1px solid var(--line); background:#0a110d; box-shadow:0 1px #000; }
.brand-block strong { display:block; margin-top:.18rem; }
.top-status { display:flex; gap:1rem; font-size:.69rem; color:var(--muted); align-items:center; }
.top-status b { color:var(--cyan); font-weight:500; }
.world-frame { grid-area: world; position:relative; min-width:0; min-height:0; background:#030605; overflow:hidden; }
#world { width:100%; height:100%; display:block; image-rendering:pixelated; cursor: crosshair; }
.scanlines { pointer-events:none; position:absolute; inset:0; opacity:.045; background:repeating-linear-gradient(0deg,transparent,transparent 3px,#fff 4px); mix-blend-mode:overlay; }
.world-help { position:absolute; left:10px; top:8px; padding:.25rem .4rem; background:#07100bd9; border:1px solid #2f4035; color:#6d8173; font-size:.66rem; pointer-events:none; }
.toast { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); border:1px solid #788671; background:#0b110def; padding:.5rem .8rem; color:#f0e8ad; font-size:.78rem; box-shadow:0 8px 28px #000a; }
.right-panel { grid-area:side; padding:.55rem; border-left:1px solid var(--line); background:#070c09; overflow:auto; display:flex; flex-direction:column; gap:.55rem; }
.panel { border:1px solid #303f34; background:linear-gradient(180deg,#0f1812,#0b120e); padding:.62rem; box-shadow:inset 0 1px #ffffff05; }
.right-panel .panel { opacity:var(--hud-panel-opacity); }
.panel.compact { padding:.55rem; }
.panel-title { color:var(--gold); font-size:.68rem; letter-spacing:.12em; margin-bottom:.5rem; }
.meter { height:8px; border:1px solid #4b584c; background:#050806; }
.meter span { display:block; height:100%; width:0; background:linear-gradient(90deg,#9f4f41,#d28a62); transition:width .12s linear; }
.mono-row { font-size:.76rem; margin-top:.34rem; }
.data-list { display:grid; gap:.32rem; font-size:.75rem; }
.data-item { display:flex; justify-content:space-between; gap:1rem; border-bottom:1px dotted #263229; padding-bottom:.24rem; }
.data-item:last-child { border-bottom:0; }
.data-item b { color:var(--cyan); font-weight:500; }
.controls-grid { display:grid; grid-template-columns:1fr auto; gap:.28rem .58rem; font-size:.69rem; color:var(--muted); }
.controls-grid b { color:var(--ink); font-weight:400; text-align:right; }
.inspect-name { color:#f1e7ae; font-size:.95rem; }
.inspect-description { color:#a5b3a3; font-size:.73rem; line-height:1.45; margin:.52rem 0; }
.chat-panel { grid-area:chat; margin:.5rem; margin-right:0; min-height:0; display:grid; grid-template-rows:1fr auto; }
.chat-log { overflow:auto; min-height:0; padding-right:.4rem; font-size:.76rem; line-height:1.45; }
.chat-line { margin-bottom:.22rem; }
.chat-line.system { color:var(--muted); }
.chat-line.narration { color:#c1b88a; font-style:italic; }
.chat-line .who { color:var(--cyan); }
.chat-line.combat { color:#e2ad78; }
.chat-line.error { color:var(--danger); }
#chat-form { border-top:1px solid #303f34; margin-top:.4rem; padding-top:.4rem; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.4rem; }
#chat-form span { color:var(--gold); }
#chat-input { min-width:0; background:#050906; color:var(--ink); border:1px solid #303f34; padding:.42rem .52rem; outline:none; }
#chat-input:focus { border-color:var(--cyan); }
#chat-form button { padding:.36rem .6rem; font-size:.7rem; }
.footerbar { grid-area:foot; display:flex; align-items:center; gap:.9rem; padding:0 .75rem; border-top:1px solid var(--line); background:#0a110d; color:var(--muted); font-size:.69rem; }
.footerbar #nearby { flex:1; text-align:center; }
.text-button { border:0; padding:0; background:transparent; color:var(--muted); font-size:.68rem; }
.text-button:hover { color:var(--gold); }
.modal { width:min(980px,calc(100vw - 36px)); max-height:82vh; padding:0; color:var(--ink); background:#09110c; border:1px solid #536454; box-shadow:0 24px 90px #000d; }
.modal::backdrop { background:#020503d9; backdrop-filter:blur(2px); }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border-bottom:1px solid var(--line); background:#0d1710; }
.modal-head h2 { margin:.15rem 0 0; font-size:1rem; font-weight:500; }
.modal-head button { font-size:1.2rem; padding:.15rem .48rem; }
.modal-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:1rem; padding:1rem; overflow:auto; }
.modal-grid.three { grid-template-columns:1.15fr .9fr 1.2fr; }
.card-list { display:grid; gap:.45rem; }
.item-card, .fact-card { border:1px solid #2e3c31; background:#0c1510; padding:.55rem; font-size:.72rem; }
.item-card .name, .fact-card .name { color:#e1d694; font-size:.78rem; }
.item-card .meta, .fact-card .meta { color:var(--muted); margin-top:.18rem; line-height:1.35; }
.item-actions { display:flex; gap:.35rem; margin-top:.45rem; flex-wrap:wrap; }
.item-actions button { font-size:.65rem; padding:.28rem .42rem; }
.separated { margin-top:.75rem; padding-top:.75rem; border-top:1px solid #29352c; }
.journal-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; padding:1rem; overflow:auto; }
.journal-map { margin:0; padding:.75rem; overflow:auto; background:#050906; border:1px solid #29372d; color:#779b7d; font-size:.68rem; line-height:1.05; }
.disposition-friendly { color:var(--friendly)!important; }
.disposition-neutral, .disposition-passive { color:var(--neutral)!important; }
.disposition-hostile { color:var(--hostile)!important; }
.disposition-unknown { color:var(--unknown)!important; }
@media (max-width: 980px) {
  body { overflow:auto; }
  .game-shell { min-height:100vh; height:auto; grid-template-columns:1fr; grid-template-rows:62px 58vh auto 188px 34px; grid-template-areas:"top" "world" "side" "chat" "foot"; }
  .right-panel { border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chat-panel { margin:.5rem; }
  .top-status { display:none; }
  .modal-grid, .modal-grid.three, .journal-grid { grid-template-columns:1fr; }
}

.target-body { display:grid; gap:.3rem; margin-top:.55rem; }
.target-part { display:flex; justify-content:space-between; gap:.5rem; align-items:center; border-top:1px solid #283329; padding:.3rem 0; font-size:.68rem; }
.target-part button { padding:.2rem .35rem; font-size:.62rem; }
.target-part.active { color:var(--gold); }
.energy-meter { height:7px; background:#050806; border:1px solid #3e5544; margin:.35rem 0; }
.energy-meter > span { display:block; height:100%; background:linear-gradient(90deg,#45877c,#86c0a0); }
.badge-wanted { color:#ee7768; font-weight:700; }

/* Step 5O — layered, interactive skills UX */
.skills-modal { width:min(1180px,calc(100vw - 28px)); height:min(820px,88vh); max-height:88vh; overflow:hidden; }
.skills-modal-head { flex:0 0 auto; }
.skills-modal-head .small { margin-top:.22rem; max-width:72ch; }
.skills-shell { display:grid; grid-template-columns:300px minmax(0,1fr); min-height:0; height:calc(88vh - 78px); }
.skills-sidebar { min-height:0; overflow:auto; border-right:1px solid var(--line); background:#08100b; padding:.8rem; }
.skills-sidebar-head { position:sticky; top:-.8rem; z-index:2; background:#08100bf5; padding:.75rem 0 .55rem; margin-top:-.75rem; }
.skills-hub { display:grid; gap:.42rem; }
.skill-hub-card { width:100%; display:grid; grid-template-columns:34px minmax(0,1fr); gap:.55rem; text-align:left; align-items:center; padding:.62rem; background:#0b140f; border-color:#2d3c31; color:var(--ink); }
.skill-hub-card:hover { background:#101b14; }
.skill-hub-card.active { border-color:var(--gold); background:#141b12; box-shadow:inset 3px 0 #c9b75b; }
.skill-glyph { width:30px; height:30px; display:grid; place-items:center; border:1px solid #3b4b3f; background:#07100b; color:var(--cyan); font-size:1rem; flex:0 0 auto; }
.skill-glyph.large { width:42px; height:42px; font-size:1.3rem; }
.skill-hub-copy { min-width:0; display:grid; gap:.16rem; }
.skill-hub-name { color:#e6d995; font-size:.78rem; font-weight:600; }
.skill-hub-meta { color:var(--muted); font-size:.62rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-progress { display:block; height:4px; border:1px solid #27362c; background:#050906; margin-top:.16rem; }
.mini-progress > span { display:block; height:100%; background:#5e9d83; }
.mini-progress.method > span { background:#b7a85b; }
.skill-detail { min-width:0; min-height:0; overflow:auto; background:#0a120d; }
.skill-detail-header { padding:1rem 1.1rem .72rem; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#101b14,#0b130e); }
.skill-detail-title { display:flex; align-items:center; gap:.75rem; }
.skill-detail-title h3 { margin:.12rem 0 .18rem; font-size:1.25rem; font-weight:600; color:#eee1a1; }
.skill-tagline { color:#9fb0a0; font-size:.76rem; line-height:1.35; }
.skill-level-block { display:flex; align-items:center; gap:.55rem; margin-top:.75rem; }
.skill-level-number { min-width:46px; font-size:1.65rem; line-height:1; color:#f0df80; }
.skill-xp-line { color:#9eac9e; font-size:.68rem; margin-top:.14rem; }
.skill-progress { height:8px; margin-top:.6rem; background:#050806; border:1px solid #344437; }
.skill-progress > span { display:block; height:100%; background:linear-gradient(90deg,#4f8f7b,#b8a75d); }
.skill-tabs { display:flex; gap:.25rem; padding:.6rem .8rem; border-bottom:1px solid #26342b; background:#08100b; position:sticky; top:0; z-index:3; overflow:auto; }
.skill-tabs button { flex:0 0 auto; padding:.36rem .58rem; font-size:.66rem; background:#0b1510; border-color:#2b3930; color:#88988a; }
.skill-tabs button.active { color:#f3e59b; border-color:#c1ad59; background:#171b11; }
.skill-tab-body { padding:.9rem; }
.skill-overview-grid { display:grid; grid-template-columns:1.2fr .9fr; gap:.75rem; }
.skill-pane { border:1px solid #2c3a30; background:#0c1510; padding:.75rem; min-width:0; }
.skill-pane.wide { grid-column:1/-1; }
.skill-pane p { color:#9eada0; line-height:1.5; font-size:.75rem; margin:.2rem 0 0; }
.skill-lead { color:#bac6b9!important; font-size:.78rem!important; }
.skill-focus-row { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.65rem; }
.skill-chip { display:inline-block; border:1px solid #344438; padding:.22rem .38rem; color:#91b0a0; background:#08100b; font-size:.61rem; text-transform:uppercase; letter-spacing:.05em; }
.skill-training-list { display:grid; gap:.42rem; }
.skill-training-list > div { display:grid; grid-template-columns:22px 1fr; gap:.4rem; align-items:start; color:#aab6aa; font-size:.7rem; line-height:1.4; }
.skill-training-list > div > span { width:20px; height:20px; display:grid; place-items:center; border:1px solid #354338; color:var(--gold); font-size:.62rem; }
.goal-list { display:grid; gap:.4rem; }
.goal-item { border-left:2px solid #817740; background:#0a120d; padding:.48rem .55rem; color:#9fac9e; font-size:.69rem; line-height:1.4; }
.goal-item b { color:#dfd18a; font-weight:500; }
.progression-lanes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.42rem; }
.progression-lanes > div { border:1px solid #26352b; background:#08100b; padding:.5rem; display:flex; justify-content:space-between; gap:.5rem; font-size:.66rem; }
.progression-lanes span { color:#7e8e7f; }
.progression-lanes b { color:#d9cc82; font-weight:500; }
.skill-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem; margin-bottom:.7rem; }
.skill-section-head .panel-title { margin-bottom:.18rem; }
.skill-count { border:1px solid #344438; color:#85b59c; padding:.28rem .45rem; font-size:.64rem; background:#09120d; }
.method-grid, .commission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.method-card, .commission-card { border:1px solid #2a392f; background:#0c1510; padding:.66rem; min-width:0; }
.method-card.locked, .commission-card.locked { opacity:.76; background:#09110c; }
.method-card.available, .commission-card.available { border-color:#435b49; }
.method-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.65rem; }
.method-top .name { color:#e2d68f; font-size:.76rem; margin-top:.25rem; }
.method-badge { display:inline-block; font-size:.57rem; letter-spacing:.08em; color:#789a86; border:1px solid #2c4134; padding:.14rem .28rem; text-transform:uppercase; }
.status-badge { display:inline-block; flex:0 0 auto; font-size:.57rem; padding:.2rem .32rem; border:1px solid #39463b; color:#899689; max-width:170px; text-align:right; }
.status-badge.ready { color:#8fcda2; border-color:#477157; }
.status-badge.locked { color:#a18e77; border-color:#55463a; }
.method-card .meta, .commission-card .meta { color:#8e9d90; font-size:.67rem; line-height:1.45; margin-top:.5rem; }
.method-requirements { display:flex; flex-wrap:wrap; gap:.28rem; margin-top:.48rem; }
.method-requirements span { color:#849486; background:#08100b; border:1px solid #26372c; padding:.16rem .28rem; font-size:.58rem; }
.method-progress-row { display:flex; justify-content:space-between; gap:.7rem; margin-top:.5rem; color:#6f8173; font-size:.6rem; }
.unlock-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.unlock-row { display:grid; grid-template-columns:20px minmax(0,1fr); gap:.4rem; padding:.45rem 0; border-bottom:1px solid #202e25; color:#7f8c80; font-size:.69rem; }
.unlock-row:last-child { border-bottom:0; }
.unlock-row > span { color:#746e48; }
.unlock-row.done > span, .unlock-row.done b { color:#bdb46f; }
.unlock-row b { display:block; color:#a7b0a3; font-weight:500; }
.unlock-row small { display:block; color:#718074; margin-top:.12rem; line-height:1.35; }
.tool-ladder { display:grid; gap:.55rem; max-width:780px; }
.tool-tier { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:.7rem; align-items:center; border:1px solid #2a392f; padding:.7rem; background:#0a130e; }
.tool-tier.owned { border-color:#516a55; background:#0e1811; }
.tool-tier-number { width:42px; height:42px; display:grid; place-items:center; border:1px solid #455548; color:#d9c875; background:#07100b; font-size:.78rem; }
.tool-tier .name { color:#ded18b; font-size:.75rem; }
.tool-tier .meta { color:#849286; font-size:.65rem; line-height:1.4; margin-top:.18rem; }
.mastery-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:.7rem; }
.mastery-hero { display:flex; gap:.75rem; align-items:center; padding:.6rem; border:1px solid #2c3b31; background:#08100b; }
.mastery-hero strong { font-size:1.45rem; color:#dacb76; }
.mastery-hero div { color:#a3afa4; font-size:.7rem; line-height:1.4; }
.mastery-hero span { color:#718074; }
.ledger-row { display:flex; justify-content:space-between; gap:.8rem; padding:.45rem 0; border-bottom:1px solid #203027; font-size:.65rem; }
.ledger-row b { color:#b9c0b5; font-weight:500; display:block; }
.ledger-row small { color:#718074; display:block; margin-top:.1rem; }
.ledger-row > div:last-child { text-align:right; color:#809083; display:grid; gap:.1rem; }
.proficiency-scale { display:grid; gap:.3rem; }
.proficiency-scale > div { display:flex; justify-content:space-between; gap:.6rem; border-bottom:1px solid #203027; padding:.36rem 0; font-size:.63rem; }
.proficiency-scale b { color:#b6bdaf; font-weight:500; }
.proficiency-scale span { color:#718074; text-align:right; }
.agency-row { display:grid; grid-template-columns:110px 1fr; gap:.5rem; padding:.35rem 0; border-bottom:1px solid #203027; font-size:.63rem; color:#78887a; }
.agency-row span:first-child { color:#b0a769; }
.empty-skill-state { border:1px dashed #2d3b31; color:#748376; padding:1rem; font-size:.7rem; background:#08100b; }
.empty-skill-state.compact { padding:.55rem; }
.theme-field .skill-glyph, .theme-field.skill-detail-header .skill-glyph { color:#91c47d; }
.theme-process .skill-glyph, .theme-process.skill-detail-header .skill-glyph { color:#76c3b0; }
.theme-craft .skill-glyph, .theme-craft.skill-detail-header .skill-glyph { color:#d2b96c; }
.theme-social .skill-glyph, .theme-social.skill-detail-header .skill-glyph { color:#c89bc7; }
.theme-combat .skill-glyph, .theme-combat.skill-detail-header .skill-glyph { color:#d98568; }

.skill-group-tabs { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.55rem; }
.skill-group-tabs button { padding:.26rem .42rem; font-size:.59rem; color:#839387; background:#09120d; border-color:#2b3a30; }
.skill-group-tabs button.active { color:#f0df89; border-color:#a08f49; background:#171b11; }
.discovery-line { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.42rem 0; border-bottom:1px solid #203027; font-size:.67rem; }
.discovery-line b { color:#b9c2b7; font-weight:500; }
.discovery-line span { color:#7d9b89; }
.codex-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.codex-card { border:1px solid #2a392f; background:#0c1510; padding:.66rem; min-width:0; }
.codex-card .name { color:#e0d48e; margin-top:.22rem; }
.codex-facts { margin:.55rem 0 .1rem 1rem; padding:0; color:#93a396; font-size:.66rem; line-height:1.45; }

@media (max-width: 900px) {
  .skills-modal { height:90vh; max-height:90vh; }
  .skills-shell { grid-template-columns:1fr; height:calc(90vh - 84px); }
  .skills-sidebar { border-right:0; border-bottom:1px solid var(--line); max-height:235px; }
  .skills-hub { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .skill-overview-grid, .method-grid, .commission-grid, .unlock-columns, .mastery-layout, .codex-grid { grid-template-columns:1fr; }
  .skill-pane.wide { grid-column:auto; }
}


/* Step 5Q — player shell, direct skill grid, Codex deep links, customizable HUD */
.layout-hidden { display:none!important; }
.menu-button { color:#d7ca80; border:1px solid #3b493e; padding:.22rem .48rem; }
.compact-controls { grid-template-columns:auto 1fr; }
.context-actions { margin-top:.6rem; padding-top:.5rem; border-top:1px solid #25332a; }
.context-actions:empty { display:none; }


.skills-modal { width:min(1120px,calc(100vw - 28px)); height:min(800px,88vh); }
.skills-modal-head { min-height:52px; }
.skills-shell { grid-template-columns:330px minmax(0,1fr); height:calc(88vh - 53px); }
.skills-sidebar { padding:.65rem; }
.direct-skill-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; align-content:start; }
.skill-grid-tile { position:relative; min-width:0; min-height:68px; display:grid; grid-template-columns:30px 1fr; grid-template-rows:1fr auto; align-items:center; gap:.1rem .38rem; padding:.5rem; text-align:left; background:#0a130e; border:1px solid #2b3a30; color:var(--ink); }
.skill-grid-tile:hover, .skill-grid-tile.active { border-color:#a5964b; background:#111a12; }
.skill-grid-tile.active { box-shadow:inset 2px 0 #d1bf60; }
.skill-grid-tile .skill-glyph { grid-row:1/3; width:28px; height:28px; }
.skill-grid-level { justify-self:end; color:#e7d677; font-size:.84rem; }
.skill-grid-name { grid-column:2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#9eab9f; font-size:.57rem; }
.skill-hover-card { display:none; position:absolute; z-index:12; left:50%; top:calc(100% + 7px); width:180px; transform:translateX(-50%); padding:.55rem; border:1px solid #566455; background:#060b08f5; box-shadow:0 10px 30px #000c; pointer-events:none; color:#94a296; font-size:.62rem; line-height:1.45; }
.skill-hover-card b { display:block; color:#e3d88f; margin-bottom:.22rem; }
.skill-hover-card span { display:block; }
.skill-grid-tile:hover .skill-hover-card, .skill-grid-tile:focus-visible .skill-hover-card { display:block; }
.skill-empty-selection { height:100%; display:grid; place-items:center; align-content:center; gap:.5rem; color:#56675a; }
.skill-empty-selection span { font-size:2rem; color:#3f695a; }
.skill-empty-selection b { font-size:.75rem; font-weight:500; }
.skill-detail-header { padding:.85rem 1rem .7rem; }
.skill-detail-title h3 { margin:0; }
.codex-link-pane { align-content:start; }
.codex-link-row { display:flex; justify-content:space-between; align-items:center; gap:.75rem; color:#849588; font-size:.68rem; }
.codex-link-row button { padding:.3rem .55rem; font-size:.62rem; }
.codex-deep-link { max-width:520px; margin:2rem auto; text-align:center; display:grid; justify-items:center; gap:.75rem; border:1px solid #2e4034; background:#0b1510; padding:1.35rem; }
.codex-deep-link h3 { margin:0; color:#e1d68e; font-weight:500; }
.codex-stage-row { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; color:#819184; font-size:.65rem; }
.codex-stage-row span { border:1px solid #2b3a30; padding:.25rem .38rem; }

.codex-modal { width:min(980px,calc(100vw - 30px)); height:min(780px,86vh); overflow:hidden; }
.codex-toolbar { display:flex; align-items:center; gap:.6rem; padding:.65rem .8rem; border-bottom:1px solid var(--line); background:#08100b; }
.codex-toolbar input { flex:1; min-width:0; background:#050906; color:var(--ink); border:1px solid #344438; padding:.5rem .6rem; outline:none; }
.codex-toolbar input:focus { border-color:var(--cyan); }
.codex-browser { height:calc(86vh - 112px); overflow:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; padding:.8rem; align-content:start; }
.codex-browser-card { border:1px solid #2a392f; background:#0c1510; padding:.72rem; min-width:0; }
.codex-browser-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem; }
.codex-browser-head h3 { margin:.28rem 0 0; font-size:.8rem; color:#e2d68e; font-weight:500; }
.codex-browser-card p, .codex-browser-card ul { color:#8f9f92; font-size:.67rem; line-height:1.45; }
.codex-browser-card ul { padding-left:1.1rem; }
.codex-skill-links { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.55rem; }
.codex-skill-links button { padding:.2rem .35rem; font-size:.56rem; color:#87a795; background:#07100b; border-color:#2d4134; }
.codex-empty { grid-column:1/-1; }

.interface-modal { width:min(820px,calc(100vw - 30px)); }
.interface-settings { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; padding:.8rem; }
.interface-row { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.4rem 0; color:#9ba89c; font-size:.7rem; }
.interface-row button { padding:.26rem .4rem; font-size:.58rem; }
.interface-row button.active { color:#f0df89; border-color:#9f8f4b; }
.interface-slider { display:grid; grid-template-columns:100px 1fr; gap:.7rem; align-items:center; padding:.42rem 0; color:#9ba89c; font-size:.68rem; }
.interface-slider input { width:100%; }
.hud-module-settings { display:grid; gap:.35rem; }
.hud-module-toggle { display:flex; gap:.5rem; align-items:center; border-bottom:1px solid #223027; padding:.38rem 0; color:#9ca99d; font-size:.68rem; }
.layout-edit-banner { position:fixed; z-index:80; top:74px; left:50%; transform:translateX(-50%); padding:.45rem .7rem; background:#17150b; border:1px solid #b29d4c; color:#eadb8c; font-size:.68rem; box-shadow:0 8px 28px #000b; }
.layout-editing [data-hud-module] { outline:1px dashed #c5b054; outline-offset:2px; cursor:grab; opacity:1!important; }
.layout-editing [data-hud-module]::before { content:'↕ ' attr(data-hud-label); display:block; margin:-.2rem 0 .5rem; color:#d0bc61; font-size:.58rem; letter-spacing:.08em; }
.layout-editing [data-hud-module].dragging { opacity:.45!important; }

@media (max-width: 980px) {
  .game-shell.sidebar-left { grid-template-columns:1fr; grid-template-areas:"top" "world" "side" "chat" "foot"; }
  .skills-shell { grid-template-columns:1fr; }
  .skills-sidebar { max-height:290px; }
  .direct-skill-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .skill-grid-name { display:none; }
  .codex-browser, .interface-settings { grid-template-columns:1fr; }
}

@media (max-width: 620px) {
  .direct-skill-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}


/* Step 5R — persistent game dock, skillbook polish, universal Esc close */
.footer-hint { color:#657569; white-space:nowrap; }
.primary-dock {
  position:sticky; bottom:-.56rem; z-index:8; margin:auto -.56rem -.56rem; padding:.45rem;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.28rem;
  border-top:1px solid #425247; background:linear-gradient(180deg,#0a120dcc,#060b08 24%);
  box-shadow:0 -10px 28px #0008;
}
.primary-dock button {
  position:relative; min-width:0; min-height:54px; padding:.28rem .18rem .24rem;
  display:grid; justify-items:center; align-content:center; gap:.16rem;
  background:linear-gradient(180deg,#111b14,#09100c); border:1px solid #34463a; color:#94a497;
}
.primary-dock button:hover, .primary-dock button:focus-visible { background:#17231a; border-color:#b39f53; color:#f1df8d; }
.primary-dock button > span:last-child { font-size:.53rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.primary-dock button::after {
  content:attr(data-tip); position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%);
  opacity:0; pointer-events:none; white-space:nowrap; padding:.3rem .44rem; border:1px solid #556558;
  background:#050a07f4; color:#e1d995; font-size:.61rem; box-shadow:0 8px 24px #000c; transition:opacity .08s linear;
}
.primary-dock button:hover::after, .primary-dock button:focus-visible::after { opacity:1; }
.dock-pixel { width:24px; height:24px; display:grid; place-items:center; }
.pixel-icon { width:100%; height:100%; display:block; image-rendering:pixelated; }
.dock-icon-svg { filter:drop-shadow(0 1px #000); }

.skills-modal { width:min(920px,calc(100vw - 30px)); height:min(760px,88vh); max-height:88vh; }
.skills-shell { display:block; height:calc(88vh - 53px); min-height:0; overflow:auto; background:#07100b; }
.skills-hub.skillbook-grid {
  width:min(680px,100%); margin:0 auto; padding:1rem;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.38rem; align-content:start;
}
.skill-grid-tile {
  min-height:58px; grid-template-columns:38px minmax(0,1fr) auto; grid-template-rows:1fr;
  gap:.45rem; padding:.42rem .5rem; border-color:#334438;
  background:linear-gradient(180deg,#101a13,#0a120d); box-shadow:inset 0 1px #ffffff05;
}
.skill-grid-tile:hover, .skill-grid-tile:focus-visible { transform:translateY(-1px); background:#162219; box-shadow:0 5px 15px #0008,inset 0 1px #ffffff08; }
.skill-grid-tile.active { border-color:#b19e50; box-shadow:inset 3px 0 #d7c262; }
.skill-icon-frame {
  width:36px; height:36px; display:grid; place-items:center; padding:4px;
  border:1px solid #425447; background:#07100b; box-shadow:inset 0 0 0 1px #0008;
}
.skill-icon-frame.detail { width:50px; height:50px; padding:5px; }
.skillbook-icon, .skill-detail-icon { filter:drop-shadow(1px 1px #000); }
.skill-grid-name { grid-column:2; font-size:.64rem; color:#b9c5ba; white-space:normal; line-height:1.15; overflow:visible; }
.skill-grid-level { grid-column:3; grid-row:1; align-self:start; justify-self:end; color:#ead76c; font-size:.88rem; text-shadow:1px 1px #000; }
.skill-hover-card { left:50%; width:190px; z-index:40; }
.skill-detail { min-height:100%; background:#08100b; }
.skill-detail-header { position:relative; padding:.8rem 1rem .75rem 1rem; border-bottom:1px solid #304036; background:linear-gradient(180deg,#101a13,#0b130e); }
.skill-back-button { margin-bottom:.65rem; padding:.3rem .48rem; font-size:.59rem; color:#9aab9d; background:#09110c; }
.skill-detail-title { display:flex; align-items:center; gap:.75rem; }
.skill-detail-title h3 { font-size:1.15rem; letter-spacing:.03em; }
.skill-tab-body { padding-bottom:1rem; }
.codex-book-mark { color:#d8c86b; border:1px solid #455649; padding:.36rem .5rem; letter-spacing:.12em; font-size:.65rem; }

/* dialogs are mutually exclusive; navigation stays in the persistent dock rather than nested menu dialogs */
dialog.modal[open] { animation:mctve-panel-in .08s ease-out; }
@keyframes mctve-panel-in { from { opacity:.55; transform:translateY(3px); } to { opacity:1; transform:none; } }

@media (max-width:980px) {
  .primary-dock { position:relative; bottom:auto; grid-template-columns:repeat(9,minmax(48px,1fr)); overflow-x:auto; }
  .primary-dock button::after { display:none; }
  .skills-hub.skillbook-grid { grid-template-columns:repeat(3,minmax(150px,1fr)); width:100%; }
}
@media (max-width:620px) {
  .skills-hub.skillbook-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .skill-grid-tile { min-height:54px; }
}


/* Step 5S — quiet HUD, sidebar skillbook, unclipped tooltip layer */
.world-help, .footer-hint { display:none!important; }
.right-panel { position:relative; }
.inspect-panel .inspect-description:empty { display:none; }
.inspect-panel #inspect-kind:empty { display:none; }

.skills-tray {
  position:absolute; z-index:12; top:.55rem; left:.55rem; right:.55rem; bottom:174px;
  display:flex; flex-direction:column; min-height:0;
  border:1px solid #425447; background:linear-gradient(180deg,#0b140f,#07100b 22%);
  box-shadow:0 12px 36px #000c, inset 0 1px #ffffff06;
}
.skills-tray-head {
  height:34px; flex:0 0 34px; display:flex; align-items:center; justify-content:space-between;
  padding:0 .55rem; border-bottom:1px solid #2d3d32; color:#d9cf88; font-size:.72rem;
  letter-spacing:.06em;
}
.skills-tray-close { padding:.05rem .36rem; border-color:transparent; background:transparent; color:#7f9183; font-size:1rem; }
.skills-tray-close:hover { color:#efe29d; border-color:#516355; }
.skills-tray .sidebar-skill-grid {
  width:100%; margin:0; padding:.42rem; overflow:auto; min-height:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.28rem; align-content:start;
}
.skills-tray .skill-grid-tile {
  min-width:0; min-height:54px; padding:.34rem .28rem; display:grid;
  grid-template-columns:32px minmax(0,1fr); grid-template-rows:1fr auto; gap:.12rem .3rem;
  align-items:center; text-align:left; background:#0b140f; border:1px solid #2f4135;
}
.skills-tray .skill-grid-tile:hover, .skills-tray .skill-grid-tile:focus-visible { transform:none; background:#142019; border-color:#887d45; }
.skills-tray .skill-icon-frame { width:30px; height:30px; padding:3px; grid-row:1/3; }
.skills-tray .skill-grid-name { min-width:0; grid-column:2; grid-row:1; font-size:.55rem; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#aab8ab; }
.skills-tray .skill-grid-level { grid-column:2; grid-row:2; justify-self:start; align-self:start; font-size:.66rem; color:#e4d36e; }
.primary-dock button.active { border-color:#b39f53; color:#f1df8d; background:#17231a; }

.skill-tooltip-layer {
  position:fixed; z-index:10000; pointer-events:none; width:max-content; max-width:220px;
  display:grid; gap:.15rem; padding:.48rem .58rem; border:1px solid #6a775d;
  background:#050a07f7; color:#aab8aa; box-shadow:0 10px 30px #000e;
  font-size:.64rem; line-height:1.3;
}
.skill-tooltip-layer b { color:#efe19a; font-size:.72rem; font-weight:600; margin-bottom:.08rem; }
.skill-tooltip-layer span:last-child { color:#c6b867; }

.skill-detail-modal { width:min(900px,calc(100vw - 34px)); max-height:84vh; overflow:hidden; background:#08100b; }
.skill-detail-modal::backdrop { background:#020503c4; backdrop-filter:blur(1px); }
.skill-detail-modal .skill-detail { max-height:84vh; overflow:auto; }
.modal-corner-close {
  position:absolute; z-index:8; top:.58rem; right:.62rem; width:30px; height:30px; padding:0;
  display:grid; place-items:center; background:#0a120d; border:1px solid #425447; color:#91a394; font-size:1.05rem;
}
.modal-corner-close:hover { color:#f0e29a; border-color:#b19e50; }
.skill-detail-header { padding-right:3.4rem; }
.skill-back-button { margin-bottom:.45rem; }

@media (max-width:980px) {
  .skills-tray { position:relative; top:auto; left:auto; right:auto; bottom:auto; min-height:330px; max-height:480px; grid-column:1/-1; }
  .skills-tray .sidebar-skill-grid { grid-template-columns:repeat(5,minmax(54px,1fr)); }
}
@media (max-width:620px) {
  .skills-tray .sidebar-skill-grid { grid-template-columns:repeat(3,minmax(54px,1fr)); }
  .skills-tray .skill-grid-name { display:none; }
}

/* Player-facing default: developer telemetry stays out of the ordinary HUD. */
.top-status { display:none; }


/* Step 5T — HUD hierarchy, top vitals, full-screen skillbook; Step 6Q removes the redundant always-on minimap */
.topbar { gap:1rem; }
.top-vitals {
  width:min(360px,34vw); margin-left:auto; display:grid; gap:.22rem; align-self:center;
}
.top-vitals-row { display:flex; justify-content:space-between; gap:1rem; color:#aab8aa; font-size:.67rem; letter-spacing:.08em; }
.top-vitals-row strong { color:#f0df92; font-weight:500; letter-spacing:0; }
.top-hp-meter { height:9px; border:1px solid #4d5b4e; background:#040705; box-shadow:inset 0 0 0 1px #0008; }
.top-hp-meter > span { display:block; width:0; height:100%; background:linear-gradient(90deg,#aa5142,#df9168); transition:width .12s linear; }
.runtime-sensors { display:none!important; }

.right-panel { overflow:auto; }
.right-panel > .primary-dock { position:relative; bottom:auto; margin:0; flex:0 0 auto; padding:.28rem; box-shadow:none; background:#080f0b; }
.primary-dock button { min-height:48px; }
.primary-dock button > span:last-child { font-size:.5rem; }

.skills-book-modal {
  width:min(780px,calc(100vw - 34px)); height:min(760px,88vh); max-height:88vh; overflow:hidden;
  background:#08100b;
}
.skills-book-modal::backdrop { background:#020503c9; backdrop-filter:blur(1px); }
.skills-book-head { height:48px; padding:.62rem .8rem; }
.skills-book-head h2 { margin:0; font-size:.96rem; }
.fullscreen-skill-grid {
  height:calc(88vh - 48px); overflow:auto; padding:.75rem;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.38rem; align-content:start;
  background:#07100b;
}
.fullscreen-skill-grid .skill-grid-tile {
  min-height:62px; padding:.46rem .5rem; grid-template-columns:40px minmax(0,1fr) auto;
}
.fullscreen-skill-grid .skill-icon-frame { width:38px; height:38px; }
.fullscreen-skill-grid .skill-grid-name { font-size:.66rem; }
.fullscreen-skill-grid .skill-grid-level { font-size:.9rem; }

.skills-tray { display:none!important; }

@media (max-width:980px) {
  .top-vitals { width:min(320px,45vw); }
  .fullscreen-skill-grid { grid-template-columns:repeat(3,minmax(140px,1fr)); }
}
@media (max-width:620px) {
  .topbar { align-items:flex-start; }
  .top-vitals { width:46vw; }
  .fullscreen-skill-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Step 5U — character physiology, finite load, equipment paper doll */
.character-meters { width:min(520px,52vw); display:grid; grid-template-columns:minmax(180px,1.25fr) minmax(280px,2fr); gap:.55rem; align-items:center; }
.top-vital-primary { min-width:0; }
.secondary-meters { display:grid; grid-template-columns:repeat(3,minmax(76px,1fr)); gap:.3rem .45rem; align-items:end; }
.compact-meter { min-width:0; }
.compact-meter > div { display:flex; justify-content:space-between; gap:.35rem; color:#899b8d; font-size:.48rem; letter-spacing:.05em; }
.compact-meter strong { color:#d9d39a; font-weight:500; letter-spacing:0; }
.compact-meter > i { display:block; height:4px; margin-top:3px; background:#101b13; border:1px solid #26362b; overflow:hidden; }
.compact-meter > i > span { display:block; height:100%; width:0; background:#a6804c; transition:width .15s linear; }
.compact-meter:nth-child(2) > i > span { background:#7ba0a3; }
.resonance-meter > i > span { background:#9675b6; }
.top-load-state { grid-column:1/-1; text-align:right; font-size:.5rem; color:#9aaa9c; text-transform:uppercase; letter-spacing:.06em; }

.inventory-modal { width:min(1120px,92vw); }
.inventory-summary { display:grid; grid-template-columns:minmax(260px,1fr) 150px 150px; gap:.6rem; padding:.75rem 1rem; border-bottom:1px solid #283b2d; background:#09110c; }
.inventory-capacity > div:first-child,.inventory-slots { display:flex; justify-content:space-between; gap:1rem; font-size:.68rem; color:#a8b6aa; }
.inventory-capacity strong,.inventory-slots strong { color:#efe19a; font-weight:500; }
.load-meter { height:8px; margin-top:.35rem; background:#111c14; border:1px solid #304336; }
.load-meter span { display:block; height:100%; width:0; background:#b58c51; }
.inventory-tier { display:flex; align-items:center; justify-content:center; border:1px solid #304336; color:#a8b6aa; font-size:.7rem; letter-spacing:.08em; }
.inventory-tier[data-tier="heavy"],.inventory-tier[data-tier="overburdened"] { color:#de8d71; border-color:#6d4236; }
.container-strip { display:flex; gap:.45rem; padding:.55rem 1rem; border-bottom:1px solid #223326; overflow-x:auto; }
.container-chip { min-width:170px; padding:.45rem .55rem; border:1px solid #2b4030; background:#0b140e; }
.container-chip b,.container-chip span { display:block; } .container-chip b { color:#d7cc84; font-size:.68rem; } .container-chip span { color:#87988a; font-size:.58rem; margin-top:.15rem; }
.inventory-content-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:1rem; padding:1rem; max-height:68vh; overflow:auto; }
.inventory-item-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:.5rem; }
.inventory-tile { display:grid; grid-template-columns:38px 1fr; gap:.55rem; align-items:start; padding:.55rem; border:1px solid #293d2d; background:#09110c; }
.inventory-tile.equipped { border-color:#7d7442; }
.inventory-icon { width:36px; height:36px; display:grid; place-items:center; border:1px solid #344b39; background:#0e1912; color:#e1cb77; font-size:.78rem; }
.inventory-icon.stack { color:#7fc5bc; }
.inventory-tile-copy b,.inventory-tile-copy span { display:block; } .inventory-tile-copy b { color:#e1d787; font-size:.68rem; } .inventory-tile-copy span { color:#879a8c; font-size:.56rem; margin-top:.08rem; }
.inventory-tile .item-actions { grid-column:1/-1; margin-top:.15rem; }

.character-modal { width:min(1180px,94vw); }
.character-resource-cards { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)); gap:.45rem; padding:.75rem 1rem; border-bottom:1px solid #26382a; }
.character-resource { padding:.45rem .55rem; border:1px solid #2b4030; background:#09110c; }
.character-resource span,.character-resource b,.character-resource small { display:block; } .character-resource span { color:#8fa294; font-size:.55rem; text-transform:uppercase; } .character-resource b { color:#e6da8d; font-size:.72rem; margin-top:.15rem; } .character-resource small { color:#788b7d; }
.character-resource.resonance b { color:#b69bcf; }
.character-layout { display:grid; grid-template-columns:minmax(350px,1.05fr) minmax(260px,.8fr) minmax(260px,.8fr); gap:1rem; padding:1rem; max-height:72vh; overflow:auto; }
.equipment-paperdoll { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(70px,auto); gap:.45rem; align-items:stretch; }
.paper-slot { border:1px solid #304335; background:#09110c; padding:.45rem; text-align:center; min-width:0; }
.paper-slot > span { display:block; color:#7f9384; font-size:.5rem; text-transform:uppercase; letter-spacing:.06em; }
.paper-slot b,.paper-slot small,.paper-slot em { display:block; margin-top:.18rem; } .paper-slot b { color:#e0d382; font-size:.62rem; } .paper-slot small { color:#88998b; font-size:.5rem; } .paper-slot em { color:#4e6555; font-size:.58rem; font-style:normal; }
.paper-slot-head,.paper-slot-face { grid-column:2; } .paper-slot-torso-inner,.paper-slot-torso-outer { grid-column:2; }
.paper-slot-back { grid-column:1; grid-row:3 / span 2; } .paper-slot-belt { grid-column:2; }
.paper-slot-left-hand { grid-column:1; } .paper-slot-right-hand { grid-column:3; } .paper-slot-hands { grid-column:2; }
.paper-slot-legs { grid-column:2; } .paper-slot-feet { grid-column:2; } .paper-slot-utility { grid-column:3; }
.armor-profile { display:grid; gap:.38rem; }
.armor-row { display:grid; grid-template-columns:82px 28px 1fr; gap:.4rem; align-items:center; font-size:.58rem; }
.armor-row span { color:#96a898; } .armor-row b { color:#e0d382; text-align:right; } .armor-row i,.body-condition-row i { height:5px; background:#101b13; border:1px solid #26382b; overflow:hidden; }
.armor-row i span { display:block; height:100%; background:#8c9f73; }
.body-condition-list { display:grid; gap:.28rem; } .body-condition-row { display:grid; grid-template-columns:95px 1fr 48px; gap:.4rem; align-items:center; font-size:.55rem; } .body-condition-row > span { color:#a4b2a6; } .body-condition-row > b { color:#d8ce8c; text-align:right; } .body-condition-row i span { display:block; height:100%; background:#b06d5c; }
.skill-tooltip-layer small { display:block; max-width:280px; margin-top:.28rem; color:#8da092; line-height:1.35; }

@media (max-width:1000px) {
  .character-meters { width:58vw; grid-template-columns:1fr; }
  .secondary-meters { grid-template-columns:repeat(3,1fr); }
  .character-resource-cards { grid-template-columns:repeat(2,1fr); }
  .character-layout,.inventory-content-grid { grid-template-columns:1fr; }
}
.skill-contract-card { grid-column:1/-1; }
.skill-contract-row { display:grid; grid-template-columns:54px 1fr; gap:.55rem; margin-top:.35rem; padding-top:.35rem; border-top:1px solid #1f3024; }
.skill-contract-row span { color:#748779; text-transform:uppercase; font-size:.5rem; }
.skill-contract-row b { color:#aebdad; font-weight:400; font-size:.58rem; line-height:1.4; }

/* Step 5V — HUD layout refinement, readability, and panel hierarchy */
.game-shell {
  --hud-width:350px;
  --chat-height:148px;
  grid-template-rows:82px minmax(0,1fr) var(--chat-height) 28px;
}

.topbar {
  min-height:82px;
  padding:.72rem 1rem;
  gap:1.15rem;
  background:linear-gradient(180deg,#0d1610,#08100b);
  border-bottom-color:#435448;
}
.brand-block { min-width:205px; }
.brand-block .eyebrow { font-size:.72rem; }
.brand-block strong { font-size:1.02rem; color:#edf0d0; }
.character-meters {
  width:min(780px,64vw);
  grid-template-columns:minmax(235px,1.15fr) minmax(360px,2fr);
  gap:.8rem;
}
.top-vital-primary {
  padding:.38rem .5rem;
  border:1px solid #2f4035;
  background:#0a130e;
}
.top-vitals-row { font-size:.72rem; letter-spacing:.09em; }
.top-vitals-row strong { font-size:.78rem; }
.top-hp-meter { height:12px; margin-top:.3rem; border-color:#5b6657; }
.secondary-meters {
  grid-template-columns:repeat(3,minmax(105px,1fr));
  gap:.38rem .55rem;
}
.compact-meter {
  padding:.28rem .38rem .3rem;
  border:1px solid #28392e;
  background:#09110c;
}
.compact-meter > div { font-size:.59rem; letter-spacing:.06em; }
.compact-meter strong { font-size:.64rem; }
.compact-meter > i { height:7px; margin-top:5px; border-color:#34483a; }
.top-load-state {
  margin-top:.02rem;
  padding:.18rem .35rem 0;
  font-size:.6rem;
  text-align:right;
  color:#aab6aa;
}

.right-panel {
  padding:.7rem;
  gap:.65rem;
  background:linear-gradient(180deg,#08100b,#050906);
  border-left-color:#445549;
}
.right-panel > .primary-dock {
  padding:.38rem;
  gap:.32rem;
  border:1px solid #314336;
  background:#08110c;
}
.primary-dock button {
  min-height:62px;
  padding:.48rem .3rem;
  border-color:#2f4335;
  background:#0b1510;
}
.primary-dock button:hover,.primary-dock button:focus-visible,.primary-dock button.active {
  background:#152219;
  border-color:#b6a151;
}
.primary-dock button > span:last-child { font-size:.61rem; letter-spacing:.01em; }
.dock-pixel { transform:scale(1.12); transform-origin:center; }
.panel { padding:.78rem; border-color:#34463a; }
.panel-title { font-size:.72rem; margin-bottom:.58rem; }
.inspect-panel { min-height:116px; }
.inspect-panel.empty { min-height:46px; padding:.58rem .72rem; }
.inspect-panel.empty > :not(.panel-title) { display:none!important; }
.inspect-name { font-size:1rem; }
.inspect-description { font-size:.76rem; line-height:1.5; }
.data-list { font-size:.74rem; }

.chat-panel {
  margin:.45rem .55rem .45rem .55rem;
  padding:.58rem .7rem;
  border-color:#34473a;
  background:linear-gradient(180deg,#0c1510,#08100b);
}
.chat-log { font-size:.72rem; line-height:1.38; }
#chat-form { margin-top:.28rem; padding-top:.34rem; }
#chat-input { padding:.48rem .58rem; font-size:.76rem; }
#chat-form button { padding:.42rem .7rem; font-size:.7rem; }
.footerbar { min-height:28px; padding:0 .7rem; font-size:.62rem; }

.modal {
  width:min(1080px,calc(100vw - 48px));
  max-height:86vh;
  border-color:#617565;
  background:#08100b;
  box-shadow:0 28px 100px #000e, inset 0 1px #ffffff08;
}
.modal::backdrop { background:#010302c7; backdrop-filter:blur(2px); }
.modal-head { min-height:58px; padding:.8rem 1rem; background:linear-gradient(180deg,#101b14,#0b130e); }
.modal-head h2 { font-size:1.08rem; }
.modal-head button,.modal-corner-close { min-width:34px; min-height:34px; }
.modal-grid { gap:1.15rem; padding:1.05rem; }
.item-card,.fact-card { padding:.68rem; font-size:.74rem; }
.item-card .name,.fact-card .name { font-size:.82rem; }
.item-actions button { font-size:.68rem; padding:.34rem .5rem; }

.skills-book-modal {
  width:min(900px,calc(100vw - 52px));
  height:min(790px,88vh);
}
.skills-book-head { height:58px; padding:.72rem 1rem; }
.skills-book-head h2 { font-size:1.08rem; }
.fullscreen-skill-grid {
  height:calc(88vh - 58px);
  padding:1rem;
  gap:.55rem;
}
.fullscreen-skill-grid .skill-grid-tile {
  min-height:76px;
  padding:.62rem .66rem;
  grid-template-columns:44px minmax(0,1fr) auto;
  border-color:#304238;
  background:#0a140f;
}
.fullscreen-skill-grid .skill-grid-tile:hover,
.fullscreen-skill-grid .skill-grid-tile:focus-visible {
  border-color:#b5a252;
  background:#132018;
  transform:translateY(-1px);
}
.fullscreen-skill-grid .skill-icon-frame { width:42px; height:42px; }
.fullscreen-skill-grid .skill-grid-name { font-size:.72rem; }
.fullscreen-skill-grid .skill-grid-level { font-size:.98rem; }
.skill-tooltip-layer {
  max-width:320px;
  padding:.7rem .78rem;
  font-size:.72rem;
  line-height:1.45;
  border-color:#6d785f;
  box-shadow:0 14px 36px #000e;
}
.skill-detail-modal { width:min(1120px,calc(100vw - 48px)); max-height:88vh; }
.skill-detail-header { padding:1rem 1.1rem; }
.skill-tab-body { padding:1.05rem; }
.skill-pane { padding:.9rem; }
.skill-pane p { font-size:.78rem; }

.inventory-modal { width:min(1220px,94vw); }
.inventory-summary {
  grid-template-columns:minmax(340px,1.35fr) minmax(150px,.55fr) minmax(170px,.6fr);
  gap:.8rem;
  padding:.9rem 1.1rem;
}
.inventory-capacity,.inventory-slots,.inventory-tier {
  padding:.55rem .65rem;
  border:1px solid #304337;
  background:#0a140f;
}
.inventory-capacity > div:first-child,.inventory-slots { font-size:.74rem; }
.load-meter { height:10px; margin-top:.45rem; }
.inventory-tier { font-size:.75rem; }
.container-strip { gap:.6rem; padding:.7rem 1.1rem; }
.container-chip { min-width:205px; padding:.58rem .65rem; }
.container-chip b { font-size:.72rem; }
.container-chip span { font-size:.63rem; }
.inventory-content-grid {
  grid-template-columns:1fr 1fr;
  gap:1rem;
  padding:1.05rem;
  max-height:70vh;
}
.inventory-item-grid { grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:.65rem; }
.inventory-tile { grid-template-columns:46px 1fr; gap:.68rem; padding:.72rem; }
.inventory-icon { width:44px; height:44px; font-size:.86rem; }
.inventory-tile-copy b { font-size:.75rem; }
.inventory-tile-copy span { font-size:.62rem; line-height:1.35; }
.inventory-tile .item-actions { margin-top:.28rem; }

.character-modal { width:min(1260px,95vw); }
.character-resource-cards { gap:.65rem; padding:.85rem 1rem; }
.character-resource { padding:.6rem .68rem; }
.character-resource span { font-size:.61rem; }
.character-resource b { font-size:.8rem; }
.character-resource small { font-size:.61rem; margin-top:.15rem; }
.character-layout {
  grid-template-columns:minmax(390px,1.1fr) minmax(290px,.78fr) minmax(290px,.82fr);
  gap:1.1rem;
  padding:1.05rem;
  max-height:72vh;
}
.equipment-paperdoll { grid-auto-rows:minmax(82px,auto); gap:.55rem; }
.paper-slot { padding:.58rem; }
.paper-slot > span { font-size:.57rem; }
.paper-slot b { font-size:.69rem; }
.paper-slot small { font-size:.57rem; }
.paper-slot em { font-size:.62rem; }
.armor-row { grid-template-columns:92px 34px 1fr; gap:.5rem; font-size:.64rem; }
.body-condition-row { grid-template-columns:110px 1fr 54px; gap:.5rem; font-size:.61rem; }

@media (max-width:1200px) {
  .game-shell { --hud-width:330px; }
  .character-meters { width:min(660px,62vw); grid-template-columns:minmax(210px,1fr) minmax(330px,1.8fr); }
  .secondary-meters { grid-template-columns:repeat(3,minmax(92px,1fr)); }
  .character-layout { grid-template-columns:1fr 1fr; }
  .character-layout > :first-child { grid-row:span 2; }
}
@media (max-width:980px) {
  .game-shell { grid-template-rows:90px 58vh auto 150px 28px; }
  .topbar { min-height:90px; }
  .brand-block { min-width:160px; }
  .character-meters { width:62vw; grid-template-columns:1fr; gap:.35rem; }
  .top-vital-primary { padding:.28rem .4rem; }
  .secondary-meters { grid-template-columns:repeat(3,1fr); }
  .right-panel { padding:.65rem; }
  .inventory-content-grid,.character-layout { grid-template-columns:1fr; }
  .character-layout > :first-child { grid-row:auto; }
}
@media (max-width:680px) {
  .topbar { flex-direction:column; align-items:stretch; height:auto; }
  .character-meters { width:100%; }
  .fullscreen-skill-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .inventory-summary,.character-resource-cards { grid-template-columns:1fr 1fr; }
}

/* Step 5W — visual equipment identity, icon inventory, character presentation */
.item-pixel-icon { width:100%; height:100%; display:block; image-rendering:pixelated; shape-rendering:crispEdges; filter:drop-shadow(1px 1px #0009); }
.item-tooltip-layer {
  position:fixed; z-index:9999; pointer-events:none; width:min(280px,calc(100vw - 28px));
  padding:.62rem .7rem; border:1px solid #61735e; background:#07100bf2; box-shadow:0 10px 28px #000c;
  color:#aebbad; font-size:.66rem; line-height:1.42;
}
.item-tooltip-layer.hidden { display:none; }
.item-tooltip-layer > span,.item-tooltip-layer > small { display:block; margin-top:.12rem; }
.item-tooltip-layer > small { color:#8ea091; border-top:1px solid #25362a; margin-top:.4rem; padding-top:.35rem; }
.tooltip-item-head { display:grid; grid-template-columns:34px 1fr auto; gap:.5rem; align-items:center; margin-bottom:.35rem; }
.tooltip-item-head b { color:#f0df91; font-size:.78rem; }
.tooltip-item-head em { color:#e5cf67; font-size:.72rem; font-style:normal; }
.tooltip-item-icon { width:30px; height:38px; display:grid; place-items:center; border:1px solid #36493b; background:#0c1710; padding:3px; }
.tooltip-item-sprite { width:22px; height:32px; }

/* Inventory becomes a visual expedition loadout rather than a record list. */
.inventory-modal { width:min(1180px,94vw); }
.inventory-summary { grid-template-columns:minmax(300px,1.3fr) minmax(150px,.5fr) minmax(150px,.5fr); }
.container-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); overflow:visible; }
.container-chip.visual-container { display:grid; grid-template-columns:54px 1fr; gap:.6rem; align-items:center; min-width:0; }
.container-chip.visual-container > div:last-child { min-width:0; }
.container-chip.visual-container span { display:block; }
.container-icon { width:50px; height:58px; display:grid; place-items:center; padding:4px; border:1px solid #405443; background:linear-gradient(180deg,#101b14,#0a120d); }
.container-item-icon { width:38px; height:48px; }
.inventory-content-grid { grid-template-columns:1.05fr .95fr; gap:1.1rem; }
.inventory-item-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.55rem; }
.inventory-item-card,.inventory-stack-card {
  position:relative; display:grid; grid-template-columns:62px minmax(0,1fr); gap:.6rem; align-items:center;
  min-height:78px; padding:.55rem .58rem; border:1px solid #2b4030; background:linear-gradient(180deg,#0c1610,#08100b);
  transition:border-color 90ms ease,background 90ms ease,transform 90ms ease;
}
.inventory-item-card:hover,.inventory-stack-card:hover { border-color:#6e7042; background:#101b14; transform:translateY(-1px); }
.inventory-item-card.equipped,.inventory-stack-card.equipped { border-color:#a08e46; box-shadow:inset 3px 0 #d7c35f; }
.inventory-item-card.damaged { border-color:#73483e; }
.inventory-visual-frame {
  position:relative; width:58px; height:62px; display:grid; place-items:center; padding:5px;
  border:1px solid #3c5140; background:radial-gradient(circle at 50% 40%,#16231a,#0a120d 75%);
}
.inventory-item-icon { width:38px; height:50px; }
.stack-frame { background:radial-gradient(circle at 50% 40%,#13221d,#09120e 75%); }
.stack-count,.equipped-badge {
  position:absolute; right:2px; bottom:2px; min-width:18px; padding:1px 3px; text-align:center;
  border:1px solid #5b6541; background:#070b08e8; color:#f0dc73; font-size:.58rem; line-height:1.2;
}
.equipped-badge { right:auto; left:2px; top:2px; bottom:auto; min-width:15px; color:#84d2bd; border-color:#42675a; }
.inventory-card-copy { min-width:0; }
.inventory-card-copy b { display:block; color:#e5da8a; font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inventory-card-copy > span { display:block; margin-top:.16rem; color:#87998a; font-size:.58rem; }
.condition-line { display:grid; grid-template-columns:1fr auto; gap:.35rem; align-items:center; margin-top:.38rem; }
.condition-line i { height:5px; border:1px solid #283a2d; background:#101912; overflow:hidden; }
.condition-line i span { display:block; height:100%; background:#86a36c; }
.inventory-item-card.damaged .condition-line i span { background:#bb725d; }
.condition-line small { color:#788c7e; font-size:.5rem; }
.compact-actions { grid-column:1/-1; display:flex; gap:.28rem; opacity:.74; transition:opacity 90ms ease; }
.inventory-item-card:hover .compact-actions { opacity:1; }
.compact-actions button { padding:.25rem .42rem; font-size:.52rem; }

/* Character equipment becomes a visual loadout stage with a central mannequin. */
.character-modal { width:min(1240px,96vw); }
.character-layout { grid-template-columns:minmax(440px,1.22fr) minmax(275px,.78fr) minmax(260px,.7fr); }
.paperdoll-section { min-width:0; }
.equipment-paperdoll {
  position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(118px,1fr) 170px minmax(118px,1fr);
  grid-template-rows:76px 76px 86px 86px 82px 82px; gap:.46rem; min-height:560px; align-items:stretch;
  padding:.65rem; border:1px solid #223528; background:radial-gradient(circle at 50% 42%,#111d15 0,#08100b 64%);
}
.character-mannequin {
  position:absolute; z-index:0; left:50%; top:53%; width:128px; height:322px; transform:translate(-50%,-50%);
  opacity:.42; filter:drop-shadow(0 4px 10px #000b); pointer-events:none;
}
.character-mannequin > div { position:absolute; border:1px solid #67806d; background:#213126; box-shadow:inset 0 0 0 1px #101b14; }
.mannequin-head { width:44px; height:50px; left:42px; top:0; clip-path:polygon(20% 0,80% 0,100% 25%,86% 100%,14% 100%,0 25%); }
.mannequin-torso { width:72px; height:112px; left:28px; top:56px; clip-path:polygon(14% 0,86% 0,100% 100%,0 100%); }
.mannequin-arm { width:22px; height:116px; top:61px; } .mannequin-arm.left { left:2px; transform:rotate(6deg); } .mannequin-arm.right { right:2px; transform:rotate(-6deg); }
.mannequin-leg { width:27px; height:138px; top:176px; } .mannequin-leg.left { left:33px; } .mannequin-leg.right { right:33px; }
.visual-paper-slot {
  position:relative; z-index:2; min-width:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.22rem;
  padding:.34rem; border:1px solid #334a39; background:#0a130ee8; text-align:center; overflow:hidden;
}
.visual-paper-slot:hover { border-color:#7b7545; background:#101b14f2; }
.visual-paper-slot.empty { border-style:dashed; border-color:#263a2d; color:#4c6151; }
.slot-label { position:absolute; left:5px; top:4px; color:#788d7d; font-size:.46rem; letter-spacing:.07em; text-transform:uppercase; }
.slot-empty-mark { font-size:1.35rem; color:#314638; font-weight:300; }
.equipped-item-visual { width:100%; min-width:0; display:grid; grid-template-columns:42px 1fr; gap:.32rem; align-items:center; text-align:left; }
.paper-item-icon { width:40px; height:48px; display:grid; place-items:center; padding:3px; border:1px solid #3a5040; background:#0d1811; }
.paperdoll-item-icon { width:30px; height:40px; }
.equipped-item-visual b { color:#e7db8b; font-size:.57rem; white-space:normal; line-height:1.15; }
.equipped-item-visual small { color:#758a7b; font-size:.46rem; }
.paper-slot-head { grid-column:2; grid-row:1; }
.paper-slot-face { grid-column:2; grid-row:2; }
.paper-slot-back { grid-column:1; grid-row:2 / span 2; }
.paper-slot-utility { grid-column:3; grid-row:2; }
.paper-slot-torso-inner { grid-column:1; grid-row:4; }
.paper-slot-torso-outer { grid-column:3; grid-row:4; }
.paper-slot-left-hand { grid-column:1; grid-row:5; }
.paper-slot-right-hand { grid-column:3; grid-row:5; }
.paper-slot-hands { grid-column:2; grid-row:4; }
.paper-slot-belt { grid-column:2; grid-row:5; }
.paper-slot-legs { grid-column:1; grid-row:6; }
.paper-slot-feet { grid-column:3; grid-row:6; }

.body-map { display:grid; grid-template-columns:1fr 1fr; gap:.35rem; }
.body-zone { display:grid; grid-template-columns:1fr auto; gap:.2rem .35rem; padding:.34rem .4rem; border:1px solid #27392c; background:#09120d; }
.body-zone > span { color:#a5b3a6; font-size:.56rem; }
.body-zone > b { color:#dccf82; font-size:.54rem; }
.body-zone > i { grid-column:1/-1; height:5px; border:1px solid #283b2d; background:#111a13; overflow:hidden; }
.body-zone > i span { display:block; height:100%; background:#bd7966; }
.body-zone.injured { border-color:#71473d; background:#160f0c; }

/* Strengthen skill hover readability and ensure it remains above full-screen modals. */
.skill-tooltip-layer { z-index:10000!important; width:220px; padding:.62rem .7rem; box-shadow:0 10px 28px #000c; }
.skill-tooltip-layer b { font-size:.78rem; }
.skill-tooltip-layer span { display:block; margin-top:.12rem; font-size:.62rem; }
.skill-tooltip-layer small { font-size:.58rem; }

@media (max-width:1050px) {
  .character-layout { grid-template-columns:1fr; }
  .equipment-paperdoll { grid-template-columns:minmax(110px,1fr) 160px minmax(110px,1fr); }
  .inventory-content-grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .equipment-paperdoll { grid-template-columns:1fr 1fr; grid-template-rows:none; min-height:0; }
  .character-mannequin { display:none; }
  .visual-paper-slot { grid-column:auto!important; grid-row:auto!important; min-height:78px; }
  .inventory-item-grid { grid-template-columns:1fr; }
}


/* Step 5X — visual QoL, metric normalization, complete item sprite coverage */
.metric-strip {
  width:min(820px,68vw);
  display:grid;
  grid-template-columns:repeat(4,minmax(135px,1fr));
  gap:.48rem;
  align-items:stretch;
}
.hud-metric {
  min-width:0;
  padding:.42rem .5rem .46rem;
  border:1px solid #314238;
  background:linear-gradient(180deg,#0c1610,#08100b);
  box-shadow:inset 0 1px #ffffff08;
}
.hud-metric-head { display:flex; align-items:center; justify-content:space-between; gap:.45rem; }
.hud-metric-head span { color:#93a596; font-size:.61rem; letter-spacing:.075em; }
.hud-metric-head strong { color:#eadb83; font-size:.68rem; white-space:nowrap; }
.hud-metric-bar { height:9px; margin-top:.38rem; border:1px solid #455348; background:#111811; overflow:hidden; }
.hud-metric-bar > span { display:block; height:100%; width:0; transition:width 120ms linear; }
.vitality-metric .hud-metric-bar > span { background:#c9755d; }
.exertion-metric .hud-metric-bar > span { background:#b89b5a; }
.focus-metric .hud-metric-bar > span { background:#84aaa4; }
.resonance-metric .hud-metric-bar > span { background:#9b77b0; }
.metric-load {
  grid-column:1/-1;
  margin:0;
  padding:.08rem .18rem 0;
  min-height:1rem;
  text-align:right;
  color:#a7b5a8;
  font-size:.58rem;
  letter-spacing:.055em;
}
/* Neutralize the older asymmetric primary/secondary meter geometry without touching data IDs. */
.metric-strip .top-vital-primary,.metric-strip .secondary-meters { display:contents; }
.metric-strip .top-hp-meter,.metric-strip .compact-meter { all:unset; }

/* Inventory QoL: stronger icon presence, quieter controls, better stack readability. */
.inventory-item-card,.inventory-stack-card { grid-template-columns:72px minmax(0,1fr); min-height:88px; }
.inventory-visual-frame { width:68px; height:72px; padding:6px; }
.inventory-item-icon { width:48px; height:60px; }
.inventory-card-copy b { font-size:.76rem; }
.inventory-card-copy > span { font-size:.61rem; }
.stack-count { right:3px; bottom:3px; min-width:22px; padding:2px 4px; font-size:.64rem; }
.equipped-badge { left:3px; top:3px; font-size:.6rem; }
.compact-actions { opacity:.4; }
.inventory-item-card:focus-within .compact-actions,.inventory-item-card:hover .compact-actions { opacity:1; }
.container-icon { width:58px; height:66px; }
.container-item-icon { width:44px; height:54px; }

/* Equipment QoL: equipped items should read as sprites first, labels second. */
.paper-item-icon { width:46px; height:56px; }
.paperdoll-item-icon { width:36px; height:46px; }
.equipped-item-visual { grid-template-columns:48px 1fr; gap:.4rem; }
.visual-paper-slot { min-height:78px; }
.visual-paper-slot:not(.empty) { border-color:#435b47; background:#0b1610f2; }

/* Tooltip polish for item recognition. */
.item-tooltip-layer { width:min(310px,calc(100vw - 28px)); font-size:.69rem; }
.tooltip-item-icon { width:38px; height:46px; }
.tooltip-item-sprite { width:30px; height:40px; }

@media (max-width:1200px) {
  .metric-strip { width:min(690px,66vw); grid-template-columns:repeat(4,minmax(112px,1fr)); gap:.36rem; }
  .hud-metric { padding:.36rem .4rem .4rem; }
  .hud-metric-head span { font-size:.55rem; }
  .hud-metric-head strong { font-size:.61rem; }
}
@media (max-width:980px) {
  .metric-strip { width:100%; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .metric-load { text-align:left; }
}


/* Step 5Y Phase B — authoritative appearance customization + true graphical paper doll */
.phase-b-character { width:min(1380px,97vw); max-height:94vh; }
.phase-b-layout { grid-template-columns:minmax(300px,.72fr) minmax(520px,1.38fr) minmax(300px,.76fr); gap:.85rem; max-height:80vh; padding:.9rem; overflow:auto; }
.appearance-section,.paperdoll-section,.character-details-section { min-width:0; }
.appearance-editor { display:flex; flex-direction:column; gap:.55rem; }
.appearance-field { border:1px solid #26392d; background:#08110c; padding:.42rem; }
.appearance-field-label { color:#9fb0a1; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.34rem; }
.appearance-options { display:flex; flex-wrap:wrap; gap:.28rem; }
.appearance-option { min-height:30px; padding:.25rem .42rem; display:flex; gap:.3rem; align-items:center; justify-content:flex-start; border:1px solid #32493a; background:#0c1710; color:#aebcaf; font-size:.55rem; text-align:left; }
.appearance-option:hover { border-color:#756f44; color:#e1d687; }
.appearance-option.selected { border-color:#8a8150; color:#f0df8b; background:#172019; box-shadow:inset 0 0 0 1px #282c1d; }
.appearance-swatch { width:18px; height:18px; flex:0 0 18px; border:1px solid #536053; background:linear-gradient(135deg,var(--swatch) 0 58%,var(--swatch2) 58% 100%); image-rendering:pixelated; }
.appearance-actions { display:grid; grid-template-columns:1fr 1fr 1.25fr; gap:.36rem; padding-top:.15rem; }
.appearance-actions button { min-height:34px; }
.appearance-actions button.primary { border-color:#78733f; color:#efe18c; background:#172015; }
.appearance-actions button:disabled { opacity:.35; cursor:default; }
.appearance-editor-status { min-height:1.2rem; color:#7e9182; font-size:.56rem; padding:.32rem .1rem; }
.paperdoll-heading { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:.35rem; }
.paperdoll-profile-badge { border:1px solid #3a4d3d; background:#0a130e; color:#a8b7a8; padding:.25rem .45rem; font-size:.5rem; text-transform:uppercase; letter-spacing:.06em; }
.equipment-paperdoll { grid-template-columns:minmax(122px,1fr) 260px minmax(122px,1fr); grid-template-rows:76px 76px 92px 92px 88px 88px; min-height:590px; padding:.7rem; overflow:visible; }
.paperdoll-avatar-stage { position:absolute; z-index:1; inset:58px 50% auto auto; width:250px; height:470px; transform:translateX(50%); pointer-events:none; }
.paper-avatar { position:relative; width:100%; height:100%; --frame-scale-x:1; --frame-scale-y:1; filter:drop-shadow(0 12px 14px #000b); }
.paper-avatar.frame-wayfarer-compact { --frame-scale-x:.9; --frame-scale-y:.94; }
.paper-avatar.frame-wayfarer-tall { --frame-scale-x:.96; --frame-scale-y:1.08; }
.paper-avatar.frame-wayfarer-broad { --frame-scale-x:1.11; --frame-scale-y:1; }
.paper-body-shadow { position:absolute; left:61px; bottom:18px; width:128px; height:30px; border-radius:50%; background:#0008; filter:blur(5px); }
.paper-body-layer { position:absolute; z-index:100; left:50%; top:38px; width:126px; height:390px; transform:translateX(-50%) scale(var(--frame-scale-x),var(--frame-scale-y)); transform-origin:50% 90%; }
.paper-head,.paper-neck,.paper-torso,.paper-arm,.paper-leg,.paper-base-clothes { position:absolute; image-rendering:pixelated; box-shadow:inset 0 0 0 2px #0d1510; }
.paper-head { left:43px; top:0; width:42px; height:52px; background:var(--paper-skin); clip-path:polygon(14% 6%,86% 6%,100% 28%,88% 92%,68% 100%,32% 100%,12% 92%,0 28%); }
.paper-neck { left:53px; top:48px; width:22px; height:20px; background:var(--paper-skin); }
.paper-torso { left:28px; top:63px; width:72px; height:124px; background:var(--paper-cloth); clip-path:polygon(12% 0,88% 0,100% 100%,0 100%); }
.paper-arm { top:67px; width:22px; height:128px; background:linear-gradient(180deg,var(--paper-cloth) 0 58%,var(--paper-skin) 58% 100%); }
.paper-arm.left { left:4px; transform:rotate(4deg); } .paper-arm.right { right:4px; transform:rotate(-4deg); }
.paper-leg { top:188px; width:30px; height:156px; background:var(--paper-cloth-2); }
.paper-leg.left { left:31px; } .paper-leg.right { right:31px; }
.paper-base-clothes.torso { z-index:2; left:34px; top:85px; width:60px; height:80px; background:linear-gradient(90deg,var(--paper-cloth),var(--paper-cloth-2)); border-left:5px solid var(--paper-accent); opacity:.95; }
.paper-base-clothes.legs { z-index:2; left:35px; top:195px; width:58px; height:115px; background:linear-gradient(90deg,var(--paper-cloth-2) 0 47%,#111 47% 53%,var(--paper-cloth-2) 53%); opacity:.98; }
.paper-hair { position:absolute; z-index:5; left:4px; top:0; width:34px; height:15px; background:var(--paper-hair); border-bottom:2px solid #111; }
.hair-swept .paper-hair { width:39px; height:19px; clip-path:polygon(0 0,100% 0,100% 52%,64% 35%,38% 100%,0 72%); }
.hair-braided .paper-hair { width:36px; height:17px; } .hair-braided .paper-hair::after { content:''; position:absolute; right:-4px; top:11px; width:7px; height:35px; background:repeating-linear-gradient(180deg,var(--paper-hair) 0 6px,#121712 6px 8px); }
.hair-shorn .paper-hair { height:7px; opacity:.8; } .hair-hooded-base .paper-hair { left:0; width:42px; height:25px; background:var(--paper-cloth-2); clip-path:polygon(0 0,100% 0,100% 80%,77% 56%,50% 78%,23% 56%,0 80%); }
.paper-face-mark { position:absolute; z-index:6; left:10px; top:25px; width:22px; height:2px; background:transparent; }
.face-scar-left .paper-face-mark { width:2px; height:16px; left:12px; top:21px; background:#713f36; transform:rotate(-17deg); }
.face-scar-right .paper-face-mark { width:2px; height:16px; left:28px; top:21px; background:#713f36; transform:rotate(17deg); }
.face-paint-relay .paper-face-mark { height:4px; background:var(--paper-accent); box-shadow:0 8px 0 color-mix(in srgb,var(--paper-accent) 55%,transparent); }
.face-paint-drift .paper-face-mark { width:28px; left:7px; height:3px; background:linear-gradient(90deg,var(--paper-accent) 0 35%,transparent 35% 52%,var(--paper-accent) 52% 100%); transform:rotate(-9deg); }
.paper-wearable-layer { position:absolute; z-index:calc(var(--render-order) + 20); width:58px; height:70px; display:grid; place-items:center; transform-origin:center; }
.paper-wearable-sprite { width:100%; height:100%; filter:drop-shadow(0 2px 1px #000b); }
.paper-wearable-layer.layer-back_rear { left:74px; top:118px; width:88px; height:112px; z-index:80; opacity:.95; }
.paper-wearable-layer.layer-torso_inner { left:94px; top:125px; width:62px; height:92px; }
.paper-wearable-layer.layer-torso_outer { left:84px; top:112px; width:82px; height:118px; }
.paper-wearable-layer.layer-belt { left:90px; top:205px; width:72px; height:60px; }
.paper-wearable-layer.layer-head { left:100px; top:36px; width:52px; height:60px; }
.paper-wearable-layer.layer-face { left:101px; top:52px; width:50px; height:58px; }
.paper-wearable-layer.layer-utility { left:139px; top:203px; width:60px; height:64px; }
.paper-wearable-layer.layer-feet { left:91px; top:344px; width:78px; height:62px; }
.paper-wearable-layer.layer-legs { left:88px; top:244px; width:82px; height:110px; }
.paper-wearable-layer.layer-held_left { left:32px; top:185px; width:82px; height:105px; transform:rotate(-12deg); }
.paper-wearable-layer.layer-held_right { right:28px; top:185px; width:82px; height:105px; transform:rotate(12deg); }
.paper-wearable-layer.layer-back_front { left:89px; top:112px; width:76px; height:120px; }
.visual-paper-slot { z-index:3; overflow:visible; }
.paper-slot-copy { min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.paper-unequip { margin-top:.22rem; padding:.18rem .3rem; font-size:.46rem; opacity:0; transition:opacity 90ms ease; }
.visual-paper-slot:hover .paper-unequip,.equipped-item-visual:focus-within .paper-unequip { opacity:1; }
.paperdoll-carried-gear { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.36rem; }
.carried-wearable { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:.4rem; align-items:center; border:1px solid #2a3e31; background:#09120d; padding:.35rem; }
.carried-wearable > span { width:40px; height:44px; display:grid; place-items:center; border:1px solid #304637; background:#0d1811; }
.carried-wearable-icon { width:30px; height:38px; } .carried-wearable b,.carried-wearable small { display:block; } .carried-wearable b { color:#ddd287; font-size:.58rem; } .carried-wearable small { color:#778a7b; font-size:.48rem; margin-top:.1rem; }
.carried-wearable button { padding:.28rem .38rem; font-size:.48rem; }
.compact-character-resources { grid-template-columns:1fr 1fr; padding:0; border-bottom:0; gap:.36rem; }
.compact-character-resources .character-resource { min-height:56px; }
.character-secondary-details { margin-top:.75rem; border-top:1px solid #24372b; padding-top:.55rem; }
.character-secondary-details summary { cursor:pointer; color:#869788; font-size:.58rem; text-transform:uppercase; letter-spacing:.06em; }
.item-tooltip-layer { z-index:12000!important; }

@media (max-width:1180px) {
  .phase-b-layout { grid-template-columns:minmax(280px,.8fr) minmax(500px,1.2fr); }
  .character-details-section { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
  .character-details-section > .panel-title,.character-details-section > .separated { grid-column:auto; }
  .character-secondary-details { grid-column:1/-1; }
}
@media (max-width:820px) {
  .phase-b-layout { grid-template-columns:1fr; }
  .equipment-paperdoll { grid-template-columns:1fr 1fr; grid-template-rows:none; min-height:0; }
  .paperdoll-avatar-stage { position:relative; inset:auto; width:250px; height:430px; transform:none; grid-column:1/-1; margin:0 auto; }
  .visual-paper-slot { grid-column:auto!important; grid-row:auto!important; min-height:76px; }
  .character-details-section { display:block; }
}

/* Step 5Y Phase D: construction-family continuity. These are restrained material cues, not rarity colors. */
.paper-wearable-layer.tier-specialist .paper-wearable-sprite{filter:drop-shadow(0 0 1px color-mix(in srgb,var(--wear-accent) 45%,transparent));}
.paper-wearable-layer.tier-signature .paper-wearable-sprite{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--wear-accent) 58%,transparent));}
.paper-wearable-layer.family-rustbound-salvage{transform-origin:center;}
.paper-wearable-layer.family-glassway-relay{image-rendering:pixelated;}

/* Step 5Y Phase E — compact public player inspect */
.player-inspect-card { margin:.55rem 0 .45rem; display:grid; grid-template-columns:76px minmax(0,1fr); gap:.48rem .58rem; align-items:start; }
.player-inspect-card.hidden { display:none!important; }
#inspect-player-preview { width:76px; height:102px; image-rendering:pixelated; border:1px solid #31483a; background:#070d09; }
.player-inspect-summary { min-width:0; display:grid; gap:.3rem; }
.player-inspect-tags { display:flex; flex-wrap:wrap; gap:.22rem; }
.social-role-chip { display:inline-block; border:1px solid #50624f; background:#111b14; color:#d8c875; padding:.15rem .28rem; font-size:.58rem; letter-spacing:.025em; }
.player-inspect-pack,.player-inspect-families { font-size:.62rem; line-height:1.35; }
.player-visible-loadout { grid-column:1/-1; display:grid; gap:.22rem; max-height:148px; overflow:auto; padding-right:.1rem; }
.player-loadout-row { display:flex; justify-content:space-between; gap:.5rem; border-top:1px solid #26372c; padding:.28rem .05rem .16rem; font-size:.66rem; color:#d8d3a7; }
.player-loadout-row small { color:#819484; font-size:.56rem; text-align:right; }


/* Step 6B — world mouse interaction menu */
.world-context-menu {
  position:fixed; z-index:14000; min-width:190px; max-width:290px;
  border:1px solid #5a6846; background:#07100bf2; box-shadow:0 10px 28px #000c;
  padding:.28rem; display:grid; gap:.16rem; backdrop-filter:blur(2px);
}
.world-context-menu.hidden { display:none!important; }
.world-context-title { padding:.28rem .36rem .34rem; color:#e2d783; font-size:.65rem; border-bottom:1px solid #2d3e31; margin-bottom:.08rem; }
.world-context-menu button { text-align:left; width:100%; padding:.34rem .42rem; border:1px solid transparent; background:#0b1710; color:#b9c6b7; font:inherit; font-size:.62rem; cursor:pointer; }
.world-context-menu button:hover,.world-context-menu button:focus-visible { border-color:#65764d; background:#132018; color:#f0df92; outline:none; }
#world { cursor:crosshair; }


/* Step 6C — authoritative death/respawn feedback */
.death-overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(3,7,6,.58);pointer-events:none;backdrop-filter:grayscale(.7) brightness(.65)}
.death-overlay.hidden{display:none}
.death-card{min-width:240px;padding:18px 22px;border:1px solid #8d5d51;background:rgba(8,13,11,.94);box-shadow:0 12px 36px rgba(0,0,0,.48);text-align:center;letter-spacing:.08em}
.death-card strong{display:block;color:#d38b74;font-size:20px;margin-bottom:8px}
.death-card span{display:block;color:#b8c9bd;font-size:11px;letter-spacing:.04em}


/* Step 6D: lightweight world-hover readability. */
.world-hover-tooltip{position:fixed;z-index:140;pointer-events:none;min-width:150px;max-width:240px;padding:.48rem .58rem;border:1px solid #657254;background:#050a07f2;box-shadow:0 8px 24px #000b;color:#cbd4c7;font:11px/1.3 "Cascadia Mono",Consolas,monospace}
.world-hover-tooltip.hidden{display:none}
.world-hover-tooltip strong{display:block;color:#f0df91;font-size:12px;margin-bottom:.12rem}
.world-hover-tooltip>span{display:block;color:#9eaa9d}
.world-hover-tooltip small{display:block;color:#87958a;margin-top:.16rem}
.world-hover-hp{height:4px;margin-top:.34rem;background:#402526;border:1px solid #181b17}
.world-hover-hp span{display:block;height:100%;background:#c86655}
.world-hover-hp.player span{background:#70afa2}


/* Step 6I: combat target vitality and engagement readability. */
.inspect-combat-card{margin:.48rem 0 .28rem;padding:.45rem .5rem;border:1px solid #354638;background:#09110ccf}
.inspect-combat-card.hidden{display:none}
.inspect-combat-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font:10px/1.2 "Cascadia Mono",Consolas,monospace;color:#94a398;letter-spacing:.05em}
.inspect-combat-row strong{color:#e5d77f;font-size:11px}
.inspect-combat-meter{height:6px;margin-top:.34rem;border:1px solid #202b22;background:#3c2525;overflow:hidden}
.inspect-combat-meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,#b95f4f,#d98a67);transition:width 120ms linear}
.inspect-combat-state{margin-top:.28rem;color:#9eab9f;font:9px/1.25 "Cascadia Mono",Consolas,monospace;letter-spacing:.04em}


/* Step 6J: visible authoritative attack cadence. */
.inspect-combat-cadence{margin-top:.42rem;padding-top:.36rem;border-top:1px solid #1e2b22}
.inspect-combat-cadence.hidden{display:none}
.inspect-combat-cadence-row{display:flex;justify-content:space-between;gap:.5rem;align-items:center;color:#829087;font:9px/1.2 "Cascadia Mono",Consolas,monospace;letter-spacing:.05em}
.inspect-combat-cadence-row strong{font-size:9px;color:#b7c2b6}
.inspect-combat-cadence.ready .inspect-combat-cadence-row strong{color:#e4d77f}
.inspect-combat-cadence-meter{height:3px;margin-top:.24rem;background:#172019;overflow:hidden}
.inspect-combat-cadence-meter span{display:block;height:100%;width:100%;background:#829b73;transition:width 70ms linear}
.inspect-combat-cadence.ready .inspect-combat-cadence-meter span{background:#d5c871}


/* Step 6K: persistent combat engagement UX independent from inspect target. */
.engagement-card{margin:.15rem 0 .52rem;padding:.48rem .52rem;border:1px solid #5a5d3e;background:linear-gradient(180deg,#11160ee8,#080e0ae8);box-shadow:inset 0 0 0 1px #161f17}
.engagement-card.hidden{display:none!important}
.engagement-head{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:.55rem;font:9px/1.2 "Cascadia Mono",Consolas,monospace;letter-spacing:.07em;color:#8e9d90}
.engagement-head strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eadc85;font-size:11px;letter-spacing:.02em}
.engagement-meta{margin-top:.26rem;color:#a8b3aa;font:9px/1.25 "Cascadia Mono",Consolas,monospace;letter-spacing:.035em}
.engagement-vitality-row{display:flex;justify-content:space-between;gap:.5rem;margin-top:.38rem;color:#819086;font:8px/1.2 "Cascadia Mono",Consolas,monospace;letter-spacing:.06em}
.engagement-vitality-row strong{color:#d7cf91;font-size:9px}
.engagement-vitality-meter{height:4px;margin-top:.2rem;border:1px solid #202921;background:#3b2424;overflow:hidden}
.engagement-vitality-meter span{display:block;height:100%;width:0;background:#c86a57;transition:width 100ms linear}
.engagement-cadence{margin-top:.3rem;color:#99a59c;font:8px/1.2 "Cascadia Mono",Consolas,monospace;letter-spacing:.06em}
.engagement-cadence.ready{color:#e0d47d}
.engagement-actions{display:grid;grid-template-columns:1fr 1fr;gap:.28rem;margin-top:.42rem}
.engagement-actions button{border:1px solid #3c4f3f;background:#0c1710;color:#b8c4ba;padding:.28rem .34rem;font:9px/1.1 "Cascadia Mono",Consolas,monospace;cursor:pointer}
.engagement-actions button:hover,.engagement-actions button:focus-visible{border-color:#6a7653;color:#f0df91;outline:none}

/* Step 6O — mouse-first input preferences + keybind foundation */
.input-settings-pane { grid-column:1 / -1; }
.interface-toggle-row {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; align-items:center;
  padding:.62rem 0; border-bottom:1px solid #223027; color:#a4b0a6; font-size:.7rem;
}
.interface-toggle-row span { display:grid; gap:.18rem; }
.interface-toggle-row strong { color:#d9d09a; font-size:.7rem; font-weight:500; }
.interface-toggle-row small { color:#748279; font-size:.61rem; line-height:1.45; }
.interface-toggle-row input { width:18px; height:18px; accent-color:#8f8a4f; }
.keybind-foundation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem .65rem; margin-top:.65rem; }
.keybind-foundation > div { display:flex; justify-content:space-between; gap:.6rem; align-items:center; padding:.42rem .5rem; border:1px solid #26362c; background:#08100b; color:#8fa092; font-size:.62rem; }
.keybind-foundation kbd { border:1px solid #465348; background:#111a14; color:#e0d58e; padding:.2rem .36rem; font:inherit; white-space:nowrap; }
.world-frame.mouse-nav-active canvas { cursor:crosshair; }
@media (max-width: 720px) { .keybind-foundation { grid-template-columns:1fr; } }

/* Step 6Q — World Atlas-first HUD: the redundant local minimap is removed. */
.right-panel > .primary-dock { order:-10; position:relative; top:auto; bottom:auto; margin:0; flex:0 0 auto; }
.right-panel > .inspect-panel { order:0; }
.right-panel > [data-hud-module="skills"] { order:1; }


/* Step 6R — map-first World Atlas. The long living-world simulation ledger remains available as a separate tab. */
.world-atlas-modal{width:min(1500px,calc(100vw - 20px));height:min(920px,94vh);max-height:94vh;overflow:hidden}
.world-atlas-head{gap:1rem}
.world-atlas-tabs{display:flex;align-items:center;gap:.35rem}
.world-atlas-tabs button{font-size:.63rem;padding:.42rem .62rem;color:#8e9d91;background:#08110c;border:1px solid #304137}
.world-atlas-tabs button.active{color:#f0df8c;border-color:#a18e49;background:#161b11}
.world-atlas-tabs button[data-close]{font-size:1.15rem;margin-left:.3rem;padding:.2rem .55rem}
.world-map-view{height:calc(94vh - 60px);display:grid;grid-template-rows:auto minmax(0,1fr);background:#07100b}
.world-map-toolbar{display:grid;grid-template-columns:minmax(280px,1fr) minmax(170px,240px) auto auto auto 54px auto;gap:.4rem;align-items:center;padding:.55rem .65rem;border-bottom:1px solid #2a3a30;background:#0a130e}
.world-map-toolbar input,.world-map-toolbar select{height:32px;background:#050a07;border:1px solid #34463a;color:#bfcabd;font:11px "Cascadia Mono",Consolas,monospace;padding:0 .55rem}
.world-map-search-wrap{position:relative;min-width:0}
.world-map-search-wrap input{width:100%}
.world-map-search-results{position:absolute;left:0;right:0;top:35px;z-index:12;max-height:330px;overflow:auto;border:1px solid #556552;background:#07100bf7;box-shadow:0 12px 35px #000c}
.world-map-search-results button{width:100%;display:grid;grid-template-columns:14px 1fr auto;gap:.45rem;align-items:center;text-align:left;border:0;border-bottom:1px solid #243229;background:#08110c;color:#c4cdc1;padding:.48rem .55rem}
.world-map-search-results button:hover{background:#132017;color:#f0df8d}
.world-map-search-results b{font-size:.68rem;font-weight:500}.world-map-search-results small{color:#718176;font-size:.58rem}
.world-map-zoom{text-align:center;color:#d9ca78;font-size:.62rem}
.world-map-shell{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 260px;min-height:0;overflow:hidden}
.world-map-stage{position:relative;min-width:0;min-height:0;background:#060b08;overflow:hidden;border-right:1px solid #26362d}
#world-map-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
#world-map-canvas:active{cursor:grabbing}
.world-map-hint{position:absolute;left:10px;bottom:9px;padding:.3rem .45rem;border:1px solid #34463a;background:#06100bd9;color:#788b7d;font-size:.59rem;pointer-events:none}
.world-map-info{padding:.75rem;overflow:auto;background:#09120d}
.world-map-info-actions{display:grid;gap:.35rem;margin-top:.75rem}.world-map-info-actions button{width:100%}
.world-map-status{display:grid;gap:.24rem;color:#7f9083;font-size:.63rem;line-height:1.4}.world-map-status b{color:#d8cc82;font-weight:500}.world-map-status span{display:block}
.world-map-selection{min-height:130px}.world-map-selected{border:1px solid #314339;background:#0b1510;padding:.65rem}.world-map-selected-head{display:flex;gap:.5rem;align-items:flex-start}.world-map-selected-head b{display:block;color:#e4d78d;font-size:.72rem;font-weight:500}.world-map-selected-head small{display:block;color:#788a7d;font-size:.58rem;margin-top:.14rem}.world-map-selected .meta{margin-top:.55rem;color:#91a092;font-size:.64rem;line-height:1.45}
.world-map-key{position:absolute;left:10px;top:10px;z-index:8;width:230px;max-height:calc(100% - 20px);overflow:auto;padding:.65rem;border:1px solid #556653;background:#07100bf3;box-shadow:0 10px 32px #000c}.world-map-key label{display:flex;align-items:center;gap:.44rem;padding:.34rem .1rem;color:#9cac9f;font-size:.64rem;border-bottom:1px solid #1f2d25}.world-map-key input{accent-color:#a89a54}.world-map-key p{margin:.6rem 0 0;line-height:1.4}
.map-key-dot{display:inline-block;flex:0 0 auto;width:9px;height:9px;border-radius:50%;border:1px solid #111a14}.map-key-dot.you{background:#f2e36f}.map-key-dot.zone{background:#d2b95f}.map-key-dot.service{background:#65d1b8}.map-key-dot.site{background:#b38bd2}.map-key-dot.resource{background:#78b869}.map-key-dot.route{background:#d68e58}.map-key-dot.transition{background:#6fb8c1}.map-key-dot.landmark{background:#b8b4a0}
.world-ledger-view{height:calc(94vh - 60px);overflow:auto;background:#08110c}.world-ledger-intro{display:flex;gap:.7rem;align-items:baseline;padding:.65rem 1rem;border-bottom:1px solid #27372e;background:#0a140e;color:#819185;font-size:.64rem}.world-ledger-intro b{color:#dfd184;font-weight:500}.world-ledger-grid{grid-template-columns:1.15fr 1fr 1fr;align-items:start}
@media(max-width:900px){.world-atlas-modal{width:calc(100vw - 10px);height:96vh;max-height:96vh}.world-map-view,.world-ledger-view{height:calc(96vh - 60px)}.world-map-toolbar{grid-template-columns:1fr 1fr auto auto}.world-map-toolbar .world-map-zoom{display:none}.world-map-shell{grid-template-columns:1fr}.world-map-info{position:absolute;right:8px;bottom:8px;width:min(250px,42vw);max-height:45%;border:1px solid #435648;box-shadow:0 10px 30px #000c}.world-ledger-grid{grid-template-columns:1fr}}

/* Step 6S World Studio: isolated authoring workspace, never replaces the gameplay HUD */
#world-studio-open.hidden { display:none!important; }
#world-studio-open .dock-pixel { font-size:18px; line-height:20px; color:#d9bc83; }
.studio-modal {position:fixed;inset:2vh 1.5vw;width:97vw;max-width:none;max-height:96vh;height:96vh;overflow:hidden;padding:0;background:#101811;color:#e4dfc9;border:1px solid #677460;box-shadow:0 1rem 5rem rgba(0,0,0,.8);border-radius:10px;}
.studio-modal::backdrop { background:rgba(2,7,4,.83); backdrop-filter:blur(3px); }
.studio-modal h2 {font-size:21px;font-weight:700;line-height:1.35;margin:0;color:#eedbae;}
.studio-modal h2 small {font-size:11px;letter-spacing:.1em;color:#92aa90;font-weight:500;text-transform:uppercase;}
.studio-head {height:76px;box-sizing:border-box;padding:13px 19px;display:flex;align-items:center;justify-content:space-between;background:#1b261d;border-bottom:1px solid #425443;gap:12px;}
.studio-head .eyebrow {font-size:10px;color:#92b48d;letter-spacing:.14em;}
.studio-head-actions {display:flex;align-items:center;gap:11px;color:#a9b3a3;font-size:11px;white-space:nowrap;}
.studio-modal button,.studio-modal select,.studio-modal input,.studio-modal textarea {font-family:inherit;}
.studio-modal button {min-height:30px;padding:5px 10px;border:1px solid #455a49;border-radius:4px;color:#dce0ca;background:#26392a;cursor:pointer;font-size:11px;letter-spacing:.04em;}
.studio-modal button:hover {border-color:#afbb8d;background:#364d37;}
.studio-modal button.active {color:#18221b;background:#b7c79a;border-color:#dee6b9;font-weight:800;}
.studio-workspace {height:calc(100% - 76px);display:grid;grid-template-columns:minmax(212px,255px) minmax(280px,1fr) minmax(216px,260px);overflow:hidden;}
.studio-sidebar,.studio-inspector {padding:13px;overflow:auto;background:#162018;min-width:0;scrollbar-color:#435b44 #172118;}
.studio-sidebar {border-right:1px solid #3b4d3e;}
.studio-inspector {border-left:1px solid #3b4d3e;}
.studio-tools {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:12px 0 15px;}
.studio-tools button {padding:6px 1px;font-size:10px;}
.studio-field {display:flex;flex-direction:column;gap:5px;margin-bottom:11px;color:#a5b29d;font-size:11px;line-height:1.4;}
.studio-field input,.studio-field select,.studio-field textarea,.studio-toolbar select {background:#0d170e;border:1px solid #456048;color:#d8e0d0;border-radius:4px;padding:8px;width:100%;box-sizing:border-box;font-size:12px;min-height:32px;}
.studio-field textarea {resize:vertical;}
.studio-label {font-size:10px;color:#c4cda9;letter-spacing:.12em;font-weight:700;margin:14px 0 8px;}
.studio-palette {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;max-height:176px;overflow:auto;padding:2px;}
.studio-assets {grid-template-columns:1fr;max-height:none;min-height:150px;}
.studio-modal button.studio-palette-item {display:flex;align-items:center;justify-content:flex-start;gap:7px;padding:6px;border:1px solid #324736;background:#1b2a1d;color:#c8d2bd;text-align:left;min-height:37px;font-size:10px;letter-spacing:0;}
.studio-palette-item i {width:23px;height:23px;flex:0 0 23px;border:2px solid #849980;box-sizing:border-box;border-radius:3px;}
.studio-palette-item span {line-height:1.2;overflow-wrap:anywhere;}
.studio-palette-item small {display:block;opacity:.64;font-size:9px;}
.studio-modal button.studio-palette-item.active {border-color:#decf9a;background:#445341;color:#fff9d9;}
.studio-viewport {display:flex;flex-direction:column;min-width:0;min-height:0;background:#0a0f0c;}
.studio-toolbar {padding:10px;display:flex;flex-wrap:wrap;align-items:center;gap:7px;min-height:58px;box-sizing:border-box;border-bottom:1px solid #41503f;background:#1e2c20;}
.studio-toolbar label {display:inline-flex;align-items:center;gap:7px;font-size:11px;color:#b5c5a8;}
.studio-toolbar select {width:auto;max-width:170px;min-width:82px;padding:6px;}
.studio-toolbar strong {min-width:46px;text-align:center;font-size:11px;color:#eedab1;}
.studio-canvas-wrap {position:relative;flex:1;min-height:0;overflow:hidden;}
#studio-canvas {width:100%;height:100%;display:block;cursor:grab;touch-action:none;image-rendering:pixelated;}
.studio-canvas-hint {position:absolute;bottom:9px;left:10px;background:rgba(9,18,12,.88);border:1px solid #445e47;color:#bdc8b8;padding:8px 10px;pointer-events:none;font-size:10px;max-width:90%;}
.studio-status {box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:8px 12px;font-size:10px;min-height:34px;color:#a3bba0;background:#162318;border-top:1px solid #344936;}
.studio-status #studio-message.error {color:#f5a89a;}
#studio-selected {color:#a9bea2;font-size:11px;line-height:1.5;margin:12px 0;overflow-wrap:anywhere;}
#studio-properties {margin-bottom:16px;}
#studio-properties.hidden {display:none;}
#studio-delete {margin-top:7px;border-color:#90635a;background:#3c2522;}
.studio-inspector .small {color:#9eaf9f;line-height:1.65;font-size:10px;}
@media(max-width:950px){.studio-workspace{grid-template-columns:190px minmax(220px,1fr) 180px}.studio-sidebar,.studio-inspector{padding:8px}.studio-toolbar{gap:4px}.studio-toolbar button{padding:4px}}

/* Step 6T: independent ecology overlay and expandable surface authoring controls. */
.studio-overlays {max-height:185px;grid-template-columns:1fr 1fr}
.studio-overlays .studio-palette-item {min-width:0}
.studio-toggle {display:inline-flex;align-items:center;gap:4px;font-size:10px;white-space:nowrap;color:#baccae}
.studio-toggle input {accent-color:#adc398;min-height:0;width:auto}
.studio-expand-grid {display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:4px;align-items:center;margin:8px 0}
.studio-expand-grid strong {text-align:center;font-size:11px;font-weight:600;color:#e4d5ad}
.studio-expand-grid button {padding:5px 2px;font-size:10px}
.studio-tools button span {font-size:9px;opacity:.75}
#studio-overlays .studio-palette-item.active{outline:1px solid #e9cb7d}

.studio-palette-item img {width:28px;height:28px;flex:0 0 28px;object-fit:contain;border:1px solid #425646;background:#0b140d;border-radius:3px;image-rendering:pixelated}
.studio-modal .studio-overlays button{padding:3px;letter-spacing:0;font-size:9px}
.studio-tools{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Step 6U: progressive disclosure keeps tools close but relegates advanced authority. */
.studio-fold {margin:8px 0;border:1px solid #39513c;border-radius:5px;background:#111c14;padding:5px;}
.studio-fold > summary {list-style:none;cursor:pointer;padding:9px 7px;color:#d6d5b5;letter-spacing:.045em;font-weight:700;font-size:10px;user-select:none;}
.studio-fold > summary::before {content:'▸ ';color:#b1c68f;}
.studio-fold[open] > summary::before {content:'▾ ';}
.studio-fold > summary::-webkit-details-marker {display:none;}
.studio-fold[open] > .studio-palette {margin-top:8px;}
.studio-fold > p,.studio-fold > label {margin:8px 4px;}

#fieldwork-modal{width:min(1100px,94vw);max-height:90vh;overflow:auto;padding:22px;background:#172019;color:#d4d0af}#fieldwork-body h3{margin-top:28px;color:#d4b677}.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:12px}.field-grid .fact-card{padding:16px;border:1px solid #4c5840;background:#202a21}.field-intro{font-size:20px;color:#cbdca3}.field-grid button:disabled{opacity:.45}

#fieldwork-modal .modal-head{position:sticky;top:-22px;background:#172019;z-index:3}#fieldwork-feedback{position:sticky;top:42px;z-index:2;padding:14px;border:1px solid #9d945c;background:#29351f;color:#f0df9d;min-height:45px;box-shadow:0 3px 12px #0008}#fieldwork-feedback[data-updated="true"]{border-color:#e4ce7c}

/* Fieldwork 4: a clear activity HUD and a separate, readable character portrait. */
.world-zoom {position:absolute;right:12px;top:12px;z-index:15;display:flex;gap:3px;background:#08130f;padding:4px;border:1px solid #57674b}
.world-zoom button {min-width:34px;min-height:30px}
.gather-status {position:absolute;left:50%;bottom:70px;transform:translateX(-50%);z-index:16;background:#101e16;border:1px solid #c3a85e;padding:10px 14px;display:grid;grid-template-columns:minmax(140px,1fr) auto;gap:8px;max-width:90%;color:#eee0a1}
.gather-status.hidden {display:none}.gather-status progress {grid-column:1;grid-row:2;width:100%;height:8px;accent-color:#c6b65e}.gather-status button {grid-column:2;grid-row:1/3}
.field-progress progress {display:block;width:100%;height:8px;margin-top:10px;accent-color:#c6b65e}.unlock-row {color:#a3a99b;padding:4px 0}.unlock-row.unlocked {color:#c7db9a}
.phase-b-layout {grid-template-columns:minmax(230px,.9fr) minmax(300px,1.2fr) minmax(220px,.8fr)}
.phase-b-character .equipment-paperdoll {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;min-height:0;gap:8px}
.phase-b-character .paperdoll-avatar-stage {position:relative;inset:auto;transform:none;grid-column:1/-1;grid-row:auto;width:100%;height:auto;display:flex;flex-direction:column;align-items:center;background:#17231d;padding:14px;box-sizing:border-box;pointer-events:auto}
.phase-b-character .visual-paper-slot {grid-column:auto;grid-row:auto;min-height:68px;background:#0d1912;opacity:1;position:relative}
#character-live-preview {width:160px;height:216px;image-rendering:pixelated}.portrait-controls {display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:8px}.portrait-controls button {padding:7px;font-size:11px}
.appearance-field-label,.appearance-option {font-size:11px}.appearance-actions {position:sticky;bottom:0;background:#101c14;padding:10px 0;z-index:3}
@media(max-width:1000px){.phase-b-layout{grid-template-columns:1fr 1fr}.character-details-section{grid-column:1/-1}}
@media(max-width:650px){.phase-b-layout{grid-template-columns:1fr}}

/* Workshop milestone: inventory is a compact, searchable catalogue. */
.inventory-toolbar{display:flex;gap:10px;padding:12px 16px;position:sticky;top:0;z-index:4;background:#0d1912;border-bottom:1px solid #354535;flex-wrap:wrap}.inventory-toolbar input{flex:1;min-width:160px}.inventory-toolbar input,.inventory-toolbar select{padding:10px;background:#101d15;color:#e3dcaa;border:1px solid #455843}
#inventory-modal .inventory-content-grid{grid-template-columns:1fr;gap:18px}#inventory-modal .inventory-item-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
#inventory-modal .inventory-item-card,#inventory-modal .inventory-stack-card{min-height:84px;padding:9px;gap:8px;align-content:start}#inventory-modal .inventory-visual-frame{width:42px;height:52px}#inventory-modal .inventory-item-icon{width:30px;height:42px}#inventory-modal .inventory-card-copy b{font-size:12px}#inventory-modal .inventory-card-copy span{font-size:10px}#inventory-modal .item-actions button{font-size:10px;padding:5px}#inventory-modal .condition-line small{display:none}
#inventory-modal .container-strip{padding:8px 16px;display:flex;gap:10px;flex-wrap:wrap}#inventory-modal .visual-container{padding:6px;min-height:0;flex:1}#inventory-modal .container-icon{width:30px;height:38px}.tracked-goal{border:1px solid #c6ae64;background:#222719;padding:14px;margin-bottom:12px;color:#efe2ad}
#workshop-modal{width:min(940px,94vw);max-height:86vh;padding:0;background:#131d18;color:#d8dcc8;overflow:auto}
#workshop-modal .modal-head{position:sticky;top:0;z-index:2;background:#17231c;padding:18px 22px;border-bottom:1px solid #46523d}
#workshop-context{color:#b6a86b;letter-spacing:.12em;font-size:10px}
#workshop-title{margin:5px 0 0;font-size:20px}
#workshop-feedback{padding:12px 22px;background:#1d2a20;color:#adbba7;font-size:12px;border-bottom:1px solid #344532}
.workshop-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;min-height:360px}
#workshop-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));align-content:start;gap:10px;padding:20px}
.workshop-product{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:7px;min-height:145px;padding:12px 7px;background:#1d2a22;border:1px solid #44513e;text-transform:none;line-height:1.4}
.workshop-product .item-pixel-icon{width:32px;height:48px;flex:none}
.workshop-product b{font-size:12px;color:#d7dbbf}
.workshop-product small,.workshop-product span{font-size:10px;color:#9eaf97}
.workshop-product.locked span{color:#c5a090}
.workshop-product.selected{border-color:#e1cb79;background:#303522;box-shadow:inset 0 0 0 1px #e1cb79}
.workshop-product:hover{background:#303c2c}
#workshop-detail{padding:20px;border-left:1px solid #344532;background:#18241c;min-width:0}
.workshop-result{display:flex;align-items:center;gap:14px}.workshop-result>.item-pixel-icon{width:36px;height:54px;flex:none}
.workshop-result h3{margin:0;color:#e1d59c;font-size:15px}.workshop-result p{font-size:11px;line-height:1.5;color:#a7b5a0}
.workshop-description,.workshop-use{font-size:12px;line-height:1.5;color:#aaba9f;margin:10px 0}
#workshop-detail h4{font-size:12px;margin:12px 0 4px}
#workshop-detail .workshop-result p{margin:6px 0}
#workshop-detail .workshop-materials>div{padding:5px 0}
#workshop-detail .workshop-quantity{margin-top:12px}
#workshop-detail .workshop-estimate{margin:8px 0}
#workshop-detail .workshop-make,#workshop-detail .workshop-track{padding:9px;margin-top:6px}
.workshop-materials>div{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid #30402f;font-size:12px}
.workshop-materials .item-pixel-icon{width:18px;height:25px;flex:none}.workshop-materials span{flex:1}.workshop-materials b{white-space:nowrap}
.workshop-materials .available b{color:#b6d59a}.workshop-materials .missing b{color:#e6ac8a}
.workshop-quantity{display:flex;flex-wrap:wrap;gap:4px;margin-top:20px}.workshop-quantity button{padding:9px 12px;font-size:11px}
.workshop-quantity [aria-pressed=true],.field-tabs [aria-pressed=true]{border-color:#dbc672;color:#f0dfa1;background:#323921}
.workshop-estimate{font-size:11px;color:#a8b49d;line-height:1.6}
.workshop-make,.workshop-track{display:block;width:100%;padding:12px;margin-top:8px}.workshop-make{background:#374329;color:#f0dfa1;border-color:#bcac67}.workshop-make:disabled{opacity:.55}
.workshop-track{font-size:10px}
#fieldwork-modal .field-progress .unlock-row{display:block;width:auto;min-width:0;line-height:1.6;overflow-wrap:normal;word-break:normal}
#fieldwork-modal .field-progress .fact-card{min-width:0}
.field-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}.field-tabs button{padding:10px 14px}
#fieldwork-modal .field-grid h3{margin:0 0 12px}
@media(max-width:700px){.workshop-layout{grid-template-columns:1fr}#workshop-detail{border-left:0;border-top:1px solid #344532}#workshop-products{grid-template-columns:repeat(auto-fill,minmax(105px,1fr))}.workshop-product{min-height:125px}}
.workshop-legend{display:flex;flex-wrap:wrap;gap:16px;padding:10px 22px;font-size:11px;border-bottom:1px solid #344532}
.workshop-legend .ready{color:#b5df9d}.workshop-legend .unlocked{color:#e4c77e}.workshop-legend .locked{color:#929a97}
.workshop-product.ready{border-color:#8fba73;background:#263925}.workshop-product.ready span{color:#b5df9d}
.workshop-product.unlocked{border-color:#b49b59;background:#2c2d20}.workshop-product.unlocked span{color:#e4c77e}
.workshop-product.locked{background:#202422;border-color:#414744}.workshop-product.locked .item-pixel-icon{filter:grayscale(1);opacity:.5}.workshop-product.locked b,.workshop-product.locked small,.workshop-product.locked span{color:#929a97}
.workshop-product.selected{outline:2px solid #e9dba4;outline-offset:2px}
#inventory-modal .inventory-card-copy b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4;overflow-wrap:anywhere}
#inventory-modal .visual-container{min-height:60px;align-items:center;overflow:hidden}
#inventory-modal .container-icon .item-pixel-icon{max-width:30px;max-height:38px}

/* Frontier Camps: visible chapter identity and a readable expedition journal. */
.boot-card{max-width:820px;border-top:3px solid #c8aa65;background:linear-gradient(140deg,#192e27,#101a17 65%,#2b281c);padding:36px}
.boot-card h1{font-size:clamp(25px,4vw,42px);line-height:1.2}.boot-card>p{line-height:1.7;max-width:650px}
.frontier-boot-art{height:110px;display:flex;align-items:end;justify-content:space-around;border-bottom:1px solid #6d7851;background:linear-gradient(160deg,transparent 45%,#354a36 46%,#1c3029 75%);color:#c9b67f;font-size:75px}.frontier-boot-art span:nth-child(2){font-size:100px}
.boot-features{display:flex;gap:20px;justify-content:space-between;margin:20px 0;color:#c6c9a1;font-size:12px}
.expedition-launch{position:absolute;top:12px;left:12px;z-index:5;border:1px solid #b6a168;background:#192b22;color:#eddaa3;padding:10px 14px;font-size:11px}
.expedition-intro{background:linear-gradient(110deg,#273c2b,#1a261e);padding:20px;border:1px solid #536746}.expedition-intro h2{font-size:24px;color:#e4cf8e}.expedition-intro p{line-height:1.6;max-width:800px}.frontier-rules{font-size:12px;color:#a8ce9b}
.expedition-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.expedition-steps article{border:1px solid #46513d;padding:16px;background:#17231b}.expedition-steps p{line-height:1.5}.expedition-steps span{font-size:11px;color:#b4bba1}.expedition-steps b{color:#dec784}
@media(max-width:700px){.expedition-steps{grid-template-columns:1fr}.boot-features{flex-direction:column;gap:8px}.expedition-launch{font-size:9px;padding:6px}}
.camp-ledger,.camp-industry{border:1px solid #526149;background:#14231c;padding:20px;margin:20px 0}
.camp-ledger-heading,.camp-storage-bar{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.camp-ledger-heading h3{margin:6px 0}.camp-ledger-heading> b{font-size:11px;color:#c7b46f}
.camp-controls{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.camp-storage-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:12px}.camp-storage-columns>section{background:#0b1711;border:1px solid #394b3c;padding:14px}.camp-storage-columns h4{margin:0 0 12px;color:#cbbd86}
.camp-supply-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #24372a}.camp-supply-row b{display:block;font-size:12px}.camp-supply-row small{color:#a2baa4}.camp-supply-row button{font-size:11px;flex-shrink:0}.camp-confirm{border:1px solid #cfb36a;padding:16px;margin-top:15px;background:#302f1e}.camp-ledger details{margin-top:16px}.camp-ledger summary{cursor:pointer;color:#c7b46f}.camp-industry{border-left:3px solid #bfa565}.camp-storage-bar button[aria-pressed=true]{background:#425035;border-color:#cbbd86}
@media(max-width:700px){.camp-storage-columns{grid-template-columns:1fr}}

/* Trail journal: readable expedition cards and persistent survey progress. */
.trail-hero{padding:24px;background:linear-gradient(130deg,#253c34,#262b1c);border:1px solid #aa965c}.trail-hero h2{color:#e8d38c;font-size:26px}.trail-hero p{max-width:80ch;line-height:1.6}.trail-stats{display:flex;gap:24px;flex-wrap:wrap;color:#c9d8be}.trail-routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:20px}.trail-routes button{text-align:left;padding:18px}.trail-routes span,.trail-routes small{display:block;margin-top:10px}.trail-region{border:1px solid #455545;margin:20px 0;padding:20px;background:#121f18}.trail-region.is-current{border-left:4px solid #d6bc70}.trail-region header,.trail-region footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.trail-region h3{margin:8px 0}.trail-region footer{margin-top:16px}.trail-sites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.trail-sites article{padding:16px;background:#1e2b22;border:1px solid #53634b;display:flex;flex-direction:column;gap:8px}.trail-sites h4,.trail-sites p{margin:0}.trail-sites p{line-height:1.5;flex:1}.trail-sites button{margin-top:8px}.trail-diamond{color:#e5c777;font-size:26px}.trail-sites .is-recorded{border-color:#6c9e85}.trail-sites .is-recorded .trail-diamond{color:#9dceb1}.trail-confirm{position:relative;border:2px solid #c5ad6e;background:#303624;padding:20px;margin:16px 0}.trail-confirm button{margin-right:8px}@media(max-width:720px){.trail-sites{grid-template-columns:1fr}.trail-stats{gap:12px}}

.freight-counter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 0}.freight-counter>div{flex:1;min-width:240px}.freight-counter h3{margin:0}.freight-shipments{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:24px}.freight-shipments article{padding:20px;border:1px solid #8c8053;background:#202c23;display:flex;flex-direction:column;gap:12px}.freight-shipments h4,.freight-shipments p{margin:0}.freight-shipments b{color:#d9c889}.freight-cargo-icon{font-size:30px;color:#c8aa6c}.freight-dispatch{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 20px}

/* Supply vault: compact, readable paired inventories. */
.vault-hero{padding:18px;background:linear-gradient(110deg,#26382d,#19241e);border-left:3px solid #cfb96a}.vault-hero h2{margin:8px 0}.vault-hero p{max-width:80ch;line-height:1.5}.vault-tools{display:flex;gap:8px;flex-wrap:wrap;padding:16px 0}.vault-tools input{flex:1;min-width:200px}.vault-tools input,.vault-tools select{padding:10px;background:#101e16;border:1px solid #435541;color:#d8dfc2}.vault-quantity{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:16px}.vault-quantity span{color:#99aa90;margin-left:10px;font-size:12px}.vault-quantity [aria-pressed=true]{border-color:#d8c86b;background:#3b4228}.vault-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.vault-columns section{min-width:0;padding:12px;border:1px solid #374a39;background:#101b14}.vault-columns h3{display:flex;justify-content:space-between;gap:10px;margin:0 0 14px}.vault-columns h3 small{font-size:10px;color:#9caa8e;align-self:center}.vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:8px}.vault-item{display:flex;align-items:center;text-align:left;gap:10px;padding:10px;min-height:88px;background:#1c2b20;border:1px solid #4c6045;white-space:normal}.vault-item:enabled:hover{background:#2c3f28;border-color:#d5bf70}.vault-item:disabled{opacity:.55}.vault-item strong{display:block;font-size:12px;line-height:1.4}.vault-item small{display:block;color:#99af9d;margin:5px 0}.vault-item em{font-size:10px;color:#dfcb7e;font-style:normal}.vault-icon{flex:0 0 34px}.vault-icon svg{width:34px;height:44px}.vault-note{padding:18px 0;line-height:1.6;color:#9aaa94;font-size:12px}.vault-empty{color:#9aaa94;font-size:12px;min-height:80px}@media(max-width:760px){.vault-columns{grid-template-columns:1fr}}
#fieldwork-modal:is([data-panel="vault"],[data-panel="resupply"],[data-panel="guild"],[data-panel="works"],[data-panel="expeditions"]){padding:14px}#fieldwork-modal:is([data-panel="vault"],[data-panel="resupply"],[data-panel="guild"],[data-panel="works"],[data-panel="expeditions"]) .modal-head{top:-14px;padding:8px 12px}#fieldwork-modal:is([data-panel="vault"],[data-panel="resupply"],[data-panel="guild"],[data-panel="works"],[data-panel="expeditions"]) #fieldwork-feedback{top:32px;padding:8px 12px;min-height:32px;font-size:12px}#fieldwork-modal:is([data-panel="vault"],[data-panel="resupply"],[data-panel="guild"],[data-panel="works"],[data-panel="expeditions"]) .field-tabs{margin:10px 0;gap:4px}#fieldwork-modal:is([data-panel="vault"],[data-panel="resupply"],[data-panel="guild"],[data-panel="works"],[data-panel="expeditions"]) .field-tabs button{padding:6px 9px;font-size:11px}.vault-hero{padding:12px;position:relative}.vault-hero h2{font-size:18px;margin:5px 0}.vault-hero p{font-size:12px;margin:6px 0}.vault-hero>small{font-size:10px}.vault-hero .trail-stats{font-size:11px;padding-right:160px}.vault-hero>button{position:absolute;right:12px;bottom:12px;font-size:10px;padding:8px}.vault-tools{padding:10px 0}.vault-tools input,.vault-tools select,.vault-tools button{font-size:11px}.vault-quantity{margin-bottom:10px}.vault-quantity button{padding:6px 10px}.vault-quantity span{font-size:10px}#fieldwork-body .vault-columns h3{margin:0 0 10px;font-size:14px}.vault-item{min-height:76px;padding:8px}.vault-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}@media(max-width:760px){.vault-hero>button{position:static}.vault-hero .trail-stats{padding-right:0}}

/* Frontier 6: two-way expedition logistics. */
.resupply-hero {padding:18px 20px;background:linear-gradient(110deg,#26372b,#14241e);border-left:3px solid #bba569}
.resupply-hero h2 {margin:8px 0;color:#e2d8a3}.resupply-hero p {max-width:75ch;line-height:1.65}
.resupply-route {display:flex;align-items:center;gap:26px;padding:14px 0 2px;color:#9bb8a2}.resupply-route b {display:inline-block;color:#e0d8ae;margin-top:6px}
.resupply-meta {display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 0}.resupply-meta span {flex:1}
.resupply-columns {display:grid;grid-template-columns:1.15fr 1fr;gap:20px}.resupply-products {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.resupply-orders {display:grid;gap:12px}.resupply-orders article {padding:16px;background:#1e2d24;border:1px solid #4a5843}.resupply-orders h4 {font-size:16px;margin:10px 0}.resupply-orders button {margin:4px 4px 0 0}.resupply-orders b {color:#c9c477}
@media(max-width:760px){.resupply-columns{grid-template-columns:1fr}.resupply-route{gap:14px}.resupply-products{grid-template-columns:1fr}}

#fieldwork-modal[data-panel="resupply"] .resupply-hero{padding:12px}
#fieldwork-modal[data-panel="resupply"] .resupply-hero h2{font-size:18px;margin:5px 0}
#fieldwork-modal[data-panel="resupply"] .resupply-hero p{font-size:12px;line-height:1.5;margin:6px 0;max-width:90ch}
#fieldwork-modal[data-panel="resupply"] .resupply-hero small{font-size:10px}
#fieldwork-modal[data-panel="resupply"] .resupply-route{padding:8px 0 0;font-size:11px}
#fieldwork-modal[data-panel="resupply"] .resupply-meta{font-size:11px;padding:10px 0;gap:8px}
#fieldwork-modal[data-panel="resupply"] .resupply-meta button{font-size:10px;padding:8px}
#fieldwork-modal[data-panel="resupply"] .workshop-quantity{margin:5px 0 12px;font-size:11px}
#fieldwork-modal[data-panel="resupply"] .resupply-columns h3{font-size:14px;margin:8px 0}
#fieldwork-modal[data-panel="resupply"] .resupply-columns p{font-size:11px;line-height:1.5}
#fieldwork-modal[data-panel="resupply"] .resupply-orders article{padding:12px}
#fieldwork-modal[data-panel="resupply"] .resupply-orders small{font-size:10px}
#fieldwork-modal[data-panel="resupply"] .resupply-orders h4{font-size:14px}
#fieldwork-modal[data-panel="resupply"] .resupply-orders b{font-size:12px}
#fieldwork-modal[data-panel="resupply"] .resupply-orders button{font-size:10px;padding:8px}
/* Frontier 7: persistent trade progression. */
.guild-hero{display:grid;grid-template-columns:1fr 210px;gap:20px;padding:14px;background:linear-gradient(110deg,#26372b,#15251d);border-left:3px solid #bba569}.guild-hero small{font-size:10px}.guild-hero h2{font-size:18px;margin:6px 0}.guild-hero p{font-size:12px;line-height:1.6;margin:6px 0}.guild-hero aside{display:grid;gap:7px;align-content:center;border-left:1px solid #48533c;padding-left:18px}.guild-hero aside strong{font-size:20px;color:#d3c27d}.guild-hero progress{width:100%;accent-color:#b5bf79;height:8px}
.guild-ranks{display:flex;gap:8px;margin:10px 0;font-size:10px}.guild-ranks span{flex:1;padding:8px;border:1px solid #374337;color:#829084}.guild-ranks .unlocked{border-color:#a4985c;color:#d3c27d;background:#292f20}
.guild-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.guild-toolbar label{font-size:11px;flex:1}.guild-toolbar button,.guild-toolbar select{font-size:11px;padding:8px}.guild-legend{display:flex;gap:16px;font-size:10px;color:#b5bf79}
.guild-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}.guild-orders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.guild-order{text-align:left;display:grid;gap:8px;min-height:145px;padding:12px;background:#202b21}.guild-order small{font-size:10px}.guild-order strong{font-size:13px}.guild-order span{font-size:10px;color:#9daf9e}.guild-order em{font-size:10px;font-style:normal}.guild-order.ready{background:#283b25;border-color:#839964}.guild-order.unlocked{border-color:#8a8051}.guild-order.locked{background:#202522;color:#89918a}.guild-order.selected{outline:2px solid #d5bd70;outline-offset:-4px}
.guild-detail{background:#1c2a21;border:1px solid #46533d;padding:14px;position:sticky;top:80px}.guild-detail h3{font-size:17px;margin:8px 0}.guild-detail h4{font-size:12px;margin:16px 0 8px}.guild-detail p{font-size:11px;line-height:1.65}.guild-detail>small{font-size:10px;color:#bbaa70}.guild-detail .primary{width:100%;font-size:12px;padding:12px}.guild-materials>div{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid #334232;font-size:11px}.guild-materials span{display:flex;align-items:center;gap:8px}.guild-materials svg{width:28px;height:28px;flex-shrink:0}.guild-materials .enough{color:#b4ce8b}.guild-materials .missing{color:#c48c70}.guild-reward{display:flex;justify-content:space-between;gap:10px;margin:14px 0;color:#d3c27d;font-size:12px}
@media(max-width:760px){.guild-hero,.guild-layout{grid-template-columns:1fr}.guild-hero aside{border-left:0;padding-left:0}.guild-detail{position:static}.guild-ranks{flex-wrap:wrap}.guild-legend{flex-wrap:wrap}}

.works-projects,.works-materials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}.works-projects .guild-order{min-height:88px}.works-detail{padding:14px;border:1px solid var(--line,#354738)}.works-detail h3,.works-detail h4{margin:8px 0}.works-detail p{font-size:12px;line-height:1.5;margin:8px 0}.works-materials article{display:flex;flex-direction:column;gap:10px;padding:14px;background:#17271d;border:1px solid #425a40}.works-materials b{display:flex;align-items:center;gap:10px}.works-materials svg{width:36px;height:40px}.works-materials progress{width:100%;accent-color:#a9c27c}.works-materials div{display:flex;gap:6px;flex-wrap:wrap}@media(max-width:760px){.works-projects,.works-materials{grid-template-columns:1fr}}

.expedition-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.expedition-active{margin-top:14px}.expedition-active>progress{width:100%;accent-color:#b7ca82}.expedition-stops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}.expedition-stops article{display:grid;gap:8px;padding:12px;border:1px solid #435344}.expedition-stops .current{border-color:#d2b775;background:#2d3525}.expedition-stops .done{color:#a9c28a}.expedition-stops span{font-size:11px}@media(max-width:760px){.expedition-plan-grid,.expedition-stops{grid-template-columns:1fr}}

/* Frontier gathering guide: readable status without relying on colour alone. */
.gather-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:end;padding:12px 0}
.gather-tools label{display:grid;gap:6px;flex:1;min-width:160px;color:var(--muted,#a4b4a3)}
.gather-tools select{width:100%;padding:10px;background:#101d16;color:#e6dba8;border:1px solid #405244}
.gather-sites .gather-site{display:flex;flex-direction:column;gap:7px;border-left:3px solid #819e6d;min-width:0}
.gather-sites .gather-site p,.gather-sites .gather-site h3{margin:4px 0}
.gather-sites .gather-site button{margin-top:auto}
.gather-sites .gather-site.locked{border-left-color:#aa9663;background:#20231e}
.gather-sites .gather-site.depleted{border-left-color:#65716b;background:#171e19;color:#a8afa6}
.gather-sites .gather-site small{letter-spacing:.08em;color:#b3bdaa}
.gather-guide-head{border-bottom:1px solid #354638;margin-bottom:16px}

/* Account lobby */
#account-panel form{display:grid;gap:14px;max-width:520px;margin:20px auto}#account-panel label{display:grid;gap:6px}#account-panel input,#account-panel textarea{padding:12px;min-width:0;width:100%;box-sizing:border-box}#account-panel textarea{height:88px;word-break:break-all}.character-roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;max-height:330px;overflow:auto}.character-roster button{display:grid;gap:8px;text-align:left;padding:16px}#account-panel .boot-actions{flex-wrap:wrap}.boot-card{max-height:92vh;overflow:auto}

#resident-dialog{max-width:520px;width:85vw;background:#15231c;color:#d5d9b9;border:1px solid #b9a86a;padding:26px;line-height:1.6}#resident-dialog::backdrop{background:#0009}

/* Atlas2 guide: per-character requests, residents, settlements and studied resources. */
.world-guide-view{height:calc(94vh - 60px);display:grid;grid-template-rows:auto minmax(0,1fr);background:#08110c}
.world-guide-toolbar{display:flex;gap:.7rem;align-items:center;padding:.55rem 1rem;border-bottom:1px solid #27372e;background:#0a140e}
.world-guide-toolbar input{flex:0 1 340px;min-width:0;font-size:.68rem;padding:.42rem .55rem;background:#060d09;color:#d8d3a8;border:1px solid #304137}
.world-guide-body{overflow:auto;padding:.7rem 1rem 1.2rem}
.guide-tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.7rem;position:sticky;top:-.7rem;padding:.35rem 0;background:#08110c;z-index:1}
.guide-tabs button{font-size:.62rem;padding:.38rem .6rem;color:#8e9d91;background:#08110c;border:1px solid #304137;display:inline-flex;gap:.4rem;align-items:center}
.guide-tabs button span{color:#6f8274;font-size:.58rem}
.guide-tabs button.active{color:#f0df8c;border-color:#a18e49;background:#161b11}
.guide-tabs button.active span{color:#c9b86a}
.guide-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:.6rem;align-items:start}
.guide-intro{grid-column:1/-1;margin:0 0 .15rem;color:#7f9184;font-size:.64rem}
.guide-card{border:1px solid #2e3c31;background:#0c1510;padding:.65rem;font-size:.68rem;min-width:0}
.guide-card.ready{border-color:#40634b}
.guide-card header{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start}
.guide-card header b{display:block;color:#e1d694;font-weight:500;font-size:.76rem}
.guide-card header small{display:block;color:#788a7d;font-size:.6rem;margin-top:.15rem}
.guide-meta{color:#a0ac9f;margin-top:.45rem;line-height:1.45}
.guide-muted{color:#728476;font-size:.62rem}
.guide-ok{color:#8fcda2}.guide-warn{color:#d6a36d}
.guide-badge{flex:0 0 auto;font-size:.55rem;letter-spacing:.06em;padding:.18rem .32rem;border:1px solid #39463b;color:#899689}
.guide-badge.ready{color:#8fcda2;border-color:#477157}
.guide-badge.gather{color:#d9c27a;border-color:#6b5f35}
.guide-badge.done{color:#7d8a80;border-color:#334036}
.guide-progress{height:4px;background:#17241b;margin:.55rem 0 .2rem}
.guide-progress span{display:block;height:100%;background:#a18e49}
.guide-card blockquote{margin:.5rem 0 0;padding:.4rem .55rem;border-left:2px solid #a18e49;color:#d4cda2;background:#101a13;line-height:1.45}
.guide-history{list-style:none;margin:.5rem 0 0;padding:0;max-height:9.5rem;overflow:auto;border-top:1px solid #1f2d23}
.guide-history li{display:grid;grid-template-columns:5.6rem 1fr;gap:.4rem;padding:.22rem 0;border-bottom:1px solid #16231a;color:#a0ac9f}
.guide-history time{color:#6f8274;font-size:.58rem}
.guide-subhead{margin-top:.55rem;color:#c6b46a;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase}
.guide-nearby{list-style:none;margin:.25rem 0 0;padding:0}
.guide-nearby button,.guide-links button{width:100%;display:flex;align-items:center;gap:.4rem;text-align:left;background:none;border:0;border-bottom:1px solid #16231a;color:#a0ac9f;font-size:.64rem;padding:.25rem 0;cursor:pointer}
.guide-nearby button small{margin-left:auto;color:#6f8274}
.guide-nearby button:hover,.guide-links button:hover{color:#f0df8c}
.guide-links{margin-top:.45rem}
.guide-actions{display:flex;gap:.35rem;margin-top:.6rem}
.guide-actions button{font-size:.58rem;padding:.32rem .5rem}
.guide-empty{grid-column:1/-1;color:#7f9184;font-size:.7rem;padding:1.5rem 0}
.guide-inline{margin-top:.55rem;padding-top:.5rem;border-top:1px solid #23332a;color:#a0ac9f;font-size:.62rem;line-height:1.5}
.guide-inline b{display:block;color:#c6b46a;font-weight:500;font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.15rem}
@media(max-width:900px){.world-guide-view{height:calc(96vh - 60px)}.guide-list{grid-template-columns:1fr}.world-guide-toolbar{flex-wrap:wrap}}
.guide-ties{margin-top:.3rem}