.world-hero {
  background:
    radial-gradient(circle at 78% 34%, rgba(112, 153, 184, .16), transparent 18rem),
    radial-gradient(circle at 86% 55%, rgba(0, 0, 0, .72), transparent 13rem),
    linear-gradient(130deg, rgba(212, 175, 88, .12), transparent 46%),
    var(--surface);
}

.world-hero::after {
  content: "◐";
  right: clamp(18px, 5vw, 58px);
  top: 18px;
  color: rgba(170, 205, 226, .13);
  font-family: Georgia, serif;
  font-size: clamp(92px, 17vw, 190px);
}

kbd {
  display: inline-block;
  min-width: 1.7em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0 .35em;
  background: var(--surface-2);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .78em;
  line-height: 1.5;
  text-align: center;
}

.globe-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #07090d;
  box-shadow: var(--shadow);
}

.globe-stage {
  position: relative;
  min-height: 540px;
  aspect-ratio: 16 / 11;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, .82) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 18%, rgba(172, 210, 235, .65) 0 1px, transparent 1.7px),
    radial-gradient(circle at 86% 69%, rgba(255, 255, 255, .68) 0 1px, transparent 1.5px),
    radial-gradient(circle at 31% 82%, rgba(153, 196, 223, .5) 0 1px, transparent 1.8px),
    radial-gradient(ellipse at 50% 48%, rgba(37, 66, 86, .22), rgba(7, 9, 13, .1) 38%, #05070a 73%),
    #05070a;
  background-size: 173px 149px, 229px 191px, 193px 211px, 263px 181px, auto, auto;
}

.globe-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 12% 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(72, 131, 170, .15), rgba(35, 84, 120, .05) 42%, transparent 70%);
  filter: blur(25px);
  pointer-events: none;
}

.globe-canvas,
.globe-fallback {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.globe-canvas {
  display: block;
  opacity: 0;
  outline: none;
  cursor: grab;
  touch-action: none;
  transition: opacity .32s ease;
}

.globe-canvas.is-ready { opacity: 1; }
.globe-canvas.has-failed { pointer-events: none; }
.globe-canvas:active { cursor: grabbing; }
.globe-canvas.has-region:not(:active) { cursor: pointer; }
.globe-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--gold); }

.globe-fallback {
  z-index: 1;
  object-fit: contain;
  padding: clamp(38px, 6vw, 70px);
  opacity: .8;
  transition: opacity .25s ease;
}

.globe-fallback[hidden] { display: none; }

.globe-loading {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(212, 175, 88, .35);
  border-radius: 999px;
  padding: 8px 13px;
  background: rgba(8, 10, 14, .82);
  color: var(--gold-soft);
  font-size: .8rem;
  backdrop-filter: blur(10px);
}

.globe-loading[hidden] { display: none; }

