html, body, #root { margin: 0; width: 100%; height: 100%; overflow: hidden; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0e1f2a; }
#world { width: 100%; height: 100%; display: block; }
.hud { position: fixed; left: 28px; top: 24px; max-width: 430px; color: #fff6df; padding: 22px 24px; border: 1px solid rgba(255,255,255,.22); border-radius: 28px; background: linear-gradient(135deg, rgba(101,45,31,.72), rgba(13,80,100,.46)); box-shadow: 0 20px 80px rgba(0,0,0,.32); backdrop-filter: blur(14px); }
.eyebrow { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; color: #ffd382; }
h1 { margin: 0; font-size: clamp(42px, 7vw, 82px); line-height: .88; text-shadow: 0 8px 30px rgba(0,0,0,.38); }
.hud p:not(.eyebrow) { font-size: 16px; line-height: 1.6; color: #fff1cf; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; }
.legend span, .biome-card { border-radius: 999px; padding: 9px 13px; color: #2d190d; background: #ffd382; font-weight: 800; font-size: 12px; }
.biome-card { position: fixed; right: 26px; bottom: 25px; background: #f7eee0; color: #9e442d; box-shadow: 0 14px 38px rgba(0,0,0,.24); }
@media (max-width: 720px) { .hud { left: 14px; right: 14px; top: 14px; max-width: none; } .biome-card { left: 14px; right: auto; } }

.hud { background: #3a211b; backdrop-filter: none; max-width: 350px; padding: 18px 20px; }
h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1; }
.hud p:not(.eyebrow) { font-size: 14px; line-height: 1.5; }
.places { position: fixed; bottom: 20px; left: 20px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100vw - 40px); }
.places button { border: 1px solid #ffd382; background: #3a211b; color: #fff6df; font: 600 13px system-ui; border-radius: 20px; min-height: 44px; padding: 10px 14px; cursor: pointer; }
.places button:focus-visible { outline: 3px solid #fff6df; outline-offset: 3px; }
@media (max-width: 720px) {
  .hud { padding: 14px 16px; } .hud p:not(.eyebrow), .legend { display: none; }
  .eyebrow { font-size: 10px; letter-spacing: .12em; } h1 { font-size: 32px; }
  .places { left: 14px; bottom: 14px; max-width: calc(100vw - 28px); }
  .places button { padding: 10px 12px; }
  .biome-card { bottom: 126px; font-size: 12px; }
}