@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&family=DM+Sans:wght@400;500;700&display=swap');

.screen--landing {
  --canvas: #F5F1E7;
  --canvas-alt: #EFE9DB;
  --ink: #22201C;
  --forest: #2E5141;
  --forest-light: #3C5C4E;
  --coral: #C8512E;
  --mustard: #F0C24B;
  --rule: #D6D1C4;
  --radius: 4px;
  --shadow-hard: 3px 3px 0 0 rgba(34,32,28,.20);
  --shadow-hard-lg: 4px 4px 0 0 rgba(34,32,28,.14);
  --transition: 0.15s ease-in-out;
  
  background: var(--canvas);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.screen--landing *,
.screen--landing *::before,
.screen--landing *::after {
  box-sizing: border-box;
}

.screen--landing h1,
.screen--landing h2,
.screen--landing h3,
.screen--landing h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}

.screen--landing p {
  margin: 0;
}

/* Decorative Floating Shapes */
.screen--landing .hero-panel {
  position: relative;
  z-index: 2;
}

.screen--landing .hero-panel::before,
.screen--landing .hero-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  display: none;
}

.screen--landing .hero-panel::before {
  width: 120px;
  height: 120px;
  background: var(--coral);
  border: 2px solid var(--ink);
  top: -40px;
  right: 10%;
  transform: rotate(15deg);
  box-shadow: 3px 3px 0 0 rgba(34,32,28,.20);
}

.screen--landing .hero-panel::after {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid var(--mustard);
  filter: drop-shadow(3px 3px 0 rgba(34,32,28,.20));
  bottom: -20px;
  left: -20px;
}

/* App Topbar */
.screen--landing .app-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0 2rem 0;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.screen--landing .brand-mark {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.screen--landing .brand-mark__sigil {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--canvas-alt);
  box-shadow: 3px 3px 0 0 rgba(34,32,28,.20);
}

.screen--landing .brand-mark h1 {
  font-size: 1.75rem;
}

.screen--landing .brand-mark p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--forest);
  font-weight: 500;
  margin-top: 2px;
}

/* Hero Panel Layout */
.screen--landing .hero-panel {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: start;
}

/* Hero Copy */
.screen--landing .hero-copy h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  margin-bottom: 1.5rem;
}

.screen--landing .hero-copy h2 span {
  background-image: linear-gradient(transparent 65%, var(--mustard) 65%);
  padding: 0 4px;
}

.screen--landing .hero-copy > p {
  font-size: 1.2rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 95%;
}

.screen--landing .hero-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 600px;
}

/* Buttons */
.screen--landing .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.8rem 1.25rem;
  background: var(--canvas);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  line-height: 1;
  box-shadow: var(--shadow-hard);
}

.screen--landing .btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard-lg);
}

.screen--landing .btn:active {
  transform: translate(0, 0);
  box-shadow: var(--shadow-hard);
}

.screen--landing .btn:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}

.screen--landing .btn--primary {
  background: var(--coral);
  color: #fff;
}

.screen--landing .btn--secondary {
  background: var(--canvas);
  color: var(--ink);
}

/* Atlas Card */
.screen--landing .atlas-card {
  background: var(--canvas);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: var(--shadow-hard-lg);
}

.screen--landing .atlas-card__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--ink);
}

.screen--landing .atlas-card h3 {
  font-size: 1.5rem;
}

.screen--landing .rank-badge {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.65rem;
  background: var(--mustard);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.55rem 0.65rem;
  box-shadow: 3px 3px 0 0 rgba(34,32,28,.20);
}

.screen--landing .rank-badge__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--forest);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  line-height: 1;
}

.screen--landing .rank-badge b,
.screen--landing .rank-badge em {
  display: block;
  font-style: normal;
  line-height: 1.2;
}

.screen--landing .rank-badge b {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1rem;
}

.screen--landing .rank-badge em {
  color: #473c2b;
  font-size: 0.78rem;
  font-weight: 700;
}

.screen--landing .atlas-region {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 0.85rem;
  background: #fff8e5;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  align-items: start;
  box-shadow: 3px 3px 0 0 rgba(34,32,28,.20);
  cursor: pointer;
  transition: var(--transition);
  overflow: hidden;
}

.screen--landing .atlas-region:last-child {
  margin-bottom: 0;
}

.screen--landing .atlas-region:hover,
.screen--landing .atlas-region:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 rgba(34,32,28,.20);
}

.screen--landing .atlas-region:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}

