:root {
  --ink: #20362e;
  --muted: #748579;
  --cream: #f5f2e9;
  --paper: #fffdf8;
  --sage: #dce8d8;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: "DM Sans", sans-serif;
}
body::before, body::after {
  position: fixed;
  z-index: -1;
  font-size: 15rem;
  line-height: 1;
  opacity: .08;
  pointer-events: none;
}
body::before { content: "❧"; top: -4rem; left: -2rem; color: #709b71; transform: rotate(25deg); }
body::after { content: "✾"; right: -2rem; bottom: -3rem; color: #a77652; transform: rotate(-18deg); }
.page-shell { max-width: 1240px; min-height: 100vh; margin: auto; padding: 28px 5vw 18px; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px 12px 12px 3px; color: white; background: #527b58; font-size: 22px; transform: rotate(-10deg); }
.eyebrow { margin: 0 0 6px; color: #6f8d72; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
h1 { margin: 0; font: 700 20px "Playfair Display", serif; }
.online-pill { padding: 10px 15px; border: 1px solid #d6dfd0; border-radius: 30px; color: #6c7d70; background: rgba(255,255,255,.55); font-size: 12px; }
.pulse { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #72b179; box-shadow: 0 0 0 4px #dcebdc; }
.content { display: grid; grid-template-columns: minmax(230px, .75fr) minmax(500px, 1.65fr); align-items: center; gap: clamp(35px, 7vw, 100px); flex: 1; padding: 45px 0; }
.intro h2 { margin: 0 0 20px; font: 700 clamp(38px, 5vw, 63px)/1.02 "Playfair Display", serif; letter-spacing: -.035em; }
.intro h2 em { color: #719572; font-style: normal; }
.intro-copy { max-width: 350px; margin: 0; color: var(--muted); line-height: 1.7; font-size: 14px; }
.controls { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 28px; }
.key { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #c9d6c6; border-radius: 5px; color: #5e795f; background: #e8f0e5; font-size: 11px; font-weight: 700; }
.controls-label { margin-left: 6px; color: #87958a; font-size: 11px; }
.legend { display: flex; align-items: center; gap: 8px; margin-top: 34px; color: #87958a; font-size: 11px; }
.legend-dot { width: 10px; height: 10px; border: 2px solid #fff; border-radius: 3px; background: #efb85f; box-shadow: 0 0 0 2px #efb85f; }
.map-card { padding: 18px 18px 14px; border: 1px solid #e1e4d8; border-radius: 18px; background: var(--paper); box-shadow: 0 22px 60px rgba(55, 75, 58, .12); }
.map-header { display: flex; justify-content: space-between; margin: 0 3px 12px; color: #8a9a8b; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
#connection-status { color: #89a68d; letter-spacing: .05em; text-transform: lowercase; }
#world { display: block; width: 100%; aspect-ratio: 1.28; border-radius: 10px; background: #e7f0e2; }
footer { display: flex; justify-content: center; gap: 14px; color: #a5b0a3; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 800px) {
  .content { grid-template-columns: 1fr; gap: 30px; padding: 35px 0; }
  .intro h2 { font-size: 42px; }
  .intro-copy { max-width: 520px; }
  .map-card { padding: 12px; }
}
@media (max-width: 480px) { .topbar { align-items: flex-start; flex-direction: column; } .online-pill { align-self: flex-start; } }