@layer field {
  .field-shell {
    border-bottom: 2px solid var(--line);
    background: #e5e5d7;
  }
  .field-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .field-toolbar > div {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .field-toolbar strong {
    font: 700 1rem var(--serif);
  }
  .field-toolbar span,
  .field-toolbar small {
    font: 0.75rem var(--sans);
    color: var(--muted);
  }
  #field-map {
    display: grid;
    grid-template-columns: repeat(var(--field-cols,23), minmax(0, 1fr));
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #d5d9cd;
  }
  .field-row {
    display: contents;
  }
  html[data-theme] #field-map .field-cell {
    display: grid;
    place-items: center;
    position: relative;
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    background: #dedec6;
    color: #60745a;
  }
  #field-map .field-cell svg {
    width: 92%;
    height: 92%;
    overflow: visible;
    shape-rendering: crispEdges;
    image-rendering: pixelated;
    pointer-events: none;
    position: relative;
    z-index: 1;
  }
  html[data-theme] #field-map .terrain-1 {
    background: #dedec6;
  }
  html[data-theme] #field-map .terrain-2 {
    background: #dedec6;
  }
  html[data-theme] #field-map :is(.terrain-3, .terrain-5) {
    background: #dedec6;
  }
  html[data-theme] #field-map .terrain-4 {
    background: #dedec6;
  }
  html[data-theme] #field-map .terrain-6 {
    background: #99bdb3;
  }
  html[data-theme] #field-map .terrain-7 {
    background: #83aaa4;
  }
  html[data-theme] #field-map .unexplored {
    background: #e9e1cc;
    color: transparent;
  }
  #field-map .fog-edge {
    z-index: 2;
  }
  #field-map .fog-edge .map-art-cloud {
    width: 145%;
    height: 145%;
    opacity: 1;
  }
  #field-map .fog-edge:nth-child(even) .map-art-cloud path + path {
    display: none;
  }
  html[data-theme] #field-map :is(.player-cell, .target-cell) {
    outline: 0;
  }
  html[data-theme] #field-map .player-cell {
    z-index: 4;
    background: #d6d6ab;
  }
  #field-map .player-cell svg {
    width: 95%;
    height: 95%;
  }
  #field-map .field-cell::after {
    content: "";
    position: absolute;
    width: 66%;
    height: 66%;
    border-radius: 0;
    pointer-events: none;
  }
  #field-map .player-cell::after {
    border: 1px solid #946c3c;
  }
  #field-map .target-cell::after {
    border: 2px dashed #984c35;
  }
  #field-map .path-cell:not(.player-cell)::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 0;
    background: #9a643f;
    z-index: 3;
    pointer-events: none;
  }
  @media (hover: hover) {
    #field-map .field-cell:hover::after {
      border: 1px solid #9a643f;
    }
  }
  #field-map .field-cell:focus-visible {
    outline: 3px solid #a34e31;
    outline-offset: -3px;
    z-index: 5;
  }
  .field-place {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 110px;
    z-index: 5;
    color: #483c2b;
    padding: 1px 5px;
    font: 700 0.75rem/1.5 var(--serif);
    text-shadow:
      0 1px #f1e9d4,
      1px 0 #f1e9d4,
      -1px 0 #f1e9d4,
      0 -1px #f1e9d4;
    pointer-events: none;
  }
  .field-inspector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  html[data-theme] .local-scene {
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    min-height: 0;
    height: auto;
    border: 0;
    background: transparent;
    overflow: visible;
  }
  html[data-theme] .local-scene > .local-scene-art {
    display: block;
    width: 96px;
    height: 58px;
    object-fit: cover;
    border: 1px solid var(--line);
  }
  html[data-theme] .local-scene figcaption {
    position: static;
    display: grid;
    padding: 0;
    margin: 0;
    color: var(--text);
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .local-scene figcaption strong {
    font-size: 1rem;
  }
  .local-scene figcaption span {
    font-size: 0.75rem;
    color: var(--muted);
  }
  .field-selection {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }
  .field-selection p {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--muted);
  }
  html[data-theme] #field-travel {
    flex: none;
    min-height: 44px;
    padding: 9px 16px;
    background: var(--primary-bg);
    color: var(--primary-text);
    border: 1px solid var(--line);
    font-size: 0.8125rem;
    font-weight: 700;
  }
  html[data-theme] #field-travel:disabled {
    background: var(--button-bg);
    color: var(--muted);
  }
  #adventure > .panel-body > .discovered-places {
    margin: 0 16px 12px;
  }
  html[data-theme] #region-map {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0 14px 14px;
  }
  html[data-theme] #region-map .route-main,
  html[data-theme] #region-map .route-branches {
    display: contents;
    overflow: visible;
  }
  html[data-theme] #region-map .route-branch-label {
    display: none;
  }
  html[data-theme] #region-map button {
    position: static;
    transform: none;
    min-height: 44px;
    width: auto;
    max-width: none;
    min-width: 90px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    background: var(--button-bg);
    color: var(--text);
  }
  html[data-theme] #region-map button::before,
  html[data-theme] #region-map button::after {
    display: none;
  }
  html[data-theme] #region-map button small {
    font-size: 0.75rem;
    color: var(--muted);
  }
  html[data-theme] #region-map button[aria-checked=true] {
    background: var(--primary-bg);
    color: var(--primary-text);
  }
  html[data-theme] #region-map button[aria-checked=true] small {
    color: var(--primary-text);
  }
  html[data-theme] .field-shell {
    background: var(--surface);
  }
  #field-map {
    filter: var(--map-filter);
  }
  @media (max-width: 780px) {
    .field-toolbar {
      padding: 8px 10px;
      align-items: flex-start;
    }
    .field-toolbar > div {
      display: grid;
      gap: 2px;
    }
    .field-toolbar small {
      max-width: 130px;
      text-align: right;
      font-size: 0.75rem;
    }
    .field-inspector {
      align-items: stretch;
      padding: 9px;
      gap: 8px;
      flex-direction: column;
    }
    .field-selection {
      justify-content: space-between;
    }
    .local-scene figcaption span {
      display: none;
    }
    html[data-theme] .local-scene > .local-scene-art {
      width: 72px;
      height: 40px;
    }
    .field-place {
      font-size: 0.75rem;
      max-width: 85px;
    }
    #adventure > .panel-body > .discovered-places {
      margin: 0 10px 10px;
    }
  }
  html[data-theme] .local-scene > .local-scene-art {
    object-fit: contain;
    background: var(--region-sky);
  }
  #field-map .road-track {
    position: absolute;
    background: #bda57c;
    opacity: .7;
    pointer-events: none;
    z-index: 0;
  }
  #field-map .road-n {
    width: 20%;
    height: 55%;
    left: 40%;
    top: 0;
  }
  #field-map .road-s {
    width: 20%;
    height: 55%;
    left: 40%;
    bottom: 0;
  }
  #field-map .road-e {
    height: 20%;
    width: 55%;
    top: 40%;
    right: 0;
  }
  #field-map .road-w {
    height: 20%;
    width: 55%;
    top: 40%;
    left: 0;
  }
  #field-map .road-cell {
    background-image: none;
  }
  .field-encounter {
    padding: 10px 14px;
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  .field-encounter > p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted);
  }
  .field-object {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    align-items: center;
  }
  .field-object + .field-object {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dotted var(--line);
  }
  .field-object > strong {
    font: 700 0.9375rem var(--serif);
    color: var(--text);
  }
  .field-object > p {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--muted);
  }
  html[data-theme] .field-object > button {
    grid-column: 2;
    grid-row: 1/3;
    min-height: 44px;
    max-width: 230px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    color: var(--text);
    background: var(--button-bg);
    font: 700 0.8125rem var(--sans);
  }
  html[data-theme] .field-object > button:disabled {
    opacity: .6;
    cursor: default;
  }
  @media (max-width: 780px) {
    .field-object {
      grid-template-columns: 1fr;
    }
    .field-object > p {
      margin-bottom: 8px;
    }
    html[data-theme] .field-object > button {
      grid-column: 1;
      grid-row: auto;
      max-width: none;
      text-align: left;
    }
  }
  .field-tools {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  html[data-theme] .field-tools button {
    font: 700 0.75rem var(--sans);
    padding: 7px 10px;
    min-height: 36px;
    background: var(--button-bg);
    color: var(--text);
    border: 1px solid var(--line);
  }
  html[data-theme] #field-map.town-view .field-cell {
    aspect-ratio: 2;
    background: #d8cfb4;
  }
  html[data-theme] #field-map.town-view .terrain-5 {
    background: #c8c1a8;
  }
  #field-map.town-view .terrain-5 svg {
    opacity: 1;
  }
  #field-map.town-view .road-track {
    background: #b7ab8e;
    opacity: 1;
  }
  #field-map.town-view .field-place {
    font-size: 0.75rem;
    background: #eee2c4ed;
    border: 1px solid #b5a37b;
    padding: 1px 5px;
    bottom: -30px;
    max-width: 145px;
    white-space: nowrap;
  }
  #field-map.town-view .map-art-building {
    width: 110%;
    height: 110%;
  }
  .field-atlas-fold {
    margin: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  .field-atlas-fold > summary {
    padding: 12px 14px;
    font: 700 0.8125rem var(--serif);
    color: var(--text);
    cursor: pointer;
  }
  #field-atlas {
    padding: 0 14px 14px;
  }
  #field-atlas > svg {
    display: block;
    width: 100%;
    max-height: 420px;
    background: #ece3cc;
    border: 1px solid var(--line);
  }
  #field-atlas p,
  #field-atlas li {
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--muted);
  }
  html[data-theme] .field-object > .field-alms {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 8px;
    min-height: 36px;
  }
  @media (max-width: 780px) {
    .field-toolbar {
      gap: 6px;
    }
    .field-tools {
      max-width: 170px;
    }
    .field-tools button {
      font-size: 0.75rem;
      padding: 6px;
    }
    #field-map.town-view .field-cell {
      aspect-ratio: 1;
    }
    #field-map.town-view .field-place {
      font-size: 0.75rem;
      max-width: 110px;
    }
  }
  html[data-theme] #field-map:not(.town-view) .field-cell {
    aspect-ratio: 1;
  }
  #field-map .map-art-grass {
    width: 65%;
    height: 65%;
    opacity: .7;
  }
  @media (max-width: 780px) {
    html[data-theme] #field-map .field-cell {
      aspect-ratio: 1;
    }
    #field-map.town-view .field-place {
      max-width: 100px;
    }
  }
  html[data-theme] #field-map .field-cell > svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  html[data-theme] #field-map.town-view .map-art-building {
    height: 140%;
    width: 110%;
  }
  html[data-theme] #field-map.town-view .map-art-wall {
    height: 95%;
    width: 100%;
  }
  html[data-theme] #field-map .map-art-grass {
    height: 65%;
    width: 65%;
  }
  .atlas-era {
    margin: 0;
    padding: 8px 0 3px;
    color: var(--muted);
    font-size: .8125rem;
    line-height: 1.6;
  }
  .atlas-sites-title {
    margin-top: 12px !important;
    color: var(--text) !important;
    font-weight: 700;
  }
  .atlas-sites {
    display: grid;
    gap: 7px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
  }
  .atlas-sites li {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 7px 9px;
    border-left: 2px solid var(--line);
    background: var(--surface);
  }
  .atlas-site-kind {
    flex: none;
    min-width: 80px;
    color: var(--muted);
    font-size: .75rem;
  }
  @media (max-width: 780px) {
    .atlas-sites li { flex-direction: column; gap: 2px; }
  }
  .atlas-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 0;
    font-size: 0.8125rem;
  }
  .atlas-toolbar select,
  .atlas-toolbar button {
    min-height: 40px;
    padding: 7px 10px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    font: inherit;
  }
  .atlas-toolbar button[aria-pressed=true] {
    border-color: #8d6846;
    background: #e8dbc0;
    color: #493f31;
  }
  .atlas-viewport {
    overflow: auto;
    border: 1px solid var(--line);
    background: #e8e2cb;
    max-height: 640px;
  }
  .atlas-viewport > svg {
    display: block;
    width: 100%;
    min-width: 640px;
    height: auto;
    font-family: var(--serif);
  }
  .atlas-viewport polygon {
    cursor: pointer;
  }
  .atlas-viewport polygon:focus {
    outline: none;
    stroke: #7e3e2b;
    stroke-width: 1;
  }
  .atlas-location {
    font-weight: 700;
  }
  .atlas-detail {
    padding: 12px 0;
    border-top: 1px solid var(--line);
  }
  .atlas-detail strong {
    font: 700 1rem var(--serif);
    color: var(--text);
  }
  .atlas-detail p {
    margin: 5px 0;
  }
  .atlas-note {
    margin-bottom: 0;
  }
  @media (max-width: 780px) {
    .atlas-viewport > svg {
      min-width: 700px;
    }
    .atlas-viewport {
      max-height: 460px;
    }
  }
  .pixel-art {
    shape-rendering: crispEdges;
    image-rendering: pixelated;
  }
  html[data-theme] .crest-symbol {
    display: grid;
    place-items: center;
    width: 64px;
    height: 76px;
    padding: 0;
    flex: none;
    background: #344942;
    border: 3px double #b89b5e;
  }
  .crest-symbol > .pixel-art {
    display: block;
    width: 64px;
    height: 64px;
  }
  .class-choices .pixel-art {
    display: block;
    width: 48px;
    height: 48px;
    justify-self: center;
  }
  html[data-theme] .local-scene > .local-scene-art {
    image-rendering: pixelated;
    shape-rendering: crispEdges;
    object-fit: cover;
    background: var(--region-sky);
  }
  html[data-theme] #field-map.town-view :is(.map-art-building, .map-art-inn, .map-art-smith, .map-art-apothecary) {
    width: 110%;
    height: 140%;
  }
  html[data-theme] #field-map .map-art-player {
    width: 86%;
    height: 100%;
  }
  #field-map .map-art-cloud {
    image-rendering: pixelated;
  }
  html[data-theme] #field-map:not(.town-view) .field-cell {
    background: #d2d6b4;
  }
  /* Fog color belongs only to the mask. Its transparent boundary must reveal
     the same ground on either side of a discovery tile seam. */
  html[data-theme] #field-map:not(.town-view) .field-cell.unexplored {
    background: #d2d6b4;
  }
  html[data-theme] #field-map .field-cell > .terrain-art,
  html[data-theme] #field-map .field-cell > .fog-art {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    overflow: visible;
    pointer-events: none;
    shape-rendering: crispEdges;
  }
  html[data-theme] #field-map .field-cell > .terrain-art {
    z-index: 0;
  }
  html[data-theme] #field-map .field-cell > .fog-art {
    z-index: 2;
  }
  html[data-theme] #field-map .field-cell > .fog-art.fog-leaving {
    z-index: 3;
    pointer-events: none;
    will-change: opacity;
  }
  html[data-theme] #field-map .field-cell > .map-art-grove {
    width: 115%;
    height: 115%;
    z-index: 1;
  }
  html[data-theme] #field-map .field-cell > .map-art-mountain {
    width: 112%;
    height: 145%;
    top: 37%;
    z-index: 1;
  }
  #field-map.town-view > .town-scenery {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    image-rendering: pixelated;
  }
  html[data-theme] #field-map.town-view .field-cell {
    aspect-ratio: 1.3;
    background: transparent;
  }
  html[data-theme] #field-map.town-view .field-cell:is(.terrain-5, .player-cell) {
    background: transparent;
  }
  #field-map.town-view .field-cell {
    z-index: 1;
  }
  #field-map.town-view .player-cell {
    z-index: 3;
  }
  #field-map.town-view .field-place {
    bottom: -9px;
    background: #eee2c4ed;
    font-size: 0.75rem;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    max-width: 120px;
  }
  #field-map.town-view .player-cell svg {
    width: 75%;
    height: 95%;
    filter: drop-shadow(1px 2px 0 #34463377);
  }
  #field-map.town-view .map-art-merchant {
    width: 65%;
    height: 85%;
  }
  @media (max-width: 780px) {
    html[data-theme] #field-map.town-view .field-cell {
      aspect-ratio: 1;
    }
    #field-map.town-view .field-place {
      font-size: 0.75rem;
      max-width: 95px;
    }
  }
  .field-sense {
    margin: 8px 0;
    padding: 8px 0;
    border-bottom: 1px dotted var(--line,#bfd4bd);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--text,#394a3d);
  }
  .field-walk-status {
    min-height: 1.5em;
    margin: 0 0 6px;
    font-size: 0.75rem;
    color: var(--muted,#5d6b5c);
  }
  #field-stop {
    min-height: 44px;
  }
  #field-map .trail-cell::after {
    content: "";
    position: absolute;
    bottom: 16%;
    left: 44%;
    width: 3px;
    height: 3px;
    background: #735e38;
    opacity: .45;
    box-shadow: 5px -3px #735e38;
    pointer-events: none;
  }
  #field-map .clue-cell {
    outline: 1px dashed #ae934e;
    outline-offset: -4px;
  }
  #field-map .clue-cell {
    outline-color: var(--map-clue);
  }
  html[data-theme] #field-map .is-stepping > .map-art-player {
    animation: field-step 180ms ease-out both;
    z-index: 8;
    pointer-events: none;
  }
  @keyframes field-step {
    from {
      transform: translate(calc(-50% + var(--step-x,0%)), calc(-50% + var(--step-y,0%)));
    }
    55% {
      filter: brightness(1.08);
    }
    to {
      transform: translate(-50%, -50%);
    }
  }
  #field-map .new-ground {
    animation: field-reveal 360ms ease-out both;
  }
  @keyframes field-reveal {
    from {
      filter: brightness(1.2) saturate(.35);
    }
    to {
      filter: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-theme] #field-map .is-stepping > .map-art-player,
    #field-map .new-ground {
      animation: none;
    }
  }
}