.screen--landing .atlas-region::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(26, 26, 26, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(26, 26, 26, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.7;
}

.screen--landing .atlas-region__icon {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  background: var(--canvas-alt);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 0 rgba(34,32,28,.20);
  overflow: hidden;
}

.screen--landing .atlas-region__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.screen--landing .atlas-region--uncharted .atlas-region__icon svg {
  filter: grayscale(1);
  opacity: 0.38;
}

.screen--landing .atlas-region--charting .atlas-region__icon::after {
  content: "";
  position: absolute;
  inset: 0 42% 0 0;
  border-right: 2px dashed var(--ink);
  background: rgba(244, 241, 234, 0.38);
  pointer-events: none;
}

.screen--landing .atlas-region--charted .atlas-region__icon {
  background: var(--mustard);
}

.screen--landing .atlas-region__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.screen--landing .atlas-region__body strong {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ink);
}

.screen--landing .atlas-region__body span {
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}

.screen--landing .atlas-region__line {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen--landing .atlas-region__status {
  position: relative;
  z-index: 1;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  background: var(--canvas);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  white-space: nowrap;
  box-shadow: 2px 2px 0 0 rgba(34,32,28,.20);
}

.screen--landing .atlas-region--uncharted .atlas-region__status {
  background: var(--canvas-alt);
  color: #686153;
}

.screen--landing .atlas-region--charting .atlas-region__status {
  background: var(--coral);
  color: #fff;
}

.screen--landing .atlas-region--charted .atlas-region__status {
  background: var(--forest);
  color: #fff;
}

.screen--landing .atlas-region__seal {
  position: absolute;
  right: 0.8rem;
  bottom: 0.45rem;
  z-index: 0;
  color: var(--forest);
  border: 3px solid var(--forest);
  border-radius: 50%;
  padding: 0.35rem 0.2rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  opacity: 0.2;
  transform: rotate(-11deg) scale(1);
  animation: chartedStamp 260ms ease-out both;
  pointer-events: none;
}

@keyframes chartedStamp {
  from {
    opacity: 0;
    transform: rotate(-11deg) scale(1.35);
  }
  to {
    opacity: 0.2;
    transform: rotate(-11deg) scale(1);
  }
}

/* Level Chips */
.screen--landing .level-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 0.25rem;
}

.screen--landing .level-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 38px;
  min-width: 0;
  min-height: 42px;
  background: var(--canvas);
  border: 2px solid var(--ink);
  border-radius: 999px 999px 999px 2px;
  padding: 0.3rem 0.12rem;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'DM Sans', sans-serif;
  text-align: center;
  transform: rotate(-45deg);
}

.screen--landing .level-chip b {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  transform: rotate(45deg);
}

.screen--landing .level-chip span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  color: #555;
  font-weight: 500;
}

.screen--landing .level-chip:hover:not(:disabled) {
  background: var(--canvas-alt);
  transform: translate(-1px, -1px) rotate(-45deg);
  box-shadow: 2px 2px 0 0 rgba(34,32,28,.20);
}

.screen--landing .level-chip:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}

.screen--landing .level-chip--current {
  background: var(--coral);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 0 rgba(34,32,28,.20);
}

.screen--landing .atlas-region--uncharted .level-chip--current {
  background: var(--canvas-alt);
  border-style: dashed;
  border-color: #999;
  box-shadow: none;
}

.screen--landing .atlas-region--uncharted .level-chip--current b,
.screen--landing .atlas-region--uncharted .level-chip--current span {
  color: #777;
}

.screen--landing .level-chip--charted {
  background: var(--forest);
  color: #fff;
}

.screen--landing .level-chip--current b,
.screen--landing .level-chip--current span,
.screen--landing .level-chip--charted b,
.screen--landing .level-chip--charted span {
  color: #fff;
}

.screen--landing .level-chip--soon,
.screen--landing .level-chip--locked {
  background: var(--canvas-alt);
  border-style: dashed;
  border-color: #999;
  cursor: not-allowed;
  box-shadow: none;
}

.screen--landing .level-chip--soon b,
.screen--landing .level-chip--locked b {
  color: #888;
}

.screen--landing .level-chip--soon span,
.screen--landing .level-chip--locked span {
  color: #aaa;
}

