/* QORLD: the universe skin. Loaded after qworld.css and fx.css. Colours come from the logo: deep indigo and violet, magenta,
   and the orange-gold of the wormhole's throat, which is also the one call-to-action colour. */
:root {
  --grad: linear-gradient(100deg, #ffb347 0%, #ff4fd8 55%, #8a4dff 100%);
  --orange: #ffb347; --orange2: #ff7a45; --indigo: #ffc067; --indigo2: #ffd9a0;
  --ink: #f3eeff; --mute: #a79ccc; --dim: #756a9c; --line: #251a47; --line2: #382a66;
}
body.home-map::before { opacity: .35; }
.top { background: rgba(8, 4, 22, .6); }
.sheet { background: rgba(8, 4, 22, .94); }
.card { background: linear-gradient(160deg, rgba(30, 18, 66, .66), rgba(10, 6, 28, .62)); border-color: rgba(170, 130, 255, .2); }
.card:hover { box-shadow: 0 24px 70px rgba(120, 60, 220, .25); }
.foot { background: rgba(6, 3, 16, .7); }
.top-links a.on { background: rgba(255, 179, 71, .14); color: #ffd9a0; }
.top-links a:hover { background: rgba(170, 130, 255, .12); }
.kicker { color: #e6dbff; }
.tag { background: rgba(255, 179, 71, .14); color: #ffc067; }
.seg button.on, .fp.on, .chip.on { background: rgba(255, 179, 71, .14); border-color: #ffb347; color: #fff; box-shadow: 0 0 0 1px rgba(255, 179, 71, .35), 0 0 24px rgba(255, 122, 69, .2); }
input:focus, textarea:focus { border-color: #ffb347; box-shadow: 0 0 0 4px rgba(255, 179, 71, .16); }
.link { color: #ffc067; }
::selection { background: rgba(255, 122, 69, .5); }

/* the one action colour: the wormhole's throat */
.btn { background: linear-gradient(180deg, #ffc15a, #ff7a45); color: #2a1100; text-shadow: none; font-weight: 800; border: 0; box-shadow: 0 10px 34px rgba(255, 122, 69, .35), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn:hover { background: linear-gradient(180deg, #ffcb73, #ff8a57); filter: none; box-shadow: 0 14px 44px rgba(255, 122, 69, .5), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn.ghost { background: rgba(255, 255, 255, .04); color: var(--ink); border: 1px solid rgba(190, 160, 255, .3); box-shadow: none; }
.btn.ghost:hover { background: rgba(255, 179, 71, .1); border-color: #ffb347; color: #fff; box-shadow: none; }
.btn:disabled { filter: grayscale(.4); }
.btn-wallet.on .dot { background: #ffb347; }
.step::before { background: linear-gradient(180deg, #ffc15a, #ff7a45); color: #2a1100; box-shadow: 0 0 22px rgba(255, 122, 69, .5); }
.bar i b { background: var(--grad); }

/* ---------- the map (home) ---------- */
body.home-map #app, body.home-map #view, body.home-map .page-in, body.home-map .map { pointer-events: none; }
body.home-map .top, body.home-map .sheet, body.home-map .map > *, body.home-map [data-below], body.home-map .foot { pointer-events: auto; }
body.home-map .top { background: rgba(8, 4, 22, .35); }
#labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; transition: opacity .3s; }
.wl { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 10px; background: rgba(12, 6, 30, .82); border: 1.5px solid rgba(255, 179, 71, .85); color: #ffe7c4; font: 700 12px/1 var(--mono); letter-spacing: .04em; white-space: nowrap; box-shadow: 0 6px 24px rgba(0, 0, 0, .5), 0 0 18px rgba(255, 140, 60, .25); will-change: transform; }
.wl b { color: #fff; font-weight: 800; }
.wl span { color: #ffc067; font-weight: 500; opacity: .9; }
.wl.demo { border-color: rgba(190, 160, 255, .55); box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.wl.on { background: rgba(255, 140, 60, .25); border-color: #ffd9a0; }
.demo { font: 700 9px var(--mono); font-style: normal; letter-spacing: .12em; padding: 2px 6px; border-radius: 5px; background: rgba(190, 160, 255, .22); color: #d8c9ff; vertical-align: middle; }
.map { position: relative; height: calc(100vh - 66px); min-height: 640px; }
.map > * { position: absolute; }
.glass { background: linear-gradient(160deg, rgba(26, 14, 58, .72), rgba(9, 5, 24, .7)); border: 1.5px solid rgba(190, 150, 255, .24); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-radius: 22px; box-shadow: 0 24px 80px rgba(0, 0, 0, .45); }
.hud-left { left: 24px; top: 20px; width: 360px; padding: 26px 26px 24px; background: linear-gradient(160deg, rgba(26, 14, 58, .72), rgba(9, 5, 24, .7)); border: 1.5px solid rgba(190, 150, 255, .24); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 22px; box-shadow: 0 24px 80px rgba(0, 0, 0, .45); }
.hud-title { font: 800 40px/1 var(--head); letter-spacing: .01em; color: #ffb347; text-shadow: 0 0 28px rgba(255, 140, 50, .6); margin: 0; }
.hud-sub { font: 600 18px var(--head); color: #f1e8ff; margin-top: 8px; letter-spacing: .02em; padding-bottom: 12px; border-bottom: 2px solid rgba(255, 179, 71, .6); width: max-content; }
.hud-p { color: #cfc4ee; font-size: 14.5px; line-height: 1.55; margin: 14px 0 18px; }
.hud-cta { width: 100%; height: 50px; border-radius: 14px; font-size: 15px; letter-spacing: .05em; }
.hud-x { position: absolute; right: 12px; top: 10px; width: 28px; height: 28px; border-radius: 9px; border: 1px solid rgba(190, 160, 255, .3); background: rgba(255, 255, 255, .05); color: #d8c9ff; font-size: 16px; line-height: 1; display: grid; place-items: center; }
.hud-left.min { width: auto; padding: 14px 52px 14px 20px; }
.hud-left.min .hud-sub, .hud-left.min .hud-p, .hud-left.min .hud-cta { display: none; }
.hud-left.min .hud-title { font-size: 22px; }
.hud-chips { right: 24px; top: 20px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.chip-s { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(12, 6, 30, .75); border: 1px solid rgba(190, 150, 255, .28); color: #cfc4ee; font: 500 13px var(--sans); backdrop-filter: blur(10px); }
.chip-s b { color: #fff; font-weight: 800; }
.dot-o { width: 8px; height: 8px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 10px #ff9a3c; }
.hud-right { right: 24px; top: 74px; width: 290px; padding: 18px 16px 10px; background: linear-gradient(160deg, rgba(26, 14, 58, .72), rgba(9, 5, 24, .7)); border: 1.5px solid rgba(190, 150, 255, .24); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 22px; box-shadow: 0 24px 80px rgba(0, 0, 0, .45); }
.feat-h { font: 700 12px var(--mono); letter-spacing: .16em; color: #ffc067; padding: 0 6px 10px; border-bottom: 1px solid rgba(255, 179, 71, .3); margin-bottom: 6px; }
.feat { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 6px; border: 0; border-bottom: 1px solid rgba(190, 150, 255, .12); background: none; text-align: left; color: #fff; border-radius: 12px; transition: background .2s; }
.feat:last-child { border-bottom: 0; }
.feat:hover { background: rgba(255, 179, 71, .1); }
.feat .fn { flex: 1; min-width: 0; display: grid; }
.feat .fn b { font: 800 15px var(--head); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat .fn small { color: #a79ccc; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat svg { color: #ffb347; flex: none; }
.orb { display: block; border-radius: 50%; object-fit: cover; flex: none; border: 1.5px solid rgba(190, 160, 255, .5); box-shadow: 0 0 16px rgba(138, 77, 255, .4); }
.orb.o0 { background: radial-gradient(circle at 35% 30%, #ff7ad9, #6a4dff 55%, #1a2a8a); } .orb.o1 { background: radial-gradient(circle at 35% 30%, #ffb347, #c2410c 55%, #240a05); } .orb.o2 { background: radial-gradient(circle at 35% 30%, #a8fff4, #14b8c6 55%, #052b3a); }
.orb.o3 { background: radial-gradient(circle at 35% 30%, #9bffd0, #22b573 55%, #0b2a1a); } .orb.o4 { background: radial-gradient(circle at 35% 30%, #e6f0ff, #5a8fff 55%, #10203a); } .orb.o5 { background: radial-gradient(circle at 35% 30%, #ffd1fb, #a03cff 55%, #2a0a3a); }
.sel { left: 24px; bottom: 150px; width: 340px; padding: 20px 20px 18px; display: grid; gap: 10px; background: linear-gradient(160deg, rgba(26, 14, 58, .85), rgba(9, 5, 24, .82)); border: 1.5px solid rgba(255, 179, 71, .55); border-radius: 22px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 80px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 140, 60, .15); }
.sel[hidden] { display: none; }
.sel-top { display: flex; align-items: center; gap: 14px; }
.sel-top b { font: 800 19px var(--head); color: #fff; display: block; }
.sel-top small { color: #a79ccc; font-family: var(--mono); font-size: 12.5px; }
.lvl-pill { width: max-content; padding: 6px 14px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 193, 90, .22), rgba(255, 122, 69, .22)); border: 1px solid rgba(255, 179, 71, .6); color: #ffd9a0; font: 700 13px var(--mono); letter-spacing: .04em; }
.bar-l { height: 8px; border-radius: 4px; background: rgba(190, 160, 255, .16); overflow: hidden; }
.bar-l i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ffb347, #ff4fd8); box-shadow: 0 0 14px rgba(255, 122, 69, .6); }
.sel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sel-grid span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(190, 160, 255, .16); color: #a79ccc; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sel-grid b { font: 800 16px var(--head); color: #fff; letter-spacing: -.01em; text-transform: none; }
.sel-find { margin: 0; color: #e9dfff; font-size: 14px; line-height: 1.4; }
.sel-find small { display: block; color: #ffc067; font: 700 10.5px var(--mono); letter-spacing: .14em; margin-bottom: 2px; }
.sel .btn { width: max-content; }
.map-ctl { right: 24px; bottom: 150px; display: grid; gap: 8px; }
.map-ctl button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(190, 150, 255, .3); background: rgba(12, 6, 30, .8); color: #ffd9a0; font: 700 20px var(--sans); display: grid; place-items: center; backdrop-filter: blur(10px); transition: background .2s, border-color .2s; }
.map-ctl button:hover { background: rgba(255, 179, 71, .16); border-color: #ffb347; }
.stat-strip { left: 24px; bottom: 56px; display: grid; grid-template-columns: repeat(4, auto); gap: 0; border: 1px solid rgba(190, 150, 255, .24); border-radius: 18px; background: rgba(12, 6, 30, .72); backdrop-filter: blur(12px); overflow: hidden; }
.stat-strip div { padding: 12px 24px; border-right: 1px solid rgba(190, 150, 255, .16); display: grid; gap: 1px; }
.stat-strip div:last-child { border-right: 0; }
.stat-strip b { font: 800 24px var(--head); color: #ffd9a0; letter-spacing: -.02em; }
.stat-strip span { color: #a79ccc; font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.map-hint { left: 50%; bottom: 46px; transform: translateX(-50%); color: rgba(220, 205, 255, .65); font: 500 12.5px var(--sans); white-space: nowrap; text-shadow: 0 2px 10px #000; }
.ticker { left: 0; right: 0; bottom: 0; height: 36px; overflow: hidden; background: rgba(8, 4, 22, .82); border-top: 1px solid rgba(190, 150, 255, .22); display: flex; align-items: center; backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker > div { display: flex; gap: 46px; width: max-content; animation: tick 60s linear infinite; padding-left: 24px; }
.ticker span { color: #ddd2ff; font: 500 13px var(--sans); white-space: nowrap; }
.ticker em { color: #ffc067; font-style: normal; margin-left: 10px; font-family: var(--mono); font-size: 12px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- below the map ---------- */
.demo-note { margin: 34px 0 0; padding: 16px 22px; border-radius: 16px; border: 1px dashed rgba(190, 150, 255, .4); background: rgba(138, 77, 255, .08); color: #d8c9ff; font-size: 14.5px; }
.demo-note[hidden] { display: none; }
.demo-note b { color: #ffc067; font-family: var(--mono); letter-spacing: .12em; margin-right: 10px; }
.lbs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lb { padding: 22px 22px 12px; }
.lb-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 179, 71, .3); margin-bottom: 4px; }
.lb-h h3 { font-size: 20px; }
.lb-h small { color: #ffc067; font: 700 11px var(--mono); letter-spacing: .14em; }
.lb-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(190, 150, 255, .12); transition: background .2s; }
.lb-row:last-child { border-bottom: 0; }
.lb-row:hover .nm b { color: #ffd9a0; }
.rk { width: 24px; text-align: center; font: 800 18px var(--head); color: #ffb347; }
.nm { flex: 1; min-width: 0; display: grid; }
.nm b { font: 800 16px var(--head); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm small { color: #a79ccc; font: 500 12.5px var(--mono); }
.vl { text-align: right; } .vl b { font: 800 17px var(--head); color: #fff; }
.lb-empty { color: #a79ccc; padding: 24px 0 14px; margin: 0; font-size: 14.5px; }
.steps.five { grid-template-columns: repeat(5, 1fr); }
.steps.five .step { padding: 22px; } .steps.five .step h3 { font-size: 17px; margin-bottom: 4px; } .steps.five .step p { font-size: 13.5px; }
.levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.lvl { padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(190, 150, 255, .2); background: rgba(255, 255, 255, .03); display: grid; gap: 2px; }
.lvl span { color: #ffb347; font: 800 13px var(--mono); }
.lvl b { font: 800 17px var(--head); color: #fff; letter-spacing: -.02em; } .lvl small { color: #a79ccc; font: 500 12.5px var(--mono); }
.lvl:nth-child(n+8) { border-color: rgba(255, 179, 71, .45); background: rgba(255, 179, 71, .06); }
.world-lv { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.world-lv .bar-l { width: 160px; }

@media (max-width: 1100px) { .steps.five { grid-template-columns: repeat(3, 1fr); } .levels { grid-template-columns: repeat(4, 1fr); } .hud-right { display: none; } }
@media (max-width: 800px) {
  .map { min-height: 700px; }
  .hud-left { left: 12px; right: 12px; top: 12px; width: auto; padding: 18px 18px 16px; }
  .hud-title { font-size: 28px; } .hud-p { font-size: 13px; margin: 10px 0 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hud-chips { display: none; }
  .sel { left: 12px; right: 12px; width: auto; bottom: 168px; }
  .map-ctl { right: 12px; bottom: 290px; grid-auto-flow: column; }
  .stat-strip { left: 12px; right: 12px; bottom: 44px; grid-template-columns: repeat(2, 1fr); }
  .stat-strip div { padding: 8px 14px; } .stat-strip b { font-size: 18px; }
  .map-hint { display: none; }
  .lbs { grid-template-columns: 1fr; } .steps.five { grid-template-columns: 1fr; } .levels { grid-template-columns: repeat(2, 1fr); }
}

.status-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.map.has-sel .hud-left, .map.has-sel .hud-right { opacity: 0; pointer-events: none; transform: translateX(-12px); }
.hud-left, .hud-right { transition: opacity .3s, transform .3s; }
.map.has-sel .sel { top: 20px; bottom: auto; }

body:not(.home-map) #stage { opacity: .6; }
#stage { transition: opacity .5s; }
@media (max-width: 640px) {
  .top-end > .ib, .top-end .top-cta { display: none; }
  .brand span { font-size: 16px; letter-spacing: -.01em; }
  .top-row { gap: 10px; }
  .btn-wallet { padding: 0 11px; }
  body:not(.home-map) #stage { opacity: .22; }
}
/* planets painted by planet.js stand in for worlds with no image */
.orb.planet { border: 0; background: none; box-shadow: 0 0 18px rgba(138, 77, 255, .35); }
img.cp.planet { border-radius: 50%; background: none; box-shadow: 0 0 22px rgba(138, 77, 255, .35); }