/* Mobile composition: a bento overview, one workspace, and a swipeable rail. */
.hero-copy { padding-bottom: 0; }
.hero { overflow: clip; }
.hero-glow { background: radial-gradient(ellipse at 85% 80%, #7f40b82a, transparent 66%); }
.stats { gap: 12px; padding: 0; margin-top: 30px; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.stats .stat { border: 1px solid #d6a1fa28; border-radius: 19px; background: linear-gradient(130deg,#c994ef10,#b17edf04); padding: 20px; min-width: 0; }
.stats .main-stat { position: relative; overflow: hidden; isolation: isolate; min-height: 146px; padding: 23px; background: radial-gradient(ellipse at 94% 10%,#995cd636,transparent 65%),linear-gradient(120deg,#cb9cf518,#bc83ee06); }
.main-stat > .stat-label, .main-stat > div:not(.hero-art) { position: relative; z-index: 1; }
.main-stat > div:not(.hero-art) { font-size: clamp(32px,9.2vw,39px); gap: 8px; margin-top: 11px; }
.stats .stat:nth-child(2) { grid-column: auto; display: block; }
.stats .stat:nth-child(2) .stat-label { margin: 0 0 9px; }
.stats .stat:nth-child(2) > div { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; white-space: normal; line-height: 1.25; font-size: 34px; }
.stats .stat:nth-child(2) > div > small { font-size: 14px; margin: 0; }
.stats .stat:nth-child(3) { padding: 20px 17px; }
.stats .stat-label { line-height: 1.7; font-size: 14px; overflow-wrap: anywhere; }
.stats .stat > div.stat-text { font-size: 17px; }
.stats .stat > div.stat-text > small { font-size: 14px; line-height: 1.7; }
.stats .stat:nth-child(4) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding: 10px 3px 0; border: 0; border-radius: 0; background: none; }
.stats .stat:nth-child(4) .stat-label { margin: 0; }
.stats .stat:nth-child(4) .stat-text { display: flex; align-items: center; flex-wrap: wrap; gap: 0 7px; padding: 0; }
.stats .stat:nth-child(4) .stat-text > small { margin: 0 0 0 7px; }
.stats .stat:nth-child(4) .live-dot { margin: 0; }
.main-stat > .hero-art { position: absolute; inset-block-start: -23px; inset-inline-end: -40px; display: flex; width: 205px; max-width: none; height: 205px; margin: 0; opacity: .35; z-index: 0; pointer-events: none; direction: ltr; }
.main-stat .prism { width: 205px; height: 210px; flex-shrink: 0; transform: rotate(12deg); }
.main-stat .hero-art .orbit, .main-stat .hero-art .orbit-dot, .main-stat .hero-art .floating-label, .main-stat .hero-art .sparkle, .main-stat .hero-art .art-coordinate { display: none; }
.missions-section { padding-top: 37px; padding-bottom: 8px; }
.journey-workspace { margin-bottom: 17px; }
.journey-workspace-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; padding: 5px; border-radius: 17px; border: 1px solid #d4a6f22a; background: #d1a1f208; box-shadow: inset 0 1px 0 #fff07; }
.journey-workspace-tabs > button { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 49px; padding: 10px 8px; border: 1px solid transparent; border-radius: 12px; color: #ad94bf; background: transparent; font-size: 16px; line-height: 1.6; text-align: center; }
.journey-workspace-tabs > button .icon { width: 18px; height: 18px; flex-shrink: 0; }
.journey-workspace-tabs > button[aria-selected=true] { color: #f2e3fc; border-color: #e4bfff38; background: linear-gradient(125deg,#c28dea38,#b983db19); box-shadow: inset 0 1px 0 #ffffff15,0 3px 12px #05010840; }
.journey-workspace-tabs > button:focus-visible, .ecosystem-controls > button:focus-visible { outline: 2px solid #cf9df4; outline-offset: 3px; }
.journey-snapshot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 5px 3px; }
.journey-snapshot > div { min-width: 0; }
.journey-snapshot span { display: block; color: #ac91bf; font-size: 14px; line-height: 1.7; }
.journey-snapshot strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-top: 3px; color: #e7d7f2; font: 500 23px/1.5 var(--number); }
.journey-snapshot b { font-weight: 500; direction: ltr; unicode-bidi: isolate; }
.journey-snapshot small { font-size: 14px; font-weight: 400; color: #ac91bf; }
.snapshot-progress { text-align: end; flex-shrink: 0; }
.snapshot-progress strong { justify-content: flex-end; color: #cca1eb; direction: ltr; }
#missions[data-view=task] #rewards, #missions[data-view=rewards] .journey-main { display: none; }
.dashboard-layout { gap: 0; }
.rewards-card { width: 100%; }
.next-mystery { margin-top: 12px; padding: 10px 3px; border: 0; background: none; box-shadow: none; gap: 13px; }
.next-mystery .mystery-cards { transform: scale(.8); transform-origin: center; min-width: 37px; }
.next-mystery p { font-size: 15px; }
.community-strip { display: none; }
.ecosystem-section { padding-top: 32px; padding-bottom: 30px; }
.ecosystem-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; align-items: center; margin-bottom: 20px; }
.ecosystem-eyebrow { grid-column: 1 / -1; }
.ecosystem-heading h2 { grid-column: 1; font-size: 25px; margin: 9px 0 5px; }
.ecosystem-heading p { grid-column: 1 / -1; }
.ecosystem-controls { grid-column: 2; grid-row: 2; display: flex; gap: 6px; }
.ecosystem-controls > button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #d4a5ed30; border-radius: 50%; color: #d3a7ef; background: #c99af30a; }
.ecosystem-controls > button:disabled { opacity: .3; }
.ecosystem-controls .icon { width: 18px; height: 18px; }
.ecosystem-links { display: flex; flex-direction: row; align-items: stretch; gap: 13px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-width: none; padding-block: 2px 5px; }
.ecosystem-links::-webkit-scrollbar { display: none; }
.ecosystem-link { position: relative; display: flex; flex: 0 0 79%; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 30px; min-height: 217px; padding: 23px; scroll-snap-align: start; background: radial-gradient(ellipse at 90% 0,#ad69dc26,transparent 65%),linear-gradient(135deg,#bf8feb13,#b173d906); border-radius: 21px; overflow: hidden; }
.ecosystem-link:nth-child(2) { background: radial-gradient(ellipse at 100% 0,#705ecc36,transparent 70%),linear-gradient(135deg,#a397f011,#b173d906); }
.ecosystem-link:nth-child(3) { background: radial-gradient(ellipse at 90% 0,#ad72a72b,transparent 65%),linear-gradient(135deg,#d798c211,#b173d906); }
.ecosystem-icon { width: 45px; height: 47px; border-radius: 14px; }
.ecosystem-link > .icon { position: absolute; inset-inline-end: 23px; top: 28px; margin: 0; width: 20px; height: 20px; }
.ecosystem-link-copy { gap: 8px; }
.ecosystem-link-copy strong { font-size: 21px; }
.ecosystem-link-copy > span { font-size: 16px; line-height: 1.75; }
.ecosystem-position { display: flex; gap: 6px; justify-content: center; padding-top: 16px; }
.ecosystem-position i { width: 5px; height: 5px; border-radius: 5px; background: #624673; transition: width .2s ease,background .2s ease; }
.ecosystem-position i.active { width: 20px; background: #c69ce5; }
.footer-tagline { display: none; }
.contract-vault { margin-top: 23px; }
.footer-quick-links > a { min-height: 48px; padding: 10px 7px; border-radius: 11px; }
.footer-quick-links .icon { display: none; }
html[dir=rtl] .ecosystem-controls .icon { transform: scaleX(-1); }
@media(max-width:375px) {
  .stats { gap: 10px; padding-inline: 0; }
  .stats .stat { padding: 17px 15px; }
  .stats .main-stat { padding: 21px; }
  .main-stat > div:not(.hero-art) { max-width: 100%; font-size: 32px; letter-spacing: -1.1px; }
  .main-stat > .hero-art { inset-inline-end: -65px; opacity: .3; }
  .stats .stat:nth-child(3) { padding: 17px 15px; }
  .stats .stat:nth-child(4) { padding: 10px 3px 0; }
  .stats .stat:nth-child(4) .stat-text > small { display: none; }
  .journey-workspace-tabs > button { font-size: 16px; gap: 7px; }
  .journey-snapshot { gap: 10px; }
  .journey-snapshot strong { font-size: 22px; }
  .ecosystem-heading { column-gap: 8px; }
  .ecosystem-heading h2 { font-size: 23px; }
  .ecosystem-controls { gap: 3px; }
  .ecosystem-link { flex-basis: 85%; padding: 21px; }
}
@media(prefers-reduced-motion:reduce) { .ecosystem-position i { transition: none; } }