/* Responsive */
@media (max-width: 900px) {
  .screen--landing .hero-panel {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .screen--landing .hero-panel::before,
  .screen--landing .hero-panel::after {
    display: none;
  }
  
  .screen--landing .hero-copy > p {
    max-width: 100%;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .screen--landing,
  .screen--landing *,
  .screen--landing *::before,
  .screen--landing *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  
  .screen--landing .btn:hover,
  .screen--landing .level-chip:hover:not(:disabled) {
    transform: none !important;
    box-shadow: var(--shadow-hard) !important;
  }
}

/* Final landing shell overrides: keep old room chrome outside this scoped root. */
.screen--landing.screen {
  max-width: none;
  width: 100%;
}

.screen--landing .app-topbar,
.screen--landing .hero-panel {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.screen--landing .hero-copy,
.screen--landing .atlas-card {
  min-width: 0;
}

.screen--landing .hero-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

@media (max-width: 600px) {
  .screen--landing {
    padding: 1rem;
  }

  .screen--landing .app-topbar {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .screen--landing .hero-actions {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .screen--landing .atlas-card {
    padding: 1.25rem;
  }

  .screen--landing .atlas-region {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .screen--landing .atlas-region__status {
    grid-column: 2;
    justify-self: start;
  }

  .screen--landing .atlas-region__seal {
    right: 0.5rem;
    bottom: 0.5rem;
  }

  .screen--landing .level-chips {
    gap: 6px;
  }
}

/* Living Atlas Map */
.screen--landing .hero-panel--map {
  grid-template-columns: minmax(260px, 0.55fr) minmax(560px, 1.45fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.screen--landing .hero-copy h2 span {
  background-image: linear-gradient(transparent 63%, var(--mustard) 63%);
  padding: 0 4px;
}

.screen--landing .hero-actions--compact {
  grid-template-columns: 1fr;
  max-width: 340px;
}

.screen--landing .atlas-map-section {
  width: 100%;
  min-width: 0;
  background: var(--canvas);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: clamp(1rem, 2vw, 1.5rem);
  box-shadow: var(--shadow-hard-lg);
}

.screen--landing .atlas-map-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--ink);
}

.screen--landing .atlas-map-kicker {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
}

.screen--landing .atlas-map-header h3 {
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.screen--landing .atlas-map-subtitle {
  margin-top: 0.35rem;
  color: #514b41;
  font-size: 0.95rem;
  font-weight: 500;
}

.screen--landing .atlas-map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 420px;
  overflow: hidden;
  background: var(--canvas);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  isolation: isolate;
}

.screen--landing .atlas-map-drawing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.screen--landing .atlas-map-grid {
  stroke: var(--canvas-alt);
  stroke-width: 1;
}

.screen--landing .atlas-map-river {
  fill: none;
  stroke: #a4c5e2;
  stroke-width: 8;
  stroke-linecap: round;
  opacity: 0.9;
}

.screen--landing .atlas-map__trail {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 5 6;
}

.screen--landing .atlas-map__trail--completed {
  stroke: var(--ink);
}

.screen--landing .atlas-map__trail--uncompleted {
  stroke: #a8a294;
}

.screen--landing .atlas-map-compass circle {
  fill: var(--canvas);
  stroke: var(--ink);
  stroke-width: 2;
}

.screen--landing .atlas-map-compass polygon {
  fill: var(--coral);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.screen--landing .atlas-map-compass path {
  stroke: var(--ink);
  stroke-width: 2;
  opacity: 0.38;
}

.screen--landing .atlas-map-compass text {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 800;
  fill: var(--ink);
  text-anchor: middle;
}

.screen--landing .atlas-map-region {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: max(74px, var(--w));
  min-height: max(58px, var(--h));
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  align-items: center;
  gap: 0.16rem;
  padding: 0.2rem;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  z-index: 2;
  text-align: center;
}

.screen--landing .atlas-map-region:hover,
.screen--landing .atlas-map-region:focus-visible {
  z-index: 5;
}

.screen--landing .atlas-map-region:hover .atlas-map-region__shape,
.screen--landing .atlas-map-region:focus-visible .atlas-map-region__shape {
  filter: brightness(1.04);
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 0 rgba(34,32,28,.20);
}

.screen--landing .atlas-map-region:focus-visible {
  outline: none;
}

.screen--landing .atlas-map-region:focus-visible .atlas-map-region__shape {
  outline: 4px solid var(--coral);
  outline-offset: 4px;
}

.screen--landing .atlas-map-region__shape {
  position: relative;
  width: 100%;
  min-width: 62px;
  min-height: 48px;
  height: 100%;
  border: 2px solid var(--ink);
  background: var(--region-fill, var(--mustard));
  box-shadow: 3px 3px 0 0 rgba(34,32,28,.20);
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
  overflow: hidden;
}

.screen--landing .atlas-map-region--forest .atlas-map-region__shape {
  --region-fill: var(--forest);
}

.screen--landing .atlas-map-region--forest-light .atlas-map-region__shape {
  --region-fill: var(--forest-light);
}

.screen--landing .atlas-map-region--coral .atlas-map-region__shape {
  --region-fill: var(--coral);
}

.screen--landing .atlas-map-region--mustard .atlas-map-region__shape {
  --region-fill: var(--mustard);
}

.screen--landing .atlas-map-region--uncharted .atlas-map-region__shape {
  background: #efeae0;
  border-color: #a8a294;
  border-style: dashed;
  box-shadow: none;
  opacity: 0.76;
}

.screen--landing .atlas-map-region--charting .atlas-map-region__shape::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--region-fill, var(--mustard)) var(--fill-pct), rgba(244, 241, 234, 0.78) var(--fill-pct));
  opacity: 0.82;
  z-index: 0;
}

.screen--landing .atlas-map-region--charted .atlas-map-region__shape {
  opacity: 1;
}

.screen--landing .atlas-map-region--mountains .atlas-map-region__shape {
  clip-path: polygon(3% 92%, 25% 18%, 49% 92%, 61% 92%, 80% 19%, 98% 92%);
}

.screen--landing .atlas-map-region--plains .atlas-map-region__shape {
  border-radius: 3px;
}

.screen--landing .atlas-map-region--coast .atlas-map-region__shape {
  border-radius: 999px 999px 5px 5px;
}

.screen--landing .atlas-map-region--bridge .atlas-map-region__shape {
  border-radius: 8px 8px 3px 3px;
}

.screen--landing .atlas-map-region--atrium .atlas-map-region__shape {
  border-radius: 50%;
}

.screen--landing .atlas-map-region--mirror .atlas-map-region__shape {
  clip-path: polygon(0 30%, 70% 30%, 70% 0, 100% 20%, 100% 100%, 0 100%);
}

.screen--landing .atlas-map-region--bench .atlas-map-region__shape {
  clip-path: polygon(7% 0, 93% 0, 76% 100%, 24% 100%);
}

.screen--landing .atlas-map-region__question {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 800;
  color: #8b8578;
}

.screen--landing .atlas-map-region__name,
.screen--landing .atlas-map-region__meta {
  position: relative;
  z-index: 3;
  display: inline-block;
  max-width: 138px;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(244, 241, 234, 0.9), 1px 0 0 rgba(244, 241, 234, 0.9), -1px 0 0 rgba(244, 241, 234, 0.9);
}

.screen--landing .atlas-map-region__name {
  margin-top: 0.18rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(0.74rem, 1.25vw, 0.95rem);
  font-weight: 800;
  line-height: 1;
}

.screen--landing .atlas-map-region__meta {
  font-size: clamp(0.58rem, 0.95vw, 0.72rem);
  font-weight: 800;
  color: var(--coral);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.screen--landing .atlas-map-region--uncharted .atlas-map-region__name,
.screen--landing .atlas-map-region--uncharted .atlas-map-region__meta {
  color: #6e675b;
}

.screen--landing .atlas-map-region__stamp {
  position: absolute;
  left: 50%;
  top: calc(100% - 0.4rem);
  transform: translateX(-50%) rotate(-8deg);
  z-index: 4;
  padding: 0.16rem 0.35rem;
  background: var(--coral);
  color: var(--canvas);
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: 2px 2px 0 0 rgba(34,32,28,.20);
  font-size: clamp(0.48rem, 0.75vw, 0.62rem);
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}

.screen--landing .atlas-map-region__shimmer {
  position: absolute;
  left: 50%;
  top: 36%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--coral);
  border-radius: 50%;
  opacity: 0.5;
  animation: atlasPulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 4;
}

.screen--landing .atlas-map-region__mountains,
.screen--landing .atlas-map-region__beads,
.screen--landing .atlas-map-region__mosaic,
.screen--landing .atlas-map-region__bridge,
.screen--landing .atlas-map-region__sort,
.screen--landing .atlas-map-region__mirror,
.screen--landing .atlas-map-region__fold {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.screen--landing .atlas-map-region__mountains::before,
.screen--landing .atlas-map-region__mountains i,
.screen--landing .atlas-map-region__mountains b {
  content: "";
  position: absolute;
  background: var(--mustard);
  border: 2px solid var(--ink);
  transform: rotate(45deg);
}

.screen--landing .atlas-map-region__mountains::before {
  width: 12px;
  height: 12px;
  left: 32%;
  top: 42%;
}

.screen--landing .atlas-map-region__mountains i {
  width: 10px;
  height: 10px;
  left: 55%;
  top: 48%;
}

.screen--landing .atlas-map-region__mountains b {
  width: 8px;
  height: 8px;
  left: 70%;
  top: 54%;
}

.screen--landing .atlas-map-region__beads i,
.screen--landing .atlas-map-region__mosaic i,
.screen--landing .atlas-map-region__sort i,
.screen--landing .atlas-map-region__sort b,
.screen--landing .atlas-map-region__sort em {
  position: absolute;
  display: block;
  border: 2px solid var(--ink);
}

.screen--landing .atlas-map-region__beads i {
  top: 45%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
}

.screen--landing .atlas-map-region__beads i:nth-child(1) { left: 24%; }
.screen--landing .atlas-map-region__beads i:nth-child(2) { left: 46%; }
.screen--landing .atlas-map-region__beads i:nth-child(3) { left: 68%; }

.screen--landing .atlas-map-region__mosaic i {
  width: 13px;
  height: 13px;
  background: var(--mustard);
}

.screen--landing .atlas-map-region__mosaic i:nth-child(1) { left: 30%; top: 36%; }
.screen--landing .atlas-map-region__mosaic i:nth-child(2) { left: 50%; top: 28%; background: var(--forest); }
.screen--landing .atlas-map-region__mosaic i:nth-child(3) { left: 58%; top: 52%; background: var(--ink); }

.screen--landing .atlas-map-region__bridge::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 26%;
  height: 42%;
  border-top: 5px solid var(--mustard);
  border-radius: 999px 999px 0 0;
}

.screen--landing .atlas-map-region__sort i {
  width: 13px;
  height: 13px;
  left: 28%;
  top: 34%;
  background: var(--coral);
}

.screen--landing .atlas-map-region__sort b {
  width: 13px;
  height: 13px;
  left: 48%;
  top: 40%;
  border-radius: 50%;
  background: var(--forest);
}

.screen--landing .atlas-map-region__sort em {
  width: 0;
  height: 0;
  left: 58%;
  top: 52%;
  border: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 15px solid var(--ink);
}

.screen--landing .atlas-map-region__mirror::before,
.screen--landing .atlas-map-region__mirror::after {
  content: "";
  position: absolute;
  top: 22%;
  bottom: 20%;
  border-radius: 2px;
}

.screen--landing .atlas-map-region__mirror::before {
  left: 31%;
  width: 4px;
  background: var(--mustard);
}

.screen--landing .atlas-map-region__mirror::after {
  left: 50%;
  width: 4px;
  background: var(--coral);
}

.screen--landing .atlas-map-region__fold::before {
  content: "";
  position: absolute;
  left: 30%;
  top: 24%;
  width: 40%;
  height: 42%;
  background: var(--mustard);
  border: 2px solid var(--ink);
  clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);
}

.screen--landing .atlas-map-announce {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@keyframes atlasPulse {
  0%, 100% { opacity: 0.28; transform: translate(-50%, -50%) scale(0.9); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.16); }
}

@media (max-width: 900px) {
  .screen--landing .hero-panel--map {
    grid-template-columns: 1fr;
  }

  .screen--landing .atlas-map-section {
    padding: 1rem;
  }

  .screen--landing .atlas-map-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .screen--landing .atlas-map-stage {
    aspect-ratio: 4 / 5;
    min-height: 560px;
  }

  .screen--landing .atlas-map-region {
    left: var(--mx);
    top: var(--my);
    width: max(76px, var(--mw));
    min-height: max(62px, var(--mh));
  }

  .screen--landing .atlas-map-region__stamp {
    top: calc(100% - 0.15rem);
  }
}

@media (max-width: 600px) {
  .screen--landing .hero-actions--compact {
    max-width: none;
  }

  .screen--landing .atlas-map-section {
    box-shadow: 3px 3px 0 0 rgba(34,32,28,.20);
  }

  .screen--landing .atlas-map-stage {
    min-height: min(620px, calc(100vh - 220px));
  }

  .screen--landing .atlas-map-region__name {
    max-width: 88px;
    font-size: 0.68rem;
  }

  .screen--landing .atlas-map-region__meta {
    font-size: 0.54rem;
  }

  .screen--landing .atlas-map-region__shape {
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen--landing .atlas-map-region:hover .atlas-map-region__shape,
  .screen--landing .atlas-map-region:focus-visible .atlas-map-region__shape {
    transform: none !important;
  }

  .screen--landing .atlas-map-region__shimmer {
    animation: none !important;
    opacity: 0.55;
  }
}