/* Map sprites have their own native pixel canvas; portraits are not downscaled. */
html[data-theme] #field-map .map-art-player[data-art="map-template"] { width:48px; height:48px; margin-top:-8px; image-rendering:pixelated; }
[data-art="map-template"] .map-walk-frame { opacity:0; }
#field-map .is-stepping [data-art="map-template"] .map-idle-frame { animation:map-idle-handoff 180ms steps(1,end) both; }
#field-map .is-stepping [data-art="map-template"] .map-walk-frame-0 { animation:map-walk-0 180ms steps(1,end) both; }
#field-map .is-stepping [data-art="map-template"] .map-walk-frame-1 { animation:map-walk-1 180ms steps(1,end) both; }
#field-map .is-stepping [data-art="map-template"] .map-walk-frame-2 { animation:map-walk-2 180ms steps(1,end) both; }
#field-map .is-stepping [data-art="map-template"] .map-walk-frame-3 { animation:map-walk-3 180ms steps(1,end) both; }
@keyframes map-idle-handoff { 0%,99% { opacity:0; } 100% { opacity:1; } }
@keyframes map-walk-0 { 0% { opacity:1; } 25%,100% { opacity:0; } }
@keyframes map-walk-1 { 0% { opacity:0; } 25% { opacity:1; } 50%,100% { opacity:0; } }
@keyframes map-walk-2 { 0% { opacity:0; } 50% { opacity:1; } 75%,100% { opacity:0; } }
@keyframes map-walk-3 { 0% { opacity:0; } 75% { opacity:1; } 100% { opacity:0; } }
@media(prefers-reduced-motion:reduce) {
 #field-map .is-stepping [data-art="map-template"] .map-idle-frame { animation:none; opacity:1; }
 #field-map .is-stepping [data-art="map-template"] .map-walk-frame { animation:none !important; opacity:0 !important; }
}

