/**
 * @file
 * @brief Responsive vellum atlas, map controls and highlighted legal destinations.
 * @date 2026-10-20
 */
.atlas-view { max-width: 1400px; margin: 0 auto; padding: 10px 0 32px; }
.atlas-head { padding: 8px 2px 18px; }
.atlas-head .eyebrow { color: #c0d8ce; margin: 0 0 5px; }
.atlas-head h1 { font: 700 clamp(28px, 4vw, 43px)/1.12 Georgia, serif; margin: 0 0 8px; }
.atlas-head p:last-child { max-width: 76ch; color: #b9cbd0; margin: 0; line-height: 1.5; }
.atlas-layout { display: grid; grid-template-columns: minmax(0, 1fr) 262px; gap: 14px; align-items: start; }
.shop-view { max-width: 1440px; margin: 0 auto; padding: 10px 0 36px; }
.shop-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 8px 2px 18px; }
.shop-head .eyebrow { margin: 0 0 5px; color: #c0d8ce; }
.shop-head h1 { margin: 0 0 8px; font: 700 clamp(28px, 4vw, 43px)/1.12 Georgia, serif; }
.shop-head p:last-child { max-width: 70ch; margin: 0; color: #b9cbd0; line-height: 1.5; }
.shop-content { display: grid; gap: 16px; }
.shop-head-actions, [data-catalogue-levels] { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-head-actions { justify-content: flex-end; }
.shop-tools { display: flex; justify-content: flex-end; position: relative; }
.shop-catalogue { position: absolute; z-index: 3; right: 0; top: calc(100% + 6px);
  width: min(30rem, 100%); box-sizing: border-box; padding: 12px; border: 1px solid #7aa99f;
  border-radius: 8px; background: #142b32; box-shadow: 0 8px 28px #0009; }
.shop-catalogue p { margin: 0 0 10px; }
.shop-catalogue[hidden] { display: none; }
.shop-catalogue button[aria-pressed="true"] { outline: 3px solid #b8e4d5; outline-offset: 2px; }
.shop-tryon { width: min(30rem, calc(100vw - 2rem)); max-height: 92vh; overflow: auto;
  color: #e2eee9; background: #142b32; border: 2px solid #a4c8bd; border-radius: 12px; padding: 18px; }
.shop-tryon::backdrop { background: #07161bcc; }
.shop-tryon h2 { margin-top: 0; }
.shop-tryon canvas { display: block; width: 100%; height: 370px; object-fit: contain; margin: 10px auto; }
.shop-tryon input[type="range"] { width: 100%; }
.atlas-frame { position: relative; padding: 16px; border: 1px solid #6e634d; border-radius: 16px;
  background: #3b352d; box-shadow: inset 0 0 0 4px #4a463c, 0 12px 34px #040d17a8; }
.atlas-paper { overflow: hidden; position: relative; border: 5px solid #b79b69;
  outline: 2px solid #6f5634; background: #d4b981; box-shadow: inset 0 0 35px #6753398c;
  clip-path: polygon(0 1%, 8% 0, 20% 1%, 35% 0, 60% 1%, 82% 0, 100% 1%,
    99.5% 21%, 100% 44%, 99.5% 61%, 100% 90%, 99% 100%, 75% 99%,
    56% 100%, 34% 99%, 12% 100%, 0 99%, .5% 77%, 0 51%, .5% 23%); }
.atlas-canvas { display: block; width: 100%; aspect-ratio: 1370/700;
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.atlas-canvas:active { cursor: grabbing; }
.atlas-canvas:focus-visible { outline: 4px solid #e6eeff; outline-offset: -7px; }
.atlas-title { fill: #644928; font: 700 30px Georgia, serif; letter-spacing: .16em; }
.atlas-subtitle { fill: #8a6237; font: 13px Georgia, serif; letter-spacing: .17em; }
.atlas-scrawl { fill: #6e5739; font: italic 15px Georgia, serif; }
.atlas-compass text { fill: #614629; font: 700 17px Georgia, serif; }
.atlas-return { fill: none; stroke: #80684c; stroke-width: 4;
  stroke-dasharray: 5 12; stroke-linecap: round; opacity: .7; }
.atlas-flow-arrow { fill: #f4ead0; stroke: #655b43; stroke-width: .6; }
.atlas-choice-arrow { fill: #f9e7a2; stroke: #624d20; stroke-width: .7; }
.atlas-choice-route { fill: none; stroke: #e3bd45; stroke-width: 6; stroke-dasharray: 10 8;
  stroke-linecap: round; opacity: .96; }
.atlas-fast-arrow { fill: #ffe8ad; stroke: #72552b; stroke-width: .7; }
.atlas-fast-route { fill: none; stroke: #d7ad51; stroke-width: 4; stroke-dasharray: 3 9;
  stroke-linecap: round; opacity: .94; }
.atlas-marker { cursor: pointer; }
.atlas-marker:focus-visible { outline: none; }
.atlas-halo { fill: #d7b878aa; stroke: #745d33; stroke-width: 1.5; }
.atlas-seal { fill: #f5e5c2; stroke: #795b35; stroke-width: 2.5; }
.atlas-glyph { fill: #765230; font: 700 27px Georgia, serif; pointer-events: none; }
.atlas-current .atlas-seal { fill: #324f5b; stroke: #ecdcab; stroke-width: 3; }
.atlas-current .atlas-glyph { fill: #fff4cc; }
.atlas-known .atlas-place { fill: #49391f; font: 700 17px Georgia, serif;
  paint-order: stroke; stroke: #e4ce9c; stroke-width: 6px; stroke-linejoin: round; }
.atlas-marker:focus-visible .atlas-halo { stroke: #fff; stroke-width: 5; }
.atlas-marker:hover .atlas-seal { stroke: #fff1ce; stroke-width: 4; }
.atlas-exit .atlas-halo { fill: #e5c85a; stroke: #6f5234; stroke-width: 3; }
.atlas-exit .atlas-seal { stroke: #675020; stroke-width: 4; }
.atlas-fast-exit .atlas-halo { fill: #ccaa6280; stroke: #f4d792; stroke-width: 3; stroke-dasharray: 4 3; }
.atlas-fast-exit .atlas-seal { stroke: #c9a252; stroke-width: 3.5; }
.atlas-fork-badge circle { fill: #74552d; stroke: #fff0bf; stroke-width: 2.5; }
.atlas-fork-badge text { fill: #fff2c6; font: 700 15px Georgia, serif; pointer-events: none; }
.atlas-travel { display: block; margin-top: 13px; padding: 12px 15px;
  width: 100%; min-height: 44px; cursor: pointer; border: 1px solid #725328;
  border-radius: 9px; background: #58482e; color: #f8ebc9; font: 700 16px Georgia, serif; }
.atlas-travel:focus-visible { outline: 3px solid #172e39; outline-offset: 3px; }
.atlas-toolbar { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; padding: 12px 1px 0; }
.atlas-toolbar p { margin: 0; font: italic 13px Georgia, serif; color: #dfd0ae; }
.atlas-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-buttons button { min-height: 44px; min-width: 44px; padding: 8px 12px;
  border-radius: 9px; border: 1px solid #ad9570; color: #f4e2b8;
  background: #514432; cursor: pointer; font: 700 16px Georgia, serif; }
.atlas-buttons button:hover { background: #6f5b3c; }
.atlas-buttons button:focus-visible, .atlas-places button:focus-visible {
  outline: 3px solid #ffe3a0; outline-offset: 2px; }
.atlas-side { display: grid; gap: 12px; }
.atlas-card { border: 1px solid #847354; border-radius: 12px; padding: 16px;
  background: linear-gradient(145deg, #efe0b8, #d6bc88); color: #4d3c26;
  box-shadow: inset 0 0 24px #926f4526; }
.atlas-card h2 { font: 700 20px Georgia, serif; margin: 0 0 9px; }
.atlas-card p { font: 15px/1.5 Georgia, serif; margin: 6px 0 0; }
.atlas-card strong { font: 700 17px Georgia, serif; }
.shop-interior { position: relative; width: 100%; aspect-ratio: 16/9; margin: 0; overflow: hidden;
  border: 2px solid #72513a; border-radius: 10px; background: #56362c;
  box-shadow: 0 8px 26px #040d1780; }
.shop-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.shop-stock { color: #d7e0df; }
.shop-stock-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.shop-stock-head h2 { margin: 0; font: 700 22px Georgia, serif; }
.shop-stock-head p, .shop-status { margin: 5px 0 0; color: #b9cbd0; line-height: 1.45; }
.shop-stock-head .button { flex: 0 0 auto; }
.shop-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  list-style: none; padding: 0; margin: 12px 0 0; }
.shop-items > li { display: grid; align-content: start; gap: 9px; padding: 12px 0;
  border-top: 1px solid #60757b; }
.shop-items > li > span { font: 600 16px/1.35 Georgia, serif; }
.shop-items .button { justify-self: start; min-height: 40px; }
.shopkeeper-intro { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center;
  margin: 10px 0 12px; }
.shopkeeper-portrait { display: block; width: min(192px, 100%); height: auto; aspect-ratio: 1;
  justify-self: center; background: #d7c39a; border: 1px solid #a78c5e; border-radius: 7px; }
.shopkeeper-intro p { font: italic 15px/1.45 Georgia, serif; }
.shopkeeper-portrait.ernie-greeting { animation: ernie-greeting 1.6s ease-in-out 1; transform-origin: 50% 84%; }
@keyframes ernie-greeting {
  0%, 100% { transform: rotate(0); }
  24% { transform: rotate(-3deg) translateY(-2px); }
  52% { transform: rotate(2deg) translateY(1px); }
  78% { transform: rotate(-1deg); }
}
.atlas-shop-ink rect { vector-effect: non-scaling-stroke; }
.atlas-shop-ink text { paint-order: stroke; stroke: #513923; stroke-width: 1.1px; }
[data-shop-counter] .atlas-caption { color: #4d3c26; font-weight: 600; }
.atlas-places { display: grid; gap: 5px; list-style: none; padding: 0; margin: 0; }
.atlas-places button { cursor: pointer; width: 100%; text-align: left; padding: 9px;
  border: 1px solid #b7a27d; border-radius: 8px; background: #ffffff3a;
  color: #513f2b; font: 15px/1.25 Georgia, serif; }
.atlas-places button[aria-current="true"] { background: #816a42; color: #fff5d7; }
.shop-stock-box { display: grid; gap: 6px; padding: 8px; border: 1px dashed #8b6841;
  border-radius: 8px; background: repeating-linear-gradient(7deg, #bd9a68, #bd9a68 8px, #b28c5e 9px, #b28c5e 17px);
  color: #443325; box-shadow: inset 0 0 0 2px #d2b37d; }
.shop-stock-box span { font: 700 13px/1.25 Georgia, serif; }
.shop-stock-box button { border-color: #725735; background: #d7bd8e; }
.shop-stock-box button:hover { background: #e3cca0; }
[data-shop-counter] .atlas-places button:disabled { opacity: 1; cursor: not-allowed;
  border-color: #856d45; background: #e3d2a9; color: #4d3c26; }
.atlas-legend { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 9px;
  color: #dbc9a3; font: 13px Georgia, serif; }
.atlas-legend span { display: inline-flex; gap: 5px; align-items: center; }
.atlas-key { height: 12px; width: 12px; border-radius: 50%; background: #f5e5c2;
  border: 2px solid #765230; }
.atlas-key.current { background: #324f5b; border-color: #f5e5c2; }
.atlas-key.water { background: #93b6bc; border-color: #537c88; }
.atlas-caption { margin-top: 12px; font-size: 13px; color: #aec3ca; line-height: 1.45; }
.ernie-meet { width: min(690px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 28px);
  overflow: auto; padding: clamp(18px, 4vw, 30px); border: 4px solid #725036; border-radius: 14px;
  color: #f8e6c0; background: repeating-linear-gradient(3deg, #673f2f 0 18px, #704633 18px 20px,
    #5c392c 20px 39px, #775039 39px 41px); box-shadow: 0 18px 60px #06121bc9; }
.ernie-meet::backdrop { background: #101b22c9; backdrop-filter: blur(3px); }
.ernie-meet .eyebrow { margin: 0 0 6px; color: #e0c081; font: 700 12px/1.4 system-ui, sans-serif; letter-spacing: .12em; }
.ernie-meet h2 { margin: 0 0 18px; color: #ffedc5; font: 700 clamp(25px, 5vw, 36px)/1.1 Georgia, serif; }
.ernie-meet-scene { display: grid; grid-template-columns: 192px minmax(0, 1fr); align-items: center; gap: 22px;
  padding: 16px; border: 1px solid #c39c64; border-radius: 10px; background: #412e25b8; }
.ernie-meet-scene .shopkeeper-portrait { width: 192px; }
.ernie-meet-scene p { margin: 0; color: #fff0d2; font: 21px/1.5 Georgia, serif; }
.ernie-meet .result-actions { justify-content: flex-end; margin-top: 18px; }
@media (max-width: 580px) {
  .ernie-meet-scene { grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .ernie-meet-scene .shopkeeper-portrait { justify-self: center; }
  .ernie-meet-scene p { font-size: 18px; }
}
@media (max-width: 1000px) {
  .atlas-layout { grid-template-columns: 1fr; }
  .atlas-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .atlas-frame { padding: 8px; border-radius: 9px; }
  .atlas-paper { border-width: 3px; }
  .atlas-canvas { min-height: 300px; aspect-ratio: auto; }
  .atlas-side { grid-template-columns: 1fr; }
  .atlas-places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-head { align-items: stretch; flex-direction: column; }
  .shop-head [data-shop-back] { align-self: flex-start; }
  .shop-stock-head { align-items: flex-start; flex-direction: column; }
  .shop-items { grid-template-columns: 1fr; gap: 0; }
  .shop-items .button { width: 100%; }
  .atlas-head h1 { font-size: 28px; }
  .atlas-toolbar p { font-size: 12px; }
  .atlas-buttons button { min-width: 46px; }
}
@media (prefers-contrast: more) {
  .atlas-marker .atlas-seal { stroke: #111; stroke-width: 4; }
  .atlas-glyph { fill: #1a1a1a; }
}
@media (prefers-reduced-motion: reduce) {
  .shopkeeper-portrait.ernie-greeting { animation: none; }
}