.world-map-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; margin: 31px 0 20px; }
.world-map-heading > .eyebrow { flex-basis: 100%; }
.world-map-heading h1 { margin-top: 8px; font: 400 clamp(36px, 5vw, 52px)/1.15 var(--serif); letter-spacing: -.025em; }
.world-map-heading h1:focus { outline: none; }
.world-map-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border: 1px solid #705450; border-radius: 20px; color: #c8ae9f; font-size: 10px; }
.world-map-intro { max-width: 710px; margin-bottom: 30px; color: #b6a8a0; font-size: 13px; line-height: 1.8; }
.offline-map {
  --om-sea: #17141b;
  --om-surface: #201a21;
  --om-border: #4b3944;
  --om-gold: #d0b58a;
  --om-ink: #eee5d7;
  --om-muted: #b9aaa9;
  min-width: 0;
  color: var(--om-ink);
}
.om-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.om-title { color: #d8c3b1; font: 400 19px/1.3 var(--serif); }
.om-badge { display: inline-flex; align-items: center; flex-shrink: 0; gap: 8px; min-height: 30px; border: 1px solid #624b4c; border-radius: 20px; color: #d2b5a7; padding: 6px 11px; font-size: 10px; }
.offline-map svg { display: block; width: 19px; height: 19px; flex-shrink: 0; }
.om-badge svg { width: 13px; height: 13px; }
.om-tools { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 20px; }
.om-search { position: relative; width: min(420px, 100%); flex-shrink: 0; z-index: 5; }
.om-search-label { display: block; margin-bottom: 8px; color: #d9c5b1; font-size: 12px; }
.om-search-field { display: flex; align-items: center; gap: 12px; min-height: 50px; background: #211b21; border: 1px solid #705353; border-radius: 5px; padding: 0 6px 0 15px; }
.om-search-field:focus-within { border-color: var(--om-gold); box-shadow: 0 0 0 1px #d0b58a; }
.om-search-field > svg { color: var(--om-gold); }
.om-search input { min-width: 0; width: 100%; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--om-ink); font: 16px var(--sans); outline: 0; box-shadow: none; }
.om-search input:focus { outline: 0; box-shadow: none; }
.om-search input::placeholder { color: #ac989c; font-size: 14px; opacity: 1; }
.om-search input::-webkit-search-cancel-button { display: none; }
.om-clear-search { display: grid; place-items: center; flex: 0 0 44px; width: 44px; min-height: 44px; padding: 10px; border: 0; background: transparent; color: var(--om-muted); border-radius: 3px; }
.om-search-help { margin-top: 7px; font-size: 10px; line-height: 1.6; color: var(--om-muted); }
.om-search-results { position: absolute; top: 85px; left: 0; right: 0; overflow: auto; max-height: 290px; margin: 0; padding: 5px; list-style: none; border: 1px solid #82665a; background: #251e25; box-shadow: 0 14px 25px #0007; border-radius: 5px; }
.om-place-result { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 9px 10px; gap: 12px; border: 0; background: transparent; color: var(--om-ink); border-radius: 3px; text-align: left; font-size: 14px; }
.om-place-result > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.om-place-result > svg { color: var(--om-gold); width: 16px; height: 16px; }
.om-place-result:hover, .om-place-result:focus-visible, .om-clear-search:hover { background: #433038; }
.om-place-result:focus-visible { outline-offset: -2px; }
.om-no-results { padding: 15px 12px; color: var(--om-muted); font-size: 13px; line-height: 1.6; }
.om-overview-note { max-width: 305px; padding-left: 18px; border-left: 1px solid #665048; color: var(--om-muted); font-size: 12px; line-height: 1.7; }
.om-overview-note strong { color: #d8c5b7; font-weight: 500; }
.om-frame { position: relative; isolation: isolate; overflow: hidden; min-width: 0; height: clamp(350px, 62vh, 570px); background: var(--om-sea); border: 1px solid #735548; border-radius: 7px; box-shadow: 0 20px 40px #0003, inset 0 0 0 4px #a9855820; }
.om-frame::after { content: ''; position: absolute; z-index: 450; inset: 5px; border: 1px solid #b792661c; border-radius: 3px; pointer-events: none; }
.om-canvas { width: 100%; height: 100%; background: radial-gradient(ellipse at 60% 45%, #25202a, #141319 90%); font-family: var(--sans); outline-offset: -3px; }
.om-canvas:focus-visible { outline: 2px solid var(--om-gold); }
.om-canvas svg { width: auto; height: auto; }
.om-map-controls { position: absolute; z-index: 600; top: 16px; left: 16px; display: flex; align-items: center; gap: 7px; }
.om-control { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 11px; border: 1px solid #75604e; background: #221c25f5; color: #e4cfac; border-radius: 4px; box-shadow: 0 2px 5px #0004; }
.om-control:hover { background: #47303b; }
.om-control:disabled { cursor: default; opacity: .48; }
.om-control:focus-visible, .om-clear-search:focus-visible, .om-retry:focus-visible { outline-offset: 3px; }
.om-reset { margin-left: 2px; padding: 11px 14px; font-size: 12px; }
.om-compass { position: absolute; z-index: 450; top: 20px; right: 24px; width: 29px; color: var(--om-gold); text-align: center; pointer-events: none; text-shadow: 0 1px 5px #000; }
.om-compass-north { display: block; font: 10px var(--serif); letter-spacing: .06em; }
.om-compass-needle { display: block; margin-top: 2px; font: 43px/.9 var(--serif); }
.om-loading { position: absolute; z-index: 500; inset: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; padding: 70px 25px; color: #d0bca6; background: radial-gradient(ellipse, #322433 0, var(--om-sea) 70%); text-align: center; font: 18px var(--serif); }
.om-loading > svg { width: 55px; height: 55px; stroke-width: .6; color: var(--om-gold); }
.om-retry { min-width: 100px; min-height: 44px; padding: 10px 20px; border: 1px solid #9a7267; background: #60313b; color: var(--om-ink); border-radius: 4px; font: 13px var(--sans); }
.om-selection { position: absolute; z-index: 450; bottom: 23px; right: 18px; display: flex; align-items: center; gap: 12px; max-width: min(65%, 320px); padding: 13px 16px; border: 1px solid #7c5c52; border-radius: 5px; background: #251b24f2; box-shadow: 0 4px 12px #0005; pointer-events: none; }
.om-selection > svg { color: #d4948e; width: 22px; height: 22px; }
.om-selection > div { min-width: 0; }
.om-selection-eyebrow { display: block; margin-bottom: 5px; color: #baa194; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.om-selection strong { display: block; color: #f0dcbd; font: 20px/1.2 var(--serif); overflow-wrap: anywhere; }
.om-canvas .om-place-label { padding: 0; border: 0; background: transparent; color: #d9c5a8; box-shadow: none; font: 11px/1.3 var(--sans); text-shadow: -1px -1px 2px #141219, 1px 1px 2px #141219, 0 0 5px #141219; }
.om-canvas .om-place-label.is-selected { color: #ffe0ac; font-size: 12px; font-weight: 600; }
.om-canvas .om-place-label::before { display: none; }
.om-canvas .leaflet-control-scale { margin-left: 17px; margin-bottom: 18px; }
.om-canvas .leaflet-control-scale-line { border-color: #b69d7c; border-width: 0 1px 1px; color: #cbb596; background: #1b161ece; padding: 3px 5px 2px; text-shadow: none; font-size: 9px; }
.om-status-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 15px 0 14px; border-bottom: 1px solid #3e3138; }
.om-status { color: #c3b1a6; font-size: 11px; line-height: 1.6; min-height: 18px; }
.om-detail { flex-shrink: 0; color: #ac998e; font-size: 10px; line-height: 1.8; }
.om-footer { display: grid; grid-template-columns: 1fr auto; gap: 9px 24px; margin-top: 14px; padding-bottom: 4px; }
.om-navigation-help, .om-attribution, .om-privacy { color: #a79891; font-size: 10px; line-height: 1.7; }
.om-attribution { text-align: right; }
.om-attribution a { color: #cfb693; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; margin-top: -12px; margin-bottom: -12px; }
.om-privacy { grid-column: 1 / -1; color: #96888a; }
.om-street-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; margin: 0 0 18px; padding: 16px 18px; border: 1px solid #644b50; border-radius: 6px; background: linear-gradient(115deg, #32232f, #201c25); }
.om-street-copy { min-width: 0; }
.om-street-copy strong { color: #e8d0ac; font: 400 18px/1.3 var(--serif); }
.om-street-copy p { max-width: 680px; margin-top: 6px; font-size: 11px; line-height: 1.7; color: #c0b0aa; }
.om-street-actions { display: flex; align-items: center; }
.om-street-button { min-height: 44px; min-width: 44px; max-width: 100%; padding: 11px 18px; border: 1px solid #b28b65; border-radius: 4px; background: #68413f; color: #f5e4c9; font: 500 12px/1.4 var(--sans); cursor: pointer; }
.om-street-button:hover { background: #7b4d4c; }
.om-street-button--quiet { background: #28212a; border-color: #806657; }
.om-street-button:disabled { opacity: .5; cursor: wait; }
.om-street-status { grid-column: 1 / -1; color: #bda684; font-size: 10px; line-height: 1.6; }
.offline-map[data-street-state="ready"] .om-street-tools { border-color: #957352; }
.offline-map[data-street-state="error"] .om-street-status { color: #e1aba1; }
@media (max-width: 540px) {
  .om-street-tools { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
  .om-street-actions, .om-street-button { width: 100%; }
}
@media (max-width: 800px) {
  .om-tools { gap: 20px; }
  .om-search { width: min(360px, 65%); }
  .om-overview-note { font-size: 11px; padding-left: 14px; }
  .om-footer { grid-template-columns: 1fr; gap: 10px; }
  .om-attribution { text-align: left; }
}
@media (max-width: 540px) {
  .om-top { gap: 12px; margin-bottom: 18px; }
  .om-title { font-size: 18px; }
  .om-badge { font-size: 8px; gap: 5px; padding: 6px 8px; }
  .om-badge svg { width: 12px; height: 12px; }
  .om-tools { display: block; margin-bottom: 17px; }
  .om-search { width: 100%; }
  .om-search-help { font-size: 9px; }
  .om-overview-note { max-width: none; margin-top: 16px; padding-left: 11px; font-size: 11px; }
  .om-frame { height: 390px; border-radius: 5px; }
  .om-map-controls { top: 13px; left: 13px; gap: 5px; }
  .om-reset { font-size: 11px; gap: 6px; padding-inline: 11px; }
  .om-compass { top: 17px; right: 16px; }
  .om-compass-needle { font-size: 35px; }
  .om-status-row { display: block; min-height: 80px; padding-top: 12px; }
  .om-detail { display: block; margin-top: 6px; font-size: 9px; }
  .om-selection { bottom: 21px; right: 13px; max-width: 63%; padding: 11px; gap: 8px; }
  .om-selection-eyebrow { font-size: 7px; line-height: 1.5; }
  .om-selection strong { font-size: 18px; }
  .om-selection > svg { width: 18px; height: 18px; }
  .om-canvas .om-place-label { font-size: 10px; }
  .om-canvas .leaflet-control-scale { margin-left: 13px; }
}
@media (max-width: 360px) {
  .om-badge { padding: 5px 7px; }
  .om-badge svg { display: none; }
  .om-title { font-size: 17px; }
  .om-frame { height: 355px; }
}

/* Character world: location and fictional positions exist only in this view. */
.game-world { color: #eee5d7; min-width: 0; }
.gw-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 12px 0 14px; }
.gw-heading-copy { min-width: 0; }
.gw-eyebrow { color: #b69b83; font-size: 9px; text-transform: uppercase; letter-spacing: .19em; margin-bottom: 9px; }
.gw-title { font: 400 clamp(29px, 4.5vw, 44px)/1.15 var(--serif); overflow-wrap: anywhere; letter-spacing: -.015em; }
.gw-title:focus { outline: none; }
.gw-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 15px; }
.gw-demo-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border: 1px solid #835653; border-radius: 20px; color: #e4b4a7; background: #7e3e4326; font-size: 10px; }
.gw-awareness { font-size: 12px; color: #c3b1a1; }
.gw-notice { max-width: 880px; color: #bbaeaa; font-size: 11px; line-height: 1.65; margin-top: 14px; }
.gw-toolbar { display: flex; align-items: center; gap: 14px 22px; margin-bottom: 16px; }
.gw-actions { display: flex; flex-wrap: wrap; gap: 9px; flex-shrink: 0; }
.gw-button { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 46px; padding: 11px 17px; border: 1px solid #76584e; border-radius: 5px; color: #ecd9bf; background: #34272d; font: 12px/1.5 var(--sans); text-align: center; cursor: pointer; }
.gw-button:hover { border-color: #c0987b; background: #503139; }
.gw-button--primary { background: #71323e; border-color: #a76767; color: #f8e9d5; }
.gw-button--primary:hover { background: #8b3f4a; }
.gw-button--quiet { background: #211a20; }
.gw-button:disabled { cursor: default; opacity: .45; }
.gw-button:focus-visible, .gw-ring-toggle:has(input:focus-visible) { outline: 2px solid #d0b58a; outline-offset: 3px; }
.gw-heading > .gw-button { flex-shrink: 0; }
.gw-reading { min-width: 0; }
.gw-location-status, .gw-accuracy { font-size: 11px; color: #c3b1a6; line-height: 1.65; }
.gw-accuracy { color: #adc4be; margin-top: 4px; }
.gw-error { padding: 13px 15px; margin-bottom: 17px; border: 1px solid #a25961; border-radius: 5px; color: #efc7bc; background: #62303933; font-size: 12px; line-height: 1.7; }
.game-world .om-frame { height: clamp(390px, 67svh, 720px); border-color: #9a775b; box-shadow: 0 14px 38px #0005; }
.game-world .om-top, .game-world .om-tools { display: none; }
.game-world .om-street-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; padding: 12px 14px; background: #241d26; }
.game-world .om-street-copy { flex: 1; }
.game-world .om-street-copy strong { font-size: 16px; }
.game-world .om-street-copy p { margin-top: 3px; font-size: 10px; }
.game-world .om-street-status { flex-basis: 100%; }
.game-world .om-street-actions, .game-world .om-street-button { width: auto; }
.game-world .om-status-row { min-height: 0; padding-block: 11px; gap: 12px; }
.game-world .om-footer { margin-top: 9px; }
.game-world .om-privacy { display: none; }
.gw-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 13px 0 18px; color: #b9aaa1; font-size: 10px; }
.gw-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.gw-legend-mark { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #efd1a9; background: #963e51; }
.gw-legend-mark--own { background: #5d3f38; border-color: #e5c28b; box-shadow: 0 0 0 2px #b98b4533; }
.gw-legend-mark--npc { border-color: #b4bba7; background: #666a58; border-radius: 3px; }
.gw-legend-mark--radius { width: 14px; height: 14px; border: 1px dashed #d4b47e; background: transparent; }
.gw-legend-mark--accuracy { width: 14px; height: 14px; border-color: #a9c3bf; background: #82aaa638; }
.om-canvas .gw-point-label { padding: 3px 6px; border: 1px solid #866252; border-radius: 4px; background: #261c25ed; color: #f0dac0; box-shadow: 0 2px 5px #0004; font: 10px/1.4 var(--sans); width: max-content; white-space: normal; max-width: 145px; overflow-wrap: anywhere; text-align: center; }
.om-canvas .gw-point-label--own { border-color: #b99461; color: #f6e3c5; background: #2b202aed; }
.om-canvas .gw-own-marker { width: 64px; height: 64px; border: 0; border-radius: 50%; background: transparent; }
.gw-own-avatar-frame, .gw-peer-avatar-frame { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 4px #000b); }
.gw-avatar-window { position: absolute; inset: 18.75%; overflow: hidden; border-radius: 50%; background: #251c25; box-shadow: 0 0 0 1px #dcc29a; }
.om-canvas .gw-sphere-crest { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.om-canvas .gw-peer-marker:focus-visible { outline: 2px solid #f4dfb5; outline-offset: 3px; }
/* Crop the existing full-length mortal artwork to its head and shoulders. */
.om-canvas .gw-own-avatar { position: absolute; display: block; width: 240%; height: 360%; max-width: none; left: 50%; top: -6%; transform: translateX(-50%); object-fit: cover; pointer-events: none; }
.om-canvas .gw-own-avatar--upload { width: 100%; height: 100%; left: 0; top: 0; transform: none; }
.gw-crest-key { margin: -4px 0 22px; color: #c6b3a7; font-size: 11px; }
.gw-crest-key > summary { width: fit-content; min-height: 44px; padding: 13px 3px; cursor: pointer; text-underline-offset: 4px; }
.gw-crest-key > summary:focus-visible { outline: 2px solid #dfbd87; outline-offset: 2px; }
.gw-crest-key > p { margin: 0 0 10px; line-height: 1.7; }
.gw-crest-types { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.gw-crest-types > span { display: inline-flex; align-items: center; gap: 8px; min-width: 108px; color: #e8d5bd; }
.gw-crest-types img { width: 40px; height: 40px; }
.om-canvas .gw-point-label::before { display: none; }
.gw-details { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; margin-top: 2px; }
.gw-panel { padding: 21px; border: 1px solid #4d383e; border-radius: 6px; background: linear-gradient(135deg, #282027, #1f191f); min-width: 0; }
.gw-panel h2 { font: 400 21px/1.25 var(--serif); color: #e5cfb6; }
.gw-panel-note { font-size: 11px; line-height: 1.7; color: #b5a49f; margin-top: 8px; }
.gw-demo-list { margin: 15px 0 0; padding: 0; list-style: none; }
.gw-demo-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; border-bottom: 1px solid #45313b; font-size: 12px; }
.gw-demo-list li:last-child { border-bottom: 0; }
.gw-player-name { color: #d5bfb2; overflow-wrap: anywhere; }
.gw-player-distance { color: #bd9b80; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gw-count-heading, .gw-count-list li { display: grid; grid-template-columns: minmax(50px, 1fr) 1fr 1fr; gap: 12px; align-items: center; text-align: right; }
.gw-count-heading { margin-top: 18px; padding: 0 12px 7px; font-size: 10px; color: #bda393; }
.gw-count-heading > :first-child, .gw-count-list li > :first-child { text-align: left; }
.gw-count-heading--shadowlands, .gw-count-list--shadowlands li { grid-template-columns: 1fr 1fr; }
.gw-count-list { display: grid; gap: 5px; list-style: none; padding: 0; margin: 0 0 13px; }
.gw-count-list li { min-height: 43px; padding: 8px 12px; background: #18151c; border: 1px solid #503c44; border-radius: 4px; }
.gw-count-list li > span { color: #bda393; font-size: 11px; }
.gw-count-list strong, .gw-count-list .gw-human-count { font: 400 23px/1 var(--serif); font-variant-numeric: tabular-nums; color: #edd0a5; }
.gw-count-list .gw-human-count { color: #c6cbb5; }
.gw-ring-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; width: fit-content; max-width: 100%; color: #c8b4a7; font-size: 12px; cursor: pointer; }
.gw-privacy { margin-top: 18px; padding-top: 4px; border-top: 1px solid #45333c; color: #b6a59e; }
.gw-privacy summary { display: flex; align-items: center; gap: 9px; min-height: 44px; width: fit-content; max-width: 100%; cursor: pointer; color: #cfbca9; font-size: 11px; }
.gw-privacy summary::before { content: "+"; font-size: 16px; color: #d3b78b; }
.gw-privacy[open] summary::before { content: "−"; }
.gw-privacy summary::-webkit-details-marker { display: none; }
.gw-privacy summary:focus-visible { outline: 2px solid #d0b58a; outline-offset: 2px; }
.gw-privacy p { max-width: 720px; padding-bottom: 12px; font-size: 11px; line-height: 1.8; }
.gw-ring-toggle input { appearance: auto; -webkit-appearance: checkbox; width: 19px; height: 19px; margin: 0; flex: 0 0 19px; accent-color: #a26863; }
@media (max-width: 800px) {
  .gw-toolbar { align-items: flex-start; flex-direction: column; gap: 11px; }
  .gw-details { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 540px) {
  .gw-heading { align-items: flex-start; gap: 12px; margin-top: 5px; }
  .gw-eyebrow { font-size: 8px; letter-spacing: .12em; }
  .gw-heading > .gw-button { padding-inline: 12px; font-size: 11px; }
  .gw-awareness { font-size: 11px; }
  .gw-notice { font-size: 10px; margin-top: 12px; }
  .gw-actions { width: 100%; }
  .gw-actions > .gw-button { flex: 1; padding-inline: 9px; font-size: 11px; }
  .gw-toolbar { margin-bottom: 14px; }
  .game-world .om-frame { height: clamp(390px, 62svh, 570px); }
  .game-world .om-status-row { display: block; }
  .game-world .om-detail { margin-top: 4px; }
  .gw-legend { gap: 11px 16px; font-size: 9px; }
  .gw-panel { padding: 17px; }
  .gw-count-list { gap: 5px; }
}
@media (max-width: 360px) {
  .game-world .om-frame { height: clamp(355px, 62svh, 520px); }
  .gw-title { font-size: 26px; }
  .gw-heading { gap: 8px; }
}

.gw-live-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border: 1px solid #667e6e; border-radius: 20px; color: #d7e4cb; background: #334b3326; font-size: 10px; }
.game-world[data-world-state="stale"] .gw-live-badge, .game-world[data-world-state="connecting"] .gw-live-badge { color: #e1c69b; border-color: #9d7750; background: #5a412426; }
.game-world[data-world-state="stale"] .gw-own-marker { opacity: .55; }
.gw-player-list { margin: 12px 0 0; padding: 0; list-style: none; }
.gw-player-list li { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #49323d; }
.gw-player-list li:last-child { border-bottom: 0; }
.gw-peer-action { min-height: 44px; flex: 1; min-width: 0; padding: 9px 0; border: 0; background: transparent; color: #ecd0b1; font: 12px/1.5 var(--sans); text-align: left; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
.gw-peer-sphere { display: block; color: #baa58e; font-size: 10px; text-decoration: none; }
.om-canvas .gw-peer-marker { border: 0; background: transparent; border-radius: 50%; }
.om-canvas .gw-peer-avatar { position: absolute; display: block; width: 240%; height: 360%; max-width: none; left: 50%; top: -6%; transform: translateX(-50%); object-fit: cover; pointer-events: none; }
.om-canvas .gw-peer-avatar--upload { position: static; width: 100%; height: 100%; transform: none; object-fit: cover; }
.gw-humans { margin-top: 19px; padding-top: 17px; border-top: 1px solid #4d383e; }
.gw-humans h3 { color: #cbd0bb; font: 400 19px/1.25 var(--serif); }
.gw-npc-list { list-style: none; padding: 0; margin: 12px 0 0; max-height: 240px; overflow-y: auto; scrollbar-color: #695a55 #211a22; }
.gw-npc-list li { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 36px; border-bottom: 1px solid #493b3d; font-size: 12px; }
.gw-npc-list li:last-child { border-bottom: 0; }
.gw-npc-name { display: inline-flex; align-items: center; gap: 9px; color: #cbd0bb; }
.gw-npc-action { flex: 1; min-width: 0; min-height: 44px; padding: 8px 0; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.gw-npc-action:focus-visible, .om-canvas .gw-npc-marker:focus-visible { outline: 2px solid #f0d5ad; outline-offset: 3px; }
.gw-npc-action:disabled { cursor: default; opacity: .6; }
.gw-human-symbol { position: relative; display: inline-block; width: 15px; height: 21px; flex: 0 0 15px; }
.gw-human-symbol::before { content: ''; position: absolute; width: 6px; height: 6px; left: 4px; top: 2px; border-radius: 50%; background: #b2baa2; }
.gw-human-symbol::after { content: ''; position: absolute; width: 12px; height: 9px; left: 1px; top: 10px; border-radius: 6px 6px 2px 2px; background: #b2baa2; }
.om-canvas .gw-npc-marker { border: 0; background: transparent; border-radius: 9px; }
.om-canvas .gw-npc-marker .gw-npc-avatar-frame { margin: 6px; }
.om-canvas .gw-npc-marker[aria-disabled="true"] { cursor: default; }
.gw-npc-avatar-frame { display: grid; place-items: center; width: 32px; height: 32px; color: #d7ddc4; border: 1px solid #b0b899; border-radius: 9px; background: #33372eed; box-shadow: 0 0 0 2px #242b23c9, 0 3px 7px #0006; }
.gw-npc-avatar-frame svg { display: block; width: 22px; height: 22px; fill: currentColor; stroke-width: .6; }
.om-canvas .gw-point-label--npc { border-color: #727d65; color: #d6dcc7; background: #242b23ed; font-size: 9px; }
.gw-encounter { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 18px; padding: 17px 20px; border: 1px solid #a9805e; border-radius: 6px; background: #30202a; }
.gw-encounter h2 { flex-basis: 100%; font: 400 25px/1.3 var(--serif); color: #ebd0a9; }
.gw-encounter p { flex: 1; min-width: 160px; font-size: 12px; color: #c9b7ab; }

/* A private encounter view never moves or replaces the underlying map nodes. */
.npc-panel { position: fixed; z-index: 1200; top: 105px; right: 24px; bottom: 24px; width: min(390px, calc(100vw - 48px)); overflow-y: auto; overscroll-behavior: contain; padding: 24px; border: 1px solid #a9805e; border-radius: 12px; background: radial-gradient(ellipse at top right, #63304338, transparent 65%), #231c25; color: #eadbca; box-shadow: 0 18px 65px #0009; scrollbar-color: #8a6c63 #231c25; }
.npc-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.npc-panel-heading > div { min-width: 0; }
.npc-panel-heading h2 { margin: 7px 0 0; color: #f0d5ad; font: 400 29px/1.2 var(--serif); overflow-wrap: anywhere; }
.npc-panel-heading h2:focus { outline: none; }
.npc-panel-heading .gw-button { flex: 0 0 auto; }
.npc-panel-status { margin: 18px 0; font-size: 12px; line-height: 1.6; color: #c6b4ac; }
.npc-profile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 22px; padding: 18px 0; border-block: 1px solid #61474e; }
.npc-profile > div { min-width: 0; }
.npc-profile > div:last-child { grid-column: 1 / -1; }
.npc-profile dt { color: #bda790; font-size: 10px; letter-spacing: .05em; }
.npc-profile dd { margin: 5px 0 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.npc-round h3 { margin: 0 0 10px; color: #e4c59c; font: 400 21px/1.3 var(--serif); }
.npc-round p { font-size: 12px; line-height: 1.7; color: #cbbcaf; }
.npc-countdown { font-variant-numeric: tabular-nums; }
.npc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.npc-actions .gw-button { flex: 1; min-width: 110px; }
.npc-result { padding: 12px; border-left: 2px solid #b49a70; background: #ab936715; }
.npc-future { display: grid; gap: 9px; margin-top: 23px; padding-top: 18px; border-top: 1px solid #61474e; }
.npc-future-row { display: flex; align-items: center; gap: 14px; }
.npc-future-row .gw-button { flex: 1; text-align: left; }
.npc-future-row > span { color: #b6a08f; font-size: 11px; }
.npc-panel [hidden] { display: none !important; }
@media (max-width: 600px) {
  .npc-panel { top: auto; right: 0; bottom: 0; width: 100%; max-height: 78svh; padding: 21px 20px max(24px, env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .npc-panel-heading h2 { font-size: 27px; }
}

/* Powers remain inside the active world, preserving foreground location. */
.gw-power-host { margin: 0 0 22px; min-width: 0; }
.power-panel { padding: 24px; border: 1px solid #9b765d; border-radius: 8px; background: radial-gradient(ellipse at top right, #63304338, transparent 65%), #231c25; box-shadow: 0 14px 40px #0004; color: #eadbca; min-width: 0; }
.power-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.power-panel-heading h2 { font: 400 31px/1.2 var(--serif); color: #f0d5ad; margin: 0; }
.power-panel-heading h2:focus { outline: none; }
.power-panel-intro { margin: 12px 0 18px; color: #c6b4ac; font-size: 12px; line-height: 1.7; }
.power-resources { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.power-resource { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 120px; padding: 12px 16px; background: #18141c; border: 1px solid #5f4650; border-radius: 5px; }
.power-resource span { color: #c5aa95; font-size: 12px; }
.power-resource strong { font: 400 26px/1 var(--serif); color: #efd5a7; }
.power-status-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 16px; }
.power-status { color: #b9c6b5; font-size: 11px; line-height: 1.6; }
.power-layout { display: grid; grid-template-columns: minmax(180px, .85fr) minmax(0, 1.4fr); align-items: start; gap: 18px; }
.power-list { display: flex; flex-direction: column; gap: 7px; max-height: 570px; overflow-y: auto; overscroll-behavior: contain; padding: 3px; min-width: 0; }
.power-choice { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 62px; gap: 10px; padding: 12px; border: 1px solid #543b49; border-radius: 5px; background: #211922; color: #dbc7b6; font: 12px/1.4 var(--sans); text-align: left; cursor: pointer; }
.power-choice:hover { border-color: #ac7e73; background: #33222f; }
.power-choice[aria-pressed="true"] { border-color: #c19a72; background: linear-gradient(110deg, #51303f, #30202d); box-shadow: inset 3px 0 #d4ac7d; }
.power-choice:disabled { opacity: .7; cursor: progress; }
.power-choice-copy { min-width: 0; overflow-wrap: anywhere; }
.power-choice-copy strong, .power-choice-copy small { display: block; }
.power-choice-copy strong { font-weight: 500; font-size: 13px; }
.power-choice-copy small { margin-top: 5px; color: #b69f96; font-size: 10px; }
.power-choice-state { flex-shrink: 0; font-size: 9px; color: #c6aa89; }
.power-choice-state[data-state="active"] { color: #b8d4ad; }
.power-choice-state[data-state="unavailable"] { color: #aa929b; }
.power-detail { padding: 21px; min-width: 0; border: 1px solid #60424f; border-radius: 6px; background: #19141d; }
.power-detail h3 { margin: 0 0 12px; font: 400 28px/1.2 var(--serif); color: #f0d5ae; overflow-wrap: anywhere; }
.power-description { color: #c8b7ad; font-size: 12px; line-height: 1.8; }
.power-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0; padding: 15px 0; border-block: 1px solid #49333e; }
.power-facts dt { color: #a58c91; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; margin-bottom: 7px; }
.power-facts dd { margin: 0; color: #e0c5ab; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.power-effect { display: inline-block; margin-bottom: 15px; padding: 7px 10px; border: 1px solid #718067; border-radius: 4px; background: #34413144; color: #d3e2bc; font-size: 12px; }
.power-unavailable, .power-resource-note { color: #c0ada7; font-size: 11px; line-height: 1.7; margin-bottom: 16px; }
.power-resource-note { color: #e1b794; }
.power-target { display: flex; flex-direction: column; gap: 8px; margin: 17px 0; }
.power-target label { font-size: 12px; color: #dfc5ae; }
.power-target select { width: 100%; max-width: 100%; min-height: 46px; padding: 10px; border: 1px solid #76525d; border-radius: 4px; color: #f0dcc6; background: #30212c; font: 12px/1.5 var(--sans); }
.power-target-help { color: #af9a98; font-size: 10px; line-height: 1.6; }
.power-source { margin-top: 20px; color: #a99591; }
.power-source summary { min-height: 44px; padding-block: 12px; font-size: 10px; cursor: pointer; }
.power-source p { font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.power-result { margin-top: 18px; padding: 18px 21px; border: 1px solid #967054; border-radius: 5px; background: #44312666; }
.power-result h3 { font: 400 22px/1.3 var(--serif); color: #edc999; margin: 0 0 10px; }
.power-result p { font-size: 12px; line-height: 1.7; color: #dbc4b2; overflow-wrap: anywhere; }
.power-result .power-result-successes { color: #e8cb96; margin-top: 9px; }
.power-dice { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.power-dice > span { display: grid; place-items: center; width: 35px; min-height: 35px; border: 1px solid #654854; border-radius: 5px; color: #c1aeb3; background: #261923; font: 16px/1 var(--serif); }
.power-dice > .is-success { color: #f3d29e; border-color: #be9365; background: #614235; }
.power-empty { color: #b39e9b; font-size: 12px; line-height: 1.7; }
.npc-attack-row { padding-block: 14px; border-block: 1px solid #62454f; margin-block: 15px; }
.npc-attack-row > .gw-button { width: 100%; min-height: 46px; border-color: #ad6d68; background: #522d38; }
.combat-note { font-size: 12px; line-height: 1.7; color: #c4afaa; }
.combat-panel { max-width: 620px; }
.combat-tracks { display: grid; gap: 13px; margin-block: 20px; padding: 16px; border: 1px solid #684851; background: #19141d; border-radius: 6px; }
.combat-track { display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: 7px 12px; align-items: center; color: #ebd1af; font-size: 13px; }
.combat-pips { display: flex; flex-wrap: wrap; gap: 6px; }
.combat-pip { display: block; width: 12px; height: 12px; border: 1px solid #bd9a77; border-radius: 50%; background: #2c202a; }
.combat-pip--filled { background: #ba646d; border-color: #e1a6a7; box-shadow: 0 0 6px #a6445844; }
.combat-track-label { grid-column: 2; font-size: 10px; color: #bba39b; }
.combat-human-track .combat-pip { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 2px; font: 700 20px/1 Georgia, serif; font-style: normal; }
.combat-pip--bashing { color: #ffe5b4; background: #53412e; border-color: #d5ba82; }
.combat-pip--lethal { color: #fff0e8; background: #803d48; border-color: #edb5ad; }
.combat-pip--aggravated { color: #fff1fc; background: #61374c; border-color: #ddb4d2; }
.combat-player-status { font-size: 12px; line-height: 1.5; color: #d9c7b7; }
.combat-wound-legend { line-height: 1.7; overflow-wrap: anywhere; }
.combat-human-track .combat-track-label { line-height: 1.6; }
.combat-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block: 18px; }
.combat-action-card { padding: 12px; border: 1px solid #60414e; border-radius: 5px; background: #251b26; min-width: 0; }
.combat-action-card .gw-button { width: 100%; min-height: 46px; }
.combat-action-card .gw-button[aria-pressed="true"] { color: #fbe0b5; border-color: #cea575; background: #5b3a42; }
.combat-action-card p { margin: 9px 0 0; font-size: 11px; line-height: 1.6; color: #bea9a5; overflow-wrap: anywhere; }
.combat-events { padding-left: 19px; font-size: 12px; line-height: 1.8; color: #e0c2b3; }
.combat-events li { margin-block: 6px; }
.combat-initiative { color: #d2b186; font-size: 12px; line-height: 1.6; }
.combat-round-heading { margin: 28px 0 8px; color: #efd5aa; font: 500 22px/1.35 Georgia, serif; }
.combat-scoring, .combat-calculation-unavailable { color: #bfaea8; font-size: 12px; line-height: 1.7; }
.combat-events { padding: 0; list-style: none; }
.combat-events .combat-event { margin: 14px 0; padding: 16px; min-width: 0; border: 1px solid #75515c; border-radius: 7px; background: #211a24; overflow-wrap: break-word; }
.combat-event h4 { margin: 0 0 12px; color: #f1d6b4; font-size: 14px; line-height: 1.6; }
.combat-calculation { display: grid; gap: 10px; min-width: 0; }
.combat-roll { padding: 10px 12px; border-left: 2px solid #9c7a60; background: #17131a; min-width: 0; }
.combat-roll strong { color: #dcc29b; font-size: 12px; }
.combat-roll p, .combat-damage-result p { margin: 4px 0 0; }
.combat-formula { color: #ead9cd; font-variant-numeric: tabular-nums; line-height: 1.8; }
.combat-roll-score { color: #c5b5a4; }
.combat-margin, .combat-result-reason { margin: 2px 0; color: #cbbdb5; }
.combat-damage-result { padding: 13px; border: 1px solid #946b63; border-radius: 4px; background: #38232d; min-width: 0; }
.combat-damage-result strong { color: #ffe0ad; }
.combat-wound-change { padding-top: 6px; color: #f2c9b6; }
@media (max-width: 420px) { .combat-actions { grid-template-columns: minmax(0, 1fr); } }
.power-choice:focus-visible, .power-target select:focus-visible, .power-source summary:focus-visible { outline: 2px solid #dfbd87; outline-offset: 2px; }
@media (max-width: 700px) {
  .power-panel { padding: 17px; }
  .power-layout { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .power-list { max-height: 240px; }
  .power-detail { padding: 18px; }
  .power-detail > .gw-button { width: 100%; }
  .power-panel-heading h2 { font-size: 28px; }
}
@media (max-width: 380px) {
  .power-panel { padding: 13px; }
  .power-detail { padding: 14px; }
  .power-facts { grid-template-columns: 1fr; gap: 11px; }
  .power-facts > div { display: flex; align-items: baseline; gap: 15px; }
  .power-facts dt { min-width: 56px; margin-bottom: 0; }
  .power-status-bar { align-items: flex-start; }
}

.gw-targeted-test{margin:1rem 0;padding:1rem;border:1px solid #746141;border-radius:.65rem;max-width:38rem}.gw-targeted-test summary{cursor:pointer;color:#e1ca9a;font-weight:600;min-height:2.5rem}.gw-targeted-test label{display:block;margin:.75rem 0 .3rem}.gw-targeted-test select{width:100%;min-height:2.75rem;padding:.55rem;background:#17121d;color:#f0e5d4;border:1px solid #746141;border-radius:.35rem}.gw-targeted-test button{margin-top:1rem}.gw-test-result{min-height:1.5rem}