.atlas-shell {
  isolation: isolate;
  position: relative;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 28px;
  background: radial-gradient(ellipse at 50% 20%, #15324999, transparent 65%), #060c12;
}

.atlas-shell:before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/atlas.png') center / cover;
  opacity: .32;
  filter: saturate(.65);
  z-index: -2;
  mask-image: linear-gradient(#000, #000 80%, transparent);
}

.atlas-shell:after {
  content: '';
  position: absolute;
  inset: 0 0 -5px;
  background: url('/assets/frame.png') center / 100% 100%;
  pointer-events: none;
  z-index: 12;
  opacity: .95;
}

.atlas-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr) 280px; min-height: 530px; position: relative; }
.atlas-introduction { position: relative; z-index: 5; padding-top: 65px; pointer-events: none; }
.intro-plaque { padding: 17px 17px 12px; background: linear-gradient(90deg, #030b13ee 75%, #030b13bb); border: 1px solid #c0914266; border-radius: 12px 3px 25px 5px; box-shadow: -5px 5px 20px #0007; pointer-events: auto; }
.intro-plaque:before { content: '◇'; position: absolute; left: -7px; top: 55px; color: var(--gold); font-size: 26px; text-shadow: 0 0 10px #a36620; }
.intro-plaque .eyebrow { font-family: var(--display); color: var(--gold-light); font-size: 15px; letter-spacing: .5px; margin-bottom: 0; }
.intro-plaque h1 { font-size: 20px; line-height: 1.45; text-transform: uppercase; color: var(--gold-light); margin-bottom: 14px; }
.intro-plaque>p:not(.eyebrow) { font-size: 12px; line-height: 1.7; color: #ccdae4; margin-bottom: 18px; }
.intro-plaque .gold-button { width: 100%; padding: 10px 9px; font-size: 11px; }
.intro-plaque .text-link { justify-content: center; width: 100%; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
.intro-plaque .text-link .icon { width: 15px; }
.compass-rose { position: relative; width: 158px; height: 158px; margin: 23px auto 0; color: #c5944e; filter: drop-shadow(0 3px 3px #000); transform: rotate(-13deg); }
.compass-rose>span { position: absolute; top: -15px; left: 64px; background: #050c12; border: 1px solid #a27736; border-radius: 50%; width: 25px; height: 25px; text-align: center; line-height: 24px; font-family: var(--display); }
.compass-rose svg { width: 100%; height: 100%; fill: #bc965a16; stroke: #bc965a; stroke-width: 1.4; }
.compass-rose svg>path:nth-of-type(1) { fill: #ba8e4355; stroke-width: 1.6; }
.atlas-viewport { min-width: 0; overflow: hidden; position: relative; min-height: 530px; }
.map-camera { position: absolute; inset: 0 -25px; transform-origin: var(--camera-origin, 50% 50%); transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)) scale(var(--zoom, 1)); transition: transform 650ms cubic-bezier(.2,.75,.25,1); }
.atlas-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; max-width: none; user-select: none; }
.territory-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.region-mask { fill: transparent; stroke: transparent; stroke-width: .3; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .3s, stroke .3s; }
.region-mask:hover, .region-mask.is-highlighted { fill: color-mix(in srgb, var(--world-color), transparent 87%); stroke: color-mix(in srgb, var(--world-color), transparent 30%); filter: drop-shadow(0 0 8px var(--world-color)); }
.map-mist { position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(ellipse at 0% 45%, #c8e4f866, transparent 25%), radial-gradient(ellipse at 50% 65%, #c8e4f833, transparent 18%), radial-gradient(ellipse at 100% 80%, #c8e4f855, transparent 20%); animation: drift-mist 14s ease-in-out infinite alternate; mix-blend-mode: screen; }
.map-light { position: absolute; width: 5%; height: 25%; left: 49%; top: 25%; background: radial-gradient(ellipse, #91e9ff55, transparent 67%); mix-blend-mode: screen; animation: pulse-light 4s ease-in-out infinite alternate; pointer-events: none; }
.world-markers { position: absolute; inset: 0; pointer-events: none; }
.world-marker { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px; text-decoration: none; min-height: 48px; min-width: 145px; pointer-events: auto; color: #f3ecd8; transition: filter .2s, margin .2s; z-index: 2; }
.world-marker>span:last-child { display: flex; flex-direction: column; align-items: center; background: linear-gradient(90deg, #030b12d9, #02080ded 75%, #02080d88); box-shadow: 0 1px 0 color-mix(in srgb, var(--world-color), transparent 30%), 0 -1px 0 #e5cc8844; padding: 5px 12px 4px 17px; margin-left: -18px; border-radius: 0 14px 2px 0; min-width: 150px; text-align: center; }
.world-marker strong { font: 600 14px/1.05 var(--display); text-transform: uppercase; max-width: 175px; text-shadow: 0 2px 3px #000; }
.world-marker small { font-size: 9px; text-transform: uppercase; letter-spacing: 1.9px; margin-top: 5px; color: var(--world-color); }
.world-sigil { width: 49px; height: 49px; display: grid; place-items: center; border: 1px solid var(--world-color); border-radius: 50%; box-shadow: 0 0 0 3px #050d15c9, 0 0 0 4px color-mix(in srgb, var(--world-color), transparent 55%), 0 0 12px #000; background: radial-gradient(#142633, #03070b); color: var(--world-color); z-index: 1; }
.world-sigil:before, .world-sigil:after { content: ''; position: absolute; width: 3px; height: 8px; background: var(--world-color); transform: rotate(35deg); }
.world-sigil:before { top: -3px; left: 15px; }
.world-sigil:after { bottom: -3px; left: 34px; }
.world-sigil .icon { width: 31px; height: 31px; stroke-width: 1.15; }
.world-marker:hover, .world-marker:focus-visible, .world-marker.is-selected { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--world-color), transparent 35%)); margin-top: -3px; }
.world-marker:focus-visible { outline-offset: 7px; border-radius: 50px; }
.atlas-controls { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; gap: 3px; padding: 4px; background: #030a13c9; border: 1px solid #a77a363b; border-radius: 25px; z-index: 5; }
.atlas-controls .icon-button { width: 32px; height: 32px; padding: 7px; border-color: transparent; }
.atlas-controls .icon { width: 16px; height: 16px; }
.map-instruction { position: absolute; left: 32%; top: 7px; transform: translateX(-50%); background: #05101cb8; padding: 5px 13px; border-radius: 20px; font-size: 9px; color: #c7d8e5; white-space: nowrap; pointer-events: none; }
.map-instruction .icon { width: 12px; height: 12px; margin-right: 5px; color: #c59b58; }
.world-details { position: relative; z-index: 8; background: linear-gradient(130deg, #0c141a, #02080bf5); border: 1px solid #c8984d; border-radius: 12px 3px; padding: 12px; margin: 9px 0 8px 12px; box-shadow: 0 0 0 4px #0008, inset 0 0 0 3px #1c1a13, 0 12px 20px #0009; align-self: stretch; display: flex; flex-direction: column; }
.world-details:before, .world-details:after { content: '◆'; position: absolute; left: calc(50% - 4px); color: #b68540; font-size: 10px; line-height: 12px; }
.world-details:before { top: -7px; }
.world-details:after { bottom: -7px; }
.world-panel { flex: 1; animation: reveal-panel .3s ease-out; }
.panel-image { position: relative; overflow: hidden; border: 1px solid #a77d3677; border-radius: 8px 2px; }
.panel-image:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #02090d88, transparent 50%); }
.panel-image img { width: 100%; height: 150px; object-fit: cover; object-position: center; }
.world-panel .eyebrow { font-size: 8px; letter-spacing: 1px; color: var(--gold-light); margin: 12px 5px 3px; }
.world-panel h2 { font-size: 21px; color: var(--gold-light); text-transform: uppercase; margin: 3px 5px 9px; line-height: 1.1; }
.panel-description { font-size: 11px; line-height: 1.5; color: #c8d8e3; margin: 0 5px 12px; }
.world-panel .feature-list { gap: 8px; margin: 0 5px 15px; font-size: 10px; }
.world-panel .feature-list .icon { width: 16px; height: 16px; }
.world-panel .enter-game { width: calc(100% - 10px); margin: 0 5px; font-size: 10px; min-height: 38px; padding: 8px; }
.panel-links { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin: 7px 6px 0; }
.panel-links a, .panel-links button { background: none; border: 0; padding: 4px 0; color: #c7b083; font-size: 9px; text-decoration: none; min-height: 27px; }
.panel-links a:hover, .panel-links button:hover { color: #ffdda1; text-decoration: underline; }
.panel-pagination { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 10px 0; }
.panel-pagination .icon-button { width: 28px; height: 28px; padding: 6px; }
.panel-pagination .icon { width: 14px; height: 14px; }
.panel-pagination>div { display: flex; }
.panel-pagination>div>button { width: 22px; height: 28px; padding: 8px; border: 0; background: none; position: relative; }
.panel-pagination>div>button:after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #34404a; box-shadow: inset 0 0 0 1px #73808c88; left: 8px; top: 11px; }
.panel-pagination>div>button[aria-pressed=true]:after { background: #edbd6e; box-shadow: 0 0 7px #edbd6e99; }
.panel-close { display: none; }
.world-strip { position: relative; z-index: 9; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 5px 48px 15px; }
.world-card { position: relative; display: flex; align-items: end; aspect-ratio: 1.85; min-width: 0; text-decoration: none; overflow: hidden; border: 1px solid #bd944d99; border-radius: 9px 2px; background: #040b11; box-shadow: 0 2px 8px #000a; }
.world-card>img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.world-card:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #02070bf5 0%, #03080bbc 22%, transparent 65%); }
.world-card>span { z-index: 1; width: 100%; position: relative; text-align: center; padding: 9px 4px 7px; background: linear-gradient(90deg, transparent, #0008, transparent); }
.world-card strong { display: block; font: 600 clamp(9px, 1.1vw, 16px)/1.1 var(--display); text-transform: uppercase; color: #fff0d3; text-shadow: 0 2px 3px #000; }
.world-card small { font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: var(--world-color); display: block; margin-top: 5px; }
.world-card:hover, .world-card.is-selected { border-color: var(--world-color); box-shadow: 0 0 3px var(--world-color), 0 0 16px color-mix(in srgb, var(--world-color), transparent 55%); }
.world-card:hover>img { transform: scale(1.05); }
.network-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px ridge #b48a43; border-bottom: 2px ridge #b48a43; margin: 0 -10px; padding: 8px 28px; background: linear-gradient(#09131be0, #02080eee); position: relative; z-index: 9; }
.network-strip:before, .network-strip:after { content: '◈'; color: var(--gold); position: absolute; top: -17px; font-size: 25px; }
.network-strip:before { left: 24%; }
.network-strip:after { right: 24%; }
.network-strip>a { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 5px 12px; text-decoration: none; }
.network-strip>a>.icon { width: 47px; height: 47px; border: 2px ridge #c59b59; border-radius: 50%; padding: 8px; color: #eecb8b; filter: drop-shadow(0 0 5px #a5783966); }
.network-strip strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
.network-strip small { display: block; color: #aabecb; font-size: 10px; }
.how-it-works { padding: 18px 25px 30px; max-width: 1600px; margin: 0 auto; background: radial-gradient(ellipse at top, #0c253455, transparent 70%); }
.how-it-works>h2 { color: #eac37a; text-transform: uppercase; font: 600 17px var(--body); letter-spacing: .4px; }
.how-it-works>h2>span { font-weight: 400; }
.how-it-works>ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 35px; list-style: none; padding: 0; margin: 0; }
.how-it-works li { position: relative; }
.how-it-works li:not(:last-child):after { content: '›'; position: absolute; right: -26px; top: 65px; font: 48px Georgia, serif; color: var(--gold); text-shadow: 0 2px 4px #000; }
.how-it-works h3 { font: 500 11px var(--body); text-transform: uppercase; display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.how-it-works h3>span { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: linear-gradient(#fff0be, #c18a37); color: #2d1d08; font-size: 16px; flex-shrink: 0; }
.step-art { border: 1px solid #9c874e88; border-radius: 5px; overflow: hidden; position: relative; aspect-ratio: 1.6; }
.step-art>img { width: 100%; height: 100%; object-fit: cover; }
.step-art:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #02090d9c, transparent 70%); }
.step-art>.icon { position: absolute; bottom: 12px; right: 12px; width: 30px; height: 30px; color: #efcd8f; filter: drop-shadow(0 2px 4px #000); z-index: 1; }
.how-it-works li>p { font-size: 11px; color: #b6c9d5; line-height: 1.5; margin: 9px 0 0; }

@keyframes drift-mist { from { transform: translate(-1%, 0); opacity: .35; } to { transform: translate(1%, 2%); opacity: .6; } }
@keyframes pulse-light { from { opacity: .4; transform: scale(.9); } to { opacity: .9; transform: scale(1.1); } }
@keyframes reveal-panel { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1700px) {
  .atlas-layout { grid-template-columns: 220px minmax(0, 1fr) 320px; min-height: 620px; }
  .atlas-viewport { min-height: 620px; }
  .intro-plaque { padding: 25px; }
  .intro-plaque h1 { font-size: 23px; }
  .intro-plaque>p:not(.eyebrow) { font-size: 14px; }
  .panel-image img { height: 190px; }
  .world-panel h2 { font-size: 25px; }
  .panel-description { font-size: 13px; }
  .world-panel .feature-list { font-size: 12px; gap: 12px; }
  .world-panel .eyebrow { font-size: 10px; }
  .world-panel .enter-game { min-height: 44px; font-size: 12px; }
  .world-marker strong { font-size: 16px; }
}

@media (max-width: 1200px) {
  .atlas-shell { padding: 0 18px; }
  .atlas-layout { grid-template-columns: 160px minmax(0, 1fr) 245px; min-height: 510px; }
  .atlas-viewport { min-height: 510px; }
  .intro-plaque { padding: 15px 12px 8px; }
  .intro-plaque h1 { font-size: 18px; }
  .intro-plaque>p:not(.eyebrow) { font-size: 11px; }
  .compass-rose { width: 135px; height: 135px; }
  .compass-rose>span { left: 55px; }
  .world-marker { min-width: 115px; gap: 3px; }
  .world-marker strong { font-size: 11px; max-width: 135px; }
  .world-marker>span:last-child { min-width: 115px; padding-left: 16px; padding-right: 8px; }
  .world-sigil { width: 40px; height: 40px; }
  .world-sigil .icon { width: 26px; height: 26px; }
  .world-marker small { font-size: 8px; letter-spacing: 1px; }
  .world-details { padding: 10px; margin-left: 8px; }
  .panel-image img { height: 135px; }
  .world-panel h2 { font-size: 19px; }
  .world-strip { margin-left: 25px; margin-right: 25px; }
  .network-strip { padding: 8px 10px; }
  .network-strip>a { gap: 10px; padding: 4px 9px; }
  .network-strip strong { font-size: 9px; }
  .network-strip small { font-size: 9px; }
  .network-strip>a>.icon { width: 38px; height: 38px; }
  .how-it-works>ol { gap: 25px; }
  .how-it-works li:not(:last-child):after { right: -21px; }
  .how-it-works h3 { font-size: 9px; gap: 5px; }
}

@media (max-width: 1000px) {
  .atlas-layout { grid-template-columns: minmax(0, 1fr) 260px; padding-top: 65px; }
  .atlas-introduction { position: absolute; top: 5px; left: 10px; padding: 0; }
  .intro-plaque { background: none; border: 0; box-shadow: none; padding: 0; display: flex; align-items: center; gap: 12px; }
  .intro-plaque .eyebrow, .intro-plaque>p:not(.eyebrow), .intro-plaque .text-link, .intro-plaque:before, .compass-rose { display: none; }
  .intro-plaque h1 { margin: 0; font-size: 17px; }
  .intro-plaque .gold-button { width: auto; font-size: 9px; min-height: 36px; }
  .atlas-viewport { min-height: 450px; }
  .map-camera { inset: 0 -15px; }
  .map-instruction { display: none; }
  .world-card strong { font-size: 10px; }
  .world-card small { font-size: 8px; letter-spacing: 1px; }
  .how-it-works>ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .how-it-works h3 { font-size: 11px; }
  .how-it-works li:not(:last-child):after { display: none; }
}

@media (max-width: 700px) {
  .atlas-shell { padding: 0 12px; }
  .atlas-shell:after { opacity: .65; }
  .atlas-layout { display: block; min-height: 0; padding-top: 80px; }
  .atlas-introduction { top: 14px; left: 10px; right: 10px; }
  .intro-plaque { justify-content: space-between; gap: 15px; }
  .intro-plaque h1 { font-size: 18px; max-width: 170px; }
  .intro-plaque .gold-button { font-size: 10px; min-height: 44px; padding: 10px 16px; }
  .atlas-viewport { min-height: 0; height: 540px; margin: 0 -4px; }
  .map-camera { inset: 0; }
  .atlas-art { object-fit: fill; }
  .world-marker { min-width: 0; flex-direction: column; gap: 0; }
  .world-sigil { width: 38px; height: 38px; }
  .world-sigil .icon { width: 25px; height: 25px; }
  .world-sigil:before, .world-sigil:after { display: none; }
  .world-marker>span:last-child { min-width: 105px; max-width: 130px; margin-left: 0; padding: 5px 7px; background: #030b13df; border-radius: 2px; }
  .world-marker strong { font-size: 11px; max-width: 120px; }
  .world-marker small { font-size: 8px; margin-top: 4px; }
  .atlas-controls { bottom: 2px; padding: 4px; }
  .atlas-controls .icon-button { width: 39px; height: 39px; min-height: 44px; }
  .world-details { display: none; }
  .is-details-open .world-details { display: flex; position: fixed; z-index: 60; bottom: 0; left: 0; right: 0; max-height: 72dvh; overflow: auto; margin: 0; padding: 14px 19px 10px; border-radius: 16px 16px 0 0; border-color: #ba985a; background: #060e16fa; box-shadow: 0 -20px 70px #000c; }
  .is-details-open .world-details:before { content: ''; top: 5px; left: calc(50% - 22px); width: 44px; height: 3px; background: #baa07188; border-radius: 2px; }
  .panel-close { display: grid; position: absolute; top: 19px; right: 22px; z-index: 3; width: 40px; height: 40px; background: #020910d9; }
  .panel-image { float: left; width: 115px; height: 120px; margin: 10px 15px 12px 0; }
  .panel-image img { height: 100%; object-position: 35%; }
  .world-panel .eyebrow { margin-top: 18px; padding-right: 40px; font-size: 8px; }
  .world-panel h2 { font-size: 22px; padding-right: 30px; }
  .panel-description { font-size: 12px; line-height: 1.55; }
  .world-panel .feature-list { clear: both; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 0; font-size: 11px; }
  .world-panel .enter-game { font-size: 12px; min-height: 44px; }
  .panel-links a, .panel-links button { font-size: 11px; min-height: 44px; }
  .panel-pagination { padding-top: 0; }
  .panel-pagination .icon-button { width: 44px; height: 44px; }
  .panel-pagination>div>button { width: 34px; height: 44px; }
  .panel-pagination>div>button:after { left: 14px; top: 19px; }
  .world-strip { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 9px; padding: 8px 3px 12px; margin: 8px 0 5px; scrollbar-width: thin; }
  .world-card { flex: 0 0 155px; scroll-snap-align: center; }
  .world-card strong { font-size: 12px; }
  .world-card small { font-size: 8px; }
  .network-strip { grid-template-columns: 1fr 1fr; padding: 13px 7px; gap: 10px; margin: 0 -4px; }
  .network-strip:before, .network-strip:after { display: none; }
  .network-strip>a { justify-content: flex-start; gap: 9px; padding: 4px; }
  .network-strip strong { font-size: 8px; letter-spacing: .6px; }
  .network-strip small { font-size: 8px; }
  .network-strip>a>.icon { width: 35px; height: 35px; padding: 6px; }
  .how-it-works { padding: 24px 18px; }
  .how-it-works>h2 { font-size: 15px; }
  .how-it-works>ol { grid-template-columns: 1fr 1fr; gap: 23px 18px; }
  .how-it-works h3 { font-size: 10px; }
  .how-it-works li>p { font-size: 11px; }
}

@media (max-width: 380px) {
  .atlas-viewport { height: 500px; }
  .world-marker>span:last-child { min-width: 95px; max-width: 110px; }
  .world-marker strong { font-size: 10px; }
  .atlas-controls .icon-button { width: 35px; }
  .world-panel .feature-list { grid-template-columns: 1fr; }
}

/* Preserve the original card dimensions when inserting authentic wordmarks. */
.world-card { aspect-ratio: 1.85; min-height: 0; }
.world-card>span { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 5px; }
.world-card-logo { width: 88%; height: clamp(24px, 2.4vw, 38px); object-fit: contain; margin: 0 auto; filter: drop-shadow(0 2px 3px #000); }
.world-card small { margin-top: 2px; }
.world-sigil { position: relative; }
.world-sigil img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.world-sigil.wordmark-sigil { width: 66px; height: 43px; border-radius: 5px; }
.world-sigil.wordmark-sigil:before, .world-sigil.wordmark-sigil:after { display: none; }
.world-sigil.wordmark-sigil img { padding: 4px; }
.framed-atlas { position: relative; padding-top: 10px; padding-bottom: 15px; }
.atlas-shell:after { display: none; }
.framed-atlas:after { content: ''; position: absolute; inset: 0 -28px -4px; background: url('/assets/frame.png') center / 100% 100%; pointer-events: none; z-index: 12; }
.world-details { margin: 22px 5px 15px 12px; padding: 12px; align-self: start; }
.panel-image img { height: 120px; }
.world-panel h2 { font-size: 19px; }
.world-panel .eyebrow { margin-top: 10px; }
.world-panel .feature-list { gap: 7px; margin-bottom: 11px; }
.panel-description { margin-bottom: 10px; }
.panel-pagination { padding-top: 2px; }
.network-strip { margin-top: 13px; padding-top: 14px; padding-bottom: 14px; min-height: 80px; }
.network-strip:before, .network-strip:after { font-size: 19px; top: -14px; }

@media (min-width: 1700px) {
  .panel-image img { height: 160px; }
  .world-panel h2 { font-size: 23px; }
}

@media (max-width: 1200px) {
  .framed-atlas:after { left: -18px; right: -18px; }
  .panel-image img { height: 115px; }
  .world-details { margin-top: 22px; padding: 10px; }
}

@media (max-width: 700px) {
  .framed-atlas { padding-top: 0; padding-bottom: 7px; }
  .framed-atlas:after { inset: 0 -12px; opacity: .65; }
  .world-card { flex: 0 0 155px; aspect-ratio: 1.85; }
  .world-card-logo { height: 29px; }
  .world-sigil.wordmark-sigil { width: 64px; height: 38px; }
  .world-marker>span:last-child { margin-top: 0; }
  .network-strip { min-height: 120px; }
  .is-details-open .world-details { margin: 0; padding: 14px 19px 10px; }
  .panel-image img { height: 100%; }
  .world-panel h2 { font-size: 22px; }
}

/* Useful links remain when enhancement scripts are unavailable. */
html:not(.js) .atlas-controls,
html:not(.js) .panel-pagination,
html:not(.js) [data-open-search],
html:not(.js) .menu-toggle { display: none; }
@media(max-width:800px) {
  html:not(.js) .site-header { flex-wrap: wrap; height: auto; padding-bottom: 10px; }
  html:not(.js) .primary-navigation { display: flex; position: static; flex: 1 0 100%; padding: 5px 0; border: 0; box-shadow: none; gap: 2px; }
  html:not(.js) .site-header .site-brand { margin-bottom: 5px; }
}

/* Generated from the central game directory. */
.theme-ashfall { --world-color: #ff8b32; }
.world-marker.theme-ashfall { left: 29%; top: 21%; }
.theme-criminal-underworld { --world-color: #f2ba66; }
.world-marker.theme-criminal-underworld { left: 73%; top: 22%; }
.theme-titan-battle { --world-color: #6fd0ff; }
.world-marker.theme-titan-battle { left: 23%; top: 49%; }
.theme-swashbucklers { --world-color: #6ce7e4; }
.world-marker.theme-swashbucklers { left: 78%; top: 50%; }
.theme-thug-life { --world-color: #d37eff; }
.world-marker.theme-thug-life { left: 35%; top: 80%; }
.theme-gods-and-mythology { --world-color: #f4d78e; }
.world-marker.theme-gods-and-mythology { left: 74%; top: 81%; }