.globe-draft-badge,
.globe-phase {
  position: absolute;
  z-index: 5;
  border: 1px solid rgba(212, 175, 88, .25);
  background: rgba(8, 10, 14, .76);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.globe-draft-badge {
  top: 16px;
  left: 16px;
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--gold-soft);
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.globe-phase {
  right: 16px;
  bottom: 16px;
  border-color: rgba(131, 183, 216, .28);
  border-radius: 10px;
  padding: 7px 11px;
  color: #c1def0;
  font-size: .76rem;
}

.globe-region-tip {
  position: absolute;
  z-index: 7;
  display: grid;
  gap: 1px;
  min-width: 190px;
  border: 1px solid rgba(244, 203, 91, .76);
  border-radius: 10px;
  padding: 8px 11px;
  background: rgba(7, 12, 17, .92);
  color: #fff0b5;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.globe-region-tip[hidden] { display: none; }
.globe-region-tip strong { font-size: .82rem; }
.globe-region-tip span { color: #c8b977; font-size: .62rem; letter-spacing: .04em; }

.daycycle {
  border-top: 1px solid var(--line);
  padding: 18px;
  background:
    radial-gradient(circle at 12% 0, rgba(212, 175, 88, .09), transparent 20rem),
    radial-gradient(circle at 92% 100%, rgba(70, 119, 153, .12), transparent 22rem),
    #0d1015;
}

.daycycle__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.daycycle__kicker {
  display: block;
  color: var(--gold);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.daycycle__clock {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: clamp(1.8rem, 4vw, 2.65rem);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.04em;
}

.daycycle__summary {
  max-width: 520px;
  margin: 0;
  color: #bccbd4;
  font-size: .86rem;
  text-align: right;
}

.daycycle__range-label {
  display: block;
  margin-top: 17px;
  color: var(--muted);
  font-size: .72rem;
}

.daycycle__range {
  width: 100%;
  height: 28px;
  margin: 4px 0 2px;
  accent-color: var(--gold);
  cursor: ew-resize;
}

.daycycle__range:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.daycycle__range::-webkit-slider-runnable-track {
  height: 7px;
  border: 1px solid rgba(131, 183, 216, .18);
  border-radius: 999px;
  background: linear-gradient(90deg, #080b13 0%, #405669 22%, #d5b663 50%, #405669 78%, #080b13 100%);
}

.daycycle__range::-webkit-slider-thumb {
  width: 19px;
  height: 19px;
  margin-top: -7px;
  border: 2px solid #f3dda0;
  border-radius: 50%;
  background: #17130b;
  box-shadow: 0 0 0 4px rgba(212, 175, 88, .13);
  -webkit-appearance: none;
}

.daycycle__range::-moz-range-track {
  height: 7px;
  border: 1px solid rgba(131, 183, 216, .18);
  border-radius: 999px;
  background: linear-gradient(90deg, #080b13 0%, #405669 22%, #d5b663 50%, #405669 78%, #080b13 100%);
}

.daycycle__range::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border: 2px solid #f3dda0;
  border-radius: 50%;
  background: #17130b;
  box-shadow: 0 0 0 4px rgba(212, 175, 88, .13);
}

.daycycle__marks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 7px;
}

.daycycle__marks button,
.daycycle__toggle {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.daycycle__marks button {
  display: grid;
  gap: 1px;
  padding: 8px 9px;
  text-align: left;
}

.daycycle__marks button b { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; }
.daycycle__marks button span { overflow-wrap: anywhere; font-size: .67rem; line-height: 1.25; }

.daycycle__marks button:hover,
.daycycle__marks button:focus-visible,
.daycycle__marks button[aria-current="time"],
.daycycle__toggle:hover,
.daycycle__toggle:focus-visible,
.daycycle__toggle[aria-pressed="true"] {
  border-color: var(--line-strong);
  background: rgba(212, 175, 88, .08);
  color: var(--ink);
  outline: none;
}

.daycycle__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
}

.daycycle__toggle { padding: 9px 14px; }
.daycycle__speed { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .76rem; }
.daycycle__speed select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px 28px 6px 10px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
}
.daycycle__speed select:focus-visible { border-color: var(--gold); outline: 2px solid rgba(212, 175, 88, .3); }

.daycycle__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 13px;
  color: var(--muted);
  font-size: .7rem;
}

.daycycle__legend span { display: inline-flex; align-items: center; gap: 6px; }
.daycycle__swatch { width: 9px; height: 9px; border-radius: 50%; }
.daycycle__swatch--sun { background: #e4c675; box-shadow: 0 0 7px rgba(228, 198, 117, .6); }
.daycycle__swatch--eclipse { background: #6d8da2; box-shadow: 0 0 7px rgba(109, 141, 162, .45); }
.daycycle__swatch--night { background: #101829; border: 1px solid #476079; }

.globe-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 14px;
  background: linear-gradient(180deg, #101318, #0b0d11);
}

.globe-controls button,
.globe-region-open {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}

.globe-region-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.globe-region-open small { color: #bda75f; font-size: .64rem; }

.globe-controls button:hover,
.globe-controls button:focus-visible,
.globe-controls button[aria-pressed="true"],
.globe-region-open:hover,
.globe-region-open:focus-visible {
  border-color: var(--line-strong);
  color: var(--ink);
  background: rgba(212, 175, 88, .09);
  outline: none;
}

.globe-controls button:disabled { cursor: not-allowed; opacity: .45; }

.globe-status {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .035);
  padding: 10px 15px 13px;
  background: #0b0d11;
  color: var(--muted);
  font-size: .76rem;
}

.world-draft-callout { margin-top: 16px; }
.world-draft-callout strong { color: var(--gold-soft); }

.world-grid,
.biome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.world-card,
.biome-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--surface);
}

.world-card::after {
  content: "";
  position: absolute;
  right: -44px;
  top: -44px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  pointer-events: none;
}

.world-card--day::after {
  background: radial-gradient(circle, rgba(88, 166, 205, .27), rgba(212, 175, 88, .09) 48%, transparent 70%);
}

.world-card--night::after {
  border: 1px solid rgba(147, 183, 207, .13);
  background: radial-gradient(circle at 40% 40%, #07090d 0 48%, rgba(89, 128, 153, .14) 51%, transparent 68%);
}

.world-card h3,
.biome-card h3 { position: relative; z-index: 1; margin-top: 5px; }
.world-card p,
.biome-card p { position: relative; z-index: 1; margin: 8px 0 0; color: var(--muted); }

.biome-grid { margin-top: 18px; }
.biome-card { padding-left: 62px; }
.biome-card__icon {
  position: absolute;
  left: 18px;
  top: 21px;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: #92b4a4;
  font-family: Georgia, serif;
}

@media (max-width: 900px) {
  .globe-stage { min-height: 470px; }
}

@media (max-width: 650px) {
  .globe-panel { border-radius: 16px; }
  .globe-stage { min-height: 0; aspect-ratio: 1 / 1; }
  .globe-fallback { padding: 32px; }
  .globe-draft-badge { top: 10px; left: 10px; max-width: calc(100% - 20px); font-size: .58rem; }
  .globe-phase { right: 10px; bottom: 10px; }
  .daycycle { padding: 15px 12px; }
  .daycycle__head { display: grid; gap: 8px; }
  .daycycle__summary { text-align: left; }
  .daycycle__marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daycycle__actions { justify-content: space-between; }
  .globe-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .globe-controls button,
  .globe-region-open { justify-content: center; padding-inline: 8px; text-align: center; }
  .world-grid,
  .biome-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .daycycle__actions { align-items: stretch; flex-direction: column; }
  .daycycle__speed { justify-content: space-between; }
  .globe-controls { grid-template-columns: 1fr; }
  .biome-card { padding-left: 18px; padding-top: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .globe-canvas,
  .globe-fallback { transition: none; }
}