html, body { height: 100%; margin: 0; }
.map{
  background: linear-gradient(180deg, #f6e7a8 0%, #fffdf6 90%);
  font-family: system-ui, sans-serif;
  color: #3b2f2a;
}

.mapwrap{
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 18px;
}

.mapcard{
  width: min(980px, 96vw);
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(59,47,42,.22);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  display: grid;
  grid-template-columns: 320px 1fr;
  overflow: hidden;
}

.left{ padding: 18px; border-right: 1px solid rgba(59,47,42,.12); }
.right{ padding: 18px; }

h1{ margin: 0 0 8px 0; font-size: 18px; }
.tip{ margin: 0 0 14px 0; opacity: .8; font-size: 13px; }

.biomes{
  display: grid;
  gap: 10px;
}

.biome{
  padding: 12px 12px;
  border-radius: 999px;
  border: 1px solid rgba(59,47,42,.22);
  background: rgba(255,255,255,.7);
  cursor: pointer;
  text-align: left;
}
.biome:hover{ transform: translateY(-1px); }
.biome.isActive{
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.row{ margin-top: 14px; display: flex; gap: 10px; }
.smallbtn{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(59,47,42,.22);
  background: rgba(255,255,255,.75);
  cursor: pointer;
}

.previewFrame{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(59,47,42,.18);
  border-radius: 16px;
  padding: 14px;
  height: 520px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.previewFrame img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.previewLabel{
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(59,47,42,.18);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.music{ margin-top: 14px; width: 100%; }