:root {
  --paper:#FFFFFF;
  --ink:#171717;
  --coral:#F47F57;
}
* { box-sizing:border-box; }
html,body {
  margin:0;width:100%;height:100%;
  overflow:hidden;background:var(--paper);
}
body {
  font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
}
.stage {
  position:relative;width:100vw;height:100vh;min-height:680px;
  background:#fff;overflow:hidden;
}
.scene {
  position:absolute;left:50%;top:50%;
  width:min(82vw,980px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  overflow:visible;
}

/* Layer order:
   1. Globe
   2. Orbit / moving dots
   3. Currency cards */
.globe-shell {
  position:absolute;inset:8%;border-radius:50%;z-index:4;
}
.globe-mask {
  position:absolute;inset:0;border-radius:50%;
  overflow:hidden;background:#fff;
}
#globeCanvas {
  width:100%;height:100%;display:block;
}
.edge-fade {
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at center,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 78%,
    rgba(255,255,255,.08) 89%,
    rgba(255,255,255,.24) 100%);
}
.orbit-layer {
  position:absolute;inset:0;z-index:8;pointer-events:none;overflow:visible;
}
#orbitCanvas {
  width:100%;height:100%;display:block;overflow:visible;
}
.token-layer {
  position:absolute;inset:0;z-index:12;pointer-events:none;overflow:visible;
}

/* Glass currency card */
.token {
  --s:1; --o:1;
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(var(--s));
  opacity:var(--o);
  display:inline-flex;align-items:center;gap:13px;
  width:max-content;min-width:136px;
  height:64px;padding:0 20px 0 16px;
  border-radius:999px;white-space:nowrap;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.76) 38%,
      rgba(246,248,250,.68) 64%,
      rgba(236,239,242,.80) 100%);
  border:1px solid rgba(255,255,255,.90);
  box-shadow:
    0 24px 48px rgba(22,28,32,.10),
    0 10px 22px rgba(22,28,32,.08),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(222,226,230,.56);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  overflow:hidden;
  will-change:transform,opacity,left,top,box-shadow;
}
.token::before {
  content:"";
  position:absolute;left:4px;right:4px;top:4px;height:48%;
  border-radius:999px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.68) 48%,
    rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.token::after {
  content:"";
  position:absolute;inset:0;border-radius:999px;pointer-events:none;
  background:
    radial-gradient(110% 92% at 18% 18%,
      rgba(255,255,255,.82) 0%,
      rgba(255,255,255,0) 34%),
    radial-gradient(84% 120% at 88% 100%,
      rgba(220,224,229,.26) 0%,
      rgba(220,224,229,0) 52%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.badge {
  width:36px;height:36px;border-radius:50%;overflow:hidden;
  position:relative;flex:0 0 auto;z-index:1;
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 2px 7px rgba(20,24,24,.10),
             inset 0 1px 0 rgba(255,255,255,.55);
}
.code {
  font-size:19px;font-weight:700;letter-spacing:.01em;
  color:#1B1E1E;position:relative;z-index:1;
}

.badge.us {
  background:linear-gradient(180deg,
    #B22234 0 14.3%,#fff 14.3% 28.6%,
    #B22234 28.6% 42.9%,#fff 42.9% 57.2%,
    #B22234 57.2% 71.5%,#fff 71.5% 85.8%,
    #B22234 85.8% 100%);
}
.badge.us:before {
  content:"";position:absolute;left:0;top:0;width:54%;height:54%;background:#3C3B6E;
}
.badge.eu { background:#0A4ABF; }
.badge.eu:before {
  content:"✦";position:absolute;inset:0;display:grid;place-items:center;
  color:#F7C948;font-size:16px;
}
.badge.ae {
  background:linear-gradient(180deg,#009A49 0 33.33%,#fff 33.33% 66.66%,#000 66.66% 100%);
}
.badge.ae:before {
  content:"";position:absolute;left:0;top:0;width:28%;height:100%;background:#CE1126;
}
.badge.th {
  background:linear-gradient(180deg,#A51931 0 20%,#fff 20% 35%,#2D2A4A 35% 65%,#fff 65% 80%,#A51931 80% 100%);
}
.badge.sg { background:linear-gradient(180deg,#EF3340 0 50%,#fff 50% 100%); }
.badge.sg:before {
  content:"";position:absolute;left:18%;top:17%;width:34%;height:34%;
  background:#fff;border-radius:50%;
}
.badge.sg:after {
  content:"";position:absolute;left:25%;top:17%;width:24%;height:34%;
  background:#EF3340;border-radius:50%;
}
.badge.cn { background:#DE2910; }
.badge.cn:before {
  content:"★";position:absolute;left:17%;top:4%;
  font-size:15px;color:#FFDE00;line-height:1;
}

.note {
  position:absolute;left:22px;bottom:18px;color:#B3B5B8;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
@media(max-width:760px) {
  .scene { width:130vw;left:58%;top:51%; }
  .token { height:52px;min-width:112px;padding:0 16px 0 14px;gap:10px; }
  .badge { width:30px;height:30px; }
  .code { font-size:15px; }
  .note { font-size:9px;left:14px;bottom:12px; }
}