/* Keep the template breathing animation alive while the actor is stationary. */
[data-art="map-template"] .map-idle-pose { opacity:0; }
[data-art="map-template"] .map-idle-pose-0 { animation:map-walk-0 400ms steps(1,end) infinite; }
[data-art="map-template"] .map-idle-pose-1 { animation:map-walk-1 400ms steps(1,end) infinite; }
[data-art="map-template"] .map-idle-pose-2 { animation:map-walk-2 400ms steps(1,end) infinite; }
[data-art="map-template"] .map-idle-pose-3 { animation:map-walk-3 400ms steps(1,end) infinite; }
@media(prefers-reduced-motion:reduce) {
 [data-art="map-template"] .map-idle-pose { animation:none; opacity:0; }
 [data-art="map-template"] .map-idle-pose-0 { opacity:1; }
}

/* Fog conceals discoveries while leaving terrain readable enough for planning. */
html[data-theme] #field-map .field-cell > .fog-art { opacity:0.85; }
html[data-theme] #field-map.town-view .field-cell { aspect-ratio:1; }



/* Illustrated world atlas: parchment, ink, and a restrained cinnabar route. */
.atlas-viewport{background:#dcc8a2;border:1px solid #9e8763;box-shadow:inset 0 0 22px #74604033;max-height:650px;scrollbar-color:#a08a64 #dfceaa;overscroll-behavior:contain}
.atlas-viewport > .ink-atlas{min-width:0;max-width:none;height:auto;font-family:var(--serif),serif;image-rendering:auto}
.ink-atlas text{user-select:none}
.ink-atlas .atlas-town-name,.ink-atlas .atlas-sect-name{paint-order:stroke;stroke:#eadbb8;stroke-width:.5;stroke-linejoin:round}
@media (hover: hover) and (pointer: fine){
.ink-atlas [data-province]:hover{fill:#997446;fill-opacity:.08}
.atlas-town-marker:hover .atlas-town-name{fill:#973f2c;stroke:#f3e4c1;stroke-width:.8}
}
.ink-atlas [data-province]:focus-visible{stroke:#844b32;stroke-width:.5;outline:none}
.atlas-town-marker{cursor:pointer}
.atlas-town-marker:focus-visible{outline:none}
.atlas-town-marker:focus-visible .atlas-town-name{fill:#973f2c;stroke:#f3e4c1;stroke-width:.8}
.atlas-zoom{display:flex;align-items:center;gap:4px;margin-left:auto}
.atlas-zoom button{min-height:36px;min-width:36px;padding:5px 8px}
.atlas-zoom span{min-width:3.5em;font-size:.8rem;text-align:center}
.atlas-location{font-size:.82rem;line-height:1.7}
@media(max-width:780px){.atlas-viewport{max-height:520px}.atlas-zoom{margin-left:0;width:100%}}

/* Image-backed world atlas: visible keyboard targets over baked city art. */
.atlas-town-marker:focus-visible > .atlas-town-hit{stroke:#963f30;stroke-width:.15;fill:transparent}

/* The atlas lives in a scroll dialog, outside the exploration grid. */
.atlas-open-button{display:block;width:100%;margin-top:.75rem}
.atlas-scroll-dialog{box-sizing:border-box;width:min(94vw,1440px);max-width:94vw;max-height:94dvh;padding:0 1.5rem;border:0;background:transparent;color:var(--text);overflow:visible}
.atlas-scroll-dialog::backdrop{background:#111810c9}
.atlas-scroll-dialog::before,.atlas-scroll-dialog::after{content:"";position:absolute;top:-.4rem;bottom:-.4rem;width:1.3rem;border:.15rem solid #4f3820;border-radius:.3rem;background:linear-gradient(90deg,#513922,#b58a4e 25%,#dbb775 45%,#8b5d31 73%,#4c3420);box-shadow:0 .2rem .5rem #0006;pointer-events:none;z-index:1}
.atlas-scroll-dialog::before{left:.2rem}.atlas-scroll-dialog::after{right:.2rem}
.atlas-scroll-body{box-sizing:border-box;max-height:94dvh;overflow:auto;overscroll-behavior:contain;background:#eee4c9;border-block:.18rem solid #9c8051;padding:1rem 1.25rem;box-shadow:0 .5rem 2rem #0008}
.atlas-scroll-dialog[open] .atlas-scroll-body{animation:atlas-unroll .24s ease-out}
.atlas-scroll-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}
.atlas-scroll-heading h2{font-size:1.25rem;margin:0}
.atlas-scroll-heading button{flex-shrink:0}
.atlas-scroll-dialog .atlas-viewport{width:100%;box-sizing:border-box;max-height:60dvh;background:#e9e4d2;box-shadow:none}
.atlas-scroll-dialog .atlas-viewport > .ink-atlas{display:block;min-width:0;width:100%;max-width:none;height:auto}
.atlas-scroll-dialog .ink-atlas [data-province],.atlas-scroll-dialog .ink-atlas [data-province]:focus{fill:transparent;stroke:none;outline:none}
.atlas-scroll-dialog .ink-atlas [data-province]:focus-visible{stroke:#9b652c;stroke-width:.15;stroke-dasharray:.5 .5}
@media(hover:hover){.atlas-scroll-dialog .ink-atlas [data-province]:hover{fill:transparent;stroke:none}}
@keyframes atlas-unroll{from{clip-path:inset(0 45%)}to{clip-path:inset(0 0)}}
@media(prefers-reduced-motion:reduce){.atlas-scroll-dialog[open] .atlas-scroll-body{animation:none}}
@media(max-width:780px){.atlas-scroll-dialog{width:98vw;max-width:98vw;padding-inline:1rem}.atlas-scroll-dialog::before,.atlas-scroll-dialog::after{width:.8rem}.atlas-scroll-body{padding:.75rem}.atlas-scroll-heading h2{font-size:1rem}.atlas-scroll-dialog .atlas-viewport{max-height:52dvh}}

/* Chromium applies its SVG focus ring on pointer focus too. In SVG user units
 * the default 5px outline becomes a huge black/white ring at atlas scale.
 * Keep the explicit thin keyboard indicator on .atlas-town-hit instead. */
.ink-atlas .atlas-town-marker:focus{outline:none}

/* Keep world map access visually attached to the recovery controls. */
.field-map-access{padding-top:.65rem;margin-top:.65rem;border-top:1px solid var(--line)}
.field-map-access .atlas-open-button{margin:0;width:100%;padding:.55rem .75rem;font-size:.9rem}
#shop-dialog{width:min(90vw,760px);max-height:85dvh;overflow:auto}
#shop-dialog .craft-recipes{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.home-management{padding:.75rem;border:1px solid var(--line);margin:.5rem 0}.home-management p{font-size:.85rem;margin:0 0 .6rem}.home-management button{padding:.5rem .8rem}
#home-dialog{width:min(94vw,850px);max-height:90dvh;overflow:auto}#home-interior label{display:inline-block;margin:.5rem}#home-interior select,.atlas-home select{padding:.45rem;margin:.4rem}.atlas-home{padding:.8rem;border:1px solid var(--line);margin-top:.75rem}.atlas-home button{padding:.5rem}.home-yard{display:grid;grid-template-columns:repeat(8,1fr);width:min(100%,600px);margin:1rem auto;border:6px solid #685139;background:#788355;box-shadow:inset 0 0 0 4px #a2996b}.home-yard .home-yard-cell{display:grid;place-items:center;aspect-ratio:1;border:1px dashed #8a9366;border-radius:0;min-width:0;padding:0;background:transparent;position:relative}.home-yard .home-yard-cell:focus-visible{outline:3px solid #ecd18c;z-index:2}.home-yard .yard-house{opacity:1;background:#b5a37b}.yard-house svg{width:100%;height:100%;image-rendering:pixelated}.yard-decor{width:65%;height:65%;image-rendering:pixelated;display:block}.decor-flower{background:linear-gradient(90deg,transparent 40%,#526f3e 40% 60%,transparent 60%);position:relative}.decor-flower:before{content:'';position:absolute;background:#c48c9c;left:20%;top:10%;width:60%;height:40%;box-shadow:0 5px #e8c57c}.decor-tree{background:#486548;box-shadow:inset 5px 5px #6e8955,inset -5px -5px #344d3a;border-bottom:8px solid #79523b}.decor-bench{height:30%;background:#a87e4c;border-bottom:6px solid #594737;box-shadow:0 6px #72563c}.decor-pond{background:#779eaa;border:5px solid #8a8b70;box-shadow:inset 4px 4px #adc1b4}.home-stock-row{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;padding:.5rem 0;border-bottom:1px solid var(--line)}.home-stock-row span{flex:1;min-width:140px}.home-stock-row button{padding:.4rem}
/* Compact inventory ledger. */
.bag-toolbar{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-bottom:.6rem}.bag-toolbar label{margin-left:auto;font-size:.8rem}.bag-toolbar select{color:var(--text);background:var(--surface);border:1px solid var(--line);padding:.35rem}.bag-toolbar #bag-condition{font-size:.8rem;color:var(--gold)}#bag-meter{width:100%;height:.65rem;margin-bottom:1rem}.is-overloaded #bag-weight{color:var(--accent)}
#inventory-items.inventory-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.45rem}#inventory-items .bag-item{display:grid;grid-template-columns:36px 1fr auto;gap:.2rem .5rem;align-items:center;text-align:left;padding:.65rem;border:1px solid #66563c;border-radius:2px;background:linear-gradient(135deg,#302c25,#201f1c);color:#e3d7bd;min-height:68px}#inventory-items .bag-item[aria-pressed="true"]{border-color:#d2ad64;background:#3a493e;box-shadow:inset 3px 0 #d2ad64}#inventory-items .bag-item:focus-visible{outline:2px solid #e1c58c;outline-offset:2px}#inventory-items .bag-icon{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border:1px solid #81714f;color:#dac184;font-family:serif;font-size:1.3rem}#inventory-items .bag-item strong{font-size:.9rem}#inventory-items .bag-item small{grid-column:2/4;color:#b8ad96}.bag-detail{margin:1rem 0;padding:.8rem;border:1px solid #66563c;min-height:76px;background:rgba(30,28,24,.15)}.bag-detail p{margin:0 0 .5rem}.bag-detail button{padding:.4rem .8rem}@media(max-width:480px){#inventory-items.inventory-items{grid-template-columns:repeat(2,minmax(0,1fr))}#inventory-items .bag-item{grid-template-columns:28px 1fr;gap:.3rem;padding:.5rem}#inventory-items .bag-icon{width:26px;height:30px}#inventory-items .bag-item small{grid-column:2}.bag-toolbar label{margin-left:0}}
.bag-storage{padding:.6rem 0;border-bottom:1px solid var(--line);margin-bottom:.75rem}.bag-storage p{font-size:.8rem;margin:0 0 .5rem}.bag-storage button,.bag-detail button{margin:.2rem .35rem .2rem 0}.bag-storage button{padding:.4rem .6rem}
#stable-dialog{width:min(94vw,760px);max-height:88dvh;overflow:auto;background:var(--surface);color:var(--text);border:2px solid var(--line)}
#stable-dialog section{padding:12px 0;border-top:1px solid var(--line)}
#stable-dialog h2{font-size:1.25rem}#stable-dialog h3{font-size:1rem}#stable-dialog p{font-size:.875rem;line-height:1.7}
#stable-dialog button{margin:4px;white-space:normal}

/* Actors share the terrain's full tile and foot baseline, rather than floating
   inside the generic 92% object-icon inset. */
html[data-theme] #field-map .field-cell > svg:is(.character-avatar,.map-art-villager){
  width:100%;height:100%;filter:saturate(.86);
}